/* =============================================================================
   刻印訂單系統 V2「單頁工作台」— 樣式
   興達品牌：深藍 (ink) ＋ 紙白 (paper) ＋ 點綴金 (gold)，色票取自 Vic-Agent\DESIGN.md
   數字（金額／統編／日期／單號）一律等寬字，這是會計師事務所的品牌識別重點。
   ============================================================================= */

:root{
  /* 墨藍 ramp */
  --ink9:#0F1A2E; --ink8:#1E3366; --ink6:#2F6BA8; --ink4:#615A50; --ink3:#BFB9AB;
  /* --ink3 在紙白上只有 1.6~1.9:1，只能當裝飾（分隔線、虛線框）。
     「弱化但仍須讀得到」的文字一律用 --ink35（在 --paper 上約 4.6:1）。 */
  --ink35:#8A8377;
  /* 紙白底 */
  --paper:#F6F4EE; --paper2:#EDE9DE; --paper3:#E3DDCC; --card:#FDFCF8;
  /* 點綴金（面積 <10%） */
  --gold:#B68A36; --gold-m:#C9A04E; --gold-d:#8B6A28; --gold-t:#7A5520; --gold-l:#F7EDD8;
  /* 印泥朱紅（印章示意、送出戳記——面積更小，只出現在「印」本身） */
  --vermil:#C23B2B; --vermil-d:#9A2B1F;
  /* 分隔線 */
  --line:rgba(15,26,46,.12); --line-s:rgba(15,26,46,.06);
  /* 語意色 */
  --ok:#2E7D4F; --ok-l:#E7F1EA; --warn:#B4690E; --warn-l:#FBF1DF;
  --err:#B3372E; --err-l:#F9E8E6; --info:#2F6BA8; --info-l:#E4EDF6;
  /* 字體：無 CDN，全部走系統字，等寬優先 JetBrains Mono */
  --mono:ui-monospace,'JetBrains Mono','Cascadia Mono','Consolas','Courier New',monospace;
  --serif:'Noto Serif TC','Songti TC',PMingLiU,serif;
  --sans:'Noto Sans TC','Microsoft JhengHei','PingFang TC',system-ui,sans-serif;
  --r:16px; --shadow:0 14px 44px rgba(15,23,42,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--paper);color:var(--ink9);font-family:var(--sans);font-size:14px;line-height:1.55}
button{font-family:inherit;cursor:pointer}
a{color:var(--ink6)}
input,select,textarea{font-family:inherit;font-size:13px;color:var(--ink9);background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:6px 8px;outline:none;max-width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--ink6);box-shadow:0 0 0 3px rgba(47,107,168,.15)}
input[disabled],select[disabled]{background:var(--paper2);color:var(--ink4)}

/* 金額、統編、日期、單號一律等寬 */
.mono,td.num,.num,input.mono,.qty{font-family:var(--mono)}

kbd{font-family:var(--mono);font-size:10.5px;background:var(--card);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--ink4);white-space:nowrap}
/* 觸控裝置隱藏快捷鍵標示——但要連著整句一起藏（.kbdhint），
   只藏 <kbd> 會把句子留成殘句：「按上方套組快捷（…）」括號裡是空的。 */
@media (hover:none){.kbdhint{display:none !important}}

.tscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.muted{color:var(--ink4)}
.tiny{font-size:11.5px}
.grow{flex:1}
.hide{display:none !important}

/* ========== 頂欄 ========== */
.topbar{background:linear-gradient(120deg,#1E3366,#162B58);color:#F6F4EE;display:flex;
  align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap;position:sticky;top:0;z-index:30}
.brand{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.04em}
.brand small{display:block;font-family:var(--sans);font-weight:400;font-size:10.5px;color:var(--ink3);letter-spacing:.14em}
.topnav{display:flex;gap:4px;flex-wrap:wrap}
.topnav button{background:transparent;border:none;color:#CBD3E4;padding:7px 13px;border-radius:9px;font-size:14px}
.topnav button:hover{color:#fff;background:rgba(255,255,255,.08)}
.topnav button.on{background:rgba(255,255,255,.12);color:#fff;font-weight:700;box-shadow:inset 0 -2px 0 var(--gold)}
.deadline{font-size:12px;background:rgba(182,138,54,.18);border:1px solid rgba(201,160,78,.5);
  color:#EBD8AE;border-radius:99px;padding:4px 12px}
.deadline b{font-family:var(--mono);color:#F3E2BC}
.userchip{font-size:12px;color:#CBD3E4}
.userchip b{color:#fff}
.userchip button{background:none;border:1px solid rgba(255,255,255,.28);color:#CBD3E4;
  border-radius:99px;font-size:11px;padding:2px 10px;margin-left:8px}
.userchip button:hover{background:rgba(255,255,255,.12);color:#fff}

main{max-width:74rem;margin:0 auto;padding:16px 14px 80px}
/* 工作台放寬：明細表要完整顯示，右欄的記錄表與印面示意也一併放大 */
main.wide{max-width:92rem}
.view{display:none}
.view.on{display:block}
h2.pagetitle{font-family:var(--serif);font-size:20px;margin:2px 0 12px;color:var(--ink8)}
h2.pagetitle small{font-family:var(--sans);font-size:12px;color:var(--ink4);font-weight:400;margin-left:10px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:14px 16px;margin-bottom:12px}
.card h3{font-size:13px;color:var(--ink8);letter-spacing:.05em;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h3 .hint{font-weight:400;color:var(--ink4);font-size:11.5px}

/* ========== 套組快捷列 ========== */
.presetbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.presetbar .pb-label{font-size:12px;color:var(--ink4);font-weight:700}
.preset{background:var(--card);border:1.5px solid var(--ink8);color:var(--ink8);border-radius:11px;
  padding:7px 13px;font-size:13.5px;font-weight:700;display:flex;gap:8px;align-items:center}
.preset:hover{background:var(--ink8);color:#fff}
.preset:hover kbd{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.3)}

/* ========== 工作台雙欄 ==========
   拿掉單價／小計後左欄不再需要 860px，把空出來的寬度分一半給右欄——
   右邊是「太元實際會收到什麼」的 1:1 預覽與印面示意，看得越清楚，核對越可靠。 */
.work-grid{display:grid;grid-template-columns:54fr 46fr;gap:16px;align-items:start}
.work-grid>*{min-width:0}

.custgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.field{display:flex;flex-direction:column;gap:3px;min-width:0}
.field.wide{grid-column:1/-1}
.field label{font-size:11.5px;color:var(--ink4);display:flex;gap:6px;align-items:center;flex-wrap:wrap}

.badge{font-size:10.5px;border-radius:99px;padding:1px 8px;font-weight:700;white-space:normal;display:inline-block}
.badge.ok{background:var(--ok-l);color:var(--ok)}
.badge.warn{background:var(--warn-l);color:var(--warn)}
.badge.err{background:var(--err-l);color:var(--err)}
.badge.mute{background:var(--paper2);color:var(--ink4);font-weight:400}
.badge.busy{background:#E8EDF5;color:var(--ink6)}
.badge .pick{border:none;background:var(--ink6);color:#fff;border-radius:99px;font-size:10px;padding:0 7px;margin-left:5px}

/* 誠實提示條：預查查不到申請人姓名（不可美化成「全部核對通過」） */
/* 對比：原本 #B4690E on #FBF1DF ＝ 3.77:1、11.5px——全系統最重要的警語卻是最難讀的一段。
   改 #8A5209（≈5.6:1）並提到 12.5px。 */
.honest{background:var(--warn-l);border:1px solid rgba(180,105,14,.35);color:#8A5209;
  border-radius:10px;padding:8px 11px;font-size:12.5px;line-height:1.65;margin-top:8px}
.honest b{color:#6F4207}

/* ========== 明細表格 ==========
   2026-08-08：拿掉「單價」「小計」兩欄與整組 sticky。
   原本 min-width:860px 但左欄只有 594px，永遠有 271px 看不到，而且不透明的 sticky
   金額欄正好壓在「字體」與「數量」上——承辦看不到自己刻幾個、用什麼字體。
   剩七欄之後 600px 就排得下，1440px 完整可見、不需要橫捲。 */
table.items{width:100%;border-collapse:collapse;min-width:660px;table-layout:fixed}
table.items th{font-size:11px;color:var(--ink4);text-align:left;padding:4px 6px;
  border-bottom:1.5px solid var(--line);font-weight:700;white-space:nowrap;background:var(--card)}
table.items td{padding:4px 4px;border-bottom:1px solid var(--line-s);vertical-align:middle}
table.items input,table.items select{width:100%;padding:5px 6px;font-size:12.5px}
table.items td.num{text-align:right;font-family:var(--mono);font-size:13px;white-space:nowrap;padding-right:8px}

/* ── 數量：這張單最會出錯又最看不出來的數字，所以是明細表裡唯一被放大的欄位 ──
   歷史 266 筆有 103 筆寫「大小章兩個」，至今說不清是 2 顆還是 4 顆。
   步進器（−／數字／＋）＋ 22px 等寬粗體，觸控目標 40px；number input 的 ↑↓ 一樣能加減。 */
table.items th.th-qty{color:var(--ink8);font-size:11.5px}
.th-star{color:var(--gold);margin-left:3px;font-size:8px;vertical-align:middle}
.qtybox{display:flex;align-items:stretch;gap:2px;border:1.5px solid var(--ink8);border-radius:9px;
  background:var(--card);overflow:hidden;height:44px}
.qtybox .qbtn{border:none;background:var(--paper2);color:var(--ink8);font-size:15px;font-weight:700;
  min-width:32px;line-height:1;padding:0;flex:none;transition:background .12s ease}
.qtybox .qbtn:hover{background:var(--ink8);color:#fff}
.qtybox .qbtn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
table.items .qtybox .qty{width:100%;flex:1;min-width:0;border:none;border-radius:0;background:transparent;
  text-align:center;font-size:1.45rem;font-weight:700;font-family:var(--mono);color:var(--ink9);padding:0}
table.items .qtybox .qty:focus{box-shadow:none}
.qtybox .qty::-webkit-outer-spin-button,.qtybox .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qtybox .qty[type=number]{-moz-appearance:textfield;appearance:textfield}
/* ≥3 顆提示：歷史 95% 是 1 或 2 顆。只提醒，**不擋送出**——真的要刻 5 顆是合法的 */
.qwarn{font-size:10px;color:#8A5209;font-weight:700;text-align:center;margin-top:2px;line-height:1.3}
/* ≥3 顆：整格琥珀底，掃一眼就知道是哪一列數量比較多 */
table.items td.c-qty.many{background:var(--warn-l) !important;border-radius:8px}
table.items td.c-qty.many .qtybox{border-color:#8A5209}
/* 總顆數變動時彈一下（沿用原本金額變動的處理方式） */
.qd-total.tick{animation:qtyTick .4s ease}
@keyframes qtyTick{0%{transform:scale(1.14);color:#F3E2BC}100%{transform:scale(1)}}
.qd-total{display:inline-block}
table.items td.c-qty{padding-left:2px;padding-right:2px}
table.items td.c-ops{text-align:right;padding-right:2px;font-size:0}
table.items td.c-ops .rowbtn{font-size:12px;margin-left:2px}
.charcount{font-size:10.5px;color:var(--ink35);font-family:var(--mono);display:block;text-align:right}

/* 空狀態：獨立於表格之外，不再被 860px 的表格寬度切成殘句 */
.emptyrow{text-align:center;color:var(--ink4);padding:16px 10px;font-size:12.5px;
  border:1.5px dashed var(--line);border-radius:12px;margin-top:8px;line-height:1.9}

/* 只給讀屏用的文字（視覺上不佔位，但仍在無障礙樹裡） */
.sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 計價塢節點保留但不參與版面（見 index.html 的說明） */
.pricedock-cache{display:none !important}

/* ========== 數量塢（接手計價塢原本的位置） ========== */
.qtydock{position:sticky;bottom:10px;margin-top:12px;
  background:linear-gradient(135deg,#0F1A2E,#182743);color:#F6F4EE;border-radius:14px;
  padding:12px 18px;box-shadow:inset 0 1px 0 rgba(201,160,78,.30),0 10px 30px rgba(15,26,46,.35)}
.qd-main{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.qd-label,.qd-unit{font-size:12.5px;color:#C9CFDC}
.qd-total{font-family:var(--mono);font-size:34px;line-height:1;font-weight:700;color:var(--gold-m);
  transition:color .2s ease}
.qtydock.empty .qd-total{color:#6B7488}
.qd-break{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:8px;
  border-top:1px solid rgba(255,255,255,.15);padding-top:8px;font-size:12.5px;color:#C9CFDC}
.qd-part b{font-weight:400;color:#C9CFDC}
.qd-part i{font-family:var(--mono);font-style:normal;font-size:17px;font-weight:700;color:#F3E2BC;
  margin:0 1px}
.qd-plus{color:#8B93A5;font-size:12px}
.qd-none{color:#8B93A5}
.mobilebar .mb-qty{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--gold-m);line-height:1}
/* 記錄表預覽裡的顆數：縮小顯示時也要讀得到 */
.sheet .qn{font-weight:700;color:#8A2A1E}
.charcount.over{color:var(--warn);font-weight:700}
.addonbox{display:flex;flex-direction:column;gap:1px;font-size:11px;color:var(--ink4);white-space:nowrap}
.addonbox label{display:flex;gap:4px;align-items:center}
.addonbox input{width:auto}
.rowbtn{background:none;border:1px solid var(--line);border-radius:7px;color:var(--ink4);font-size:12px;padding:2px 6px}
.rowbtn:hover{border-color:var(--ink6);color:var(--ink6)}
.rowbtn.del:hover{border-color:var(--err);color:var(--err)}
.items-foot{display:flex;gap:14px;align-items:center;margin-top:10px;flex-wrap:wrap}
.ghostbtn{background:none;border:1.5px dashed var(--ink3);color:var(--ink4);border-radius:9px;padding:6px 14px;font-size:13px}
.ghostbtn:hover{border-color:var(--ink6);color:var(--ink6)}
.chkline{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ink4)}
.chkline input{width:auto}

.actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.actions .confirmchk{margin-right:auto;font-size:12.5px;color:var(--ink8);font-weight:700;cursor:pointer}
.actions .confirmchk input{width:16px;height:16px;accent-color:var(--ink8);cursor:pointer}
.actions .confirmchk input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* 送出前的逐字核對橫幅：沒勾就按送出時才展開，把「實際會刻出去的字」攤開來 */
.confirmbar{background:var(--warn-l);border:1.5px solid var(--warn);border-radius:var(--r);
  padding:11px 15px;margin-bottom:10px}
.confirmbar .cb-title{font-weight:700;color:#8A5209;font-size:13.5px;margin-bottom:6px}
.confirmbar .cb-why{font-size:12px;color:#8A5209;line-height:1.7;margin-bottom:8px}
.confirmbar .cb-sep{font-size:11px;color:var(--ink4);letter-spacing:.08em;margin:8px 0 4px;
  border-top:1px dashed rgba(180,105,14,.4);padding-top:6px}
.confirmbar .cb-line{display:flex;gap:10px;font-size:13px;line-height:1.8;flex-wrap:wrap}
.confirmbar .cb-k{color:var(--ink4);font-size:11.5px;min-width:104px;flex:none}
.confirmbar .cb-v{font-weight:700;color:var(--ink9);overflow-wrap:anywhere;flex:1;min-width:0}
.confirmbar .cb-v i{font-weight:400;color:var(--ink4);font-style:normal}
.confirmbar .cb-tip{font-size:11.5px;color:#8A5209;margin-top:8px}
.confirmbar .cb-qty{background:var(--ink9);color:#F6F4EE;border-radius:10px;padding:7px 12px;
  font-size:14px;font-weight:700;margin-bottom:9px;letter-spacing:.02em}
.confirmbar .cb-q{flex:none;margin-left:10px;font-family:var(--mono);font-size:13px;
  background:var(--ink9);color:var(--gold-m);border-radius:99px;padding:1px 9px}
.btn{border-radius:11px;padding:9px 18px;font-size:14px;font-weight:700;border:1px solid transparent;
  display:inline-flex;gap:9px;align-items:center;justify-content:center}
/* 主 CTA：白字金底只有 3.14:1。改成金底墨藍字 ＝ #0F1A2E on #B68A36 ≈ 6.4:1，
   金色仍然是主 CTA 的識別色，只是字讀得到了。 */
.btn.primary{background:var(--gold);color:var(--ink9);border-color:var(--gold-d);box-shadow:0 2px 0 var(--gold-d)}
.btn.primary:hover{background:var(--gold-m)}
.btn.primary kbd{background:rgba(15,26,46,.10);border-color:rgba(15,26,46,.28);color:var(--ink9)}
.btn.plain{background:var(--card);border-color:var(--line);color:var(--ink8)}
.btn.plain:hover{border-color:var(--ink6)}
.btn.danger{background:var(--card);border-color:var(--err);color:var(--err)}
.btn.danger:hover{background:var(--err);color:#fff}
.btn.sm{padding:5px 12px;font-size:12.5px;border-radius:9px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn kbd{opacity:.85}

/* 橫幅 */
.banner{display:none;border-radius:var(--r);padding:12px 16px;margin-bottom:12px;
  align-items:center;gap:14px;flex-wrap:wrap}
.banner.on{display:flex}
.banner.ok{background:var(--ok-l);border:1.5px solid var(--ok)}
.banner.ok .b-msg{font-weight:700;color:var(--ok)}
.banner button{border-radius:9px;padding:6px 14px;font-size:13px;border:1px solid var(--ok);
  background:#fff;color:var(--ok);font-weight:700}
.banner button:hover{background:var(--ok);color:#fff}
.remakebar{display:none;background:var(--warn-l);border:1.5px solid var(--warn);border-radius:var(--r);
  padding:9px 16px;margin-bottom:12px;font-size:13px;color:var(--warn)}
.remakebar.on{display:block}
.remakebar b{font-family:var(--mono)}
.errbar{display:none;background:var(--err-l);border:1.5px solid var(--err);color:var(--err);
  border-radius:var(--r);padding:10px 16px;margin-bottom:12px;font-size:13px;font-weight:700}
.errbar.on{display:block}

/* ========== 右欄：刻印記錄表 1:1 預覽 ========== */
/* 右欄放大（2026-08-08）：拿掉計價塢與單價欄之後這裡多出將近 70px，
   全部還給「太元實際會收到什麼」——字放大 1~2px，逐字核對才真的做得到。 */
.sheetwrap{position:sticky;top:70px}
.sheet{background:#FFFEFA;border:1px solid var(--ink3);border-radius:6px;padding:20px 22px 16px;
  box-shadow:var(--shadow);font-family:var(--serif);color:#1a1a1a}
.sheet-title{text-align:center;font-size:19px;font-weight:700;letter-spacing:.35em;margin-bottom:14px}
.sheet-top{display:grid;grid-template-columns:1fr 1.2fr;border:1.5px solid #333}
.sheet-kinds{border-right:1.5px solid #333;padding:8px 10px}
.sheet-kinds .kh,.sheet-note .kh{font-weight:700;margin-bottom:6px;font-size:14.5px}
.krow{display:flex;justify-content:space-between;font-size:14.5px;line-height:1.95}
.krow .box{font-family:var(--mono);letter-spacing:.05em}
.krow .box.v{color:var(--ink8);font-weight:700}
.sheet-note{padding:8px 12px}
.sheet-note .nline{font-size:14.5px;line-height:1.95;min-height:1.95em;overflow-wrap:anywhere}
.sheet-basic{display:grid;grid-template-columns:36px 116px 1fr;border:1.5px solid #333;border-top:none}
.sb-side{grid-row:1/6;writing-mode:vertical-rl;text-orientation:upright;display:flex;align-items:center;
  justify-content:center;font-weight:700;border-right:1.5px solid #333;letter-spacing:.4em;padding:8px 0;font-size:13px}
.sb-k{border-bottom:1px solid #777;border-right:1px solid #777;padding:6px 8px;font-size:13px}
.sb-v{border-bottom:1px solid #777;padding:6px 10px;font-size:14.5px;min-height:1.95em;overflow-wrap:anywhere}
.sb-v.mono{font-size:14px}
.sheet-basic .last{border-bottom:none}
.sheet-foot{margin-top:12px;font-size:11.5px;color:#333;display:flex;flex-direction:column;gap:2px}
.sheet-foot .f1{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sheet-foot .fdate{font-family:var(--mono)}

/* ========== 計價塢 ========== */
.pricedock{position:sticky;bottom:10px;margin-top:12px;background:var(--ink9);color:#F6F4EE;
  border-radius:14px;padding:11px 16px;box-shadow:0 10px 30px rgba(15,26,46,.35);cursor:pointer}
.pd-row{display:flex;align-items:baseline;gap:10px;justify-content:space-between;flex-wrap:wrap}
.pd-row .pd-label{font-size:12px;color:var(--ink3)}
.pd-total{font-family:var(--mono);font-size:24px;color:var(--gold-m);font-weight:700}
.pd-total.busy{opacity:.55}
.pd-hint{font-size:10.5px;color:#8B93A5}
.pd-break{display:none;border-top:1px solid rgba(255,255,255,.15);margin-top:9px;padding-top:8px}
.pricedock:hover .pd-break,.pricedock.open .pd-break{display:block}
.pd-break .bl{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:#C9CFDC;line-height:1.8}
.pd-break .bl .amt{font-family:var(--mono);color:#EBD8AE}
.pd-break .bl.sub{color:#8B93A5;padding-left:12px;font-size:11px}
.pd-warn{color:#F3C99A;font-size:11px;margin-top:6px}

/* 手機底部計價列＋預覽抽屜 */
.mobilebar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--ink9);
  color:#F6F4EE;padding:9px 14px;align-items:center;gap:12px;box-shadow:0 -8px 24px rgba(15,26,46,.3)}
.mobilebar .mb-total{font-family:var(--mono);font-size:19px;color:var(--gold-m);font-weight:700}
.mobilebar button{background:var(--gold);border:none;color:var(--ink9);border-radius:9px;padding:6px 13px;font-size:13px;font-weight:700}

/* ========== 訂單列表 ========== */
.filterbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.filterbar input[type=search]{width:220px}
table.olist{width:100%;border-collapse:collapse;min-width:1000px;background:var(--card)}
table.olist th{background:var(--paper2);font-size:11.5px;color:var(--ink4);text-align:left;
  padding:8px 10px;white-space:nowrap;border-bottom:1.5px solid var(--line)}
table.olist td{padding:7px 10px;border-bottom:1px solid var(--line-s);font-size:13px;vertical-align:middle}
table.olist tr:hover td{background:rgba(47,107,168,.045)}
table.olist td.num{text-align:right;white-space:nowrap}
table.olist .lnk{background:none;border:none;color:var(--ink6);font-family:var(--mono);
  font-size:13px;padding:0;text-decoration:underline;cursor:pointer}
.st{font-size:11.5px;border-radius:99px;padding:3px 10px;font-weight:700;border:1px solid transparent;appearance:none;cursor:pointer}
.st.draft{background:var(--paper2);color:var(--ink4)}
.st.sent{background:var(--info-l);color:var(--ink6)}
.st.delivered{background:var(--ok-l);color:var(--ok)}
.st.reconciled{background:var(--gold-l);color:var(--gold-t)}
.st.paid{background:var(--ink8);color:#fff}
.st.void{background:var(--paper2);color:var(--ink35);text-decoration:line-through}
.errbadge{font-size:11px;border-radius:99px;padding:2px 9px;font-weight:700;border:none}
.errbadge.none{background:none;border:1px dashed var(--ink3);color:var(--ink4);font-weight:400}
.errbadge.none:hover{border-color:var(--ink6);color:var(--ink6)}
.errbadge.ours{background:var(--err-l);color:var(--err)}
.errbadge.vendor{background:var(--warn-l);color:var(--warn)}
.errbadge.unclear{background:var(--paper2);color:var(--ink4)}
.remakelink{font-size:10.5px;color:var(--ink6);display:block;font-family:var(--mono);margin-top:2px}
.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:10px;font-size:12.5px;color:var(--ink4)}

/* ========== 訂單詳情 ========== */
.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;align-items:start}
.detail-grid>*{min-width:0}
.kv{display:grid;grid-template-columns:96px 1fr;gap:4px 10px;font-size:13px}
.kv dt{color:var(--ink4);font-size:12px}
.kv dd{overflow-wrap:anywhere}
.toolrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
table.dtl{width:100%;border-collapse:collapse;min-width:640px}
table.dtl th{background:var(--paper2);font-size:11.5px;color:var(--ink4);text-align:left;padding:6px 8px;white-space:nowrap}
table.dtl td{padding:6px 8px;border-bottom:1px solid var(--line-s);font-size:12.5px;vertical-align:top}
table.dtl td.num{text-align:right;white-space:nowrap}
.bkline{font-size:11px;color:var(--ink4);display:flex;justify-content:space-between;gap:10px}
.bkline .amt{font-family:var(--mono)}
.timeline{list-style:none;font-size:12.5px}
.timeline li{padding:6px 0 6px 14px;border-left:2px solid var(--line);position:relative}
.timeline li::before{content:"";position:absolute;left:-5px;top:12px;width:8px;height:8px;
  border-radius:99px;background:var(--gold)}
.timeline .t{font-family:var(--mono);font-size:11px;color:var(--ink4);display:block}
.attach{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.attach a{background:var(--paper2);border:1px solid var(--line);border-radius:9px;padding:5px 10px;
  font-size:11.5px;color:var(--ink6);text-decoration:none;overflow-wrap:anywhere}

/* ========== 對帳台 ========== */
.recon-top{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.recon-top>*{min-width:0}
.recon-top textarea{width:100%;height:132px;font-family:var(--mono);font-size:12.5px;line-height:1.7;resize:vertical}
.excl{font-size:11.5px;color:var(--warn);background:var(--warn-l);border-radius:8px;padding:5px 10px;margin-top:8px}
table.mini{width:100%;border-collapse:collapse;min-width:380px}
table.mini th{font-size:11px;color:var(--ink4);text-align:left;padding:3px 6px;border-bottom:1px solid var(--line)}
table.mini td{font-size:12.5px;padding:3px 6px;border-bottom:1px solid var(--line-s)}
table.mini td.num{text-align:right}
table.recon{width:100%;border-collapse:collapse;min-width:980px;background:var(--card)}
table.recon th{background:var(--paper2);font-size:11px;color:var(--ink4);padding:7px 8px;
  text-align:left;white-space:nowrap;border-bottom:1.5px solid var(--line)}
table.recon th.vh{background:#E8E2D2;color:var(--gold-t)}
table.recon td{padding:6px 8px;border-bottom:1px solid var(--line-s);font-size:12.5px;vertical-align:middle}
table.recon td.num{text-align:right;white-space:nowrap}
table.recon td.sep,table.recon th.sep{border-left:2px solid var(--line)}
tr.r-ok td{background:rgba(46,125,79,.05)}
tr.r-amt td{background:rgba(180,105,14,.07)}
tr.r-us td,tr.r-vd td{background:rgba(179,55,46,.05)}
.rst{font-size:11px;border-radius:99px;padding:2px 9px;font-weight:700;white-space:nowrap}
.rst.ok{background:var(--ok-l);color:var(--ok)}
.rst.amt{background:var(--warn-l);color:var(--warn)}
.rst.us,.rst.vd{background:var(--err-l);color:var(--err)}
.diffneg{color:var(--err);font-weight:700}
.totalsbar{position:sticky;bottom:10px;margin-top:12px;background:var(--ink9);color:#F6F4EE;
  border-radius:14px;padding:12px 18px;display:flex;gap:26px;align-items:baseline;flex-wrap:wrap;
  box-shadow:0 10px 30px rgba(15,26,46,.35)}
.totalsbar .tl{font-size:11.5px;color:var(--ink3)}
.totalsbar .tv{font-family:var(--mono);font-size:19px;color:#F6F4EE}
.totalsbar .tv.gold{color:var(--gold-m);font-weight:700}
.totalsbar .tv.red{color:#F3A29A;font-weight:700}
.totalsbar button{background:var(--gold);border:none;color:var(--ink9);font-weight:700;border-radius:9px;padding:7px 16px;font-size:13px}
.totalsbar button:hover{background:var(--gold-m)}

/* ========== 價目表／使用者 ========== */
table.price,table.users{width:100%;border-collapse:collapse;min-width:720px;background:var(--card)}
table.price th,table.users th{background:var(--paper2);font-size:11.5px;color:var(--ink4);
  text-align:left;padding:7px 10px;border-bottom:1.5px solid var(--line);white-space:nowrap}
table.price td,table.users td{padding:5px 10px;border-bottom:1px solid var(--line-s);font-size:13px}
table.price td input{width:82px;text-align:right;font-family:var(--mono)}
table.price td.num{text-align:right}
.pgroup td{background:var(--gold-l);color:var(--gold-t);font-weight:700;font-size:12px}
.srcbadge{font-size:10px;border-radius:99px;padding:1px 7px;background:var(--paper2);color:var(--ink4)}
.srcbadge.firm{background:var(--gold-l);color:var(--gold-t);font-weight:700}

/* ========== 彈窗 ========== */
.overlay{display:none;position:fixed;inset:0;background:rgba(15,26,46,.5);z-index:50;
  align-items:center;justify-content:center;padding:14px}
.overlay.on{display:flex}
.modal{background:var(--card);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);
  width:min(600px,100%);max-height:92vh;overflow-y:auto;padding:20px 22px}
.modal.wide{width:min(880px,100%)}
.modal h3{font-family:var(--serif);font-size:17px;color:var(--ink8);margin-bottom:4px}
.modal .msub{font-size:12px;color:var(--ink4);margin-bottom:14px;overflow-wrap:anywhere}
.modal .msub .mono{color:var(--ink8)}
.blamegrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.blame{border:1.5px solid var(--line);border-radius:12px;padding:10px;text-align:left;background:#fff}
.blame b{display:block;font-size:13.5px;margin-bottom:3px}
.blame small{font-size:10.5px;color:var(--ink4);line-height:1.4;display:block}
.blame.sel-ours{border-color:var(--err);background:var(--err-l)}
.blame.sel-vendor{border-color:var(--warn);background:var(--warn-l)}
.blame.sel-unclear{border-color:var(--ink4);background:var(--paper2)}
.modal label.flabel{font-size:11.5px;color:var(--ink4);display:block;margin:10px 0 4px}
.modal textarea{width:100%;height:64px;resize:vertical}
.modal input[type=text],.modal input[type=password],.modal select{width:100%}
.mfoot{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}

/* toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink9);color:#F6F4EE;border-radius:99px;padding:9px 22px;font-size:13px;
  opacity:0;transition:.25s;z-index:99;pointer-events:none;max-width:92vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%)}
#toast.err{background:var(--err)}
#toast .mono{color:var(--gold-m)}

/* ========== 登入頁 ========== */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(140deg,#0F1A2E,#1E3366 55%,#162B58)}
.logincard{background:var(--card);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.35);
  padding:30px 28px;width:min(400px,100%)}
.logincard .lbrand{font-family:var(--serif);font-size:21px;color:var(--ink8);font-weight:700}
.logincard .lsub{font-size:11.5px;color:var(--ink4);letter-spacing:.14em;margin-bottom:20px}
.logincard label{display:block;font-size:12px;color:var(--ink4);margin:12px 0 4px}
.logincard input{width:100%;padding:9px 11px;font-size:14px}
.logincard .btn{width:100%;margin-top:18px}
.logincard .lerr{display:none;background:var(--err-l);color:var(--err);border-radius:9px;
  padding:8px 11px;font-size:12.5px;margin-top:12px}
.logincard .lerr.on{display:block}
.logincard .lnote{font-size:11.5px;color:var(--ink35);margin-top:16px;line-height:1.6}

/* ========== RWD ========== */
@media (max-width:1080px){.work-grid{grid-template-columns:52fr 48fr}}
@media (max-width:960px){
  .work-grid{grid-template-columns:1fr}
  .sheetwrap{position:static}
  .recon-top{grid-template-columns:1fr}
  .blamegrid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .filterbar input[type=search]{width:100%}
}
@media (max-width:640px){
  main{padding:10px 8px 84px}
  .card{padding:11px 10px}
  .custgrid{grid-template-columns:1fr}
  .sheet{padding:12px 10px 10px}
  .sheet-title{font-size:14px;letter-spacing:.2em}
  .topbar{gap:8px;padding:8px 10px;position:static}
  .brand{font-size:15px}
  .topnav button{padding:6px 10px;font-size:13px}
  .deadline{font-size:11px}
  /* 手機：預覽降級為抽屜，底部只留合計＋看預覽 */
  .sheetwrap{display:none}
  .sheetwrap.drawer{display:block;position:fixed;inset:0;z-index:40;background:var(--paper);
    overflow-y:auto;padding:12px 10px 90px}
  .mobilebar{display:flex}
  .mobilebar.hide{display:none !important}   /* 只在工作台出現 */
  .actions .btn{flex:1}
  .actions .confirmchk{margin-right:0;width:100%}

  /* ── 明細表在手機轉成堆疊卡（DESIGN-V2 §8 承諾、原本沒實作）──
     390px 硬塞一張 560px 的表格只能橫捲；改成一列一張卡，
     每格用 ::before 帶出欄位名，不必記欄序也不必左右捲。 */
  table.items,table.items thead,table.items tbody,table.items tr,table.items td{display:block;width:auto}
  table.items{min-width:0}
  table.items thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.items tbody tr{border:1px solid var(--line);border-radius:12px;background:var(--card);
    padding:8px 70px 10px 10px;margin-bottom:8px;position:relative}
  table.items tbody tr:nth-child(even) td,table.items tbody tr:hover td{background:transparent}
  table.items td{border:none;padding:3px 0;display:flex;align-items:center;gap:8px}
  table.items td::before{content:attr(data-l);flex:none;width:74px;font-size:11px;color:var(--ink4);font-weight:700}
  table.items td.c-ops{position:absolute;top:6px;right:8px;padding:0;width:auto}
  table.items td.c-ops::before{content:none}
  .qtybox{height:48px}
  .qtybox .qbtn{min-width:44px;font-size:18px}
  table.items .qtybox .qty{font-size:24px}
  table.items td.c-qty{max-width:220px}
  table.items td:nth-child(2){flex-wrap:wrap}
  table.items td:nth-child(2) input{flex:1;min-width:120px}
  table.items .charcount{width:100%;text-align:right}

  /* 訂單列表收斂到 6 欄：單號／日期／公司／金額／狀態／錯誤註記 */
  table.olist th:nth-child(4), table.olist td:nth-child(4),
  table.olist th:nth-child(5), table.olist td:nth-child(5),
  table.olist th:nth-child(7), table.olist td:nth-child(7),
  table.olist th:nth-child(10),table.olist td:nth-child(10){display:none}
  table.olist{min-width:600px}
  /* toast 不要壓在底部合計列上 */
  #toast{bottom:76px}
}

/* =============================================================================
   V2.1 視覺升級層 — 「紙、印、鍵」三個主題
   原則：每個特效都要回答「它讓使用者更快或更有把握了嗎」。
   ① 紙：右欄預覽做成真正的紙（質感、懸浮、輕微 3D），剛改的欄位在紙上閃金——
        打字的人不用移視線核對，餘光就知道「改到了、改對格」。
   ② 印：明細直接畫出印面示意（朱紅、篆刻毛邊），一眼看得出這張單刻什麼。
   ③ 鍵：套組帶入、送出、金額變動都有立即的動態回饋，熟手不用停下來確認。
   效能：動畫一律 transform / opacity（僅小面積背景閃爍例外），皆為一次性、
        無常駐計時器；prefers-reduced-motion 一律關閉。
   ============================================================================= */

/* ---------- 通用：按鍵回饋與焦點環 ---------- */
button:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn{transition:transform .1s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}
.btn:active{transform:translateY(1px)}
.btn.primary:active{box-shadow:0 0 0 var(--gold-d)}
.rowbtn,.ghostbtn,.topnav button,.errbadge{transition:color .15s ease,background .15s ease,border-color .15s ease}

/* ---------- 頂欄：金色髮絲線＋截件緊迫感 ---------- */
.topbar{box-shadow:0 1px 0 rgba(182,138,54,.38),0 6px 20px rgba(15,26,46,.20)}
.deadline{transition:background .3s,border-color .3s}
.deadline.hot{background:rgba(182,138,54,.32);border-color:var(--gold-m);color:#F7E7C3}
.deadline.hot::before{content:"●";margin-right:6px;font-size:9px;color:#F3C99A;
  animation:deadlinePulse 1.8s ease-in-out infinite;display:inline-block}
.deadline.over{opacity:.8}
@keyframes deadlinePulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- 標題階層：頁題左金槓、卡片題金點 ---------- */
h2.pagetitle{padding-left:11px;border-left:3px solid var(--gold)}
.card h3::before{content:"";width:3px;height:13px;background:var(--gold);border-radius:2px;flex:none}

/* ---------- 套組快捷列：按下去「有按到」 ---------- */
.preset{transition:transform .1s ease,background .15s ease,color .15s ease,box-shadow .15s ease;position:relative}
.preset:active{transform:scale(.95)}
.preset.hit{animation:presetHit .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes presetHit{
  0%{transform:scale(.93);box-shadow:0 0 0 0 rgba(182,138,54,.55)}
  60%{transform:scale(1.03)}
  100%{transform:scale(1);box-shadow:0 0 0 12px rgba(182,138,54,0)}}

/* ---------- 明細表格：斑馬紋、hover、行的長出／收走 ---------- */
table.items td{transition:background .15s ease}
table.items tbody tr:nth-child(even) td{background:#FAF8F0}
table.items tbody tr:hover td{background:#F3F0E4}
table.items tbody tr.row-in{animation:rowIn .3s ease both}
table.items tbody tr.row-out{animation:rowOut .16s ease both;pointer-events:none}
@keyframes rowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes rowOut{to{opacity:0;transform:translateX(10px)}}

/* ---------- 右欄：把預覽做成真正的「紙」 ---------- */
.sheet{
  background:
    radial-gradient(140% 90% at 50% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 55%),
    repeating-linear-gradient(0deg,rgba(30,51,102,.013) 0 1px,transparent 1px 3px),
    linear-gradient(#FFFEF9,#FCFAF2);
  border:1px solid #CFC9B6;border-radius:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
    0 2px 5px rgba(15,26,46,.10),0 14px 34px rgba(15,26,46,.13),0 32px 70px rgba(15,26,46,.09);
}
@media (min-width:961px){
  .sheetwrap{perspective:1500px}
  .sheet{transform:rotateX(.9deg) rotateY(-.5deg);transform-origin:50% 18%;
    transition:transform .4s ease,box-shadow .4s ease;will-change:transform}
  .sheetwrap:hover .sheet{transform:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
      0 3px 7px rgba(15,26,46,.11),0 20px 44px rgba(15,26,46,.15),0 40px 84px rgba(15,26,46,.10)}
}
/* 剛改過的欄位在紙上閃金：打字的人餘光就能確認「改到了、改對格」 */
.sheet .chg{animation:fieldFlash 1s ease-out}
@keyframes fieldFlash{0%{background:var(--gold-l)}100%{background:transparent}}
/* A–E 勾選：勾上的 V 用印泥朱紅＋彈跳，掃一眼就知道這張單涵蓋哪幾類 */
.krow .box{display:inline-block}
.krow .box.v{color:var(--vermil)}
.krow .box.pop{animation:kindPop .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes kindPop{0%{transform:scale(1.5)}100%{transform:scale(1)}}

/* ---------- 印面示意托盤：朱紅＋篆刻毛邊，一眼看出這張單刻什麼 ---------- */
.sealtray{margin-top:10px;background:linear-gradient(#FBF9F1,#F3EFE2);
  border:1px solid var(--line);border-radius:12px;padding:9px 12px 11px}
.sealtray .st-label{font-size:10.5px;color:var(--ink4);letter-spacing:.08em;margin-bottom:8px}
.st-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;max-width:100%}
.sealbox{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;max-width:200px}
.st-qty{position:absolute;top:-7px;right:-9px;background:var(--gold);color:var(--ink9);
  font-family:var(--mono);font-size:10px;font-style:normal;font-weight:700;border-radius:99px;padding:1px 6px;z-index:2}
.st-cap{font-size:10.5px;color:var(--ink4);text-align:center;line-height:1.35;max-width:170px}
.seal{font-family:var(--serif);font-weight:700;color:var(--vermil);display:flex;
  align-items:center;justify-content:center;filter:url(#seal-rough);user-select:none;overflow:hidden}
.seal .v{writing-mode:vertical-rl;text-orientation:upright;line-height:1.18;letter-spacing:.05em}

/*
  印面分欄：字級與每欄字數由 JS 算好（見 app.js splitSealColumns / sealColumnsHtml），
  這裡只負責「右起直書」。row-reverse ＝ 第一欄落在右邊，才是印章的讀法。
  刻意不用 writing-mode 自動折行——那會把餘數全丟到最後一欄（10 字排成 4／4／2），
  而實際刻印是平均的 4／3／3。
*/
.seal-col{writing-mode:vertical-rl;text-orientation:upright;line-height:1;letter-spacing:0;
  display:block;flex:none}
.seal-sq{width:108px;height:108px;padding:6px;flex-direction:row-reverse;gap:0;justify-content:space-evenly;
  border:3px solid var(--vermil);border-radius:6px;box-shadow:inset 0 0 0 1px rgba(194,59,43,.45)}
/* 姓名小章（白文）：右欄＝姓且撐滿欄高、左欄＝名——姓約是名的 2 倍，跟實物一致 */
.seal-name{width:64px;height:64px;padding:4px;flex-direction:row-reverse;gap:0;
  background:linear-gradient(145deg,#C8402E,#A72E1F);
  color:#FFF6EC;border-radius:5px;box-shadow:inset 0 0 7px rgba(0,0,0,.20)}
.seal-inv{min-width:146px;max-width:196px;padding:7px 10px;border:2.5px solid var(--vermil);
  border-radius:4px;flex-direction:column;gap:1px;font-size:11.5px;line-height:1.4;text-align:center}
.seal-inv .mono{font-size:11px;letter-spacing:.03em}
.seal-cont{min-width:100px;max-width:196px;padding:6px 12px;border:2.5px solid currentColor;
  border-radius:10px;font-size:12.5px}
.seal-cont.ink-blue{color:#27488F}
.seal-cont.ink-black{color:#2B2B2B}
.seal-oval{min-width:72px;min-height:44px;padding:6px 14px;border:2.5px solid var(--vermil);
  border-radius:50%;font-size:12px;max-width:170px}
.seal-bar{min-width:130px;max-width:196px;padding:5px 11px;border:2.5px solid var(--vermil);
  border-radius:3px;font-size:12px}
.seal.ghost{border:1.5px dashed var(--ink3);border-radius:6px;color:var(--ink35);filter:none;
  font-weight:400;font-size:10.5px;font-family:var(--sans);padding:8px 10px}

/* ---------- 送出戳記：Ctrl+Enter 的那一下「蓋章」 ---------- */
.stampmark{position:absolute;left:50%;top:120px;z-index:5;pointer-events:none;
  transform:translateX(-50%) rotate(-8deg);
  font-family:var(--serif);font-weight:700;font-size:26px;letter-spacing:.3em;color:var(--vermil);
  border:4px solid var(--vermil);border-radius:8px;padding:8px 10px 8px 14px;
  box-shadow:inset 0 0 0 1.5px rgba(194,59,43,.5);filter:url(#seal-rough);opacity:.92;
  animation:stampIn .4s cubic-bezier(.2,1.5,.4,1),stampFade .5s ease 1.1s forwards}
@keyframes stampIn{0%{transform:translateX(-50%) rotate(-8deg) scale(2.1);opacity:0}
  100%{transform:translateX(-50%) rotate(-8deg) scale(1);opacity:.92}}
@keyframes stampFade{to{opacity:0}}

/* ---------- 計價塢：金額會「跳」給你看 ---------- */
.pricedock{background:linear-gradient(135deg,#0F1A2E,#182743);
  box-shadow:inset 0 1px 0 rgba(201,160,78,.30),0 10px 30px rgba(15,26,46,.35)}
.pd-total{display:inline-block}
.pd-total.tick{animation:totalTick .4s ease}
@keyframes totalTick{0%{transform:scale(1.06);color:#F3E2BC}100%{transform:scale(1)}}
.pricedock:hover .pd-break,.pricedock.open .pd-break{animation:breakIn .2s ease}
@keyframes breakIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pd-break .bl{border-bottom:1px dashed rgba(255,255,255,.07)}
.pd-break .bl.sub{border-bottom:none}
.mobilebar{box-shadow:inset 0 1px 0 rgba(201,160,78,.30),0 -8px 24px rgba(15,26,46,.3)}

/* ---------- 成功橫幅：滑入＋打勾彈跳 ---------- */
.banner.on{animation:bannerIn .35s cubic-bezier(.2,.9,.3,1.15)}
@keyframes bannerIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.b-check{display:inline-block;animation:checkPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes checkPop{0%{transform:scale(0) rotate(-30deg)}100%{transform:scale(1) rotate(0)}}

/* ---------- 訂單列表：斑馬紋＋hover（先斑馬後 hover，讓 hover 蓋得過） ---------- */
table.olist tbody tr:nth-child(even) td{background:#FAF8F0}
table.olist tbody tr:hover td{background:#EEF2F7}
table.olist td{transition:background .12s ease}
.st{transition:background .2s ease,color .2s ease}

/* ---------- 對帳台：三種狀態的左色條——顏色掃描整表，10 秒看出哪幾列有事 ---------- */
table.recon td{transition:background .15s ease}
tr.r-ok td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
tr.r-amt td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
tr.r-us td:first-child,tr.r-vd td:first-child{box-shadow:inset 3px 0 0 var(--err)}
tr.r-amt td{background:rgba(180,105,14,.09)}
table.recon tbody tr:hover td{background:rgba(15,26,46,.04)}
table.recon tr.rin{animation:reconRow .3s ease both}
@keyframes reconRow{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.totalsbar{background:linear-gradient(135deg,#0F1A2E,#182743);
  box-shadow:inset 0 1px 0 rgba(201,160,78,.30),0 10px 30px rgba(15,26,46,.35)}

/* ---------- 彈窗：進場動態＋責任卡的手感 ---------- */
.overlay.on{animation:overlayIn .18s ease}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.overlay.on .modal{animation:modalIn .22s cubic-bezier(.2,.9,.3,1.1)}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.blame{transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease;cursor:pointer}
.blame:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,26,46,.10)}
.blame:active{transform:none}

/* ---------- 徽章出現的小彈跳（勾稽結果「到了」） ---------- */
.badge.ok,.badge.warn,.badge.err,.badge.busy{animation:badgeIn .25s ease}
@keyframes badgeIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}

/* ---------- 登入頁：興達印 ---------- */
.logincard{position:relative}
.lseal{position:absolute;top:24px;right:26px;width:62px;height:62px;
  background:linear-gradient(145deg,#C8402E,#A72E1F);color:#FFF6EC;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;
  font-size:19px;line-height:1.15;letter-spacing:.05em;box-shadow:inset 0 0 8px rgba(0,0,0,.22);
  filter:url(#seal-rough);user-select:none;transform:rotate(-3deg)}
.lseal .v{writing-mode:vertical-rl;text-orientation:upright;max-height:54px}

/* ---------- 手機收斂：紙不傾斜、托盤照常換行 ---------- */
@media (max-width:640px){
  .sheet{transform:none}
  .stampmark{display:none}   /* 手機預覽收在抽屜裡，蓋章動畫沒有觀眾 */
}

/* ---------- prefers-reduced-motion：全部關掉或降到不可察覺 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .sheet,.sheetwrap:hover .sheet{transform:none !important}
  .stampmark{display:none}
  .deadline.hot::before{animation:none}
}