* { box-sizing: border-box; }
html { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f4f6f8; color: #17202a; }
body { margin: 0; }
.shell { width: min(720px, 100%); margin: 0 auto; padding: 20px 14px 48px; }
.card { background: #fff; border-radius: 18px; padding: 20px; margin-bottom: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.hero { padding-top: 26px; }
.eyebrow { margin: 0 0 6px; font-size: .82rem; font-weight: 700; letter-spacing: .08em; color: #5b6670; }
h1 { margin: 0; font-size: clamp(2rem, 9vw, 3.2rem); line-height: 1.08; }
h2 { margin-top: 0; }
.muted { color: #65717c; }
.congestion, .status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.congestion p { grid-column: 1 / -1; margin: 0; }
.label { display: block; color: #65717c; font-size: .88rem; margin-bottom: 4px; }
strong { font-size: 1.55rem; }
label { display: block; font-weight: 700; margin: 0 0 16px; }
.optional { color: #7a8793; font-size: .8rem; font-weight: 500; }
input { width: 100%; margin-top: 7px; padding: 14px 12px; border: 1px solid #cbd2d9; border-radius: 10px; font: inherit; background: #fff; }
input:focus { outline: 3px solid rgba(46, 112, 255, .16); border-color: #2e70ff; }
button { width: 100%; border: 0; border-radius: 12px; padding: 15px 18px; font: inherit; font-weight: 800; cursor: pointer; background: #1f5eff; color: #fff; }
button:disabled { opacity: .55; cursor: not-allowed; }
button.secondary { background: #edf2f7; color: #17202a; }
.error { min-height: 1.4em; color: #b42318; font-weight: 700; }
.turnstile-box { margin: 4px 0 16px; min-height: 1px; }
.status-message { margin-bottom: 0; font-size: 1.15rem; font-weight: 700; }
@media (max-width: 520px) { .congestion, .status-grid { grid-template-columns: 1fr; } .congestion p { grid-column: auto; } }