/* 缠绕膜用量计算器 —— 深蓝螺旋 · 拉伸薄膜 */
.c60{
  --a:#1d4ed8;
  --a2:#93c5fd;
  --a-soft:rgba(29,78,216,.10);
  --a-line:rgba(29,78,216,.26);
}

/* 螺旋母题：斜向拉伸纹 + 冷光 */
.c60-hero{
  background:
    radial-gradient(720px 300px at 12% 0%, rgba(255,255,255,.76), transparent 64%),
    repeating-linear-gradient(118deg, rgba(29,78,216,.07) 0 3px, transparent 3px 16px),
    repeating-linear-gradient(-62deg, rgba(147,197,253,.08) 0 2px, transparent 2px 22px),
    linear-gradient(135deg,#f8fbff 0%,#dbeafe 50%,#e0f2fe 100%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(720px 300px at 12% 0%, rgba(29,78,216,.22), transparent 64%),
    repeating-linear-gradient(118deg, rgba(147,197,253,.07) 0 3px, transparent 3px 16px),
    repeating-linear-gradient(-62deg, rgba(29,78,216,.12) 0 2px, transparent 2px 22px),
    linear-gradient(135deg,#081426 0%,#0b1b33 50%,#0d1a2e 100%);
}
.c60-hero-art .core{
  background:linear-gradient(145deg,#3b82f6,#1e3a8a);
  box-shadow:0 18px 42px rgba(29,78,216,.34);
}
.c60-hero-art .chip b{color:#1d4ed8;}
:root[data-theme="dark"] .c60-hero-art .chip b{color:#93c5fd;}

.c60-metric.is-hero{
  background:linear-gradient(135deg,#1d4ed8,#1e3a8a 76%);
  box-shadow:0 16px 34px rgba(29,78,216,.32);
}
.c60-metric.is-hero .v{font-size:clamp(28px,3.4vw,42px);}

.c60-segbtn.on{color:#1d4ed8;}
.c60-chip.on{background:rgba(29,78,216,.10);border-color:#1d4ed8;color:#1e40af;}
:root[data-theme="dark"] .c60-chip.on{color:#93c5fd;border-color:#3b82f6;}

/* 现场说明 */
.sfu-howto{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.sfu-howto li{
  position:relative;
  padding:11px 13px 11px 40px;
  border-radius:12px;
  background:linear-gradient(100deg,rgba(29,78,216,.08),transparent 74%);
  border:1px solid rgba(29,78,216,.18);
  color:var(--ink2);
  font-size:13px;
  line-height:1.75;
}
.sfu-howto li::before{
  content:"↻";
  position:absolute;left:14px;top:8px;
  font-size:17px;color:var(--a);font-weight:700;
}
.sfu-howto b{color:var(--ink);}

/* 缠绕示意 */
.sfu-viz{
  margin-top:16px;
  border:1px solid rgba(29,78,216,.24);
  border-radius:14px;
  background:
    repeating-linear-gradient(118deg, rgba(29,78,216,.05) 0 2px, transparent 2px 17px),
    var(--soft);
  padding:12px 14px 8px;
}
.sfu-viz-h{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-bottom:8px;
  font-size:12px;font-weight:800;color:#1e40af;
}
.sfu-viz-h span:last-child{color:var(--muted);font-weight:600;}
.sfu-viz svg{display:block;width:100%;height:auto;}

/* 圈数对比表 */
.sfu-table td:first-child{font-weight:800;color:var(--ink);}
.sfu-table td:nth-child(n+2){font-variant-numeric:tabular-nums;white-space:nowrap;}
.sfu-table tbody tr:nth-child(even) td{background:rgba(29,78,216,.035);}
.sfu-table tr.is-current td{background:rgba(29,78,216,.09);font-weight:800;color:#1e40af;}
:root[data-theme="dark"] .sfu-table tr.is-current td{color:#93c5fd;}

#sfuBars .c60-bar-row .bf{background:linear-gradient(90deg,#60a5fa,#1d4ed8);}

@media (max-width:640px){
  .sfu-viz{padding:10px 8px 4px;}
}