/* ============================================================
   對數系統 Pro-Max · 共享樣式 (雙主題, 終端級, 零聯網)
   ============================================================ */
/* ---- 設計 Token (主題無關)：所有間距/圓角/字級/控件尺寸收斂到呢度 ---- */
:root{
  /* 間距 4px scale — 所有 margin/padding/gap 用呢啲 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  /* 圓角：4 級 (8–12px 精緻範圍) */
  --r-sm:8px;   /* input / pill / stepper / chip / icon-btn */
  --r-md:10px;  /* 卡內元素：led-card / var-row / pay-item / drv / oh-item */
  --r-lg:12px;  /* 頁面面板：.card / .fin / .payroll-panel / .chart-card */
  --r-pill:999px;
  /* 字級：7 步 (收斂原本 ~22 個值) */
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:18px;
  --num-md:22px; --num-lg:28px; --num-hero:40px;  /* 數字專用 */
  /* 控件尺寸 + 動效 */
  --tap:44px; --t-fast:.18s;
}
:root[data-theme="dark"]{
  /* 中性 zinc 高級調色 (#09090b / #18181b / #27272a) */
  --bg:#09090b; --bg2:#101012; --card:#18181b; --card2:#1f1f23; --hi:#27272a;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.14);
  --ink:#fafafa; --mut:#a1a1aa; --mut2:#8b8b93;
  --gold:#e2b53e; --cash:#4ade80; --credit:#fbbf24;
  --cash-bd:rgba(74,222,128,.40); --cash-bg:rgba(74,222,128,.10);
  --credit-bd:rgba(251,191,36,.40); --credit-bg:rgba(251,191,36,.10);
  --bank:#60a5fa; --bank-bd:rgba(96,165,250,.40); --bank-bg:rgba(96,165,250,.12);
  --danger:#f87171; --danger-bd:rgba(248,113,113,.40); --danger-bg:rgba(248,113,113,.12);
  --feature:linear-gradient(180deg,#202024,#18181b);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.35);
  --page:#09090b;
}
:root[data-theme="light"]{
  /* 純白 + 中性灰 (#ffffff / #fafafa / #f4f4f5) */
  --bg:#ffffff; --bg2:#fafafa; --card:#ffffff; --card2:#fafafa; --hi:#f4f4f5;
  --line:rgba(0,0,0,.08); --line2:rgba(0,0,0,.14);
  --ink:#18181b; --mut:#71717a; --mut2:#52525b;
  --gold:#b8860b; --cash:#16a34a; --credit:#b45309;
  --cash-bd:rgba(22,163,74,.35); --cash-bg:rgba(22,163,74,.07);
  --credit-bd:rgba(180,83,9,.35); --credit-bg:rgba(180,83,9,.06);
  --bank:#2563eb; --bank-bd:rgba(37,99,235,.32); --bank-bg:rgba(37,99,235,.06);
  --danger:#dc2626; --danger-bd:rgba(220,38,38,.32); --danger-bg:rgba(220,38,38,.06);
  --feature:linear-gradient(180deg,#ffffff,#f4f4f5);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.05);
  --page:#fafafa;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; background:var(--bg); }
body{
  color:var(--ink); background:var(--page); min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang HK","Microsoft JhengHei","Heiti TC","Noto Sans CJK TC",sans-serif;
  font-size:var(--t-md); line-height:1.6; -webkit-font-smoothing:antialiased;
  padding:18px 16px calc(40px + env(safe-area-inset-bottom)); max-width:1100px; margin:0 auto; letter-spacing:.2px;
  transition:background .3s,color .3s;
}
input,select,textarea,button{ touch-action:manipulation; font-family:inherit; }
/* 員工頁：桌面收窄成置中表單欄 (唔好拉成成屏稀疏) */
body.wb{ max-width:760px; }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.hide{ display:none !important; }
@media(prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ===== Header ===== */
header.top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 16px; border-bottom:1px solid var(--line); margin-bottom:20px; flex-wrap:wrap; }
header.top .brand{ font-size:var(--t-xs); color:var(--mut); letter-spacing:5px; text-transform:uppercase; }
header.top .title{ font-size:25px; font-weight:800; line-height:1.1; margin-top:3px; }
header.top .title .pro{ font-size:var(--t-xs); color:var(--bg); background:var(--gold); border-radius:5px; padding:2px 7px; vertical-align:middle; margin-left:8px; font-weight:800; letter-spacing:1px; }
header.top .rhs{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.who{ font-size:var(--t-xs); color:var(--mut2); text-align:right; }
.who b{ color:var(--ink); font-size:var(--t-sm); }
.role-badge{ display:inline-block; font-size:var(--t-xs); font-weight:800; padding:2px 8px; border-radius:var(--r-sm); border:1px solid; }
.role-badge.admin{ color:var(--gold); border-color:var(--gold); }
.role-badge.staff{ color:var(--cash); border-color:var(--cash-bd); }
.live{ font-size:var(--t-xs); color:var(--mut); display:flex; align-items:center; gap:6px; }
.live .dot{ width:7px; height:7px; border-radius:50%; background:var(--cash); box-shadow:0 0 8px var(--cash); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.icon-btn{ display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--line2); color:var(--ink); border-radius:var(--r-sm); padding:8px 12px; font-size:var(--t-sm); font-weight:700; cursor:pointer; transition:background .18s,border-color .18s; min-height:40px; }
.icon-btn:hover{ background:var(--hi); border-color:var(--gold); }
.icon-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.icon-btn svg{ width:16px; height:16px; }
.theme-btn .ti-dark{ display:none; } :root[data-theme="dark"] .theme-btn .ti-dark{ display:inline-flex; }
:root[data-theme="dark"] .theme-btn .ti-light{ display:none; }

/* ===== 登入頁 ===== */
.login-wrap{ max-width:420px; margin:8vh auto 0; }
.login-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 26px; box-shadow:var(--shadow); }
.login-card h1{ font-size:26px; font-weight:900; margin:0 0 4px; }
.login-card h1 .pro{ font-size:var(--t-xs); color:var(--bg); background:var(--gold); border-radius:5px; padding:2px 7px; margin-left:8px; }
.login-card .sub{ color:var(--mut); font-size:var(--t-sm); margin-bottom:22px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:var(--t-sm); color:var(--mut2); font-weight:700; margin-bottom:6px; }
.field input{ width:100%; background:var(--bg); border:1px solid var(--line2); border-radius:var(--r-md); color:var(--ink); font-size:var(--t-md); padding:13px 14px; min-height:50px; transition:border-color .15s; }
.field input:focus{ outline:none; border-color:var(--gold); }
.login-btn{ width:100%; background:var(--gold); color:#000; border:none; border-radius:var(--r-md); font-size:var(--t-lg); font-weight:900; padding:15px; cursor:pointer; min-height:54px; margin-top:6px; transition:opacity .18s,transform .1s; }
:root[data-theme="light"] .login-btn{ color:#fff; }
.login-btn:hover{ opacity:.9; } .login-btn:active{ transform:scale(.98); }
.login-err{ color:var(--danger); font-size:var(--t-sm); font-weight:700; margin-top:12px; min-height:20px; text-align:center; }
.demo-accs{ margin-top:22px; border-top:1px dashed var(--line2); padding-top:16px; }
.demo-accs .dt{ font-size:var(--t-xs); color:var(--mut); margin-bottom:8px; letter-spacing:1px; }
.demo-acc{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 12px; background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:7px; cursor:pointer; transition:background .15s,border-color .15s; }
.demo-acc:hover{ background:var(--hi); border-color:var(--gold); }
.demo-acc .da-l{ font-size:var(--t-sm); font-weight:700; } .demo-acc .da-l small{ color:var(--mut2); font-weight:500; margin-left:6px; }
.demo-acc .da-r{ font-size:var(--t-xs); color:var(--mut); font-family:monospace; }
.demo-acc .role-badge{ font-size:var(--t-xs); }

/* ===== 區塊 / 卡 ===== */
.block{ margin-bottom:24px; }
.block-h{ display:flex; align-items:center; gap:10px; margin:0 2px 12px; flex-wrap:wrap; }
.block-h .idx{ width:25px; height:25px; border:1px solid var(--line2); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:var(--t-xs); color:var(--gold); font-weight:800; }
.block-h h2{ font-size:var(--t-lg); font-weight:800; margin:0; }
.block-h .hint{ font-size:var(--t-xs); color:var(--mut); margin-left:auto; }
.block-h.sub-h{ margin-top:var(--s-6); }
.block-h.sub-h h2{ font-size:var(--t-md); }
.block-h .sub-h-tag{ color:var(--mut2); font-size:var(--t-sm); font-weight:500; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.card.pad{ padding:var(--s-4); overflow:visible; }
.card.pad .add-row, .card.pad .btn-arc{ margin-top:var(--s-3); }

/* ===== 表格 ===== */
table{ width:100%; border-collapse:collapse; }
th{ background:var(--card2); color:var(--mut); font-size:var(--t-xs); font-weight:700; letter-spacing:.5px; text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
td{ padding:9px 12px; border-bottom:1px solid var(--line); font-size:var(--t-md); vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
.t-right{ text-align:right; } .t-center{ text-align:center; }
input.cell,select.cell{ width:100%; background:var(--bg); border:1px solid var(--line2); border-radius:var(--r-sm); color:var(--ink); font-size:var(--t-md); padding:9px 10px; font-variant-numeric:tabular-nums; transition:border-color .15s; min-height:42px; }
input.cell:focus,select.cell:focus{ outline:none; border-color:var(--gold); }
input.cell.amt{ text-align:right; font-weight:700; }
select.cell{ -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:28px; background-repeat:no-repeat; background-position:right 10px center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
input.cell::-webkit-outer-spin-button,input.cell::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; }

/* 微調器 */
.stepper{ display:flex; align-items:center; gap:6px; justify-content:center; }
.stepper button{ width:40px; height:40px; border:1px solid var(--line2); background:var(--hi); color:var(--ink); border-radius:var(--r-sm); font-size:20px; font-weight:800; cursor:pointer; transition:background .15s,border-color .15s; line-height:1; }
.stepper button:hover{ background:var(--card2); border-color:var(--gold); }
.stepper button:active{ transform:scale(.92); }
.stepper input{ width:58px; text-align:center; background:var(--bg); border:1px solid var(--line2); border-radius:var(--r-sm); color:var(--ink); font-size:var(--t-lg); font-weight:800; padding:8px 4px; font-variant-numeric:tabular-nums; min-height:42px; }
.stepper input:focus{ outline:none; border-color:var(--gold); }
.use{ font-size:20px; font-weight:800; color:var(--gold); } .use small{ font-size:var(--t-xs); color:var(--mut); font-weight:600; }

/* 狀態 pill */
.pill{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-md); padding:9px 14px; font-size:var(--t-sm); font-weight:800; cursor:pointer; transition:background .15s,border-color .15s,transform .1s; white-space:nowrap; min-height:42px; border:1px solid; }
.pill:active{ transform:scale(.96); } .pill:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.pill.cash{ background:var(--cash-bg); color:var(--cash); border-color:var(--cash-bd); }
.pill.bank{ background:var(--bank-bg); color:var(--bank); border-color:var(--bank-bd); }
.pill:hover{ filter:brightness(1.12); }
.pill.credit{ background:var(--credit-bg); color:var(--credit); border-color:var(--credit-bd); }

/* ---- 全域：所有掣/輸入框 focus-visible 金色環 (無障礙) ---- */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }

/* 🏦 銀行過數對數提示 + 已對數 */
.bank-alert{ background:var(--bank-bg); color:var(--bank); border:1px solid var(--bank-bd); border-radius:var(--r-md); padding:13px 16px; font-size:var(--t-sm); font-weight:700; margin-top:12px; }
.bank-alert b{ font-size:var(--t-lg); }
.rec-chk{ display:inline-flex; align-items:center; gap:6px; font-size:var(--t-xs); font-weight:800; border:1px solid var(--line2); background:var(--card2); color:var(--mut2); border-radius:var(--r-sm); padding:6px 10px; cursor:pointer; min-height:38px; white-space:nowrap; transition:background .15s,color .15s,border-color .15s; }
.rec-chk:hover{ border-color:var(--bank-bd); }
.rec-chk.done{ background:var(--bank-bg); color:var(--bank); border-color:var(--bank-bd); }
.pill[disabled]{ opacity:.55; cursor:default; }
.flag-tag{ display:inline-block; margin-left:6px; background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-bd); border-radius:var(--r-sm); padding:1px 7px; font-size:var(--t-xs); font-weight:800; }

.del{ width:38px; height:38px; border:1px solid var(--line2); background:transparent; color:var(--mut2); border-radius:var(--r-sm); font-size:var(--t-md); cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.del:hover{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger-bd); }
.add-row,.btn-arc{ width:100%; background:transparent; border:1.5px dashed var(--line2); color:var(--mut2); border-radius:var(--r-md); padding:15px; font-size:var(--t-md); font-weight:800; cursor:pointer; transition:background .15s,color .15s,border-color .15s; margin-top:12px; }
.add-row:hover,.btn-arc:hover{ background:var(--card2); color:var(--ink); border-color:var(--gold); }
.btn-arc{ border-style:solid; border-color:var(--gold); color:var(--ink); }
.var-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); margin-top:14px; flex-wrap:wrap; box-shadow:var(--shadow); }
.var-row .vl{ font-size:var(--t-md); font-weight:700; } .var-row .vl small{ display:block; color:var(--mut); font-size:var(--t-xs); font-weight:500; }

/* 巨型財務卡 */
.fin-cards{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:640px){ .fin-cards{ grid-template-columns:repeat(3,1fr); } }
.fin{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow); }
.fin.feature{ border-color:var(--gold); background:var(--feature); }
.fin .fl{ font-size:var(--t-sm); color:var(--mut2); font-weight:700; display:flex; align-items:center; gap:7px; }
.fin .mark{ width:11px; height:11px; border-radius:3px; display:inline-block; border:1px solid; }
.fin .mark.cash{ background:var(--cash-bg); border-color:var(--cash-bd); } .fin .mark.credit{ background:var(--credit-bg); border-color:var(--credit-bd); } .fin .mark.gold{ background:var(--gold); border-color:var(--gold); }
.fin .fsub{ font-size:var(--t-xs); color:var(--mut); margin-top:3px; min-height:16px; }
.fin .fbig{ font-size:40px; font-weight:900; line-height:1.04; margin-top:10px; letter-spacing:-1.5px; }
.fin.green .fbig{ color:var(--cash); } .fin.yellow .fbig{ color:var(--credit); } .fin.feature .fbig{ color:var(--gold); }

/* 司機卡 */
.drv-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px; }
@media(min-width:640px){ .drv-grid{ grid-template-columns:repeat(3,1fr); } }
.drv{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; box-shadow:var(--shadow); }
.drv .dn{ font-size:19px; font-weight:900; display:flex; align-items:baseline; justify-content:space-between; }
.drv .dn .pts{ font-size:var(--t-xs); color:var(--mut2); font-weight:700; } .drv .dn .pts b{ color:var(--gold); font-size:22px; }
.drv .dl{ display:flex; justify-content:space-between; font-size:var(--t-sm); padding:8px 0; border-top:1px solid var(--line); margin-top:8px; }
.drv .dl span:first-child{ color:var(--mut2); } .drv .dl span:last-child{ font-weight:800; }
.drv .dl.cash span:last-child{ color:var(--cash); } .drv .dl.credit span:last-child{ color:var(--credit); }

/* ===== 💰 出糧面板 (老細第一眼) ===== */
.payroll-panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-5); margin-top:var(--s-3); box-shadow:var(--shadow); }
.payroll-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--line); }
.payroll-head .ph-l{ font-size:var(--t-md); font-weight:800; color:var(--ink); }
.payroll-head .ph-total{ font-size:38px; font-weight:900; color:var(--gold); letter-spacing:-1px; line-height:1; }
.payroll-grid{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:14px; }
@media(min-width:560px){ .payroll-grid{ grid-template-columns:repeat(3,1fr); } }
.pay-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 15px; }
.pay-nm{ font-size:var(--t-lg); font-weight:800; color:var(--ink); } .pay-nm small{ display:block; font-size:var(--t-xs); color:var(--mut2); font-weight:500; }
.pay-amt{ font-size:24px; font-weight:900; color:var(--gold); }
.payroll-foot{ font-size:var(--t-xs); color:var(--mut); margin-top:12px; } .payroll-foot b{ color:var(--ink); }

/* Tabs */
.tabs{ display:inline-flex; background:var(--card2); border:1px solid var(--line2); border-radius:var(--r-md); padding:4px; gap:4px; flex-wrap:wrap; }
.tabs button{ border:none; background:transparent; color:var(--mut2); font-size:var(--t-sm); font-weight:800; padding:11px 18px; border-radius:var(--r-sm); cursor:pointer; transition:background .18s,color .18s; }
.tabs button.on{ background:var(--gold); color:#000; }
:root[data-theme="light"] .tabs button.on{ color:#fff; }
.tabs button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* 日選擇器 */
.day-pick{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.day-pick select{ background:var(--card); border:1px solid var(--line2); color:var(--ink); border-radius:var(--r-sm); padding:10px 30px 10px 12px; font-size:var(--t-sm); font-weight:700; min-height:42px; -webkit-appearance:none; appearance:none; cursor:pointer; background-repeat:no-repeat; background-position:right 10px center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.day-add{ background:var(--card); border:1px solid var(--gold); color:var(--gold); border-radius:var(--r-sm); padding:10px 14px; font-size:var(--t-sm); font-weight:800; cursor:pointer; min-height:42px; transition:background .18s; }
.day-add:hover{ background:var(--hi); }

/* ===== 員工流水帳：手機卡片 (代替 table，唔再夾) ===== */
.led-cards{ display:flex; flex-direction:column; gap:12px; }
.led-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 13px; box-shadow:var(--shadow); }
.lc-head{ display:flex; align-items:center; gap:9px; }
.lc-no{ font-size:var(--t-xs); font-weight:800; color:var(--mut2); background:var(--card2); border:1px solid var(--line2); border-radius:var(--r-sm); padding:4px 8px; flex:none; }
.lc-zone{ flex:1; min-width:0; font-weight:700; }
.lc-del{ flex:none; width:40px; height:40px; }
.lc-body{ display:flex; gap:9px; margin-top:10px; }
.lc-f{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.lc-f label{ font-size:var(--t-xs); color:var(--mut2); font-weight:700; padding-left:2px; }
.lc-f:first-child{ flex:1.4; } .lc-qty{ flex:1; } .lc-amt{ flex:1.3; }
.lc-f .cell{ width:100%; min-width:0; }
/* 更次 + 狀態掣：上下兩行，各自全闊、≥44px，唔再迫埋一行縮到睇唔到 */
.lc-foot{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.lc-shift{ width:100%; min-height:44px; }
.lc-status{ width:100%; justify-content:center; min-height:46px; }
@media(max-width:420px){
  .lc-shift{ font-size:var(--t-sm); }
  .lc-status{ font-size:var(--t-sm); padding:9px; }
  .lc-f label{ font-size:var(--t-xs); }
}

/* ===== 更次切換 (早更/夜更/全日) ===== */
.shift-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.shift-bar .shift-lbl{ font-size:var(--t-sm); color:var(--mut2); font-weight:700; }
.shift-seg{ display:inline-flex; background:var(--card2); border:1px solid var(--line2); border-radius:var(--r-md); padding:3px; gap:3px; }
.shift-seg button{ border:none; background:transparent; color:var(--mut2); font-size:var(--t-sm); font-weight:800; padding:9px 16px; border-radius:var(--r-sm); cursor:pointer; transition:background .18s,color .18s; min-height:40px; }
.shift-seg button.on{ background:var(--gold); color:#000; }
:root[data-theme="light"] .shift-seg button.on{ color:#fff; }
.shift-seg button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ===== 託管層：開工點貨 + 交更交收 ===== */
.onhand-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.oh-item{ background:var(--card2); border:1px solid var(--line2); border-radius:var(--r-md); padding:12px; text-align:center; }
.oh-item .oh-lbl{ font-size:var(--t-md); font-weight:800; color:var(--gold); margin-bottom:8px; }
.oh-note{ font-size:var(--t-xs); color:var(--mut2); margin-top:12px; line-height:1.5; }
.oh-report{ margin-top:10px; font-size:var(--t-xs); color:var(--mut2); }
.oh-report b{ color:var(--ink); font-weight:700; }
.oh-report .ohr-line{ padding:5px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; }
.ho-form{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:560px){ .ho-form{ grid-template-columns:repeat(3,1fr); } }
.ho-field label, .ho-g label{ display:block; font-size:var(--t-xs); color:var(--mut2); font-weight:700; margin-bottom:5px; }
.ho-goods{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px; }
@media(min-width:560px){ .ho-goods{ grid-template-columns:repeat(4,1fr); } }
.ho-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--card2); border:1px solid var(--line2); border-radius:var(--r-md); padding:10px 13px; margin-top:8px; }
.ho-row-l{ font-size:var(--t-sm); font-weight:700; } .ho-row-l small{ display:block; color:var(--mut2); font-weight:500; font-size:var(--t-xs); }
.ho-list-t{ font-size:var(--t-sm); color:var(--mut2); font-weight:700; margin-bottom:4px; }
/* admin 託管鏈 */
.cust-h{ font-size:var(--t-sm); font-weight:800; color:var(--ink); margin-bottom:10px; }
.cust-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.cust-row:first-of-type{ border-top:none; }
.cust-row .cust-r{ color:var(--gold); font-weight:700; font-variant-numeric:tabular-nums; }
.shift-tag{ font-size:var(--t-xs); color:var(--mut2); border:1px solid var(--line2); border-radius:5px; padding:1px 5px; }
.cust-flow{ display:grid; grid-template-columns:1fr; gap:4px; padding:11px 0; border-top:1px solid var(--line); }
@media(min-width:620px){ .cust-flow{ grid-template-columns:auto 1fr auto; align-items:center; gap:12px; } }
.cust-flow:first-of-type{ border-top:none; }
.cf-arrow{ font-size:var(--t-sm); color:var(--mut2); } .cf-arrow b{ color:var(--cash); }
.cf-from b, .cf-to b{ color:var(--ink); } .cf-to{ font-weight:700; }
.cust-flag{ background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-bd); border-radius:var(--r-sm); padding:9px 12px; font-size:var(--t-sm); font-weight:700; margin-top:6px; }

/* ===== 圖表 ===== */
.charts-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:6px; }
@media(min-width:720px){ .charts-grid{ grid-template-columns:1fr 1fr; } }
.chart-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow); }
.chart-card h3{ font-size:var(--t-sm); font-weight:800; margin:0 0 14px; color:var(--ink); }
.chart-card h3 small{ color:var(--mut); font-weight:500; font-size:var(--t-xs); margin-left:6px; }
.ch-track{ stroke:var(--line2); } .ch-grid{ stroke:var(--line); stroke-width:1; }
.ch-svg{ width:180px; height:180px; display:block; } .ch-svg-line{ width:100%; height:auto; }
.ch-donut-wrap{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ch-center-lbl{ fill:var(--mut2); font-size:var(--t-xs); font-weight:700; } .ch-center-val{ fill:var(--ink); font-size:20px; font-weight:900; }
.ch-legend{ display:flex; flex-direction:column; gap:7px; } .ch-leg-item{ font-size:var(--t-sm); color:var(--mut2); display:flex; align-items:center; gap:7px; } .ch-leg-item b{ color:var(--ink); } .ch-leg-item small{ color:var(--mut); }
.ch-dot{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.ch-axis{ fill:var(--mut); font-size:var(--t-xs); } .ch-line{ stroke-width:2.5; fill:none; } .ch-line-dot{ stroke:var(--bg); stroke-width:1.5; }
/* 圖表配色 class（跟主題）*/
.seg-cash,.bar-cash,.ch-dot.seg-cash{ stroke:var(--cash); } .ch-dot.seg-cash,.bar-cash{ background:var(--cash); } .bar-cash{ fill:var(--cash); }
.seg-credit{ stroke:var(--credit); } .ch-dot.seg-credit,.bar-credit{ background:var(--credit); } .bar-credit{ fill:var(--credit); }
.seg-bank{ stroke:var(--bank); } .ch-dot.seg-bank{ background:var(--bank); }
.bar-gold,.ch-dot.bar-gold{ background:var(--gold); } .bar-gold{ fill:var(--gold); }
.line-cash{ stroke:var(--cash); } .ch-dot.line-cash{ background:var(--cash); }
.line-credit{ stroke:var(--credit); } .ch-dot.line-credit{ background:var(--credit); }
.line-gold{ stroke:var(--gold); } .ch-dot.line-gold{ background:var(--gold); }
/* 直條 */
.ch-bars{ display:flex; align-items:flex-end; gap:10px; padding-top:10px; }
.ch-bar-col{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.ch-bar-val{ font-size:var(--t-sm); font-weight:800; color:var(--ink); }
.ch-bar-track{ width:100%; max-width:60px; display:flex; align-items:flex-end; justify-content:center; }
.ch-bar-fill{ width:36px; border-radius:var(--r-sm) 7px 0 0; transition:height .3s; min-height:3px; }
.bar-cash.ch-bar-fill,.ch-bar-fill.bar-cash{ background:var(--cash); } .ch-bar-fill.bar-credit{ background:var(--credit); } .ch-bar-fill.bar-gold{ background:var(--gold); }
.ch-bar-lbl{ font-size:var(--t-xs); color:var(--mut2); font-weight:700; }
/* 橫條 */
.ch-hbars{ display:flex; flex-direction:column; gap:10px; }
.ch-hbar-row{ display:flex; align-items:center; gap:10px; font-size:var(--t-sm); }
.ch-hbar-lbl{ width:54px; color:var(--mut2); font-weight:700; flex:none; }
.ch-hbar-track{ flex:1; height:18px; background:var(--card2); border-radius:var(--r-sm); overflow:hidden; }
.ch-hbar-fill{ height:100%; border-radius:var(--r-sm); transition:width .3s; }
.ch-hbar-fill.bar-gold{ background:var(--gold); } .ch-hbar-fill.bar-cash{ background:var(--cash); }
.ch-hbar-val{ width:84px; text-align:right; font-weight:800; color:var(--ink); flex:none; font-variant-numeric:tabular-nums; }

/* 帳號管理 */
.acc-tag{ font-size:var(--t-xs); color:var(--mut2); font-family:monospace; }
.mini-btn{ background:var(--card2); border:1px solid var(--line2); color:var(--ink); border-radius:var(--r-sm); padding:7px 11px; font-size:var(--t-sm); font-weight:700; cursor:pointer; transition:background .15s,border-color .15s; min-height:38px; }
.mini-btn:hover{ background:var(--hi); border-color:var(--gold); }
.mini-btn.danger:hover{ border-color:var(--credit-bd); color:var(--credit); }

/* 底部操作 */
.footbar{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
.btn{ border:none; border-radius:var(--r-md); font-size:var(--t-lg); font-weight:900; cursor:pointer; transition:opacity .18s,transform .1s,background .18s; min-height:58px; }
.btn-main{ flex:1; min-width:200px; background:var(--gold); color:#000; padding:16px; box-shadow:var(--shadow); }
:root[data-theme="light"] .btn-main{ color:#fff; }
.btn-main:hover{ opacity:.9; } .btn-main:active{ transform:scale(.98); } .btn-main.done{ background:var(--cash); box-shadow:none; }
.btn-ghost{ background:var(--card); color:var(--mut2); border:1px solid var(--line2); padding:0 18px; font-size:var(--t-sm); }
.btn-ghost:hover{ background:var(--hi); color:var(--ink); }

/* toast */
.toast{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); font-weight:800; font-size:var(--t-md); padding:12px 22px; border-radius:999px; opacity:0; transition:opacity .25s,transform .25s; z-index:40; pointer-events:none; box-shadow:var(--shadow); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#copyArea{ position:absolute; left:-9999px; top:0; }
.empty{ text-align:center; color:var(--mut); padding:26px; font-size:var(--t-sm); }
#boot-fallback{ background:var(--card); border:1px solid var(--gold); border-radius:var(--r-md); color:var(--mut2); padding:18px; font-size:var(--t-md); line-height:1.6; margin:18px 0; text-align:center; }
#boot-fallback b{ color:var(--ink); font-size:var(--t-lg); }

/* ===== 盈利日曆 ===== */
.cal-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.cal-metric button{ padding:9px 14px; font-size:var(--t-sm); }
.cal-nav{ display:flex; align-items:center; gap:14px; }
.cal-title{ font-size:var(--t-lg); font-weight:800; min-width:130px; text-align:center; font-variant-numeric:tabular-nums; }
.cal-arrow{ width:42px; height:42px; border:1px solid var(--line2); background:var(--card); color:var(--ink); border-radius:var(--r-md); font-size:22px; font-weight:800; cursor:pointer; transition:background .15s,border-color .15s; line-height:1; }
.cal-arrow:hover{ background:var(--hi); border-color:var(--gold); } .cal-arrow:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.cal-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
@media(min-width:640px){ .cal-stats{ grid-template-columns:repeat(4,1fr); } }
.cal-stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 15px; box-shadow:var(--shadow); }
.cal-stat .cs-l{ font-size:var(--t-xs); color:var(--mut2); font-weight:700; } .cal-stat .cs-v{ font-size:20px; font-weight:900; margin-top:3px; }
.cal-remit-txt{ color:var(--gold); } .cal-cash-txt{ color:var(--cash); } .cal-credit-txt{ color:var(--credit); }

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-head{ margin-bottom:6px; }
.cal-dow{ text-align:center; font-size:var(--t-xs); font-weight:700; color:var(--mut2); padding:4px 0; }
.cal-cell{ position:relative; min-height:74px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); padding:6px 7px; display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.cal-cell.empty{ background:transparent; border:none; }
.cal-cell.today{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.cal-cell.clickable{ cursor:pointer; transition:transform .12s,border-color .15s; }
.cal-cell.clickable:hover{ border-color:var(--gold); transform:translateY(-1px); }
.cal-cell.clickable:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.cal-d{ font-size:var(--t-sm); font-weight:800; color:var(--ink); z-index:1; } .cal-d.muted{ color:var(--mut); font-weight:600; }
.cal-bar{ position:absolute; left:0; right:0; bottom:0; height:100%; z-index:0; }
.cal-cell.cal-remit .cal-bar{ background:linear-gradient(180deg,transparent 30%,var(--gold)); }
.cal-cell.cal-cash .cal-bar{ background:linear-gradient(180deg,transparent 30%,var(--cash)); }
.cal-cell.cal-credit .cal-bar{ background:linear-gradient(180deg,transparent 30%,var(--credit)); }
.cal-val{ font-size:var(--t-sm); font-weight:900; z-index:1; font-variant-numeric:tabular-nums; margin-top:auto; }
.cal-trips{ font-size:var(--t-xs); color:var(--mut2); z-index:1; font-weight:600; }
.cal-empty-dot{ color:var(--line2); font-size:var(--t-xs); margin:auto; }
:root[data-theme="light"] .cal-cell.has .cal-d,:root[data-theme="light"] .cal-cell.has .cal-val{ color:#111; }
.cal-legend{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:var(--t-xs); color:var(--mut2); }
.cal-leg-scale{ width:90px; height:12px; border-radius:var(--r-sm); }
.cal-leg-scale.cal-remit{ background:linear-gradient(90deg,var(--card2),var(--gold)); }
.cal-leg-scale.cal-cash{ background:linear-gradient(90deg,var(--card2),var(--cash)); }
.cal-leg-scale.cal-credit{ background:linear-gradient(90deg,var(--card2),var(--credit)); }
.cal-legend small{ margin-left:auto; color:var(--mut); }
@media(max-width:680px){ .cal-cell{ min-height:62px; padding:4px 5px; } .cal-val{ font-size:var(--t-xs); } .cal-trips{ display:none; } .cal-stats{ grid-template-columns:repeat(2,1fr); } }

/* ===== 關鍵詞自動補全 (combobox) ===== */
.ac-box{ position:absolute; z-index:60; display:none; background:var(--card); border:1px solid var(--gold); border-radius:var(--r-md); box-shadow:var(--shadow); overflow:hidden; max-height:280px; overflow-y:auto; }
.ac-item{ padding:11px 14px; font-size:var(--t-md); font-weight:600; color:var(--ink); cursor:pointer; border-bottom:1px solid var(--line); transition:background .12s; }
.ac-item:last-child{ border-bottom:none; }
.ac-item:hover, .ac-item.on{ background:var(--hi); color:var(--gold); }
.ac-item.on{ box-shadow:inset 3px 0 0 var(--gold); }

@media (max-width:680px){
  body{ padding:14px 12px calc(30px + env(safe-area-inset-bottom)); }
  .card[data-stack] thead{ display:none; }
  .card[data-stack] table,.card[data-stack] tbody{ display:block; width:100%; min-width:0 !important; }
  .card[data-stack] tr{ display:block; background:var(--card2); border:1px solid var(--line2); border-radius:var(--r-md); padding:6px 4px; margin:10px; }
  .card[data-stack] td{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:none !important; padding:10px 12px; text-align:right; }
  .card[data-stack] td+td{ border-top:1px solid var(--line) !important; }
  .card[data-stack] td::before{ content:attr(data-label); flex:none; text-align:left; color:var(--mut2); font-size:var(--t-sm); font-weight:700; }
  .card[data-stack] td.stk-name{ background:var(--hi); border-radius:var(--r-sm); margin:2px 6px 4px; justify-content:flex-start; font-size:var(--t-lg) !important; }
  .card[data-stack] td.stk-name::before{ content:""; }
  .stepper{ justify-content:flex-end; } .stepper button{ width:44px; height:44px; } .stepper input{ width:64px; min-height:44px; }
  .card[data-stack] td .cell{ max-width:62%; margin-left:auto; min-height:46px; }
  .card[data-stack] .pill{ min-height:46px; }
  .card[data-stack] td.del-cell{ justify-content:center; } .card[data-stack] td.del-cell::before{ content:""; }
  .card[data-stack] .del{ width:100%; height:46px; border-style:dashed; }
  .card[data-stack] .del::after{ content:" 刪除呢一筆"; font-size:var(--t-sm); font-weight:700; }
  .fin .fbig{ font-size:44px; } .tabs{ width:100%; } .tabs button{ flex:1; }
  .btn-main{ min-width:100%; }
}

/* ===== 員工頁 (.wb) 手機專屬比例：唔好夾、唔好埋沒流水帳 ===== */
@media (max-width:680px){
  /* 頂部壓縮：隱藏「實時協作」字、登入 badge 縮細、掣維持 44px 可撳 */
  .wb header.top{ gap:8px; padding-bottom:12px; margin-bottom:14px; }
  .wb header.top .live{ display:none; }
  .wb header.top .title{ font-size:21px; }
  .wb header.top .brand{ font-size:var(--t-xs); letter-spacing:3px; }
  .wb header.top .who{ font-size:var(--t-xs); }
  .wb header.top .icon-btn{ padding:8px 10px; font-size:var(--t-xs); min-height:44px; }

  /* 更次 bar 直放，唔好擠埋一行 */
  .wb .shift-bar{ gap:8px; }
  .wb .shift-seg{ flex:1; } .wb .shift-seg button{ flex:1; min-height:44px; }

  /* 三大數 → 緊湊一行 3 格（一眼掃，唔再霸成屏）*/
  .wb .fin-cards{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .wb .fin{ padding:11px 9px; border-radius:var(--r-md); }
  .wb .fin .fl{ font-size:10.5px; gap:4px; line-height:1.25; }
  .wb .fin .fl .mark{ display:none; }
  .wb .fin .fbig{ font-size:19px; margin-top:5px; letter-spacing:-.5px; }

  /* 流水帳卡：body 三欄留返清楚比例，狀態掣夠大 */
  .wb .led-card{ padding:11px 11px; }
  .wb .lc-body{ gap:7px; }
  .wb .lc-f:first-child{ flex:1.5; } .wb .lc-qty{ flex:.85; } .wb .lc-amt{ flex:1.25; }
  .wb .lc-f .cell{ min-height:46px; font-size:var(--t-md); }
  .wb .lc-foot{ gap:8px; }
  .wb .lc-shift{ width:100%; min-height:46px; }
  .wb .lc-status{ width:100%; min-height:46px; font-size:var(--t-md); }
  .wb .lc-zone{ min-height:46px; }
  .wb .lc-del{ width:44px; height:44px; }

  /* 找錯錢/雜項、開工點貨、交更：間距夠唞氣 */
  .wb .var-row{ padding:12px 13px; }
  .wb .onhand-grid{ gap:10px; }
  .wb .ho-form{ grid-template-columns:1fr; gap:10px; }
  .wb .ho-goods{ grid-template-columns:repeat(2,1fr); gap:9px; }
}
@media (max-width:380px){
  .wb .fin .fbig{ font-size:var(--t-lg); } .wb .fin .fl{ font-size:var(--t-xs); }
  .wb .lc-status{ font-size:var(--t-sm); }
  .wb .lc-body{ gap:6px; } .wb .lc-f .cell{ font-size:var(--t-sm); padding:9px 7px; }
}

/* ============================================================
   ⚙️ 出入貨：inline 加減/編輯 更次 + 物料  (綠框/紅框 直接改)
   ============================================================ */
.cfg-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--card2); border:1px solid var(--line); border-radius:var(--r-md); padding:8px 10px; margin:0 2px 10px; }
.cfg-bar .cfg-lbl{ font-size:var(--t-xs); font-weight:800; color:var(--mut2); letter-spacing:.5px; padding:0 4px; white-space:nowrap; }
.cfg-in{ min-height:38px !important; padding:7px 10px !important; font-weight:700; }
.cfg-rate{ display:inline-flex; align-items:center; gap:6px; font-size:var(--t-sm); color:var(--mut2); font-weight:700; }
.cfg-del{ display:inline-flex; align-items:center; gap:4px; background:transparent; border:1px solid var(--line2); color:var(--mut2); border-radius:var(--r-sm); padding:8px 11px; font-size:var(--t-xs); font-weight:800; cursor:pointer; min-height:38px; white-space:nowrap; transition:background .15s,color .15s,border-color .15s; }
.cfg-del:hover{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger-bd); }
.cfg-sub{ font-size:var(--t-xs); color:var(--mut2); font-weight:600; margin-bottom:8px; }

/* 物料行內編輯 */
.mat-edit{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mat-tag{ display:inline-flex; align-items:center; gap:2px; font-size:var(--t-xs); font-weight:700; padding:3px 8px; border-radius:var(--r-pill); white-space:nowrap; }
.mat-tag.mut{ background:var(--hi); color:var(--mut2); }
.mat-tag.gold{ background:var(--cash-bg); color:var(--gold); }
.mat-tag .cfg-in{ min-height:28px !important; padding:2px 5px !important; background:transparent; border:none; border-bottom:1px solid var(--gold); border-radius:0; color:var(--gold); font-weight:800; text-align:center; }

/* 加一行 (物料/更次/帳號 共用) */
.add-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.addmat-row td{ background:var(--bg2); padding:10px 12px !important; }
.add-shift-card{ margin-top:14px; border-style:dashed !important; border-color:var(--line2) !important; }
.gold-btn{ background:var(--gold) !important; color:#000 !important; border-color:var(--gold) !important; font-weight:800; }
:root[data-theme="light"] .gold-btn{ color:#fff !important; }
.gold-btn:hover{ filter:brightness(1.08); }

/* 司機分配 chip */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; background:var(--card2); border:1px solid var(--line2); color:var(--mut); border-radius:var(--r-pill); padding:8px 14px; font-size:var(--t-sm); font-weight:700; cursor:pointer; min-height:40px; transition:background .15s,color .15s,border-color .15s,box-shadow .15s; }
.chip:hover{ border-color:var(--gold); color:var(--ink); }
.chip.on{ background:var(--cash-bg); color:var(--cash); border-color:var(--cash-bd); box-shadow:inset 0 0 0 1px var(--cash-bd); }
/* ============================================================
   ✦ PREMIUM POLISH (Dimensional Layering · ui-ux-pro-max)
   4 級 elevation + 髮絲邊 + 分層深度，提升高級感
   ============================================================ */
:root[data-theme="dark"]{
  --el-1:0 1px 2px rgba(0,0,0,.5);
  --el-2:0 2px 4px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.32);
  --el-3:0 4px 8px rgba(0,0,0,.42), 0 12px 28px rgba(0,0,0,.4);
  --el-hair:inset 0 0 0 1px rgba(255,255,255,.04);
  --el-top:inset 0 1px 0 rgba(255,255,255,.05);
}
:root[data-theme="light"]{
  --el-1:0 1px 2px rgba(16,24,40,.06);
  --el-2:0 2px 4px rgba(16,24,40,.06), 0 6px 16px rgba(16,24,40,.07);
  --el-3:0 8px 20px rgba(16,24,40,.1), 0 16px 40px rgba(16,24,40,.08);
  --el-hair:inset 0 0 0 1px rgba(16,24,40,.02);
  --el-top:inset 0 1px 0 rgba(255,255,255,.7);
}

/* 卡片：加 top-highlight + 髮絲內框，layered 深度 */
.card, .fin, .drv, .payroll-panel, .chart-card, .var-row, .led-card{ box-shadow:var(--el-2), var(--el-top); }
.fin.feature{ box-shadow:var(--el-3), inset 0 1px 0 rgba(226,181,62,.18); }
.payroll-panel{ box-shadow:var(--el-3), var(--el-top); }
.card:hover{ box-shadow:var(--el-3), var(--el-top); transition:box-shadow var(--t-fast); }

/* 區段分隔：每個更次一個 .sect，多更次時清楚分層 */
.block.sect{ position:relative; padding:var(--s-5); background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:var(--s-5); box-shadow:var(--el-1); }
.block.sect .block-h{ margin-top:0; }

/* 主分頁：pill 高度感 + 選中陰影 */
.tabs{ box-shadow:var(--el-1), var(--el-top); }
.tabs button.on, .shift-seg button.on{ box-shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(226,181,62,.28); }
.shift-seg{ box-shadow:var(--el-1), var(--el-top); }

/* 巨型數字：字距收緊，更貴氣 */
.fin .fbig, .payroll-head .ph-total, .pay-amt{ letter-spacing:-1.5px; font-feature-settings:"tnum","ss01"; }
.fin .fl{ letter-spacing:.2px; }

/* 表頭：uppercase 細字距，企業感 */
th{ text-transform:uppercase; font-size:11px; letter-spacing:.8px; }

/* idx 徽章：金色描邊 + 微光 */
.block-h .idx{ box-shadow:inset 0 0 0 1px rgba(226,181,62,.15); background:var(--card2); }

/* 輸入框 focus：金色光暈（唔止描邊）*/
input.cell:focus, select.cell:focus{ box-shadow:0 0 0 3px rgba(226,181,62,.16); }

/* 收款顏色點：實心圓 + 細邊，精緻 */
.fin .mark{ box-shadow:0 0 0 2px var(--bg); }

@media (prefers-reduced-motion:reduce){ .card,.card:hover{ transition:none; } }

/* ============================================================
   ✦ 員工揀貨 goods picker + compact stepper (修開工點貨走位)
   ============================================================ */
/* compact stepper：細掣 + input 自動撐開，唔會迫爆窄格 */
.gstep{ display:flex; align-items:center; gap:6px; }
.gstep button{ flex:none; width:36px; height:36px; border:1px solid var(--line2); background:var(--hi); color:var(--ink); border-radius:var(--r-sm); font-size:18px; font-weight:800; cursor:pointer; line-height:1; transition:background .15s,border-color .15s; }
.gstep button:hover{ background:var(--card2); border-color:var(--gold); }
.gstep button:active{ transform:scale(.92); }
.gstep input{ flex:1 1 auto; min-width:38px; width:auto; text-align:center; background:var(--bg); border:1px solid var(--line2); border-radius:var(--r-sm); color:var(--ink); font-size:var(--t-md); font-weight:800; padding:7px 2px; font-variant-numeric:tabular-nums; min-height:38px; }
.gstep input:focus{ outline:none; border-color:var(--gold); }

/* 揀貨區：每款貨一格，2 欄 (窄機) / 自動 (闊) */
.lc-goods{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.lc-goods-lbl{ font-size:var(--t-xs); color:var(--mut2); font-weight:700; margin-bottom:7px; }
.gpick{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
.gpick-item{ background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px; display:flex; flex-direction:column; gap:6px; transition:border-color .15s,background .15s; }
.gpick-item.on{ border-color:var(--gold); background:var(--cash-bg); }
.gpick-nm{ font-size:var(--t-sm); font-weight:800; color:var(--ink); text-align:center; }

/* 開工點貨：compact stepper (grid 用 base 嘅 auto-fill,唔再用 !important 迫欄數) */
.oh-item .stepper{ gap:6px; }
.oh-item .stepper button{ width:36px; height:36px; font-size:18px; }
.oh-item .stepper input{ width:auto; flex:1; min-width:0; font-size:var(--t-md); }
.wb .oh-item .stepper button{ width:38px; height:38px; }