:root{--accent:#317c72;--cta-color:#255f58;--cta-text:#fff}
body{background:var(--bg)}
.calculator{box-shadow:0 18px 52px #0002}
.hero{padding:24px 48px 22px;background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 8%,var(--panel)),var(--panel))}
.hero:after{width:170px;height:170px;top:-110px;right:-35px;box-shadow:0 0 0 28px #ffffff04}
.hero h1{margin-top:9px;font-size:clamp(26px,4vw,38px);line-height:1.08;letter-spacing:-.045em}
.hero p{margin-top:8px;font-size:14px;line-height:1.45}
.selection-panel,.result-panel{padding-top:27px}
.progress-head{align-items:center}
.progress-head strong{padding:7px 10px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent);font-size:11px;letter-spacing:.08em}
.progress-track{height:5px;margin-top:11px}
.breadcrumbs{margin:15px 0 23px}
.select-heading{align-items:center;margin-bottom:13px}
.select-heading h2{font-size:clamp(27px,3.8vw,37px);margin-top:6px}
.select-heading p{margin-top:7px}
.section-kicker{letter-spacing:.11em}
.step-num{color:color-mix(in srgb,var(--accent) 45%,var(--muted));font-size:38px}
.step-num span{font-size:17px}
.option-grid{max-height:490px}
.cta{background:var(--cta-color);color:var(--cta-text)}
.cta:hover{filter:brightness(1.07)}
.result-tools{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:20px 0 10px;color:var(--muted);font-size:12px;font-weight:700}
.unit-toggle{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.unit-toggle button{min-width:54px;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:12px;font-weight:800}
.unit-toggle button.active{background:var(--panel);color:var(--text);box-shadow:0 1px 5px #0002}
.metrics{margin-top:0}
.metric{background:var(--panel)}
.metric-gain{border-top:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));padding-top:13px}
.metric-gain strong{color:var(--accent)}
.copy-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.copy-gains{min-height:40px;padding:0 15px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text);font-size:12px;font-weight:800}
.copy-gains:hover{border-color:var(--accent);color:var(--accent)}
.copy-row [role=status]{color:var(--accent);font-size:12px;font-weight:700}
.widget-footer span:last-child{font-weight:800;white-space:nowrap}
[data-theme="light"] .hero{background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 9%,white),white)}
[data-theme="light"] .progress-head strong{color:#175c52}
@media(max-width:640px){.hero{padding:20px 20px 18px}.hero h1{font-size:30px}.hero p{font-size:13px}.selection-panel,.result-panel{padding-top:21px}.breadcrumbs{margin:14px 0 21px}.select-heading{gap:12px}.step-num{font-size:32px}.result-tools{justify-content:space-between}.option-grid{max-height:520px}}
@media(max-width:380px){.hero{padding:18px 15px}.hero h1{font-size:27px}.step-num{font-size:28px}}