:root {
  --bg: #0b1020; --panel: rgba(18,24,40,.82); --line: rgba(255,255,255,.10);
  --text: #eaf0fb; --muted: #93a1bd; --accent: #5fd0ff; --plane: #ffd166;
  --own: #ffd166; --foreign: #5fd0ff;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: var(--font); color: var(--text); background: #0b1020; }
#map { position: absolute; inset: 0; background: #0b1020; }
.leaflet-container { background: #0b1020; font-family: var(--font); }

/* HUD */
#hud {
  position: absolute; top: 16px; left: 16px; z-index: 600;
  background: var(--panel); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45); max-width: 340px;
}
.title { display: flex; align-items: center; gap: 12px; }
.plane {
  font-size: 26px; color: var(--plane);
  filter: drop-shadow(0 0 8px rgba(255,209,102,.5));
  transform: rotate(45deg); display: inline-block;
}
.title h1 { margin: 0; font-size: 20px; letter-spacing: .3px; }
#subtitle { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 16px; }
.stat { display: flex; flex-direction: column; }
.stat .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); }
.stat .v { font-size: 16px; font-weight: 600; margin-top: 2px; }
.stat:last-child { grid-column: span 2; }

/* banner (empty / error states) */
.banner {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 600;
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 10px 18px; font-size: 13px; color: var(--text);
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
.banner.hidden { display: none; }

/* legend / footer */
#legend {
  position: absolute; bottom: 14px; left: 16px; z-index: 600;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 7px 13px; font-size: 11.5px; color: var(--muted);
  display: flex; align-items: center; gap: 7px;
}
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.own { background: var(--own); } .dot.foreign { background: var(--foreign); }
.sep { opacity: .5; }

/* pulsing current-position marker */
.cur { position: relative; }
.cur .core {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--plane);
  box-shadow: 0 0 12px rgba(255,209,102,.9);
}
.cur .ring {
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid var(--plane);
  transform: translate(-50%, -50%); animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0%   { width: 16px; height: 16px; opacity: .9; }
  100% { width: 70px; height: 70px; opacity: 0; }
}
.dest-pin {
  font-size: 22px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6));
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #12182a; color: var(--text); }
.leaflet-popup-content { font-size: 12.5px; line-height: 1.55; margin: 11px 13px; }

@media (max-width: 560px) {
  #hud { left: 10px; right: 10px; top: 10px; max-width: none; }
  .stats { grid-template-columns: 1fr 1fr 1fr; }
  .stat:last-child { grid-column: span 3; }
}