:root {
  --bg: #030d0c;
  --surface: rgba(10, 34, 31, .62);
  --line: rgba(127, 255, 219, .1);
  --text: #e2faf3;
  --muted: #83a9a0;
  --ok: #74f7d3;
  --warn: #f4c46a;
  --bad: #ff7185;
  --off: #83a9a0;
  --none: rgba(131, 169, 160, .18);
  --glow: rgba(116, 247, 211, .13);
  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f8f6; --surface: #fff; --line: rgba(10, 60, 50, .1); --text: #0d2621; --muted: #5b7870;
    --ok: #0f9b77; --warn: #b27b0c; --bad: #d7334d; --off: #7d948e; --none: rgba(10, 60, 50, .1);
    --glow: rgba(15, 155, 119, .1); color-scheme: light;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: radial-gradient(60% 40% at 20% 0%, var(--glow), transparent 70%), var(--bg);
  color: var(--text); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 760px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 16px 40px; }
.muted { color: var(--muted); }
.center { text-align: center; padding: 30px 0; }

.head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.head h1 { font: 500 clamp(19px, 4.5vw, 24px) var(--display); margin: 0; }

.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: currentColor; position: relative; }
.overall { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; margin-bottom: 14px;
  border: 1px solid; background: color-mix(in srgb, currentColor 9%, transparent); }
.overall b { display: block; font: 500 17px var(--display); color: var(--text); }
.overall span:not(.dot) { font-size: 13.5px; color: var(--muted); }
.overall.ok { color: var(--ok); } .overall.warn { color: var(--warn); } .overall.bad { color: var(--bad); }
.overall .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2s ease-out infinite; }
@keyframes ping { to { transform: scale(2.6); opacity: 0; } }

.announce { padding: 14px 18px; border-radius: 14px; margin-bottom: 14px; border-left: 3px solid var(--ok);
  background: var(--surface); }
.announce.warn { border-color: var(--warn); } .announce.bad { border-color: var(--bad); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 6px 20px 14px; margin-bottom: 14px; }
.card h2 { font: 500 15px var(--display); margin: 14px 0 8px; }

.node { padding: 16px 0 12px; border-bottom: 1px solid var(--line); }
.node-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.flag { font-size: 20px; line-height: 1; }
.name { font-weight: 600; margin-right: auto; }
.tag { padding: 2px 10px; border-radius: 999px; font: 500 12px var(--mono); white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.tag.ok { --c: var(--ok); } .tag.bad { --c: var(--bad); } .tag.off { --c: var(--off); }

.load { display: inline-flex; align-items: flex-end; gap: 2px; font-size: 12.5px; color: var(--muted); }
.load i { width: 4px; border-radius: 1px; background: var(--none); }
.load i:nth-child(1) { height: 6px; } .load i:nth-child(2) { height: 9px; } .load i:nth-child(3) { height: 12px; margin-right: 5px; }
.load.low i:nth-child(1), .load.medium i:nth-child(-n+2), .load.high i { background: var(--ok); }
.load.high i { background: var(--warn); }

.bars { display: flex; gap: 2px; height: 30px; cursor: pointer; }
.bars i { flex: 1; border-radius: 2px; background: var(--none); transition: transform .12s, opacity .12s; }
.bars i.ok { background: var(--ok); opacity: .8; } .bars i.warn { background: var(--warn); } .bars i.bad { background: var(--bad); }
.bars i:hover { transform: scaleY(1.15); opacity: 1; }
.node-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 7px; font-size: 12.5px; }
.node-foot b { color: var(--text); font: 500 12.5px var(--mono); }
.tip { font-family: var(--mono); min-height: 1em; }
.legend { display: flex; justify-content: space-between; font-size: 11.5px; padding-top: 10px; }

.inc { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); }
.inc .dot { width: 8px; height: 8px; color: var(--off); transform: translateY(-1px); }
.inc.live .dot { color: var(--bad); }
.inc span.muted { display: block; font-size: 12.5px; }
.foot { text-align: center; font-size: 12.5px; margin-top: 18px; }

@media (max-width: 520px) {
  .card { padding: 4px 14px 12px; }
  .bars { gap: 1px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }