/* 洗碗机容量选择计算器 —— 薄荷绿 · 碗篮 */
.c60{
  --a:#059669;
  --a2:#6ee7b7;
  --a-soft:rgba(5,150,105,.10);
  --a-line:rgba(5,150,105,.26);
}

/* 洗后水汽：柔光 + 竖向格栅 */
.c60-hero{
  background:
    radial-gradient(700px 320px at 16% 4%, rgba(255,255,255,.82), transparent 62%),
    repeating-linear-gradient(90deg, rgba(5,150,105,.045) 0 2px, transparent 2px 24px),
    linear-gradient(135deg, #ecfdf5 0%, #d1fae5 48%, #f0fdfa 100%);
}
.c60-hero::before{
  background-image:
    linear-gradient(to right, rgba(5,150,105,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(5,150,105,.05) 1px, transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(80% 80% at 72% 24%, #000 0%, transparent 80%);
  -webkit-mask-image:radial-gradient(80% 80% at 72% 24%, #000 0%, transparent 80%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(700px 320px at 16% 4%, rgba(110,231,183,.13), transparent 62%),
    repeating-linear-gradient(90deg, rgba(110,231,183,.03) 0 2px, transparent 2px 24px),
    linear-gradient(135deg,#04180f 0%,#06231a 48%,#061a2a 100%);
}
:root[data-theme="dark"] .c60-hero::before{
  background-image:
    linear-gradient(to right, rgba(148,163,184,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.09) 1px, transparent 1px);
}

/* 自绘插画：洗碗机碗篮与立盘 */
.c60-hero-art .dw-rack{
  position:relative;
  width:196px;
  height:164px;
  border-radius:18px;
  border:1.5px solid rgba(5,150,105,.38);
  background:linear-gradient(160deg,#ffffff,#ecfdf5 70%,#d1fae5);
  box-shadow:0 18px 36px rgba(5,150,105,.18), inset 0 0 0 7px rgba(5,150,105,.05);
  overflow:hidden;
}
.c60-hero-art .dw-shelf{
  position:absolute;
  left:10px;right:10px;
  top:52%;height:5px;
  border-radius:4px;
  background:linear-gradient(90deg,rgba(5,150,105,.15),rgba(5,150,105,.55),rgba(5,150,105,.15));
  box-shadow:0 20px 0 rgba(5,150,105,.18);
}
.c60-hero-art .dw-plate{
  position:absolute;
  bottom:54%;
  width:26px;
  height:62px;
  border-radius:50% 50% 8px 8px;
  background:linear-gradient(160deg,#ffffff,#bbf7d0 70%,#6ee7b7);
  border:1px solid rgba(5,150,105,.30);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.55);
}
.c60-hero-art .dw-plate.p1{left:34px;transform:rotate(-7deg);}
.c60-hero-art .dw-plate.p2{left:76px;height:70px;transform:rotate(2deg);}
.c60-hero-art .dw-plate.p3{left:118px;transform:rotate(7deg);}
.c60-hero-art .dw-bowl{
  position:absolute;
  bottom:12%;
  width:40px;height:22px;
  border-radius:0 0 20px 20px;
  background:linear-gradient(180deg,#a7f3d0,#34d399);
  border:1px solid rgba(5,150,105,.32);
}
.c60-hero-art .dw-bowl.b1{left:22px;transform:rotate(-6deg);}
.c60-hero-art .dw-bowl.b2{left:72px;transform:rotate(4deg);}
.c60-hero-art .dw-steam{
  position:absolute;
  width:8px;height:38px;
  border-radius:8px;
  background:linear-gradient(180deg,transparent,rgba(5,150,105,.28),transparent);
  animation:dw-steam 4s ease-in-out infinite;
}
.c60-hero-art .dw-steam.s1{right:28px;top:10px;}
.c60-hero-art .dw-steam.s2{right:52px;top:18px;height:28px;animation-delay:1.2s;}
@keyframes dw-steam{0%,100%{transform:translateY(6px);opacity:.25}50%{transform:translateY(-6px);opacity:.75}}
@media (prefers-reduced-motion:reduce){.c60-hero-art .dw-steam{animation:none;}}
:root[data-theme="dark"] .c60-hero-art .dw-rack{
  background:linear-gradient(160deg,#0a1f18,#082319 70%,#062118);
  border-color:rgba(110,231,183,.30);
  box-shadow:0 18px 36px rgba(0,0,0,.34), inset 0 0 0 7px rgba(110,231,183,.04);
}
:root[data-theme="dark"] .c60-hero-art .dw-shelf{background:linear-gradient(90deg,rgba(110,231,183,.12),rgba(110,231,183,.45),rgba(110,231,183,.12));box-shadow:0 20px 0 rgba(110,231,183,.12);}
:root[data-theme="dark"] .c60-hero-art .dw-plate{background:linear-gradient(160deg,#12362a,#0e2a20 70%,#0b3a2a);border-color:rgba(110,231,183,.28);box-shadow:inset 0 0 0 3px rgba(110,231,183,.06);}
:root[data-theme="dark"] .c60-hero-art .dw-bowl{background:linear-gradient(180deg,#0f3a2c,#0c4a36);border-color:rgba(110,231,183,.24);}
:root[data-theme="dark"] .c60-hero-art .dw-steam{background:linear-gradient(180deg,transparent,rgba(110,231,183,.22),transparent);}
.c60-hero-art .chip{background:rgba(255,255,255,.92);}
:root[data-theme="dark"] .c60-hero-art .chip{background:rgba(14,22,38,.88);}
.c60-hero-art .chip b{color:#059669;}
:root[data-theme="dark"] .c60-hero-art .chip b{color:#6ee7b7;}

/* 主结果：深翡翠 */
.c60-metric.is-hero{
  background:linear-gradient(135deg,#065f46,#059669 52%,#34d399 100%);
  box-shadow:0 16px 34px rgba(5,150,105,.30);
}
.c60-metric.is-hero .v{font-size:clamp(28px,3.4vw,42px);}

.c60-segbtn.on{color:#059669;}
:root[data-theme="dark"] .c60-segbtn.on{color:#6ee7b7;}
.c60-chip.on{background:rgba(5,150,105,.12);border-color:#059669;color:#059669;}
:root[data-theme="dark"] .c60-chip.on{color:#6ee7b7;border-color:#6ee7b7;}

.dw-sub{
  position:relative;
  margin:20px 0 2px;
  padding-left:12px;
  font-size:13.5px;
  font-weight:900;
  color:var(--ink);
  letter-spacing:.2px;
}
.dw-sub::before{
  content:"";
  position:absolute;
  left:0;top:5px;bottom:5px;
  width:4px;
  border-radius:4px;
  background:linear-gradient(180deg,#059669,#6ee7b7);
}

/* 条形图：套数年水电 */
.c60-bars{margin-top:10px;}
.c60-bar-row .bf{background:linear-gradient(90deg,#059669,#6ee7b7);}

/* 套数对照表 */
#dwTable td:first-child{font-weight:900;color:var(--ink);}
#dwTable td:nth-child(n+2){font-variant-numeric:tabular-nums;}
#dwTable tbody tr.is-rec td{background:color-mix(in srgb,var(--a) 8%,var(--card));font-weight:800;color:var(--ink);}
#dwTable tbody tr.is-rec td:first-child{color:var(--a);}

/* 安装尺寸卡 */
.dw-size{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.dw-size-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 13px;
  border-radius:11px;
  border:1px solid var(--line);
  background:linear-gradient(160deg,color-mix(in srgb,var(--a) 4%,var(--card)),var(--card));
  font-size:12.5px;
}
.dw-size-row span{color:var(--muted);font-weight:700;}
.dw-size-row b{color:var(--ink);font-weight:900;font-variant-numeric:tabular-nums;}
.dw-size-row:nth-child(4){grid-column:1/-1;}
.dw-size-row:nth-child(4) b{color:var(--a);font-weight:800;}

/* 批次滑杆 */
#dwBatches{background:linear-gradient(to right,#059669 0%,#059669 var(--fill,0%),var(--soft) var(--fill,0%),var(--soft) 100%);}
#dwBatchesOut{color:#059669;font-weight:900;}
:root[data-theme="dark"] #dwBatchesOut{color:#6ee7b7;}

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

:root[data-theme="dark"] .c60-warn{color:#fcd34d;}

@media (max-width:960px){
  .dw-size{grid-template-columns:1fr 1fr;}
  .c60-hero-art .dw-rack{width:166px;height:142px;}
  .c60-hero-art .dw-plate{height:52px;}
  .c60-hero-art .dw-plate.p2{height:60px;}
}
@media (max-width:640px){
  .dw-size{grid-template-columns:1fr;}
  .dw-size-row:nth-child(4){grid-column:auto;}
  .c60-metrics{grid-template-columns:1fr 1fr;}
  .dw-sub{font-size:13px;}
}
@media print{
  .c60-actions,.c60-batch,.c60-hist,.c60-seg,.c60-msg,.c60-hero-art{display:none!important;}
  .c60-card{box-shadow:none;border-color:#ccc;}
  #dwTable{min-width:0;}
  .dw-size{grid-template-columns:1fr 1fr;}
}