/* 气泡膜用量计算器 —— 湖蓝气泡 · 缓冲颗粒 */
.c60{
  --a:#0891b2;
  --a2:#67e8f9;
  --a-soft:rgba(8,145,178,.10);
  --a-line:rgba(8,145,178,.26);
}

/* 气泡母题：圆形颗粒 + 水波光 */
.c60-hero{
  position:relative;
  background:
    radial-gradient(640px 280px at 14% 0%, rgba(255,255,255,.78), transparent 62%),
    radial-gradient(circle at 84% 18%, rgba(103,232,249,.28) 0 5px, transparent 6px),
    radial-gradient(circle at 72% 62%, rgba(8,145,178,.16) 0 4px, transparent 5px),
    radial-gradient(circle at 92% 78%, rgba(103,232,249,.24) 0 6px, transparent 7px),
    linear-gradient(140deg,#f0fdff 0%,#cffafe 52%,#e0f2fe 100%);
  background-size:auto, 46px 46px, 38px 38px, 54px 54px, auto;
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(640px 280px at 14% 0%, rgba(8,145,178,.2), transparent 62%),
    radial-gradient(circle at 84% 18%, rgba(103,232,249,.14) 0 5px, transparent 6px),
    radial-gradient(circle at 72% 62%, rgba(8,145,178,.24) 0 4px, transparent 5px),
    radial-gradient(circle at 92% 78%, rgba(103,232,249,.12) 0 6px, transparent 7px),
    linear-gradient(140deg,#071a24 0%,#0a2230 52%,#0b1c2e 100%);
  background-size:auto, 46px 46px, 38px 38px, 54px 54px, auto;
}
.c60-hero-art .core{
  background:linear-gradient(145deg,#22d3ee,#0891b2);
  box-shadow:0 18px 42px rgba(8,145,178,.34);
}
.c60-hero-art .chip b{color:#0e7490;}
:root[data-theme="dark"] .c60-hero-art .chip b{color:#67e8f9;}

.c60-metric.is-hero{
  background:linear-gradient(135deg,#0891b2,#155e75 76%);
  box-shadow:0 16px 34px rgba(8,145,178,.3);
}
.c60-metric.is-hero .v{font-size:clamp(28px,3.4vw,42px);}

.c60-segbtn.on{color:#0e7490;}
.c60-chip.on{background:rgba(8,145,178,.10);border-color:#0891b2;color:#0e7490;}
:root[data-theme="dark"] .c60-chip.on{color:#67e8f9;border-color:#22d3ee;}

/* 场景说明 */
.bwu-howto{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.bwu-howto li{
  position:relative;
  padding:11px 13px 11px 40px;
  border-radius:12px;
  background:linear-gradient(90deg,rgba(8,145,178,.08),transparent 72%);
  border:1px solid rgba(8,145,178,.18);
  color:var(--ink2);
  font-size:13px;
  line-height:1.75;
}
.bwu-howto li::before{
  content:"○";
  position:absolute;left:14px;top:8px;
  font-size:16px;color:var(--a);
}
.bwu-howto b{color:var(--ink);}

/* 气泡膜示意区 */
.bwu-viz{
  margin-top:16px;
  border:1px solid rgba(8,145,178,.24);
  border-radius:14px;
  background:
    radial-gradient(circle at 12% 22%, rgba(8,145,178,.12) 0 4px, transparent 5px),
    radial-gradient(circle at 34% 68%, rgba(8,145,178,.10) 0 5px, transparent 6px),
    radial-gradient(circle at 66% 30%, rgba(103,232,249,.18) 0 6px, transparent 7px),
    var(--soft);
  background-size:34px 34px, 42px 42px, 52px 52px, auto;
  padding:12px 14px 8px;
}
.bwu-viz-h{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-bottom:8px;
  font-size:12px;font-weight:800;color:#0e7490;
}
.bwu-viz-h span:last-child{color:var(--muted);font-weight:600;}
.bwu-viz svg{display:block;width:100%;height:auto;}

/* 膜宽对比表 */
.bwu-table td:first-child{font-weight:800;color:var(--ink);}
.bwu-table td:nth-child(n+2){font-variant-numeric:tabular-nums;white-space:nowrap;}
.bwu-table tbody tr:nth-child(even) td{background:rgba(8,145,178,.035);}
.bwu-table tr.is-current td{background:rgba(8,145,178,.09);font-weight:800;color:#0e7490;}
:root[data-theme="dark"] .bwu-table tr.is-current td{color:#67e8f9;}

/* 结果条形 */
#bwuBars .c60-bar-row .bf{background:linear-gradient(90deg,#22d3ee,#0891b2);}

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