:root{
  --bg:#06080d;
  --panel:#0e1520;
  --line:#1e2a38;
  --text:#cfe0ff;
  --muted:#8aa0bf;
  --accent:#1789df;
  --accent-2:#1789df;
  --border:#1d2734;
}
*{box-sizing:border-box}
html,body{height:100%}
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Orbitron:wght@700;800&family=Rajdhani:wght@500;600&display=swap');
body{
  margin:0;
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 800px at 20% 15%, rgba(23,137,223,.10), transparent 60%),
              radial-gradient(1000px 700px at 80% 60%, rgba(23,137,223,.06), transparent 60%),
              linear-gradient(180deg, rgba(120,170,255,.04), rgba(0,0,0,0)),
              var(--bg);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    radial-gradient(1200px 800px at 20% 15%, rgba(23,137,223,.10), transparent 60%),
    radial-gradient(1000px 700px at 80% 60%, rgba(23,137,223,.06), transparent 60%),
    linear-gradient(180deg, rgba(120,170,255,.04), rgba(0,0,0,0));
  background-size: 30px 30px, 30px 30px, auto, auto, auto;
  background-position: center, center, center, center, center;
}
.container{max-width:1100px;margin:0 auto;padding:16px}
.header{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:72px;height:72px;border-radius:6px;border:1px solid var(--border);box-shadow:0 0 20px rgba(127,179,255,.35) inset}
.brand h1{font-family:'Orbitron','Cinzel',sans-serif; text-transform:uppercase; font-weight:800; letter-spacing:1px;margin:0;font-size:22px;letter-spacing:.6px;text-transform:uppercase;text-shadow:0 0 10px rgba(127,179,255,.2)}
.nav a{font-family:'Rajdhani','Orbitron',sans-serif; text-transform:uppercase; letter-spacing:.6px;text-decoration:none;color:var(--text);padding:8px 12px;border:1px solid var(--border);border-radius:10px;margin-left:8px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.10))}
.nav a:hover{outline:1px solid var(--accent)}
.subnav{margin-top:6px;color:var(--muted);font-size:13px;letter-spacing:.2px}
.main{display:grid;grid-template-columns: 1.1fr .9fr;gap:18px;margin-top:16px}
.card{background:#0b1119;border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.4)}
.card h3{margin:0;padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;letter-spacing:.5px;color:#d5e4ff}
.card .body{padding:10px 12px}
#map{width:100%;height:520px;background:#0a0f16;border-radius:10px;border:1px solid var(--border);position:relative;overflow:hidden}
.legend{font-size:12px;color:var(--muted);display:flex;gap:16px;margin-top:8px}
.legend .swatch{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;border:1px solid var(--border)}
.legend .red{background:#ff6f70} .legend .white{background:#ddd} .legend .blue{background:#6aa7ff}
.tooltip{position:absolute;pointer-events:none;background:#0c141e;border:1px solid var(--border);padding:6px 8px;border-radius:8px;color:#e8f0ff;font-size:12px;opacity:0;transform:translate(-50%,-140%);white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.featured-empty{color:var(--muted);font-size:13px;padding:8px 10px}
.banner{margin:16px 0;background:#0b1119;border:1px solid var(--border);border-radius:10px;text-align:center;padding:12px;color:#7f97b6;letter-spacing:.3px}
.banner strong{color:#bcd3f6}
.browse{margin:10px 0 12px;font-size:14px}
.browse a{color:var(--accent);text-decoration:none;margin-right:8px;border-bottom:1px dashed transparent}
.browse a:hover{border-bottom-color:var(--accent)}
.footer{margin:18px 0 50px;text-align:center;color:var(--muted);font-size:12px;padding:10px;border-top:1px dashed var(--border)}
.hero{padding:16px;background:#0b1119;border:1px solid var(--border);border-radius:12px;margin:14px 0}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--border);font-size:12px;color:var(--muted)}
code.inline{padding:.2rem .4rem;border:1px solid var(--border);background:#0c141e;border-radius:6px}