:root{
  --bg:#070b10; --bg2:#0c1219; --panel:#0e1620; --line:#1b2a38;
  --txt:#cfe3d8; --muted:#5e768a; --green:#39ff9e; --cyan:#37d6ff;
  --red:#ff4d6d; --amber:#ffc857; --grid:#10202b;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, #0c2030 0%, transparent 60%),
    radial-gradient(900px 500px at 0% 110%, #0b1a22 0%, transparent 55%),
    var(--bg);
  color:var(--txt);
  font-family:"SFMono-Regular",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  font-size:14px; line-height:1.4;
}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.35}

/* header */
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:16px 24px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,22,32,.9),rgba(7,11,16,.4))}
.brand{display:flex;gap:14px;align-items:center}
.logo{color:var(--green);font-size:26px;text-shadow:0 0 14px var(--green)}
h1{margin:0;font-size:22px;letter-spacing:6px;color:#fff;text-shadow:0 0 18px rgba(57,255,158,.4)}
.sub{color:var(--muted);font-size:12px;letter-spacing:1px}
.sub code,code{color:var(--cyan)}
.status{display:flex;align-items:center;gap:10px;color:var(--green);letter-spacing:2px;font-size:12px}
.status .dot{width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px var(--green);animation:pulse 1.4s infinite}
.muted{color:var(--muted)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:18px 24px}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:10px;padding:14px 16px;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--green),transparent)}
.card .n{font-size:30px;font-weight:700;color:#fff;text-shadow:0 0 16px rgba(55,214,255,.25)}
.card .l{color:var(--muted);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-top:4px}
.card.hot .n{color:var(--green)}
.card .delta{position:absolute;right:12px;top:12px;font-size:11px;color:var(--amber)}

/* layout */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 24px 18px;align-items:start}
.chartbox{position:relative;height:240px;padding:12px 16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.map-panel{grid-column:1 / span 1}
.panel{background:linear-gradient(180deg,rgba(14,22,32,.85),rgba(10,16,22,.85));
  border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.panel-h{display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--line)}
.panel-h h2{margin:0;font-size:13px;letter-spacing:2px;color:var(--cyan);text-transform:uppercase;font-weight:600}

/* map */
#map{height:420px;background:#06090d}
.leaflet-container{background:#06090d;font-family:inherit}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#0e1822;color:var(--txt);
  border:1px solid var(--line);box-shadow:0 0 24px rgba(0,0,0,.6)}
.leaflet-popup-content{margin:10px 12px;font-size:12px;line-height:1.5}
.leaflet-popup-content b{color:var(--green)}
.leaflet-control-attribution{background:rgba(0,0,0,.4)!important;color:#3a4a57!important}
.leaflet-control-attribution a{color:#4a6072!important}

/* feed */
.feed-panel{max-height:476px}
.feed{list-style:none;margin:0;padding:6px 0;overflow-y:auto;flex:1;max-height:430px}
.feed li{display:flex;gap:10px;align-items:baseline;padding:6px 16px;border-bottom:1px solid rgba(27,42,56,.5);
  font-size:12.5px;animation:flash .8s}
@keyframes flash{from{background:rgba(57,255,158,.10)}to{background:transparent}}
.feed .t{color:var(--muted);font-size:11px;min-width:62px}
.feed .ip{color:var(--cyan);min-width:118px}
.feed .ev{min-width:14px}
.feed .txt{color:var(--txt);word-break:break-all}
.ev-ok{color:var(--green)} .ev-fail{color:var(--red)} .ev-cmd{color:var(--amber)} .ev-dl{color:#c08bff}

/* bar lists */
.bars{list-style:none;margin:0;padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.bars li{position:relative;display:flex;justify-content:space-between;align-items:center;
  padding:6px 10px;border-radius:6px;background:#0a121a;overflow:hidden;white-space:nowrap}
.bars li .bar{position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg,rgba(57,255,158,.20),rgba(55,214,255,.05));z-index:0}
.bars li .k{position:relative;z-index:1;overflow:hidden;text-overflow:ellipsis;max-width:78%}
.bars li .n{position:relative;z-index:1;color:var(--green);font-weight:700;margin-left:8px}
.bars.mono .k{font-size:12px;color:#bcd}
.flag{margin-right:6px}

.foot{display:flex;justify-content:space-between;padding:16px 24px;color:var(--muted);
  font-size:11px;border-top:1px solid var(--line);flex-wrap:wrap;gap:8px}

@media(max-width:1000px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid,.grid-3{grid-template-columns:1fr}
}