:root{
  --bg:#070b13; --bg2:#0b1220; --card:#0e1626; --card2:#111c30;
  --line:#1c2942; --line2:#25375a;
  --fg:#e8eefc; --dim:#8ea0c2; --dimmer:#5f7396;
  --ok:#4ade80; --okdim:#1d5f3a;
  --warn:#fbbf24; --crit:#f87171; --critdim:#5c1f22;
  --cy:#22d3ee;
  --r:14px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Lock the page to vertical scrolling only. Wide content (the tables) scrolls
   inside its own container; the page body itself must never drag sideways.
   `clip` rather than `hidden` deliberately — `hidden` creates a scroll container
   and breaks position:sticky on the header. */
html{overflow-x:clip}
body{overflow-x:clip;width:100%;max-width:100%}
@supports not (overflow:clip){
  html,body{overflow-x:hidden}
}
body{
  background:radial-gradient(1200px 700px at 50% -10%,#132038 0%,var(--bg) 60%) no-repeat,var(--bg);
  color:var(--fg); font-family:var(--sans); line-height:1.5;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.wrap{max-width:1080px;margin:0 auto;padding:20px 16px 56px}

/* ---------- header ---------- */
/* Sticky, full-bleed across .wrap. Uses negative margins equal to .wrap's own
   padding rather than a -50vw pseudo-element: the vw approach spilled past the
   viewport and made the whole page drag sideways on a phone. */
.hdr{
  display:flex;align-items:center;gap:14px;
  position:sticky; top:0; z-index:50;
  margin:0 -16px 20px; padding:12px 16px 11px;
  background:rgba(7,11,19,.86);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--line), 0 10px 26px -18px rgba(0,0,0,.95);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr{background:#070b13}
}
.logo{flex:0 0 auto;border-radius:11px;box-shadow:0 6px 24px rgba(34,211,238,.18)}
.hdr-t{flex:1 1 auto;min-width:0}
.hdr h1{margin:0;font-size:1.32rem;letter-spacing:-.015em;font-weight:650}
.sub{margin:2px 0 0;color:var(--dim);font-size:.82rem}
.enable{
  flex:0 0 auto;background:linear-gradient(180deg,#22d3ee,#0ea5b7);color:#04121a;border:0;
  font-weight:700;font-size:.86rem;padding:10px 16px;border-radius:10px;cursor:pointer;
  box-shadow:0 4px 16px rgba(34,211,238,.3)
}
.enable:hover{filter:brightness(1.08)}
.enable[data-state="on"]{background:linear-gradient(180deg,#1e3a5f,#16293f);color:var(--dim);box-shadow:none;cursor:default}

/* ---------- hero ---------- */
.hero{
  border-radius:var(--r); padding:30px 24px 26px; text-align:center;
  border:1px solid var(--line); background:linear-gradient(180deg,var(--card2),var(--card));
  position:relative; overflow:hidden; margin-bottom:14px;
}
.hero::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--dimmer)}
.hero.state-ok::before{background:linear-gradient(90deg,var(--cy),var(--ok))}
.hero.state-silent::before{background:var(--crit)}
.hero.state-waiting::before{background:var(--warn)}
.hero-word{font-size:clamp(2.6rem,11vw,4.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.hero.state-ok      .hero-word{color:var(--ok);text-shadow:0 0 42px rgba(74,222,128,.35)}
.hero.state-silent  .hero-word{color:var(--crit);text-shadow:0 0 42px rgba(248,113,113,.4)}
.hero.state-waiting .hero-word{color:var(--warn)}
.hero-age{margin-top:6px;font-size:clamp(1rem,3.6vw,1.22rem);color:var(--fg);font-weight:500}
.hero-meta{margin-top:10px;color:var(--dim);font-size:.85rem;font-family:var(--mono)}
@keyframes bpm{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.86)}}
.beat{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);
  margin-right:8px;vertical-align:middle;animation:bpm 2s ease-in-out infinite}
.state-silent .beat{background:var(--crit);animation:none}
.state-waiting .beat{background:var(--warn);animation:bpm 1.4s ease-in-out infinite}

/* ---------- banners ---------- */
.banner{
  border-radius:var(--r);padding:14px 16px;margin-bottom:14px;font-size:.93rem;
  border:1px solid var(--line2);display:flex;gap:11px;align-items:flex-start
}
.banner b{display:block;margin-bottom:2px}
.banner.warn{background:rgba(251,191,36,.08);border-color:#7c5e12;color:#fde9b6}
.banner.crit{background:rgba(248,113,113,.09);border-color:#7a2a2d;color:#ffd4d4}
.banner.info{background:rgba(34,211,238,.07);border-color:#1b5566;color:#c8f0f9}
.banner .ico{font-size:1.15rem;line-height:1.2}

/* ---------- cards ---------- */
.card{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:16px;margin-bottom:14px}
.card-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.card-h h2{margin:0;font-size:.94rem;font-weight:650;letter-spacing:.01em}
.card-note{color:var(--dimmer);font-size:.76rem}

/* ---------- 24h strip ---------- */
.strip{display:flex;gap:1px;height:74px;align-items:stretch;
  background:#060a12;border:1px solid var(--line);border-radius:9px;padding:5px;overflow:hidden}
.strip i{flex:1 1 0;border-radius:1.5px;min-width:0}
.strip i.ok{background:linear-gradient(180deg,var(--cy),var(--ok))}
.strip i.thin{background:linear-gradient(180deg,#177a8c,#1f7a48)}
.strip i.gap{background:repeating-linear-gradient(45deg,#3a1417 0 3px,#521c20 3px 6px)}
.strip i.none{background:#0d1626}
.strip-ax{display:flex;justify-content:space-between;color:var(--dimmer);font-size:.7rem;margin-top:6px;font-family:var(--mono)}
.legend{margin:10px 0 0;color:var(--dim);font-size:.76rem;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.sw{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}
.sw.ok{background:linear-gradient(180deg,var(--cy),var(--ok))}
.sw.gap{background:repeating-linear-gradient(45deg,#3a1417 0 3px,#521c20 3px 6px)}
.sw.none{background:#0d1626;border:1px solid var(--line)}

/* ---------- stat grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin-bottom:14px}
.grid.tight{margin-bottom:0}
.stat{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:13px 14px}
.stat .k{color:var(--dim);font-size:.73rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.stat .v{font-size:1.42rem;font-weight:700;font-family:var(--mono);letter-spacing:-.02em;word-break:break-word}
.stat .x{color:var(--dimmer);font-size:.74rem;margin-top:3px;font-family:var(--mono)}
.stat.good .v{color:var(--ok)} .stat.bad .v{color:var(--crit)} .stat.warn .v{color:var(--warn)}
.stat.hero-stat{border-color:#7c5e12;background:rgba(251,191,36,.07)}
.stat.hero-stat.zero{border-color:var(--line);background:var(--card)}

/* ---------- tables ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:.8rem;font-family:var(--mono);white-space:nowrap}
.tbl th{text-align:left;color:var(--dim);font-weight:600;padding:7px 11px 7px 0;border-bottom:1px solid var(--line);
  font-size:.71rem;text-transform:uppercase;letter-spacing:.05em}
.tbl td{padding:7px 11px 7px 0;border-bottom:1px solid #131f33;color:var(--fg)}
.tbl tr:last-child td{border-bottom:0}
.tbl .na{color:var(--warn)}
.tbl td.na-hot{color:var(--warn);font-weight:700}
.tbl td.core-bad{color:var(--crit);font-weight:700}
.tbl td.skew-hot{color:var(--warn)}
.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.7rem;font-weight:700;letter-spacing:.03em}
.pill.critical{background:var(--critdim);color:#ffd4d4}
.pill.high{background:#5c3a12;color:#ffdfae}
.pill.normal{background:var(--okdim);color:#c6f6d9}
.pill.info{background:#1b3a56;color:#c5e6ff}

/* ---------- footer ---------- */
.ftr{display:flex;justify-content:space-between;align-items:center;gap:12px;
  color:var(--dimmer);font-size:.75rem;font-family:var(--mono);margin-top:22px;flex-wrap:wrap}
.lo{color:var(--dimmer)}
.ftr a{color:var(--dimmer)}

/* ---------- login ---------- */
.login-body{display:grid;place-items:center;min-height:100vh}
.login{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px 30px;
  width:min(370px,92vw);text-align:center}
.login img{border-radius:16px;box-shadow:0 8px 30px rgba(34,211,238,.2)}
.login h1{font-size:1.16rem;margin:14px 0 20px;font-weight:650}
.login label{display:block;text-align:left;color:var(--dim);font-size:.78rem;margin-bottom:13px}
.login input{width:100%;margin-top:5px;padding:11px 12px;border-radius:9px;border:1px solid var(--line2);
  background:#060a12;color:var(--fg);font-size:.95rem;font-family:var(--sans)}
.login input:focus{outline:2px solid var(--cy);outline-offset:1px;border-color:transparent}
.login button{width:100%;margin-top:8px;padding:12px;border:0;border-radius:9px;cursor:pointer;
  background:linear-gradient(180deg,#22d3ee,#0ea5b7);color:#04121a;font-weight:750;font-size:.95rem}
.login .err{background:rgba(248,113,113,.12);border:1px solid #7a2a2d;color:#ffd4d4;
  padding:9px;border-radius:9px;font-size:.83rem;margin:0 0 15px}

@media (max-width:560px){
  .wrap{padding:0 11px 44px}
  .hero{padding:24px 15px 21px}
  .enable{padding:9px 13px;font-size:.8rem}
  .hdr{gap:10px;margin:0 -11px 16px;padding:11px 11px 10px}
  .hdr h1{font-size:1.14rem}
  .sub{font-size:.75rem}
  .logo{width:38px;height:38px}
  .strip{height:60px}
  /* Tables are the only thing allowed to scroll horizontally, and only inside
     their own box. */
  .tbl-scroll{overscroll-behavior-x:contain}
}
@media (prefers-reduced-motion:reduce){ .beat{animation:none} }