:root {
  --ink: #e9eef9;
  --muted: #8b96ad;
  --line: rgba(148, 170, 215, 0.16);
  --paper: #0a0e17;
  --panel: rgba(14, 19, 32, 0.86);
  --teal: #35e0ff;
  --red: #ff4757;
  --amber: #ffb547;
  --green: #34e8a4;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select {
  font: inherit;
}

/* Full-screen map stage */
html,
body {
  height: 100%;
}

body {
  overflow: hidden; /* desktop: panels scroll internally */
}

#map {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #0a0e17;
}

/* Soft radar vignette over the map edges (clicks pass through) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(4, 7, 14, 0.55) 100%);
}

#mapScrim {
  position: fixed;
  inset: 0;
  z-index: 1150;
  background: rgba(4, 7, 14, 0.6);
  backdrop-filter: blur(7px);
}

/* Top bar: floating glass strip (Leaflet panes top out around z-index 1000) */
.topbar {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  height: 58px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand svg {
  width: 30px;
  height: 30px;
  fill: var(--teal);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 10px rgba(53, 224, 255, 0.55));
}

.brand-text {
  display: grid;
  line-height: 1.15;
}

.brand-text strong {
  font-weight: 900;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
}

.brand-text span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.topbar-account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn.slim {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.8rem;
}

.feed {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(9, 13, 23, 0.55);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#feedDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px 1px rgba(255, 181, 71, 0.8);
}

#feedDot.live {
  background: var(--green);
  box-shadow: 0 0 10px 1px rgba(52, 232, 164, 0.8);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Floating overlay columns */
.overlay {
  position: fixed;
  top: 84px;
  z-index: 1050;
  display: grid;
  gap: 12px;
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 150, 173, 0.35) transparent;
}

.overlay::-webkit-scrollbar {
  width: 8px;
}

.overlay::-webkit-scrollbar-thumb {
  background: rgba(139, 150, 173, 0.3);
  border-radius: 99px;
}

.overlay-left {
  left: 12px;
  width: min(350px, 40vw);
}

.overlay-right {
  right: 12px;
  width: min(430px, 44vw);
}

/* Login gate: centered glass card over the scrim */
.login-gate {
  position: fixed;
  z-index: 1200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 32px));
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border-color: rgba(53, 224, 255, 0.22);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(53, 224, 255, 0.08),
    0 0 80px rgba(53, 224, 255, 0.07) inset;
}

.login-gate h2 {
  margin: 4px 0 8px;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.01em;
}

.owner-setup,
.login-gate .note {
  grid-column: 1 / -1;
}

.owner-setup {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.owner-setup.needs-attention {
  border: 1px solid rgba(255, 71, 87, 0.5);
  border-radius: 10px;
  padding: 14px;
  background: rgba(255, 71, 87, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.1);
}

.owner-setup .login-grid {
  grid-template-columns: minmax(0, 1fr) auto;
}

.app-content {
  display: grid;
  gap: 16px;
}

.planner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 16px;
  align-items: start;
}

.panel,
.route-card,
.controller-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(18px);
}

.panel {
  padding: 18px;
  box-shadow: var(--shadow);
  background-image: linear-gradient(160deg, rgba(53, 224, 255, 0.045), transparent 38%);
}

.panel h2 {
  margin: 0 0 14px;
  font-size: 1.02rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.field {
  display: grid;
  gap: 7px;
}

label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

select,
input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 12px;
  background: rgba(9, 13, 23, 0.75);
  color: var(--ink);
  outline: none;
  font-family: var(--mono);
  font-size: 0.9rem;
}

select option {
  background: #0e1320;
  color: var(--ink);
}

select:focus,
input:focus {
  border-color: rgba(53, 224, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(53, 224, 255, 0.14);
}

input::placeholder {
  color: rgba(139, 150, 173, 0.55);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(9, 13, 23, 0.75);
}

.segmented button {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
  font-size: 0.86rem;
}

.segmented button.active {
  background: rgba(53, 224, 255, 0.14);
  color: var(--teal);
  box-shadow: inset 0 0 0 1px rgba(53, 224, 255, 0.35);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.btn {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0 16px;
  background: linear-gradient(135deg, #23c3ea, #1595dc);
  color: #04121c;
  cursor: pointer;
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(35, 195, 234, 0.28);
}

.btn:hover {
  filter: brightness(1.08);
}

.btn.secondary {
  background: rgba(148, 170, 215, 0.08);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}

.btn.red {
  background: linear-gradient(135deg, #ff5b69, #e02339);
  color: #fff;
  box-shadow: 0 6px 24px rgba(255, 71, 87, 0.3);
}

.btn.vatsim {
  background: linear-gradient(135deg, #2d6cdf, #0b4fb7);
  color: #fff;
}

.side {
  display: grid;
  gap: 16px;
}

.result {
  min-height: 0;
}

.route-card {
  padding: 16px;
}

.airports {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--teal);
  text-shadow: 0 0 26px rgba(53, 224, 255, 0.35);
}

.recommendation {
  margin: 14px 0;
  border: 1px solid rgba(255, 181, 71, 0.3);
  border-radius: 10px;
  padding: 13px 14px;
  background: linear-gradient(135deg, rgba(255, 181, 71, 0.1), rgba(255, 181, 71, 0.03));
}

.recommendation span {
  display: block;
  color: var(--amber);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.recommendation strong {
  display: block;
  margin-top: 5px;
  font-size: 1.02rem;
  line-height: 1.35;
}

.recommendation p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 11px;
  border: 1px solid rgba(53, 224, 255, 0.3);
  background: rgba(53, 224, 255, 0.08);
  color: #9be9fb;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
}

.chip.green {
  border-color: rgba(52, 232, 164, 0.35);
  background: rgba(52, 232, 164, 0.09);
  color: #8df3cd;
}

.chip.red {
  border-color: rgba(255, 71, 87, 0.4);
  background: rgba(255, 71, 87, 0.1);
  color: #ff9aa5;
}

.chip.amber {
  border-color: rgba(255, 181, 71, 0.4);
  background: rgba(255, 181, 71, 0.1);
  color: #ffd394;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.flight-list {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.section-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.flight-option {
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(150px, auto);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: rgba(9, 13, 23, 0.5);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.flight-option:hover,
.flight-option.selected {
  border-color: rgba(53, 224, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(53, 224, 255, 0.12), 0 0 30px rgba(53, 224, 255, 0.06);
  background: rgba(53, 224, 255, 0.05);
}

.airline-mark {
  min-height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(53, 224, 255, 0.1);
  color: var(--teal);
  font-family: var(--mono);
  font-weight: 700;
}

.flight-main,
.flight-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.flight-main strong {
  overflow-wrap: anywhere;
}

.flight-main small,
.flight-meta span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.flight-meta {
  justify-items: end;
}

.selected-package {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.fact {
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
  background: rgba(9, 13, 23, 0.5);
}

.fact span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fact strong {
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 0.9rem;
}

.controller-list {
  display: grid;
  gap: 8px;
}

.controller-card {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  background: rgba(9, 13, 23, 0.5);
}

.controller-card strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.9rem;
}

.controller-card small,
.small {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.empty,
.note {
  border: 1px dashed rgba(148, 170, 215, 0.28);
  border-radius: 10px;
  padding: 14px;
  color: var(--muted);
  background: rgba(9, 13, 23, 0.35);
  line-height: 1.5;
  font-size: 0.9rem;
}

.note {
  margin: 14px 0 0;
  border-style: solid;
  border-color: rgba(255, 181, 71, 0.25);
  background: rgba(255, 181, 71, 0.07);
  color: #d9b98c;
}

.login-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
}

details.coverage summary {
  cursor: pointer;
  font-weight: 900;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

details.coverage summary:hover {
  color: var(--ink);
}

details.coverage[open] summary {
  margin-bottom: 12px;
}

/* Plane + airport markers (Leaflet divIcons) */
/* NOTE: never set `position` here - .plane-icon IS the leaflet-marker-icon
   element and overriding Leaflet's absolute positioning makes planes drift
   on zoom. It is already a containing block for the absolute .plane-label. */
.plane-icon {
  pointer-events: auto;
}

.plane-icon svg {
  display: block;
  width: 100%; /* fills the JS-sized icon box (22px mobile, 30px desktop) */
  height: 100%;
  fill: #ffce54;
  stroke: rgba(6, 10, 18, 0.9);
  stroke-width: 0.75;
  filter: drop-shadow(0 0 5px rgba(255, 206, 84, 0.4));
  transition: transform 0.4s linear;
}

/* Airline logo beside the aircraft (FlightRadar-style). Stays horizontal
   while the plane icon rotates. Hidden until the map is zoomed in enough. */
.plane-label {
  position: absolute;
  left: calc(100% + 3px); /* follows the icon box whatever its size */
  top: 50%;
  transform: translateY(-50%);
  display: none;
  white-space: nowrap;
  line-height: 0;
  pointer-events: none;
}

.plane-labels .plane-label {
  display: block;
}

/* Transparent airline wordmark on a tight white chip so dark logos
   (Egyptair, Lufthansa, Delta...) stay readable on the dark basemap. It's a
   CSS background-image span so it only downloads when the label is shown. */
.al-logo {
  display: block;
  width: 44px;
  height: 16px;
  background-color: rgba(255, 255, 255, 0.94);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 38px auto;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.al-name {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #eaf1ff;
  text-shadow: 0 0 3px #000, 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Larger logos and fallback names on desktop screens. */
@media (min-width: 881px) {
  .al-logo {
    width: 58px;
    height: 20px;
    background-size: 50px auto;
  }

  .al-name {
    font-size: 12px;
  }
}

/* Site owner's aircraft: teal with a crown, matching the brand colour.
   (The marker element is already position:absolute via Leaflet, so the
   absolutely-positioned crown anchors to it without touching `position`.) */
.plane-icon.owner svg {
  fill: var(--teal);
  filter: drop-shadow(0 0 7px rgba(53, 224, 255, 0.85));
}

.plane-icon.owner::before {
  content: "\1F451";
  position: absolute;
  left: 50%;
  top: -15px;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.owner-chip {
  border-color: rgba(53, 224, 255, 0.5);
  color: var(--teal);
  background: rgba(53, 224, 255, 0.1);
  font-size: 0.66rem;
}

/* Emergency squawks (7700/7600/7500): red pulsing aircraft. */
.plane-icon.emergency svg {
  fill: #ff4757;
  filter: drop-shadow(0 0 7px rgba(255, 71, 87, 0.95));
  animation: emergPulse 1s ease-in-out infinite;
}

@keyframes emergPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Toast notifications (top centre) */
#toasts {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1400;
  display: grid;
  gap: 8px;
  width: min(430px, calc(100vw - 24px));
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(40, 10, 16, 0.92);
  border: 1px solid rgba(255, 71, 87, 0.55);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 71, 87, 0.25);
  backdrop-filter: blur(10px);
  font-size: 0.82rem;
  animation: toastIn 0.25s ease-out;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast-icon {
  color: var(--red);
  font-size: 1.1rem;
  animation: emergPulse 1s ease-in-out infinite;
}

.toast-body {
  flex: 1;
  cursor: pointer;
}

.toast-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.toast-close:hover {
  color: var(--ink);
}

/* Most tracked flights panel */
.tracked-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(9, 13, 23, 0.5);
  color: var(--ink);
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.8rem;
}

.tracked-row + .tracked-row {
  margin-top: 6px;
}

.tracked-row:hover {
  border-color: rgba(53, 224, 255, 0.4);
}

.tracked-rank {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--teal);
  width: 14px;
  flex: 0 0 auto;
}

.tracked-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}

.tracked-route {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.tracked-count {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--amber);
}

/* FR24-style red emergency squawk badge in the tracked list */
.squawk-chip {
  background: var(--red);
  border-color: transparent;
  color: #fff;
  font-family: var(--mono);
  font-weight: 800;
  animation: emergPulse 1.2s ease-in-out infinite;
}

/* Airport markers: hollow ring; busy/staffed fields get a gold star + glow. */
.apt-marker {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(10, 14, 23, 0.9);
  border: 2px solid var(--teal);
  box-shadow: 0 0 8px 1px rgba(53, 224, 255, 0.4);
}

.apt-marker.tn {
  border-color: var(--red);
  box-shadow: 0 0 9px 1px rgba(255, 71, 87, 0.5);
}

.apt-marker.hot {
  border-color: var(--amber);
  background: rgba(255, 181, 71, 0.18);
  box-shadow:
    0 0 0 3px rgba(255, 181, 71, 0.22),
    0 0 14px 2px rgba(255, 181, 71, 0.6);
}

/* Gold star above staffed/busy airports. Larger + brighter when ATC is online. */
.apt-marker.hot::after {
  content: "\2605";
  position: absolute;
  left: 50%;
  top: -13px;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1;
  color: var(--amber);
  text-shadow: 0 0 5px rgba(255, 181, 71, 0.85), 0 1px 2px #000;
}

.apt-marker.staffed::after {
  font-size: 14px;
  top: -15px;
}

.apt-marker.selected {
  box-shadow:
    0 0 0 4px rgba(255, 181, 71, 0.4),
    0 0 16px 3px rgba(255, 181, 71, 0.65);
}

/* Airport ground layout labels (taxiway letters, runway numbers, stands) */
.gnd-wrap {
  pointer-events: none;
}

.gnd-label {
  transform: translate(-50%, -50%);
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
}

.gnd-twy {
  color: #ffb547;
  background: rgba(20, 16, 4, 0.75);
  border: 1px solid rgba(255, 181, 71, 0.4);
}

.gnd-stand {
  color: #4ade80;
  background: rgba(6, 22, 14, 0.8);
  border: 1px solid rgba(74, 222, 128, 0.45);
}

.gnd-rwy {
  color: #ff9d42;
  background: rgba(24, 12, 2, 0.8);
  border: 1px solid rgba(255, 157, 66, 0.5);
  font-size: 11px;
}

/* Playback modal + timeline bar */
.pb-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  background: rgba(4, 7, 14, 0.6);
  backdrop-filter: blur(6px);
  padding: 16px;
}

.pb-dialog {
  width: min(420px, 100%);
  display: grid;
  gap: 12px;
}

.pb-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pb-dialog-head h2 {
  margin: 0;
}

.pb-dialog-head .panel-min {
  position: static;
}

.pb-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1120;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
}

.pb-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(53, 224, 255, 0.12);
  color: var(--teal);
  cursor: pointer;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
}

.pb-speeds {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.pb-speeds button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: rgba(9, 13, 23, 0.6);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.pb-speeds button.active {
  background: rgba(53, 224, 255, 0.16);
  color: var(--teal);
  border-color: rgba(53, 224, 255, 0.4);
}

.pb-scrub {
  flex: 1 1 auto;
  min-width: 60px;
  accent-color: var(--teal);
  cursor: pointer;
}

.pb-clock {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.pb-atc {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--amber);
  border: 1px solid rgba(255, 181, 71, 0.3);
  border-radius: 999px;
  padding: 3px 9px;
  cursor: help;
}

/* Playback flight search */
.pb-search {
  position: relative;
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.pb-search input {
  width: 220px;
  max-width: 40vw;
}

.pb-emerg {
  flex: 0 0 auto;
  width: 34px;
  border: 1px solid rgba(255, 71, 87, 0.5);
  border-radius: 9px;
  background: rgba(255, 71, 87, 0.12);
  color: var(--red);
  cursor: pointer;
  font-size: 1rem;
}

.pb-emerg:hover { background: rgba(255, 71, 87, 0.22); }

.pb-results {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: min(340px, 82vw);
  max-height: 46vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  backdrop-filter: blur(18px);
  box-shadow: 0 -8px 34px rgba(0, 0, 0, 0.5);
  padding: 6px;
  display: grid;
  gap: 4px;
}

.pb-res {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(9, 13, 23, 0.5);
  color: var(--ink);
  padding: 7px 9px;
  cursor: pointer;
  font-size: 0.78rem;
}

.pb-res:hover { border-color: rgba(53, 224, 255, 0.4); }
.pb-res-cs { font-weight: 700; font-family: var(--mono); }
.pb-res-emerg { color: #fff; background: var(--red); border-radius: 4px; font-family: var(--mono); font-size: 0.66rem; font-weight: 800; padding: 1px 5px; }
.pb-res-route { color: var(--muted); font-family: var(--mono); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; }
.pb-res-when { color: var(--muted); font-family: var(--mono); font-size: 0.7rem; white-space: nowrap; }
.pb-res-empty { color: var(--muted); font-size: 0.78rem; padding: 10px; text-align: center; }

/* Highlighted (searched / emergency) flight marker in playback */
.pb-hl { transform: translate(-50%, -50%); position: relative; }
.pb-hl-ring {
  display: block;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #ff4dd2;
  box-shadow: 0 0 12px 2px rgba(255, 77, 210, 0.6);
  animation: pulse 1.6s ease-in-out infinite;
}
.pb-hl.emerg .pb-hl-ring { border-color: var(--red); box-shadow: 0 0 12px 2px rgba(255, 71, 87, 0.7); animation: emergPulse 1s ease-in-out infinite; }
.pb-hl-label {
  position: absolute; left: 30px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 11px; font-weight: 800; color: #fff;
  text-shadow: 0 0 4px #000, 0 1px 2px rgba(0, 0, 0, 0.9);
}

@media (max-width: 700px) {
  .pb-search { order: 6; flex-basis: 100%; }
  .pb-search input { max-width: none; flex: 1; }
}

/* On phones the timeline wraps to two tidy rows instead of squeezing. */
@media (max-width: 700px) {
  .pb-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
  }

  .pb-scrub {
    order: 5;
    flex-basis: 100%;
  }

  .pb-clock {
    font-size: 0.72rem;
  }
}

/* Departure stand suggestion */
.stand-row {
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(9, 13, 23, 0.5);
}

.stand-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stand-label {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stand-head strong {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--teal);
}

.stand-head .btn {
  margin-left: auto;
}

.stand-note {
  color: var(--amber);
  margin: 6px 0 0;
}

.stand-marker {
  transform: translate(-50%, -100%);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--teal);
  color: #04222b;
  font-weight: 800;
  font-size: 11px;
  box-shadow: 0 0 0 3px rgba(53, 224, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* SimBrief dispatch flow + fetched OFP card */
.dispatch-flow {
  display: grid;
  gap: 12px;
  margin: 10px 0;
}

.dispatch-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.step-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(53, 224, 255, 0.14);
  border: 1px solid rgba(53, 224, 255, 0.4);
  color: var(--teal);
  font-weight: 800;
  font-size: 0.78rem;
  display: grid;
  place-items: center;
  margin-top: 2px;
}

.step-body { flex: 1; min-width: 0; }
.step-body .small { margin-top: 4px; }

.sb-load-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sb-load-row input {
  flex: 1;
  min-width: 150px;
}

.sb-linked {
  margin: 0;
  font-size: 0.82rem;
  color: var(--teal);
}

.sb-linked strong { color: var(--ink); }

.linklike {
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
  padding: 0;
}

.linklike:hover { color: var(--ink); }

#sbStatus {
  color: var(--amber);
}

.ofp-card {
  margin-top: 6px;
  border: 1px solid rgba(53, 224, 255, 0.35);
  border-radius: 12px;
  padding: 12px;
  background: rgba(53, 224, 255, 0.05);
  display: grid;
  gap: 10px;
}

.ofp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sb-warn { color: var(--amber); }

.ofp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.ofp-grid div {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: rgba(9, 13, 23, 0.5);
}

.ofp-grid span {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ofp-grid strong { font-size: 0.95rem; }

.ofp-route {
  font-family: var(--mono);
  font-size: 0.74rem;
  word-break: break-word;
  margin: 0;
}

.ofp-route span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  margin-right: 4px;
}

@media (max-width: 880px) {
  .ofp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Panel minimize buttons */
.panel > h2 {
  position: relative;
  padding-right: 30px;
}

.panel-min {
  position: absolute;
  top: -3px;
  right: 0;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(148, 170, 215, 0.08);
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

.panel-min:hover {
  color: var(--ink);
}

.panel.minimized > *:not(h2) {
  display: none !important;
}

.panel.minimized > h2 {
  margin-bottom: 0;
}

/* Multi-selected aircraft chips */
.selection-bar {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 1050;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: min(440px, calc(100vw - 24px));
}

.sel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  backdrop-filter: blur(12px);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
}

.sel-chip i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.sel-chip button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 2px;
}

.sel-chip button:hover {
  color: var(--red);
}

.sel-clear {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--panel);
  backdrop-filter: blur(12px);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
}

.sel-clear:hover {
  color: var(--ink);
}

/* Tunisia events panel: cards with a live countdown */
.event-card {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: rgba(9, 13, 23, 0.5);
}

.event-card + .event-card {
  margin-top: 10px;
}

.event-banner {
  width: 100%;
  border-radius: 7px;
  display: block;
}

.event-countdown {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.cd-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  min-width: 42px;
  justify-content: center;
  border: 1px solid rgba(53, 224, 255, 0.25);
  border-radius: 7px;
  padding: 5px 7px;
  background: rgba(53, 224, 255, 0.06);
}

.cd-cell strong {
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--teal);
}

.cd-cell small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.event-live {
  animation: pulse 1.6s ease-in-out infinite;
}

.event-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.event-actions:empty {
  display: none;
}

.btn.live-flash {
  background: linear-gradient(135deg, #ff5b69, #e02339);
  color: #fff;
  box-shadow: 0 6px 24px rgba(255, 71, 87, 0.3);
  animation: liveFlash 1s ease-in-out infinite;
}

.btn.live-flash:hover {
  filter: brightness(1.08);
}

@keyframes liveFlash {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.55);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 16px 4px rgba(255, 71, 87, 0.6);
  }
}

/* Aircraft photo inside the plane popup (planespotters.net, with credit) */
.plane-photo {
  margin-bottom: 8px;
}

.plane-photo img {
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.plane-photo-credit {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.68rem;
}

/* Live ATC coverage: FIR/APP box labels and D/G/T/A station badges */
.atc-box-wrap {
  pointer-events: none;
}

.atc-box {
  transform: translate(-50%, -50%);
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffab7a;
  background: rgba(30, 15, 5, 0.88);
  border: 1.5px solid #ff7a3d;
  border-radius: 5px;
  padding: 3px 7px;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(255, 122, 61, 0.35);
}

.atc-badges {
  display: flex;
  gap: 3px;
  transform: translate(-50%, 9px);
  width: max-content;
}

.atc-badge {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}

.atc-D { background: #3b82f6; }
.atc-G { background: #16a34a; }
.atc-T { background: #dc2626; }
.atc-A { background: #d97706; }

/* Leaflet chrome: dark glass skin */
.leaflet-popup-content-wrapper {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}

.leaflet-popup-tip {
  background: var(--panel);
}

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

.leaflet-container {
  font-family: inherit;
}

.leaflet-container a.leaflet-popup-close-button:hover {
  color: var(--ink) !important;
}

.leaflet-tooltip {
  background: rgba(9, 13, 23, 0.92);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  border-top-color: rgba(9, 13, 23, 0.92);
}

.leaflet-bar {
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  overflow: hidden;
}

.leaflet-bar a {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-bottom-color: var(--line) !important;
  backdrop-filter: blur(12px);
}

.leaflet-bar a:hover {
  background: rgba(53, 224, 255, 0.12) !important;
}

.leaflet-control-attribution {
  background: rgba(9, 13, 23, 0.7) !important;
  color: var(--muted) !important;
  font-size: 0.66rem;
}

.leaflet-control-attribution a {
  color: #6fa4c7 !important;
}

/* Weather block in the selected package */
.wx-block {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.wx-station {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
  background: rgba(9, 13, 23, 0.5);
}

.wx-station .wx-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.wx-station pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  line-height: 1.5;
  font-family: var(--mono);
  color: #b8c4da;
}

@media (max-width: 880px) {
  body {
    overflow: auto;
  }

  body::before {
    display: none;
  }

  .topbar {
    top: 8px;
    left: 8px;
    right: 8px;
    height: 52px;
    gap: 10px;
    padding: 0 12px;
  }

  .brand svg {
    width: 24px;
    height: 24px;
  }

  .brand-text span {
    display: none;
  }

  .topbar .feed {
    display: none;
  }

  #authStatus {
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
  }

  /* Flatten the two overlay columns so their panels become direct children of
     #appContent and can be reordered: booking, then the route result, then
     events, then the rest. */
  .overlay {
    display: contents;
  }

  #appContent {
    /* Panels start near the bottom edge so the map owns the screen; the two
       collapsed bars peek from the bottom and scrolling reveals the rest. */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: calc(100dvh - 148px);
    /* The empty area above the panels must let touches reach the fixed map
       behind it, otherwise pinch-zoom/pan on the map region did nothing. */
    pointer-events: none;
  }

  #appContent .panel {
    margin: 0 8px;
    max-height: none;
    overflow: visible;
    pointer-events: auto;
  }

  #selectionBar,
  #playbackBar,
  #toasts {
    pointer-events: auto;
  }

  .panel.booking { order: 1; }
  #result { order: 2; }
  #eventsPanel { order: 3; }
  #mostTracked { order: 4; }

  .panel {
    padding: 14px;
    border-radius: 12px;
  }

  .panel h2 {
    font-size: 0.9rem;
  }

  .login-gate,
  .planner,
  .grid,
  .login-grid,
  .facts,
  .flight-option {
    grid-template-columns: 1fr;
  }

  .grid {
    gap: 10px;
  }

  .login-gate {
    width: calc(100% - 24px);
  }

  .flight-meta {
    justify-items: start;
  }

  .airports {
    font-size: 1.45rem;
  }

  .chip {
    font-size: 0.68rem;
    min-height: 24px;
  }

  .cd-cell {
    min-width: 34px;
    padding: 4px 5px;
  }

  .cd-cell strong {
    font-size: 0.9rem;
  }

  .event-banner {
    max-height: 110px;
    object-fit: cover;
  }

  .note,
  .empty {
    font-size: 0.8rem;
    padding: 10px;
  }

  .btn {
    min-height: 40px;
    font-size: 0.88rem;
  }

  .selection-bar {
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-width: none;
  }

  .wx-station pre {
    font-size: 0.7rem;
  }

  .leaflet-control-attribution {
    font-size: 0.55rem !important;
  }
}


/* Flightradar-style aircraft popup */
.leaflet-popup-content { margin: 12px 14px; }
.fr-pop { display: grid; gap: 9px; font-size: 0.82rem; }
.fr-head { display: flex; align-items: center; gap: 10px; }
.fr-logo { width: 46px; height: 28px; flex: none; background: rgba(255, 255, 255, 0.92); border-radius: 5px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.fr-cs { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; color: var(--ink); }
.fr-sub { color: var(--muted); }
.fr-ac { color: var(--ink); opacity: 0.9; margin-top: -3px; }
.fr-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fr-ap b { display: block; font-size: 1.15rem; font-weight: 800; color: var(--teal); font-family: var(--mono); line-height: 1.1; }
.fr-ap span { display: block; font-size: 0.64rem; color: var(--muted); max-width: 76px; }
.fr-ap-r { text-align: right; }
.fr-ap-r span { margin-left: auto; }
.fr-mid { min-width: 96px; }
.fr-bar { position: relative; height: 4px; border-radius: 3px; background: rgba(148, 170, 215, 0.18); }
.fr-bar i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--teal), #23c3ea); }
.fr-plane { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 12px; color: var(--teal); text-shadow: 0 0 6px rgba(53, 224, 255, 0.6); }
.fr-prog { text-align: center; margin-top: 5px; color: var(--muted); }
.fr-noplan { color: var(--muted); padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fr-cell { background: rgba(148, 170, 215, 0.06); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }
.fr-cell label { display: block; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 2px; }
.fr-cell b { font-size: 0.92rem; font-weight: 700; color: var(--ink); font-family: var(--mono); }
.fr-cell span { display: block; font-size: 0.62rem; color: var(--muted); }
.fr-vs.up { color: var(--green); }
.fr-vs.down { color: var(--amber); }
.fr-pilot { color: var(--muted); }
.fr-det summary { cursor: pointer; color: var(--teal); }
.fr-routestr { margin-top: 5px; font-family: var(--mono); font-size: 0.68rem; color: var(--muted); word-break: break-word; line-height: 1.5; max-height: 120px; overflow: auto; }


/* Docked aircraft panel (replaces the floating map popup) */
.plane-panel {
  position: fixed;
  top: 84px;
  right: 12px;
  width: min(360px, 42vw);
  max-height: calc(100dvh - 170px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 1120;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  padding: 14px;
  scrollbar-width: thin;
}
.plane-panel .pp-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(148, 170, 215, 0.08);
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.plane-panel .pp-close:hover { color: var(--ink); }
.pp-photo:empty { display: none; }
.fr-fir {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--mono);
}
.fr-fir-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.fr-fir-dot.on { background: var(--green); box-shadow: 0 0 8px 1px rgba(52, 232, 164, 0.6); }
.fr-fir-dot.off { background: var(--muted); }

@media (max-width: 880px) {
  /* Bottom sheet so it never covers the map controls up top. */
  .plane-panel {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: 56dvh;
    border-radius: 16px;
  }
  /* Keep the zoom control clear of the topbar and the bottom sheet. */
  .leaflet-control-zoom {
    position: fixed !important;
    top: 70px;
    right: 10px;
    bottom: auto;
    left: auto;
    margin: 0 !important;
    z-index: 1100;
  }
}


/* Carthage Radar: full-screen approach scope over DTTA */
.tower-view {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: #060a12;
}
.tower-view canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.tw-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  pointer-events: none;
}
.tw-head > * { pointer-events: auto; }
.tw-title b {
  display: block;
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  color: var(--teal);
  text-shadow: 0 0 12px rgba(53, 224, 255, 0.5);
}
.tw-title span {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.tw-badge {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 71, 87, 0.5);
  color: #ff9aa5;
  background: rgba(255, 71, 87, 0.12);
  animation: pulse 2.4s ease-in-out infinite;
}
.tw-badge.pb {
  border-color: rgba(255, 181, 71, 0.5);
  color: var(--amber);
  background: rgba(255, 181, 71, 0.1);
  animation: none;
}
.tw-clock {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.tw-count {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  margin-left: auto;
}
.tw-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(148, 170, 215, 0.08);
  color: var(--muted);
  font-size: 1.3rem;
  cursor: pointer;
}
.tw-close:hover { color: var(--ink); }
.tw-atc {
  position: absolute;
  top: 62px;
  right: 16px;
  display: grid;
  gap: 6px;
  justify-items: end;
}
.tw-stn {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: #8df3cd;
  border: 1px solid rgba(52, 232, 164, 0.35);
  background: rgba(52, 232, 164, 0.08);
  border-radius: 6px;
  padding: 3px 8px;
}
.tw-stn b { color: var(--green); }
.tw-stn.off {
  color: var(--muted);
  border-color: var(--line);
  background: rgba(148, 170, 215, 0.05);
}
.tw-legend {
  position: absolute;
  left: 16px;
  bottom: 74px;
  display: grid;
  gap: 4px;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--muted);
}
.tw-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  transform: rotate(45deg);
}
.tw-legend i.dep { background: #35e0ff; }
.tw-legend i.arr { background: #ffb547; }
.tw-legend i.other { background: #9db2c6; }
.tw-status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--amber);
  pointer-events: none;
}
.tw-bar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(14, 19, 32, 0.9);
  border: 1px solid var(--line);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  max-width: calc(100vw - 20px);
}
.tw-btn {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(148, 170, 215, 0.08);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.tw-btn.live { border-color: rgba(255, 71, 87, 0.5); color: #ff9aa5; }
.tw-speeds { display: flex; gap: 4px; }
.tw-speeds button {
  font-family: var(--mono);
  font-size: 0.66rem;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.tw-speeds button.active {
  border-color: var(--line);
  color: var(--teal);
  background: rgba(53, 224, 255, 0.08);
}
#twScrub {
  width: 220px;
  accent-color: var(--teal);
}
/* replay-only controls hidden in live mode */
.tw-bar:not(.replay) #twPlay,
.tw-bar:not(.replay) .tw-speeds,
.tw-bar:not(.replay) #twScrub { display: none; }
.tw-bar.replay #twReplay { display: none; }
.tw-bar:not(.replay) #twLive { display: none; }

@media (max-width: 880px) {
  .tw-title span { display: none; }
  .tw-clock { font-size: 0.8rem; }
  #twScrub { width: 110px; }
  .tw-legend { bottom: 84px; }
  .tw-bar { flex-wrap: wrap; justify-content: center; }
}


/* "3D View" button inside the aircraft panel */
.fr-3d {
  width: 100%;
  padding: 9px;
  border-radius: 9px;
  border: 1px solid rgba(53, 224, 255, 0.4);
  background: linear-gradient(135deg, rgba(53, 224, 255, 0.16), rgba(53, 224, 255, 0.05));
  color: var(--teal);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.fr-3d:hover { background: rgba(53, 224, 255, 0.22); }

/* Full-screen 3D aircraft viewer */
.three-view { position: fixed; inset: 0; z-index: 1500; background: #060a12; }
.three-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.three-view canvas:active { cursor: grabbing; }
.td-head {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 18px; pointer-events: none;
}
.td-head > * { pointer-events: auto; }
.td-title b {
  display: block; font-family: var(--mono); font-size: 1.3rem; font-weight: 800;
  color: var(--ink); letter-spacing: 0.03em; text-shadow: 0 0 16px rgba(53, 224, 255, 0.4);
}
.td-title span { font-size: 0.78rem; color: var(--muted); }
.td-close {
  width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(148, 170, 215, 0.08); color: var(--muted); font-size: 1.5rem; cursor: pointer;
}
.td-close:hover { color: var(--ink); }
.td-stats {
  position: absolute; left: 18px; bottom: 20px; display: flex; gap: 10px; flex-wrap: wrap;
}
.td-stats > div {
  min-width: 84px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(14, 19, 32, 0.7); backdrop-filter: blur(8px);
}
.td-stats label { display: block; font-size: 0.58rem; letter-spacing: 0.1em; color: var(--muted); }
.td-stats b { font-family: var(--mono); font-size: 1.05rem; color: var(--teal); }
.td-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  font-size: 0.68rem; color: var(--muted); font-family: var(--mono); letter-spacing: 0.06em;
  pointer-events: none; opacity: 0.7;
}
.td-spin {
  position: absolute; right: 18px; bottom: 20px; width: 42px; height: 42px;
  border: 1px solid rgba(53, 224, 255, 0.4); border-radius: 50%;
  background: rgba(53, 224, 255, 0.1); color: var(--teal); font-size: 1.2rem; cursor: pointer;
}
.td-spin.off { border-color: var(--line); color: var(--muted); background: rgba(148, 170, 215, 0.06); }
.td-status {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 0.85rem; color: var(--amber); pointer-events: none;
}
@media (max-width: 880px) {
  .td-title b { font-size: 1.05rem; }
  .td-stats > div { min-width: 70px; padding: 6px 9px; }
  .td-hint { display: none; }
}


/* Enhanced 3D flight view (Cesium) */
.fly-view { position: fixed; inset: 0; z-index: 1550; background: #060a12; }
.fv-cesium { position: absolute; inset: 0; }
.fv-cesium .cesium-viewer-bottom, .fv-cesium .cesium-widget-credits { display: none !important; }
.fv-head { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px; pointer-events: none; }
.fv-head > * { pointer-events: auto; }
.fv-title b { display: block; font-family: var(--mono); font-size: 1.3rem; font-weight: 800; color: var(--ink); letter-spacing: 0.03em; text-shadow: 0 0 16px rgba(53, 224, 255, 0.45); }
.fv-title span { font-size: 0.78rem; color: var(--muted); }
.fv-close { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: rgba(148, 170, 215, 0.12); color: var(--muted); font-size: 1.5rem; cursor: pointer; }
.fv-close:hover { color: var(--ink); }
.fv-stats { position: absolute; left: 18px; bottom: 66px; display: flex; gap: 10px; flex-wrap: wrap; }
.fv-stats > div { min-width: 84px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(14, 19, 32, 0.72); backdrop-filter: blur(8px); }
.fv-stats label { display: block; font-size: 0.58rem; letter-spacing: 0.1em; color: var(--muted); }
.fv-stats b { font-family: var(--mono); font-size: 1.05rem; color: var(--teal); }
.fly-bar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; background: rgba(14, 19, 32, 0.88); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(10px); }
.fly-bar button { font-family: var(--mono); font-size: 0.72rem; padding: 7px 13px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.fly-bar button.active { border-color: var(--line); color: var(--teal); background: rgba(53, 224, 255, 0.1); }
.fv-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 0.85rem; color: var(--amber); pointer-events: none; }
.fv-credit { position: absolute; right: 8px; bottom: 4px; font-size: 9px; color: #4a5568; opacity: 0.7; }
@media (max-width: 880px) {
  .fv-title b { font-size: 1.05rem; }
  .fv-stats { bottom: 60px; }
  .fv-stats > div { min-width: 68px; padding: 6px 9px; }
}


/* Carthage Radar: Conflict And Risk Display (EuroScope-style window) */
.tw-cardbtn { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(148, 170, 215, 0.08); color: var(--muted); cursor: pointer; }
.tw-cardbtn.on { border-color: rgba(53, 224, 255, 0.5); color: var(--teal); background: rgba(53, 224, 255, 0.1); }
.tw-card { position: absolute; left: 16px; top: 66px; width: 580px; max-width: calc(100vw - 32px); background: #2b2b2b; border: 1px solid #565656; border-radius: 4px; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.6); font-family: var(--mono); z-index: 6; }
.twc-title { background: linear-gradient(#4c4c4c, #3a3a3a); color: #dcdcdc; font-size: 12px; padding: 4px 8px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #222; }
.twc-title button { background: transparent; border: 1px solid #666; color: #ccc; width: 18px; height: 18px; line-height: 1; border-radius: 2px; cursor: pointer; padding: 0; }
.twc-menu { background: #343434; color: #b8b8b8; font-size: 11px; padding: 3px 8px; display: flex; gap: 16px; border-bottom: 1px solid #222; }
.twc-body { display: flex; background: #1c1c1c; }
.twc-list { width: 190px; min-height: 200px; max-height: 260px; overflow-y: auto; border-right: 1px solid #333; padding: 4px; }
.twc-row { font-size: 11px; color: #cdd6d6; padding: 4px 6px; border-radius: 3px; cursor: pointer; white-space: nowrap; line-height: 1.35; }
.twc-row:hover { background: #333; }
.twc-row.sel { background: #1c5334; color: #eafff0; }
.twc-row.stca { color: #ff9aa5; }
.twc-empty { font-size: 11px; color: #888; padding: 8px; }
.twc-graph { display: block; background: #0a0a0a; }
@media (max-width: 880px) { .tw-card { width: calc(100vw - 24px); left: 12px; } .twc-list { width: 120px; } .twc-graph { width: 210px; height: 170px; } }


/* Tunis 3D (airloom-style scene) */
.airloom-view { position: fixed; inset: 0; z-index: 1560; background: #060a12; }
.al-cesium { position: absolute; inset: 0; }
.al-cesium .cesium-viewer-bottom, .al-cesium .cesium-widget-credits { display: none !important; }
.al-head { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: 14px 18px; pointer-events: none; }
.al-head > * { pointer-events: auto; }
.al-title b { font-family: var(--mono); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.16em; color: var(--teal); text-shadow: 0 0 14px rgba(53, 224, 255, 0.5); }
.al-title span { font-family: var(--mono); font-size: 0.9rem; color: var(--ink); margin-left: 10px; }
.al-badge { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 71, 87, 0.5); color: #ff9aa5; background: rgba(255, 71, 87, 0.12); }
.al-badge.pb { border-color: rgba(255, 181, 71, 0.5); color: var(--amber); background: rgba(255, 181, 71, 0.1); }
.al-count { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); margin-left: auto; }
.al-follow { font-family: var(--mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(53,224,255,0.5); color: var(--teal); background: rgba(53,224,255,0.12); }
.al-close { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 9px; background: rgba(148, 170, 215, 0.1); color: var(--muted); font-size: 1.4rem; cursor: pointer; }
.al-close:hover { color: var(--ink); }
.al-legend { position: absolute; left: 18px; bottom: 66px; display: flex; gap: 12px; font-family: var(--mono); font-size: 0.66rem; color: var(--muted); background: rgba(14, 19, 32, 0.7); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.al-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.al-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--mono); color: var(--amber); pointer-events: none; }
.al-bar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(14, 19, 32, 0.9); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(10px); max-width: calc(100vw - 20px); }
.al-btn { font-family: var(--mono); font-size: 0.7rem; font-weight: 700; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(148, 170, 215, 0.08); color: var(--ink); cursor: pointer; white-space: nowrap; }
.al-btn.live { border-color: rgba(255, 71, 87, 0.5); color: #ff9aa5; }
.al-speeds { display: flex; gap: 4px; }
.al-speeds button { font-family: var(--mono); font-size: 0.66rem; padding: 5px 8px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.al-speeds button.active { border-color: var(--line); color: var(--teal); background: rgba(53, 224, 255, 0.08); }
#alScrub { width: 220px; accent-color: var(--teal); }
.al-bar:not(.replay) #alPlay, .al-bar:not(.replay) .al-speeds, .al-bar:not(.replay) #alScrub { display: none; }
.al-bar.replay #alReplay { display: none; }
.al-bar:not(.replay) #alLive { display: none; }
.al-credit { position: absolute; right: 8px; bottom: 4px; font-size: 9px; color: #4a5568; opacity: 0.6; }
@media (max-width: 880px) { #alScrub { width: 120px; } .al-bar { flex-wrap: wrap; justify-content: center; } .al-legend { bottom: 78px; } }