:root {
  --bg: #0a1024;
  --panel: rgba(255,255,255,0.92);
  --line: #d9e2f2;
  --text: #0f172a;
  --muted: #51607a;
  --accent: #2563eb;
  --accent2: #1d4ed8;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background: radial-gradient(1000px 500px at 20% -10%, #60a5fa55, transparent 50%), radial-gradient(1000px 500px at 90% -20%, #a78bfa44, transparent 55%), var(--bg);
  color:var(--text);
}

.gate { min-height:100vh; display:grid; place-items:center; padding:16px; }
.gate-card { width:min(420px,95vw); background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 16px 36px rgba(0,0,0,.24); padding:20px; }
.gate h1 { margin:0 0 6px; }
.sub { margin:0 0 12px; color:var(--muted); }
.row { display:flex; gap:8px; }
input { width:100%; padding:11px 12px; border-radius:10px; border:1px solid #c7d2e8; font-size:14px; }
button { border:1px solid transparent; background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#fff; border-radius:10px; padding:11px 12px; font-weight:700; cursor:pointer; }
.err { color:#b91c1c; font-size:13px; margin-top:8px; }

.wrap { max-width:1200px; margin:0 auto; padding:14px; }
.hero { color:#eaf2ff; border:1px solid #28417f; border-radius:18px; padding:16px; background:linear-gradient(130deg,#0f2a65,#143f97 42%,#0f766e); margin-bottom:10px; }
.hero h1 { margin:0; }
.hero p { margin:6px 0 0; color:#dbeafe; }

.grid { display:grid; grid-template-columns: 1.2fr .8fr; gap:10px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
#map { height:70vh; min-height:480px; filter: saturate(1.08) contrast(1.03); }

#map .leaflet-control-zoom a {
  background: rgba(15, 23, 42, 0.88);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.trip-pin-wrap { background: transparent; border: 0; }
.trip-pin {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 8px 16px rgba(37,99,235,.45);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: rgba(15, 23, 42, 0.94);
  color: #e2e8f0;
}

.leaflet-popup-content { margin: 10px 12px; }
.trip-popup h4 { margin: 0; font-size: 14px; color: #eff6ff; }
.trip-popup p { margin: 6px 0 0; font-size: 12px; color: #cbd5e1; }
.trip-popup-meta { margin-top: 4px; font-size: 12px; color: #93c5fd; }

.sidebar { padding:12px; max-height:70vh; overflow:auto; }
.tabs { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.tab { border-radius:999px; border:1px solid #c5d2f0; background:#f5f8ff; color:#1e3a8a; padding:7px 11px; font-size:13px; font-weight:700; cursor:pointer; }
.tab.active { background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#fff; border-color:transparent; }

.item { border:1px solid #dbe4f4; border-radius:11px; padding:10px; margin-bottom:8px; background:#fff; }
.item h4 { margin:0 0 5px; }
.item p { margin:0; color:var(--muted); font-size:13px; }
.item .meta { margin-top:6px; font-size:12px; color:#1e3a8a; }
.item.active { border-color:#8fb2ff; box-shadow:0 0 0 2px #dbeafe inset; }

.foot { text-align:center; color:#c7d2fe; font-size:12px; margin-top:9px; }
.lock { background:#111827; }

@media (max-width: 980px) {
  .grid { grid-template-columns: 1fr; }
  #map, .sidebar { max-height:none; }
}