/* ============================================================
   四平蜜餞 · 前台 (賣場人員版) CSS
   載具：平板橫式，100% 滿版
   ============================================================ */
:root {
  --bg:       #F7F3EE;
  --surface:  #FFFFFF;
  --border:   #E8E0D5;
  --plum:     #3D1F5C;
  --plum-lt:  #5A3280;
  --amber:    #C9820A;
  --amber-lt: #F5A623;
  --amber-bg: #FFF8ED;
  --jade:     #1E7A52;
  --jade-lt:  #27A86F;
  --red:      #C53030;
  --red-lt:   #E53E3E;
  --red-bg:   #FFF5F5;
  --slate:    #64748B;
  --slate-lt: #94A3B8;
  --slate-bg: #F1F5F9;
  --text:     #1A1A2E;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --sh-card:  0 2px 10px rgba(0,0,0,.07);
  --sh-lift:  0 8px 28px rgba(0,0,0,.14);
  --sh-modal: 0 24px 64px rgba(0,0,0,.22);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;font-family:system-ui,'PingFang TC','Microsoft JhengHei',sans-serif;background:var(--bg);color:var(--text);}
.shell{width:100%;height:100vh;display:flex;flex-direction:column;overflow:hidden;}

/* Header */
.header{background:var(--plum);padding:0 20px;height:54px;display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand{font-size:17px;font-weight:700;color:var(--amber-lt);letter-spacing:.06em;margin-right:auto;}

/* Topbar */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:8px 16px;display:flex;align-items:center;gap:9px;flex-shrink:0;}
.search-wrap{flex:1;position:relative;}
.search-wrap input{width:100%;padding:9px 16px 9px 36px;border:1.5px solid var(--border);border-radius:30px;font-size:14px;background:var(--slate-bg);outline:none;font-family:inherit;transition:border-color .2s;color:var(--text);}
.search-wrap input:focus{border-color:var(--amber-lt);background:#fff;}
.search-wrap .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--slate-lt);}
.btn{padding:9px 15px;border:none;border-radius:var(--r-sm);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:.2s;}
.btn-red{background:var(--red-lt);color:#fff;box-shadow:0 2px 8px rgba(229,62,62,.25);}
.btn-red:hover,.btn-red:active{background:var(--red);}
.btn-green{background:var(--jade-lt);color:#fff;box-shadow:0 2px 8px rgba(27,122,82,.25);}
.btn-green:hover,.btn-green:active{background:var(--jade);}
.btn-slate{background:var(--slate-bg);color:var(--slate);border:1.5px solid var(--border);}
.btn-slate:hover,.btn-slate:active{background:var(--border);}
/* cart-pill 保留（topbar 上的確認清單按鈕） */
.cart-pill{display:flex;align-items:center;gap:8px;background:var(--plum);color:#fff;padding:7px 16px 7px 12px;border-radius:30px;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s;flex-shrink:0;border:none;font-family:inherit;}
.cart-pill:hover,.cart-pill:active{background:var(--plum-lt);}
.cart-count{background:var(--amber-lt);color:var(--plum);font-size:11px;font-weight:800;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* Shortage banner */
.shortage-banner{background:var(--red-bg);border-bottom:1px solid #FED7D7;padding:7px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.shortage-banner.empty{display:none;}
.shortage-banner-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--red);flex-shrink:0;padding-right:10px;border-right:1px solid #FED7D7;}
.blink{width:7px;height:7px;border-radius:50%;background:var(--red-lt);animation:bl 1.2s ease-in-out infinite;flex-shrink:0;}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.2}}
.shortage-banner-list{display:flex;gap:8px;overflow-x:auto;flex:1;}
.shortage-chip{background:#fff;border:1px solid #FCA5A5;color:var(--red);font-size:12px;font-weight:600;padding:3px 12px;border-radius:20px;white-space:nowrap;flex-shrink:0;cursor:pointer;transition:.15s;}
.shortage-chip:hover{background:var(--red);color:#fff;}

/* Category bar */
.cat-bar{background:var(--surface);border-bottom:1px solid var(--border);display:flex;padding:0 16px;flex-shrink:0;overflow-x:auto;scrollbar-width:thin;}
.cat-bar::-webkit-scrollbar{height:3px;}
.cat-tab{padding:12px 20px;font-size:14px;font-weight:600;color:var(--slate);cursor:pointer;border-bottom:3px solid transparent;transition:.2s;white-space:nowrap;flex-shrink:0;}
.cat-tab.on{color:var(--amber);border-bottom-color:var(--amber-lt);}
.cat-tab:hover:not(.on){color:var(--text);}

/* Main */
.main-area{flex:1;display:flex;overflow:hidden;}
.grid-area{flex:1;overflow-y:auto;padding:16px;}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.prod-card{background:var(--surface);border-radius:var(--r-md);overflow:hidden;cursor:pointer;box-shadow:var(--sh-card);border:2px solid transparent;transition:transform .15s,box-shadow .15s,border-color .15s;position:relative;}
.prod-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lift);border-color:var(--amber-lt);}
.prod-card:active{transform:translateY(0);}
.prod-card.sold-out{cursor:not-allowed;opacity:.5;}
.prod-card.sold-out:hover{transform:none;box-shadow:var(--sh-card);border-color:transparent;}
.prod-photo{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--border);}
.prod-shortage-badge{position:absolute;top:8px;right:8px;background:var(--red-lt);color:#fff;font-size:10px;font-weight:700;padding:3px 7px;border-radius:5px;}
.prod-in-cart{position:absolute;top:8px;left:8px;background:var(--amber);color:#fff;font-size:10px;font-weight:700;padding:3px 7px;border-radius:5px;}
.prod-info{padding:8px 8px 10px;}
.prod-name{font-size:14px;font-weight:700;color:var(--text);text-align:center;}

/* Cart sidebar */
/* cart sidebar 已移除 */

/* Overlay */
.overlay{position:fixed;inset:0;background:rgba(20,10,40,.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s;}
.overlay.open{opacity:1;pointer-events:all;}
.modal-x{width:32px;height:32px;border-radius:50%;background:var(--slate-bg);border:none;cursor:pointer;font-size:17px;color:var(--slate);display:flex;align-items:center;justify-content:center;}
.modal-x:hover{background:var(--border);}

/* Spec modal */
.spec-modal{background:var(--surface);border-radius:var(--r-xl);width:520px;overflow:hidden;box-shadow:var(--sh-modal);transform:translateY(18px) scale(.97);transition:transform .25s;}
.overlay.open .spec-modal{transform:translateY(0) scale(1);}
.spec-modal-top{display:flex;}
.spec-modal-img{width:160px;height:160px;object-fit:cover;flex-shrink:0;background:var(--border);}
.spec-modal-info{padding:20px;flex:1;display:flex;flex-direction:column;justify-content:center;}
.spec-modal-cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:4px;}
.spec-modal-name{font-size:22px;font-weight:800;color:var(--plum);}
.spec-modal-body{padding:14px 20px 18px;}
.spec-row{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--slate-bg);border:1.5px solid var(--border);border-radius:var(--r-sm);margin-bottom:9px;}
.spec-tag{background:var(--amber-bg);color:var(--amber);border:1px solid #F5D98A;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:700;min-width:72px;text-align:center;flex-shrink:0;}
.spec-weight{font-size:12px;color:var(--slate-lt);flex:1;}
.qty-ctrl{display:flex;align-items:center;gap:8px;}
.qb{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);font-size:18px;font-weight:700;cursor:pointer;color:var(--slate);display:flex;align-items:center;justify-content:center;transition:.15s;}
.qb:hover,.qb:active{border-color:var(--amber-lt);color:var(--amber);}
.qn{font-size:17px;font-weight:700;min-width:32px;text-align:center;color:var(--plum);}
.btn-urgent-sm{padding:6px 10px;background:var(--red-lt);color:#fff;border:none;border-radius:6px;font-size:11px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:.15s;}
.btn-urgent-sm:hover,.btn-urgent-sm:active{background:var(--red);}
.btn-normal-sm{padding:6px 10px;background:var(--plum);color:#fff;border:none;border-radius:6px;font-size:11px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:.15s;}
.btn-normal-sm:hover,.btn-normal-sm:active{background:var(--plum-lt);}
.btn-urgent-sm:disabled,.btn-normal-sm:disabled{opacity:.6;cursor:not-allowed;}
.spec-modal-footer{padding:0 20px 18px;display:flex;gap:10px;}
.btn-cancel-sm{padding:11px 18px;background:var(--slate-bg);color:var(--slate);border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;}
.btn-add-cart{flex:1;padding:12px;background:var(--plum);color:#fff;border:none;border-radius:var(--r-sm);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:.2s;}
.btn-add-cart:hover,.btn-add-cart:active{background:var(--plum-lt);}

/* Add product modal */
.add-modal{background:var(--surface);border-radius:var(--r-xl);width:500px;max-height:90vh;overflow-y:auto;box-shadow:var(--sh-modal);transform:translateY(18px) scale(.97);transition:transform .25s;}
.overlay.open .add-modal{transform:translateY(0) scale(1);}
.add-modal-hd{padding:20px 22px 14px;border-bottom:1px solid var(--border);font-size:16px;font-weight:800;color:var(--plum);display:flex;align-items:center;justify-content:space-between;}
.fg{padding:12px 22px 0;}
.fg label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);margin-bottom:5px;}
.fg input,.fg select{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:14px;font-family:inherit;background:var(--slate-bg);outline:none;transition:border-color .2s;color:var(--text);}
.fg input:focus,.fg select:focus{border-color:var(--amber-lt);background:#fff;}
.spec-edit-list{display:flex;flex-direction:column;gap:7px;}
.spec-edit-row{display:grid;grid-template-columns:1fr 100px 32px;gap:7px;align-items:center;}
.spec-edit-row input{width:100%;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:13px;font-family:inherit;background:var(--slate-bg);outline:none;transition:border-color .2s;color:var(--text);}
.spec-edit-row input:focus{border-color:var(--amber-lt);background:#fff;}
.spec-edit-labels{display:grid;grid-template-columns:1fr 100px 32px;gap:7px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-lt);padding:0 1px 3px;}
.spec-del-btn{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);font-size:14px;color:var(--slate-lt);cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;}
.spec-del-btn:hover{border-color:var(--red-lt);color:var(--red);background:var(--red-bg);}
.spec-add-btn{margin-top:5px;padding:9px;border:1.5px dashed var(--amber-lt);border-radius:var(--r-sm);background:var(--amber-bg);color:var(--amber);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:.2s;width:100%;}
.spec-add-btn:hover{background:#FCEFD2;}
.photo-drop{border:2px dashed var(--border);border-radius:var(--r-sm);padding:20px;text-align:center;color:var(--slate-lt);font-size:13px;cursor:pointer;transition:.2s;}
.photo-drop:hover{border-color:var(--amber-lt);color:var(--amber);}
.photo-drop span{font-size:24px;display:block;margin-bottom:5px;}
.add-modal-ft{padding:14px 22px 20px;display:flex;gap:10px;}

/* Submit modal */
.submit-modal{background:var(--surface);border-radius:var(--r-xl);width:560px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-modal);transform:translateY(18px) scale(.97);transition:transform .25s;}
.overlay.open .submit-modal{transform:translateY(0) scale(1);}
.submit-hd{padding:20px 22px 14px;border-bottom:1px solid var(--border);font-size:16px;font-weight:800;color:var(--plum);display:flex;align-items:center;justify-content:space-between;}
.submit-list{flex:1;overflow-y:auto;padding:12px 18px;}
.submit-row{display:grid;grid-template-columns:50px 1fr 78px 55px 58px;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--slate-bg);}
.submit-row:last-child{border-bottom:none;}
.submit-row img{width:50px;height:50px;border-radius:var(--r-sm);object-fit:cover;background:var(--border);}
.sr-name{font-size:14px;font-weight:700;color:var(--text);}
.sr-sub{font-size:11px;color:var(--slate-lt);margin-top:2px;}
.sr-spec{background:var(--amber-bg);color:var(--amber);font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;text-align:center;}
.sr-qty{font-size:15px;font-weight:800;color:var(--plum);text-align:center;}
.sr-urgent-flag{background:var(--red-bg);color:var(--red);font-size:10px;font-weight:700;padding:3px 7px;border-radius:5px;text-align:center;}
.sr-normal{font-size:10px;color:var(--slate-lt);text-align:center;}
.submit-ft{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;}
.btn-final-submit{flex:1;padding:13px;background:var(--plum);color:#fff;border:none;border-radius:var(--r-sm);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:.2s;}
.btn-final-submit:hover,.btn-final-submit:active{background:var(--plum-lt);}

/* Cat edit modal */
.cat-modal{background:var(--surface);border-radius:var(--r-xl);width:460px;max-height:82vh;display:flex;flex-direction:column;box-shadow:var(--sh-modal);transform:translateY(18px) scale(.97);transition:transform .25s;}
.overlay.open .cat-modal{transform:translateY(0) scale(1);}
.cat-modal-hd{padding:20px 22px 13px;border-bottom:1px solid var(--border);font-size:16px;font-weight:800;color:var(--plum);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.cat-modal-body{flex:1;overflow-y:auto;padding:14px 18px;}
.cat-edit-row{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);margin-bottom:7px;cursor:grab;transition:box-shadow .15s,border-color .15s;user-select:none;}
.cat-edit-row.dragging{opacity:.5;border-style:dashed;}
.cat-edit-row.drag-over{border-color:var(--amber-lt);background:var(--amber-bg);}
.cat-drag-handle{color:var(--slate-lt);font-size:18px;cursor:grab;flex-shrink:0;}
.cat-edit-input{flex:1;padding:7px 9px;border:1.5px solid transparent;border-radius:6px;font-size:14px;font-weight:600;font-family:inherit;background:transparent;outline:none;transition:.15s;color:var(--text);}
.cat-edit-input:focus{border-color:var(--amber-lt);background:var(--amber-bg);}
.cat-del-btn{width:29px;height:29px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);font-size:13px;color:var(--slate-lt);cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cat-del-btn:hover{border-color:var(--red-lt);color:var(--red);background:var(--red-bg);}
.cat-add-row{display:flex;gap:8px;}
.cat-new-input{flex:1;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:14px;font-family:inherit;background:var(--slate-bg);outline:none;transition:border-color .2s;color:var(--text);}
.cat-new-input:focus{border-color:var(--amber-lt);background:#fff;}
.cat-new-add{padding:9px 16px;background:var(--plum);color:#fff;border:none;border-radius:var(--r-sm);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:.2s;}
.cat-new-add:hover{background:var(--plum-lt);}
.cat-modal-ft{padding:13px 18px;border-top:1px solid var(--border);display:flex;gap:10px;flex-shrink:0;}

/* Toast */
/* ── Toast：大型置中提示 ── */
.toast-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;pointer-events:none;opacity:0;transition:opacity .25s;}
.toast-overlay.show{opacity:1;}
.toast{
  background:rgba(20,10,40,.88);
  color:#fff;
  padding:28px 48px;
  border-radius:20px;
  font-size:22px;
  font-weight:700;
  text-align:center;
  line-height:1.5;
  box-shadow:0 16px 48px rgba(0,0,0,.35);
  max-width:520px;
  transform:scale(.88);
  transition:transform .25s;
  backdrop-filter:blur(6px);
}
.toast-overlay.show .toast{transform:scale(1);}
.toast.green{border-top:5px solid var(--jade-lt);}
.toast.red{border-top:5px solid var(--red-lt);}
.toast.amber{border-top:5px solid var(--amber-lt);}

/* Loading spinner */
.loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--slate-lt);font-size:14px;gap:8px;}

::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}

/* ── 編輯產品 Modal ── */
.edit-modal-box {
  background: var(--surface);
  border-radius: var(--r-xl);
  width: 580px;
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-modal);
  transform: translateY(18px) scale(.97);
  transition: transform .25s;
}
.overlay.open .edit-modal-box { transform: translateY(0) scale(1); }

.edit-modal-hd {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 16px; font-weight: 800; color: var(--plum);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.edit-modal-hd span { flex: 1; }
.btn-back {
  padding: 6px 12px;
  background: var(--slate-bg);
  color: var(--slate);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: .2s;
}
.btn-back:hover { background: var(--border); }

/* 分類 tab 列（第一層） */
.edit-cat-bar {
  display: flex; gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  padding: 0 4px;
}
.edit-cat-tab {
  padding: 10px 18px;
  font-size: 13px; font-weight: 600; color: var(--slate);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap; flex-shrink: 0; transition: .2s;
}
.edit-cat-tab.on { color: var(--amber); border-bottom-color: var(--amber-lt); }
.edit-cat-tab:hover:not(.on) { color: var(--text); }

/* 產品列表（第一層） */
.edit-prod-list { flex: 1; overflow-y: auto; padding: 10px 16px; }
.edit-prod-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--slate-bg);
}
.edit-prod-row:last-child { border-bottom: none; }
.edit-prod-img {
  width: 50px; height: 50px;
  border-radius: var(--r-sm); object-fit: cover;
  flex-shrink: 0; background: var(--border);
}
.edit-prod-name { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.edit-shortage-tag {
  background: var(--red-bg); color: var(--red);
  border: 1px solid #FCA5A5;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 5px;
}
.edit-prod-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-edit-action {
  padding: 6px 12px; border: none; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: .15s;
}
.btn-edit { background: var(--plum-bg, #F3F0F9); color: var(--plum); border: 1.5px solid var(--border); }
.btn-edit:hover { background: var(--plum); color: #fff; }
.btn-del  { background: var(--red-bg); color: var(--red); border: 1.5px solid #FCA5A5; }
.btn-del:hover { background: var(--red); color: #fff; }

/* 第二層：編輯表單 */
.edit-layer2-body { flex: 1; overflow-y: auto; padding: 14px 20px; }
.fg2 { margin-bottom: 14px; }
.fg2 label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); margin-bottom: 5px; }
.fg2 input[type=text], .fg2 select {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-size: 14px; font-family: inherit;
  background: var(--slate-bg); outline: none;
  transition: border-color .2s; color: var(--text);
}
.fg2 input[type=text]:focus, .fg2 select:focus { border-color: var(--amber-lt); background: #fff; }
.upload-label-sm {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--slate-bg); cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--slate);
  transition: .2s;
}
.upload-label-sm:hover { border-color: var(--amber-lt); color: var(--amber); }
.edit-modal-ft {
  padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 10px; flex-shrink: 0;
}

/* ── 規格缺料 Banner ── */
.shortage-specs-banner { background: #FFF3EC; border-bottom-color: #FFCBA4; }
.shortage-spec-chip { background: #fff3ec; border-color: #E8630A; color: #B7430D; }
.shortage-spec-chip:hover { background: #E8630A; color: #fff; }

/* ── 規格 4欄 編輯列 ── */
/* ── 規格照片 ── */
.spec-img-wrap {
  display: flex; align-items: center; gap: 3px; overflow: hidden;
}
.spec-preview-sm {
  width: 36px !important; height: 36px !important;
  object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border); flex-shrink: 0;
  cursor: default;
}
.spec-img-upload-btn {
  width: 36px !important; height: 36px !important;
  font-size: 15px !important;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--border); border-radius: 6px;
  cursor: pointer; color: var(--slate-lt);
  background: var(--slate-bg); flex-shrink: 0; transition: .15s;
}
.spec-img-upload-btn:hover { border-color: var(--amber-lt); color: var(--amber); }
.spec-edit-row-4col {
  display: grid !important;
  grid-template-columns: 1fr 80px 78px 30px !important;
  gap: 6px; align-items: center;
}
.spec-edit-labels-4col {
  display: grid !important;
  grid-template-columns: 1fr 80px 78px 30px !important;
  gap: 6px;
}

/* ── 點餐紀錄 Modal ── */
.history-modal {
  background: var(--surface);
  border-radius: var(--r-xl);
  width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-modal);
  transform: translateY(18px) scale(.97);
  transition: transform .25s;
}
.overlay.open .history-modal { transform: translateY(0) scale(1); }
.history-hd {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 16px; font-weight: 800; color: var(--plum);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.history-date {
  padding: 8px 24px;
  font-size: 12px; color: var(--slate-lt);
  background: var(--amber-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.history-table-wrap {
  flex: 1; overflow-y: auto; padding: 0;
}
.history-table {
  width: 100%; border-collapse: collapse;
}
.history-table th {
  position: sticky; top: 0;
  background: var(--plum); color: #fff;
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 10px 16px; text-align: left;
}
.history-table td {
  padding: 11px 16px; font-size: 13px;
  border-bottom: 1px solid var(--slate-bg);
  color: var(--text);
}
.history-table tr:last-child td { border-bottom: none; }
.history-table tr:hover td { background: var(--slate-bg); }