/* ===========================================================================
   興達會計師事務所 — 刻印訂單系統 V1（引導式精靈）樣式
   視覺來源：Vic-Agent\DESIGN.md（深藍 + 金）＋ docs/design-v1/prototype-v1.html
   規則：金色是點綴（面積 < 10%）；底色用紙白不用純白；數字一律等寬。
   本版強化：印章 CSS 實體外觀（朱紅方章／阴刻小章／發票章）、記錄表紙張質感、
   精靈進度條的完成／當前層次、金額變動的滾動回饋、卡片層級與陰影系統。
   所有動畫只用 transform / opacity，並尊重 prefers-reduced-motion。
   =========================================================================== */

:root{
  /* 墨藍 ink ramp */
  --ink-900:#0F1A2E; --ink-800:#1E3366; --ink-600:#2F6BA8; --ink-400:#615A50; --ink-300:#BFB9AB;
  /* 紙白 paper */
  --paper:#F6F4EE; --paper-2:#EDE9DE; --paper-3:#E3DDCC; --card:#FDFCF9;
  /* 點綴金 */
  --gold:#B68A36; --gold-hover:#C9A04E; --gold-dark:#8B6A28; --gold-text:#7A5520; --gold-light:#F7EDD8;
  /* 功能色 */
  --ok:#2E6B4F; --ok-light:#E6F0EA; --warn:#A04A1F; --warn-light:#F7EADF;
  --err:#8C2F39; --err-light:#F5E4E6; --info:#2F6BA8; --info-light:#E6EEF5;
  --purple:#6B5E8C; --purple-light:#ECE8F3;
  /* 印泥朱紅（印章專用，不做 UI 主色） */
  --seal:#B8382A; --seal-deep:#93281C; --seal-paper:#FFFBF2;
  --line:rgba(15,26,46,.12); --line-soft:rgba(15,26,46,.06);
  --radius:22px; --radius-s:12px;
  --sans:"Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif;
  --serif:"Noto Serif TC","PMingLiU",serif;
  /* 印章字：系統楷體最接近刻印感（Windows 標楷體 / macOS 標楷體） */
  --kai:"DFKai-SB","BiauKai","Kaiti TC","標楷體",var(--serif);
  /* 金額／統編／日期／單號一律等寬——會計事務所的品牌識別重點 */
  --mono:ui-monospace,"JetBrains Mono","Consolas","Courier New",monospace;
  --shadow:0 22px 66px rgba(15,23,42,.08);
  --shadow-lift:0 4px 14px rgba(15,26,46,.10),0 26px 70px rgba(15,23,42,.10);
}

*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;background:var(--paper);color:var(--ink-900);
  font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
figure{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
button{font-family:var(--sans);cursor:pointer}
a{color:var(--ink-600)}
input,select,textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink-900);background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-s);padding:.55rem .8rem;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
input.mono,textarea.mono,select.mono{font-family:var(--mono)}
input:hover,select:hover,textarea:hover{border-color:rgba(15,26,46,.24)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--ink-600);
  box-shadow:0 0 0 3px rgba(47,107,168,.18);
}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--ink-800)}
label{font-size:.875rem;font-weight:600;color:var(--ink-800);display:block;margin-bottom:.25rem}
.hint{font-size:.8rem;color:var(--ink-400);margin-top:.2rem}
.field{margin-bottom:1rem}
.field .ferr{display:none;font-size:.8rem;color:var(--err);margin-top:.2rem}
.field.invalid input,.field.invalid select{border-color:var(--err);box-shadow:0 0 0 3px rgba(140,47,57,.12)}
.field.invalid .ferr{display:block}
.row-flex{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- 進場動畫（transform / opacity 而已，不觸發 layout） ---------- */
/* rise＝小型回饋元素（錯誤條、擋下一步原因）可以帶淡入；
   slide-in＝大面積容器（步驟面板、勾稽卡）只位移不變透明——內容永遠可讀 */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes slide-in{from{transform:translateY(10px)}to{transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.5}}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes sheet-set{from{transform:rotateX(6deg) translateY(14px)}to{transform:rotateX(1.4deg)}}
@keyframes stamp-press{0%{transform:rotate(var(--rot,-1deg)) scale(1.18)}60%{transform:rotate(var(--rot,-1deg)) scale(.97)}100%{transform:rotate(var(--rot,-1deg)) scale(1)}}

/* ---------- App header ---------- */
.app-head{
  background:
    radial-gradient(720px 220px at 88% -60%,rgba(182,138,54,.22),transparent 65%),
    linear-gradient(135deg,#1E3366,#162B58);
  color:var(--paper);
  padding:.7rem 1.2rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  border-bottom:1px solid rgba(182,138,54,.35);
}
.app-head .brand{font-family:var(--serif);font-weight:700;font-size:1.1rem;letter-spacing:.04em;display:flex;align-items:center;gap:.55rem}
.app-head .brand b{color:var(--gold-hover)}
/* 品牌前的小朱印——「這是刻印章的系統」一眼可辨 */
.brand-stamp{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex:0 0 auto;
  background:linear-gradient(155deg,#C64431,#9E2D20);color:#FFF3E2;
  font-family:var(--kai);font-size:.82rem;font-weight:700;line-height:1;
  border-radius:5px;transform:rotate(-6deg);
  box-shadow:inset 0 0 0 1px rgba(255,246,232,.35),0 2px 5px rgba(0,0,0,.35);
}
.deadline{
  margin-left:auto;background:rgba(246,244,238,.08);border:1px solid rgba(246,244,238,.25);
  border-radius:999px;padding:.2rem .9rem;font-size:.82rem;display:flex;gap:.5rem;align-items:center;
}
.deadline .dot{width:8px;height:8px;border-radius:50%;background:#7FC79B;flex:0 0 auto;animation:pulse-dot 2.6s ease-in-out infinite}
.deadline.over .dot{background:var(--ink-300);animation:none}
.deadline b{font-family:var(--mono);font-weight:600;color:var(--gold-hover)}
.whoami{font-size:.82rem;color:rgba(246,244,238,.85);display:flex;gap:.5rem;align-items:center}
.whoami button{
  background:transparent;border:1px solid rgba(246,244,238,.35);color:var(--paper);
  border-radius:999px;padding:.15rem .7rem;font-size:.78rem;transition:background .15s ease;
}
.whoami button:hover{background:rgba(246,244,238,.14)}

/* ---------- 主導覽（4 個一級入口） ---------- */
.mainnav{
  background:var(--paper-2);border-bottom:1px solid var(--line);
  padding:.5rem 1.2rem;display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;
}
.mainnav a{
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:.3rem .95rem;font-size:.87rem;color:var(--ink-800);text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.mainnav a:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(15,26,46,.10)}
.mainnav a.on{background:var(--ink-800);color:var(--paper);border-color:var(--ink-800);box-shadow:inset 0 -2px 0 var(--gold)}
.mainnav a.cta{background:linear-gradient(180deg,#C9A04E,#B68A36);color:#fff;border-color:var(--gold-dark);font-weight:600;box-shadow:0 2px 0 var(--gold-dark)}
.mainnav a.cta:hover{background:linear-gradient(180deg,#D3AC5E,#C09340)}
.mainnav.wizard-mode a:not(.leave){display:none}

/* ---------- Layout ---------- */
main{max-width:74rem;margin:0 auto;padding:1.4rem 1.2rem 6rem}
h1.pg{font-family:var(--serif);font-size:1.6rem;margin:.2rem 0 1rem;position:relative;padding-left:.9rem}
h1.pg::before{
  content:"";position:absolute;left:0;top:.42rem;width:4px;height:1.25em;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),var(--ink-800));
}
h1.pg .sub{display:block;font-family:var(--sans);font-size:.85rem;color:var(--ink-400);font-weight:400;margin-top:.2rem}
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem 1.5rem}
.card+.card{margin-top:1.2rem}
.card h3{font-family:var(--serif);font-size:1rem;margin:0 0 .6rem;display:flex;align-items:center;gap:.45rem}
.card h3::before{content:"";width:7px;height:7px;flex:0 0 auto;border:2px solid var(--gold);border-radius:2px;transform:rotate(45deg)}
.btn{
  border:none;border-radius:999px;padding:.6rem 1.5rem;font-size:.95rem;font-weight:600;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:not(:disabled):hover{transform:translateY(-1px)}
.btn:not(:disabled):active{transform:translateY(0) scale(.98)}
.btn-primary{background:var(--ink-800);color:var(--paper);box-shadow:0 2px 8px rgba(30,51,102,.28)}
.btn-primary:not(:disabled):hover{box-shadow:0 5px 16px rgba(30,51,102,.32)}
.btn-primary:disabled{background:var(--ink-300);cursor:not-allowed;box-shadow:none}
.btn-gold{background:linear-gradient(180deg,#C9A04E,#B68A36);color:#fff;box-shadow:0 2px 0 var(--gold-dark),0 4px 12px rgba(139,106,40,.30)}
.btn-gold:not(:disabled):hover{background:linear-gradient(180deg,#D3AC5E,#C09340)}
.btn-gold:disabled{background:var(--ink-300);box-shadow:none;cursor:not-allowed}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink-800)}
.btn-ghost:not(:disabled):hover{background:var(--paper-2)}
.btn-danger{background:transparent;border:1px solid var(--err);color:var(--err)}
.btn-danger:not(:disabled):hover{background:var(--err-light)}
.btn-sm{padding:.3rem .9rem;font-size:.85rem}
.muted{color:var(--ink-400)}
.empty{text-align:center;color:var(--ink-400);padding:2.4rem 1rem}
.loading-note{color:var(--ink-400);font-size:.9rem;padding:1.4rem 0}

/* 全域錯誤條（API 回的中文訊息原樣顯示，不改寫） */
.errbar{
  background:var(--err-light);border:1px solid rgba(140,47,57,.35);color:var(--err);
  border-radius:var(--radius-s);padding:.65rem 1rem;font-size:.9rem;margin-bottom:1rem;
  display:flex;gap:.6rem;align-items:flex-start;animation:rise .3s ease both;
}
.errbar b{flex:0 0 auto}
.errbar .x{margin-left:auto;background:none;border:none;color:var(--err);font-size:1rem;line-height:1}

/* ---------- 登入頁 ---------- */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  background:
    radial-gradient(900px 480px at 82% -12%,rgba(182,138,54,.16),transparent 62%),
    radial-gradient(700px 420px at -8% 108%,rgba(47,107,168,.18),transparent 60%),
    linear-gradient(140deg,#0F1A2E 0%,#1E3366 55%,#162B58 100%);
}
.login-card{
  background:var(--card);border-radius:var(--radius);box-shadow:0 26px 70px rgba(15,23,42,.4),0 4px 16px rgba(15,23,42,.28);
  padding:2.2rem 2rem;width:100%;max-width:26rem;
  border-top:3px solid var(--gold);animation:pop .4s ease both;
}
.lhead{display:flex;gap:1rem;align-items:center;margin-bottom:1.5rem}
/* 登入頁的興達朱印：系統身份的一枚章 */
.lstamp{
  width:56px;height:56px;flex:0 0 auto;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,#C64431,#9E2D20);color:#FFF6E8;
  border-radius:9px;transform:rotate(-4deg);
  box-shadow:inset 0 0 0 2px rgba(255,246,232,.4),inset 0 0 10px rgba(60,8,4,.35),0 4px 10px rgba(15,26,46,.30);
}
.lstamp span{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--kai);font-weight:700;font-size:1.28rem;line-height:1;letter-spacing:.14em}
.lstamp::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(7px 5px at 20% 24%,rgba(255,251,242,.42),transparent 70%),
    radial-gradient(6px 7px at 76% 66%,rgba(255,251,242,.36),transparent 70%),
    radial-gradient(5px 4px at 46% 88%,rgba(255,251,242,.30),transparent 70%);
}
.login-card .lbrand{font-family:var(--serif);font-size:1.25rem;color:var(--ink-800);font-weight:700}
.login-card .lsub{font-size:.85rem;color:var(--ink-400);margin:.15rem 0 0}
.login-card .btn{width:100%;margin-top:.4rem}
.login-foot{font-size:.75rem;color:var(--ink-300);text-align:center;margin-top:1.2rem;line-height:1.5}

/* ---------- 儀表板 ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.stat{
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1rem 1.2rem;box-shadow:var(--shadow);position:relative;overflow:hidden;
  animation:rise .3s ease both;
}
.stat::before{content:"";position:absolute;left:1.1rem;right:55%;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--gold),transparent)}
.stat:nth-child(2){animation-delay:.04s}
.stat:nth-child(3){animation-delay:.08s}
.stat:nth-child(4){animation-delay:.12s}
.stat:nth-child(5){animation-delay:.16s}
.stat .k{font-size:.8rem;color:var(--ink-400)}
.stat .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.7rem;font-weight:600;color:var(--ink-800);line-height:1.25}
.stat .v.gold{color:var(--gold-text)}
.stat .d{font-size:.78rem;color:var(--ink-400)}
.stat.alert{border-color:rgba(160,74,31,.35);background:var(--warn-light)}
.stat.alert::before{background:linear-gradient(90deg,var(--warn),transparent)}
.stat.alert .v{color:var(--warn)}
.quick{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}

/* ---------- Wizard ---------- */
.wgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.4rem;align-items:start}
.wgrid>*{min-width:0}

/* 進度條：已完成（綠勾、可點跳回）→ 當前（墨藍膏藥＋金圈數字）→ 未達（灰、不可點）
   步與步之間的連接線隨進度亮起，走到哪一眼可見 */
.stepper{display:flex;align-items:center;margin-bottom:1.3rem;flex-wrap:wrap;row-gap:.45rem;max-width:100%}
.stp{
  display:flex;align-items:center;gap:.45rem;padding:.3rem .8rem .3rem .4rem;border-radius:999px;
  font-size:.85rem;color:var(--ink-300);border:none;background:transparent;position:relative;
  transition:color .2s ease,background .2s ease;
}
.stp+.stp{margin-left:26px}
.stp+.stp::after{
  content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);
  width:22px;height:2px;border-radius:1px;background:var(--line);
}
.stp.done+ .stp::after,.stp.done+.stp.active::after{background:var(--ok)}
.stp .n{
  width:27px;height:27px;border-radius:50%;background:var(--paper-3);color:var(--ink-400);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.8rem;flex:0 0 auto;
  transition:background .2s ease,box-shadow .2s ease;
}
.stp.active{background:var(--ink-800);color:var(--paper);box-shadow:0 3px 10px rgba(30,51,102,.30)}
.stp.active .n{background:var(--gold);color:#fff;box-shadow:0 0 0 3px rgba(182,138,54,.25)}
.stp.done{color:var(--ink-800);cursor:pointer}
.stp.done .n{background:var(--ok);color:#fff}
.stp.done:hover{background:var(--ok-light)}

.wstep{animation:slide-in .28s ease both}
.wstep h2{font-family:var(--serif);font-size:1.3rem;margin:0 0 .3rem}
.wstep .sub{color:var(--ink-400);font-size:.9rem;margin-bottom:1.1rem}
.wnav{display:flex;gap:.7rem;align-items:center;margin-top:1.4rem;flex-wrap:wrap}
.wnav .spacer{flex:1}
.why{
  background:var(--warn-light);border:1px solid rgba(160,74,31,.3);border-left:4px solid var(--warn);
  border-radius:var(--radius-s);padding:.6rem 1rem;font-size:.85rem;color:var(--warn);margin-top:.8rem;
  animation:rise .25s ease both;
}
.why ul{margin:.2rem 0 0 1.1rem;padding:0}
.reprint-banner{
  background:var(--purple-light);border:1px solid var(--purple);border-left:4px solid var(--purple);color:var(--purple);
  border-radius:var(--radius-s);padding:.6rem 1rem;font-size:.88rem;margin-bottom:1rem;animation:rise .3s ease both;
}

/* 情境卡：左側迷你印面圖示＝「這個情境會刻出什麼」的視覺答案 */
.scen{display:grid;gap:.9rem}
.scen-card{
  border:2px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;background:var(--card);
  cursor:pointer;position:relative;display:flex;gap:1rem;align-items:flex-start;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.scen-card:hover{border-color:var(--ink-600);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.scen-card.sel{border-color:var(--gold);background:var(--gold-light);box-shadow:0 4px 14px rgba(139,106,40,.16)}
.scen-card.sel::after{
  content:"✓";position:absolute;top:-11px;right:14px;width:24px;height:24px;border-radius:50%;
  background:var(--gold);color:#fff;font-size:.85rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(139,106,40,.4);
}
.scen-tx{flex:1;min-width:0}
.scen-card .t{font-weight:700;font-size:1.02rem;color:var(--ink-800)}
.scen-card .d{font-size:.85rem;color:var(--ink-400)}
.scen-card .stat-chip{display:inline-block;font-size:.75rem;background:var(--paper-2);border-radius:999px;padding:.05rem .6rem;color:var(--ink-400);margin-top:.35rem;font-family:var(--mono)}
.scen-card.sel .stat-chip{background:#fff}
.scen-ic{display:flex;gap:.35rem;align-items:flex-end;flex:0 0 auto;padding-top:.15rem}
.mini-stamp{
  display:flex;align-items:center;justify-content:center;font-family:var(--kai);font-weight:700;line-height:1;
  color:var(--seal);border:2px solid currentColor;border-radius:5px;background:var(--seal-paper);
  transform:rotate(-3deg);
}
.mini-stamp.ms-outline{width:36px;height:36px;font-size:1rem}
.mini-stamp.ms-solid{width:26px;height:26px;font-size:.8rem;background:linear-gradient(155deg,#C64431,#9E2D20);color:#FFF6E8;border-color:#8E2517;transform:rotate(3deg)}
.mini-stamp.ms-wide{width:52px;height:30px;font-size:.72rem;letter-spacing:.1em;border-radius:6px;box-shadow:inset 0 0 0 2px var(--seal-paper),inset 0 0 0 3px currentColor}
.mini-stamp.ms-dash{width:36px;height:36px;font-size:.72rem;border-style:dashed;color:var(--ink-400);background:var(--paper-2)}
.subopts{display:none;margin-top:.7rem;gap:.4rem;flex-wrap:wrap}
.scen-card.sel .subopts{display:flex}
.subopt{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:.25rem .8rem;font-size:.85rem;color:var(--ink-800);transition:background .15s ease}
.subopt:hover{background:var(--paper-2)}
.subopt.sel{background:var(--ink-800);color:var(--paper);border-color:var(--ink-800)}

/* GCIS 勾稽：三態（查詢中／通過／不符）用顏色＋動態進場講清楚 */
.gcis{border-radius:var(--radius);padding:1.1rem 1.3rem;border:1px solid var(--line);margin-bottom:1rem;animation:slide-in .3s ease both;position:relative}
.gcis.loading{background:var(--info-light);border-color:rgba(47,107,168,.3)}
.gcis.ok{background:var(--ok-light);border-color:rgba(46,107,79,.35)}
/* 通過時蓋一枚「核對相符」朱印——機器驗證的視覺具象（pseudo 內容不進 DOM 文字） */
.gcis.ok::before{
  content:"核對相符";position:absolute;top:.9rem;right:1rem;z-index:1;
  color:var(--seal);border:2px solid currentColor;border-radius:8px;
  padding:.3rem .45rem;font-family:var(--kai);font-weight:700;font-size:.88rem;
  letter-spacing:.18em;line-height:1;transform:rotate(-8deg);opacity:.85;
  background:
    radial-gradient(6px 4px at 24% 30%,var(--ok-light),transparent 70%),
    radial-gradient(5px 5px at 70% 72%,var(--ok-light),transparent 70%);
  animation:stamp-press .5s ease .2s both;--rot:-8deg;
}
.gcis.warn{background:var(--warn-light);border-color:rgba(160,74,31,.35)}
.gcis.bad{background:var(--err-light);border-color:rgba(140,47,57,.35)}
.gcis.skip{background:var(--paper-2)}
.gcis .g-title{font-weight:700;display:flex;align-items:center;gap:.6rem;font-size:1.02rem}
.gcis.ok .g-title{color:var(--ok)}
.gcis.warn .g-title{color:var(--warn)}
.gcis.bad .g-title{color:var(--err)}
.spin{width:18px;height:18px;border:3px solid rgba(47,107,168,.25);border-top-color:var(--info);border-radius:50%;animation:sp 1s linear infinite;flex:0 0 auto}
.gtbl{width:100%;border-collapse:collapse;margin-top:.8rem;font-size:.88rem}
.gtbl th,.gtbl td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
.gtbl th{font-size:.76rem;color:var(--ink-400);font-weight:600}
.gtbl td.lv-match{color:var(--ok);font-weight:600}
.gtbl td.lv-extended,.gtbl td.lv-truncated{background:var(--warn-light);color:var(--warn);font-weight:600}
.gtbl td.lv-mismatch{background:#F9D9DD;color:var(--err);font-weight:700}
.gtbl td.lv-unknown{color:var(--ink-400)}
.gtbl .lvmsg{display:block;font-size:.76rem;font-weight:400;margin-top:.15rem}
.ackbox{margin-top:.9rem;background:#fff;border-radius:var(--radius-s);padding:.7rem .9rem;font-size:.9rem;box-shadow:0 1px 4px rgba(15,26,46,.06)}
.ackbox label{display:flex;gap:.5rem;align-items:flex-start;font-weight:400;font-size:.9rem;color:var(--ink-900);margin:0}
.ackbox input[type=checkbox]{margin-top:.35rem;flex:0 0 auto}
/* 誠實區塊：查不到就說查不到，不可染綠 */
.unverifiable{
  background:var(--paper-2);border:1px dashed var(--ink-400);border-left:4px solid var(--warn);border-radius:var(--radius-s);
  padding:.8rem 1rem;font-size:.88rem;margin-top:.8rem;
}
.unverifiable b{color:var(--warn)}

/* ---------- 品項卡＋印面預覽 ---------- */
/* 品項卡不做進場動畫：計價每次重算都會重繪卡片，動畫會變成閃爍 */
.item-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;margin-bottom:.9rem;background:var(--card);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.item-card:hover{border-color:rgba(15,26,46,.22);box-shadow:0 4px 14px rgba(15,26,46,.07)}
.item-card .ih{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem;flex-wrap:wrap}
.item-card .ih .nm{font-weight:700;color:var(--ink-800)}
.item-card .ih .rm{margin-left:auto;background:none;border:none;color:var(--ink-400);font-size:.85rem;text-decoration:underline}
.item-card .ih .rm:hover{color:var(--err)}
.item-body{display:flex;gap:1.1rem;align-items:flex-start}
.item-main{flex:1;min-width:0}
.item-stamp{flex:0 0 auto;padding-top:.3rem}
.igrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}
.qty{display:flex;align-items:center;gap:.4rem}
.qty button{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  font-size:1.1rem;line-height:1;flex:0 0 auto;transition:background .12s ease,transform .12s ease;
}
.qty button:hover{background:var(--paper-2)}
.qty button:active{transform:scale(.92)}
.qty .qv{font-family:var(--mono);min-width:2ch;text-align:center;font-weight:600}
.chks{display:flex;gap:1rem;margin-top:.6rem;font-size:.9rem;flex-wrap:wrap}
.chks label{display:flex;gap:.35rem;align-items:center;font-weight:400;margin:0}
.fontsame{background:var(--gold-light);border:1px solid var(--gold);border-radius:var(--radius-s);padding:.55rem .9rem;font-size:.9rem;display:flex;gap:.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.addbar{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── 印章實體外觀（純 CSS，無外部資源）────────────────────────
   大章＝朱紅陽刻方章（紅框紅字、直行右起）；小章＝阴刻（紅底紙白字）；
   發票章＝雙框橫式；橫條章＝長條。印面直接排「刻印文字」，
   明細一眼看得出「這張單刻出來長什麼樣」。 */
.stamp-box{display:flex;flex-direction:column;align-items:center;gap:.35rem;flex:0 0 auto}
.stamp{
  position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:var(--seal);font-family:var(--kai);font-weight:700;line-height:1;
  background:var(--seal-paper);
  border:3px solid currentColor;border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(255,251,242,.65),inset 0 0 9px rgba(147,40,28,.20),0 2px 7px rgba(15,26,46,.14);
  transform:rotate(var(--rot,-1deg));
  animation:stamp-press .35s ease both;
}
/* 印泥沾不勻的斑駁——用紙色的柔點「吃掉」局部紅，蓋印的壓痕感 */
.stamp::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(7px 5px at 16% 22%,rgba(255,251,242,.5),transparent 70%),
    radial-gradient(5px 7px at 74% 62%,rgba(255,251,242,.42),transparent 70%),
    radial-gradient(8px 5px at 38% 88%,rgba(255,251,242,.38),transparent 70%),
    radial-gradient(4px 4px at 88% 16%,rgba(255,251,242,.45),transparent 70%);
}
.stamp .sg{writing-mode:vertical-rl;text-orientation:upright;line-height:1.14;letter-spacing:1px;display:block}

/* 姓名章：姓佔右欄、名排左欄（黃森信 → 右「黃」／左「森信」）。
   用明確的兩欄而不是讓 vertical-rl 自動折行——自動折行 3 個字會變成「黃森｜信」。
   row-reverse 讓先寫的姓落在右邊，符合印面右起的讀法。 */
.nm-grid{display:flex;flex-direction:row-reverse;align-items:stretch;justify-content:center;gap:.06em}
.nm-col{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;line-height:1.05}
.nm-col span{display:block}
.stamp-name{
  background:linear-gradient(160deg,#C64431,#A22C1D);color:#FFF6E8;border-color:#8E2517;
  box-shadow:inset 0 0 0 1px rgba(255,246,232,.35),inset 0 0 10px rgba(60,8,4,.30),0 2px 7px rgba(15,26,46,.16);
}
.stamp-name::after{
  background:
    radial-gradient(6px 4px at 20% 26%,rgba(255,246,232,.28),transparent 70%),
    radial-gradient(5px 6px at 72% 68%,rgba(255,246,232,.24),transparent 70%);
}
.stamp-round{border-radius:50%}
.stamp-wide{
  flex-direction:column;gap:2px;min-width:120px;max-width:176px;padding:8px 10px;
  border-width:2px;border-radius:8px;
  box-shadow:inset 0 0 0 2px var(--seal-paper),inset 0 0 0 3px currentColor,0 2px 7px rgba(15,26,46,.14);
}
.stamp-wide .il{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.08em;text-align:center}
.stamp-bar{height:30px;min-width:110px;max-width:190px;padding:0 10px;border-width:2px;border-radius:5px;white-space:nowrap;letter-spacing:.12em}
.stamp-empty{
  width:76px;height:76px;color:var(--ink-300);border:2px dashed var(--ink-300);background:var(--paper-2);
  font-family:var(--sans);font-weight:400;font-size:.75rem;text-align:center;line-height:1.4;box-shadow:none;animation:none;
}
.stamp-empty::after{content:none}
.stamp-cap{font-size:.72rem;color:var(--ink-400);text-align:center;line-height:1.35;max-width:130px}
.stamp-strip{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-end;padding:.7rem .2rem .4rem}
.stamp-note{margin:.1rem 0 .9rem}

/* 即時計價側欄 */
.aside{position:sticky;top:1rem}
.psum{
  background:
    radial-gradient(420px 160px at 90% -20%,rgba(182,138,54,.20),transparent 65%),
    var(--ink-900);
  color:var(--paper);border-radius:var(--radius);padding:1.2rem 1.3rem;
  border:1px solid rgba(182,138,54,.28);box-shadow:0 14px 40px rgba(15,26,46,.22);
}
.psum h3{margin:0 0 .8rem;font-family:var(--serif);font-size:1rem;color:var(--gold-hover);letter-spacing:.08em}
.pline{margin-bottom:.7rem;border-bottom:1px solid rgba(246,244,238,.12);padding-bottom:.55rem}
.pline .pn{font-size:.87rem}
.pline .pf{font-size:.75rem;color:var(--ink-300);font-family:var(--mono);line-height:1.5}
.pline .pv{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;font-size:.95rem}
.pline.pending .pv{color:var(--gold-hover);font-size:.82rem}
.ptot{display:flex;align-items:baseline;margin-top:.9rem;gap:.5rem}
.ptot .l{font-size:.9rem}
.ptot .v{margin-left:auto;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.45rem;color:var(--gold-hover);font-weight:600;display:inline-block;transform-origin:right center}
.ptot .v.bump{animation:bump .45s ease}
.pnote{font-size:.75rem;color:var(--ink-300);margin-top:.5rem}
.asum{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:1rem 1.2rem;margin-top:1rem;font-size:.85rem;color:var(--ink-400)}
.asum b{color:var(--ink-800)}

/* ── 1:1 記錄表版式：一張真的躺在桌上的紙 ─────────────────────
   容器＝深一階的桌面；紙張＝暖白＋纖維紋理＋層疊陰影＋輕微 3D 前傾，
   滑鼠移上去攤平方便逐字核對。內容結構與 Word/PDF 完全一致，不動。 */
.sheet-wrap{overflow-x:auto;background:linear-gradient(165deg,var(--paper-2),var(--paper-3));border-radius:var(--radius);padding:1.6rem 1.2rem;perspective:1100px}
.sheet{
  background-color:#FFFEF8;
  background-image:
    linear-gradient(0deg,rgba(46,38,18,.018) 1px,transparent 1px),
    radial-gradient(900px 380px at 18% -8%,rgba(182,138,54,.05),transparent 60%);
  background-size:100% 3px,auto;
  color:#000;font-family:var(--serif);width:100%;min-width:520px;max-width:680px;margin:0 auto;padding:2rem 2.2rem;
  box-shadow:
    0 1px 2px rgba(15,26,46,.14),
    0 10px 24px rgba(15,26,46,.16),
    0 30px 60px rgba(15,26,46,.13);
  transform:rotateX(1.4deg);transform-origin:top center;
  transition:transform .35s ease,box-shadow .35s ease;
  animation:sheet-set .5s ease backwards;
}
.sheet-wrap:hover .sheet{transform:rotateX(0);box-shadow:0 1px 2px rgba(15,26,46,.12),0 14px 30px rgba(15,26,46,.18),0 36px 72px rgba(15,26,46,.14)}

/* 精簡版：給詳情頁右欄用。
   右欄實際可用寬度約 450px，但 .sheet 的 min-width 是 520px —— 直接放會被裁掉右半邊
   （表格右欄、日期、標題全看不到）。這裡讓它等比縮小重排，而不是硬撐後切掉。
   要逐字校對請下載 PDF；這裡只是「看一眼確認是哪張單」。 */
.sheet-wrap--compact{padding:1.1rem .85rem}
.sheet-wrap--compact .sheet{min-width:0;max-width:100%;padding:1.15rem 1.05rem}
.sheet-wrap--compact .sheet-title{font-size:.98rem;letter-spacing:.18em;margin-bottom:.7rem}
.sheet-wrap--compact .stbl{font-size:.74rem}
.sheet-wrap--compact .stbl td{padding:.3rem .4rem}
.sheet-wrap--compact .s-box{width:1.9em;height:1.25em}
.sheet-wrap--compact .s-vert{width:1.6em}
.sheet-wrap--compact .s-foot{font-size:.7rem}
.sheet-title{text-align:center;font-size:1.28rem;font-weight:700;letter-spacing:.32em;margin-bottom:1rem}
.stbl{width:100%;border-collapse:collapse;font-size:.94rem}
.stbl td{border:1.5px solid #000;padding:.5rem .7rem;vertical-align:top}
.s-line{display:flex;align-items:center;gap:.4rem;margin:.2rem 0}
.s-box{display:inline-flex;width:2.2em;height:1.4em;border:1.5px solid #000;align-items:center;justify-content:center;font-weight:700;font-family:var(--mono)}
.s-free div{margin:.15rem 0}
.s-vert{width:2.2em;text-align:center;font-weight:700}
.s-lab{width:7.5em;font-weight:600}
.s-val{font-family:var(--mono);font-size:.94rem}
.s-foot{display:flex;justify-content:space-between;font-size:.84rem;margin-top:.9rem;gap:1rem;flex-wrap:wrap}

/* ---------- 訂單列表 ---------- */
.filters{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1rem}
.filters .f{min-width:128px;flex:0 1 auto;margin:0}
.filters .f input,.filters .f select{padding:.4rem .7rem;font-size:.9rem}
.filters .fw{flex:1 1 180px}
.tbl-scroll{overflow-x:auto}
.otbl{width:100%;border-collapse:collapse;font-size:.9rem}
.otbl th{text-align:left;font-size:.76rem;color:var(--ink-400);font-weight:600;letter-spacing:.03em;padding:.5rem .6rem;border-bottom:2px solid var(--line);white-space:nowrap}
.otbl td{padding:.6rem .6rem;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.otbl tr.row{cursor:pointer;transition:background .12s ease}
.otbl tr.row:hover{background:var(--gold-light);box-shadow:inset 3px 0 0 var(--gold)}
.otbl .amt{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.otbl .idc{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.free-strike{text-decoration:line-through;color:var(--ink-300)}
.free-tag{font-size:.7rem;color:var(--err);display:block}
.badge{display:inline-block;font-size:.74rem;border-radius:999px;padding:.08rem .6rem;white-space:nowrap;font-weight:600;border:none}
.b-draft,.b-sent,.b-delivered,.b-reconciled,.b-paid,.b-void{padding-left:.5rem}
.b-draft::before,.b-sent::before,.b-delivered::before,.b-reconciled::before,.b-paid::before,.b-void::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75;
  margin-right:.32rem;vertical-align:.08em;
}
.b-draft{background:var(--paper-3);color:var(--ink-400)}
.b-sent{background:var(--info-light);color:var(--info)}
.b-delivered{background:var(--ok-light);color:var(--ok)}
.b-reconciled{background:var(--gold-light);color:var(--gold-text);border:1px solid var(--gold)}
.b-paid{background:var(--ink-800);color:var(--paper)}
.b-void{background:var(--paper-3);color:var(--ink-300);text-decoration:line-through}
.b-ours{background:var(--warn-light);color:var(--warn)}
.b-vendor{background:var(--err-light);color:var(--err)}
.b-unclear{background:var(--purple-light);color:var(--purple)}
.b-relink{background:var(--paper-2);color:var(--ink-600);border:1px dashed var(--ink-600);cursor:pointer}
.b-neutral{background:var(--paper-3);color:var(--ink-400)}
.b-warnflag{background:var(--warn-light);color:var(--warn)}
.pager{display:flex;gap:.6rem;align-items:center;justify-content:flex-end;margin-top:.9rem;font-size:.85rem}
.pager .mono{color:var(--ink-400)}

/* ---------- 訂單詳情 ---------- */
.dgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.4rem;align-items:start}
.dgrid>*{min-width:0}
.kv{display:grid;grid-template-columns:7em minmax(0,1fr);gap:.3rem .8rem;font-size:.92rem}
.kv .k{color:var(--ink-400);font-size:.83rem}
.kv .v{overflow-wrap:anywhere}
.timeline{list-style:none;margin:0;padding:0;font-size:.86rem}
.timeline li{padding:.35rem 0 .35rem 1.4rem;position:relative;border-left:2px solid var(--line);margin-left:.4rem}
.timeline li::before{content:"";position:absolute;left:-6px;top:.75rem;width:10px;height:10px;border-radius:50%;background:var(--ink-300);transition:box-shadow .2s ease}
.timeline li.now::before{background:var(--gold);box-shadow:0 0 0 4px rgba(182,138,54,.22)}
.timeline .ts{font-family:var(--mono);font-size:.74rem;color:var(--ink-400);display:block}
.errbox{background:var(--err-light);border:1px solid rgba(140,47,57,.3);border-left:4px solid var(--err);border-radius:var(--radius);padding:1rem 1.2rem;margin-top:1rem}
.errbox h4{margin:0 0 .4rem;color:var(--err);font-size:.95rem}
.evi{display:flex;gap:.6rem;margin-top:.6rem;flex-wrap:wrap}
.evi a{
  width:100px;min-height:64px;border-radius:8px;background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:.62rem;color:var(--ink-400);text-align:center;padding:.3rem;text-decoration:none;overflow-wrap:anywhere;
  transition:transform .15s ease,box-shadow .15s ease;
}
.evi a:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(15,26,46,.12)}
.actbar{display:flex;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}

/* ---------- 對帳 ---------- */
.rrow{display:flex;align-items:center;gap:.8rem;padding:.7rem .4rem;border-bottom:1px solid var(--line-soft);flex-wrap:wrap;transition:background .15s ease}
.rrow .ri{flex:1;min-width:180px}
.rrow .ra{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.rrow.excl{opacity:.7;background:var(--paper-2);border-radius:var(--radius-s)}
.rrow.flagged{background:var(--warn-light);border-radius:var(--radius-s)}
.rtog{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:0 0 auto}
.rtog button{border:none;background:var(--card);padding:.25rem .8rem;font-size:.8rem;color:var(--ink-800);transition:background .15s ease,color .15s ease}
.rtog button.on-ok{background:var(--ok);color:#fff}
.rtog button.on-q{background:var(--warn);color:#fff}
.rdetail{padding:.4rem 0 .8rem 1rem;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.meter{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:.7rem 1rem;margin:.9rem 0;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.meter .mv{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.22rem;font-weight:600}
.meter.zero{border-color:var(--ok);background:var(--ok-light);box-shadow:0 0 0 3px rgba(46,107,79,.12)}
.meter.zero .mv{color:var(--ok)}
.meter.off .mv{color:var(--warn)}
.bigin{font-size:1.5rem;font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;max-width:280px}
.rsum{display:grid;grid-template-columns:auto auto;gap:.35rem 2rem;font-size:.95rem;justify-content:start}
.rsum .n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.rsum .tt{font-weight:700;border-top:2px solid var(--ink-800);padding-top:.35rem}

/* ---------- 價目表 / 使用者 ---------- */
.ptbl{width:100%;border-collapse:collapse;font-size:.88rem}
.ptbl th{text-align:left;font-size:.76rem;color:var(--ink-400);padding:.45rem .6rem;border-bottom:2px solid var(--line);white-space:nowrap}
.ptbl td{padding:.4rem .6rem;border-bottom:1px solid var(--line-soft)}
.ptbl .amt{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.ptbl input{padding:.28rem .5rem;font-size:.85rem;max-width:7rem;font-family:var(--mono);text-align:right}
.ptbl input.wide{max-width:14rem;text-align:left;font-family:var(--sans)}
.ptbl tr.dirty{background:var(--gold-light)}
.src-firm{color:var(--gold-text);font-weight:600}
.src-vendor{color:var(--ink-400)}
.src-manual{color:var(--warn)}

/* ---------- Modal ---------- */
.overlay{display:none;position:fixed;inset:0;background:rgba(15,26,46,.55);z-index:50;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto;backdrop-filter:blur(2px)}
.overlay.show{display:flex}
.modal{background:var(--card);border-radius:var(--radius);max-width:560px;width:100%;padding:1.5rem 1.6rem;box-shadow:0 30px 80px rgba(15,26,46,.35);border-top:3px solid var(--gold)}
.overlay.show .modal{animation:pop .25s ease both}
.modal h3{margin:0 0 .2rem;font-family:var(--serif)}
.who{display:grid;gap:.6rem;margin:.8rem 0}
.who label{border:2px solid var(--line);border-radius:var(--radius-s);padding:.7rem .9rem;display:flex;gap:.6rem;font-weight:400;cursor:pointer;margin:0;align-items:flex-start;transition:border-color .15s ease,background .15s ease}
.who label:hover{border-color:var(--ink-600)}
.who label.sel{border-color:var(--gold);background:var(--gold-light)}
.who input{margin-top:.25rem;flex:0 0 auto}
.who .wt{font-weight:700}
.who .wd{font-size:.82rem;color:var(--ink-400);display:block}
.upzone{border:2px dashed var(--line);border-radius:var(--radius-s);padding:1rem;text-align:center;color:var(--ink-400);font-size:.88rem;margin:.6rem 0;transition:border-color .15s ease,background .15s ease}
.upzone.drag{border-color:var(--gold);color:var(--gold-text);background:var(--gold-light)}
.modal-foot{display:flex;gap:.7rem;margin-top:1rem;justify-content:flex-end;flex-wrap:wrap}

/* ---------- Toast ---------- */
#toast{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink-900);color:var(--paper);border-radius:999px;padding:.6rem 1.5rem;
  font-size:.9rem;opacity:0;transition:.25s;z-index:99;pointer-events:none;max-width:92vw;text-align:center;
  box-shadow:0 10px 30px rgba(15,26,46,.35);border:1px solid rgba(182,138,54,.35);
}
#toast.show{opacity:1;transform:translateX(-50%)}
#toast.err{background:var(--err);border-color:rgba(255,255,255,.2)}

/* ---------- 手機沉底計價列 ---------- */
.pdock{display:none;position:fixed;left:0;right:0;bottom:0;background:var(--ink-900);color:var(--paper);padding:.7rem 1.2rem;z-index:40;box-shadow:0 -8px 24px rgba(15,26,46,.25);border-top:1px solid rgba(182,138,54,.35)}
.pdock .row1{display:flex;align-items:center;gap:.8rem}
.pdock .tv{margin-left:auto;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.2rem;color:var(--gold-hover);font-weight:600}
.pdock .detail{display:none;margin-top:.6rem;font-size:.8rem;max-height:40vh;overflow-y:auto}
.pdock.open .detail{display:block}

/* ---------- 響應式（390px 不得出現橫向捲軸） ---------- */
@media (max-width:860px){
  .wgrid,.dgrid{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
  .aside .psum{display:none}
  .pdock.on{display:block}
  main{padding-bottom:9rem}
}
@media (max-width:640px){
  main{padding-left:.85rem;padding-right:.85rem}
  .card{padding:1rem 1rem}
  .app-head{padding:.6rem .85rem;gap:.5rem}
  .app-head .brand{font-size:.98rem;width:100%}
  .deadline{margin-left:0;font-size:.76rem}
  .mainnav{padding:.5rem .85rem;overflow-x:auto;flex-wrap:nowrap}
  .mainnav a{white-space:nowrap}
  h1.pg{font-size:1.35rem}
  .igrid{grid-template-columns:minmax(0,1fr)}
  .stepper{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.2rem}
  .stp{padding:.25rem .45rem .25rem .3rem}
  .stp+.stp{margin-left:14px}
  .stp+.stp::after{width:12px}
  .stepper .stp span.lbl{display:none}
  .stepper .stp.active span.lbl{display:inline}
  .scen-card{padding:.9rem .9rem}
  .scen-ic{transform:scale(.85);transform-origin:top left}
  /* 品項卡：印面預覽移到欄位上方置中，避免擠壓輸入區 */
  .item-body{flex-direction:column}
  .item-stamp{order:-1;align-self:center;padding-top:0}
  .stamp-strip{gap:.9rem;justify-content:center}
  .wnav .btn{flex:1 1 auto}
  /* 訂單表轉卡片流 */
  .otbl thead{display:none}
  .otbl tbody{display:block}
  .otbl tr.row,.otbl tr.norow{display:block;border:1px solid var(--line-soft);border-radius:var(--radius-s);margin-bottom:.7rem;padding:.5rem .3rem;background:var(--card)}
  .otbl tr.row td{display:flex;border:none;padding:.15rem .6rem;gap:.6rem}
  .otbl tr.row td::before{content:attr(data-l);font-size:.74rem;color:var(--ink-400);min-width:4.5em;flex:0 0 auto;padding-top:.15rem}
  .otbl tr.row td.amt{text-align:left;justify-content:flex-start}
  .otbl tr.row:hover{box-shadow:none}
  .otbl tr.norow td{display:block;border:none;text-align:center}
  .sheet{min-width:440px;padding:1.2rem;transform:none;animation:none}
  .sheet-wrap{padding:1rem .8rem;perspective:none}
  .rsum{grid-template-columns:minmax(0,1fr) auto;gap:.3rem .8rem}
  .kv{grid-template-columns:5.6em minmax(0,1fr)}
  .bigin{max-width:100%;font-size:1.3rem}
  .modal{padding:1.1rem 1rem}
  .lhead{gap:.8rem}
}

/* ---------- 動態偏好：reduce 時全面關閉／降到近零 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .deadline .dot{animation:none}
  /* 查詢中改以文字「正在向經濟部查詢…」為主要回饋，轉圈凍結無妨 */
  .sheet{transform:none}
  .scen-card:hover,.mainnav a:hover,.btn:not(:disabled):hover{transform:none}
}