:root { font-family: 'Segoe UI', Arial, sans-serif; color: #fff; background: #0b1220; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.container { width: min(900px, calc(100% - 36px)); margin: 0 auto; padding: 58px 0 35px; }
.eyebrow { color: #38bdf8; font-size: .78rem; font-weight: 800; letter-spacing: .16em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.12; margin: 12px 0; }
h1 span { color: #38bdf8; }
.intro { color: #cbd5e1; line-height: 1.6; max-width: 620px; }
.card { background: #172338; border: 1px solid #334155; border-radius: 18px; padding: 28px; margin-top: 26px; }
h2 { margin: 0 0 23px; font-size: 1.25rem; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
label { display: flex; flex-direction: column; gap: 9px; font-size: .94rem; font-weight: 600; }
input, select { width: 100%; border: 1px solid #64748b; border-radius: 9px; background: #0b1220; color: white; padding: 13px; font: inherit; color-scheme: dark; }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
button { margin-top: 24px; border: 0; border-radius: 10px; background: #38bdf8; color: #071827; padding: 14px 23px; font: inherit; font-weight: 800; cursor: pointer; }
button:hover { background: #7dd3fc; }
button:disabled { opacity: .55; cursor: wait; }
#status { color: #cbd5e1; line-height: 1.6; }
#status:empty { display: none; }
.score-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.score { font-size: 4rem; font-weight: 800; }
.muted { color: #cbd5e1; font-size: .82rem; }
.risk-label { border-radius: 999px; padding: 9px 14px; font-weight: 800; }
.low { background: #14532d; color: #bbf7d0; }
.moderate { background: #713f12; color: #fef08a; }
.high { background: #7f1d1d; color: #fecaca; }
#explanation { line-height: 1.6; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.metrics > div { border: 1px solid #334155; border-radius: 12px; padding: 17px; }
.metrics span { display: block; color: #cbd5e1; font-size: .85rem; }
.metrics strong { display: block; font-size: 1.3rem; margin-top: 10px; }
footer { color: #94a3b8; font-size: .85rem; margin-top: 24px; line-height: 1.5; }
@media(max-width:600px) { .container { padding-top: 30px; } .card { padding: 20px; } .fields, .metrics { grid-template-columns: 1fr; } .score-line { align-items: flex-start; flex-direction: column; } button { width: 100%; } }