:root { --bg:#14171a; --panel:#1d2126; --text:#e8e6e1; --muted:#9aa0a6; --line:#2b3138;
  --l0:#4caf50; --l1:#9ccc65; --l2:#ffca28; --l3:#ff8f00; --l4:#d32f2f; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font:15px/1.4 system-ui, sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel); }
.brand { font-weight:700; font-size:18px; }
.brand span { font-weight:400; color:var(--muted); margin-left:8px; }
.server { color:var(--muted); }
.server.on::before, .server.off::before { content:""; display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; }
.server.on::before { background:var(--l0); }
.server.off::before { background:var(--l4); }
main { display:grid; grid-template-columns: 1fr 340px; height: calc(100% - 49px); }
#map { background:#0b1b2a; }
aside { overflow:auto; padding:12px 16px; border-left:1px solid var(--line); background:var(--panel); }
h2 { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:14px 0 8px; }
.bar { height:12px; background:#2b3138; border-radius:6px; overflow:hidden; }
.fill { height:100%; width:0; background:linear-gradient(90deg, var(--l1), var(--l0)); transition:width .6s; }
.muted { color:var(--muted); }
.small { font-size:12px; margin-top:20px; }
.legend { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:4px 6px; font-size:12px; color:var(--muted); margin-bottom:8px; align-items:center; }
.sw { display:inline-block; width:14px; height:14px; border-radius:3px; }
.l0{background:var(--l0)} .l1{background:var(--l1)} .l2{background:var(--l2)} .l3{background:var(--l3)} .l4{background:var(--l4)}
ul { list-style:none; padding:0; margin:0; }
#zones li { display:flex; align-items:center; gap:10px; padding:6px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
#zones li:hover { background:#232930; }
#zones .lvl { width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#111; flex:none; }
#zones .name { flex:1; }
#zones .meta { color:var(--muted); font-size:12px; }
.plain li { padding:4px 0; }
.leaflet-container { font:inherit; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--panel); color:var(--text); }
.zone-label { background:transparent; border:0; box-shadow:none; color:#fff; font-weight:700; text-shadow:0 0 4px #000, 0 0 2px #000; font-size:13px; white-space:nowrap; }
@media (max-width:800px) { main { grid-template-columns:1fr; grid-template-rows: 60vh 1fr; } aside { border-left:0; border-top:1px solid var(--line); } }