/* 砂浆用量计算器 —— 骨料颗粒 · 石灰岩灰调 */
.c60{
  --a:#64748b;
  --a2:#0f172a;
  --a-soft:rgba(100,116,139,.10);
  --a-line:rgba(100,116,139,.28);
}

/* 骨料颗粒底：大小不一的砂砾点 */
.c60-hero{
  background:
    radial-gradient(circle at 18% 26%, rgba(15,23,42,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 33% 68%, rgba(100,116,139,.16) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 22%, rgba(15,23,42,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 74%, rgba(100,116,139,.14) 0 2.5px, transparent 3.5px),
    linear-gradient(135deg,#f8fafc 0%,#e2e8f0 55%,#f1f5f9 100%);
  background-size:220px 220px,260px 260px,180px 180px,300px 300px,auto;
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(circle at 18% 26%, rgba(148,163,184,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 33% 68%, rgba(100,116,139,.32) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 22%, rgba(148,163,184,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 74%, rgba(100,116,139,.26) 0 2.5px, transparent 3.5px),
    linear-gradient(135deg,#0b1220 0%,#121a2a 56%,#0e1626 100%);
  background-size:220px 220px,260px 260px,180px 180px,300px 300px,auto;
}
.c60-hero-art .core{
  background:linear-gradient(150deg,#94a3b8,#1e293b);
  box-shadow:0 18px 42px rgba(15,23,42,.4);
  border-radius:22px;
  transform:rotate(-4deg);
}
.c60-hero-art .core::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
}
.c60-hero-art .chip b{color:#334155;}
:root[data-theme="dark"] .c60-hero-art .chip b{color:#cbd5e1;}

.c60-metric.is-hero{
  background:linear-gradient(135deg,#475569,#0f172a 78%);
  box-shadow:0 16px 34px rgba(15,23,42,.34);
}
.c60-metric.is-hero .v{font-size:clamp(30px,3.6vw,46px);}

/* 结果卡顶线更硬朗 */
.c60-col:last-child .c60-card{border-color:rgba(100,116,139,.28);}
.c60-card-h h2 .no{
  background:linear-gradient(140deg,#64748b,#0f172a);
  box-shadow:0 6px 16px rgba(15,23,42,.22);
}

/* 参考表：像配合比展板 */
#mwRefTable td:first-child{font-weight:800;color:var(--ink);}
#mwRefTable td:nth-child(3){font-family:ui-monospace,Consolas,monospace;color:#334155;font-weight:800;}
:root[data-theme="dark"] #mwRefTable td:nth-child(3){color:#cbd5e1;}

/* 配比芯片 */
#mwRatioChips .c60-chip.on{
  background:rgba(100,116,139,.14);
  border-color:#475569;
  color:#1e293b;
}
:root[data-theme="dark"] #mwRatioChips .c60-chip.on{color:#e2e8f0;}

/* 水泥砂水环图区 */
.mw-mix{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:16px;
  align-items:center;
  margin-top:16px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:
    radial-gradient(circle at 12% 8%,rgba(100,116,139,.10),transparent 60%),
    var(--soft);
}
.mw-mix-chart svg{display:block;max-width:100%;height:auto;}
.mw-mix-legend{min-width:0;}
.mw-mix-row{
  display:flex;align-items:center;gap:8px;
  padding:5px 0;
  border-bottom:1px dashed var(--line);
  font-size:12.5px;
  color:var(--ink2);
}
.mw-mix-row:last-of-type{border-bottom:0;}
.mw-mix-row i{width:10px;height:10px;border-radius:3px;flex:none;}
.mw-mix-row b{margin-left:auto;font-weight:900;font-variant-numeric:tabular-nums;color:var(--ink);}
.mw-mix-row .d-cement{background:#334155;}
.mw-mix-row .d-sand{background:#94a3b8;}
.mw-mix-row .d-water{background:#38bdf8;}
.mw-mix-legend p{margin:8px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted);}

/* 材料清单 */
#mwTable td:first-child{font-weight:800;color:var(--ink);}
#mwTable td:nth-child(3){font-variant-numeric:tabular-nums;font-weight:800;}
#mwTable tbody tr:nth-child(even) td{background:rgba(100,116,139,.045);}

/* 条形图：灰阶 */
.c60-bar-row .bf{background:linear-gradient(90deg,#94a3b8,#334155);}

@media (max-width:640px){
  .mw-mix{grid-template-columns:1fr;justify-items:center;text-align:left;}
  .mw-mix-legend{width:100%;}
}