:root {
  --brand: #062051;
  --brand-2: #0f2b63;
  /* 颜色语义：一种颜色只管一件事，别再让青绿既当按钮又当链接又当选中态 */
  --action: #0e6f7d;        /* 主操作（每屏一个）：白字 4.9:1 */
  --action-hover: #0b5b66;
  --link: #0b6b7d;          /* 链接 / 次要操作：白底 6.2:1（原来 #08b9ce 只有 2.4:1） */
  --danger: #b3261e;        /* 删除 / 作废 / 回滚 */
  /* 负数金额（退货、红冲让净额变负）：取值与 --danger 相同，但语义是「这个数是负的」，
     不是「点它会删东西」。分开命名是为了以后调其中一个不牵连另一个。 */
  --neg: #b3261e;
  /* 兼容旧写法：不再用于文字与主按钮，只留给图示与渐变这类装饰 */
  --teal: #08b9ce;
  --teal-2: #15cbe2;
  --bg: #eef1f5;
  --card: #ffffff;
  --surface: #f6f7f9;       /* 分层色：表头、合计行、指标卡——「同一张表内的第二层」 */
  --line: #e6eaf0;          /* 结构线：卡片/弹窗边界 */
  --line-soft: #f1f3f5;     /* 内容线：表格行分隔，必须比结构线浅 */
  --line-strong: #dfe3e8;   /* 表头下沿、合计行上沿：比行线重、比结构线轻 */
  --col-sep: #edf0f4;       /* 数字列之间的细列线 */
  --mono: Consolas, ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace;
  --text: #1d2939;
  --muted: #6b7a90;
  --faint: #aab6c6;         /* 空值、占位、禁用 */
  --up: #d63c3c;
  --down: #178f4a;
  --warn: #d98200;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font: 13px/1.55 "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

#app { height: 100%; }

/* ---------- 壳布局 ---------- */
.shell { display: flex; height: 100%; }
.side {
  width: 196px;
  flex: 0 0 196px;
  background: #0b1a30;
  color: #b8c4d4;
  display: flex;
  flex-direction: column;
}
.brand {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
/* 品牌标：一块沉色，不用渐变。屏幕上最亮的应该是数据，不是 logo */
.brand-mark {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--action);
  display: grid; place-items: center; font-size: 12px; color: #fff;
}
.side ul {
  list-style: none; margin: 0; padding: 0 0 6px; flex: 1;
  overflow-y: scroll; overflow-x: hidden;   /* 常驻滚动条：提示下面还有分组 */
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.side ul::-webkit-scrollbar { width: 6px; }
.side ul::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 3px; }
/* 分组标题：只做视觉分隔，不参与折叠 */
.side li.nav-hd {
  padding: 10px 16px 3px;
  font-size: 11px; letter-spacing: .1em;
  color: #8ba3c2; user-select: none;
}
.side li.nav-hd:first-child { padding-top: 10px; }
.side li.nav-hd:not(:first-child) {
  margin-top: 1px; padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.side li a {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px; color: #c3cfe2; font-size: 13px;
}
.side li a i { font-style: normal; width: 14px; text-align: center; opacity: .85; }
.side li a:hover { background: rgba(255, 255, 255, .06); text-decoration: none; color: #fff; }
.side li a.active { background: rgba(8, 185, 206, .16); color: #fff; border-left: 3px solid var(--teal); padding-left: 13px; }
.side-foot {
  padding: 12px 16px; font-size: 12px; color: #8fa1bd;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex; justify-content: space-between; gap: 8px;
}
.side-foot a { color: #8fa1bd; }
.side-ver { color: #64799a; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* 顶栏浅色：整页只有侧栏一块深色，读者一眼就知道哪里是导航、哪里是内容。
   以前顶栏和侧栏都是深蓝，两条深色夹着一块浅色，像给内容镶了个相框。 */
.topbar {
  height: 44px;
  background: var(--card);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  -webkit-app-region: drag;
}
.topbar-title { font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.topbar-user { font-size: 12px; color: var(--muted); -webkit-app-region: no-drag; }

/* 手机端：侧栏改成抽屉，默认收起，点 ☰ 展开，点遮罩或换页自动收起 */
.nav-toggle {
  display: none; border: 0; border-radius: 6px; cursor: pointer;
  background: #eef1f5; color: var(--text);
  font-size: 15px; line-height: 1; padding: 5px 8px;
  -webkit-app-region: no-drag;
}
.nav-mask { display: none; }

.spacer { flex: 1; }
.win-controls { width: 0; }
.is-electron .win-controls { width: 8px; }

.content { flex: 1; overflow: auto; padding: 18px; }

/* ---------- 通用 ---------- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card-hd {
  padding: 11px 14px; font-weight: 600; font-size: 13px;
  border-bottom: 1px solid var(--line-soft);
}
.card-bd { padding: 14px; }

.toolbar { display: flex; align-items: center; gap: 10px; }
.toolbar .spacer { flex: 1; }

.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* 概览：主图 2/3 + 待办 1/3（墨刀原型那个右栏待办的结构，宽度按我们自己的信息量收窄） */
.dash-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .dash-row { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
/* 窄屏两列时等宽数字会把「¥0.00 / ¥0.00」顶到换行，收一档字号并禁止在数字中断行 */
@media (max-width: 700px) { .kpi-value { font-size: 18px; white-space: nowrap; } }
.kpi { background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 13px 15px; }
.kpi-label { color: var(--muted); font-size: 11.5px; letter-spacing: .03em; }
.kpi-value { font-size: 22px; font-weight: 600; margin-top: 5px; letter-spacing: .2px; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.kpi-hint { color: var(--muted); font-size: 11.5px; margin-top: 4px; }

/* ---------- 表格（精密数据风：分层表头 / 列分隔 / 等宽数字 / 合计钉底） ---------- */
.table-wrap { overflow: auto; }
table.tb { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tb th, table.tb td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap; }
/* 表头是一层「工具栏色」而不是随手一层灰：字距拉开、字号收小，用来和正文分开 */
table.tb th { background: var(--surface); color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: .04em; border-bottom: 1px solid var(--line-strong); }
table.tb tbody tr:hover { background: #f9fbfd; }
table.tb tbody tr:last-child td { border-bottom: 0; }
/* 合计行钉在表底，和表头同一个分层色，扫一眼就知道那是汇总不是数据 */
table.tb tfoot td { background: var(--surface); border-top: 1px solid var(--line-strong); border-bottom: 0; font-weight: 500; }
.al-right, .tb .al-right { text-align: right; font-variant-numeric: tabular-nums; }
/* 数字列：等宽字体 + 左侧细列线。单据表身不参与（.doc-table 自己有一套列宽） */
table.tb:not(.doc-table) th.al-right,
table.tb:not(.doc-table) td.al-right { border-left: 1px solid var(--col-sep); font-family: var(--mono); }
table.tb:not(.doc-table) th.al-right { font-family: inherit; }
.ops { display: inline-flex; gap: 9px; align-items: center; }
.ops .sep { color: #dbe3ed; }
.ops a.danger, .ops .danger { color: var(--danger); }
.num { font-variant-numeric: tabular-nums; }
.num-warn { color: var(--warn); font-weight: 600; }
.num-up { color: var(--up); }
.num-down { color: var(--down); }
/* 负数金额（退货/红冲把净额压成负）：和涨跌色无关，只表示「这个数是负的」 */
.amt-neg { color: var(--neg); font-variant-numeric: tabular-nums; }

/* 品名后面跟一句「上次 ¥59」——批发报价基本靠回忆上次成交价，
   翻旧单太慢，看不见就又按错价开了。同一行内显示，不额外占行高。 */
.doc-name-cell .last-price {
  margin-left: 6px; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 本单数量超过现有库存：库存数字标红，悬停给出「过账后会变成多少」 */
.stock-short {
  color: var(--neg); font-weight: 600;
  text-decoration: underline dotted; cursor: help;
}
.dash { color: var(--faint); }
.empty { padding: 22px; text-align: center; color: var(--muted); }
.error { padding: 16px; color: #b42318; background: #fff4f2; border: 1px solid #ffd6cf; border-radius: 8px; }
.loading { padding: 24px; color: var(--muted); text-align: center; }

.tag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; letter-spacing: .02em; }
.tag-green { background: #e6f6ec; color: #178f4a; }
.tag-red { background: #fdecec; color: #c1362f; }
.tag-blue { background: #e8f2ff; color: #1a63c9; }
.tag-warn { background: #fff3e0; color: var(--warn); }

/* ---------- 表单 ---------- */
input, select, textarea {
  font: inherit; color: inherit;
  border: 1px solid #d5dde8; border-radius: 6px;
  padding: 6px 9px; background: #fff; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--action); box-shadow: 0 0 0 3px rgba(14, 111, 125, .13); }
.search { width: 220px; }
.form-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.form-row label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }

.btn {
  border: 1px solid transparent; border-radius: 6px; padding: 6px 14px;
  font: inherit; cursor: pointer; background: #fff;
}
.btn-primary { background: var(--action); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--action-hover); }
.btn-ghost { background: #fff; border-color: #d5dde8; color: var(--text); }
.btn-ghost:hover { border-color: var(--action); color: var(--link); }
.btn-danger { background: var(--danger); color: #fff; font-weight: 600; }
.btn-danger:hover { background: #8f1d17; }
.btn-block { width: 100%; padding: 9px; }

/* ---------- 弹窗 ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(9, 20, 38, .45);
  display: grid; place-items: center; z-index: 50;
}
.modal { background: #fff; border-radius: 12px; overflow: hidden; max-height: 88vh; display: flex; flex-direction: column; }
.modal-hd { padding: 13px 16px; font-weight: 600; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.modal-x { margin-left: auto; border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--muted); }
.modal-bd { padding: 16px; overflow: auto; }
.modal-ft { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.modal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.span2 { grid-column: span 2; }
.field-label { color: var(--muted); font-size: 12px; }
.req { color: #d63c3c; font-style: normal; margin-left: 3px; }
.form-error { color: #c1362f; font-size: 12px; min-height: 16px; }

/* 多选勾选组（权限点） */
.chk-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
  padding: 8px 10px; border: 1px solid #e2e9f1; border-radius: 8px; background: #fbfdff;
}
.chk-item { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.chk-item input { margin-top: 2px; flex: 0 0 auto; }
.chk-name { color: var(--text); }
.chk-note { color: var(--muted); font-style: normal; font-size: 11.5px; }
.chk-item.off { opacity: .55; cursor: not-allowed; }
/* 整组置灰（选了「管理员」时用）：勾了也不存，别让人以为生效了 */
.chk-grid.off { opacity: .5; background: #f4f7fa; }
.chk-grid.off .chk-item { cursor: not-allowed; }
@media (max-width: 820px) { .chk-grid { grid-template-columns: 1fr; } }

/* ---------- 登录 ---------- */
/* 登录页：跟系统内一致的中性底 + 一张安静的卡。
   原来是一整屏青蓝径向渐变加 60px 投影，那是 2015 年的做法，也跟系统其它页面不是一套语言。 */
.login-wrap {
  height: 100%; display: grid; place-items: center;
  background: var(--bg);
}
.login-card {
  width: 360px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.login-logo { font-size: 20px; font-weight: 500; color: var(--text); letter-spacing: .04em; }
.login-sub { color: var(--muted); font-size: 12px; margin-top: -6px; margin-bottom: 4px; }
.login-hint { color: var(--muted); font-size: 11.5px; text-align: center; }
.login-ver { color: #b6c0ce; font-size: 11px; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ---------- 明细编辑器 ---------- */
.line-editor { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.line-bar { display: flex; gap: 8px; align-items: center; padding: 10px; background: #fbfdff; border-bottom: 1px solid var(--line); }
.line-bar select { min-width: 240px; }
.line-total { padding: 10px 12px; text-align: right; border-top: 1px solid var(--line); color: var(--muted); }
.money-strong { color: var(--text); font-weight: 600; font-size: 15px; }

/* ---------- 条形图 ---------- */
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 52px 1fr 96px; align-items: center; gap: 10px; }
.bar-label { color: var(--muted); font-size: 11.5px; }
.bar-track { height: 10px; background: #eef3f8; border-radius: 6px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--action); border-radius: 6px; }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 顾客显示屏 ---------- */
.cash-screen {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; background: radial-gradient(circle at 50% 0%, #10306b 0%, #06122a 70%); color: #e9f2ff;
}
.cash-title { font-size: 44px; letter-spacing: 8px; font-weight: 300; }
.cash-sub { color: #8fb2e0; text-align: center; margin-top: 6px; }
.cash-kpis { display: flex; gap: 46px; margin-top: 26px; }
.cash-kpis div { display: flex; flex-direction: column; align-items: center; }
.cash-kpis b { font-size: 30px; color: var(--action); font-variant-numeric: tabular-nums; }
.cash-kpis span { color: #8fb2e0; font-size: 12px; margin-top: 4px; }
.cash-tip { color: #6f8fbd; font-size: 13px; }

/* ---------- 点图看大图 ---------- */
.img-zoomable { cursor: zoom-in; }
.img-zoom {
  position: fixed; inset: 0; z-index: 200; cursor: zoom-out;
  background: rgba(8, 16, 30, .84);
  display: grid; place-items: center; padding: 52px 24px 24px;
}
.img-zoom-img {
  max-width: 94vw; max-height: calc(100vh - 100px);
  border-radius: 8px; background: #fff; cursor: default;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.img-zoom-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 46px;
  display: flex; align-items: center; gap: 10px; padding: 0 18px;
  color: #e8eef7; font-size: 13px;
  background: linear-gradient(180deg, rgba(6, 12, 24, .74), rgba(6, 12, 24, 0));
}
.img-zoom-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-zoom-x {
  margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; line-height: 1; text-decoration: none;
  background: rgba(255, 255, 255, .14);
}
.img-zoom-x:hover { background: rgba(255, 255, 255, .3); }

/* ---------- Toast ---------- */
#toast { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 99; }
.toast-item {
  padding: 9px 14px; border-radius: 8px; color: #fff; font-size: 12.5px;
  background: #22314a; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); animation: slidein .18s ease-out;
}
.toast-success { background: #178f4a; }
.toast-error { background: #c1362f; }
@keyframes slidein { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 启动动画 ---------- */
.boot-spin { position: fixed; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px; transform: rotate(45deg); animation: spin 1.2s linear infinite; }
.boot-spin span { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); opacity: .3; animation: pulse 1s infinite alternate; }
.boot-spin span:nth-child(1) { top: 0; left: 0; }
.boot-spin span:nth-child(2) { top: 0; right: 0; animation-delay: .4s; }
.boot-spin span:nth-child(3) { right: 0; bottom: 0; animation-delay: .8s; }
.boot-spin span:nth-child(4) { bottom: 0; left: 0; animation-delay: 1.2s; }
@keyframes spin { to { transform: rotate(405deg); } }
@keyframes pulse { to { opacity: 1; } }

/* ---------- 小票 ---------- */
.receipt-page { background: #eef2f7; min-height: 100%; padding: 24px; display: flex; justify-content: center; }
.receipt { width: 300px; background: #fff; padding: 16px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); font-family: "Consolas", "Microsoft YaHei", monospace; font-size: 12px; }
.receipt h1 { font-size: 14px; text-align: center; margin: 0 0 10px; letter-spacing: 1px; }
.receipt .meta { color: #555; margin-bottom: 10px; }
.receipt table { width: 100%; border-collapse: collapse; }
.receipt td, .receipt th { padding: 3px 0; font-weight: normal; }
.receipt .r { text-align: right; }
.receipt hr { border: 0; border-top: 1px dashed #bbb; margin: 8px 0; }
.receipt .total { font-weight: 700; font-size: 14px; }
.receipt-actions { display: flex; gap: 8px; justify-content: center; padding: 16px; }

.muted { color: var(--muted); font-size: 12px; }

/* ---------- 规格矩阵 ---------- */
.mtx-wrap { overflow: auto; max-height: 60vh; }
table.mtx th, table.mtx td { text-align: center; padding: 6px 4px; font-size: 12.5px; }
table.mtx th:first-child, table.mtx td:first-child { text-align: left; }
.mtx-color { font-weight: 600; color: #334; white-space: nowrap; }
.mtx-zero { color: #d63c3c; font-weight: 700; background: #fff6f5; }
.mtx-empty { color: #cbd5e1; }
.mtx-input { text-align: center; }
.mtx-stock { color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.mtx-meta { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.mtx-total { margin-left: auto; margin-right: 12px; color: var(--muted); }
.mtx-sku { font-size: 11.5px; color: #4a5a72; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #d5dde8; border-radius: 20px; padding: 3px 10px; font-size: 12.5px; background: #fff; cursor: pointer; }
.chip input { margin: 0; }
.kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); color: var(--muted); }
.kv b { color: var(--text); }
.al-center { text-align: center; }

/* ---------- 基础设置 ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.tab { padding: 5px 12px; border-radius: 16px; font-size: 12.5px; color: var(--muted); background: #f4f7fb; }
.tab:hover { text-decoration: none; color: #0a6b7a; }
.tab.active { background: var(--action); color: #fff; font-weight: 600; }
.tab-desc { color: var(--muted); font-size: 12px; margin: -4px 0 2px; }
.grp-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.grp-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.size-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.size-chip {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid #d5dde8; border-radius: 6px; padding: 2px 6px 2px 8px;
  font-size: 12.5px; background: #fbfdff;
}
.size-chip.used { border-color: #9fd8e2; background: #f1fcfe; }
.size-chip a { color: var(--text); }
.size-chip i { font-style: normal; font-size: 10px; color: #fff; background: var(--action); border-radius: 8px; padding: 0 4px; }
.size-chip .mv { color: var(--muted); padding: 0 2px; }
.size-chip .del { color: #c1362f; padding: 0 2px; }
.size-chip a:hover { text-decoration: none; color: #0a6b7a; }
.ops a.disabled { color: #c3ccd8; pointer-events: none; }
.hint { color: var(--muted); font-size: 11.5px; line-height: 1.7; background: #f8fbff; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12px; }
.form-grid label.span2 { grid-column: span 2; }

/* ---------- 分段切换 / 小工具 ---------- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg a { padding: 5px 14px; font-size: 12.5px; color: var(--muted); background: #fff; }
.seg a:hover { text-decoration: none; color: #0a6b7a; }
.seg a.on { background: var(--action); color: #fff; font-weight: 600; }
tfoot td { font-weight: 600; background: #fbfdff; }

/* ---------- 分页 ---------- */
.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 10px 4px 2px; }
.pager .muted { margin-right: auto; }
.pager .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- 商品图片 / 批量 / 价格项 ---------- */
.thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.thumb-empty { display: grid; place-items: center; color: var(--faint); background: #fafcfe; border-style: dashed; font-size: 11px; }
.img-preview { min-height: 160px; display: grid; place-items: center; background: #f7fafd; border: 1px dashed var(--line); border-radius: 10px; padding: 10px; }
.img-preview img { max-width: 100%; max-height: 260px; border-radius: 8px; }
/* 商品表单里的图片区块：预览在左、按钮在右，和价格项区块同一种「附加字段」结构 */
.pic-edit { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.pic-edit .img-preview { flex: 0 0 180px; min-height: 120px; }
.pic-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
.price-block { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.price-hd { font-size: 12.5px; font-weight: 600; color: #334; margin-bottom: 8px; }
.price-row { display: flex; align-items: center; gap: 10px; }
.price-name { min-width: 110px; }
.batch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 10px; }
.batch-item { display: grid; grid-template-columns: 18px 76px 1fr; align-items: center; gap: 6px; font-size: 12.5px; }
.batch-item input[type="text"], .batch-item input[type="number"], .batch-item select { padding: 4px 8px; }

/* ---------- 正式单据版式 ---------- */
.doc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 14px; }
.doc-hd { border-bottom: 2px solid var(--brand); padding-bottom: 12px; margin-bottom: 12px; }
.doc-title { text-align: center; font-size: 20px; font-weight: 700; letter-spacing: 6px; color: var(--brand); margin-bottom: 12px; }
.doc-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; }
.doc-meta label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.doc-meta label > span { white-space: nowrap; }
.doc-meta select, .doc-meta input { flex: 1; min-width: 0; padding: 5px 8px; }
.doc-code { font-family: Consolas, monospace; color: var(--text); font-weight: 600; background: #f6f9fc; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; flex: 1; }

.doc-search { position: relative; margin-bottom: 10px; }
.doc-search-input { width: 100%; padding: 9px 12px; font-size: 13px; border: 1px solid #cfd9e6; border-radius: 8px; }
.doc-search-input:focus { border-color: var(--action); }
.sg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(15, 35, 65, .12); z-index: 40; max-height: 320px; overflow: auto; }
.sg-item { display: grid; grid-template-columns: 110px 1fr 110px 90px; gap: 10px; align-items: center; padding: 8px 12px; font-size: 12.5px; cursor: pointer; }
.sg-item:hover, .sg-item.on { background: #eefbfd; }
.sg-code { font-family: Consolas, monospace; color: #4a5a72; }
.sg-name { color: var(--text); }
.sg-meta { color: var(--muted); font-size: 11.5px; }
.sg-price { text-align: right; color: var(--brand); font-weight: 600; }

.doc-body { border: 1px solid var(--line); border-radius: 8px; overflow: auto; max-height: 46vh; }
/* 箱号（进货单，选填）：按款折叠 —— 折叠行只列款，点开才铺开该款的规格。
   刻意没有「件数」列 —— 箱号只记位置，一记数量就成了第二本库存账。 */
.doc-boxes { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fbfdff; }
.doc-boxes-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 12.5px; }
.doc-boxes-hd b { font-size: 13px; }
.doc-boxes-hd .muted { font-size: 11.5px; }
.doc-boxes-list { display: flex; flex-direction: column; gap: 1px; max-height: 28vh; overflow: auto; }
/* 折叠头：一眼能看到「几款、各多少件、箱号填了没」，不用展开 */
.doc-boxes-head { display: grid; grid-template-columns: 14px 92px minmax(0, 1fr) 62px 52px minmax(0, 1.1fr);
  gap: 10px; align-items: center; padding: 5px 8px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.doc-boxes-head:hover { background: #eef5fc; }
.doc-boxes-head.on { background: #eef7ff; }
.box-caret { color: var(--muted); font-size: 10px; }
.box-pcode { font-family: Consolas, monospace; color: #4a5a72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.box-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.box-pspec, .box-pqty { color: var(--muted); font-variant-numeric: tabular-nums; }
.box-pqty { text-align: right; }
.box-pbox { display: flex; align-items: center; gap: 5px; overflow: hidden; }
/* 折叠态下露出的入口：没有它就等于「箱号填写不见了」 */
.box-fill-hint { color: var(--action); border: 1px dashed #a9cdeb; border-radius: 20px;
  padding: 1px 9px; font-size: 11.5px; background: #f3faff; white-space: nowrap; }
.doc-boxes-head:hover .box-fill-hint { border-style: solid; background: #e8f5ff; }
.chip-sm { font-size: 11px; padding: 1px 8px; cursor: default; }
/* 展开后的规格行：缩进挂在款下面，左边一条细线表示从属关系 */
.doc-boxes-sub { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 6px 30px;
  padding: 4px 0 4px 10px; border-left: 2px solid #e2ecf7; }
.doc-boxes-sub .doc-boxes-row { display: grid; grid-template-columns: 72px 52px 46px minmax(0, 1fr);
  gap: 10px; align-items: center; font-size: 12.5px; }
.box-color, .box-size { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.box-qty { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.box-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.box-input { width: 96px; padding: 4px 8px; font-size: 12px; }
.chip-x { color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; }
.chip-x:hover { color: var(--danger); }
/* 单据表身：一行一个 SKU。用 table-layout:fixed + 固定列宽，
   保证「数量/单价/金额」这些数字列在几百行里始终对齐，不会被长品名挤歪。 */
.doc-table { width: 100%; table-layout: fixed; }
.doc-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); white-space: nowrap; }
.doc-table td { padding: 6px 8px; }
.doc-table th:nth-child(2), .doc-table td:nth-child(2) { width: 34px; }   /* 序号 */
.doc-table th:nth-child(3), .doc-table td:nth-child(3) { width: 84px; }   /* 款号 */
.doc-table th:nth-child(5), .doc-table td:nth-child(5) { width: 58px; }   /* 颜色 */
.doc-table th:nth-child(6), .doc-table td:nth-child(6) { width: 46px; }   /* 尺码 */
.doc-table th:nth-child(7), .doc-table td:nth-child(7) { width: 38px; }   /* 单位 */
.doc-table th:nth-child(8), .doc-table td:nth-child(8) { width: 50px; }   /* 库存 */
.doc-table th:nth-child(9), .doc-table td:nth-child(9) { width: 72px; }   /* 数量 */
.doc-table th:nth-child(10), .doc-table td:nth-child(10) { width: 76px; }   /* 单价 */
.doc-table th:nth-child(11), .doc-table td:nth-child(11) { width: 54px; } /* 折扣 */
.doc-table th:nth-child(12), .doc-table td:nth-child(12) { width: 54px; } /* 税率 */
.doc-table th:nth-child(13), .doc-table td:nth-child(13) { width: 86px; } /* 金额 */
.doc-table th:nth-child(14), .doc-table td:nth-child(14) { width: 74px; } /* 操作 */
/* 数字列用等宽数字，位数不同也能上下对齐 */
.doc-table td:nth-child(9), .doc-table td:nth-child(10), .doc-table td:nth-child(13) {
  font-variant-numeric: tabular-nums;
}
/* 表身输入框收窄，跟着列宽走 */
.doc-table .cell-input { width: 100%; }
.doc-table .cell-input.cell-mini { padding: 4px 4px; }
.doc-code-cell { font-family: Consolas, monospace; color: #4a5a72; }
/* 品名是唯一可伸缩的列：超长省略，不换行，避免整行被撑高 */
.doc-name-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-table td:nth-child(4) { min-width: 0; }
.cell-input { width: 78px; padding: 4px 6px; text-align: right; }

/* ---------- 表身：视图切换 / 合计行 / 常驻空行 ---------- */
.doc-view-switch { display: inline-flex; border: 1px solid #cfd9e6; border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.doc-view-switch button {
  border: 0; background: #fff; padding: 8px 14px; font-size: 12.5px;
  color: var(--muted); cursor: pointer; line-height: 1;
}
.doc-view-switch button + button { border-left: 1px solid #cfd9e6; }
.doc-view-switch button.on { background: var(--action); color: #fff; }

/* 合计行：钉在网格底部，与数量/金额列严格对齐 */
.doc-table tfoot td {
  position: sticky; bottom: 0;
  background: #f8fbff; border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 var(--line);
}
.doc-table tfoot .doc-total-label { text-align: left; padding-left: 10px; color: var(--muted); font-size: 12px; }
.doc-table tfoot b { color: var(--text); }

/* 常驻空行：视觉上"还有地方可写"，点一下把焦点送回搜索框 */
.doc-filler td { background: #fff; color: #b9c6d6; cursor: text; border-bottom: 1px dashed #e8eef6; }
.doc-filler:hover td { background: #f8fcff; }
.doc-filler-hint { font-size: 12px; }

/* 按款视图：只读聚合行，不提供输入框 */
.doc-agg td { background: #fcfdff; }
.doc-agg:hover td { background: #f4fafc; }

/* 标准视图：一行一个颜色、尺码横排成矩阵。
   列宽交给 <colgroup> 定死（table-layout:fixed），这样表头的码数和格子里
   的数字是同一个格子宽度，不会再出现"数字偏左、码数偏右"的错位。 */
.doc-table.doc-std { table-layout: fixed; min-width: 1040px; }
.doc-table.doc-std th, .doc-table.doc-std td { width: auto; }
.doc-table.doc-std th { white-space: nowrap; padding: 6px 4px; color: #4a5a72; }
/* 尺码列表头居中，和下面格子里的数字同一条竖线；占位「—」弱化 */
.doc-table.doc-std th.std-th { text-align: center; padding-left: 0; padding-right: 0; }
.doc-table.doc-std th.std-th.dash { color: #c3cfdd; font-weight: 400; }
.doc-table.doc-std .doc-name-cell { max-width: none; }
.doc-table.doc-std td.std-cell {
  padding: 0; text-align: center; cursor: text;
  font-variant-numeric: tabular-nums; color: #93a3b8;
}
.doc-table.doc-std td.std-cell.on { color: var(--text); font-weight: 600; background: #f2fbff; }
/* 该行没有这个码：显示「-」，不可编辑 */
.doc-table.doc-std td.std-cell.empty { color: #cfd8e3; }
/* 选中行整行高亮（和订货系统一致的暖黄），表头跟着这行换码 */
.doc-table.doc-std tr.doc-std-row.on td { background: #fff3cd; }
.doc-table.doc-std tr.doc-std-row { cursor: pointer; }
.doc-table.doc-std tr.doc-std-row.on td.std-cell.on { background: #ffeaa7; }
/* 数量列本身就是输入框时（无尺码商品）撑满 */
.doc-table.doc-std .std-input.std-qty { width: 56px; }
/* 输入框铺满整格：与上方码数框同宽，点格子任何位置都能落进输入框 */
.doc-table.doc-std .std-input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 6px 0; text-align: center;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
  font: inherit; font-variant-numeric: tabular-nums; color: inherit;
}
/* 去掉数字框的上下小箭头：它会占宽度，导致数字整体偏左、和码数对不齐 */
.doc-table.doc-std .std-input::-webkit-outer-spin-button,
.doc-table.doc-std .std-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.doc-table.doc-std .std-input:hover { border-color: #d7e4f0; background: #fff; }
.doc-table.doc-std .std-input:focus {
  border-color: var(--action); background: #fff; outline: none;
  box-shadow: 0 0 0 2px rgba(30, 160, 190, 0.12);
}
.doc-table.doc-std .std-input::placeholder { color: #cbd6e3; }

/* 尺码组选择器 + 多组提示（v1.5.0 的表头策略已改成「点行换码」，这两块不再使用，
   样式留着只影响历史页面快照，不删是为了避免误伤别处引用） */
.std-hint {
  margin: -2px 0 8px; padding: 8px 12px; font-size: 12.5px; line-height: 1.5;
  color: #8a6d3b; background: #fff8e6; border: 1px solid #f3e2b8; border-radius: 8px;
}

.doc-ft { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 16px 28px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
@media (max-width: 1100px) { .doc-ft { grid-template-columns: 1fr; } }
.doc-ft-left { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); min-width: 0; }
.doc-ft-left label { display: inline-flex; align-items: center; gap: 6px; }
.doc-extra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.doc-extra label { display: inline-flex; align-items: center; gap: 6px; }
.doc-ft-right { display: flex; flex-direction: column; gap: 5px; justify-self: end; width: 100%; }
.doc-sum { display: flex; justify-content: space-between; gap: 24px; font-size: 12.5px; color: var(--muted); }
.doc-sum b { color: var(--text); font-variant-numeric: tabular-nums; }
.doc-sum.total { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; font-size: 13.5px; }
.doc-sum.total b.doc-owe { color: var(--up); font-size: 16px; }
.doc-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; }
/* 打印用的隐藏 iframe：尺寸归零但不 display:none（display:none 的 iframe 打不出内容） */
.print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }
/* 打印预览：A4 比例的小窗口，看清了再点打印 */
.print-preview-frame { width: 100%; height: 62vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
/* 过账后告诉用户「打哪张单」，否则打印按钮亮了也不知道会打出什么 */
.doc-saved { margin-right: auto; color: var(--muted); font-size: 11.5px; }
.doc-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.doc-balance { color: var(--muted); }

/* ---------- 单据新增列 / 选项 ---------- */
.doc-spec { color: #334; font-size: 11.8px; max-width: 260px; }
.cell-mini { width: 62px; }
.doc-words { margin-top: 6px; font-size: 12.5px; color: var(--brand); font-weight: 600; text-align: right; letter-spacing: 1px; }
.doc-meta-blank { visibility: hidden; }.opt-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.opt-row i { font-style: normal; }

/* ---------- 单据管理筛选器 ---------- */
.filter-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.filter-bar label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.filter-bar label > span { white-space: nowrap; }
.filter-bar select, .filter-bar input { padding: 5px 8px; font-size: 12.5px; }
.filter-bar input[type="date"] { width: 138px; }
.doc-summary { display: flex; gap: 22px; align-items: center; font-size: 12.5px; color: var(--muted); padding: 0 2px; }
.doc-summary b { color: var(--text); font-variant-numeric: tabular-nums; }
.doc-summary .warn b { color: var(--warn); }
.doc-color { font-weight: 600; color: #334; white-space: nowrap; }

/* ---------- 表身：颜色链接 / 规格 chip / 行编辑 ---------- */
.doc-color-link { color: var(--brand); font-weight: 600; border-bottom: 1px dashed rgba(6,32,81,.35); }
.doc-color-link:hover { text-decoration: none; color: #084c58; }
.spec-chip-wrap { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.spec-chip {
  display: inline-block; padding: 1px 7px; border-radius: 5px;
  background: #eef7fa; border: 1px solid #cfe8ee; color: #245b68;
  font-size: 11.5px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.spec-chip:hover { background: #eef6f8; border-color: var(--action); }
.size-edit-row { display: grid; grid-template-columns: 90px 92px 1fr; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.size-edit-name { font-weight: 600; color: #334; }

/* ---------- 库存管理 ---------- */
.wh-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wh-label { font-size: 12.5px; color: var(--muted); }
.wh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wh-chip {
  padding: 3px 12px; border-radius: 16px; border: 1px solid #d5dde8; background: #fff;
  font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none;
}
.wh-chip:hover { border-color: var(--action); color: var(--link); }
.wh-chip.on { background: var(--action); border-color: var(--action); color: #fff; font-weight: 600; }
.inline-check { display: inline-flex; align-items: center; gap: 6px; }
.num-zero { color: #b8c3d2; }
.stock-tb tbody tr.row-click { cursor: pointer; }
.stock-tb tbody tr.row-click:hover { background: #f2fbff; }
.row-zero td { background: #fcfcfd; color: #97a4b6; }
.detail-head { display: flex; gap: 14px; align-items: center; }
.thumb-lg { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.thumb-lg.thumb-empty { display: grid; place-items: center; font-size: 11px; color: var(--faint); background: #fafcfe; border-style: dashed; }
.kpi-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mini-kpi { background: #f7fafd; border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; min-width: 92px; }
.mini-kpi span { display: block; font-size: 11.5px; color: var(--muted); }
.mini-kpi b { font-size: 17px; font-variant-numeric: tabular-nums; }
.mini-kpi.warn b { color: var(--warn); }

/* ---------- 库存列表：颜色单元格 ---------- */
.color-cell { display: inline-flex; align-items: center; gap: 6px; }
.color-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); display: inline-block; }
.mono { font-family: Consolas, monospace; color: #3d4d63; }

/* ---------- 明细交叉表（行=仓库，列=码数） ---------- */
.ct-table { min-width: 100%; }
.ct-table th, .ct-table td { white-space: nowrap; }
.ct-table .ct-corner { background: #eef3f9; color: #4a5a72; font-size: 11.5px; position: sticky; left: 0; z-index: 2; }
.ct-table .ct-wh { font-weight: 600; color: #334; background: #fbfdff; position: sticky; left: 0; z-index: 1; }
.ct-table .ct-sum { background: #f6fafd; font-weight: 600; }
.ct-table tbody tr:hover td { background: #f2fbff; }
.ct-table tr.ct-total td { background: #eef7fa; font-weight: 600; border-top: 2px solid #cfe8ee; }
.ct-table tr.ct-total .ct-wh { background: #e3f2f6; }
.ct-table tr.row-zero td { color: #a9b4c4; }
.warn-hint { border-color: #f3d8a8; background: #fffaf0; color: #8a6116; }

/* ---------- 网店中心 ---------- */
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 11.5px; line-height: 18px; font-weight: 600; white-space: nowrap;
}
.badge-on { background: #e4f7ec; color: #14794a; border: 1px solid #bfe9d3; }
.badge-off { background: #eef1f5; color: #6b7a90; border: 1px solid #dde3ea; }
.badge-warn { background: #fff3e0; color: var(--warn); border: 1px solid #f6dcb4; }

.row-acts { display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.row-acts a { font-size: 12.5px; color: #0a6b7a; }
.row-acts a:hover { text-decoration: underline; }
.row-acts a.danger { color: #c0392b; }

.warn-txt { color: var(--warn); }
.up { color: var(--up); font-variant-numeric: tabular-nums; }
.down { color: var(--down); font-variant-numeric: tabular-nums; }

/* 商品搜索结果列表 */
.pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 210px; overflow: auto; }
.pick-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer;
}
.pick-item:hover { background: #f2fbff; border-color: #bfe6ee; }
.pick-item .muted { margin-left: auto; font-size: 12px; }

/* 上架数量输入 */
.qty-in { width: 92px; padding: 4px 8px; text-align: right; }

/* 占用率条 */
.rate-cell { display: flex; align-items: center; gap: 8px; }
.rate-cell .bar-track { flex: 1; height: 8px; }
.rate-cell .rate-val { font-size: 12px; color: var(--muted); min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }

/* 口径说明列表 */
.note-list { margin: 0; padding-left: 18px; color: #4a5a72; font-size: 12.5px; line-height: 1.9; }

/* 超卖预警 */
.badge-danger { background: #fdecec; color: #c0392b; border: 1px solid #f5c6c2; }
.over-main { color: #c0392b; font-weight: 600; }
.danger-chip { color: #c0392b; }
.danger-chip b { color: #c0392b; }

/* 库存三口径：网店占用 / 可用 */
.web-hold { color: #b4530a; font-variant-numeric: tabular-nums; }
.web-hold b { color: #b4530a; }
.avail { color: #14794a; font-variant-numeric: tabular-nums; }
.avail b { color: #14794a; }
.num.avail { color: #14794a; }
.mini-kpi.web b { color: #b4530a; }
.mini-kpi.avail b { color: #14794a; }
.ct-table .ct-web { background: #fff8ef; color: #b4530a; font-weight: 600; }
.ct-table .ct-avail { background: #f2fbf6; color: #14794a; font-weight: 600; }
/* 库存明细：一行一个仓库，点开铺出这个仓自己的小表
   （横向码数、纵向 总库存 / 可用库存 / 网店占用）。 */
table.tb.wh-fold-table { table-layout: fixed; }
.ct-table tr.ct-wh-row { cursor: pointer; }
.ct-table tbody tr.ct-wh-row:hover td { background: #eef8fd; }
.wh-caret { display: inline-block; width: 15px; margin-right: 2px; color: var(--muted); font-size: 10px; }
.ct-table tr.wh-sub td { background: #f4f9fd; padding: 10px 12px 12px 24px; }
.ct-table tr.wh-sub.hide { display: none; }
/* 展开的小表：贴着外层表头对齐太挤，用浅色描边独立成块 */
table.tb.wh-mtx { width: 100%; background: #fff; border: 1px solid #e2ecf6; border-radius: 6px; font-size: 12px; }
table.tb.wh-mtx th { background: #f1f7fd; font-size: 11px; padding: 5px 8px; }
table.tb.wh-mtx td { padding: 5px 8px; border-bottom: 1px solid #eef4fa; }
table.tb.wh-mtx tbody tr:last-child td { border-bottom: 0; }
table.tb.wh-mtx .wm-corner { width: 78px; }
table.tb.wh-mtx .wm-label { font-weight: 600; color: #33425c; white-space: nowrap; }
table.tb.wh-mtx .wm-sum { font-weight: 600; background: #fafcfe; font-family: var(--mono); }
table.tb.wh-mtx tr.wm-avail td { color: #14794a; }
table.tb.wh-mtx tr.wm-hold td { color: #b4530a; }
.sec-title { font-size: 13px; font-weight: 600; color: #33425c; margin: 2px 0 -2px; }

/* 网店商品编号 / 网店销售 / 网店退货 / 导入 */
.goodsno { color: #0a6b7a; font-weight: 600; letter-spacing: .2px; }
.sold-txt { color: #2b6cb0; font-variant-numeric: tabular-nums; }
/* 退货用紫色：既不能和销售的蓝混，也不能用红色吓人（退货是正常业务） */
.ret-txt { color: #7c3aed; font-variant-numeric: tabular-nums; }
.mini-kpi.sold b { color: #2b6cb0; }.mini-kpi.ret b { color: #7c3aed; }
.doc-summary .sold-txt b { color: #2b6cb0; }
.doc-summary .ret-txt b { color: #7c3aed; }
.goodsno-in { width: 100%; min-width: 120px; padding: 4px 8px; font-family: Consolas, monospace; font-size: 12.5px; }

/* 每日销售录单：单据式表身。列和销售单表身不是一套（这里要「上架/已售/可售」），
   所以单开一个类，别去抢 .doc-table 的 nth-child 列宽。 */
.daily-table { width: 100%; table-layout: fixed; }
.daily-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); white-space: nowrap; }
.daily-table td { padding: 5px 8px; }
.daily-table .cell-input { width: 100%; }
.daily-table td.al-right, .daily-table th.al-right { font-variant-numeric: tabular-nums; }
/* 填了销量的行整行提亮，一眼看出这单录了哪几行 */
.daily-table tr.on td { background: #f4f9ff; }
.daily-table tr.on td:first-child { box-shadow: inset 3px 0 0 var(--action); }
.daily-hd { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.daily-hd .field { margin: 0; }
/* 选品搜索：一整店几十上百个规格全平铺比表身还长，改成「搜一个加一个」。
   .sg 是全局的绝对定位建议面板，这里只在打开时显示，避免空面板留一条边框。 */
.daily-search { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.daily-search .doc-search-ic { font-size: 12.5px; color: var(--muted); }
.daily-search .doc-search-input { flex: 1 1 0; width: auto; min-width: 0; }
.daily-search .doc-search-hint { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.daily-search .sg { display: none; }
.daily-search .sg.open { display: block; }
/* 建议项：货号 | 品名 颜色/尺码 | 可售 · 上架 | 单价。中间那列留弹性但别撑太开 */
.daily-search .sg-item { grid-template-columns: 108px minmax(0, 1fr) 132px 88px; }
.sg-none { padding: 12px; font-size: 12.5px; color: var(--muted); }
/* 建议项里的「颜色 / 尺码」：跟着品名后面，靠左边距分开（空格会被 HTML 折叠掉） */
.sg-dim { margin-left: 8px; color: var(--muted); font-size: 11.5px; }
/* 表身右侧的「×」：只从本单移除，不动已保存的记录 */
.row-del { color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.row-del:hover { color: var(--danger); }

/* ---------- 上架明细：按商品折叠 ----------
   一个店几十个码平铺时比单据还长，想找某一款得上下来回翻。
   折叠行是一条 colspan 通栏（不参与列宽），SKU 行仍然对齐同一套表头。 */
.lst-toolbar { display: flex; align-items: center; gap: 12px; font-size: 12px; padding: 0 2px 8px; }
.lst-toolbar .lnk { color: var(--action); font-size: 12px; text-decoration: none; }
.lst-toolbar .lnk:hover { text-decoration: underline; }
/**
 * 折叠行必须真的藏起来。
 * 手机端 `table.tb:not(.mtx) tr` 会把 tr 改成 display:grid，那条规则特异性 (0,2,2)，
 * 比 `.lst-fold tr.hide` 的 (0,2,1) 高 —— 结果「收起」只是箭头和底色变了、SKU 行还杵在那儿，
 * 用户看到的就是「点了没反应」。带上 :not(.mtx) 把特异性抬到 (0,3,2) 才压得住。
 */
table.tb:not(.mtx) tr.hide,
.lst-fold tr.hide { display: none; }
.lst-fold tr.lst-grp > td { padding: 0; background: #f4f8fc; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lst-fold tr.lst-grp { cursor: pointer; }
.lst-fold tr.lst-grp:hover > td, .lst-fold tr.lst-grp.on > td { background: #e9f5fc; }
.lst-band { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 12.5px; }
.lst-caret { width: 12px; flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.lst-name { font-weight: 600; color: var(--text); max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.lst-code { font-size: 12px; color: #4a5a72; }
.lst-shop { font-size: 11.5px; color: var(--muted); }
.lst-sep { color: var(--line-strong); }
.lst-chips { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.lst-chips b { color: var(--text); font-variant-numeric: tabular-nums; }
/* 折叠行上的「整款下架」：危险操作，但别做得比数据还抢眼，用描边小按钮 */
.lst-off {
  flex: 0 0 auto; margin-left: 10px; padding: 2px 9px; border-radius: 4px;
  font-size: 11.5px; line-height: 1.5; text-decoration: none;
  color: var(--danger); background: #fff; border: 1px solid rgba(193, 54, 47, .3);
}
.lst-off:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
/* SKU 行挂在该商品下面：左边一条细线表示从属 */
.lst-fold tr.lst-sku > td:first-child { box-shadow: inset 2px 0 0 var(--line-strong); }
/* 销售 / 退货 单据类型切换：两个并排的「卡片式」按钮，选中的那个有底色 */
.daily-kind { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: -2px; }
.kind-btn { display: flex; flex-direction: column; gap: 2px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: #fbfdff; text-decoration: none; color: inherit; line-height: 1.3; }
.kind-btn b { font-size: 13px; color: #33425c; }
.kind-btn span { font-size: 11.5px; color: var(--muted); }
.kind-btn:hover { border-color: #b9d4ea; background: #f2f9ff; }
.kind-btn.on { border-color: var(--action); background: #eef7ff; box-shadow: 0 0 0 1px var(--action) inset; }
.kind-btn.on b { color: var(--action); }
.kind-note { font-size: 11.5px; color: var(--muted); }
/* 退货单的输入框描成紫色，和销售单区分开，避免录错单据 */
.daily-table .cell-input.ret { border-color: #cbb6f5; }
.daily-table .cell-input.ret:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124, 58, 237, .12); }
.kw-group { display: inline-flex; align-items: center; gap: 6px; }
.kw-group .search { min-width: 280px; }
.btn-sm { padding: 3px 10px; font-size: 12.5px; }
.file-in { padding: 4px; border: 1px dashed #c8d3e0; border-radius: 8px; background: #fafcff; }
.import-steps { display: flex; flex-direction: column; gap: 10px; }
.import-steps .step { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fbfdff; }
.import-steps .step > b { display: block; font-size: 12.5px; color: #33425c; margin-bottom: 6px; }
.import-steps .step-body { display: flex; flex-direction: column; gap: 8px; }
.err-reason { color: #c0392b; font-size: 12.5px; }

/* ---------- 商品联想下拉（portal 到 body，fixed 定位） ---------- */
.pick-drop {
  position: fixed; z-index: 3000;
  background: #fff; border: 1px solid #cfdbe8; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 35, 65, .18);
  overflow: auto; padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.pick-drop .pick-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px; cursor: pointer;
  font-size: 13px; line-height: 1.45;
}
.pick-drop .pick-item:hover,
.pick-drop .pick-item.active { background: #e8f7fb; }
.pick-drop .pick-item.active { outline: 1px solid #9fdfeb; outline-offset: -1px; }
.pick-code { min-width: 82px; color: #0a6b7a; font-weight: 600; font-size: 12.5px; }
.pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-meta { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pick-empty { padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.pick-empty.danger { color: #c0392b; }
.product-kw { padding-right: 8px; }
ul.pick-drop { margin: 0; list-style: none; }
ul.pick-drop li { list-style: none; }

/* ---------- 盘点 / 调拨 ---------- */
.pick-scope {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  max-height: 300px; overflow: auto; padding: 4px;
  border: 1px solid var(--line); border-radius: 8px; background: #fbfdff;
}
.scope-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px;
  border-radius: 7px; cursor: pointer; font-size: 12.5px;
  border: 1px solid transparent;
}
.scope-item:hover { background: #eef8fb; border-color: #cfeaf1; }
.scope-item .mono { min-width: 68px; color: #0a6b7a; font-weight: 600; }
.scope-item .muted { margin-left: auto; font-size: 11.5px; }
.seg { display: inline-flex; gap: 4px; background: #f1f5f9; padding: 3px; border-radius: 8px; }
.seg a { padding: 5px 14px; border-radius: 6px; font-size: 12.5px; color: var(--muted); }
.seg a.on { background: #fff; color: #062051; font-weight: 600; box-shadow: 0 1px 3px rgba(15,35,65,.12); }
.seg a:hover { text-decoration: none; }

/* ---------- 商品图册 / 客户报价 ---------- */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.gal-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: .15s; display: flex; flex-direction: column;
}
.gal-card:hover { border-color: #9cc3d8; box-shadow: 0 4px 14px rgba(10,40,70,.08); transform: translateY(-1px); }
.gal-card.out { opacity: .5; }
.gal-pic {
  height: 190px; background: #f3f6fa center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: #a8b7c8; font-size: 26px; font-weight: 700; letter-spacing: 1px;
}
.gal-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-bd { padding: 9px 11px 11px; }
.gal-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #0a6b7a; font-weight: 700; }
.gal-name { font-size: 13px; margin-top: 2px; line-height: 1.35; height: 2.7em; overflow: hidden; }
.gal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; gap: 6px; }
.gal-qty { font-size: 12px; font-weight: 700; color: #14794a; }
.gal-qty.zero { color: #a33; }
.gal-price { font-size: 12.5px; color: var(--brand); font-weight: 700; }
.gal-badge { position: absolute; }
.gal-flag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: #eef6f1; color: #14794a; }
.gal-flag.no { background: #f7eaea; color: #a33; }

/* 报价单预览（A4 比例，打印/导出共用同一套排版） */
.quote-sheet {
  width: 794px; max-width: 100%; background: #fff; color: #1b2430;
  padding: 34px 38px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; line-height: 1.55;
}
.quote-sheet h1 { font-size: 21px; margin: 0 0 2px; letter-spacing: .5px; }
.quote-sheet .sub { color: #6b7a90; font-size: 11.5px; }
.quote-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #0f2b63; padding-bottom: 12px; margin-bottom: 16px; }
.quote-meta { text-align: right; font-size: 11.5px; color: #445; line-height: 1.7; }
.quote-items { width: 100%; border-collapse: collapse; table-layout: fixed; }
.quote-items th { background: #eef2f8; font-size: 12px; text-align: left; padding: 8px 9px; border-bottom: 1px solid #d8e0ea; }
.quote-items td { padding: 10px 9px; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
.quote-items .pic { width: 84px; height: 84px; object-fit: contain; border-radius: 5px; background: #f8fafc; display: block; }
.quote-items .no-pic { width: 84px; height: 84px; border-radius: 5px; background: #f8fafc; display: flex; align-items: center; justify-content: center; color: #a8b7c8; font-size: 10px; }
.quote-items .q-name { font-size: 13.5px; line-height: 1.35; color: #1b2430; }
.quote-items .q-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #5b6b7f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quote-foot { margin-top: 16px; font-size: 11px; color: #667; line-height: 1.8; border-top: 1px dashed #d8e0ea; padding-top: 10px; }
.quote-total { text-align: right; font-size: 14px; font-weight: 700; margin-top: 10px; }
.quote-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; max-height: 420px; overflow: auto; }
.quote-pick .p {
  border: 1px solid var(--line); border-radius: 9px; padding: 8px; cursor: pointer;
  display: flex; gap: 8px; align-items: center; background: #fff;
}
.quote-pick .p.on { border-color: #0f2b63; box-shadow: 0 0 0 2px #dfe8f6 inset; }
.quote-pick .p img, .quote-pick .p .ph { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: #f3f6fa; flex: 0 0 44px; }
.quote-pick .p .ph { display: flex; align-items: center; justify-content: center; color: #a8b7c8; font-size: 10px; }
.quote-pick .p .t { min-width: 0; }
.quote-pick .p .t b { display: block; font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.quote-pick .p .t span { font-size: 11.5px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media print {
  .side, .topbar, .no-print { display: none !important; }
  .main { margin: 0 !important; padding: 0 !important; }
  .quote-sheet { border: none; width: 100%; padding: 0; }
}

/* 报价单：每码可用库存 + 显示开关 */
.quote-items .size-line {
  font-size: 10.5px; color: #4a5a70; margin-top: 3px; line-height: 1.45;
  letter-spacing: .2px; word-break: break-word;
}
.tog {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; padding: 5px 11px; border: 1px solid var(--line);
  border-radius: 20px; background: #fff; cursor: pointer; user-select: none;
}
.tog:hover { border-color: #9cc3d8; background: #f7fbfd; }
.tog input { margin: 0; }

/* 报价单：按颜色分行的尺码明细（比平铺一行好读） */
.size-block { margin-top: 4px; }
.size-row { display: flex; gap: 7px; font-size: 10.5px; line-height: 1.6; align-items: baseline; }
.size-row b { color: #2a3a50; font-weight: 700; flex: 0 0 auto; }
.size-row span { color: #4a5a70; word-break: break-word; }
.size-row span .z { color: #b9c3cf; }

/* 报价单：色 × 码矩阵（列对齐，最直观） */
.size-matrix { border-collapse: collapse; margin-top: 5px; font-size: 12.5px; width: 100%; table-layout: fixed; }
.size-matrix th { color: #8a97a8; font-weight: 500; padding: 2px 3px 2px; text-align: center; }
.size-matrix td { padding: 2px 3px; text-align: center; color: #334; font-variant-numeric: tabular-nums; line-height: 1.35; }
.size-matrix th.c, .size-matrix td.c { width: 50px; text-align: left; font-weight: 600; color: #2a3a50; white-space: nowrap; padding-right: 6px; }
.size-matrix td.z { color: #c3ccd8; }
.size-matrix td.na { color: #e2e8f0; }

/* ============================================================
   移动端适配（≤820px）
   放在文件最末，保证能覆盖上面所有基础规则
   ============================================================ */
@media (max-width: 820px) {
  /* ---- 侧栏：抽屉 ---- */
  .nav-toggle { display: inline-block; }
  .side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 0 26px rgba(4, 10, 22, .45);
  }
  .side ul { overflow-y: auto; }
  .shell.nav-open .side { transform: none; }
  .shell.nav-open .nav-mask {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(4, 10, 22, .5);
  }

  /* ---- 容器 ---- */
  .main { width: 100%; }
  .content { padding: 12px; }
  .card-bd { padding: 12px; }
  .toolbar { flex-wrap: wrap; }

  /* ---- 汇总条 / 筛选条：允许换行，别把字挤成竖排 ---- */
  .doc-summary { flex-wrap: wrap; gap: 6px 16px; }
  .filter-bar { padding: 10px 12px; }
  .filter-bar label { flex: 1 1 auto; }
  .filter-bar input[type="date"] { width: 100%; }
  /* 按钮不被输入框挤成竖排的「搜/索」 */
  .filter-bar .btn, .filter-bar button { flex: 0 0 auto; white-space: nowrap; }
  .kw-group { flex: 1 1 100%; }
  .kw-group .search { min-width: 0; width: 100%; }

  /* ---- 单据表头：4 列挤不下，改两列；minmax(0,1fr) 才能真收缩
     （1fr 的隐式最小值是 min-content，会被 select 最长选项撑爆） ---- */
  .doc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-meta > label { min-width: 0; }
  .doc-meta select, .doc-meta input { min-width: 0; width: 100%; }
  .doc-meta-blank { display: none; }

  /* ---- 数据表 → 紧凑卡片：短字段两列并排，长文本/图片/操作独占一行，全部单行截断 ---- */
  .table-wrap { overflow: visible; }
  table.tb:not(.mtx) { display: block; }
  table.tb:not(.mtx) thead { display: none; }
  table.tb:not(.mtx) tbody { display: block; }
  table.tb:not(.mtx) tr {
    display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 3px 10px;
    border: 1px solid var(--line); border-radius: 8px;
    padding: 7px 10px; margin: 0 0 8px; background: #fff;
    font-size: 12px; line-height: 1.45;
  }
  table.tb:not(.mtx) tr:last-child { margin-bottom: 0; }
  table.tb:not(.mtx) td {
    display: block; min-width: 0; padding: 0; border: 0; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  table.tb:not(.mtx) td::before {
    content: attr(data-label); display: inline-block; min-width: 3.4em;
    margin-right: 5px; color: var(--muted); font-size: 11px; font-weight: 400;
    white-space: nowrap; vertical-align: bottom;
  }
  /* 独占一行的：图片、操作按钮、以及每行最长的那段文字（一般是品名） */
  table.tb:not(.mtx) td[data-wide] { grid-column: 1 / -1; }
  /* 空值 / 只有「—」的字段不占地方 */
  table.tb:not(.mtx) td[data-empty] { display: none; }
  table.tb:not(.mtx) td:not([data-label])::before { content: none; }

  /* ---- 按商品折叠的表格（网店中心「上架商品」）----
     折叠行只有一个 colspan 单元格，别按「两列卡片」去拆：拆了它只剩半屏宽，
     品名和数字全被省略号截掉。整行铺开、内容允许换行。 */
  table.tb:not(.mtx) tr.lst-grp { display: block; padding: 0; }
  table.tb:not(.mtx) tr.lst-grp > td { display: block; }
  table.tb:not(.mtx) tr.lst-grp .lst-band { flex-wrap: wrap; row-gap: 3px; padding: 9px 10px; }
  table.tb:not(.mtx) tr.lst-grp .spacer { display: none; }
  table.tb:not(.mtx) tr.lst-grp .lst-chips { flex-wrap: wrap; row-gap: 3px; }
  /* SKU 行变卡片后，省掉「占位用的」空列 */
  table.tb:not(.mtx) tr.lst-sku { margin-left: 0; }

  /* ---- 库存明细：展开那张「横向码数 × 纵向三行」的小表必须保持表格 ----
     它是拿来横向对比「92 码还剩几个」的对照表，跟着外层一起变卡片就彻底读不出来
     （每个码成一张小卡，还漏掉行头）。保留表格形态，宽了就让它自己横向滑。 */
  table.tb:not(.mtx) tr.wh-sub { display: block; padding: 0; }
  table.tb:not(.mtx) tr.wh-sub > td { display: block; overflow-x: auto; overflow-y: hidden; }
  table.tb.wh-mtx { display: table; table-layout: auto; width: max-content; min-width: 100%; font-size: 11.5px; }
  table.tb.wh-mtx thead { display: table-header-group; }
  table.tb.wh-mtx tbody { display: table-row-group; }
  table.tb.wh-mtx tr { display: table-row; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; }
  table.tb.wh-mtx th { display: table-cell; }
  table.tb.wh-mtx td { display: table-cell; padding: 5px 6px; }
  table.tb.wh-mtx td::before { content: none; }
  table.tb.wh-mtx .wm-corner { width: 66px; }
  /* 上面给 wh-sub 写了 display:block，特异性比 `.ct-table tr.wh-sub.hide` 高，
     不补这一条「收起」就又失效了（同一个坑踩了两次，所以这里显式写死） */
  table.tb:not(.mtx) tr.hide,
  table.tb:not(.mtx) tr.wh-sub.hide,
  table.tb:not(.mtx) tr.lst-grp.hide { display: none; }

  /* ---- 图文卡片类：缩图与内边距 ---- */
  .gal-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .quote-pick { grid-template-columns: 1fr; max-height: none; }
  .modal { width: 94vw !important; max-height: 88vh; }
  .modal-bd { max-height: 64vh; }
  .overlay { align-items: center; }

  /* 报价单是 A4 版面（794px），手机上缩不进去就让它在自己框里横向滑，
     别把整页撑宽。内边距也收一下，多留点宽度给表格。 */
  .quote-sheet { padding: 18px 16px; overflow-x: auto; }
  .quote-items th, .quote-items td { padding-left: 5px; padding-right: 5px; }

  /* 报价预览在手机上按屏宽重排，避免 A4 固定列宽把整页推出屏幕。 */
  .quote-sheet { box-sizing: border-box; width: 100%; padding: 14px 10px; overflow-x: hidden; }
  .quote-head { gap: 8px; flex-wrap: wrap; }
  .quote-head > * { min-width: 0; }
  .quote-meta { margin-left: auto; font-size: 10.5px; }
  .quote-items { table-layout: fixed; width: 100%; }
  .quote-items th, .quote-items td { padding: 6px 3px; font-size: 10.5px; }
  .quote-items th:nth-child(1), .quote-items td:nth-child(1) { width: 54px !important; }
  .quote-items th:nth-child(2), .quote-items td:nth-child(2) { width: 62px !important; }
  .quote-items th:nth-child(4), .quote-items td:nth-child(4) { width: 50px !important; }
  .quote-items th:nth-child(5), .quote-items td:nth-child(5) { width: 58px !important; }
  .quote-items th:nth-child(6), .quote-items td:nth-child(6) { width: 58px !important; }
  .quote-items .pic, .quote-items .no-pic { width: 48px; height: 48px; }
  .quote-items .q-name { font-size: 11.5px; }
  .quote-items .q-code { font-size: 10px; }

  /* 页面底部操作区在窄屏按两行排列，避免“导出图片”把右侧按钮截掉。 */
  .spread { align-items: stretch; flex-direction: column; gap: 8px; }
  .spread > .row { width: 100%; flex-wrap: wrap; gap: 6px !important; }
  .spread > .row:last-child { justify-content: stretch; }
  .spread > .row:last-child .btn { flex: 1 1 auto; min-height: 38px; }
}

/* ---------- 搜索式下拉（searchSelect）：替代选货号的下拉框 ---------- */
.ssel { position: relative; flex: 1 1 auto; min-width: 150px; }
.ssel-in { width: 100%; }
.ssel-pop {
  position: absolute; z-index: 45; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 264px; overflow: auto; padding: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 26px rgba(15, 43, 99, .14);
  display: none;
}
.ssel-item {
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px;
}
.ssel-item.act { background: #eef7fb; }
.ssel-item.on { background: #e3f5fa; }
.ssel-item.on .ssel-label { font-weight: 600; }
.ssel-code { flex: 0 0 auto; font-family: ui-monospace, Menlo, Consolas, monospace; color: #4a5a72; }
.ssel-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssel-empty, .ssel-more { padding: 8px; color: var(--muted); font-size: 12px; }
.ssel-more { border-top: 1px dashed var(--line); margin-top: 2px; }

/* 单据搜索栏 + 新增商品按钮同一行 */
.doc-search-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.doc-search-row .doc-search { flex: 1; margin-bottom: 0; position: relative; }
.doc-search-row .btn { white-space: nowrap; }
@media (max-width: 820px) {
  .doc-search-row { flex-wrap: wrap; }
  .doc-search-row .doc-search { flex: 1 1 100%; }
  .doc-search-row .btn { flex: 0 0 auto; }
  .ssel { min-width: 0; }
  .ssel-pop { max-height: 200px; }
}

/* ============================================================
   固定表头（桌面端）
   sticky 只在「自己会滚的容器」里才生效，所以先给表格容器限高，
   再把它变成滚动容器，表头才有东西可钉。
   手机上表头是隐藏的（卡片模式），这里用 min-width 排除掉。
   ============================================================ */
@media (min-width: 821px) {
  .table-wrap { max-height: calc(100vh - 250px); overflow: auto; }
  /* sticky 表头必须有不透明底色（否则行会从下面透上来），
     但要用卡片同色而不是灰底——灰底是「多出来的一层」，不是结构 */
  .table-wrap thead th,
  .mtx-wrap thead th,
  .doc-body thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--surface);
    box-shadow: inset 0 -1px 0 var(--line-strong);
  }
}

/* ============================================================
   手机端：单据表身（.doc-table）不参与「一行一张卡」的转换
   13 列的录入表单压成卡片会丢掉列语义（谁是谁的量/价分不清），
   所以保持表格形态，整表横向滑动——和 Excel 里录单的手感一致。
   ============================================================ */
@media (max-width: 820px) {
  .doc-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tb.doc-table { display: table; min-width: 800px; }
  /* 手机上合计行由表尾承担，网格内不再重复（隐藏两列后 td 会错位） */
  table.tb.doc-table tfoot { display: none; }
  /* 横向滑动时把序号列钉在左边，滑到金额列也知道自己在第几行 */
  table.tb.doc-table th:first-child,
  table.tb.doc-table td:first-child {
    position: sticky; left: 0; z-index: 2; background: #fff;
  }
  table.tb.doc-table th:first-child { background: #f7fafd; }
  .doc-filler:hover td { background: #fff; }
  /* 手机上先把「折扣 / 税率」收起来：这两个字段默认 1 和 0，很少现场改，
     让出来的宽度留给品名和数量，横向滑动距离也短一半。
     标准档不适用——它那两列位置是尺码，藏了就会少看两个码 */
  table.tb.doc-table:not(.doc-std) th:nth-child(11), table.tb.doc-table:not(.doc-std) td:nth-child(11),
  table.tb.doc-table:not(.doc-std) th:nth-child(12), table.tb.doc-table:not(.doc-std) td:nth-child(12) { display: none; }
  table.tb.doc-table thead { display: table-header-group; }
  table.tb.doc-table tbody { display: table-row-group; }
  table.tb.doc-table tr {
    display: table-row; border: 0; margin: 0; padding: 0;
    background: none; border-radius: 0; font-size: 12px;
  }
  table.tb.doc-table td {
    display: table-cell; white-space: nowrap; overflow: visible;
    padding: 6px; border-bottom: 1px solid var(--line);
  }
  table.tb.doc-table td::before { content: none; }
  /* 品名是唯一长文本列：必须自己裁剪，否则会盖到下一列 */
  table.tb.doc-table td:nth-child(4) { overflow: hidden; text-overflow: ellipsis; }
  table.tb.doc-table td[data-empty],
  table.tb.doc-table td[data-wide] { display: table-cell; grid-column: auto; }
  table.tb.doc-table td:nth-child(2) { width: 34px; }
}

/* 启动失败面板：替代「一直转圈」，给出原因和重试入口 */
.boot-fail {
  max-width: 460px; margin: 12vh auto 0; padding: 26px 26px 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 35, 65, .10); text-align: center;
}
.boot-fail-mark {
  width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%;
  background: #fff4e5; color: #b06a00; font-size: 22px; font-weight: 700;
  display: grid; place-items: center;
}
.boot-fail-title { font-size: 16px; font-weight: 600; color: var(--text); }
.boot-fail-msg { margin-top: 8px; color: #4a5a72; font-size: 13px; line-height: 1.6; }
.boot-fail-tip { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.boot-fail-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }
@media (max-width: 820px) {
  .boot-fail { margin: 8vh 12px 0; padding: 22px 18px; }
}

/* ---------- 扫码录入（v1.30.0） ---------- */
.scan-row { display: flex; gap: 8px; align-items: center; }
.scan-row .scan-input {
  flex: 1; min-width: 0; height: 44px; padding: 8px 12px;
  font-size: 16px; letter-spacing: .5px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.scan-row .scan-input:focus { outline: 2px solid var(--link); outline-offset: 1px; }
.scan-status { font-size: 12px; color: var(--muted); min-height: 18px; }
.scan-log { max-height: 180px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.scan-log-item { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.scan-log-item.ok { background: #f1f8f2; color: #1f6b33; }
.scan-log-item.bad { background: #fdf1f0; color: #b3261e; }
.scan-log-code { font-family: var(--mono); font-weight: 600; }
.scan-log-msg { opacity: .85; }
.scan-cam { margin-top: 6px; }
.scan-video { width: 100%; max-height: 240px; background: #000; border-radius: 8px; object-fit: cover; }
.scan-alert { display: flex; gap: 8px; align-items: center; font-size: 15px; }

/* ---------- 商品二维码 / 标签 ---------- */
.qr-img { image-rendering: pixelated; display: block; }
.qr-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.qr-block-hd { font-weight: 600; margin-bottom: 8px; }
.qr-block-bd { display: flex; gap: 16px; align-items: center; }
.qr-block-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qr-block-code { font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: .5px; word-break: break-all; }

@media (max-width: 820px) {
  .qr-block-bd { flex-direction: column; align-items: flex-start; }
  .scan-row { flex-wrap: wrap; }
  .scan-row .scan-input { width: 100%; flex: 1 1 100%; }
  .scan-row .btn { width: 100%; }
}

/* ---------- 扫码小取景框（v1.31.1：正方形，显示框 = 识别区） ---------- */
.scan-widget {
  position: fixed; right: 18px; bottom: 18px; width: 340px; z-index: 160;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .22); overflow: hidden;
}
.scan-w-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.scan-w-x { border: 0; background: none; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 2px; }
.scan-w-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
/* 正方形取景框：video 用 cover 裁中间正方形，scan.js 也只解码这块正方形 */
.scan-w-cam {
  position: relative; width: 320px; max-width: 100%; aspect-ratio: 1 / 1;
  margin: 0 auto; border-radius: 8px; overflow: hidden; background: #000;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}
.scan-w-body .scan-video { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center; display: block; }
.scan-w-body .scan-input { height: 38px; padding: 6px 10px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; width: 100%; box-sizing: border-box; }
.scan-w-body .scan-input:focus { outline: 2px solid var(--link); outline-offset: 1px; }
.scan-w-body .scan-status { min-height: 18px; }
.scan-w-foot { display: flex; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line-soft); }
.scan-w-foot .btn { flex: 1; }
@media (max-width: 820px) {
  .scan-widget { left: 8px; right: 8px; bottom: 8px; width: auto; }
  /* 手机：整宽正方形；横屏时按高度收，保证整框可见 */
  .scan-w-cam { width: 100%; max-width: min(100%, 52vh); }
}

/* 箱号自动生成 / 上次箱号（v1.36.0） */
.box-chips-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.box-tools { display: inline-flex; gap: 6px; align-items: center; }
.box-mini {
  font: inherit; font-size: 11.5px; height: 24px; padding: 1px 7px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
  color: var(--link); cursor: pointer; white-space: nowrap;
}
.box-mini:hover { border-color: var(--action); }
.box-mini:disabled { opacity: .55; cursor: default; }
.box-last { color: var(--muted); }

.box-input { width: 126px; }

.box-nums { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; white-space: nowrap; }
.box-nums .muted { margin-left: 2px; }

/* 箱号搜索下拉（v1.39.0：不用原生 datalist，小米/安卓浏览器也能展开） */
.box-combo { position: relative; flex: 0 0 126px; min-width: 126px; }
.box-combo .box-input { width: 100%; }
.box-pop {
  position: absolute; z-index: 70; left: 0; top: calc(100% + 4px);
  min-width: 126px; max-height: 220px; overflow: auto; padding: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 35, 60, .12);
}
.box-pop.hide { display: none; }
.box-opt { padding: 6px 8px; border-radius: 5px; cursor: pointer; font-size: 12.5px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.box-opt:hover, .box-opt.act { background: #eef7fb; }

/* ================= v2：页头 / 状态签 / 折叠筛选 / 分页 / 空状态 =================
   借鉴墨刀「进销存 ERP」原型的结构件，颜色一律用本系统既有语义变量
   （--brand 主色、--action 主操作、--warn/--danger/--muted），不引入新色相。 */

.page-hd { display: flex; align-items: flex-start; gap: 16px; padding: 2px 2px 0; }
.page-hd-main { min-width: 0; flex: 1; }
.page-hd-title {
  margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3;
  letter-spacing: .01em; color: var(--text);
}
.page-hd-sub { margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--muted); }
.page-hd-act { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* 状态分段签：一个圆角容器里几段，选中段用主色实底（白字在 #062051 上 12:1） */
.seg {
  display: inline-flex; align-items: center; gap: 2px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 3px;
}
.seg-item {
  border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 7px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.seg-item:hover { background: var(--surface); color: var(--text); }
.seg-item.on { background: var(--brand); color: #fff; font-weight: 600; }
.seg-n {
  font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--muted); opacity: .95;
}
.seg-item.on .seg-n { color: #fff; opacity: .8; }

/* 筛选区：第一行常驻，其余收进「高级筛选」 */
.filter-box { flex-direction: column; align-items: stretch; gap: 10px; }
.filter-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.filter-adv {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px dashed var(--line);
}
.filter-adv.hide { display: none; }
.adv-n {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: var(--action); color: #fff;
  font-size: 10px; font-family: var(--mono); line-height: 1;
}

/* 分页条 v2：共 N 条 · 每页选择 · 页码 · 跳页 */
.pager { flex-wrap: wrap; row-gap: 8px; }
.pager-total { color: var(--text); font-size: 12.5px; }
.pager-pos { display: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pager-size { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pager-size select { padding: 3px 6px; font-size: 12px; border-radius: 6px; }
.pager-pages { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.pg-btn {
  min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid var(--line);
  background: #fff; border-radius: 6px; color: var(--text);
  font: inherit; font-size: 12.5px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.pg-btn:hover:not([disabled]) { border-color: var(--line-strong); background: var(--surface); }
.pg-btn[disabled] { opacity: .4; cursor: not-allowed; }
.pg-num.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pg-gap { color: var(--faint); padding: 0 2px; font-size: 12px; }
.pager-jump { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pager-jump-in { width: 54px; padding: 4px 6px; font-size: 12px; text-align: center; }

/* 空状态：符号 + 一句「从哪儿开始」 */
.empty-box { padding: 30px 20px; text-align: center; }
.empty-ico {
  width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface);
  color: var(--faint); font-size: 17px;
}
.empty-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.empty-hint { margin-top: 5px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.empty-act { margin-top: 12px; }

/* 概览「今日待办」 */
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.todo-item:last-child { border-bottom: 0; }
.todo-item a { color: var(--text); }
.todo-item a:hover { color: var(--link); }
.todo-n {
  margin-left: auto; font-family: var(--mono); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.todo-tag { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.todo-tag.warn { background: #fff3e0; color: var(--warn); }
.todo-tag.danger { background: #fdecec; color: var(--danger); }
.todo-tag.info { background: var(--surface); color: var(--muted); }
.todo-empty { padding: 16px 4px; color: var(--muted); font-size: 12.5px; }

/* 状态列：色点 + 文字（列表里比整块彩底安静，金额列不再被抢） */
.st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); }
.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.st-draft::before { background: var(--warn); }
.st-posted::before { background: var(--down); }
.st-void::before { background: var(--faint); }
.st-rev::before { background: var(--danger); }

/* 长表表头吸顶（滚动容器是 .table-wrap） */
.table-wrap > table.tb > thead > tr > th { position: sticky; top: 0; z-index: 2; }

@media (max-width: 1100px) {
  .page-hd { flex-wrap: wrap; }
}
@media (max-width: 820px) {
  .page-hd-title { font-size: 16px; }
  .page-hd-sub { font-size: 11.5px; }
  .seg { width: 100%; overflow-x: auto; }
  .seg-item { flex: 0 0 auto; }
  .pager-total { margin-right: auto; }
  .pager-pos { display: inline; }
  .pager-pages .pg-num, .pager-pages .pg-gap { display: none; }
  .pager-jump { display: none; }
}

/* 页头右侧的只读数字（费用合计这类）：标签小、数字等宽，别做成一张大白卡 */
.hd-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-right: 8px; }
.hd-stat span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.hd-stat b { font-size: 16px; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
@media (max-width: 820px) {
  .hd-stat { align-items: flex-start; margin-right: 0; }
}

/* ================= v3：勾选 / 批量操作条 / 骨架屏 / 细节收敛 ================= */
:root { --radius-sm: 6px; }

/* 行内复选框：14px、主操作色；表头那个是「本页全选」 */
input[type="checkbox"].row-chk {
  width: 14px; height: 14px; accent-color: var(--action);
  cursor: pointer; vertical-align: middle;
}
input[type="checkbox"].row-chk:disabled { cursor: not-allowed; opacity: .4; }
table.tb td > .row-chk, table.tb th > .row-chk { display: block; margin: 0 auto; }

/* 批量操作条：贴底固定，滚动到哪儿都在；页面会留 72px 下边距，不遮最后一行 */
.batch-bar {
  position: fixed; left: 196px; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -8px 20px rgba(15, 35, 65, .07);
}
.batch-bar.hide { display: none; }
.batch-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.batch-count { font-size: 12.5px; color: var(--muted); }
.batch-count b { color: var(--text); font-family: var(--mono); }
.batch-sub { font-size: 12px; color: var(--muted); }
.batch-sub b { color: var(--text); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.batch-sub.warn { color: var(--warn); }
.batch-bar .spacer { flex: 1; }
.batch-bar .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* 弹窗里的批量清单 */
.batch-sum { font-size: 13px; color: var(--muted); }
.batch-sum b { color: var(--text); font-size: 16px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.batch-list { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.batch-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.batch-row:last-child { border-bottom: 0; }
.batch-row.danger { color: var(--danger); background: #fff7f6; }
.batch-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.batch-row.danger .batch-row-name { color: var(--danger); }
.batch-row-amt { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* 骨架屏：加载时先把表格形状占住，数据到了不跳 */
.sk-table th, .sk-table td { height: 34px; }
.sk-line {
  display: block; height: 8px; width: 78%; border-radius: 4px;
  background: linear-gradient(90deg, #eef1f5 25%, #f6f8fa 37%, #eef1f5 63%);
  background-size: 400% 100%; animation: sk-shine 1.4s ease infinite;
}
.sk-table th .sk-line { width: 46%; height: 7px; }
@keyframes sk-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .sk-line { animation: none; } }

/* 表格细节收敛：悬停整行提亮，表头下沿比行线重一档（金额列仍然最好认） */
table.tb tbody tr:hover > td { background: #f9fbfd; }
table.tb thead th { border-bottom: 1px solid var(--line-strong); }

@media (max-width: 820px) {
  .batch-bar { left: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .batch-info { width: 100%; }
  .batch-bar .btn { flex: 1 1 auto; min-height: 36px; }
  .batch-bar .spacer { display: none; }
}

/* 批量改售价：弹窗里的原价 → 新价预览 */
.price-preview { margin-top: 12px; padding: 10px 12px; background: var(--surface); border-radius: var(--radius-sm); }
.price-preview .hint { margin: 0 0 4px; }
.price-preview .hint + .hint { margin: 6px 0 0; }
.price-prev-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.price-prev-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.price-prev-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.price-prev-num.down { color: var(--danger); }
.price-prev-arrow { color: var(--faint); }

/* 改价预览要占满弹窗整行（.modal-form 是两列网格，别让它塞进半列里） */
.modal-form .price-preview { grid-column: 1 / -1; margin-top: 2px; }

/* 报价页：价格下拉 + 分码数量编辑（v1.41.0） */
.pick-list { gap: 10px; }
.pick-card { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fff; }
.pick-row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.pick-code { min-width: 88px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.pick-name { flex: 1 1 110px; min-width: 90px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-avail { min-width: 56px; font-size: 12px; color: #14794a; }
.pick-price { width: 148px; }
.pick-price-custom { width: 88px; }
.pick-total { min-width: 58px; font-size: 12px; color: #14794a; white-space: nowrap; }
.pick-sizes { margin-top: 7px; overflow-x: auto; }
.size-matrix.edit { width: 100%; table-layout: fixed; font-size: 12px; }
.size-matrix.edit th, .size-matrix.edit td { padding: 2px 3px; }
.size-qty-input { width: 100%; min-width: 34px; height: 24px; padding: 1px 2px; border: 1px solid var(--line); border-radius: 4px; text-align: center; font: inherit; font-size: 12px; }
.size-qty-input:disabled { background: #f4f6f9; color: #b9c3cf; }

/* ==========================================================================
   v4 视觉重设计：商务蓝白（只覆盖变量与组件外观，不改布局结构与交互路径）
   - 颜色：深海军蓝侧栏 + 白卡片 + 单一蓝色主操作；红=危险、橙=预警、绿=正向
   - 尺寸：卡片圆角 12、控件 8、行高仍 34（审计要求 ≤34）
   - 阴影：只给卡片/弹窗一层很轻的投影，不做大动效
   ========================================================================== */
:root {
  --brand: #0b1b33;          /* 侧栏/头部深色 */
  --brand-2: #13294a;
  --action: #1f4fd1;         /* 主操作（白字对比 6.4:1） */
  --action-hover: #183fa8;
  --link: #1450b4;           /* 链接（白底 6.2:1） */
  --danger: #b3261e;
  --neg: #b3261e;
  --warn: #b26a00;
  --up: #c2413a;
  --down: #178f4a;
  --teal: #08b9ce;           /* 仅图表/装饰，仍不许写文字 */
  --teal-2: #15cbe2;
  --bg: #f4f6fa;
  --card: #ffffff;
  --surface: #f7f9fc;
  --line: #e4e9f2;
  --line-soft: #eef2f7;
  --line-strong: #d9e1ec;
  --col-sep: #edf1f6;
  --text: #131c2b;
  --muted: #5f6b7f;
  --faint: #98a4b6;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 32, 64, .05);
  --shadow-md: 0 8px 24px rgba(16, 32, 64, .08);
  --side-w: 208px;
}

html, body {
  font: 13px/1.6 "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 侧栏 ---------- */
.side { width: var(--side-w); flex: 0 0 var(--side-w); background: var(--brand); color: #c3cede; }
.brand {
  height: 56px; padding: 0 18px; font-size: 14.5px; font-weight: 600; letter-spacing: .02em;
  color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.brand-mark {
  width: 24px; height: 24px; border-radius: 7px; font-size: 12px;
  background: var(--action); box-shadow: 0 2px 8px rgba(31, 79, 209, .35);
}
.side ul { padding: 8px 10px 10px; }
.side li.nav-hd {
  padding: 14px 8px 6px; font-size: 10.5px; letter-spacing: .12em;
  color: #7f92ad; text-transform: uppercase;
}
.side li.nav-hd:first-child { padding-top: 8px; }
.side a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 1px 0; border-radius: 8px;
  color: #c3cede; font-size: 13px; line-height: 1.4;
}
.side a i { width: 18px; text-align: center; opacity: .85; font-style: normal; }
.side a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.side a.active {
  background: var(--action); color: #fff; font-weight: 600;
  box-shadow: 0 2px 10px rgba(31, 79, 209, .35);
}
.side a.active i { opacity: 1; }
.side-foot { padding: 12px 16px 14px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 12px; color: #9aabc4; }
.side-foot a { color: #c3cede; padding: 0; display: inline; }

/* ---------- 顶栏 / 内容区 ---------- */
.topbar {
  height: 52px; padding: 0 20px; background: #fff;
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.topbar-title { font-size: 13px; font-weight: 600; color: var(--text); }
.topbar-user { font-size: 12px; color: var(--muted); }
.content { padding: 20px; background: var(--bg); }
.stack { gap: 16px; }

/* ---------- 卡片 ---------- */
.card { border-radius: var(--radius); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.card-hd {
  padding: 14px 18px; font-size: 13.5px; font-weight: 600;
  color: var(--text); border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
}
.card-bd { padding: 16px 18px; }

/* ---------- 页头 / 分段签 ---------- */
.page-hd { padding: 0 2px; }
.page-hd-title { font-size: 20px; font-weight: 700; letter-spacing: .01em; }
.page-hd-sub { margin-top: 4px; color: var(--muted); font-size: 12px; }
.seg { border-radius: 10px; padding: 3px; box-shadow: var(--shadow-sm); }
.seg-item { border-radius: 8px; padding: 5px 13px; }
.seg-item.on { background: var(--action); }
.seg-item.on .seg-n { color: #fff; }

/* ---------- 指标卡 ---------- */
.kpi-grid { gap: 14px; }
.kpi {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 18px; box-shadow: var(--shadow-sm);
}
.kpi-label { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.kpi-value { font-size: 24px; font-weight: 650; margin-top: 6px; color: var(--text); }
.kpi-hint { margin-top: 5px; font-size: 11.5px; color: var(--muted); }

/* ---------- 按钮 ---------- */
.btn {
  border-radius: var(--radius-sm); padding: 7px 16px; font-size: 12.5px; font-weight: 500;
  border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--action); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(31, 79, 209, .25); }
.btn-primary:hover { background: var(--action-hover); }
.btn-ghost { background: #fff; border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--action); color: var(--link); background: #fbfcff; }
.btn:focus-visible, .seg-item:focus-visible, .pg-btn:focus-visible, .batch-bar .btn:focus-visible {
  outline: 2px solid rgba(31, 79, 209, .45); outline-offset: 2px;
}

/* ---------- 输入控件 ---------- */
input, select, textarea {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 7px 10px; background: #fff; font-size: 12.5px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--action); box-shadow: 0 0 0 3px rgba(31, 79, 209, .12); outline: none;
}
.filter-bar { border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.filter-bar label { color: var(--muted); font-size: 12px; }
.search { width: 240px; }

/* ---------- 表格 ---------- */
.table-wrap > table.tb > thead > tr > th {
  background: #f7f9fc; color: var(--muted); font-weight: 600; font-size: 11.5px; letter-spacing: .03em;
}
table.tb th, table.tb td { padding: 7px 12px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
table.tb thead th { border-bottom: 1px solid var(--line-strong); }
table.tb tbody tr:hover > td { background: #f8fbff; }
table.tb tfoot td { background: #f7f9fc; font-weight: 600; }
.num, .al-right { font-variant-numeric: tabular-nums; }

/* ---------- 分页 / 批量条 ---------- */
.pg-btn { border-radius: 8px; border-color: var(--line); }
.pg-num.on { background: var(--action); border-color: var(--action); }
.batch-bar { left: var(--side-w); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px rgba(16, 32, 64, .08); }

/* ---------- 状态点 ---------- */
.st-posted::before { background: var(--down); }
.st-draft::before { background: var(--warn); }
.st-rev::before { background: var(--danger); }

/* ---------- 弹窗 ---------- */
.modal { border-radius: 14px; box-shadow: 0 24px 60px rgba(16, 32, 64, .18); }
.modal-hd { padding: 16px 20px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line-soft); }
.modal-ft { padding: 14px 20px; border-top: 1px solid var(--line-soft); background: #fbfcfe; }
.modal-bd { padding: 18px 20px; }

/* ==========================================================================
   图表（自绘 SVG，见 web/js/chart.js）
   ========================================================================== */
.chart { width: 100%; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-axis { fill: var(--muted); font-family: var(--mono); }
.chart-empty { padding: 30px 10px; text-align: center; color: var(--muted); font-size: 12.5px; }
.chart-bar-rect { transition: opacity .12s ease; }
.chart-bar-rect:hover { opacity: .82; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 8px; font-size: 12px; color: var(--muted); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-item i, .chart-legend-row i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.chart-donut { display: flex; align-items: center; gap: 22px; }
.chart-donut .chart-svg { width: 190px; flex: 0 0 190px; }
.chart-legend-col { flex: 1; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; margin: 0; }
.chart-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); }
.chart-legend-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend-val { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chart-legend-pct { width: 48px; text-align: right; color: var(--muted); font-family: var(--mono); }
.chart-center-label { fill: var(--muted); }
.chart-center-value { fill: var(--text); font-family: var(--mono); font-weight: 600; }
.chart-slice { stroke: #fff; stroke-width: 2; }
.chart-slice:hover { opacity: .9; }
.chart-rank .rank-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; }
.rank-label { width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-track { flex: 1; height: 8px; background: var(--surface); border-radius: 5px; overflow: hidden; }
.rank-track i { display: block; height: 100%; background: var(--action); border-radius: 5px; }
.rank-val { font-family: var(--mono); min-width: 82px; text-align: right; font-variant-numeric: tabular-nums; }
.rank-sub { min-width: 56px; text-align: right; color: var(--muted); font-size: 11.5px; }

/* 图表卡片：两列并排时给个最小高度，别一张高一张矮 */
.dash-row .card, .chart-card { min-height: 0; }
.chart-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.chart-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }

@media (max-width: 1100px) {
  .chart-grid, .chart-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  :root { --side-w: 0px; }
  .content { padding: 14px; }
  .page-hd-title { font-size: 18px; }
  .chart-donut { flex-direction: column; align-items: stretch; }
  .chart-donut .chart-svg { width: 100%; flex: 0 0 auto; margin: 0 auto; max-width: 220px; }
  .rank-label { width: 46%; }
  .batch-bar { left: 0; }
}

/* 表头用分层色变量（别再写死灰值）；行内文字行高收到 1.5，行高稳定在 34px 以内 */
.table-wrap > table.tb > thead > tr > th { background: var(--surface); }
table.tb th, table.tb td { line-height: 1.5; }

/* 报价页：库存来源（v1.43.0） */
.stock-source { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; padding: 7px 8px; background: #f7f9fc; border: 1px solid #e6edf5; border-radius: 7px; font-size: 12.5px; }
.stock-source .ss-label { color: #5b6b7f; }
.stock-source label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; white-space: nowrap; }
.stock-source button { margin-left: auto; }

/* 手机端：侧栏抽屉靠 translateX(-100%) 收起，宽度必须保留（宽度 0 时位移也是 0，会留一条窄缝） */
@media (max-width: 820px) {
  :root { --side-w: 232px; }
  .side { width: 232px; flex: 0 0 232px; }
  .main { min-width: 0; }
  .chart, .card, .table-wrap { max-width: 100%; }
}

/* 窄屏两列指标卡：列宽允许收缩，长金额换行而不是把整页撑出横向滚动 */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .kpi-value { font-size: 17px; white-space: normal; word-break: break-all; }
  .chart-legend { gap: 10px; }
  .content { overflow-x: hidden; }
}

/* 手机端环图固定成 210px 居中，别把整张卡撑成一屏 */
@media (max-width: 820px) {
  .chart-donut .chart-svg.chart-svg-square { width: 210px; height: 210px; max-width: 210px; flex: 0 0 auto; margin: 0 auto; }
}

/* ==========================================================================
   v4.1 设计品味修正（按 taste skill 的检查项，只改「一致性/状态/默认值」）
   1) 圆角收敛成三档：6 徽标 · 8 控件 · 12 容器（胶囊形 = 999，单独一类）
   2) 强调色去「AI 蓝」默认值：饱和度 74% → 67%，仍是商务蓝，但不再发光
   3) 按钮补 :active 触感反馈 + 文案不换行；尊重 prefers-reduced-motion
   ========================================================================== */
:root {
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-pill: 999px;
  --action: #2452b3;         /* 白字 7.2:1，饱和度 67% */
  --action-hover: #1d449b;
  --link: #1a479c;           /* 白底 8.1:1 */
}

/* —— 圆角三档 —— */
.tag, .todo-tag, .gal-flag, .st + .tag { border-radius: var(--r-xs); }
.seg, .grp-card, .img-preview, .modal, .login-card { border-radius: var(--r-md); }
.chip, .tab, .box-fill-hint, .wh-chip { border-radius: var(--r-pill); }
input, select, textarea, .btn, .pg-btn, .pager-jump-in, .size-qty-input { border-radius: var(--r-sm); }

/* —— 按钮：触感 + 不换行 —— */
.btn { white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease; }
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn-primary:active:not([disabled]) { background: var(--action-hover); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active:not([disabled]) { transform: none; }
}

/* —— 数字排版：等宽 + 略收紧字距，金额列更像账本而不是堆字 —— */
.kpi-value { letter-spacing: -.01em; }
.rank-val, .batch-row-amt, .chart-legend-val { letter-spacing: -.01em; }

/* ==========================================================================
   v4.2：按 Hallmark 的 data-viz / app screen 规则收三处
   1) 占比从环图改成「100% 堆叠横条 + 图例」（部分与整体不用饼/环）
   2) 柱宽 ≤24px、只在数据端 2px 圆角（chart.js 里改，这里只管样式）
   3) 行内操作加热区：手机上 36px 高、横向留 6px，别再点不中
   ========================================================================== */
.chart-share { display: flex; flex-direction: column; gap: 14px; }
.share-track {
  display: flex; height: 14px; border-radius: 4px; overflow: hidden;
  background: var(--surface); gap: 2px;
}
.share-track i { display: block; height: 100%; min-width: 2px; }
.share-track i:first-child { border-radius: 4px 0 0 4px; }
.share-track i:last-child { border-radius: 0 4px 4px 0; }
.chart-share .chart-legend-col { gap: 8px; }

@media (max-width: 820px) {
  .ops { display: inline-flex; flex-wrap: wrap; gap: 2px; }
  .ops a {
    display: inline-flex; align-items: center; min-height: 36px;
    padding: 0 6px; border-radius: 6px;
  }
  .ops a:active { background: var(--surface); }
}

/* ==========================================================================
   v5 手机端（≤820px）：按 Hallmark app-screen 规则收
   - 控件 40px、手指热区 ≥44px
   - 表格卡片化：字段名与值两端对齐，数字右对齐等宽，图片独占一行且不参与「空值隐藏」
   - 筛选：标签在上、控件在下；按钮等宽换行
   - 弹窗：96vw、正文滚动、底部按钮 44px
   - 只作用于 ≤820px，桌面视觉与行高不变
   ========================================================================== */
@media (max-width: 820px) {
  /* —— 控件与热区 —— */
  input, select, textarea, .btn { min-height: 40px; }
  .btn { padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; }
  .ops { display: inline-flex; flex-wrap: wrap; gap: 2px; }
  .ops a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
    border-radius: 6px;
  }
  .ops a:active { background: var(--surface); }
  .pg-btn { min-width: 40px; height: 40px; }
  .batch-bar .btn, .modal-ft .btn { min-height: 44px; }

  /* —— 表格 → 卡片：label 左、值右，数字等宽右对齐 —— */
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) tr {
    padding: 10px 12px; gap: 6px 12px; border-radius: 10px; margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
  }
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td {
    display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
    min-width: 0;
  }
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td::before { flex: 0 0 auto; min-width: 4.2em; margin-right: 0; }
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td > * { min-width: 0; }
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td.al-right { font-variant-numeric: tabular-nums; }

  /* 图片格：占满整行、不显示「图片」标签，缩略图给到 56px（能认出款） */
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td[data-media] { display: block; grid-column: 1 / -1; }
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td[data-media]::before { content: none; }
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td[data-media] .thumb { width: 56px; height: 56px; border-radius: 8px; }

  /* 长文字：品名/商品名改成「标签一行、名字可换行」，不再单行截成半句 */
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td[data-label="品名"],
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td[data-label="商品"],
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td[data-label="款式"] {
    display: block; white-space: normal; overflow: visible; line-height: 1.45;
  }
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td[data-label="品名"]::before,
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td[data-label="商品"]::before,
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td[data-label="款式"]::before { display: block; margin-bottom: 1px; }

  /* 宽行（操作、图片、说明）保持整行块级，避免和 label 抢宽度 */
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td[data-wide]:not([data-media]) { display: block; white-space: normal; }

  /* —— 筛选：标签在上、控件在下 —— */
  .filter-bar, .filter-adv { gap: 10px; }
  .filter-bar label, .filter-adv label {
    flex: 1 1 100%; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  }
  .filter-bar label > span, .filter-adv label > span { font-size: 11.5px; color: var(--muted); }
  .filter-bar input, .filter-bar select, .filter-adv input, .filter-adv select { width: 100%; }
  .filter-bar .btn, .filter-bar button { flex: 1 1 calc(50% - 5px); }

  /* —— 弹窗：宽度、滚动与底部操作区 —— */
  .overlay .modal {
    width: 96vw !important; max-width: 96vw; max-height: 92vh;
    display: flex; flex-direction: column;
  }
  .modal-bd { max-height: 66vh; overflow: auto; -webkit-overflow-scrolling: touch; }
  .modal-ft { position: sticky; bottom: 0; background: #fbfcfe; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* —— 分页与汇总 —— */
  .pager { gap: 8px; row-gap: 10px; }
  .pager-total { font-size: 12.5px; }
  .doc-summary { gap: 4px 14px; font-size: 12px; }
}

/* v5.1 手机端修正：复选框不跟着控件放大；筛选按钮两两一行；操作行去掉冗余标签 */
@media (max-width: 820px) {
  input[type="checkbox"], input[type="radio"] { min-height: 0; width: 18px; height: 18px; padding: 0; }
  .filter-bar label.inline-check { flex-direction: row; align-items: center; gap: 8px; }
  .filter-bar .btn, .filter-bar button { flex: 1 1 calc(50% - 8px); }

  /* 勾选列：没有表头标签的格子给足上下留白，22px 的框 + 44px 行高热区 */
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td:not([data-label]) { padding: 10px 0; }
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td:not([data-label]) input[type="checkbox"] { width: 22px; height: 22px; }

  /* 操作行自己就是一排按钮，不需要「操作」两个字 */
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td[data-label="操作"]::before { content: none; }
  table.tb:not(.mtx):not(.doc-table):not(.wh-mtx) td[data-label="操作"] { justify-content: flex-start; }
}

/* v5.2 手机端页头：标题独占一行，动作区换到下一行；否则标题会被挤成竖排 */
@media (max-width: 820px) {
  .page-hd { flex-direction: column; align-items: stretch; gap: 8px; }
  .page-hd-main { flex: 1 1 auto; min-width: 0; }
  .page-hd-act { width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  .page-hd-act .btn { flex: 0 1 auto; }
  .page-hd-act .hd-stat { align-items: flex-start; margin-right: auto; }
}

/* v5.3：规格矩阵在手机上「首列钉住 + 滑动提示」；桌面不显示提示 */
.mtx-hint { display: none; }
@media (max-width: 820px) {
  .mtx-hint { display: block; font-size: 11.5px; color: var(--muted); margin: 0 0 6px; }
  .mtx-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tb.mtx th:first-child,
  table.tb.mtx td:first-child {
    position: sticky; left: 0; z-index: 2; background: #fff;
    box-shadow: 1px 0 0 var(--line-soft);
  }
  table.tb.mtx thead th:first-child { background: var(--surface); }
  table.tb.mtx tfoot td:first-child { background: var(--surface); }
}

/* ==========================================================================
   v5.5 iOS / 微信内置浏览器（都是 WebKit）加固
   1) 关掉 iOS 的自动字号放大：微信和 Safari 会按系统文字大小把正文放大，
      一放大，卡片里的 label 与值就会错行，看起来像布局坏了。
   2) 输入控件在手机端给到 16px：iOS 对 font-size < 16px 的输入框会在聚焦时
      自动放大整页（zoom），放大后页面停在放大状态，也会被当成"显示有问题"。
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 820px) {
  /* 常规输入框给到 16px：低于 16px 时 iOS 会在聚焦瞬间放大整页，
     放大后页面停在放大状态，看起来就像"排版错乱"。 */
  input:not(.size-qty-input):not(.box-input):not(.pager-jump-in),
  select, textarea { font-size: 16px; }
  /* 单据格子里的微型输入框平时保持小字号（列宽只有 30–50px），
     只有聚焦时临时放大 —— 既避免 iOS 缩放，也不撑破列宽。 */
  .size-qty-input:focus, .box-input:focus, .pager-jump-in:focus { font-size: 16px; }
  /* iOS 对 select 默认有内阴影和垂直居中差异，统一掉，避免和输入框高度不一致 */
  select { -webkit-appearance: none; appearance: none; }
  input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 42px; }
}

/* v5.5b 手机端 select 去掉原生外观后自己画箭头（否则 iOS 上看起来像纯文本） */
@media (max-width: 820px) {
  select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7d95' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    padding-right: 26px;
  }
}

/* ==========================================================================
   v7 选商品对话框（单据录入）
   卡片墙：图 + 货号 + 品名 + 规格/库存/单价；顶部搜索；支持单选与多选
   ========================================================================== */
.picker-overlay { align-items: center; }
.picker-modal {
  width: min(880px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.picker-hd { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.picker-tools { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.picker-search { flex: 1 1 auto; min-width: 0; }
.picker-multi.on { background: var(--action); color: #fff; border-color: var(--action); }
.picker-count { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.picker-body { flex: 1 1 auto; overflow: auto; padding: 12px 16px; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.picker-card {
  display: flex; flex-direction: column; gap: 4px; padding: 8px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
}
.picker-card:hover { border-color: var(--action); }
.picker-card.on { border-color: var(--action); box-shadow: 0 0 0 1px var(--action) inset; background: #f4f8ff; }
.picker-thumb {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px;
  background: var(--surface); display: block;
}
.picker-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.picker-code { font-size: 12px; color: var(--muted); }
.picker-name { font-size: 13px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.picker-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--muted); }
.picker-meta b { color: var(--text); font-size: 12.5px; }
.picker-empty { padding: 28px 8px; text-align: center; color: var(--muted); font-size: 13px; }
.picker-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-soft); }

@media (max-width: 820px) {
  .picker-modal { width: 96vw; max-height: 90vh; }
  .picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .picker-tools { flex-wrap: wrap; }
  .picker-search { flex: 1 1 100%; }
  .picker-body { padding: 10px; }
}

/* v7.1 选商品卡片上的「已选 X 件」标记 */
.picker-picked {
  align-self: flex-start; margin-top: 2px; padding: 1px 6px;
  font-size: 11px; border-radius: 999px;
  background: #e8f1ff; color: var(--action); border: 1px solid #c9dcff;
}
.picker-card.on { background: #f4f8ff; }

/* ==========================================================================
   v8 开单页：顶部改为「添加商品」按钮 + 手机竖屏紧凑表格
   - 工具栏按功能分组：左「录入类」（添加商品/扫码/新增商品），右「查看类」（明细/标准/按款）
   - 手机竖屏（≤820px）明细表只留 6 列：货号 / 品名 / 数量 / 单价 / 编辑 / 删除
   - 桌面与横屏（>820px）列、字号、间距完全不变
   ========================================================================== */
.doc-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding: 8px 0 10px;
}
.doc-tools-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-tools-view { display: flex; align-items: center; gap: 8px; }
.doc-add-btn { font-weight: 600; }
/* 手机上才需要把「颜色/尺码」并进品名 */
.doc-inline-spec { display: none; }

@media (max-width: 820px) {
  /* —— 工具栏：两行，录入类在上、查看类在下靠右 —— */
  .doc-tools { gap: 8px; padding: 6px 0 8px; }
  .doc-tools-main { flex: 1 1 100%; }
  .doc-tools-main .btn { flex: 1 1 auto; min-height: 40px; }
  .doc-tools-view { flex: 1 1 100%; justify-content: flex-end; }

  /* —— 明细表：紧凑 6 列 —— */
  table.tb.doc-table:not(.doc-std) {
    display: table; table-layout: fixed; width: 100%;
    min-width: 0 !important; font-size: 12px; border-collapse: collapse;
  }
  table.tb.doc-table:not(.doc-std) thead { display: table-header-group; }
  table.tb.doc-table:not(.doc-std) tbody { display: table-row-group; }
  table.tb.doc-table:not(.doc-std) tfoot { display: none; }

  table.tb.doc-table:not(.doc-std) tr,
  table.tb.doc-table:not(.doc-std) tbody > tr {
    display: table-row; padding: 0; margin: 0; border: 0; border-radius: 0; background: none;
  }
  table.tb.doc-table:not(.doc-std) th,
  table.tb.doc-table:not(.doc-std) td {
    display: table-cell; padding: 4px 5px; border: 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px; line-height: 1.35; vertical-align: middle;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: transparent;
  }
  table.tb.doc-table:not(.doc-std) th { font-weight: 500; color: var(--muted); white-space: nowrap; }
  table.tb.doc-table:not(.doc-std) td::before { content: none !important; }

  /* 只留 2 款号 / 3 品名 / 8 数量 / 9 单价 / 13 操作 */
  table.tb.doc-table:not(.doc-std) th:nth-child(2), table.tb.doc-table:not(.doc-std) td:nth-child(2),
  table.tb.doc-table:not(.doc-std) th:nth-child(5), table.tb.doc-table:not(.doc-std) td:nth-child(5),
  table.tb.doc-table:not(.doc-std) th:nth-child(6), table.tb.doc-table:not(.doc-std) td:nth-child(6),
  table.tb.doc-table:not(.doc-std) th:nth-child(7), table.tb.doc-table:not(.doc-std) td:nth-child(7),
  table.tb.doc-table:not(.doc-std) th:nth-child(8), table.tb.doc-table:not(.doc-std) td:nth-child(8),
  table.tb.doc-table:not(.doc-std) th:nth-child(11), table.tb.doc-table:not(.doc-std) td:nth-child(11),
  table.tb.doc-table:not(.doc-std) th:nth-child(12), table.tb.doc-table:not(.doc-std) td:nth-child(12),
  table.tb.doc-table:not(.doc-std) th:nth-child(13), table.tb.doc-table:not(.doc-std) td:nth-child(13) {
    display: none;
  }

  table.tb.doc-table:not(.doc-std) th:nth-child(3), table.tb.doc-table:not(.doc-std) td:nth-child(3) { width: 82px; }
  table.tb.doc-table:not(.doc-std) th:nth-child(9), table.tb.doc-table:not(.doc-std) td:nth-child(9) { width: 46px; }
  table.tb.doc-table:not(.doc-std) th:nth-child(10), table.tb.doc-table:not(.doc-std) td:nth-child(10) { width: 54px; }
  table.tb.doc-table:not(.doc-std) th:nth-child(14), table.tb.doc-table:not(.doc-std) td:nth-child(14) { width: 76px; }

  table.tb.doc-table:not(.doc-std) .cell-input,
  table.tb.doc-table:not(.doc-std) input[type="number"] {
    width: 100%; min-width: 0; height: 26px; padding: 0 3px;
    font-size: 12px; text-align: right;
  }
  table.tb.doc-table:not(.doc-std) td:nth-child(14) .ops { display: flex; gap: 8px; justify-content: flex-end; }
  table.tb.doc-table:not(.doc-std) td:nth-child(14) .ops a { font-size: 11.5px; min-height: 24px; display: inline-flex; align-items: center; }

  .doc-inline-spec { display: inline; margin-left: 4px; font-size: 11px; color: var(--muted); }
  table.tb.doc-table:not(.doc-std) .doc-filler { display: none; }
}

/* v8.1 手机竖屏：列宽再平衡，品名允许两行（不然只剩 60px 全被省略号吃掉） */
@media (max-width: 820px) {
  table.tb.doc-table:not(.doc-std) th:nth-child(3), table.tb.doc-table:not(.doc-std) td:nth-child(3) { width: 74px; }
  table.tb.doc-table:not(.doc-std) th:nth-child(9), table.tb.doc-table:not(.doc-std) td:nth-child(9) { width: 40px; }
  table.tb.doc-table:not(.doc-std) th:nth-child(10), table.tb.doc-table:not(.doc-std) td:nth-child(10) { width: 48px; }
  table.tb.doc-table:not(.doc-std) th:nth-child(14), table.tb.doc-table:not(.doc-std) td:nth-child(14) { width: 70px; }
  table.tb.doc-table:not(.doc-std) td.doc-name-cell {
    white-space: normal; line-height: 1.25; word-break: break-all;
  }
  table.tb.doc-table:not(.doc-std) td:nth-child(14) .ops { gap: 6px; }
  table.tb.doc-table:not(.doc-std) td:nth-child(14) .ops a { font-size: 11px; }
}

/* v8.2 手机竖屏：最后一列表头补「操作」二字（原表头是空的） */
@media (max-width: 820px) {
  table.tb.doc-table:not(.doc-std) th:nth-child(14)::after { content: '操作'; color: var(--muted); font-size: 11px; }
}

/* v8.3 手机竖屏细节：添加商品做主按钮、两钮等宽；操作列两个链接并排 */
@media (max-width: 820px) {
  .doc-tools-main { display: flex; gap: 8px; }
  .doc-tools-main .btn { flex: 1 1 0; min-width: 0; }
  .doc-tools-main .doc-add-btn {
    background: var(--action); border-color: var(--action); color: #fff; font-weight: 600;
  }
  table.tb.doc-table:not(.doc-std) td:nth-child(14) .ops { flex-wrap: nowrap; }
  table.tb.doc-table:not(.doc-std) th:nth-child(3), table.tb.doc-table:not(.doc-std) td:nth-child(3) { width: 80px; }
  table.tb.doc-table:not(.doc-std) th:nth-child(14), table.tb.doc-table:not(.doc-std) td:nth-child(14) { width: 66px; }
}

/* v8.4 手机竖屏：去掉数字输入框的上下箭头（占宽）、给紧贴的列留足宽度 */
@media (max-width: 820px) {
  table.tb.doc-table:not(.doc-std) input[type="number"] {
    -moz-appearance: textfield; appearance: textfield;
    width: 100%; min-width: 0; box-sizing: border-box; padding: 0 3px;
  }
  table.tb.doc-table:not(.doc-std) input[type="number"]::-webkit-outer-spin-button,
  table.tb.doc-table:not(.doc-std) input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  table.tb.doc-table:not(.doc-std) th:nth-child(9), table.tb.doc-table:not(.doc-std) td:nth-child(9) { width: 44px; }
  table.tb.doc-table:not(.doc-std) th:nth-child(10), table.tb.doc-table:not(.doc-std) td:nth-child(10) { width: 52px; }
  table.tb.doc-table:not(.doc-std) th:nth-child(14), table.tb.doc-table:not(.doc-std) td:nth-child(14) { width: 72px; }
  table.tb.doc-table:not(.doc-std) td:nth-child(14) .ops a { font-size: 10.5px; }
}

/* v8.5 手机竖屏：操作列的两个链接去掉左右内边距（之前 0 8px 把「编辑」挤出格子） */
@media (max-width: 820px) {
  table.tb.doc-table:not(.doc-std) td:nth-child(14) .ops { gap: 6px; }
  table.tb.doc-table:not(.doc-std) td:nth-child(14) .ops a { padding: 0 1px; }
  table.tb.doc-table:not(.doc-std) th:nth-child(3), table.tb.doc-table:not(.doc-std) td:nth-child(3) { width: 76px; }
  table.tb.doc-table:not(.doc-std) th:nth-child(14), table.tb.doc-table:not(.doc-std) td:nth-child(14) { width: 74px; }
}

/* v8.6 手机竖屏：品名格里的「上次 ¥xx」在 6 列紧凑表里会挤成第三行，隐藏；
   完整信息在「编辑」弹窗和桌面上都有 */
@media (max-width: 820px) {
  table.tb.doc-table:not(.doc-std) td.doc-name-cell .last-price { display: none; }
}

/* ==========================================================================
   v9 客户报价：添加商品按钮 + 一键设价
   ========================================================================== */
.pick-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pick-add-btn { font-weight: 600; }
.doc-detail-image { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; }
.doc-detail-items td { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 820px) {
  .doc-detail-items table.tb td { white-space: normal; overflow-wrap: anywhere; }
  .doc-detail-items td[data-label="尺码 / 数量"],
  .doc-detail-items td[data-label="当前箱号"],
  .doc-detail-items td[data-label="入库箱号"] { grid-column: 1 / -1; }
}
.pick-price-batch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.pick-price-batch .pick-level { width: auto; min-width: 120px; }
@media (max-width: 820px) {
  .pick-add-btn { min-height: 40px; flex: 1 1 auto; }
  .pick-price-batch .pick-level { min-height: 40px; flex: 1 1 100%; }
  .pick-price-batch .btn { flex: 1 1 calc(50% - 4px); min-height: 40px; }
}
/* 报价卡片：每行两款，左图右侧价格、数量和两组尺码。 */
.quote-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.quote-product-card { min-width: 0; border: 1px solid var(--line-strong); break-inside: avoid; }
.quote-card-title { padding: 8px; display: flex; flex-wrap: wrap; gap: 3px 8px; border-bottom: 1px solid var(--line-strong); overflow-wrap: anywhere; }
.quote-card-title b { font-family: var(--mono); }
.quote-card-title span { font-size: 11px; }
.quote-card-body { display: grid; grid-template-columns: 40% minmax(0,1fr); min-height: 150px; }
.quote-card-photo { display: flex; align-items: center; justify-content: center; padding: 6px; border-right: 1px solid var(--line-strong); min-width: 0; }
.quote-card-photo img { width: 100%; max-height: 260px; object-fit: contain; }
.quote-card-data { min-width: 0; }
.quote-card-metrics { display: flex; min-height: 58px; border-bottom: 1px solid var(--line-strong); }
.quote-card-metrics > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 2px; overflow-wrap: anywhere; }
.quote-card-metrics > div + div { border-left: 1px solid var(--line-strong); }
.quote-card-metrics span { color: var(--muted); font-size: 11px; }
.quote-card-size-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.quote-card-size-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-bottom: 1px solid var(--line); font-size: 10px; }
.quote-card-size-pair + .quote-card-size-pair { border-left: 1px solid var(--line-strong); }
.quote-card-size-pair > * { padding: 3px 2px; text-align: center; overflow-wrap: anywhere; }
.quote-card-size-pair b { border-left: 1px solid var(--line); }
@media screen and (max-width:820px) {
  .quote-card-grid { gap: 6px; }
  .quote-card-title { padding: 5px; font-size: 10px; }
  .quote-card-title span { font-size: 10px; }
  .quote-card-body { min-height: 110px; grid-template-columns: 36% minmax(0,1fr); }
  .quote-card-photo { padding: 2px; }
  .quote-card-metrics { flex-wrap: wrap; }
  .quote-card-metrics > div { flex-basis: 100%; padding: 3px 1px; font-size: 10px; }
  .quote-card-metrics span { font-size: 9px; }
  .quote-card-size-pair { font-size: 8px; }
}

/* 开单图片列始终位于最前，手机也显示，其他列沿原来次序。 */
.bill-product-image { width: 42px; height: 48px; object-fit: contain; display: block; margin: auto; }
.doc-table th.bill-image-cell, .doc-table td.bill-image-cell { width: 52px; padding: 4px; }
@media (max-width: 820px) {
  table.tb.doc-table:not(.doc-std) th.bill-image-cell,
  table.tb.doc-table:not(.doc-std) td.bill-image-cell { display: table-cell; width: 38px; padding: 2px; position: static; }
  .doc-table .bill-product-image { width: 32px; height: 40px; }
  table.tb.doc-table:not(.doc-std) th:nth-child(3),
  table.tb.doc-table:not(.doc-std) td:nth-child(3) { width: 60px; overflow-wrap: anywhere; white-space: normal; }
  table.tb.doc-table:not(.doc-std) th:nth-child(14),
  table.tb.doc-table:not(.doc-std) td:nth-child(14) { width: 62px; }
  .doc-table td.bill-image-cell::before { content: none; }
}

/* 查看详情铺满窗口，标题/操作保留在内容滚动区之外。 */
.overlay.detail-fullscreen { padding: 0; align-items: stretch; overscroll-behavior: contain; }
.overlay.detail-fullscreen > .modal {
  width: 100% !important; max-width: none; height: 100vh; height: 100dvh;
  max-height: none; border-radius: 0; box-shadow: none; min-width: 0;
}
.detail-fullscreen > .modal > .modal-hd { flex: 0 0 auto; gap: 12px; overflow-wrap: anywhere; padding-top: max(14px, env(safe-area-inset-top)); }
.detail-fullscreen .modal-x { flex: 0 0 44px; width: 44px; height: 44px; }
.detail-fullscreen > .modal > .modal-bd { flex: 1 1 0; min-height: 0; min-width: 0; max-height: none; overscroll-behavior: contain; }
.detail-fullscreen > .modal > .modal-ft { flex: 0 0 auto; flex-wrap: wrap; position: static; }
.detail-fullscreen table.tb th, .detail-fullscreen table.tb td { white-space: normal; overflow-wrap: anywhere; }
.detail-fullscreen .print-preview-frame { width: 100%; height: 100%; min-height: 0; }
@media (max-width: 700px) {
  .detail-fullscreen > .modal > .modal-bd { padding: 12px; }
  .detail-fullscreen > .modal > .modal-hd { padding-left: 12px; padding-right: 8px; }
}

/* 箱号详情紧接选中的箱号行，手机卡片保持整宽。 */
.box-list { max-height: none; }
.box-list > table.tb > tbody > tr.box-detail-row > td.box-detail-cell { padding: 12px 0; white-space: normal; }
.box-detail-cell::before { display: none !important; }
.box-inline-detail { min-width: 0; width: 100%; }
@media (max-width: 820px) {
  .box-list > table.tb > tbody > tr.box-detail-row { display: block; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .box-list > table.tb > tbody > tr.box-detail-row > td.box-detail-cell { display: block; padding: 0; overflow: visible; }
}

/* 所有屏幕都保留菜单开关；宽屏收起后内容占满。 */
.nav-toggle { display: inline-block; min-width: 40px; min-height: 40px; }
@media (min-width: 821px) { .shell.nav-collapsed > .side { display: none; } }
.gallery-stock-detail .gallery-stock-photo { width: 100%; max-width: 260px; height: 260px; object-fit: contain; display: block; border-radius: 8px; margin: 0 auto; }
@media (max-width: 820px) {
  .gallery-stock-detail .gallery-stock-photo { max-width: 180px; height: 180px; }
}

.nav-close { margin-left: auto; flex: 0 0 32px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: 25px; cursor: pointer; }

/* 图册详情：图片在左，尺码数量在右；小屏保持同一排列。 */
.gallery-stock-detail { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 20px; align-items: start; }
.gallery-stock-visual, .gallery-stock-sizes { min-width: 0; }
.gallery-stock-detail .gallery-stock-table { width: 100%; table-layout: fixed; }
.gallery-stock-detail .gallery-stock-table th, .gallery-stock-detail .gallery-stock-table td { white-space: normal; overflow-wrap: anywhere; padding: 8px 6px; }
@media (max-width: 820px) {
  .gallery-stock-detail { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 10px; }
  .gallery-stock-detail .gallery-stock-photo { height: 160px; }
  .gallery-stock-detail .gallery-stock-table th, .gallery-stock-detail .gallery-stock-table td { padding: 6px 3px; font-size: 11px; }
}

/* 库存明细保持仓库/数量列对齐，尺码滚动仅限展开区域。 */
.stock-detail-content { min-width: 0; }
.stock-detail-content > * { min-width: 0; }
.stock-detail-content .stock-size-scroll { max-width: 100%; overflow-x: auto; }
.stock-detail-content .wh-fold-table { width: 100%; table-layout: fixed; }
.stock-detail-content .wh-fold-table > tbody > tr > td,
.stock-detail-content .wh-fold-table > thead > tr > th { white-space: normal; overflow-wrap: anywhere; }
.stock-detail-content .wh-mtx { min-width: max-content; }
@media (max-width: 820px) {
  .stock-detail-content .wh-fold-table > tbody > tr > td,
  .stock-detail-content .wh-fold-table > thead > tr > th { padding: 8px 4px; font-size: 12px; }
  .stock-detail-content .detail-head { align-items: flex-start; }
  .stock-detail-content .detail-head > div { min-width: 0; overflow-wrap: anywhere; }
  .stock-detail-content .thumb-lg { width: 80px; height: 80px; flex-shrink: 0; object-fit: contain; }
}