:root{
  --bg:#0a0a0b; --surface:#161618; --surface-2:#1d1d20;
  --border:#27272a; --border-hover:#3f3f46;
  --text:#fafafa; --muted:#a1a1aa; --faint:#71717a;
  --accent:#60a5fa;
  --ok:#34d399; --warn:#fbbf24; --crit:#f87171; --off:#52525b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(1.25rem,4vw,3rem) 1.1rem;
}
.wrap{width:100%;max-width:1100px}

/* header */
header{margin-bottom:1.5rem}
.brand{display:flex;align-items:center;gap:.6rem}
.logo{font-size:clamp(1.6rem,5vw,2.4rem);font-weight:800;letter-spacing:-.03em}
.logo .accent{color:var(--accent)}
.tagline{color:var(--muted);font-size:.9rem;margin-top:.3rem}
#updated{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}
.stale-tag{color:var(--warn);border:1px solid var(--warn);border-radius:6px;
  padding:.05rem .4rem;font-size:.72rem;margin-left:.4rem}
.live{width:9px;height:9px;border-radius:50%;background:var(--off);display:inline-block;transition:background .3s}
.live.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}

/* banner */
.banner{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  border:1px solid var(--border);border-radius:14px;padding:.9rem 1.1rem;margin-bottom:1rem;
  background:var(--surface);font-size:1.05rem}
.banner .bdot{width:13px;height:13px;border-radius:50%;flex:0 0 auto}
.banner.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--border))}
.banner.ok .bdot{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.banner.warn{border-color:color-mix(in srgb,var(--warn) 50%,var(--border))}
.banner.warn .bdot{background:var(--warn);box-shadow:0 0 10px var(--warn)}
.banner.crit{border-color:color-mix(in srgb,var(--crit) 55%,var(--border))}
.banner.crit .bdot{background:var(--crit);box-shadow:0 0 10px var(--crit)}
.banner.unknown .bdot{background:var(--off)}
.bcounts{margin-left:auto;display:flex;gap:.4rem}
.pill{font-size:.74rem;padding:.12rem .55rem;border-radius:999px;border:1px solid var(--border)}
.pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--border))}
.pill.crit{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,var(--border))}

/* source pills */
.sources{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.75rem}
.src{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;padding:.2rem .6rem}
.src .sdot{width:8px;height:8px;border-radius:50%;background:var(--off)}
.src.ok .sdot{background:var(--ok)}
.src.err{color:var(--crit)}
.src.err .sdot{background:var(--crit)}

/* sections */
h2{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text);margin:1.9rem .15rem .85rem}
h2 .hmeta{color:var(--faint);font-weight:500;text-transform:none;letter-spacing:0;font-size:.8rem}
section:first-of-type h2{margin-top:0}

.grid{display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}

/* machine card */
.card{background:var(--surface);border:1px solid var(--border);border-left-width:3px;
  border-radius:12px;padding:.8rem .9rem}
.card.s-ok{border-left-color:var(--ok)}
.card.s-warn{border-left-color:var(--warn)}
.card.s-crit,.card.s-down{border-left-color:var(--crit)}
.card.s-off,.card.s-unknown{border-left-color:var(--off);opacity:.72}
.chead{display:flex;align-items:center;gap:.45rem}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--off)}
.s-ok .dot{background:var(--ok)}
.s-warn .dot{background:var(--warn)}
.s-crit .dot,.s-down .dot{background:var(--crit);box-shadow:0 0 7px var(--crit)}
.mname{font-weight:600;font-size:.98rem}
.mkind{margin-left:auto;color:var(--faint);font-size:.72rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
.mrole{color:var(--muted);font-size:.76rem;margin:.1rem 0 .15rem}
.mstate{color:var(--faint);font-size:.82rem;margin:.45rem 0;text-transform:uppercase;letter-spacing:.05em}

/* metric bars */
.metric{display:flex;align-items:center;gap:.5rem;margin-top:.4rem}
.mlabel{width:2.4rem;color:var(--faint);font-size:.72rem;text-transform:uppercase}
.bar{flex:1;height:7px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.fill{display:block;height:100%;border-radius:4px;background:var(--ok)}
.fill.warn{background:var(--warn)}
.fill.crit{background:var(--crit)}
.mval{width:2.6rem;text-align:right;font-size:.74rem;color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.warns{list-style:none;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.15rem}
.warns li{color:var(--warn);font-size:.76rem}
.s-crit .warns li,.s-down .warns li{color:var(--crit)}

.cfoot{display:flex;flex-wrap:wrap;gap:.3rem .6rem;margin-top:.55rem;
  padding-top:.5rem;border-top:1px solid var(--border)}
.svc{color:var(--muted);font-size:.74rem}
.up,.cnote{color:var(--faint);font-size:.72rem;margin-left:auto}
.cnote{font-style:italic}

/* wireguard peers */
.wtag{font-size:.74rem;margin-left:.3rem}
.wtag.up{color:var(--ok)} .wtag.stale{color:var(--warn)} .wtag.down{color:var(--crit)}
.peers{display:flex;flex-direction:column;gap:.4rem}
.peer{display:flex;align-items:center;gap:.7rem;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:.5rem .8rem;font-size:.84rem}
.peer .dot{background:var(--off)}
.peer.w-up .dot{background:var(--ok)}
.peer.w-stale .dot{background:var(--warn)}
.peer.w-down .dot{background:var(--crit)}
.pname{font-weight:600;min-width:6rem}
.phub{color:var(--accent);font-size:.72rem;font-family:ui-monospace,Menlo,monospace}
.page{color:var(--muted);font-size:.76rem}
.pep{margin-left:auto;color:var(--faint);font-size:.74rem;
  font-family:ui-monospace,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{color:var(--faint);font-size:.84rem}

footer{margin-top:2.5rem;text-align:center;color:var(--faint);font-size:.78rem}
footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--border)}
footer a:hover{color:var(--accent)}

@media(max-width:560px){
  .pep{display:none}
  .bcounts{margin-left:0;width:100%}
}

/* discrete bar widths (CSP forbids inline style) */
.w0{width:0} .w5{width:5%} .w10{width:10%} .w15{width:15%} .w20{width:20%}
.w25{width:25%} .w30{width:30%} .w35{width:35%} .w40{width:40%} .w45{width:45%}
.w50{width:50%} .w55{width:55%} .w60{width:60%} .w65{width:65%} .w70{width:70%}
.w75{width:75%} .w80{width:80%} .w85{width:85%} .w90{width:90%} .w95{width:95%}
.w100{width:100%}