/* 网线用量计算器 —— 湖蓝 · 线盘同心圆 */
.c60{
  --a:#2563eb;
  --a2:#7dd3fc;
  --a-soft:rgba(37,99,235,.09);
  --a-line:rgba(37,99,235,.24);
}

/* hero：水波弧线与浅蓝渐变 */
.c60-hero{
  background:
    radial-gradient(520px 260px at 90% 12%, rgba(125,211,252,.55), transparent 62%),
    repeating-radial-gradient(circle at 88% 46%, rgba(37,99,235,.07) 0 1px, transparent 1px 22px),
    linear-gradient(128deg,#eff6ff 0%,#dbeafe 48%,#f0f9ff 100%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(520px 260px at 90% 12%, rgba(125,211,252,.18), transparent 62%),
    repeating-radial-gradient(circle at 88% 46%, rgba(125,211,252,.08) 0 1px, transparent 1px 22px),
    linear-gradient(128deg,#04101f 0%,#071a30 48%,#03101f 100%);
}

/* hero 插画：网线盘 + 引出的线头 */
.c60-hero-art .nc-spool{
  position:absolute;
  inset:16px 30px;
  display:grid;
  place-items:center;
}
.c60-hero-art .nc-coil{
  position:absolute;
  border-radius:50%;
  border:7px solid transparent;
  background:
    linear-gradient(#eff6ff,#eff6ff) padding-box,
    conic-gradient(from 0deg,#1d4ed8,#60a5fa,#7dd3fc,#1d4ed8) border-box;
  box-shadow:0 8px 20px rgba(37,99,235,.18);
}
.c60-hero-art .nc-coil.c1{width:150px;height:150px;}
.c60-hero-art .nc-coil.c2{
  width:112px;height:112px;
  border-width:6px;
  opacity:.9;
}
.c60-hero-art .nc-coil.c3{
  width:76px;height:76px;
  border-width:5px;
  opacity:.8;
}
.c60-hero-art .nc-core{
  position:absolute;
  width:30px;height:30px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#93c5fd,#1e40af);
  box-shadow:0 4px 12px rgba(30,64,175,.35);
}
.c60-hero-art .nc-lead{
  position:absolute;
  left:calc(50% + 62px);
  top:calc(50% - 46px);
  width:74px;height:38px;
  border-top:4px solid #60a5fa;
  border-right:4px solid #60a5fa;
  border-radius:0 22px 0 0;
  transform:rotate(-8deg);
}
:root[data-theme="dark"] .c60-hero-art .nc-coil{
  background:
    linear-gradient(#04101f,#04101f) padding-box,
    conic-gradient(from 0deg,#1d4ed8,#60a5fa,#7dd3fc,#1d4ed8) border-box;
  box-shadow:none;
}
.c60-hero-art .nc-lead{filter:drop-shadow(0 0 6px rgba(96,165,250,.5));}
.c60-hero-art .chip{background:rgba(255,255,255,.92);}
:root[data-theme="dark"] .c60-hero-art .chip{background:rgba(7,26,48,.9);}
.c60-hero-art .chip b{color:#2563eb;}
:root[data-theme="dark"] .c60-hero-art .chip b{color:#7dd3fc;}

/* 主结果：线盘深蓝 */
.c60-metric.is-hero{
  background:linear-gradient(125deg,#1e3a8a,#2563eb 52%,#3b82f6 100%);
  box-shadow:0 16px 34px rgba(37,99,235,.32);
}
.c60-metric.is-hero .v{font-size:clamp(30px,3.6vw,44px);}

/* 小标题：线缆斜纹 */
.nc-sub{
  position:relative;
  margin:22px 0 2px;
  padding-left:16px;
  font-size:13.5px;
  font-weight:900;
  color:var(--ink);
}
.nc-sub::before{
  content:"";
  position:absolute;
  left:0;top:4px;bottom:4px;
  width:7px;
  border-radius:3px;
  background:repeating-linear-gradient(135deg,#2563eb 0 3px,#7dd3fc 3px 6px);
}

/* 分段与滑杆 */
.c60-segbtn.on{color:#2563eb;}
:root[data-theme="dark"] .c60-segbtn.on{color:#7dd3fc;}
#ncReserveOut{color:#2563eb;font-weight:900;}
:root[data-theme="dark"] #ncReserveOut{color:#7dd3fc;}
#ncReserve{
  background:linear-gradient(to right,#2563eb 0%,#2563eb var(--fill,10%),var(--soft) var(--fill,10%),var(--soft) 100%);
}

/* 条形图：蓝到浅蓝 */
.c60-bar-row .bf{background:linear-gradient(90deg,#1d4ed8,#7dd3fc);}
#ncBars .c60-bar-row .bk{font-weight:800;color:var(--ink2);}
#ncBars .c60-bar-row .bv{color:#1d4ed8;}
:root[data-theme="dark"] #ncBars .c60-bar-row .bv{color:#7dd3fc;}

/* 线型对比表 */
#ncTypeTable td:first-child{font-weight:900;color:var(--ink);white-space:nowrap;}
#ncTypeTable td:nth-child(4),
#ncTypeTable td:nth-child(5){text-align:right;font-variant-numeric:tabular-nums;}
#ncTypeTable th:nth-child(4),
#ncTypeTable th:nth-child(5){text-align:right;}
#ncTypeTable .tag{
  display:inline-block;
  padding:1px 8px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  background:var(--soft);
  color:var(--muted);
}
#ncTypeTable .tag.ok{background:rgba(5,150,105,.12);color:#059669;}
#ncTypeTable .tag.warn{background:rgba(180,83,9,.12);color:#b45309;}
#ncTypeTable tr.is-cur td{background:rgba(37,99,235,.06);font-weight:800;}
:root[data-theme="dark"] #ncTypeTable tr.is-cur td{background:rgba(125,211,252,.10);}
:root[data-theme="dark"] #ncTypeTable .tag.ok{color:#34d399;}
:root[data-theme="dark"] #ncTypeTable .tag.warn{color:#fbbf24;}

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

/* 提醒卡：动态条目高亮 */
#ncWarnList li{transition:color .2s;}
#ncWarnBox .c60-warn-list-alert{
  font-weight:800;
  color:#dc2626;
}

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

/* 点位与距离输入：米标刻度 */
.c60-field:has(#ncH) .c60-control,
.c60-field:has(#ncV) .c60-control{
  background:
    repeating-linear-gradient(90deg,rgba(37,99,235,.05) 0 1px,transparent 1px 10px),
    var(--card);
}

/* 成本数字使用蓝色 */
#ncCost{color:#1d4ed8;}
:root[data-theme="dark"] #ncCost{color:#7dd3fc;}

@media print{
  .nc-sub::before{background:#2563eb;}
  #ncBars .c60-bar-row .bf{background:#2563eb !important;}
  .c60-warn{break-inside:avoid;}
}

@media (max-width:960px){
  .c60-hero-art .nc-spool{inset:12px 16px;}
  #ncTypeTable{min-width:560px;}
}

@media (max-width:640px){
  .c60-hero-art .nc-spool{display:none;}
  .nc-sub{margin-top:18px;}
  #ncTypeTable{min-width:520px;}
  #ncDetailTable{min-width:360px;}
  .c60-metric.is-hero .v{font-size:30px;}
  #ncBars .c60-bar-row{grid-template-columns:84px minmax(0,1fr) 54px;}
}