:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #171717; background: #f6f6f4; }
* { box-sizing: border-box; }
body { margin: 0; }
.page { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 72px; }
.hero { margin-bottom: 24px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
h1 { font-size: clamp(2rem, 7vw, 4rem); margin: .1em 0; }
h2,h3 { margin-top: 0; }
.calculator,.results,.method-note { background: white; border: 1px solid #ddd; border-radius: 14px; padding: 24px; margin-top: 18px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
label, fieldset { display: grid; gap: 6px; font-weight: 650; }
input,select,button { font: inherit; }
input,select { width: 100%; padding: 12px; border: 1px solid #aaa; border-radius: 8px; background: white; }
button { border: 1px solid #777; border-radius: 8px; padding: 11px 14px; background: white; cursor: pointer; }
button.primary { margin-top: 18px; background: #111; color: white; border-color: #111; }
.unit-toggle { display: flex; flex-wrap: wrap; align-items: end; border: 0; padding: 0; }
.unit-toggle legend { width: 100%; margin-bottom: 6px; font-weight: 650; }
.unit-toggle button.active { background: #111; color: white; }
details { margin-top: 18px; }
summary { cursor: pointer; font-weight: 700; }
.advanced { margin-top: 12px; }
.hidden { display: none; }
.primary-result { display: grid; gap: 4px; padding: 22px; border: 2px solid #111; border-radius: 12px; margin-bottom: 18px; }
.primary-result strong { font-size: clamp(2rem,6vw,3.5rem); }
.result-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; }
dt { color: #555; } dd { margin: 0; font-weight: 700; text-align: right; }
.plan { min-height: 170px; border: 3px solid #222; display: grid; place-items: center; padding: 12px; background: #fafafa; }
.section { height: 54px; margin-top: 14px; border: 2px solid #222; display: grid; place-items: center; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 600px; }
th,td { border-bottom: 1px solid #ddd; padding: 10px; text-align: right; } th:first-child,td:first-child { text-align: left; }
.errors { margin-top: 12px; color: #8b0000; }
.warning { padding: 10px 12px; border-left: 4px solid #555; background: #f0f0ed; margin: 8px 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.cta { background: #f0f0ed; padding: 18px; border-radius: 10px; }
.cta small { display: block; margin-top: 8px; color: #555; }
@media (max-width: 680px) { .page { width: min(100% - 20px, 980px); padding-top: 20px; } .grid,.result-grid { grid-template-columns: 1fr; } .calculator,.results,.method-note { padding: 16px; } }
@media print { body { background: white; } .calculator,.hero,.method-note,.actions,.cta { display: none !important; } .results { border: 0; padding: 0; } }

.calculation-record { margin-top: 18px; padding-top: 14px; border-top: 1px solid #ddd; color: #555; font-size: .88rem; line-height: 1.5; }
@media print { .calculation-record { color: #111; } details#methodology { display: block; } details#methodology > div { display: block !important; } }