:root{
  --bg:#07101f;
  --panel:#0e1a32;
  --panel-soft:rgba(14,26,50,.76);
  --panel-strong:#0b1430;
  --stroke:rgba(159,184,255,.16);
  --text:#ecf2ff;
  --muted:#9cb0dc;
  --accent:#f3a53a;
  --accent-soft:rgba(243,165,58,.18);
  --ok:#79e2ab;
  --bad:#ff7373;
  --shadow:0 24px 60px rgba(0,0,0,.42);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:16px;
}

*{box-sizing:border-box}
html,body{min-height:100%; overflow-x:hidden;}
body{
  margin:0;
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 720px at 50% -120px, rgba(59,95,196,.42), transparent 62%),
    radial-gradient(900px 600px at 100% 0, rgba(243,165,58,.14), transparent 55%),
    linear-gradient(180deg, #091224, #050a15 72%);
}

.appShell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:20px;
  gap:18px;
}

.topBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brandBlock{
  display:flex;
  align-items:center;
  gap:14px;
}

.brandLogo{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.32);
}

.eyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--accent);
  font-weight:800;
  margin-bottom:6px;
}

h1,h2,h3{margin:0}
h1{font-size:24px}
h2{font-size:30px; line-height:1.05}
h3{font-size:20px}

.topStatus{
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
}

body.installBannerVisible .appShell{
  padding-bottom:calc(132px + env(safe-area-inset-bottom));
}

.installBanner{
  position:fixed;
  left:max(14px, env(safe-area-inset-left));
  right:max(14px, env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:46;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-radius:24px;
  border:1px solid rgba(243,165,58,.34);
  background:
    radial-gradient(420px 180px at 0 0, rgba(243,165,58,.22), transparent 58%),
    radial-gradient(520px 240px at 100% 100%, rgba(86,124,214,.16), transparent 62%),
    linear-gradient(180deg, rgba(14,25,54,.98), rgba(6,11,24,.99));
  box-shadow:0 24px 60px rgba(0,0,0,.44), 0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(18px);
}

.installBanner.isVisible{
  display:flex;
}

.installBannerCopy{
  min-width:0;
  flex:1 1 auto;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}

.installBannerTitle{
  font-size:15px;
  font-weight:900;
  line-height:1.2;
  color:#fff1d8;
  letter-spacing:.02em;
}

.installBannerText{
  margin-top:6px;
  color:#cfdbfb;
  font-size:13px;
  line-height:1.5;
  max-width:680px;
}

.installBannerActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  flex:0 0 auto;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(3,8,20,.46);
}

.installBannerActions .primaryBtn,
.installBannerActions .secondaryBtn{
  width:auto;
  white-space:nowrap;
}

.installBannerActions .primaryBtn{
  background:linear-gradient(180deg, #ffd07c, #f3a53a);
  color:#13213e;
  box-shadow:0 12px 24px rgba(243,165,58,.24);
}

.installBannerActions .secondaryBtn{
  background:linear-gradient(180deg, rgba(95,129,215,.22), rgba(55,79,145,.18));
  border-color:rgba(123,153,228,.34);
  color:#eef4ff;
}

.installGuideSteps{
  margin:20px 0 0;
  padding-left:20px;
  display:grid;
  gap:10px;
}

.installGuideSteps li{
  color:var(--text);
  line-height:1.55;
}

.installGuideTip{
  margin-top:18px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  line-height:1.5;
  font-size:13px;
}

.modalBackdrop{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(3,7,15,.7);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
  z-index:50;
}

.modalBackdrop.isVisible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.modalCard{
  position:relative;
  width:min(980px,100%);
  max-height:min(88vh,860px);
  overflow:auto;
  padding:28px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(700px 340px at 0 0, rgba(243,165,58,.12), transparent 55%),
    linear-gradient(180deg, rgba(18,31,60,.98), rgba(7,12,25,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.5);
}

.modalCardCompact{
  width:min(560px,100%);
}

.handoffModalCard{
  border-color:rgba(243,165,58,.22);
  background:
    radial-gradient(560px 280px at 0 0, rgba(243,165,58,.12), transparent 58%),
    linear-gradient(180deg, rgba(18,31,60,.98), rgba(7,12,25,.98));
}

.modalCardWeather{
  width:min(860px,100%);
}

.modalCardPilotNetwork{
  width:min(1180px,100%);
}

.modalCardPilotNetworkActive{
  width:min(640px,100%);
}

.modalCardPilotNetworkSearch{
  width:min(760px,100%);
}

.modalCloseBtn{
  position:absolute;
  top:18px;
  right:18px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--muted);
  border:1px solid rgba(255,255,255,.10);
  z-index:1001;
}

.liveMapModalCard{
  width:min(1240px,100%);
  overflow:auto;
}

.liveMapStatusRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:18px 0 10px;
}

.liveMapStatus{
  color:#dce8ff;
  font-weight:800;
}

.liveMapRefreshBtn{
  flex:0 0 auto;
}

.liveMapLegend{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:12px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.liveMapLegend span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.liveMapLegendDot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}

.liveMapLegendDot.isLive{
  background:#43e3a2;
  box-shadow:0 0 0 4px rgba(67,227,162,.13);
}

.liveMapLegendDot.isEstimated{
  border:2px solid #f3a53a;
  background:transparent;
}

.liveMapCanvas{
  width:100%;
  height:min(60vh,650px);
  min-height:420px;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:#07101e;
  z-index:0;
}

.liveMapCanvas .leaflet-control-attribution{
  font-size:10px;
}

.liveMapCanvas .leaflet-popup-content-wrapper,
.liveMapCanvas .leaflet-popup-tip{
  background:#0c1930;
  color:#eef4ff;
}

.liveMapPopup{
  min-width:190px;
  line-height:1.45;
}

.liveMapPopup strong{
  display:block;
  color:#fff;
  font-size:15px;
  margin-bottom:4px;
}

.liveMapPopup span{
  display:block;
  color:#adc0e5;
  font-size:12px;
}

.livePilotMarker{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.94);
  background:#0d2440;
  color:#43e3a2;
  box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 0 4px rgba(67,227,162,.17);
  font-size:20px;
}

.livePilotMarker.isEstimated{
  color:#f3a53a;
  border-color:#f3a53a;
  background:#172035;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
}

.livePilotMarkerGlyph{
  display:block;
  line-height:1;
}

.liveMapFlightList{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
  max-height:150px;
  overflow:auto;
}

.liveMapFlightCard{
  padding:11px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
}

.liveMapFlightCard strong,
.liveMapFlightCard span{
  display:block;
}

.liveMapFlightCard strong{
  color:#fff;
  font-size:13px;
}

.liveMapFlightCard span{
  color:var(--muted);
  font-size:11px;
  margin-top:3px;
}

.liveMapEmpty{
  grid-column:1 / -1;
  padding:18px;
  text-align:center;
  color:var(--muted);
}

.modalEyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--accent);
  font-weight:800;
  margin-bottom:8px;
}

.modalLead{
  margin:14px 0 0;
  color:var(--muted);
  line-height:1.6;
  max-width:760px;
}

.modalVersionTag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:2px 0 0;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(243,165,58,.22);
  background:rgba(243,165,58,.12);
  color:#ffe1b7;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

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

.modalFeatureCard{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.modalFeatureTitle{
  font-size:15px;
  font-weight:900;
}

.modalFeatureCard p{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.55;
  font-size:13px;
}

.modalActions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:24px;
  flex-wrap:wrap;
}

.xboxConnectStatusCard{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--muted);
}

.xboxConnectStatusCard.isSuccess{
  border-color:rgba(121,226,171,.28);
  background:rgba(121,226,171,.1);
  color:#dff8eb;
}

.xboxConnectStatusCard.isError{
  border-color:rgba(255,115,115,.26);
  background:rgba(255,115,115,.08);
  color:#ffe0e0;
}

.xboxConnectSpinner{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  border-top-color:var(--accent);
  flex:0 0 auto;
  animation:xboxConnectSpin .85s linear infinite;
}

.xboxConnectStatusMessage{
  line-height:1.45;
  font-weight:700;
}

.xboxPairHero{
  margin-top:20px;
  display:grid;
  gap:16px;
}

.xboxPairCodeCard,
.xboxPairLiveCard{
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(420px 180px at 0 0, rgba(243,165,58,.12), transparent 62%),
    rgba(255,255,255,.05);
}

.xboxPairCodeLabel{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#ffe1b7;
  font-weight:900;
}

.xboxPairCodeValue{
  margin-top:12px;
  font-size:42px;
  line-height:1;
  letter-spacing:.22em;
  font-weight:900;
  color:#fff5df;
  font-variant-numeric:tabular-nums;
}

.xboxPairCodeMeta{
  margin-top:12px;
  color:var(--muted);
  line-height:1.55;
  font-size:13px;
}

.xboxPairSteps{
  display:grid;
  gap:12px;
}

.xboxPairStep{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--text);
  line-height:1.5;
  font-size:13px;
}

.xboxPairStep span{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(243,165,58,.14);
  border:1px solid rgba(243,165,58,.28);
  color:#ffe1b7;
  font-weight:900;
}

@keyframes xboxConnectSpin{
  to{transform:rotate(360deg)}
}

.handoffModalActionRow{
  display:flex;
  margin-top:22px;
}

.handoffModalPrimary{
  width:100%;
  min-height:58px;
  font-size:16px;
}

.screens{
  flex:1;
  position:relative;
  min-height:calc(100vh - 120px);
}

.screen{
  display:none;
  width:100%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.screen.isActive{
  display:block;
  position:relative;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

body.vrExperience{
  background:
    radial-gradient(900px 900px at 50% 20%, rgba(243,165,58,.12), transparent 55%),
    linear-gradient(180deg, #05070d, #020306 78%);
}

body.vrExperience .topBar{
  display:none;
}

body.vrExperience .appShell{
  padding:0;
}

body.vrExperience .screens{
  min-height:100vh;
  min-height:100dvh;
  min-height:100svh;
}

#unlockScreen.isActive,
#setupScreen.isActive{
  display:flex;
  align-items:center;
  justify-content:center;
}

#flightScreen.isActive{
  display:block;
}

.card{
  width:min(840px,100%);
  margin:auto;
  background:linear-gradient(180deg, rgba(18,31,60,.96), rgba(10,18,38,.96));
  border:1px solid var(--stroke);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}

.heroCard,
.setupCard{
  padding:30px;
}

.heroCopy p,
.sectionText{
  margin:14px 0 0;
  color:var(--muted);
  line-height:1.6;
  max-width:720px;
}

.fieldBlock{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:22px;
}

label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.45px;
  color:var(--muted);
  font-weight:700;
}

input,
select{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:14px 15px;
  background:rgba(4,9,20,.58);
  color:var(--text);
  font-size:15px;
  outline:none;
}

input::placeholder{color:rgba(236,242,255,.32)}
select{
  appearance:none;
}

input:focus,
select:focus{
  border-color:rgba(243,165,58,.7);
  box-shadow:0 0 0 4px rgba(243,165,58,.12);
}

.actionRow{
  display:flex;
  gap:12px;
  margin-top:22px;
}

.actionRow.split{
  justify-content:space-between;
}

button{
  border:0;
  cursor:pointer;
  border-radius:16px;
  padding:14px 18px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.3px;
}

.primaryBtn{
  background:linear-gradient(180deg, #f6b14e, var(--accent));
  color:#172341;
  box-shadow:0 14px 30px rgba(243,165,58,.24);
}

.secondaryBtn{
  background:rgba(255,255,255,.07);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
}

button:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}

.statusCard{
  margin-top:22px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.statusDot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.24);
  box-shadow:0 0 0 6px rgba(255,255,255,.04);
  margin-top:3px;
  flex:0 0 auto;
}

.statusDot.ok{background:var(--ok); box-shadow:0 0 0 6px rgba(121,226,171,.12)}
.statusDot.bad{background:var(--bad); box-shadow:0 0 0 6px rgba(255,115,115,.12)}

.statusTitle{
  font-size:15px;
  font-weight:800;
}

.statusText{
  margin-top:5px;
  color:var(--muted);
  line-height:1.5;
  font-size:13px;
}

.sectionHeader{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.pill{
  padding:10px 14px;
  border-radius:999px;
  background:var(--accent-soft);
  color:#ffd8a5;
  border:1px solid rgba(243,165,58,.28);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.setupGrid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);
  gap:18px;
  align-items:end;
  margin-top:22px;
}

.actionTile{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.helperText{
  color:var(--muted);
  line-height:1.45;
  font-size:12px;
}

.xboxSetupRow{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.xboxSetupBtn{
  width:auto;
}

.xboxSetupBtn.isDisabled{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
  color:rgba(236,242,255,.58);
}

.xboxSetupBtn.isConnected{
  background:rgba(121,226,171,.12);
  border-color:rgba(121,226,171,.28);
  color:#dff8eb;
}

.comingSoonTag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#c8d4f6;
  font-size:11px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.xboxSetupMeta{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  flex:1 1 260px;
  min-width:220px;
}

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

.summaryCard{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.summaryCard.isUnavailable{
  opacity:.66;
  border-color:rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
}

.summaryCardWide{
  grid-column:1 / -1;
}

.summaryLabel{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.45px;
  color:var(--muted);
  font-weight:800;
}

.summaryValue{
  margin-top:8px;
  font-size:22px;
  font-weight:900;
  line-height:1.15;
}

.summaryValueSmall{
  font-size:17px;
  line-height:1.35;
  word-break:break-word;
}

.summarySelect{
  margin-top:10px;
}

.optionToggle{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  font-size:15px;
  color:var(--text);
  text-transform:none;
  letter-spacing:0;
}

.optionToggle input{
  width:20px;
  height:20px;
  accent-color:var(--accent);
  padding:0;
  margin:0;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:6px;
  flex:0 0 auto;
}

.summaryMeta{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.summaryMetaAccent{
  color:rgba(255,255,255,.86);
}

.actionRow.compact{
  margin-top:14px;
  flex-wrap:wrap;
}

.fileSelectBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  cursor:pointer;
  text-align:center;
}

.hiddenFileInput{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.flightScreen.isActive{
  display:block;
}

.flightShell{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.flightHeader{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
}

.flightHeaderTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.flightHeaderTop > *{
  min-width:0;
}

.headerControls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.headerControls .audioToggleBtn{
  width:auto;
  min-width:150px;
}

.audioSetupLaunchBtn{
  min-width:148px;
  border-color:rgba(243,165,58,.28);
  background:rgba(243,165,58,.12);
  color:#ffe1b7;
}

.flightInfoBoard{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.flightInfoHero{
  position:relative;
  overflow:hidden;
  padding:18px 20px;
  border-radius:22px;
  border:1px solid rgba(243,165,58,.24);
  background:
    radial-gradient(360px 160px at 0 0, rgba(243,165,58,.20), transparent 62%),
    radial-gradient(460px 220px at 100% 100%, rgba(86,124,214,.14), transparent 64%),
    linear-gradient(180deg, rgba(10,18,38,.96), rgba(6,11,24,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 32px rgba(0,0,0,.22);
}

.flightInfoHero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,0) 18%) 0 0 / 18px 100%,
    linear-gradient(180deg, rgba(255,255,255,.04) 0, rgba(255,255,255,0) 18%) 0 0 / 100% 18px;
  opacity:.18;
  pointer-events:none;
}

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

.flightInfoCard{
  padding:15px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  min-width:0;
}

.flightInfoCardWide{
  grid-column:1 / -1;
}

.flightInfoLabel{
  position:relative;
  z-index:1;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(243,165,58,.88);
}

.flightInfoRouteCodes{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
  margin-top:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
  font-size:clamp(28px,4vw,42px);
  font-weight:800;
  letter-spacing:.16em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.flightInfoAirportCode{
  color:var(--text);
  text-shadow:0 0 22px rgba(255,255,255,.08);
}

.flightInfoRouteArrow{
  color:rgba(243,165,58,.9);
  font-size:.72em;
  letter-spacing:0;
  transform:translateY(-2px);
}

.flightInfoHeroMeta,
.flightInfoMeta{
  position:relative;
  z-index:1;
  color:var(--muted);
  line-height:1.45;
}

.flightInfoHeroMeta{
  margin-top:10px;
  max-width:40ch;
  color:#d9e4ff;
}

.flightInfoValue{
  position:relative;
  z-index:1;
  margin-top:10px;
  font-size:18px;
  font-weight:700;
  line-height:1.15;
  color:var(--text);
  word-break:break-word;
}

.flightInfoMeta{
  margin-top:6px;
  font-size:12px;
}

.headerMilestonePanel{
  width:100%;
  align-self:stretch;
}

.headerMilestonePanel .statusPanelValue,
.headerMilestonePanel .statusPanelText{
  text-align:left;
}

.headerActionBtn{
  width:auto;
}

.isHidden{
  display:none !important;
}

body.commsOnly .commsOnlyHidden{
  display:none !important;
}

body.commsOnly #flightScreen .cabinDock,
body.commsOnly #flightScreen .cabinDock.unifiedPanel,
body.commsOnly #flightScreen .announcementPanel,
body.commsOnly #flightScreen .signsPanel,
body.commsOnly #flightScreen .manualPanel,
body.commsOnly #flightScreen .audioPanel,
body.commsOnly #audioSetupCabinSection{
  display:none !important;
}

body.commsOnly .unifiedFlightBoard{
  grid-template-columns:minmax(260px,.95fr) minmax(360px,1.25fr);
}

.flightCanvas{
  display:grid;
  grid-template-columns:minmax(0,2.15fr) minmax(320px,.92fr);
  gap:18px;
  align-items:start;
  min-height:0;
}

.commsStage{
  width:100%;
  min-height:0;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(7,13,25,.86);
  box-shadow:0 22px 46px rgba(0,0,0,.4);
  backdrop-filter:blur(12px);
}


.cabinDock{
  position:relative;
  top:auto;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:none;
  overflow:visible;
  overscroll-behavior:auto;
  scrollbar-gutter:auto;
  padding:16px;
  border-radius:24px;
  background:rgba(7,13,25,.86);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 46px rgba(0,0,0,.4);
  backdrop-filter:blur(12px);
}

.dockHeader{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.atcHeaderActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.dockEyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.45px;
  color:var(--accent);
  font-weight:800;
  margin-bottom:4px;
}

.dockPill{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

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

.dockMetaCard,
.statusPanel,
.announcementPanel,
.signsPanel,
.manualPanel,
.audioPanel{
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.audioControlRow{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.audioToggleBtn{
  width:100%;
}

.audioStatusText{
  color:var(--muted);
  line-height:1.5;
  font-size:13px;
}

.audioSliderGrid{
  display:grid;
  gap:14px;
  margin-top:12px;
}

.audioSliderBlock{
  display:grid;
  gap:8px;
}

.audioSliderHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.audioSliderLabel{
  font-size:12px;
  font-weight:800;
  color:var(--text);
}

.audioSliderValue{
  font-size:12px;
  font-weight:900;
  color:#ffe1b7;
}

.audioRange{
  width:100%;
  margin:0;
  accent-color:var(--accent);
}

.audioRangeHelper{
  color:var(--muted);
  line-height:1.45;
  font-size:12px;
}

.audioSetupShortcutRow{
  margin-top:14px;
}

.audioSetupShortcutRow .secondaryBtn{
  flex:1 1 220px;
}

.audioSetupSection{
  margin-top:18px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  scroll-margin-top:24px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.audioSetupSection.isFocused{
  border-color:rgba(243,165,58,.28);
  background:rgba(243,165,58,.08);
  box-shadow:0 0 0 1px rgba(243,165,58,.18);
}

.audioSetupSectionTitle{
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#ffe1b7;
}

.pilotNetworkSetupCard.isConnected{
  border-color:rgba(243,165,58,.24);
  background:
    radial-gradient(520px 180px at 0 0, rgba(243,165,58,.08), transparent 60%),
    rgba(255,255,255,.05);
}

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

.pilotNetworkAuthActions{
  margin-top:16px;
}

.pilotNetworkStatusCard{
  margin-top:16px;
}

.pilotNetworkModalTopGrid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:14px;
  margin-top:22px;
  align-items:start;
}

.pilotNetworkMetaGrid{
  grid-column:1 / -1;
}

.pilotNetworkRoomCard{
  display:grid;
  gap:12px;
}

.pilotNetworkRoomActions button{
  flex:1 1 220px;
}

.pilotNetworkRoomSearchAction{
  margin-top:2px;
}

.pilotNetworkSearchAirspacesBtn{
  width:100%;
}

.pilotNetworkRoomCardHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.pilotNetworkModalMainGrid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:14px;
  margin-top:14px;
  align-items:start;
}

.pilotNetworkTrafficBlock,
.pilotNetworkNearbyBlock,
.pilotNetworkMessagesBlock{
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.pilotNetworkFlightGrid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:12px;
}

.pilotNetworkTrafficList,
.pilotNetworkNearbyList,
.pilotNetworkMessageList,
.pilotNetworkFollowingList{
  display:grid;
  gap:10px;
  margin-top:12px;
  max-height:280px;
  overflow:auto;
}

.pilotNetworkMessagesModalBlock{
  margin-top:14px;
}

.pilotNetworkSelectedPilotCard{
  display:grid;
  gap:12px;
}

.pilotNetworkSelectedPilotActions{
  margin-top:0;
}

.pilotNetworkNearbyInstruction{
  margin-top:10px;
}

.pilotNetworkActiveAirspacesStatus{
  margin-top:18px;
}

.pilotNetworkActiveAirspacesList{
  display:grid;
  gap:12px;
  margin-top:18px;
  max-height:420px;
  overflow:auto;
}

.pilotNetworkSearchField{
  margin-top:18px;
}

.pilotNetworkSearchAirspacesStatus{
  margin-top:16px;
}

.pilotNetworkSearchAirspacesList{
  display:grid;
  gap:12px;
  margin-top:18px;
  max-height:440px;
  overflow:auto;
}

.pilotNetworkSearchAirspaceBtn{
  width:100%;
  text-align:left;
  display:grid;
  gap:8px;
}

.pilotNetworkSearchAirspaceHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.pilotNetworkSearchAirspaceMeta{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

.pilotNetworkActiveAirspaceBtn{
  width:100%;
  text-align:left;
  display:grid;
  gap:8px;
}

.pilotNetworkActiveAirspaceHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.pilotNetworkActiveAirspaceMeta{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

.pilotNetworkActiveAirspaceCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(243,165,58,.24);
  background:rgba(243,165,58,.12);
  color:#ffe1b7;
  font-size:11px;
  font-weight:800;
  letter-spacing:.45px;
  text-transform:uppercase;
}

.pilotNetworkActiveAirspaceBtn.isSelected{
  border-color:rgba(243,165,58,.34);
  background:rgba(243,165,58,.12);
  box-shadow:0 10px 24px rgba(255,166,77,.12);
}

.pilotNetworkPilotBtn{
  width:100%;
  text-align:left;
  display:grid;
  gap:4px;
}

.pilotNetworkPilotRow,
.pilotNetworkFollowingRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
}

.pilotNetworkPilotBtn span{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

.pilotNetworkPilotBtn strong{
  display:block;
}

.pilotNetworkPilotBtn.isActive{
  border-color:rgba(243,165,58,.34);
  background:rgba(243,165,58,.12);
  box-shadow:0 10px 24px rgba(255,166,77,.12);
}

.pilotNetworkFollowBtn,
.pilotNetworkFollowingBtn{
  min-width:116px;
  min-height:54px;
}

.pilotNetworkFollowBtn.isFollowing,
.pilotNetworkFollowingBtn.isFollowing{
  border-color:rgba(243,165,58,.34);
  background:rgba(243,165,58,.12);
  color:#ffe1b7;
}

.pilotNetworkSocialLinks,
.pilotNetworkProfileStats,
.pilotNetworkRecentFlights{
  display:grid;
  gap:10px;
}

.pilotNetworkSocialLinks{
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}

.pilotNetworkSocialLink{
  display:grid;
  gap:4px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--text);
  text-decoration:none;
}

.pilotNetworkSocialLink span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#ffe1b7;
  font-weight:800;
}

.pilotNetworkSocialLink strong{
  font-size:13px;
}

.pilotNetworkProfileStats{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.pilotNetworkStatCard,
.pilotNetworkFlightCard{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

.pilotNetworkStatLabel{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  font-weight:800;
}

.pilotNetworkStatValue{
  margin-top:6px;
  font-size:20px;
  font-weight:900;
  color:#fff3dd;
}

.pilotNetworkStatMeta,
.pilotNetworkFlightMeta{
  margin-top:6px;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.pilotNetworkRecentFlights{
  max-height:220px;
  overflow:auto;
}

.pilotNetworkFlightCard strong{
  display:block;
}

.pilotNetworkFlightMeta + .pilotNetworkFlightMeta{
  margin-top:4px;
}

.pilotNetworkComposer{
  margin-top:12px;
}

.pilotNetworkComposer textarea{
  width:100%;
  min-height:88px;
  resize:vertical;
}

.pilotNetworkComposerActions{
  margin-top:12px;
}

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

.weatherModalCard{
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
}

.weatherModalCardWide{
  grid-column:1 / -1;
}

.weatherModalTitle{
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#ffe1b7;
}

.weatherModalText{
  margin-top:10px;
  color:var(--muted);
  line-height:1.58;
  font-size:13px;
  white-space:pre-line;
  word-break:break-word;
}

.atcSettingsBtn{
  min-height:auto;
}

.dockMetaLabel,
.panelLabel,
.statusPanelLabel{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.45px;
  color:var(--muted);
  font-weight:800;
}

.dockMetaValue,
.statusPanelValue{
  margin-top:7px;
  font-size:15px;
  font-weight:900;
  line-height:1.3;
  word-break:normal;
  overflow-wrap:anywhere;
}

.statusPanelText,
.announcementText{
  margin-top:8px;
  color:var(--muted);
  line-height:1.52;
  font-size:13px;
  word-break:normal;
  overflow-wrap:anywhere;
}

.actionPanel{
  border-color:rgba(243,165,58,.18);
  background:
    radial-gradient(520px 180px at 0 0, rgba(243,165,58,.08), transparent 60%),
    rgba(255,255,255,.05);
}

.actionPanelRow{
  display:flex;
  margin-top:14px;
}

.actionPanelButton{
  width:100%;
  min-height:52px;
}

.actionMilestoneGrid{
  margin-top:14px;
}

.milestoneBtn{
  min-height:50px;
  font-weight:800;
}

.milestoneBtn.isPreview{
  opacity:.52;
  border-style:dashed;
}

.milestoneBtn.isLocked{
  opacity:.72;
}

.milestoneBtn.isAvailable{
  border-color:rgba(255,194,102,.5);
  background:linear-gradient(180deg, rgba(255,194,102,.2), rgba(255,194,102,.08));
  box-shadow:0 10px 24px rgba(255,166,77,.14);
}

.milestoneBtn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.milestoneBtn.isPreview:disabled{
  cursor:default;
}

.buttonGrid{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.buttonGrid.twoCol{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.toggleBtn,
.ghostBtn{
  border-radius:14px;
  padding:12px 10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
}

.toggleBtn.isActive{
  background:var(--accent-soft);
  border-color:rgba(243,165,58,.42);
  color:#ffe1b7;
}

.manualPanel summary{
  cursor:pointer;
  font-weight:800;
  list-style:none;
}

.manualPanel summary::-webkit-details-marker{
  display:none;
}

.overrideGroup + .overrideGroup{
  margin-top:14px;
}

.overrideLabel{
  margin-top:12px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.45px;
  color:var(--muted);
  font-weight:800;
}

.captainButtons{
  grid-template-columns:1fr;
}

.manualButtons{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.captainBtn{
  min-height:52px;
  font-weight:800;
  background:rgba(243,165,58,.12);
  border-color:rgba(243,165,58,.28);
  color:#ffe1b7;
}

.cabinPlayer{
  width:100%;
  margin-top:12px;
  border-radius:14px;
  background:rgba(0,0,0,.22);
}

.boardingMusicPlayer{
  display:none;
}

.vrScreen.isActive{
  display:block;
}

.vrShell{
  min-height:100vh;
  min-height:100dvh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:
    calc(16px + env(safe-area-inset-top))
    calc(16px + env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom))
    calc(16px + env(safe-area-inset-left));
}

.vrTopBar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.vrEyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.45px;
  color:var(--accent);
  font-weight:800;
}

.vrTitle{
  margin-top:6px;
  font-size:22px;
  font-weight:900;
  line-height:1.1;
}

.vrMeta,
.vrPhaseMeta{
  color:var(--muted);
  line-height:1.45;
}

.vrMeta{
  margin-top:6px;
  font-size:14px;
}

.vrPhaseMeta{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.vrStatusPill{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.vrPttButton{
  flex:1;
  width:100%;
  min-height:56vh;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(700px 420px at 50% 18%, rgba(243,165,58,.18), transparent 55%),
    linear-gradient(180deg, rgba(20,30,54,.96), rgba(8,12,21,.98));
  color:var(--text);
  box-shadow:0 30px 80px rgba(0,0,0,.48);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:24px;
  text-align:center;
}

.vrPttButton.isRecording{
  background:
    radial-gradient(700px 420px at 50% 18%, rgba(255,115,115,.2), transparent 55%),
    linear-gradient(180deg, rgba(70,20,28,.95), rgba(22,8,12,.98));
  border-color:rgba(255,115,115,.36);
  box-shadow:0 0 0 8px rgba(255,115,115,.08), 0 30px 80px rgba(0,0,0,.48);
}

.vrPttButton.isReceiving{
  background:
    radial-gradient(700px 420px at 50% 18%, rgba(121,226,171,.16), transparent 55%),
    linear-gradient(180deg, rgba(12,42,33,.95), rgba(8,16,14,.98));
  border-color:rgba(121,226,171,.3);
}

.vrPttLabel{
  font-size:clamp(28px, 8vw, 56px);
  line-height:1;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.vrPttHint{
  max-width:460px;
  color:var(--muted);
  line-height:1.5;
  font-size:15px;
}

.vrFooter{
  display:flex;
  justify-content:center;
}

@media (max-width: 980px){
  .modalCard{
    padding:22px;
    border-radius:24px;
  }

  .modalCardPilotNetwork{
    width:min(960px,100%);
  }

  .modalCardPilotNetworkActive{
    width:min(560px,100%);
  }

  .modalCardPilotNetworkSearch{
    width:min(640px,100%);
  }

  .modalFeatureGrid{
    grid-template-columns:minmax(0,1fr);
  }

  .topBar,
  .sectionHeader,
  .flightHeader{
    flex-direction:column;
    align-items:flex-start;
  }

  .flightHeaderTop{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }

  .headerControls{
    justify-content:flex-start;
  }

  .topStatus,
  .pill{
    white-space:normal;
  }

  .setupGrid,
  .summaryGrid{
    grid-template-columns:1fr;
  }

  .summaryCardWide{
    grid-column:auto;
  }

  .flightCanvas{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:auto;
  }

  .commsStage{
    min-height:0;
  }

  

  .cabinDock{
    position:static;
    width:100%;
    max-height:none;
    overflow:visible;
  }

  .pilotNetworkModalTopGrid,
  .pilotNetworkModalMainGrid{
    grid-template-columns:minmax(0,1fr);
  }

  .pilotNetworkRoomCardHeader{
    flex-direction:column;
    align-items:flex-start;
  }

  .pilotNetworkPilotRow,
  .pilotNetworkFollowingRow{
    grid-template-columns:minmax(0,1fr);
  }

  .pilotNetworkProfileStats{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width: 640px){
  body{
    font-size:14px;
  }

  .appShell{
    padding:14px;
  }

  body.installBannerVisible .appShell{
    padding-bottom:calc(178px + env(safe-area-inset-bottom));
  }

  .modalBackdrop{
    padding:14px;
  }

  .modalCard{
    padding:18px;
  }

  .modalCardPilotNetwork{
    max-height:min(92vh,960px);
  }

  .modalCardPilotNetworkActive{
    max-height:min(88vh,760px);
  }

  .modalCardPilotNetworkSearch{
    max-height:min(88vh,820px);
  }

  .modalCloseBtn{
    position:static;
    margin-left:auto;
    margin-bottom:14px;
  }

  .modalActions{
    justify-content:stretch;
  }

  .modalActions .primaryBtn,
  .modalActions .secondaryBtn{
    width:100%;
  }

  h1{font-size:20px}
  h2{font-size:25px}

  .vrPttButton{
    min-height:60vh;
    border-radius:26px;
    padding:18px;
  }

  .vrPttHint{
    font-size:14px;
  }

  .heroCard,
  .setupCard{
    padding:22px;
  }

  .actionRow,
  .actionRow.split{
    flex-direction:column;
  }

  .pilotNetworkTrafficList,
  .pilotNetworkNearbyList,
  .pilotNetworkMessageList{
    max-height:220px;
  }

  .xboxSetupBtn{
    width:100%;
  }

  .xboxPairCodeValue{
    font-size:34px;
    letter-spacing:.18em;
  }

  .installBanner{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:15px;
  }

  .installBannerCopy,
  .installBannerActions{
    width:100%;
  }

  .installBannerActions{
    justify-content:stretch;
  }

  .installBannerActions .primaryBtn,
  .installBannerActions .secondaryBtn{
    width:100%;
  }

  .buttonGrid.twoCol,
  .manualButtons,
  .dockMetaGrid{
    grid-template-columns:1fr;
  }
}

/* SkyLink layout stability patch: desktop stays side-by-side, mobile stays stacked. */
@media (min-width: 800px){
  .flightCanvas{
    display:grid !important;
    grid-template-columns:minmax(0,2.15fr) minmax(320px,.92fr) !important;
    gap:18px !important;
    align-items:start !important;
  }

  .commsStage,
  .cabinDock{
    min-width:0 !important;
  }

  .cabinDock{
    position:relative !important;
    top:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
}

@media (max-width: 799px){
  .flightCanvas{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    min-height:auto !important;
  }

  .commsStage{
    min-height:0 !important;
    overflow:hidden !important;
  }

  

  .cabinDock{
    position:static !important;
    width:100% !important;
    max-height:none !important;
    overflow:visible !important;
  }
}


/* ------------------------------------------------------------------
   SkyLink live-screen unified layout override
   Purpose: one normal scrolling live page, no side-by-side desktop panes,
   no inner Cabin/ATC panel scrollbars, no mobile growth trap.
------------------------------------------------------------------- */
html,
body{
  height:auto !important;
  min-height:100% !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

.appShell,
.screens,
.screen.isActive,
.flightScreen.isActive,
.flightShell{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}

.flightShell{
  gap:16px !important;
}

.flightHeader{
  position:relative !important;
  z-index:2 !important;
}

/* The live area is now one continuous vertical page on desktop and mobile. */
.flightCanvas{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  width:100% !important;
  min-height:0 !important;
  max-height:none !important;
  gap:16px !important;
  overflow:visible !important;
}

.commsStage,
.cabinDock{
  position:relative !important;
  top:auto !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  overscroll-behavior:auto !important;
  scrollbar-gutter:auto !important;
}

.commsStage{
  display:block !important;
}


.cabinDock{
  display:flex !important;
  flex-direction:column !important;
}

.cabinDock,
.dockMetaCard,
.statusPanel,
.announcementPanel,
.signsPanel,
.manualPanel,
.audioPanel{
  overflow:visible !important;
  max-height:none !important;
}

@media (max-width: 799px){
  .appShell{
    padding:14px !important;
  }

  .flightCanvas{
    gap:14px !important;
  }

  

  .cabinDock{
    padding:14px !important;
  }
}

/* ------------------------------------------------------------------
   SkyLink Immersion Bundle unified live-flight app
   One application only: no nested app panels, no inner scrollbars.
------------------------------------------------------------------- */
#flightScreen,
#flightScreen *{
  scrollbar-gutter:auto;
}

#flightScreen .unifiedFlightBoard,
#flightScreen .unifiedFlightBoard *{
  max-height:none;
}

.unifiedFlightBoard{
  display:grid;
  grid-template-columns:minmax(260px,.9fr) minmax(360px,1.25fr) minmax(300px,.95fr);
  gap:18px;
  align-items:start;
  width:100%;
  min-height:0;
  overflow:visible;
}

.unifiedPanel{
  position:relative;
  width:100%;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  border-radius:24px;
  background:rgba(7,13,25,.86);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 46px rgba(0,0,0,.4);
  backdrop-filter:blur(12px);
  overflow:visible;
}

.cabinDock.unifiedPanel{
  position:relative !important;
  top:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

.dockMetaGrid.singleCol{
  grid-template-columns:1fr;
}

.pttHero{
  display:flex;
  width:100%;
}

.pttReadbackStack{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.compactPendingContact{
  border-color:rgba(243,165,58,.26);
  background:
    radial-gradient(320px 140px at 0 0, rgba(243,165,58,.12), transparent 62%),
    rgba(255,255,255,.05);
}

.compactPendingContact .actionPanelRow{
  margin-top:10px;
}

.compactPendingContactButton{
  min-height:48px;
}

.pttButton{
  width:100%;
  min-height:210px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:24px;
  border-radius:26px;
  color:#172341;
  background:
    radial-gradient(220px 160px at 50% 20%, rgba(255,255,255,.36), transparent 70%),
    linear-gradient(180deg, #f6b14e, var(--accent));
  box-shadow:0 20px 42px rgba(243,165,58,.22);
  border:1px solid rgba(255,224,180,.58);
  text-align:center;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;
  appearance:none;
}

.pttButton:disabled{
  background:rgba(255,255,255,.07);
  color:var(--muted);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}

.pttButton.isRecording{
  transform:translateY(1px) scale(.99);
  box-shadow:0 0 0 8px rgba(255,115,115,.12), 0 20px 42px rgba(255,115,115,.16);
}

.pttButton.isReceiving,
.pttButton.isProcessing{
  background:rgba(255,255,255,.07);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
}

.pttButtonLabel{
  font-size:24px;
  line-height:1;
  font-weight:950;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.pttButtonHint{
  max-width:260px;
  color:currentColor;
  opacity:.72;
  line-height:1.45;
  font-size:13px;
  font-weight:800;
}

.highlightPanel{
  background:linear-gradient(180deg, rgba(243,165,58,.12), rgba(255,255,255,.04));
  border-color:rgba(243,165,58,.22);
}

.atcTranscriptBlock,
.atcContextGrid .dockMetaCard{
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  overflow:visible;
}

.atcTranscriptList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
  overflow:visible;
}

.transcriptEmpty{
  color:var(--muted);
  line-height:1.5;
  font-size:13px;
}

.transcriptEntry{
  display:grid;
  grid-template-columns:minmax(72px,.2fr) minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.transcriptEntry.isPilot{
  background:rgba(243,165,58,.08);
  border-color:rgba(243,165,58,.16);
}

.transcriptEntry.isCopilot{
  background:rgba(85,196,175,.08);
  border-color:rgba(85,196,175,.18);
}

.transcriptSpeaker{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.45px;
  font-size:11px;
  font-weight:900;
}

.transcriptText{
  color:var(--text);
  line-height:1.5;
  font-size:13px;
  word-break:normal;
  overflow-wrap:anywhere;
}

.atcContextGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  overflow:visible;
}

.atcContextGrid .dockMetaCard:last-child{
  grid-column:1 / -1;
}

.metarText{
  margin-top:8px;
  color:var(--muted);
  line-height:1.5;
  font-size:12px;
  word-break:break-word;
  white-space:pre-line;
}

.dockMetaCardWeather{
  padding:0;
}

.metarCardDetails{
  display:block;
}

.metarCardSummary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  cursor:pointer;
}

.metarCardSummary::-webkit-details-marker{
  display:none;
}

.metarCardSummary::after{
  content:'▾';
  font-size:14px;
  color:var(--muted);
  transition:transform .18s ease;
}

.metarCardDetails[open] .metarCardSummary::after{
  transform:rotate(180deg);
}

.metarCardHint{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  text-align:right;
}

.metarCardBody{
  padding:0 14px 14px;
  border-top:1px solid rgba(255,255,255,.08);
}

#atcAudioPlayer{
  width:100%;
  display:none;
}

@media (max-width: 1100px){
  .unifiedFlightBoard{
    grid-template-columns:minmax(250px,.9fr) minmax(320px,1.1fr);
  }

  .cabinDock.unifiedPanel{
    grid-column:1 / -1;
  }

  .weatherModalGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 799px){
  .flightHeader{
    align-items:stretch !important;
  }

  .flightHeaderTop,
  .flightInfoBoard{
    width:100%;
    align-items:stretch;
    text-align:left;
  }

  .headerControls,
  .headerControls .audioToggleBtn,
  .headerActionBtn{
    width:100%;
  }

  .unifiedFlightBoard{
    display:flex;
    flex-direction:column;
    gap:14px;
    overflow:visible;
  }

  .unifiedPanel,
  .cabinDock.unifiedPanel{
    width:100%;
    padding:14px;
    border-radius:22px;
    overflow:visible !important;
  }

  .pttPanel{order:1;}
  .atcPanel{order:2;}
  .cabinDock{order:3;}

  .pttButton{
    min-height:190px;
    border-radius:24px;
  }

  .pttButtonLabel{
    font-size:21px;
  }

  .atcContextGrid,
  .dockMetaGrid,
  .buttonGrid.twoCol{
    grid-template-columns:1fr;
  }

  .transcriptEntry{
    grid-template-columns:1fr;
    gap:6px;
  }
}

/* ------------------------------------------------------------------
   FINAL LIVE FLIGHT STRUCTURE FIX
   Desktop: wide landscape sections stacked down the page.
   Mobile: same sections stacked naturally.
   Performance: no legacy layout syncing, no inner scroll panels, no blur-heavy panes.
------------------------------------------------------------------- */
#flightScreen,
#flightScreen *{
  -webkit-overflow-scrolling:auto;
}

#flightScreen{
  padding-bottom:0 !important;
}

#flightScreen .flightShell{
  gap:12px !important;
  padding-bottom:0 !important;
}

#flightScreen .flightHeader{
  width:100% !important;
  padding:14px 16px !important;
  border-radius:22px !important;
  background:rgba(7,13,25,.72) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
  backdrop-filter:none !important;
}

#flightScreen .unifiedFlightBoard{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:12px !important;
  width:100% !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}

#flightScreen .unifiedPanel,
#flightScreen .cabinDock.unifiedPanel{
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  padding:14px !important;
  border-radius:22px !important;
  background:rgba(7,13,25,.78) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
  backdrop-filter:none !important;
}

#flightScreen .dockMetaCard,
#flightScreen .statusPanel,
#flightScreen .announcementPanel,
#flightScreen .signsPanel,
#flightScreen .manualPanel,
#flightScreen .audioPanel,
#flightScreen .atcTranscriptBlock,
#flightScreen .atcContextGrid .dockMetaCard{
  padding:12px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.075) !important;
  overflow:visible !important;
  max-height:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

#flightScreen .pttButton{
  min-height:128px !important;
  padding:18px !important;
  border-radius:22px !important;
  box-shadow:0 12px 24px rgba(243,165,58,.18) !important;
}

#flightScreen .pttButtonLabel{
  font-size:clamp(20px,2.2vw,30px) !important;
}

#flightScreen .pttButtonHint{
  max-width:360px !important;
}

#flightScreen .atcTranscriptList{
  gap:8px !important;
  max-height:none !important;
  overflow:visible !important;
}

#flightScreen .transcriptEntry{
  padding:10px !important;
  border-radius:14px !important;
}

#flightScreen .buttonGrid{
  gap:8px !important;
}

#flightScreen .toggleBtn,
#flightScreen .ghostBtn,
#flightScreen button{
  min-height:auto;
}

@media (min-width: 900px){
  #flightScreen .flightHeaderTop{
    display:grid !important;
    grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr) !important;
    align-items:start !important;
    gap:14px !important;
  }

  #flightScreen .headerMilestonePanel{
    width:100% !important;
  }

  #flightScreen .headerControls{
    justify-content:flex-end !important;
  }

  #flightScreen .pttPanel{
    display:grid !important;
    grid-template-columns:minmax(210px,.58fr) minmax(360px,1.08fr) minmax(320px,.92fr) !important;
    grid-template-rows:auto auto auto !important;
    gap:12px !important;
    align-items:stretch !important;
  }

  #flightScreen .pttPanel .dockHeader,
  #flightScreen .pttPanel .compactPendingContact,
  #flightScreen .pttPanel .pttHero,
  #flightScreen .pttPanel .pttReadbackStack,
  #flightScreen .pttPanel .dockMetaGrid{
    min-width:0 !important;
  }

  #flightScreen .pttPanel .dockHeader{
    grid-column:1 !important;
    grid-row:1 / span 3 !important;
  }

  #flightScreen .pttPanel .compactPendingContact{
    grid-column:2 !important;
    grid-row:1 !important;
  }

  #flightScreen .pttPanel .pttHero{
    grid-column:2 !important;
    grid-row:2 !important;
  }

  #flightScreen .pttPanel .pttReadbackStack{
    grid-column:2 !important;
    grid-row:3 !important;
  }

  #flightScreen .pttPanel .dockMetaGrid{
    grid-column:3 !important;
    grid-row:1 / span 3 !important;
  }

  #flightScreen .pttPanel .dockMetaGrid.singleCol{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  #flightScreen .pttPanel .dockMetaGrid.singleCol.isPostTransmit{
    grid-template-columns:1fr !important;
  }

  #flightScreen .atcPanel{
    display:grid !important;
    grid-template-columns:minmax(280px,.7fr) minmax(420px,1.3fr) !important;
    grid-template-rows:auto 1fr !important;
    gap:12px !important;
    align-items:stretch !important;
  }

  #flightScreen .atcPanel:not(.hasPendingContact){
    grid-template-columns:minmax(0,1fr) !important;
  }

  #flightScreen .atcPanel .dockHeader{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }

  #flightScreen .atcPanel .atcContextGrid{
    grid-column:2 !important;
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  #flightScreen .atcPanel:not(.hasPendingContact) .atcContextGrid{
    grid-column:1 / -1 !important;
  }

  #flightScreen .atcPanel .actionPanel{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  #flightScreen .atcContextGrid .dockMetaCard:last-child{
    grid-column:1 / -1 !important;
  }

  #flightScreen .cabinDock.unifiedPanel{
    display:grid !important;
    grid-template-columns:minmax(210px,.62fr) minmax(360px,1.08fr) minmax(360px,1.18fr) !important;
    gap:12px !important;
    align-items:start !important;
  }

  #flightScreen .cabinDock .dockHeader{
    grid-column:1 !important;
  }

  #flightScreen .cabinDock .dockMetaGrid{
    grid-column:1 !important;
    grid-template-columns:1fr !important;
  }

  #flightScreen .cabinDock .statusPanel,
  #flightScreen .cabinDock .announcementPanel{
    grid-column:2 !important;
  }

  #flightScreen .cabinDock .signsPanel,
  #flightScreen .cabinDock .manualPanel,
  #flightScreen .cabinDock .audioPanel{
    grid-column:3 !important;
  }

  #flightScreen .cabinDock .manualButtons{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }

  #flightScreen .cabinDock .captainButtons,
  #flightScreen .cabinDock .buttonGrid.twoCol{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width: 899px){
  #flightScreen .flightHeader,
  #flightScreen .flightHeaderTop,
  #flightScreen .unifiedPanel,
  #flightScreen .cabinDock.unifiedPanel{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  #flightScreen .headerControls,
  #flightScreen .headerControls .audioToggleBtn,
  #flightScreen .headerActionBtn,
  #flightScreen .flightInfoBoard{
    width:100% !important;
    max-width:none !important;
    text-align:left !important;
    align-items:stretch !important;
  }

  #flightScreen .flightInfoGrid{
    grid-template-columns:1fr !important;
  }

  #flightScreen .pttPanel{order:1 !important;}
  #flightScreen .atcPanel{order:2 !important;}
  #flightScreen .cabinDock{order:3 !important;}

  #flightScreen .atcContextGrid,
  #flightScreen .dockMetaGrid,
  #flightScreen .dockMetaGrid.singleCol,
  #flightScreen .buttonGrid.twoCol,
  #flightScreen .manualButtons,
  #flightScreen .captainButtons{
    grid-template-columns:1fr !important;
  }

  #flightScreen .pttButton{
    min-height:170px !important;
  }
}

/* ------------------------------------------------------------------
   V3 CABIN CREW LANDSCAPE FIX
   This removes the broken auto-placed cabin grid that created blank
   gaps above Cabin Signs. Cabin Crew is now one full-width landscape
   section with predictable rows and equal-width cards.
------------------------------------------------------------------- */
@media (min-width: 900px){
  #flightScreen .cabinDock.unifiedPanel{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:auto !important;
    gap:12px !important;
    align-items:stretch !important;
  }

  #flightScreen .cabinDock .dockHeader{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    align-items:center !important;
    min-width:0 !important;
  }

  #flightScreen .cabinDock .dockMetaGrid{
    grid-column:1 / span 2 !important;
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    min-width:0 !important;
  }

  #flightScreen .cabinDock .statusPanel{
    grid-column:3 / span 1 !important;
    grid-row:2 !important;
    min-width:0 !important;
  }

  #flightScreen .cabinDock .announcementPanel{
    grid-column:4 / span 1 !important;
    grid-row:2 !important;
    min-width:0 !important;
  }

  #flightScreen .cabinDock .signsPanel{
    grid-column:1 / -1 !important;
    grid-row:3 !important;
    min-width:0 !important;
  }

  #flightScreen .cabinDock .manualPanel{
    grid-column:1 / -1 !important;
    grid-row:4 !important;
    min-width:0 !important;
  }

  #flightScreen .cabinDock .audioPanel{
    grid-column:1 / -1 !important;
    grid-row:5 !important;
    min-width:0 !important;
  }

  #flightScreen .cabinDock .signsPanel .buttonGrid.twoCol{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  #flightScreen .cabinDock .captainButtons{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #flightScreen .cabinDock .manualButtons{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
}

@media (max-width: 899px){
  #flightScreen .cabinDock .signsPanel .buttonGrid.twoCol,
  #flightScreen .cabinDock .captainButtons,
  #flightScreen .cabinDock .manualButtons{
    grid-template-columns:1fr !important;
  }
}

/* ------------------------------------------------------------------
   V4 ATC DESKTOP CLEANUP + METAR/ATIS BUTTONS + PREMIUM PTT
   Mobile layout is intentionally left as-is under the existing max-width
   rules. These overrides only change the desktop live-flight layout.
------------------------------------------------------------------- */
.metarActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.miniActionBtn{
  padding:9px 12px;
  border-radius:12px;
  font-size:12px;
  min-height:auto;
}

@keyframes skylinkPttNeonSpin{
  to{transform:rotate(360deg);}
}

@media (min-width: 900px){
  #flightScreen .pttPanel{
    grid-template-columns:minmax(190px,.56fr) minmax(240px,.68fr) minmax(520px,1.76fr) !important;
    align-items:stretch !important;
  }

  #flightScreen .pttHero{
    align-items:stretch !important;
    justify-content:center !important;
  }

  #flightScreen .pttButton{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
    min-height:96px !important;
    max-height:112px !important;
    padding:16px 22px !important;
    border-radius:22px !important;
    background:linear-gradient(180deg, rgba(18,27,49,.98), rgba(7,12,23,.98)) !important;
    color:var(--text) !important;
    border:1px solid rgba(243,165,58,.34) !important;
    box-shadow:0 0 0 1px rgba(243,165,58,.12), 0 0 30px rgba(243,165,58,.14), 0 10px 22px rgba(0,0,0,.25) !important;
    touch-action:none !important;
    user-select:none !important;
    -webkit-user-select:none !important;
    -webkit-touch-callout:none !important;
    -webkit-tap-highlight-color:transparent !important;
    -webkit-appearance:none !important;
    appearance:none !important;
  }

  #flightScreen .pttButton:not(:disabled)::before{
    content:"";
    position:absolute;
    inset:-55%;
    z-index:-2;
    background:conic-gradient(from 0deg, transparent 0deg, transparent 42deg, rgba(243,165,58,.95) 72deg, rgba(255,226,178,.98) 92deg, rgba(243,165,58,.86) 112deg, transparent 145deg, transparent 360deg);
    animation:skylinkPttNeonSpin 3.6s linear infinite;
    opacity:.95;
  }

  #flightScreen .pttButton:not(:disabled)::after{
    content:"";
    position:absolute;
    inset:2px;
    z-index:-1;
    border-radius:20px;
    background:
      radial-gradient(280px 90px at 50% 0%, rgba(243,165,58,.16), transparent 70%),
      linear-gradient(180deg, rgba(18,27,49,.98), rgba(7,12,23,.99));
  }

  #flightScreen .pttButton:disabled{
    background:rgba(255,255,255,.055) !important;
    color:var(--muted) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:none !important;
  }

  #flightScreen .pttButton.isRecording{
    color:#ffe5e5 !important;
    border-color:rgba(255,115,115,.55) !important;
    box-shadow:0 0 0 1px rgba(255,115,115,.14), 0 0 28px rgba(255,115,115,.18), 0 10px 22px rgba(0,0,0,.25) !important;
  }

  #flightScreen .pttButtonLabel{
    font-size:clamp(19px,1.45vw,25px) !important;
    letter-spacing:.08em !important;
  }

  #flightScreen .pttButtonHint{
    max-width:320px !important;
    font-size:12px !important;
    opacity:.8 !important;
  }

  #flightScreen .atcPanel{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:auto auto auto !important;
    gap:12px !important;
    align-items:stretch !important;
  }

  #flightScreen .atcPanel .dockHeader{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    align-items:center !important;
  }

  #flightScreen .atcPanel:not(.hasPendingContact){
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }

  #flightScreen .atcPanel .actionPanel{
    grid-column:1 / span 2 !important;
    grid-row:2 !important;
    min-width:0 !important;
  }

  #flightScreen .atcPanel .atcContextGrid{
    grid-column:3 / span 2 !important;
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    min-width:0 !important;
  }

  #flightScreen .atcPanel:not(.hasPendingContact) .atcContextGrid{
    grid-column:1 / -1 !important;
  }

  #flightScreen .atcPanel .atcContextGrid .dockMetaCard{
    min-width:0 !important;
  }

  #flightScreen .atcPanel .atcContextGrid .dockMetaCard:last-child{
    grid-column:1 / -1 !important;
  }

  #flightScreen .atcTranscriptList{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  #flightScreen .transcriptEmpty{
    grid-column:1 / -1 !important;
  }

  #flightScreen .transcriptEntry{
    min-width:0 !important;
  }

  #flightScreen .metarActions{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width: 899px){
  .pilotNetworkAuthGrid,
  .pilotNetworkFlightGrid{
    grid-template-columns:1fr;
  }
}

/* ------------------------------------------------------------------
   Pilot Portal + Random Flight polish
   Tighter spacing, clearer cards, and dedicated styling for the new
   social and route-generation surfaces.
------------------------------------------------------------------- */
textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:14px 15px;
  background:rgba(4,9,20,.58);
  color:var(--text);
  font:inherit;
  line-height:1.5;
  outline:none;
  resize:vertical;
}

textarea::placeholder{
  color:rgba(236,242,255,.32);
}

textarea:focus{
  border-color:rgba(243,165,58,.7);
  box-shadow:0 0 0 4px rgba(243,165,58,.12);
}

/* Console Headset transport */
.consoleHeadsetSetupCard{
  border-color:rgba(121,226,171,.2) !important;
  background:
    radial-gradient(560px 180px at 100% 0, rgba(121,226,171,.1), transparent 68%),
    rgba(255,255,255,.04) !important;
}

.consoleHeadsetPlatformRow{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

.consolePlatformChoice{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(5,11,25,.45);
  color:#dce6ff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.consolePlatformChoice:has(input:checked){
  border-color:rgba(243,165,58,.55);
  background:rgba(243,165,58,.13);
  color:#ffe1b8;
}

.consolePlatformChoice input{accent-color:var(--accent)}

.consoleHeadsetLiveCard{
  margin-top:14px;
  border-color:rgba(121,226,171,.14);
}

.consoleHeadsetLiveCard.isConnected{
  border-color:rgba(121,226,171,.4);
  background:rgba(121,226,171,.08);
}

.consoleHeadsetLiveCard.isWarning{
  border-color:rgba(243,165,58,.36);
  background:rgba(243,165,58,.07);
}

.consoleHeadsetModalCard{width:min(760px,100%)}

.consoleHeadsetConnectAction{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:20px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(243,165,58,.28);
  background:linear-gradient(135deg,rgba(243,165,58,.12),rgba(121,226,171,.06));
}

.consoleHeadsetConnectAction .primaryBtn{flex:0 0 auto}
.consoleHeadsetConnectAction p{
  margin:0;
  color:#cad7f7;
  font-size:13px;
  line-height:1.45;
}
.consoleHeadsetConnectAction p.isError{color:#ffd7a3}

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

.consoleHeadsetStatusItem{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}

.consoleHeadsetStatusItem strong,
.consoleHeadsetStatusItem small{display:block}

.consoleHeadsetStatusItem strong{font-size:13px;color:#edf3ff}
.consoleHeadsetStatusItem small{margin-top:4px;color:var(--muted);line-height:1.35}
.consoleStatusMark{color:rgba(255,255,255,.35);font-size:22px;line-height:.8}
.consoleHeadsetStatusItem.isReady{border-color:rgba(121,226,171,.28);background:rgba(121,226,171,.06)}
.consoleHeadsetStatusItem.isReady .consoleStatusMark{color:var(--ok)}
.consoleHeadsetStatusItem.isBusy{border-color:rgba(243,165,58,.3);background:rgba(243,165,58,.06)}
.consoleHeadsetStatusItem.isBusy .consoleStatusMark{color:var(--accent)}

.consoleHeadsetChannelCard,
.consoleHeadsetWalkthrough,
.consoleHeadsetNotice{
  margin-top:14px;
  padding:15px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(3,8,20,.38);
}

.consoleHeadsetWalkthrough ol{
  margin:12px 0 0;
  padding-left:21px;
  display:grid;
  gap:8px;
  color:#cad7f7;
  font-size:13px;
  line-height:1.45;
}

.consoleHeadsetNotice{
  border-color:rgba(243,165,58,.22);
  color:#d6e0fb;
  font-size:12px;
  line-height:1.5;
}

@media (max-width: 680px){
  .consoleHeadsetStatusGrid{grid-template-columns:1fr}
  .consoleHeadsetConnectAction{align-items:stretch;flex-direction:column}
  .consoleHeadsetConnectAction .primaryBtn{width:100%}
  .consoleHeadsetPlatformRow{display:grid;grid-template-columns:1fr 1fr}
  .consolePlatformChoice{justify-content:center}
}

.modalCard{
  padding:24px !important;
  border-radius:28px !important;
}

.modalCardRandomFlight{
  width:min(980px,100%);
}

.modalCardPilotPortal{
  width:min(1260px,100%);
}

.modalLead{
  margin-top:10px !important;
  max-width:840px !important;
  line-height:1.55 !important;
}

.modalActions{
  margin-top:18px !important;
  gap:10px !important;
}

.setupGrid{
  gap:14px !important;
  align-items:start !important;
}

.actionTile{
  gap:8px !important;
}

.summaryGrid{
  gap:12px !important;
}

.summaryCard,
.statusCard{
  padding:14px !important;
}

.pilotNetworkModalTopGrid{
  gap:12px !important;
  margin-top:18px !important;
}

.pilotNetworkModalMainGrid{
  gap:12px !important;
  margin-top:12px !important;
}

.randomFlightStatus{
  margin-top:16px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

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

.randomFlightOptionCard{
  display:grid;
  gap:8px;
  align-content:start;
  min-height:100%;
  padding:15px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(260px 140px at 0 0, rgba(243,165,58,.08), transparent 70%),
    rgba(255,255,255,.045);
}

.randomFlightOptionActions{
  margin-top:6px;
}

.pilotPortalHero{
  display:grid;
  grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);
  gap:14px;
  margin-top:18px;
  align-items:start;
}

.pilotPortalProfileCard{
  display:grid;
  gap:12px;
}

.pilotPortalProfileStats{
  margin-top:2px;
}

.pilotPortalAchievements,
.pilotPortalSelectedAchievements{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}

.pilotPortalRecentFlights{
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(320px 150px at 100% 0, rgba(86,124,214,.12), transparent 68%),
    rgba(255,255,255,.045);
  max-height:370px;
  overflow:auto;
}

.pilotPortalGrid{
  display:grid;
  grid-template-columns:minmax(240px,.75fr) minmax(240px,.82fr) minmax(320px,1.08fr);
  gap:14px;
  margin-top:14px;
  align-items:start;
}

.pilotPortalSelectedPilotCard{
  display:grid;
  gap:12px;
}

.pilotPortalConversationBlock{
  margin-top:14px;
}

.pilotPortalConversationBlock .pilotNetworkComposer{
  margin-top:14px;
}

.pilotPortalFollowingList,
.pilotPortalThreadList,
.pilotPortalMessageList{
  display:grid;
  gap:10px;
  margin-top:12px;
  max-height:320px;
  overflow:auto;
}

.pilotPortalThreadBtn{
  width:100%;
  text-align:left;
  display:grid;
  gap:4px;
}

.pilotPortalThreadBtn strong{
  display:block;
}

.pilotPortalThreadBtn span{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

.pilotPortalAchievementCard .pilotNetworkStatValue{
  font-size:16px;
  line-height:1.3;
}

@media (max-width: 1100px){
  .randomFlightOptionList{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .pilotPortalHero,
  .pilotPortalGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 799px){
  .modalCardRandomFlight,
  .modalCardPilotPortal{
    width:min(100%,100%);
  }

  .randomFlightOptionList{
    grid-template-columns:1fr;
  }

  .pilotPortalAchievements,
  .pilotPortalSelectedAchievements,
  .pilotNetworkProfileStats,
  .pilotNetworkSocialLinks{
    grid-template-columns:1fr;
  }

  .pilotPortalFollowingList,
  .pilotPortalThreadList,
  .pilotPortalMessageList,
  .pilotPortalRecentFlights{
    max-height:260px;
  }

  .liveMapModalCard{
    padding:20px 14px;
  }

  .liveMapStatusRow{
    align-items:stretch;
    flex-direction:column;
  }

  .liveMapCanvas{
    height:56vh;
    min-height:340px;
    border-radius:16px;
  }

  .liveMapFlightList{
    grid-template-columns:1fr;
    max-height:180px;
  }
}