:root{
  --bg:#0b1222; --panel:#0f172a; --panel-2:#111827; --text:#e5e7eb; --muted:#94a3b8;
  --accent:#22c55e; --accent-2:#10b981; --line:#172037; --chip:#0ea5e9;
  --danger:#ef4444; --shadow:0 10px 30px rgba(0,0,0,.35);
  --appbar-h:64px; --search-h:64px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
a{color:var(--accent)}
.appbar{
  position:fixed; inset:0 0 auto 0; height:var(--appbar-h); padding:0 12px;
  display:flex; align-items:center; gap:10px; z-index:1002;
  background:linear-gradient(180deg,#0a1121, #0a1121f0 85%, #0a112100);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(8px);
}
.logo{font-size:22px; margin-right:6px}
.brand{font-weight:800; letter-spacing:.2px; display:flex; align-items:center}
.subtitle{opacity:.8}
.bar-divider{opacity:.3}
.grow{flex:1 1 auto}
.counter{opacity:.8; margin-left:10px}
.btn{border:1px solid #223150; background:#121a2d; color:var(--text); padding:.45rem .7rem;
     border-radius:.7rem; cursor:pointer}
.btn.ghost{background:transparent}
.searchbar{
  position:fixed; top:var(--appbar-h); left:0; right:0; z-index:1001;
  display:flex; justify-content:center; padding:10px 12px; background:linear-gradient(180deg,#0a1121f2,#0a1121e6 80%,transparent);
}
.searchbox{ width:min(1100px, 96vw); position:relative }
.searchbox input{
  width:100%; border:1px solid var(--line); background:#0e1629; color:var(--text);
  border-radius:14px; outline:none; padding:14px 44px 14px 14px; font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.searchbox .x{
  position:absolute; right:6px; top:6px; width:36px; height:36px;
  border-radius:18px; border:1px solid var(--line); background:#0b1324; color:#bed4ff;
  cursor:pointer;
}
.results{
  display:none; position:absolute; left:0; right:0; top:calc(100% + 8px); max-height:55vh; overflow:auto;
  border:1px solid var(--line); background:#0b1324; border-radius:12px; box-shadow:var(--shadow);
}
.results.open{ display:block }
.results .item{ padding:10px 12px; border-top:1px solid #0e1a32; cursor:pointer }
.results .item:hover{ background:#0e1a32 }
.results .top{ display:flex; align-items:center; gap:8px }
.results .name{ font-weight:700 }
.results .id{ opacity:.7 }
.results .sub{ opacity:.75; font-size:.92rem }
.results mark{ background:rgba(56,189,248,.25); padding:0 2px }
.chip{ background:rgba(14,165,233,.18); border:1px solid rgba(14,165,233,.38);
       padding:1px 6px; border-radius:10px; font-size:.78rem; margin-left:6px }
#main{ position:fixed; top:calc(var(--appbar-h) + var(--search-h)); left:0; right:0; bottom:0 }
#map{ position:absolute; inset:0; min-height:360px }
.leaflet-container a{ color:#9bc5ff }
.fab{
  position:fixed; right:16px; bottom:18px; height:56px; width:56px; border-radius:50%;
  border:1px solid #223150; background:#111a2a; color:#e6edf7; font-size:30px; line-height:1;
  cursor:pointer; box-shadow:var(--shadow);
}
.leaflet-popup-content input[type="date"],
.leaflet-popup-content input[type="color"],
.leaflet-popup-content input[type="text"],
.leaflet-popup-content textarea{
  width:100%; background:#0b1324; border:1px solid #1f2a43; color:var(--text);
  padding:.45rem .55rem; border-radius:.5rem;
}
.leaflet-popup-content .btn{ background:#0f172a; border-color:#263042 }
.leaflet-popup-content .danger{ background:#1f2937; border-color:#7f1d1d }
@media (max-width:900px){
  :root{ --appbar-h:60px; --search-h:64px; }
  .brand{ font-size:15px }
  .subtitle{ display:none }
}