:root {
  --bg: #0b0e14;
  --panel: rgba(19, 23, 33, .97);
  --panel-2: #171c28;
  --border: rgba(255,255,255,.08);
  --text: #f4f7fb;
  --muted: #9aa4b5;
  --accent: #7c5cff;
  --accent-2: #20c7ff;
  --online: #39d98a;
  --offline: #6f7889;
  --danger: #ff6a77;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button { color: inherit; }
#app { display: flex; }
.sidebar { width: 390px; min-width: 390px; height: 100%; z-index: 5; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: 12px 0 35px rgba(0,0,0,.28); }
.brand-row { display:flex; align-items:center; gap:12px; padding:18px 18px 10px; }
.brand-mark { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-weight:800; letter-spacing:-.06em; background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 8px 24px rgba(124,92,255,.28); }
.brand-title { font-weight:760; font-size:17px; }
.brand-subtitle { color:var(--muted); font-size:12px; margin-top:2px; }
.search { display:flex; margin: 8px 18px 10px; background:#242a37; border:1px solid rgba(255,255,255,.10); border-radius:15px; box-shadow:0 8px 24px rgba(0,0,0,.22); overflow:hidden; }
.search:focus-within { border-color:rgba(124,92,255,.7); box-shadow:0 0 0 3px rgba(124,92,255,.12); }
.search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); padding:13px 14px; }
.search input::placeholder { color:#8f98aa; }
.search button { width:48px; border:0; background:transparent; cursor:pointer; font-size:24px; color:#cdd4df; }
.quick-filters { display:flex; gap:7px; padding:0 18px 12px; overflow-x:auto; scrollbar-width:none; }
.quick-filters::-webkit-scrollbar{display:none}
.quick-filters button { flex:0 0 auto; border:1px solid var(--border); background:#1d2230; border-radius:999px; padding:8px 11px; cursor:pointer; font-size:12px; color:#c8cfda; }
.quick-filters button.active { background:rgba(124,92,255,.18); border-color:rgba(124,92,255,.55); color:white; }
.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 18px 14px; }
.summary div { background:#151a25; border:1px solid var(--border); border-radius:13px; padding:10px; }
.summary strong { display:block; font-size:18px; }
.summary span { color:var(--muted); font-size:11px; }
.results { flex:1; overflow:auto; padding:0 10px 16px; }
.result-card { display:grid; grid-template-columns:60px 1fr auto; gap:12px; align-items:center; margin:4px 6px; padding:10px; border-radius:14px; cursor:pointer; border:1px solid transparent; }
.result-card:hover { background:#181e2a; border-color:var(--border); }
.thumb { width:60px; height:60px; border-radius:12px; overflow:hidden; background: radial-gradient(circle at 25% 20%, rgba(32,199,255,.35), transparent 28%), linear-gradient(135deg,#28324b,#141925); position:relative; }
.thumb img { width:100%;height:100%;object-fit:cover;display:block; }
.thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45)); pointer-events:none; }
.result-name { font-weight:700; font-size:14px; }
.result-meta { color:var(--muted); font-size:12px; margin-top:3px; line-height:1.4; }
.status-badge { border:1px solid var(--border); color:var(--muted); font-size:11px; padding:5px 7px; border-radius:999px; white-space:nowrap; }
.status-badge.on { color:#7ce8b4; border-color:rgba(57,217,138,.3); background:rgba(57,217,138,.08); }
.details { position:absolute; left:0; top:0; bottom:0; width:390px; background:var(--panel); z-index:7; overflow:auto; }
.hidden { display:none !important; }
.back { position:absolute; z-index:2; left:14px; top:14px; background:rgba(9,12,18,.8); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:8px 11px; cursor:pointer; backdrop-filter:blur(8px); }
.hero { height:210px; background: radial-gradient(circle at 70% 20%, rgba(124,92,255,.65), transparent 28%), radial-gradient(circle at 30% 75%, rgba(32,199,255,.35), transparent 26%), linear-gradient(145deg,#232b43,#0d111b); background-size:cover; background-position:center; }
.detail-content { padding:18px; }
.eyebrow { color:#aab2c1; font-size:12px; text-transform:uppercase; letter-spacing:.14em; }
h1 { margin:7px 0 8px; font-size:27px; line-height:1.1; }
.status-line { display:flex; align-items:center; gap:8px; color:#cbd2dd; font-size:13px; }
.dot { width:8px;height:8px;border-radius:50%;background:var(--offline); }
.dot.on { background:var(--online); box-shadow:0 0 0 4px rgba(57,217,138,.12); }
.details p { color:#b1bac8; line-height:1.55; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; }
.facts div { background:#171c28; border:1px solid var(--border); border-radius:13px; padding:10px; }
.facts span { display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.07em; }
.facts strong { display:block;margin-top:5px;font-size:13px; }
.primary { display:block; text-align:center; padding:12px 15px; border-radius:12px; text-decoration:none; color:white; font-weight:700; background:linear-gradient(135deg,var(--accent),#5b7cff); }
.map-shell { flex:1; position:relative; min-width:0; }
.topbar { position:absolute; z-index:4; top:16px; left:18px; right:18px; display:flex; justify-content:flex-end; align-items:center; gap:10px; pointer-events:none; color:#cfd6e2; font-size:13px; }
.topbar > * { pointer-events:auto; }
.live-pill { display:flex; align-items:center; gap:7px; background:rgba(15,19,28,.82); border:1px solid var(--border); border-radius:999px; padding:7px 10px; backdrop-filter:blur(10px); }
.pulse { width:8px;height:8px;border-radius:50%;background:var(--online);box-shadow:0 0 0 5px rgba(57,217,138,.12); }
.map-viewport { width:100%;height:100%; position:relative; overflow:hidden; cursor:grab; background-color:#111722; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),radial-gradient(circle at 50% 45%,rgba(57,76,112,.35),transparent 45%); background-size:32px 32px,32px 32px,100% 100%; }
.map-viewport.dragging { cursor:grabbing; }
.map-canvas { position:absolute; left:50%;top:50%; transform-origin:0 0; will-change:transform; }
.region-tile { position:absolute; width:210px;height:210px; border:1px solid rgba(255,255,255,.10); border-radius:10px; overflow:hidden; cursor:pointer; background:linear-gradient(150deg,#23304a,#141a27); box-shadow:0 12px 28px rgba(0,0,0,.25); transition:transform .15s ease,border-color .15s ease,filter .15s ease; }
.region-tile:hover { transform:translateY(-3px); border-color:rgba(124,92,255,.65); filter:brightness(1.08); }
.region-tile.offline { filter:saturate(.35) brightness(.75); }
.region-bg { position:absolute; inset:0; width:100%;height:100%;object-fit:cover; opacity:.82; }
.region-pattern { position:absolute; inset:0; background:radial-gradient(circle at 23% 22%,rgba(32,199,255,.28),transparent 17%),radial-gradient(circle at 70% 65%,rgba(124,92,255,.28),transparent 20%),linear-gradient(25deg,transparent 45%,rgba(255,255,255,.06) 46%,rgba(255,255,255,.06) 48%,transparent 49%); }
.region-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.05) 45%,rgba(0,0,0,.82)); }
.region-label { position:absolute; left:12px;right:12px;bottom:11px; }
.region-title { font-weight:760;font-size:14px;text-shadow:0 2px 6px rgba(0,0,0,.6); }
.region-sub { display:flex;justify-content:space-between;gap:8px;color:#d2d9e4;font-size:10px;margin-top:4px; }
.region-pin { width:10px;height:10px;border-radius:50%;background:var(--offline);box-shadow:0 0 0 5px rgba(111,120,137,.15); position:absolute;right:12px;top:12px; }
.region-pin.on { background:var(--online);box-shadow:0 0 0 5px rgba(57,217,138,.15); }
.map-controls { position:absolute; right:18px; bottom:58px; display:flex; flex-direction:column; gap:7px; }
.map-controls button { width:42px;height:42px;border:1px solid var(--border);border-radius:11px;background:rgba(19,23,33,.9);backdrop-filter:blur(10px);font-size:22px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.22); }
.legend { position:absolute; left:18px;bottom:18px;display:flex;gap:14px;background:rgba(19,23,33,.86);border:1px solid var(--border);padding:8px 11px;border-radius:11px;color:#b7c0cf;font-size:11px;backdrop-filter:blur(10px); }
.legend span { display:flex;align-items:center;gap:6px; }
.legend-dot { width:7px;height:7px;border-radius:50%;background:var(--offline); }
.legend-dot.online { background:var(--online); }
@media (max-width: 800px) {
  .sidebar { position:absolute; width:min(92vw,390px); min-width:0; }
  .map-shell { margin-left:0; width:100%; }
  .details { width:100%; }
}