:root{
  --ground:#04060d; --panel:#080d1c; --line:#1d4d8a;
  --sys:#3fb4ff; --glow:#8fe6ff; --text:#dbe9ff; --muted:#6c86ad;
  --loss:#ff3b5c; --lossSoft:#ffb3c0; --lossLine:#7a2236; --ok:#42d392;
  --display:'Rajdhani','Exo 2',system-ui,sans-serif;
  --body:'Exo 2',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--body);min-height:100vh;padding:24px 16px;
  background-image:linear-gradient(rgba(63,180,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(63,180,255,.05) 1px,transparent 1px);
  background-size:48px 48px;overflow-x:hidden}
.cut{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sys)}
.head .tag{display:flex;align-items:center;gap:8px}
.head .tag::before{content:"";width:8px;height:8px;background:var(--sys);box-shadow:0 0 10px var(--glow);transform:rotate(45deg)}
.head .live{color:var(--muted);display:flex;align-items:center;gap:8px}
.head .live b{color:var(--glow);font-weight:500}
.head .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);transition:background .3s}
.head .live.warn::before{background:#f5b53f;box-shadow:0 0 8px #f5b53f}
.head .live.down::before{background:var(--loss);box-shadow:0 0 8px var(--loss)}