:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #080b10; color: #f4f6f8; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; background: radial-gradient(circle at top, #182131, #080b10 55%); }
.card { width: min(92vw, 540px); padding: 42px; border: 1px solid #293241; border-radius: 24px; background: rgba(15,20,28,.92); box-shadow: 0 30px 80px #0008; }
.eyebrow { color: #7d8ca2; font-size: 12px; letter-spacing: .18em; }
h1 { margin: 8px 0 28px; font-size: 42px; }
h2 { margin-top: 34px; font-size: 14px; color: #a8b3c2; text-transform: uppercase; letter-spacing: .1em; }
.status-line { display: flex; align-items: center; gap: 14px; font-size: 28px; }
.dot { width: 16px; height: 16px; border-radius: 50%; background: #687386; box-shadow: 0 0 18px currentColor; }
.dot.online { background: #23a55a; color: #23a55a; }.dot.idle { background: #f0b232; color: #f0b232; }.dot.dnd { background: #f23f43; color: #f23f43; }.dot.offline { background: #687386; color: #687386; }
form { display: flex; gap: 10px; } input,button { border: 0; border-radius: 10px; padding: 13px 15px; font: inherit; } input { flex: 1; background: #202734; color: white; } button { cursor: pointer; background: #5865f2; color: white; font-weight: 650; }
.muted { color: #8c99aa; }.error { color: #ff7b7e; min-height: 1.5em; }.link { margin-top: 24px; padding-left: 0; background: none; color: #8c99aa; }
ol { padding: 0; list-style: none; } li { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid #252d3a; } time { color: #8491a3; font-size: 13px; }
@media (max-width: 520px) { .card { padding: 28px 22px; } form { flex-direction: column; } }