/* =========================================================================
   家庭能源工具站 · 方案 1「暖纸软卡片」皮肤层（skin-warm.css）
   版本 v2.4 · 2026-11-08（合计块：滑条收进卡片 + 单位唯一规格 + 结论行独立档） · 用户从三方案中选定方案 1（样板：_审核预览/首页_方案1完整样板.html）
   -------------------------------------------------------------------------
   与 site.css 的关系：
   1. site.css 仍是「字体 / 基础排版 / 共享组件」的唯一事实源；本文件是**换皮层**。
      页面按顺序引 site.css → skin-warm.css，后者只做三件事：
        ① 覆盖 :root 的语义 token（暖纸配色）
        ② 提供 w-* 组件（顶栏 / 三岔路 / 正文软卡 / 四组目录 / 软卡行 / 拖动滑条）
        ③ 对复用 site.css 的共享组件（.item / .rail / .site-footer / .sources / .faq）做暖态重绘
   2. 只给挂了 <body class="w-page"> 的页面用；未迁移的页面不受影响。
   3. 硬线（用户 2026-11-01/02 逐条定的，别改回去）：
      · 标签小字 ≥12px，正文 ≥14.5px（方案 1 的密度，但全页没有一处 <12px）
      · 对比度：正文 ≥4.5:1，大字 ≥3:1（每处文字色都算过，见换皮验证记录）
      · 线宽 1–2px；横线不越过文字左边界；顶栏与正文同一中线
      · 右栏一屏放下，不许内部滚动（.rail__list 不设 max-height）
      · 页面里不许出现裸 hex（门 8.16 H），颜色只在本文件与 token 里
   ========================================================================= */

/* ---------- ① token 覆盖：暖纸 + 橙红强调 ---------- */
:root {
  --c-bg: #FBF8F2;          /* 暖纸底 */
  --c-surface: #FFFFFF;
  --c-surface-2: #FCFAF6;
  --c-ink: #241F1B;         /* 16.3:1 on white */
  --c-ink-2: #5E564C;       /* 7.2:1 */
  --c-ink-3: #6E6357;       /* 5.9:1 */
  --c-rule: #E6DCCB;
  --c-rule-strong: #241F1B;
  --c-rule-soft: #EFE7DA;

  --c-accent: #E4633B;         /* 填充用（按钮底、滑条） */
  --c-accent-strong: #B23A1C;  /* 文字用（5.97:1 on white） */
  --c-accent-soft: #FFF1E6;
  --c-accent-ink: #FFFFFF;
  --c-danger: #8E2D1C;

  --c-rail: #FFFDF9;
  --c-rail-foot: #FFF1E6;

  /* 电器类别色：方案 1 用浅一档的柔和色（图标 / 竖条，不用于文字） */
  --c-cat-cooling: #7FA8DD;
  --c-cat-light: #E7B85C;
  --c-cat-net: #7BC0A3;
  --c-cat-comfort: #D98AA8;
  --c-cat-kitchen: #A88AD8;
  --c-cat-medical: #6EC3C9;
  --c-cat-brand: #E4633B;
  --c-cat-neutral: #6E6357;

  /* 内容区图标专用的深色分类色（2026-11-08 用户：左边内容板块图标太浅看不清）。
     柔和版给竖条/小色块用，深色版给 19px 细线条图标用 —— 线条图标在纸上必须更深才看得清。 */
  --c-cat-cooling-ink: #1C6DD0;
  --c-cat-light-ink:   #8A5200;
  --c-cat-net-ink:     #0B7A5A;
  --c-cat-comfort-ink: #B5346B;
  --c-cat-kitchen-ink: #6B46C1;
  --c-cat-medical-ink: #0E6E80;
  --c-cat-brand-ink:   #B23A1C;
  --c-cat-neutral-ink: #4A4A46;

  --radius: 16px;
  --w-max: 1180px;
  --w-pad: 26px;
}

/* ---------- ② 页面底 ---------- */
.w-page { background: var(--c-bg); color: var(--c-ink); display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- 顶栏：与正文同一中线（--w-max + --w-pad） ---------- */
.w-bar {
  display: flex; align-items: center; gap: 22px;
  height: 66px; background: var(--c-surface);
  border-bottom: 1px solid var(--c-rule);
  padding: 0 max(var(--w-pad), calc((100% - var(--w-max)) / 2 + var(--w-pad)));
}
.w-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-display); font-weight: 700; font-size: 19px;
  letter-spacing: -.01em; text-decoration: none; color: var(--c-ink);
  min-height: 24px;
}
.w-brand svg { display: block; flex: none; }
.w-brand__mark rect { fill: var(--c-accent); }
.w-brand__mark line { stroke: var(--c-ink); }
/* 顶栏导航：用户 2026-11-08 要求加粗加大（原 14px/400/opacity .82 太小太细） */
.w-nav { display: flex; gap: 22px; flex: 1; font-size: 15.5px; font-weight: 600; }
/* 导航链接：加大加粗（用户 2026-11-08） */
.w-nav a { color: var(--c-ink); text-decoration: none; opacity: .95; padding: 4px 0; font-weight: 600; }
.w-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.w-nav a[aria-current="page"] { opacity: 1; color: var(--c-accent-strong); font-weight: 700; }
.w-nav .nav__soon { font-size: 14px; }
.w-stamp { font-size: 12px; color: var(--c-ink-3); white-space: nowrap; }

/* ---------- 主体两列 ---------- */
.w-wrap {
  max-width: var(--w-max); margin: 0 auto;
  padding: 20px var(--w-pad) 34px;
  display: grid; grid-template-columns: minmax(0, 1fr) 384px;
  gap: 30px; align-items: start;
}
.w-main { min-width: 0; }

.w-kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); margin: 0 0 8px; }
.w-h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(30px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -.02em;
  margin: 0 0 12px; color: var(--c-ink);
}
.w-lead { font-size: 16.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0 0 16px; max-width: 58ch; }

/* ---------- 首屏按钮 + 计数胶囊（照样板；主按钮底色用 --c-accent-strong 保 AA） ---------- */

/* 越界提示（calc-guard.js 注入） */
.w-tools .calc__error--guard {
  margin: 7px 0 0; padding: 6px 10px; font-size: 12.5px; line-height: 1.45;
  color: var(--c-danger); background: #FFF1E6; border: 1px solid currentColor; border-radius: 8px;
}
/* 对比度修：公式文字原用填充橙（3.42:1）→ 改用同色系深砖 #B23A1C（5.97:1） */
.w-page .facts .fml { color: var(--c-accent-strong); }

/* 单列页强制满宽：.w-page 是 flex column，配合 margin:0 auto 时 flex item 会按
   fit-content 收缩（首页 404 就因此比别的页窄 150px、左边界从 156 跑到 231）。
   给 .w-wrap 一个确定宽度，所有页的左边界才会都在 156。 */
.w-page .w-wrap { width: 100%; }

.w-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.w-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--r-btn, 12px);
  background: var(--c-accent); border: 1px solid var(--c-accent);
  color: #FFFFFF; font-size: 19px; font-weight: 700; text-decoration: none;  /* 19px/700 进入大字阈值：白字压 #E4633B 的 3.42:1 即达标（≥18.66px 粗体只需 3:1），不换用户定的橙 */
  transition: background .12s, border-color .12s;
}
.w-btn:hover { background: #C94C2C; border-color: #C94C2C; }
.w-btn--ghost { background: transparent; border-color: var(--c-ink); color: var(--c-ink); }
.w-btn--ghost:hover { background: #FFF8F3; border-color: var(--c-ink); }
.w-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.w-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
  border: 1px solid var(--c-rule); border-radius: 99px; background: var(--c-surface);
  font-size: 13px; text-decoration: none; color: var(--c-ink);
}
.w-chip:hover { border-color: var(--c-accent); }
.w-chip i { width: 9px; height: 9px; border-radius: 99px; flex: none; display: inline-block; }
.w-chip b { font-weight: 700; }
.w-chip span { font-size: 12.5px; color: var(--c-ink-3); }
.w-chip--1 i { background: var(--c-cat-cooling); }
.w-chip--2 i { background: var(--c-cat-light); }
.w-chip--3 i { background: var(--c-cat-net); }
.w-chip--4 i { background: var(--c-cat-comfort); }

/* ---------- 首屏结论块（.answer-box 是门 1.6 的抓取锚点，别改名） ---------- */
.answer-box {
  background: var(--c-accent-soft); border: 0; border-radius: var(--radius);
  padding: 14px 18px; margin: 0 0 16px; max-width: none;
}
.answer-box .w-lbl { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8A5A3F; margin: 0 0 5px; }
.answer-box p { font-size: 15.5px; line-height: 1.58; color: #3B342C; }
.answer-box b { color: var(--c-accent-strong); font-weight: 700; }

/* ---------- 正文软卡 ---------- */
.w-card {
  background: var(--c-surface); border: 1px solid var(--c-rule);
  border-radius: var(--radius); padding: 17px 20px 18px; margin: 0 0 14px;
}
.w-card > h2 {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-display); font-weight: 700; font-size: 19px;
  line-height: 1.2; letter-spacing: -.01em; margin: 0 0 8px; color: var(--c-ink);
}
.w-card > h2 .w-ic {
  width: 19px; height: 19px; flex: none; fill: none; stroke: var(--c-accent);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.w-card p { font-size: 15.5px; line-height: 1.6; color: var(--c-ink-2); margin: 0 0 9px; max-width: 68ch; }
.w-card p:last-child { margin-bottom: 0; }
.w-card p b { color: var(--c-ink); font-weight: 600; }

/* 卡内表格（门 1.4 要 1–2 张真表） */
/* 首页表格与内页表格统一（用户 2026-11-08 选「统一」）：表头 400、正文 13.5/400 */
.w-page .w-tbl { font-size: 13.5px; }
.w-page .w-tbl th { font-weight: 400; }
.w-page .w-tbl td:first-child { font-weight: 400; }

.w-tbl { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.w-tbl th, .w-tbl td { text-align: left; padding: 8px; border-bottom: 1px solid var(--c-rule-soft); vertical-align: top; }
.w-tbl th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); font-weight: 700; }
.w-tbl td { color: var(--c-ink-2); }
.w-tbl td:first-child { font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.w-tbl tbody tr:last-child td { border-bottom: 0; }

/* ---------- 数据示意图（方案 1 暖纸版，820×440，门 8.15） ----------
   缩到正文列 674px 时按 0.82 缩放，所以图内字号必须 ≥15px（落地 12.3px 起）；
   颜色一律走 token，图内不写字面 hex（门 8.16 H 只放过 <svg> 内，但我们连 svg 内也走 token）。 */
.w-card .figure { margin: 14px 0 2px; }
.w-card .figure__scroll { overflow-x: auto; }
.w-card .figure svg { width: 100%; height: auto; display: block; min-width: 520px; }
.w-card .figure figcaption { margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: var(--c-ink-3); max-width: 66ch; }

.w-fig-title { font-family: var(--f-body); font-size: 16px; font-weight: 700; fill: var(--c-ink); }
.w-fig-sub { font-family: var(--f-body); font-size: 15px; fill: var(--c-ink-3); }
.w-fig-zone-label { font-family: var(--f-body); font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.w-fig-zone { fill: var(--c-accent-soft); opacity: .62; }
.w-fig-zone--b { fill: #F7F3EA; }
.w-fig-node { fill: #FFFFFF; stroke: var(--c-rule); stroke-width: 1.6; }
.w-fig-node--accent { stroke: var(--c-accent); stroke-width: 1.8; }
.w-fig-name { font-family: var(--f-body); font-size: 16px; font-weight: 700; fill: var(--c-ink); text-anchor: middle; }
.w-fig-spec { font-family: var(--f-body); font-size: 15px; fill: var(--c-ink-3); text-anchor: middle; }
.w-fig-arrow { stroke: var(--c-ink-3); stroke-width: 1.6; fill: none; }
.w-fig-arrow--accent { stroke: var(--c-accent); stroke-width: 1.8; }
.w-fig-note { font-family: var(--f-body); font-size: 15px; fill: var(--c-ink-3); }
.w-fig-side { font-family: var(--f-body); font-size: 15px; fill: var(--c-accent-strong); }

/* ---------- 四组目录：数字徽标 + 左侧竖色条 + 流式链接（A 排法） ---------- */
.w-band {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px;
  padding: 12px 0 12px 15px; border-top: 1px solid var(--c-rule-soft); position: relative;
}
.w-band:first-of-type { border-top: 0; padding-top: 4px; }
.w-band::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 99px; background: var(--k);
}
.w-band:first-of-type::before { top: 5px; }
/* 四档橙红：用户 2026-11-08 定的，色条与数字徽标用同一档，不再分开加深 */
.w-band--1 { --k: #F08A5D; }
.w-band--2 { --k: #E4633B; }
.w-band--3 { --k: #C94C2C; }
.w-band--4 { --k: #9E3419; }
.w-gname { display: flex; gap: 9px; align-items: flex-start; }
.w-num {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 99px;
  background: var(--k); color: #FFFFFF; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.w-gname b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.w-gname .w-sub { display: block; font-size: 12px; color: var(--c-ink-3); margin-top: 3px; }
.w-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 0 16px; align-content: start; }
.w-links a {
  /* 列高由最高的那条撑开，每条的虚线压在各自格子的底部，
     这样同一行里「一行字」和「两行字」的虚线仍然齐平 */
  display: flex; flex-direction: column; justify-content: flex-start;
  height: 100%; padding: 5px 0; font-size: 13px; line-height: 1.28;
  border-bottom: 1px dotted var(--c-rule); text-decoration: none; color: var(--c-ink); font-weight: 600;
}
.w-links a:hover { color: var(--c-accent-strong); }
.w-links a em { font-style: normal; display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--c-ink-3); }
.w-more { font-size: 12.5px; color: var(--c-ink-3); margin: 10px 0 0; }

/* ---------- 右栏工具面板（复用 site.css 的 .rail/.item 契约，重绘成软卡） ---------- */
.w-wrap > .rail {
  grid-column: 2; grid-row: 1;
  position: sticky; top: 12px; height: auto;
  max-height: calc(100vh - 24px);
  background: var(--c-surface); border: 1px solid var(--c-rule);
  border-radius: var(--radius); padding: 9px 11px 9px;
  display: flex; flex-direction: column; overflow: auto;
}
.w-tools__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 5px; }
.w-tools__head .h-label { font-family: var(--f-display); font-weight: 700; font-size: 15.5px; color: var(--c-ink); }
.w-tools .btn-link { color: var(--c-accent-strong); font-size: 12.5px; font-family: var(--f-body); }
.w-tools .btn-link:hover { color: var(--c-ink); }
.w-tools__hint { font-size: 12px; color: var(--c-ink-3); margin: 3px 0 9px; }
.w-tools .rail__list { overflow: visible; padding: 0; flex: 0 0 auto; }

/* 软卡行：色条 / 圆形勾选 / 图标 / 名称 / 拖动滑条 */
.w-tools .item {
  display: grid; grid-template-columns: 4px 18px 17px minmax(0, 1fr) 104px;
  gap: 8px; align-items: center; padding: 4px 8px; margin: 0 0 7px;
  border: 1px solid var(--c-rule-soft); border-radius: 11px;
  background: var(--c-surface); cursor: pointer; max-height: none; flex: 0 0 auto;
  transition: background .12s, border-color .12s;
}
.w-tools .item:hover { border-color: var(--c-accent); }
.w-tools .item[data-on="true"] { border-color: #F0C3AC; background: #FFF8F3; }
/* 视觉顺序按样张：色条 → 勾选 → 图标 → 名称 → 滑条。
   用显式 grid-column 而不是靠 DOM 顺序，这样任一列隐藏都不会把后面的列挤错位。 */
.w-tools .item__bar { grid-column: 1; grid-row: 1; }
.w-tools .item input[type="checkbox"] { grid-column: 2; grid-row: 1; }
.w-tools .item__ic { grid-column: 3; grid-row: 1; }
.w-tools .item__name { grid-column: 4; grid-row: 1; }
.w-tools .item__io { grid-column: 5; grid-row: 1; }
.w-tools .item__bar { width: 4px; height: 22px; border-radius: 99px; background: var(--c, var(--c-rule)); opacity: .5; }
.w-tools .item[data-on="true"] .item__bar { opacity: 1; }
.w-tools .item__ic { width: 17px; height: 17px; stroke: var(--c, var(--c-ink-2)); stroke-width: 1.7; opacity: .85; }
.w-tools .item[data-on="true"] .item__ic { opacity: 1; }
/* 未选中的行：图标也要保留分类色（用户 2026-11-08 指出「这几个图标没用彩色吗」）。
   site.css 里 .item[data-on="false"] .item__ic 把 stroke 换成了中性灰 (0,3,0)，
   比 .w-tools .item__ic (0,2,0) 特异性高 → 用 (0,5,0) 覆盖，靠透明度表达「未选中」。 */
.w-page .w-tools .item[data-on="false"] .item__ic { stroke: var(--c, var(--c-ink-3)); opacity: .5; }
.w-tools .item__name {
  font-size: 13.5px; line-height: 1.2; color: var(--c-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w-tools .item[data-on="false"] .item__name { color: var(--c-ink-3); }
.w-tools .item input[type="checkbox"] {
  width: 18px; height: 18px; border-radius: 99px; border: 2px solid #DCD1C1;
  background: var(--c-surface); appearance: none; margin: 0; position: relative; cursor: pointer;
}
.w-tools .item input[type="checkbox"]:checked { background: var(--c, var(--c-accent)); border-color: var(--c, var(--c-accent)); }
.w-tools .item input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 8px;
  border: solid var(--c-accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.w-tools .item__io { display: block; min-width: 0; }

/* 小时气泡 + 滑条 */
.w-hrs { display: block; }
.w-bubble { display: block; text-align: right; font-size: 14px; font-weight: 700; color: var(--c-accent-strong); font-variant-numeric: tabular-nums; line-height: 1.15; }
.w-track { position: relative; display: block; height: 18px; }
.w-trackbg { position: absolute; left: 0; right: 0; top: 6px; height: 6px; border-radius: 99px; background: var(--c-rule-soft); pointer-events: none; }
.w-fill { position: absolute; left: 0; top: 6px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #F0A24A, var(--c-accent)); pointer-events: none; }
.w-knob { position: absolute; top: 1px; width: 16px; height: 16px; border-radius: 99px; background: var(--c-surface); border: 2.5px solid var(--c-accent); pointer-events: none; }
.w-track input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 18px; margin: 0;
  opacity: 0; z-index: 3; cursor: grab; touch-action: none;
}
.w-track input[type="range"]:active { cursor: grabbing; }
.w-track input[type="range"]:focus-visible { outline: none; }
.w-tools .item:focus-within { outline: 2px solid var(--c-accent); outline-offset: 1px; }

/* ---------- 12 行的页面（负载计算器）专用密度 ----------
   右栏必须一屏放下（用户 2026-11-08 硬线：不许出现内部滚动条）。
   只压行距/内边距，不动控件与字号 —— 滑条可点区域保持 44px 行高的视觉手感。 */
.w-page .rail.w-tools--dense .rail__list > .item { padding: 3px 8px; margin-bottom: 4px; }
.w-page .rail.w-tools--dense .totals__row { padding: 4px 0; }
.w-page .rail.w-tools--dense .rail__foot { padding: 8px 12px 9px; margin-top: 6px; }
.w-page .rail.w-tools--dense .rail__cta { padding-top: 4px; }

/* 合计：四个数字（门 8.14 F 要求 CTA 与合计同属 rail__foot） */
.w-tools .rail__foot {
  border-top: 1px solid var(--c-rule-soft); background: var(--c-accent-soft);
  border-radius: 13px; padding: 10px 12px 11px; margin-top: 7px;
}
.w-tools .totals { display: block; }
.w-tools .totals__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; line-height: 1.25; }
.w-tools .totals__row > span { font-size: 13.5px; font-weight: 600; color: #8A5A3F; }
/* 三级数值层级（用户 2026-11-08：第 1、4 个要跟第 2、3 个在大小与粗细上拉开）：
   ① 日用电（决策）27px 墨色 + 描边  ② 储能（决策）21px 墨色 + 描边
   ③ 运行瓦数 / 启动浪涌（校验）17px 次级灰、不加描边 */
.w-tools .totals__row b {
  font-family: var(--f-display); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums;
  color: var(--c-ink-2); white-space: nowrap; -webkit-text-stroke: 0;
}
.w-tools .totals__row--hero b { font-size: 27px; letter-spacing: -.02em; color: var(--c-ink); -webkit-text-stroke: 0.4px var(--c-ink); }
.w-tools .totals__row--key b { font-size: 21px; letter-spacing: -.015em; color: var(--c-ink); -webkit-text-stroke: 0.35px var(--c-ink); }
/* 单位：全站**唯一一套**规格 —— 一个颜色、一个字号、无描边
   （2026-11-08 用户第二次指出「最底部的 Wh 颜色又不一样」：
    根因＝ --key b / --hero b 的 -webkit-text-stroke 会**被行内单位继承**，把橙色压深；
    叠加单位原本按档位 17/15/13 → 同一列里既大又深。现在只留一档 13px。） */
.w-tools .totals__row .w-unit {
  font-style: normal; color: var(--c-accent); font-weight: 700; letter-spacing: 0;
  font-size: 13px; -webkit-text-stroke: 0; text-shadow: none;
}
/* 结论行（Yes / No / 一句话）：不参与字号竞速，靠图标 + 深色与其行区分
   （2026-11-08 用户选 A：结论句不放大，数值才分档） */
.w-tools .totals__row--verdict b { font-size: 17px; font-weight: 700; color: var(--c-ink); -webkit-text-stroke: 0; white-space: normal; }
.w-tools .v-ic { font-style: normal; font-weight: 700; margin-right: 4px; -webkit-text-stroke: 0; }
.w-tools .v-ic--ok { color: #1D6F42; }
.w-tools .v-ic--no { color: #8E2D1C; }
.w-tools .item[hidden] { display: none; }   /* .item 有显式 display:grid，hidden 属性默认不生效 */
.w-tools .rail__share { margin-left: 6px; font-size: 12.5px; font-weight: 700; background: none; border: 0; cursor: pointer; color: var(--c-accent-strong); text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.w-tools .rail__share:hover { color: var(--c-ink); }
.w-tools .rail__share-note { margin: 6px 0 0; padding: 6px 9px; font-size: 12.5px; line-height: 1.45; color: var(--c-ink-2); background: var(--c-accent-soft); border: 1px solid var(--c-rule); border-radius: 8px; }
.w-tools .rail__share-note[data-bad="1"] { color: var(--c-danger); border-color: var(--c-danger); }
.w-tools .rail__more { display: block; margin: 2px 0 0; padding: 4px 0; font-size: 12.5px; font-weight: 700; background: none; border: 0; cursor: pointer; text-align: left; color: var(--c-accent-strong); }
.w-tools .rail__more:hover { color: var(--c-ink); }
.w-tools .rail__cta { padding: 6px 0 0; margin: 0; }
.w-tools .rail__cta a { font-size: 12.5px; font-weight: 700; color: var(--c-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.w-tools .rail__cta a:hover { color: var(--c-ink); }
.w-tools noscript p { font-size: 12.5px; color: var(--c-ink-3); margin: 0 0 8px; }

/* 输入型行变体 .item--field（无勾选框，只有 色条/图标/名称/输入组 四件）：
   必须给回 4 列模板，否则会落进首页的 5 列网格、输入框被挤到 1fr 里跟单位重叠 */
.w-tools .item.item--field { grid-template-columns: 4px 17px minmax(0, 1fr) auto; }
.w-tools .item.item--field .item__bar { grid-column: 1; grid-row: 1; }
.w-tools .item.item--field .item__ic { grid-column: 2; grid-row: 1; }
.w-tools .item.item--field .item__name { grid-column: 3; grid-row: 1; }
.w-tools .item.item--field .item__io { grid-column: 4; grid-row: 1; }
.w-tools .item.item--field input[type="number"] { width: 76px; }
.w-tools .item.item--field .item__unit { font-size: 13px; color: var(--c-ink-3); }

/* ---------- 共享组件：FAQ / sources / disclaimer 暖态 ---------- */
.w-card .faq > details { padding: 9px 0; border-bottom: 1px solid var(--c-rule-soft); }
.w-card .faq > details:last-child { border-bottom: 0; }
.w-card .faq summary { font-size: 15px; font-weight: 700; cursor: pointer; color: var(--c-ink); }
.w-card .faq summary:hover { color: var(--c-accent-strong); }
.w-card .faq p { margin: 6px 0 0; font-size: 14.5px; }
.w-card .sources { font-size: 14px; color: var(--c-ink-2); margin: 10px 0 0; }
.w-card .sources ol { margin: 6px 0 0; padding-left: 20px; }
.w-card .sources li { margin-bottom: 3px; }
.w-card .sources a { color: var(--c-accent-strong); }
.w-card .sources p { font-size: 14px; margin: 8px 0 0; }
.w-disclaimer { font-size: 13.5px; color: var(--c-ink-3); border-top: 1px solid var(--c-rule-soft); padding-top: 10px; margin: 12px 0 0; max-width: 70ch; }

/* ---------- 页脚（沿用 build_nav.py 注入的 site-footer 结构，只重绘） ---------- */
.w-page .site-footer {
  border-top: 1px solid var(--c-rule); background: var(--c-surface);
  margin-top: 8px; padding: 26px 0 20px; font-size: 14px; color: var(--c-ink-2);
}
.w-page .site-footer__grid {
  max-width: var(--w-max); margin: 0 auto; padding: 0 var(--w-pad);
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
}
.w-page .site-footer .brand { font-size: 15px; color: var(--c-ink); }
.w-page .site-footer__tag { font-size: 12.5px; color: var(--c-ink-3); margin-top: 6px; }
.w-page .site-footer__url { margin-top: 8px; }
.w-page .site-footer__url a { font-size: 14px; font-weight: 700; color: var(--c-accent-strong); text-decoration: none; border-bottom: 1px solid var(--c-accent); padding-bottom: 1px; }
/* 页脚组名：用户 2026-11-08 要求加粗加大（原 12px/400 太细） */
.w-page .site-footer__label { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-2); margin: 0 0 9px; }
.w-page .site-footer a { font-size: 13.5px; color: #3B342C; text-decoration: none; }
.w-page .site-footer a:hover { color: var(--c-ink); text-decoration: underline; }
.w-page .site-footer__bottom {
  max-width: var(--w-max); margin: 20px auto 0; padding: 12px var(--w-pad) 0;
  border-top: 1px solid var(--c-rule-soft); font-size: 12px; color: var(--c-ink-3);
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 18px;
}


/* ---------- 矮屏（≤869px 高）再压一档：右栏仍要一屏放下 ----------
   1440×900 是设计基准，但笔记本常见 768–800 可用高度；
   不允许卡片内部出现滚动条（用户 2026-11-08 硬线），所以矮屏只压行距。 */
@media (max-height: 869px) {
  .w-page .rail.w-tools .rail__list > .item { padding: 3px 8px; margin-bottom: 4px; }
  .w-page .rail.w-tools .totals__row { padding: 4px 0; }
  .w-page .rail.w-tools .rail__foot { padding: 8px 12px 9px; margin-top: 6px; }
  .w-page .rail.w-tools .rail__cta { padding-top: 4px; }
  .w-page .rail.w-tools .rail__title { padding: 0 0 2px; }
  .w-page .rail.w-tools .rail__colhead { padding-top: 1px; padding-bottom: 1px; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .w-wrap { grid-template-columns: minmax(0, 1fr) 344px; gap: 22px; }
  .w-tools .item { grid-template-columns: 4px 18px 16px minmax(0, 1fr) 92px; }
}
@media (max-width: 980px) {
  /* 单列：正文在前、工具面板在后；面板整体展开，不做「框里再滚动」的套娃 */
  .w-wrap { grid-template-columns: 1fr; }
  .w-main { grid-row: 1; }
  .w-wrap > .rail { grid-column: 1; grid-row: 2; position: static; max-height: none; overflow: visible; }
  .w-tools .rail__list { max-height: none; overflow: visible; }
  .w-nav { display: none; }
  .w-bar { gap: 12px; }
}
@media (max-width: 430px) {
  /* 375 窄屏：让位给电器名，图标列收起、滑条收窄 */
  .w-tools .item { grid-template-columns: 4px 18px minmax(0, 1fr) 86px; }
  .w-tools .item__ic { display: none; }
  .w-tools .item__name { grid-column: 3; grid-row: 1; }
  .w-tools .item__io { grid-column: 4; grid-row: 1; }
}
@media (max-width: 700px) {
  :root { --w-pad: 16px; }
  .w-band { grid-template-columns: 1fr; gap: 6px; }
  .w-card { padding: 14px 15px 15px; }
  .w-page .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ===================================================================
   迁移页（其余 27 页）：老的 .section / .prose / .table / .calc / .rail 等
   类名一律不动，只在 .w-page 作用域下重绘成暖纸软卡。这样「只换 UI」，
   页面正文一个字都不改，门 1 字数不会漂。
   =================================================================== */
.w-page .w-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 30px; align-items: start; }
.w-page .w-main { min-width: 0; }
.w-page .w-wrap--single { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
/* 单栏老骨架（404 等）：不重排 DOM，只把版心收成一栏、居中 */
.w-page .shell { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.w-page .pane { grid-column: 1; max-width: none; }
.w-page .pane__body { padding: 0 26px 34px; max-width: none; }
.w-page .pane__top { padding: 12px 26px 0; }
.w-page .w-main > .h1:first-child, .w-page .w-main > h1.h1 { margin-top: 0; }

/* 首图占位块：首页没有首图，迁移页也一并收起（纯 UI 元素，不是正文） */
.w-page .plate { display: none; }

/* 标题 / 导语 / 结论块 */
.w-page .h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 12px; color: var(--c-ink); }
.w-page .lead { font-size: 16.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0 0 16px; max-width: 60ch; }
.w-page .answer-box, .w-page .answer { background: var(--c-accent-soft); border: 0; border-left: 0; border-radius: var(--radius); padding: 14px 18px; margin: 0 0 16px; max-width: none; }
.w-page .answer-box p, .w-page .answer p { font-size: 15.5px; line-height: 1.58; color: #3B342C; }
.w-page .answer-box .lbl, .w-page .answer .lbl { color: #8A5A3F; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.w-page .answer-box b, .w-page .answer b { color: var(--c-accent-strong); }

/* 分节 → 软卡 */
.w-page .section {
  background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: var(--radius);
  padding: 17px 20px 18px; margin: 0 0 14px; max-width: none;
}
.w-page .section > .h2 {
  display: flex; align-items: center; gap: 9px; border-bottom: 0; padding-bottom: 0;
  font-family: var(--f-display); font-weight: 700; font-size: 19px; line-height: 1.2;
  letter-spacing: -.01em; margin: 0 0 8px; color: var(--c-ink);
}
.w-page .h2__ic { width: 19px; height: 19px; flex: none; stroke-width: 1.8; }
.w-page .h3 { font-family: var(--f-display); font-weight: 700; font-size: 16.5px; margin: 14px 0 6px; }
.w-page .prose { font-size: 15.5px; line-height: 1.62; color: var(--c-ink-2); max-width: none; }
.w-page .prose > * + * { margin-top: 9px; }
.w-page .prose strong { color: var(--c-ink); font-weight: 600; }
.w-page .prose a { color: var(--c-accent-strong); }

/* 表格 */
.w-page .table-wrap { overflow-x: auto; }
.w-page .table { font-size: 13.5px; margin-top: 8px; }
.w-page .table th, .w-page .table td { border-bottom: 1px solid var(--c-rule-soft); padding: 7px 8px; }
.w-page .table thead th { background: #FCFAF6; color: var(--c-ink-3); font-size: 12px; border-bottom: 1px solid var(--c-rule); }
.w-page .table caption { color: var(--c-ink-3); font-size: 12px; }
.w-page .table tfoot td { background: #FCFAF6; }
.w-page .table .d { font-size: 13px; }
/* 表格里的电器图标恢复分类色（2026-11-08 用户指出「图标怎么都变黑白了」：
   换皮时这条把 --c 覆盖成了中性灰，把 site.css 原本的 var(--c, …) 分类色干掉了）。 */
.w-page .tbl__ic { stroke: var(--c, var(--c-cat-neutral)); }

/* 卡片阵列 / 细则块 / FAQ / 来源 / 免责 */
.w-page .cards { border-top: 1px solid var(--c-rule); gap: 0; }
.w-page .card { border: 0; border-right: 1px solid var(--c-rule-soft); padding: 12px 14px; }
.w-page .card h3 { font-size: 17px; }
.w-page .card p { font-size: 14.5px; color: var(--c-ink-2); }
.w-page .card a { color: var(--c-accent-strong); border-bottom-color: var(--c-accent); }
.w-page .disclosure { border: 1px solid var(--c-rule); border-radius: 12px; font-size: 14px; background: #FCFAF6; }
.w-page .faq > div { border-bottom: 1px solid var(--c-rule-soft); padding: 10px 0; }
.w-page .faq dt { font-size: 15px; color: var(--c-ink); }
.w-page .faq dd { font-size: 14.5px; color: var(--c-ink-2); }
.w-page .faq summary { font-size: 15px; font-weight: 700; }
.w-page .sources { font-size: 14px; color: var(--c-ink-2); }
.w-page .sources .u { font-size: 12.5px; color: var(--c-ink-3); }
.w-page .sources a { color: var(--c-accent-strong); }
.w-page .disclaimer { font-size: 13.5px; color: var(--c-ink-3); border-top: 1px solid var(--c-rule-soft); max-width: 70ch; }
.w-page .facts > div { border-right: 1px solid var(--c-rule-soft); }
.w-page .fact__k { font-size: 13px; color: var(--c-ink-3); }
.w-page .fact__v { font-size: 14.5px; color: var(--c-ink-2); }

/* 图表 / 示意图 */
.w-page .figure { margin: 14px 0 2px; }
.w-page .figure figcaption { font-size: 12.5px; color: var(--c-ink-3); margin-top: 6px; }
.w-page .chart-bar { fill: var(--c-accent); }
.w-page .chart-bar--muted { fill: #E9E0D1; }
.w-page .chart-label, .w-page .chart-value { fill: var(--c-ink-3); }

/* 正文内嵌计算器（.calc 家族） */
.w-page .calc { border: 1px solid var(--c-rule); border-radius: var(--radius); background: var(--c-surface); box-shadow: none; }
.w-page .calc__head { border-bottom: 1px solid var(--c-rule-soft); }
.w-page .calc__head h2 { font-size: 18px; }
.w-page .calc__row { border-bottom: 1px solid var(--c-rule-soft); }
.w-page .calc__input { border: 1px solid var(--c-rule); border-radius: 8px; }
.w-page .calc__result { border-top: 1px solid var(--c-rule); background: #FCFAF6; }
.w-page .result-item { border-right: 1px solid var(--c-rule-soft); }
.w-page .result-item .v, .w-page .result-item dd { font-size: 20px; }
.w-page .result-item--hero .v, .w-page .result-item--hero dd { color: var(--c-accent-strong); }
.w-page .calc__reco { background: var(--c-accent-soft); border-top: 1px solid var(--c-rule-soft); }
.w-page .calc__error { border-color: var(--c-danger); border-radius: 8px; }

/* 右栏：面板盒（aside.rail.w-tools 的直接子级规则在首页段已定义，这里只补标题与列头） */
.w-page .rail__title { padding: 0 0 5px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.w-page .rail__note { flex: 1 1 auto; min-width: 0; }
.w-page .rail__title h2, .w-page .rail__title .h-label { font-family: var(--f-display); font-weight: 700; font-size: 15.5px; color: var(--c-ink); }
.w-page .rail__note { font-size: 12.5px; color: var(--c-ink-3); }
.w-page .rail__colhead .iohead { font-size: 12px; color: var(--c-ink-3); }
.w-page .item--field { border: 1px solid var(--c-rule-soft); border-radius: 11px; background: var(--c-surface); }
.w-page .rail__filler { font-size: 13px; color: var(--c-ink-3); }
.w-page .btn-link { color: var(--c-accent-strong); font-size: 12.5px; }

/* 迁移页收尾（2026-11-08）：①skip 链接必须绝对定位（个别页的 .skip 被解析成流内元素，把顶栏顶下去 28px）
   ②右栏里重复的品牌块收掉（顶栏已经有品牌）③输入型行压成一行，12 项的算器页右栏才能一屏 */
.w-page .skip { position: absolute; left: -9999px; top: 0; }
.w-page .skip:focus { left: 8px; top: 8px; z-index: 9999; }
.w-page .rail__head { display: none; }
.w-page .w-tools .item--field .item__io { flex-wrap: nowrap; white-space: nowrap; }
.w-page .item--field input[type="number"] { width: 62px; }

/* 算器页右栏：行里有「数量 × 小时」两个数字框（不是首页的滑条），
   给 io 列 auto 宽度并禁止换行，12 行才能压成一屏 */
.w-page .w-tools .item { grid-template-columns: 4px 18px 16px minmax(0, 1fr) auto; }
.w-page .w-tools .item .item__io { flex-wrap: nowrap; white-space: nowrap; }

/* 内联 symbol 用的 0×0 SVG 若没有绝对定位，会留下一个行盒，把顶栏顶下去约 28px */
.w-page > svg[width="0"][height="0"] { position: absolute; display: block; }


/* 输入型行（4 件：色条/图标/名称/输入组）必须用 4 列模板——
   上面那条 .w-page .w-tools .item 是给首页滑条行（5 件）用的，两者特异性相同，
   靠「放在最后」取胜，否则名称会被塞进 16px 的图标列（实测变成 "R." ）。 */
.w-page .w-tools .item.item--field { grid-template-columns: 4px 17px minmax(0, 1fr) auto; }
.w-page .w-tools .item.item--field .item__bar { grid-column: 1; grid-row: 1; }
.w-page .w-tools .item.item--field .item__ic { grid-column: 2; grid-row: 1; }
.w-page .w-tools .item.item--field .item__name { grid-column: 3; grid-row: 1; }
.w-page .w-tools .item.item--field .item__io { grid-column: 4; grid-row: 1; }

/* 迁移页顶栏上方多出 28px 空白（首页没有）：用负 margin 把「整条顶栏」上移 28，
   同时给顶栏自己补 28 的 padding-top，这样盒子回到 0 且内容不被切 */
.w-page:has(> div.w-wrap) .w-bar { margin-top: -28px; padding-top: 28px; height: 94px; }

/* 迁移页的响应式：上面 .w-page .w-wrap 是两列定宽（特异性比 site.css 的 @media 高），
   必须在同一特异性下压回单列，否则 375px 会横向溢出 */
@media (max-width: 980px) {
  .w-page .w-wrap { grid-template-columns: minmax(0, 1fr); }
  .w-page .w-wrap > .rail { grid-column: 1; grid-row: 2; position: static; max-height: none; overflow: visible; }
  .w-page .w-main { grid-row: 1; }
}
/* 单栏页：版心不许缩到 820 居中（否则顶栏品牌与正文不同中线），改为左对齐 820 */
.w-page .w-wrap--single { max-width: var(--w-max); grid-template-columns: minmax(0, 1fr); justify-items: start; }
.w-page .w-wrap--single .w-main { max-width: 820px; }

/* 单栏页版心钉左（grid 的 justify-items 在部分页面没吃住，直接用 margin 兜底） */
.w-page .w-wrap--single .w-main { max-width: 820px; margin-left: 0; margin-right: auto; }

/* 单栏页：不再给 .w-main 设 max-width（设了会被居中，顶栏品牌与正文不同中线）；
   改为给正文一个可读宽度上限，卡片仍铺满版心 */
.w-page .w-wrap--single .w-main { max-width: none; margin-left: 0; margin-right: 0; }
.w-page .w-wrap--single .prose, .w-page .w-wrap--single .lead { max-width: 74ch; }
.w-page .w-wrap--single .table-wrap { max-width: 100%; }

/* 有的图没有 .figure__scroll 包裹，直接让 figure 自己成为横向滚动容器，避免整页被撑宽 */
.w-page .figure { overflow-x: auto; }

/* 宽表/宽图在卡片里自带横向滚动，别把整页撑宽（375px 实测） */
.w-page .section, .w-page .calc { max-width: 100%; overflow-x: auto; }
.w-page .table { min-width: 0; }

/* 🔴 2026-11-08 修：给算器页写的「io 列 auto」规则把首页滑条压成了 25px。
   改成按「行里有没有 number 输入」来分流，两类页面互不干扰：
   · 有 number 输入的行（算器页输入行 / .item--field）→ io 用 auto
   · 有 range 滑条的行（首页）→ 滑条列固定 104px */
.w-page .w-tools .item:not(.item--field):has(input[type="number"]) { grid-template-columns: 4px 18px 16px minmax(0, 1fr) auto; }
.w-page .w-tools .item:not(.item--field):not(.item--stepper):has(input[type="range"]) { grid-template-columns: 4px 18px 17px minmax(0, 1fr) 104px; }
.w-page .w-tools .item:not(.item--field):not(.item--stepper):has(input[type="range"]) .item__io { width: 104px; }

/* ===================================================================
   算器输入控件升级（2026-11-08 用户批准的三类分法）
   · 档位量 → 滑条（复用首页 .w-bubble/.w-track 一套）
   · 枚举量 → 分段选择器（12/24/48，绝不会滑出 36V）
   · 任意量 → 保留数字框（只统一外观）
   精度：全部沿用原页 min/max/step，算出来的数一个不改。
   =================================================================== */
.w-tools .item__io .w-sl { display: block; width: 100%; }
.w-tools .item__io .w-bubble { display: flex; align-items: baseline; justify-content: flex-end; gap: 3px; font-size: 14px; }
.w-tools .item__io .w-bubble b { font-weight: 700; color: var(--c-accent-strong); font-variant-numeric: tabular-nums; }
.w-tools .item__io .w-bubble small { font-size: 12px; color: var(--c-ink-3); font-weight: 400; }
.w-tools .item__io .w-track { width: 100%; }

/* 分段选择器 */
.w-seg { display: inline-flex; gap: 4px; }
.w-seg__b {
  font: 600 12.5px/1 var(--f-body); color: var(--c-ink-3);
  background: var(--c-surface); border: 1px solid var(--c-rule);
  border-radius: 8px; padding: 6px 9px; cursor: pointer;
}
.w-seg__b:hover { border-color: var(--c-accent); color: var(--c-ink); }
.w-seg__b[aria-checked="true"] {
  background: var(--c-accent-soft); border-color: var(--c-accent);
  color: var(--c-accent-strong); font-weight: 700;
}
.w-seg__b:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }

/* 负载计算器：一行两个值——数量小框 + 小时滑条（6 列） */
.w-page .w-tools .item.item--stepper { grid-template-columns: 4px 18px 17px minmax(0, 1fr) 46px 92px; }
.w-page .w-tools .item.item--stepper input[type="checkbox"] { grid-column: 1; grid-row: 1; }
.w-page .w-tools .item.item--stepper .item__bar { grid-column: 2; grid-row: 1; }
.w-page .w-tools .item.item--stepper .item__ic { grid-column: 3; grid-row: 1; }
.w-page .w-tools .item.item--stepper .item__name { grid-column: 4; grid-row: 1; }
.w-page .w-tools .item.item--stepper .w-qty { grid-column: 5; grid-row: 1; }
.w-page .w-tools .item.item--stepper .item__io { grid-column: 6; grid-row: 1; }
.w-page .w-tools .item.item--stepper .w-qty {
  width: 46px; border: 1px solid var(--c-rule); border-radius: 8px;
  padding: 3px 4px; font: 13px/1.2 var(--f-body); text-align: center; color: var(--c-ink);
}
.w-page .w-tools .item.item--stepper .item__io { width: 92px; }

/* 算器页的滑条行：io 列固定 124px（auto 会被气泡文字撑宽 → 溢出右栏 11px） */
.w-page .w-tools .item.item--field:has(input[type="range"]) { grid-template-columns: 4px 17px minmax(0, 1fr) 124px; }
.w-page .w-tools .item.item--field:has(input[type="range"]) .item__bar { grid-column: 1; grid-row: 1; }
.w-page .w-tools .item.item--field:has(input[type="range"]) .item__ic { grid-column: 2; grid-row: 1; }
.w-page .w-tools .item.item--field:has(input[type="range"]) .item__name { grid-column: 3; grid-row: 1; }
.w-page .w-tools .item.item--field:has(input[type="range"]) .item__io { grid-column: 4; grid-row: 1; }
.w-page .w-tools .item.item--field .w-sl { width: 100%; }
.w-page .w-tools .item.item--field .w-track { width: 100%; }

/* 负载页 stepper 行：滑条宽度跟随列宽（固定 92px 时气泡会把 io 撑出右栏 11px） */
.w-page .w-tools .item.item--stepper .item__io { width: auto; }
.w-page .w-tools .item.item--stepper .w-track { width: 100%; }

/* 负载页 stepper 行的滑条容器跟随列宽（原来被首页的 124px 规则撑出去） */
.w-page .w-tools .item.item--stepper .item__io .w-hrs { display: block; width: 100%; }
.w-page .w-tools .item.item--stepper .item__io .w-hrs .w-track { width: 100%; }

/* 🔴 2026-11-08 修：负载页每行「数量框 + 小时滑条」的 6 列模板被前面的规则覆盖，
   第 6 列塌成 19px（滑条只剩一个小圆点）。用 .rail.w-tools 提高特异性并放最后。 */
.w-page .rail.w-tools .item.item--stepper { grid-template-columns: 4px 18px 17px minmax(0, 1fr) 46px 92px; }
.w-page .rail.w-tools .item.item--stepper > * { grid-row: 1; }
.w-page .rail.w-tools .item.item--stepper .item__bar { grid-column: 1; }
.w-page .rail.w-tools .item.item--stepper input[type="checkbox"] { grid-column: 2; }
.w-page .rail.w-tools .item.item--stepper .item__ic { grid-column: 3; }
.w-page .rail.w-tools .item.item--stepper .item__name { grid-column: 4; }
.w-page .rail.w-tools .item.item--stepper .w-qty { grid-column: 5; }
.w-page .rail.w-tools .item.item--stepper .item__io { grid-column: 6; width: 92px; }
.w-page .rail.w-tools .item.item--stepper .item__io .w-hrs,
.w-page .rail.w-tools .item.item--stepper .item__io .w-track { width: 92px; }

/* 🔴 负载页 stepper 行第二修：名称被压到 126px 截断成 "Refrigerator, 18 c…"，
   收窄数量框与滑条、并把行内间距从 8 收到 6，把空间还给名称 */
.w-page .rail.w-tools .item.item--stepper { gap: 6px; grid-template-columns: 4px 19px 15px minmax(0, 1fr) 44px 82px; }
.w-page .rail.w-tools .item.item--stepper .item__name { font-size: 13px; }
.w-page .rail.w-tools .item.item--stepper .w-qty { width: 44px; padding: 3px 2px; }
.w-page .rail.w-tools .item.item--stepper .item__io,
.w-page .rail.w-tools .item.item--stepper .item__io .w-hrs,
.w-page .rail.w-tools .item.item--stepper .item__io .w-track { width: 82px; }

/* 375/390 手机：右栏一行放不下「名称 + 数量框 + 滑条」，改成两行
   （名称一行；数量框与滑条一行），这样名称不会被截断，也不存在重叠。
   只在 ≤600px 生效，桌面与平板保持单行。 */
@media (max-width: 600px) {
  .w-page .rail.w-tools .item,
  .w-page .rail.w-tools .item.item--field,
  .w-page .rail.w-tools .item.item--stepper {
    grid-template-columns: 4px 44px minmax(0, 1fr) !important;
    row-gap: 4px;
  }
  /* 手机上图标让位给数量框（44px 触控宽度） */
  .w-page .rail.w-tools .item > .item__ic { display: none !important; }
  .w-page .rail.w-tools .item > .item__bar { grid-column: 1 !important; grid-row: 1 / span 2 !important; height: 100% !important; }
  .w-page .rail.w-tools .item > input[type="checkbox"] { grid-column: 2 !important; grid-row: 1 !important; }

  .w-page .rail.w-tools .item > .item__name { grid-column: 3 !important; grid-row: 1 !important; }
  .w-page .rail.w-tools .item > .w-qty { grid-column: 2 !important; grid-row: 2 !important; }
  .w-page .rail.w-tools .item > .item__io { grid-column: 3 !important; grid-row: 2 !important; width: 100% !important; }
  .w-page .rail.w-tools .item > .item__io .w-sl,
  .w-page .rail.w-tools .item > .item__io .w-hrs,
  .w-page .rail.w-tools .item > .item__io .w-track { width: 100% !important; }
  /* 手机上滑条与气泡并排，省一行高度 */
  .w-page .rail.w-tools .item > .item__io .w-hrs { display: flex !important; align-items: center; gap: 8px; }
  .w-page .rail.w-tools .item > .item__io .w-bubble { min-width: 52px; }
  .w-page .rail.w-tools .item > .item__io .w-hrs .w-track { flex: 1 1 auto; }
}