/* 台面面积计算器 —— 石材灰 · 石板纹理 · 开孔平面 */
.c60{
  --a:#52525b;
  --a2:#a1a1aa;
  --a-soft:rgba(82,82,91,.10);
  --a-line:rgba(82,82,91,.26);
}

/* 石材纹理：颗粒 + 细石纹 + 冷灰底 */
.c60-hero{
  background:
    radial-gradient(780px 320px at 8% 0%, rgba(255,255,255,.85), transparent 62%),
    repeating-radial-gradient(circle at 18% 26%, rgba(82,82,91,.055) 0 1.5px, transparent 1.5px 11px),
    repeating-linear-gradient(122deg, rgba(113,113,122,.045) 0 1px, transparent 1px 26px),
    linear-gradient(135deg,#fafafa 0%,#eff0f2 48%,#dfe1e5 100%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(780px 320px at 8% 0%, rgba(161,161,170,.14), transparent 62%),
    repeating-radial-gradient(circle at 18% 26%, rgba(212,212,216,.05) 0 1.5px, transparent 1.5px 11px),
    repeating-linear-gradient(122deg, rgba(228,228,231,.035) 0 1px, transparent 1px 26px),
    linear-gradient(135deg,#12151a 0%,#1a1d23 50%,#0e1116 100%);
}
.ctp-slab{
  position:relative;
  z-index:1;
  filter:drop-shadow(0 18px 26px rgba(39,39,42,.22));
  transform:rotate(-2deg);
}
.ctp-slab svg{display:block;border-radius:12px;}
:root[data-theme="dark"] .ctp-slab{filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));}
.c60-hero-art .chip b{color:#3f3f46;}
:root[data-theme="dark"] .c60-hero-art .chip b{color:#d4d4d8;}

/* 主结果卡：石墨渐变 */
.c60-metric.is-hero{
  background:linear-gradient(135deg,#52525b,#27272a 74%);
  box-shadow:0 16px 34px rgba(39,39,42,.32);
}
.c60-metric.is-hero .v{font-size:clamp(28px,3.4vw,42px);}

/* 台面平面示意 */
.ctp-plan{
  margin-top:16px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, rgba(82,82,91,.04) 0 2px, transparent 2px 8px),
    var(--soft);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
}
.ctp-plan svg{width:100%;height:auto;max-width:420px;display:block;}
.ctp-plan-empty{font-size:12.5px;color:var(--muted);}
.ctp-plan rect.ctp-slab-fill{fill:#e4e4e7;stroke:#52525b;stroke-width:1.6;}
:root[data-theme="dark"] .ctp-plan rect.ctp-slab-fill{fill:#1c2637;stroke:#a1a1aa;}
.ctp-plan .ctp-cut{fill:#fff;stroke:#71717a;stroke-width:1.4;}
.ctp-plan .ctp-cut-label{font-size:10px;font-weight:800;fill:#52525b;}
.ctp-plan .ctp-dim{stroke:#71717a;stroke-width:1;fill:none;}
.ctp-plan .ctp-dim-text{font-size:11px;font-weight:800;fill:#52525b;}
:root[data-theme="dark"] .ctp-plan{background:rgba(82,82,91,.14);}
:root[data-theme="dark"] .ctp-plan .ctp-cut{fill:#141f31;stroke:#a1a1aa;}
:root[data-theme="dark"] .ctp-plan .ctp-cut-label,
:root[data-theme="dark"] .ctp-plan .ctp-dim-text{fill:#c7d2e2;}
:root[data-theme="dark"] .ctp-plan .ctp-dim{stroke:#a1a1aa;}

/* 对比表：当前材质高亮 */
#ctpCompareTable tbody tr td{font-variant-numeric:tabular-nums;}
#ctpCompareTable tbody tr.is-cur td{
  background:rgba(82,82,91,.10);
  font-weight:800;
  color:var(--ink);
}
#ctpCompareTable tbody tr.is-cur td:first-child::after{
  content:"当前";
  margin-left:6px;
  padding:1px 6px;
  border-radius:999px;
  background:#52525b;
  color:#fff;
  font-size:10px;
  vertical-align:1px;
}

/* 条形图：石材色 */
#ctpBars .bf{background:linear-gradient(90deg,#a1a1aa,#52525b);}
.c60-chip.on{background:rgba(82,82,91,.12);border-color:#52525b;color:#3f3f46;}
:root[data-theme="dark"] .c60-chip.on{color:#e4e4e7;}
.c60-segbtn.on{color:#3f3f46;}