/* 弱电箱容量计算器 —— 靛蓝机柜 · 模块排布 */
.c60{
  --a:#4338ca;
  --a2:#a5b4fc;
  --a-soft:rgba(67,56,202,.09);
  --a-line:rgba(67,56,202,.24);
}

/* hero：机柜导轨竖纹 + 冷靛渐变 */
.c60-hero{
  background:
    radial-gradient(620px 300px at 88% 8%, rgba(165,180,252,.45), transparent 62%),
    repeating-linear-gradient(90deg, rgba(67,56,202,.05) 0 1px, transparent 1px 26px),
    linear-gradient(132deg,#eef0ff 0%,#e0e4ff 46%,#f6f7ff 100%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(620px 300px at 88% 8%, rgba(165,180,252,.16), transparent 62%),
    repeating-linear-gradient(90deg, rgba(165,180,252,.07) 0 1px, transparent 1px 26px),
    linear-gradient(132deg,#0a0d1f 0%,#10142c 46%,#080b1a 100%);
}

/* hero 插画：壁挂弱电箱，三层模块与状态灯 */
.c60-hero-art .wb-enclosure{
  position:absolute;
  inset:12px 26px;
  border-radius:12px;
  border:2px solid rgba(67,56,202,.45);
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(224,228,255,.66));
  box-shadow:0 16px 34px rgba(67,56,202,.16), inset 0 0 0 6px rgba(255,255,255,.55);
  padding:16px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:9px;
  transform:rotate(-3deg);
}
:root[data-theme="dark"] .c60-hero-art .wb-enclosure{
  border-color:rgba(165,180,252,.55);
  background:linear-gradient(160deg,rgba(18,22,44,.96),rgba(12,16,34,.8));
  box-shadow:0 16px 34px rgba(0,0,0,.45), inset 0 0 0 6px rgba(165,180,252,.05);
}
.c60-hero-art .wb-door{
  position:absolute;
  inset:7px;
  border:1px dashed rgba(67,56,202,.26);
  border-radius:8px;
  pointer-events:none;
}
:root[data-theme="dark"] .c60-hero-art .wb-door{border-color:rgba(165,180,252,.22);}
.c60-hero-art .wb-row{
  position:relative;
  display:flex;
  gap:6px;
  padding:5px;
  border-radius:6px;
  background:repeating-linear-gradient(90deg,rgba(67,56,202,.10) 0 1px,transparent 1px 12px);
}
:root[data-theme="dark"] .c60-hero-art .wb-row{
  background:repeating-linear-gradient(90deg,rgba(165,180,252,.12) 0 1px,transparent 1px 12px);
}
.c60-hero-art .wb-row i{
  display:block;
  height:15px;
  flex:1;
  border-radius:3px;
  background:linear-gradient(150deg,#6366f1,#4338ca);
  box-shadow:0 2px 5px rgba(67,56,202,.24);
}
.c60-hero-art .wb-row.r2 i{
  background:linear-gradient(150deg,#818cf8,#4f46e5);
}
.c60-hero-art .wb-row.r3 i{
  background:linear-gradient(150deg,#a5b4fc,#6366f1);
  height:12px;
}
:root[data-theme="dark"] .c60-hero-art .wb-row i{box-shadow:none;}
.c60-hero-art .wb-led{
  position:absolute;
  right:12px;bottom:9px;
  width:7px;height:7px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,.8);
}
.c60-hero-art .chip{background:rgba(255,255,255,.92);}
:root[data-theme="dark"] .c60-hero-art .chip{background:rgba(12,16,34,.9);}
.c60-hero-art .chip b{color:#4338ca;}
:root[data-theme="dark"] .c60-hero-art .chip b{color:#a5b4fc;}

/* 主结果：机柜深靛 */
.c60-metric.is-hero{
  background:linear-gradient(125deg,#312e81,#4338ca 50%,#6366f1 100%);
  box-shadow:0 16px 34px rgba(67,56,202,.30);
}
.c60-metric.is-hero .v{font-size:clamp(30px,3.6vw,44px);}

/* 小标题：带 U 位刻度 */
.wb-sub{
  position:relative;
  margin:22px 0 2px;
  padding-left:14px;
  font-size:13.5px;
  font-weight:900;
  color:var(--ink);
}
.wb-sub::before{
  content:"";
  position:absolute;
  left:0;top:2px;bottom:2px;
  width:4px;
  border-radius:2px;
  background:repeating-linear-gradient(180deg,#4338ca 0 5px,transparent 5px 8px);
}
:root[data-theme="dark"] .wb-sub::before{
  background:repeating-linear-gradient(180deg,#a5b4fc 0 5px,transparent 5px 8px);
}

/* 分段、滑杆 */
.c60-segbtn.on{color:#4338ca;}
:root[data-theme="dark"] .c60-segbtn.on{color:#a5b4fc;}
#wbReserveOut{color:#4338ca;font-weight:900;}
:root[data-theme="dark"] #wbReserveOut{color:#a5b4fc;}
#wbReserve{
  background:linear-gradient(to right,#4338ca 0%,#4338ca var(--fill,20%),var(--soft) var(--fill,20%),var(--soft) 100%);
}

/* 子系统条形图 */
.c60-bar-row .bf{background:linear-gradient(90deg,#4338ca,#a5b4fc);}
#wbBars .c60-bar-row .bk{font-weight:800;color:var(--ink2);}
#wbBars .c60-bar-row .bv{color:#4338ca;}
:root[data-theme="dark"] #wbBars .c60-bar-row .bv{color:#a5b4fc;}

/* 箱型对比表 */
#wbBoxTable td:first-child{font-weight:900;color:var(--ink);white-space:nowrap;}
#wbBoxTable td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums;}
#wbBoxTable th:nth-child(n+2){text-align:right;}
#wbBoxTable .tag{
  display:inline-block;
  padding:1px 8px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  background:rgba(5,150,105,.12);
  color:#059669;
}
#wbBoxTable .tag.bad{background:rgba(220,38,38,.12);color:#dc2626;}
#wbBoxTable tr.is-cur td{
  background:rgba(67,56,202,.07);
  font-weight:800;
}
:root[data-theme="dark"] #wbBoxTable tr.is-cur td{background:rgba(165,180,252,.10);}
:root[data-theme="dark"] #wbBoxTable .tag{color:#34d399;}
:root[data-theme="dark"] #wbBoxTable .tag.bad{color:#f87171;}

/* 占位明细表 */
#wbDetailTable td:first-child{font-weight:800;color:var(--ink);}
#wbDetailTable td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums;}
#wbDetailTable th:nth-child(n+2){text-align:right;}
#wbDetailTable tr.is-total td{
  background:color-mix(in srgb,var(--a) 8%,var(--card));
  font-weight:900;
  color:var(--ink);
}

/* 点位输入：U 位槽纹背景 */
.c60-field:has(#wbNet) .c60-control,
.c60-field:has(#wbTv) .c60-control,
.c60-field:has(#wbCctv) .c60-control,
.c60-field:has(#wbVoice) .c60-control{
  background:repeating-linear-gradient(0deg,rgba(67,56,202,.04) 0 6px,transparent 6px 12px) var(--card);
}

/* 预算卡：靛蓝渐变数字 */
#wbCost{color:#4338ca;}
:root[data-theme="dark"] #wbCost{color:#a5b4fc;}

/* 批量表 */
#wbBatchTable td:first-child{font-weight:800;color:var(--ink);}
#wbBatchTable td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums;}
#wbBatchTable th:nth-child(n+2){text-align:right;}
#wbBatchTable tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--a) 3%,transparent);}
#wbBatchTable tr.is-total td{background:color-mix(in srgb,var(--a) 7%,var(--card));font-weight:900;color:var(--ink);}

@media print{
  .wb-sub::before{background:#4338ca;}
  #wbBars .c60-bar-row .bf{background:#4338ca !important;}
  .c60-warn{break-inside:avoid;}
}

@media (max-width:960px){
  .c60-hero-art .wb-enclosure{inset:10px 18px;}
  #wbBoxTable{min-width:460px;}
  #wbDetailTable{min-width:400px;}
}

@media (max-width:640px){
  .c60-hero-art .wb-enclosure{display:none;}
  .wb-sub{margin-top:18px;}
  #wbBoxTable{min-width:440px;}
  #wbDetailTable{min-width:380px;}
  .c60-metric.is-hero .v{font-size:30px;}
  #wbBars .c60-bar-row{grid-template-columns:82px minmax(0,1fr) 52px;}
}