/* 线槽用量计算器 —— 蓝图灰 · 槽体剖面 */
.c60{
  --a:#334155;
  --a2:#64748b;
  --a-soft:rgba(51,65,85,.10);
  --a-line:rgba(51,65,85,.26);
}

/* hero：工程蓝图网格 + 冷灰斜纹 */
.c60-hero{
  background:
    radial-gradient(680px 300px at 16% 4%, rgba(255,255,255,.82), transparent 66%),
    repeating-linear-gradient(90deg, rgba(51,65,85,.05) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg, rgba(51,65,85,.045) 0 1px, transparent 1px 16px),
    linear-gradient(128deg,#f8fafc 0%,#e2e8f0 52%,#eef2f6 100%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(680px 300px at 16% 4%, rgba(100,116,139,.20), transparent 66%),
    repeating-linear-gradient(90deg, rgba(148,163,184,.07) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg, rgba(148,163,184,.06) 0 1px, transparent 1px 16px),
    linear-gradient(128deg,#0b1220 0%,#111b2c 52%,#0b1424 100%);
}

/* hero 插画：线槽剖面（两侧槽壁 + 卡槽 + 走线） */
.c60-hero-art .wd-duct{
  position:absolute;
  inset:20px 24px;
  display:grid;
  grid-template-columns:14px 1fr 1fr 1fr 14px;
  align-items:end;
  gap:8px;
  padding:10px 8px 0;
  border:2px solid rgba(51,65,85,.55);
  border-top:0;
  border-radius:0 0 14px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(51,65,85,.06));
  box-shadow:inset 0 -18px 30px rgba(51,65,85,.08);
}
:root[data-theme="dark"] .c60-hero-art .wd-duct{
  border-color:rgba(148,163,184,.6);
  background:linear-gradient(180deg,rgba(148,163,184,.10),rgba(15,23,42,.55));
  box-shadow:inset 0 -18px 30px rgba(0,0,0,.35);
}
.c60-hero-art .wd-wall{
  align-self:stretch;
  border-radius:3px;
  background:linear-gradient(180deg,#475569,#334155);
  box-shadow:inset 0 6px 0 rgba(255,255,255,.18);
}
.c60-hero-art .wd-slot{
  height:64%;
  border-radius:4px 4px 0 0;
  background:repeating-linear-gradient(180deg,rgba(51,65,85,.22) 0 3px,transparent 3px 9px);
  border:1px dashed rgba(51,65,85,.35);
  border-bottom:0;
}
:root[data-theme="dark"] .c60-hero-art .wd-slot{
  background:repeating-linear-gradient(180deg,rgba(148,163,184,.22) 0 3px,transparent 3px 9px);
  border-color:rgba(148,163,184,.4);
}
.c60-hero-art .wd-wire{
  position:absolute;
  left:18px;right:18px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,#94a3b8,#334155,#94a3b8);
  opacity:.8;
}
.c60-hero-art .wd-wire.w1{bottom:34px;}
.c60-hero-art .wd-wire.w2{bottom:20px;left:34px;right:34px;}
:root[data-theme="dark"] .c60-hero-art .wd-wire{
  background:linear-gradient(90deg,#475569,#cbd5e1,#475569);
}
.c60-hero-art .chip{background:rgba(255,255,255,.92);}
:root[data-theme="dark"] .c60-hero-art .chip{background:rgba(14,22,38,.88);}
.c60-hero-art .chip b{color:#334155;}
:root[data-theme="dark"] .c60-hero-art .chip b{color:#cbd5e1;}

/* 主结果：钢构件深灰 */
.c60-metric.is-hero{
  background:linear-gradient(125deg,#1e293b,#334155 48%,#475569 100%);
  box-shadow:0 16px 34px rgba(30,41,59,.34);
}
.c60-metric.is-hero .v{font-size:clamp(30px,3.6vw,44px);}

/* 结果小标题：钢尺刻度线 */
.wd-sub{
  position:relative;
  margin:22px 0 2px;
  padding:0 0 6px 2px;
  font-size:13.5px;
  font-weight:900;
  color:var(--ink);
  letter-spacing:.3px;
  border-bottom:1px solid var(--line);
}
.wd-sub::after{
  content:"";
  position:absolute;
  left:0;bottom:-1px;
  width:64px;height:2px;
  background:linear-gradient(90deg,#334155,#94a3b8);
}
:root[data-theme="dark"] .wd-sub::after{background:linear-gradient(90deg,#cbd5e1,#64748b);}

/* 填充率条形图：按灰阶区分规格 */
.c60-bar-row .bf{background:linear-gradient(90deg,#334155,#94a3b8);}
#wdBars .c60-bar-row .bk{font-weight:800;color:var(--ink2);}

/* 规格对比表：判定列用色块 */
#wdSpecTable td:first-child{font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;}
#wdSpecTable td:nth-child(n+2){font-variant-numeric:tabular-nums;}
#wdSpecTable .tag{
  display:inline-block;
  padding:1px 8px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  background:var(--soft);
  color:var(--muted);
}
#wdSpecTable .tag.ok{background:rgba(5,150,105,.12);color:#059669;}
#wdSpecTable .tag.warn{background:rgba(180,83,9,.12);color:#b45309;}
#wdSpecTable .tag.bad{background:rgba(220,38,38,.12);color:#dc2626;}
#wdSpecTable tr.is-cur td{background:rgba(51,65,85,.06);font-weight:800;}
:root[data-theme="dark"] #wdSpecTable tr.is-cur td{background:rgba(148,163,184,.10);}
:root[data-theme="dark"] #wdSpecTable .tag.ok{color:#34d399;}
:root[data-theme="dark"] #wdSpecTable .tag.warn{color:#fbbf24;}
:root[data-theme="dark"] #wdSpecTable .tag.bad{color:#f87171;}

/* 备料明细表：最后一行合计 */
#wdDetailTable td:first-child{font-weight:800;color:var(--ink);}
#wdDetailTable td:nth-child(2),
#wdDetailTable td:nth-child(3),
#wdDetailTable td:nth-child(4){font-variant-numeric:tabular-nums;}
#wdDetailTable tr.is-total td{
  background:color-mix(in srgb,var(--a) 7%,var(--card));
  font-weight:900;
  color:var(--ink);
}

/* 分段按钮与滑杆统一到钢灰 */
.c60-segbtn.on{color:#334155;}
:root[data-theme="dark"] .c60-segbtn.on{color:#e2e8f0;}
#wdReserveOut{color:#334155;font-weight:900;font-variant-numeric:tabular-nums;}
:root[data-theme="dark"] #wdReserveOut{color:#cbd5e1;}

/* 布线长度输入：卷尺刻度底纹 */
#wdLen{
  font-variant-numeric:tabular-nums;
  letter-spacing:.4px;
}
#wdLenField .c60-control,
.c60-field:has(#wdLen) .c60-control{
  background:repeating-linear-gradient(90deg,rgba(51,65,85,.035) 0 1px,transparent 1px 12px) var(--card);
}

/* 批量表 */
#wdBatchTable td:first-child{font-weight:800;color:var(--ink);}
#wdBatchTable td:nth-child(n+2){font-variant-numeric:tabular-nums;}
#wdBatchTable tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--a) 3%,transparent);}

/* 批量文本域：单据风格 */
#wdBatchInput{
  background:
    repeating-linear-gradient(0deg, transparent 0 24px, var(--line) 24px 25px),
    var(--card);
}

/* 打印时保留对比表、隐藏交互 */
@media print{
  .wd-sub{border-bottom-color:#ccc;}
  #wdBars .c60-bar-row .bf{background:#475569 !important;}
}

@media (max-width:960px){
  .c60-hero-art .wd-duct{inset:16px 12px;}
  .c60-shell{gap:16px;}
}

@media (max-width:640px){
  .c60-hero-art .wd-duct{display:none;}
  .c60-hero .c60-hero-sub{font-size:14px;}
  .wd-sub{margin-top:18px;}
  #wdSpecTable{min-width:520px;}
  #wdDetailTable{min-width:360px;}
  .c60-metric.is-hero .v{font-size:30px;}
  #wdBars .c60-bar-row{grid-template-columns:72px minmax(0,1fr) 58px;}
}