/* ============================================================
   FlightRealm — styles
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #060d1a;
  --panel: #0d1b2e;
  --panel-2: #12233b;
  --line: rgba(120, 170, 220, 0.14);
  --ink: #e6f0fa;
  --ink-2: #9db4cc;
  --ink-3: #6c839c;
  --gold: #ffc94d;
  --gold-dim: #b8860b;
  --ok: #4ade80;
  --warn: #f5a524;
  --bad: #f87171;
  --accent: #7fd4ff;
  /* semantic aliases — prefer these for status meaning */
  --success: var(--ok);
  --warning: var(--warn);
  --danger: var(--bad);
  --info: var(--accent);
  /* fuel identity — amber, so red stays reserved for real alarms */
  --fuel: #fb923c;
  /* spacing scale (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* radii */
  --r-sm: 7px; --r-md: 10px; --r-lg: 14px;
  /* motion */
  --t-fast: 0.15s; --t-med: 0.25s;
  /* focus ring */
  --focus-ring: 2px solid var(--accent);
  --landing-cream: #f3f0e8;
  --landing-lime: #c9ff49;
}

/* ---------- keyboard focus (game chrome) ---------- */
.btn:focus-visible,
#sidebar button:focus-visible,
.chip:focus-visible,
.panel-tile:focus-visible,
.pill-pausebtn:focus-visible,
.pill[onclick]:focus-visible,
.close-x:focus-visible,
.notif-x:focus-visible,
.stop-x:focus-visible,
.ap-item:focus-visible,
.tb-ap-item:focus-visible,
.tt-day-card:focus-visible,
.meal-opt:focus-visible,
.hangar-thumb:focus-visible,
.logo-chip:focus-visible,
.floor-chip:focus-visible,
button.maker-card:focus-visible,
.used-site-card:focus-visible,
.rep-arrow:focus-visible,
.rep-tabs button:focus-visible,
.panel-tip > summary:focus-visible,
.fleet-plane-link:focus-visible,
.help-topic-link:focus-visible,
#sndbtn:focus-visible,
#devbtn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- product landing / dashboard home ---------- */
#landing{position:fixed;inset:0;z-index:80;overflow-x:hidden;overflow-y:auto;color:var(--landing-cream);background:radial-gradient(circle at 74% 16%,rgba(31,119,127,.2),transparent 30rem),linear-gradient(135deg,#07111f 0%,#071522 44%,#050b13 100%);scroll-behavior:smooth;transition:opacity .35s ease,transform .35s ease}
#landing.landing-exit{opacity:0;transform:scale(1.012);pointer-events:none}
#landing::before{content:"";position:fixed;inset:0;pointer-events:none;display:none}
.landing-shell,.landing-nav{width:min(1240px,calc(100% - 48px));margin-inline:auto;position:relative}
.landing-nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(255,255,255,.1)}
.landing-brand{display:inline-flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-weight:800;font-size:18px;letter-spacing:-.02em}
.landing-brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--landing-lime);transform:rotate(-5deg)}
.landing-brand-mark img{width:20px;height:20px;filter:brightness(.13);transform:rotate(5deg)}
.landing-nav-links{display:flex;align-items:center;gap:32px}.landing-nav-links a,.landing-secondary{color:#aab7c6;text-decoration:none;font-size:13px;font-weight:650;transition:color .2s ease}.landing-nav-links a:hover,.landing-secondary:hover{color:#fff}
.landing-nav-cta{border:1px solid rgba(255,255,255,.2);border-radius:999px;background:transparent;color:#fff;padding:10px 16px;display:inline-flex;align-items:center;gap:10px;font:700 12px/1 "Segoe UI",system-ui,sans-serif;cursor:pointer}.landing-nav-cta:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.landing-hero{min-height:670px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:46px;padding:72px 0 54px}.landing-hero-copy{position:relative;z-index:3}
.landing-eyebrow,.section-kicker{color:var(--landing-lime);font:750 11px/1.2 "Segoe UI",system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase}.landing-eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:26px}.landing-eyebrow span{width:30px;height:1px;background:var(--landing-lime)}
.landing-hero h1{margin:0;font:760 clamp(52px,6vw,88px)/.94 "Segoe UI",system-ui,sans-serif;letter-spacing:-.065em;color:#f8f7f2}.landing-hero h1 em{font-family:Georgia,serif;font-weight:400;color:var(--landing-lime)}
.landing-lede{max-width:540px;margin:28px 0 0;color:#abb7c4;font-size:17px;line-height:1.7}.landing-actions{display:flex;align-items:center;gap:24px;margin-top:34px}
.landing-primary{appearance:none;border:0;border-radius:5px;background:var(--landing-lime);color:#09101a;min-height:52px;padding:0 8px 0 20px;display:inline-flex;align-items:center;gap:22px;font:800 13px/1 "Segoe UI",system-ui,sans-serif;cursor:pointer;box-shadow:0 16px 45px rgba(174,255,56,.12);transition:transform .2s ease,box-shadow .2s ease}.landing-primary:hover{transform:translateY(-2px);box-shadow:0 18px 45px rgba(174,255,56,.23)}.landing-primary-icon{width:38px;height:38px;border-radius:3px;display:grid;place-items:center;background:rgba(7,17,31,.13);font-size:18px}.landing-secondary{display:inline-flex;align-items:center;gap:10px}
.landing-proof{display:flex;gap:30px;margin-top:46px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}.landing-proof div{display:grid;gap:3px}.landing-proof strong{color:#fff;font-size:17px}.landing-proof span{color:#718193;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.landing-hero-visual{min-height:510px;position:relative;isolation:isolate}.landing-hero-visual::before{content:"";position:absolute;width:460px;height:460px;right:5%;top:4%;border-radius:50%;background:radial-gradient(circle at 35% 28%,#183a45,#0a1b28 48%,#06101b 70%);border:1px solid rgba(129,210,224,.22);box-shadow:inset -50px -35px 80px rgba(0,0,0,.55),0 0 90px rgba(48,183,171,.08)}.landing-hero-visual::after{content:"";position:absolute;inset:9% -3% 0 9%;border-radius:50%;background:repeating-linear-gradient(22deg,transparent 0 24px,rgba(142,222,218,.025) 25px 26px);transform:rotate(-12deg);z-index:-1}
.landing-orbit{position:absolute;border:1px solid rgba(135,221,216,.16);border-radius:50%;transform:rotate(-16deg)}.landing-orbit-one{width:570px;height:210px;right:-2%;top:25%}.landing-orbit-two{width:430px;height:125px;right:6%;top:35%}.landing-route{position:absolute;height:1px;border-top:1px dashed rgba(201,255,73,.45);transform-origin:left center}.route-a{width:230px;top:38%;left:24%;transform:rotate(-13deg)}.route-b{width:180px;top:26%;right:10%;transform:rotate(57deg)}
.landing-airport{position:absolute;z-index:4;display:flex;align-items:center;gap:7px;color:#e5ecf2;font-size:10px;letter-spacing:.12em}.landing-airport i{width:8px;height:8px;border-radius:50%;background:var(--landing-lime);box-shadow:0 0 0 5px rgba(201,255,73,.1),0 0 14px var(--landing-lime)}.airport-yvr{left:17%;top:34%}.airport-hnd{right:5%;top:20%}.airport-lhr{right:15%;bottom:32%}
.landing-plane{position:absolute;z-index:5;width:94%;max-width:650px;left:-1%;top:27%;filter:drop-shadow(0 32px 25px rgba(0,0,0,.55));transform:rotate(-6deg);animation:landing-float 6s ease-in-out infinite}@keyframes landing-float{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-10px)}}
.landing-flight-card,.landing-status-card{position:absolute;z-index:7;border:1px solid rgba(255,255,255,.16);background:rgba(7,17,31,.76);backdrop-filter:blur(14px);box-shadow:0 18px 45px rgba(0,0,0,.25)}.landing-flight-card{width:280px;right:0;bottom:7%;padding:16px;border-radius:8px}.flight-card-top,.flight-card-meta{display:flex;align-items:center;justify-content:space-between}.flight-card-top span{color:var(--landing-lime);font-size:8px;letter-spacing:.14em}.flight-card-top b{font-size:10px;color:#8090a2}.flight-card-route{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:15px 0 13px}.flight-card-route strong{font-size:21px;letter-spacing:.04em}.flight-card-route span{display:flex;align-items:center}.flight-card-route i{height:1px;flex:1;background:#516273}.flight-card-route img{width:15px;margin:0 5px}.flight-card-meta{color:#8493a4;font-size:9px}.flight-card-meta .profit{color:var(--landing-lime)}
.landing-status-card{left:0;top:10%;border-radius:7px;padding:11px 14px;display:flex;gap:10px;align-items:center}.status-pulse{width:8px;height:8px;border-radius:50%;background:var(--landing-lime);box-shadow:0 0 0 5px rgba(201,255,73,.1)}.landing-status-card div{display:grid;gap:2px}.landing-status-card b{font-size:10px}.landing-status-card small{font-size:9px;color:#718193}
.landing-strip{min-height:68px;margin-bottom:110px;border-block:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-around;gap:18px;color:#8391a1;font-size:10px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.landing-strip i{width:4px;height:4px;border-radius:50%;background:var(--landing-lime)}
.landing-section{scroll-margin-top:40px;padding-bottom:120px}.landing-section-head{display:grid;grid-template-columns:1.2fr .8fr;gap:90px;align-items:end;margin-bottom:44px}.landing-section h2,.landing-world h2,.landing-final h2{color:#f6f5ef;font:720 clamp(36px,4vw,58px)/1.02 "Segoe UI",system-ui,sans-serif;letter-spacing:-.045em;margin:13px 0 0}.landing-section-head p,.world-copy>p{color:#91a0b1;line-height:1.72;font-size:15px}
.landing-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.landing-feature{min-height:385px;position:relative;overflow:hidden;padding:27px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(18,37,53,.78),rgba(9,20,32,.9))}.landing-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(201,255,73,.04),transparent 45%);pointer-events:none}.feature-number{position:absolute;right:22px;top:21px;color:#526172;font-size:10px;letter-spacing:.12em}.feature-icon{width:27px;height:27px;margin-bottom:70px}.landing-feature h3{color:#fff;font-size:22px;margin-bottom:13px;letter-spacing:-.02em}.landing-feature p{max-width:320px;color:#8796a8;font-size:13px;line-height:1.65}.feature-viz{position:absolute;left:27px;right:27px;bottom:26px;display:flex;align-items:center;gap:8px;color:var(--landing-lime);font:800 10px/1 monospace}.feature-viz i{height:1px;flex:1;border-top:1px dashed #536477}.feature-plane{position:absolute;width:105%;max-width:390px;right:-18%;bottom:5px;opacity:.88;filter:drop-shadow(0 17px 15px rgba(0,0,0,.4))}.economy-bars{position:absolute;height:82px;left:27px;right:27px;bottom:24px;display:flex;align-items:flex-end;gap:8px;border-bottom:1px solid #334456}.economy-bars i{width:12%;height:var(--h);background:linear-gradient(to top,#2a5360,var(--landing-lime));opacity:.78}.economy-bars span{margin-left:auto;align-self:flex-start;color:var(--landing-lime);font:800 12px/1 monospace}
.landing-world{scroll-margin-top:30px;margin-bottom:120px;padding:70px;display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center;background:#edf0e8;color:#09121d}.landing-world h2{color:#0a1520}.world-copy>p{color:#536170;margin-top:22px}.world-copy ul{list-style:none;display:grid;gap:14px;margin-top:28px}.world-copy li{display:flex;align-items:center;gap:11px;color:#293744;font-size:12px;font-weight:700}.world-copy li img{width:17px;height:17px;filter:brightness(.25)}
.world-panel{min-height:395px;border-radius:8px;overflow:hidden;background:#081522;color:#fff;box-shadow:0 28px 60px rgba(7,22,35,.24)}.world-panel-head{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.1);color:#7f90a1;font-size:9px;letter-spacing:.12em}.live-dot{color:var(--landing-lime)}.world-globe{height:275px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,#174554 0,#0d2a38 38%,transparent 68%)}.world-globe::after{content:"";position:absolute;width:480px;height:240px;border:1px solid rgba(135,221,216,.22);border-radius:50% 50% 0 0/100% 100% 0 0;left:50%;bottom:-78px;transform:translateX(-50%);box-shadow:inset 0 20px 50px rgba(36,151,156,.1)}.world-grid{position:absolute;inset:20px;opacity:.3;background-image:linear-gradient(rgba(155,221,218,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(155,221,218,.12) 1px,transparent 1px);background-size:35px 35px}.world-arc{position:absolute;border-top:1px dashed rgba(201,255,73,.75);border-radius:50%;z-index:2}.arc-one{width:210px;height:90px;left:18%;top:40%;transform:rotate(-12deg)}.arc-two{width:250px;height:100px;right:10%;top:24%;transform:rotate(18deg)}.arc-three{width:180px;height:65px;left:40%;top:47%;transform:rotate(8deg)}.world-node{position:absolute;z-index:3;width:7px;height:7px;background:var(--landing-lime);border-radius:50%;box-shadow:0 0 10px var(--landing-lime)}.node-one{left:19%;top:56%}.node-two{left:48%;top:34%}.node-three{right:12%;top:48%}.node-four{right:28%;top:65%}.world-stats{min-height:73px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.1)}.world-stats div{padding:14px 17px;display:grid;gap:5px;border-right:1px solid rgba(255,255,255,.1)}.world-stats div:last-child{border:0}.world-stats span{color:#68798b;font-size:8px;letter-spacing:.08em}.world-stats b{font-size:15px}
.landing-final{padding:70px;margin-bottom:48px;display:flex;justify-content:space-between;align-items:end;gap:40px;background:linear-gradient(110deg,#0f2932,#10202d 70%);border:1px solid rgba(201,255,73,.18)}.landing-final p{margin-top:15px;color:#8d9cab}.landing-final .landing-primary{flex-shrink:0}.landing-footer{min-height:100px;display:flex;align-items:center;gap:28px;border-top:1px solid rgba(255,255,255,.1);color:#637284;font-size:10px}.landing-footer p{margin-right:auto}
@media(max-width:960px){.landing-hero{grid-template-columns:1fr;padding-top:70px}.landing-hero-visual{min-height:480px}.landing-section-head{grid-template-columns:1fr;gap:22px}.landing-feature-grid{grid-template-columns:1fr 1fr}.landing-feature:last-child{grid-column:1/-1;min-height:310px}.landing-world{grid-template-columns:1fr;padding:50px}.landing-final{align-items:flex-start;flex-direction:column}}
@media(max-width:650px){.landing-shell,.landing-nav{width:min(1240px,calc(100% - 28px))}.landing-nav{min-height:66px}.landing-nav-links{display:none}.landing-nav-cta{padding:9px 12px}.landing-hero{min-height:auto;padding:58px 0 36px;gap:24px}.landing-hero h1{font-size:clamp(46px,15vw,66px)}.landing-lede{font-size:15px}.landing-actions{align-items:flex-start;flex-direction:column;gap:17px}.landing-proof{gap:18px;justify-content:space-between}.landing-proof strong{font-size:14px}.landing-proof span{font-size:8px}.landing-hero-visual{min-height:350px;margin-inline:-10px}.landing-hero-visual::before{width:310px;height:310px;right:0}.landing-plane{width:108%;top:29%;left:-10%}.landing-flight-card{width:235px;bottom:0}.landing-status-card{top:4%}.landing-strip{margin-bottom:78px;padding:18px 4px;flex-wrap:wrap;justify-content:center}.landing-strip i{display:none}.landing-strip span{width:42%;text-align:center;font-size:8px}.landing-section{padding-bottom:80px}.landing-feature-grid{grid-template-columns:1fr}.landing-feature:last-child{grid-column:auto}.landing-world{margin-inline:-14px;padding:36px 18px;gap:38px;margin-bottom:80px}.world-panel{min-height:360px}.world-stats b{font-size:12px}.world-stats div{padding:12px 8px}.landing-final{padding:36px 24px}.landing-footer{align-items:flex-start;flex-direction:column;gap:12px;padding:25px 0}.landing-footer p{margin:0}}
@media(prefers-reduced-motion:reduce){#landing{scroll-behavior:auto}.landing-plane{animation:none}}

html, body {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- top bar ---------- */
#topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(13, 27, 46, 0.97), rgba(13, 27, 46, 0.88));
  border-bottom: 1px solid var(--line);
  z-index: 40;
  backdrop-filter: blur(6px);
}

.brand {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.4px;
  color: var(--gold);
  white-space: nowrap;
}
.brand .airline-name {
  color: var(--ink);
  font-weight: 600;
  margin-left: 10px;
  font-size: 14px;
}
.brand .airline-name::before { content: "· "; color: var(--ink-3); }

.tb-ap-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 280px;
  min-width: 140px;
  max-width: 340px;
}
.tb-ap-search.tb-ap-dest-mode { flex-basis: 320px; max-width: 380px; }
.tb-ap-from {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 4px 6px 4px 8px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: var(--gold);
  font: 600 11px "Segoe UI", system-ui, sans-serif;
  white-space: nowrap;
}
.tb-ap-from[hidden] { display: none !important; }
.tb-ap-from-lbl { color: var(--ink-3); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.tb-ap-from-x {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.tb-ap-from-x:hover { color: var(--ink); }
.tb-ap-search input {
  flex: 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font: 500 12.5px "Segoe UI", system-ui, sans-serif;
}
.tb-ap-search.tb-ap-dest-mode input {
  border-color: rgba(251, 191, 36, 0.45);
}
.tb-ap-search input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel);
}
.tb-ap-search input::placeholder { color: var(--ink-3); }
.tb-ap-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(13, 27, 46, 0.97);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  z-index: 30;
  padding: 4px;
}
.tb-ap-drop.hidden { display: none; }
.tb-ap-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--ink);
  padding: 7px 10px;
  font: 500 12.5px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}
.tb-ap-item:hover, .tb-ap-item.active { background: var(--panel-2); }
.tb-ap-item b { color: var(--gold); min-width: 2.6em; }
.tb-ap-item .tb-ap-city { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-ap-empty { padding: 10px 12px; }

.tb-stats {
  display: flex;
  gap: 10px;
  margin-left: 0;
  align-items: center;
  flex-wrap: nowrap;
}
.tb-mid {
  flex: 1 1 220px;
  min-width: 160px;
  max-width: min(720px, 48vw);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  overflow: visible;
  min-height: 0;
}
.tb-ticker {
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.tb-mid:has(#notifs:not(:empty)) .tb-ticker { display: none; }
.pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  white-space: nowrap;
}
.pill .ico {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.ui-ico, .ico {
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  object-fit: contain;
  vertical-align: -3px;
  flex-shrink: 0;
  display: inline-block;
}
.ico-xs { width: 14px; height: 14px; max-width: 14px; max-height: 14px; }
.ico-sm { width: 18px; height: 18px; max-width: 18px; max-height: 18px; }
.specs .ico, .specs .ui-ico {
  width: 13px;
  height: 13px;
  max-width: 13px;
  max-height: 13px;
  margin-right: 2px;
}
.chip .ui-ico, .chip .ico { width: 14px; height: 14px; margin-right: 4px; }
.btn .ui-ico, .btn .ico { width: 14px; height: 14px; margin-right: 4px; vertical-align: -3px; }
.lg-cell .ui-ico, .lg-cell .ico { width: 86%; height: 86%; object-fit: contain; }
.ach-ico .ui-ico, .ach-ico .ico, .ach-ico img { width: 18px; height: 18px; }
.cargo-chip .ui-ico, .cargo-chip .ico { width: 12px; height: 12px; margin-right: 2px; }
.brand-ico { margin-right: 6px; vertical-align: -2px; }
#sndbtn .ico, #devbtn .ico { width: 18px; height: 18px; }
.pill b { font-variant-numeric: tabular-nums; }
.pill .sub { color: var(--ink-3); font-size: 11px; }
.pill-cash { border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); }
.pill-cash b { color: var(--ok); }
.pill-warn { border-color: rgba(239, 68, 68, 0.45); }
.pill-warn b { color: var(--bad, #ef4444); }
.pill-points { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.08); }
.pill-points b { color: var(--gold); }
/* fuel wears amber — red is reserved for the low-stock warning state */
.pill-fuel { border-color: rgba(251, 146, 60, 0.4); background: rgba(251, 146, 60, 0.08); }
.pill-fuel b { color: var(--fuel); }
.pill-co2 { border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.08); }
.pill-co2 b { color: #34d399; }
.pill-clock { background: transparent; border-color: transparent; color: var(--ink-2); }
/* resource pills deep-link to their panel */
.pill[onclick] { cursor: pointer; transition: border-color var(--t-fast), transform var(--t-fast); }
.pill[onclick]:hover { border-color: var(--accent); }
.pill[onclick]:active { transform: scale(0.97); }
.pill-warn.pill-pulse { animation: pillPulse 1.6s ease-in-out infinite; }
@keyframes pillPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
  50% { box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18); }
}
/* "N ready" dispatch call-to-action */
.pill-ready {
  border-color: rgba(255, 201, 77, 0.55);
  background: rgba(255, 201, 77, 0.12);
  cursor: pointer;
  animation: readyGlow 2s ease-in-out infinite;
}
.pill-ready b { color: var(--gold); }
.pill-ready:hover { border-color: var(--gold); background: rgba(255, 201, 77, 0.2); }
.pill-ready.hidden { display: none; }
@keyframes readyGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 201, 77, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 201, 77, 0.16); }
}
@media (prefers-reduced-motion: reduce) {
  .pill-ready, .pill-warn.pill-pulse { animation: none; }
}
.tb-ticker[data-kind="good"] { color: var(--ok); }
.tb-ticker[data-kind="bad"] { color: #f87171; }
.book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0 14px;
}
.book-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
}
.book-item.museum { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.06); }
.league-board { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.league-row {
  display: grid;
  grid-template-columns: 1.4em 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 3px 4px;
}
.league-row.you { color: var(--gold); }

/* Per-icon accent colors (sidebar, panel titles, topbar) */
.ico-fleet { filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.75)); }
.ico-buy { filter: drop-shadow(0 0 5px rgba(132, 204, 22, 0.75)); }
.ico-maint { filter: drop-shadow(0 0 5px rgba(251, 146, 60, 0.8)); }
.ico-fuel { filter: drop-shadow(0 0 5px rgba(248, 113, 113, 0.75)); }
.ico-marketing { filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.75)); }
.ico-events { filter: drop-shadow(0 0 5px rgba(45, 212, 191, 0.8)); }
.ico-paper { filter: drop-shadow(0 0 5px rgba(214, 179, 120, 0.8)); }
.ico-logs { filter: drop-shadow(0 0 5px rgba(244, 114, 182, 0.75)); }
.ico-company { filter: drop-shadow(0 0 5px rgba(52, 211, 153, 0.75)); }
.ico-settings { filter: drop-shadow(0 0 5px rgba(161, 161, 170, 0.7)); }
.ico-help { filter: drop-shadow(0 0 5px rgba(251, 146, 120, 0.75)); }
.ico-cash { filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.7)); }
.ico-points { filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.75)); }
.ico-co2 { filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.75)); }

/* ---------- pause overlay ---------- */
#pause-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 10, 20, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#pause-overlay.hidden { display: none; }
.pause-card {
  text-align: center;
  min-width: min(340px, 90vw);
  max-width: 440px;
  padding: 36px 40px 26px;
  background: rgba(13, 27, 46, 0.9);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.pause-kicker {
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 10px;
}
.pause-card h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.pause-hint {
  color: var(--ink-2);
  margin: 0 0 22px;
  font-size: 14px;
}
.pause-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.pause-esc { margin-top: 16px; }
body.game-paused #panel { z-index: 42; }
body.ui-chrome-off #pause-overlay { display: none !important; }

/* ---------- layout ---------- */
main { position: fixed; inset: 54px 0 0 0; }

#globe {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  background:
    radial-gradient(ellipse at 30% 20%, #0a1526 0%, var(--bg) 60%);
}

/* ---------- sidebar ---------- */
#sidebar {
  position: absolute;
  top: 18px;
  right: 18px;
  bottom: 18px;
  max-height: calc(100% - 36px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-width: thin;
}
#sidebar button[hidden] { display: none !important; }
#sidebar button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 178px;
  padding: 11px 14px;
  background: rgba(13, 27, 46, 0.92);
  border: 1px solid var(--line);
  border-left: 1px solid var(--ico-accent, var(--line));
  border-radius: 10px;
  color: var(--ink);
  font: 600 13.5px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  text-align: left;
}
#sidebar button[data-panel="fleet"]     { --ico-accent: #60a5fa; }
#sidebar button[data-panel="buy"]       { --ico-accent: #84cc16; }
#sidebar button[data-panel="maint"]     { --ico-accent: #fb923c; }
#sidebar button[data-panel="fuel"]      { --ico-accent: #f87171; }
#sidebar button[data-panel="marketing"] { --ico-accent: #fbbf24; }
#sidebar button[data-panel="events"]    { --ico-accent: #2dd4bf; }
#sidebar button[data-panel="paper"]     { --ico-accent: #d6b378; }
#sidebar button[data-panel="logs"]      { --ico-accent: #f472b6; }
#sidebar button[data-panel="company"]   { --ico-accent: #34d399; }
#sidebar button[data-panel="store"]     { --ico-accent: #ffc94d; }
#sidebar button[data-panel="settings"]  { --ico-accent: #a1a1aa; }
#sidebar button[data-panel="help"]      { --ico-accent: #fb9278; }
#sidebar button:hover {
  border-color: var(--ico-accent, var(--accent));
  background: color-mix(in srgb, var(--ico-accent, #3b82f6) 12%, var(--panel-2));
}
#sidebar button.active {
  border-color: var(--ico-accent, var(--gold));
  color: var(--ink);
  background: color-mix(in srgb, var(--ico-accent, #fbbf24) 16%, var(--panel-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ico-accent, #fbbf24) 35%, transparent);
}
@media (min-width: 901px) and (max-height: 820px) {
  #sidebar { gap: 5px; }
  #sidebar button { padding: 8px 12px; font-size: 12.5px; }
}
@media (min-width: 901px) and (max-height: 700px) {
  #sidebar { gap: 4px; }
  #sidebar button { padding: 6px 10px; min-width: 158px; font-size: 12px; }
}

#sidebar button .ico {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  padding: 3px;
  box-sizing: content-box;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ico-accent, #64748b) 22%, transparent);
}
#panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
#panel-title .panel-ico {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  padding: 4px;
  box-sizing: content-box;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-ico-accent, #64748b) 22%, transparent);
}
#panel[data-panel="fleet"]     { --panel-ico-accent: #60a5fa; }
#panel[data-panel="buy"]       { --panel-ico-accent: #84cc16; }
#panel[data-panel="maint"]     { --panel-ico-accent: #fb923c; }
#panel[data-panel="fuel"]      { --panel-ico-accent: #f87171; }
#panel[data-panel="marketing"] { --panel-ico-accent: #fbbf24; }
#panel[data-panel="events"]    { --panel-ico-accent: #2dd4bf; }
#panel[data-panel="paper"]     { --panel-ico-accent: #d6b378; }
#panel[data-panel="logs"]      { --panel-ico-accent: #f472b6; }
#panel[data-panel="company"]   { --panel-ico-accent: #34d399; }
#panel[data-panel="store"]     { --panel-ico-accent: #ffc94d; }
#panel[data-panel="settings"]  { --panel-ico-accent: #a1a1aa; }
#panel[data-panel="help"]      { --panel-ico-accent: #fb9278; }

/* ---------- side panel ---------- */
#panel {
  position: absolute;
  top: 18px;
  right: 214px;
  bottom: 18px;
  width: 440px;
  max-width: calc(100vw - 240px);
  background: rgba(11, 22, 38, 0.96);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  z-index: 11;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}
#panel.panel-wide {
  width: min(860px, calc(100vw - 240px));
  max-width: calc(100vw - 240px);
}
#panel.panel-wide .shop-grid,
#panel.panel-wide .fin-grid,
#panel.panel-wide .mkt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
}
#panel.panel-wide .shop-grid > .card,
#panel.panel-wide .fin-grid > .card {
  margin-bottom: 0;
  height: 100%;
}
.fleet-search {
  flex: 1 1 180px;
  min-width: 140px;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font: 600 12.5px "Segoe UI", system-ui, sans-serif;
}
.rep-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 0;
  min-width: 0;
  flex: 1;
}
.rep-nav .rep-meta {
  flex: 1;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
}
#report-card .rep-arrow,
.rep-arrow {
  flex: 0 0 auto;
  min-width: 52px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #ffc94d;
  background: rgba(255, 201, 77, 0.18);
  color: #ffc94d;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
}
#report-card .rep-arrow:hover:not(:disabled),
.rep-arrow:hover:not(:disabled) {
  border-color: #ffe08a;
  background: rgba(255, 201, 77, 0.32);
  color: #fff8dc;
}
#report-card .rep-arrow:disabled,
.rep-arrow:disabled { opacity: 0.4; cursor: default; }
.ach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.ach-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  cursor: help;
  position: relative;
  outline: none;
}
.ach-item.unlocked { border-color: rgba(76, 175, 122, 0.45); background: rgba(76, 175, 122, 0.08); }
.ach-item.unlocked.secret { border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.08); }
.ach-item.locked { opacity: 0.55; }
.ach-item:hover,
.ach-item:focus {
  opacity: 1;
  border-color: var(--gold);
  z-index: 2;
}
.ach-ico { font-size: 14px; flex-shrink: 0; display: inline-flex; }
.ach-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ach-name { line-height: 1.25; }
.ach-prize { font-weight: 500; }
.paper-story.paper-player .paper-hed { color: var(--gold); }
.paper-desk textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
  background: var(--panel-2, rgba(255,255,255,0.04));
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}
.ach-tip-live {
  margin: 4px 0 2px;
  min-height: 2.6em;
  line-height: 1.35;
  color: var(--ink-2);
}
.pack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 6px 0 14px;
}
.pack-card { margin-bottom: 0; height: 100%; }
.pack-usd { font-size: 15px; }
.pack-bits {
  margin: 6px 0 0;
  padding-left: 1.15em;
  font-size: 12px;
  line-height: 1.45;
}
.pack-bits li { margin: 1px 0; }
.ach-float-tip {
  position: fixed;
  z-index: 10000;
  max-width: min(280px, calc(100vw - 16px));
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--gold);
  background: rgba(12, 20, 32, 0.97);
  color: #f2f4f8;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* Used-market websites */
.used-sites {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}
.used-site-card {
  text-align: left;
  border: 1px solid var(--line);
  border-left: 1px solid var(--site-accent, var(--gold));
  background: var(--panel-2, rgba(255,255,255,0.03));
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color 0.15s, transform 0.18s, box-shadow 0.18s;
}
.used-site-card:hover:not(:disabled) {
  border-color: var(--site-accent, var(--gold));
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}
.used-site-card:disabled { opacity: 0.45; cursor: default; }
.used-site-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.used-site-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.used-site-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  flex: 0 0 24px;
  overflow: hidden;
  border-radius: 6px;
}
.used-site-logo svg {
  width: 24px;
  height: 24px;
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.used-site-name { font-weight: 700; font-size: 14px; }
.used-site-count { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.used-site-url {
  font-size: 11px;
  color: var(--site-accent, var(--gold));
  margin: 2px 0 4px 32px;
  letter-spacing: 0.02em;
}
.used-site-blurb { font-size: 12px; color: var(--ink-2); line-height: 1.35; margin-left: 32px; }
.used-site-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
.used-site-bar .used-site-logo,
.used-site-bar .used-site-logo svg {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  flex-basis: 24px;
}
.used-site-bar-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.used-owner { margin-top: 4px; }
.used-listing.open { border-color: rgba(212, 175, 55, 0.35); }
#panel.hidden { display: none; }
#panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
}
#panel-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.btn .ico, .btn .panel-ico {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 4px;
}
#panel-body { flex: 1; overflow-y: auto; padding: 12px 14px 16px; }
#panel-body::-webkit-scrollbar { width: 8px; }
#panel-body::-webkit-scrollbar-thumb {
  background: rgba(140, 180, 220, 0.22);
  border-radius: 4px;
}
#panel-body::-webkit-scrollbar-thumb:hover { background: rgba(140, 180, 220, 0.38); }

.close-x {
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.close-x:hover { color: var(--ink); }

/* Close × spins a quarter-turn on hover */
.close-x,
.stop-x,
.notif-x,
.tb-ap-from-x,
.tt-day-clear,
.pax-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.close-x:hover,
.stop-x:hover,
.notif-x:hover,
.tb-ap-from-x:hover,
.tt-day-clear:hover,
.pax-close:hover {
  transform: rotate(90deg);
}

/* ---------- cards & shared bits ---------- */
.card {
  background: linear-gradient(180deg, rgba(22, 40, 66, 0.94), rgba(14, 26, 44, 0.94));
  border: 1px solid rgba(140, 190, 240, 0.16);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 8px 18px rgba(0, 0, 0, 0.12);
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.card-head .pref-switch { margin: 0; flex-shrink: 0; }
.card-row { margin: 3px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-actions { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.card-actions-more {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cargo-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 2px;
}
.cargo-chip {
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
  color: var(--ink-2);
  white-space: nowrap;
}
.cargo-chip.cargo-r5 { color: #fbbf24; border-color: rgba(251,191,36,0.45); }
.cargo-chip.cargo-r4 { color: #86efac; border-color: rgba(134,239,172,0.35); }
.cargo-chip.cargo-r3 { color: var(--ink-2); }
.cargo-chip.cargo-r2 { color: var(--ink-3); opacity: 0.85; }

.muted { color: var(--ink-2); }
.mini { font-size: 11.5px; }
.panel-note { margin-bottom: 10px; line-height: 1.45; }
.panel-tip {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0,0,0,0.15);
  padding: 6px 10px;
}
.panel-tip > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  color: var(--ink-2);
  user-select: none;
}
.panel-tip > summary::-webkit-details-marker { display: none; }
.panel-tip > summary::before { content: "ⓘ "; color: var(--ink-3); }
.panel-tip[open] > summary { margin-bottom: 6px; color: var(--ink); }
.panel-tip .tip-body { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
.ok-text { color: var(--ok); }
.bad-text { color: var(--bad); }
.price { color: var(--gold); font-weight: 700; white-space: nowrap; }

.btn, #sidebar button, .chip, .panel-tile, .pill-pausebtn, .close-x, .ap-item, .tb-ap-item {
  touch-action: manipulation;
}

.btn {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  padding: 7px 13px;
  font: 600 12.5px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.btn:active:not(:disabled),
.chip:active,
.panel-tile:active {
  transform: scale(0.97);
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-gold { background: var(--gold); color: #1a1200; border-color: var(--gold); }
.btn-gold:hover:not(:disabled) { background: #ffd97a; border-color: #ffd97a; }
.btn-danger { border-color: rgba(248, 113, 113, 0.4); color: var(--bad); }
.btn-danger:hover:not(:disabled) { border-color: var(--bad); background: rgba(248, 113, 113, 0.08); }
.mini-btn { padding: 5px 9px; font-size: 11.5px; }

/* status chips */
.st { font-size: 12px; font-weight: 600; }
.st-idle { color: var(--ink-3); }
.st-fly { color: var(--accent); }
.st-turn { color: var(--ink-2); }
.st-hold { color: var(--bad); }
.st-ground { color: var(--warn); }
.st-maint { color: var(--warn); }
.st-ready {
  color: var(--gold);
  animation: readyPulse 1.8s ease-in-out infinite;
}
@keyframes readyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}

.route-badge {
  background: rgba(255, 201, 77, 0.12);
  border: 1px solid rgba(255, 201, 77, 0.35);
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.route-badge.none {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-3);
}
.owned-badge, .boost-badge {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(127, 212, 255, 0.12);
  border: 1px solid rgba(127, 212, 255, 0.35);
  color: var(--accent);
}
.boost-badge { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.35); color: var(--ok); }
.brand-badge {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: var(--gold);
}
.brand-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px;
}
.brand-filter.pref-switch { margin: 0; }
.brand-filter .chip {
  font: 600 11.5px "Segoe UI", system-ui, sans-serif;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.brand-filter .chip.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(251, 191, 36, 0.1);
}
.brand-filter.sched-week .chip.sched-day {
  border-radius: 8px;
  font-size: 10.5px;
  line-height: 1.25;
  padding: 6px 8px;
}

/* Panel section tiles — compact squares, left-aligned (do not stretch with panel width) */
.panel-tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 10px;
}
.panel-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 64px;
  min-height: 52px;
  padding: 5px 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-2);
  cursor: pointer;
  font: 650 10px "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.01em;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.panel-tile:hover {
  border-color: rgba(251, 191, 36, 0.45);
  color: var(--ink);
}
.panel-tile.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(251, 191, 36, 0.12);
}
.panel-tile-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.panel-tile-ico .ui-ico,
.panel-tile-ico .ico {
  width: 16px;
  height: 16px;
  margin: 0;
}
.panel-tile-lbl {
  text-align: center;
  line-height: 1.15;
}
.buy-art-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}
@media (max-width: 600px) {
  .panel-tile {
    width: 58px;
    min-height: 48px;
  }
}
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* progress bars */
.bar {
  flex: 1;
  min-width: 90px;
  height: 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 4px; }
.bar-fill.bar-grow,
.rt-bar i.bar-grow,
.mkt-quote-bar i.bar-grow,
.ap-acc-bar i.bar-grow {
  width: 0;
  transition: none;
  animation: barGrow 0.85s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
}
@keyframes barGrow {
  from { width: 0; }
  to { width: var(--to, 0%); }
}
@media (prefers-reduced-motion: reduce) {
  .bar-fill.bar-grow,
  .rt-bar i.bar-grow,
  .mkt-quote-bar i.bar-grow,
  .ap-acc-bar i.bar-grow {
    animation: none;
    width: var(--to, 0%);
  }
  .st-ready,
  .ord-preview .lart-canvas,
  .ord-preview .plane-art-svg,
  .hangar-craft-in,
  .hangar-stage.sky .hangar-art .lart-canvas,
  .hangar-stage.sky .hangar-art .plane-art-svg,
  #report-card.rep-pop {
    animation: none;
  }
  .rt-bar i.bar-set { transition: none; }
  .used-site-card:hover:not(:disabled) { transform: none; }
}
.bar-ok { background: var(--ok); }
.bar-warn { background: var(--warn); }
.bar-bad { background: var(--bad); }
.bar-gold { background: var(--gold); }
.bar-info { background: var(--accent); }
.bar-accent { background: #60a5fa; }
.bar-label { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }

/* route form */
.route-form {
  margin-top: 10px;
  padding: 11px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed var(--line);
  border-radius: 8px;
}
.rf-row { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.rf-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-2); flex: 1; }
.rf-info { font-size: 12px; margin-bottom: 9px; }
.cabin-row label { max-width: 110px; }

/* manufacturer shop */
.maker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
button.maker-card {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
button.maker-card:hover {
  border-color: var(--gold);
  background: rgba(251, 191, 36, 0.08);
}
.maker-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.maker-logo,
img.maker-logo {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  background: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.2);
}
.maker-logo-lg,
img.maker-logo-lg {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 8px;
}
.alliance-logo {
  width: 28px;
  height: 28px;
  max-width: 28px;
  max-height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: contain;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 8px rgba(0, 0, 0, 0.22);
}
.alliance-logo-sm {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  vertical-align: -5px;
  margin-right: 4px;
  object-fit: contain;
}
.alliance-logo-xs {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  vertical-align: -3px;
  margin-right: 3px;
  object-fit: contain;
}
.rival-logo,
svg.rival-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 10px rgba(0, 0, 0, 0.28);
}
.rival-logo-sm,
svg.rival-logo-sm {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.rival-logo-xs,
svg.rival-logo-xs {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.rival-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.rival-head-text { min-width: 0; }
.rival-head-text b { display: block; line-height: 1.2; }
.rival-meters {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 8px 0 2px;
}
.rival-meter .bar { min-width: 0; height: 6px; }
.rival-meter-lab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-2);
  margin-bottom: 2px;
}
.rival-meter-lab b { color: var(--ink); font-weight: 650; }
.maker-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.warn-text { color: var(--warn, #f59e0b); }

/* weekly timetable */
.tt-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
  margin: 8px 0 10px;
}
button.tt-day-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  transition: border-color 0.12s, background 0.12s;
}
button.tt-day-card:hover {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.06);
}
button.tt-day-card.tt-today { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.25); }
button.tt-day-card.tt-edit {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.12);
}
button.tt-day-card.has-route { border-color: rgba(52, 211, 153, 0.28); }
.tt-day-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}
.tt-day-route { font-size: 12.5px; line-height: 1.25; }
.tt-day-clear {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  border-radius: 4px;
  font-size: 14px;
  color: var(--ink-2);
}
.tt-day-clear:hover {
  color: var(--bad, #f87171);
  background: rgba(248, 113, 113, 0.12);
}
.tt-editor {
  margin-top: 4px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* big configure menu */
.cfg-big { padding: 13px; }
.cfg-title {
  font-size: 14px;
  margin-bottom: 4px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.cfg-sec {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold, #e8a833);
  margin: 12px 0 7px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.cfg-title + .cfg-sec, .cfg-sec:first-child { border-top: none; padding-top: 0; }
.amen-row label { min-width: 180px; }
.amen-row select { width: 100%; }
.buy-cfg {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.ord-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.ord-preview { max-width: 100%; }
.ord-preview .lart-canvas,
.ord-preview .plane-art-svg {
  animation: hangarTaxi 0.7s cubic-bezier(0.22, 0.9, 0.28, 1);
}
.ord-stats { display: flex; flex-direction: column; gap: 7px; }
.ord-stat {
  display: grid;
  grid-template-columns: 78px 1fr minmax(76px, auto);
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.ord-stat span { color: var(--ink-3); }
.ord-stat b { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.ord-stat:nth-child(1) .bar-grow { animation-delay: 0.04s; }
.ord-stat:nth-child(2) .bar-grow { animation-delay: 0.10s; }
.ord-stat:nth-child(3) .bar-grow { animation-delay: 0.16s; }
.ord-stat:nth-child(4) .bar-grow { animation-delay: 0.22s; }
.ord-stat:nth-child(5) .bar-grow { animation-delay: 0.28s; }
.ord-stat:nth-child(6) .bar-grow { animation-delay: 0.34s; }
.ord-checkout .card-actions { flex-wrap: wrap; }
@media (max-width: 720px) {
  .ord-hero { grid-template-columns: 1fr; }
}

select, input[type="number"], input[type="text"], #airline-name {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 7px;
  padding: 7px 9px;
  font: 500 12.5px "Segoe UI", system-ui, sans-serif;
  max-width: 100%;
}
select:focus, input:focus { outline: 1px solid var(--accent); }
input[type="number"] { width: 82px; }

/* ---------- searchable airport picker ---------- */
.ap-picker {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
  padding: 8px;
  margin: 6px 0 10px;
}
.ap-controls { display: flex; gap: 7px; margin-bottom: 7px; }
.ap-controls input { flex: 1; min-width: 0; }
.ap-controls select { max-width: 46%; }
.ap-list {
  max-height: 172px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ap-list::-webkit-scrollbar { width: 7px; }
.ap-list::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 4px; }
.ap-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ink);
  font: 500 12.5px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  text-align: left;
}
.ap-item:hover { background: var(--panel-2); border-color: var(--line); }
.ap-item.active { border-color: var(--gold); background: rgba(255, 201, 77, 0.08); }
.ap-item b { min-width: 36px; color: var(--accent); }
.ap-item.active b { color: var(--gold); }
.ap-item .ap-city { flex: 0 1 auto; }
.ap-item .ap-size { margin-left: auto; color: var(--ink-3); font-size: 9px; letter-spacing: 1px; }
.ap-empty { padding: 10px; text-align: center; }
.rf-label { display: block; font-size: 11.5px; color: var(--ink-2); margin: 8px 0 2px; }
.ob-hub-sel { font-size: 13px; margin: 4px 0 6px; }

/* onboard experience */
.meal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0;
}
.meal-opt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font: 500 12px "Segoe UI", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}
.meal-opt:hover { border-color: var(--accent); }
.meal-opt.active { border-color: var(--gold); background: rgba(255, 201, 77, 0.07); }
.meal-opt.active b { color: var(--gold); }
.retail-kit-summary {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.svc-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  cursor: pointer;
  margin-right: 14px;
}
.svc-toggle input { accent-color: var(--gold); }

/* stopover chips */
.rf-stops { margin: 8px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stop-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(127, 212, 255, 0.1);
  border: 1px solid rgba(127, 212, 255, 0.35);
  color: var(--accent);
  font: 700 11.5px "Segoe UI", system-ui, sans-serif;
  padding: 2px 4px 2px 9px;
  border-radius: 999px;
}
.stop-x {
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: 13px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.stop-x:hover { color: var(--bad); }
.via-note { font-weight: 600; font-size: 10px; opacity: 0.85; }

/* charter offers */
.charter-offer {
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  margin-top: 8px;
}
.charter-offer:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.charter-offer select { max-width: 200px; }

/* buy panel filter bar */
.buy-filter { display: flex; gap: 7px; margin-bottom: 8px; }
.buy-filter input { flex: 1; min-width: 0; }
.buy-filter select { max-width: 46%; }

/* buy panel */
.plane-art {
  background: linear-gradient(180deg, #b8d4ee 0%, #ddeaf6 78%, #9db8ce 78%, #8aa6bd 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 6px 0 8px;
  overflow: hidden;
}
/* Marketplace grounded pose — single showroom plate. */
.plane-art-shop.showroom {
  background: #e8eaee url("../img/liveries/showroom.jpg") center / cover no-repeat;
}
.plane-art-shop.sky {
  background: #6eb6e8 url("../img/liveries/sky.jpg") center / cover no-repeat;
}
.plane-art-shop.bush {
  background: #5a7a4a url("../img/liveries/bush.jpg") center 62% / cover no-repeat;
}
.plane-art-shop.hangar {
  background-color: #2a2620;
  background-image:
    radial-gradient(ellipse 42% 16% at 50% 6%, rgba(255, 228, 170, 0.38), transparent 72%),
    radial-gradient(ellipse 20% 10% at 18% 5%, rgba(255, 214, 140, 0.22), transparent 70%),
    radial-gradient(ellipse 20% 10% at 82% 5%, rgba(255, 214, 140, 0.22), transparent 70%),
    linear-gradient(180deg, transparent 36%, rgba(255, 236, 190, 0.08) 48%, transparent 58%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 7px, transparent 7px 36px),
    linear-gradient(180deg, #1e1b17 0%, #322e27 38%, #4a453c 38%, #8a8374 68%, #6e685c 100%);
}
/* Real-photo marketplace mode — no showroom/sky plate behind the shot */
.plane-art-shop.photo {
  background: linear-gradient(180deg, #0c1828 0%, #152a42 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.plane-art-shop.photo .plane-photo {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
}
.plane-art-shop.sky .lart-canvas {
  filter: drop-shadow(0 8px 12px rgba(20, 40, 70, 0.22));
}
.plane-art-shop.bush .lart-canvas {
  filter: drop-shadow(0 6px 10px rgba(20, 30, 20, 0.35));
}
.plane-art-svg { display: block; width: 100%; height: auto; max-height: 130px; }
.plane-art img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.plane-art .lart-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 150px;
  padding: 14px 10px 8px;
  box-sizing: border-box;
}
.plane-art .lart-canvas.lart-heli,
.plane-art-shop .lart-canvas.lart-heli,
.hangar-art .lart-canvas.lart-heli,
.livery-preview .lart-canvas.lart-heli {
  width: auto;
  max-width: 240px;
  max-height: 200px;
  margin-left: auto;
  margin-right: auto;
}
.plane-art-shop .lart-canvas {
  max-height: 168px;
  padding: 22px 14px 18px;
  filter: drop-shadow(0 10px 14px rgba(20, 28, 40, 0.28));
}

/* Fleet hangar viewer */
.hangar-view { display: flex; flex-direction: column; gap: 12px; }
.hangar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.hangar-stage {
  border: 1px solid rgba(255, 201, 77, 0.18);
  border-radius: 14px;
  overflow: hidden;
  padding: 0 0 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.18);
}
.hangar-art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  min-height: 188px;
  background: transparent;
}
.hangar-art .lart-canvas,
.hangar-art .plane-art-svg {
  width: auto;
  max-width: 94%;
  height: auto;
  max-height: 200px;
  padding: 18px 10px 10px;
  object-fit: contain;
  flex: 0 1 auto;
}
.hangar-stage.hangar .hangar-art .lart-canvas,
.hangar-stage.hangar .hangar-art .plane-art-svg {
  filter: drop-shadow(0 16px 12px rgba(20, 14, 8, 0.5));
}
.hangar-craft-in { animation: hangarTaxi 0.55s cubic-bezier(0.22, 0.9, 0.28, 1); }
.hangar-stage.sky .hangar-art .lart-canvas,
.hangar-stage.sky .hangar-art .plane-art-svg {
  animation: hangarBob 3.2s ease-in-out 0.4s infinite;
}
.hangar-meta {
  padding: 10px 14px 0;
  background: linear-gradient(180deg, rgba(8, 16, 28, 0.15), rgba(8, 16, 28, 0.55));
}
.hangar-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.hangar-meta-top b { font-size: 15px; letter-spacing: 0.02em; }
.hangar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.hangar-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x proximity;
}
.hangar-thumb {
  flex: 0 0 122px;
  padding: 0 0 7px;
  border: 1px solid rgba(140, 190, 240, 0.16);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.hangar-thumb:hover { border-color: rgba(251, 191, 36, 0.45); transform: translateY(-1px); }
.hangar-thumb.on {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 6px 14px rgba(0, 0, 0, 0.2);
}
.hangar-thumb-art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  min-height: 58px;
}
.hangar-thumb-art .lart-canvas,
.hangar-thumb-art .plane-art-svg {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 56px;
  padding: 4px 4px 2px;
  object-fit: contain;
}
.hangar-thumb-id {
  display: block;
  font: 700 10.5px "Segoe UI", system-ui, sans-serif;
  text-align: center;
  padding: 2px 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes hangarTaxi {
  from { opacity: 0; transform: translateX(-22px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes hangarBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.cat-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ink-3);
  margin: 14px 0 8px;
}
.specs { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin: 4px 0; }

/* fuel panel */
.commodity { margin-bottom: 22px; }
.commodity h3 { font-size: 14px; margin-bottom: 6px; }
.comm-price { font-size: 22px; margin-bottom: 6px; }
.comm-price b { font-variant-numeric: tabular-nums; }
.comm-price .muted { font-size: 13px; margin: 0 6px 0 2px; }
.spark {
  width: 100%;
  height: 70px;
  display: block;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
}
.comm-holding { font-size: 13px; margin-bottom: 8px; }
.comm-buy { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

/* company panel */
.company-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.company-name-row .btn { white-space: nowrap; flex: 0 0 auto; }
#airline-name {
  flex: 1 1 140px;
  min-width: 120px;
  font-size: 15px;
  font-weight: 700;
  height: auto;
  align-self: center;
}
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}
#panel.panel-wide .stat-grid {
  grid-template-columns: 1fr 1fr 1fr;
}
.stat-grid > div {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.danger-zone { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* empty state */
.empty { text-align: center; color: var(--ink-2); padding: 40px 10px; line-height: 1.6; }

/* weekly gazette */
.paper-card {
  background: linear-gradient(165deg, rgba(20, 32, 52, 0.95), rgba(12, 20, 34, 0.98));
  border-color: rgba(232, 168, 51, 0.25);
}
.paper-mast {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
  margin-bottom: 2px;
}
.paper-dateline {
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.paper-story { margin-bottom: 12px; }
.paper-story.lead .paper-hed { font-size: 15px; color: var(--ink); }
.paper-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.paper-hed {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.paper-dek {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 3px;
  line-height: 1.4;
}

/* ---------- top-bar event pills ---------- */
#notifs {
  position: static;
  transform: none;
  z-index: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  pointer-events: none;
  overflow: visible;
}
.notif {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px 10px 6px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: normal;
  box-shadow: none;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.15s ease;
  pointer-events: auto;
  cursor: pointer;
}
.notif.show { opacity: 1; transform: translateY(0); }
.notif-time {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  padding-top: 2px;
}
.notif-msg {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.notif.notif-open .notif-msg {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.notif-x {
  appearance: none;
  background: none;
  border: 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.notif-x:hover { color: var(--ink); }
.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--notif-dot, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--notif-dot, var(--accent)) 70%, transparent);
}
.notif-good { --notif-dot: #4ade80; border-color: rgba(74, 222, 128, 0.5); background: rgba(74, 222, 128, 0.14); }
.notif-good .notif-msg { color: #86efac; }
.notif-bad { --notif-dot: #f87171; border-color: rgba(248, 113, 113, 0.55); background: rgba(248, 113, 113, 0.14); }
.notif-bad .notif-msg { color: #fca5a5; }
.notif-money { --notif-dot: #ffc94d; border-color: rgba(255, 201, 77, 0.55); background: rgba(255, 201, 77, 0.14); }
.notif-money .notif-msg { color: #ffd978; }
.notif-warn { --notif-dot: #f5a524; border-color: rgba(245, 165, 36, 0.55); background: rgba(245, 165, 36, 0.14); }
.notif-warn .notif-msg { color: #fbbf24; }
.notif-info { --notif-dot: #7fd4ff; border-color: rgba(127, 212, 255, 0.5); background: rgba(127, 212, 255, 0.14); }
.notif-info .notif-msg { color: #bae6fd; }
html.skip-landing #landing { display: none !important; }
.lang-scroll-wrap { width: 100%; }
.lang-scroll {
  display: block;
  width: 100%;
  max-height: 168px;
  overflow-y: auto;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font: 600 13px "Segoe UI", system-ui, sans-serif;
  padding: 4px;
}
.lang-scroll option { padding: 7px 10px; border-radius: 6px; }
.lang-scroll option:checked,
.lang-scroll option:hover { background: rgba(127, 212, 255, 0.16); }

/* training pips */
.pip {
  display: inline-block;
  width: 22px;
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line);
  margin-right: 4px;
}
.pip.on { background: var(--gold); border-color: var(--gold); }

/* fare row */
.fare-row { align-items: end; }
.fare-inline { display: flex; align-items: center; gap: 6px; }
.meal-opt.locked { opacity: 0.55; }

/* ---------- airport card ---------- */
#airport-card, #plane-card, #route-card {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 10;
  width: 250px;
  background: rgba(11, 22, 38, 0.95);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
#airport-card.hub-wide {
  width: min(440px, calc(100vw - 48px));
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}
.hub-diagram {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.hub-builder-cta { margin-top: 8px; }
.hub-builder-btn { width: 100%; justify-content: center; }
.hub-build-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 8px;
}
.hub-build-bar select {
  margin-left: 6px;
  min-width: 160px;
}
.hub-turn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-bottom: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.hub-turn-sample { font-size: 12px; }
.hub-fac-section { margin-bottom: 16px; }
.hub-fac-cat {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: 0 0 8px;
}
.hub-fac-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.hub-fac-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hub-fac-card.built { border-color: rgba(106, 155, 106, 0.45); }
.hub-fac-card.hub-placing {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(232, 168, 51, 0.35);
}
.hub-fac-span { grid-column: 1 / -1; }
.hub-drag-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.hub-drag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 10px;
  border: 1.5px dashed var(--gold);
  background: rgba(232, 168, 51, 0.12);
  color: var(--ink);
  font: 600 12px "Segoe UI", system-ui, sans-serif;
  cursor: grab;
  user-select: none;
}
.hub-drag-chip-logo { padding-left: 6px; }
.hub-drag-chip-meta { line-height: 1.2; }
.hub-drag-chip:active { cursor: grabbing; }
.hub-logo {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  line-height: 0;
}
.hub-logo svg { display: block; }
.hub-logo-ops {
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}
.hub-logo-ops-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: brightness(1.35);
}
.hub-logo-ops-ico .ico { width: 18px; height: 18px; }
.hub-brand-card .hub-fac-head { align-items: center; }
.hub-float-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  display: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}
.hub-diagram-field.hub-drop-armed {
  outline: 2px dashed rgba(232, 168, 51, 0.65);
  outline-offset: -3px;
  cursor: copy;
}
.hub-drop-note { color: var(--gold) !important; }
.hub-spot {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);
  padding: 0;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
  line-height: 0;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.45));
}
.hub-spot-logo { width: 34px; height: 34px; }
.hub-spot-lv {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: #0b1626;
  border: 1px solid rgba(255,255,255,0.35);
  color: #ffe08a;
  font: 700 9px "Segoe UI", system-ui, sans-serif;
  line-height: 14px;
  text-align: center;
}
.hub-spot-dragging { opacity: 0.92; z-index: 8; cursor: grabbing; scale: 1.08; }
.hub-spot-busy { opacity: 0.75; cursor: pointer; }
.hub-spot-busy::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px dashed rgba(232, 168, 51, 0.85);
  border-radius: 10px;
  animation: hub-build-pulse 1.2s ease-in-out infinite;
}
@keyframes hub-build-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.hub-spot-ghost { opacity: 0.35; filter: grayscale(0.6); pointer-events: none; }
.hub-spot-job {
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  font: 700 8px "Segoe UI", system-ui, sans-serif;
  color: #ffe08a;
  background: rgba(0,0,0,0.65);
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.2;
}
.hub-fac-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.hub-fac-effect {
  font-size: 11.5px;
  color: var(--gold);
  line-height: 1.35;
}
.hub-diagram-builder {
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
}
.hub-diagram-builder .hub-diagram-field {
  height: 360px;
}
.hub-zone-hint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.hub-zone-panel {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.hub-zone-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.hub-term.zone-active,
.hub-plot.zone-active {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px rgba(232, 168, 51, 0.45), 0 2px 8px rgba(0,0,0,0.35);
  filter: brightness(1.1);
}
.hub-diagram-builder .hub-term,
.hub-diagram-builder .hub-plot {
  cursor: pointer;
}
.hub-diagram-field {
  position: relative;
  height: 280px;
  margin-bottom: 6px;
  border-radius: 10px;
  overflow: hidden;
  /* Grass · midfield apron · grass (runways flank the terminal) */
  background:
    linear-gradient(180deg,
      rgba(55, 110, 55, 0.58) 0%,
      rgba(48, 98, 52, 0.48) 28%,
      rgba(42, 58, 70, 0.55) 34%,
      rgba(40, 52, 62, 0.15) 38%,
      rgba(40, 52, 62, 0.15) 62%,
      rgba(42, 58, 70, 0.55) 66%,
      rgba(48, 98, 52, 0.48) 72%,
      rgba(55, 110, 55, 0.58) 100%),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,0.015) 18px 19px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.25);
}
.hub-diagram-field.hub-field-large { height: 300px; }
.hub-diagram-field.hub-field-mega { height: 320px; }
.hub-diagram-builder .hub-diagram-field.hub-field-mega { height: 350px; }
.hub-apron {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 34%;
  bottom: 34%;
  border-radius: 8px;
  background: linear-gradient(180deg, #3a4552 0%, #2c3540 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.hub-diagram-field.hub-field-single .hub-apron {
  top: 48%;
  bottom: 8%;
}
.hub-diagram-field.hub-field-single {
  background:
    linear-gradient(180deg, rgba(55, 110, 55, 0.55) 0%, rgba(45, 90, 50, 0.42) 44%, rgba(40, 52, 62, 0.78) 52%, rgba(32, 42, 52, 0.92) 100%),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,0.015) 18px 19px);
}
/* N–S airports: grass on left/right, tall midfield apron */
.hub-diagram-field.hub-field-portrait {
  background:
    linear-gradient(90deg,
      rgba(55, 110, 55, 0.58) 0%,
      rgba(48, 98, 52, 0.48) 22%,
      rgba(42, 58, 70, 0.55) 28%,
      rgba(40, 52, 62, 0.15) 32%,
      rgba(40, 52, 62, 0.15) 68%,
      rgba(42, 58, 70, 0.55) 72%,
      rgba(48, 98, 52, 0.48) 78%,
      rgba(55, 110, 55, 0.58) 100%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,0.015) 18px 19px);
}
.hub-diagram-field.hub-field-portrait .hub-apron {
  left: 30%;
  right: 30%;
  top: 10%;
  bottom: 10%;
}
.hub-diagram-field.hub-field-portrait.hub-field-single .hub-apron {
  left: 38%;
  right: 8%;
  top: 10%;
  bottom: 10%;
}
.hub-diagram-field.hub-field-portrait.hub-field-single {
  background:
    linear-gradient(90deg, rgba(55, 110, 55, 0.55) 0%, rgba(45, 90, 50, 0.42) 36%, rgba(40, 52, 62, 0.78) 48%, rgba(32, 42, 52, 0.92) 100%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,0.015) 18px 19px);
}
/* Gray runway sticks with dashed centerline */
.hub-rwy {
  position: absolute;
  z-index: 2;
  background: linear-gradient(180deg, #6a7078 0%, #4e545c 45%, #3e444c 100%);
  border: 1px solid #2a2e34;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  pointer-events: none;
}
.hub-rwy::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 0;
  border-top: 1.5px dashed rgba(255,255,255,0.55);
  transform: translateY(-50%);
}
.hub-rwy-end {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 7px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.hub-rwy-end-r { left: auto; right: 3px; }
.hub-term {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  appearance: none;
  border: 1px solid rgba(180, 200, 220, 0.35);
  background: linear-gradient(180deg, #5a6a7c 0%, #3d4a58 100%);
  color: #eef3f8;
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  cursor: default;
  min-width: 0;
}
.hub-term.built.afford { cursor: pointer; }
.hub-term.built.afford:hover {
  border-color: var(--gold);
  filter: brightness(1.08);
}
.hub-term.empty {
  border-style: dashed;
  border-color: rgba(76, 175, 122, 0.75);
  background: rgba(30, 70, 48, 0.72);
  cursor: pointer;
  color: #b8f0c8;
}
.hub-term.empty:hover,
.hub-plot.empty:hover {
  border-color: #7dffa0;
  background: rgba(40, 100, 60, 0.85);
}
.hub-term-sat {
  z-index: 3;
  opacity: 0.82;
  font-size: 0.92em;
  pointer-events: none;
  background: linear-gradient(180deg, #4a5868 0%, #323c48 100%);
  border-color: rgba(160, 180, 200, 0.28);
}
.hub-term-sat.ghost { opacity: 0.45; }
.hub-term-sat.empty {
  border-style: dashed;
  background: rgba(28, 55, 42, 0.55);
}
.hub-term.ghost {
  opacity: 0.55;
  border-style: dashed;
  background: rgba(60, 72, 88, 0.55);
}
.hub-term-lbl { font-size: 10px; font-weight: 700; line-height: 1.1; }
.hub-term-meta { font-size: 8.5px; opacity: 0.85; line-height: 1.1; }
.hub-plot {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -50%);
  width: 52px;
  min-height: 38px;
  max-width: 22%;
  appearance: none;
  font: inherit;
  color: var(--ink);
  border-radius: 6px;
  padding: 3px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.hub-plot.empty {
  border: 1.5px dashed rgba(76, 175, 122, 0.85);
  background: rgba(28, 72, 48, 0.78);
  color: #c8f5d4;
  cursor: pointer;
}
.hub-plot.built {
  border: 1px solid rgba(76, 175, 122, 0.55);
  background: rgba(24, 48, 38, 0.9);
  cursor: default;
  color: #d8ece0;
}
.hub-plot.built.afford { cursor: pointer; }
.hub-plot.built.afford:hover,
.hub-diagram-builder .hub-plot.built:hover,
.hub-diagram-builder .hub-term.built:hover {
  border-color: var(--gold);
  filter: brightness(1.08);
}
.hub-plot-plus {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: #6dffa0;
}
.hub-plot-ico { line-height: 1; }
.hub-plot-lbl { font-size: 9px; font-weight: 700; text-align: center; line-height: 1.15; }
.hub-plot-meta { font-size: 8px; opacity: 0.85; text-align: center; line-height: 1.1; }

/* Terminal tile grid (landside dining / hotel / lounge) */
.hub-tgrid-wrap {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.hub-tgrid-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.hub-tgrid {
  --hub-tcols: 8;
  --hub-tcell: 18px;
  display: grid;
  grid-template-columns: repeat(var(--hub-tcols), var(--hub-tcell));
  gap: 2px;
  width: max-content;
  max-width: 100%;
  padding: 6px;
  border-radius: 8px;
  background: linear-gradient(180deg, #3d4a58 0%, #2c3540 100%);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: auto;
  user-select: none;
}
.hub-tcell {
  width: var(--hub-tcell);
  height: var(--hub-tcell);
  box-sizing: border-box;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
}
.hub-tgrid-placing .hub-tcell-free {
  background: rgba(76, 175, 122, 0.18);
  border-color: rgba(76, 175, 122, 0.45);
  cursor: crosshair;
}
.hub-tgrid-placing .hub-tcell-free:hover,
.hub-tcell-ghost {
  background: rgba(232, 168, 51, 0.45) !important;
  border-color: rgba(232, 168, 51, 0.9) !important;
}
.hub-tcell-ghost-bad {
  background: rgba(200, 70, 70, 0.45) !important;
  border-color: rgba(255, 120, 120, 0.9) !important;
}
.hub-tcell-fill {
  background: rgba(20, 32, 44, 0.95);
  border-color: rgba(180, 200, 220, 0.35);
}
.hub-tcell-restaurant { background: rgba(180, 90, 40, 0.55); }
.hub-tcell-hotel { background: rgba(70, 100, 160, 0.55); }
.hub-tcell-lounge { background: rgba(120, 70, 150, 0.55); }
.hub-tcell-busy { opacity: 0.7; outline: 1px dashed rgba(232, 168, 51, 0.7); }
.hub-tcell-draggable { cursor: grab; }
.hub-tcell-logo {
  display: flex;
  pointer-events: none;
  transform: scale(0.85);
}
.hub-tcell-logo .hub-logo { box-shadow: none; }
.hub-fp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.hub-fp-row .btn { font-size: 11px; padding: 4px 8px; }

/* legacy slot classes (unused by diagram, kept harmless) */
.hub-slot { display: none; }
#airport-card.hidden, #plane-card.hidden, #route-card.hidden { display: none; }
#airport-card h3, #plane-card h3, #route-card h3 { font-size: 17px; margin-bottom: 2px; color: var(--gold); }
#airport-card .close-x, #plane-card .close-x, #route-card .close-x { position: absolute; top: 6px; right: 8px; }
#plane-card { width: 270px; max-height: calc(100vh - 110px); overflow-y: auto; }
.fleet-plane-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.fleet-plane-link:hover b,
.fleet-plane-link:focus-visible b { color: var(--gold); text-decoration: underline; }
#plane-card.has-pax { width: 310px; }
#plane-card.has-route { width: 360px; }
#plane-card.has-heli { width: 320px; }
#plane-card-route:empty { display: none; }
#route-card { width: 320px; max-height: calc(100vh - 90px); overflow-y: auto; }
.rt-pair { font-size: 18px; font-weight: 800; color: var(--gold); letter-spacing: 0.4px; }
.rt-pair span { color: var(--ink-3); font-weight: 500; }
.rt-cities { font-size: 12px; color: var(--ink-3); margin: 2px 0 10px; }
.rt-verdict {
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.28);
}
.rt-verdict b { display: block; font-size: 13px; }
.rt-verdict span { font-size: 11.5px; color: var(--ink-3); }
.rt-verdict.bad { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.3); }
.rt-verdict.warn { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); }
.rt-verdict.muted { background: rgba(255,255,255,0.04); border-color: var(--line); }
.rt-facts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.rt-facts div {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 7px;
}
.rt-facts span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.rt-facts b { font-size: 12px; }
.rt-demand { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.rt-drow { display: grid; grid-template-columns: 88px 1fr 64px; align-items: center; gap: 6px; font-size: 11.5px; }
.rt-drow span { color: var(--ink-3); }
.rt-drow b { text-align: right; font-variant-numeric: tabular-nums; }
.rt-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.rt-bar i { display: block; height: 100%; border-radius: 99px; }
.rt-bar i.bar-set { width: var(--to, 0%); }
.rt-bar i.y { background: #7dd3fc; }
.rt-bar i.j { background: #a78bfa; }
.rt-bar i.f { background: #fbbf24; }
.rt-bar i.c { background: #34d399; }
.rt-bar i.b { background: #fb923c; }
.rt-bar i.k { background: #f472b6; }
.rt-bar i.p { background: #67e8f9; }
.rt-bar i.w { background: #f87171; }
.rt-drow:nth-child(1) .bar-grow { animation-delay: 0.05s; }
.rt-drow:nth-child(2) .bar-grow { animation-delay: 0.14s; }
.rt-drow:nth-child(3) .bar-grow { animation-delay: 0.23s; }
.rt-drow:nth-child(4) .bar-grow { animation-delay: 0.32s; }
.ap-acc-bar { height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.ap-acc-bar i { display: block; height: 100%; }
.rt-fare {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 8px 0; padding: 8px 10px; border-radius: 8px;
  background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.25);
}
.rt-fare span { font-size: 11px; color: var(--ink-3); }
.rt-fare b { font-size: 16px; color: var(--gold); }
.rt-fare i { font-style: normal; font-size: 11px; color: var(--ink-3); }
.rt-comp { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.rt-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 2px 8px; border: 1px solid var(--line); margin: 2px 4px 2px 0;
}
.rt-chip.ok, .rt-chip.ok-text { border-color: rgba(74, 222, 128, 0.4); color: var(--ok); }
.rt-chip.bad, .rt-chip.bad-text { border-color: rgba(248, 113, 113, 0.4); color: var(--bad); }
.rt-rivals { margin: 4px 0 8px; padding-left: 0; list-style: none; font-size: 12px; color: var(--ink-3); }
.rt-rivals li { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; margin: 3px 0; }
.rt-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.rt-war-meter { margin: 8px 0 4px; }
.rt-war-meter .bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.rt-war-meter .bar-fill { height: 100%; border-radius: 99px; }
.rt-war-meter .bar-mid { background: linear-gradient(90deg, #c45c5c, #d4a017 50%, #6a9b6a); }
.rt-meta { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.rt-events { margin-top: 8px; font-size: 11.5px; display: flex; flex-wrap: wrap; gap: 6px; }
.ac-row { margin-top: 8px; font-size: 12.5px; }
#plane-card .ac-row { margin-top: 5px; font-size: 12px; }
#plane-card h3 { font-size: 15px; }
/* Mission lists scroll with the parent panel/card — nested max-height scrollers
   fought the tick refresh and made heli desks feel stuck. */
.heli-pad-board,
.heli-near-board {
  margin-top: 6px;
  padding-right: 2px;
  overscroll-behavior: contain;
}
.heli-near-board {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
/* Compact cards only: allow an inner scroller when the card itself is short */
#plane-card .heli-near-board,
#airport-card .heli-pad-board {
  max-height: min(40vh, 280px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Phones: nested scrollers fight the parent card — expand inline instead */
@media (max-width: 900px) {
  #plane-card .heli-near-board,
  #airport-card .heli-pad-board {
    max-height: none;
    overflow: visible;
  }
}
.heli-pad-board .charter-offer,
.heli-near-board .charter-offer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.heli-pad-board .charter-offer:first-child,
.heli-near-board .charter-offer:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.heli-pad-board select,
.heli-near-board select { max-width: 100%; }
.plane-card-pax {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.plane-card-pax .pax-wrap-inline {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  gap: 6px;
}
.plane-card-pax .pax-stage {
  width: min(260px, 70vw);
}
.plane-card-pax .pax-hud {
  width: 100%;
  font-size: 11px;
}
.plane-card-pax .pax-badge {
  position: static;
  align-self: flex-start;
  margin: 0;
}
.pax-thoughts {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.pax-thoughts-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.pax-thoughts-list {
  max-height: 120px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.pax-thought {
  margin: 0 0 7px;
  font-size: 12px;
  line-height: 1.35;
}
.pax-thought-meta {
  color: var(--ink-2);
  font-size: 11px;
}
.pax-thought-line {
  color: var(--ink);
  font-style: italic;
}
.cargo-manifest-brief {
  font-size: 11px;
  color: var(--ink-2);
  margin: 0 0 6px;
}
.cargo-manifest-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.cargo-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  font-size: 12px;
  line-height: 1.3;
}
.cargo-item-name {
  font-weight: 650;
  color: var(--ink);
}
.cargo-item-w {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.cargo-item-type {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- toast (kind-aware: info default, ok / bad / gold) ---------- */
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translate(-50%, 16px);
  background: rgba(13, 27, 46, 0.97);
  border: 1px solid var(--line);
  border-left: 1px solid var(--info);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-size: 13px;
  z-index: 60;
  opacity: 0;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  transition: opacity var(--t-med), transform var(--t-med);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-ok { border-left-color: var(--success); color: #d9ffe6; }
.toast-bad { background: #2a1518; border-color: rgba(248, 113, 113, 0.5); border-left-color: var(--danger); color: #ffd9d9; }
.toast-gold { border-left-color: var(--gold); color: #fff3d6; }

/* ---------- confirm modal (replaces native confirm/prompt) ---------- */
.modal-veil {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 9, 18, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}
.modal-veil.show { opacity: 1; }
.modal-box {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(8px) scale(0.98);
  transition: transform var(--t-fast) ease;
}
.modal-veil.show .modal-box { transform: none; }
.modal-box.modal-danger { border-color: rgba(248, 113, 113, 0.4); }
.modal-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-danger .modal-title { color: var(--danger); }
.modal-body { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-bottom: 14px; }
.modal-body b { color: var(--ink); }
.modal-consequence {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.07);
  color: #fca5a5;
  font-size: 12px;
}
.modal-input {
  width: 100%;
  margin-top: 10px;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-actions .btn-danger-solid {
  background: var(--danger);
  border-color: var(--danger);
  color: #2a0b0b;
  font-weight: 700;
}
.modal-actions .btn-danger-solid:hover:not(:disabled) { background: #ff8f8f; border-color: #ff8f8f; }
@media (prefers-reduced-motion: reduce) {
  .modal-veil, .modal-box { transition: none; }
}

/* ---------- route form profit estimate ---------- */
.rf-est {
  margin: 8px 0 2px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
  font-size: 11.5px;
}
.rf-est-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.rf-est-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 4px 10px;
}
.rf-est-grid span { display: block; color: var(--ink-3); font-size: 10px; }
.rf-est-grid b { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 650; }
.rf-est-net {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.rf-est-net b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.rf-est-note { color: var(--ink-3); font-size: 10px; }

/* ---------- flight report net line ---------- */
.rep-net {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
}
.rep-net b { font-variant-numeric: tabular-nums; font-size: 14px; }

/* ---------- achievements: show unlock hint inline ---------- */
.ach-how {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-3);
  line-height: 1.3;
}

/* ---------- store (Fleet & Cash packs) ---------- */
.store-testnote {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(245, 165, 36, 0.35);
  background: rgba(245, 165, 36, 0.08);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}
.store-pack { padding: 12px 14px; }
.store-pack.store-best {
  border-color: rgba(255, 201, 77, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 201, 77, 0.18), 0 8px 18px rgba(0, 0, 0, 0.12);
}
.store-usd {
  font-size: 18px;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.store-lines { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.store-line { font-size: 12.5px; line-height: 1.4; }
.store-line b { font-variant-numeric: tabular-nums; }
.store-cash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.store-cash {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.store-cash.store-best { border-color: rgba(255, 201, 77, 0.45); }
.store-cash-name { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.store-cash-amt { font-size: 17px; font-weight: 800; color: var(--ok); font-variant-numeric: tabular-nums; }
.store-cash .btn { width: 100%; text-align: center; }
.store-foot { margin-top: 4px; line-height: 1.5; }

/* ---------- onboarding ---------- */
/* ---------- first-run tutorial ---------- */
#tut-spot {
  position: fixed;
  z-index: 52;
  pointer-events: none;
  border-radius: 12px;
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 22px rgba(255, 201, 77, 0.45),
    0 0 0 9999px rgba(3, 7, 14, 0.72);
  animation: tutPulse 1.4s ease-in-out infinite;
}
#tut-spot.hidden { display: none; }
@keyframes tutPulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px var(--gold),
      0 0 18px rgba(255, 201, 77, 0.35),
      0 0 0 9999px rgba(3, 7, 14, 0.72);
  }
  50% {
    box-shadow:
      0 0 0 5px #ffe08a,
      0 0 28px rgba(255, 201, 77, 0.55),
      0 0 0 9999px rgba(3, 7, 14, 0.68);
  }
}
@media (prefers-reduced-motion: reduce) {
  #tut-spot { animation: none; }
}
#tutorial {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: auto;
  z-index: 55;
  max-width: min(400px, calc(100vw - 32px));
  pointer-events: none;
}
/* Desktop: sit left of the sidebar column so nav buttons stay visible */
@media (min-width: 901px) {
  #tutorial { right: 214px; }
}
#tutorial.tut-left {
  left: 16px;
  right: auto;
}
#tutorial.hidden { display: none; }
.tut-card {
  pointer-events: auto;
  background: rgba(11, 22, 38, 0.97);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.tut-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.tut-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.tut-step { font-size: 11px; color: var(--ink-3); }
.tut-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--ink);
}
.tut-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.tut-body ol { margin: 8px 0 0 1.15em; padding: 0; }
.tut-body li { margin: 5px 0; }
.tut-do { color: var(--gold); font-weight: 700; }
.tut-shop-hit {
  outline: 2px solid var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent);
}
.tut-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.tut-wait { margin-right: auto; }
body.tut-on #sidebar button {
  transition: box-shadow 0.15s, border-color 0.15s;
}
body.tut-on[data-tut-panel="fleet"] #sidebar button[data-panel="fleet"],
body.tut-on[data-tut-panel="buy"] #sidebar button[data-panel="buy"],
body.tut-on[data-tut-panel="maint"] #sidebar button[data-panel="maint"],
body.tut-on[data-tut-panel="fuel"] #sidebar button[data-panel="fuel"],
body.tut-on[data-tut-panel="marketing"] #sidebar button[data-panel="marketing"],
body.tut-on[data-tut-panel="events"] #sidebar button[data-panel="events"],
body.tut-on[data-tut-panel="logs"] #sidebar button[data-panel="logs"],
body.tut-on[data-tut-panel="company"] #sidebar button[data-panel="company"],
body.tut-on[data-tut-panel="help"] #sidebar button[data-panel="help"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.45);
  color: var(--gold);
}

#onboard {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(4, 9, 18, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}
#onboard.hidden { display: none; }
.ob-box {
  width: 460px;
  max-width: 92vw;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.ob-box h1 { font-size: 24px; color: var(--gold); margin-bottom: 4px; }
.ob-box .tagline { color: var(--ink-2); margin-bottom: 22px; font-size: 13px; }
.ob-box label { display: block; font-size: 12px; color: var(--ink-2); margin: 14px 0 5px; }
.ob-box input, .ob-box select { width: 100%; font-size: 14px; padding: 10px 12px; }
.ob-box .btn-gold { width: 100%; margin-top: 22px; padding: 12px; font-size: 14px; }
.ob-start-note { margin-top: 12px; font-size: 11.5px; color: var(--ink-3); text-align: center; }
.ob-diff { display: flex; gap: 8px; flex-wrap: wrap; }
.ob-diff .chip {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: 8px;
  padding: 10px 12px;
  font: 600 13px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ob-diff .chip:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.ob-diff .chip.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(251, 191, 36, 0.1);
}
.ob-diff-note {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.4;
  min-height: 2.8em;
}
.ob-hard-warn {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(248, 113, 113, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #fca5a5;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.staff-pay-row .ico {
  width: 18px;
  height: 18px;
}
#ob-speed-wrap.hidden { display: none; }
.hidden { display: none !important; }

/* ---------- developer tools ---------- */
#sndbtn {
  position: fixed;
  left: 52px;
  bottom: 10px;
  z-index: 30;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(13, 27, 46, 0.7);
  border: 1px solid var(--line);
  font-size: 15px;
  cursor: pointer;
  opacity: 0.45;
}
#sndbtn:hover { opacity: 1; }
#devbtn {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 30;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(13, 27, 46, 0.7);
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 15px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s;
}
#devbtn:hover { opacity: 1; }

/* Dev cinematic mode — hide chrome; 🛠 stays so you can toggle back */
body.ui-chrome-off #topbar,
body.ui-chrome-off #sidebar,
body.ui-chrome-off #panel,
body.ui-chrome-off #sndbtn,
body.ui-chrome-off #airport-card,
body.ui-chrome-off #plane-card,
body.ui-chrome-off #route-card,
body.ui-chrome-off #report-card,
body.ui-chrome-off #notifs,
body.ui-chrome-off #tutorial,
body.ui-chrome-off #tut-spot {
  display: none !important;
}
body.ui-chrome-off #devbtn,
body.ui-chrome-off #devpanel {
  z-index: 80;
  opacity: 1;
}

#devpanel {
  position: fixed;
  left: 10px;
  bottom: 52px;
  z-index: 30;
  width: 220px;
  background: rgba(11, 22, 38, 0.97);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
#devpanel.hidden { display: none; }
.dev-title { font-size: 12px; font-weight: 700; color: var(--warn); margin-bottom: 2px; }
#devpanel .btn { width: 100%; text-align: left; }
.dev-time {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.dev-time-label { font-size: 11px; color: var(--ink-2); margin-bottom: 6px; }
.dev-time-label b { color: var(--gold); }
#dev-tod {
  width: 100%;
  accent-color: var(--gold);
  cursor: pointer;
}
.dev-time-marks {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--ink-3);
  margin-top: 2px;
}
.dev-time-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.dev-time-btns .btn { width: auto; flex: 1; text-align: center; padding: 4px 2px; font-size: 10px; }

/* ---------- phones & tablets ---------- */
@media (max-width: 900px) {
  /* Prevent iOS Safari zooming the page when focusing inputs */
  input, select, textarea { font-size: 16px !important; }

  #topbar {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 8px;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  main {
    top: 92px;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .brand { font-size: 15px; }
  .brand .airline-name { font-size: 12px; margin-left: 6px; max-width: 28vw; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
  .tb-ap-search { flex: 1 1 140px; min-width: 110px; max-width: none; order: 3; }
  .tb-ap-search input { padding: 8px 12px; font-size: 16px !important; }
  .tb-stats { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .pill { padding: 5px 10px; }
  .pill .sub { display: none; }
  .tb-mid { flex: 1 1 100%; max-width: none; order: 4; min-width: 0; }
  .tb-ticker { flex: 1 1 auto; max-width: none; font-size: 11px; }

  #sidebar {
    top: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    max-height: none;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 2px;
  }
  #sidebar button {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    justify-content: center;
    flex: 0 0 auto;
  }
  #sidebar button .lbl { display: none; }
  #sidebar button .ico { width: 22px; height: 22px; }

  #panel,
  #panel.panel-wide {
    top: 8px;
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    max-width: none;
    bottom: calc(62px + env(safe-area-inset-bottom));
    border-radius: 12px;
  }
  #tutorial,
  #tutorial.tut-left {
    left: 10px;
    right: 10px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    max-width: none;
  }

  /* tutorial card sits above the bottom nav, never over it */
  #tutorial {
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
    bottom: calc(70px + env(safe-area-inset-bottom));
    max-width: none;
  }

  #airport-card, #plane-card, #route-card {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    top: 8px;
    width: auto;
    max-width: none;
    max-height: min(55dvh, calc(100dvh - 160px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hub-fac-grid { grid-template-columns: 1fr; }
  #plane-card.has-pax,
  #plane-card.has-route,
  #plane-card.has-heli {
    width: auto;
    max-height: min(70dvh, calc(100dvh - 140px));
  }

  #report-card {
    left: max(8px, env(safe-area-inset-left));
    bottom: calc(62px + env(safe-area-inset-bottom));
    width: min(280px, calc(100vw - 100px));
    max-width: calc(100vw - 24px);
    max-height: min(28dvh, 220px);
  }
  body.has-report #plane-card {
    max-height: min(52dvh, calc(100dvh - 160px - min(28dvh, 220px)));
  }

  #sndbtn, #devbtn {
    bottom: calc(62px + env(safe-area-inset-bottom));
  }
  #devpanel {
    bottom: calc(104px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
  }

  #notifs { max-height: none; }

  #pax-view {
    left: 10px;
    top: auto;
    bottom: calc(70px + env(safe-area-inset-bottom));
    transform: none;
  }
  .pax-stage { width: min(200px, 46vw); }

  .ob-box {
    max-height: calc(100dvh - 24px);
    padding: 22px 18px;
    margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .card-actions .btn { min-height: 40px; }
  .mini-btn { min-height: 36px; padding: 7px 10px; }
}

/* Phones in portrait — keep the chrome compact */
@media (max-width: 600px) {
  main { top: 108px; }
  .brand .airline-name { display: none; }
  .pill-fuel, .pill-co2 { display: none; } /* Fuel & CO₂ panel still has the full readouts */
  .pill-clock { font-size: 12px; padding: 5px 8px; }
  .tb-ap-search { flex-basis: 100%; max-width: none; order: 3; }
  #sidebar button { min-width: 40px; min-height: 40px; padding: 8px; }
  #panel-body { padding: 10px; }
  .buy-filter { flex-direction: column; }
  .buy-filter select { max-width: none; width: 100%; }
  .ap-controls { flex-direction: column; }
  .ap-controls select { max-width: none; width: 100%; }
  .hist-row { flex-wrap: wrap; gap: 4px 8px; }
  #panel.panel-wide .shop-grid,
  #panel.panel-wide .fin-grid,
  #panel.panel-wide .mkt-grid,
  .pack-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact desktop / large iPad — keep side panel from eating the globe */
@media (min-width: 901px) and (max-width: 1100px) {
  #panel { width: min(400px, calc(100vw - 210px)); max-width: calc(100vw - 210px); }
  #panel.panel-wide { width: min(560px, calc(100vw - 200px)); max-width: calc(100vw - 200px); }
  #sidebar button { min-height: 44px; }
}

/* flight report card */
#report-card {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 9;
  width: 300px;
  max-height: min(34vh, 280px);
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(16, 30, 50, 0.97), rgba(10, 20, 36, 0.97));
  border: 1px solid rgba(140, 190, 240, 0.2);
  border-top: 2px solid rgba(255, 201, 77, 0.55);
  border-radius: 12px;
  padding: 9px 13px 11px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48);
}
#report-card.hidden { display: none; }
#report-card.rep-pop { animation: reportIn 0.32s ease; }
@keyframes reportIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
#report-card h3 { font-size: 13px; color: var(--gold); margin-bottom: 1px; padding-right: 0; }
#report-card .close-x { position: static; top: auto; right: auto; flex-shrink: 0; }
#report-card .muted.mini { font-size: 11px; }
.rep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -2px 0 4px;
  min-height: 28px;
}
.rep-head .rep-nav {
  flex: 1;
  margin-bottom: 0;
  min-width: 0;
}
.rep-grid { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; font-size: 12px; margin-top: 4px; }
.rep-grid span:nth-child(odd) { color: var(--ink-3); }
.rep-grid b { font-variant-numeric: tabular-nums; }
.rep-tabs {
  display: flex;
  gap: 4px;
  margin: 6px 0 2px;
}
.rep-tabs button {
  flex: 1;
  min-height: 24px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 650;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-2);
  cursor: pointer;
}
.rep-tabs button.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(251, 191, 36, 0.12);
}
body.has-report #plane-card {
  max-height: calc(100vh - 16px - 12px - min(32vh, 260px) - 20px);
}
.cargo-type-tip { cursor: help; white-space: nowrap; }

.pill-pausebtn { cursor: pointer; color: var(--ink); font-size: 13px; }
.pill-pausebtn:hover { border-color: var(--accent); }

/* ---------- passenger window view (side widget — does not block the globe) ---------- */
#pax-view {
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  display: block;
  pointer-events: none;
  background: none;
}
#pax-view.hidden { display: none; }
.pax-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  padding: 8px 10px 10px;
  background: rgba(11, 22, 38, 0.88);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.pax-stage {
  position: relative;
  width: min(280px, 32vw);
  aspect-ratio: 1;
  background: transparent;
  /* glass opening measured from window-frame.png (350²): 109,67 → 259,278 */
}
.pax-glass {
  position: absolute;
  left: 31.14%;
  top: 19.14%;
  width: 43.14%;
  height: 60.57%;
  border-radius: 42% / 22%;
  overflow: hidden;
  z-index: 1;
  background: #0a121c;
}
.pax-glass.pax-scene-in {
  animation: pax-scene-in 0.55s ease;
}
@keyframes pax-scene-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.pax-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 3;
  pointer-events: none;
  user-select: none;
}
.pax-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.pax-layer.bg { z-index: 1; }

/* daytime cruise — drifting cartoon clouds */
.pax-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.pax-sky-clouds {
  background: #8edafe;
}
/* Day sky plate — seamless scroll (tile + mirrored tile via CSS flip) */
.pax-day-band {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.pax-day-band.far {
  top: -8%;
  height: 110%;
  opacity: 0.55;
  filter: blur(0.4px) saturate(0.95);
  z-index: 1;
}
.pax-day-band.near {
  top: 0;
  height: 100%;
  opacity: 1;
  z-index: 2;
}
.pax-day-track {
  display: flex;
  width: 200%;
  height: 100%;
  will-change: transform;
}
.pax-day-band.far .pax-day-track {
  animation: pax-day-drift 70s linear infinite;
}
.pax-day-band.near .pax-day-track {
  animation: pax-day-drift 38s linear infinite;
}
.pax-day-track img {
  display: block;
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  flex: 0 0 50%;
}
.pax-day-track img:nth-child(2) {
  transform: scaleX(-1);
}
@keyframes pax-day-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .pax-day-band .pax-day-track { animation: none; }
}
.pax-sky-stars {
  background: linear-gradient(#1a2370 0%, #3949ab 40%, #5c6bc0 70%, #7e57c2 100%);
}
.pax-sky-stars .pax-cloud-band.far {
  top: 0;
  height: 100%;
  opacity: 0.7;
}
.pax-sky-stars .pax-cloud-band.near {
  top: 0;
  height: 100%;
  opacity: 1;
}
.pax-sky-stars .pax-cloud-band.far .pax-cloud-track {
  animation-duration: 80s;
}
.pax-sky-stars .pax-cloud-band.near .pax-cloud-track {
  animation-duration: 36s;
}
.pax-sky-stars .pax-cloud-band.near .pax-cloud-track img {
  object-position: center bottom;
}
.pax-sky-sunset {
  background: #3a1a4a;
}
.pax-sunset-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}
.pax-sky-sunset .pax-cloud-band {
  z-index: 2;
}
.pax-sky-sunset .pax-cloud-band.far {
  top: 0;
  height: 75%;
  opacity: 0.9;
}
.pax-sky-sunset .pax-cloud-band.near {
  top: 8%;
  height: 90%;
  opacity: 1;
}
.pax-sky-sunset .pax-cloud-band.far .pax-cloud-track {
  animation-duration: 70s;
}
.pax-sky-sunset .pax-cloud-band.near .pax-cloud-track {
  animation-duration: 38s;
}

/* daytime airport — static apron shot */
.pax-sky-airport {
  background: #9fd0e8;
}
.pax-airport-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

/* night airport — blinking lights only */
.pax-sky-airport-night {
  background: #1a0540;
}
.pax-airport-lights {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: pax-lights-pulse 1.8s ease-in-out infinite;
}
.pax-blink-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.pax-blink {
  position: absolute;
  bottom: 3.5%;
  width: 7px;
  height: 7px;
  margin-left: -3px;
  border-radius: 50%;
  background: #fff8c8;
  box-shadow: 0 0 8px 2px rgba(255, 240, 160, 0.85), 0 -6px 12px rgba(255, 220, 120, 0.35);
  animation: pax-blink 1.4s ease-in-out infinite;
}
.pax-blink-hi {
  bottom: auto;
  width: 5px;
  height: 5px;
  background: #ffe566;
  box-shadow: 0 0 6px 1px rgba(255, 220, 80, 0.9);
}
@keyframes pax-lights-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}
@keyframes pax-blink {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  40%      { opacity: 1; transform: scale(1.15); }
  60%      { opacity: 0.5; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pax-airport-lights, .pax-blink { animation: none !important; opacity: 0.8; }
}

.pax-cloud-band {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.pax-cloud-band.far {
  top: -4%;
  height: 70%;
  opacity: 0.85;
}
.pax-cloud-band.near {
  top: 18%;
  height: 85%;
  opacity: 1;
}
.pax-cloud-track {
  display: flex;
  width: 200%;
  height: 100%;
  will-change: transform;
}
.pax-cloud-band.far .pax-cloud-track {
  animation: pax-drift 55s linear infinite;
}
.pax-cloud-band.near .pax-cloud-track {
  animation: pax-drift 28s linear infinite;
}
.pax-sky-clouds .pax-cloud-band.near .pax-cloud-track {
  filter: saturate(1.05);
}
.pax-cloud-track img {
  display: block;
  width: 50%;
  height: 100%;
  object-fit: cover;
  flex: 0 0 50%;
}
.pax-cloud-track img:nth-child(2) {
  transform: scaleX(-1);
}
@keyframes pax-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .pax-cloud-band .pax-cloud-track { animation: none; }
  .pax-glass.pax-scene-in { animation: none; }
}
.pax-hud {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: min(280px, 32vw);
  padding: 2px 2px 0;
  color: #e8eef6;
  font-size: 11px;
  pointer-events: none;
}
.pax-hud b { color: #ffc94d; }
.pax-close {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 6;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  background: rgba(10, 18, 28, 0.75);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.pax-close:hover { border-color: #ffc94d; color: #ffc94d; }
.pax-badge {
  position: relative;
  align-self: flex-start;
  z-index: 6;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(232, 238, 246, 0.9);
  background: rgba(10, 18, 28, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 3px 8px;
  pointer-events: none;
}

/* full-width depart-all — same size, no glow */
.depart-all-btn {
  display: block;
  width: 100%;
  padding: 13px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.15px;
  margin-bottom: 10px;
}

.mkt-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin: 8px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(127, 212, 255, 0.08), rgba(251, 191, 36, 0.06));
  border: 1px solid var(--line);
}
.mkt-hero-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.mkt-hero-stat { font-size: 15px; margin: 4px 0 2px; }
.mkt-grid { display: grid; gap: 10px; margin-bottom: 14px; }
.mkt-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.mkt-card.is-live { border-color: rgba(74, 222, 128, 0.4); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.12); }
.mkt-card.is-dark { opacity: 0.62; }
.mkt-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 4px;
}
.mkt-title-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mkt-title-row h4 { margin: 0; font-size: 15px; }
.mkt-price { font-weight: 800; color: var(--gold); white-space: nowrap; }
.mkt-desc { margin: 6px 0 8px; font-size: 12.5px; color: var(--ink-3); }
.mkt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-bottom: 8px; }
.mkt-stats span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.mkt-stats b { font-size: 12.5px; }
.mkt-quote { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); }
.mkt-quote-bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.mkt-quote-bar i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.mkt-news, .mkt-live { font-size: 11.5px; margin-top: 6px; }
.mkt-live { color: var(--ok); }
.mkt-actions { margin-top: 10px; }

/* airport card photo */
.ap-photo { margin: 8px 0 2px; }
.ap-photo img {
  display: block;
  width: 100%;
  max-height: 118px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.ap-photo.ap-photo-cutout {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.ap-photo.ap-photo-cutout img {
  max-height: 168px;
  object-fit: contain;
  border: none;
  background: transparent;
}

/* lounge designer */
.lounge-grid {
  display: grid;
  gap: 2px;
  background: var(--lounge-floor, #2a3140);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
}
.lounge-grid-preview {
  pointer-events: none;
  margin: 8px 0 4px;
  max-width: 100%;
}
.lounge-grid-preview .lg-cell .ico,
.lounge-grid-preview .lg-cell .ui-ico,
.lounge-grid-preview .lg-cell .lg-furn {
  width: 82%;
  height: 82%;
}
.lounge-grid-preview .lg-cell {
  min-height: 0;
  cursor: default;
  pointer-events: none;
}
.lg-cell {
  aspect-ratio: 1;
  min-width: 0;
  background: color-mix(in srgb, var(--lounge-floor, #3a4254) 78%, #000 22%);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.lg-cell .lg-furn,
.lg-cell img.lg-furn,
.lounge-grid .lg-cell .ico,
.lounge-grid .lg-cell .ui-ico {
  width: 86% !important;
  height: 86% !important;
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.lounge-grid[data-tone="light"] .lg-cell {
  border-color: rgba(0, 0, 0, 0.16);
  background: color-mix(in srgb, var(--lounge-floor, #d8d4cc) 88%, #000 12%);
}
.lg-cell:hover { background: color-mix(in srgb, var(--lounge-floor, #3a4254) 55%, #ffc94d 45%); }
.lounge-grid-preview .lg-cell:hover { background: color-mix(in srgb, var(--lounge-floor, #3a4254) 78%, #000 22%); }
.lounge-grid[data-tone="light"] .lounge-grid-preview .lg-cell:hover,
.lounge-grid[data-tone="light"].lounge-grid-preview .lg-cell:hover {
  background: color-mix(in srgb, var(--lounge-floor, #d8d4cc) 88%, #000 12%);
}
.lg-cell.filled {
  border-style: solid;
  background: color-mix(in srgb, var(--lounge-floor, #3a4254) 62%, #fff 10%);
}
.lounge-grid[data-tone="light"] .lg-cell.filled {
  background: color-mix(in srgb, var(--lounge-floor, #d8d4cc) 72%, #fff 28%);
}
.floor-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.floor-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.floor-chip {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 7px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.floor-chip.active {
  border-color: var(--gold, #e8a833);
  box-shadow: 0 0 0 2px rgba(232, 168, 51, 0.35);
}
.lounge-palette { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.lounge-cat .brand-filter { margin-top: 2px; }
.hub-inspect-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px;
  margin: 8px 0 4px;
}
.hub-stat {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
.hub-stat .lbl {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hub-stat .val {
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
}
.hub-fac-card.hub-clickable { cursor: pointer; }
.hub-fac-card.hub-clickable:hover,
.hub-fac-card.hub-inspecting {
  border-color: var(--gold, #e8a833);
  box-shadow: 0 0 0 1px rgba(232, 168, 51, 0.28);
}
.hub-inspect {
  border-color: var(--gold, #e8a833);
  margin-bottom: 10px;
}
.card.hub-clickable { cursor: pointer; }
/* livery editor */
.livery-row { align-items: end; gap: 10px; }
.livery-row input[type="color"] { width: 42px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.logo-pick { margin: 8px 0 4px; }
.logo-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 8px;
}
.logo-chip {
  width: 44px; height: 44px; padding: 4px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #1a1d22; color: var(--ink-2);
  cursor: pointer; display: grid; place-items: center;
}
.logo-chip img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-chip span { font-size: 10px; }
.logo-chip.on { border-color: var(--gold, #c9a227); box-shadow: 0 0 0 1px var(--gold, #c9a227); }
.livery-preview { max-width: 340px; }
.lart-canvas { display: block; width: 100%; height: auto; padding: 8px 6px; box-sizing: border-box; }
.lart-canvas.lart-heli {
  width: auto;
  max-width: 220px;
  max-height: 180px;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 1;
  object-fit: contain;
}

/* per-plane flight logbook */
.hist-form { display: flex; flex-direction: column; gap: 2px; }
.hist-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid var(--line);
}
.hist-row:last-child { border-bottom: none; }
.hist-route { min-width: 96px; }
.hist-when { margin-left: auto; }

.charter-brief { font-style: italic; color: var(--ink-2); }

/* ChatGPT-style help desk */
.gpt-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: min(70vh, 640px);
}
.gpt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gpt-log {
  flex: 1;
  min-height: 280px;
  max-height: min(52vh, 480px);
  overflow-y: auto;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gpt-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 100%;
}
.gpt-row.gpt-user { flex-direction: row-reverse; }
.gpt-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.gpt-user .gpt-avatar {
  background: rgba(80, 140, 220, 0.25);
  border-color: rgba(120, 170, 240, 0.4);
  color: var(--ink);
}
.gpt-assistant .gpt-avatar {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
  color: var(--gold);
}
.gpt-bubble {
  max-width: min(92%, 420px);
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.gpt-user .gpt-bubble {
  background: rgba(80, 140, 220, 0.2);
  border-color: rgba(120, 170, 240, 0.35);
  color: var(--ink);
  border-bottom-right-radius: 4px;
}
.gpt-assistant .gpt-bubble {
  border-bottom-left-radius: 4px;
}
.gpt-assistant .gpt-bubble b { color: var(--gold); }
.gpt-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 72px;
  overflow-y: auto;
}
.help-chip { font-size: 11px; max-width: 100%; }
.gpt-composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}
.gpt-composer textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  border: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 6px;
  max-height: 120px;
  outline: none;
}
.gpt-send { flex-shrink: 0; min-width: 72px; }
.gpt-disclaimer {
  margin-top: 8px;
  line-height: 1.35;
  opacity: 0.85;
}
.gpt-disclaimer a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.help-topic-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.help-topic-link {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 6px;
}
.help-topic-link:hover { color: var(--gold); background: rgba(251, 191, 36, 0.06); }
.help-ask {
  display: flex;
  gap: 8px;
  align-items: center;
}
.help-ask input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.help-ask input:focus { outline: none; border-color: var(--accent); }

/* History log feed */
.log-feed {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(60vh, 560px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
}
.log-row {
  display: grid;
  grid-template-columns: 110px 52px 1fr;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  align-items: start;
}
.log-row:last-child { border-bottom: none; }
.log-time { color: var(--ink-3); white-space: nowrap; }
.log-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.log-msg { color: var(--ink-2); line-height: 1.4; }
.log-good .log-kind { color: var(--ok); }
.log-bad .log-kind { color: var(--bad); }
.log-money .log-kind { color: var(--gold); }
.log-good .log-msg { color: var(--ok); }
.log-bad .log-msg { color: var(--bad); }

@media (max-width: 700px) {
  .log-row { grid-template-columns: 1fr; gap: 2px; }
  .gpt-shell { min-height: 0; }
}

/* ---------- campaign landing v2 ---------- */
#landing .landing-hero {
  position: relative;
  min-height: 760px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  overflow: hidden;
  padding: 94px 68px;
  margin-top: 24px;
  border: 1px solid rgba(143, 206, 226, 0.18);
  background: #06101d;
}
#landing .landing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 13, 24, 0.98) 0%, rgba(5, 13, 24, 0.88) 33%, rgba(5, 13, 24, 0.2) 72%, rgba(5, 13, 24, 0.08) 100%),
    linear-gradient(0deg, rgba(5, 13, 24, 0.88) 0%, transparent 33%, rgba(5, 13, 24, 0.12) 100%);
}
.landing-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
#landing .landing-hero-copy { width: min(600px, 58%); z-index: 3; }
#landing .landing-hero h1 { font-size: clamp(60px, 6.4vw, 92px); text-shadow: 0 3px 28px rgba(0, 0, 0, 0.45); }
#landing .landing-lede { max-width: 570px; color: #c3ced8; font-size: 18px; }
.landing-zero-friction { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; color: #dce5ec; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.landing-zero-friction span { display: inline-flex; align-items: center; gap: 5px; }
#landing .landing-proof { max-width: 570px; margin-top: 31px; padding-top: 20px; }
#landing .landing-hero-visual { position: absolute; inset: 0; z-index: 4; min-height: 0; pointer-events: none; }
#landing .landing-hero-visual::before, #landing .landing-hero-visual::after { display: none; }
#landing .landing-flight-card { right: 34px; bottom: 32px; }
#landing .landing-status-card { left: auto; right: 34px; top: 30px; }
#landing .landing-strip { margin-top: 0; }
.landing-primary:focus-visible, .landing-nav-cta:focus-visible, #landing a:focus-visible, .landing-faq summary:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.landing-how { scroll-margin-top: 40px; padding: 0 0 120px; }
.landing-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 1px; background: rgba(255,255,255,.12); }
.landing-steps li { min-height: 220px; position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 24px 18px; padding: 30px; background: #0b1825; }
.landing-steps li > span { position: absolute; right: 24px; top: 22px; color: #536477; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.landing-steps img { width: 30px; height: 30px; padding: 6px; border-radius: 6px; background: var(--landing-lime); filter: brightness(.18); }
.landing-steps div { grid-column: 1 / -1; align-self: end; }
.landing-steps h3 { color: #fff; font-size: 19px; margin-bottom: 10px; }
.landing-steps p { color: #8796a8; font-size: 13px; line-height: 1.65; }

.landing-depth { padding-bottom: 120px; }
.landing-depth-intro { max-width: 720px; margin-bottom: 38px; }
.landing-depth-intro h2, .landing-faq h2 { color: #f6f5ef; font: 720 clamp(36px,4vw,58px)/1.02 "Segoe UI",system-ui,sans-serif; letter-spacing: -.045em; margin: 13px 0 18px; }
.landing-depth-intro p, .landing-faq-head p { color: #91a0b1; font-size: 15px; line-height: 1.7; }
.landing-depth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.landing-depth-grid article { min-height: 190px; padding: 26px; border: 1px solid rgba(255,255,255,.1); background: rgba(10,25,38,.76); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.landing-depth-grid article:hover { transform: translateY(-3px); border-color: rgba(201,255,73,.32); background: rgba(14,34,48,.92); }
.landing-depth-grid img { width: 25px; height: 25px; object-fit: contain; margin-bottom: 30px; }
.landing-depth-grid span { display: block; color: #fff; font-size: 16px; font-weight: 750; margin-bottom: 9px; }
.landing-depth-grid p { color: #8292a3; font-size: 12px; line-height: 1.65; }

.landing-faq { scroll-margin-top: 40px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; padding: 92px 70px; margin-bottom: 120px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(135deg, rgba(17,39,52,.86), rgba(7,18,29,.94)); }
.landing-faq-head { align-self: start; position: sticky; top: 24px; }
.landing-faq-list { border-top: 1px solid rgba(255,255,255,.13); }
.landing-faq details { border-bottom: 1px solid rgba(255,255,255,.13); }
.landing-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; color: #f4f5ef; font-size: 15px; font-weight: 730; }
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary span { color: var(--landing-lime); font-size: 22px; font-weight: 400; transition: transform .2s ease; }
.landing-faq details[open] summary span { transform: rotate(45deg); }
.landing-faq details p { max-width: 650px; padding: 0 42px 22px 0; color: #91a0b1; font-size: 13px; line-height: 1.72; }
.landing-footer a:not(.landing-brand) { color: #91a0b1; text-decoration: none; }
.landing-footer a:not(.landing-brand):hover { color: #fff; }

@media (max-width: 960px) {
  #landing .landing-hero { padding: 72px 46px; }
  #landing .landing-hero-copy { width: min(620px, 72%); }
  #landing .landing-hero::after { background: linear-gradient(90deg, rgba(5,13,24,.96), rgba(5,13,24,.64) 64%, rgba(5,13,24,.15)), linear-gradient(0deg, rgba(5,13,24,.9), transparent 48%); }
  .landing-steps { grid-template-columns: 1fr; }
  .landing-steps li { min-height: 170px; }
  .landing-depth-grid { grid-template-columns: 1fr 1fr; }
  .landing-faq { grid-template-columns: 1fr; gap: 38px; padding: 58px 48px; }
  .landing-faq-head { position: static; }
}
@media (max-width: 650px) {
  #landing .landing-hero { min-height: 780px; padding: 54px 24px 175px; margin-top: 12px; align-items: start; }
  #landing .landing-hero-art { object-position: 62% center; }
  #landing .landing-hero::after { background: linear-gradient(90deg, rgba(5,13,24,.92), rgba(5,13,24,.48)), linear-gradient(0deg, rgba(5,13,24,.98) 0%, rgba(5,13,24,.72) 46%, rgba(5,13,24,.18) 100%); }
  #landing .landing-hero-copy { width: 100%; }
  #landing .landing-hero h1 { font-size: clamp(46px, 14vw, 64px); }
  #landing .landing-lede { font-size: 15px; line-height: 1.62; }
  #landing .landing-flight-card { left: 20px; right: 20px; bottom: 20px; width: auto; }
  #landing .landing-status-card { display: none; }
  #landing .landing-proof { gap: 10px; }
  #landing .landing-proof div { flex: 1; }
  .landing-zero-friction { gap: 10px 15px; }
  .landing-how, .landing-depth { padding-bottom: 80px; }
  .landing-steps li { padding: 24px; }
  .landing-depth-grid { grid-template-columns: 1fr; }
  .landing-depth-grid article { min-height: 165px; }
  .landing-faq { margin-inline: -14px; margin-bottom: 80px; padding: 42px 20px; }
  .landing-faq summary { font-size: 13px; }
}

/* ---------- landing v3: airline operations editorial ---------- */
#landing {
  --landing-paper: #edf3f1;
  --landing-ink: #15191c;
  --landing-muted: #5d6265;
  --landing-rule: #b9cbc7;
  --landing-accent: #08776f;
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--landing-ink);
  background: var(--landing-paper);
  font-family: "Barlow", "Arial Narrow", sans-serif;
  scroll-behavior: smooth;
}
#landing::before { display: none; }
#landing.landing-exit { opacity: 0; pointer-events: none; }
#landing.hidden { display: none !important; }
#landing *, #landing *::before, #landing *::after { box-sizing: border-box; }
#landing a, #landing button { -webkit-tap-highlight-color: transparent; }
#landing a:focus-visible, #landing button:focus-visible, #landing summary:focus-visible { outline: 3px solid var(--landing-accent); outline-offset: 4px; }

#landing .landing-nav,
#landing .landing-main,
#landing .landing-footer {
  width: min(1440px, calc(100% - 64px));
  margin-inline: auto;
}
#landing .landing-nav {
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 38px;
  border-bottom: 1px solid var(--landing-ink);
}
#landing .landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--landing-ink);
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.04em;
}
#landing .landing-brand img { width: 24px; height: 24px; filter: brightness(0); }
#landing .landing-nav-links { display: flex; align-items: center; gap: 28px; }
#landing .landing-nav-links a {
  color: var(--landing-ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}
#landing .landing-nav-links a:hover { color: var(--landing-accent); }
#landing .landing-button {
  appearance: none;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 20px;
  border: 1px solid var(--landing-accent);
  border-radius: 1px;
  background: var(--landing-accent);
  color: #fff;
  font: 800 13px/1 Arial, "Helvetica Neue", sans-serif;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
#landing .landing-button:hover { background: #055d59; transform: translateY(-1px); }
#landing .landing-button-small { min-height: 38px; min-width: 94px; padding-inline: 15px; }

#landing .landing-main { position: static; inset: auto; }
#landing .landing-hero {
  min-height: 670px;
  display: grid;
  grid-template-columns: minmax(310px, .78fr) minmax(520px, 1.22fr);
  align-items: center;
  gap: 6vw;
  padding: 72px 0 62px;
  margin: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
#landing .landing-hero::after { display: none; }
#landing .landing-hero-copy { position: relative; z-index: 1; width: auto; }
#landing .landing-category,
#landing .landing-section-intro > p,
#landing .landing-fleet-copy > p:first-child,
#landing .landing-world-copy > p:first-child,
#landing .landing-faq-head > p,
#landing .landing-final > p {
  margin: 0 0 24px;
  color: var(--landing-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.3;
  text-transform: uppercase;
}
#landing .landing-hero h1 {
  max-width: 650px;
  margin: 0;
  color: var(--landing-ink);
  font: 800 clamp(54px, 6.2vw, 88px)/.92 Arial, "Helvetica Neue", sans-serif;
  letter-spacing: -.075em;
  text-shadow: none;
}
#landing .landing-lede {
  max-width: 480px;
  margin: 30px 0 0;
  color: var(--landing-muted);
  font-size: 18px;
  line-height: 1.55;
}
#landing .landing-actions { display: flex; align-items: center; gap: 20px; margin-top: 34px; }
#landing .landing-actions > span { max-width: 190px; color: var(--landing-muted); font-size: 11px; line-height: 1.45; }
#landing .landing-product-shot { position: relative; margin: 0; padding: 0 0 42px 42px; }
#landing .landing-product-shot::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34%;
  height: 55%;
  background: var(--landing-accent);
}
#landing .landing-product-shot img { position: relative; z-index: 1; width: 100%; height: auto; display: block; border: 1px solid #0c1724; }
#landing .landing-product-shot figcaption {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 0;
  min-width: 250px;
  padding: 13px 16px;
  display: grid;
  gap: 3px;
  background: var(--landing-paper);
  border-top: 1px solid var(--landing-ink);
}
#landing .landing-product-shot figcaption span { color: var(--landing-accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
#landing .landing-product-shot figcaption b { font-size: 11px; line-height: 1.35; }

#landing .landing-proof {
  min-height: 126px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--landing-ink);
  border-bottom: 1px solid var(--landing-ink);
}
#landing .landing-proof > p { max-width: 200px; font-size: 20px; font-weight: 800; line-height: 1.05; letter-spacing: -.04em; }
#landing .landing-proof dl { display: grid; grid-template-columns: repeat(3, 1fr); }
#landing .landing-proof dl div { min-height: 74px; display: grid; align-content: center; gap: 5px; padding-left: 30px; border-left: 1px solid var(--landing-rule); }
#landing .landing-proof dt { font-size: 25px; font-weight: 800; letter-spacing: -.05em; }
#landing .landing-proof dd { color: var(--landing-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

#landing .landing-how,
#landing .landing-control,
#landing .landing-faq { scroll-margin-top: 24px; padding: 118px 0; }
#landing .landing-how { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; }
#landing .landing-section-intro h2,
#landing .landing-fleet h2,
#landing .landing-world h2,
#landing .landing-faq h2,
#landing .landing-final h2 {
  max-width: 800px;
  margin: 0;
  color: var(--landing-ink);
  font: 800 clamp(40px, 5vw, 68px)/.98 Arial, "Helvetica Neue", sans-serif;
  letter-spacing: -.065em;
}
#landing .landing-decision-list { border-top: 1px solid var(--landing-ink); }
#landing .landing-decision-list article {
  min-height: 112px;
  display: grid;
  grid-template-columns: .42fr 1fr;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--landing-rule);
}
#landing .landing-decision-list h3 { font-size: 26px; letter-spacing: -.04em; }
#landing .landing-decision-list p { max-width: 480px; color: var(--landing-muted); font-size: 14px; line-height: 1.6; }

#landing .landing-fleet {
  scroll-margin-top: 24px;
  min-height: 690px;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  align-items: stretch;
  background: #d8e7e3;
  border-top: 1px solid var(--landing-ink);
  border-bottom: 1px solid var(--landing-ink);
}
#landing .landing-fleet-copy { padding: 84px 6vw 84px 0; }
#landing .landing-fleet-copy > p:not(:first-child) { max-width: 470px; margin: 30px 0 0; color: var(--landing-muted); font-size: 15px; line-height: 1.7; }
#landing .landing-fleet-copy > a { display: inline-flex; gap: 12px; margin-top: 34px; color: var(--landing-ink); font-size: 12px; font-weight: 800; text-decoration: none; border-bottom: 1px solid var(--landing-ink); padding-bottom: 5px; }
#landing .landing-hangar { position: relative; min-height: 690px; overflow: hidden; border-left: 1px solid var(--landing-ink); background: #e4eeec; }
#landing .landing-hangar::before { content: ""; position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(90deg, transparent 49.8%, #b8b6b0 50%, transparent 50.2%), linear-gradient(#b8b6b0 1px, transparent 1px); background-size: 34% 100%, 100% 25%; }
#landing .landing-aircraft { position: absolute; display: grid; gap: 4px; }
#landing .landing-aircraft img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(.08) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.38));
  transition: transform .18s ease;
}
#landing .landing-aircraft:hover img { transform: translateX(6px); }
#landing .landing-aircraft span { justify-self: end; padding: 5px 8px; background: var(--landing-ink); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
#landing .aircraft-wide { width: 75%; top: 10%; right: 4%; }
#landing .aircraft-narrow { width: 57%; top: 42%; left: 7%; }
#landing .aircraft-heavy { width: 68%; bottom: 2%; right: -3%; }

#landing .landing-control { display: grid; grid-template-columns: .54fr 1.46fr; gap: 8vw; }
#landing .landing-control-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--landing-ink); }
#landing .landing-control-grid article { min-height: 160px; display: grid; grid-template-columns: 34px 1fr; align-content: center; column-gap: 18px; padding: 26px 22px 26px 0; border-bottom: 1px solid var(--landing-rule); }
#landing .landing-control-grid article:nth-child(odd) { border-right: 1px solid var(--landing-rule); }
#landing .landing-control-grid article:nth-child(even) { padding-left: 24px; }
#landing .landing-control-grid img { grid-row: 1 / 3; width: 28px; height: 28px; object-fit: contain; filter: grayscale(1) brightness(.3); }
#landing .landing-control-grid h3 { font-size: 18px; letter-spacing: -.03em; }
#landing .landing-control-grid p { margin-top: 8px; color: var(--landing-muted); font-size: 12px; line-height: 1.5; }

#landing .landing-world {
  scroll-margin-top: 24px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 0;
  align-items: stretch;
  margin: 0;
  padding: 0;
  background: #d8e7e3;
  color: var(--landing-ink);
  border-top: 1px solid var(--landing-ink);
  border-bottom: 1px solid var(--landing-ink);
}
#landing .landing-world-image { position: relative; min-height: 650px; margin: 0; overflow: hidden; }
#landing .landing-world-image img { width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(.2) contrast(1.05); }
#landing .landing-world-image figcaption { position: absolute; left: 18px; bottom: 18px; max-width: 360px; padding: 9px 11px; background: rgba(21,25,28,.88); color: #fff; font-size: 9px; line-height: 1.4; }
#landing .landing-world-copy { padding: 82px 5.5vw; }
#landing .landing-world h2 { color: var(--landing-ink); }
#landing .landing-world-copy > p:not(:first-child) { margin-top: 30px; color: var(--landing-muted); font-size: 15px; line-height: 1.7; }
#landing .landing-world-copy ul { list-style: none; margin-top: 38px; border-top: 1px solid var(--landing-ink); }
#landing .landing-world-copy li { padding: 17px 0; border-bottom: 1px solid #9db8b3; color: var(--landing-ink); font-size: 12px; font-weight: 700; }

#landing .landing-faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8vw; margin: 0; background: transparent; border: 0; }
#landing .landing-faq-head { position: static; }
#landing .landing-faq-list { border-top: 1px solid var(--landing-ink); }
#landing .landing-faq details { border-bottom: 1px solid var(--landing-rule); }
#landing .landing-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; color: var(--landing-ink); font-size: 15px; font-weight: 800; }
#landing .landing-faq summary::-webkit-details-marker { display: none; }
#landing .landing-faq summary span { color: var(--landing-accent); font-size: 24px; font-weight: 400; transition: transform .15s ease; }
#landing .landing-faq details[open] summary span { transform: rotate(45deg); }
#landing .landing-faq details p { max-width: 670px; padding: 0 50px 22px 0; color: var(--landing-muted); font-size: 13px; line-height: 1.7; }

#landing .landing-final {
  min-height: 330px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  align-items: end;
  column-gap: 50px;
  margin: 0;
  padding: 68px 7vw;
  background: var(--landing-accent);
  border: 0;
  color: #fff;
}
#landing .landing-final > p { grid-column: 1 / -1; color: #fff; opacity: .78; }
#landing .landing-final h2 { max-width: 760px; color: #fff; }
#landing .landing-button-inverse { min-width: 150px; border-color: #fff; background: #fff; color: var(--landing-accent); }
#landing .landing-button-inverse:hover { background: transparent; color: #fff; }
#landing .landing-footer { min-height: 110px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 28px; border-top: 0; color: var(--landing-muted); font-size: 10px; }
#landing .landing-footer p { margin: 0; }
#landing .landing-footer nav { display: flex; gap: 18px; }
#landing .landing-footer nav a { color: var(--landing-muted); text-decoration: none; }
#landing .landing-footer nav a:hover { color: var(--landing-accent); }

@media (max-width: 980px) {
  #landing .landing-nav, #landing .landing-main, #landing .landing-footer { width: min(100% - 40px, 1440px); }
  #landing .landing-nav-links { display: none; }
  #landing .landing-nav { grid-template-columns: 1fr auto; }
  #landing .landing-hero { grid-template-columns: 1fr; gap: 54px; }
  #landing .landing-hero-copy { max-width: 680px; }
  #landing .landing-product-shot { margin-left: 8vw; }
  #landing .landing-how, #landing .landing-control, #landing .landing-faq { grid-template-columns: 1fr; gap: 50px; }
  #landing .landing-fleet { grid-template-columns: 1fr; }
  #landing .landing-fleet-copy { padding-right: 0; }
  #landing .landing-hangar { border-left: 0; border-top: 1px solid var(--landing-ink); }
  #landing .landing-world { grid-template-columns: 1fr; }
  #landing .landing-world-image { min-height: 520px; }
}

@media (max-width: 640px) {
  #landing .landing-nav, #landing .landing-main, #landing .landing-footer { width: min(100% - 28px, 1440px); }
  #landing .landing-nav { min-height: 66px; }
  #landing .landing-brand { font-size: 16px; }
  #landing .landing-button-small { min-height: 36px; min-width: 84px; }
  #landing .landing-hero { min-height: auto; padding: 58px 0 48px; gap: 42px; }
  #landing .landing-hero h1 { font-size: clamp(50px, 17vw, 72px); }
  #landing .landing-lede { font-size: 16px; }
  #landing .landing-actions { align-items: flex-start; flex-direction: column; }
  #landing .landing-product-shot { margin-left: 0; padding: 0 0 30px 18px; }
  #landing .landing-product-shot::before { width: 42%; height: 65%; }
  #landing .landing-product-shot figcaption { right: 8px; min-width: 210px; }
  #landing .landing-proof { grid-template-columns: 1fr; gap: 22px; padding: 30px 0; }
  #landing .landing-proof dl { grid-template-columns: 1fr; }
  #landing .landing-proof dl div { min-height: 58px; grid-template-columns: 90px 1fr; align-items: center; align-content: center; border-left: 0; border-top: 1px solid var(--landing-rule); padding-left: 0; }
  #landing .landing-proof dl div:last-child { border-bottom: 1px solid var(--landing-rule); }
  #landing .landing-how, #landing .landing-control, #landing .landing-faq { padding: 82px 0; }
  #landing .landing-section-intro h2, #landing .landing-fleet h2, #landing .landing-world h2, #landing .landing-faq h2, #landing .landing-final h2 { font-size: clamp(40px, 13vw, 56px); }
  #landing .landing-decision-list article { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  #landing .landing-fleet-copy { padding: 72px 0; }
  #landing .landing-hangar { min-height: 520px; }
  #landing .landing-control-grid { grid-template-columns: 1fr; }
  #landing .landing-control-grid article:nth-child(odd) { border-right: 0; }
  #landing .landing-control-grid article:nth-child(even) { padding-left: 0; }
  #landing .landing-world-image { min-height: 420px; }
  #landing .landing-world-copy { padding: 64px 24px; }
  #landing .landing-final { min-height: 390px; grid-template-columns: 1fr; gap: 34px; padding: 54px 24px; }
  #landing .landing-final > p { grid-column: auto; margin-bottom: -12px; }
  #landing .landing-button-inverse { justify-self: start; }
  #landing .landing-footer { grid-template-columns: 1fr auto; gap: 16px; padding: 28px 0; }
  #landing .landing-footer p { grid-column: 1 / -1; }
  #landing .landing-footer > span { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  #landing { scroll-behavior: auto; }
  #landing .landing-button, #landing .landing-aircraft img, #landing .landing-faq summary span { transition: none; }
}

/* ---------- landing v4: FlightRealm oceanic operations sphere ---------- */
@font-face {
  font-family: "Barlow";
  src: url("../assets/fonts/barlow-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../assets/fonts/barlow-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../assets/fonts/barlow-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

#landing {
  --landing-paper: #061a27;
  --landing-surface: #0a2734;
  --landing-surface-2: #0d3340;
  --landing-ink: #edf9f6;
  --landing-muted: #9bb3b1;
  --landing-rule: #28505d;
  --landing-accent: #55d8aa;
  --landing-blue: #2d91b8;
  background: var(--landing-paper);
  color: var(--landing-ink);
  font-family: "Barlow", "Arial Narrow", sans-serif;
  scrollbar-color: var(--landing-accent) #06131d;
  scrollbar-width: thin;
}
#landing ::selection { background: var(--landing-accent); color: #04151d; }
#landing::-webkit-scrollbar { width: 10px; }
#landing::-webkit-scrollbar-track { background: #06131d; }
#landing::-webkit-scrollbar-thumb { background: #287b77; border: 2px solid #06131d; }
#landing .landing-main { width: 100%; margin: 0; }
#landing .landing-nav,
#landing .landing-footer { width: min(1440px, calc(100% - 64px)); }

#landing .landing-nav {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: rgba(197, 231, 226, .25);
}
#landing .landing-brand,
#landing .landing-nav-links a { color: var(--landing-ink); }
#landing .landing-brand img { filter: invert(92%) sepia(14%) saturate(239%) hue-rotate(111deg) brightness(105%); }
#landing .landing-nav-links a:hover { color: var(--landing-accent); }
#landing .landing-button {
  border-color: var(--landing-accent);
  background: var(--landing-accent);
  color: #041820;
  font-family: "Barlow", sans-serif;
  letter-spacing: .015em;
}
#landing .landing-button:hover { background: #78e4bd; }

#landing .landing-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: block;
  margin: 0;
  padding: clamp(132px, 17vh, 190px) max(32px, calc((100vw - 1376px) / 2)) 92px;
  overflow: hidden;
  background: #061a27;
}
#landing .landing-hero-copy {
  position: relative;
  z-index: 6;
  width: min(620px, 44vw);
}
#landing .landing-hero h1 {
  max-width: 620px;
  color: var(--landing-ink);
  font-family: "Barlow", sans-serif;
  font-size: clamp(60px, 6.6vw, 96px);
  font-weight: 800;
  line-height: .91;
  letter-spacing: -.035em;
}
#landing .landing-hero h1 span { display: block; white-space: nowrap; }
#landing .landing-lede {
  max-width: 500px;
  color: #b9cecb;
  font-size: 18px;
  line-height: 1.55;
}
#landing .landing-actions > span { color: #8fa9a7; }

#landing .landing-globe-stage {
  position: absolute;
  z-index: 1;
  top: 76px;
  right: 0;
  bottom: 0;
  width: 72%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
#landing .landing-globe-stage.is-dragging { cursor: grabbing; }
#landing .landing-globe-canvas,
#landing .landing-globe-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#landing .landing-globe-canvas { z-index: 2; }
#landing .landing-globe-fallback {
  z-index: 1;
  object-fit: cover;
  object-position: 64% center;
  opacity: .62;
  filter: saturate(.78) hue-rotate(8deg) brightness(.72);
  transition: opacity .5s ease;
}
#landing .landing-globe-stage.is-ready .landing-globe-fallback { opacity: 0; }
#landing .landing-globe-labels { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
#landing .landing-airport-label {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 106px;
  display: grid;
  gap: 1px;
  padding: 7px 10px 8px;
  border: 1px solid rgba(133, 220, 193, .42);
  border-radius: 0;
  background: rgba(4, 22, 31, .9);
  color: var(--landing-ink);
  text-align: left;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: center bottom;
}
#landing .landing-airport-label[hidden] { display: none !important; }
#landing .landing-airport-label::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 16px;
  background: var(--landing-accent);
}
#landing .landing-airport-label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 16px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--landing-accent);
  transform: translate(-50%, -50%);
}
#landing .landing-airport-label[data-placement="below"] { transform-origin: center top; }
#landing .landing-airport-label[data-placement="below"]::before {
  top: auto;
  bottom: 100%;
}
#landing .landing-airport-label[data-placement="below"]::after {
  top: auto;
  bottom: calc(100% + 16px);
  transform: translate(-50%, 50%);
}
#landing .landing-airport-label strong {
  color: var(--landing-accent);
  font-size: 19px;
  line-height: 1;
  letter-spacing: .05em;
}
#landing .landing-airport-label span {
  overflow: hidden;
  color: #d8e8e5;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#landing .landing-airport-label:hover,
#landing .landing-airport-label.is-active,
#landing .landing-airport-label:focus-visible {
  border-color: var(--landing-accent);
  background: var(--landing-accent);
  color: #041820;
}
#landing .landing-airport-label:hover strong,
#landing .landing-airport-label:hover span,
#landing .landing-airport-label.is-active strong,
#landing .landing-airport-label.is-active span,
#landing .landing-airport-label:focus-visible strong,
#landing .landing-airport-label:focus-visible span { color: #041820; }

#landing .landing-globe-readout {
  position: absolute;
  z-index: 7;
  right: max(32px, calc((100vw - 1376px) / 2));
  bottom: 62px;
  width: min(350px, 30vw);
  padding-top: 16px;
  border-top: 1px solid rgba(193, 228, 222, .48);
}
#landing .landing-globe-readout span { display: block; margin-bottom: 7px; color: var(--landing-accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
#landing .landing-globe-readout strong { display: block; color: var(--landing-ink); font-size: 24px; line-height: 1.08; }
#landing .landing-globe-readout p { margin-top: 8px; color: #8fa9a7; font-size: 12px; }
#landing .landing-globe-help {
  position: absolute;
  z-index: 7;
  left: max(32px, calc((100vw - 1376px) / 2));
  bottom: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #92aaa8;
  font-size: 11px;
  font-weight: 700;
}
#landing .landing-globe-help span { color: var(--landing-accent); font-size: 18px; }

#landing .landing-proof,
#landing .landing-how,
#landing .landing-control,
#landing .landing-faq {
  width: min(1376px, calc(100% - 64px));
  margin-inline: auto;
}
#landing .landing-proof { border-color: var(--landing-rule); }
#landing .landing-proof dl div { border-left-color: var(--landing-rule); }
#landing .landing-proof dd,
#landing .landing-decision-list p,
#landing .landing-control-grid p,
#landing .landing-faq details p { color: var(--landing-muted); }
#landing .landing-section-intro h2,
#landing .landing-fleet h2,
#landing .landing-world h2,
#landing .landing-faq h2,
#landing .landing-final h2 {
  color: var(--landing-ink);
  font-family: "Barlow", sans-serif;
  letter-spacing: -.03em;
}
#landing .landing-decision-list,
#landing .landing-control-grid,
#landing .landing-faq-list { border-top-color: var(--landing-ink); }
#landing .landing-decision-list article,
#landing .landing-control-grid article,
#landing .landing-faq details { border-bottom-color: var(--landing-rule); }

#landing .landing-fleet {
  background: var(--landing-surface);
  border-color: var(--landing-rule);
  padding-left: max(32px, calc((100vw - 1376px) / 2));
}
#landing .landing-fleet-copy { padding-right: 6vw; }
#landing .landing-fleet-copy > p:not(:first-child),
#landing .landing-world-copy > p:not(:first-child) { color: var(--landing-muted); }
#landing .landing-fleet-copy > a { color: var(--landing-ink); border-bottom-color: var(--landing-accent); }
#landing .landing-hangar { background: var(--landing-surface-2); border-color: var(--landing-rule); }
#landing .landing-hangar::before { background-image: none; }
#landing .landing-aircraft span { background: var(--landing-accent); color: #041820; }

#landing .landing-control-grid article:nth-child(odd) { border-right-color: var(--landing-rule); }
#landing .landing-control-grid img { filter: grayscale(1) brightness(0) invert(88%) sepia(15%) saturate(392%) hue-rotate(108deg); }

#landing .landing-world {
  background: var(--landing-surface);
  color: var(--landing-ink);
  border-color: var(--landing-rule);
}
#landing .landing-world-copy { padding-right: max(32px, calc((100vw - 1376px) / 2)); }
#landing .landing-world-copy ul { border-top-color: var(--landing-ink); }
#landing .landing-world-copy li { color: var(--landing-ink); border-bottom-color: var(--landing-rule); }
#landing .landing-world-image figcaption { background: #061a27; }

#landing .landing-faq summary { color: var(--landing-ink); }
#landing .landing-final {
  background: var(--landing-accent);
  color: #041820;
  padding-left: max(32px, calc((100vw - 1376px) / 2));
  padding-right: max(32px, calc((100vw - 1376px) / 2));
}
#landing .landing-final h2 { color: #041820; }
#landing .landing-button-inverse { border-color: #041820; background: #041820; color: var(--landing-ink); }
#landing .landing-button-inverse:hover { background: transparent; color: #041820; }
#landing .landing-footer { color: var(--landing-muted); }
#landing .landing-footer nav a { color: var(--landing-muted); }

@media (max-width: 980px) {
  #landing .landing-nav,
  #landing .landing-footer,
  #landing .landing-proof,
  #landing .landing-how,
  #landing .landing-control,
  #landing .landing-faq { width: min(100% - 40px, 1376px); }
  #landing .landing-hero { min-height: 940px; padding-inline: 20px; padding-top: 130px; }
  #landing .landing-hero-copy { width: min(650px, 80vw); }
  #landing .landing-globe-stage { top: 300px; width: 100%; height: 650px; }
  #landing .landing-globe-readout { right: 20px; bottom: 40px; width: 300px; }
  #landing .landing-globe-help { left: 20px; bottom: 40px; }
  #landing .landing-fleet { padding-left: 20px; }
  #landing .landing-world-copy { padding-right: 20px; }
}

@media (max-width: 640px) {
  #landing .landing-nav,
  #landing .landing-footer,
  #landing .landing-proof,
  #landing .landing-how,
  #landing .landing-control,
  #landing .landing-faq { width: min(100% - 28px, 1376px); }
  #landing .landing-hero { min-height: 880px; padding: 108px 14px 40px; }
  #landing .landing-hero-copy { width: 100%; }
  #landing .landing-hero h1 { font-size: clamp(43px, 12vw, 54px); }
  #landing .landing-hero h1 span { white-space: nowrap; }
  #landing .landing-lede { max-width: 360px; font-size: 16px; }
  #landing .landing-globe-stage { top: 390px; height: 445px; }
  #landing .landing-globe-readout { right: 14px; bottom: 24px; width: 240px; }
  #landing .landing-globe-readout strong { font-size: 19px; }
  #landing .landing-globe-help { left: 14px; bottom: 118px; }
  #landing .landing-airport-label { min-width: 88px; padding: 6px 8px; }
  #landing .landing-airport-label strong { font-size: 17px; }
  #landing .landing-airport-label span { font-size: 10px; }
  #landing .landing-airport-secondary { display: none; }
  #landing .landing-fleet { padding-left: 14px; }
  #landing .landing-world-copy { padding-right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  #landing .landing-globe-fallback { transition: none; }
}