:root {
  --bg: #0a0c0e; --panel: #14181b; --hairline: #2a3238;
  --text: #c8d1d6; --muted: #7e8b92; --accent: #f0a81e;
  --ok: #43c96a; --notice: #ffe14d; --degraded: #ff7a2f;
  --critical: #e24338; --emergency: #e24338;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 system-ui, sans-serif; }
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.card { background: var(--panel); border: 1px solid var(--hairline);
  padding: 2rem; max-width: 22rem; width: 100%; }
.card h1 { margin-top: 0; font-size: 1.2rem; letter-spacing: .06em; }
.muted { color: var(--muted); }
.err { color: var(--critical); }
.btn { display: inline-block; background: var(--accent); color: #000;
  padding: .6rem 1rem; text-decoration: none; font-weight: 600; }
.topbar { display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--hairline); }
.brand { font-weight: 700; letter-spacing: .08em; }
.chip { padding: .15rem .6rem; border: 1px solid var(--hairline);
  font-size: .8rem; letter-spacing: .05em; }
.chip-ok { border-color: var(--ok); color: var(--ok); }
.chip-notice { border-color: var(--notice); color: var(--notice); }
.chip-degraded { border-color: var(--degraded); color: var(--degraded); }
.chip-critical, .chip-emergency { border-color: var(--critical); color: var(--critical); }
.logout { margin-left: auto; }
.link { background: none; border: none; color: var(--muted); cursor: pointer; }
main { padding: 1rem; }
.grid { display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.tile { background: var(--panel); border: 1px solid var(--hairline); padding: 1rem; }
.tile h2 { margin: 0 0 .25rem; font-size: .95rem; }
.tile-later { opacity: .65; }