:root { --navy:#070b1a; --glass:rgba(10,16,38,.72); --line:rgba(255,255,255,.09); --amber:#fbbf24; --cyan:#22d3ee; }
* { box-sizing:border-box; }
html,body,#root { margin:0; height:100%; background:var(--navy); color:#e7ecff; overflow:hidden; }
.syne { font-family:'Syne',sans-serif; }
.mono { font-family:'IBM Plex Mono',monospace; }
.app { position:relative; height:100%; }
.map { position:absolute; inset:0; z-index:0; background:#0b1022; }
.leaflet-container { font-family:'IBM Plex Mono',monospace; }
.plane-icon div { transition:transform .6s; }

.top { position:absolute; top:12px; left:12px; right:372px; z-index:500; pointer-events:none; }
.top > * { pointer-events:auto; }
.brand { position:relative; display:inline-block; padding:10px 18px 8px; border-radius:16px; background:
  radial-gradient(1px 1px at 20% 30%,#fff8,transparent),radial-gradient(1px 1px at 70% 60%,#fff6,transparent),radial-gradient(1px 1px at 45% 80%,#fff5,transparent),var(--glass);
  backdrop-filter:blur(12px); border:1px solid var(--line); overflow:hidden; }
.brand h1 { margin:0; font-size:34px; font-weight:800; letter-spacing:-1px; line-height:1; }
.brand h1 span { color:var(--amber); }
.brand p { margin:2px 0 0; font-size:11px; font-weight:300; opacity:.7; }
.flyer { position:absolute; top:4px; left:-20px; font-size:12px; color:var(--cyan); animation:fly 9s linear infinite; }
@keyframes fly { to { left:110%; } }

.searchbox { display:flex; gap:6px; margin-top:10px; max-width:640px; padding:6px; border-radius:18px; background:var(--glass); backdrop-filter:blur(12px); border:1px solid var(--line); }
.searchbox input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:#fff; padding:8px 10px; font-size:14px; border-radius:12px; }
.searchbox:focus-within { box-shadow:0 0 0 2px var(--amber),0 0 30px #fbbf2440; }
.btn-go { background:var(--amber); color:#120d00; font-weight:800; border-radius:12px; padding:0 16px; font-size:14px; }
.btn-go:hover { filter:brightness(1.1); }
.btn-ghost { border:1px solid var(--line); border-radius:12px; padding:0 12px; font-size:12px; color:var(--cyan); }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center; }
.chip { font-size:11px; padding:4px 10px; border-radius:99px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(8px); }
.chip:hover { border-color:var(--amber); color:var(--amber); }
.chip.recent { border-color:#22d3ee55; color:var(--cyan); }
.radius { display:flex; gap:2px; padding:3px; border-radius:99px; background:var(--glass); border:1px solid var(--line); }
.seg { font-family:'IBM Plex Mono',monospace; font-size:11px; padding:3px 9px; border-radius:99px; opacity:.6; }
.seg.on { background:var(--amber); color:#120d00; opacity:1; font-weight:700; }
.msg { margin-top:8px; display:inline-block; font-size:12px; padding:6px 12px; border-radius:10px; background:#3b1d0acc; border:1px solid #fbbf2455; color:#fde68a; }

.side { position:absolute; top:12px; right:12px; bottom:56px; width:348px; z-index:600; background:var(--glass); backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:20px; display:flex; flex-direction:column; overflow:hidden; }
.handle { display:none; }
.panel-inner { padding:16px; display:flex; flex-direction:column; min-height:0; flex:1; }
.count-head { display:flex; gap:12px; align-items:center; }
.big-num { font-family:'Syne'; font-weight:800; font-size:64px; line-height:.9; color:var(--amber); text-shadow:0 0 30px #fbbf2455; }
.demo-badge { margin-top:8px; font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:1px; color:#fda4af; border:1px dashed #fda4af66; padding:3px 8px; border-radius:8px; align-self:flex-start; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; }
.stat { padding:8px; border-radius:12px; background:#ffffff08; border:1px solid var(--line); min-width:0; }
.list { overflow-y:auto; flex:1; margin:0 -6px; padding:0 6px; }
.row { width:100%; display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:12px; margin-bottom:4px; border:1px solid transparent; }
.row:hover { background:#ffffff0a; }
.row.sel { border-color:var(--amber); background:#fbbf2412; }
.altbar { height:4px; background:#ffffff12; border-radius:4px; overflow:hidden; }
.altbar div { height:100%; border-radius:4px; }
.empty { font-family:'IBM Plex Mono'; font-size:12px; opacity:.6; padding:30px 10px; text-align:center; }

.statusbar { position:absolute; left:50%; transform:translateX(-50%); bottom:14px; z-index:600; display:flex; gap:10px; align-items:center; font-size:12px; padding:6px 14px; border-radius:99px; background:var(--glass); backdrop-filter:blur(12px); border:1px solid var(--line); white-space:nowrap; }
.statusbar button { padding:0 4px; color:var(--cyan); }
.legend { display:flex; gap:4px; align-items:center; font-size:10px; opacity:.75; }
.legend i { width:8px; height:8px; border-radius:50%; display:inline-block; margin-left:4px; }
.foot { position:absolute; right:16px; bottom:18px; z-index:550; font-size:10px; opacity:.6; }
.foot a { color:var(--amber); }

.pulse { width:20px; height:20px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 #fbbf24aa; animation:pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 26px #fbbf2400; } 100% { box-shadow:0 0 0 0 #fbbf2400; } }

.radar { position:absolute; inset:0; z-index:400; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.sweep { width:70vmin; height:70vmin; border-radius:50%; border:1px solid #22d3ee33; background:conic-gradient(from 0deg,#22d3ee00 0deg,#22d3ee33 50deg,#22d3ee00 60deg); animation:spin 1.4s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.sky-pop .leaflet-popup-content-wrapper,.sky-pop .leaflet-popup-tip { background:#0b1230f2; color:#e7ecff; border:1px solid var(--line); border-radius:14px; }
.pop-cs { font-family:'Syne'; font-weight:800; font-size:22px; color:var(--amber); }
.pop-c { font-size:11px; opacity:.6; margin-bottom:6px; }
.pop table { font-size:11px; width:100%; }
.pop td:first-child { opacity:.5; padding-right:8px; }
.pop a { display:block; margin-top:8px; color:var(--cyan)!important; font-size:11px; }

@media (max-width:820px) {
  .top { right:12px; }
  .brand h1 { font-size:26px; }
  .side { top:auto; left:8px; right:8px; bottom:0; width:auto; height:62vh; border-radius:20px 20px 0 0; transform:translateY(calc(100% - 48px)); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
  .side.open { transform:none; }
  .handle { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0 4px; width:100%; }
  .handle span { width:40px; height:4px; border-radius:4px; background:#ffffff40; }
  .handle em { font-size:11px; font-style:normal; color:var(--amber); }
  .statusbar { bottom:58px; font-size:11px; }
  .legend { display:none; }
  .foot { bottom:auto; top:14px; right:14px; }
}