:root { --bg:#0b0f15; --card:#121826; --text:#e6eefc; --muted:#93a4c8; --ok:#3ddc97; --warn:#ffc857; --err:#ff5d73; --accent:#7aa2f7; }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;display:grid;place-items:center;background:radial-gradient(1200px 800px at 20% 10%,#0f1522 0%,var(--bg) 60%);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
.card{width:min(640px,92vw);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px 24px 22px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
h1{margin:0 0 6px;font-weight:700}.muted{color:var(--muted);margin:0 0 16px}
.status{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin:10px 0 18px}
.dot{width:12px;height:12px;border-radius:999px;background:var(--muted)} .dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.err{background:var(--err)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.btn{display:inline-block;text-align:center;padding:10px 14px;border-radius:10px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;border:0}
.btn.outline{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.2)}