/* 鼎崴進銷存系統 V1.0 — 宋韻：汝窯天青＋宣紙＋襯線標題 */
:root{
  --paper:#f7f1e7; --paper2:#efe7d7; --card:#fffdf8;
  --ink:#2f3a38; --ink2:#5c6a66; --line:#d9cfba;
  --celadon:#5b8583; --celadon-d:#3f6664; --gold:#b98a44; --red:#b3402e;
  --dark:#22302e; --mut:#8a968f;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;font-size:15px;line-height:1.65}
h1,h2,h3,.brand-name,.page-title{font-family:"Noto Serif TC","Songti TC","PMingLiU",serif}
a{color:var(--celadon-d)}
.shell{display:flex;min-height:100vh}
.side{width:228px;flex:0 0 228px;background:var(--dark);color:#e9e2d2;padding:22px 16px;display:flex;flex-direction:column;gap:18px}
.brand{display:flex;gap:10px;align-items:center}
.brand-mark{width:40px;height:40px;border:1.5px solid var(--gold);color:#f0d9a8;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:"Noto Serif TC",serif;font-size:20px}
.brand-name{font-size:19px;letter-spacing:.06em}
.brand-sub{font-size:10px;letter-spacing:.14em;color:#b9c4bd}
.ver{background:var(--gold);color:#fff;font-size:10px;padding:1px 6px;border-radius:8px;letter-spacing:.08em}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{color:#dfe5da;text-decoration:none;padding:9px 12px;border-radius:8px}
.nav a:hover{background:#2e403c}
.nav a.on{background:var(--celadon);color:#fff}
.side-foot{margin-top:auto;font-size:13px;color:#b9c4bd}
.side-foot .logout{color:#f0d9a8}
.foot-note{margin-top:10px;font-size:11px;color:#7e8f88}
.main{flex:1;padding:26px 30px 40px;min-width:0}
.topbar,.tabrow{display:none}
.page-title{font-size:26px;margin:2px 0 18px;letter-spacing:.04em}
.flash{background:#eef5ec;border:1px solid #b9d2b2;color:#33512c;padding:10px 14px;border-radius:8px;margin-bottom:14px}
.notice{background:#fdf3e0;border:1px solid #e3c98f;color:#6b5312;padding:10px 14px;border-radius:8px;margin-bottom:14px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--celadon);border-radius:10px;padding:16px}
.stat.warn{border-left-color:var(--gold)} .stat.bad{border-left-color:var(--red)}
.stat .k{color:var(--ink2);font-size:13px}
.stat .v{font-size:25px;font-family:"Noto Serif TC",serif;margin:4px 0}
.stat .n{color:var(--ink2);font-size:12px}
table.grid{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
table.grid th,table.grid td{padding:9px 12px;border-bottom:1px solid #eee4cf;text-align:left;vertical-align:top}
table.grid th{background:var(--paper2);font-weight:600;font-size:13px}
td.r,th.r{text-align:right}
.badge{display:inline-block;padding:1px 9px;border-radius:10px;font-size:12px;background:#e8e2d0;color:#5c5540}
.badge.shipped{background:#dcebe8;color:#2e5a57}.badge.paid{background:#e2efd9;color:#38602c}
.badge.billed{background:#f3e5c3;color:#7a5a14}.badge.void{background:#eee;color:#888}
.badge.overdue{background:#f6dcd6;color:#93331f}
.btn{display:inline-block;background:var(--celadon);color:#fff;border:0;border-radius:8px;padding:8px 16px;font-size:14px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--celadon-d)}
.btn.gold{background:var(--gold)} .btn.ghost{background:#fff;color:var(--celadon-d);border:1px solid var(--celadon)}
.btn.danger{background:var(--red)} .btn.sm{padding:4px 10px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
form.panel,.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:18px}
label.f{display:block;margin-bottom:12px;font-size:13px;color:var(--ink2)}
label.f input,label.f select,label.f textarea{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:15px;color:var(--ink);background:#fff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar form{display:flex;gap:8px;flex-wrap:wrap}
.toolbar input,.toolbar select{padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:#fff}
.site-foot{padding:14px 20px 22px;color:var(--ink2);font-size:12px;text-align:center;line-height:1.7}
.site-foot .foot-ver{letter-spacing:.08em}
.site-foot .copy span{display:inline-block;white-space:nowrap}
.main h2{font-size:20px;margin:22px 0 10px;letter-spacing:.04em}
table.grid td[colspan]{text-align:center;color:var(--ink2);padding:18px 12px}
.center-box{max-width:440px;margin:10vh auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px}
.itemrow{display:grid;grid-template-columns:2fr 1fr .6fr 1fr 1fr auto;gap:8px;margin-bottom:8px}
.itemrow input,.itemrow select{padding:7px 9px;border:1px solid var(--line);border-radius:6px;width:100%;background:#fff}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 14px}
.kv dt{color:var(--ink2)} .kv dd{margin:0}
.perm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 14px}
.perm-grid label{font-size:14px;color:var(--ink)}
/* 全站質感：柔和陰影與輸入聚焦 */
.stat,.panel,form.panel,table.grid{box-shadow:0 1px 3px rgba(47,58,56,.05)}
label.f input:focus,label.f select:focus,label.f textarea:focus,.toolbar input:focus,.toolbar select:focus{border-color:var(--celadon);box-shadow:0 0 0 3px rgba(91,133,131,.18);outline:none}
.btn{transition:background .15s ease,box-shadow .15s ease,transform .15s ease}
/* 登入頁（宋韻版框＋置中卡） */
.login-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:30px 18px;
  background:radial-gradient(1100px 520px at 50% -8%,#fffdf6 0%,rgba(255,253,246,0) 60%),linear-gradient(180deg,#f8f3ea 0%,var(--paper) 55%,#f1e9da 100%)}
.login-frame{position:fixed;inset:12px;border:1px solid var(--line);outline:1px solid #e9dfc9;outline-offset:5px;pointer-events:none}
.login-card{position:relative;width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:42px 38px 28px;text-align:center;box-shadow:0 24px 60px rgba(47,58,56,.14),0 2px 8px rgba(47,58,56,.06)}
.login-seal{width:56px;height:56px;margin:0 auto 16px;background:var(--dark);color:#f0d9a8;border:1.5px solid var(--gold);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-family:"Noto Serif TC","Songti TC",serif;font-size:27px}
.login-title{font-size:28px;letter-spacing:.14em;text-indent:.14em;margin:0 0 8px}
.login-sub{font-size:11px;letter-spacing:.22em;color:var(--ink2);margin:0}
.login-verrow{margin-top:10px}
.login-rule{display:flex;align-items:center;gap:10px;margin:20px 6px 22px}
.login-rule::before,.login-rule::after{content:"";flex:1;border-top:1px solid var(--line)}
.login-rule span{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:0 0 7px}
.login-card form{text-align:left}
.login-card label.f{margin-bottom:14px}
.login-card label.f input{padding:12px 14px;border-radius:8px;background:#fff}
.login-btn{width:100%;padding:13px;font-size:15px;letter-spacing:.34em;text-indent:.34em;border-radius:9px;margin-top:4px;
  background:linear-gradient(180deg,var(--celadon) 0%,var(--celadon-d) 100%);box-shadow:0 8px 18px rgba(63,102,100,.28)}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(63,102,100,.32)}
.login-foot{margin:22px 0 0;padding-top:16px;border-top:1px solid #eee4cf;font-size:11.5px;color:#8a968f;line-height:1.8}
.login-foot span{display:inline-block;white-space:nowrap}
@media (max-width:900px){
  .shell{min-height:0}
  .cards{grid-template-columns:1fr 1fr}
  .side{display:none}
  .main{padding:16px 14px 24px}
  .site-foot{padding:10px 14px 18px}
  .main h2{font-size:19px;margin:18px 0 8px}
  .topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .topbar-title{font-family:"Noto Serif TC",serif;font-size:18px}
  .tabrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
  .tabrow a{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;padding:10px 2px;border-radius:8px;font-size:13.5px;white-space:nowrap;overflow:hidden}
  .tabrow .erp-search{grid-column:span 2;margin:0;align-self:center}
  .tabrow a.on{background:var(--celadon);color:#fff;border-color:var(--celadon)}
  .row2,.row3{grid-template-columns:1fr}
  .itemrow{grid-template-columns:1fr 1fr}
  .perm-grid{grid-template-columns:1fr 1fr}
  table.grid{font-size:13px}
  table.grid th,table.grid td{padding:7px 8px}
  table.grid td a{word-break:break-all}
  table.grid td.r,table.grid th.r{white-space:nowrap}
  .login-frame{inset:8px}
  .login-card{padding:34px 24px 24px}
  .login-title{font-size:25px}
}
@media print{
  .side,.topbar,.tabrow,.no-print,.site-foot{display:none!important}
  body{background:#fff}.main{padding:0}
}

/* 品牌 logo 圖（青山 PenG 原稿） */
.brand-logo-img{height:66px;width:auto;flex:none}
.login-logo{display:block;height:126px;width:auto;margin:6px auto 16px}
.login-ver{margin:10px 0 0;font-size:11px;color:#8a968f;letter-spacing:.08em}
.same-addr{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ink);margin:2px 0 12px;cursor:pointer}
.same-addr input{width:17px;height:17px;accent-color:var(--celadon)}

/* ── 銷貨明細列：每格加上標籤（選商品/品名/規格非必填/數量/單價/小計） ── */
.itemrow{grid-template-columns:1.7fr 1.5fr 1fr .55fr .85fr .85fr auto;align-items:end}
.itemrow label.c{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink2)}
.itemrow .amt{background:var(--paper2);color:var(--ink);font-weight:600}
@media (max-width:900px){
  .itemrow{grid-template-columns:1fr 1fr}
  .itemrow .c-prod,.itemrow .c-name{grid-column:span 2}
}

/* ── 銷貨明細改表單式：每品項一張表單卡（2026-10-24 使用者指示） ── */
.itemcard{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;box-shadow:0 1px 3px rgba(90,80,50,.05)}
.itemcard .itemhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.itemcard .itemhead span{font-weight:700;color:var(--ink)}
.itemcard .itemamt{text-align:right;font-size:14px;color:var(--ink2);margin-top:8px}
.itemcard .itemamt b{font-size:17px;color:var(--ink)}

/* ── 表單排版精煉（2026-10-24）：段落標題金線、標籤精簡＋說明小字、輸入框質感、品項卡 ── */
.panel h3{font-size:17px;letter-spacing:.06em;color:var(--ink);margin:24px 0 12px;padding:0 0 8px 12px;border-bottom:1px solid #eee4cf;position:relative}
.panel h3:first-child{margin-top:2px}
.panel h3::before{content:"";position:absolute;left:0;top:2px;bottom:10px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--gold),#dcc08a)}
.fhint{font-size:12.5px;color:var(--ink2);margin:-4px 0 12px;line-height:1.6}
label.f{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:14px}
label.f input,label.f select,label.f textarea{margin-top:5px;padding:10px 12px;border:1px solid #ddd2b8;border-radius:8px;font-size:15.5px;background:#fff;max-width:100%}
label.f .hint{display:block;margin-top:5px;font-size:12px;font-weight:400;color:var(--ink2);line-height:1.55}
label.f input.s-in{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238a968f' stroke-width='2.4' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M15.5 15.5 L21 21'/></svg>");background-repeat:no-repeat;background-position:11px center;background-size:15px;padding-left:33px}
.row2>*,.row3>*,.row2fix>*{min-width:0}
.row2fix{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input[type="date"]{min-width:0}
.itemcard{background:linear-gradient(180deg,#fffdf8,#fdf8ee);border:1px solid #ded1af;border-radius:12px;padding:16px;box-shadow:0 2px 6px rgba(90,80,50,.06)}
.itemcard:focus-within{border-color:var(--celadon);box-shadow:0 0 0 3px rgba(91,133,131,.15)}
.itemcard .itemhead span{display:flex;align-items:center;gap:8px;font-family:"Noto Serif TC","Songti TC",serif;letter-spacing:.05em}
.itemcard .itemhead span::before{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:0 0 7px}
.itemcard .itemamt{background:var(--paper2);border:1px solid #eee4cf;border-radius:8px;padding:7px 12px;margin-top:10px}
.itemcard input[name="item_qty[]"],.itemcard input[name="item_price[]"]{text-align:right}
.form-actions{display:flex;gap:10px;margin-top:8px}
.form-actions .btn{padding:12px 18px;font-size:15px;border-radius:9px;text-align:center}
.form-actions .btn.submit{flex:1;background:linear-gradient(180deg,var(--celadon) 0%,var(--celadon-d) 100%);box-shadow:0 6px 14px rgba(63,102,100,.25);letter-spacing:.12em}

/* ═══ 全站質感升級（2026-10-24 Mars 指示：高質感及美觀） ═══ */
::selection{background:rgba(91,133,131,.25)}
body{background:radial-gradient(1200px 480px at 50% -10%,#fffdf6 0%,rgba(255,253,246,0) 55%),var(--paper)}
.main{padding:30px 36px 48px}
.page-title{font-size:27px;letter-spacing:.05em;margin:4px 0 22px;padding-bottom:12px;position:relative;border-bottom:1px solid var(--line)}
.page-title::after{content:"";position:absolute;left:0;bottom:-1px;width:52px;height:2px;background:linear-gradient(90deg,var(--gold),#dcc08a)}
.main .lead{color:var(--ink2);font-size:14.5px;margin:-8px 0 18px;letter-spacing:.02em}
/* 側欄（桌機） */
.side{background:linear-gradient(180deg,#25342f 0%,#1d2926 100%);border-right:1px solid rgba(185,138,68,.35);padding:26px 18px}
.brand{padding-bottom:18px;border-bottom:1px solid rgba(233,226,210,.15)}
.brand-name{color:#f3ead3;font-size:20px}
.nav{gap:5px;margin-top:8px}
.nav a{padding:10px 12px;border-radius:9px;letter-spacing:.04em;position:relative;transition:background .15s ease}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a.on{background:linear-gradient(180deg,var(--celadon),var(--celadon-d));box-shadow:0 4px 10px rgba(0,0,0,.25)}
.nav a.on::before{content:"";position:absolute;left:-18px;top:20%;bottom:20%;width:3px;border-radius:2px;background:var(--gold)}
.side-foot{border-top:1px solid rgba(233,226,210,.15);padding-top:14px}
.side-foot .logout{display:inline-block;margin-top:6px;padding:3px 12px;border:1px solid rgba(240,217,168,.55);border-radius:999px;text-decoration:none;font-size:12.5px}
.side-foot .logout:hover{background:rgba(240,217,168,.12)}
/* 手機頂欄與導覽 */
.topbar{padding:2px 2px 10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.topbar-title{display:flex;align-items:center;gap:8px;font-size:19px;letter-spacing:.06em}
.topbar-title::before{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:0 0 7px}
.topbar-me{font-size:13px;color:var(--ink2)}
.tabrow a{border-radius:10px;padding:9px 4px;box-shadow:0 1px 3px rgba(47,58,56,.05);font-weight:600}
.tabrow a.on{background:linear-gradient(180deg,var(--celadon),var(--celadon-d));box-shadow:0 4px 10px rgba(63,102,100,.25)}
/* 統計卡 */
.cards{gap:16px}
.stat{border-radius:12px;padding:18px;border-left:0;border-top:3px solid var(--celadon);box-shadow:0 2px 6px rgba(47,58,56,.05),0 10px 24px rgba(47,58,56,.04);transition:transform .15s ease,box-shadow .15s ease}
.stat:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(47,58,56,.07),0 14px 28px rgba(47,58,56,.06)}
.stat.warn{border-top-color:var(--gold)} .stat.bad{border-top-color:var(--red)}
.stat .k{font-weight:600;letter-spacing:.08em}
.stat .v{font-size:28px;letter-spacing:.02em}
/* 表格 */
table.grid{border-radius:12px;box-shadow:0 2px 6px rgba(47,58,56,.05),0 10px 24px rgba(47,58,56,.04)}
table.grid th{background:linear-gradient(180deg,#f4eddc,#efe7d7);color:var(--ink2);font-size:12.5px;letter-spacing:.07em;padding:11px 14px;border-bottom:1.5px solid var(--line)}
table.grid td{padding:11px 14px}
table.grid tr:hover td{background:#fdf8ee}
table.grid td a{font-weight:600;text-decoration:none}
table.grid td a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
td.r,th.r{font-variant-numeric:tabular-nums}
/* 徽章與按鈕 */
.badge{padding:2px 10px;border-radius:999px;font-weight:600;letter-spacing:.02em;border:1px solid rgba(92,85,64,.12)}
.btn{border-radius:9px;padding:9px 18px;background:linear-gradient(180deg,var(--celadon),var(--celadon-d));box-shadow:0 3px 8px rgba(63,102,100,.20);font-weight:600;letter-spacing:.03em;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(63,102,100,.24)}
.btn.gold{background:linear-gradient(180deg,#c79a52,#a87f3c);box-shadow:0 3px 8px rgba(168,127,60,.25)}
.btn.ghost{background:#fffdf8;box-shadow:none}
.btn.ghost:hover{background:#eef5f3;transform:none;box-shadow:0 2px 6px rgba(63,102,100,.12)}
.btn.danger{background:linear-gradient(180deg,#c04a36,#a03a29);box-shadow:0 3px 8px rgba(160,58,41,.22)}
/* 工具列 */
.toolbar{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:0 2px 6px rgba(47,58,56,.05)}
.toolbar input,.toolbar select{padding:9px 11px;border:1px solid #ddd2b8;border-radius:8px;font-size:14.5px}
.toolbar input:focus,.toolbar select:focus{border-color:var(--celadon);box-shadow:0 0 0 3px rgba(91,133,131,.18);outline:none}
/* 面板與鍵值列表 */
.panel,form.panel{border-radius:12px;padding:20px;box-shadow:0 2px 6px rgba(47,58,56,.05),0 10px 24px rgba(47,58,56,.04)}
.kv{gap:0 16px}
.kv dt{font-weight:600;color:var(--ink2);padding:8px 0;border-bottom:1px solid #f0e8d5}
.kv dd{padding:8px 0;border-bottom:1px solid #f0e8d5}
.flash{border-left:4px solid #7ba05b;border-radius:10px;box-shadow:0 2px 6px rgba(47,58,56,.05)}
.notice{border-left:4px solid var(--gold);border-radius:10px;box-shadow:0 2px 6px rgba(47,58,56,.05)}
/* 下拉選單自訂箭頭 */
label.f select,.toolbar select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%235c6a66' stroke-width='2.6' stroke-linecap='round'><path d='M5 9l7 7 7-7'/></svg>");background-repeat:no-repeat;background-position:right 11px center;background-size:11px;padding-right:32px}
/* 頁尾 */
.site-foot{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,253,248,.0),#f3ecdc);margin-top:6px}
.site-foot .foot-ver{color:#9a8c66;letter-spacing:.1em}
@media (max-width:900px){
  .main{padding:16px 14px 24px}
  .page-title{font-size:22px;margin-bottom:16px;padding-bottom:9px}
  .stat{padding:14px}
  .stat .v{font-size:23px}
  .panel,form.panel{padding:16px}
}

/* 日期欄位修正：iOS 原生日期控件文字置中且寬度溢出 → 自訂外觀、靠左、日曆圖示 */
label.f input[type="date"]{-webkit-appearance:none;appearance:none;position:relative;width:100%;min-width:0;max-width:100%;text-align:left;font-family:inherit;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238a968f' stroke-width='2' stroke-linecap='round'><rect x='3.5' y='5' width='17' height='16' rx='2.5'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>") no-repeat right 11px center;background-size:15px;padding-right:34px}
label.f input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
label.f input[type="date"]::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:36px;height:100%;opacity:0;cursor:pointer}
label.f input[type="date"]::-webkit-inner-spin-button{display:none}
.add-item{width:100%}

/* 列表表格質感（桌機表頭漸層）＋手機卡片式列表（2026-10-24 Mars 指示加強列表排版） */
table.grid th{background:linear-gradient(180deg,#f7f0de,#efe4c8);color:#5c5340;letter-spacing:.03em;border-bottom:1px solid #e0d0a4}
table.grid tr:hover td{background:#fdf9ee}
table.grid tr:first-child:hover td{background:transparent}
@media (max-width:760px){
  table.grid{display:block;width:100%;background:transparent;border:none;border-radius:0;overflow:visible}
  table.grid thead,table.grid tbody{display:block;width:100%}
  table.grid tr{display:block;width:100%;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px 10px;margin-bottom:10px;box-shadow:0 2px 10px rgba(90,75,40,.07)}
  table.grid tr:first-child:has(th){display:none}
  table.grid td{display:block;overflow:hidden;border-bottom:none;padding:3.5px 0;text-align:right;font-size:14.5px}
  table.grid td::before{content:attr(data-label);float:left;color:var(--mut);font-size:12.5px;font-weight:600;letter-spacing:.05em;text-align:left}
  table.grid td.t{display:block;text-align:left;font-size:16.5px;font-weight:700;padding:1px 0 7px;margin-bottom:5px;border-bottom:1px dashed #e7dcbd}
  table.grid td.t::before{display:none}
  table.grid td.act{display:block;text-align:right;padding-top:9px}
  table.grid tr.sumrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;background:#fff;border:1px solid var(--line);border-top:none;border-bottom:none;border-radius:0;box-shadow:none;padding:5px 14px;margin:0}
  table.grid tr.sumrow.sumfirst{border-top:1px solid var(--line);border-radius:14px 14px 0 0;padding-top:12px;margin-top:2px}
  table.grid tr.sumrow.sumlast{border-bottom:1px solid var(--line);border-radius:0 0 14px 14px;padding-bottom:12px;margin-bottom:10px;box-shadow:0 2px 10px rgba(90,75,40,.07)}
  table.grid tr.sumrow td{display:block;padding:0;text-align:right}
  table.grid tr.sumrow td:first-child{text-align:left}
  table.grid tr.sumrow td::before{display:none}
  table.grid td.act::before{display:none}
  table.grid td[colspan]{display:block;text-align:center}
  table.grid td[colspan]::before{display:none}
  table.grid tr:hover td{background:transparent}
}

/* ═══ 精緻化 v2（2026-10-25 Mars 指示：兩後台統一宋韻行政版） ═══ */
@media screen{
  /* 宣紙微紋理（極淡直紋）＋頂光 */
  body{background-image:radial-gradient(1200px 480px at 50% -10%,#fffdf6 0%,rgba(255,253,246,0) 55%),repeating-linear-gradient(0deg,rgba(122,102,58,.016) 0 2px,transparent 2px 5px)}
  .login-page{background-image:radial-gradient(1100px 520px at 50% -8%,#fffdf6 0%,rgba(255,253,246,0) 60%),repeating-linear-gradient(0deg,rgba(122,102,58,.016) 0 2px,transparent 2px 5px),linear-gradient(180deg,#f8f3ea 0%,var(--paper) 55%,#f1e9da 100%)}
  /* 捲軸：細金紙色 */
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:var(--paper)}
  ::-webkit-scrollbar-thumb{background:#cdbd93;border-radius:6px;border:2.5px solid var(--paper)}
  ::-webkit-scrollbar-thumb:hover{background:var(--gold)}
}
/* 鍵盤聚焦可見性 */
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid rgba(185,138,68,.7);outline-offset:2px}
/* 側欄品牌與選單細節 */
.brand-logo-img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.nav a{transition:background .15s ease,padding-left .15s ease}
.nav a:hover{padding-left:15px}
.side-foot .me{letter-spacing:.03em}
/* 段落標題：金菱標記（與品項卡一致） */
.main h2{position:relative;padding-left:15px}
.main h2::before{content:"";position:absolute;left:1px;top:50%;margin-top:-3.5px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
/* 統計數字：等寬數字＋字距 */
.stat .v{font-variant-numeric:tabular-nums;letter-spacing:.01em}
td.r,th.r,.kv dd{font-variant-numeric:tabular-nums}
/* 徽章：印章式細框＋字距 */
.badge{letter-spacing:.05em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
/* 表格：桌機表頭吸附＋列線漸層 */
@media screen and (min-width:901px){
  table.grid thead th{position:sticky;top:0;z-index:2;box-shadow:inset 0 -1.5px 0 var(--line)}
}
table.grid td{border-bottom-color:#f0e7d0}
/* 登入印章與卡片光暈 */
.login-seal{box-shadow:0 10px 24px rgba(34,48,46,.35),inset 0 0 0 1px rgba(240,217,168,.25)}
.login-logo{filter:drop-shadow(0 3px 8px rgba(90,75,40,.18))}
.login-card{border-color:#ded1af}
/* 按鈕小號與工具列細節 */
.btn.sm{letter-spacing:.05em}
.toolbar{position:relative}
.toolbar::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--gold),#dcc08a)}

/* 側欄品牌改橫式 logo lockup（2026-10-25 Mars 指示：進銷存後台也換上 logo） */
.brand{flex-direction:column;align-items:flex-start;gap:12px}
.brand-lockup{width:176px;max-width:100%;height:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.brand-text{min-width:0}
.topbar-title img{height:32px;width:auto;display:block}
.topbar-title::before{display:none}

/* 登入頁「記住我 180 天」勾選列 */
.login-remember{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ink);margin:4px 0 10px;cursor:pointer;text-align:left}
.login-remember input{width:17px;height:17px;accent-color:var(--celadon);flex:none}

/* 側欄「購物站後台」整合連結 */
.nav a.ext{border-top:1px solid var(--line);margin-top:6px}

/* 請款清單操作列（產生表單月份欄＋卡片內快速收款） */
.actrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.payquick{display:inline-flex;gap:4px;align-items:center}
@media (max-width:760px){
  table.grid td.act{text-align:left}
  table.grid td.act .actrow{justify-content:space-between;margin-bottom:2px}
  table.grid td.act .payquick{display:flex;width:100%;gap:8px;margin-top:8px}
  table.grid td.act .payquick input[type="number"]{flex:1;min-width:0;width:auto}
  table.grid td.act .payquick select{flex:none;max-width:96px}
  input[type="checkbox"]{width:17px;height:17px;accent-color:#38655f;vertical-align:-3px}
  label.f input[type="month"]{-webkit-appearance:none;appearance:none;position:relative;width:100%;min-width:0;max-width:100%;text-align:left;font-family:inherit;background:#fff}
  label.f input[type="month"]::-webkit-date-and-time-value{text-align:left;margin:0}
}

/* ── 後台慣例（2026-11-02）：可點統計卡回饋＋寬表格橫捲正解 ── */
a.stat:active{transform:translateY(0)}
a.stat:focus-visible{outline:2px solid rgba(185,138,68,.65);outline-offset:2px}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px;background:var(--card);margin-bottom:18px}
.tbl-scroll>table.grid{width:max-content;min-width:100%;border:0;border-radius:0;margin:0}
.tbl-scroll>table.grid th,.tbl-scroll>table.grid td{white-space:nowrap}
.tbl-scroll>table.grid td.wrap{white-space:normal;min-width:200px}
@media (max-width:900px){
  .tbl-scroll{background:linear-gradient(to right,var(--card) 50%,rgba(255,255,255,0)) 0 0/44px 100% no-repeat,linear-gradient(to left,var(--card) 50%,rgba(255,255,255,0)) 100% 0/44px 100% no-repeat,radial-gradient(farthest-side at 0 50%,rgba(47,58,56,.25),rgba(0,0,0,0)) 0 0/14px 100% no-repeat,radial-gradient(farthest-side at 100% 50%,rgba(47,58,56,.25),rgba(0,0,0,0)) 100% 0/14px 100% no-repeat;background-attachment:local,local,scroll,scroll}
}

/* ── 統一模組列（2026-11-04 深度整合第一批）：購物站後台／進銷存共用同一外框 ── */
.dw-modbar{position:sticky;top:0;z-index:300;display:flex;align-items:center;gap:12px;height:44px;padding:0 16px;background:#1c2825;color:#e9e2d2;border-bottom:1px solid rgba(185,138,68,.5);box-shadow:0 2px 10px rgba(28,40,37,.25);font-family:"Noto Sans TC",sans-serif}
.dw-mb-brand{display:flex;align-items:center;gap:8px;color:#f0d9a8;text-decoration:none;font-family:"Noto Serif TC",serif;font-weight:700;font-size:14px;letter-spacing:.14em;white-space:nowrap}
.dw-mb-brand img{height:20px;width:auto;display:block}
.dw-mb-tabs{display:flex;gap:4px;margin-left:4px}
.dw-mb-tab{color:#a9bcae;text-decoration:none;font-size:13px;letter-spacing:.08em;padding:6px 13px;border-radius:999px;white-space:nowrap;transition:color .15s,background .15s}
.dw-mb-tab:hover{color:#fff;background:rgba(255,255,255,.08)}
.dw-mb-tab.on{color:#1c2825;background:linear-gradient(180deg,#dcbd7f,#b98a44);font-weight:700;box-shadow:0 2px 6px rgba(185,138,68,.35)}
.dw-mb-tab.on:hover{color:#1c2825;background:linear-gradient(180deg,#dcbd7f,#b98a44)}
.dw-mb-me{margin-left:auto;color:#8fa298;font-size:12px;letter-spacing:.06em;white-space:nowrap}
@media (max-width:640px){.dw-modbar{padding:0 10px;gap:8px}.dw-mb-brand{font-size:0;letter-spacing:0}.dw-mb-brand img{height:22px}.dw-mb-tab{padding:6px 10px;font-size:12.5px}.dw-mb-me{display:none}}
@media print{.dw-modbar{display:none!important}}
.shell{min-height:calc(100vh - 44px)}

/* ── 深度整合第一批-2：元件規格與購物站後台對齊（2026-11-04）── */
::selection{background:#efdfae;color:#2f3a38}
label.f input:focus,label.f select:focus,label.f textarea:focus,.toolbar input:focus,.toolbar select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,138,68,.20)}
.btn{border-radius:9px;letter-spacing:.05em;background:linear-gradient(180deg,var(--celadon),var(--celadon-d));box-shadow:0 3px 8px rgba(63,102,100,.22)}
.btn:hover{background:linear-gradient(180deg,var(--celadon),var(--celadon-d));transform:translateY(-1px);box-shadow:0 6px 14px rgba(63,102,100,.26)}
.btn.gold{background:linear-gradient(180deg,#cfa252,var(--gold));box-shadow:0 3px 8px rgba(185,138,68,.28)}
.btn.gold:hover{background:linear-gradient(180deg,#cfa252,var(--gold))}
.btn.ghost{background:#fff;box-shadow:none}
.btn.ghost:hover{background:#fff}
.btn.danger{background:linear-gradient(180deg,#c14f3a,var(--red));box-shadow:0 3px 8px rgba(179,64,46,.22)}
.btn.danger:hover{background:linear-gradient(180deg,#c14f3a,var(--red))}
.stat,.panel,form.panel{border-radius:12px;box-shadow:0 2px 6px rgba(90,80,50,.05),0 10px 22px rgba(90,80,50,.04)}
.stat .v{font-family:"Noto Serif TC",serif}
.page-title{font-family:"Noto Serif TC",serif;font-weight:700}
.badge{border-radius:999px;padding:2px 10px}
input[type=checkbox],input[type=radio]{accent-color:var(--gold)}

/* ── 銷貨單分頁（2026-11-08，每頁 25 筆）── */
.pager-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2px 0 18px}
.pager-info{color:var(--ink2);font-size:13.5px;letter-spacing:.02em}
.pager{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;padding:6px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--celadon-d);font-size:14px;text-decoration:none}
.pager a:hover{border-color:var(--celadon);background:#eef5f3}
.pager span.on{background:linear-gradient(180deg,var(--celadon),var(--celadon-d));border-color:var(--celadon-d);color:#fff;font-weight:700}
.pager span.off{opacity:.42;color:var(--ink2)}
.pager span.dots{border:0;background:transparent;min-width:22px;padding:6px 2px;color:var(--ink2)}
@media (max-width:640px){.pager-wrap{justify-content:center}.pager-info{width:100%;text-align:center}.pager{justify-content:center}.pager a,.pager span{min-height:42px;padding:8px 13px}}

/* 進銷存全域搜尋（2026-11-10 後台方便批） */
.erp-search{display:flex;gap:6px;margin:10px 12px}
.erp-search input[type="search"]{flex:1;min-width:0;padding:7px 10px;border:1px solid #d8cfc0;border-radius:8px;font-size:13.5px;background:#fffdf8}
.erp-search button{padding:7px 12px;border:1px solid #b98a44;border-radius:8px;background:linear-gradient(180deg,#dcbd7f,#b98a44);color:#1c2825;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.erp-search-m{margin:6px 0 2px}
.erp-search-page{margin:0}
.erp-search-page input[type="search"]{padding:10px 12px;font-size:15px}

/* ── 手機卡片表格與橫捲包裝層互斥修正（2026-11-11）：≤760px 解除 tbl-scroll 的 nowrap 與 max-content，
      否則卡片被最長欄位撐出螢幕、短數值被推到畫面外；標籤色 --mut 一併補上定義 ── */
@media (max-width:760px){
  .tbl-scroll{overflow:visible;border:none;background:transparent;margin-bottom:4px}
  .tbl-scroll>table.grid{width:100%}
  .tbl-scroll>table.grid th,.tbl-scroll>table.grid td{white-space:normal}
  table.grid td{word-break:break-word}
}
