/*
 * 主题层。基础层是 Pico CSS v2.1.1（classless 构建，自托管在 static/vendor/，MIT）。
 * 分工：Pico 出 reset、排版节奏、表单控件、表格骨架；本文件只做两件事——
 *   1) 覆盖 --pico-* 令牌，把配色定成「冷灰数据底 + 碳黑顶栏 + 一条电光蓝」；
 *   2) Pico 不管的组件（顶栏、英雄区、品类卡、数据表、筛选条、配置单格）。
 *
 * 口径（2026-11-07 视觉改版）：前台走「数据站」而不是「官网」——等宽数字、发丝线、
 * 小号大写英文标签、碳黑区块负责视觉重量，蓝色只用在可操作与选中态；不用大面积渐变，
 * 不用全屏动效，阴影只给需要浮起来的下拉与卡片悬停。后台沿用同一套令牌，但不改结构。
 *
 * 三处必须照写的选择器，别当成啰嗦：
 *   · 令牌块写 :root[data-theme=light]——Pico 的亮色令牌挂在 :root:not([data-theme=dark])，
 *     特异性 (0,2,0)；裸 :root（0,1,0）和 html[data-theme=light]（0,1,1）都压不住它。
 *     模板 <html> 上的 data-theme="light" 同时是"关掉 prefers-color-scheme 自动暗色"的开关，
 *     去掉那个属性，整站会跟着系统偏好变黑。
 *   · 表单/按钮规则 Pico 写成 [type=submit]、input:not([type=checkbox],[type=radio]) 这种
 *     (0,1,1) 形式，只写 button（0,0,1）或 .qtyin（0,1,0）会被它盖掉。
 *   · button 宽度必须是 fit-content 而不是 auto：Pico 把 button 设成 display:block，
 *     竖排表单（form.stacked 是 column flex，align-items 默认 stretch）里 width:auto
 *     会被拉成整行宽。
 */

:root[data-theme=light] {
  color-scheme: light;

  /* 色板：冷灰画布、白卡片、碳黑顶栏、一条电光蓝 + 一条青色数据强调。 */
  --bg: #f2f5f9;
  --surface: #ffffff;
  --surface-2: #e8edf4;
  --inset: #f7f9fc;
  --panel: #ffffff;
  --line: #e2e7ef;
  --line-strong: #c9d3e1;
  --ink: #0b1220;
  --muted: #5d6b7e;
  --accent: #1f5eff;
  --accent-hi: #0b46d8;
  --accent-soft: #eaf0ff;
  --accent-ink: #ffffff;
  --cyan: #0098b6;
  --ok: #0b7a53;
  --bad: #d22f27;
  --warn: #a8620a;
  /* 状态点是给小圆点用的，比同族文字色亮一档：白底上 8px 的暗红几乎看不出是红的 */
  --dot-error: #f04438;
  --dot-warn: #f79009;
  --dot-unknown: #b9c2d0;

  /* 碳黑区（顶栏、英雄区、对比表头、代码块） */
  --carbon: #080e1a;
  --carbon-2: #0e1829;
  --carbon-line: rgba(151, 180, 255, .16);
  --carbon-ink: #e7eefb;
  --carbon-muted: #8fa1ba;

  /* Pico 从 576px 起把根字号一路加到 131%，后台表格会被撑散。
     这里定死 16px：要调密度改下面的 spacing 令牌，不要改字号。 */
  --pico-font-size: 16px;
  --pico-line-height: 1.55;
  --pico-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans SC",
    "Helvetica Neue", system-ui, Roboto, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --pico-font-family-sans-serif: var(--pico-font-family);
  --pico-font-family-monospace: "SF Mono", ui-monospace, "Cascadia Mono", Consolas,
    "JetBrains Mono", Menlo, "Courier New", monospace;
  --pico-font-weight: 400;

  --pico-background-color: var(--bg);
  --pico-color: var(--ink);
  --pico-muted-color: var(--muted);
  --pico-muted-border-color: var(--line);
  --pico-border-color: var(--line);
  --pico-table-border-color: var(--line);
  --pico-table-row-stripped-background-color: var(--inset);
  --pico-card-background-color: var(--surface);
  --pico-card-border-color: var(--line);
  --pico-card-sectioning-background-color: var(--inset);
  --pico-code-background-color: var(--surface-2);
  --pico-code-color: var(--ink);
  --pico-h1-color: var(--ink);
  --pico-h2-color: var(--ink);
  --pico-h3-color: var(--ink);
  --pico-contrast-background: var(--surface);
  --pico-contrast-border: var(--line);

  --pico-primary: var(--accent);
  --pico-primary-hover: var(--accent-hi);
  --pico-primary-background: var(--accent);
  --pico-primary-hover-background: var(--accent-hi);
  --pico-primary-inverse: var(--accent-ink);
  --pico-primary-underline: rgba(31, 94, 255, .5);
  --pico-primary-hover-underline: rgba(31, 94, 255, .7);
  --pico-primary-focus: rgba(31, 94, 255, .18);
  --pico-text-selection-color: rgba(31, 94, 255, .16);

  --pico-form-element-background-color: var(--surface);
  --pico-form-element-border-color: var(--line-strong);
  --pico-form-element-color: var(--ink);
  --pico-form-element-placeholder-color: var(--muted);
  --pico-form-element-active-background-color: var(--surface);
  --pico-form-element-active-border-color: var(--accent);
  --pico-form-element-focus-color: var(--accent);
  --pico-form-element-disabled-opacity: .45;
  --pico-form-element-invalid-border-color: var(--bad);
  --pico-form-element-invalid-active-border-color: var(--bad);
  --pico-form-element-invalid-focus-color: var(--bad);
  --pico-form-element-selected-background-color: var(--surface-2);

  --pico-border-radius: 9px;
  --pico-outline-width: 3px;
  --pico-spacing: 1rem;
  --pico-form-element-spacing-vertical: .5rem;
  --pico-form-element-spacing-horizontal: .72rem;
  --pico-typography-spacing-vertical: .8rem;
  --pico-block-spacing-vertical: 1.75rem;
  --pico-block-spacing-horizontal: 1.5rem;
  --pico-transition: .15s ease-out;

  /* 本文件自用的两个别名：数据字体与卡片半径 */
  --mono: var(--pico-font-family-monospace);
  --r: 13px;
  --r-sm: 8px;
}

/* 价格曲线的颜色 JS 也得读一遍（ECharts 不认 CSS 变量），这几行是两边唯一的同步点 */
:root {
  --chart-text: #5d6b7e;
  --chart-line: #e2e7ef;
  --chart-surface: #ffffff;
  --chart-mute: #b9c2d0;
  --chart-1: #1f5eff;
  --chart-2: #f79009;
  --chart-3: #0b7a53;
  --chart-4: #7c3aed;
}

/* ---- 版面：冷灰网格底 + 更宽的容器，数据站要横向空间 ---- */
body {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(11, 18, 32, .055) 1px, transparent 1px);
  background-size: 24px 24px;
}
body>main { max-width: 1120px; padding: 2.25rem 1.5rem 4rem; }
main.narrow { max-width: 420px; }
header { margin-bottom: 2rem; }
section { margin-bottom: 2.75rem; }

/* ---- 排版 ---- */
h1 { --pico-font-size: 2rem; --pico-line-height: 1.12; font-weight: 650;
  letter-spacing: -.028em; margin-bottom: .45rem; }
h1 .en { color: var(--muted); font-weight: 500; font-size: .48em; margin-left: .55em;
  letter-spacing: .12em; text-transform: uppercase; font-family: var(--mono); }
h2 { --pico-font-size: 1.08rem; --pico-line-height: 1.35; font-weight: 650;
  letter-spacing: -.012em; margin-top: 0; }

.sub { color: var(--muted); font-size: .87rem; }
.lede { color: var(--carbon-muted); font-size: .96rem; line-height: 1.7; max-width: 46em; margin: .2rem 0 0; }
.stack { color: var(--muted); font-size: .76rem; font-family: var(--mono); letter-spacing: .01em; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.ok { color: var(--ok); }
.bad { color: var(--bad); font-weight: 600; }
.hint { font-size: .78rem; color: var(--muted); }
.hint.warn { color: var(--warn); }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mono { font-size: .82rem; }
.num { text-align: right; white-space: nowrap; }
/* 图标统一走 inline SVG sprite（Tabler Icons, MIT）：尺寸跟着字号，颜色跟着 currentColor */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex: none; }
.eyebrow { margin: 0 0 .55rem; font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* 链接默认不带下划线，悬停才出；强调靠蓝色本身 */
a { --pico-text-decoration: none; text-decoration: none; }
a:hover { text-decoration: underline; }
a.on { font-weight: 600; color: var(--accent); }

/* ---- 顶栏：全宽碳黑条。前台 nav 被移到 <main> 之前，所以自己铺满视口 ---- */
.sitenav {
  /* Pico 给 nav 挂了 display:flex，这里必须是 block：否则 .nav-in 会按 max-content 收缩，
     顶栏内容就不再与正文的 1120px 容器对齐（移动端还会把页面撑出横向滚动）。 */
  display: block;
  position: sticky; top: 0; z-index: 80;
  background: rgba(8, 14, 26, .93);
  border-bottom: 1px solid var(--carbon-line);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.nav-in { width: 100%; max-width: 1120px; margin: 0 auto; height: 58px; padding: 0 1.5rem;
  display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 27px; height: 27px; border-radius: 7px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-family: var(--mono); font-size: .82rem; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.brand-mark .ic { width: 16px; height: 16px; stroke-width: 2.1; }
.brand-name { font-size: .95rem; font-weight: 600; letter-spacing: .01em; }
.brand-en { font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; color: #7f92ad;
  margin-left: 2px; }
.navlinks { display: flex; align-items: center; gap: 2px; }
.navlinks a { color: #b6c3d8; font-size: .85rem; padding: 7px 11px; border-radius: 7px; }
.navlinks a:hover { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.navsearch { position: relative; margin-left: auto; }
.navsearch input[type=search] { width: 268px; max-width: 40vw; margin-bottom: 0; height: 34px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(151, 180, 255, .2);
  border-radius: 8px; color: #eaf0fa; font-size: .82rem; padding: .3rem .7rem; }
.navsearch input[type=search]::placeholder { color: #7f92ad; }
.navsearch input[type=search]:focus-visible { background: rgba(255, 255, 255, .1);
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 94, 255, .28); }
.navdrop { position: absolute; right: 0; top: 100%; z-index: 90; min-width: 320px; max-width: 460px;
  max-height: 320px; overflow-y: auto; margin-top: 8px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 40px rgba(8, 14, 26, .22); }
.navdrop a.pickopt { display: block; color: var(--ink); }
.navdrop a.pickopt:hover { text-decoration: none; }
.navdrop .pickopt.on { background: var(--accent-soft); }
.navdrop .pickopt .meta { color: var(--muted); font-size: .76rem; margin-left: 8px; font-family: var(--mono); }
.navdrop .pickopt.sub { color: var(--muted); cursor: default; background: none; }

/* 后台顶栏：和前台同一套碳黑顶栏，品牌区 + 工具链接 + 退出 */
.adminnav { display: block; position: sticky; top: 0; z-index: 80;
  background: rgba(8, 14, 26, .93); border-bottom: 1px solid var(--carbon-line);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); }
.adminnav-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; padding: 10px 1.5rem; }
.adminlinks { display: flex; flex-wrap: wrap; gap: 2px; }
.adminlinks a { color: #b6c3d8; padding: 6px 9px; border-radius: 7px; font-size: .8rem; }
.adminlinks a:hover { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.adminnav .spacer { flex: 1; }
.adminnav .linkbtn, .adminnav .linkbtn[type=submit] { color: #b6c3d8; }
.adminnav .linkbtn:hover { color: #fff; }
/* 后台页头和前台内页同一套：标题下一条发丝线 */
.adminnav + main > header { padding-bottom: 18px; border-bottom: 1px solid var(--line);
  margin-bottom: 26px; }

/* ---- 英雄区：首页与空状态的门面。碳黑底 + 网格线 + 右上角一团蓝光 ---- */
.hero { position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center;
  background: var(--carbon); color: var(--carbon-ink); border-radius: 18px;
  padding: 44px 46px; margin-bottom: 2.75rem; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(151, 180, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 180, 255, .07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 74% 18%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 74% 18%, #000 0%, transparent 72%); }
.hero::after { content: ""; position: absolute; z-index: -1; width: 460px; height: 460px;
  right: -150px; top: -190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 94, 255, .38), transparent 64%); }
.hero .eyebrow { color: #8fb0ff; }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 3.6vw, 3rem); margin-bottom: .55rem; }
.hero h1 .en { color: #7f92ad; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-stats { display: flex; flex-direction: column; gap: 18px; min-width: 170px;
  border-left: 1px solid var(--carbon-line); padding-left: 30px; }
.hero-stats dt { margin: 0; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--carbon-muted); }
.hero-stats dd { margin: 3px 0 0; font-family: var(--mono); font-size: 1.85rem; font-weight: 600;
  line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.hero-stats .unit { font-size: .7rem; font-weight: 400; color: var(--carbon-muted); margin-left: 4px;
  letter-spacing: .04em; }

/* ---- 按钮：方一点的胶囊，主要动作才上蓝 ---- */
button, button[type=button], button[type=submit],
input[type=submit], input[type=button] {
  width: fit-content; max-width: 100%; min-height: 0;
  background-color: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
  color: var(--ink); font-size: .88rem; font-weight: 500; padding: .48rem 1.05rem;
  line-height: 1.4; box-shadow: none;
}
button:hover, button[type=button]:hover, button[type=submit]:hover,
input[type=submit]:hover, input[type=button]:hover {
  background-color: var(--surface-2); color: var(--ink); border-color: var(--line-strong);
}
button:active, button[type=submit]:active { background-color: var(--surface-2); }
button:focus-visible, button[type=button]:focus-visible, button[type=submit]:focus-visible,
input[type=submit]:focus-visible { box-shadow: 0 0 0 3px var(--pico-primary-focus); }
/* .primary/.danger 也要走 :is() 抬到 (0,1,1)：写成 button.primary 只有 (0,1,0)，
 * 会被上面 button[type=submit] 盖掉——而提交按钮恰恰全是 primary。 */
button:is(.primary) { background-color: var(--accent); border-color: transparent;
  color: var(--accent-ink); font-weight: 600; }
button:is(.primary):hover { background-color: var(--accent-hi); color: var(--accent-ink); }
button:is(.danger) { color: var(--bad); }
button:is(.danger):hover { background-color: #fdecea; border-color: #f3c4c0; color: var(--bad); }

a.btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 17px;
  border-radius: 8px; font-size: .88rem; font-weight: 500; border: 1px solid transparent;
  transition: background-color .15s, border-color .15s, transform .15s; }
a.btn:hover { text-decoration: none; }
a.btn.primary { background: var(--accent); color: #fff; font-weight: 600; }
a.btn.primary:hover { background: var(--accent-hi); }
a.btn.ghost { color: var(--carbon-ink); border-color: var(--carbon-line); background: rgba(255, 255, 255, .04); }
a.btn.ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(151, 180, 255, .34); }
a.btn.line { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
a.btn.line:hover { background: var(--surface-2); }
a.btn .arw { font-family: var(--mono); font-size: .9em; opacity: .75; }

form.inline { display: inline; margin: 0; }
.linkbtn {
  width: auto; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--muted); font: inherit; font-size: .85rem;
}
.linkbtn[type=button], .linkbtn[type=submit] { width: auto; padding: 0; border: 0;
  background-color: transparent; color: var(--muted); }
.linkbtn:hover, .linkbtn[type=button]:hover { background-color: transparent; border: 0;
  color: var(--accent); text-decoration: underline; box-shadow: none; }
.linkbtn.danger, .linkbtn.danger:hover { color: var(--bad); }

/* ---- 区块标题与卡片 ---- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin-bottom: 15px; }
.section-head h2 { margin: 0; }
.section-head .sub { margin: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 24px; }
.panel > h2:first-child { margin-top: 0; }
.panel-dark { background: var(--carbon); border-color: var(--carbon-line); color: var(--carbon-ink); }
.panel-dark h2, .panel-dark .eyebrow { color: #fff; }
.panel-dark .eyebrow { color: #8fb0ff; }
.panel-dark p { color: var(--carbon-muted); }
.panel-dark a { color: #9db8ff; }
.split { display: grid; grid-template-columns: 1.12fr .88fr; gap: 16px; margin-bottom: 2.75rem; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.facts li { position: relative; padding-left: 17px; font-size: .875rem; color: var(--muted); line-height: 1.65; }
.facts li::before { content: "▸"; position: absolute; left: 0; top: 0; color: var(--accent);
  font-size: .7rem; line-height: 1.9; }
.facts strong { color: var(--ink); font-weight: 600; }

/* 品类卡：首页的主体 */
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; }
.catcard { position: relative; display: block; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.catcard:hover { text-decoration: none; border-color: rgba(31, 94, 255, .45); transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(11, 18, 32, .28); }
.catcode { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cat-ic { width: 14px; height: 14px; color: var(--accent); }
.catname { display: block; margin: 7px 0 16px; font-size: 1.08rem; font-weight: 650;
  letter-spacing: -.01em; color: var(--ink); }
.catcount { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.catcount b { font-size: 1rem; color: var(--ink); font-weight: 600; }
.catarrow { position: absolute; right: 16px; top: 16px; font-family: var(--mono); color: var(--muted);
  opacity: .45; transition: color .15s, opacity .15s, transform .15s; }
.catcard:hover .catarrow { color: var(--accent); opacity: 1; transform: translateX(2px); }
.catcard.empty { opacity: .62; }

/* ---- 内页页头 ---- */
.pagehead { padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.crumb { margin: 0 0 14px; font-family: var(--mono); font-size: .72rem; letter-spacing: .03em;
  color: var(--muted); }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }
.pagehead h1 { margin-bottom: .3rem; }
.pagehead .sub { max-width: 62em; }
.headline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .02em; color: var(--muted); }
.badge.accent { color: var(--accent); border-color: rgba(31, 94, 255, .38); background: var(--accent-soft); }
.badge.ok { color: var(--ok); border-color: rgba(11, 122, 83, .32); background: #edf8f2; }
.badge.bad { color: var(--bad); border-color: rgba(210, 47, 39, .3); background: #fdf1f0; }
.head-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }

/* 数据条：页头下方的关键数字 */
.statstrip { display: flex; flex-wrap: wrap; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); overflow: hidden; margin-top: 18px; }
.stat { flex: 1 1 150px; min-width: 0; padding: 13px 20px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.statk { display: block; font-family: var(--mono); font-size: .63rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.statv { display: block; margin-top: 4px; font-family: var(--mono); font-size: 1.12rem;
  font-weight: 600; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; }
.statv .unit { font-size: .68rem; font-weight: 400; color: var(--muted); margin-left: 4px; letter-spacing: .04em; }

/* ---- 表格：发丝线、浅灰表头、等宽数字 ---- */
table { font-size: .87rem; font-variant-numeric: tabular-nums; }
th, td { border: 0; border-bottom: 1px solid var(--line); }
thead th { --pico-color: var(--muted); background-color: var(--inset); color: var(--muted);
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong); padding: 10px 14px; white-space: nowrap; }
tbody td { padding: 11px 14px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f4f7ff; }
tbody tr:hover td { background: transparent; }
.tablewrap { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  overflow: hidden; overflow-x: auto; margin-bottom: 18px; }
.tablewrap > table, .tablewrap > form > table { margin: 0; border: 0; }
.tablewrap table th:first-child, .tablewrap table td:first-child { padding-left: 18px; }
.tablewrap table th:last-child, .tablewrap table td:last-child { padding-right: 18px; }
.tablebar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 0 0 12px; }
/* 型号管理的筛选条：Pico 把 input/select/button 都设成 width:100%，不收回就各占一整行 */
.modelfilter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.modelfilter input[type="search"] { flex: 1 1 260px; width: auto; margin: 0; }
.modelfilter select { flex: 0 0 150px; width: auto; margin: 0; }
.modelfilter button, .modelfilter .linkbtn { margin: 0; }
.tablebar p { margin: 0; }
.sortlinks { display: inline-flex; gap: 4px; align-items: center; }
.sortlinks a { padding: 3px 9px; border-radius: 6px; color: var(--muted); font-size: .8rem; }
.sortlinks a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.sortlinks a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
code { font-family: var(--mono); font-size: .82em; }
kbd { border-color: var(--line-strong); background: var(--surface-2); }

/* 被后续记录取代的价格快照：不删，只划掉（不变式 3） */
tr.voided td { color: var(--muted); text-decoration: line-through; }
tr.voided td .muted, tr.voided td span { text-decoration: none; }

/* ---- 表单 ---- */
form.stacked { display: flex; flex-direction: column; gap: 16px; margin: 1.25rem 0; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: .78rem; color: var(--muted); margin-bottom: 0; letter-spacing: .01em; }
.field .hint { font-size: .75rem; }
.req::after { content: " *"; color: var(--bad); }
/* Pico 给每个非勾选控件都挂了下边距（它按竖排表单算），栅格和表格里会把行高撑开 */
.field :is(input, select, textarea):not([type=checkbox], [type=radio]),
.grid :is(input, select, textarea):not([type=checkbox], [type=radio]),
table :is(input, select, textarea):not([type=checkbox], [type=radio]),
.actions input, .cmpadd select { margin-bottom: 0; }

:is(input, select, textarea):not([type=checkbox], [type=radio]) {
  font-size: .9rem; height: auto; background-color: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink);
  padding: .5rem .72rem;
}
:is(input, select, textarea):not([type=checkbox], [type=radio])::placeholder { color: var(--muted); }
:is(input, select, textarea):not([type=checkbox], [type=radio]):focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--pico-primary-focus); outline: none;
}
input[readonly] { background-color: var(--inset); color: var(--muted); }
select[multiple] { min-height: 92px; }
textarea { min-height: 76px; }
input[type=checkbox], input[type=radio] { cursor: pointer; }
input[type=search] { background-color: var(--surface); }
input.qtyin { width: 60px; text-align: center; padding: .3rem .4rem; }

fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 18px;
  margin: 0 0 20px; background: var(--inset); }
legend { display: block; margin-bottom: 0; padding: 0 7px; font-size: .85rem; font-weight: 600; color: var(--ink); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.grid .wide { grid-column: 1 / -1; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.checkrow { display: flex; gap: 8px; align-items: baseline; font-size: .875rem; margin-top: 6px; }

.msg { border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 10px;
  padding: 12px 16px; margin: 0 0 20px; font-size: .875rem; background: var(--surface); color: var(--ink); }
.msg.err { border-left-color: var(--bad); }
.msg.ok { border-left-color: var(--ok); }
.msg ul { margin: 6px 0 0; padding-left: 20px; }

/* ---- 图片：浅灰瓷片 + 卡片 ---- */
.thumb { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.gallery figure { margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 10px 8px; }
.gallery img { width: 100%; height: 132px; object-fit: contain; border-radius: 8px;
  background: var(--inset); }
.gallery figure:hover { border-color: rgba(31, 94, 255, .4); }
.gallery img:hover { box-shadow: none; }
.gallery figcaption { font-family: var(--mono); font-size: .7rem; color: var(--muted); margin-top: 8px;
  word-break: break-all; line-height: 1.45; }

/* ---- 参数表：型号页主体。两列排布，一行一对键值 ---- */
main { counter-reset: specgroup; }
.specpanel { counter-increment: specgroup; padding: 4px 24px 6px; margin-bottom: 14px; }
.grouphead { display: flex; align-items: baseline; gap: 11px; padding: 16px 0 9px;
  border-bottom: 1px solid var(--line-strong); }
.grouphead h2 { margin: 0; font-size: .95rem; }
.grouphead .gidx { font-family: var(--mono); font-size: .7rem; font-weight: 600;
  color: var(--accent); letter-spacing: .04em; }
.grouphead .gidx::before { content: counter(specgroup, decimal-leading-zero); }
.grouphead .gcount { margin-left: auto; font-family: var(--mono); font-size: .68rem;
  color: var(--muted); letter-spacing: .04em; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px;
  margin: 0; font-variant-numeric: tabular-nums; }
.specrow { display: grid; grid-template-columns: minmax(84px, 132px) minmax(0, 1fr); gap: 14px;
  align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.specs dt { margin: 0; color: var(--muted); font-size: .79rem; line-height: 1.5; }
.specs dd { margin: 0; font-size: .89rem; color: var(--ink); line-height: 1.55; }
.specs .specrow:last-child { border-bottom: 0; }

.chart { width: 100%; height: 320px; }

/* ---- 配置单 ---- */
/* 行级状态点：pass 不给图标，满屏绿勾比满屏灰点更让人不信任 */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.dot.error { background: var(--dot-error); box-shadow: 0 0 0 3px rgba(240, 68, 56, .14); }
.dot.warn { background: var(--dot-warn); box-shadow: 0 0 0 3px rgba(247, 144, 9, .14); }
.dot.unknown { background: var(--dot-unknown); }
.verdict-error { color: var(--bad); font-weight: 600; }
.verdict-warn { color: var(--warn); font-weight: 600; }
.verdict-unknown { color: var(--muted); font-weight: 600; }

/* 页头：标题 + 总价，右侧对齐 */
.build-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; }
.build-title-main { min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* 标题本身就是输入框：平时看着像 h1，点进去才出现编辑态 */
.build-title-form { margin: 0 0 .45rem; max-width: 760px; }
.build-title-form input.build-title-input { display: block; width: 100%; max-width: 100%;
  margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink);
  font-family: var(--pico-font-family); font-size: 2rem; font-weight: 650; line-height: 1.2;
  letter-spacing: -.028em; height: auto; box-shadow: none; cursor: text; caret-color: var(--accent); }
.build-title-form input.build-title-input:hover { background: transparent;
  box-shadow: inset 0 -2px 0 var(--line-strong); }
.build-title-form input.build-title-input:focus { background: var(--surface); outline: none;
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--pico-primary-focus); }
.build-total { min-width: 170px; padding: 2px 0 2px 24px; border-left: 1px solid var(--line);
  text-align: right; }
.build-total-v { display: block; font-family: var(--mono); font-size: 1.5rem; font-weight: 600;
  line-height: 1.15; font-variant-numeric: tabular-nums; }
.build-total-d { display: block; margin-top: 3px; font-family: var(--mono); font-size: .66rem;
  color: var(--muted); }
.build-na { margin-top: 10px; }
.build-hint { margin-top: 10px; }
.build-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 6px 0 0; font-size: .78rem; }
.build-legend .dot { margin-left: 8px; }
.build-legend .dot:first-child { margin-left: 0; }

/* 结论条：图标 + 一句人话 + 计数，不再是技术词汇的堆叠 */
.verdictbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px;
  align-items: center; border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  background: var(--surface); border-radius: 12px; padding: 14px 18px; margin-top: 20px; }
.vicon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--inset); color: var(--muted); }
.vicon .ic { width: 20px; height: 20px; }
.vtext strong { display: block; font-size: .95rem; }
.vtext p { margin: 3px 0 0; font-size: .82rem; color: var(--muted); line-height: 1.55; }
.vcounts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.vc { font-family: var(--mono); font-size: .64rem; letter-spacing: .04em; padding: 4px 8px;
  border-radius: 6px; background: var(--inset); color: var(--muted); white-space: nowrap; }
.vc b { font-size: .86rem; color: var(--ink); margin-right: 2px; }
.vc.err b { color: var(--bad); }
.vc.warn b { color: var(--warn); }
.vc.unk b { color: var(--muted); }
.vc.rules { background: transparent; border: 1px solid var(--line); }
.verdictbar.error { border-left-color: var(--bad); background: #fdf5f4; }
.verdictbar.error .vicon { background: #fdecea; color: var(--bad); }
.verdictbar.warn { border-left-color: var(--dot-warn); background: #fffaf0; }
.verdictbar.warn .vicon { background: #fff1dc; color: var(--warn); }
.verdictbar.unknown { border-left-color: var(--dot-unknown); background: var(--inset); }
.verdictbar.unknown .vicon { background: var(--surface-2); color: var(--muted); }
.verdictbar.pass { border-left-color: var(--ok); background: #f2faf6; }
.verdictbar.pass .vicon { background: #e6f6ee; color: var(--ok); }

/* 槽位表：图标 + 名称，型号格里带明确的「参数」按钮 */
.buildtable { min-width: 780px; }
.buildtable td { vertical-align: middle; }
.buildtable th.cs-slot { width: 150px; }
.buildtable th.cs-qty { width: 84px; text-align: center; }
.buildtable th.cs-price { width: 120px; text-align: right; }
.priceqty { margin-left: 4px; font-family: var(--mono); font-size: .64rem; color: var(--muted); }
.buildtable th.cs-check { width: 34%; }
.buildtable td.cs-qty { text-align: center; }
.slotcell { white-space: nowrap; }
.slot-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--inset); color: var(--muted);
  vertical-align: middle; }
.slot-ic .ic { width: 15px; height: 15px; }
.slotname { vertical-align: middle; font-weight: 500; color: var(--ink); }
.reqtag { display: inline-block; margin-left: 7px; padding: 1px 5px; border-radius: 4px;
  border: 1px solid rgba(31, 94, 255, .28); background: var(--accent-soft); color: var(--accent);
  font-family: var(--mono); font-size: .56rem; letter-spacing: .06em; vertical-align: middle; }
tr.slot-empty .slotname { color: var(--muted); font-weight: 400; }
tr.slot-empty .slot-ic { background: transparent; border-style: dashed; }

.mcell { position: relative; cursor: text; min-width: 260px; outline: none; }
.mcell input { width: 100%; }
.mview { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px;
  vertical-align: middle; }
.mview .mname { font-weight: 500; color: var(--ink); }
.mview.empty { gap: 6px; padding: 5px 10px; border: 1px dashed var(--line-strong);
  background: var(--inset); color: var(--muted); font-size: .82rem; }
.mview.empty .ic { width: 13px; height: 13px; color: var(--accent); }
.mcell:hover .mview:not(.empty) { background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(31, 94, 255, .22); }
.mcell:hover .mview.empty { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* 键盘焦点：选完型号换页后还会回到这一格，再按上下键换槽位 */
.mcell:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px;
  background: var(--accent-soft); }
.mcell:focus .mview:not(.empty) { background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(31, 94, 255, .3); }
.mcell:focus .mview.empty { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.mwik { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--accent);
  font-size: .7rem; font-weight: 500; white-space: nowrap; }
.mwik .ic { width: 12px; height: 12px; }
.mwik:hover { background: var(--accent-soft); border-color: rgba(31, 94, 255, .4); text-decoration: none; }

.vcell { vertical-align: top; }
.vbadge { display: inline-flex; align-items: center; margin: 2px 0 4px; padding: 2px 7px;
  border-radius: 5px; font-family: var(--mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .04em; }
.vbadge.error { color: var(--bad); background: #fdecea; }
.vbadge.warn { color: var(--warn); background: #fff1dc; }
.vbadge.unknown { color: var(--muted); background: var(--inset); }
.vok { display: inline-flex; align-items: center; gap: 4px; color: var(--ok);
  font-family: var(--mono); font-size: .72rem; }
.vok .ic { width: 13px; height: 13px; }
.rowmsg { font-size: .78rem; line-height: 1.55; margin: 3px 0 0; color: var(--muted); }
.rowmsg.verdict-error { color: var(--bad); font-weight: 500; }
.rowmsg.verdict-warn { color: var(--warn); font-weight: 500; }
.rowmsg.verdict-unknown { color: var(--muted); font-weight: 500; }
.extras-empty { padding: 22px 16px !important; text-align: center; color: var(--muted); font-size: .84rem; }

/* 型号联想面板 */
#picklist { max-height: 260px; overflow-y: auto; margin: 8px 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(8, 14, 26, .16); }
#picklist:empty { display: none; }
.pickopt { padding: 9px 13px; cursor: pointer; font-size: .875rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.pickopt:last-child { border-bottom: 0; }
.pickopt:hover { background: var(--inset); }
#pickq { width: 340px; max-width: 70vw; }

/* Excel 式行内编辑：型号格即输入框，下拉贴着格子。
   fixed 而不是 absolute：.tablewrap 的 overflow-y:hidden 会把 absolute 浮层整块裁掉（实测槽位表
   最后一行的下拉 85px 全在裁剪线外，鼠标命中的是下面的 section-head）；键盘那条路因为
   scrollIntoView 把容器滚动了才看着正常。坐标由 build-view.html 的 placeCellDrop() 算。 */
.celldrop { position: fixed; z-index: 95; max-height: 240px;
  overflow-y: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 18px 36px rgba(8, 14, 26, .2); }
.celldrop .pickopt.remove { color: var(--bad); }
.celldrop .pickopt.on { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }

/* 添加配件：虚线整行按钮，比一个孤零零的文字链接好点 */
.addrowbtn { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 2px;
  padding: 12px 16px; border: 1px dashed var(--line-strong); border-radius: 10px;
  background: var(--surface); color: var(--muted); font-size: .85rem; text-align: left; }
.addrowbtn .ic { width: 15px; height: 15px; color: var(--accent); }
.addrowbtn small { margin-left: auto; color: var(--muted); font-size: .74rem; font-weight: 400; }
.addrowbtn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* 底部动作 */
.build-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.build-actions button { display: inline-flex; align-items: center; gap: 7px; }
.build-actions .ic { width: 15px; height: 15px; }
.build-actions .sub { margin-left: 4px; }

/* 删除配置单：危险动作单独一块，不跟保存/打印挤一行 */
.dangerzone { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; border: 1px solid #f3c4c0; background: #fdf5f4; border-radius: 12px;
  padding: 16px 18px; margin-top: 18px; }
.dangerzone .eyebrow { color: var(--bad); margin-bottom: 4px; }
.dangerzone button { margin: 0; }
.rowactions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 14px;
  white-space: nowrap; vertical-align: middle; }
.rowactions a, .rowactions .linkbtn { font-size: .84rem; line-height: 1.5; }
.rowactions .linkbtn { display: inline-flex; align-items: center; margin: 0; }
.actionscol { width: 150px; text-align: right; }

/* ---- 全站联想：导航里的搜索框 + 贴着它的下拉（见 layout.html） ---- */
form.searchbox { display: flex; gap: 10px; align-items: center; margin: 18px 0 4px; max-width: 680px; }
form.searchbox input[type=search] { flex: 1; max-width: 460px; margin-bottom: 0; height: 42px;
  background: var(--surface); font-size: .95rem; }
form.searchbox button { height: 42px; }
.newbuild { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.newbuild input[type=text] { flex: 0 1 320px; min-width: 220px; margin-bottom: 0; }
.newbuild button { display: inline-flex; align-items: center; gap: 6px; }
.newbuild button .ic { width: 14px; height: 14px; }
.build-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin: 0 0 2rem; }
.build-steps > div { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  font-size: .82rem; color: var(--muted); line-height: 1.5; }
.build-steps b { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em;
  color: var(--accent); margin-top: 2px; }
.build-empty { display: grid; justify-items: center; gap: 6px; padding: 30px; }
.empty-ic { width: 30px; height: 30px; color: var(--accent); stroke-width: 1.6; margin-bottom: 2px; }
a.badge:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }

/* ---- 分类页筛选条：选中态是"能再点一次取消"，所以带 ✕ ---- */
.facets { margin: 0; }
.facetline { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 8px 0;
  font-size: .85rem; }
.facetline:first-child { margin-top: 0; }
.facetline .fname { color: var(--muted); min-width: 5.5em; font-family: var(--mono);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.facetline a.chip { color: var(--ink); padding: 3px 11px; font-size: .8rem;
  border: 1px solid transparent; border-radius: 6px; background: var(--inset); }
.facetline a.chip:hover { background: var(--surface-2); text-decoration: none; }
.facetline a.chip.on { background: var(--accent); color: #fff; font-weight: 500; }
.facetline a.chip.on:hover { background: var(--accent-hi); color: #fff; text-decoration: none; }
.facetline .chip .fx { margin-left: 5px; font-size: .68rem; opacity: .75; }
.facetline .fclear { font-size: .76rem; color: var(--muted); margin-left: 2px; }
.facetline .fclear:hover { color: var(--bad); }

/* ---- 对比页：表头碳黑、参数名列吸附、缺值行标灰 ---- */
table.cmp { font-size: .875rem; min-width: 660px; }
table.cmp thead th { background: var(--carbon); color: var(--carbon-ink); border-bottom: 0;
  padding: 15px 16px; font-size: .82rem; letter-spacing: 0; text-transform: none; white-space: normal; }
table.cmp thead th.collabel { background: var(--carbon-2); color: var(--carbon-muted);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  vertical-align: bottom; }
table.cmp thead th a { color: #fff; font-weight: 600; }
table.cmp td { min-width: 132px; padding: 10px 16px; }
table.cmp th.collabel { width: 154px; min-width: 154px; background: var(--surface); font-weight: 500;
  color: var(--muted); font-size: .8rem; position: sticky; left: 0; z-index: 1;
  box-shadow: 1px 0 0 var(--line); }
table.cmp thead th.collabel { box-shadow: 1px 0 0 var(--carbon-line); }
.cmpsub { font-weight: 400; font-size: .72rem; color: var(--carbon-muted); margin-top: 5px;
  display: flex; gap: 10px; font-family: var(--mono); }
.cmpsub a { color: #9db8ff; }
.cmpsub a:hover { color: #fff; }
tr.grp th { background: var(--carbon); color: #c9d6ec; font-family: var(--mono);
  font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; padding: 8px 16px; }
tr.grp td { background: var(--carbon); }
tr.dim th, tr.dim td { color: var(--muted); }
tr.dim th.collabel { color: var(--muted); }
.cmpadd { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.cmpadd select { width: 300px; max-width: 70vw; }
table.cmp th.pickh, table.clist th.pickh, table.clist td:first-child { width: 44px; text-align: center; }
/* 勾选框的宽高是 Pico 定的（1.25em + 手绘对勾），别去碰 width：
 * appearance:none 之下 width:auto 会塌成两条边框的 2px。这里只管它在格子里的居中。 */
table.clist input[type=checkbox] { margin: 0; vertical-align: middle; }

/* ---- 订阅 Key 与对外 API：一次性明文与 curl 示例块 ---- */
.secretbox { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 12px 16px; margin: 0 0 16px; background: var(--surface); font-size: .875rem; }
.secretbox code { display: block; margin-top: 8px; padding: 9px 12px; background: var(--inset);
  border: 1px solid var(--line); border-radius: 8px; font-size: .85rem; word-break: break-all; }
pre.api { margin: 8px 0 16px; padding: 14px 16px; background: var(--carbon); color: #dbe6f8;
  border: 1px solid var(--carbon-line); border-radius: 12px; overflow-x: auto;
  font-size: .8rem; line-height: 1.65; white-space: pre; }
pre.api code { background: none; color: inherit; padding: 0; }
#opts td input[type=text] { width: 100%; }
#opts .ord { width: 3ch; color: var(--muted); text-align: right; }

/* ---- 空状态与页脚 ---- */
.empty { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 26px 22px;
  text-align: center; color: var(--muted); background: var(--surface); font-size: .88rem; }
.empty p { margin: 0 0 8px; }
.empty p:last-child { margin-bottom: 0; }
.error-page { max-width: 620px; margin: 3rem auto 0; padding: 46px 28px; }
.error-code { margin: 0 0 8px !important; font-family: var(--mono); font-size: 3.2rem; font-weight: 600;
  line-height: 1; color: var(--accent); letter-spacing: -.02em; }
.error-page h1 { margin: .2rem 0 .6rem; }
.error-page .hero-actions { justify-content: center; margin-top: 22px; }

.sitefoot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 3rem;
  font-size: .78rem; color: var(--muted); }
.foot-brand { margin: 0; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.foot-brand span { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  color: var(--muted); margin-left: 8px; font-weight: 400; }
.foot-note { margin: 0; }

/* ---- 滚动条：默认那条在浅灰底上太硬 ---- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #c6cfdc; border: 3px solid var(--bg); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #a9b5c6; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 26px; padding: 32px 28px; }
  .hero-stats { flex-direction: row; flex-wrap: wrap; gap: 26px; border-left: 0;
    border-top: 1px solid var(--carbon-line); padding: 20px 0 0; }
  .split { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body>main { padding: 1.5rem 1rem 3rem; }
  .nav-in { height: auto; flex-wrap: wrap; gap: 8px 12px; padding: 10px 1rem; }
  .navlinks { order: 3; flex: 1 0 100%; overflow-x: auto; padding-bottom: 2px; }
  .navlinks a { padding: 6px 9px; white-space: nowrap; }
  .navsearch { margin-left: auto; }
  .navsearch input[type=search] { width: 150px; max-width: 42vw; }
  .navdrop { min-width: 260px; }
  .brand-en { display: none; }
  .hero { padding: 26px 20px; border-radius: 14px; }
  .hero-actions a.btn { flex: 1 1 auto; justify-content: center; }
  .catgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .grid { grid-template-columns: 1fr; }
  .specpanel { padding: 4px 16px 6px; }
  .specrow { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
  .build-title { gap: 12px; }
  .build-title-main { flex: 1 1 0; min-width: 0; }
  .build-title-form { max-width: 100%; }
  .build-title-form input.build-title-input { font-size: 1.62rem; }
  .build-total { flex: 0 0 auto; min-width: 140px; border-left: 0; padding-left: 0;
    text-align: right; }
  .verdictbar { grid-template-columns: auto minmax(0, 1fr); }
  .vcounts { grid-column: 1 / -1; justify-content: flex-start; }
  .addrowbtn small { display: none; }
  .build-steps { grid-template-columns: 1fr; }
  .tablewrap { border-radius: 10px; }
  /* 窄屏把配置单表格改成卡片：检查结果是最重要的一列，不能藏在横向滚动后面 */
  .tablewrap.buildwrap { overflow: visible; border: 0; background: transparent; }
  .tablewrap table.buildtable { display: block; min-width: 0; overflow: visible; }
  .buildtable thead { display: none; }
  .buildtable tbody { display: block; }
  .buildtable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px; padding: 13px 14px; margin-bottom: 8px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 10px; }
  .buildtable td { display: block; padding: 0 !important; border: 0 !important; }
  .buildtable td.slotcell { grid-column: 1 / -1; }
  .buildtable td.mcell { grid-column: 1; min-width: 0; }
  .buildtable td.cs-qty { grid-column: 2; grid-row: 2; text-align: right; }
  .buildtable td.cs-qty::before { content: "数量 "; color: var(--muted); font-size: .68rem;
    font-family: var(--mono); }
  .buildtable td.cs-price { grid-column: 2; grid-row: 3; text-align: right; font-size: .76rem; }
  .buildtable td.cs-price::before { content: "小计 "; color: var(--muted); font-size: .64rem;
    font-family: var(--mono); }
  .buildtable td.vcell { grid-column: 1 / -1; margin-top: 7px; padding-top: 9px !important;
    border-top: 1px solid var(--line) !important; }
  .buildtable td.extras-empty { grid-column: 1 / -1; text-align: center; padding: 20px 10px !important; }
  table { display: block; overflow-x: auto; font-size: .82rem; }
  .tablewrap table { display: table; }
  h1 { --pico-font-size: 1.62rem; }
  .stat { flex-basis: 120px; padding: 12px 16px; }
}

/* 打印（配置单导出走 canvas，这里只管 Ctrl+P）：去掉深色块与交互元素 */
@media print {
  nav, form, .noprint, .sitenav, .adminnav, .hero-actions { display: none !important; }
  body.site { background: #fff; }
  body { background: #fff; }
  .hero, .panel-dark, pre.api { background: #fff !important; color: #000 !important;
    border: 1px solid #ccc; }
  .hero::before, .hero::after, .panel-dark::before { display: none; }
  .hero h1, .hero .lede, .hero-stats dd, .hero-stats dt { color: #000 !important; }
  .hero .lede, .hero-stats dt { color: #333 !important; }
  tbody tr:hover { background: none; }
  .gallery img:hover { box-shadow: none; }
}

/* 配置单专用 A4 单页打印。只作用于 body.build-view，不影响其他页面 Ctrl+P。
   现有打印规则会把所有 form 隐藏，标题输入框正好在 form 里，所以这里单独放出来，
   并把深色页头压成白底黑字、砍掉说明和操作区，优先保证一页装下。 */
.print-only { display: none; }

@media print {
  @page { size: A4 portrait; margin: 7mm 8mm; }

  body.build-view { background: #fff !important; color: #111 !important; font-size: 9pt; }
  body.build-view nav,
  body.build-view .sitefoot,
  body.build-view .noprint,
  body.build-view .build-actions,
  body.build-view .dangerzone,
  body.build-view .build-steps,
  body.build-view .section-head,
  body.build-view .addrowbtn,
  body.build-view .fx-progress { display: none !important; }
  body.build-view form { display: none !important; }
  body.build-view .build-title-form { display: none !important; }
  body.build-view .print-only { display: block !important; }
  body.build-view .print-title {
    display: block !important; margin: 0 !important; padding: 0 !important;
    color: #111 !important; font-size: 20pt !important; font-weight: 700 !important;
    line-height: 1.15 !important; letter-spacing: -.02em !important;
    overflow-wrap: anywhere !important; text-shadow: none !important;
  }
  body.build-view .pagehead h1 { text-shadow: none !important; }

  body.build-view main {
    max-width: none !important; width: 100% !important;
    margin: 0 !important; padding: 0 !important;
  }
  body.build-view section { margin: 0 !important; }

  body.build-view .print-brand {
    margin: 0 0 2mm; padding: 0 0 1.5mm;
    border-bottom: 1px solid #111;
    font-family: var(--mono); font-size: 7pt; letter-spacing: .12em; color: #555;
  }
  body.build-view .print-brand span { color: #111; font-weight: 700; }

  body.build-view .pagehead {
    padding: 0 0 2.5mm !important; margin: 0 0 2.5mm !important;
    border: 0 !important; border-bottom: 1.5px solid #111 !important;
    border-radius: 0 !important; background: #fff !important; color: #111 !important;
    box-shadow: none !important; overflow: visible !important; animation: none !important;
  }
  body.build-view .pagehead::before,
  body.build-view .pagehead::after { display: none !important; }
  body.build-view .pagehead .crumb,
  body.build-view .pagehead .eyebrow,
  body.build-view .pagehead .sub,
  body.build-view .pagehead .build-na,
  body.build-view .pagehead .build-hint,
  body.build-view .pagehead .build-legend,
  body.build-view .pagehead .head-actions { display: none !important; }

  body.build-view .build-title {
    display: flex !important; align-items: flex-end !important;
    gap: 6mm !important; margin: 0 !important; flex-wrap: nowrap !important;
  }
  body.build-view .build-title-main { flex: 1 1 auto !important; min-width: 0 !important; }
  body.build-view .build-title-form { margin: 0 !important; max-width: 100% !important; }
  body.build-view .build-title-form input.build-title-input {
    display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    box-shadow: none !important; color: #111 !important; -webkit-text-fill-color: #111 !important;
    font-family: var(--pico-font-family) !important; font-size: 20pt !important;
    font-weight: 700 !important; line-height: 1.1 !important; height: auto !important;
  }
  body.build-view .build-total {
    flex: 0 0 34mm !important; min-width: 34mm !important;
    padding: 0 0 0 4mm !important; border-left: 1px solid #bbb !important;
    text-align: right !important;
  }
  body.build-view .build-total .statk { display: block; font-size: 7pt; color: #555 !important; }
  body.build-view .build-total-v { display: block; margin-top: 1mm; font-size: 14pt; color: #111 !important; }
  body.build-view .build-total-d { display: block; margin-top: .5mm; font-size: 7pt; color: #555 !important; }

  body.build-view .verdictbar {
    margin: 2mm 0 0 !important; padding: 2mm 3mm !important;
    border: 1px solid #ccc !important; border-left: 3px solid #777 !important;
    border-radius: 1mm !important; background: #fff !important;
    box-shadow: none !important; gap: 2mm !important; break-inside: avoid;
  }
  body.build-view .vicon { width: 6mm; height: 6mm; border-radius: 1.5mm; }
  body.build-view .vicon .ic { width: 4mm; height: 4mm; }
  body.build-view .vtext strong { font-size: 9pt; }
  body.build-view .vtext p { font-size: 7.5pt; line-height: 1.35; }
  body.build-view .vcounts { gap: 1mm; }
  body.build-view .vc { font-size: 6.5pt; padding: 0.8mm 1.2mm; }
  body.build-view .vc b { font-size: 8pt; }
  body.build-view .msg { margin: 0 0 2mm; padding: 1.5mm 2mm; font-size: 7.5pt; }

  body.build-view .tablewrap {
    margin: 0 !important; border: 1px solid #bbb !important; border-radius: 1mm !important;
    box-shadow: none !important; overflow: visible !important; background: #fff !important;
  }
  body.build-view .buildtable {
    width: 100% !important; min-width: 0 !important; table-layout: fixed !important;
    margin: 0 !important; font-size: 7.5pt !important;
  }
  body.build-view .buildtable th,
  body.build-view .buildtable td {
    padding: 1.1mm 1.4mm !important; line-height: 1.3 !important;
    vertical-align: middle !important; color: #111 !important;
  }
  body.build-view .buildtable th {
    background: #f0f0f0 !important; color: #111 !important;
    font-size: 6.8pt !important; letter-spacing: .04em;
    border-bottom: 1px solid #999 !important;
  }
  body.build-view .buildtable th.cs-slot { width: 24mm !important; }
  body.build-view .buildtable th.cs-qty { width: 10mm !important; }
  body.build-view .buildtable th.cs-price { width: 19mm !important; }
  body.build-view .buildtable th.cs-check { width: auto !important; }
  body.build-view .buildtable tr { break-inside: avoid; page-break-inside: avoid; }
  body.build-view .slotcell { white-space: nowrap !important; }
  body.build-view .slot-ic {
    width: 4mm !important; height: 4mm !important; border: 0 !important;
    background: transparent !important; padding: 0 !important;
  }
  body.build-view .slot-ic .ic { width: 3.5mm !important; height: 3.5mm !important; }
  body.build-view .slotname { font-size: 7.5pt !important; font-weight: 600 !important; }
  body.build-view .reqtag { display: none !important; }
  body.build-view .mcell { padding-left: 1.4mm !important; }
  body.build-view .mview {
    display: block !important; padding: 0 !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  body.build-view .mname { font-size: 7.5pt !important; white-space: normal !important; }
  body.build-view .mwik { display: none !important; }
  body.build-view .qtyin {
    width: 8mm !important; padding: 0 !important; border: 0 !important;
    background: transparent !important; box-shadow: none !important;
    text-align: center !important; font-size: 7.5pt !important;
    -webkit-appearance: none !important; appearance: textfield !important;
  }
  body.build-view .priceqty { font-size: 6.5pt !important; }
  body.build-view .vcell { font-size: 7pt !important; }
  body.build-view .vbadge { padding: 0.5mm 1mm !important; font-size: 6.5pt !important; }
  body.build-view .rowmsg { margin: 0.4mm 0 0 !important; font-size: 6.8pt !important; line-height: 1.35 !important; }
  body.build-view .vok { font-size: 6.8pt !important; }
  body.build-view .extras-section.is-empty { display: none !important; }
  body.build-view .extras-empty { display: none !important; }
  body.build-view .print-section-title {
    margin: 3mm 0 1.5mm; padding-bottom: 1mm;
    border-bottom: 1px solid #bbb; font-size: 9pt; font-weight: 700;
  }
}

/* 关键：打印宽度可能落进 max-width:720px 的窄屏断点，配置单会被切成卡片布局，
   每张卡又 break-inside:avoid，于是第二页出现大块空白。打印时强制恢复表格布局。 */
@media print {
  body.build-view .tablewrap.buildwrap {
    display: block !important;
    border: 1px solid #bbb !important;
    border-radius: 1mm !important;
    background: #fff !important;
    overflow: visible !important;
  }
  body.build-view .buildtable {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }
  body.build-view .buildtable thead { display: table-header-group !important; }
  body.build-view .buildtable tbody { display: table-row-group !important; }
  body.build-view .buildtable tr {
    display: table-row !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  body.build-view .buildtable th,
  body.build-view .buildtable td {
    display: table-cell !important;
    float: none !important;
    margin: 0 !important;
    padding: 1.05mm 1.35mm !important;
    border: 0 !important;
    border-bottom: 1px solid #ddd !important;
    vertical-align: middle !important;
    color: #111 !important;
  }
  body.build-view .buildtable th { border-bottom: 1px solid #999 !important; }
  body.build-view .buildtable td.slotcell,
  body.build-view .buildtable td.mcell,
  body.build-view .buildtable td.cs-qty,
  body.build-view .buildtable td.cs-price,
  body.build-view .buildtable td.vcell {
    display: table-cell !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  body.build-view .buildtable td.cs-qty::before,
  body.build-view .buildtable td.cs-price::before {
    content: none !important;
    display: none !important;
  }
  body.build-view .buildtable td.vcell {
    margin-top: 0 !important;
    padding-top: 1.05mm !important;
    border-top: 0 !important;
  }
  body.build-view .buildtable td.extras-empty { display: none !important; }
}