@font-face{font-family:'DM Sans';src:url('/assets/dm-sans-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/jetbrains-mono-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root{
  --brand:#465FFF; --brand-soft:#eef1ff;
  --ok:#16a34a; --ok-soft:#dcfce7; --warn:#d97706; --warn-soft:#fef3c7; --down:#dc2626; --down-soft:#fee2e2;
  --bg:#f7f8fb; --card:#ffffff; --ink:#0f1729; --muted:#64748b; --line:#e7ebf3; --track:#eef1f6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:880px;margin:0 auto;padding:32px 20px 80px}
a{color:var(--brand);text-decoration:none}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* header */
.top{display:flex;align-items:flex-start;gap:12px;margin-bottom:28px}
.top img{width:34px;height:34px;flex-shrink:0}
.top > div:not(.refresh){flex:1 1 auto;min-width:0}     /* title block shrinks, never pushes the refresh */
.top h1{font-size:19px;font-weight:700;letter-spacing:-.02em}
.top .sub{font-size:12.5px;color:var(--muted);margin-top:1px}
.refresh{margin-left:auto;flex-shrink:0;white-space:nowrap;align-self:flex-start;margin-top:5px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}
.refresh .dot{flex-shrink:0}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

/* hero banner */
.hero{border-radius:18px;padding:26px 28px;margin-bottom:26px;display:flex;align-items:center;gap:18px;color:#fff;position:relative;overflow:hidden;box-shadow:0 12px 40px -16px rgba(0,0,0,.35)}
.hero.ok{background:linear-gradient(135deg,#16a34a,#15803d)}
.hero.degraded{background:linear-gradient(135deg,#f59e0b,#d97706)}
.hero.major_outage{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.hero.maintenance{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.hero.loading{background:linear-gradient(135deg,#64748b,#475569)}
.hero .ico{width:48px;height:48px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.18);border-radius:14px}
.hero .ico svg{width:26px;height:26px;stroke:#fff}
.hero h2{font-size:21px;font-weight:700;letter-spacing:-.02em}
.hero p{font-size:13.5px;opacity:.92;margin-top:3px}

/* section */
.sec-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:30px 4px 12px}

/* service rows */
.svc{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;padding:16px 18px;transition:border-color .2s}
.svc:hover{border-color:#cbd5e1}
.svc-top{display:flex;align-items:center;gap:12px}
.svc .nm{font-weight:600;font-size:15px}
.svc .ds{font-size:12.5px;color:var(--muted);margin-top:1px}
.pill{margin-left:auto;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.operational{color:var(--ok);background:var(--ok-soft)}
.pill.degraded{color:var(--warn);background:var(--warn-soft)}
.pill.down{color:var(--down);background:var(--down-soft)}
.lat{font-size:11.5px;color:var(--muted);margin-left:10px}

/* 90-day uptime bar */
.bar{display:flex;gap:2px;margin-top:13px;height:30px;align-items:flex-end}
.bar i{flex:1;border-radius:2px;background:var(--track);min-width:0;height:100%;transition:transform .1s}
.bar i.up{background:var(--ok)}
.bar i.mid{background:var(--warn)}
.bar i.dn{background:var(--down)}
.bar i{cursor:pointer}
.bar i:hover{transform:scaleY(1.12);filter:brightness(1.05)}

/* day hover tooltip */
.tip{position:fixed;z-index:60;background:#0f1729;color:#fff;border-radius:11px;padding:11px 14px;font-size:12.5px;line-height:1.5;box-shadow:0 12px 32px -8px rgba(0,0,0,.5);pointer-events:none;display:flex;flex-direction:column;gap:5px;min-width:140px;max-width:280px}
.tip b{font-size:13px;font-weight:700;letter-spacing:-.01em;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.12)}
.tip span{color:#c2cbdc;font-size:12px}
.tip .ti{color:#fca5a5;font-weight:600;margin-top:1px;display:flex;gap:5px}
.bar-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:7px}
.bar-meta b{color:var(--ink);font-weight:600}

/* metrics grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.met{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 16px}
.met .k{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:6px}
.met .v{font-size:24px;font-weight:700;margin-top:7px;letter-spacing:-.02em}
.met .v small{font-size:13px;font-weight:600;color:var(--muted)}
.met .gauge{height:5px;border-radius:3px;background:var(--track);margin-top:9px;overflow:hidden}
.met .gauge i{display:block;height:100%;border-radius:3px;background:var(--brand);transition:width .4s}
.met .gauge i.warn{background:var(--warn)} .met .gauge i.crit{background:var(--down)}
.tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px}
.tag.ok{color:var(--ok);background:var(--ok-soft)} .tag.down{color:var(--down);background:var(--down-soft)} .tag.unknown{color:var(--muted);background:var(--track)}

/* incidents */
.inc{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 18px;margin-bottom:9px;display:flex;gap:13px}
.inc .ico{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none}
.inc .ico.resolved{background:var(--ok)} .inc .ico.ongoing{background:var(--down);animation:pulse 2s infinite}
.inc .ico.maint{background:#3b82f6}
.inc .t{font-weight:600;font-size:14px}
.inc .m{font-size:12.5px;color:var(--muted);margin-top:2px}
.empty{text-align:center;color:var(--muted);font-size:13.5px;padding:26px;background:var(--card);border:1px dashed var(--line);border-radius:13px}

.foot{text-align:center;color:var(--muted);font-size:12px;margin-top:46px;line-height:1.9}
.foot a{font-weight:600}
.skel{opacity:.5}
@media(max-width:560px){.wrap{padding:22px 14px 60px}.hero{padding:20px}.hero h2{font-size:18px}.bar{height:24px}}