:root { color-scheme: light; --ink:#172033; --muted:#64748b; --line:#dbe3ef; --brand:#2563eb; --surface:#fff; --bg:#f4f7fb; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui, sans-serif; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:1rem 4vw; background:#101827; color:#fff; }
.topbar a,.link-button { color:#dbeafe; text-decoration:none; }
.brand { font-size:1.15rem; font-weight:700; }
.topbar nav { display:flex; align-items:center; gap:1.2rem; }
.topbar nav form { margin:0; }
.link-button { border:0; background:none; padding:0; cursor:pointer; font:inherit; }
.container { width:min(1180px,92vw); margin:2rem auto; min-height:75vh; }
footer { padding:1.2rem 4vw; color:var(--muted); border-top:1px solid var(--line); }
h1 { margin:0 0 1.2rem; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.stats-grid article,.login-card,.otp,details { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:1.2rem; }
.stats-grid strong { display:block; font-size:2rem; color:var(--brand); }
.stats-grid span { color:var(--muted); }
.health { display:inline-block; padding:.3rem .7rem; border-radius:999px; }
.healthy { background:#dcfce7; color:#166534; }.unhealthy,.error { background:#fee2e2; color:#991b1b; }
table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); }
th,td { text-align:left; padding:.75rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:#eef3f9; } a { color:#1d4ed8; }
.search { display:flex; gap:.5rem; margin:0 0 1rem; }
input,button { border:1px solid #aebbd0; border-radius:6px; padding:.6rem .75rem; font:inherit; }
button { background:var(--brand); color:#fff; cursor:pointer; }
.login-card { max-width:480px; margin:8vh auto; }
.login-card label,.login-card input { display:block; width:100%; margin:.5rem 0; }
.email-body { white-space:pre-wrap; overflow-wrap:anywhere; background:#fff; border:1px solid var(--line); padding:1rem; max-height:36rem; overflow:auto; }
.otp { display:flex; gap:1rem; align-items:center; margin:1rem 0; }.otp strong { font-size:1.8rem; letter-spacing:.12em; }
code { overflow-wrap:anywhere; }
@media (max-width:700px) { .topbar { align-items:flex-start; gap:1rem; }.topbar nav { flex-wrap:wrap; gap:.7rem; } table { display:block; overflow-x:auto; } }