:root {
  --bg: #0e1420;
  --panel: #141c2c;
  --panel-2: #1a2438;
  --border: #263450;
  --text: #e8eef8;
  --muted: #8fa1bd;
  --accent: #4fc3f7;
  --accent-2: #ffb74d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body {
  display: flex;
}

#sidebar {
  width: 360px;
  min-width: 360px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
  z-index: 1000;
}

#sidebar header {
  padding: 18px 18px 10px;
}

h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.5px;
}

h1 .dot { color: var(--accent); }

.tagline {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.search-wrap {
  position: relative;
  padding: 8px 18px 12px;
  display: flex;
  gap: 8px;
}

#search {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
  outline: none;
}

#search:focus { border-color: var(--accent); }

#surprise {
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

#surprise:hover { border-color: var(--accent-2); }

#suggestions {
  position: absolute;
  top: 100%;
  left: 18px;
  right: 18px;
  margin: -6px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  max-height: 320px;
  overflow-y: auto;
  z-index: 1100;
}

#suggestions li {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#suggestions li.active,
#suggestions li:hover { background: rgba(79, 195, 247, 0.15); }

.code {
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent);
  font-size: 13px;
  min-width: 34px;
}

.sug-name { font-size: 13px; flex: 1; }
.sug-place { font-size: 12px; color: var(--muted); white-space: nowrap; }

#trail {
  padding: 0 18px 8px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

#trail .hop-chip {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

#trail .hop-chip:hover { border-color: var(--accent); }
#trail .hop-chip.current { border-color: var(--accent); color: var(--accent); cursor: default; }

#summary {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
}

#summary .big { font-size: 15px; font-weight: 600; }
#summary .stats { color: var(--muted); }
#summary .stats b { color: var(--accent-2); font-weight: 600; }

#dest-filter-wrap { padding: 0 18px 10px; }

#dest-filter {
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  outline: none;
}

#destinations {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
}

.country-group { margin-bottom: 4px; }

.country-head {
  position: sticky;
  top: 0;
  background: var(--panel);
  padding: 8px 8px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}

.dest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
}

.dest-item:hover,
.dest-item.highlight { background: rgba(79, 195, 247, 0.12); }

.dest-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dest-city {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dest-airlines {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hop-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

.hop-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }

.empty-state {
  padding: 30px 18px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
}

#sidebar footer {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

#sidebar footer a { color: var(--accent); text-decoration: none; }

#map {
  flex: 1;
  height: 100%;
  background: #0a0f18;
}

.leaflet-container { font: inherit; }

.leaflet-tooltip.dest-tip {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 9px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.leaflet-tooltip.dest-tip::before { display: none; }

.tip-sub { color: var(--muted); font-size: 11px; }

@media (max-width: 760px) {
  body { flex-direction: column-reverse; }
  #sidebar {
    width: 100%;
    min-width: 0;
    height: 55%;
    border-right: none;
    border-top: 1px solid var(--border);
  }
  #map { height: 45%; }
}

.badge {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: 1px;
  cursor: help;
}

.badge.live {
  color: #7ee8a2;
  border: 1px solid rgba(126, 232, 162, 0.4);
  background: rgba(126, 232, 162, 0.08);
}

.badge.archive {
  color: var(--accent-2);
  border: 1px solid rgba(255, 183, 77, 0.4);
  background: rgba(255, 183, 77, 0.08);
}

/* destination details popup */
.dest-popup .leaflet-popup-content-wrapper {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.dest-popup .leaflet-popup-content {
  margin: 12px 14px;
  font: inherit;
  line-height: 1.4;
}

.dest-popup .leaflet-popup-tip {
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.dest-popup .leaflet-popup-close-button {
  color: var(--muted);
}

.pop-head { font-size: 14px; }

.pop-sub {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.pop-airlines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 2px;
}

.al-chip {
  background: rgba(79, 195, 247, 0.12);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
}

.pop-hop {
  margin-top: 9px;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 183, 77, 0.5);
  color: var(--accent-2);
  border-radius: 7px;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
}

.pop-hop:hover { background: rgba(255, 183, 77, 0.1); }

/* fare display + controls */
.dest-price {
  font-size: 12px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  flex-shrink: 0;
}

#controls {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ctl {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}

.ctl:hover { border-color: var(--accent); color: var(--text); }
.ctl.on { border-color: var(--accent); color: var(--accent); }

#al-clear.on { border-color: var(--accent-2); color: var(--accent-2); }

.legend {
  font-size: 10px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
}

/* FAA delay indicators */
.faa-ring {
  width: 22px;
  height: 22px;
  border: 2px solid #ef6a6a;
  border-radius: 50%;
  animation: faa-pulse 1.6s ease-out infinite;
}

@keyframes faa-pulse {
  0% { transform: scale(0.45); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}

.faa-note {
  margin-top: 8px;
  padding: 6px 9px;
  border: 1px solid rgba(239, 106, 106, 0.45);
  background: rgba(239, 106, 106, 0.08);
  color: #f3a1a1;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.4;
}

.row-warn {
  color: #ef6a6a;
  margin-left: 5px;
  font-size: 11px;
  cursor: help;
}

.pop-faa {
  margin-top: 6px;
  color: #f3a1a1;
  font-size: 11px;
}

/* popup booking + clickable chips */
.pop-book {
  display: block;
  margin-top: 9px;
  text-align: center;
  background: rgba(126, 232, 162, 0.1);
  border: 1px solid rgba(126, 232, 162, 0.5);
  color: #7ee8a2;
  border-radius: 7px;
  padding: 6px;
  font-size: 12px;
  text-decoration: none;
}

.pop-book:hover { background: rgba(126, 232, 162, 0.18); }

.al-chip.clickable { cursor: pointer; }
.al-chip.clickable:hover { border-color: var(--accent); color: var(--accent); }

/* map layers control */
.layers-ctl {
  background: transparent;
}

.lc-toggle {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.lc-toggle:hover { border-color: var(--accent); }

.lc-panel {
  margin-top: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  min-width: 170px;
  font-size: 12px;
  color: var(--text);
}

.lc-sec {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  margin: 8px 0 4px;
}

.lc-sec:first-child { margin-top: 0; }

.lc-panel label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  cursor: pointer;
}

.lc-panel input { accent-color: var(--accent); }

.lc-legend {
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.8;
}

.lc-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 2px 0 6px;
}

.lc-legend i:first-child { margin-left: 0; }

.lc-hint { font-size: 10px; color: var(--muted); }

.dest-wx {
  font-size: 11px;
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* airport toolbar links */
#apt-links {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#apt-links .ctl { text-decoration: none; }

/* live aircraft */
.plane {
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.lc-sub {
  margin-left: 16px;
  font-size: 11px;
  color: var(--muted);
}

.lc-sub input:disabled + * { opacity: 0.4; }

/* prominent active-filter bar (under search) */
#filter-bar {
  padding: 0 18px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.fbar-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  margin-right: 2px;
}

.fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 183, 77, 0.12);
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

.fchip b { font-weight: 700; }

.fchip:hover {
  background: rgba(255, 183, 77, 0.25);
}

/* route panel — times & fares for one route */
#route-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 320px;
  z-index: 1200;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#route-panel[hidden] { display: none; }

.rp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}

.rp-head b { font-size: 17px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.rp-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

#rp-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
}

#rp-close:hover { color: var(--text); }

.rp-links {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.rp-links .ctl { text-decoration: none; }

#rp-body { flex: 1; overflow-y: auto; padding: 4px 10px 10px; }

.rp-date {
  position: sticky;
  top: 0;
  background: var(--panel);
  padding: 9px 6px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
}

.rp-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px;
  border-radius: 6px;
  font-size: 13px;
}

.rp-row:hover { background: rgba(79, 195, 247, 0.08); }

.rp-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  min-width: 66px;
  color: var(--text);
}

.rp-info {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--muted);
}

.rp-dur { color: var(--muted); }

.rp-book {
  font-weight: 700;
  font-size: 13px;
  color: #7ee8a2;
  text-decoration: none;
  border: 1px solid rgba(126, 232, 162, 0.4);
  border-radius: 6px;
  padding: 2px 8px;
}

a.rp-book:hover { background: rgba(126, 232, 162, 0.12); }

.rp-foot {
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}

/* times button inside the destination popup */
.pop-times {
  display: block;
  width: 100%;
  margin-top: 9px;
  background: rgba(79, 195, 247, 0.08);
  border: 1px solid rgba(79, 195, 247, 0.45);
  color: var(--accent);
  border-radius: 7px;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
}

.pop-times:hover { background: rgba(79, 195, 247, 0.16); }

@media (max-width: 760px) {
  #route-panel { left: 12px; width: auto; top: 60px; }
}

/* continent filter pills */
#continent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.cont-pill {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}

.cont-pill span { color: var(--accent); font-weight: 600; margin-left: 2px; }

.cont-pill:hover { border-color: var(--accent); color: var(--text); }

.cont-pill.on {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: rgba(255, 183, 77, 0.1);
}

.cont-pill.on span { color: var(--accent-2); }

.al-chip.on {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: rgba(255, 183, 77, 0.12);
}

/* meet-up mode */
.pop-org {
  margin-top: 7px;
  font-size: 11px;
  color: var(--muted);
}

.pop-org b { color: var(--accent-2); }

#summary .hop-chip { font-size: 12px; padding: 2px 9px; }
#summary .hop-chip.org-rm:hover { border-color: #ef6a6a; color: #ef6a6a; }

/* floating search over the map */
#search-float {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  gap: 8px;
  width: min(440px, 70%);
}

#search-float #search {
  flex: 1;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

#search-float #surprise {
  padding: 0 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

#search-float #suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
}

/* collapsible sidebar */
body.side-hidden #sidebar { display: none; }

/* airport info panel */
.ap-name { font-size: 13px; line-height: 1.3; }

.ap-stat {
  font-size: 12px;
  margin-top: 6px;
  color: var(--text);
}

.ap-airlines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 150px;
  overflow-y: auto;
  margin-top: 2px;
}

.ap-airlines .al-chip { font-family: inherit; }

.ap-airlines .al-chip i {
  font-style: normal;
  color: var(--accent);
  font-weight: 600;
}

.ap-airlines .al-chip.on i { color: var(--accent-2); }

.ap-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ap-links .ctl { text-decoration: none; }

#meet-chips {
  margin: 8px 0;
  font-size: 12px;
  color: var(--muted);
}

.layers-ctl .lc-panel { max-width: 240px; }

/* docked destination card (bottom-left of map) */
#dest-card {
  position: absolute;
  left: 12px;
  bottom: 26px;
  z-index: 1100;
  width: 280px;
  max-height: 55%;
  overflow-y: auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  padding: 12px 14px;
}

#dest-card[hidden] { display: none; }

#dc-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

#dc-close:hover { color: var(--text); }

#dest-card .al-chip { font-size: 10px; padding: 2px 8px; }
#dest-card .pop-airlines { margin: 4px 0 2px; }
#dest-card .pop-org { margin-top: 6px; }
#dest-card .pop-hop { margin-top: 10px; }

/* airline logos */
.al-logo {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 5px;
}

.al-chip {
  display: inline-flex;
  align-items: center;
}

.row-logo {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
}

.row-logo .al-logo {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* connected collapsible control boxes (right side) */
.ctlbox {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.ctlbox-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  padding: 7px 11px;
  cursor: pointer;
  text-align: left;
}

.ctlbox-head:hover { color: var(--accent); }

.ctlbox-min {
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}

.ctlbox .lc-panel {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
}

/* themed scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: #2c3d5e transparent;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  background: #2c3d5e;
  border-radius: 8px;
  border: 2px solid rgba(0, 0, 0, 0);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover { background: #3f5680; background-clip: content-box; }

/* emergency aircraft marker */
.emerg-wrap {
  position: relative;
  width: 22px;
  height: 22px;
}

.emerg-wrap .faa-ring { position: absolute; inset: 0; }

.emerg-wrap .plane {
  position: absolute;
  inset: 3.5px;
}

/* passport picker + visa chips */
#passport-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

#passport-sel {
  flex: 1;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
}

#passport-sel:focus { border-color: var(--accent); }

#visa-free-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}

#visa-free-row input { accent-color: var(--accent-2); }

.visa-chip {
  font-style: normal;
  font-size: 9px;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 5px;
  vertical-align: 1px;
}

.visa-chip.vf { color: #7ee8a2; border: 1px solid rgba(126, 232, 162, 0.45); }
.visa-chip.mid { color: #e3d15f; border: 1px solid rgba(227, 209, 95, 0.45); }
.visa-chip.vr { color: #ef6a6a; border: 1px solid rgba(239, 106, 106, 0.45); }

/* airline website link inside chips */
.al-go {
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid var(--border);
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
  line-height: 1;
}

.al-go:hover { color: var(--accent-2); }

/* emergency alert banner */
#emerg-banner {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1150;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(46, 16, 20, 0.96);
  border: 1px solid #ef6a6a;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: #f3d4d4;
  box-shadow: 0 6px 24px rgba(239, 106, 106, 0.25);
  max-width: min(520px, 80%);
}

#emerg-banner[hidden] { display: none; }

.eb-badge {
  background: #ef6a6a;
  color: #1a0a0c;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.8px;
  border-radius: 5px;
  padding: 2px 7px;
  animation: eb-blink 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes eb-blink {
  50% { opacity: 0.55; }
}

#eb-track {
  background: transparent;
  border: 1px solid #ef6a6a;
  color: #ef9a9a;
  border-radius: 6px;
  padding: 3px 11px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

#eb-track:hover { background: rgba(239, 106, 106, 0.15); }

#eb-close {
  background: transparent;
  border: none;
  color: #b98;
  cursor: pointer;
  font-size: 12px;
  padding: 2px;
}

#eb-close:hover { color: #f3d4d4; }

/* auth gate */
#auth-gate {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: radial-gradient(ellipse at 50% 30%, #16203a 0%, var(--bg) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#auth-gate[hidden] { display: none; }

.ag-card {
  width: min(360px, 90%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ag-card h1 { margin: 0; font-size: 28px; }

.ag-tag {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
}

.ag-card input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.ag-card input:focus { border-color: var(--accent); }

.ag-btn {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.ag-btn:hover { border-color: var(--accent); }

.ag-primary {
  background: rgba(79, 195, 247, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.ag-google { font-weight: 600; }

.ag-div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}

.ag-div::before,
.ag-div::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

#ag-msg {
  font-size: 12px;
  color: #7ee8a2;
  line-height: 1.4;
}

#ag-msg.err { color: #ef6a6a; }

/* account line in footer */
#acct-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

#acct-email {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#acct-line[hidden] { display: none; }

#acct-signout {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 10px;
  cursor: pointer;
}

#acct-signout:hover { border-color: #ef6a6a; color: #ef6a6a; }

/* search in the sidebar (default home) — high contrast on dark */
#search-home {
  padding: 2px 18px 12px;
}

#search-unit {
  position: relative;
  display: flex;
  gap: 8px;
  width: 100%;
}

#search-unit #search {
  flex: 1;
  min-width: 0;
  background: #1d2c4d;
  border: 1px solid rgba(79, 195, 247, 0.5);
  color: var(--text);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  outline: none;
  box-shadow: none;
}

#search-unit #search::placeholder { color: #9fb3d8; }

#search-unit #search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.18);
}

#search-unit #surprise {
  background: #1d2c4d;
  border: 1px solid rgba(79, 195, 247, 0.5);
  border-radius: 8px;
  padding: 0 12px;
  cursor: pointer;
  font-size: 14px;
}

#search-unit #surprise:hover { border-color: var(--accent-2); }

#search-unit #suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  z-index: 1300;
}

/* the map slot only matters when the sidebar is collapsed */
#search-float #search-unit {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

/* inline airport picker inside the meet-up panel */
#meet-search { position: relative; margin-top: 8px; }

#meet-input {
  width: 100%;
  background: #1d2c4d;
  border: 1px solid rgba(79, 195, 247, 0.4);
  color: var(--text);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

#meet-input:focus { border-color: var(--accent); }
#meet-input::placeholder { color: #9fb3d8; }

#meet-sugs {
  list-style: none;
  margin: 4px 0 0;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  max-height: 150px;
  overflow-y: auto;
}

#meet-sugs li {
  padding: 5px 7px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  gap: 6px;
  align-items: baseline;
}

#meet-sugs li:hover { background: rgba(79, 195, 247, 0.15); }

#meet-sugs .sug-place { margin-left: auto; font-size: 10px; }

#share-row { margin-top: 8px; }

/* flowing directional pulse along route arcs */
.route-pulse {
  stroke-dasharray: 6 94;
  stroke-linecap: round;
  animation: route-flow 10s linear infinite;
}

@keyframes route-flow {
  to { stroke-dashoffset: -100; }
}