/* ============================================================
   N1NU 收單系統 — 精品 × 科技（編輯時尚的留白排版 + SaaS 的互動流暢）
   只有 白 / 灰 / 黑；英數標題與金額用系統襯線，中文維持黑體；中等流暢動畫
   ============================================================ */
:root{
  /* 墨色 / 前景（三階文字） */
  --ink:#161616; --ink-2:#3a3c42; --ink-3:#6b6e76;
  /* 表面（5 階） */
  --surface-0:#ffffff; --surface-1:#fbfbfc; --surface-2:#f5f6f7; --surface-3:#eceef0;
  --surface-inset:#f7f8f9; --paper:#fbfbfc;
  /* 髮絲線（3 階） */
  --hairline:#e9eaec; --hairline-strong:#dcdee1; --hairline-contrast:#c7cacd;
  /* 灰階補充 */
  --muted:#9a9da3; --muted2:#bcbfc4;
  /* 字型堆疊（全系統字，零下載） */
  --font-sans:"Helvetica Neue",Helvetica,Arial,"PingFang TC","Microsoft JhengHei","微軟正黑體","Noto Sans CJK TC","Noto Sans TC",sans-serif;
  /* 英數襯線；結尾 fallback 到「黑體」→ 中文不會變成醜明體，維持黑體 */
  --font-serif:Georgia,Cambria,"Times New Roman","Noto Serif","Microsoft JhengHei","微軟正黑體","PingFang TC","Noto Sans CJK TC",sans-serif;
  --font-mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Courier New",monospace;
  /* 字級階（基準 13px） */
  --fs-2xs:.625rem; --fs-xs:.6875rem; --fs-sm:.75rem; --fs-base:.8125rem;
  --fs-md:.9375rem; --fs-lg:1.0625rem; --fs-xl:1.4375rem; --fs-2xl:1.5rem; --fs-3xl:2rem;
  /* 間距階（封頂 64） */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --container:1240px; --gutter:var(--s-6); --gutter-sm:var(--s-5);
  /* 圓角 */
  --r-0:0; --r-1:2px;
  /* 動畫 */
  --t-fast:120ms; --t-base:200ms; --t-slow:380ms;
  --ease:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.4,0,.2,1); --stagger:45ms;
  /* 陰影 */
  --shadow-rest:0 1px 2px rgba(20,22,26,.04),0 1px 1px rgba(20,22,26,.03);
  --shadow-raised:0 1px 2px rgba(20,22,26,.05),0 4px 12px rgba(20,22,26,.05);
  --shadow-hover:0 2px 4px rgba(20,22,26,.06),0 16px 32px rgba(20,22,26,.10);
  --shadow-overlay:0 4px 8px rgba(20,22,26,.08),0 24px 48px rgba(20,22,26,.16);
  /* focus 環 */
  --focus-ring:0 0 0 2px var(--surface-0),0 0 0 4px rgba(22,22,22,.22);
  --focus-ring-inset:0 0 0 1px var(--ink),0 0 0 4px rgba(22,22,22,.08);
  /* 舊名稱相容別名（零破壞） */
  --bg:var(--surface-0); --soft:var(--surface-1); --soft2:var(--surface-2);
  --line:var(--hairline); --line2:var(--hairline-strong); --lift:var(--shadow-hover);
  /* 叫貨表：低飽和功能色，只用於區分日期與到貨狀態 */
  --purchase-canvas:#f4f6f5; --purchase-surface:#ffffff; --purchase-ink:#171a1c;
  --purchase-muted:#69736e; --purchase-faint:#929b96; --purchase-line:#dce1de; --purchase-line-strong:#bcc7c1;
  --purchase-teal:#3d6d78; --purchase-teal-soft:#e8f0f2;
  --purchase-green:#2f6d55; --purchase-green-soft:#e8f2ed;
  --purchase-violet:#6b4c9a; --purchase-violet-soft:#efeaf7;   /* 未到／少貨（金色留給斷貨）*/
  --purchase-red:#a84b4b; --purchase-red-soft:#f8ebeb;
  --purchase-amber:#9a691d; --purchase-amber-soft:#f8f0e3;
  --purchase-neutral:#eef2f0;
  --purchase-total-head:linear-gradient(135deg,#fbfcfc 0%,#edf2f3 100%);
  --purchase-total-row:linear-gradient(90deg,#fafcfc 0%,#f0f4f4 100%); --purchase-total-cell:#fff;
  --purchase-sales-head:linear-gradient(135deg,#fff 0%,#f2f4f6 100%);
  --purchase-sales-row:linear-gradient(90deg,#fff 0%,#f6f8f9 100%); --purchase-sales-cell:#fff;
  --purchase-column-divider:#f2f5f5;
  --purchase-metric-total:#708d92; --purchase-metric-total-soft:#eaf0f0;
  --purchase-metric-sales:#938778; --purchase-metric-sales-soft:#f3efe9;
}

@property --orbit-sweep{
  syntax:"<percentage>";
  inherits:false;
  initial-value:0%;
}

*{box-sizing:border-box}
body{margin:0;background:var(--surface-0);color:var(--ink);font-weight:400;letter-spacing:.01em;
  font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}

@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* 英數襯線 + 等高等寬數字（金額直欄不抖）；中文自動 fallback 回黑體 */
.cp-name,.sv,.cc-amt,.ci-amt,.price,.cart-tot b,.cart-tot .grand,.page-head h1,.brand,.cc-name{
  font-family:var(--font-serif);font-weight:400;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;letter-spacing:.01em}
.cc-last5,.folder-in{font-family:var(--font-mono)}
.tbl .num{font-family:var(--font-serif);font-variant-numeric:lining-nums tabular-nums;text-align:right;letter-spacing:.01em}

/* ---- 頂欄 ---- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--hairline);display:flex;align-items:center;gap:var(--s-7);
  padding:16px var(--gutter);flex-wrap:wrap;transition:box-shadow var(--t-base) var(--ease-soft)}
.topbar.is-scrolled{box-shadow:0 1px 0 var(--hairline),0 6px 20px rgba(22,22,26,.05)}
.brand-cluster{display:flex;align-items:center;gap:10px;flex:none}
.brand{font-size:var(--fs-md);letter-spacing:.22em;text-transform:uppercase;font-weight:400;color:var(--ink)}
.brand span{font-family:var(--font-sans);font-weight:300;color:var(--muted);letter-spacing:.06em}
.brand-menu{width:34px;height:34px;border:1px solid transparent;background:transparent;color:var(--ink);
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;cursor:pointer;
  transition:border-color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft),transform var(--t-fast) var(--ease-soft)}
.brand-menu span{width:15px;height:1px;background:currentColor;display:block;transform-origin:center;
  transition:width var(--t-base) var(--ease-soft),opacity var(--t-base) var(--ease-soft)}
.brand-menu span:nth-child(2){width:11px}
.brand-menu:hover,.brand-menu.active{border-color:var(--hairline-strong);background:var(--surface-1)}
.brand-menu:hover span:nth-child(2),.brand-menu.active span:nth-child(2){width:15px}
.brand-menu:active{transform:translateY(1px)}
.brand-menu:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:transparent}
.nav{display:flex;gap:var(--s-5);flex-wrap:wrap}
.nav a{position:relative;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:500;padding:4px 0;transition:color var(--t-base) var(--ease-soft)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-base) var(--ease-soft)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1);transform-origin:left;transition:transform var(--t-slow) var(--ease)}
.nav a.active{color:var(--ink)}
.nav-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.56);z-index:80;opacity:0;
  transition:opacity .24s var(--ease-soft)}
body.nav-drawer-open .nav-drawer-backdrop{opacity:1}
.nav-drawer{position:fixed;top:0;bottom:0;left:0;z-index:81;width:min(74vw,360px);max-width:360px;
  background:#1b1b1b;color:#f7f7f7;box-shadow:18px 0 44px rgba(0,0,0,.3);
  transform:translate3d(-102%,0,0);transition:transform .28s var(--ease);will-change:transform;
  padding:28px 28px 36px;overflow-y:auto;overscroll-behavior:contain}
body.nav-drawer-open .nav-drawer{transform:translate3d(0,0,0)}
body.nav-drawer-lock{overflow:hidden}
.nav-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);padding-bottom:30px}
.nav-drawer-kicker{color:#8b8b8b;font-size:var(--fs-2xs);letter-spacing:.18em;text-transform:uppercase}
.nav-drawer-title{font-size:1.45rem;font-weight:700;letter-spacing:.08em;margin-top:6px}
.nav-drawer-close{width:42px;height:42px;border:0;background:transparent;color:#a7a7a7;font-size:28px;line-height:1;cursor:pointer}
.nav-drawer-list{display:grid;gap:6px}
.nav-drawer-list a{display:flex;align-items:center;gap:18px;color:#f3f3f3;text-decoration:none;
  min-height:58px;padding:4px 0;font-size:1.15rem;font-weight:700;letter-spacing:.04em}
.nav-drawer-list a.active,.nav-drawer-list a:hover{color:#fff}
.nav-drawer-mark{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  color:#a9a9a9;flex:none;transition:color var(--t-base) var(--ease-soft)}
.nav-drawer-mark svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.nav-drawer-list a.active .nav-drawer-mark,.nav-drawer-list a:hover .nav-drawer-mark{color:#fff}

/* ---- 容器 / 頁標 / 面板 ---- */
.content{max-width:var(--container);margin:40px auto var(--s-8);padding:0 var(--gutter);animation:pageIn var(--t-slow) var(--ease) both}
.foot{text-align:center;color:var(--muted2);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;padding:var(--s-8) var(--gutter)}
.page-head{display:flex;align-items:baseline;gap:var(--s-4);margin-bottom:var(--s-7);padding-bottom:var(--s-4);
  border-bottom:1px solid var(--hairline);flex-wrap:wrap;animation:pageIn var(--t-base) var(--ease) both}
.page-head h1{font-size:var(--fs-xl);margin:0;font-weight:400;letter-spacing:.02em;text-transform:none;
  animation:riseIn var(--t-slow) var(--ease) both;animation-delay:40ms}
.hint{color:var(--ink-3);font-size:var(--fs-sm);letter-spacing:.01em}
.batch-chip{margin-left:auto;border:1px solid var(--ink);border-radius:var(--r-1);padding:6px 16px;
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;background:#fff;color:var(--ink);
  transition:background var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft)}
.batch-chip:hover{background:var(--ink);color:#fff}
.panel{background:var(--surface-0);border:1px solid var(--hairline);border-radius:var(--r-0);
  padding:28px;margin-bottom:var(--s-5);box-shadow:var(--shadow-rest);
  transition:box-shadow var(--t-slow) var(--ease-soft),border-color var(--t-base) var(--ease-soft);
  animation:riseIn var(--t-slow) var(--ease) both}
.content > .panel:nth-of-type(1){animation-delay:60ms}
.content > .panel:nth-of-type(2){animation-delay:130ms}
.content > .panel:nth-of-type(3){animation-delay:200ms}
.panel-head{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-5);padding-bottom:var(--s-4);
  border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.panel-head h2{font-size:var(--fs-xs);margin:0;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

/* ---- 表單輸入（統一凹陷感 + focus 環） ---- */
.search,.order-input,.folder-in,.spec select,.edit-num,.edit-txt,.edit-sort,.form-panel input{
  font-family:inherit;background:var(--surface-inset);color:var(--ink);
  border:1px solid var(--hairline-strong);border-radius:var(--r-1);
  box-shadow:inset 0 1px 2px rgba(22,22,26,.04);
  transition:border-color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft)}
.search{padding:var(--s-3) var(--s-4);font-size:var(--fs-base);width:280px;max-width:100%;margin-left:auto;letter-spacing:.02em}
.search::placeholder,.folder-in::placeholder,.order-input::placeholder,
.edit-txt::placeholder,.edit-num::placeholder,.edit-sort::placeholder,.form-panel input::placeholder{
  color:var(--muted2);opacity:.72;letter-spacing:.02em}
.search:hover,.folder-in:hover,.order-input:hover,.edit-txt:hover{border-color:var(--hairline-contrast);background:var(--surface-0)}
.search:focus,.order-input:focus,.folder-in:focus,.spec select:focus,
.edit-num:focus,.edit-txt:focus,.edit-sort:focus,.form-panel input:focus{
  outline:none;border-color:var(--ink);background:var(--surface-0);box-shadow:var(--focus-ring-inset)}

/* ---- 按鈕 ---- */
button.primary,a.primary,.cart .primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--font-sans);font-weight:500;border-radius:var(--r-1);
  padding:var(--s-3) var(--s-5);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  text-decoration:none;box-shadow:var(--shadow-rest);
  transition:background var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft),transform var(--t-fast) var(--ease-soft)}
button.primary:hover,a.primary:hover,.cart .primary:hover{background:#fff;color:var(--ink);box-shadow:var(--shadow-raised);transform:translateY(-1px)}
button.primary:active,a.primary:active,.cart .primary:active{transform:translateY(1px);box-shadow:none}
button.primary:disabled{background:#dcdcdc;border-color:#dcdcdc;color:#fff;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hairline-contrast);background:#fff;color:var(--ink-2);
  padding:var(--s-3) var(--s-4);border-radius:var(--r-1);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;
  transition:border-color var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft),transform var(--t-fast) var(--ease-soft)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ghost:active{transform:translateY(1px)}

/* ---- 收單台 ---- */
.desk{display:grid;grid-template-columns:1fr 400px;gap:var(--s-6);align-items:start}
.import-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);align-items:start}
.catalog{max-height:calc(100vh - 160px);overflow:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s-5)}
.card{border:1px solid var(--hairline);background:var(--surface-0);border-radius:var(--r-0);overflow:hidden;
  display:flex;flex-direction:column;gap:var(--s-3);cursor:pointer;padding-bottom:var(--s-3);box-shadow:var(--shadow-rest);
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease),border-color var(--t-base) var(--ease-soft);
  animation:cardIn var(--t-slow) var(--ease) both}
.card:hover{border-color:var(--hairline-contrast);transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.card:active{transform:translateY(-2px);box-shadow:var(--shadow-raised)}
.cards .card:nth-child(1){animation-delay:0ms}.cards .card:nth-child(2){animation-delay:30ms}
.cards .card:nth-child(3){animation-delay:60ms}.cards .card:nth-child(4){animation-delay:90ms}
.cards .card:nth-child(5){animation-delay:120ms}.cards .card:nth-child(6){animation-delay:150ms}
.cards .card:nth-child(7){animation-delay:180ms}.cards .card:nth-child(8){animation-delay:210ms}
.cards .card:nth-child(n+9){animation-delay:240ms}
.thumb{height:208px;overflow:hidden;background:var(--surface-2);position:relative;display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}
.card:hover .thumb img{transform:scale(1.045)}
.thumb .noimg{color:var(--muted2);font-family:var(--font-serif);font-style:italic;font-size:var(--fs-sm);letter-spacing:.08em}
.card-name{font-size:var(--fs-sm);font-weight:400;min-height:34px;text-align:center;letter-spacing:.01em;line-height:1.5;padding:0 var(--s-2);color:var(--ink-2)}
.card-meta{display:flex;justify-content:center;align-items:center}
.price{color:var(--ink);font-weight:500;font-size:var(--fs-base);letter-spacing:.02em}

/* ---- 購物清單 ---- */
.cart{position:sticky;top:80px;display:flex;flex-direction:column;max-height:calc(100vh - 100px);
  background:var(--surface-0);border:1px solid var(--hairline);border-radius:var(--r-0);padding:var(--s-5);box-shadow:var(--shadow-overlay)}
.cart-cust{margin-bottom:var(--s-4)}
.cart-cust select,.cart-cust input{width:100%;padding:var(--s-3) var(--s-4);border:1px solid var(--hairline-strong);border-radius:var(--r-1);
  font-size:var(--fs-base);font-weight:500;background:var(--surface-inset);letter-spacing:.04em;font-family:inherit;
  transition:border-color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft)}
.cart-cust input:focus,.cart-cust select:focus{outline:none;border-color:var(--ink);background:var(--surface-0);box-shadow:var(--focus-ring-inset)}
.cart-cust select{appearance:none;-webkit-appearance:none;padding-right:30px;background-position:right 12px center;background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23161616' stroke-width='1.2'/></svg>")}
.cart-items{flex:1;overflow:auto;display:flex;flex-direction:column;min-height:80px}
.cart-empty{border:1px dashed var(--hairline-strong);border-radius:var(--r-1);padding:var(--s-5);color:var(--muted);font-size:var(--fs-sm);text-align:center;letter-spacing:.04em}
.ci{display:flex;gap:var(--s-3);border-bottom:1px solid var(--hairline);padding:var(--s-4) 0;align-items:flex-start;animation:cardIn var(--t-base) var(--ease) both}
.ci-img{width:58px;height:58px;object-fit:cover;flex:none;background:var(--surface-2)}
.ci-main{flex:1;min-width:0}
.ci-top{display:flex;align-items:center;gap:8px}
.ci-name{font-size:var(--fs-sm);font-weight:500;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ci-del{border:0;background:none;color:var(--muted);padding:2px 4px;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;flex:none;transition:color var(--t-base) var(--ease-soft)}
.ci-del:hover{color:var(--ink);text-decoration:underline}
.ci-row2{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.qty{display:flex;align-items:center;border:1px solid var(--hairline-strong);border-radius:var(--r-1);overflow:hidden;transition:border-color var(--t-base) var(--ease-soft)}
.qty:hover{border-color:var(--hairline-contrast)}
.qty button{width:28px;height:28px;border:0;background:#fff;cursor:pointer;font-size:14px;color:var(--ink-3);transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft)}
.qty button:hover{background:var(--ink);color:#fff}
.qty button:active{transform:scale(.92)}
.qty span{min-width:30px;text-align:center;font-family:var(--font-serif);font-size:var(--fs-sm);line-height:28px;
  border-left:1px solid var(--hairline-strong);border-right:1px solid var(--hairline-strong);font-variant-numeric:tabular-nums}
.ci-amt{font-weight:500;font-size:var(--fs-base);letter-spacing:.02em}
.ci-specs{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.spec{display:flex;align-items:center;gap:6px}
.spec-no{color:var(--ink-3);font-size:var(--fs-xs);width:16px;flex:none}
.spec select{flex:1;min-width:0;padding:6px 26px 6px 6px;font-size:var(--fs-sm);appearance:none;-webkit-appearance:none;
  background-position:right 8px center;background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23161616' stroke-width='1.2'/></svg>")}
.cart-tot{margin-top:var(--s-4);border-top:1px solid var(--ink);padding-top:var(--s-4)}
.cart-tot div{display:flex;justify-content:space-between;padding:5px 0;color:var(--ink-3);font-size:var(--fs-sm);letter-spacing:.04em}
.cart-tot .fee b{color:var(--ink);font-weight:400}
.cart-tot .grand{color:var(--ink);font-size:var(--fs-md);border-top:1px solid var(--hairline);margin-top:10px;padding-top:14px;letter-spacing:.02em}
.cart-tot .grand b{font-size:1.125rem;font-weight:600}
.cart .primary{margin-top:var(--s-4);width:100%}
.cart-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-3)}
.cart-cancel,.cart-confirm{min-height:42px;border-radius:var(--r-1);font-family:var(--font-sans);
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:background var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft),border-color var(--t-base) var(--ease-soft)}
.cart-cancel{border:1px solid var(--hairline-strong);background:#fff;color:var(--ink-2)}
.cart-confirm{border:1px solid var(--ink);background:var(--ink);color:#fff}
.cart-cancel:disabled,.cart-confirm:disabled{cursor:not-allowed;border-color:var(--hairline-strong);background:var(--surface-2);color:var(--muted2)}
.muted{color:var(--muted);font-size:var(--fs-xs);letter-spacing:.04em}

/* ---- 批次匯入 ---- */
.order-input{width:100%;height:340px;padding:15px;font-size:var(--fs-base);line-height:1.75;resize:vertical}
.import-btns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.stats{margin-left:auto;font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.05em}
.stats b{color:var(--ink)}
.stats .warn,.stats .danger{color:var(--ink);font-weight:600}
.result-empty{color:var(--muted);font-size:var(--fs-sm);padding:var(--s-5);text-align:center;letter-spacing:.04em}
.cust{border:1px solid var(--hairline);border-radius:var(--r-0);padding:var(--s-3) var(--s-4);margin-bottom:10px}
.cust-name{font-weight:600;margin-bottom:8px;font-size:var(--fs-base);letter-spacing:.04em}
.danger-box{border-color:var(--ink)}
.warn-line{color:var(--ink-3);font-size:var(--fs-sm);padding:3px 0}
.note-row td{color:var(--ink-3);font-size:var(--fs-xs);background:var(--surface-1)}

/* ---- 表格 ---- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.tbl th,.tbl td{text-align:left;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--hairline)}
.tbl th{color:var(--ink-3);font-weight:500;font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;
  padding-top:var(--s-2);padding-bottom:var(--s-2);border-bottom:1px solid var(--ink)}
.tbl td{vertical-align:middle}
.tbl tr{position:relative;transition:background var(--t-base) var(--ease-soft)}
.tbl tr:hover td{background:var(--surface-1)}
.tbl td:first-child{box-shadow:inset 2px 0 0 transparent;transition:box-shadow var(--t-base) var(--ease-soft)}
.tbl tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--ink)}
.tbl th:first-child,.tbl td:first-child{padding-left:0}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.status{display:inline-block;padding:4px 12px;border:1px solid var(--hairline-strong);border-radius:var(--r-1);
  font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:#fff}
.status.paid{background:var(--ink);border-color:var(--ink);color:#fff}
.row-active{background:var(--surface-3)}

/* ---- 銷售紀錄：每客戶一格 ---- */
.cust-card{position:relative;border:1px solid var(--hairline);margin-bottom:var(--s-4);background:#fff;overflow:hidden;border-radius:var(--r-0);
  box-shadow:var(--shadow-raised);
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease),border-color var(--t-base) var(--ease-soft),opacity var(--t-slow);
  animation:cardIn var(--t-slow) var(--ease) both}
.cust-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--hairline-contrast)}
.cust-card.is-paid{opacity:.55}
.cust-card.is-paid:hover{opacity:.9}
.cc-head{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg,var(--surface-0),var(--surface-1))}
.cc-name{font-size:var(--fs-lg);font-weight:400;letter-spacing:.01em;display:flex;align-items:baseline;gap:10px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:16px}
.cc-count{font-family:var(--font-sans);font-size:var(--fs-2xs);color:var(--ink-3);font-weight:500;letter-spacing:.14em;text-transform:uppercase;flex:none}
.cc-right{display:flex;align-items:center;gap:var(--s-3);flex:none}
.cc-amt{font-size:var(--fs-md);font-weight:400;letter-spacing:.01em;min-width:96px;text-align:right}
.cc-money{display:flex;align-items:flex-end;gap:var(--s-4);min-width:96px;justify-content:flex-end}
/* 後五碼／實付 收進可展開的箭頭，讓這排清爽 */
.cc-more-btn{flex:none;width:26px;height:30px;padding:0;border:1px solid var(--hairline-strong);background:#fff;
  border-radius:var(--r-1);color:var(--ink-3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft)}
.cc-more-btn:hover{border-color:var(--ink);color:var(--ink)}
.cc-more-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-base) var(--ease-soft)}
.cc-more-btn.on{border-color:var(--ink);color:var(--ink);background:var(--surface-2)}
.cc-more-btn.on svg{transform:rotate(180deg)}
.cc-more{display:flex;align-items:center;gap:var(--s-3)}
.cc-more[hidden]{display:none}   /* class 選擇器會蓋過 UA 的 [hidden]，要明確補這條收合才有效 */
.cc-money span{display:flex;flex-direction:column;gap:2px;text-align:right;font-family:var(--font-serif);
  font-size:var(--fs-md);line-height:1.15;color:var(--ink)}
.cc-money em{font-family:var(--font-sans);font-style:normal;font-size:var(--fs-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.cc-money .cc-pay{font-size:var(--fs-lg);font-weight:400}
.cc-last5{width:96px;padding:8px 9px;border:1px solid var(--hairline-strong);border-radius:var(--r-1);font-size:var(--fs-base);
  text-align:center;letter-spacing:.18em;background:#fff;transition:border-color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft)}
.cc-last5:focus{outline:none;border-color:var(--ink);box-shadow:var(--focus-ring-inset)}
.cc-last5::placeholder{font-family:var(--font-sans);letter-spacing:.04em;color:var(--muted2)}
/* 每位客戶的實付金額格（只記錄；分析頁營收用「有填用實付、沒填用應付」）*/
.cc-paid{width:92px;padding:8px 9px;border:1px solid var(--hairline-strong);border-radius:var(--r-1);font-size:var(--fs-base);
  text-align:right;font-family:var(--font-mono);background:#fff;color:var(--ink);
  transition:border-color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft)}
.cc-paid:focus{outline:none;border-color:var(--ink);box-shadow:var(--focus-ring-inset)}
.cc-paid::placeholder{font-family:var(--font-sans);letter-spacing:.02em;color:var(--muted2)}
/* 每位客戶的備註格（跟後五碼一樣套用到該客戶本期全部品項）*/
.cc-note{width:150px;padding:8px 9px;border:1px solid var(--hairline-strong);border-radius:var(--r-1);
  font-size:var(--fs-sm);background:#fff;color:var(--ink);
  transition:border-color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft)}
.cc-note:focus{outline:none;border-color:var(--ink);box-shadow:var(--focus-ring-inset)}
.cc-note::placeholder{color:var(--muted2)}
.cc-right .badge-btn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.mini-ic{width:38px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--hairline-strong);background:#fff;color:var(--ink-2);border-radius:var(--r-1);
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.04em;line-height:1;cursor:pointer;text-decoration:none;
  transition:border-color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft)}
.mini-ic:hover{border-color:var(--ink);background:var(--surface-1);color:var(--ink)}
/* #3 眼睛：釘在卡片左上角，小、無外框；關＝閉眼、開＝睜眼 */
.eye-btn{position:absolute;top:15px;left:8px;z-index:2;width:17px;height:17px;padding:0;border:none;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted2);border-radius:var(--r-1);
  transition:color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft)}
.eye-btn:hover{color:var(--ink);background:var(--surface-2)}
.eye-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eye-btn .ic-eye{display:none}
.eye-btn.on .ic-eye{display:block}
.eye-btn.on .ic-eye-off{display:none}
.eye-btn.on{color:var(--ink)}
/* #3 加單／刪單紀錄面板 */
.cust-history{margin:0 var(--s-4) var(--s-4);padding:12px 14px;background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-1);animation:chIn var(--t-base) var(--ease-soft)}
@keyframes chIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ch-head{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;margin-bottom:8px}
.ch-msg{font-size:var(--fs-sm);color:var(--ink-3);padding:4px 0}
.ch-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--hairline);font-size:var(--fs-sm)}
.ch-row:first-of-type{border-top:none}
.ch-badge{flex:none;min-width:40px;text-align:center;font-family:var(--font-mono);font-size:var(--fs-2xs);padding:2px 6px;border-radius:var(--r-1);border:1px solid var(--hairline-strong)}
.ch-add .ch-badge{color:var(--ink);font-weight:600}
.ch-del .ch-badge{color:var(--ink-3)}
.ch-prod{flex:1;min-width:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-prod em{color:var(--ink-3);font-style:normal;font-size:var(--fs-xs)}
.ch-src{flex:none;color:var(--ink-3);font-size:var(--fs-xs)}
.ch-time{flex:none;color:var(--muted);font-family:var(--font-mono);font-size:var(--fs-xs)}
.mini-ic:active{background:var(--surface-2)}
.pdf-ic{width:38px}
.pdf-ic svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.sale-add{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-5);border-bottom:1px solid var(--hairline);background:var(--surface-1)}
.sale-add[hidden]{display:none}
.sale-product-search{flex:1 1 180px;min-width:160px;border:1px solid var(--hairline-strong);border-radius:var(--r-1);
  background:#fff;padding:9px 12px;font-family:inherit;font-size:var(--fs-base);color:var(--ink)}
.sale-product,.sale-color,.sale-size{flex:1;min-width:0;border:1px solid var(--hairline-strong);border-radius:var(--r-1);
  background:var(--surface-inset);padding:9px 12px;font-family:inherit;font-size:var(--fs-base);color:var(--ink)}
.sale-color,.sale-size{flex:0 1 140px}
.sale-product-search:focus,.sale-product:focus,.sale-color:focus,.sale-size:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:var(--focus-ring-inset)}
.sale-add .add-confirm{flex:none}
.sale-items{display:grid;gap:0}
.sale-line{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--s-4);align-items:start;
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--hairline);background:#fff}
.sale-line.no-img{grid-template-columns:1fr}
.sale-line:last-child{border-bottom:0}
.sale-line:hover{background:var(--surface-1)}
.sale-line-img{width:76px;height:96px;object-fit:cover;background:var(--surface-2);border:1px solid var(--hairline)}
.sale-line-img.noimg{display:none}
.sale-line-main{min-width:0;display:grid;gap:var(--s-3)}
.sale-line-top{display:flex;align-items:flex-start;gap:var(--s-3)}
.sale-line-name{font-size:var(--fs-md);font-weight:500;color:var(--ink);line-height:1.45;min-width:0;flex:1;overflow-wrap:anywhere}
.sale-line-del{opacity:.42;flex:none}
.sale-line-grid{display:grid;grid-template-columns:repeat(5,minmax(72px,1fr));gap:var(--s-3);align-items:end}
.sale-line-grid div{display:grid;gap:2px;min-width:0}
.sale-line-grid span{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sale-line-grid b{font-size:var(--fs-base);font-weight:400;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.sale-line-grid div:nth-last-child(-n+2) b{font-family:var(--font-serif);font-size:var(--fs-md);letter-spacing:.01em}
/* ===== #4 貨況／包貨模式 ===== */
.sales-search-slot{height:54px;margin:-6px 0 10px}
.sales-searchbar{display:flex;align-items:center;gap:var(--s-3);position:relative;
  z-index:18;width:100%;padding:6px 0;flex-wrap:nowrap;
  background:rgba(255,255,255,.96);border-bottom:1px solid var(--hairline);
  box-shadow:0 12px 24px -24px rgba(20,22,26,.48);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sales-searchbar.is-fixed{position:fixed;top:var(--sales-search-top,0);left:var(--sales-search-left,0);
  width:var(--sales-search-width,100%);z-index:19}
.sales-searchbar .search{margin:0;flex:1 1 auto;width:auto;min-width:0}
.pack-toggle{flex:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
  padding:9px 13px;border:1px solid var(--hairline-strong);border-radius:var(--r-1);background:#fff;
  font-size:var(--fs-sm);letter-spacing:.06em;color:var(--ink-2);
  transition:border-color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft)}
.pack-toggle:hover{border-color:var(--ink)}
.pack-toggle input{width:16px;height:16px;accent-color:var(--ink);cursor:pointer;margin:0}
.pack-toggle:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
/* 金額模式：整頁客戶卡改為帳單明細。資料仍是同一張訂單，不影響商品／叫貨。 */
.amount-sheet{display:none}
.amount-mode .amount-sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,43%);
  background:#fff;border-top:1px solid var(--hairline)}
.amount-mode .sale-items,.amount-mode .sale-add,.amount-mode .cust-history{display:none!important}
.amount-mode .cust-card.is-paid{opacity:1!important}
.amount-mode .cc-head .eye-btn,.amount-mode .cc-head .cc-more-btn,
.amount-mode .cc-head .cc-more,.amount-mode .cc-head .cc-last5,
.amount-mode .cc-head .badge-btn,.amount-mode .cc-head .cc-paystate,
.amount-mode .cc-head .x-btn,.amount-mode .cc-head > .cc-right > .mini-ic:not(.pdf-ic){display:none}
.amount-sheet-head{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-4);padding:12px var(--s-5);border-bottom:1px solid var(--hairline);
  color:var(--ink-2);font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em}
.amount-sheet-head small{font-size:var(--fs-2xs);font-weight:400;color:var(--muted);letter-spacing:.08em}
.amount-products{min-width:0;border-right:1px solid var(--hairline)}
.amount-product-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  min-height:54px;padding:10px var(--s-5);border-bottom:1px solid var(--hairline)}
.amount-product-row:last-child{border-bottom:0}
.amount-product-row > div{display:grid;gap:3px;min-width:0}
.amount-product-row b{font-size:var(--fs-sm);font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.amount-product-row small{font-size:var(--fs-2xs);color:var(--ink-3);letter-spacing:.03em}
.amount-product-row > span{flex:none;color:var(--ink-2);font-family:var(--font-serif);
  font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.amount-calculation{min-width:0;padding:5px var(--s-5)}
.amount-calc-row,.amount-total-row{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);min-height:42px;border-bottom:1px solid var(--hairline);font-size:var(--fs-sm)}
.amount-calc-row span{color:var(--ink-3)}
.amount-calc-row b{font-family:var(--font-serif);font-size:var(--fs-base);font-weight:400;
  color:var(--ink-2);font-variant-numeric:tabular-nums}
.amount-calc-row.is-discount b{color:#4a7568}
.amount-total-row{min-height:58px;border-bottom:0;border-top:1px solid var(--ink);margin-top:4px}
.amount-total-row span{font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;color:var(--ink-2)}
.amount-total-row b{font-family:var(--font-serif);font-size:var(--fs-xl);font-weight:500;
  color:var(--ink);font-variant-numeric:tabular-nums}
.amount-adjust-row{display:grid;grid-template-columns:minmax(90px,1fr) 46px 92px 34px 34px;
  gap:6px;align-items:center;min-height:48px;border-bottom:1px solid var(--hairline)}
.amount-adjust-row.is-suppressed{color:var(--muted)}
.amount-edit-label,.amount-edit-sign,.amount-edit-value{box-sizing:border-box;height:34px;min-width:0;
  border:1px solid transparent;border-radius:var(--r-1);background:transparent;color:var(--ink);
  font-family:var(--font-sans);font-size:var(--fs-sm)}
.amount-edit-label{width:100%;padding:0 7px}
.amount-edit-sign{padding:0 5px;text-align:center}
.amount-edit-value{width:100%;padding:0 7px;text-align:right;font-variant-numeric:tabular-nums}
.amount-edit-label:hover,.amount-edit-sign:hover,.amount-edit-value:hover{border-color:var(--hairline)}
.amount-edit-label:focus,.amount-edit-sign:focus,.amount-edit-value:focus{outline:none;border-color:var(--ink);
  background:#fff;box-shadow:var(--focus-ring-inset)}
.amount-fixed-label{display:grid;gap:2px;min-width:0}
.amount-fixed-label b{font-size:var(--fs-sm);font-weight:500;color:#4a7568}
.amount-fixed-label small{font-size:10px;color:var(--muted);line-height:1.35}
.amount-fixed-value{justify-self:end;font-family:var(--font-serif);font-size:var(--fs-base);
  font-variant-numeric:tabular-nums;color:#4a7568}
.amount-adjust-row:has(.amount-fixed-label){grid-template-columns:minmax(0,1fr) 92px 34px}
.amount-row-action,.amount-entry-add{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;
  border:1px solid var(--hairline-strong);border-radius:var(--r-1);background:#fff;color:var(--ink-3);
  font-size:var(--fs-sm);cursor:pointer;transition:background var(--t-base),border-color var(--t-base),color var(--t-base)}
.amount-row-action:hover,.amount-entry-add:hover{border-color:var(--ink);color:var(--ink);background:var(--surface-1)}
.amount-row-action.remove{border-color:transparent;color:var(--muted2)}
.amount-entry{grid-column:1/-1;display:grid;
  grid-template-columns:minmax(180px,1fr) 62px 120px 40px auto;gap:8px;align-items:center;
  padding:12px var(--s-5);border-top:1px solid var(--hairline);background:var(--surface-1)}
.amount-entry-label,.amount-entry-sign,.amount-entry-value{box-sizing:border-box;height:40px;min-width:0;
  border:1px solid var(--hairline-strong);border-radius:var(--r-1);background:#fff;color:var(--ink);
  font-family:var(--font-sans);font-size:var(--fs-sm)}
.amount-entry-label{padding:0 12px}
.amount-entry-sign{padding:0 8px;text-align:center}
.amount-entry-value{padding:0 10px;text-align:right;font-variant-numeric:tabular-nums}
.amount-entry-label:focus,.amount-entry-sign:focus,.amount-entry-value:focus{outline:none;border-color:var(--ink);
  box-shadow:var(--focus-ring-inset)}
.amount-entry-add{width:40px;height:40px;background:var(--ink);border-color:var(--ink);color:#fff}
.amount-entry-add:hover{background:#000;color:#fff}
.newcomer-free-btn{justify-self:end;min-height:40px;padding:0 14px;border:1px solid #b9cec7;
  border-radius:var(--r-1);background:#f4f8f6;color:#315f52;font-family:var(--font-sans);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;cursor:pointer}
.newcomer-free-btn span{margin-left:7px;font-weight:400;color:#587b70}
.amount-row-action:disabled,.amount-entry-add:disabled,.newcomer-free-btn:disabled{opacity:.45;cursor:wait}
.sale-line-note{display:none;width:100%;padding:7px 10px;border:1px solid var(--hairline-strong);border-radius:var(--r-1);
  font-size:var(--fs-sm);background:var(--surface-1);color:var(--ink);
  transition:border-color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft)}
.sale-line-note:focus{outline:none;border-color:var(--ink);box-shadow:var(--focus-ring-inset)}
.sale-line-note::placeholder{color:var(--muted2)}
/* 貨況模式：隱藏後五碼/實付/單價小計，改顯示包貨備註；名字與商品可點 */
.packing-mode .cc-more,.packing-mode .cc-more-btn,.packing-mode .cc-last5,.packing-mode .sl-price,.packing-mode .eye-btn{display:none}
/* 貨況模式（body 層級）：藏兩個 PDF 匯出鈕；「已完成」排在「未完成」前（全部仍在最前） */
body.packing-on .sales-export-all{display:none}
body.packing-on .pay-filter .paid-filter-wrap{order:1}
body.packing-on .pay-filter [data-filter="unpaid"]{order:2}
.packing-mode .sale-line-note{display:block}
.packing-mode .cc-head,.packing-mode .sale-line{cursor:pointer}   /* 整行都能點（按鈕/輸入框除外） */
/* 貨況模式：徽章(未完成/已完成)右邊的付款狀態標籤 */
.cc-paystate{display:none}
.packing-mode .cc-paystate{display:inline-flex;align-items:center;flex:none;padding:5px 10px;border:1px solid var(--hairline-strong);
  border-radius:var(--r-1);font-size:var(--fs-xs);letter-spacing:.08em;background:#fff;color:var(--ink-3)}
.packing-mode .cc-paystate.ps-unpaid{border-color:var(--ink);color:var(--ink);font-weight:600}
/* 貨況模式改用「已出貨/已到貨」的淡化，覆蓋付款淡化。
   用 !important 確保勝過 cardIn 進場動畫 fill 殘留的 opacity:1（動畫優先級高於一般宣告，!important 作者宣告才壓得住）。*/
.packing-mode .cust-card.is-paid{opacity:1 !important}
.packing-mode .cust-card.is-shipped{opacity:.5 !important;transition:opacity var(--t-base) var(--ease-soft)}
.packing-mode .cust-card.is-shipped:hover{opacity:.82 !important}
.packing-mode .cust-card.is-shipped .cc-name-txt::after{content:'已出貨';margin-left:8px;font-size:var(--fs-2xs);
  letter-spacing:.1em;color:var(--ink);border:1px solid var(--ink);border-radius:99px;padding:1px 7px;vertical-align:middle}
.packing-mode .sale-line.is-packed{opacity:.45 !important;transition:opacity var(--t-base) var(--ease-soft)}
.packing-mode .sale-line.is-packed:hover{opacity:.78 !important}
.packing-mode .sale-line.is-packed .sale-line-name::after{content:'✓ 已到';margin-left:8px;font-size:var(--fs-2xs);color:var(--ink);letter-spacing:.06em}
/* #9(c) 貨況模式：這個 variant 庫存有貨→提示不用再買 */
.packing-mode .sale-line.has-stock .sale-line-name::before{content:'庫存有貨·不用再買';display:inline-block;margin-right:8px;
  font-size:var(--fs-2xs);color:#fff;background:var(--ink);border-radius:99px;padding:2px 8px;letter-spacing:.04em;vertical-align:middle}
.tbl.mini{font-size:var(--fs-sm)}
.tbl.mini th,.tbl.mini td{padding:var(--s-3) var(--s-5)}
.tbl.mini tr{transition:background var(--t-base) var(--ease-soft)}
.tbl.mini tr:hover td{background:var(--surface-1)}
.tbl.mini tr:last-child td{border-bottom:0}
.tbl.mini th:first-child,.tbl.mini td:first-child{padding-left:var(--s-5)}
.tbl.mini th:last-child,.tbl.mini td:last-child{padding-right:var(--s-5)}
.x-btn{border:0;background:none;color:var(--muted2);cursor:pointer;font-size:var(--fs-base);padding:2px 8px;line-height:1;
  opacity:.3;transition:opacity var(--t-base) var(--ease-soft),color var(--t-base),transform var(--t-base) var(--ease)}
.cust-card:hover .x-btn{opacity:.6}
.x-btn:hover{opacity:1;color:var(--ink);transform:scale(1.18)}
.x-btn:active{transform:scale(.9)}
.customer-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2)}
.customer-actions .x-btn{opacity:.6}
.customer-actions .x-btn:hover{opacity:1}

/* 客戶電話：離開欄位就存；存好閃一下綠、撞號閃一下紅 */
.cust-phone{width:9.5em;max-width:100%;padding:5px 8px;border:1px solid var(--hairline);
  border-radius:8px;background:var(--surface-1);color:var(--ink);
  font-family:var(--font-mono,var(--font-sans));font-size:var(--fs-xs);letter-spacing:.04em;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.cust-phone::placeholder{color:var(--muted);letter-spacing:0}
.cust-phone:hover{border-color:var(--hairline-contrast)}
.cust-phone:focus{outline:none;border-color:var(--ink);background:var(--surface-0);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 8%,transparent)}
.cust-phone:disabled{opacity:.5}
.cust-phone.is-saved{border-color:#3f6b52;background:color-mix(in srgb,#3f6b52 8%,transparent)}
.cust-phone.is-bad{border-color:#a04545;background:color-mix(in srgb,#a04545 10%,transparent)}

/* 前台分類管理（商品頁的摺疊區） */
.shop-cat-admin summary{cursor:pointer;font-weight:600;padding:2px 0;list-style:none}
.shop-cat-admin summary::-webkit-details-marker{display:none}
.shop-cat-admin summary::before{content:'▸';display:inline-block;width:1.1em;
  transition:transform .18s ease;color:var(--muted)}
.shop-cat-admin[open] summary::before{transform:rotate(90deg)}
.cat-admin-body{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-3)}
.cat-admin-tools{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.cat-admin-tools .edit-txt{flex:1 1 12em;min-width:0}
.cat-admin-list{display:flex;flex-direction:column;gap:var(--s-3)}
.cat-main{border:1px solid var(--hairline);border-radius:10px;padding:var(--s-3);
  background:var(--surface-1)}
.cat-row{display:flex;align-items:center;gap:var(--s-2)}
.cat-row .edit-txt{flex:1 1 auto;min-width:0;font-weight:600}
.cat-subs{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2);padding-left:var(--s-3)}
.cat-sub{display:inline-flex;align-items:center;gap:4px}
.cat-sub .edit-txt{width:7.5em}
.cat-sub-add .edit-txt{width:6.5em}
.cat-pick{max-width:11em}

/* 期別的收單截止日：空白＝網站不開放下單 */
.period-close{padding:5px 8px;border:1px solid var(--hairline);border-radius:8px;
  background:var(--surface-1);color:var(--ink);font-family:inherit;font-size:var(--fs-xs);
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.period-close:hover{border-color:var(--hairline-contrast)}
.period-close:focus{outline:none;border-color:var(--ink);background:var(--surface-0);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 8%,transparent)}
.period-close:disabled{opacity:.5}
.period-close:invalid,.period-close:not([value]){color:var(--muted)}
.period-close.is-saved{border-color:#3f6b52;background:color-mix(in srgb,#3f6b52 8%,transparent)}

/* ---- 晶片 / 表單面板 ---- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--ink);border-radius:var(--r-1);padding:6px 16px;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase}
.form-panel .field{display:block;margin:var(--s-4) 0;font-size:var(--fs-2xs);color:var(--ink-3);max-width:520px;letter-spacing:.1em;text-transform:uppercase}
.form-panel input{display:block;width:100%;margin-top:6px;padding:var(--s-3);text-transform:none;letter-spacing:0}

/* ---- 商品同步 / 編輯 ---- */
.sync-bar{background:var(--surface-1);border-color:var(--hairline)}
.sync-head{font-weight:600;margin-bottom:14px;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.sync-row{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
/* 收單統計：不要框，只留複製／下載兩顆無邊框小圖示，整排靠右 */
.tally-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);margin:-8px 0 var(--s-4)}
.tally-toolbar .sync-msg{margin:0 auto 0 0}   /* 「已複製」訊息推到左側 */
.tally-ic{flex:none;align-self:center;width:38px;height:38px;padding:0;border:0;background:none;cursor:pointer;color:var(--ink-3);
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-1);text-decoration:none;
  transition:color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft)}
.tally-ic:hover{color:var(--ink);background:var(--surface-2)}
.tally-ic:active{transform:scale(.94)}
.tally-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){ .tally-toolbar{flex-direction:row;align-items:center;justify-content:flex-end} }
.folder-in{flex:1;min-width:280px;padding:var(--s-3) var(--s-4);font-size:var(--fs-base);letter-spacing:.01em}
.sync-bar .primary{margin-top:0}
.sync-msg{margin-top:14px;font-size:var(--fs-sm);letter-spacing:.02em}
.sync-msg.ok{color:var(--ink-2)} .sync-msg.err{color:var(--ink);font-weight:600}
.sync-progress{height:6px;margin-top:12px;border:1px solid var(--hairline);background:var(--surface-0);overflow:hidden}
.sync-progress[hidden]{display:none}
.sync-progress div{width:42%;height:100%;background:var(--ink);animation:syncSlide 1.1s ease-in-out infinite}
@keyframes syncSlide{0%{transform:translateX(-110%)}100%{transform:translateX(250%)}}
.pthumb{width:46px;height:46px;object-fit:cover;background:var(--surface-2)}
.thumb-editor{display:inline-flex;align-items:center;position:relative}
.thumb-up{cursor:pointer;display:inline-block;width:46px;height:46px;padding:0;position:relative;background:var(--surface-2);
  border:1px dashed var(--hairline-strong);border-radius:var(--r-1);overflow:visible;-webkit-appearance:none;appearance:none;
  transition:border-color var(--t-base) var(--ease-soft),opacity var(--t-base) var(--ease-soft)}
.thumb-up:hover{border-color:var(--ink)}
.thumb-up img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.thumb-up img.noimg{display:none}
/* 相機＝廠商圖按鈕（在縮圖右下角）。點圖改客戶圖、點這顆改廠商圖；有廠商圖就亮綠光。*/
.thumb-change-icon{position:absolute;right:-6px;bottom:-6px;z-index:2;width:21px;height:21px;padding:0;display:grid;place-items:center;
  color:var(--ink);background:#fff;border:1px solid var(--hairline-strong);border-radius:var(--r-1);box-shadow:var(--shadow-rest);
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:box-shadow var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft),
    border-color var(--t-base) var(--ease-soft),transform var(--t-fast) var(--ease-soft)}
.thumb-change-icon:hover{border-color:var(--ink);transform:translateY(-1px)}
.thumb-change-icon:active{transform:scale(.9)}
.thumb-change-icon svg{width:13px;height:13px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.thumb-change-icon.is-uploading{cursor:wait}
.thumb-change-icon.is-uploading svg{display:none}
.thumb-change-icon.is-uploading::after{content:"";width:10px;height:10px;border:1.5px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:pdfExportSpin .7s linear infinite}
.thumb-change-icon.is-success{background:var(--ink);border-color:var(--ink);color:#fff}
/* 廠商圖已存在 → 相機轉為沉穩綠（用站上既有的 --purchase-green，不用飽和螢光綠）。
   低調的漸層底＋細邊＋一圈很淡的暈，看得出狀態但不搶戲。*/
/* 廠商資料已備妥的綠：鮮艷但不螢光。只在這裡調濃淡即可（兩處共用）*/
:root{--supplier-green:#0fa06b;--supplier-green-rgb:15,160,107}
.thumb-change-icon.has-supplier{color:var(--supplier-green);
  background:#fff;                                        /* 底色不填滿 */
  border-color:rgba(var(--supplier-green-rgb),.62);
  box-shadow:inset 0 0 5px rgba(var(--supplier-green-rgb),.62)}  /* 只有內緣漸層：邊緣濃、往中間淡掉 */
.thumb-up.is-uploading{cursor:wait;opacity:.72}
.thumb-up.is-success{border-color:#059669;border-style:solid}
/* 顏色欄：客戶／廠商 切換放在「欄位標題」，一顆管整欄。
   不用黑白填色：選中的字稍微放大＋周圍柔和暈染（沿用站上既有的 teal 色票）。*/
.colors-th{white-space:nowrap}
.colors-th>span:first-child{margin-right:8px}
.ptbl-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ptbl-tools .search{flex:1 1 200px;margin:0}
/* 期別切換：每期商品分開存放，這顆只切「檢視」，不動收單台販售的本期 */
.period-sel{flex:0 0 auto;padding:8px 10px;font-size:var(--fs-base);color:var(--ink-2);
  background:#fff;border:1px solid var(--hairline-strong);border-radius:var(--r-1);cursor:pointer;
  transition:border-color var(--t-base) var(--ease-soft)}
.period-sel:hover{border-color:var(--ink)}
.period-viewing-hint{margin:0 0 var(--s-3);padding:8px 12px;font-size:var(--fs-sm);color:var(--purchase-amber);
  background:var(--purchase-amber-soft);border:1px solid rgba(154,105,29,.25);border-radius:var(--r-1)}
@media (max-width:600px){
  .period-sel{min-height:44px;flex:1 1 100%}
}
.color-toggle{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;vertical-align:middle}
.color-toggle-mobile{display:none}      /* 電腦版只顯示表頭那顆 */
/* 只淡入顏色/底色/暈染；font-size 不進 transition：它是 layout 屬性，
   逐格動畫會讓整張 440 列的表重排(卡頓)，字級直接切換反而乾淨俐落。*/
/* 字級要比欄位標題「顏色」(10px) 小：未選 8px、選中 9px（仍看得出被選取，靠粗細＋teal＋暈染加強）*/
.ct-btn{border:0;background:transparent;color:var(--muted2);font-size:8px;
  min-width:38px;padding:3px 7px;border-radius:999px;cursor:pointer;line-height:1.6;
  transition:color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft),
    box-shadow var(--t-base) var(--ease-soft)}
.ct-btn:hover{color:var(--purchase-teal)}
.ct-btn.on{color:var(--purchase-teal);font-size:9px;font-weight:600;
  background:var(--purchase-teal-soft);
  box-shadow:0 0 0 1px rgba(61,109,120,.16),0 2px 8px rgba(61,109,120,.18)}
.color-input{transition:border-color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft)}
/* 已填廠商色（客戶模式）→ 同款做法：只有內緣漸層，不填底、不外擴光暈 */
.color-input.has-supplier{border-color:rgba(var(--supplier-green-rgb),.72);
  box-shadow:inset 0 0 6px rgba(var(--supplier-green-rgb),.42)}
/* 手機（#ptbl 在 600px 以下改直式、標籤佔 84px）：讓顏色欄縮得下，切換鈕給足可點面積 44px */
@media (max-width:600px){
  /* 表頭整列在手機是隱藏的 → 改顯示搜尋列旁那顆；給足 44×44 可點面積 */
  .color-toggle-head{display:none}
  .color-toggle-mobile{display:inline-flex}
  .ct-btn{min-width:44px;min-height:44px;padding:6px 10px}
}
#ptbl th:first-child,#ptbl td:first-child{padding-left:var(--s-3)}
.edit-num{width:80px;padding:6px 8px;font-size:var(--fs-base)}
.edit-txt{width:100%;min-width:120px;padding:6px 8px;font-size:var(--fs-base)}
.edit-sort{width:52px;padding:6px;font-size:var(--fs-base);text-align:center}
.add-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.add-row .edit-txt{min-width:160px;flex:1}
/* 手動新增商品：庫存顏色／尺寸是選填的小欄，不跟商品名那些主要欄位搶寬度 */
.add-row .edit-txt.inv-spec{min-width:92px;max-width:120px;flex:0 1 auto}
.add-row .primary{margin-top:0}
.add-image-btn{min-height:34px}
.add-image-name{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge-btn{border:1px solid var(--hairline-strong);border-radius:var(--r-1);padding:4px 14px;font-size:var(--fs-2xs);letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;background:#fff;color:var(--muted);
  transition:border-color var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft),transform var(--t-fast) var(--ease-soft)}
.badge-btn:hover{border-color:var(--ink-2);color:var(--ink-2)}
.badge-btn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.badge-btn.off{color:var(--muted2)}
.badge-btn:active{transform:scale(.94)}
.product-state-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.product-stockout-open{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:28px;padding:4px 9px;
  border:1px solid var(--hairline-strong);border-radius:var(--r-1);background:#fff;color:var(--muted);cursor:pointer;
  font-size:var(--fs-2xs);white-space:nowrap;transition:color var(--t-base) var(--ease-soft),border-color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft),transform var(--t-fast) var(--ease-soft)}
.product-stockout-open svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.product-stockout-open:hover,.product-stockout-open:focus-visible{outline:none;border-color:#8c5c52;color:#70473f}
.product-stockout-open.is-active{border-color:rgba(140,92,82,.34);background:#fbf4f2;color:#855247}
.product-stockout-open:active{transform:scale(.96)}
.product-stockout-backdrop{position:fixed;inset:0;z-index:94;background:rgba(22,24,25,.3);opacity:0;transition:opacity var(--t-base) var(--ease-soft)}
.product-stockout-panel{position:fixed;top:0;right:0;bottom:0;z-index:95;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  width:min(470px,100vw);height:100vh;height:100dvh;overflow:hidden;border-left:1px solid var(--hairline-strong);background:#fff;
  box-shadow:-18px 0 42px rgba(23,26,28,.13);transform:translate3d(100%,0,0);transition:transform var(--t-base) var(--ease);will-change:transform}
.product-stockout-panel[hidden],.product-stockout-backdrop[hidden]{display:none}
body.product-stockout-open{overflow:hidden}
body.product-stockout-open .product-stockout-backdrop{opacity:1}
body.product-stockout-open .product-stockout-panel{transform:translate3d(0,0,0)}
.product-stockout-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);padding:22px 24px 18px;border-bottom:1px solid var(--hairline)}
.product-stockout-head small{display:block;margin-bottom:3px;color:var(--muted);font-size:var(--fs-xs)}
.product-stockout-head h2{margin:0;font-family:var(--font-serif);font-size:var(--fs-xl);font-weight:400;letter-spacing:0}
.product-stockout-close{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--r-1);padding:0;background:transparent;color:var(--muted);cursor:pointer}
.product-stockout-close:hover,.product-stockout-close:focus-visible{outline:none;background:var(--surface-2);color:var(--ink)}
.product-stockout-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.product-stockout-body{min-height:0;overflow-y:auto;padding:20px 24px}
.product-stockout-all,.product-stockout-option{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.product-stockout-all{padding:16px;border:1px solid rgba(140,92,82,.25);background:#fbf7f5}
.product-stockout-all>span{display:grid;gap:3px}.product-stockout-all strong{font-size:var(--fs-sm);font-weight:600}.product-stockout-all small{color:var(--muted);font-size:var(--fs-xs)}
.product-stockout-all input,.product-stockout-option input{position:absolute;opacity:0;pointer-events:none}
.product-stockout-all i,.product-stockout-option i{position:relative;flex:none;width:38px;height:22px;border:1px solid var(--hairline-strong);border-radius:999px;background:#fff;transition:background var(--t-base) var(--ease-soft),border-color var(--t-base) var(--ease-soft)}
.product-stockout-all i::after,.product-stockout-option i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#a5aaa7;transition:transform var(--t-base) var(--ease),background var(--t-base) var(--ease-soft)}
.product-stockout-all input:checked+i,.product-stockout-option input:checked+i{border-color:#8c5c52;background:#8c5c52}
.product-stockout-all input:checked+i::after,.product-stockout-option input:checked+i::after{background:#fff;transform:translateX(16px)}
.product-stockout-all input:focus-visible+i,.product-stockout-option input:focus-visible+i{outline:2px solid rgba(61,109,120,.3);outline-offset:2px}
.product-stockout-section-head{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-bottom:8px;border-bottom:1px solid var(--hairline)}
.product-stockout-section-head span{font-size:var(--fs-xs);font-weight:600}.product-stockout-section-head small{color:var(--muted);font-size:var(--fs-xs)}
.product-stockout-list{display:grid}
.product-stockout-option{min-height:54px;padding:10px 2px;border-bottom:1px solid var(--hairline)}
.product-stockout-option>span{display:flex;align-items:baseline;gap:8px;min-width:0}.product-stockout-option strong{font-size:var(--fs-sm);font-weight:500}.product-stockout-option small{color:var(--muted);font-size:var(--fs-xs)}
.product-stockout-option.is-inherited{opacity:.55;cursor:default}
.product-stockout-empty{padding:30px 0;color:var(--muted);font-size:var(--fs-sm);text-align:center}
.product-stockout-footer{padding:16px 24px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--hairline-strong);background:#fff}
.product-stockout-footer button{width:100%;min-height:46px}
.danger-btn{border:1px solid var(--hairline-strong);border-radius:var(--r-1);background:#fff;padding:6px 12px;font-size:var(--fs-2xs);letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;color:var(--muted);
  transition:border-color var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft),transform var(--t-fast) var(--ease-soft)}
.danger-btn:hover{border-color:var(--ink);color:var(--ink);background:var(--surface-1)}
.danger-btn:active{transform:scale(.94)}
.danger-btn.small{padding:5px 10px}
.pdf-link{font-family:var(--font-serif);font-size:var(--fs-sm);letter-spacing:.01em;color:var(--ink);
  border-bottom:1px solid var(--hairline-strong);padding-bottom:1px;transition:border-color var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft)}
.pdf-link:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---- 訂單管理 dashboard / 本期分析 ---- */
.period-card-list{display:grid;gap:var(--s-5);margin-bottom:var(--s-5)}
.period-card-list .panel{margin-bottom:0}
.cur-period{background:var(--surface-0);border:1px solid var(--hairline-strong);border-radius:4px;
  padding:var(--s-6);box-shadow:0 1px 2px rgba(20,22,26,.04),0 12px 34px rgba(20,22,26,.07);
  animation:riseIn var(--t-slow) var(--ease) both;animation-delay:60ms}
.period-overview-card{position:relative;overflow:hidden;
  transition:border-color var(--t-base) var(--ease-soft),box-shadow var(--t-slow) var(--ease-soft)}
.period-overview-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:#aeb2b7}
.period-overview-card.is-current::before{background:var(--ink)}
.period-overview-card:hover{border-color:#cfd2d6;box-shadow:0 2px 5px rgba(20,22,26,.05),0 18px 42px rgba(20,22,26,.09)}
.period-empty{border-style:dashed;box-shadow:none}
.cp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-5);flex-wrap:wrap}
.cp-id{min-width:0}
.cp-label{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.period-live-dot{width:6px;height:6px;border-radius:50%;background:#686c72;box-shadow:0 0 0 4px rgba(104,108,114,.09);flex:none}
.period-current-tag{margin-left:4px;padding:3px 7px;border:1px solid var(--hairline-strong);border-radius:2px;
  color:var(--ink-2);background:var(--surface-1);font-size:9px;font-weight:500;letter-spacing:.08em}
.cp-name{font-size:var(--fs-3xl);font-weight:400;color:var(--ink);letter-spacing:.01em;margin-top:var(--s-2);line-height:1.05}
.period-created{margin-top:8px;color:var(--muted);font-size:var(--fs-xs);letter-spacing:.04em}
.cp-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.period-overview-card .cp-actions button{min-height:44px}
.cp-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:var(--s-6);background:var(--hairline);border:1px solid var(--hairline)}
.cp-stats.four{grid-template-columns:repeat(4,1fr)}
.cp-stats.three{grid-template-columns:repeat(3,1fr);margin-top:var(--s-4)}
.stat{background:var(--surface-0);border:0;padding:var(--s-5);text-align:center;transition:background var(--t-base) var(--ease-soft)}
.period-overview-card .period-metrics{gap:12px;background:transparent;border:0}
.period-overview-card .period-metrics .stat{display:flex;min-width:0;min-height:100px;flex-direction:column;justify-content:center;
  border:1px solid #e3e5e8;border-radius:3px;background:#fff;
  box-shadow:0 1px 2px rgba(20,22,26,.035),0 7px 18px rgba(20,22,26,.045);
  transition:background var(--t-base) var(--ease-soft),border-color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft)}
.period-overview-card .period-metrics .stat:hover{background:var(--surface-1);border-color:#d5d8dc;
  box-shadow:0 1px 3px rgba(20,22,26,.04),0 10px 24px rgba(20,22,26,.06)}
.stat:hover{background:var(--surface-1)}
.cp-stats .stat:nth-child(1){animation:cardIn var(--t-base) var(--ease) both;animation-delay:120ms}
.cp-stats .stat:nth-child(2){animation:cardIn var(--t-base) var(--ease) both;animation-delay:165ms}
.cp-stats .stat:nth-child(3){animation:cardIn var(--t-base) var(--ease) both;animation-delay:210ms}
.cp-stats .stat:nth-child(4){animation:cardIn var(--t-base) var(--ease) both;animation-delay:255ms}
.cp-stats .stat:nth-child(5){animation:cardIn var(--t-base) var(--ease) both;animation-delay:300ms}
.sv{font-size:var(--fs-2xl);font-weight:400;letter-spacing:0;line-height:1.1;color:var(--ink)}
.sv.ok{color:var(--ink)}
.sl{color:var(--ink-3);font-size:var(--fs-2xs);margin-top:var(--s-2);letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-sans)}
/* 分析分頁 */
.tabs{display:flex;gap:var(--s-6);border-bottom:1px solid var(--hairline);margin-bottom:var(--s-5)}
.tab{background:none;border:0;padding:12px 0;font-family:inherit;font-size:var(--fs-sm);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;position:relative;transition:color var(--t-base) var(--ease-soft)}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease)}
.tab:hover{color:var(--ink-2)}
.tab.active{color:var(--ink)}
.tab.active::after{transform:scaleX(1)}
/* 營收趨勢長條 */
.bar-row{display:flex;align-items:center;gap:var(--s-4);padding:9px 0}
.bar-label{width:130px;flex:none;font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;height:10px;background:var(--surface-2);border-radius:var(--r-1);overflow:hidden}
.bar-fill{height:100%;background:var(--ink);border-radius:var(--r-1);transition:width var(--t-slow) var(--ease)}
.bar-val{width:120px;flex:none;text-align:right;font-size:var(--fs-sm);color:var(--ink)}
.analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);margin-top:var(--s-6)}
.mini-title{font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding-bottom:10px;margin-bottom:2px;border-bottom:1px solid var(--ink)}
/* 實付明細（分析頁可展開下拉）*/
.pay-detail{margin-top:var(--s-4)}
.pay-detail>summary{cursor:pointer;padding:11px 15px;font-size:var(--fs-sm);color:var(--ink-2);list-style:none;
  border:1px solid var(--hairline-strong);border-radius:var(--r-1);background:var(--surface-1);user-select:none;
  transition:background var(--t-base) var(--ease-soft),border-color var(--t-base) var(--ease-soft)}
.pay-detail>summary:hover{border-color:var(--ink);background:var(--surface-0)}
.pay-detail>summary::-webkit-details-marker{display:none}
.pay-detail>summary::before{content:'▸';margin-right:8px;display:inline-block;color:var(--ink-3);
  transition:transform var(--t-base) var(--ease-soft)}
.pay-detail[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.pay-detail[open]>summary::before{transform:rotate(90deg)}
.pay-detail .table-wrap{border:1px solid var(--hairline-strong);border-top:none;border-radius:0 0 var(--r-1) var(--r-1);padding:6px 10px 10px}
.pd-neg{font-weight:600;color:var(--ink)}     /* 少付：需注意 */
.pd-pos{color:var(--ink-3)}                    /* 多付 */
.pd-total td{font-weight:600;border-top:2px solid var(--hairline-strong)}
/* #9 庫存頁 */
.inv-summary{display:flex;gap:var(--s-4);margin:0 0 var(--s-5);flex-wrap:wrap}
.inv-summary .stat{flex:1;min-width:150px;border:1px solid var(--hairline);border-radius:var(--r-1);padding:var(--s-4) var(--s-5)}
.inv-summary .sl{font-size:var(--fs-xs);letter-spacing:.1em;color:var(--ink-3);margin-top:4px}
.inv-sm{max-width:132px}
.inv-qty{width:82px;text-align:right}
/* 庫存新增的相機鈕：只有圖示、無外框 */
.iv-cam-btn{flex:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--ink-2);
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-1);
  transition:color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft)}
.iv-cam-btn:hover{color:var(--ink);background:var(--surface-2)}
.iv-cam-btn:active{transform:scale(.94)}
.iv-cam-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* 庫存清單：圖片式商品列＋期別顏色標。
   邊邊的視覺語言桌機／手機同一套：左側整條期別顏色直線（使用者指定要保留）＋
   標題旁細長條標記，兩種寬度都一樣。 */
.inv-group{margin-bottom:var(--s-6);border-left:3px solid var(--inv-color);padding-left:var(--s-4)}   /* 組與組之間留明顯空白 */
/* 期別組是 <details>：舊期預設收合。標題列整條可點，去掉瀏覽器預設的三角形改用自繪箭頭。 */
details.inv-group>summary{cursor:pointer;list-style:none;user-select:none;
  transition:color var(--t-base) var(--ease-soft)}
details.inv-group>summary::-webkit-details-marker{display:none}
details.inv-group>summary::after{content:'';width:6px;height:6px;margin-left:2px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg) translate(-1px,-1px);opacity:.45;
  transition:transform var(--t-base) var(--ease-soft),opacity var(--t-base) var(--ease-soft)}
details.inv-group[open]>summary::after{transform:rotate(45deg) translate(-2px,-2px)}
details.inv-group>summary:hover{color:var(--ink)}
details.inv-group>summary:hover::after{opacity:.8}
.inv-group:last-child{margin-bottom:0}
.inv-group-head{display:flex;align-items:center;gap:8px;min-height:36px;font-size:var(--fs-sm);font-weight:600;letter-spacing:.05em;color:var(--ink-2);margin-bottom:6px}
.inv-group-bar{width:3px;height:22px;border-radius:999px;background:var(--inv-color);flex:none}
.inv-group-title{min-width:0;overflow-wrap:anywhere}
/* 件數統一做成小膠囊（桌機／手機同款），跨斷點時組標題整排長相一致 */
.inv-group-head small{display:inline-flex;align-items:baseline;gap:3px;margin-left:auto;
  padding:4px 9px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface);
  color:var(--ink-3);font-weight:400;font-size:var(--fs-xs);white-space:nowrap}
.inv-group-head small strong{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.inv-item{display:flex;align-items:center;gap:var(--s-4);padding:8px 0;border-bottom:1px solid var(--hairline)}
.inv-item:last-child{border-bottom:0}
.inv-item-img{width:44px;height:56px;object-fit:cover;background:var(--surface-2);border:1px solid var(--hairline);flex:none}
/* 缺圖：補同尺寸占位框，整列左緣才對得齊（有圖沒圖的列不會一個縮一個凸） */
.inv-item.no-img::before{content:'無圖';box-sizing:border-box;flex:none;width:44px;height:56px;
  display:grid;place-items:center;border:1px solid var(--hairline);background:var(--surface-2);
  color:var(--muted2);font-size:10px;letter-spacing:.14em;order:-1}
.inv-item-main{flex:1;min-width:0}
.inv-item-name{font-size:var(--fs-base);font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.inv-item-price{color:var(--muted);font-weight:400;font-size:var(--fs-sm);margin-left:4px}
.inv-item-spec{font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px}
.inv-item-qty{flex:none;font-family:var(--font-serif);font-size:var(--fs-md);color:var(--ink)}
.inv-item-neg .inv-item-qty{font-weight:700;text-decoration:underline;text-underline-offset:3px}   /* 負數＝帳對不上 */
/* 可編輯的庫存列：平常只留一條淡底線當「可改」的提示（手機沒有 hover，一定要看得出來），
   hover 才補滿外框、聚焦再加底色。 */
.inv-item .inv-qty{flex:none;width:64px;background:transparent;border-color:transparent;
  border-bottom-color:var(--hairline);font-family:var(--font-serif);font-size:var(--fs-md);
  transition:border-color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft)}
.inv-item:hover .inv-qty{border-color:var(--hairline)}
.inv-item .inv-qty:focus{background:var(--surface);border-color:var(--ink-3)}
.inv-item-actions{display:flex;align-items:center;gap:4px;flex:none}
.inv-qty-field{display:flex;align-items:center;justify-content:flex-end;flex:none}
.inv-qty-label{display:none}
.inv-qty-unit{display:none}
/* 「已調整」用中性灰：金=斷貨、紫=未到、綠=多到 已各有語意，不能佔用 */
.inv-qty.is-adjusted{font-weight:600;text-decoration:underline dotted;text-underline-offset:4px}
.inv-adj-tag{color:var(--muted2);margin-left:6px;padding:1px 6px;border-radius:999px;
  background:var(--surface-2);font-size:calc(var(--fs-xs) - 1px);letter-spacing:.03em}
/* 手動歸零的列：留著但淡化，讓使用者還能填回數字還原（否則整列消失就改不回來了）*/
.inv-item.is-zeroed .inv-item-img,.inv-item.is-zeroed .inv-item-name{opacity:.42}
.inv-item.is-zeroed .inv-qty{color:var(--muted2)}
/* 送出中：欄位鎖住並淡化，避免使用者以為沒存到而重打（一次只跑一個寫入）*/
.inv-busy{opacity:.5;pointer-events:none}
.inv-spec-edit{display:flex;align-items:center;gap:4px;margin-top:3px}   /* 不換行：窄螢幕改用兩欄平分 */
/* 膠囊外框：桌機攤平（維持原本 顏色/尺寸 斜線排法），手機才變成帶小標的藥丸 */
.inv-chip{display:contents}
.inv-chip-label{display:none}
.inv-spec-slash{color:var(--muted2);flex:none}
.inv-spec-src{color:var(--muted2);margin-left:4px;flex:none;white-space:nowrap}
.inv-xs{flex:1 1 0;min-width:0;max-width:96px;padding:2px 6px;font-size:var(--fs-xs);
  background:transparent;border-color:transparent;border-bottom-color:var(--hairline);
  transition:border-color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft)}
.inv-item:hover .inv-xs{border-color:var(--hairline)}
.inv-xs:focus{background:var(--surface);border-color:var(--ink-3)}
/* 標示現在看的是「本期」還是「全部期別」 */
.inv-scope-tag{font-size:var(--fs-xs);letter-spacing:.05em;color:var(--ink-2);
  padding:3px 9px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface-2)}
.inv-scope-tag.is-all{color:var(--muted2)}
/* 手機：輸入框字級必須 >=16px，否則 iOS Safari 一聚焦就自動放大整頁；點擊範圍也要夠大。
   ⚠️ 這段一定要放在上面 .inv-qty / .inv-xs 的基礎規則「之後」，同權重才蓋得過去。 */
@media (max-width:600px){
  .inv-item .inv-qty,.inv-item .inv-xs{font-size:16px;min-height:34px}
  .inv-item .inv-qty{width:68px}
  .inv-item .inv-xs{max-width:none;padding:2px 6px}
  .inv-item .x-btn{padding:8px 10px;min-width:40px;min-height:40px}
  .inv-item{gap:10px}
  .inv-adj-tag{font-size:10px}
}
.new-period{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.new-period .search{margin-left:0;width:260px}
/* 「新增一期」符號鈕：只顯示＋，44×44 可點範圍，黑白風格不變 */
.np-add{min-width:44px;min-height:44px;padding:0;font-size:var(--fs-lg);line-height:1;display:inline-flex;align-items:center;justify-content:center}
.period-link{cursor:pointer;border-bottom:1px solid transparent;transition:border-color var(--t-base) var(--ease-soft)}
.period-link:hover{border-bottom-color:var(--ink)}
.tag-cur{background:var(--ink);color:#fff;font-size:9px;padding:2px 9px;letter-spacing:.14em;text-transform:uppercase;margin-left:8px}
.row-ops{display:flex;gap:8px;flex-wrap:wrap}
.row-ops button{border:1px solid var(--hairline-strong);border-radius:var(--r-1);background:#fff;padding:6px 12px;font-size:var(--fs-2xs);
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--ink-3);
  transition:border-color var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft),transform var(--t-fast) var(--ease-soft)}
.row-ops button:hover{border-color:var(--ink);color:var(--ink);background:var(--surface-1)}
.row-ops button:active{transform:scale(.94)}

/* ---- 登入頁 ---- */
body.login-bg{display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;background:var(--paper)}
.login-card{width:340px;text-align:center;padding:40px 36px;border-radius:var(--r-0);border:1px solid var(--hairline);box-shadow:var(--shadow-hover);animation:cardIn var(--t-slow) var(--ease) both}
.login-card .brand{display:block;font-size:var(--fs-xl);letter-spacing:.18em;margin-bottom:24px}
.login-card input[type=password]{width:100%;padding:13px 14px;border:1px solid var(--hairline-strong);border-radius:var(--r-1);
  font-family:inherit;font-size:var(--fs-base);letter-spacing:.18em;text-align:center;margin-bottom:14px;background:var(--surface-inset);
  transition:border-color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft)}
.login-card input[type=password]:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:var(--focus-ring-inset)}
.login-card .primary{width:100%;margin-top:4px}

/* ---- 全域鍵盤 focus ---- */
:where(button,a,select,[tabindex],.period-link,.card):focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-1)}

/* ---- 減少動態 ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .card,.cust-card,.stat,.panel,.content,.page-head,.page-head h1,.ci,.cur-period{opacity:1!important;transform:none!important}
  .card:hover,.cust-card:hover,.stat:hover{transform:none!important}
}

/* ---- 響應式 ---- */
@media (max-width:1180px){
  .content{padding:0 var(--gutter-sm)}
  .topbar{padding:16px var(--gutter-sm)}
  .desk{grid-template-columns:1fr 360px;gap:var(--s-5)}
}
@media (max-width:900px){
  .content{margin:var(--s-6) auto var(--s-8)}
  .page-head{margin-bottom:var(--s-6)}
  .desk,.import-grid{grid-template-columns:1fr}
  .cart{position:static;max-height:none;margin-top:var(--s-5)}
  .catalog{max-height:none}
  .cp-stats,.cp-stats.four{grid-template-columns:repeat(3,1fr)}
  .analysis-grid{grid-template-columns:1fr;gap:var(--s-5)}
}
@media (max-width:600px){
  .content{padding:0 var(--s-4);margin:var(--s-5) auto var(--s-7)}
  .topbar{gap:var(--s-3);padding:var(--s-4)}
  .panel{padding:var(--s-5)}
  .cur-period{padding:var(--s-6) var(--s-5)}
  .page-head{margin-bottom:var(--s-5)}
  .cp-stats,.cp-stats.four{grid-template-columns:repeat(2,1fr)}
  .nav{gap:var(--s-4)}
  .search{margin-left:0;width:100%}
  .cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s-4)}
}

/* ============================================================
   手機版整合修正（≤600px / ≤430px 生效；桌機 >600px 不受影響）
   零彩色（白/灰/黑）、全用 :root token
   ============================================================ */

/* ===== (0) 殼層：全站水平溢出兜底 ===== */
@media (max-width:600px){
  html{overflow-x:clip}
  body{overflow-x:hidden}                 /* topbar 為 body 直接子層 → 仍可 sticky */
  .content{overflow-x:clip;max-width:100%}
  .content > *{min-width:0;max-width:100%}
}

/* ===== (1) topbar 壓成單行 ~56px + nav 橫向滑動 ===== */
@media (max-width:600px){
  .topbar{flex-wrap:nowrap;gap:var(--s-4);padding:10px var(--s-4);min-height:56px;background:var(--surface-0)}
  .brand-cluster{gap:8px;min-width:0}
  .brand{flex:none;font-size:var(--fs-base);letter-spacing:.12em;white-space:nowrap}
  .brand-menu{width:32px;height:32px;flex:none}
  .brand-menu span{width:14px}
  .brand-menu span:nth-child(2){width:10px}
  .brand-menu:hover span:nth-child(2),.brand-menu.active span:nth-child(2){width:14px}
  .nav{flex:1;min-width:0;flex-wrap:nowrap;gap:var(--s-4);overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
    padding-bottom:2px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;min-height:44px;display:inline-flex;align-items:center;padding:0 2px;white-space:nowrap;letter-spacing:.1em}
  .nav a::after{bottom:8px}
  .nav-drawer{width:74vw;max-width:320px;padding:26px 24px 34px}
  .nav-drawer-title{font-size:1.55rem}
  .nav-drawer-list a{min-height:64px;font-size:1.18rem}
  .nav-drawer-mark{width:44px;height:44px}
  .foot{padding:var(--s-6) var(--s-4)}
}

/* ===== (2) 全站共用：唯讀寬表 → 直式堆疊卡片（.tbl-stack）=====
   模板：<table class="tbl tbl-stack">，每個資料 <td> 加 data-label */
@media (max-width:600px){
  .tbl-stack,.tbl-stack thead,.tbl-stack tbody,.tbl-stack tr,.tbl-stack td{display:block;width:100%}
  .tbl-stack thead,
  .tbl-stack > tbody > tr:first-child:has(th),
  .tbl-stack > tr:first-child:has(th){display:none}
  .tbl-stack tr{border:1px solid var(--hairline);border-radius:var(--r-1);background:var(--surface-0);
    box-shadow:var(--shadow-rest);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-3)}
  .tbl-stack tr.row-active{background:var(--surface-2);border-color:var(--hairline-contrast);box-shadow:inset 2px 0 0 var(--ink)}
  .tbl-stack tr:hover td{background:transparent}
  .tbl-stack tr:hover td:first-child{box-shadow:none}
  .tbl-stack td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
    padding:6px 0;border:0;border-bottom:1px solid var(--hairline);text-align:right;overflow-wrap:anywhere}
  .tbl-stack td:last-child{border-bottom:0;padding-bottom:0}
  .tbl-stack td:first-child{padding-top:0}
  .tbl-stack td:first-child,.tbl-stack td:last-child{padding-left:0;padding-right:0}
  .tbl-stack td::before{content:attr(data-label);flex:none;text-align:left;color:var(--ink-3);
    font-family:var(--font-sans);font-weight:500;font-size:var(--fs-2xs);letter-spacing:.14em;
    text-transform:uppercase;font-variant-numeric:normal}
  .tbl-stack td.num{font-family:var(--font-serif);font-variant-numeric:lining-nums tabular-nums}
  .tbl-stack td.cell-name{justify-content:flex-start;align-items:center;gap:var(--s-3);font-size:var(--fs-md)}
  .tbl-stack td.cell-name::before{display:none}
  .tbl-stack td.cell-name b{font-weight:500}
  .tbl-stack td.row-ops{flex-wrap:wrap;align-items:stretch;gap:var(--s-2);padding-top:var(--s-3)}
  .tbl-stack td.row-ops::before{width:100%;margin-bottom:2px;flex-basis:100%}
  .tbl-stack td.row-ops button{flex:1 1 calc(50% - var(--s-2));min-height:44px}
  .tbl-stack img,.tbl-stack input,.tbl-stack button,.tbl-stack select{max-width:100%}
}
@media (max-width:430px){
  .tbl-stack td::before{width:auto}
}

/* ===== (3) 全站共用：可水平捲動容器（.table-wrap）===== */
@media (max-width:600px){
  .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ===== (4) 全站共用：tap target + 輸入框 iOS 防縮放 ===== */
@media (max-width:600px){
  .search{margin-left:0;width:100%;min-height:44px;font-size:16px}
  .order-input,.folder-in,.form-panel input{font-size:16px}
  .badge-btn,.danger-btn,.danger-btn.small,.row-ops button{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px}
  .x-btn{opacity:1;min-height:44px;min-width:44px;padding:0 10px;color:var(--ink-3)}
  .cust-card:hover .x-btn{opacity:1}
}

/* ===== (5) dashboard (/) ===== */
@media (max-width:600px){
  .cur-period{padding:var(--s-5)}
  .cp-head{gap:var(--s-4)}
  .cp-actions{width:100%;flex-direction:column;align-items:stretch;gap:var(--s-2)}
  .cp-actions a.primary,.cp-actions a.btn-ghost{width:100%;min-height:44px;justify-content:center}
  .new-period{margin-left:0;width:100%;flex-direction:column;align-items:stretch;gap:var(--s-2)}
  .new-period .search{width:100%;min-height:44px}
  .new-period .btn-ghost,.new-period .primary{width:100%;min-height:44px;justify-content:center}
}
@media (max-width:430px){
  .cp-stats,.cp-stats.four{display:flex;grid-template-columns:none;gap:1px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .cp-stats .stat{flex:0 0 38%;scroll-snap-align:start;padding:var(--s-4) var(--s-3)}
  .cp-name{font-size:var(--fs-2xl);line-height:1.1}
}

/* ===== (6) products (/products) — 堆疊可編輯卡（#ptbl 限定）===== */
@media (max-width:600px){
  .sync-row{flex-direction:column;align-items:stretch;gap:var(--s-3)}
  .sync-row .folder-in{min-width:0;width:100%;word-break:break-all;min-height:44px}
  .sync-bar .primary{width:100%;min-height:44px}
  .add-row{flex-direction:column;align-items:stretch;gap:var(--s-3)}
  .add-row > .edit-txt,.add-row > .edit-num,.add-row > .primary,.add-row > .btn-ghost{width:100%;min-width:0;min-height:44px}
  .add-image-name{max-width:100%}
  #ptbl,#ptbl tbody,#ptbl tr,#ptbl td{display:block;width:100%}
  #ptbl tr:first-child{display:none}
  #ptbl tr{border:1px solid var(--hairline);border-radius:var(--r-0);box-shadow:var(--shadow-rest);
    background:var(--surface-0);padding:var(--s-4);margin-bottom:var(--s-4)}
  #ptbl tr:hover td{background:transparent}
  #ptbl tr:hover td:first-child{box-shadow:none}
  #ptbl td{border:0;border-bottom:1px solid var(--hairline);padding:var(--s-3) 0;
    display:flex;align-items:center;gap:var(--s-3)}
  #ptbl td:last-child{border-bottom:0}
  #ptbl td:first-child,#ptbl td:last-child{padding-left:0;padding-right:0}
  #ptbl td::before{content:attr(data-label);flex:none;width:84px;color:var(--ink-3);
    font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-sans)}
  #ptbl td[data-label=""]::before,#ptbl td:not([data-label])::before{content:none}
  #ptbl .edit-txt,#ptbl .edit-num{width:100%;min-width:0;flex:1;min-height:44px;font-size:var(--fs-base)}
  #ptbl td.muted{font-family:var(--font-serif);font-variant-numeric:lining-nums tabular-nums;color:var(--ink-2)}
  #ptbl .thumb-up{width:56px;height:56px}
  #ptbl .badge-btn,#ptbl .danger-btn.small{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px}
  #ptbl .product-state-actions{width:100%}
  #ptbl .product-stockout-open{min-height:44px;padding:0 13px}
  #ptbl img,#ptbl input,#ptbl button{max-width:100%}
  .product-stockout-panel{width:100vw;border-left:0}
  .product-stockout-head{padding:18px 16px 14px}
  .product-stockout-body{padding:16px}
  .product-stockout-footer{padding-inline:16px}
}
@media (max-width:430px){
  #ptbl td::before{width:72px}
}

/* ===== (7) sales (/sales) ===== */
@media (max-width:600px){
  .sales-searchbar{gap:var(--s-2)}
  .sales-searchbar .pack-toggle{min-height:44px;padding:0 10px;gap:5px;font-size:var(--fs-xs)}
  .sales-searchbar .pack-toggle input{width:15px;height:15px}
  .cc-head{flex-wrap:wrap;align-items:center;gap:var(--s-3);padding:var(--s-4)}
  .cc-name{flex:1 1 100%;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;font-size:var(--fs-md);line-height:1.4}
  .cc-right{flex:1 1 100%;flex-wrap:wrap;gap:var(--s-2);align-items:center}
  .cc-amt{min-width:0;flex:1 1 auto;text-align:left;font-size:var(--fs-md)}
  .cc-money{flex:1 1 100%;min-width:0;justify-content:space-between;gap:var(--s-3);padding:2px 0 4px}
  .cc-money span{text-align:left;font-size:var(--fs-sm)}
  .cc-money .cc-pay{text-align:right;font-size:var(--fs-lg)}
  .cc-last5{width:96px;flex:none;min-height:44px;padding:0 10px}
  .cc-paid{width:96px;flex:none;min-height:44px;padding:0 10px}
  .cc-more{flex:1 1 100%;order:1}                                    /* 手機：展開後五碼/實付獨占一行 */
  .cc-more-btn{height:44px;min-width:44px;flex:none}                 /* 手機：箭頭好按 */
  .cc-note{flex:1 1 100%;width:auto;min-height:44px;padding:0 10px}   /* 手機：備註獨占一行，好打字 */
  .cc-right .badge-btn{min-height:44px;padding:0 16px;flex:none}
  .cc-right .mini-ic{height:44px;min-width:44px;width:44px;flex:none}
  .cc-right .pdf-ic{width:44px}
  .cc-right .x-btn{opacity:1;min-height:44px;min-width:44px;padding:0 10px;color:var(--ink-3)}
  .cust-card{overflow:visible}
  .sale-add{flex-direction:column;align-items:stretch;padding:var(--s-3) var(--s-4)}
  .sale-product-search,.sale-product,.sale-color,.sale-size{width:100%;min-height:44px;font-size:16px;flex:auto}
  .sale-add .add-confirm{width:100%;height:44px}
  .sale-line{grid-template-columns:64px minmax(0,1fr);gap:var(--s-3);padding:var(--s-4)}
  .sale-line.no-img{grid-template-columns:1fr}
  .sale-line-img{width:64px;height:82px}
  .sale-line-name{font-size:var(--fs-base)}
  .sale-line-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-4)}
  .sale-line-grid div:nth-last-child(-n+2){grid-column:auto}
  .sale-line-grid div:nth-last-child(1){grid-column:1 / -1}
  .amount-mode .amount-sheet{grid-template-columns:1fr}
  .amount-sheet-head,.amount-products,.amount-calculation,.amount-entry{grid-column:1}
  .amount-sheet-head{padding:11px var(--s-4)}
  .amount-products{border-right:0;border-bottom:1px solid var(--hairline)}
  .amount-product-row{min-height:50px;padding:9px var(--s-4);gap:var(--s-3)}
  .amount-product-row b{font-size:var(--fs-xs)}
  .amount-product-row > span{font-size:var(--fs-base)}
  .amount-calculation{padding:5px var(--s-4)}
  .amount-mode .cc-right{display:grid;grid-template-columns:minmax(0,1fr) 44px;width:100%;gap:var(--s-2)}
  .amount-mode .cc-money{grid-column:1;width:auto;min-width:0;display:flex;justify-content:flex-start}
  .amount-mode .cc-money .cc-pay{align-items:flex-start;text-align:left}
  .amount-mode .cc-right .pdf-ic{grid-column:2;width:44px}
  .amount-adjust-row{grid-template-columns:minmax(80px,1fr) 44px 82px 40px 40px;gap:4px}
  .amount-adjust-row:has(.amount-fixed-label){grid-template-columns:minmax(0,1fr) 82px 40px}
  .amount-edit-label,.amount-edit-sign,.amount-edit-value,
  .amount-entry-label,.amount-entry-sign,.amount-entry-value{font-size:14px}
  .amount-edit-label:focus,.amount-edit-sign:focus,.amount-edit-value:focus,
  .amount-entry-label:focus,.amount-entry-sign:focus,.amount-entry-value:focus{font-size:16px}
  .amount-row-action{width:40px;height:40px}
  .amount-entry{grid-template-columns:54px minmax(80px,1fr) 44px;padding:11px var(--s-4)}
  .amount-entry-label{grid-column:1/-1}
  .amount-entry-sign{grid-column:1}
  .amount-entry-value{grid-column:2}
  .amount-entry-add{grid-column:3;width:44px;height:44px}
  .newcomer-free-btn{grid-column:1/-1;justify-self:stretch;width:100%}
  .tbl.mini.tbl-stack tr{border:0;border-bottom:1px solid var(--hairline);box-shadow:none;border-radius:0;
    padding:var(--s-3) var(--s-4);margin-bottom:0;background:transparent}
  .tbl.mini.tbl-stack tr:last-child{border-bottom:0}
  .tbl.mini.tbl-stack td{padding:6px 0}
  .tbl.mini.tbl-stack td:last-child{justify-content:flex-end}
  .tbl.mini.tbl-stack td:last-child::before{content:none}
  .tbl.mini.tbl-stack td .x-btn{opacity:1;min-height:44px;min-width:44px;padding:0 10px;color:var(--ink-3)}
}

/* ===== (8) analysis (/analysis) ===== */
@media (max-width:600px){
  .cp-stats,.cp-stats.four,.cp-stats.three{grid-template-columns:repeat(2,1fr)}
  .cp-stats.three{margin-top:var(--s-4)}
  .bar-row{flex-wrap:wrap;gap:var(--s-2);padding:var(--s-3) 0;border-bottom:1px solid var(--hairline)}
  .bar-label{width:auto;flex:1 1 60%;order:1;font-size:var(--fs-base)}
  .bar-val{width:auto;flex:0 0 auto;order:2;margin-left:auto;font-size:var(--fs-base)}
  .bar-track{flex:1 1 100%;order:3;width:100%;height:8px;margin-top:2px}
  .tabs{gap:var(--s-5)}
  .tab{padding:14px 0}
}

/* ===== (9) desk (home.html) — 商品卡 2 欄 + 購物車好按 ===== */
@media (max-width:600px){
  .panel{padding:var(--s-4)}
  .cards{grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
  .thumb{height:auto;aspect-ratio:1/1}
  .card-name{min-height:0;font-size:var(--fs-xs);padding:0 var(--s-2);line-height:1.45}
  .card{gap:var(--s-2);padding-bottom:var(--s-2)}
  .qty button{width:40px;height:40px;font-size:16px}
  .qty span{line-height:40px;min-width:36px;font-size:var(--fs-base)}
  .ci-img{width:52px;height:52px}
  .ci-del{padding:8px 6px}
  .spec{gap:var(--s-2)}
  .spec select{padding:10px 26px 10px 8px;font-size:var(--fs-sm)}
  .cart .primary{padding:var(--s-4) var(--s-5)}
  .desk .card,.desk .qty button,.desk .ci-del,.desk .cart .primary,.cart-cancel,.cart-confirm,.cart-fab,.cart-grab,.cart-backdrop{
    touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
  .desk .ci{animation:none}
  .desk .card,.desk .card:hover,.desk .card:active{transform:none;box-shadow:var(--shadow-rest)}
  .desk .card:hover .thumb img{transform:none}
  .desk .qty button,.desk .qty button:hover,.desk .qty button:active{transform:none}
  .desk .qty button:hover{background:#fff;color:var(--ink-3)}
  .desk .cart .primary:hover,.desk .cart .primary:active{background:var(--ink);color:#fff;box-shadow:var(--shadow-rest);transform:none}
  .desk .cart .primary:disabled:hover,.desk .cart .primary:disabled:active{background:#dcdcdc;color:#fff}
  .desk .ci-del:hover{text-decoration:none}
}
@media (max-width:430px){
  .cards{gap:var(--s-2)}
}

/* ===== (10) import (/import) — 兩表堆疊 + 長路徑換行 ===== */
@media (max-width:600px){
  .hint code,.panel code{word-break:break-all;overflow-wrap:anywhere;white-space:normal}
  .import-grid .primary{width:100%;min-height:44px}
  .panel-head .stats{margin-left:0;width:100%;margin-top:var(--s-2)}
  .order-input{height:240px}
  #btbl td:last-child .pdf-link{display:block;width:100%;min-height:44px;line-height:44px;text-align:center;
    border:1px solid var(--hairline-strong);border-radius:var(--r-1)}
  #btbl td:last-child{justify-content:center}
  #btbl td:last-child::before{display:none}
  #result .tbl{display:block;width:100%}
  #result .tbl tr:first-child{display:none}
  #result .tbl tr{display:block;border:1px solid var(--hairline);border-radius:var(--r-0);
    margin-bottom:var(--s-3);padding:var(--s-2) var(--s-3);background:var(--surface-0)}
  #result .tbl tr:hover td{background:transparent}
  #result .tbl td{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
    padding:var(--s-2) 0;border:0;border-bottom:1px solid var(--hairline);text-align:right;overflow-wrap:anywhere}
  #result .tbl tr td:last-child{border-bottom:0}
  #result .tbl td::before{content:attr(data-label);flex:none;text-align:left;color:var(--ink-3);
    font-family:var(--font-sans);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase}
  #result .tbl td.num{font-family:var(--font-serif);font-variant-numeric:lining-nums tabular-nums}
}

/* ===== (12) settings — 輸入框 + 檔案上傳鈕 ===== */
@media (max-width:600px){
  .form-panel input{min-height:44px;padding:var(--s-3) var(--s-4);font-size:var(--fs-md)}
  .form-panel input[type="file"]{min-height:44px;padding:var(--s-3) var(--s-4);line-height:1.4;font-size:var(--fs-sm);color:var(--ink-2)}
  .form-panel input[type="file"]::file-selector-button,
  .form-panel input[type="file"]::-webkit-file-upload-button{
    margin-right:var(--s-3);border:1px solid var(--hairline-contrast);border-radius:var(--r-1);
    background:#fff;color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-xs);
    letter-spacing:.12em;text-transform:uppercase;padding:var(--s-2) var(--s-4);min-height:36px;cursor:pointer;
    transition:background var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft),border-color var(--t-base) var(--ease-soft)}
  .form-panel input[type="file"]:hover::file-selector-button,
  .form-panel input[type="file"]:hover::-webkit-file-upload-button{background:var(--ink);color:#fff;border-color:var(--ink)}
  #saveMsg.sync-msg{right:var(--s-4);bottom:var(--s-4)}
  .form-panel .field{margin:var(--s-3) 0}
}

/* ===== (13) sizes — 晶片觸控 ===== */
@media (max-width:600px){
  .chips{gap:var(--s-3)}
  .chips .chip{min-height:44px;display:inline-flex;align-items:center;padding:0 var(--s-4);letter-spacing:.1em}
}
@media (max-width:430px){
  .content{padding:0 var(--s-3)}
  .panel{padding:var(--s-4)}
  .page-head{margin-bottom:var(--s-4)}
}

/* ===== (14) login — 流動寬卡片 + 安全邊界 ===== */
@media (max-width:600px){
  body.login-bg{padding:var(--s-5);align-items:flex-start;padding-top:var(--s-8)}
  .login-card{width:100%;max-width:340px;padding:var(--s-6) var(--s-5)}
  .login-card input[type=password]{min-height:44px;padding:var(--s-3) var(--s-4);font-size:var(--fs-md)}
  .login-card .primary{min-height:44px;width:100%;padding:var(--s-3) var(--s-5)}
}
@media (max-width:360px){
  body.login-bg{padding:var(--s-4)}
  .login-card{padding:var(--s-5) var(--s-4)}
}

/* ===== 訂單管理：電腦版/手機版切換（手機版才用新設計，電腦版維持原樣）===== */
.m-only{display:none}
@media (max-width:600px){
  .d-only{display:none}
  .m-only{display:block}
}

/* ===== 訂單管理：頁標 ＋／歷史 + 本期卡片角落 歸檔/刪除 圖示 ===== */
.ph-actions{margin-left:auto;display:flex;gap:var(--s-4);align-items:center;transform:translateY(12px)}
.ph-actions .btn-ghost{border:0;background:transparent;box-shadow:none;color:var(--ink-3);
  padding:6px 4px;font-size:var(--fs-2xs);letter-spacing:.12em}
.ph-actions .btn-ghost:hover{background:transparent;border-color:transparent;color:var(--ink);transform:none}
.ph-actions .ph-ic{font-size:var(--fs-base);line-height:1;padding:4px 6px;color:var(--ink-2)}
.cp-id{min-width:0}
.cp-corner{display:flex;gap:var(--s-2);flex:none}
.cp-ic{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--hairline-strong);background:#fff;color:var(--ink-3);border-radius:var(--r-1);cursor:pointer;
  transition:border-color var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft),transform var(--t-fast) var(--ease-soft)}
.cp-ic:hover{border-color:var(--ink);color:var(--ink);background:var(--surface-1)}
.cp-ic:active{transform:scale(.94)}
.cp-ic svg{width:17px;height:17px;display:block}
@media (max-width:600px){
  .cp-ic{width:44px;height:44px}
  .cp-ic svg{width:19px;height:19px}
}

/* ===== 收單台：手機購物清單改成底部彈出視窗（一開始不顯示，點清單才滑出）===== */
.mobile-customer-bar,.cart-grab,.cart-backdrop,.cart-fab,.cart-peek,.mobile-toast{display:none}
@media (max-width:600px){
  /* .content 的進場動畫會產生 transform → 害固定定位的清單視窗以 .content 為容器(跑到頁尾)。
     手機關掉它，讓 position:fixed 正確以「畫面」為基準。 */
  .content{animation:none;padding-bottom:104px}
  .mobile-customer-bar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-3);
    position:sticky;top:57px;z-index:18;margin:calc(-1 * var(--s-2)) 0 var(--s-4);
    padding:var(--s-3);background:rgba(255,255,255,.96);border:1px solid var(--hairline);
    box-shadow:0 1px 0 rgba(22,22,22,.04),0 10px 24px rgba(20,22,26,.06);backdrop-filter:blur(8px)}
  .mobile-customer-bar label{font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
  .mobile-customer-bar input{min-width:0;width:100%;min-height:44px;border:1px solid var(--hairline-strong);
    border-radius:var(--r-1);background:var(--surface-inset);padding:0 var(--s-3);font-size:16px;font-family:inherit;
    box-shadow:inset 0 1px 2px rgba(22,22,26,.04)}
  .mobile-customer-bar input:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:var(--focus-ring-inset)}
  .mobile-customer-bar.need{animation:custNeed .42s var(--ease)}
  @keyframes custNeed{0%{transform:none}35%{transform:translateY(-2px)}70%{transform:translateY(1px)}100%{transform:none}}
  .mobile-cust-hint{grid-column:1 / -1;min-height:0;color:var(--ink-3);font-size:var(--fs-xs);line-height:1.35;overflow-wrap:anywhere}
  .cart-cust input,.spec select{font-size:16px}
  .desk .cart{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;margin:0;
    height:88vh;height:min(88dvh,680px);max-height:88vh;border-radius:16px 16px 0 0;padding:var(--s-4) var(--s-4) var(--s-5);
    animation:none;transform:translate3d(0,105%,0);transition:transform .28s var(--ease);will-change:transform;
    z-index:60;box-shadow:0 -8px 40px rgba(20,22,26,.22);overflow:hidden;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;contain:layout paint}
  .desk .cart.open{transform:translate3d(0,0,0)}
  .desk .cart.dragging{transition:none}
  .desk .cart .cart-cust{flex:none;margin-bottom:var(--s-3)}
  .desk .cart .cart-items{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding-right:2px;overscroll-behavior:contain}
  .desk .cart .cart-tot{flex:none;margin-top:var(--s-3);padding-top:var(--s-3);background:#fff}
  .desk .cart .primary{flex:none;margin-top:var(--s-3)}
  .desk .cart .cart-actions{flex:none}
  .desk .cart .cart-cancel,.desk .cart .cart-confirm{min-height:44px}
  .desk .cart .cart-cancel:hover,.desk .cart .cart-cancel:active{background:#fff;color:var(--ink-2)}
  .desk .cart .cart-confirm:hover,.desk .cart .cart-confirm:active{background:var(--ink);color:#fff}
  .desk .cart .cart-cancel:disabled,.desk .cart .cart-confirm:disabled{background:var(--surface-2);color:var(--muted2)}
  .desk .cart .spec select{height:44px;line-height:1.2;flex:1 1 0;background-position:right 12px center;background-size:10px 6px}
  .cart-grab{display:block;position:sticky;top:0;margin:-4px 0 6px;padding:12px 0 10px;background:#fff;cursor:grab;z-index:1;
    touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none}
  .cart-grab:active{cursor:grabbing}
  .cart-grab span{display:block;width:54px;height:5px;border-radius:999px;background:var(--hairline-contrast);margin:0 auto}
  .cart-grab:focus-visible{outline:none}
  .cart-grab:focus-visible span{box-shadow:0 0 0 3px rgba(22,22,22,.12)}
  .cart-backdrop{display:block;position:fixed;inset:0;background:rgba(20,22,26,.42);
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease-soft),visibility .3s;z-index:55}
  .cart-backdrop.open{opacity:1;visibility:visible}
  body.sheet-lock{overflow:hidden;position:fixed;left:0;right:0;width:100%}
  .cart-peek{display:grid;position:fixed;left:var(--s-4);right:var(--s-4);bottom:var(--s-4);z-index:56;
    grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-3);
    min-height:78px;padding:22px 46px 12px var(--s-4);border:1px solid var(--hairline-strong);border-radius:14px;
    background:rgba(255,255,255,.98);color:var(--ink);box-shadow:0 10px 28px rgba(20,22,26,.16);
    cursor:pointer;opacity:0;transform:translateY(22px);pointer-events:none;text-align:left;
    transition:opacity .24s var(--ease),transform .24s var(--ease);touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none}
  .cart-peek.show{opacity:1;transform:none;pointer-events:auto}
  .cart-peek.dragging{transition:none}
  .cart-peek.bump{animation:cartPeekBump .24s var(--ease)}
  @keyframes cartPeekBump{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-3px) scale(1.015)}100%{transform:translateY(0) scale(1)}}
  .cart-peek-handle{position:absolute;top:8px;left:50%;width:48px;height:5px;border-radius:999px;background:var(--hairline-contrast);
    transform:translateX(-50%)}
  .cart-peek-x{position:absolute;right:8px;top:6px;width:32px;height:32px;border:0;background:transparent;color:var(--muted);
    font-size:16px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .cart-peek-x:active{color:var(--ink)}
  .cart-peek-thumbs{display:flex;align-items:center;min-width:112px}
  .cart-peek-thumbs img,.cart-peek-more{width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:var(--surface-2);
    box-shadow:0 1px 4px rgba(20,22,26,.12);object-fit:cover;margin-left:-8px;flex:none}
  .cart-peek-thumbs img:first-child,.cart-peek-more:first-child{margin-left:0}
  .cart-peek-more{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;
    font-family:var(--font-serif);font-size:var(--fs-xs)}
  .cart-peek-info{display:flex;flex-direction:column;min-width:0;line-height:1.25}
  .cart-peek-info b{font-size:var(--fs-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cart-peek-info small{color:var(--ink-3);font-size:var(--fs-xs);margin-top:3px}
  .cart-peek-total{font-family:var(--font-serif);font-size:var(--fs-md);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
  .cart-fab{display:inline-flex;position:fixed;right:var(--s-4);bottom:var(--s-4);z-index:50;
    align-items:center;gap:8px;border:0;background:var(--ink);color:#fff;
    padding:13px 18px;border-radius:var(--r-1);box-shadow:var(--shadow-hover);cursor:pointer;
    opacity:0;transform:translateY(20px) scale(.92);pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease)}
  .cart-fab.show{opacity:1;transform:none;pointer-events:auto}
  .cart-fab.bump{animation:none}
  .cart-fab svg{width:20px;height:20px}
  .cart-fab #fabCount{font-family:var(--font-serif);font-size:var(--fs-md);font-variant-numeric:tabular-nums;min-width:12px;text-align:center}
  .mobile-toast{display:block;position:fixed;left:var(--s-4);right:var(--s-4);bottom:108px;
    z-index:52;background:rgba(22,22,22,.92);color:#fff;border-radius:var(--r-1);
    padding:12px 14px;font-size:var(--fs-sm);line-height:1.35;box-shadow:var(--shadow-overlay);
    opacity:0;transform:translateY(12px);pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease)}
  .mobile-toast.show{opacity:1;transform:none}
}

/* ===== 本期卡片（手機）更小巧精緻 ===== */
@media (max-width:600px){
  .m-only .period-card-list{gap:var(--s-4)}
  .m-only .cur-period{padding:var(--s-4);box-shadow:0 1px 2px rgba(20,22,26,.04),0 9px 24px rgba(20,22,26,.07)}
  .m-only .cp-label{font-size:9px;letter-spacing:.2em}
  .m-only .cp-name{font-size:1.25rem;line-height:1.1;margin-top:2px}
  .m-only .period-created{margin-top:5px;font-size:10px}
  .m-only .cp-corner{gap:6px}
  .m-only .cp-ic{width:36px;height:36px}
  .m-only .cp-ic svg{width:16px;height:16px}
  .m-only .cp-actions{gap:6px;margin-top:var(--s-4)}
  .m-only .cp-actions button.primary,.m-only .cp-actions button.btn-ghost{min-height:40px;padding:8px 14px}
  .m-only .cp-actions .primary{flex:1}
  .m-only .cp-stats{margin-top:var(--s-4)}
  .m-only .cp-stats.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-only .period-metrics{display:grid;gap:8px;overflow:visible;scroll-snap-type:none}
  .m-only .cp-stats .stat{flex:initial;min-height:78px;padding:var(--s-3) var(--s-2)}
  .m-only .cp-stats .sv{font-size:var(--fs-lg)}
  .m-only .cp-stats .sl{font-size:9px;margin-top:3px;letter-spacing:.1em}
}

/* ===== 使用性優化任務 ===== */
.pay-progress,.bill-tools{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin:0 0 var(--s-4);flex-wrap:wrap}
.pay-progress-text,.bill-progress{font-size:var(--fs-sm);color:var(--ink-2);letter-spacing:.02em}
.sales-tools{display:flex;align-items:center;gap:var(--s-2)}
.pay-filter{display:flex;gap:var(--s-2);flex-wrap:wrap}
.pay-filter .btn-ghost,.bill-tools .btn-ghost{min-height:40px}
.paid-filter-wrap{position:relative;display:flex;min-width:0}
.paid-filter-wrap>.btn-ghost{width:100%;transition:padding var(--t-fast) var(--ease-soft),background var(--t-base),border-color var(--t-base),color var(--t-base)}
.paid-filter-wrap.has-ship-sort>.btn-ghost{padding-right:29px}
.ship-sort-btn{position:absolute;z-index:1;top:1px;right:1px;display:grid;place-items:center;width:25px;height:25px;padding:0;border:0;
  border-radius:var(--r-1);background:transparent;color:var(--ink-3);pointer-events:none;transition:color var(--t-fast) var(--ease-soft)}
.ship-sort-btn[hidden]{display:none}
.paid-filter-wrap>.btn-ghost.on+.ship-sort-btn{color:rgba(255,255,255,.88)}
.ship-sort-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ship-sort-btn .sort-up,.ship-sort-btn .sort-down{transition:opacity var(--t-fast) var(--ease-soft)}
.ship-sort-btn .sort-up{opacity:.35}
.ship-sort-btn .sort-down{opacity:1}
.ship-sort-btn.is-oldest-first .sort-up{opacity:1}
.ship-sort-btn.is-oldest-first .sort-down{opacity:.35}
.sales-export-all{width:42px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none}
.sales-export-all svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.sales-export-all.is-loading{position:relative;pointer-events:none}
.sales-export-all.is-loading svg{visibility:hidden}
.sales-export-all.is-loading::after{content:"";position:absolute;width:15px;height:15px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:pdfExportSpin .75s linear infinite}
.pdf-export-status{display:none;flex-basis:100%;text-align:right;font-size:var(--fs-xs);color:var(--ink-2);line-height:1.5}
.pdf-export-status:not(:empty){display:block}
@keyframes pdfExportSpin{to{transform:rotate(360deg)}}
.btn-ghost.on{background:var(--ink);border-color:var(--ink);color:#fff}
.bill-sent{opacity:.55}
.bill-sent:hover{opacity:.9}
.sent-check{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:var(--ink-2)}
.sent-check input{width:18px;height:18px;accent-color:var(--ink)}
.pending-panel{border-color:var(--hairline-strong)}
.pending-list{display:grid;gap:var(--s-3)}
.pending-row{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--hairline)}
.pending-row:last-child{border-bottom:0}
.pending-main{min-width:0}
.pending-meta{font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:2px}
.pending-raw{font-size:var(--fs-md);color:var(--ink);word-break:break-word}
.pending-actions{display:flex;align-items:center;gap:var(--s-2);flex:none}
.pending-badge{display:inline-flex;align-items:center;min-height:36px;margin-top:var(--s-4);padding:6px 12px;border:1px solid var(--hairline-strong);background:var(--surface-1);color:#9b1c1c;font-size:var(--fs-sm)}
.quick-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2);margin:0 0 var(--s-4)}
.quick-add .quick-msg{grid-column:1/-1;min-height:20px;font-size:var(--fs-sm);color:var(--ink-3)}
.quick-add .quick-msg.ok{color:#2e7d32}
.quick-add .quick-msg.err{color:#b42318}
.local-banner{position:sticky;top:69px;z-index:19;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:10px var(--gutter);background:var(--surface-2);border-bottom:1px solid var(--hairline-strong);box-shadow:0 1px 0 rgba(0,0,0,.03)}
.local-banner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#b42318}
.local-banner a{text-decoration:underline;text-underline-offset:3px}
.local-banner button{width:36px;height:36px;border:0;background:transparent;color:var(--ink-3);font-size:24px;cursor:pointer}
.custom-folder[hidden]{display:none}

@media (max-width:600px){
  .sales-search-slot{height:57px}
  .pay-progress,.bill-tools{align-items:stretch}
  .pay-progress-text,.bill-progress{flex-basis:100%;line-height:1.5}
  .sales-tools,.bill-tools{width:100%}
  .pdf-export-status{text-align:left}
  .pay-filter{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .sales-export-all{width:44px;height:44px}
  .pay-filter .btn-ghost,.bill-tools .btn-ghost,.sent-check,.pending-actions button,.quick-add .primary{min-height:44px}
  .bill-tools .search{flex:1 1 100%;font-size:16px}
  .pending-row{display:grid;gap:var(--s-3)}
  .pending-actions{justify-content:stretch}
  .pending-actions button{flex:1}
  .quick-add{grid-template-columns:1fr}
  .quick-add .search{font-size:16px}
  .local-banner{top:61px;padding:10px var(--s-4);align-items:flex-start}
  .local-banner-text{line-height:1.45}
}


/* ── 統計頁（以商品收單） ── */
.ai-credit-summary{margin-left:auto;display:grid;grid-template-columns:auto auto 26px;align-items:center;
  column-gap:10px;row-gap:2px;color:var(--ink-3);font-size:var(--fs-2xs);letter-spacing:.04em}
.ai-credit-summary b{font-family:var(--font-serif);font-size:var(--fs-md);font-weight:400;color:var(--ink)}
.ai-credit-summary small{grid-column:1/3;text-align:right;color:var(--muted2);font-size:10px}
.ai-credit-summary > a:not(.ai-credit-link){color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline-strong)}
.ai-credit-summary.low b{color:#b42318}
.ai-credit-link{grid-column:3;grid-row:1/3;width:26px;height:26px;display:inline-grid;place-items:center;color:var(--ink-3)}
.ai-credit-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ai-credit-link:hover{color:var(--ink)}
.tally-panel{position:relative;overflow:visible}
.tally-card{position:relative;border:1px solid var(--hairline);border-radius:var(--r-1);margin-bottom:var(--s-3);padding:var(--s-3);background:var(--paper)}
.tally-head{display:flex;align-items:center;gap:var(--s-3)}
.tally-img{width:40px;height:40px;object-fit:cover;border-radius:var(--r-0);flex:0 0 auto}
.tally-name{flex:1;font-size:var(--fs-sm);min-width:0;line-height:1.3}
.tally-count{color:var(--ink-3);font-size:var(--fs-xs);white-space:nowrap}
.tally-add{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3);align-items:center}
.tally-add[hidden]{display:none}      /* 蓋掉 display:flex，讓 hidden 屬性真的能收起來 */
select.tally-cs{padding-right:4px}
.tally-add .edit-num{width:64px}
.tally-customer-control{position:relative;display:block;flex:1 1 260px;min-width:180px}
.tally-customer-control .tally-cust{width:100%;min-width:0;padding-right:34px;
  transition:padding-right var(--t-base) var(--ease-soft)}
.tally-customer-control.has-last:not(.has-value) .tally-cust{padding-right:var(--last-customer-space,130px)}
.tally-last-customer{position:absolute;z-index:2;right:34px;top:50%;max-width:46%;min-width:0;overflow:hidden;
  display:inline-flex;align-items:center;gap:5px;border:0;border-radius:var(--r-0);background:transparent;color:var(--ink-2);
  padding:3px 5px;font:inherit;font-size:var(--fs-xs);line-height:1.25;cursor:pointer;opacity:.46;
  transform:translateY(-50%);transition:opacity var(--t-fast) var(--ease-soft),background var(--t-fast) var(--ease-soft),
    color var(--t-fast) var(--ease-soft),transform var(--t-fast) var(--ease-soft)}
.tally-last-customer[hidden]{display:none}
.tally-last-customer:not([hidden]){animation:tallyLastGhostIn var(--t-base) var(--ease) both}
.tally-last-customer svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tally-last-caption{flex:none;color:var(--muted2);font-size:9px;font-weight:500;letter-spacing:0}
.tally-last-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.tally-last-customer:hover,.tally-last-customer:focus-visible{background:rgba(17,17,17,.06);color:var(--ink);opacity:.88;outline:none}
.tally-last-customer:active{background:rgba(17,17,17,.1);transform:translateY(-50%) scale(.98)}
.tally-customer-control.has-value .tally-last-customer{animation:none;opacity:0;pointer-events:none;transform:translate(4px,-50%)}
@keyframes tallyLastGhostIn{from{opacity:0;transform:translate(5px,-50%)}to{opacity:.46;transform:translate(0,-50%)}}
.tally-add .tally-cs{width:82px;min-width:70px;flex:0 0 auto}
.tally-buyers{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-2)}
.tally-buyers:empty{display:none}
.buyer-chip{display:inline-flex;align-items:center;gap:4px;background:var(--surface-1,#f4f5f6);border:1px solid var(--hairline);border-radius:999px;padding:3px 5px 3px 10px;font-size:var(--fs-xs)}
.chip-x{border:none;background:none;cursor:pointer;color:var(--ink-3);font-size:12px;line-height:1;padding:2px 5px;border-radius:50%}
.chip-x:hover{background:#e24b4a;color:#fff}
@media (max-width:600px){ .ai-credit-summary{width:100%;margin-left:0;grid-template-columns:auto auto 30px;justify-content:start} .ai-credit-summary small{text-align:left} .tally-panel{padding:12px 8px} .tally-panel .tally-card{padding:10px 8px} .tally-head{display:grid;grid-template-columns:26px 40px minmax(0,1fr) auto;gap:8px;align-items:center} .tally-cam{position:static;grid-column:1;grid-row:1;width:24px;height:24px;justify-self:center;align-self:start;margin-top:4px;z-index:2} .tally-img{grid-column:2;grid-row:1} .tally-name{grid-column:3;grid-row:1;overflow-wrap:anywhere} .tally-count{grid-column:4;grid-row:1;font-size:var(--fs-2xs)} .tally-head .primary.small{grid-column:2/5;grid-row:2;width:100%;padding:8px 10px;min-height:38px;letter-spacing:.08em;white-space:nowrap;flex:0 0 auto} .tally-customer-control{flex:1 1 100%;min-width:100%} .tally-last-customer{right:34px;max-width:48%} .tally-add .edit-num,.tally-add .tally-cs{flex:1;min-width:0} }
@media (max-width:360px){.tally-last-caption{display:none}}
/* 截圖 AI 辨識 */
.tally-cam{border:0;background:transparent;border-radius:999px;cursor:pointer;font-size:15px;line-height:1;padding:0;width:30px;height:30px;display:inline-grid;place-items:center;flex:0 0 auto;color:var(--ink-3)}
.tally-cam:hover{background:var(--surface-1,#f4f5f6);color:var(--ink-1)}
.tally-cam svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tally-ai{margin-top:var(--s-3);padding:var(--s-3);border:1px dashed var(--hairline);border-radius:var(--r-1);background:var(--surface-1,#fafafa)}
.tally-ai[hidden]{display:none}
.ai-bar{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.ai-lead{font-size:var(--fs-sm);font-weight:600;flex:0 0 auto}
.ai-status{font-size:var(--fs-xs);color:var(--ink-3);margin-top:6px;line-height:1.7}
.ai-status b{background:var(--paper);border:1px solid var(--hairline);border-radius:4px;padding:1px 6px;font-weight:600;color:var(--ink-1,inherit);white-space:nowrap}
.ai-pick{font-size:var(--fs-xs);border:1px solid var(--hairline);border-radius:999px;padding:3px 12px;cursor:pointer;background:var(--paper);flex:0 0 auto;white-space:nowrap}
.ai-pick:hover{background:var(--surface-1,#f4f5f6)}
.ai-result{margin-top:var(--s-3)}
.ai-tabwrap{overflow-x:auto}
.ai-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.ai-table th{text-align:left;color:var(--ink-3);font-weight:500;padding:2px 5px;border-bottom:1px solid var(--hairline);white-space:nowrap}
.ai-table td{padding:3px 5px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.ai-table td:first-child input{min-width:88px}
.ai-table input,.ai-table select{width:100%;min-width:52px}
.ai-table .edit-num{width:54px;min-width:44px}
.ai-warn{background:rgba(226,75,74,.07)}
.ai-tag{font-size:10px;color:var(--ink-3);margin-left:3px;white-space:nowrap}
.ai-tag.warn{color:#e24b4a;cursor:help}
.ai-actions{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3);flex-wrap:wrap}

/* ── 收單總覽 / 叫貨表 ── */
.order-work-tabs{display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--hairline-strong);margin:-20px 0 30px}
.order-work-tabs a{position:relative;display:inline-flex;align-items:center;min-height:46px;padding:0 18px;color:var(--ink-3);
  font-size:var(--fs-sm);font-weight:500;letter-spacing:0;transition:color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft)}
.order-work-tabs a:hover{color:var(--ink);background:var(--surface-1)}
.order-work-tabs a::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;background:var(--ink);
  transform:scaleX(0);transition:transform var(--t-base) var(--ease)}
.order-work-tabs a.active{color:var(--ink)}
.order-work-tabs a.active::after{transform:scaleX(1)}

.purchase-action-row{display:flex;justify-content:flex-end;margin-bottom:var(--s-4)}
.purchase-confirm svg{width:17px;height:17px}
.purchase-summary{display:grid;grid-template-columns:minmax(150px,1fr) repeat(3,minmax(76px,auto));align-items:center;
  gap:var(--s-4);padding:18px 0;margin-bottom:var(--s-5);border-top:1px solid var(--purchase-line);border-bottom:1px solid var(--purchase-line)}
.purchase-summary-date{display:grid}
.purchase-summary-date strong{font-family:var(--font-serif);font-size:var(--fs-lg);font-weight:400;font-variant-numeric:tabular-nums}
.purchase-metric{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;color:var(--purchase-muted)}
.purchase-metric strong{color:var(--purchase-ink);font-family:var(--font-serif);font-size:var(--fs-lg);font-weight:400;font-variant-numeric:tabular-nums}
.purchase-metric-label{font-size:var(--fs-xs);font-weight:500;white-space:nowrap}
.purchase-metric.is-total .purchase-metric-label{color:var(--purchase-teal)}
.purchase-metric.is-received .purchase-metric-label{color:var(--purchase-green)}
.purchase-metric.is-missing .purchase-metric-label{color:var(--purchase-amber)}
.purchase-confirm svg,.purchase-empty svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.purchase-ready-customers{margin:0 0 var(--s-5);border-top:1px solid var(--purchase-line-strong);border-bottom:1px solid var(--purchase-line-strong);background:#f7f9f8}
.purchase-ready-customers summary{display:flex;align-items:center;gap:9px;min-height:54px;padding:9px 12px;cursor:pointer;list-style:none;color:var(--purchase-ink)}
.purchase-ready-customers summary::-webkit-details-marker{display:none}
.purchase-ready-icon{display:grid;place-items:center;width:30px;height:30px;color:var(--purchase-muted)}
.purchase-ready-icon svg,.purchase-ready-chevron{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.purchase-ready-icon svg{width:20px;height:20px}
.purchase-ready-title{font-size:var(--fs-sm);font-weight:600}
.purchase-ready-total{display:inline-flex;align-items:baseline;gap:4px;margin-left:auto}
.purchase-ready-total strong{font-family:var(--font-serif);font-size:var(--fs-lg);font-weight:400;font-variant-numeric:tabular-nums}
.purchase-ready-total small{color:var(--purchase-muted);font-size:var(--fs-xs)}
.purchase-ready-summary-state{display:inline-flex;align-items:center;min-height:24px;padding:2px 7px;border:1px solid transparent;font-size:var(--fs-2xs);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.purchase-ready-summary-state.is-shippable{border-color:#bfd5c8;background:var(--purchase-green-soft);color:var(--purchase-green)}
.purchase-ready-summary-state.is-partial{border-color:#e4cfaa;background:var(--purchase-amber-soft);color:var(--purchase-amber)}
.purchase-ready-chevron{width:18px;height:18px;color:var(--purchase-muted);transition:transform var(--t-base) var(--ease)}
.purchase-ready-customers[open] .purchase-ready-chevron{transform:rotate(180deg)}
.purchase-ready-list{display:grid;grid-template-columns:1fr;border-top:1px solid var(--purchase-line)}
.purchase-ready-customer{min-width:0;border-bottom:1px solid var(--purchase-line);border-left:3px solid transparent;background:#fff;font-size:var(--fs-xs);transition:border-color var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft),opacity var(--t-base) var(--ease-soft)}
.purchase-ready-customer:last-child{border-bottom:0}
.purchase-ready-customer-head{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:58px;padding:8px 12px;background:#f7f9f8;transition:background var(--t-base) var(--ease-soft)}
.purchase-ready-index{display:grid;place-items:center;width:22px;height:22px;background:#e9ecea;color:var(--purchase-muted);font-family:var(--font-mono);font-size:var(--fs-2xs)}
.purchase-ready-customer-name{display:flex;align-items:baseline;gap:9px;min-width:0}
.purchase-ready-customer-name>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-base);font-weight:600}
.purchase-ready-last5{color:var(--purchase-muted);white-space:nowrap}
.purchase-ready-customer-meta{display:flex;align-items:center;gap:8px;color:var(--purchase-muted);white-space:nowrap}
.purchase-ready-customer-meta>small{font-size:var(--fs-xs)}
.purchase-ready-state{display:inline-flex;align-items:center;min-height:25px;padding:2px 7px;border:1px solid transparent;font-size:var(--fs-2xs);font-weight:700;white-space:nowrap}
.purchase-ready-state.is-shippable{border-color:#bfd5c8;background:var(--purchase-green-soft);color:var(--purchase-green)}
.purchase-ready-state.is-partial{border-color:#e4cfaa;background:var(--purchase-amber-soft);color:var(--purchase-amber)}
.purchase-ready-payment{min-width:38px;padding:2px 5px;border:1px solid var(--purchase-line);text-align:center;white-space:nowrap}
.purchase-ready-payment.is-paid{border-color:#c6dbcf;background:var(--purchase-green-soft);color:var(--purchase-green)}
.purchase-ready-payment.is-unpaid{border-color:#e1cfaa;background:var(--purchase-amber-soft);color:var(--purchase-amber)}
.purchase-ready-packed{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 7px;color:var(--purchase-muted);font-size:var(--fs-xs);font-weight:500;white-space:nowrap;cursor:pointer;user-select:none}
.purchase-ready-packed input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.purchase-ready-packed-box{display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--purchase-line-strong);background:#fff;color:#fff;transition:border-color var(--t-fast) var(--ease-soft),background var(--t-fast) var(--ease-soft),box-shadow var(--t-fast) var(--ease-soft)}
.purchase-ready-packed-box svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.7);transition:opacity var(--t-fast) var(--ease-soft),transform var(--t-fast) var(--ease-soft)}
.purchase-ready-packed input:focus-visible+.purchase-ready-packed-box{box-shadow:0 0 0 3px rgba(47,109,85,.16)}
.purchase-ready-packed input:checked+.purchase-ready-packed-box{border-color:var(--purchase-green);background:var(--purchase-green)}
.purchase-ready-packed input:checked+.purchase-ready-packed-box svg{opacity:1;transform:scale(1)}
.purchase-ready-packed:has(input:checked){color:var(--purchase-green)}
.purchase-ready-packed:has(input:disabled){cursor:default;opacity:.42}
.purchase-ready-customer.is-saving .purchase-ready-packed:has(input:disabled){cursor:wait;opacity:.58}
.purchase-ready-items{display:grid;grid-template-columns:1fr;padding:0 14px 12px 44px;background:#fff;transition:opacity var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft)}
.purchase-ready-item{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;min-width:0;padding:10px 8px;border-top:1px solid var(--purchase-line);transition:opacity var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft)}
.purchase-ready-item-thumb{position:relative;display:grid;place-items:center;width:44px;height:56px;overflow:hidden;border:1px solid var(--purchase-line);background:var(--purchase-neutral);color:var(--purchase-faint);font-family:var(--font-mono);font-size:var(--fs-2xs)}
.purchase-ready-item-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--purchase-neutral)}
.purchase-ready-item-body{display:grid;gap:6px;min-width:0}
.purchase-ready-item-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--purchase-ink);font-size:var(--fs-sm);font-weight:600}
.purchase-ready-item-spec{display:flex;align-items:center;gap:18px;color:var(--ink-2);white-space:nowrap}
.purchase-ready-item-spec span{display:inline-flex;align-items:baseline;gap:6px}
.purchase-ready-item-spec small{color:var(--purchase-faint);font-size:var(--fs-2xs);font-weight:400}
.purchase-ready-item.is-arrived{background:#fbfdfc;box-shadow:inset 2px 0 var(--purchase-green)}
.purchase-ready-item.is-partial{background:#fffdf9;box-shadow:inset 2px 0 var(--purchase-amber)}
.purchase-ready-item.is-waiting{opacity:.38}
.purchase-ready-item.is-waiting .purchase-ready-item-thumb img{filter:grayscale(1)}
.purchase-ready-customer.is-waiting{border-left-color:#aab2ae}
.purchase-ready-customer.is-waiting .purchase-ready-customer-head{background:#f5f6f5}
.purchase-ready-customer.is-waiting .purchase-ready-payment{border-color:var(--purchase-line);background:#fff;color:var(--purchase-muted)}
.purchase-ready-customer.is-partial{border-left-color:var(--purchase-amber)}
.purchase-ready-customer.is-partial .purchase-ready-customer-head{background:#fcf8f1}
.purchase-ready-customer.is-partial .purchase-ready-index{background:var(--purchase-amber-soft);color:var(--purchase-amber)}
.purchase-ready-customer.is-shippable{border-left-color:var(--purchase-green)}
.purchase-ready-customer.is-shippable .purchase-ready-customer-head{background:#f1f6f3}
.purchase-ready-customer.is-shippable .purchase-ready-index{background:var(--purchase-green-soft);color:var(--purchase-green)}
.purchase-ready-customer.is-packed .purchase-ready-items{opacity:.64}
.purchase-ready-customer.is-saving{opacity:.62}
.purchase-ready-empty{padding:18px 12px;border-top:1px solid var(--purchase-line);color:var(--purchase-muted);font-size:var(--fs-xs)}

.purchase-table-tools{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.purchase-product-search{position:relative;display:flex;align-items:center;width:min(340px,100%)}
.purchase-product-search svg{position:absolute;left:12px;width:17px;height:17px;fill:none;stroke:var(--purchase-muted);stroke-width:1.7;stroke-linecap:round;pointer-events:none}
.purchase-product-search input{width:100%;height:42px;border:1px solid var(--purchase-line-strong);border-radius:var(--r-1);padding:0 38px;background:#fff;color:var(--purchase-ink);font:400 var(--fs-sm)/1 var(--font-sans)}
.purchase-product-search input:focus{outline:none;border-color:var(--purchase-teal);box-shadow:0 0 0 3px rgba(61,109,120,.12)}
.purchase-product-search input::placeholder{color:var(--purchase-faint)}
.purchase-match-count{margin-left:auto;color:var(--purchase-muted);font-size:var(--fs-xs);white-space:nowrap}
.purchase-metrics-toggle{display:none;place-items:center;width:42px;height:42px;flex:0 0 42px;border:1px solid var(--purchase-line-strong);border-radius:var(--r-1);padding:0;background:#fff;color:var(--purchase-muted);cursor:pointer}
.purchase-metrics-toggle:hover,.purchase-metrics-toggle:focus-visible{outline:none;border-color:var(--purchase-ink);color:var(--purchase-ink)}
.purchase-metrics-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.purchase-metrics-arrow{transform-box:fill-box;transform-origin:center;transition:transform var(--t-base) var(--ease-soft)}
.purchase-metrics-toggle.is-collapsed .purchase-metrics-arrow{transform:rotate(180deg)}
.purchase-date-collapse-all{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border:1px solid var(--purchase-line-strong);border-radius:var(--r-1);padding:0;background:#fff;color:var(--purchase-muted);cursor:pointer}
.purchase-date-collapse-all:hover,.purchase-date-collapse-all:focus-visible{outline:none;border-color:var(--purchase-ink);color:var(--purchase-ink)}
.purchase-date-collapse-all svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-base) var(--ease)}
.purchase-date-collapse-all.is-collapsed svg{transform:rotate(180deg)}
.purchase-search-empty{min-height:112px;margin-bottom:12px;padding:36px;border:1px solid var(--purchase-line);color:var(--purchase-muted);font-size:var(--fs-sm);text-align:center}
.purchase-search-empty[hidden],.purchase-matrix-shell[hidden],.purchase-matrix-product[hidden]{display:none}

.purchase-matrix-shell{--purchase-product-col:220px;--purchase-date-col:148px;--purchase-date-collapsed-col:44px;--purchase-total-col:108px;--purchase-gap-col:12px;--purchase-sales-col:108px;border:1px solid var(--purchase-line-strong);border-top:0;border-right:0;background:var(--purchase-surface);box-shadow:0 12px 30px rgba(23,26,28,.05)}
.purchase-matrix-scroll{width:100%;overflow:auto;overscroll-behavior-inline:contain;outline:none}
.purchase-matrix-scroll:focus-visible{box-shadow:var(--focus-ring-inset)}
.purchase-matrix-scroll::-webkit-scrollbar{height:10px}
.purchase-matrix-scroll::-webkit-scrollbar-track{background:var(--purchase-neutral)}
.purchase-matrix-scroll::-webkit-scrollbar-thumb{border:3px solid var(--purchase-neutral);border-radius:8px;background:#9aa8a2}
.purchase-matrix{min-width:max(100%,calc(var(--purchase-product-col) + (var(--purchase-expanded-date-count) * var(--purchase-date-col)) + (var(--purchase-collapsed-date-count) * var(--purchase-date-collapsed-col)) + var(--purchase-total-col) + var(--purchase-gap-col) + var(--purchase-sales-col)))}
.purchase-matrix-grid{display:grid;grid-template-columns:var(--purchase-product-col) var(--purchase-date-columns) var(--purchase-total-col) var(--purchase-gap-col) var(--purchase-sales-col)}
.purchase-matrix-grid>div{min-width:0;border-right:1px solid var(--purchase-line)}
.purchase-matrix-grid>div:last-child{border-right:0}
.purchase-matrix-head{position:sticky;top:0;z-index:8;min-height:62px;border-bottom:1px solid var(--purchase-line-strong);background:#f7f9f8}
.purchase-matrix-head::before{content:"";position:absolute;top:0;left:0;right:calc(var(--purchase-total-col) + var(--purchase-gap-col) + var(--purchase-sales-col));z-index:12;height:1px;background:var(--purchase-ink);pointer-events:none}
.purchase-matrix-head>div{display:grid;align-content:center;padding:10px 12px}
.purchase-sticky-head{position:fixed;z-index:18;display:none;overflow:hidden;background:#fff;pointer-events:none;
  box-shadow:0 8px 22px rgba(23,26,28,.1),0 1px 0 rgba(23,26,28,.08)}
.purchase-sticky-head.is-visible{display:block}
.purchase-sticky-head-clip{width:100%;height:100%;overflow:hidden;background:#fff}
.purchase-sticky-head .purchase-matrix-head{position:relative;top:auto;margin:0}
.purchase-matrix-corner{position:sticky;left:0;z-index:10;background:#f7f9f8;box-shadow:10px 0 18px -16px rgba(23,26,28,.68)}
.purchase-matrix-corner span,.purchase-total-head span,.purchase-sales-head span{font-size:var(--fs-xs);font-weight:600}
.purchase-matrix-corner small,.purchase-total-head small,.purchase-sales-head small{margin-top:2px;color:var(--purchase-muted);font-size:var(--fs-2xs)}
.purchase-total-head-icons{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.purchase-total-head-icons svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.purchase-date-head{position:relative;place-items:center;text-align:center;font-variant-numeric:tabular-nums}
.purchase-date-head strong{font-family:var(--font-serif);font-size:var(--fs-md);font-weight:400}
.purchase-date-head>span{display:inline-flex;align-items:center;gap:5px;margin-top:2px;color:var(--purchase-muted);font-size:var(--fs-2xs)}
.purchase-date-head>span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--purchase-teal);box-shadow:0 0 0 3px rgba(61,109,120,.12)}
/* 第N次(主) + 確認後在下方顯示日期(小字、無圓點) */
.purchase-date-sub{color:var(--purchase-muted);font-size:var(--fs-2xs);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.purchase-date-head>span.purchase-date-sub::before{content:none;display:none}
.purchase-date-head.is-current{box-shadow:inset 0 1px var(--purchase-teal);background:var(--purchase-teal-soft);color:var(--purchase-teal)}
.purchase-date-toggle{position:absolute;top:50%;left:5px;z-index:2;display:grid;place-items:center;width:27px;height:27px;border:0;border-radius:var(--r-1);padding:0;background:transparent;color:var(--purchase-muted);cursor:pointer;transform:translateY(-50%)}
.purchase-date-toggle:hover,.purchase-date-toggle:focus-visible{outline:none;background:#fff;color:var(--purchase-teal);box-shadow:0 0 0 1px var(--purchase-line-strong)}
.purchase-date-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.purchase-date-toggle-label{display:none}
.purchase-date-head.is-collapsed{padding:0!important;background:#e8efec;color:var(--purchase-teal)}
.purchase-date-head.is-collapsed>:not(.purchase-date-toggle){display:none}
.purchase-date-head.is-collapsed .purchase-date-toggle{position:static;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;height:100%;min-height:61px;border-radius:0;transform:none}
.purchase-date-head.is-collapsed .purchase-date-toggle:hover,.purchase-date-head.is-collapsed .purchase-date-toggle:focus-visible{box-shadow:inset 0 0 0 1px var(--purchase-teal)}
.purchase-date-head.is-collapsed .purchase-date-toggle svg{width:14px;height:14px;transform:rotate(180deg)}
.purchase-date-head.is-collapsed .purchase-date-toggle-label{display:block;max-width:100%;overflow:hidden;color:var(--purchase-teal);font-size:9px;font-weight:600;line-height:1;white-space:nowrap}
.purchase-date-head:not(.is-current)>strong{padding-inline:25px}
.purchase-date-head.is-current .purchase-date-input{width:100%;padding-left:32px}
.purchase-date-input{width:min(122px,100%);height:34px;min-width:0;border:1px solid var(--purchase-line-strong);border-radius:var(--r-1);padding:0 6px;background:#fff;color:var(--purchase-ink);font:500 var(--fs-xs)/1 var(--font-sans);font-variant-numeric:tabular-nums;text-align:center;transition:border-color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft),opacity var(--t-base) var(--ease-soft)}
.purchase-date-input:focus{outline:none;border-color:var(--purchase-teal);box-shadow:0 0 0 3px rgba(61,109,120,.12)}
.purchase-date-input.is-saving{opacity:.55}
.purchase-date-input.is-saved{border-color:var(--purchase-green)}
.purchase-date-input.is-error{border-color:var(--purchase-red)}
.purchase-arrival-open{position:absolute;top:50%;right:8px;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:var(--r-1);padding:0;background:transparent;color:var(--purchase-muted);cursor:pointer;transform:translateY(-50%);transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft)}
.purchase-arrival-open:hover,.purchase-arrival-open:focus-visible{outline:none;background:#fff;color:var(--purchase-ink);box-shadow:0 0 0 1px var(--purchase-line-strong)}
.purchase-arrival-open svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* 改回編輯（誤按確認的後悔藥）：放在到貨鈕左邊，同款小圖示鈕 */
.purchase-unconfirm{position:absolute;top:50%;right:42px;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:var(--r-1);padding:0;background:transparent;color:var(--purchase-muted);cursor:pointer;transform:translateY(-50%);transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft)}
.purchase-unconfirm:hover,.purchase-unconfirm:focus-visible{outline:none;background:#fff;color:var(--purchase-ink);box-shadow:0 0 0 1px var(--purchase-line-strong)}
.purchase-unconfirm svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* 日期欄的下載下拉（客戶明細表／廠商叫貨單）：包在 .purchase-dl，在鉛筆左邊、同款 */
/* ⚠️ 不可用 transform 置中：有 transform 的祖先會變成 position:fixed 的包含塊，
   下拉選單(.purchase-dl-menu 用視窗座標定位)就會整個跑掉。用 calc 置中(按鈕高 30px)。*/
.purchase-dl{position:absolute;top:calc(50% - 15px);right:76px;display:inline-flex;z-index:3}
.purchase-date-head.is-current .purchase-dl{right:8px}
.purchase-pack-export{position:static;transform:none;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:var(--r-1);padding:0;background:transparent;color:var(--purchase-muted);cursor:pointer;transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft)}
.purchase-pack-export:hover,.purchase-pack-export:focus-visible,.purchase-pack-export[aria-expanded="true"]{outline:none;background:#fff;color:var(--purchase-ink);box-shadow:0 0 0 1px var(--purchase-line-strong)}
.purchase-pack-export svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.purchase-dl-menu{position:fixed;z-index:80;min-width:152px;background:#fff;border:1px solid var(--purchase-line-strong);border-radius:var(--r-1);box-shadow:0 8px 28px rgba(30,40,45,.18);padding:5px;display:flex;flex-direction:column;gap:2px}
.purchase-dl-menu[hidden]{display:none}
.purchase-dl-menu a{display:flex;align-items:center;gap:9px;padding:8px 11px;font-size:var(--fs-sm);color:var(--purchase-ink);text-decoration:none;border-radius:var(--r-1);white-space:nowrap;transition:background var(--t-fast) var(--ease-soft)}
.purchase-dl-menu a:hover{background:var(--purchase-teal-soft)}
.purchase-dl-ic{display:grid;place-items:center;width:17px;height:17px;color:var(--purchase-muted)}
.purchase-dl-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* 可包貨頁的下載鈕列 */
.packing-tools{display:flex;justify-content:flex-end;margin:0 0 var(--s-3)}
.packing-export{display:inline-flex;align-items:center;gap:7px}
.packing-export svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.purchase-total-head{border:0!important;background:#fff;text-align:center}
.purchase-column-gap{position:relative;padding:0!important;border:0!important;background:#fff!important}
.purchase-column-gap.is-head{place-items:center}
.purchase-sales-head{border:0!important;background:#fff;text-align:center}
.purchase-total-head span,.purchase-sales-head span{position:relative;display:inline-grid;justify-self:center;padding-bottom:7px}
.purchase-total-head span::after,.purchase-sales-head span::after{content:"";position:absolute;left:50%;bottom:0;width:32px;height:1px;transform:translateX(-50%);background:color-mix(in srgb,var(--purchase-metric-total) 64%,white)}
.purchase-sales-head span::after{background:color-mix(in srgb,var(--purchase-metric-sales) 64%,white)}
.purchase-matrix-product{display:block;border-bottom:1px solid var(--purchase-line-strong)}
.purchase-matrix-product:last-child{border-bottom:0}
.purchase-product-row{min-height:76px;background:var(--purchase-neutral)}
.purchase-matrix-product:nth-of-type(even) .purchase-product-row{background:var(--purchase-neutral)}
.purchase-product-row>div{display:grid;align-content:center;padding:10px 12px}
.purchase-product-identity{position:sticky;left:0;z-index:4;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:9px;border-left:3px solid var(--purchase-teal);background:inherit;box-shadow:10px 0 18px -16px rgba(23,26,28,.68)}
.purchase-product-identity img{width:40px;height:52px;object-fit:cover;border:1px solid var(--purchase-line-strong);background:var(--purchase-neutral);box-shadow:0 2px 5px rgba(23,26,28,.08)}
.purchase-product-identity>div{display:grid;gap:3px;min-width:0}
.purchase-product-identity h3{display:-webkit-box;margin:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:var(--fs-sm);font-weight:600;line-height:1.42;letter-spacing:0;overflow-wrap:anywhere}
.purchase-product-identity span{color:var(--purchase-muted);font-size:var(--fs-2xs)}
.purchase-product-date-total,.purchase-product-grand-total{place-items:center;color:var(--ink-2);font-variant-numeric:tabular-nums}
.purchase-product-date-total strong,.purchase-product-grand-total strong{font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:500;line-height:1.35}
.purchase-product-date-total strong{display:inline-flex;align-items:baseline;gap:4px}
.purchase-product-date-total strong small{font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:500}
.purchase-product-date-total{justify-items:end;padding-right:16px;background:inherit}
.purchase-product-date-total.is-current{background:inherit;color:var(--purchase-teal)}
.purchase-product-date-total.is-collapsed{justify-items:center;padding:8px 2px;background:#edf3f0}
.purchase-product-date-total.is-collapsed strong{font-size:var(--fs-xs)}
.purchase-product-date-total.is-collapsed small{display:none}
.purchase-product-grand-total strong{font-size:var(--fs-md)}
.purchase-product-grand-total{place-items:center;padding:4px;border:0!important;background:#fff;color:var(--purchase-ink)}
.purchase-product-sales-total,.purchase-variant-sales-total{display:grid;place-items:center;padding:4px;border:0!important;background:#fff;color:var(--purchase-ink);font-variant-numeric:tabular-nums}
.purchase-product-sales-total{align-content:center}
.purchase-variant-sales-total{align-content:center;padding:10px 4px}
.purchase-product-sales-total strong,.purchase-variant-sales-total strong{font-family:var(--font-sans);font-size:var(--fs-md);font-weight:500;line-height:1.35}
.purchase-variant-row{min-height:92px;border-top:1px solid var(--purchase-line);background:var(--purchase-surface)}
.purchase-variant-row:nth-child(odd){background:var(--purchase-surface)}
.purchase-variant-key{position:sticky;left:0;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;align-items:baseline;gap:6px;padding:14px 11px 12px 16px;border-left:3px solid var(--purchase-line-strong);background:inherit;box-shadow:10px 0 18px -16px rgba(23,26,28,.68)}
.purchase-variant-key strong{font-size:var(--fs-sm);font-weight:500;overflow-wrap:anywhere}
.purchase-variant-key span{justify-self:start;padding:0;border:0;background:transparent;color:var(--purchase-muted);font-family:var(--font-sans);font-size:var(--fs-xs);white-space:nowrap}
.purchase-variant-key span::before{content:"/";margin-right:6px;color:var(--purchase-faint)}
.purchase-date-cell{display:grid;align-content:start;justify-items:stretch;gap:8px;padding:13px 10px;color:var(--muted2);text-align:center}
.purchase-date-cell.has-events{color:var(--ink)}
.purchase-date-cell.is-current{background:var(--purchase-surface)}
.purchase-date-head,.purchase-product-date-total,.purchase-date-cell{
  position:relative;z-index:2;
  box-shadow:-10px 0 18px -16px rgba(23,26,28,.42),10px 0 18px -16px rgba(23,26,28,.42)}
.purchase-date-head.is-current{
  box-shadow:inset 0 1px var(--purchase-teal),-10px 0 18px -16px rgba(23,26,28,.42),10px 0 18px -16px rgba(23,26,28,.42)}
.purchase-date-cell.is-collapsed{align-content:start;justify-items:center;padding:13px 2px;background:#f5f8f6}
.purchase-date-cell.is-collapsed .purchase-date-qty{justify-self:center;padding:0;font-size:var(--fs-xs)}
.purchase-date-cell.is-collapsed .purchase-cell-events{display:none}
.purchase-date-qty{justify-self:end;padding-right:2px;color:var(--purchase-ink);font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:500;line-height:1.35;font-variant-numeric:tabular-nums}
.purchase-cell-events{display:grid;gap:5px;width:100%}
.purchase-event{display:grid;grid-template-columns:minmax(22px,auto) minmax(0,1fr) auto;align-items:center;gap:5px;min-width:0;padding-top:4px;border-top:1px solid rgba(105,115,110,.18);color:var(--purchase-muted);font-size:var(--fs-2xs);text-align:left}
.purchase-event:first-child{padding-top:0;border-top:0}
.purchase-event b{font-family:var(--font-mono);font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.purchase-event.is-plus b{color:var(--purchase-green)}
.purchase-event.is-minus b{color:var(--purchase-red)}
/* 三種狀況各自的顏色（使用者定案）：金色＝斷貨、紫色＝未到/少貨、綠色＝多到。
   金色只留給斷貨，未到不再跟它撞色。*/
.purchase-event.is-carry b,.purchase-event.is-carry>span{color:var(--purchase-violet);font-weight:600}
.purchase-event.is-carry .purchase-event-reminder{color:var(--purchase-violet);background:var(--purchase-violet-soft)}
.purchase-event.is-carry.is-over b,.purchase-event.is-carry.is-over>span{color:var(--purchase-green)}
.purchase-event.is-carry.is-over .purchase-event-reminder{color:var(--purchase-green);background:var(--purchase-green-soft)}
.purchase-event>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.purchase-event time{grid-column:3;grid-row:1;display:inline-flex;align-items:center;gap:4px;color:var(--purchase-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.purchase-event-reminder{color:var(--purchase-amber);font-style:normal;font-weight:600}
.purchase-event time span:last-child{color:var(--purchase-faint,#929b96)}
/* 兩種「處理掉」的標記（使用者定案 2026-07-17）：
   刪單（客戶取消）＝紅色＋劃線＋變暗；已出貨（貨況完成）＝劃線＋變暗 */
/* 名單樣式小標註：直接用真的樣式當範例，看到什麼線就是什麼意思 */
.purchase-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
  margin:0 0 var(--s-2);padding:0 2px}
/* ⚠️ .purchase-event 本身是三欄 grid（數量/客戶/時間）且帶 border-top＋padding-top，
   標註只有一個 span，直接沿用會被塞進不同欄位、上緣還多一條線 → 對不齊。
   這裡改回單純行內排列；各狀態自己的 opacity 不覆寫（「已包」本來就該是淡的）。*/
.purchase-legend .purchase-event{display:inline-flex;align-items:center;
  padding:0;border-top:0;min-width:0;cursor:default;font-size:var(--fs-2xs);line-height:1.5}
.purchase-legend .purchase-event>span{overflow:visible;text-overflow:clip}
@media (max-width:600px){ .purchase-legend{gap:5px 10px;font-size:10px} }
/* 斷貨自動刪單：與「客戶自己刪單」(紅字) 區分開——琥珀色＋斷貨標籤，不劃線變暗到看不見 */
.purchase-event.is-stockout{opacity:.62}
.purchase-event.is-stockout>span{text-decoration:line-through;text-decoration-thickness:1px;color:var(--purchase-amber)}
.purchase-event.is-stockout b{color:var(--purchase-amber)!important}
.purchase-event-stockout{margin-left:4px;padding:0 4px;border-radius:var(--r-1);font-style:normal;
  font-size:var(--fs-2xs);background:var(--purchase-amber-soft);color:var(--purchase-amber);
  text-decoration:none;display:inline-block;vertical-align:middle}
.purchase-event.is-deleted{opacity:.45}
.purchase-event.is-deleted>span{text-decoration:line-through;text-decoration-thickness:1px;color:var(--purchase-red)}
.purchase-event.is-deleted b{color:var(--purchase-red)!important}
.purchase-event.is-done{opacity:.45}
.purchase-event.is-done>span{text-decoration:line-through;text-decoration-thickness:1px}
.purchase-event.is-done b{color:var(--purchase-muted)!important}
.purchase-variant-total{display:grid;align-content:center;justify-items:center;padding:10px 4px;border:0!important;background:#fff}
.purchase-total-head,.purchase-sales-head,.purchase-product-grand-total,.purchase-product-sales-total,
.purchase-variant-total,.purchase-variant-sales-total,.purchase-column-gap{box-shadow:0 -1px #fff,0 1px #fff!important}
.purchase-sales-head,.purchase-product-sales-total,.purchase-variant-sales-total{
  box-shadow:0 -2px #fff,0 2px #fff,2px 0 #fff!important}
.purchase-total-number{color:var(--purchase-ink);font-family:var(--font-sans);font-size:var(--fs-md);font-weight:500;line-height:1.35;font-variant-numeric:tabular-nums}
.purchase-summary-orbit{--orbit:var(--purchase-metric-total);--orbit-delay:0ms;position:relative;display:grid;place-content:center;justify-items:center;
  width:68px;aspect-ratio:1;border-radius:50%;color:var(--purchase-ink);font-variant-numeric:tabular-nums}
.purchase-summary-orbit::before{content:"";position:absolute;inset:1px;border-radius:50%;
  --orbit-sweep:var(--metric-progress);
  background:conic-gradient(from 218deg,color-mix(in srgb,var(--orbit) 42%,white) 0%,var(--orbit) var(--orbit-sweep),transparent var(--orbit-sweep) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));opacity:.9}
.purchase-summary-orbit.is-sales{--orbit:var(--purchase-metric-sales);--orbit-delay:80ms}
.purchase-orbit-value{position:relative;z-index:1;display:inline-flex;align-items:baseline;gap:3px}
.purchase-orbit-value strong{font-family:var(--font-sans);font-size:20px!important;font-weight:500;line-height:1}
.purchase-orbit-value small{color:var(--purchase-muted);font-size:9px;line-height:1}
.purchase-orbit-motion .purchase-summary-orbit::before{
  --orbit-sweep:0%;opacity:.16;transform:rotate(-7deg) scale(.96);transform-origin:center;
  transition:--orbit-sweep .88s cubic-bezier(.22,1,.36,1),opacity .32s ease,transform .72s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--orbit-delay)}
.purchase-orbit-motion .purchase-orbit-value{opacity:0;transform:translateY(3px) scale(.96);
  transition:opacity .34s ease,transform .52s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--orbit-delay) + 130ms)}
.purchase-orbit-motion .purchase-summary-orbit.is-drawn::before{
  --orbit-sweep:var(--metric-progress);opacity:.9;transform:none}
.purchase-orbit-motion .purchase-summary-orbit.is-drawn .purchase-orbit-value{opacity:1;transform:none}
.purchase-detail-metric{--detail-line:var(--purchase-metric-total);display:grid;place-items:center;gap:5px;color:var(--purchase-ink);font-variant-numeric:tabular-nums}
.purchase-detail-metric.is-sales{--detail-line:var(--purchase-metric-sales)}
.purchase-detail-value{display:inline-flex;align-items:baseline;justify-content:center;gap:3px;min-width:42px;height:24px;border-radius:999px;padding:5px 9px 4px;background:var(--purchase-metric-total-soft)}
.purchase-detail-metric.is-sales .purchase-detail-value{background:var(--purchase-metric-sales-soft)}
.purchase-detail-value strong{font-family:var(--font-sans);font-size:var(--fs-sm)!important;font-weight:500;line-height:1}
.purchase-detail-value small{color:var(--purchase-muted);font-size:8px;line-height:1}
.purchase-detail-metric::after{content:"";display:block;width:30px;height:1px;background:color-mix(in srgb,var(--detail-line) 60%,white)}
.purchase-empty{display:flex;align-items:center;justify-content:center;gap:10px;min-height:112px;padding:28px;color:var(--ink-3);font-size:var(--fs-sm);border-top:1px solid var(--hairline)}
.purchase-empty svg{width:21px;height:21px}
.purchase-empty-page{border:1px solid var(--hairline)}

/* 員工版：頂欄的選期下拉（跟導覽同一列、低調的膠囊樣式） */
.staff-batch-pick{margin-left:auto;max-width:44vw;height:30px;padding:0 26px 0 10px;
  border:1px solid var(--hairline-strong);border-radius:999px;background:var(--surface);
  color:var(--ink-2);font-size:12px;letter-spacing:.02em;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888e8a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:11px;
  transition:border-color var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft)}
.staff-batch-pick:hover{border-color:#9da49f;color:var(--ink)}
.staff-batch-pick:focus-visible{outline:2px solid #6b7f8a;outline-offset:2px}

/* ===== 勾選列印（廠商叫貨單） ===== */
/* 勾選框：平常不存在，按了「廠商叫貨單」才出現（body.psel-mode）。 */
.psel-box,.psel-all{display:none}
.psel-box input,.psel-all input{appearance:none;-webkit-appearance:none;margin:0;width:18px;height:18px;
  border:1.5px solid #b9c0bc;border-radius:5px;background:#fff;cursor:pointer;display:block;
  transition:border-color var(--t-fast) var(--ease-soft),background var(--t-fast) var(--ease-soft)}
.psel-box input:checked,.psel-all input:checked{border-color:#202422;background:#202422}
.psel-box input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.psel-all input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.psel-all input:indeterminate{border-color:#202422;background:#202422;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.psel-box input:focus-visible,.psel-all input:focus-visible{outline:2px solid #6b7f8a;outline-offset:2px}
body.psel-mode .psel-all{display:inline-flex;margin-right:7px;vertical-align:-3px}
body.psel-mode .psel-box{display:grid;place-items:center;position:absolute;top:6px;left:8px;z-index:5;
  width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.9)}   /* 30px 點擊範圍，視覺仍是 18px 小框 */
body.psel-mode .purchase-product-identity{padding-top:26px}   /* 讓出左上角給小框，別壓到縮圖 */
body.psel-mode [data-purchase-product].is-psel .purchase-product-identity{border-left-color:#202422}
body.psel-mode [data-purchase-product].is-psel .purchase-product-row{background:#f5f7f6}

/* 懸浮小視窗：右下角浮著，即時列出勾了什麼 */
.psel-panel{position:fixed;right:16px;bottom:16px;z-index:88;width:272px;max-height:min(62vh,480px);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  border:1px solid var(--hairline-strong);border-radius:12px;background:#fff;
  box-shadow:0 8px 30px rgba(23,26,28,.16),0 2px 8px rgba(23,26,28,.08);
  opacity:0;transform:translateY(10px);
  transition:opacity var(--t-base) var(--ease-soft),transform var(--t-base) var(--ease-soft)}
.psel-panel.is-open{opacity:1;transform:none}
.psel-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 8px}
.psel-panel-head small{display:block;color:var(--muted2);font-size:10.5px;letter-spacing:.06em}
.psel-panel-head h2{margin:2px 0 0;font-size:15px;font-weight:600;color:#222624}
.psel-panel-head strong{font-variant-numeric:tabular-nums}
.psel-close{border:0;background:none;padding:6px;border-radius:8px;color:#9aa09c;cursor:pointer;
  transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft)}
.psel-close:hover{background:#f1f3f2;color:#343936}
.psel-close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;display:block}
.psel-list{margin:0;padding:4px 0;list-style:none;overflow-y:auto;border-top:1px solid var(--hairline)}
.psel-list li{padding:6px 14px;font-size:12px;color:#3a403d;border-bottom:1px solid var(--hairline);overflow-wrap:anywhere}
.psel-list li:last-child{border-bottom:0}
.psel-list li.psel-empty{color:var(--muted2)}
.psel-panel-foot{display:flex;align-items:center;gap:6px;padding:10px 12px;border-top:1px solid var(--hairline)}
.psel-mini{padding:6px 10px;font-size:12px}
.psel-dl{margin-left:auto;padding:8px 14px;font-size:13px;text-decoration:none;border-radius:var(--r-1)}
.psel-dl.is-disabled{opacity:.4;cursor:default;pointer-events:auto}
@media (max-width:600px){
  .psel-panel{left:10px;right:10px;bottom:10px;width:auto;max-height:52vh}
  body.psel-mode .psel-box{top:4px;left:6px}
}

.purchase-arrival-backdrop{position:fixed;inset:0;z-index:90;background:rgba(22,24,25,.34);opacity:0;transition:opacity var(--t-base) var(--ease-soft)}
.purchase-arrival-drawer{position:fixed;top:0;right:0;bottom:0;z-index:91;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;width:min(520px,100vw);height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden;border-left:1px solid var(--purchase-line-strong);background:var(--purchase-surface);box-shadow:-18px 0 42px rgba(23,26,28,.14);transform:translate3d(100%,0,0);transition:transform var(--t-base) var(--ease);will-change:transform}
.purchase-arrival-drawer[hidden]{display:none}
body.purchase-arrival-drawer-open{overflow:hidden}
body.purchase-arrival-drawer-open .purchase-arrival-backdrop{opacity:1}
body.purchase-arrival-drawer-open .purchase-arrival-drawer{transform:translate3d(0,0,0)}
.purchase-arrival-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);padding:22px 24px 18px;border-bottom:1px solid var(--purchase-line)}
.purchase-arrival-drawer-head small{display:block;margin-bottom:3px;color:var(--purchase-muted);font-size:var(--fs-xs)}
.purchase-arrival-drawer-head h2{margin:0;font-family:var(--font-serif);font-size:var(--fs-xl);font-weight:400;letter-spacing:0}
.purchase-arrival-close{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--r-1);padding:0;background:transparent;color:var(--purchase-muted);cursor:pointer}
.purchase-arrival-close:hover,.purchase-arrival-close:focus-visible{outline:none;background:var(--purchase-neutral);color:var(--purchase-ink)}
.purchase-arrival-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.purchase-arrival-progress{padding:10px 24px;border-bottom:1px solid var(--purchase-line);background:#f7f9f8;color:var(--purchase-muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.purchase-arrival-progress.is-saving{color:var(--purchase-amber)}
.purchase-arrival-progress.is-saved{color:var(--purchase-green)}
.purchase-arrival-progress.is-error{background:#fff7f6;color:var(--purchase-red)}
/* 到貨登記搜尋列：釘在進度列下方，321 項時不用捲著找 */
.purchase-arrival-search{position:relative;display:flex;align-items:center;gap:8px;
  padding:10px 24px 12px;border-bottom:1px solid var(--purchase-line);background:var(--purchase-surface)}
.purchase-arrival-search>svg{position:absolute;left:34px;width:15px;height:15px;pointer-events:none;
  fill:none;stroke:var(--purchase-muted);stroke-width:1.9;stroke-linecap:round}
.purchase-arrival-search input{flex:1;min-width:0;height:38px;padding:0 34px 0 30px;
  border:1px solid var(--purchase-line-strong);border-radius:999px;background:#fff;
  color:var(--ink);font-size:16px;                      /* 16px：iOS 聚焦不自動放大整頁 */
  transition:border-color var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft)}
.purchase-arrival-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.purchase-arrival-search input:focus{outline:none;border-color:#9da49f;box-shadow:0 0 0 3px rgba(61,109,120,.08)}
.purchase-arrival-search-clear{position:absolute;right:30px;width:26px;height:26px;padding:0;border:0;
  border-radius:50%;background:none;color:var(--purchase-muted);font-size:12px;line-height:1;cursor:pointer;
  transition:background var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft)}
.purchase-arrival-search-clear:hover{background:#eef1f0;color:var(--ink-2)}
.purchase-arrival-search-count{color:var(--purchase-teal)}
/* 補登整個沒人訂的商品 */
.purchase-arrival-addproduct{flex:none;height:38px;padding:0 12px;border:1px solid var(--purchase-line-strong);
  border-radius:999px;background:#fff;color:var(--purchase-muted);font-size:var(--fs-xs);
  white-space:nowrap;cursor:pointer;
  transition:border-color var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft)}
.purchase-arrival-addproduct:hover{border-color:var(--purchase-green);color:var(--purchase-green)}
.purchase-arrival-addproduct:active{transform:translateY(1px)}

/* 商品標題旁的 (+)：補登這個商品沒人訂的規格。
   視覺 15px 小圈（不搶「N 種規格」的戲），但用 ::after 把可點範圍撐到 32px，手機才按得到。 */
.purchase-arrival-addspec{position:relative;flex:none;width:15px;height:15px;padding:0;
  display:inline-grid;place-items:center;border:1px solid var(--purchase-line-strong);
  border-radius:50%;background:#fff;color:var(--purchase-muted);
  font-size:11px;line-height:1;font-family:var(--font-sans);cursor:pointer;
  transition:border-color var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft),
             background var(--t-fast) var(--ease-soft)}
.purchase-arrival-addspec::after{content:'';position:absolute;inset:-9px}   /* 隱形的加大點擊範圍 */
.purchase-arrival-addspec:hover{border-color:var(--purchase-green);color:var(--purchase-green);background:#f2f8f5}
.purchase-arrival-addspec:active{transform:scale(.9)}
.purchase-arrival-addspec:focus-visible{outline:2px solid var(--purchase-green);outline-offset:2px}

/* 補登輸入列 */
.purchase-arrival-extra-form,.purchase-arrival-newproduct{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0 0 10px;padding:10px 12px;border:1px dashed var(--purchase-green);border-radius:8px;background:#f7fbf9}
.purchase-arrival-extra-input{height:34px;min-width:0;padding:0 9px;border:1px solid var(--purchase-line-strong);
  border-radius:6px;background:#fff;font-size:16px}   /* 16px：iOS 聚焦不放大 */
.purchase-arrival-extra-input{flex:1 1 84px}
.purchase-arrival-extra-input.is-size{flex:0 1 68px}
.purchase-arrival-extra-input.is-qty{flex:0 0 64px;text-align:right}
.purchase-arrival-extra-input.is-pick{flex:1 1 100%}
.purchase-arrival-extra-input:focus{outline:none;border-color:var(--purchase-green);
  box-shadow:0 0 0 3px rgba(47,109,85,.1)}
.purchase-arrival-extra-slash{flex:none;color:var(--purchase-faint)}
.purchase-arrival-extra-ok{flex:none;height:34px;padding:0 14px;border:0;border-radius:6px;
  background:var(--purchase-green);color:#fff;font-size:var(--fs-xs);cursor:pointer;
  transition:opacity var(--t-fast) var(--ease-soft)}
.purchase-arrival-extra-ok:hover{opacity:.88}
.purchase-arrival-extra-ok:disabled{opacity:.5;cursor:default}
.purchase-arrival-extra-hint{flex:1 1 100%;color:var(--purchase-muted);font-size:var(--fs-2xs);line-height:1.5}

/* 補登進來的規格列：綠色點出來，跟真的有叫的列區分 */
.purchase-arrival-variant.is-extra-variant{background:#f7fbf9;box-shadow:inset 2px 0 var(--purchase-green)}
.purchase-arrival-extra-tag{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:1px 4px 1px 7px;
  border-radius:999px;background:var(--purchase-green-soft,#e6f2ec);color:var(--purchase-green);
  font-size:var(--fs-2xs);font-style:normal}
.purchase-arrival-extra-del{width:16px;height:16px;padding:0;display:grid;place-items:center;border:0;
  border-radius:50%;background:none;color:var(--purchase-green);font-size:10px;line-height:1;cursor:pointer}
.purchase-arrival-extra-del:hover{background:rgba(47,109,85,.16)}
.purchase-arrival-product.is-extra-product .purchase-arrival-product-head{
  border-left:2px solid var(--purchase-green);padding-left:8px}
.purchase-arrival-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 24px}
.purchase-arrival-product{border-bottom:1px solid var(--purchase-line-strong)}
.purchase-arrival-product:last-child{border-bottom:0}
.purchase-arrival-product-head{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:18px 0 12px}
.purchase-arrival-product-head img{width:42px;height:52px;border:1px solid var(--purchase-line);background:var(--purchase-neutral);object-fit:cover}
.purchase-arrival-product-name{display:grid;gap:2px;min-width:0}
.purchase-arrival-product-name strong{font-size:var(--fs-sm);font-weight:600;overflow-wrap:anywhere}
/* 用 inline-flex 讓「N 種規格」和後面的 (+) 自然垂直置中，不必靠 vertical-align 硬喬 */
.purchase-arrival-product-name small{display:inline-flex;align-items:center;gap:5px;
  color:var(--purchase-muted);font-size:var(--fs-2xs)}
.purchase-arrival-variant{display:grid;grid-template-columns:minmax(0,1fr) 76px 72px;align-items:center;gap:10px;min-height:74px;padding:10px 0;border-top:1px solid var(--purchase-line);transition:background var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft)}
.purchase-arrival-variant.is-stockout{background:linear-gradient(90deg,rgba(140,92,82,.055),transparent 42%);box-shadow:inset 2px 0 rgba(140,92,82,.42)}
.purchase-arrival-spec{display:grid;gap:2px;min-width:0}
.purchase-arrival-spec strong{font-size:var(--fs-sm);font-weight:500;overflow-wrap:anywhere}
.purchase-arrival-spec small{color:var(--purchase-muted);font-size:var(--fs-xs)}
.purchase-arrival-origin-note{width:max-content;max-width:100%;margin-top:2px;border-radius:999px;padding:2px 7px;background:#fbf6ea;color:#94702c;font-size:9px;font-weight:600;line-height:1.35;white-space:normal}
.purchase-arrival-origin-note.is-extra{background:#f5f2f0;color:#80675e}
.purchase-arrival-stockout{position:relative;display:inline-flex;align-items:center;gap:6px;width:max-content;color:var(--purchase-muted);font-size:var(--fs-2xs);cursor:pointer;user-select:none}
.purchase-arrival-stockout input{position:absolute;opacity:0;pointer-events:none}
.purchase-arrival-stockout i{position:relative;display:grid;place-items:center;width:16px;height:16px;border:1px solid var(--purchase-line-strong);border-radius:3px;background:#fff;transition:background var(--t-base) var(--ease-soft),border-color var(--t-base) var(--ease-soft),transform var(--t-fast) var(--ease-soft)}
.purchase-arrival-stockout i::after{content:"";width:7px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;opacity:0;transform:translateY(-1px) rotate(-45deg)}
.purchase-arrival-stockout input:checked+i{border-color:#8c5c52;background:#8c5c52}
.purchase-arrival-stockout input:checked+i::after{opacity:1}
.purchase-arrival-stockout input:focus-visible+i{outline:2px solid rgba(61,109,120,.25);outline-offset:2px}
.purchase-arrival-stockout:active i{transform:scale(.92)}
.purchase-arrival-stockout.is-product{justify-self:end;border:1px solid rgba(140,92,82,.22);border-radius:var(--r-1);padding:7px 9px;background:#fbf7f5;color:#765149;white-space:nowrap}
.purchase-arrival-stockout.is-variant{margin-top:5px;color:#87645d}
.purchase-arrival-stockout.is-inherited{opacity:.48;cursor:default}
.purchase-arrival-count{width:76px;height:42px;border:1px solid var(--purchase-line-strong);border-radius:var(--r-1);background:#fff;color:var(--purchase-ink);font:500 var(--fs-md)/1 var(--font-sans);text-align:center;font-variant-numeric:tabular-nums}
.purchase-arrival-count:focus{outline:none;border-color:var(--purchase-teal);box-shadow:0 0 0 3px rgba(61,109,120,.12)}
.purchase-arrival-count.is-saving{opacity:.58}
.purchase-arrival-count.is-saved{border-color:var(--purchase-green);background:var(--purchase-green-soft)}
.purchase-arrival-count.is-error{border-color:var(--purchase-red);background:#fff7f6}
.purchase-arrival-difference{justify-self:end;color:var(--purchase-muted);font-size:var(--fs-xs);font-weight:500;white-space:nowrap}
.purchase-arrival-difference.is-match{color:var(--purchase-green)}
.purchase-arrival-difference.is-more{color:var(--purchase-amber)}
.purchase-arrival-difference.is-less{color:var(--purchase-red)}
.purchase-arrival-difference.is-stockout{color:#855247}
.purchase-arrival-loading,.purchase-arrival-empty{display:grid;place-items:center;min-height:160px;padding:24px;color:var(--purchase-muted);font-size:var(--fs-sm);text-align:center}
.purchase-arrival-footer{padding:16px 24px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--purchase-line-strong);background:#fff}
.purchase-arrival-footer button{width:100%;min-height:46px}

@media (min-width:761px){
  .purchase-sales-head,.purchase-product-sales-total,.purchase-variant-sales-total{position:sticky;right:0;z-index:7}
  .purchase-column-gap{position:sticky;right:var(--purchase-sales-col);z-index:7}
  .purchase-total-head,.purchase-product-grand-total,.purchase-variant-total{position:sticky;right:calc(var(--purchase-sales-col) + var(--purchase-gap-col));z-index:6}
  .purchase-total-head,.purchase-sales-head{z-index:9}
  .purchase-product-grand-total,.purchase-variant-total{box-shadow:0 -1px #fff,0 1px #fff}
}

@media (max-width:760px){
  .order-work-tabs{margin:-12px 0 24px}
  .order-work-tabs a{flex:1;justify-content:center;min-height:44px;padding:0 10px}
  .order-work-tabs a::after{left:10px;right:10px}
  .purchase-summary{grid-template-columns:minmax(100px,1fr) repeat(3,minmax(42px,auto));gap:8px;padding:14px 0}
  .purchase-metric{gap:5px;justify-content:center}
  .purchase-ready-items{grid-template-columns:1fr}
  .purchase-table-tools{gap:8px}
  .purchase-product-search{flex:1;width:auto}
  .purchase-match-count{display:none}
  .purchase-metrics-toggle{display:grid}
  .purchase-matrix-shell.is-metrics-collapsed,.purchase-sticky-head.is-metrics-collapsed{
    --purchase-total-col:0px;--purchase-gap-col:0px;--purchase-sales-col:0px}
  .purchase-matrix-shell.is-metrics-collapsed .purchase-total-head,
  .purchase-matrix-shell.is-metrics-collapsed .purchase-column-gap,
  .purchase-matrix-shell.is-metrics-collapsed .purchase-sales-head,
  .purchase-matrix-shell.is-metrics-collapsed .purchase-product-grand-total,
  .purchase-matrix-shell.is-metrics-collapsed .purchase-product-sales-total,
  .purchase-matrix-shell.is-metrics-collapsed .purchase-variant-total,
  .purchase-matrix-shell.is-metrics-collapsed .purchase-variant-sales-total,
  .purchase-sticky-head.is-metrics-collapsed .purchase-total-head,
  .purchase-sticky-head.is-metrics-collapsed .purchase-column-gap,
  .purchase-sticky-head.is-metrics-collapsed .purchase-sales-head{display:none!important}
  .purchase-matrix-shell{--purchase-product-col:120px;--purchase-date-col:120px;--purchase-date-collapsed-col:42px;--purchase-total-col:76px;--purchase-gap-col:8px;--purchase-sales-col:76px}
  .purchase-product-identity{grid-template-columns:34px minmax(0,1fr);gap:7px;padding-inline:7px}
  .purchase-product-identity img{width:34px;height:46px}
  .purchase-variant-key{grid-template-columns:auto minmax(0,1fr);padding:13px 8px 11px 12px}
  .purchase-date-cell{padding:12px 7px}
  /* 手機版每一格很窄，排成兩列：第1列「+1 ⋯ 日期時間」，第2列客戶名獨佔整寬。
     ⚠️ 第一欄一定要「固定寬」：用 auto 的話名字會被排進第一欄，欄寬就跟著各自的名字長度變，
     +1 又是置中，於是每一列的 +1 都停在不同位置（階梯狀）、名字還會被截成 20 幾 px。 */
  .purchase-event{grid-template-columns:22px minmax(0,1fr);gap:1px 5px;font-size:9px}
  .purchase-event>b{grid-column:1;grid-row:1;text-align:left}
  .purchase-event>span{grid-column:1/-1;grid-row:2}
  .purchase-event time{grid-column:2;grid-row:1;display:flex;gap:3px;justify-content:flex-end}
  .purchase-sales-head,.purchase-product-sales-total,.purchase-variant-sales-total{position:sticky;right:0;z-index:7}
  .purchase-column-gap{position:sticky;right:var(--purchase-sales-col);z-index:7}
  .purchase-total-head,.purchase-product-grand-total,.purchase-variant-total{position:sticky;right:calc(var(--purchase-sales-col) + var(--purchase-gap-col));z-index:6}
  .purchase-total-head,.purchase-sales-head{z-index:9}
  .purchase-product-grand-total,.purchase-variant-total{box-shadow:0 -1px #fff,0 1px #fff}
  .purchase-variant-total{padding-inline:8px}
  .purchase-arrival-drawer{width:100vw;border-left:0}
  .purchase-arrival-drawer-head{padding:18px 16px 14px}
  .purchase-arrival-progress{padding:9px 16px}
  .purchase-arrival-search{padding:9px 16px 11px}
  .purchase-arrival-search>svg{left:26px}
  .purchase-arrival-search-clear{right:22px}
  .purchase-arrival-body{padding:0 16px}
  .purchase-arrival-footer{padding-inline:16px}
}

@media (max-width:430px){
  .purchase-confirm{padding:10px 12px;min-height:42px}
  .purchase-summary{grid-template-columns:1fr repeat(3,minmax(48px,auto));gap:5px}
  .purchase-metric{display:grid;place-items:center;gap:0}
  .purchase-metric svg{width:15px;height:15px}
  .purchase-metric strong{font-size:var(--fs-md)}
  .purchase-ready-customer-head{grid-template-columns:22px minmax(0,1fr) auto;gap:4px 7px;padding-inline:8px}
  .purchase-ready-customer-name{grid-column:2;grid-row:1;display:grid;gap:2px}
  .purchase-ready-last5{display:none}
  .purchase-ready-customer-meta{grid-column:2;grid-row:2}
  .purchase-ready-packed{grid-column:3;grid-row:1 / span 2;min-height:44px;padding-inline:3px}
  .purchase-ready-items{padding:0 8px 8px 36px}
  /* ⚠️ 左右 padding 不可為 0：圖片會貼齊 border-top 的起點，看起來像壓在分隔線上。
     留 6px 內距讓圖片離開線頭，分隔線本身也縮到圖片後方，只切在文字區。 */
  .purchase-ready-item{grid-template-columns:40px minmax(0,1fr);gap:9px;padding:9px 6px;
    border-top:0;position:relative}
  .purchase-ready-item::before{content:'';position:absolute;top:0;left:55px;right:0;
    border-top:1px solid var(--purchase-line)}
  .purchase-ready-item:first-child::before{display:none}
  .purchase-ready-item-thumb{width:40px;height:52px}
  .purchase-ready-item-name{white-space:normal;line-height:1.35}
  .purchase-ready-item-spec{gap:10px;color:var(--purchase-muted)}
  .purchase-ready-item-spec span{gap:4px}
  .purchase-match-count{display:none}
  /* 手機：右邊釘住欄大瘦身（原本 總數量122+隔14+銷售88=224px 吃掉大半螢幕，日期欄只剩縫）*/
  .purchase-matrix-shell{--purchase-product-col:100px;--purchase-date-col:92px;--purchase-date-collapsed-col:38px;--purchase-total-col:62px;--purchase-gap-col:8px;--purchase-sales-col:62px}
  .purchase-matrix-head{min-height:56px}
  .purchase-matrix-head>div{padding:8px}
  .purchase-column-gap.is-head svg{display:none}                       /* 8px 隔條塞不下裝飾箭頭 */
  .purchase-product-sales-total,.purchase-variant-sales-total{padding:10px 8px}
  /* 已確認欄的小鈕移到「日期下方」一排，不再壓住日期文字 */
  .purchase-date-head:not(.is-current){padding-bottom:32px}
  .purchase-date-head:not(.is-current) strong{padding-inline:0}
  .purchase-arrival-open{top:auto;bottom:4px;transform:none;right:4px;width:24px;height:24px}
  .purchase-unconfirm{top:auto;bottom:4px;transform:none;right:32px;width:24px;height:24px}
  .purchase-dl{top:auto;bottom:4px;transform:none;right:60px}
  .purchase-date-head.is-current .purchase-dl{right:4px}
  .purchase-pack-export{width:24px;height:24px}
  .purchase-date-toggle{left:2px;width:24px;height:24px}
  .purchase-date-head.is-collapsed .purchase-date-toggle{min-height:55px}
  .purchase-date-input{height:38px;padding-inline:2px;font-size:10px}
  .purchase-date-head.is-current .purchase-date-input{padding-left:25px}
  .purchase-product-row{min-height:76px}
  .purchase-product-identity{grid-template-columns:32px minmax(0,1fr);padding:8px 6px 8px 5px!important}
  .purchase-product-identity img{width:32px;height:44px}
  .purchase-product-identity h3{font-size:var(--fs-xs)}
  .purchase-variant-key{padding:10px 7px 10px 10px}
  .purchase-variant-key strong{font-size:var(--fs-xs)}
  .purchase-total-number{font-size:var(--fs-md)}
  .purchase-summary-orbit{width:54px}
  .purchase-orbit-value strong{font-size:17px!important}
  .purchase-orbit-value small{font-size:8px}
  .purchase-detail-value{min-width:38px;height:22px;padding-inline:7px}
  .purchase-arrival-variant{grid-template-columns:minmax(0,1fr) 68px 58px;gap:7px}
  .purchase-arrival-count{width:68px;height:44px;font-size:16px}
}

/* 數量是 number 輸入框：把瀏覽器的上下箭頭藏掉——它會擠壓內容，兩位數的「12」會被切半。 */
.inv-qty::-webkit-outer-spin-button,.inv-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inv-qty{-moz-appearance:textfield;appearance:textfield}

/* 庫存頁手機版：期別是章節、商品是獨立卡片。設計語彙統一成三顆「膠囊」——
   顏色、尺寸、數量各一顆，同高同框同圓角，排在卡片底部一條線上；名字在上、✕ 在角落。 */
@media (max-width:600px){
  .inventory-list-panel{padding:0;border:0;background:transparent;box-shadow:none}
  .inventory-list-panel>.panel-head{margin:0 0 18px;padding:0 2px 11px;border-bottom:1px solid var(--hairline-strong)}
  .inventory-list-panel>.panel-head h2{font-size:18px;font-weight:500;letter-spacing:.02em}
  .inventory-list-panel .inv-group{margin:0 0 26px;padding:0 0 0 9px;overflow:visible;
    border:0;border-left:3px solid var(--inv-color);background:transparent;box-shadow:none}   /* 左側期別顏色線：使用者指定保留 */
  .inventory-list-panel .inv-group:last-child{margin-bottom:0}
  .inventory-list-panel .inv-group-head{min-height:44px;margin:0 0 10px;padding:0 2px;gap:10px;
    background:transparent;border:0;font-size:15px;letter-spacing:.02em}
  .inventory-list-panel .inv-group[open]>.inv-group-head{border-bottom:0}
  .inventory-list-panel .inv-group-bar{width:3px;height:24px;border-radius:999px;box-shadow:none}
  .inventory-list-panel .inv-group-title{font-weight:600;color:#2b302d}
  .inventory-list-panel .inv-group-head small{display:inline-flex;align-items:baseline;gap:3px;
    margin-left:auto;padding:4px 9px;border:1px solid #dfe3e1;border-radius:999px;background:#fff;
    color:#838a86;font-size:11px;letter-spacing:0;box-shadow:0 1px 2px rgba(25,29,31,.03)}
  .inventory-list-panel .inv-group-head small strong{font-size:14px;color:#353a37}
  .inventory-list-panel details.inv-group>summary::after{margin-left:4px}

  .inventory-list-panel .inv-item{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);
    gap:11px;align-items:stretch;margin:0 0 8px;padding:10px;
    border:1px solid #e6e9e7;border-radius:11px;background:#fff;
    box-shadow:0 1px 2px rgba(25,29,31,.04)}
  .inventory-list-panel .inv-item:last-child{margin-bottom:0}
  .inventory-list-panel .inv-item-img{grid-column:1;grid-row:1;width:52px;height:68px;border-radius:7px;
    border-color:#e3e7e5;background:#f4f6f5;box-shadow:none}
  /* 缺圖：不要讓卡片塌掉變成另一種排版（清單裡兩種版型交錯很亂）。
     onerror 把 <img> 移走後，用同尺寸的灰底占位框補回去，整列高度一致。 */
  .inventory-list-panel .inv-item.no-img::before{content:'無圖';grid-column:1;grid-row:1;
    box-sizing:border-box;display:grid;place-items:center;width:52px;height:68px;border-radius:7px;
    border:1px solid #e9ecea;background:#f7f9f8;color:#bcc2be;font-size:9px;letter-spacing:.14em}
  .inventory-list-panel .inv-item-main{grid-column:2;grid-row:1;display:flex;flex-direction:column;
    align-self:stretch;min-height:68px;min-width:0}
  .inventory-list-panel .inv-item-name{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    padding-right:26px;font-size:14px;font-weight:600;line-height:1.35;color:#262927;letter-spacing:.01em}
  .inventory-list-panel .inv-item-price{display:inline;margin-left:5px;font-size:10.5px}
  /* 底部一條線：左＝規格（文字或膠囊），右＝數量膠囊（絕對定位）。
     margin-top:auto 把它壓到卡片底，跟數量膠囊同一條基線。 */
  .inventory-list-panel .inv-item-spec{margin-top:auto;padding-right:72px;
    color:#7c837f;font-size:12px;line-height:26px}
  .inventory-list-panel .inv-spec-edit{display:flex;align-items:center;gap:6px;
    margin-top:auto;margin-right:68px;padding-right:0;width:auto;line-height:normal}
  /* 帶小標的藥丸：[顏色 綠] [尺寸 F]，跟右邊的 [12 件] 同一套語言。
     外框在 <label> 上，點小標也會聚焦到輸入框。 */
  .inventory-list-panel .inv-chip{display:flex;align-items:center;gap:4px;flex:none;
    height:26px;padding:0 9px 0 9px;box-sizing:border-box;
    border:1px solid #e8ebe9;border-radius:999px;background:#fbfcfb}
  .inventory-list-panel .inv-chip:focus-within{border-color:#9da49f;background:#fff;
    box-shadow:0 0 0 3px rgba(61,109,120,.07)}
  .inventory-list-panel .inv-chip-label{display:inline;flex:none;color:#9aa09c;font-size:10px;line-height:1}
  /* 膠囊縮小的關鍵：平常 13px 顯示、聚焦瞬間換回 16px——iOS 只看「聚焦當下」的字級，
     這樣就能小得精緻又不觸發整頁自動放大。 */
  .inventory-list-panel .inv-chip .inv-xs{flex:none;width:44px;min-width:0;max-width:none;
    height:24px;min-height:24px;padding:0;border:0;border-radius:0;background:transparent;
    text-align:center;line-height:24px;color:#3f4542;font-weight:500;font-size:13px;box-shadow:none}
  .inventory-list-panel .inv-chip .inv-xs:focus{font-size:16px;border:0;background:transparent;box-shadow:none}
  .inventory-list-panel .inv-chip:last-of-type .inv-xs{width:30px}   /* 尺寸通常只有 1-2 個字 */
  .inventory-list-panel .inv-spec-slash{display:none}   /* 有小標之後斜線是多餘的 */
  .inventory-list-panel .inv-spec-src{display:none}   /* 手機版空間小：來源(客戶棄單…)略過，桌機才顯示 */

  .inventory-list-panel .inv-item-actions{display:contents}
  /* 數量膠囊：跟顏色/尺寸同一套語彙（同高、同框、同圓角），數字靠右、「件」當單位。 */
  .inventory-list-panel .inv-qty-field{position:absolute;right:10px;bottom:10px;display:flex;
    align-items:center;justify-content:flex-end;gap:2px;height:26px;width:60px;padding:0 8px;
    border:1px solid #e8ebe9;border-radius:999px;background:#fbfcfb;box-shadow:none}
  .inventory-list-panel .inv-qty-field:focus-within{border-color:#9da49f;background:#fff;
    box-shadow:0 0 0 3px rgba(61,109,120,.07)}
  .inventory-list-panel .inv-qty-label{display:none}
  .inventory-list-panel .inv-item .inv-qty{width:28px;min-height:24px;height:24px;padding:0;border:0;background:transparent;
    color:#2b302d;font-family:var(--font-sans);font-size:14px;font-weight:600;text-align:right;
    font-variant-numeric:tabular-nums;box-shadow:none}
  .inventory-list-panel .inv-item .inv-qty:focus{font-size:16px;border:0;background:transparent;box-shadow:none}
  .inventory-list-panel .inv-qty-unit{display:inline;color:#9aa09c;font-size:10px;line-height:1}
  .inventory-list-panel .inv-item .x-btn{position:absolute;top:2px;right:2px;display:grid;place-items:center;
    min-width:38px;width:38px;min-height:38px;height:38px;padding:0;border-radius:9px;
    color:#a6aca8;font-size:12px;transform:none;opacity:.7}
  .inventory-list-panel .inv-item .x-btn:active{background:#f1f3f2;color:#343936;transform:scale(.96)}
  .inventory-list-panel .inv-adj-tag{display:inline-block;margin-left:5px;padding:1px 6px}
}

@media (max-width:370px){
  .inventory-list-panel .inv-item{grid-template-columns:48px minmax(0,1fr);gap:10px;padding:9px}
  .inventory-list-panel .inv-item-img{width:48px;height:63px}
  .inventory-list-panel .inv-item.no-img::before{width:48px;height:63px}
  .inventory-list-panel .inv-item-main{min-height:63px}
  .inventory-list-panel .inv-item-spec{padding-right:66px}
  .inventory-list-panel .inv-spec-edit{margin-right:66px;gap:5px}
  .inventory-list-panel .inv-chip{padding:0 7px}
  .inventory-list-panel .inv-chip .inv-xs{width:40px}
  .inventory-list-panel .inv-chip:last-of-type .inv-xs{width:26px}
  .inventory-list-panel .inv-qty-field{right:9px;bottom:9px;width:58px;padding:0 7px}
}

@media (prefers-reduced-motion:reduce){
  .order-work-tabs a::after,.purchase-date-input,.purchase-arrival-backdrop,.purchase-arrival-drawer,.purchase-date-collapse-all svg,.purchase-ready-chevron{transition:none}
  .purchase-orbit-motion .purchase-summary-orbit::before{--orbit-sweep:var(--metric-progress);opacity:.9;transform:none;transition:none}
  .purchase-orbit-motion .purchase-orbit-value{opacity:1;transform:none;transition:none}
}

/* 前端頁：前台開放／鎖起來的切換 */
.fe-public{padding:var(--s-2) 0}
.fe-switch{display:flex;align-items:flex-start;gap:var(--s-3);cursor:pointer}
.fe-switch input{position:absolute;opacity:0;width:0;height:0}
.fe-switch-track{flex:none;width:46px;height:26px;border-radius:999px;margin-top:2px;
  background:var(--hairline-contrast);position:relative;transition:background .18s ease}
.fe-switch-dot{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s ease}
.fe-switch input:checked + .fe-switch-track{background:#3f6b52}
.fe-switch input:checked + .fe-switch-track .fe-switch-dot{transform:translateX(20px)}
.fe-switch input:focus-visible + .fe-switch-track{outline:2px solid var(--ink);outline-offset:2px}
.fe-switch-text b{display:block;font-size:var(--fs-sm)}
.fe-switch-text small{display:block;margin-top:3px;color:var(--muted);font-size:var(--fs-2xs);line-height:1.7}