:root{--bg:#0f1419;--bg2:#161b22;--bg3:#1c2330;--border:#2a3140;--fg:#e6edf3;--muted:#8b949e;--acc:#12b886;--warn:#f59f00;--crit:#e03131;--info:#4dabf7;--ok:#2f9e44}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--info);text-decoration:none}a:hover{text-decoration:underline}
.center{display:flex;align-items:center;justify-content:center;height:100vh}.muted{color:var(--muted)}.small{font-size:12px}.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.nav{display:flex;align-items:center;gap:6px;padding:0 16px;height:52px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.nav .logo{font-weight:700;letter-spacing:.3px;margin-right:12px;color:var(--acc)}.nav a{color:var(--fg);padding:6px 10px;border-radius:6px}.nav a.active,.nav a:hover{background:var(--bg3);text-decoration:none}
.nav .sp{flex:1}.nav select,.nav button{background:var(--bg3);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:5px 8px}
.page{padding:18px 20px;max-width:1500px;margin:0 auto}h1{font-size:20px;margin:0 0 14px}h2{font-size:15px;margin:22px 0 10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.grid{display:grid;gap:12px}.grid.c4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{padding:12px 14px}.stat .v{font-size:26px;font-weight:600}.stat .l{color:var(--muted);font-size:12px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:middle}th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px}
tr.click{cursor:pointer}tr.click:hover{background:var(--bg3)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.ok{color:var(--ok)}.warn{color:var(--warn)}.crit{color:var(--crit)}.info{color:var(--info)}
.b-ok{background:var(--ok)}.b-warn{background:var(--warn)}.b-crit{background:var(--crit)}.b-info{background:var(--info)}.b-mute{background:#3b4452}
.badge{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600;background:var(--bg3);border:1px solid var(--border)}
.badge.crit{background:#3b1416;border-color:#7a1f23}.badge.warn{background:#3d2a05;border-color:#8a5e08}.badge.ok{background:#12351c;border-color:#1f6b33}.badge.info{background:#12283d;border-color:#1f4f7a}
button,.btn{background:var(--bg3);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:6px 12px;cursor:pointer;font:inherit}button:hover{border-color:var(--muted)}
button.primary{background:var(--acc);border-color:var(--acc);color:#04120c;font-weight:600}button.danger{border-color:var(--crit);color:#ff8787}button:disabled{opacity:.5;cursor:default}
input,select,textarea{background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:6px 9px;font:inherit;width:100%}label{display:block;font-size:12px;color:var(--muted);margin:8px 0 3px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px}.form .full{grid-column:1/-1}
.matrix{overflow-x:auto}.matrix td.cell{text-align:center;padding:4px}.cell .c{display:inline-block;min-width:64px;padding:3px 6px;border-radius:6px;font-size:12px;color:#fff}
.c.ok{background:#1f6b33}.c.degraded{background:#8a1c1c}.c.nodata{background:#3b4452;color:#aab}.c.unknown{background:#3b4452}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;width:100%;max-width:760px;max-height:92vh;overflow:auto}
.modal h3{margin:0 0 12px}.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--border)}.tabs a{padding:8px 12px;color:var(--muted);border-bottom:2px solid transparent}.tabs a.active{color:var(--fg);border-color:var(--acc)}
.chart{margin:8px 0 18px}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;margin:4px 0}.legend .sw{display:inline-block;width:12px;height:3px;vertical-align:middle;margin-right:5px}
.toast{position:fixed;bottom:18px;right:18px;background:var(--bg3);border:1px solid var(--border);padding:10px 14px;border-radius:8px;z-index:30;max-width:400px}
.login{max-width:380px;margin:12vh auto;text-align:center}.login h1{font-size:28px;color:var(--acc)}.login .gbtn{display:inline-block;background:#fff;color:#222;padding:10px 18px;border-radius:6px;font-weight:600;margin-top:16px}
pre{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px;overflow:auto;font-size:12px;max-height:420px}
.hops{font-family:ui-monospace,Menlo,monospace;font-size:12px}.hops span{display:inline-block;background:var(--bg3);padding:1px 6px;border-radius:4px;margin:2px}
.uplot{background:transparent}.u-legend{color:var(--fg)}
@media (max-width:700px){.nav{flex-wrap:wrap;height:auto;padding:6px 8px}.page{padding:10px}}

tr.folder td{background:var(--bg3);cursor:pointer;padding:5px 8px}tr.folder:hover td{background:#222a38}.caret{display:inline-block;width:14px;color:var(--muted);cursor:pointer;user-select:none}th.click{cursor:pointer}th.click:hover{color:var(--fg)}button.small{padding:2px 7px;font-size:12px}
.hops-t{table-layout:fixed;width:100%}.hops-t th,.hops-t td{padding:4px 6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hops-t .n{width:26px}.hops-t .ip{width:135px}.hops-t .as{width:42%}.hops-t .num{width:44px;text-align:right}.hops-t .ptr{color:var(--muted)}.hops-t td.asn .badge{max-width:100%}.badge.asn{background:#12283d;border-color:#1f4f7a;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.modal.wide{max-width:1000px}.badge.asn .asname{color:var(--muted);font-weight:400}tr.hop-bad td{background:#2a1416}tr.hop-warn td{background:#2a2312}.hops .badge{margin:1px 0}
.utip{position:absolute;z-index:10;pointer-events:none;background:rgba(22,27,34,.96);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.4)}.utip .tt-t{color:var(--muted);margin-bottom:3px}.utip .sw{display:inline-block;width:10px;height:3px;vertical-align:middle;margin-right:6px}.badge.owner{background:#232a36;border-color:#3a4250;color:#c9d1d9;max-width:240px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.bgp-wrap{display:flex;gap:14px;align-items:flex-start}.bgp-side{width:280px;flex:none}.bgp-asn{padding:6px 8px;border-radius:6px;cursor:pointer;margin:4px 0}.bgp-asn:hover,.bgp-asn.active{background:var(--bg3)}.bgp-graph svg{display:block}.bgp-node{cursor:pointer}.bgp-node:hover rect{filter:brightness(1.25)}.bgp-edge:hover{opacity:1!important;stroke-width:4}.bgp-tip{min-width:180px}.bgp-tip .warn{color:var(--warn)}.bgp-legend{margin:6px 0 10px}
@media (max-width:900px){.bgp-wrap{flex-direction:column}.bgp-side{width:100%}}
.probe-picks{max-height:160px;overflow:auto;border:1px solid var(--border);border-radius:6px;padding:4px 8px}


/* ---- live map (MapLibre) ---- */
.lm-wrap{margin-top:8px}.lm-loading{color:var(--muted);padding:20px}
.lm{position:relative;height:calc(100vh - 140px);min-height:480px;border:1px solid #2b323f;border-radius:10px;overflow:hidden;background:#0d1015;font-family:Inter,"SF Pro Text",Roboto,system-ui,sans-serif;font-weight:300}
.lm:fullscreen{height:100vh;border:none;border-radius:0}
.lm .lm-map,.lm .lm-map.maplibregl-map{position:absolute!important;top:0;left:0;right:0;bottom:0;width:100%!important;height:100%!important}
.lm .maplibregl-ctrl-attrib{background:rgba(13,16,21,.8);color:#7a889b;font-size:10px}.lm .maplibregl-ctrl-attrib a{color:#7a889b}
.lm-ctl{position:absolute;top:18px;right:18px;display:flex;gap:6px;z-index:3}
.lm-seg{display:flex;border:1px solid #1f2937;border-radius:8px;overflow:hidden;background:rgba(22,25,31,.72);backdrop-filter:blur(8px)}.lm-seg button{border:none;border-radius:0;background:transparent;color:#7a889b;padding:5px 10px;font-size:12px}.lm-seg button.on{background:#232936;color:#e6edf3}
.lm-btn{background:#16191f;border:1px solid #2b323f;color:#c9d1d9;border-radius:6px;padding:4px 9px;font-size:14px;line-height:1}
.lm-stats{position:absolute;top:18px;left:18px;z-index:3;background:rgba(22,25,31,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #1f2937;border-radius:10px;padding:10px 14px;font-size:12px;color:#e6edf3;min-width:160px;box-shadow:0 4px 16px rgba(0,0,0,.35)}.lm-stats .k{color:#7a889b;display:inline-block;width:64px}
.lm-panel{position:absolute;bottom:40px;left:18px;z-index:4;background:rgba(22,25,31,.86);backdrop-filter:blur(8px);border:1px solid #1f2937;border-radius:8px;padding:12px 14px;min-width:280px;max-width:380px;color:#e6edf3;font-size:13px}
.lm-panel .lm-x{position:absolute;top:6px;right:8px;background:none;border:none;color:#7a889b;font-size:16px;padding:0 4px}.lm-ph{margin-bottom:8px;font-size:14px}
.lm-kv td{padding:2px 6px 2px 0;font-size:12px}.lm-kv td:first-child{color:#7a889b;white-space:nowrap}
.lm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.lm-chart{margin-top:8px}.lm-chart .uplot{background:transparent}
.lm-foot{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:4px 12px;font-size:11px;color:#7a889b;background:rgba(13,16,21,.85);border-top:1px solid #2b323f}
.lm-ws{display:inline-block;width:12px;color:#ffb300}
.lm-svg{display:block;background:#0d1015;cursor:grab}.svg-land path{fill:#16191f;stroke:#2b323f;stroke-width:1}.svg-lbl{paint-order:stroke;stroke:#101318;stroke-width:3px;stroke-linejoin:round;font-family:Inter,system-ui,sans-serif}.lm-note{color:#ffb300}
.lm-seg .cnt{color:#7a889b;font-size:10px}.lm-btn{background:rgba(22,25,31,.72);backdrop-filter:blur(8px);border-color:#1f2937}
.page.wide{max-width:none;padding:8px 12px}.page.wide .lm{height:calc(100vh - 118px)}
.lm-btn.on{border-color:#00ffaa;color:#00ffaa}
.lm-stats .hint{color:#ffb300;margin-bottom:6px;max-width:220px;white-space:normal}
.lm-stats .lg{margin-top:6px;color:#7a889b;font-size:11px}.lm-stats .lg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 4px 0 6px;vertical-align:middle}.lm-lrow{display:flex;align-items:center;gap:4px;margin:3px 0}.lm-lrow .lm-acts{margin-left:auto}.lm-lrow button.small{padding:1px 6px;font-size:11px;margin-left:3px}