/* 地毯面积计算器 —— 酒红 · 编织纹理 */
.c60{
  --a:#9f1239;
  --a2:#fb7185;
  --a-soft:rgba(159,18,57,.10);
  --a-line:rgba(159,18,57,.26);
}

/* Hero：织物斜纹 + 玫瑰光晕 */
.c60-hero{
  background:
    radial-gradient(680px 320px at 88% 10%, rgba(251,113,133,.44), transparent 66%),
    repeating-linear-gradient(45deg, rgba(159,18,57,.055) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(159,18,57,.035) 0 2px, transparent 2px 8px),
    linear-gradient(118deg,#fff5f7 0%,#ffe4ea 50%,#fecdd3 100%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(680px 320px at 88% 10%, rgba(159,18,57,.30), transparent 66%),
    repeating-linear-gradient(45deg, rgba(251,113,133,.05) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(251,113,133,.035) 0 2px, transparent 2px 8px),
    linear-gradient(118deg,#1a0710 0%,#260a17 50%,#12040a 100%);
}

/* 卷材 + 方块毯插画 */
.c60-hero-art .ca-weave{
  position:relative;
  width:204px;
  height:172px;
}
.c60-hero-art .ca-weave .ca-roll{
  position:absolute;
  left:6px;top:26px;
  width:62px;height:112px;
  border-radius:10px 26px 26px 10px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.30) 0 2px, transparent 2px 7px),
    linear-gradient(90deg,#fb7185,#9f1239 72%);
  box-shadow:0 12px 24px rgba(159,18,57,.24);
}
.c60-hero-art .ca-weave .ca-tile{
  position:absolute;
  width:46px;height:46px;
  border-radius:5px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 5px),
    linear-gradient(145deg,#fda4af,#e11d48);
  box-shadow:0 6px 14px rgba(159,18,57,.18);
}
.c60-hero-art .ca-weave .ca-tile.t1{right:58px;top:24px;transform:rotate(-3deg);}
.c60-hero-art .ca-weave .ca-tile.t2{right:4px;top:44px;transform:rotate(4deg);}
.c60-hero-art .ca-weave .ca-tile.t3{right:52px;bottom:34px;transform:rotate(2deg);opacity:.85;}
.c60-hero-art .ca-weave .ca-tile.t4{right:2px;bottom:6px;transform:rotate(-4deg);opacity:.92;}
.c60-hero-art .ca-weave .ca-pile{
  position:absolute;
  left:0;bottom:6px;
  width:92px;height:12px;
  border-radius:999px;
  background:repeating-linear-gradient(90deg,#9f1239 0 3px,#fda4af 3px 6px);
  opacity:.72;
}
:root[data-theme="dark"] .c60-hero-art .ca-weave .ca-roll{
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 2px, transparent 2px 7px),
    linear-gradient(90deg,#be123c,#4c0519 72%);
  box-shadow:none;
}
:root[data-theme="dark"] .c60-hero-art .ca-weave .ca-tile{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 5px),
    linear-gradient(145deg,#9f1239,#4c0519);
  box-shadow:none;
}
:root[data-theme="dark"] .c60-hero-art .ca-weave .ca-pile{
  background:repeating-linear-gradient(90deg,#be123c 0 3px,#7f1d3a 3px 6px);
}
.c60-hero-art .chip{background:rgba(255,255,255,.93);}
:root[data-theme="dark"] .c60-hero-art .chip{background:rgba(26,7,16,.9);}
.c60-hero-art .chip b{color:#9f1239;}
:root[data-theme="dark"] .c60-hero-art .chip b{color:#fb7185;}

/* 主结果：酒红 */
.c60-metric.is-hero{
  background:linear-gradient(135deg,#4c0519,#9f1239 50%,#e11d48 100%);
  box-shadow:0 16px 34px rgba(159,18,57,.30);
}
.c60-metric.is-hero .v{font-size:clamp(28px,3.4vw,42px);}

/* 分段与滑杆 */
.c60-segbtn.on{color:#9f1239;}
:root[data-theme="dark"] .c60-segbtn.on{color:#fb7185;}
#caWaste{background:linear-gradient(to right,#9f1239 0%,#9f1239 var(--fill,10%),var(--soft) var(--fill,10%),var(--soft) 100%);}
#caWasteOut{color:#9f1239;font-weight:900;}
:root[data-theme="dark"] #caWasteOut{color:#fb7185;}

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

/* 材料构成环图 */
.ca-cost-wrap{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  align-items:center;
  margin-top:10px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(155deg,color-mix(in srgb,var(--a) 5%,var(--card)),var(--card));
}
.ca-cost-wrap .c60-donut{display:grid;place-items:center;color:var(--ink);}
.ca-legend{display:flex;flex-direction:column;gap:7px;}
.ca-legend .row{
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  font-size:12.5px;
  color:var(--ink2);
}
.ca-legend .dot{width:10px;height:10px;border-radius:3px;}
.ca-legend .nm{font-weight:800;color:var(--ink);}
.ca-legend .vl{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:800;white-space:nowrap;}

/* 模式对比表 */
#caModeTable td:first-child{font-weight:900;color:var(--ink);}
#caModeTable td:nth-child(n+2){font-variant-numeric:tabular-nums;}
#caModeTable tr.is-on td{background:color-mix(in srgb,var(--a) 9%,var(--card));font-weight:800;color:var(--ink);}

/* 条形图 */
#caBars .c60-bar-row .bf{background:linear-gradient(90deg,#9f1239,#fb7185);}

/* 批量表 */
#caBatchTable td:first-child{font-weight:800;color:var(--ink);}
#caBatchTable td:nth-child(n+2){font-variant-numeric:tabular-nums;}
#caBatchTable tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--a) 3%,transparent);}
#caBatchTable tbody tr.is-total td{background:color-mix(in srgb,var(--a) 8%,var(--card));font-weight:900;color:var(--ink);}

/* 模式速览 */
.ca-mode-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.ca-mode-chips span{
  padding:6px 11px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--soft);
  font-size:12px;
  font-weight:800;
  color:var(--ink2);
}
.ca-mode-chips b{color:var(--a);}

@media (max-width:960px){
  .ca-cost-wrap{grid-template-columns:1fr;justify-items:center;}
  .ca-legend{width:100%;}
  .c60-hero-art .ca-weave{transform:scale(.92);}
}
@media (max-width:640px){
  .ca-sub{margin:16px 0 2px;}
  .ca-legend .row{font-size:12px;}
  .c60-metric.is-hero .v{font-size:30px;}
}
@media print{
  .c60-hero-art,.c60-batch,.c60-hist,.c60-actions,.c60-seg{display:none!important;}
  .ca-cost-wrap{break-inside:avoid;}
  .c60-table-wrap{overflow:visible;}
}
