:root{
  --bg:#f5f5f7;--fg:#1d1d1f;--muted:#6e6e73;--line:rgba(0,0,0,.08);
  --panel:rgba(255,255,255,.72);--panel-solid:#fff;--hover:rgba(0,0,0,.04);
  --accent:#0071e3;--up:#28a745;--degraded:#f5a623;--down:#ff3b30;--isp:#8e8e93;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 30px rgba(0,0,0,.06);
  --r:16px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
:root[data-theme=dark]{
  --bg:#0b0b0d;--fg:#f5f5f7;--muted:#98989d;--line:rgba(255,255,255,.09);
  --panel:rgba(28,28,30,.72);--panel-solid:#1c1c1e;--hover:rgba(255,255,255,.05);
  --accent:#0a84ff;--up:#30d158;--degraded:#ffb340;--down:#ff453a;--isp:#8e8e93;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
body{min-height:100vh;padding:12px 16px 20px;transition:background .3s,color .3s}
h1{font-size:17px;font-weight:600;margin:0;letter-spacing:-.01em}
h2{font-size:15px;font-weight:600;margin:0}
.muted{color:var(--muted)}.small{font-size:12px}
.glass{background:var(--panel);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.topbar{position:sticky;top:8px;z-index:1000;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:10px 14px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:30px;height:30px;color:var(--accent)}
.sub{margin:1px 0 0;font-size:12px;color:var(--muted)}
.badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:99px}
.badge.demo{background:rgba(245,166,35,.16);color:#b26a00;border:1px solid rgba(245,166,35,.4)}
[data-theme=dark] .badge.demo{color:#ffc061}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.search{display:flex;align-items:center;gap:6px;background:var(--hover);border:1px solid var(--line);border-radius:10px;padding:0 10px;height:32px}
.search svg{width:15px;height:15px;color:var(--muted)}
.search input{border:0;background:transparent;color:var(--fg);font:inherit;font-size:13px;outline:0;width:240px}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{font:inherit;font-size:12px;border:1px solid var(--line);background:transparent;color:var(--fg);border-radius:99px;padding:5px 10px;cursor:pointer;transition:background .2s,color .2s}
.chip:hover{background:var(--hover)}
.chip[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:transparent}
.icon-btn{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--hover);color:var(--fg);cursor:pointer;display:grid;place-items:center}
.icon-btn svg{width:17px;height:17px}
select{font:inherit;font-size:12px;color:var(--fg);background:var(--hover);border:1px solid var(--line);border-radius:8px;padding:4px 8px}

.kpis{grid-area:kpis;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0}
.kpi{padding:12px 14px}
.kpi .l{font-size:12px;color:var(--muted)}
.kpi .v{font-size:26px;font-weight:600;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:13px;color:var(--muted);font-weight:500}
.kpi.top{grid-column:span 2}
.toplist{list-style:none;margin:6px 0 0;padding:0;font-size:12px}
.toplist li{display:grid;grid-template-columns:1fr 90px 38px;gap:8px;align-items:center;padding:2px 0;cursor:pointer}
.bar{height:6px;border-radius:3px;background:var(--hover);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width .6s ease}
.v.up{color:var(--up)}.v.degraded{color:var(--degraded)}.v.down{color:var(--down)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"kpis kpis" "map detail" "table events";gap:12px}
.mapwrap{grid-area:map;position:relative;overflow:hidden;height:min(64vh,640px);min-height:380px}
#map{position:absolute;inset:0;background:var(--bg)}
.legend{position:absolute;left:12px;bottom:12px;z-index:500;display:flex;flex-wrap:wrap;gap:10px;font-size:12px;padding:6px 10px;border-radius:10px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.dot.up{background:var(--up)}.dot.degraded{background:var(--degraded)}.dot.down{background:var(--down)}
.detail{grid-area:detail;padding:16px;overflow:auto;height:min(64vh,640px);min-height:380px}
.table{grid-area:table;padding:14px;min-width:0}
.events{grid-area:events;padding:14px;max-height:460px;display:flex;flex-direction:column}
.sect-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tscroll{overflow:auto;max-height:400px}
table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
th{position:sticky;top:0;background:var(--panel-solid);text-align:left;font-weight:500;color:var(--muted);font-size:12px;padding:6px 8px;cursor:pointer;user-select:none;white-space:nowrap;border-bottom:1px solid var(--line)}
th.sorted::after{content:" ▲";font-size:9px}th.sorted.desc::after{content:" ▼"}
td{padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr{cursor:pointer;transition:background .15s}
tbody tr:hover,tbody tr.sel{background:var(--hover)}
.num{text-align:right}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;text-transform:capitalize}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.up{color:var(--up)}.pill.degraded{color:var(--degraded)}.pill.down{color:var(--down)}

#eventFeed{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
#eventFeed li{display:grid;grid-template-columns:8px 1fr;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer;animation:in .35s ease}
#eventFeed li:hover{background:var(--hover)}
#eventFeed .sev{width:8px;height:8px;border-radius:50%;margin-top:5px}
.sev.critical{background:var(--down)}.sev.warning{background:var(--degraded)}.sev.info{background:var(--up)}
#eventFeed time{display:block;font-size:11px;color:var(--muted);margin-top:2px}
@keyframes in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* detail */
.d-empty{color:var(--muted);font-size:14px;text-align:center;margin-top:30%}
.d-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.d-h h2{font-size:18px}
.d-sub{color:var(--muted);font-size:13px;margin:2px 0 12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.stat{background:var(--hover);border-radius:10px;padding:8px 10px}
.stat .l{font-size:11px;color:var(--muted)}.stat .v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;margin:8px 0}
dt{color:var(--muted)}dd{margin:0;font-variant-numeric:tabular-nums;word-break:break-word}
.spark{width:100%;height:70px;display:block}
.spark .in{stroke:var(--accent);fill:none;stroke-width:1.8}
.spark .out{stroke:#af52de;fill:none;stroke-width:1.8}
.spark .area{fill:var(--accent);opacity:.1}
.sl{display:flex;gap:12px;font-size:12px;color:var(--muted)}
.sl b{font-weight:600;color:var(--fg)}
.ul-list{list-style:none;padding:0;margin:6px 0}
.ul-list li{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;background:var(--hover);margin-bottom:6px;cursor:pointer;font-size:13px}
.close{border:0;background:var(--hover);color:var(--fg);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:15px}

/* map */
.leaflet-container{font-family:inherit}
.site-marker{position:relative}
.site-marker .m{width:16px;height:16px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);background:var(--up);transition:background .4s,transform .2s}
.site-marker.hq .m{width:22px;height:22px;border-radius:7px}
.site-marker.isp .m{background:var(--isp);border-radius:4px;width:14px;height:14px}
.site-marker.degraded .m{background:var(--degraded)}.site-marker.down .m{background:var(--down)}
.site-marker.down .m::after,.site-marker.degraded .m::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid currentColor;animation:ping 1.6s ease-out infinite}
.site-marker.down{color:var(--down)}.site-marker.degraded{color:var(--degraded)}
.site-marker.sel .m{transform:scale(1.3)}
.site-marker .lbl{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:3px;white-space:nowrap;font-size:11px;font-weight:600;color:var(--fg);text-shadow:0 0 3px var(--bg),0 0 3px var(--bg),0 0 3px var(--bg);pointer-events:none}
@keyframes ping{from{opacity:.8;transform:scale(.6)}to{opacity:0;transform:scale(1.6)}}
.ul-base{stroke-linecap:round;transition:stroke .4s}
.ul-base.up{stroke:var(--up)}.ul-base.degraded{stroke:var(--degraded)}.ul-base.down{stroke:var(--down);stroke-dasharray:4 6}
.ul-flow{stroke:#fff;stroke-linecap:round;stroke-dasharray:2 14;animation:flow var(--dur,2s) linear infinite;opacity:.9;pointer-events:none}
[data-theme=dark] .ul-flow{stroke:#fff}
.ul-flow.down{display:none}
.ul-base.sel{filter:drop-shadow(0 0 4px currentColor)}
@keyframes flow{to{stroke-dashoffset:-32}}
.leaflet-tooltip.tt{background:var(--panel-solid);color:var(--fg);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);font-size:12px}
[data-theme=dark] .leaflet-control-zoom a,[data-theme=dark] .leaflet-control-attribution{background:rgba(28,28,30,.85);color:#ddd}
[data-theme=dark] .leaflet-control-attribution a{color:#6cb4ff}
.foot{margin-top:14px;font-size:11px;color:var(--muted);text-align:center}

@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}.kpi.top{grid-column:span 3}}
@media (max-width:900px){
  body{padding:8px 10px 16px}
  .layout{grid-template-columns:1fr;grid-template-areas:"map" "kpis" "detail" "table" "events"}
  .topbar .brand{display:none}.hero{padding:18px 16px 14px}.hero-t{margin:4px 0 10px}
  .mapwrap{height:52vh;min-height:320px}
  .detail{height:auto;min-height:0}
  .d-empty{margin:10px 0}
  .search input{width:100%}.search{flex:1}.controls{width:100%}
  .topbar{position:static}
  .kpis{grid-template-columns:repeat(2,1fr)}.kpi.top{grid-column:span 2}
  .kpi .v{font-size:22px}
  .legend .muted{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ul-flow{display:none}
}

/* ===== Premium layer ===== */
:root{--grad:linear-gradient(90deg,#5ac8fa,#0a84ff 45%,#bf5af2)}
:root[data-theme=dark]{--bg:#06070a;--panel:rgba(22,24,30,.62)}
body{background:radial-gradient(1200px 600px at 80% -10%,rgba(10,132,255,.12),transparent 60%),radial-gradient(900px 500px at -10% 10%,rgba(191,90,242,.10),transparent 60%),var(--bg);background-attachment:fixed}
.hero{position:relative;overflow:hidden;border-radius:22px;padding:34px 28px 26px;margin-bottom:12px;background:linear-gradient(135deg,#0b1020,#0a0f1d 60%,#140b22);color:#f5f5f7;border:1px solid rgba(255,255,255,.08)}
:root[data-theme=light] .hero{background:linear-gradient(135deg,#eef4ff,#f7f2ff);color:#1d1d1f;border-color:var(--line)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.o1{width:380px;height:380px;background:#0a84ff;right:-80px;top:-160px}.o2{width:300px;height:300px;background:#bf5af2;left:30%;bottom:-200px;animation-delay:-6s}
:root[data-theme=light] .orb{opacity:.25}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(180deg,#000,transparent)}
:root[data-theme=light] .grid{background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px)}
@keyframes drift{to{transform:translate(-60px,40px) scale(1.15)}}
.hero-in{position:relative}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.65;font-weight:600}
.hero-t{font-size:clamp(30px,5vw,54px);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin:8px 0 14px;background:linear-gradient(92deg,currentColor 30%,#5ac8fa 70%,#bf5af2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hero .muted{color:inherit;opacity:.6}
.status-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:6px 12px 6px 10px;border-radius:99px;background:rgba(48,209,88,.14);color:var(--up);border:1px solid rgba(48,209,88,.35);backdrop-filter:blur(10px);transition:all .4s}
.status-pill i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:beat 2s infinite}
.status-pill.degraded{background:rgba(255,179,64,.14);color:var(--degraded);border-color:rgba(255,179,64,.4)}
.status-pill.down{background:rgba(255,69,58,.14);color:var(--down);border-color:rgba(255,69,58,.4)}
@keyframes beat{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tb-t{font-size:14px;font-weight:600;letter-spacing:-.01em}
.glass{transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.kpi:hover,.events:hover,.table:hover{border-color:rgba(10,132,255,.35)}
.kpi:hover{transform:translateY(-2px)}
.kpi .v{font-size:32px;font-weight:650;letter-spacing:-.03em}
.kpi .l{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.kpi{position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);opacity:.7}
.kpi.k-up::after{background:var(--up)}.kpi.k-deg::after{background:var(--degraded)}.kpi.k-down::after{background:var(--down)}
.chip,.icon-btn,tbody tr,#eventFeed li,.ul-list li{transition:background .2s,transform .15s,color .2s}
.icon-btn:hover,.chip:hover{transform:translateY(-1px)}
.ul-list li:hover{transform:translateX(3px)}
.detail .fade{animation:panel .35s cubic-bezier(.2,.8,.2,1)}
@keyframes panel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.spark{height:90px}.spark .in{stroke:url(#gIn);stroke-width:2.2}.spark .out{stroke:#bf5af2;stroke-width:1.8;opacity:.85}
.spark .area{fill:url(#gArea);opacity:1}
/* map arcs */
.ul-glow{fill:none;stroke-linecap:round;opacity:.35;filter:blur(3px);pointer-events:none;transition:stroke .4s}
.ul-glow.up{stroke:var(--up)}.ul-glow.degraded{stroke:var(--degraded);animation:pulse 1.4s ease-in-out infinite}.ul-glow.down{stroke:var(--down);animation:pulse .9s ease-in-out infinite}
@keyframes pulse{50%{opacity:.85}}
.ul-base{fill:none}.ul-base.up{stroke:url(#arcUp)}.ul-base.degraded{stroke:url(#arcDeg)}
.ul-flow{fill:none;stroke:#fff;stroke-dasharray:1 18;stroke-width:3;filter:drop-shadow(0 0 3px #fff)}
.site-marker .m{border-color:rgba(255,255,255,.95)}
.site-marker .m::before{content:"";position:absolute;inset:-9px;border-radius:50%;background:currentColor;opacity:.18;animation:halo 2.8s ease-in-out infinite}
.site-marker{color:var(--up)}.site-marker.isp{color:var(--isp)}
.site-marker .m{position:relative}
@keyframes halo{50%{transform:scale(1.35);opacity:.06}}
:root[data-theme=dark] .site-marker .lbl{color:#e8e8ed;text-shadow:0 1px 6px #000,0 0 2px #000}
/* toasts */
.toasts{position:fixed;right:18px;top:18px;z-index:2000;display:flex;flex-direction:column;gap:8px;width:min(340px,calc(100vw - 36px));pointer-events:none}
.toast{pointer-events:auto;display:grid;grid-template-columns:10px 1fr;gap:10px;padding:12px 14px;border-radius:14px;background:var(--panel);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.25);font-size:13px;cursor:pointer;animation:tin .45s cubic-bezier(.2,.9,.2,1.1)}
.toast.out{animation:tout .35s ease forwards}
.toast b{display:block;font-size:12px;text-transform:capitalize;margin-bottom:2px}
.toast .sev{width:10px;height:10px;border-radius:50%;margin-top:3px;box-shadow:0 0 10px currentColor}
@keyframes tin{from{opacity:0;transform:translateX(40px) scale(.96)}}
@keyframes tout{to{opacity:0;transform:translateX(40px)}}
/* NOC wall */
.noc-exit{display:none;position:fixed;right:16px;bottom:16px;z-index:2100;font:inherit;font-size:12px;color:var(--fg);padding:8px 14px;border-radius:99px;cursor:pointer;opacity:.4}
.noc-exit:hover{opacity:1}
body.noc{padding:10px}
body.noc .hero,body.noc .topbar,body.noc .table,body.noc .foot{display:none}
body.noc .noc-exit{display:block}
body.noc .layout{grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"kpis kpis" "map detail" "map events";grid-template-rows:auto 1fr}
body.noc .mapwrap{height:calc(100vh - 170px)}
body.noc .detail{height:calc(55vh - 80px)}
body.noc .events{max-height:none}
body.noc .kpis{margin-top:0}
@media (max-width:900px){.hero{padding:24px 18px 20px}.toasts{top:auto;bottom:14px}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}}

/* basemap: OSM standard tiles; dark mode is a CSS-filtered night render */
.leaflet-tile-pane{transition:filter .4s}
:root[data-theme=dark] .leaflet-tile-pane{filter:invert(1) hue-rotate(185deg) brightness(.78) contrast(1.1) saturate(.35)}
:root[data-theme=light] .leaflet-tile-pane{filter:saturate(.55) brightness(1.03)}

/* ===== Scale layer: site list, clusters, borough badges (150–500 sites) ===== */
.layout{grid-template-columns:330px minmax(0,1fr) 340px;grid-template-areas:"kpis kpis kpis" "list map detail" "table table events"}
.kpis{grid-template-columns:repeat(4,1fr) 2fr}
.kpi.top{grid-column:auto}
button.kpi{font:inherit;color:inherit;text-align:left;cursor:pointer}
button.kpi[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.k-up[aria-pressed=true]{border-color:var(--up);box-shadow:0 0 0 1px var(--up),var(--shadow)}
.k-deg[aria-pressed=true]{border-color:var(--degraded);box-shadow:0 0 0 1px var(--degraded),var(--shadow)}
.k-down[aria-pressed=true]{border-color:var(--down);box-shadow:0 0 0 1px var(--down),var(--shadow)}
.ks{font-size:11px;color:var(--muted);margin-top:2px}
.sites{grid-area:list;padding:14px;display:flex;flex-direction:column;gap:8px;height:min(64vh,640px);min-height:380px;min-width:0}
.sites .sect-h{margin:0;gap:8px}.sites .sect-h h2{flex:1}
.sites .search{height:34px}.sites .search input{width:100%}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.filters select{width:100%;min-width:0;padding:5px 6px}
.link{border:0;background:none;color:var(--accent);font:inherit;font-size:12px;cursor:pointer;padding:0}
.site-list{list-style:none;margin:0 -6px;padding:0;overflow:auto;flex:1;overscroll-behavior:contain}
.site-list li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 8px;border-radius:10px;cursor:pointer;font-size:13px;transition:background .15s}
.site-list li:hover,.site-list li:focus-visible{background:var(--hover);outline:0}
.site-list li.sel{background:rgba(10,132,255,.14)}
.site-list .sd{width:9px;height:9px;border-radius:50%;background:var(--up)}
.site-list .sd.degraded{background:var(--degraded);box-shadow:0 0 0 3px rgba(255,179,64,.2)}.site-list .sd.down{background:var(--down);box-shadow:0 0 0 3px rgba(255,69,58,.22)}
.sn{min-width:0}.sn b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn span,.sm span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm{text-align:right;font-variant-numeric:tabular-nums}.sm em{font-style:normal;color:var(--down);font-weight:600}
.site-list li.empty{display:block;cursor:default}
.ex{color:#b26a00}[data-theme=dark] .ex{color:#ffc061}
/* pins: healthy = small quiet dot; problems = big, pulsing, on top */
.site-marker.branch.up .m{width:10px;height:10px;border-width:1.5px;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.site-marker.branch.up .m::before{display:none}
.site-marker.branch.up{margin:2px}
.site-marker.branch.degraded .m,.site-marker.branch.down .m{width:20px;height:20px;margin:3px}
.site-marker.branch .m::before{animation:none}
.site-marker.degraded .m::after,.site-marker.down .m::after{inset:-8px;animation:ping 1.5s ease-out infinite}
.site-marker.down .m{box-shadow:0 0 14px var(--down)}
.site-marker.sel .m{transform:scale(1.35);box-shadow:0 0 0 3px var(--accent)}
.site-marker{cursor:pointer}
.cluster{display:grid;place-items:center;border-radius:50%;font-weight:700;font-size:13px;color:#fff;background:color-mix(in srgb,var(--up) 85%,#000);box-shadow:0 0 0 5px color-mix(in srgb,var(--up) 28%,transparent),0 4px 14px rgba(0,0,0,.3);cursor:pointer;transition:transform .2s}
.cluster.degraded{background:color-mix(in srgb,var(--degraded) 90%,#000);box-shadow:0 0 0 5px color-mix(in srgb,var(--degraded) 30%,transparent),0 4px 14px rgba(0,0,0,.3)}
.cluster.down{background:var(--down);box-shadow:0 0 0 5px color-mix(in srgb,var(--down) 30%,transparent),0 4px 14px rgba(0,0,0,.3)}
.cluster:hover{transform:scale(1.08)}
.boro-badge{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:14px;background:var(--panel);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.28);cursor:pointer;color:var(--fg);transition:transform .2s}
.boro-badge:hover{transform:translate(-50%,-50%) scale(1.05)}
.boro-badge .bn{font-weight:650;font-size:14px;letter-spacing:-.01em;display:flex;align-items:center;gap:6px}
.boro-badge .bn i{width:8px;height:8px;border-radius:50%;background:var(--up)}
.boro-badge.degraded .bn i{background:var(--degraded)}.boro-badge.down .bn i{background:var(--down);box-shadow:0 0 8px var(--down)}
.boro-badge.down{border-color:rgba(255,69,58,.45)}
.boro-badge .bc{font-size:12px}.boro-badge .bc b{font-weight:600}
.boro-badge b.up{color:var(--up)}.boro-badge b.degraded{color:var(--degraded)}.boro-badge b.down{color:var(--down)}
.sheet-btn,.sheet-grip,.sheet-x{display:none}
body.noc .sites{display:none}
body.noc .layout{grid-template-columns:minmax(0,1fr) 380px}
@media (max-width:1250px){
  .layout{grid-template-columns:300px minmax(0,1fr);grid-template-areas:"kpis kpis" "list map" "detail events" "table table"}
  .detail{height:auto;max-height:520px}
}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(4,1fr)}.kpi.top{grid-column:span 4}}
@media (max-width:900px){
  .layout{grid-template-columns:1fr;grid-template-areas:"map" "kpis" "detail" "table" "events"}
  .kpis{grid-template-columns:repeat(2,1fr)}.kpi.top{grid-column:span 2}
  .sheet-btn{display:flex;align-items:center;gap:6px;position:absolute;right:10px;top:10px;z-index:700;font:inherit;font-size:13px;font-weight:600;color:var(--fg);padding:8px 12px;border-radius:99px;cursor:pointer}
  .sheet-btn b{background:var(--fg);color:var(--bg);border-radius:99px;padding:1px 7px;font-size:11px}
  .sites{position:fixed;left:0;right:0;bottom:0;z-index:1800;height:72vh;min-height:0;border-radius:20px 20px 0 0;padding:6px 14px 14px;transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);background:var(--panel-solid)}
  body.sheet-open .sites{transform:none}
  .sheet-grip{display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 4px;background:var(--muted);opacity:.4}
  .sheet-x{display:block}
  .filters{grid-template-columns:1fr 1fr}
  .boro-badge{padding:5px 8px;border-radius:11px}.boro-badge .bn{font-size:12px}.boro-badge .bc{font-size:10.5px}
  body.noc .sites{display:none}
}
@media (prefers-reduced-motion:reduce){.site-marker.degraded .m::after,.site-marker.down .m::after{display:none}}
body[data-map-mode=city] .site-marker .lbl{display:none}
body[data-map-mode=city] .site-marker.isp .m{width:10px;height:10px;opacity:.7}
@media (max-width:900px){body[data-map-mode=city] .site-marker.hq .m{width:16px;height:16px}}
.sites .search{flex:none}
/* ===== Always-on flow layer ===== */
.fl-base{fill:none;stroke-linecap:round;opacity:.38;transition:opacity .3s}
.fl-base.up{stroke:var(--up)}.fl-base.degraded{stroke:var(--degraded);opacity:.6}.fl-base.down{stroke:var(--down);stroke-dasharray:5 6;opacity:.75}
.fl-base.backup{stroke:#bf5af2;opacity:.85}
.fl-base.site{opacity:.28}.fl-base.site.down{opacity:.7}.fl-base.site.backup{opacity:.85}
:root[data-theme=dark] .fl-base.up{stroke:#5ac8fa}
.fl-flow{fill:none;stroke:#fff;stroke-linecap:round;stroke-dasharray:1 16;opacity:.75;animation:flow 2s linear infinite;transition:opacity .3s}
:root[data-theme=light] .fl-flow{stroke:#0a3d91;opacity:.55}
.fl-flow.off{display:none}
body.flow-focus .fl-base{opacity:.08}body.flow-focus .fl-flow{opacity:.12}
.flow-btn[aria-pressed=true]{background:var(--accent);color:#fff;border-color:transparent}
.flow-key{display:inline-flex;align-items:center;gap:5px}.fk-bk{width:14px;height:3px;border-radius:2px;background:#bf5af2}
body.flows-off .flow-key{display:none}
/* focused site: bright + thick */
.ul-base{stroke-width:5px}
@media (prefers-reduced-motion:reduce){.fl-flow{display:none}}
:root .fl-base.backup{stroke:#bf5af2;opacity:.9}
body[data-map-mode=clusters] .fl-base.up{opacity:.3}
body[data-map-mode=clusters] .fl-flow{opacity:.45}
@media (min-width:901px){.toasts{top:80px}}
:root body.flow-focus .fl-base{opacity:.08}:root body.flow-focus .fl-flow{opacity:.1}
:root body.flow-focus .fl-base{opacity:.08}:root body.flow-focus .fl-flow{opacity:.1}
/* ===== Borough hubs ===== */
.site-marker.hub .m{width:28px;height:28px;border-radius:9px;margin:3px;background:var(--up);border:3px solid #fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 45%,transparent),0 4px 14px rgba(0,0,0,.4)}
.site-marker.hub .m::before{display:none}
.site-marker.hub.degraded .m{background:var(--degraded)}.site-marker.hub.down .m{background:var(--down)}
.site-marker.hub .m::after{content:"H";position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;border:0;animation:none}
.site-marker.hub .lbl{font-size:12px;font-weight:700;margin-top:6px}
body[data-map-mode=city] .site-marker.hub .lbl{display:block}
.hubtag{font-size:9px;font-weight:800;letter-spacing:.06em;background:var(--accent);color:#fff;border-radius:4px;padding:1px 4px;margin-right:6px;vertical-align:1px}
.kpis{grid-template-columns:repeat(5,1fr) 1.8fr}
.hubdots{display:inline-flex;gap:3px;vertical-align:-1px}.hd{width:9px;height:9px;border-radius:3px;background:var(--up);cursor:pointer}.hd.degraded{background:var(--degraded)}.hd.down{background:var(--down)}
.k-hub.down .v{color:var(--down)}.k-hub.degraded .v{color:var(--degraded)}.k-hub.up .v{color:var(--up)}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(5,1fr)}.kpi.top{grid-column:span 5}}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.kpi.top,.k-hub{grid-column:span 2}}
.sn .hubtag{display:inline;font-size:9px;color:#fff}
/* ===== Dual uplinks ===== */
.site-list .ld{display:flex;flex-direction:column;gap:3px}
.ld i{width:9px;height:9px;border-radius:50%;background:var(--up);position:relative}
.ld i[data-r=S]{border-radius:2px}
.ld i.degraded{background:var(--degraded)}.ld i.down{background:var(--down)}.ld i.missing{background:transparent;border:1.5px dashed var(--muted)}
.site-list li{grid-template-columns:12px minmax(0,1fr) auto}
.sm em.bk{color:#bf5af2}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.pc{background:var(--hover);border-radius:12px;padding:9px 10px;font-size:12px;display:flex;flex-direction:column;gap:2px;cursor:pointer;border:1px solid transparent}
.pc:hover{border-color:var(--line)}
.pc.down{border-color:rgba(255,69,58,.45)}.pc.missing{border:1px dashed var(--muted);cursor:default}
.pc .pt{display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.pc .pt .pill{text-transform:capitalize;letter-spacing:0;font-size:11px}
.pc b{font-size:14px}
.badge.warn{background:rgba(255,69,58,.14);color:var(--down);border:1px solid rgba(255,69,58,.4);cursor:help}
/* map: primary solid, secondary fine dotted */
.fl-base.secondary{stroke-dasharray:1 5;stroke-linecap:round}
.fl-base.secondary.up{stroke:#bf5af2;opacity:.45}:root[data-theme=dark] .fl-base.secondary.up{stroke:#d08cff}
.fl-base.ring{opacity:.5}
.fk-p,.fk-s{width:16px;height:3px;border-radius:2px;background:#5ac8fa}
.fk-s{background:repeating-linear-gradient(90deg,#bf5af2 0 2px,transparent 2px 5px)}
.fk-bk{background:#ff9f0a!important}
:root .fl-base.backup{stroke:#ff9f0a;opacity:.95;stroke-dasharray:none}
.ul-base.secondary:not(.down){stroke-dasharray:2 7}
/* ===== Data centers + mesh ===== */
.site-marker.dc .m{width:38px;height:38px;border-radius:11px;margin:3px;background:var(--up);border:3px solid #fff;box-shadow:0 0 0 5px color-mix(in srgb,#bf5af2 50%,transparent),0 6px 18px rgba(0,0,0,.45)}
.site-marker.dc .m::before{display:none}
.site-marker.dc.degraded .m{background:var(--degraded)}.site-marker.dc.down .m{background:var(--down)}
.site-marker.dc .m::after{content:"DC";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;border:0;animation:none}
.site-marker.dc .lbl{font-size:12.5px;font-weight:800;margin-top:7px}
body[data-map-mode=city] .site-marker.dc .lbl{display:block}
.hubtag.dc{background:#bf5af2}
.fl-base.mesh{opacity:.32;stroke-dasharray:none}.fl-base.mesh.up{stroke:#8e8e93}:root[data-theme=dark] .fl-base.mesh.up{stroke:#c7c7cc}
.fl-base.dci.up{stroke:#bf5af2;opacity:.7}
.kpis{grid-template-columns:repeat(6,1fr) 1.7fr}
@media (max-width:1250px){.kpis{grid-template-columns:repeat(6,1fr)}.kpi.top{grid-column:span 6}}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.kpi.top{grid-column:span 2}.k-hub{grid-column:auto}}
body[data-map-mode=clusters] .fl-base.secondary.up{opacity:.22}body[data-map-mode=city] .fl-base.secondary.up{opacity:.35}
/* attribution: tiny "i" button, OSM credit revealed on tap */
.leaflet-bottom.leaflet-right{display:flex;align-items:flex-end;gap:6px;padding:0 8px 8px 0}
.leaflet-control-attribution.attr-collapsed{display:none;margin:0!important;font-size:11px;padding:4px 10px!important;border-radius:99px;background:var(--panel)!important;color:var(--fg)!important;backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border:1px solid var(--line);box-shadow:var(--shadow)}
.leaflet-control-attribution.attr-open{display:block}
.leaflet-control-attribution a{color:var(--accent)!important}
.attr-i{pointer-events:auto;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--panel);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);color:var(--muted);font:italic 600 12px/1 Georgia,"Times New Roman",serif;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow);opacity:.75;order:2}
.attr-i:hover,.attr-i[aria-expanded=true]{opacity:1;color:var(--fg)}

/* six KPI tiles, no latency tile */
.kpis{grid-template-columns:repeat(6,1fr)}
@media (max-width:1250px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.k-hub{grid-column:auto}}