/* 珍珠棉用量计算器 —— 泡沫青 · 气泡颗粒 */
.c60{
  --a:#0e7490;
  --a2:#a5f3fc;
  --a-soft:rgba(14,116,144,.10);
  --a-line:rgba(14,116,144,.26);
}

/* 气泡质感：细密气泡 + 冷光 */
.c60-hero{
  background:
    radial-gradient(760px 320px at 12% 0%, rgba(255,255,255,.78), transparent 62%),
    radial-gradient(circle at 18% 28%, rgba(14,116,144,.10) 0 6px, transparent 7px),
    radial-gradient(circle at 46% 62%, rgba(14,116,144,.08) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 22%, rgba(14,116,144,.07) 0 5px, transparent 6px),
    linear-gradient(135deg,#ecfeff 0%,#cffafe 50%,#f0f9ff 100%);
  background-size:auto, 54px 54px, 78px 78px, 42px 42px, auto;
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(760px 320px at 12% 0%, rgba(165,243,252,.10), transparent 62%),
    radial-gradient(circle at 18% 28%, rgba(165,243,252,.07) 0 6px, transparent 7px),
    radial-gradient(circle at 46% 62%, rgba(165,243,252,.05) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 22%, rgba(165,243,252,.05) 0 5px, transparent 6px),
    linear-gradient(135deg,#06131a 0%,#08222b 50%,#0e1626 100%);
  background-size:auto, 54px 54px, 78px 78px, 42px 42px, auto;
}
.c60-hero-art .ep-foam{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:9px;
  width:180px;
  height:180px;
  padding:14px;
  transform:rotate(4deg);
  filter:drop-shadow(0 16px 30px rgba(14,116,144,.2));
}
.c60-hero-art .ep-foam span{
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffff, #a5f3fc 55%, #22d3ee 100%);
  box-shadow:inset 0 -3px 6px rgba(14,116,144,.18);
}
:root[data-theme="dark"] .c60-hero-art .ep-foam span{
  background:radial-gradient(circle at 35% 30%, #7dd3fc, #0891b2 60%, #0e7490 100%);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.4);
}
.c60-hero-art .ep-foam span:nth-child(2n){opacity:.78;}
.c60-hero-art .ep-foam span:nth-child(3n){transform:scale(.86);}
.c60-hero-art .chip{background:rgba(255,255,255,.9);}
:root[data-theme="dark"] .c60-hero-art .chip{background:rgba(14,22,38,.86);}
.c60-hero-art .chip b{color:#0e7490;}
:root[data-theme="dark"] .c60-hero-art .chip b{color:#a5f3fc;}

/* 主结果：深海青 */
.c60-metric.is-hero{
  background:linear-gradient(135deg,#155e75,#0e7490 46%,#0f766e 100%);
  box-shadow:0 16px 34px rgba(14,116,144,.3);
}
.c60-metric.is-hero .v{font-size:clamp(28px,3.4vw,42px);}

.c60-segbtn.on{color:#0e7490;}
:root[data-theme="dark"] .c60-segbtn.on{color:#a5f3fc;}
.c60-chip.on{background:rgba(14,116,144,.12);border-color:#0e7490;color:#155e75;}
:root[data-theme="dark"] .c60-chip.on{color:#a5f3fc;border-color:#a5f3fc;}

/* 小标题 */
.ep-sub{
  position:relative;
  margin:20px 0 2px;
  padding-left:12px;
  font-size:13.5px;
  font-weight:900;
  color:var(--ink);
}
.ep-sub::before{
  content:"";
  position:absolute;
  left:0;top:5px;bottom:5px;
  width:4px;
  border-radius:4px;
  background:linear-gradient(180deg,#0e7490,#a5f3fc);
}

/* 包裹示意 */
.ep-art{
  margin-top:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb,var(--a) 8%,transparent) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 70%, color-mix(in srgb,var(--a) 6%,transparent) 0 5px, transparent 6px),
    linear-gradient(160deg,color-mix(in srgb,var(--a) 4%,var(--card)),var(--card));
  background-size:46px 46px, 62px 62px, auto;
  overflow-x:auto;
}
.ep-art svg{display:block;margin:0 auto;max-width:100%;}

/* 条形图 */
.c60-bar-row .bf{background:linear-gradient(90deg,#0891b2,#a5f3fc);}

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

/* 尺寸输入：气泡底纹 */
#epLField .c60-control{
  border-color:rgba(14,116,144,.34);
  background:linear-gradient(0deg,rgba(14,116,144,.03),rgba(14,116,144,.03)) var(--card);
}
:root[data-theme="dark"] #epLField .c60-control{background:rgba(165,243,252,.05);}

@media (max-width:640px){
  .c60-hero-art{display:none;}
  .ep-art svg{width:100%;}
}
