:root { --ok:#2e7d32; --warn:#ed6c02; --fail:#c62828; --unknown:#757575;
        --bg:#0f1115; --fg:#e6e6e6; --card:#181b21; }
* { box-sizing:border-box; }
body { margin:0; padding:2rem 1rem; background:var(--bg); color:var(--fg);
       font:16px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif; }
main, header, footer { max-width:52rem; margin:0 auto; }
h1 { font-size:1.4rem; letter-spacing:.02em; }
.pills { list-style:none; padding:0; display:grid; gap:.75rem; }
.pill { background:var(--card); border-radius:.6rem; padding:.9rem 1rem;
        display:grid; grid-template-columns:1fr auto; gap:.25rem 1rem;
        border-left:4px solid var(--unknown); }
.pill .name { font-weight:600; }
.pill .state { text-transform:uppercase; font-size:.75rem; letter-spacing:.08em; }
.pill .detail, .pill .uptime { grid-column:1/-1; font-size:.85rem; opacity:.75; }
.status-ok { border-left-color:var(--ok); }
.status-warn { border-left-color:var(--warn); }
.status-fail { border-left-color:var(--fail); }
.status-unknown { border-left-color:var(--unknown); }
footer p { opacity:.5; font-size:.8rem; }
.login, .logout { display:grid; gap:.75rem; max-width:22rem; margin:1rem 0; }
.login input { width:100%; padding:.5rem; border-radius:.35rem; border:1px solid #333;
               background:#11141a; color:var(--fg); }
button { padding:.55rem 1rem; border-radius:.35rem; border:0; background:#2f6fed;
         color:#fff; font-weight:600; cursor:pointer; }
.events { width:100%; border-collapse:collapse; font-size:.85rem; margin-top:.5rem; }
.events th, .events td { text-align:left; padding:.35rem .5rem; border-bottom:1px solid #262a33; }