:root { --blue: #2b5392; --bright-blue: #58b4e6; --yellow: #f3c154; --ink: #313131; --muted: #6f737a; --canvas: #f6f7fa; --success: #33a875; --danger: #bb0f0b; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/1.5 "Avenir Next", "Helvetica Neue", Arial, sans-serif; }
.page-shell { max-width: 1280px; margin: 0 auto; padding: 2rem 1.25rem 2.5rem; }
.hero { margin-bottom: 1.4rem; padding: 2rem 2.25rem 1.85rem; color: #fff; background: var(--blue); border-bottom: 5px solid var(--yellow); border-radius: 14px; box-shadow: 0 10px 24px rgb(43 83 146 / 18%); }
.hero p { max-width: 50rem; margin: .9rem 0 0; color: #e6f2fa; }
.eyebrow, .section-kicker { margin: 0 0 .65rem; color: var(--bright-blue); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero .eyebrow { color: var(--yellow); }
h1, h2 { margin: 0; color: var(--blue); letter-spacing: -.02em; }
h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.65rem); font-weight: 300; letter-spacing: .015em; line-height: 1.1; text-transform: uppercase; }
h1 strong { font-weight: 800; }
h2 { padding-bottom: .55rem; margin-bottom: 1rem; border-bottom: 2px solid var(--bright-blue); font-size: 1.3rem; }
.calculator-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.input-stack, .results-stack { display: grid; gap: 1rem; }
.results-stack { position: sticky; top: 1rem; }
.card { padding: 1.45rem; background: #fff; border: 1px solid #e2e5ea; border-radius: 14px; box-shadow: 0 4px 18px rgb(43 83 146 / 7%); }
label { display: grid; gap: .35rem; margin: 1rem 0; color: var(--ink); font-size: .92rem; font-weight: 700; }
label:first-of-type { margin-top: 0; }
label output { justify-self: end; margin-top: -1.75rem; color: var(--blue); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--blue); }
select { width: 100%; padding: .65rem .7rem; color: var(--ink); background: #fff; border: 1px solid #cdd4df; border-radius: 7px; font: inherit; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.stat-note { margin: .75rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.score-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.score-number { margin: 0; color: var(--blue); font-size: 4rem; font-weight: 800; letter-spacing: -.06em; line-height: .95; font-variant-numeric: tabular-nums; }
.score-number small { color: #949599; font-size: 1.15rem; font-weight: 600; letter-spacing: 0; }
.level-badge { display: inline-grid; width: 92px; height: 92px; place-items: center; border-radius: 50%; color: #fff; font-size: 2.4rem; font-weight: 800; }
.progress-track, .bar-track { overflow: hidden; background: #e8ecf2; border-radius: 999px; }
.progress-track { height: 10px; }
.progress-fill, .bar-fill { height: 100%; border-radius: inherit; transition: width .15s ease-out; }
.bars { display: grid; gap: .65rem; }
.bar-row { display: grid; grid-template-columns: minmax(8.5rem, 1.25fr) minmax(3rem, 2fr) 3.75rem; gap: .65rem; align-items: center; }
.bar-name { font-size: .84rem; line-height: 1.22; }
.bar-track { height: .7rem; }
.bar-value { font-size: .84rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.category-detail { display: block; margin-top: .15rem; color: #949599; font-size: .7rem; font-weight: 400; }
footer { margin: 1.5rem .25rem 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
@media (max-width: 850px) { .calculator-grid { grid-template-columns: 1fr; } .results-stack { position: static; } }
@media (max-width: 560px) { .page-shell { padding: 1rem; } .hero, .card { padding: 1.25rem; } .field-grid { grid-template-columns: 1fr; } .bar-row { grid-template-columns: minmax(7.5rem, 1.25fr) minmax(2.5rem, 1fr) 3.25rem; gap: .45rem; } }