:root{
  --bg:#f6f7f9; --panel:#fff; --line:#e3e6ea; --ink:#1c2127; --ink2:#5b6672; --ink3:#8a949f;
  --accent:#0f5c4a; --accent2:#127a61; --accent-soft:#e6f2ee;
  --red:#b3261e; --red-soft:#fdeceb; --amber:#8a5b00; --amber-soft:#fdf3e0;
  --green:#12603f; --green-soft:#e7f4ed; --radius:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14171b; --panel:#1c2026; --line:#2c323a; --ink:#e7eaee; --ink2:#a4aeb9; --ink3:#727d89;
    --accent:#4fd1a5; --accent2:#6fe0ba; --accent-soft:#172f28;
    --red:#ff8b82; --red-soft:#33201e; --amber:#e8b45e; --amber-soft:#302614;
    --green:#67d9a6; --green-soft:#162c22;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
a{color:var(--accent2);text-decoration:none}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
textarea{min-height:64px;resize:vertical}

/* 登录 */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;width:100%;max-width:360px}
.login-card h1{margin:0 0 4px;font-size:19px}
.login-card p.sub{margin:0 0 20px;color:var(--ink2);font-size:13px}
.login-card label{display:block;margin:12px 0 5px;font-size:13px;color:var(--ink2)}

/* 卡片标题右侧的小按钮(原来写死 style="float:right",窄屏会把标题挤歪) */
.head-btn{float:right}

/* 手机端顶栏:桌面端不出现 */
#mbar{display:none;align-items:center;gap:10px;position:sticky;top:0;z-index:120;
  padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
/* ☰ / ✕:44x44 —— Apple HIG 44pt、Material 48dp,主操作一律 >=44px(见 ~/.claude/UX-GUIDE.md) */
#mbar #mnav{width:44px;height:44px;flex:none;padding:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink)}
#mbar b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 图标用内联 SVG 描边,不用 emoji —— emoji 在部分安卓/打印环境会变成方块(踩过) */
#mbar #mnav svg,#navClose svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 遮罩与抽屉关闭按钮:桌面端完全不存在 */
#scrim{display:none}
#navClose{display:none}

/* 布局 */
.app{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
/* 导航栏钉在视口上:内容很长时不用往回滚一大段空白才看到导航。
   sticky 要生效,栅格子项必须 align-self:start(默认 stretch 会把它拉到整页高) */
.side{background:var(--panel);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;overscroll-behavior:contain}
/* 导航条目自己太多、装不下时才出滚动条,平时看不见 */
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.brand{padding:0 8px 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.brand-logo{display:block;max-width:100%;max-height:44px;margin-bottom:8px;object-fit:contain}
.brand b{display:block;font-size:14px;letter-spacing:.2px}
.brand span{font-size:11px;color:var(--ink3)}
.side a.nav{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:7px 10px;border-radius:8px;color:var(--ink2);font-size:13px}
.side a.nav:hover{background:var(--bg)}
.side a.nav.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.side .count{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.side .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink3)}
.side .foot button{background:none;border:0;color:var(--ink2);padding:4px 0;text-align:center}
.side .foot button:hover{color:var(--accent)}

.main{padding:22px 26px 60px;min-width:0}
.head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.head h2{margin:0;font-size:19px}
.head .desc{color:var(--ink2);font-size:13px}
.head .spacer{flex:1}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.card > h3{margin:0 0 12px;font-size:14px;color:var(--ink2);font-weight:600}
/* 顶层的块之间要有间距。.card 自己带 margin-bottom,.grid 原来没有 ——
   结果概览上那排统计方块和下面的卡片直接贴在一起(2026-10-22 用户反馈)。
   数值跟 .card 保持一致;将来要在卡片里套 .grid,记得在那儿把它清掉。 */
.grid{display:grid;gap:12px;margin-bottom:14px}
.stats{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.stat b{display:block;font-size:22px;font-variant-numeric:tabular-nums;line-height:1.2}
.stat span{font-size:12px;color:var(--ink2)}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;color:var(--ink2);font-size:12px;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
/* 键值对表(字段名 | 值):桌面端固定标签列宽,手机端在 @media 里改成竖排 */
.kv th{width:190px}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.wrap-scroll{overflow-x:auto;
  background:
    linear-gradient(to right,var(--panel) 40%,rgba(255,255,255,0)) left center,
    linear-gradient(to left,var(--panel) 40%,rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,rgba(16,24,32,.3),rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(16,24,32,.3),rgba(0,0,0,0)) right center;
  background-repeat:no-repeat;
  background-size:34px 100%,34px 100%,20px 100%,20px 100%;
  background-attachment:local,local,scroll,scroll}

/* nowrap 的标签内容一长就会把整张表撑出横向滚动条,把别的列挤成一列一个字(2026-09-29 踩过)。
   封顶 + 省略号,完整内容放 title 里 */
.tag{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11px;border:1px solid transparent;
  white-space:nowrap;max-width:min(420px,100%);overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.tag.ok{background:var(--green-soft);color:var(--green)}
.tag.warn{background:var(--amber-soft);color:var(--amber)}
.tag.bad{background:var(--red-soft);color:var(--red)}
.tag.neutral{background:var(--bg);color:var(--ink2);border-color:var(--line)}

.btn{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:7px 14px;font-size:13px;white-space:nowrap}
.btn:hover{background:var(--accent2)}
.btn.ghost{background:transparent;color:var(--ink2);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--bg);color:var(--ink)}
.btn.danger{background:transparent;color:var(--red);border:1px solid var(--line)}
/* 三级按钮:列表行里的次要操作(打印)。一屏只能有一个实心主按钮 ——
   销售单据页原来 4 个「编辑」全是深绿实心,等于没有主按钮(见 UX-GUIDE §10) */
.btn.quiet{background:transparent;color:var(--accent);border:1px solid transparent}
.btn.quiet:hover{background:var(--accent-soft)}
.btn.sm{padding:4px 9px;font-size:12px}
/* 概览上能点进去的统计方块 */
a.stat{display:block;color:inherit;position:relative;padding-right:30px}
a.stat.tap:hover{border-color:var(--accent);background:var(--accent-soft)}
a.stat .chev{position:absolute;right:10px;top:50%;margin-top:-8px;width:16px;height:16px;
  fill:none;stroke:var(--ink3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a.stat.tap:hover .chev{stroke:var(--accent)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.issue{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.issue:last-child{border-bottom:0}
.issue .dot{width:7px;height:7px;border-radius:50%;margin-top:7px;flex:none;background:var(--amber)}
.issue.high .dot{background:var(--red)}
.issue .body{min-width:0}
.issue .where{font-size:11px;color:var(--ink3);margin-bottom:1px}

.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.field label{display:block;font-size:12px;color:var(--ink2);margin-bottom:4px}
.field .hint{font-size:11px;color:var(--ink3);margin-top:3px}
.field.wide{grid-column:1/-1}

dialog{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);
  padding:0;max-width:760px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog .dlg-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
dialog .dlg-head h3{margin:0;font-size:15px;flex:1}
dialog .dlg-body{padding:18px;max-height:65vh;overflow:auto}
dialog .dlg-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}

.note{font-size:12px;color:var(--ink2);background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;margin:8px 0}
.note.bad{background:var(--red-soft);border-color:transparent;color:var(--red)}
.note.warn{background:var(--amber-soft);border-color:transparent;color:var(--amber)}
.empty{color:var(--ink3);font-size:13px;padding:18px 0;text-align:center}
.err{color:var(--red);font-size:13px;min-height:20px;margin-top:8px}
.bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:var(--accent)}

.logo-box{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo-box .frame{width:220px;height:90px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-box .frame img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}
.logo-box .frame.empty{color:var(--ink3);font-size:12px;border-style:dashed}
.logo-box .acts{display:flex;flex-direction:column;gap:8px;align-items:flex-start}

/* 带排版的备注框:工具栏 + 输入 + 打印效果预览 */
.rich{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.rich-bar{display:flex;align-items:center;gap:4px;padding:5px 6px;background:var(--bg);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.rich-bar button.rt{width:26px;height:24px;border:1px solid var(--line);border-radius:5px;
  background:var(--panel);color:var(--ink2);font-size:12px;line-height:1;cursor:pointer;padding:0}
.rich-bar button.rt:hover{border-color:var(--accent);color:var(--accent)}
.rich-tip{font-size:11px;color:var(--ink3);margin-left:4px}
.rich textarea{border:0;border-radius:0;width:100%;display:block;resize:vertical;min-height:120px}
.rich textarea:focus{outline:none;box-shadow:none}
.rich-prev{border-top:1px dashed var(--line);padding:8px 10px 10px;background:var(--bg)}
.rich-prev-t{display:block;font-size:11px;color:var(--ink3);margin-bottom:5px}
/* 预览里的排版要和打印页对齐 */
.rt-body{font-size:12.5px;line-height:1.5;color:var(--ink)}
.rt-body .rt-h{font-weight:700;margin:8px 0 2px}
.rt-body .rt-h:first-of-type{margin-top:0}
.rt-body .rt-gap{height:7px}
.rt-body ul{margin:2px 0 2px 16px;padding:0}
.rt-body li{margin:1px 0}

/* 加载提示 */
/* 登录按钮忙碌态:转圈和文字在一行 */
#btn .spin{vertical-align:-2px;margin-right:7px;border-top-color:#fff;border-color:rgba(255,255,255,.35);border-top-color:#fff}
/* 「网络较慢,仍在连接…」不是错误,别用红色吓人 */
.err.hint{color:var(--ink3)}

.loading{display:flex;align-items:center;gap:10px;justify-content:center;
  padding:40px 0;color:var(--ink3);font-size:13px}
.spin{display:inline-block;width:15px;height:15px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
/* 上传进度:固定在右下角,不挡内容 */
.upload-tip{position:fixed;right:18px;bottom:18px;z-index:50;max-width:min(360px,calc(100vw - 36px));
  display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);box-shadow:0 6px 22px rgba(0,0,0,.14);
  font-size:12.5px;color:var(--ink2);word-break:break-all}
/* 顶部进度条:任何一次请求都点亮它,贴在窗口最上沿。
   国外线路慢的时候,第一眼就能看出「点下去了、它在跑」,而不是以为网站没反应 */
#topbar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:300;pointer-events:none;overflow:hidden;display:none}
#topbar.on{display:block}
#topbar i{display:block;height:100%;width:38%;background:var(--accent);border-radius:0 3px 3px 0;
  animation:slidebar 1.1s ease-in-out infinite}
@keyframes slidebar{0%{transform:translateX(-100%)}100%{transform:translateX(265%)}}

/* 加载块:转圈 + 「正在做什么」+ 不定长进度条,竖排居中 */
.ldbox{padding:32px 16px;text-align:center;color:var(--ink3);font-size:13px}
.ldbox .what{margin-top:11px;color:var(--ink2);font-size:13.5px}
.ldbox .sub{margin-top:6px;font-size:11.5px;color:var(--ink3);word-break:break-all}
.pbar{height:4px;max-width:260px;margin:14px auto 0;border-radius:4px;background:var(--line);overflow:hidden}
.pbar i{display:block;height:100%;width:38%;background:var(--accent);border-radius:4px;
  animation:slidebar 1.1s ease-in-out infinite}

/* 预览框:iframe / 图片渲染完之前盖一层,别让人对着一块黑等 */
.pvwrap{position:relative;min-height:210px}
.pvwrap>.cover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:8px}

/* 尊重「减少动态效果」的系统设置 */
@media (prefers-reduced-motion: reduce){ .spin{animation-duration:2.4s} .pbar i,#topbar i{animation-duration:2.6s} }

/* 编辑锁横幅 */
.note.ok-note{background:var(--green-soft);border-color:transparent;color:var(--green)}
#lockBar{display:block}
#lockBar b{font-weight:700}
.rt-readonly input:disabled,.rt-readonly textarea:disabled{background:var(--bg);color:var(--ink2)}

/* 操作日志 */
.audit-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.audit-bar .sp{flex:1}
.audit-bar>span{font-size:12px;color:var(--ink3)}
.chip{display:inline-block;padding:3px 10px;border:1px solid var(--line);border-radius:99px;
  font-size:12px;color:var(--ink2);background:var(--panel);white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:600}
table.audit td{vertical-align:top;font-size:12.5px}
table.audit tr.audit-fail td{background:var(--red-soft)}
.audit-diff{margin-top:4px;padding:5px 8px;border-left:2px solid var(--line);
  background:var(--bg);border-radius:0 6px 6px 0;font-size:12px;line-height:1.6}
.audit-diff b{font-weight:600;color:var(--ink2)}
.audit-diff .dim{color:var(--ink3)}
.audit-diff .arrow{color:var(--accent);margin:0 2px}

/* 文件预览 */
dialog.wide{max-width:1000px}
.linkish{background:none;border:0;padding:0;color:var(--accent2);font:inherit;
  text-align:left;cursor:pointer;word-break:break-all}
.linkish:hover{text-decoration:underline}
.row .spacer{flex:1}

/* 语言切换 */
.langsw{display:flex;gap:4px;margin-bottom:8px}
.langsw button{flex:1;background:transparent;border:1px solid var(--line);border-radius:6px;
  padding:3px 6px;font-size:11px;color:var(--ink2)}
.langsw button:hover{background:var(--bg);color:var(--ink)}
.langsw button.on{background:var(--accent-soft);color:var(--accent);border-color:transparent;font-weight:600}

/* 单据编辑器 */
.edit-tbl{margin-bottom:14px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.edit-tbl th{padding:6px 8px;font-size:12px;background:var(--bg)}
.edit-tbl th.l{text-align:left}
.edit-tbl th.r{text-align:right}
.edit-tbl td{padding:4px 6px;border-bottom:1px solid var(--line)}
.edit-tbl td input{padding:5px 7px;font-size:13px}
.edit-tbl .sec-head{background:var(--accent-soft);text-align:left;padding:8px}
.edit-tbl .sec-head input{display:inline-block;width:auto;min-width:200px;margin-right:8px;
  font-weight:600;background:var(--panel)}
.edit-tbl .sec-head button{margin-left:6px}
.edit-tbl tbody tr:hover{background:var(--bg)}
.sumbar{position:sticky;bottom:0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 14px;font-size:13px;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;box-shadow:0 -2px 12px rgba(0,0,0,.06);margin-top:6px}
.sumbar .sp{flex:1;min-width:12px}

/* 单据页签 */
.doctabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.doctab{display:flex;flex-direction:column;gap:2px;padding:8px 14px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--ink2);font-size:13px;line-height:1.3}
.doctab:hover{background:var(--bg);color:var(--ink)}
.doctab.on{background:var(--accent-soft);color:var(--accent);border-color:transparent;font-weight:600}
.doctab .tab-sub{font-size:11px;color:var(--ink3);font-weight:400}
.doctab.on .tab-sub{color:var(--accent)}

/* 产品缩略图 */
.thumb{width:34px;height:34px;object-fit:cover;border-radius:5px;border:1px solid var(--line);
  vertical-align:middle;margin-right:7px;background:var(--bg)}
.thumb-cell{width:46px;padding:4px!important}
.thumb-cell .thumb{margin:0}

/* 产品图字段 */
.img-picker{display:flex;gap:14px;align-items:flex-start}
.img-box{width:120px;height:120px;flex:none;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);display:grid;place-items:center;overflow:hidden}
.img-box img{max-width:100%;max-height:100%;object-fit:contain;display:block;cursor:zoom-in}
.img-none{font-size:12px;color:var(--ink3)}
.img-ops{flex:1;min-width:0}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:8px}
.img-cell{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px;
  display:flex;flex-direction:column;gap:4px;align-items:center;cursor:pointer}
.img-cell:hover{border-color:var(--accent);background:var(--accent-soft)}
.img-cell img{width:100%;height:64px;object-fit:contain}
.img-cell span{font-size:10px;color:var(--ink3);word-break:break-all;line-height:1.25;
  max-height:26px;overflow:hidden}

/* 权限勾选 */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.perm-item{display:flex;gap:8px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;cursor:pointer;background:var(--panel)}
.perm-item:hover{background:var(--bg)}
.perm-item input{width:auto;margin-top:2px;flex:none}
.perm-item span{display:flex;flex-direction:column;gap:2px;min-width:0}
.perm-item b{font-size:13px;font-weight:600}
.perm-item em{font-size:11px;color:var(--ink3);font-style:normal;line-height:1.35}
.perm-item:has(input:checked){background:var(--accent-soft);border-color:transparent}
.perm-item:has(input:checked) b{color:var(--accent)}
.edit-tbl .sec-head select{display:inline-block;width:auto;min-width:220px;margin-right:8px;
  font-weight:600;background:var(--panel)}
.thumb-empty{display:inline-block;background:var(--bg);border:1px dashed var(--line);
  border-radius:5px;vertical-align:middle}
.edit-tbl .sec-head .sec-sum{float:right;font-weight:400;font-size:12px;color:var(--ink2);
  padding-top:6px;font-variant-numeric:tabular-nums}

/* ── 手机端(≤860px):侧边导航 = 真正的 modal navigation drawer ────
   2026-10-24 用户反馈:「点击左上角的菜单栏应该是从左往右滑出来吧?」
   之前的做法是 `display:none` ↔ `display:flex` —— 展开时导航占文档流、
   **把正文往下推了一千多像素**（18 个菜单项满屏）,没有遮罩、没有动画、
   点外面关不掉 —— 那是「手风琴」不是「抽屉」。
   现在按通行规范做（清单见 ~/.claude/UX-GUIDE.md §2.2）:
   定点超出屏幕 → translateX 滑入 · 遮罩 · 点遮罩/Esc/向左划/✕ 都能关 ·
   背景锁滚动 + inert · 焦点进去还得回来 · 进场 300ms 比出场 200ms 慢 */
@media (max-width:860px){
  #mbar{display:flex}
  .app{grid-template-columns:1fr}

  /* 抽屉本体:始终在 DOM 里、始终 fixed,**不占文档流**,默认整个移到屏幕左边外 */
  .side{
    position:fixed;top:0;left:0;bottom:0;
    width:min(84vw,320px);                 /* 留出右侧一条,让人看得出底下还有页面 */
    height:100dvh;                         /* dvh 而不是 100vh:地址栏伸缩时不会被截一截 */
    z-index:200;align-self:auto;
    padding:12px 10px calc(16px + env(safe-area-inset-bottom));  /* 避开 iPhone 的 Home 指示条 */
    border-right:1px solid var(--line);border-bottom:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    display:flex;                          /* 不再用 display 开关 —— 那样没有动画 */
    transform:translateX(-100%);
    transition:transform 200ms cubic-bezier(.3,0,1,1);           /* 出场:standard-accelerate */
    will-change:transform;
  }
  .app.nav-open .side{
    transform:translateX(0);
    transition:transform 300ms cubic-bezier(.05,.7,.1,1);        /* 进场:emphasized-decelerate,比出场慢 */
    box-shadow:8px 0 28px rgba(16,24,32,.18);
  }
  /* 遮罩:告诉用户「底下的东西暂时点不了」,点它就关 */
  #scrim{
    display:block;position:fixed;inset:0;z-index:190;
    background:rgba(13,20,28,.45);
    opacity:0;pointer-events:none;
    transition:opacity 200ms linear;
  }
  .app.nav-open #scrim{opacity:1;pointer-events:auto}

  /* 抽屉头部:公司名 + 右上角 ✕ */
  .brand{position:relative;padding:4px 48px 12px 10px;margin-bottom:10px}
  .brand b{font-size:15px}
  #navClose{display:flex;align-items:center;justify-content:center;
    position:absolute;top:-2px;right:0;width:44px;height:44px;padding:0;
    background:none;border:0;color:var(--ink3);border-radius:11px}
  #navClose:active{background:var(--bg)}

  /* 导航条目:行高 48px(Material 的最小点击尺寸),整行都是点击区 */
  .side a.nav{min-height:48px;padding:0 12px;border-radius:10px;font-size:15px;color:var(--ink)}
  .side a.nav.on{font-weight:600}
  .side a.nav:active{background:var(--bg)}
  .side .count{font-size:12px}

  /* 底部账号区:原来是一排紧贴着的纯文字链接(行高 20px 根本点不准) */
  .side .foot{padding-top:12px;font-size:13px}
  .side .foot > div:not(.langsw){padding:6px 12px}
  .side .foot button:not(.langsw button){display:flex;align-items:center;min-height:44px;
    width:100%;padding:0 12px;border-radius:10px;text-align:left;font-size:14px}
  .side .foot button:not(.langsw button):active{background:var(--bg)}
  .side .foot br{display:none}
  .langsw{gap:8px;margin-bottom:10px}
  .langsw button{min-height:44px;border-radius:10px;font-size:14px}

  .main{padding:12px 12px 48px}
  .head h2{font-size:17px}
  /* 单据页签:横向滑动,别换行堆成好几排 */
  .doctabs{flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .doctabs::-webkit-scrollbar{display:none}
  .doctab{flex:none}
  /* 顶部那排操作按钮别挤成一列 */
  .head .row,.row{gap:8px}

  /* ── 触摸尺寸（UX-GUIDE §3）──
     Apple HIG 44pt / Material 48dp / WCAG 2.2 的硬底线是 24px。
     主操作按 44px;行内的 .sm 取 40px —— 后台系统密度要求高,
     40px 远高于 24px 且间距有 8px,合规也好点。 */
  .btn{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center}
  .btn.sm{min-height:40px;padding:0 12px;font-size:13px}
  /* 输入框 >=16px:小于 16px 时 iOS Safari 会自动放大整个页面,
     放大完还不自动缩回去 —— 录入系统被这个坑卡住很难受 */
  input,select,textarea{font-size:16px}
  /* 点击高亮的灰框（手机上既难看又延迟 300ms） */
  a,button{-webkit-tap-highlight-color:transparent}
}

/* 有人会因为动效晕眩 —— 无障碍要求,不是可选项 */
@media (prefers-reduced-motion: reduce){
  .side,.app.nav-open .side,#scrim{transition:none}
}

/* ── 窄屏(≤720px):表格改成卡片 ──────────────────────────────
   手机上把 8 列塞进 400px 只能左右拖,数量和单价根本看不见。
   每行改成一张卡片,字段名用 td::before 从 data-l 取 —— 不用改 DOM 结构。 */
@media (max-width:720px){
  .edit-tbl{display:block;overflow:visible;border-radius:10px}
  .edit-tbl thead,.edit-tbl tbody,.edit-tbl tr,.edit-tbl td,.edit-tbl th{display:block;width:auto}
  .edit-tbl thead tr:last-child{display:none}        /* 列名那一行藏掉,改用每格自己的标签 */
  /* 分组头:竖着排。原来 select 占满宽、后面的按钮被挤出屏幕(截图里「+ 加一行」只剩半个) */
  .edit-tbl .sec-head{padding:10px;display:flex;flex-wrap:wrap;gap:8px}
  .edit-tbl .sec-head input,.edit-tbl .sec-head select{min-width:0;width:100%;margin:0}
  .edit-tbl .sec-head button{margin:0;flex:1 1 auto;min-height:40px}
  /* 破坏性操作不跟建设性操作等宽等重:降成纯文字、不参与拉伸,
     免得手指顺手点到(UX-GUIDE §3:删除这类操作故意放难够到的位置) */
  .edit-tbl .sec-head button.act-delsec{flex:0 0 auto;border-color:transparent;background:none}
  .edit-tbl .sec-head .sec-sum{float:none;flex:1 0 100%;margin:0}
  .edit-tbl tbody tr{border-bottom:8px solid var(--bg);padding:8px 10px 10px;background:var(--panel)}
  .edit-tbl tbody tr:last-child{border-bottom:0}
  .edit-tbl td{border:0;padding:3px 0;display:grid;grid-template-columns:76px minmax(0,1fr);
    align-items:center;gap:10px}
  .edit-tbl td[data-l]::before{content:attr(data-l);font-size:11px;color:var(--ink3);text-align:right}
  .edit-tbl td input{width:100%!important;text-align:left!important}
  .edit-tbl td.num,.edit-tbl td.amt-cell{text-align:left}
  .edit-tbl td.thumb-cell{display:flex;padding:0 0 6px}
  .edit-tbl td.thumb-cell .thumb,.edit-tbl td.thumb-cell .thumb-empty{width:54px;height:54px}
  /* 最后一格是上移/下移/删三个按钮 */
  .edit-tbl td:last-child{display:flex;gap:8px;justify-content:flex-end;padding-top:8px}
  .edit-tbl td:last-child .btn{flex:1}
  /* 列表页的宽表格仍然横滑,但别让它把整页撑宽 */
  .wrap-scroll{max-width:100%}
  .fields{grid-template-columns:1fr}

  /* 键值对表（公司档案）改成竖排:标签在上、值在下。
     横排时标签占 190px,390px 屏幕上值列只剩 130px ——
     「SARL AU — Société à Responsabilité Limitée à Associé Unique」被折成 5 行。 */
  .kv,.kv tbody,.kv tr,.kv th,.kv td{display:block;width:auto}
  .kv tr{padding:9px 0;border-bottom:1px solid var(--line)}
  .kv tr:last-child{border-bottom:0}
  .kv th{width:auto;padding:0 0 3px;border:0;font-size:11.5px;color:var(--ink3);white-space:normal}
  .kv td{padding:0;border:0;font-size:15px;color:var(--ink);line-height:1.45}
  .kv td.mono{font-size:14px}
  .sumbar{font-size:12.5px;padding:8px 10px}

  /* 卡片标题里的按钮:别浮动,自己占一行 */
  .head-btn{float:none;display:block;margin-top:8px;text-align:center}
  .card > h3{line-height:1.5}

  /* 销售单据列表:6 列塞进手机只能横拖,后面几列根本看不见。改成竖排块。 */
  table.doclist,table.doclist tbody,table.doclist tr,table.doclist td{display:block;width:auto}
  table.doclist tr{border-bottom:1px solid var(--line);padding:10px 0}
  table.doclist tr:last-child{border-bottom:0}
  table.doclist td{border:0;padding:2px 0;text-align:left!important;white-space:normal!important}
  table.doclist td.doc-name{font-size:15px;margin-bottom:2px}
  table.doclist td[data-l]{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:baseline}
  table.doclist td[data-l]::before{content:attr(data-l);font-size:11px;color:var(--ink3);text-align:right}
  table.doclist td.mono{font-size:12.5px;word-break:keep-all}
  table.doclist td:empty{display:none}          /* 没有警示标签就不占行 */
  table.doclist td:last-child{display:flex;gap:8px;padding-top:8px}
  table.doclist td:last-child .btn{flex:1;text-align:center}

  /* ANRT 就绪度:表宽 1396px、手机可视区只有 332px —— 4 倍宽,
     滑动提示救不了。这是「关注单条记录」的表,改成卡片。 */
  table.rdlist,table.rdlist tbody,table.rdlist tr,table.rdlist td{display:block;width:auto}
  table.rdlist thead{display:none}
  table.rdlist tr{border-bottom:1px solid var(--line);padding:10px 0}
  table.rdlist tr:last-child{border-bottom:0}
  table.rdlist tr:hover{background:none}
  table.rdlist td{border:0;padding:2px 0;text-align:left!important;white-space:normal!important;min-width:0!important}
  table.rdlist td.rd-name{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:3px}
  table.rdlist td[data-l]{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:center}
  table.rdlist td[data-l]::before{content:attr(data-l);font-size:11px;color:var(--ink3);text-align:right}
  table.rdlist td.mono{font-size:12.5px}
  table.rdlist td:empty{display:none}

  /* 通用列表(产品/证书/往来方/证件/申报/付款/采购/费用/订单/档案/字典 共 11 页
     共用 renderList 一个渲染器)—— 在手机上一律竖排成卡片。
     产品表有 10 列,横滑根本没法用;空值的格直接不占行。 */
  table.lstlist,table.lstlist tbody,table.lstlist tr,table.lstlist td{display:block;width:auto}
  table.lstlist thead{display:none}
  table.lstlist tr{border-bottom:1px solid var(--line);padding:11px 0}
  table.lstlist tr:last-child{border-bottom:0}
  table.lstlist tr:hover{background:none}
  table.lstlist td{border:0;padding:2px 0;text-align:left!important;white-space:normal!important;min-width:0!important}
  table.lstlist td.lst-name{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:3px;line-height:1.35}
  table.lstlist td[data-l]{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:baseline}
  table.lstlist td[data-l]::before{content:attr(data-l);font-size:11px;color:var(--ink3);
    text-align:right;line-height:1.5}
  table.lstlist td.mono{font-size:12.5px;word-break:break-all}
  table.lstlist td:empty{display:none}
  /* 倒数第二格是「有问题」标签,最后一格是编辑/删 —— 按钮各占半行、符合 40px */
  table.lstlist td:last-child{display:flex;gap:8px;padding-top:9px}
  table.lstlist td:last-child .btn{flex:1;justify-content:center}
  table.lstlist td:last-child .btn.danger{flex:0 0 auto;border-color:transparent}

  /* 表格已经竖排成卡片的,就不该再有「还能往那边滑」的阴影了
     (内容恰好装下时亚像素舍入会留一条细线) */
  .wrap-scroll:has(table.doclist),.wrap-scroll:has(table.rdlist),
  .wrap-scroll:has(table.lstlist),
  .wrap-scroll:has(.edit-tbl){background:none}

  /* 其余列表页仍然横滑,但编号和日期不许逐字折行(截图里 DEV-ETAG-2026-001 被拆成四行) */
  .wrap-scroll table td,.wrap-scroll table th{white-space:nowrap}
  .wrap-scroll table td.wrapok{white-space:normal}
}