/* ── 配色：从速达的截图里取出来的 ─────────────────────────
   不是"看着像"，是取色器量出来的：
     窗体白 #FFFFFF / 窗底 #F0F0F0 / 网格线 #D5D5D5 / 外框 #A6A6A6
     选中蓝 #BAD2EA（速达表格里当前格/下拉高亮就是这个蓝）
     黑字 #000000 / 次字 #666666
   整屏只有白、灰、黑、淡蓝四种颜色 —— 这就是它看着"素"的原因。
   原来那套绿色强调色、8px 大圆角、f7f7f7 灰块，全撤掉。 */
:root {
  --bg: #f0f0f0;          /* 窗口底（速达的窗体面） */
  --panel: #ffffff;
  --line: #c8c7c7;        /* 表格网格线（从速达表格截图取的） */
  --line-2: #b9b9b9;      /* 控件边框 */
  --line-3: #8f8f8f;      /* 表格外框 / 强调线（比格线深一档） */
  --text: #000000;
  --muted: #666666;
  --accent: #2f5c93;      /* 系统蓝，替掉原来的绿 */
  --accent-soft: #bad2ea; /* 速达的选中蓝 */
  --accent-pale: #eaf2fb;
  --warn: #a8700f;
  --warn-soft: #fdf3e3;
  --bad: #b23b32;
  --bad-soft: #fbeceb;
  --radius: 0px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  /* 速达是 Windows 老程序，正文宋体 9pt。文员一天在这两个窗口之间切几十次，
     字体差太远眼睛要一直"重新适应"。这边也走宋体，字号抬到 12.5px
     （9pt 在现在的屏上偏小，12.5px 笔画密度接近但更好认）。 */
  font-family: "SimSun", "宋体", NSimSun, "Microsoft YaHei", sans-serif;
  font-size: 14px; color: var(--text); background: var(--bg);
  overflow: hidden;
}

/* 经典灰滚动条 —— 速达那种一格一格的。不写的话 Chrome 默认是细长条，
   跟整屏的方块感不搭。 */
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb {
  background: #cdcdcd; border: 1px solid #a6a6a6;
}
::-webkit-scrollbar-thumb:hover { background: #b9b9b9; }
::-webkit-scrollbar-corner { background: #f0f0f0; }

/* ── 顶栏 ── */
.topbar {
  height: 42px; display: flex; align-items: center; gap: 6px;
  /* 右边比左边多留得多一些：最后一颗是「⚙ 设置」，贴着窗口边缘点起来容易
     点空，视觉上也不平衡（左边是标题，天然不需要额外留白）。
     60px ≈ 左边 10px + 3 个字的空档（客户要求"再往左挪 3 个字"）。 */
  padding: 0 60px 0 10px; background: #f0f0f0;
  border-bottom: 1px solid var(--line-3);
}
/* 顶栏按钮不许折行。按钮多了以后（待认领编码 / 读回填表 / 导出导入包），
   窄一点的屏幕上会「导入文 件夹」这样断成两行，很难看 */
.topbar button { white-space: nowrap; flex: none; }
/* 「经营看板」入口是 <a href> 不是 <button> —— 它是跳页，绑 app.js 会作废录入侧
   的全部回归（方案 C-1 / D-5）。但外观必须跟旁边那排按钮一模一样：顶栏里夹一个
   带下划线的蓝链接，客户会以为界面坏了。所以把 button 那套皮复制一份给它，
   只加颜色/边框/内边距，别的一律复用。 */
.topbar a.btn {
  font: inherit; cursor: pointer; border-radius: 3px;
  border: 1px solid var(--line-2); background: #fff;
  color: var(--text); padding: 4px 12px; font-size: 13px;
  text-decoration: none; white-space: nowrap; flex: none;
}
.topbar a.btn:hover { background: #f2f7fd; border-color: #8fb0d4; }
.topbar .brand { flex: none; white-space: nowrap; }
.brand { font-weight: 700; font-size: 14.5px; letter-spacing: .5px; }
.brand span { color: #777; font-weight: 400; font-size: 12px; margin-left: 5px; }
.spacer { flex: 1; min-width: 8px; }
.progress {
  font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px;
  padding: 3px 10px; background: transparent; border-radius: 0;
  border: 1px solid var(--line);
  /* 统计文字最容易被挤 —— 让它先缩、先省略，别去挤按钮 */
  min-width: 0; flex: 0 1 auto; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.progress b { color: var(--text); font-weight: 400; }

/* 按钮：白底 + 灰边 + 3px 小圆角 —— 速达那排「审核(0) 保存新增(S) 确定(A) 取消(C)」
   就是这个样子。不做阴影、不做渐变、不做大圆角。 */
button {
  font: inherit; cursor: pointer; border-radius: 3px;
  border: 1px solid var(--line-2); background: #fff;
  color: var(--text); padding: 4px 12px; font-size: 13px;
}
button:hover { background: #f2f7fd; border-color: #8fb0d4; }
button:active { background: var(--accent-soft); }
button.primary {
  background: var(--accent-soft); border-color: #8fb0d4;
  color: #10365f; font-weight: 500;
}
button.primary:hover { background: #a9c6e4; }
button.ghost { background: #fff; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.tiny { padding: 3px 10px; font-size: 12.5px; }

/* ── 主体 ── */
.main { display: flex; height: calc(100% - 42px); }

.viewer {
  width: 42%; min-width: 320px; display: flex; flex-direction: column;
  background: #e6e6e6; border-right: 1px solid var(--line-3);
}
.viewer-tools {
  min-height: 34px; display: flex; align-items: center; gap: 5px; padding: 4px 8px;
  background: #f0f0f0; color: #333; font-size: 12.5px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  /* 按钮多到换行时，这一条要跟着变高。不写 flex:none 会被下面的图挤扁，
     第二行的按钮就被裁掉一半（加「标行号」时踩过一次）。 */
  flex: none;
}
.viewer-tools #fileName {
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex-shrink: 1; min-width: 60px;
}
.viewer-tools button {
  background: #fff; border-color: var(--line-2); color: #222; padding: 2px 9px;
  font-size: 12.5px; white-space: nowrap; flex-shrink: 0;
}
.viewer-tools button:hover { background: #f2f7fd; border-color: #8fb0d4; }
.viewer-tools button.on { background: var(--accent-soft); border-color: #8fb0d4; color: #10365f; }
.viewer-tools .vdiv { width: 1px; height: 18px; background: var(--line-2); margin: 0 3px; flex-shrink: 0; }
.angle-hint { font-size: 12px; color: #777; white-space: nowrap; flex-shrink: 0; }
.angle-hint.on { color: var(--accent); }
.viewer-canvas {
  flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center;
  padding: 6px;
}
.viewer-canvas img {
  max-width: 100%; max-height: 100%; display: block;
  border: 1px solid #b0b0b0; box-shadow: 1px 1px 4px rgba(0,0,0,.18);
}
.viewer-canvas img.zoomed { max-width: none; max-height: none; }

.editor { flex: 1; display: flex; flex-direction: column; min-width: 560px; }

/* ── 单头 ─────────────────────────────────────────────
   照速达的排法：三列网格，标签右对齐顶在输入框左边，
   顺序是「这是什么单 → 谁的单 → 落哪个仓 → 哪天 → 什么号 → 什么状态」。
   一条横线排开的话，人眼要横跨整屏来回找，写单据的人不这么看东西。 */
.docmeta {
  display: flex; flex-direction: column; gap: 4px;
  padding: 5px 12px 5px;
  background: #fff; border-bottom: 1px solid var(--line-3);
  flex: none;
}
/* 单据大标题 —— 速达那个窗口最显眼的特征就是「销售开单」四个大字居中。
   去掉它，整个界面就只是"一个表单"，不像单据窗。 */
.dm-title {
  text-align: center; font-size: 17px; font-weight: 700;
  letter-spacing: 3px; padding: 1px 0 2px; color: #000;
}
.dm-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 16px;
}
.dm-f { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dm-l {
  flex: none; width: 64px; text-align: right;
  font-size: 13px; color: #333; white-space: nowrap;
}
.dm-f > input, .dm-f > .sp { flex: 1 1 0; min-width: 0; }
.dm-f > .seg { flex: 0 0 132px; }
.docmeta input {
  font: inherit; font-size: 14px; padding: 3px 6px;
  border: 1px solid var(--line-2); border-radius: 0; background: #fff;
  min-width: 0;
}
.docmeta input:focus { outline: none; border-color: #7ba3cd; background: #fff; }
.docmeta .fname { color: #777; font-size: 12px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 单头那行灰字：说清哪些栏位不归我们管。不加的话文员会一直找「发票类型在哪」 */
.dm-note {
  font-size: 12px; color: #888; padding-left: 70px; line-height: 1.5;
}
.dm-note b { color: #555; font-weight: 400; }
.dm-tail {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 3px;
  font-size: 12.5px; padding-top: 1px;
}
.dm-tail .trace { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dm-tail .stamp { margin-right: 2px; }
.dm-state { gap: 6px; }

/* 采购 / 销售 切换：做成速达那种页签 —— 选中的跟下面的内容一样是白底，
   未选中的压一层灰，一眼看出"现在在哪一页"。 */
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 0; overflow: hidden; }
.seg button {
  font: inherit; font-size: 13px; padding: 2px 0; border: 0; background: #f0f0f0;
  color: #444; cursor: pointer; line-height: 1.5; flex: 1; text-align: center;
  border-radius: 0;
}
.seg button:hover { background: #e6eefa; color: #10365f; }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button.on { background: #fff; color: #000; font-weight: 500; }

/* 「已审」章：速达靠一个红章告诉人这张过没过，我们保留这个信号，
   但只用一个红框小字，不做成一整块红色（满屏红反而看不出重点）。 */
.stamp {
  font-size: 11px; padding: 0 7px; line-height: 16px;
  border: 1px solid #c2453d; color: #c2453d; border-radius: 2px;
  transform: rotate(-5deg); letter-spacing: 1.5px; flex: none;
}
.stamp.hide { display: none; }

.tag {
  font-size: 12.5px; padding: 1px 8px; border-radius: 2px;
  background: #fff; border: 1px solid var(--line-2); color: #333;
}
.tag.ok { background: var(--accent-pale); border-color: #8fb0d4; color: #10365f; }
.tag.fix { background: var(--warn-soft); border-color: #e0c79a; color: var(--warn); }
.tag.bad { background: var(--bad-soft); border-color: #e0b4b0; color: var(--bad); }

/* ── 表格 ─────────────────────────────────────────────
   速达这块的规矩很简单：**白底 + 1px 浅灰方格 + 黑字**，表头不加粗不加色。
   数据行隔一行压一层极淡的底（速达也有），扫行的时候不容易串行。
   外面再套一圈深一点的框 —— 那是"表格控件"的边界，有它才像个录入表。 */
.tablewrap {
  flex: 1; overflow: auto; background: #fff;
  border: 1px solid var(--line-3); border-top: 0;
}
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* 表头：浅灰底（#D5D5D5，跟速达取的一致）+ 粗体。
 *
 * 为什么两样都要：
 *   只靠粗体 —— 宋体 12px 的合成粗体是"横向撑粗"，笔画容易糊，扫列名还是费力；
 *   只靠底色 —— 字还是弱的，远看一眼找不准"哪个是单价"。
 *   底色拉开区块，粗体立起字，两件事各管一半。
 * 分界线比数据格深一档（#B5B5B5），表头和数据之间有一条明确的"抬头线"。 */
thead th {
  position: sticky; top: 0; z-index: 4;
  background: #d5d5d5; border: 1px solid #a0a0a0; border-bottom: 1px solid #8f8f8f;
  font-weight: 700; font-size: 13.5px; color: #000;
  padding: 4px 6px; text-align: center; white-space: nowrap;
}
thead th.num { text-align: center; }
tbody td { border: 1px solid var(--line); padding: 0; background: #fff; }
tbody tr:nth-child(even) td { background: #e7efef; }
tbody tr:hover td { background: #dceafa; }
tbody tr.bad td { background: var(--bad-soft); }
tbody tr.bad:hover td { background: #f9e4e2; }
tbody tr.fix td { background: var(--warn-soft); }
tbody tr.fix:hover td { background: #fbeedb; }
tbody tr.unsure td.namecell { background: #fffdf5; }
/* 当前正在编辑的那一格：速达是淡蓝高亮，照做。没有它，一屏 20 行找不到光标在哪 */
tbody td:focus-within { background: var(--accent-soft) !important; }

td input {
  font: inherit; width: 100%; border: 0; background: transparent;
  padding: 4px 6px; color: #000; font-size: 14px;
}
td input:focus { outline: none; }
/* 数字居中：用户要求。右对齐便于小数点对位，但在这么窄的列里，
   右对齐会让数字贴着格子右边，左边空一大片，看着更散。
   居中以后数字正好落在格子中央，扫一列不用左右找。 */
td.num input { text-align: center; font-variant-numeric: tabular-nums; }
td.idx { width: 32px; text-align: center; color: #333; font-size: 12.5px;
         background: #d5d5d5 !important; user-select: none; cursor: pointer;
         border-right: 1px solid #a0a0a0; }
td.idx:hover { background: var(--accent-soft) !important; color: #000; }
td.site { width: 78px; }
td.site input { color: #000; font-size: 13px; }
td.qty, td.price { width: 62px; }
td.amount { width: 82px; }
td.amount input { font-weight: 600; font-size: 14px; }
td.unit { width: 44px; }
td.unit input { text-align: center; color: #444; font-size: 13px; }
td.note { width: 96px; }
td.note input { color: #444; font-size: 13px; }

/* 货品编码列：认不出来就显示「待定」，**点进去能直接手打**。
   以前这里是只读的一行字 —— 库里没这个品名时，文员明明知道编码是几，也只能干看着，
   非得绕到品名库去建一条。现在光标落进去就能敲。
   空着的时候字是褐色的（跟表头黑字分开），一看就知道这行还没落定。 */
td.code { width: 76px; text-align: center; }
td.code input {
  text-align: center; font-size: 13px; padding: 4px 3px;
  font-variant-numeric: tabular-nums; color: #000;
}
td.code input::placeholder { color: #b08a5a; }
td.code.empty input { color: #a8730f; }
td.code input:hover { background: #fffdf6; }

/* 表底合计行：贴在最下面不随滚动跑掉。跟速达一样，数量、金额各对各的列。
   白底、加粗、上方一条深线 —— 速达的合计行就是表格里的一行，不是一条色带。 */
/* 合计行就是表格的最后一行，**不做吸底**。
   吸底会把最后两三行压在下面看不见 —— 那比"要滚一下才看到合计"糟糕得多：
   人会以为那几行没录进来。合计数字另外挂在单尾那行，随时看得到。 */
tfoot td {
  background: #fff; border: 1px solid var(--line); border-top: 1px solid #8f8f8f;
  font-weight: 700; font-size: 13.5px; padding: 4px 6px; color: #000;
  font-variant-numeric: tabular-nums;
}
tfoot td.num { text-align: center; }
tfoot td:first-child { letter-spacing: 3px; }

.mk { font-weight: 700; font-size: 13.5px; }
.mk.ok { color: #2f7a3f; }
.mk.fix { color: var(--warn); }
.mk.bad { color: var(--bad); }

/* ── 品名格 + 品名库标记 ── */
td.namecell .nm { display: flex; align-items: center; }
td.namecell .nm input { flex: 1; min-width: 0; padding-right: 2px; }
/* 规格副行：跟速达「货品名称(规格)」是一回事，只是折起来放，
   免得右侧这块地方被 11 列挤没了 */
td.namecell .spec {
  font-size: 11.5px; color: #999; padding: 0 6px 3px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
td.namecell .spec:empty { display: none; }
td.namecell .spec.raw { color: #b08a5a; }
td.namecell .spec:hover { color: var(--accent); }
/* 品名格右边那个小标（非标 / 选规格 / ✓）。
   品名列收窄以后它不能再用圆角胶囊 —— 一个 44px 的胶囊能吃掉五分之一列宽。
   改成方角小标签，字号再降一档，只占 40 出头。 */
.stb {
  flex: 0 0 auto; max-width: 52px; margin-right: 3px;
  border: 1px solid transparent; border-radius: 2px; background: transparent;
  color: #aab2b8; font-size: 11px; line-height: 17px; padding: 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stb:hover { border-color: #c9c9c9; background: #fff; }
/* 非标项：黄色（匹配上的不给颜色，免得满屏花花绿绿） */
.stb.nonstd {
  background: transparent; border-color: #e8d7bb;
  color: #a8730f; font-weight: 400;
}
.stb.nonstd::after { content: "非标"; }
.stb.manual { color: var(--accent); background: var(--accent-soft); border-color: #cfe9e1; }
/* 整行都没对上时，品名格给个极淡的底，扫一眼能看出哪几行要处理 */
tr.nonstd td.namecell { background: #fffdf6; }

/* ── 选标准品名弹层 ── */
.std-dlg { width: 560px; }
.std-dlg .from { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.std-dlg .from b { color: var(--text); font-weight: 600; }
.cands { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.cands:empty { display: none; }
.cand {
  display: flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--line); border-radius: 16px; padding: 5px 12px;
  background: #fcfdfd; font-size: 14px;
}
.cand:hover { border-color: var(--accent); background: var(--accent-soft); }
.cand .sc { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cand.best { border-color: #cfe9e1; background: var(--accent-soft); }
.cand.best .sc { color: var(--accent); }
.std-dlg input[type=text] { margin-bottom: 8px; }
.stdlist {
  max-height: 250px; overflow: auto; border: 1px solid var(--line);
  border-radius: 6px; margin-bottom: 12px;
}
.stdlist:empty { display: none; }
.stdlist .rowi {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid #f2f4f5; cursor: pointer; font-size: 13.5px;
}
.stdlist .rowi:last-child { border-bottom: 0; }
.stdlist .rowi:hover { background: var(--accent-soft); }
.stdlist .rowi .u { color: var(--muted); font-size: 13px; margin-left: auto; }
.stdlist .rowi .sc2 { color: var(--muted); font-size: 12px; }
.chk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.chk input { width: 16px; height: 16px; }
.muted { color: var(--muted); }

/* ── 品名库抽屉 ── */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 680px; max-width: 94vw;
  background: #fff; border-left: 1px solid var(--line-3);
  box-shadow: -6px 0 22px rgba(20,24,27,.16);
  display: flex; flex-direction: column; z-index: 60;
  transform: translateX(0); transition: transform .18s;
}
.drawer.hide { transform: translateX(105%); }
.drawer-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--line-3); font-size: 13.5px; background: #f0f0f0;
  overflow: hidden;
}
.drawer-head b { font-weight: 700; flex: none; white-space: nowrap; }
/* 统计那一串（2243 个货品 · 2070 个品名 · …）比标题长得多。
   不限制的话它会把「关闭」按钮挤出面板外（14px 下真的挤出去了）。
   给它可伸缩 + 省略，标题和按钮都 flex:none —— 谁都不许动别人的位置。 */
.drawer-head .stat {
  color: var(--muted); font-size: 12px;
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drawer-head button { flex: none; white-space: nowrap; }
.drawer-tabs { display: flex; gap: 0; padding: 6px 8px 0; border-bottom: 1px solid var(--line-3); background: #f0f0f0; }
.drawer-tabs .tab {
  border: 1px solid transparent; border-bottom: 0; border-radius: 0;
  background: transparent; padding: 4px 12px 5px; color: #444; font-size: 13px;
}
.drawer-tabs .tab.on {
  color: #000; font-weight: 700; background: #fff;
  border-color: var(--line-3); border-bottom-color: #fff; margin-bottom: -1px;
}
.drawer-tabs .tab i { font-style: normal; background: var(--warn-soft); color: var(--warn);
                      border-radius: 9px; padding: 1px 7px; font-size: 12px; margin-left: 3px; }
.drawer-body { flex: 1; overflow: auto; padding: 14px 18px; }
.drawer-body input[type=text] {
  width: 100%; font: inherit; font-size: 13.5px; padding: 5px 8px;
  border: 1px solid var(--line-2); border-radius: 0; margin-bottom: 10px;
}
.drawer-foot {
  display: flex; gap: 6px; padding: 6px 12px; border-top: 1px solid var(--line-3);
  background: #f0f0f0;
}
.nllist { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.nllist .rowi {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid #f2f4f5; font-size: 13.5px;
}
.nllist .rowi:last-child { border-bottom: 0; }
.nllist .rowi:hover { background: #fafcfb; }
.nllist .rowi .nm2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nllist .rowi .u { color: var(--muted); font-size: 12.5px; }
.nllist .rowi .su { color: var(--muted); font-size: 12.5px; }
.nllist .rowi .su b { color: var(--accent); font-weight: 500; }
.nllist .rowi button { padding: 4px 10px; font-size: 13px; }
.nllist .empty2 { padding: 22px; text-align: center; color: var(--muted); font-size: 14px; }

/* 货品清单：能点的行必须像能点的。
   客户直接抱怨的就是"鼠标不是手型"—— 一行 div 没有 cursor:pointer，
   人根本不知道可以点，于是"点了没反应"的印象就是这么来的。 */
.nllist .rowi.nlgrp, .nllist .rowi.nlsku { cursor: pointer; }
.nllist .rowi.nlgrp:hover, .nllist .rowi.nlsku:hover { background: var(--accent-soft); }
/* 缩进 26px：表示"这条属于上面那个品名"，不靠颜色也不靠图标 */
.nllist .rowi.nlsku { padding-left: 26px; background: #fcfdfd; }
/* 展开态留痕：收起/展开来回点时，人得看出现在展开的是哪一组 */
.nllist .rowi.nlgrp.on { background: var(--accent-soft); }
/* 「点哪一条就改哪一条」：展开后第一行是提示，不是可点的货品 */
.nllist .rowi.nltip { cursor: default; background: transparent; color: var(--muted);
  font-size: 12.5px; padding-top: 4px; padding-bottom: 4px; }
.nllist .rowi.nltip:hover { background: transparent; }

/* 改货品：5 个字段一行一个，左边中文标签右边输入框。
   不用 table —— .dialog 里套 table 会被 input 的通用宽度撑破。 */
.nl-fld { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.nl-fld > label { flex: none; width: 68px; color: var(--muted); font-size: 13px; }
.nl-fld > input { flex: 1 1 0; min-width: 0; margin-bottom: 0 !important; }
/* 影响面提示：黄条，跟草稿条/退回条同一套语言（提示，不是报错） */
.nlwarn {
  margin: 0 0 12px; padding: 7px 10px; border-radius: 3px;
  background: #fdf6e3; border: 1px solid #e8d7bb; color: #7a5a1e;
  font-size: 12.5px; line-height: 1.6;
}
.nlwarn.hide { display: none; }

/* ── 核对覆盖（客户更新了货品资料表 → 先看差异、勾选了才落库）──
   六栏竖着排，一栏一类；每行一个勾，整行都可以点（客户不爱瞄准小方块）。
   这一屏的字比别处大一档：要在上面逐项做"删不删"的决定，看不清就等于没确认。 */
.nd-dlg { width: 720px; max-height: 84vh; display: flex; flex-direction: column; }
.nd-top { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; }
.nd-top .fname { font-size: 13px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.nd-counts {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 8px 10px; margin: 0 0 4px; background: var(--accent-pale);
  border: 1px solid #cfe0f2;
}
.nd-secs { overflow: auto; min-height: 0; margin-bottom: 10px; }
.nd-sec { padding: 10px 0 4px; border-top: 1px solid #e6e6e6; }
.nd-sec:first-child { border-top: 0; }
.nd-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.nd-h .nd-n { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.nd-all {
  margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--accent);
  cursor: pointer; padding: 2px 8px; border: 1px solid var(--line-2);
}
.nd-all:hover { background: var(--accent-soft); }
.nd-tip { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 3px 0 2px; }
.nd-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  font-size: 14px; cursor: pointer; border: 1px solid transparent;
}
.nd-row:hover { background: #f2f6fb; }
.nd-row.on { background: var(--accent-pale); border-color: #cfe0f2; }
.nd-row input { width: 16px; height: 16px; flex: none; }
.nd-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.nd-cut { font-size: 12.5px; color: var(--warn); background: var(--warn-soft);
  padding: 5px 8px; margin-top: 4px; }
/* 换码那一栏：它是最容易被忽略、后果又最贵的一项（等于换了个身份），整栏加条橙边 */
.nd-hot { border-left: 3px solid #EF9F27; padding-left: 8px; }
.nd-hot .nd-h { color: #a8541a; }
.nd-notes {
  background: #f7f8f8; border: 1px solid #e6e6e6; padding: 7px 10px; margin-bottom: 12px;
  max-height: 92px; overflow: auto;
}
.nd-notes.hide { display: none; }
.nd-note { font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* 单尾的对账提示：只在"纸面写的数"跟"系统按明细加出来的数"对不上时出现。
   中间那版做成了三列对照表（纸上原数 / 识别计算 / 差额），太占地方、也太重，
   砍掉了 —— 现在只留一句话，具体核哪一段看备注里那个「人工核」。 */
.recon-hint {
  color: var(--bad); font-weight: 500; font-size: 12px;
  max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: help;
}
.recon-hint.hide { display: none; }
/* 纸上合计：贴在单尾，字要小、格要窄 —— 它是"核对工具"，不是主输入项。
   放 78px 是因为「3790.80」这类五位数带两位小数刚好装下，再宽就挤掉右边的提示。 */
.paper-total {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; color: var(--ink-2, #6b7780); cursor: help;
}
.paper-total input {
  width: 78px; padding: 1px 4px; font-size: 11.5px; text-align: right;
  border: 1px solid var(--line, #d6dde3); border-radius: 3px; background: #fff;
}
.paper-total input:focus { outline: none; border-color: var(--accent, #2f7fd0); }
#btnProblem { flex: none; }
#btnProblem.on {
  background: #fff; border-color: #c8952e; color: #8a5a00; font-weight: 500;
}
#btnProblem:disabled { opacity: .5; }

/* ── 单尾：制单人 / 审核 ──────────────────────────────
   速达单据窗底部也是这两格。它靠一个红章表达"过没过"，
   我们两处都给：表头一个章一眼看，这一行写清谁、什么时候。 */
.auditline {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 10px; background: #fff;
  border-top: 1px solid var(--line); font-size: 12.5px; color: #444; flex: none;
}
.auditline .dot { color: #bbb; }
#auditState.ok { color: #1d6b3a; font-weight: 500; }
#auditState.back { color: var(--warn); }
#btnUnconfirm { margin-left: 2px; }
.auditline .hint { font-size: 12.5px; }

/* ── 底部动作条 ── */
.actions {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  background: #f0f0f0; border-top: 1px solid var(--line-3); flex: none;
}
.actions button.primary { padding: 4px 26px; font-size: 13.5px; font-weight: 500; }
.actions .hint { color: var(--muted); font-size: 12.5px; }
.actions .vsep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; flex: none; }

/* ── 空态 ── */
.empty {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; color: var(--muted); background: var(--panel);
}
.empty h3 { margin: 0; font-size: 18px; color: var(--text); font-weight: 500; }
.empty p { font-size: 14px; line-height: 1.7; }
.empty code { background: var(--bg); padding: 4px 9px; border-radius: 5px; font-size: 13px; }

/* ── 导入弹层 ──
   z-index 必须是 70，高于抽屉的 60。这不是随手定的数：
   品名库的编辑框是从**抽屉里**打开的，抽屉常开、贴右 680px、层级 60；
   遮罩原来是 50，于是窗口窄于约 1860px 时，抽屉会压住弹框右半边 ——
   而「保存」按钮靠右对齐，正好被压住。1366/1440/1600 的办公笔记本上，
   客户点开编辑框根本看不到保存按钮，功能等于不可用（1920 全屏看不出来，
   所以前几轮验收全漏了）。同样的坑 #stdMask 一直也有。
   toast(80) 仍在模态之上、站点下拉(95) 与菜单(300) 更高，都不冲突。 */
.mask {
  position: fixed; inset: 0; background: rgba(20,24,27,.38);
  display: flex; align-items: center; justify-content: center; z-index: 70;
}
.mask.hide { display: none; }
.dialog {
  background: #fff; border: 1px solid var(--line-3); border-radius: 4px; padding: 16px 18px;
  width: 500px; box-shadow: 0 8px 26px rgba(0,0,0,.22);
}
.dialog h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.dialog p { margin: 0 0 12px; color: #444; font-size: 13px; line-height: 1.6; }
.dialog input[type=text] {
  width: 100%; font: inherit; font-size: 12.5px; padding: 5px 7px; border: 1px solid var(--line-2);
  border-radius: 0; margin-bottom: 12px;
}
.dialog .row { display: flex; gap: 9px; justify-content: flex-end; }
/* 放错文件夹的警告：要显眼，但别做成让人慌的红色大叉 —— 多数情况改一下下拉就好 */
.warn-dialog { width: 520px; border-top: 4px solid #E24B4A; }
.warn-dialog h3 { color: #A32D2D; }
.warn-dialog p { color: var(--text); }
.warn-dialog .import-tip { color: var(--muted); }
/* 「先别急着点」确认框：清单要能一眼扫完，不能把它做成滚动地狱。
   BUG-012 那种历史单一次可能有十几处，所以限高 + 滚动，每条一行一句。 */
.ask-dialog { width: 540px; border-top: 4px solid #EF9F27; }
.ask-list {
  margin: 0 0 14px; padding: 8px 12px 8px 28px; max-height: 168px; overflow: auto;
  background: #fdf6e3; border: 1px solid #e8d7bb; border-radius: 3px;
  font-size: 12.5px; line-height: 1.75; color: #7a5a1e;
}
.ask-list.hide { display: none; }
.ask-list li.more { list-style: none; margin-left: -16px; color: #a08a63; }

/* 导入时定「类型 / 仓库」：一行两个下拉，选完就整批带上 */
.import-meta { display: flex; gap: 12px; margin: -4px 0 10px; flex-wrap: wrap; }
.import-meta label {
  /* flex:1 1 0 而不是 flex:1 —— 不写 0 的话基准宽度取内容宽，
     遇到「（W5）绍兴希尔顿」这种长仓库名，下拉框会撑出弹窗外面 */
  flex: 1 1 210px; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--muted);
}
.import-meta label > span { flex: none; white-space: nowrap; }
.import-meta label > .sp, .import-meta label > select { flex: 1 1 0; min-width: 0; width: 100%; }
.dialog .import-tip { font-size: 12.5px; margin: 0 0 16px; line-height: 1.6; }

/* 仓库选择器：119 个仓库，原生下拉翻不动 —— 换成能打字的搜索框。
   底层 <select> 留着不动，所有读 .value 的地方一行都不用改。 */
.sp { position: relative; display: inline-block; vertical-align: middle; }
.sp > select { display: none; }
/* 用 .sp .sp-in 两段，压过 .docmeta input / .dialog input[type=text] 的通用样式 */
.sp .sp-in {
  width: 100%; margin: 0; font: inherit; font-size: 13.5px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  text-overflow: ellipsis;
}
.sp .sp-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(58,122,254,.12); }
.sp .sp-in::placeholder { color: #9aa3ab; }
.sp-list {
  position: absolute; z-index: 95; top: calc(100% + 4px); left: 0;
  min-width: 100%; max-width: 360px; max-height: 264px; overflow: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16); padding: 4px;
}
.sp-list.hide { display: none; }
.sp-head {
  padding: 5px 8px 6px; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--line); margin-bottom: 3px;
}
.sp-item {
  padding: 6px 8px; border-radius: 5px; font-size: 13.5px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-item.on, .sp-item:hover { background: #eef4ff; }
.sp-item b { color: #c55a11; font-weight: 600; }
.sp-empty { padding: 9px 8px; color: var(--muted); font-size: 13px; }
.sp-item.multi { color: #8a6d1f; }

/* 溯源信息：纸单日期 / 录入时间。字要小、不抢眼，但要随时看得见 */
.trace { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 门店对不上：这是"文件夹放错了"的直接证据，必须一眼看见 */
.conflict-hint {
  font-size: 12px; padding: 1px 8px; border-radius: 2px;
  background: #fcebeb; color: #a32d2d; border: 1px solid #e5b3b3;
  max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: #2b3034; color: #fff; padding: 10px 20px; border-radius: 22px;
  font-size: 14px; opacity: 0; transition: .2s; pointer-events: none; z-index: 80;
  /* 报错文案会长（「第 3 行的金额「一千二」不是数字，改一下再入库」），
     不给上限的话会拉成横跨整屏的一条，读起来更费劲 */
  max-width: min(560px, 88vw); line-height: 1.55; text-align: center;
}
.toast.show { opacity: .95; }


/* 待选规格：品名认出来了，但客户系统里这个品名有多个编码，得定一个 */
.stb.needspec {
  background: #eef4fb; border-color: #cfe0f2;
  color: #2d6cae; font-weight: 600;
}
.stb.needspec::after { content: ""; }
tr.needspec td.namecell { background: #f7fbff; }

/* 弱别名：认是认到了，但凭据很薄（写法跟标准名零共同字）。
   跟「非标」一样用黄，但换成虚线边 —— 非标是"库里没有、得补"，
   这个是"库里有、但你最好看一眼"，别让人误以为活儿干完了又冒出新的。
   不拦审核（闸门也不拦），审核一次就把它升成 learn，黄标自动消失。 */
.stb.lowconf {
  background: transparent; border: 1px dashed #e8d7bb;
  color: #a8730f; font-weight: 400;
}
.stb.lowconf::after { content: "待核实"; }
tr.lowconf td.namecell { background: #fffdf6; }

/* 弹层里的规格组 */
.specbox { margin: 4px 0 10px; }
.sp-head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; margin-bottom: 6px; color: var(--ink);
}
.sp-head .muted { font-size: 12px; }
.sp-wrap {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 168px; overflow: auto;
}
.cand.spec {
  flex-direction: column; align-items: flex-start;
  padding: 6px 12px; line-height: 1.45; min-width: 104px;
}
.cand.spec span:first-child { font-weight: 600; }
.cand.spec .sc { font-size: 11px; color: var(--muted); }

/* 品名库列表里的小标签：N 个规格 / 规格值 */
.pill {
  font-size: 11px; padding: 1px 6px; border-radius: 9px;
  background: #eef4fb; color: #2d6cae; white-space: nowrap;
}
.pill.gray { background: #f2f4f5; color: var(--muted); }

/* 通用隐藏。之前只有 .drawer/.mask 各自的 .hide 规则，
   tab 内容（tabTodo/tabAlias）压根没被隐藏过，三个页签的说明会叠在一起。
   抽屉本身保留 transform 动画，不走 display。 */
.hide:not(.drawer) { display: none !important; }

/* ── 修改留痕（只读档案）────────────────────────────
   这一页只有「看」和「导出」，没有改、没有删。
   左边一条绿线是提醒：这是档案，不是可编辑的表。 */
.ro-note {
  margin: 0 0 12px; font-size: 14px; line-height: 1.75; color: var(--muted);
  background: var(--bg); border-left: 3px solid var(--accent);
  padding: 10px 14px; border-radius: 0 6px 6px 0;
}
.ro-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ro-bar select, .ro-bar input {
  font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel); color: var(--text);
}
.ro-bar input { width: 240px; }
.ro-bar button { padding: 7px 14px; font-size: 14px; }

.nllist .rowi.ed { font-size: 14px; gap: 8px; }
.rowi.ed .et { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums;
               white-space: nowrap; min-width: 78px; }
.rowi.ed .ek {
  font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  background: var(--bg); color: var(--muted);
}
.rowi.ed .ek.learn { background: var(--accent-soft); color: var(--accent); }
.rowi.ed .ea { color: var(--muted); }
.rowi.ed .eo {
  color: var(--muted); text-decoration: line-through;
  flex: 0 1 auto; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rowi.ed .en {
  color: var(--text); font-weight: 500;
  flex: 0 1 auto; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rowi.ed .su { margin-left: auto; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 留痕面板顶部两行：第一行统计+导出，第二行筛选 */
.ro-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ro-top .muted { font-size: 13px; }
.ro-top button { padding: 5px 12px; font-size: 13px; }
.ro-bar input { flex: 1; width: auto; min-width: 0; }
.rowi.ed .eo.plain { text-decoration: none; }

/* 系统自动编的单号标黄 —— 一眼看出「这不是纸上印的原号」，
   免得有人拿它去跟供应商对账，对不上还以为数据错了 */
#metaNo.auto { background: #fffbe6; border-color: #e0cd93; color: #7a5c00; }
#btnAutono { margin-left: 6px; padding: 4px 9px; font-size: 13px; }


/* 识别进度条：贴在顶栏下面一条，不遮挡内容，也不挡住审核操作 */
.jobbar {
  display: flex; align-items: center; gap: 12px; padding: 7px 16px;
  background: #EAF3DE; border-bottom: 1px solid #C0DD97;
  font-size: 13px; color: #27500A;
}
.jobbar.hide { display: none; }
.jobbar .jb-t { font-variant-numeric: tabular-nums; white-space: nowrap; }
.jobbar .jb-p {
  flex: 1; min-width: 80px; height: 6px; background: #fff;
  border: 1px solid #C0DD97; border-radius: 4px; overflow: hidden;
}
.jobbar .jb-p i { display: block; height: 100%; background: #639922; transition: width .3s; }
.jobbar .jb-x { color: #3B6D11; white-space: nowrap; }

/* 运行日志 */
.log-dialog { width: 720px; max-width: 92vw; }
.log-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.log-tools label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.log-tools select, .log-tools input[type=text] {
  font: inherit; font-size: 13px; padding: 5px 7px;
  border: 1px solid var(--line); border-radius: 5px; background: #fff;
}
.log-list { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.log-row { display: flex; gap: 10px; padding: 6px 10px; font-size: 12.5px; border-bottom: 1px solid #f0f1f2; }
.log-row:last-child { border-bottom: 0; }
.log-row.bad { background: #FCEBEB; }
.log-row .lt { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-row .la { flex: none; width: 76px; color: #185FA5; }
.log-row .ld { flex: 1; min-width: 0; word-break: break-all; }
.log-row .li { flex: none; width: 44px; color: var(--muted); text-align: right; }
.log-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }

/* 基础资料更新：两行，左边名字右边按钮，中间显示现在的文件和时间 */
.data-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 8px; background: #fafbfb;
}
.data-row b { font-weight: 500; font-size: 14px; }
.data-meta { font-size: 12.5px; color: var(--muted); }

/* 撤销导入：只在刚导完时露出来，事后不该一直占着地方 */
.undo-import {
  background: #FAEEDA; border-color: #EF9F27; color: #854F0B;
  font-weight: 500;
}
.undo-import:hover { background: #FAC775; border-color: #BA7517; }

/* 待补清单顶部：一键采用建议 */
.todo-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 4px 10px;
  font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.todo-head b { color: var(--text); }

/* 多门店单：段小计条 + 段头 + 行色条
   一套颜色贯穿「小计条 → 段头 → 每行左边那条细线」，人扫一眼就知道哪几行是一伙的 */
/* 多门店分段：**一律不用彩色**。
   8 个店 8 种颜色看下来眼睛很累，而且颜色本身看不出"漏了一行"。
   现在只用三样东西区分：一条细分隔线、一个浅灰段头、一个加粗小计。 */
.segbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; background: #fafbfb; border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.segbar.hide { display: none; }
.segbar b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ── 草稿条 ──────────────────────────────────────────────
 * 只在"这张单有未审核的草稿"时出现。存在的意义是**让人知道屏幕上是什么**：
 * 看到的是自己上次没核完的东西，不是识别结果。看不出来就会以为"系统认出这么多"，
 * 直接点审核 —— 那正是最危险的一种错。
 * 淡黄底、字号小一档：提示但不抢眼，报警才用红色。 */
.draftbar {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 3px 10px; font-size: 12.5px; color: #7a5a1e;
  background: #fdf6e3;
  border-top: 1px solid #e8d7bb; border-bottom: 1px solid #e8d7bb;
}
.draftbar.hide { display: none; }
.draftbar.bad { background: #fcebeb; border-color: #e5b3b3; color: #a32d2d; }
.draft-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #c8952e; flex: none;
}
.draftbar.bad .draft-dot { background: var(--bad); }
.draft-tip { color: #a08a63; font-size: 12px; }
.draft-tip b { font-weight: 500; color: #7a5a1e; }
.draftbar button.tiny { flex: none; }

/* 段头：浅灰底 + 一条深色左边线，就这样，不给每家配颜色 */
tr.seg-row td {
  font-size: 13px; padding: 4px 8px;
  background: #dce5e7 !important; color: #222;
  border-top: 1px solid var(--line-3); border-left: 3px solid #8f9aa5;
}
.seg-row b { font-weight: 700; margin-right: 8px; color: #000; }
.seg-row .seg-t { font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 12px; }
.seg-row .seg-hint { color: #8a8f94; font-size: 12px; }

/* 同一门店的连续行：左侧一条极淡的灰线，只用来圈范围，不抢眼 */
tr.seg-body .idx { border-left: 3px solid #e0e0e0; }

/* 行内「分」按钮：只有多门店场景才需要，平时低调 */
/* 行末那一列：只有一个「分」，居中。
   原来是「✓/补/!」一列 + 「分」一列，两列加起来 60 多像素，一屏 17 行白扔一千多像素；
   状态改成整行底色表达（淡红=算不平、淡黄=自动补齐），这一列就腾出来了。 */
/* 行末那个「分」：每行都要点，所以它必须一眼看得见、一下点得中。
   原来是 12px + #9a9a9a + 透明边框，在斑马纹里几乎等于没有
   （用户原话："太边了，都感觉要看不见了"）。
   现在：列宽 5%→7%、字 12→13px、色 #9a9a9a→#555、加一道看得见的细边。
   右边留 5px 空隙 —— 贴着表格边缘的那个字，视觉上像被切了一半。 */
/* ★ 宽度不能再按"单字按钮"给：按钮文字从「分」改成「改店」两个字，
   28px 的内容区装不下，会折成两行把整行撑高（这列每行都有一颗，一撑全表都松）。
   44px 够放两个 13px 字，剩下的留给两边内边距。 */
td.act { width: 56px; text-align: center; padding: 2px 6px; }
/* 按钮填满整列（减掉两边各 6px 边距），不做"居中漂浮"。
   试过让按钮自己定宽再居中：列 76px、按钮 35px，两侧各空 18px，
   看着像一颗小豆子飘在格子里，反而更不显眼。
   填满以后它就是一个明确的"格子里的按钮"，宽度跟着列走。 */
td.act .splitbtn {
  display: block; width: 100%; box-sizing: border-box;
  white-space: nowrap;              /* 两个字不许折行（折了整行高度就变了） */
  border: 1px solid #bdbdbd; background: #fff; border-radius: 2px;
  color: #3f3f3f; font-size: 13px; padding: 2px 0; line-height: 1.5;
}
td.act .splitbtn:hover {
  color: #c55a11; border-color: #ef9f27; background: #fff8ef;
}

/* ── 图片上的行号 ───────────────────────────────────────
   第 1 条需求是"太多颜色看花了眼"，所以序号一律黑白灰：
   深灰底 + 白字，压在纸的左边缘内侧，不挡正文（纸单左边一般有空白）。
   序号 = 表格里的行号，两边同一个数，不需要靠颜色去对。 */
/* fit 时包裹层铺满查看区，图片在里面等比缩放并居中；
   放大时包裹层变宽、高度放开，滚动条交给 .viewer-canvas。
   不这样写的话，img 的 max-width:100% 会相对"按内容撑开的包裹层"算，等于没有约束 ——
   图片会按原始像素铺出去，把界面撑破（这个坑踩过一次）。 */
.imgwrap {
  position: relative; line-height: 0; flex: none;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.imgwrap img { max-width: 100%; max-height: 100%; }
.imgwrap.zooming { height: auto; display: block; }
.imgwrap.zooming img { max-width: none; max-height: none; width: 100%; }
/* 行号层：尺寸由 JS 贴到 img 的实际盒子上（见 placeMarks），
   不靠 CSS 百分比 —— 图片居中/缩放时百分比会和图片错开 */
.rowmarks { position: absolute; pointer-events: none; }
.rowmarks.hide { display: none; }
.mk {
  position: absolute; left: 0;
  display: flex; align-items: center; gap: 4px;
  transform: translateY(-50%);
  font: 600 12px/1 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #fff; white-space: nowrap;
}
.mk i {
  display: inline-block; min-width: 20px; padding: 2px 4px;
  background: rgba(32, 36, 40, .82); border-radius: 3px;
  font-style: normal; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
/* 每行引出一条短横线指到正文，避免只看到一个数字不知道指的是哪一行 */
.mk em {
  display: inline-block; width: 10px; height: 1px;
  background: rgba(32, 36, 40, .55);
}

/* 行位置还没算过的提示（压在图片左上角） */
.mk-note {
  position: absolute; left: 8px; top: 8px;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px; border-radius: 5px;
  background: rgba(255,255,255,.94); border: 1px solid #d5dade;
  font-size: 12px; color: #4a5157; line-height: 1.4;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

/* 点图片上的号后，表格那一行闪一下 */
tr.flash td { animation: rowflash 1.2s ease-out; }
@keyframes rowflash {
  0%, 35% { background: #fff6d4; }
  100% { background: transparent; }
}

/* 备用引擎识别时，溯源那一行标黄提醒 —— 主引擎可能挂了或欠费了 */
.docmeta .trace.fallback { color: #ba7517; }

/* ── 识别引擎设置 ───────────────────────────────────
   客户的场景：工具装在店里，Key 要他自己填、自己充值。
   所以每一项都把「现在什么状态 / 改 / 测 / 去充值」摆在同一行，不藏二级菜单。 */
.eng-dialog { width: 640px; max-width: 94vw; }
.eng-tip { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.6; }
.eng-note {
  font-size: 12px; color: #8a8f94; line-height: 1.7; margin: 14px 0 16px;
  padding: 9px 11px; background: #fafbfb; border: 1px solid var(--line); border-radius: 6px;
}
.eng-item {
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
  background: #fff;
}
.eng-item.off { background: #fcfcfc; }
.eng-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.eng-head b { font-size: 15px; }
.eng-role {
  font-size: 11.5px; padding: 1px 7px; border-radius: 3px;
  background: #eef0f1; color: #4a5157;
}
.eng-role.main { background: #e8f0e3; color: #3b6d11; }
.eng-state { font-size: 12.5px; color: var(--muted); margin-bottom: 9px; font-family: ui-monospace, monospace; }
.eng-state.ok { color: #3b6d11; }
.eng-state.bad { color: #a33; }
.eng-bal { font-family: inherit; color: #4a5157; }
.eng-bal b { font-variant-numeric: tabular-nums; }
.eng-bal.warn b { color: #ba7517; }
.eng-acts { display: flex; gap: 7px; flex-wrap: wrap; }
.eng-acts a {
  font-size: 12.5px; padding: 5px 10px; border: 1px solid var(--line);
  border-radius: 5px; color: #185fa5; text-decoration: none; background: #fff;
}
.eng-acts a:hover { border-color: #b9c1c7; background: #f6f7f7; }
.eng-form { display: flex; gap: 7px; margin-top: 9px; }
.eng-form input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 5px; margin: 0;
  font-family: ui-monospace, monospace;
}
.eng-form button { flex: none; }
.eng-msg { font-size: 12.5px; margin-top: 7px; min-height: 17px; }
.eng-msg.ok { color: #3b6d11; }
.eng-msg.bad { color: #a33; }

/* ── 上传弹窗 ──────────────────────────────────────────────
 * 这块是"上服务器给客户用"的主入口，所以它必须比别处更啰嗦一点：
 * 人在传之前要能看清"这批会怎么分、哪些会被跳过"。
 * 传完才发现一半没用，比多看一眼贵得多。
 */
.import-dlg { width: 580px; max-width: 94vw; }

.dropzone {
  border: 1px dashed #b4b4b4;
  border-radius: 3px;
  background: #fafafa;
  padding: 18px 12px 14px;
  text-align: center;
  margin: 10px 0 8px;
  transition: .12s;
}
.dropzone.over { border-color: #2f5c93; background: #eef3fa; }
.dz-main { font-size: 13.5px; color: #333; }
.dz-sub { font-size: 12px; color: #999; margin: 6px 0 8px; }
.dz-btns { display: flex; gap: 8px; justify-content: center; }
.dz-hint { font-size: 12px; color: #888; margin-top: 8px; min-height: 16px; }

/* 分组预览：一行一个目录，右边是系统认成的仓和类型 */
.upv { margin: 8px 0 4px; }
.upv-head {
  font-size: 12.5px; color: #333; padding: 5px 8px;
  background: #f0f0f0; border: 1px solid var(--line-2); border-bottom: 0;
}
.upv-list { max-height: 190px; overflow: auto; border: 1px solid var(--line-2); }
.upv-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; font-size: 12.5px;
  border-bottom: 1px solid #eee;
}
.upv-row:last-child { border-bottom: 0; }
.upv-dir {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #222;
}
.upv-n { flex: none; color: #777; font-variant-numeric: tabular-nums; }
.upv-site {
  flex: none; color: #1d6b3a; font-weight: 500;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upv-kind { flex: none; color: #666; font-size: 12px; }
.upv-row.bad { background: #fdf6f6; }
.upv-skip { flex: none; color: #a32d2d; font-weight: 500; }
.upv-why {
  font-size: 11.5px; color: #a06a6a; padding: 0 8px 5px 16px;
  background: #fdf6f6; border-bottom: 1px solid #eee;
}
.upv-warn {
  font-size: 12px; color: #8a5a00; background: #fdf6e3;
  border: 1px solid #e8d7bb; border-top: 0; padding: 4px 8px;
}

/* 上传进度条 */
.upbar { margin: 8px 0 4px; }
.upbar-track {
  height: 12px; background: #e8e8e8; border: 1px solid var(--line-2);
  border-radius: 2px; overflow: hidden;
}
.upbar-fill {
  height: 100%; width: 0; background: #2f5c93;
  transition: width .18s linear;
}
.upbar-text {
  font-size: 12px; color: #555; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* 老的本机路径扫描：收在折叠里，不占视觉 */
.import-adv { margin: 6px 0 4px; font-size: 12px; color: #888; }
.import-adv summary { cursor: pointer; user-select: none; }
.import-adv input[type=text] {
  width: 100%; font: inherit; font-size: 12.5px;
  padding: 4px 7px; border: 1px solid var(--line-2);
  border-radius: 0; margin: 6px 0;
}
.import-tip code { background: #f2f2f2; padding: 0 3px; font-size: 11.5px; }

/* ── 顶栏「⚙」：低频功能的收纳盒 ───────────────────────────
 * 识别引擎（换 Key）、运行日志（排障）、导出明细 CSV（存档/排查）——
 * 这三个一个月点不了一次，却跟「导入 / 导出导入包」这种天天点的挤在一排，
 * 结果是真正高频的那两个反而没那么显眼。
 * 收进这里以后，顶栏从 8 个按钮变 5 个 + 1 个齿轮。
 * 但**没有藏起来**：齿轮本身是可见按钮，点开就三个大按钮，
 * 不做二级菜单、不用图标猜意思 —— 点进去还是中文。 */
.more-wrap { position: relative; display: inline-flex; flex: none; }
/* 原来是 30px 见方的纯图标按钮。现在要装「⚙ 设置」两个字，
   宽度交给内容（不再钉死），齿轮和字之间留一点空。 */
.more-btn {
  padding: 4px 10px; font-size: 14px; line-height: 1.05;
  text-align: center; white-space: nowrap;
}
.more-btn.on { background: #e3ebf5; border-color: #8fa8c8; }
.more-menu {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 300;
  /* 左右不留内边距：项间分隔线要贯通整行（见下面 button + button） */
  min-width: 200px; padding: 3px 0;
  background: #fff; border: 1px solid #a0a0a0;
  box-shadow: -2px 6px 18px rgba(0,0,0,.18);
}
.more-menu.hide { display: none; }
.more-menu button {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; text-align: left; border: 0; border-radius: 0;
  background: transparent; padding: 6px 13px; font-size: 13px; line-height: 1.35;
}
/* ★ 六项「主标题 + 灰色副标题」连成一片时，扫读分不清一条到哪儿结束
   （客户原话：「这样看没有什么区分感」）。两项之间加一条浅线。
   线要**贯通整行**：所以 .more-menu 的左右内边距收到 0，改由按钮自己撑开，
   否则线两端会缩进去 3px，看着像半截。 */
.more-menu button + button { border-top: 1px solid #ebebeb; }
/* 悬停时左边出 2px 蓝条：不止"背景变浅"，还指明"当前指的是这一条"。
   用 inset 阴影而不是 border-left —— 不占布局，不会让文字左右跳。 */
.more-menu button:hover {
  background: #eef3fa; box-shadow: inset 2px 0 0 var(--accent);
}
.more-menu button span { font-size: 11.5px; color: #888; }
.more-menu button:hover span { color: #666; }

/* 刷新按钮：文字在「刷新」和「刷新中」之间切换，宽度固定住，免得顶栏抖动 */
#btnReload{min-width:64px}

/* ── 使用说明弹层 ─────────────────────────────────────
   给第一次上手的人看：不求好看，求扫一眼就知道"下一步做什么"、
   "这个红的是什么意思"。所以正文按短句 + 粗体关键词排，
   不用长段落 —— 文员不会读完整段话。
   四种标记直接用界面上真实的底色，看到哪个颜色对哪个。 */
.help-dlg { width: 660px; max-height: 82vh; overflow: auto; }
.help-dlg h4 { margin: 16px 0 7px; font-size: 13px; font-weight: 700; }
.help-dlg ol { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.95; color: #333; }
.help-dlg ol b { color: var(--text); }
.help-dlg .hl div {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.7; margin-bottom: 6px; color: #333;
}
.help-dlg .hl-note { font-size: 12.5px; line-height: 1.9; margin: 0; color: #333; }
.help-dlg .hl-note b { color: var(--text); }
.help-dlg .chip {
  flex: 0 0 66px; text-align: center; font-size: 11.5px; line-height: 1.75;
  border: 1px solid transparent;
}
.help-dlg .chip.bad   { background: var(--bad-soft);  border-color: #e8c9c6; color: var(--bad); }
.help-dlg .chip.fix   { background: var(--warn-soft); border-color: #ead9bd; color: var(--warn); }
.help-dlg .chip.pend  { background: #fbf3e4; border-color: #e8d9bb; color: #8a6a2f; }
.help-dlg .chip.doubt { background: #fff8e1; border-color: #ecdcae; color: #7a5b12; }
/* 空状态那两个按钮并排，别上下堆 */
.empty-btns { display: flex; gap: 9px; justify-content: center; margin-top: 12px; }
.empty-btns button { margin: 0; }

/* ── 系统体检 ─────────────────────────────────────────
   类名统一 hl- 前缀，避免和界面里已有的类撞（帮助弹层里已有一个 .hl，是它自己的）。
   风格跟随现有：浅底、细边框、小圆角、12–13px、行高紧凑。
   「非标 / 异常一律用黄色标记」是本项目约定，所以整页只走黄灰两色，
   只有"读不出来"那一块用红 —— 那是"现在不能用"，不是"数据有偏差"。 */
.health-dialog { width: 780px; max-width: 94vw; }
.hl-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.hl-head h3 { margin: 0; }
.hl-head .hl-span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hl-alerts { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
.hl-warn {
  font-size: 12.5px; line-height: 1.55; padding: 5px 9px;
  background: var(--warn-soft); border: 1px solid #ead9bd; color: var(--warn);
}
.hl-body { max-height: 66vh; overflow: auto; }
.hl-cards { display: flex; gap: 8px; margin: 0 0 12px; }
.hl-card {
  flex: 1 1 0; min-width: 0; padding: 7px 10px 6px; text-align: center;
  background: #fafafa; border: 1px solid var(--line);
}
.hl-num { display: block; font-size: 20px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hl-lb { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.hl-block { border: 1px solid var(--line); margin: 0 0 12px; }
.hl-bh {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 10px;
  background: #f0f0f0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700;
}
.hl-bh .hl-bs { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.hl-row { display: flex; align-items: baseline; gap: 10px; padding: 5px 10px; font-size: 12.5px; border-bottom: 1px solid #f0f1f2; }
.hl-row:last-child { border-bottom: 0; }
.hl-cat { flex: none; width: 94px; }
.hl-n { flex: none; width: 62px; color: var(--warn); font-variant-numeric: tabular-nums; }
.hl-adv { flex: 1; min-width: 0; color: var(--muted); line-height: 1.55; }
/* 能点开的地方必须看着像能点：细边框 + 手形光标，不靠"猜这里可以点" */
.hl-more {
  flex: none; font-size: 12px; color: var(--accent); padding: 0 7px; line-height: 1.6;
  border: 1px solid var(--line); border-radius: 2px; background: #fff;
  cursor: pointer; white-space: nowrap;
}
.hl-more:hover { background: var(--accent-pale); }
.hl-detail { padding: 4px 10px 8px 104px; background: #fcfcfc; border-bottom: 1px solid #f0f1f2; }
.hl-samples { max-height: 190px; overflow: auto; }
.hl-s { display: flex; gap: 8px; font-size: 12px; line-height: 1.7; color: #444; }
.hl-st { flex: none; width: 82px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hl-sd { flex: none; width: 92px; color: var(--accent); }
.hl-sx { flex: 1; min-width: 0; word-break: break-all; }
.hl-tip { font-size: 11.5px; line-height: 1.7; color: var(--muted); padding: 4px 0 2px; }
.hl-chks { display: flex; flex-wrap: wrap; gap: 3px 14px; padding: 6px 10px; border-bottom: 1px solid #f0f1f2; }
.hl-chk { font-size: 12px; white-space: nowrap; }
.hl-chk.hl-ok { color: #6b6b6b; }
.hl-chk.hl-info { color: var(--warn); }
.hl-cal { padding: 8px 10px; font-size: 12.5px; }
.hl-cal b { font-variant-numeric: tabular-nums; }
.hl-msg { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }
/* 某一块没读出来：整块内数字都变成「—」，这行黄条说明为什么。
   绝不能把"没测到"写成 0 —— 客户会拿着"导入 0 张"来问单据是不是丢了。 */
.hl-miss {
  font-size: 12px; line-height: 1.6; padding: 4px 9px; margin: 0 0 10px;
  background: var(--warn-soft); border: 1px solid #ead9bd; color: var(--warn);
}
.hl-block .hl-miss { margin: 0; border: 0; border-bottom: 1px solid #ead9bd; }
/* 读不出来：整页只剩这一块，用红底把它顶到最显眼的位置 */
.hl-down { padding: 14px 12px; background: var(--bad-soft); border: 1px solid #e8c9c6; }
.hl-down-t { font-size: 13px; color: var(--bad); line-height: 1.6; word-break: break-all; }
.hl-down-s { font-size: 12.5px; color: #7a3a34; margin-top: 5px; line-height: 1.6; }

/* ── 明细数字格里那两处小提示 ─────────────────────────────
   数字格只有 62px（td.qty / td.price 钉死），所以字小一档、按钮窄。
   一律 nowrap：靠 CSS 保证不折行，不去赌"这么短应该放得下" —— 一折行
   整行就变高，扫一列时行高忽高忽低。 */
.sg-sug {
  display: block; width: 100%; margin: 1px 0 0; padding: 0 1px;
  font: inherit; font-size: 11.5px; line-height: 1.4;
  color: var(--accent); background: var(--accent-pale);
  border: 1px solid #8fb0d4; border-radius: 2px;
  white-space: nowrap; cursor: pointer;
}
.sg-sug:hover { background: var(--accent-soft); }
/* 是提示不是告警：灰字、不带底色，别把它做成第二个「算不平」 */
.sg-derived {
  display: block; margin: 1px 0 0; font-size: 13px; line-height: 1.4;
  color: #6b7378; white-space: nowrap;
}

/* ───────── 粘贴下单 ──────────────────────────────────────────
   一屏要装下「原文输入 → 解析结果 → 生成」，所以弹层比一般对话框宽。
   颜色只用现有四个色：认出=素、要确认=黄(--warn)、认不出=红(--bad)。
   ★ 不引入新的绿色表示"成功"：整个界面只有白灰黑+淡蓝，
     多一种颜色，文员就要重新学一遍"哪个颜色代表什么"。 */
.paste-dlg { width: min(1120px, 94vw); max-height: 92vh; overflow: auto; }
.paste-dlg textarea {
  width: 100%; font-family: var(--mono, Consolas, "Courier New", monospace);
  font-size: 14px; line-height: 1.7; padding: 8px 10px;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text);
  resize: vertical;
}
#pasteResult { margin-top: 10px; }
.p-sum {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 0 8px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.p-sum .p-tip { margin-left: auto; color: var(--muted); }
.p-ok { color: var(--text); }
.p-need { color: var(--warn); }
.p-none { color: var(--bad); }
.p-sum .p-need, .p-sum .p-none { font-weight: bold; }

.paste-tb { width: 100%; border-collapse: collapse; margin-top: 6px; }
.paste-tb th {
  text-align: left; font-weight: normal; color: var(--muted); font-size: 12px;
  border-bottom: 1px solid var(--line-3); padding: 4px 6px; white-space: nowrap;
}
.paste-tb td {
  border-bottom: 1px solid var(--line); padding: 4px 6px; vertical-align: top;
}
.paste-tb .p-src {
  width: 34px; text-align: right; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.paste-tb input {
  border: 1px solid transparent; background: transparent; padding: 2px 4px;
  font: inherit; color: inherit; width: 100%; min-width: 60px;
}
.paste-tb input:hover { border-color: var(--line); }
.paste-tb input:focus { border-color: var(--accent); background: var(--panel); outline: none; }
.paste-tb td:nth-child(3) input { width: 72px; }
.paste-tb td:nth-child(4) input { width: 48px; }
.p-right { width: 46%; }
.p-code { font-size: 12px; color: var(--muted); margin-top: 2px; }
.p-mine {
  font-style: normal; color: var(--accent); border: 1px solid var(--accent-soft);
  padding: 0 3px; margin-left: 4px; font-size: 11px;
}
.p-note { font-size: 12px; color: var(--warn); margin-top: 2px; }
.p-cands { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.p-cands .p-cand, .p-hits .p-cand { max-width: 100%; }
.p-cands em, .p-hits em { font-style: normal; color: var(--muted); font-size: 11px; }
.p-sear { margin-top: 4px; }
.p-sear input {
  width: 180px; border: 1px solid var(--line-2); background: var(--panel);
  padding: 2px 5px; font: inherit; font-size: 12px; color: var(--text);
}
.p-hits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.p-row.p-need { background: var(--warn-soft); }
.p-row.p-none { background: var(--bad-soft); }
.p-ignored {
  margin-top: 10px; padding: 6px 8px; background: var(--bad-soft);
  border-left: 3px solid var(--bad); font-size: 13px;
}
.p-ignored ul { margin: 4px 0 0 18px; padding: 0; }
.p-ignored li { margin: 2px 0; }

/* 核对页左侧：粘贴单的"原图"就是客户原文 */
.imgwrap.is-paste { display: block; padding: 10px 12px; background: var(--panel); }
#pasteSrc {
  margin: 0; font-family: var(--mono, Consolas, "Courier New", monospace);
  font-size: 14px; line-height: 1.9; white-space: pre-wrap; word-break: break-all;
}
#pasteSrc .pl { display: block; padding: 0 4px; border-left: 3px solid transparent; }
#pasteSrc .pl i {
  display: inline-block; width: 22px; font-style: normal; color: var(--muted);
  font-size: 11px; text-align: right; margin-right: 6px;
}
#pasteSrc .pl.used { background: var(--accent-pale); }
#pasteSrc .pl.cur { border-left-color: var(--accent); background: var(--accent-soft); }

/* ── 单位换算记录：一张能看、能删的表 ─────────────────────
   为什么要做成一页表而不是一句"已记住"：
   换算改的是数量，比例在界面上是隐形的。记错一条，
   以后每张同货同写法的单都会被它悄悄改掉 —— 必须让人能回头核、能删。 */
.conv-list-dlg { width: min(820px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.conv-list { flex: 1; overflow: auto; border-top: 1px solid var(--line); margin-top: 6px; }
.cl-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; font-size: 13px; border-bottom: 1px solid #f1f1f1;
}
.cl-row:hover { background: #fafafa; }
.cl-row .cl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-row .cl-code { width: 66px; flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-row .cl-site { width: 130px; flex: none; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cl-row .cl-rate { width: 170px; flex: none; font-variant-numeric: tabular-nums; }
.cl-row .cl-hits { width: 62px; flex: none; color: var(--muted); text-align: right;
  font-variant-numeric: tabular-nums; }
.cl-row .cl-del {
  width: 52px; flex: none; padding: 2px 0; font: inherit; font-size: 12px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 3px; background: var(--panel);
  color: var(--bad);
}
.cl-row .cl-del:hover { background: var(--bad-soft); border-color: var(--bad); }
/* 过期 = 库里这个货的单位已经跟记下的「换成什么」不一样了（客户改了货品资料） */
.cl-row.stale { background: var(--warn-soft); }
.cl-row.stale .cl-rate::after { content: " ⚠库里单位已改"; color: var(--warn); font-size: 11px; }
.conv-list-head {
  display: flex; gap: 10px; padding: 4px 8px; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--line); background: #fafafa;
}
.conv-list-head span:nth-child(1) { flex: 1; }
.conv-list-head span:nth-child(2) { width: 66px; flex: none; }
.conv-list-head span:nth-child(3) { width: 130px; flex: none; }
.conv-list-head span:nth-child(4) { width: 170px; flex: none; }
.conv-list-head span:nth-child(5) { width: 62px; flex: none; text-align: right; }
.conv-list-head span:nth-child(6) { width: 52px; flex: none; }

/* ── 单位换算：客户写「1袋」、库里按「斤」卖 —— 让文员填一次比例。
   用黄底（要人处理），做完变灰字（已解决，不用再看）。 */
.p-conv {
  margin-top: 4px; padding: 3px 5px; background: var(--warn-soft);
  border-left: 3px solid var(--warn); font-size: 12px; color: var(--text);
}
.p-conv.done { background: var(--accent-pale); border-left-color: var(--accent); color: var(--muted); }
.p-conv input {
  width: 64px; border: 1px solid var(--line-2); background: var(--panel);
  padding: 1px 4px; font: inherit; color: var(--text); text-align: right;
}
.p-convnote { color: var(--muted); font-size: 11px; }

/* 单位格里那颗「换」：跟「用 4.8」同一套长相（都是数字格里的小按钮），
   但它是蓝的 —— 换算是"把单位弄对"，不是"系统猜了一个数给你确认"。 */
.sg-sug.sg-conv { color: var(--accent); border-color: var(--accent-soft); }
.conv-row {
  margin: 8px 0; font-size: 16px; display: flex; align-items: center; gap: 6px;
}
.conv-row input {
  width: 96px; padding: 3px 6px; font: inherit; text-align: right;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text);
}

/* ── 按天找单（可溯源） ─────────────────────────────
   一屏要能扫完"哪天有几张、哪张是哪张"，所以行做得很紧（28px），
   列宽按内容定：单号 15 字、供应商 16 字、门店 14 字，超了省略（title 里有全名）。 */
.find-dlg {
  width: min(880px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column;
}
.find-bar { display: flex; gap: 8px; align-items: center; margin: 8px 0 6px; }
.find-bar input[type="date"] { width: 150px; font: inherit; font-size: 13px; padding: 3px 6px; }
.find-bar input[type="text"] {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 3px 8px;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text);
}
.find-sum { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.find-list { flex: 1; overflow: auto; border-top: 1px solid var(--line); }
/* 底部「关掉」那一行必须 flex:none。
   .find-dlg 是 flex 纵向容器，而 .row 默认 flex-shrink:1 —— 单据多、列表撑满时
   这一行会被压成 0 高：按钮还在 DOM 里、断言也是绿的，但人看不见。
   这类"在但看不见"比"没有"更气人，因为没法描述。 */
.find-dlg > .row { flex: none; padding-top: 8px; border-top: 1px solid var(--line); }

.find-empty { padding: 28px 10px; text-align: center; color: var(--muted); font-size: 13px; }

/* 日期分组头：做成"能点的横条"，一眼看出这天有几张、审了几张 */
.find-day {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; background: #f4f4f4; border-bottom: 1px solid var(--line);
  font-size: 13px; cursor: pointer; user-select: none;
}
.find-day:hover { background: #ececec; }
.find-day .fd-date { font-weight: 700; }
.find-day .fd-n { color: var(--text); }
.find-day .fd-st { color: var(--muted); font-size: 12px; }
.find-day .fd-tog { margin-left: auto; color: var(--accent); font-size: 12px; }

.find-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px; font-size: 13px; cursor: pointer;
  border-bottom: 1px solid #f1f1f1;
}
.find-row:hover { background: var(--accent-pale); }
.find-row.on { background: var(--accent-soft); }
.find-row .fr-no { width: 130px; flex: none; font-variant-numeric: tabular-nums; }
.find-row .fr-sup { width: 170px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-row .fr-site { width: 150px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.find-row .fr-st { width: 64px; flex: none; font-size: 12px; }
.find-row .fr-n { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.f-ok { color: #10365f; }
.f-wait { color: var(--warn); }
.f-bad { color: var(--bad); }
.f-dim { color: var(--muted); }
/* 「打开后跳到第 N 行」的提示：不是按钮，是一句预告 —— 让人知道点了会发生什么 */
.find-row .fr-go { color: var(--accent); font-size: 12px; margin-left: 8px; }