:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #f3f6fb; color: #172033; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; }
.card { width: min(100%, 560px); padding: 36px; border: 1px solid #dce4f0; border-radius: 20px; background: #fff; box-shadow: 0 18px 50px #1c355414; }
.eyebrow { margin: 0 0 12px; color: #3559bf; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.8rem, 6vw, 2.5rem); letter-spacing: -.04em; }
.intro { margin: 14px 0 26px; color: #5c6679; line-height: 1.6; }
.status { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 12px; background: #f3f6fb; }
.indicator { width: 12px; height: 12px; margin-top: 5px; flex: 0 0 auto; border-radius: 50%; background: #f2aa3b; }
.indicator.ok { background: #1caa71; }
.indicator.error { background: #dc4d5b; }
.status p { margin: 5px 0 0; color: #5c6679; font-size: .9rem; }
button { margin-top: 20px; padding: 11px 16px; border: 0; border-radius: 9px; background: #294fba; color: white; font: inherit; font-weight: 650; cursor: pointer; }
button:hover { background: #1f3f9b; }
.footer { margin: 24px 0 0; color: #758096; font-size: .82rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }