:root{
  --bg:#140b0a; --panel:#21130f; --panel2:#311a14; --line:#3a221c;
  --ink:#f6ece8; --muted:#c79b8c;
  --accent:coral; --accent2:#ff9b76;
  --teal:#6fd6c8; /* light highlight for the subtitle wave, veers from coral toward teal */
  --ok:#5cd6ad; --warn:#ffb454; --bad:#f0506e; /* --ok is a teal-green, on-theme with --teal */
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100dvh; background:
    radial-gradient(1200px 600px at 80% -10%, #ff7f5033, transparent),
    radial-gradient(900px 500px at -10% 110%, #e85d3a2e, transparent),
    var(--bg);
  color:var(--ink);
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  display:flex; flex-direction:column; align-items:center;
  padding:8vh 24px 12vh;
}
header{text-align:center; margin-bottom:48px}
.mark{
  font-size:clamp(40px,8vw,72px); font-weight:800; letter-spacing:-.04em;
  margin:0; background:linear-gradient(120deg,coral,#ff9b76);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sub{color:var(--muted); margin-top:8px; font-size:15px; min-height:1.4em}
.wch{
  display:inline-block; white-space:pre;
  /* per-letter phase increases left -> right (~19-letter wavelength, length-independent);
     the -60s constant shifts every letter mid-cycle so the whole subtitle animates on frame 1 */
  animation:wave 3.5s linear infinite;
  animation-delay:calc(var(--i) * 0.18s - 60s);
  will-change:transform;
}
/* fine-grained stops approximate a smooth sine (not a triangle); teal flashes around the crest */
@keyframes wave{
  0%    { transform:translateY(0);     color:var(--muted) }
  12.5% { transform:translateY(-4.2px) }
  16%   { color:var(--muted) }
  23%   { color:var(--teal) }
  25%   { transform:translateY(-6px) }
  27%   { color:var(--teal) }
  34%   { color:var(--muted) }
  37.5% { transform:translateY(-4.2px) }
  50%   { transform:translateY(0) }
  62.5% { transform:translateY(4.2px) }
  75%   { transform:translateY(6px) }
  87.5% { transform:translateY(4.2px) }
  100%  { transform:translateY(0);     color:var(--muted) }
}
@media (prefers-reduced-motion:reduce){
  .wch{ animation:none }
}
.grid{
  display:grid; gap:16px; width:100%; max-width:880px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
main.grid{
  display:flex; flex-wrap:wrap; justify-content:center;
}
main.grid a.card{ flex:0 1 280px; }
a.card{
  display:block; text-decoration:none; color:inherit;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
a.card:hover{
  transform:translateY(-3px); border-color:var(--accent);
  box-shadow:0 10px 30px -12px #000a, 0 0 0 1px #ff7f5044;
}
.name{font-weight:650; font-size:17px; display:flex; align-items:center; gap:9px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}
.desc{color:var(--muted); font-size:13.5px; margin-top:6px}

.advanced{ width:100%; max-width:880px; margin-top:20px }
.advanced summary{
  cursor:pointer; list-style:none; color:var(--muted); font-size:14px;
  padding:10px 14px; border:1px solid var(--line); border-radius:12px;
  display:flex; align-items:center; gap:8px; user-select:none;
  transition:border-color .12s ease, color .12s ease;
}
.advanced summary::-webkit-details-marker{display:none}
.advanced summary::before{
  content:"›"; display:inline-block; font-size:18px; line-height:1;
  transition:transform .15s ease; color:var(--teal);
}
.advanced[open] summary::before{ transform:rotate(90deg) }
.advanced summary:hover{ border-color:var(--accent); color:var(--ink) }
.advanced[open] summary{ margin-bottom:16px }

/* ── system vitals: conic-gradient ring gauges, fed by /api/stats.json ── */
@property --p{ syntax:'<number>'; inherits:false; initial-value:0 }
.vitals{
  display:flex; gap:30px; justify-content:center; flex-wrap:wrap;
  margin:0 0 44px; width:100%; max-width:880px;
}
.gauge{ display:flex; flex-direction:column; align-items:center; gap:8px }
.ring{
  --p:0; --ring:var(--accent); --track:#2a1712;
  position:relative; width:110px; height:110px; border-radius:50%;
  background:conic-gradient(var(--ring) calc(var(--p)*1%), var(--track) 0);
  display:grid; place-items:center;
  transition:--p .7s cubic-bezier(.4,0,.2,1), --ring .5s ease;
  filter:drop-shadow(0 6px 18px #0007);
}
.ring::after{
  content:""; position:absolute; inset:9px; border-radius:50%;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
}
.val{
  position:relative; z-index:1; font-weight:750; font-size:23px;
  letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.glabel{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.gsub{ font-size:11.5px; color:var(--muted); min-height:1em; opacity:.85 }
.dot.down{ animation:pulsebad 1.4s ease-in-out infinite }
@keyframes pulsebad{ 0%,100%{opacity:1} 50%{opacity:.35} }
/* if the aggregator is unreachable, fade the rings so it's clear data is stale */
body.stats-stale .ring{ opacity:.45; transition:opacity .4s ease }
@media (prefers-reduced-motion:reduce){
  .ring{ transition:none } .dot.down{ animation:none }
}

/* ── login page ── */
.login-page{ justify-content:flex-start }
.login{
  width:100%; max-width:340px; display:flex; flex-direction:column; gap:16px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:16px; padding:26px 24px;
  box-shadow:0 20px 50px -24px #000c;
}
.login label{
  display:flex; flex-direction:column; gap:7px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.login input{
  font:inherit; color:var(--ink);
  background:#1a0e0b; border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; outline:none; transition:border-color .12s ease, box-shadow .12s ease;
}
.login input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px #ff7f5022 }
.login button{
  font:inherit; font-weight:700; letter-spacing:.02em; cursor:pointer; margin-top:4px;
  color:#1a0e0b; background:linear-gradient(120deg,var(--accent),var(--accent2));
  border:0; border-radius:10px; padding:12px; transition:transform .1s ease, filter .12s ease;
}
.login button:hover{ filter:brightness(1.06) }
.login button:active{ transform:translateY(1px) }
.login button:disabled{ filter:saturate(.4) brightness(.8); cursor:default }
.login .err{ color:var(--bad); font-size:13px; min-height:1.2em; text-align:center }