/* 墙纸胶用量计算器 —— 琥珀金 · 纸浆与胶滴 */
.c60{
  --a:#a16207;
  --a2:#facc15;
  --a-soft:rgba(161,98,7,.10);
  --a-line:rgba(161,98,7,.26);
}

/* Hero：纸张纤维纹 + 金色光晕 */
.c60-hero{
  background:
    radial-gradient(660px 320px at 86% 8%, rgba(250,204,21,.45), transparent 66%),
    repeating-linear-gradient(84deg, rgba(161,98,7,.05) 0 1px, transparent 1px 12px),
    linear-gradient(118deg,#fffdf3 0%,#fef3c7 50%,#fde68a 100%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(660px 320px at 86% 8%, rgba(161,98,7,.30), transparent 66%),
    repeating-linear-gradient(84deg, rgba(250,204,21,.05) 0 1px, transparent 1px 12px),
    linear-gradient(118deg,#171204 0%,#211a06 50%,#0f0c02 100%);
}

/* 墙纸卷 + 胶桶 + 胶滴插画 */
.c60-hero-art .wg-paste{
  position:relative;
  width:204px;
  height:172px;
}
.c60-hero-art .wg-paste .wg-roll{
  position:absolute;
  left:8px;top:48px;
  width:54px;height:92px;
  border-radius:26px 6px 6px 26px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.32) 0 2px, transparent 2px 8px),
    linear-gradient(90deg,#fde68a,#a16207 78%);
  box-shadow:0 12px 24px rgba(161,98,7,.22);
}
.c60-hero-art .wg-paste .wg-bucket{
  position:absolute;
  right:34px;bottom:20px;
  width:92px;height:68px;
  border-radius:10px 10px 16px 16px;
  background:linear-gradient(180deg,#facc15,#ca8a04 62%,#854d0e);
  box-shadow:0 12px 22px rgba(161,98,7,.24);
}
.c60-hero-art .wg-paste .wg-bucket::before{
  content:"";
  position:absolute;
  left:8px;right:8px;top:6px;
  height:10px;
  border-radius:6px;
  background:linear-gradient(180deg,#fef9c3,#facc15);
}
.c60-hero-art .wg-paste .wg-drop{
  position:absolute;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:linear-gradient(135deg,#fef08a,#ca8a04);
}
.c60-hero-art .wg-paste .wg-drop.d1{right:120px;top:14px;width:16px;height:16px;}
.c60-hero-art .wg-paste .wg-drop.d2{right:88px;top:2px;width:10px;height:10px;opacity:.8;}
.c60-hero-art .wg-paste .wg-drop.d3{right:52px;top:26px;width:12px;height:12px;opacity:.7;}
.c60-hero-art .wg-paste .wg-stir{
  position:absolute;
  right:84px;bottom:82px;
  width:6px;height:58px;
  border-radius:4px;
  background:linear-gradient(180deg,#78716c,#a8a29e);
  transform:rotate(16deg);
}
:root[data-theme="dark"] .c60-hero-art .wg-paste .wg-roll{
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 2px, transparent 2px 8px),
    linear-gradient(90deg,#a16207,#422006 78%);
  box-shadow:none;
}
:root[data-theme="dark"] .c60-hero-art .wg-paste .wg-bucket{
  background:linear-gradient(180deg,#a16207,#713f12 62%,#3f2a08);
  box-shadow:none;
}
:root[data-theme="dark"] .c60-hero-art .wg-paste .wg-bucket::before{
  background:linear-gradient(180deg,#fde68a,#a16207);
}
:root[data-theme="dark"] .c60-hero-art .wg-paste .wg-drop{
  background:linear-gradient(135deg,#facc15,#a16207);
}
.c60-hero-art .chip{background:rgba(255,255,255,.93);}
:root[data-theme="dark"] .c60-hero-art .chip{background:rgba(23,18,4,.9);}
.c60-hero-art .chip b{color:#a16207;}
:root[data-theme="dark"] .c60-hero-art .chip b{color:#facc15;}

/* 主结果：琥珀 */
.c60-metric.is-hero{
  background:linear-gradient(135deg,#422006,#a16207 48,#f59e0b 100%);
  box-shadow:0 16px 34px rgba(161,98,7,.30);
}
.c60-metric.is-hero .v{font-size:clamp(28px,3.4vw,42px);}

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

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

/* 胶水配比示意 */
.wg-mix{
  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));
}
.wg-mix-bar{
  display:flex;
  height:26px;
  border-radius:999px;
  overflow:hidden;
  background:var(--soft);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.08);
}
.wg-mix-bar .glue{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#a16207,#ca8a04);
  transition:width .35s ease;
}
.wg-mix-bar .water{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#fef08a,#facc15);
  transition:width .35s ease;
}
.wg-mix-legend{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:10px;
  font-size:12.5px;
  color:var(--ink2);
}
.wg-mix-legend .dot{
  display:inline-block;
  width:9px;height:9px;
  margin-right:6px;
  border-radius:3px;
  vertical-align:middle;
}
.wg-mix-legend .dot.g{background:#a16207;}
.wg-mix-legend .dot.w{background:#facc15;}
.wg-mix-legend b{color:var(--ink);font-variant-numeric:tabular-nums;}

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

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

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

/* 提示条 */
.wg-note{
  margin-top:12px;
  padding:11px 14px;
  border-radius:11px;
  border-left:4px solid #a16207;
  background:color-mix(in srgb,var(--a) 7%,var(--card));
  font-size:12.5px;
  line-height:1.75;
  color:var(--ink2);
}
.wg-note b{color:var(--ink);}

@media (max-width:960px){
  .c60-hero-art .wg-paste{transform:scale(.92);}
  .wg-mix-legend{gap:12px;}
}
@media (max-width:640px){
  .wg-sub{margin:16px 0 2px;}
  .c60-metric.is-hero .v{font-size:30px;}
  .wg-mix-legend{font-size:12px;}
}
@media print{
  .c60-hero-art,.c60-batch,.c60-hist,.c60-actions,.c60-seg{display:none!important;}
  .wg-mix{break-inside:avoid;}
  .c60-table-wrap{overflow:visible;}
}