/* 门套尺寸计算器 —— 深胡桃 + 蜜蜡 · 门框线脚 */
.c60{
  --a:#78350f;
  --a2:#d97706;
  --a-soft:rgba(120,53,15,.10);
  --a-line:rgba(120,53,15,.26);
}

/* 木门：竖向木纹 + 暖光 */
.c60-hero{
  background:
    radial-gradient(640px 300px at 92% 6%, rgba(217,119,6,.20), transparent 62%),
    repeating-linear-gradient(88deg, rgba(120,53,15,.05) 0 1px, transparent 1px 14px),
    linear-gradient(135deg,#fffdf8 0%,#fdf4e7 46%,#f7e2c3 100%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(640px 300px at 92% 6%, rgba(217,119,6,.16), transparent 62%),
    repeating-linear-gradient(88deg, rgba(251,191,36,.05) 0 1px, transparent 1px 14px),
    linear-gradient(135deg,#1a1006 0%,#231607 46%,#0f192b 100%);
}
.c60-hero h1 em{background:linear-gradient(120deg,#78350f,#d97706);-webkit-background-clip:text;background-clip:text;}
.c60-hero-badge{color:#78350f;border-color:rgba(120,53,15,.26);}

/* hero：门框三层线脚 */
.c60-hero-art{min-height:200px;}
.c60-hero-art .df-frame{
  position:relative;
  width:168px;height:184px;
  border-radius:8px;
  background:
    repeating-linear-gradient(92deg, rgba(120,53,15,.12) 0 1px, transparent 1px 8px),
    linear-gradient(160deg,#e8c79a,#c99a5e);
  border:1px solid #b0813f;
  box-shadow:0 20px 42px rgba(120,53,15,.20);
  transform:rotate(-2deg);
}
.c60-hero-art .df-out{
  position:absolute;
  inset:0;
  border:14px solid #8a5423;
  border-radius:6px;
  box-shadow:inset 0 0 0 2px #6b3d17;
}
.c60-hero-art .df-in{
  position:absolute;
  inset:14px;
  border:9px solid #b4763a;
  border-radius:3px;
}
.c60-hero-art .df-leaf{
  position:absolute;
  left:23px;right:23px;top:23px;bottom:0;
  background:
    repeating-linear-gradient(90deg, rgba(120,53,15,.10) 0 2px, transparent 2px 11px),
    linear-gradient(170deg,#f0d6b0,#dcb787);
  border-radius:2px 2px 0 0;
  box-shadow:inset 0 0 0 2px #c69a63;
}
.c60-hero-art .df-handle{
  position:absolute;
  right:34px;top:52%;
  width:9px;height:9px;
  border-radius:50%;
  background:#7c4a1b;
  box-shadow:0 0 0 2px #e6c79b;
}
.c60-hero-art .df-handle::after{
  content:"";
  position:absolute;
  right:6px;top:-2px;
  width:14px;height:5px;
  border-radius:3px;
  background:#7c4a1b;
}
.c60-hero-art .chip b{color:#78350f;}
:root[data-theme="dark"] .c60-hero-art .df-frame{
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.24) 0 1px, transparent 1px 8px),
    linear-gradient(160deg,#7a5124,#553414);
  border-color:#8a5c2b;
  box-shadow:0 20px 42px rgba(0,0,0,.44);
}
:root[data-theme="dark"] .c60-hero-art .df-in{border-color:#9a6a33;}
:root[data-theme="dark"] .c60-hero-art .df-leaf{
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 11px), linear-gradient(170deg,#a87a44,#82582a);
}

/* 主结果 */
.c60-metric.is-hero{
  background:linear-gradient(135deg,#78350f,#92400e 58%,#b45309);
  box-shadow:0 16px 34px rgba(120,53,15,.32);
}

/* 正视图 / 剖面 */
.df-sec{
  margin-top:16px;
  padding:14px 14px 8px;
  border-radius:14px;
  background:linear-gradient(180deg,#fffaf2,#fdf1e0);
  border:1px solid #f0ddc2;
}
:root[data-theme="dark"] .df-sec{
  background:linear-gradient(180deg,#171008,#0f1926);
  border-color:#2c2013;
}
.df-sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.df-sec-h h3{margin:0;font-size:13px;font-weight:900;color:var(--ink2);}
.df-sec-h span{font-size:11.5px;font-weight:800;color:#92400e;}
:root[data-theme="dark"] .df-sec-h span{color:#fcd34d;}
.df-sec svg{display:block;width:100%;height:auto;max-height:300px;}

/* 报价表 */
#dfQuoteTable tbody tr:nth-child(even) td{background:rgba(217,119,6,.05);}
#dfQuoteTable td:first-child{font-weight:800;color:var(--ink);}
#dfQuoteTable td:nth-child(4){font-weight:800;color:#92400e;font-variant-numeric:tabular-nums;}
:root[data-theme="dark"] #dfQuoteTable td:nth-child(4){color:#fcd34d;}
#dfQuoteTable tr.is-total td{background:rgba(217,119,6,.10);font-weight:800;}

.c60-chip.on{background:rgba(217,119,6,.14);border-color:#b45309;color:#78350f;}
:root[data-theme="dark"] .c60-chip.on{color:#fcd34d;}
.c60-bar-row .bf{background:linear-gradient(90deg,#b45309,#d97706);}

#dfWidth,#dfHeight{color:#92400e;font-weight:800;}

@media (max-width:640px){
  .c60-hero-art .df-frame{width:142px;height:158px;}
  .df-sec{padding:10px 10px 4px;}
}