:root { --bg:#090b12; --header:#101827; --panel:#161b22; --border:#30363d; --fg:#e6edf3; --muted:#8b949e;
        --accent:#58a6ff; --ok:#3fb950; --ko:#f85149; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:15px/1.5 system-ui, -apple-system, sans-serif; }
a { color:var(--accent); text-decoration:none; }
header { display:flex; align-items:center; gap:1rem; padding:.8rem 1.2rem;
         border-bottom:1px solid var(--border); background:var(--header); }
header .logo { font-weight:700; font-size:1.15rem; color:var(--fg); }
header .logo span { color:var(--accent); }
header .grow { flex:1; }
main { max-width:1100px; margin:1.2rem auto; padding:0 1rem; }
h1 { font-size:1.3rem; } h2 { font-size:1.1rem; margin-top:2rem; }
.muted { color:var(--muted); font-size:.85rem; }
input, select, button { background:var(--bg); color:var(--fg); border:1px solid var(--border);
        border-radius:6px; padding:.45rem .7rem; font:inherit; }
button.primary { background:var(--accent); color:#0d1117; border:none; font-weight:600; cursor:pointer; }
button.danger { color:var(--ko); cursor:pointer; }
button:hover { border-color:var(--accent); }
main.wide { max-width:1400px; }
.searchwrap { position:relative; flex:0 1 380px; }
.searchwrap input { width:100%; padding:.45rem .7rem; }
.dropdown { display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50;
            background:var(--panel); border:1px solid var(--border); border-radius:3px;
            padding:.3rem 0; max-height:60vh; overflow-y:auto; }
.dropdown.open { display:block; }
.dropdown a, .dropdown span { display:block; padding:.35rem .8rem; }
.dropdown a:hover { background:var(--bg); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.45rem; }
.tile { position:relative; overflow:hidden; height:104px; background:var(--panel);
        border:1px solid var(--border); border-radius:3px; cursor:pointer;
        display:block; color:var(--fg); }
.tile:hover { border-color:var(--accent); }
.tile .spark { position:absolute; inset:0; opacity:.55; pointer-events:none; }
.tile-content { position:relative; z-index:1; height:100%; padding:.5rem .65rem;
                display:flex; flex-direction:column; justify-content:space-between; }
.tile .name { font-weight:600; display:flex; align-items:center; gap:.5rem;
              text-shadow:0 1px 3px var(--bg); }
.dot { width:9px; height:9px; border-radius:50%; background:var(--ko); flex:none; }
.dot.on { background:var(--ok); }
.tile .stats { display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted);
               text-shadow:0 1px 3px var(--bg); }
.card { background:var(--panel); border:1px solid var(--border); border-radius:10px;
        padding:1rem; margin:.9rem 0; }
.chart { margin:.5rem 0; }
.ranges button.active { border-color:var(--accent); color:var(--accent); }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--border); }
th { color:var(--muted); font-weight:500; font-size:.85rem; }
.badge { padding:.1rem .5rem; border-radius:99px; font-size:.75rem; border:1px solid var(--border); }
.badge.pub { color:var(--ok); border-color:var(--ok); }
.badge.priv { color:var(--muted); }
code.block { display:block; background:var(--bg); border:1px solid var(--border); border-radius:6px;
             padding:.6rem .8rem; margin:.4rem 0; overflow-x:auto; white-space:pre; font-size:.85rem; }
.enroll { font-size:1.1rem; letter-spacing:.05em; color:var(--ok); font-family:monospace; }
.row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.hops { font-family:monospace; font-size:.85rem; }
dialog { background:var(--panel); color:var(--fg); border:1px solid var(--border); border-radius:10px; }
dialog::backdrop { background:#000a; }
#overlay { position:fixed; left:0; right:0; bottom:0; top:57px; z-index:40;
           background:var(--bg); overflow-y:auto; }
.ov-head { position:sticky; top:0; display:flex; align-items:center; gap:.8rem;
           padding:.6rem 1.2rem; background:var(--header); border-bottom:1px solid var(--border); }
.ov-head h2 { margin:0; font-size:1.1rem; }
#ov-back { font-size:1.2rem; line-height:1; padding:.3rem .7rem; cursor:pointer; }
.ov-body { max-width:1100px; margin:1rem auto; padding:0 1.2rem 2rem; }
.ov-body h3 { font-size:.95rem; color:var(--muted); margin:1.4rem 0 .4rem; }
.u-legend { color:var(--muted); font-size:.75rem !important; }