/* Kunfreight 静态原型 · 共享样式（报价页 `/quotation/` + 上传页 `/upload/`）
 * 归属：`public/demo/**` 的**两个**原型页面（`index.html` / `upload.html`），upload.css 只做补充。
 *
 * ⚠️ 本文件是 `public/**` 的原样复制资源（不经打包、无 @import、无内联脚本）⇒ 不改 CSP。
 * ⚠️ 与门户/工作台的关系：**同一套设计语言，靠命名空间共存**。
 *    `public/home/home.css` 与 `src/styles.css` 的所有选择器都带 `kf-` 前缀（它们自己也声明了
 *    "不与别人的类名撞车"），而本文件的选择器是 unprefixed 的（`.top` / `.panel` / `.steps` …）。
 *    所以两边可以同页共处而互不覆盖 —— 这也是工作台能 iframe 内嵌这两个页面而不打架的原因。
 *    颜色/圆角/字号**共用同一套 `--kf-*` 值**（见下面 :root），改一处两边同时生效。
 */

/* ==========================================================================================
 * 设计变量（**唯一一处**）：颜色 / 圆角 / 字号
 *
 * 规则（P1-① Task 2，2026-10-13）：
 *   ① 本块是 `public/demo/**` 里颜色、圆角、字号的**唯一来源**；正文里只许写 `var(...)`；
 *   ② `--kf-*` 与 `public/home/home.css` 的 :root **逐值相同**（同源品牌、同套设计语言），
 *      由 `tests/p1-design-tokens.test.ts` 逐条对账钉住（谁漂移谁变红）；
 *   ③ 旧名字（`--bg` / `--card` / `--ink` / `--muted` / `--line` / `--brand` / `--brand-soft` /
 *      `--warn` / `--warn-soft` / `--blue` / `--blue-soft` / `--shadow`）**保留为别名** ——
 *      `demo.js` / `upload.js` 的内联 style 里已经在用它们（例如 currency color），
 *      删掉会让那些内联样式失效 ⇒ 只做"别名指向同一处"，不做改名。
 *   ④ **值一个字都不许变**：本次只做「字面量 → 同值变量」，视觉结果必须逐像素相同
 *      （证据见 `.tools/evidence-p1-shell-2026-10-13/`：改前/改后计算样式快照逐条相同）。
 * ========================================================================================== */
/* P1-TOKENS-BEGIN */
:root{
  /* ---- 白色与中性面 ---- */
  --kf-white:#fff;
  --kf-surface:#fafcfb;          /* 卡片内的浅底（表格头、块标题…） */
  --kf-surface-hover:#f4faf7;
  --kf-surface-quiet:#fbfbfa;
  --kf-surface-head:#f4f8f6;
  --kf-surface-disabled:#f4f7f5;
  --kf-surface-hot:#f2faf6;
  --kf-chip:#eef2f0;
  --kf-chip-hover:#e6ecea;
  --kf-chip-ink:#d6e0dc;
  --kf-chip-skip:#e6ebe8;
  --kf-dash:#b9cbc3;
  --kf-hairline:#f0f4f2;         /* 表格行分隔线 */
  --kf-hairline2:#eef3f1;
  --kf-ok-soft:#eef7ee;
  --kf-ok-line:#9ecf9e;
  --kf-ok-line2:#9dcf9e;
  --kf-green-ink:#245c24;
  --kf-placeholder:#9aa8a1;
  --kf-ink-soft:#3d4a45;

  /* ---- 品牌色（与 home.css 逐值相同） ---- */
  --kf-brand:#1f6f52;
  --kf-brand-dark:#17553f;
  --kf-brand-soft:#e6f2ec;
  --kf-brand-line:#9dc9b4;
  --kf-brand-line2:#bcdccc;

  /* ---- 墨色 / 底 / 线（与 home.css 逐值相同） ---- */
  --kf-bg:#f4f6f5;
  --kf-card:#ffffff;
  --kf-ink:#16211d;
  --kf-muted:#5f736b;
  --kf-line:#dde5e1;

  /* ---- 蓝（自动带出 / 来源标注 / 识别结果） ---- */
  --kf-blue:#1e5fa8;
  --kf-blue-soft:#e8f1fb;
  --kf-blue-line:#cfe1f5;
  --kf-blue-wash:#f4f9ff;
  --kf-blue-dash:#bcd7f0;
  --kf-blue-ink:#204a7a;

  /* ---- 警示 / 橙（手工填写 / 待确认 / 缺价） ---- */
  --kf-warn:#a35a00;
  --kf-warn-soft:#fdf1e0;
  --kf-warn-line:#f0dcc0;
  --kf-warn-line2:#f0b37e;
  --kf-warn-ink:#6b4a12;
  --kf-warn-ok:#3d6a58;
  --kf-warn-wash:#fffdf8;
  --kf-warn-wash2:#fffdf6;

  /* ---- 危险 / 红（错误、越权、删除） ---- */
  --kf-danger:#b3261e;
  --kf-danger-ink:#8f1d1d;
  --kf-danger-soft:#fdecec;
  --kf-danger-line:#f0b4b4;
  --kf-danger-line2:#e6b3b3;
  --kf-danger-ink2:#a11;

  /* ---- 圆角（每个变量一个值；正文里出现过的每一种都收在这里） ---- */
  --radius-xs:4px;
  --radius-sm:5px;
  --radius-input:6px;
  --radius-chip:7px;
  --radius-btn:8px;
  --radius-card-sm:9px;
  --radius-card:10px;
  --radius-panel-sm:11px;
  --radius-md:12px;
  --radius-md2:13px;
  --radius-lg:14px;

  /* ---- 字号（同理：一个变量一个值） ---- */
  --fs-xs:10.5px;
  --fs-note:11px;
  --fs-micro:11.5px;
  --fs-sm:12px;
  --fs-sm2:12.5px;
  --fs-base:13px;
  --fs-base2:13.5px;
  --fs-base3:14px;
  --fs-base4:14.5px;
  --fs-md:15px;
  --fs-md2:15.5px;
  --fs-md3:16px;
  --fs-md4:17px;
  --fs-md5:18px;
  --fs-lg:19px;
  --fs-lg2:20px;
  --fs-2xl:26px;
  --fs-3xl:30px;
  --fs-4xl:44px;

  /* ---- 阴影 ---- */
  --kf-shadow:0 1px 3px rgba(16,40,32,.08),0 8px 24px rgba(16,40,32,.06);

  /* ================= 旧名字（别名，逐值指向上面那一处；不要在新代码里用） ================= */
  --bg:var(--kf-bg); --card:var(--kf-card); --ink:var(--kf-ink); --muted:var(--kf-muted);
  --line:var(--kf-line); --brand:var(--kf-brand); --brand-soft:var(--kf-brand-soft);
  --warn:var(--kf-warn); --warn-soft:var(--kf-warn-soft);
  --blue:var(--kf-blue); --blue-soft:var(--kf-blue-soft);
  --shadow:var(--kf-shadow);
}
/* ================= 设计变量块结束（上面的字面量是本文件的唯一来源，正文里只许 var()） ================= */
/* P1-TOKENS-END */
/* P1-BODY-BEGIN */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
  padding-bottom:70px;
}
h1,h2,h3{margin:0;line-height:1.3}
h2{font-size:var(--fs-lg);margin-bottom:6px}
h3{font-size:var(--fs-md);margin:18px 0 8px;color:var(--muted);font-weight:600}
a{color:var(--brand)}
strong{font-weight:600}

/* ---------- 页面外壳（2026-10-13 P1-①：与门户/工作台同一条壳） ----------
 * 只在**独立打开**时出现；被工作台 iframe 内嵌时由 `html[data-kf-embed="1"]` 整块隐藏
 * （判据由 `/demo/session.js` 在解析期写在 <html> 上：`window.self !== window.top`）——
 * 这样工作台里那层标题条不会被重复的第二条标题条顶下去。
 * 品牌位一律写「鲲运科技」（用户 2026-10-12 拍板）。
 * ------------------------------------------------------------------------ */
.kfshell{
  background:var(--kf-card); border-bottom:1px solid var(--kf-line);
  position:sticky; top:0; z-index:9;
}
.kfshell-inner{
  max-width:1080px; margin:0 auto; padding:10px 22px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.kfshell-brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--kf-ink); flex:none;
}
.kfshell-brand .logo{width:34px;height:34px;border-radius:var(--radius-card-sm);font-size:var(--fs-md5)}
.kfshell-word{display:flex; flex-direction:column; line-height:1.18}
.kfshell-word b{font-size:var(--fs-md4); letter-spacing:-.2px}
.kfshell-word small{font-size:var(--fs-micro); color:var(--kf-muted); letter-spacing:.04em}
.kfshell-where{
  font-size:var(--fs-sm2); color:var(--kf-muted); white-space:nowrap;
}
.kfshell-where b{color:var(--kf-brand); font-weight:600}
/* 当前用户身份：读不到身份（未登录 / 后端没响应）时整块不显示 —— 绝不编一个名字出来 */
.kfshell-user{
  display:flex; align-items:center; gap:8px; margin-left:auto;
  font-size:var(--fs-sm2); color:var(--kf-muted);
}
.kfshell-user[hidden]{display:none}
.kfshell-user b{color:var(--kf-ink); font-weight:600}
.kfshell-avatar{
  width:26px;height:26px;border-radius:999px;background:var(--kf-brand-soft);color:var(--kf-brand);
  display:grid;place-items:center;font-size:var(--fs-sm);font-weight:700;flex:none;
}
.kfshell-nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.kfshell-link{
  font-size:var(--fs-sm2); color:var(--kf-muted); text-decoration:none; white-space:nowrap;
}
.kfshell-link:hover{color:var(--kf-brand); text-decoration:underline}
.kfshell-cta{
  background:var(--kf-brand); color:var(--kf-white); border-radius:var(--radius-card-sm);
  padding:7px 13px; font-size:var(--fs-sm2); text-decoration:none; white-space:nowrap;
}
.kfshell-cta:hover{filter:brightness(1.06)}
/* 内嵌时：外壳整块不出现（工作台自己那层标题条就是"当前的页头"） */
html[data-kf-embed="1"] .kfshell{display:none}
@media(max-width:760px){
  .kfshell-inner{padding:9px 12px; gap:9px}
  /* 窄屏优先保住"我是谁 + 回得去"：品牌副题与"当前页面"让位 */
  .kfshell-word small{display:none}
  .kfshell-where{display:none}
  .kfshell-user{order:3; margin-left:0; width:100%}
}

/* ---------- 顶栏（页面自己那条标题条：内嵌时保留，工作台的既有验收就是按它拍的） ---------- */
.top{
  background:var(--card); border-bottom:1px solid var(--line);
  padding:14px 22px; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:40px;height:40px;border-radius:var(--radius-card);background:var(--brand);color:var(--kf-white);
  display:grid;place-items:center;font-weight:700;letter-spacing:.5px;flex:none;
}
.top h1{font-size:var(--fs-md4)}
.sub{margin:2px 0 0;font-size:var(--fs-sm2);color:var(--muted)}
.disclaimer{
  font-size:var(--fs-sm2);color:var(--warn);background:var(--warn-soft);
  border:1px solid var(--kf-warn-line);border-radius:var(--radius-btn);padding:7px 12px;
}
/* 顶栏右侧：报价页（/）与上传页（/upload/）之间的显式入口 */
.topnav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.top-link{
  background:var(--brand);color:var(--kf-white);border-radius:var(--radius-card-sm);
  padding:9px 16px;font-size:var(--fs-base3);text-decoration:none;white-space:nowrap;
}
.top-link:hover{filter:brightness(1.06)}

/* ---------- 步骤条 ---------- */
.steps{
  display:flex;gap:8px;padding:14px 22px;overflow-x:auto;
  background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;
}
.step{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--kf-chip);border:1px solid transparent;border-radius:999px;
  padding:7px 14px 7px 8px;font:inherit;font-size:var(--fs-base2);color:var(--muted);cursor:pointer;
}
.step b{
  width:22px;height:22px;border-radius:50%;background:var(--kf-chip-ink);color:var(--muted);
  display:grid;place-items:center;font-size:var(--fs-sm);
}
.step:hover{background:var(--kf-chip-hover)}
.step.is-active{background:var(--brand-soft);border-color:var(--kf-brand-line2);color:var(--brand)}
.step.is-active b{background:var(--brand);color:var(--kf-white)}
.step.is-done b{background:var(--kf-brand-line);color:var(--kf-white)}

/* ---------- 面板 ---------- */
main{max-width:1080px;margin:0 auto;padding:22px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow)}
.hint{color:var(--muted);font-size:var(--fs-base2);margin:6px 0 18px}
.mini{color:var(--muted);font-size:var(--fs-sm);margin:10px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.twocol{display:grid;grid-template-columns:1fr 280px;gap:22px;align-items:start}
@media(max-width:860px){.twocol{grid-template-columns:1fr}}
label{display:block;font-size:var(--fs-base);color:var(--muted)}
label.inline{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
select,input[type=text],input[type=number],textarea{
  width:100%;margin-top:5px;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--radius-card-sm);font:inherit;font-size:var(--fs-base3);background:var(--kf-white);color:var(--ink);
}
select:focus,input:focus,textarea:focus{outline:2px solid var(--kf-brand-line2);outline-offset:1px;border-color:var(--brand)}
textarea{margin-top:10px;min-height:84px;resize:vertical}

/* ---------- 通用小件 ---------- */
.pill{display:inline-block;font-size:var(--fs-micro);padding:1px 8px;border-radius:999px;vertical-align:1px}
.pill.auto{background:var(--blue-soft);color:var(--blue)}
.pill.manual{background:var(--warn-soft);color:var(--warn)}
.tag{font-size:var(--fs-micro);color:var(--muted);background:var(--kf-chip);border-radius:var(--radius-input);padding:2px 7px}
.btn{
  background:var(--brand);color:var(--kf-white);border:0;border-radius:var(--radius-card-sm);
  padding:9px 16px;font:inherit;font-size:var(--fs-base3);cursor:pointer;
}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:var(--kf-white);color:var(--brand);border:1px solid var(--brand)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- 环节链 ---------- */
.chain{display:flex;gap:6px;overflow-x:auto;padding:6px 0 2px;margin-bottom:6px}
.node{
  flex:none;min-width:118px;border:1px solid var(--line);border-radius:var(--radius-panel-sm);
  padding:10px 12px;background:var(--kf-surface);text-align:center;transition:.18s;
}
.node .n{font-size:var(--fs-note);color:var(--muted)}
.node .t{font-size:var(--fs-base2);font-weight:600;margin-top:2px}
.node .d{font-size:var(--fs-note);color:var(--muted);margin-top:3px}
.node.on{background:var(--brand-soft);border-color:var(--kf-brand-line);box-shadow:inset 0 0 0 1px var(--kf-brand-line)}
.node.off{opacity:.34;filter:grayscale(1)}
.node .x{font-size:var(--fs-xs);color:var(--warn);margin-top:4px;height:13px}

/* ---------- 预设 ---------- */
.presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.preset{
  text-align:left;background:var(--kf-surface);border:1px solid var(--line);border-radius:var(--radius-panel-sm);
  padding:11px 13px;font:inherit;cursor:pointer;transition:.16s;
}
.preset:hover{border-color:var(--kf-brand-line);background:var(--kf-surface-hover)}
.preset.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.preset b{display:block;font-size:var(--fs-base3)}
.preset span{font-size:var(--fs-sm);color:var(--muted)}
.scopeout{
  margin-top:14px;padding:12px 14px;background:var(--brand-soft);border-radius:var(--radius-card);font-size:var(--fs-base2);
}
.scopeout em{font-style:normal;font-weight:600;color:var(--brand)}

/* ---------- 货物 ---------- */
.modebar{display:flex;gap:8px;margin-bottom:14px}
.mode{
  background:var(--kf-chip);border:1px solid transparent;border-radius:var(--radius-card-sm);
  padding:8px 15px;font:inherit;font-size:var(--fs-base2);color:var(--muted);cursor:pointer;
}
.mode.is-active{background:var(--brand-soft);border-color:var(--kf-brand-line2);color:var(--brand);font-weight:600}
table.cargo{width:100%;border-collapse:collapse}
table.cargo th,table.cargo td{padding:4px;text-align:left}
table.cargo th{font-size:var(--fs-sm);color:var(--muted);font-weight:500}
table.cargo input{margin-top:0}
.drop{
  border:1.5px dashed var(--kf-dash);border-radius:var(--radius-md);padding:18px;text-align:center;background:var(--kf-surface);
}
.drop strong{display:block;font-size:var(--fs-md)}
.drop p{color:var(--muted);font-size:var(--fs-base);margin:6px 0 0}
.drop textarea{text-align:left}
.parseout{
  margin-top:14px;background:var(--blue-soft);border:1px solid var(--kf-blue-line);border-radius:var(--radius-panel-sm);padding:13px 15px;font-size:var(--fs-base2);
}
.parseout h4{margin:0 0 8px;font-size:var(--fs-base3);color:var(--blue)}
.parseout table{width:100%;border-collapse:collapse}
.parseout td{padding:3px 0;font-size:var(--fs-base)}
.parseout td:first-child{color:var(--muted);width:120px}
.calc{background:var(--kf-surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px}
.calc dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:7px 10px;font-size:var(--fs-base2)}
.calc dt{color:var(--muted)}
.calc dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.calc .hl{color:var(--brand)}
.calc dt.hl{color:var(--brand)}

/* ---------- 费用 ---------- */
.markupbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.markupbar label{display:flex;align-items:center;gap:8px}
.markupbar select{width:auto;margin-top:0}
/* 2026-10-12 用户拍板「窄屏修复」①：费用表在窄屏**允许左右滑动**，不许再把右半张表（原币金额 / 折合 RMB）裁掉。
 * 原来这一行是 `overflow:hidden` —— 用户**滑不动**（只有 JS 能改 scrollLeft），手机上右列等于不存在（实测 390：
 * .fgroup clientW=298 / scrollW=616 / overflowX=hidden、横向滚轮后 scrollLeft 仍是 0）。
 * 改成 `overflow-x:auto`（auto = 只有内容真的放不下才出滚动条）+ `overflow-y:hidden`（保住圆角裁剪）。
 * 宽屏内容放得下 ⇒ 不出滚动条、不换行：1440 实测 clientW=scrollW=988，与改动前逐像素一致。 */
.fgroup{border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:14px;overflow-x:auto;overflow-y:hidden}
.fgroup>header{
  background:var(--kf-surface-head);padding:10px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.fgroup>header .gt{font-weight:600;font-size:var(--fs-base4)}
.fgroup>header .gs{font-size:var(--fs-sm);color:var(--muted)}
table.fees{width:100%;border-collapse:collapse;font-size:var(--fs-base2)}
table.fees th{
  background:var(--kf-surface);font-size:var(--fs-micro);color:var(--muted);font-weight:500;
  padding:7px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.fees th:first-child{text-align:left}
table.fees td{padding:5px 10px;text-align:right;border-bottom:1px solid var(--kf-hairline);font-variant-numeric:tabular-nums}
table.fees td:first-child{text-align:left;font-variant-numeric:normal}
table.fees tr:last-child td{border-bottom:0}
table.fees input{
  width:88px;margin:0;padding:5px 7px;font-size:var(--fs-base);text-align:right;border-radius:var(--radius-chip);
}
table.fees input:disabled{background:var(--kf-surface-disabled);color:var(--muted)}
.fsub{background:var(--kf-surface);font-weight:600}
.fsub td{border-top:1px solid var(--line)}
.totals{
  margin-top:18px;border:2px solid var(--brand);border-radius:var(--radius-md);padding:14px 18px;
  display:flex;justify-content:space-between;align-items:baseline;background:var(--brand-soft);
}
.totals .lbl{font-size:var(--fs-base3);color:var(--brand);font-weight:600}
.totals .amt{font-size:var(--fs-2xl);font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.totals .rmb{font-size:var(--fs-base);color:var(--muted);text-align:right}

/* ---------- 报价单 ---------- */
.quotebar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.quoteNo{margin-left:auto;font-size:var(--fs-base);color:var(--muted)}
.quoteNo strong{color:var(--brand);font-size:var(--fs-md);letter-spacing:.4px}
.quote{border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;background:var(--kf-white);overflow-x:auto}
.quote .qh{border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:16px}
.quote .qh h2{font-size:var(--fs-lg2)}
.quote .qh .co{font-size:var(--fs-sm2);color:var(--muted);margin-top:4px}
.quote .meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:18px}
.quote .meta div{font-size:var(--fs-sm2)}
.quote .meta .k{color:var(--muted)}
.quote .meta .v{font-weight:600;font-size:var(--fs-base3)}
table.q{width:100%;border-collapse:collapse;font-size:var(--fs-base);margin-bottom:4px}
table.q th{
  background:var(--ink);color:var(--kf-white);padding:8px 10px;text-align:right;font-size:var(--fs-micro);font-weight:500;white-space:nowrap;
}
table.q th:first-child{text-align:left}
table.q td{padding:6px 10px;text-align:right;border-bottom:1px solid var(--kf-chip);font-variant-numeric:tabular-nums}
table.q td:first-child{text-align:left;font-variant-numeric:normal}
table.q tr.sec td{background:var(--kf-surface-head);font-weight:600;font-size:var(--fs-base2)}
table.q tr.sub td{font-weight:600;background:var(--kf-surface)}
table.q tr.total td{font-weight:700;font-size:var(--fs-md);background:var(--brand-soft);border-top:2px solid var(--brand);border-bottom:0}
.terms{margin-top:20px;font-size:var(--fs-micro);color:var(--muted)}
.terms table{width:100%;border-collapse:collapse}
.terms td{padding:3px 0;vertical-align:top}
.terms td:first-child{width:88px;color:var(--ink);font-weight:600;white-space:nowrap}

/* ---------- 页脚（状态条：两条页面都在用；由 demo.js / upload.js 写 #prog） ---------- */
.foot{
  position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);
  padding:11px 22px;display:flex;justify-content:space-between;font-size:var(--fs-base);color:var(--muted);z-index:6;
}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--brand)}

/* ---------- 危险品（DG）标记 ---------- */
.dgchk{display:flex;align-items:center;gap:7px;font-size:var(--fs-base2);cursor:pointer;
  background:var(--warn-soft);border:1px solid var(--kf-warn-line);border-radius:var(--radius-card-sm);padding:6px 12px}
.dgchk input{width:auto;margin:0;cursor:pointer}
.dgchk span{font-weight:600;color:var(--warn)}
.dgMark{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.4px;
  background:var(--warn);color:var(--kf-white);border-radius:var(--radius-xs);padding:1px 5px;vertical-align:1px}

/* ---------- 第 1 步：运输类型 + 起运港/目的港联动 ---------- */
.pairgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:760px){.pairgrid{grid-template-columns:1fr}}
.pairbox{background:var(--kf-surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px}
.pairbox-t{font-size:var(--fs-base2);font-weight:600;color:var(--brand);margin-bottom:10px}
.pairbox label{display:block;font-size:var(--fs-base);color:var(--muted)}
.pairbox label + label{margin-top:10px}
.pairbox select{margin-top:5px}
.pathsolo{margin-top:16px;padding:12px 15px;background:var(--brand-soft);border:1px solid var(--kf-brand-line2);
  border-radius:var(--radius-panel-sm);font-size:var(--fs-base2)}
.pathwarn{margin-top:16px;padding:14px 16px;background:var(--warn-soft);border:1px solid var(--kf-warn-line);
  border-radius:var(--radius-panel-sm);font-size:var(--fs-base2);color:var(--warn);line-height:1.6}

/* ---------- 第 3 步：邮编按服务范围 + 字段来源标注 ---------- */
.pcbox{margin-top:4px}
.pcline{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:var(--fs-base2);flex-wrap:wrap}
.pcline input{width:130px;margin:0}
.pcline .tag{margin-left:auto}
.srcTag{font-size:var(--fs-xs);font-weight:600;background:var(--blue-soft);color:var(--blue);
  border-radius:var(--radius-sm);padding:1px 6px}
.srcTag.manual{background:var(--warn-soft);color:var(--warn)}
input.fromFile{background:var(--kf-blue-wash);border-color:var(--kf-blue-dash);box-shadow:inset 3px 0 0 var(--blue)}
.srcsum{margin-top:14px}
.srcbox{background:var(--blue-soft);border:1px solid var(--kf-blue-line);border-radius:var(--radius-card-sm);
  padding:10px 12px;font-size:var(--fs-sm2);line-height:1.6}

/* ---------- A3 货物属性勾选项 ---------- */
.condbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:4px}
.conditem{display:flex;align-items:center;gap:8px;background:var(--kf-surface);border:1.5px solid var(--line);
  border-radius:var(--radius-card);padding:9px 12px;font-size:var(--fs-base);cursor:pointer;transition:.15s}
.conditem:hover{border-color:var(--kf-brand-line)}
.conditem.on{border-color:var(--brand);background:var(--brand-soft)}
.conditem input{width:auto;margin:0;cursor:pointer}
.condname{font-weight:600}
.condhint{color:var(--muted);font-size:var(--fs-micro);margin-left:auto}
input.needInput{border-color:var(--warn);background:var(--warn-soft)}
input.needInput::placeholder{color:var(--warn);font-weight:600}

/* ---------- A2 分组规则说明 ---------- */
.groupRule{margin:12px 0 4px;border:1px solid var(--line);border-radius:var(--radius-panel-sm);overflow:hidden}
.groupRule > div{display:flex;align-items:center;gap:12px;padding:9px 14px;font-size:var(--fs-base);
  border-bottom:1px solid var(--kf-chip);background:var(--kf-surface)}
.groupRule > div:last-child{border-bottom:0}
.groupRule b{min-width:190px;color:var(--brand)}
.groupRule span{color:var(--muted);font-size:var(--fs-sm2)}
.groupRule span b{min-width:0;color:var(--warn);font-weight:600}

/* ---------- A5 报价单：有效期与价格注释 ---------- */
.validity{margin:14px 0 4px;padding:10px 14px;background:var(--brand-soft);border:1px solid var(--kf-brand-line2);
  border-radius:var(--radius-card);font-size:var(--fs-base2)}
.validity strong{color:var(--brand);font-size:var(--fs-md)}
.validity .tag{margin-left:8px}
.notes{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
.notes h4{margin:0 0 10px;font-size:var(--fs-base3)}
.notes ol{margin:0;padding-left:22px}
.notes li{font-size:var(--fs-sm2);line-height:1.75;margin-bottom:4px}
.notes li b{color:var(--brand);margin-right:8px}
.notes .mini{margin-top:10px;color:var(--muted);font-size:var(--fs-micro)}

/* ---------- A5 报价编号与有效期同排左右对齐 ---------- */
.validity{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.validity .vleft{font-size:var(--fs-base2);color:var(--muted)}
.validity .vleft .qno{font-size:var(--fs-md3);letter-spacing:.5px;color:var(--ink)}
.validity .vright{margin-left:auto;text-align:right}
.condMark{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.3px;
  background:var(--brand-soft);color:var(--brand);border:1px solid var(--kf-brand-line2);
  border-radius:var(--radius-xs);padding:0 5px;vertical-align:1px}

/* 分组规则：会出现 / 不出现 两态 */
.groupRule > div.on b{color:var(--brand)}
.groupRule > div.off{background:var(--kf-surface-quiet);opacity:.75}
.groupRule > div.off b{color:var(--muted);text-decoration:line-through}
.groupRule > div.off span{color:var(--muted)}

/* ---------- 真实数据接入（报价界面） ---------- */
code{background:var(--kf-chip);border-radius:var(--radius-sm);padding:1px 5px;font-size:var(--fs-sm2);
  font-family:ui-monospace,SFMono-Regular,Consolas,"Courier New",monospace}

/* 表单小节（第 1 步的路径选择、说明块） */
.q{margin-top:16px;background:var(--kf-surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px}
.q .qn{font-size:var(--fs-base2);font-weight:600;color:var(--brand);margin-bottom:8px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.q .why{font-size:var(--fs-sm);color:var(--muted);margin-top:8px;line-height:1.6}

.errbox{margin:0 0 16px;padding:13px 16px;background:var(--kf-danger-soft);border:1px solid var(--kf-danger-line);
  border-radius:var(--radius-panel-sm);color:var(--kf-danger-ink);font-size:var(--fs-base2);line-height:1.6}

/* 会话门：未登录时用它替换整个页面内容（一个数字都不显示） */
.gatebox{max-width:460px;margin:36px auto;padding:24px;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--kf-white);box-shadow:var(--shadow)}
.gatebox h2{font-size:var(--fs-md5);margin-bottom:6px}
.gatebox label{margin-top:12px}
.gatebox .btn{width:100%;margin-top:18px}
.gateMsg{margin:12px 0 0;font-size:var(--fs-base);min-height:18px}

.srcbanner{margin:0 0 16px;padding:11px 14px;border-radius:var(--radius-card);font-size:var(--fs-base);line-height:1.65}
.srcbanner.ok{background:var(--brand-soft);border:1px solid var(--kf-ok-line2);color:var(--kf-green-ink)}
.srcbanner.warn{background:var(--warn-soft);border:1px solid var(--kf-warn-line2);color:var(--warn)}
.srcbanner.bad{background:var(--kf-danger-soft);border:1px solid var(--kf-danger-line);color:var(--kf-danger-ink)}

.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
.samples{margin-top:14px}
.samples .sbtn{background:var(--kf-white);border:1px dashed var(--kf-dash);border-radius:var(--radius-card-sm);padding:8px 14px;
  font:inherit;font-size:var(--fs-base);color:var(--ink);cursor:pointer}
.samples .sbtn:hover{border-color:var(--brand);color:var(--brand)}

/* 键值表：航线回显 / 汇率 / 元数据 */
table.kv{width:100%;border-collapse:collapse;font-size:var(--fs-base2);margin-top:6px}
table.kv td{padding:6px 10px;border-bottom:1px solid var(--kf-chip);vertical-align:top;text-align:left}
table.kv td:first-child{width:34%;color:var(--muted);white-space:nowrap}
table.kv tr:last-child td{border-bottom:0}
.routecard{margin-top:16px;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--kf-surface)}
.routecard .rc-h{background:var(--brand-soft);color:var(--brand);font-weight:600;font-size:var(--fs-base2);padding:9px 14px}
.routecard table.kv td{padding:6px 14px;background:var(--kf-white)}
.muted{color:var(--muted)}

/* 状态条 */
.statusbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 16px;margin-bottom:16px;background:var(--kf-surface)}
.statusbar.ok{background:var(--kf-ok-soft);border-color:var(--kf-ok-line)}
.statusbar.warn{background:var(--warn-soft);border-color:var(--kf-warn-line)}
.statusbar.bad{background:var(--kf-danger-soft);border-color:var(--kf-danger-line)}
.sbadge{font-size:var(--fs-sm2);font-weight:700;border-radius:999px;padding:3px 12px;background:var(--kf-white)}
.sbadge.ok{background:var(--kf-green-ink);color:var(--kf-white)}
.sbadge.warn{background:var(--warn);color:var(--kf-white)}
.sbadge.bad{background:var(--kf-danger-ink);color:var(--kf-white)}
.statusbar .stext{font-size:var(--fs-base);color:var(--muted);flex:1;min-width:240px}
.statusbar .slabel{font-size:var(--fs-md);font-weight:700;color:var(--brand)}

/* 数字列不折行（费用名称列照旧可换行显示后端备注） */
table.fees td:not(:first-child),table.fees th:not(:first-child),
table.q td:not(:first-child),table.q th:not(:first-child){white-space:nowrap}

/* 待确认：绝不当成 0 */
.pending{display:inline-block;background:var(--warn-soft);color:var(--warn);
  border:1px solid var(--kf-warn-line2);border-radius:var(--radius-input);padding:1px 8px;font-weight:600;font-size:var(--fs-sm2)}
table.fees tr.unknown td,table.q tr.unknown td{background:var(--kf-warn-wash)}
.lid{font-size:var(--fs-micro);color:var(--muted);margin-top:3px}
.lnotes{font-size:var(--fs-micro);color:var(--muted);line-height:1.6;margin-top:4px}

/* 缺价清单 */
.missinglist{margin:6px 0 0;padding-left:24px;font-size:var(--fs-base2);line-height:1.8}
.missinglist li{color:var(--warn)}
.notyet{margin-top:8px;background:var(--warn-soft);border:1px solid var(--kf-warn-line);border-radius:var(--radius-md);
  padding:14px 18px}
.notyet ul{margin:0;padding-left:20px}
.notyet li{font-size:var(--fs-base);line-height:1.75;margin-bottom:6px;color:var(--kf-warn-ink)}
.notyet li strong{color:var(--warn)}

/* ---------- 2026-10-11 用户要求 A：第 4 步的「系统备注」区（原第 5 步的系统说明搬到这里） ----------
   只在第 4 步出现（#sysNotes 在 .panel[data-panel="4"] 内，随面板一起显示/隐藏）；
   第 5 步「报价单」是客户视图，不含这些块。视觉上做成"内部确认区"：左侧色条 + 浅底，和客户报价单区分开。 */
#sysNotes{margin-top:22px;border-top:2px dashed var(--line);padding-top:14px}
#sysNotes:empty{margin:0;border-top:0;padding-top:0}
#sysNotes > h3{margin:0 0 6px;font-size:var(--fs-md);color:var(--brand)}
#sysNotes h4{margin:16px 0 8px;font-size:var(--fs-base3);color:var(--ink);
  border-left:3px solid var(--brand);padding-left:8px}
#sysNotes h5{margin:12px 0 6px;font-size:var(--fs-base);color:var(--muted)}
#sysNotes .mini{margin:6px 0 0;color:var(--muted);font-size:var(--fs-sm);line-height:1.7}
#sysNotes ul.mini,#sysNotes ol.mini{margin:6px 0 0;padding-left:22px}
#sysNotes ul.mini li,#sysNotes ol.mini li{margin-bottom:4px;line-height:1.7}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:2px 22px;
  border:1px solid var(--line);border-radius:var(--radius-panel-sm);padding:10px 14px;background:var(--kf-surface)}
.srow{display:flex;gap:10px;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--kf-chip);
  font-size:var(--fs-sm2);line-height:1.65}
.srow .sk{flex:0 0 42%;color:var(--muted);min-width:0}
.srow .sv{flex:1;min-width:0;word-break:break-word}
.srow .sv code{font-size:var(--fs-sm)}
.srow em{color:var(--warn);font-style:normal}
.sline{margin:0 0 10px;padding:8px 12px;border:1px solid var(--kf-chip);border-radius:var(--radius-card);background:var(--kf-surface)}
.sline .slt{font-size:var(--fs-base);font-weight:600;color:var(--ink)}
.sline .slt .tag{margin-left:6px;font-weight:400}
.ackline{margin-top:10px;padding:10px 14px;background:var(--brand-soft);border:1px solid var(--kf-brand-line2);
  border-radius:var(--radius-card);font-size:var(--fs-base);font-weight:600;color:var(--brand)}

/* ---------- 2026-10-12 用户拍板「窄屏修复」②：第 1 步「库中数据量」那一行不再把页面撑宽 ----------
 * 那一行是 `#pathBox` 里的一张 `table.q`（demo.js renderStep1 的 dataRow，形如
 * 「目的港费用 0 项 · 提货费率格 0 个 <span class="pill manual">两项都是 0，报价大概会缺价</span>」）。
 * `table.q` 的口径是"数字列不折行"（见上面那条 `white-space:nowrap`），于是 390 宽时整行
 * min-content = 415px ⇒ documentElement.scrollWidth = 461（溢出 71px；上一条独立报告 §B 测到的 461 就是它，
 * 已用"排除被滚动祖先裁剪的元素"的探针复现并定位到这张表）。
 * 窄屏让它换行即可；宽屏这句话一行放得下 ⇒ 一个字、一个像素都不变（1440 实测溢出 0）。 */
@media (max-width: 760px){
  #pathBox table.q td{white-space:normal;overflow-wrap:break-word}
}