:root {
  --bg: #04050a; --bg2: #090b11; --panel: rgba(14, 16, 23, 0.78); --panel2: rgba(20, 23, 32, 0.82);
  --line: rgba(255, 255, 255, 0.07); --line2: rgba(255, 255, 255, 0.13); --line3: rgba(255, 255, 255, 0.22);
  --text: #e9edf3; --text2: #a3acba; --muted: #6a7382;
  --cyan: #5fd4ff; --blue: #4d7cff; --violet: #9b7bff; --orange: #ff9a4d; --amber: #e0ac6a; --green: #6fdc8c; --red: #ff5d6c; --yellow: #ffc857;
  --f-d: 'Exo 2', 'Inter', system-ui, sans-serif; --f-u: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-m: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r: 14px; --nav: 64px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-u); color: var(--text); background: radial-gradient(1200px 700px at 70% -10%, #0d1424 0%, transparent 60%), radial-gradient(900px 600px at -10% 110%, #120d1c 0%, transparent 60%), var(--bg); min-height: 100vh; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
:focus-visible { outline: 1.5px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
img { display: block; max-width: 100%; }
.img { opacity: 0; transition: opacity 0.6s ease; }
.img.is-loaded { opacity: 1; }
.mono { font-family: var(--f-m); font-size: 11px; letter-spacing: 0.02em; }
.dim { color: var(--muted); }
.ok-text { color: var(--green); } .warn-text { color: var(--yellow); } .crit-text { color: var(--red); } .info-text { color: var(--cyan); }
.green { color: var(--green); }
.ico { flex: none; }
[hidden] { display: none !important; }

/* ---------- background */
.starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.6)); }

/* ---------- loader */
.loader { position: fixed; inset: 0; z-index: 100; background: #03040a; display: grid; place-items: center; }
.loader-in { display: grid; justify-items: center; gap: 14px; }
.loader-orbit { width: 84px; height: 84px; border: 1px solid var(--line2); border-radius: 50%; position: relative; animation: spin 2.4s linear infinite; }
.loader-orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); top: -4px; inset-inline-start: 38px; box-shadow: 0 0 14px var(--cyan); }
.loader-orbit b { position: absolute; inset: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd79a, #e07b2a 60%, #5a1d05); box-shadow: 0 0 30px rgba(255, 140, 50, 0.5); animation: spin 2.4s linear infinite reverse; }
.brand-word { font-family: var(--f-d); font-weight: 300; letter-spacing: 0.6em; font-size: 20px; margin-inline-end: -0.6em; }
.loader-bar { width: 200px; height: 2px; background: var(--line2); border-radius: 2px; overflow: hidden; }
.loader-bar b { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width 0.3s; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 16px; height: 16px; border: 1.5px solid var(--line3); border-top-color: var(--cyan); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }

/* ---------- nav */
.nav { position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; z-index: 40; height: calc(var(--nav) + var(--sat)); padding: var(--sat) calc(20px + var(--sar)) 0 calc(20px + var(--sal)); display: flex; align-items: center; gap: 16px; background: linear-gradient(180deg, rgba(4, 5, 10, 0.92), rgba(4, 5, 10, 0.6)); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav.over { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); }
.logo span { font-family: var(--f-d); font-weight: 400; letter-spacing: 0.42em; font-size: 15px; }
.nav-pill { margin: 0 auto; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.02); }
.nav-pill button { padding: 8px 16px; border-radius: 999px; color: var(--text2); font-size: 13px; transition: color 0.2s, background 0.2s; white-space: nowrap; }
.nav-pill button:hover { color: var(--text); }
.nav-pill button.on { background: rgba(255, 255, 255, 0.09); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.nav-r { display: flex; align-items: center; gap: 8px; }
.utc { color: var(--text2); margin-inline-end: 6px; }
.bell-wrap { position: relative; }
.badge { position: absolute; top: 7px; inset-inline-end: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--bg); }
.dropdown { position: absolute; inset-inline-end: 0; top: 46px; width: 290px; background: #0d1017; border: 1px solid var(--line2); border-radius: 12px; padding: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); display: grid; gap: 2px; }
.dropdown header { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 8px; font-size: 13px; }
.note-i { display: flex; gap: 10px; align-items: flex-start; text-align: start; padding: 9px 8px; border-radius: 8px; font-size: 13px; }
.note-i:hover { background: rgba(255, 255, 255, 0.04); }
.note-i small { display: block; color: var(--muted); font-size: 11px; }
.note-i .dot { margin-top: 6px; }
.tabbar { display: none; }

/* ---------- primitives */
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--line2); color: var(--text2); background: rgba(255, 255, 255, 0.02); transition: all 0.2s; position: relative; flex: none; }
.icon-btn:hover { color: #fff; border-color: var(--line3); background: rgba(255, 255, 255, 0.06); }
.icon-btn.on { color: #fff; background: rgba(95, 212, 255, 0.12); border-color: rgba(95, 212, 255, 0.35); }
.icon-btn.round { border-radius: 50%; }
.icon-btn.sm { width: 28px; height: 28px; border-radius: 8px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.03); color: var(--text); font-size: 13px; font-weight: 500; transition: all 0.2s; white-space: nowrap; }
.btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--line3); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.btn.wide { width: 100%; justify-content: center; margin-top: 14px; }
.btn.primary { background: linear-gradient(180deg, #c9a273, #a9804f); border-color: #d8b487; color: #17110a; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.on { border-color: rgba(95, 212, 255, 0.4); color: var(--cyan); }
.btn.glow-orange { border-color: rgba(255, 140, 70, 0.5); color: #ffb07a; background: rgba(255, 120, 50, 0.1); box-shadow: 0 0 24px rgba(255, 110, 40, 0.22), inset 0 0 12px rgba(255, 120, 50, 0.12); letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.btn.glow-orange:hover { background: rgba(255, 120, 50, 0.18); }
.btn.violet { border-color: rgba(155, 123, 255, 0.5); background: rgba(155, 123, 255, 0.16); color: #d6c9ff; box-shadow: 0 0 20px rgba(155, 123, 255, 0.25); }
.ghost-btn { display: inline-flex; gap: 8px; align-items: center; color: var(--text2); font-size: 12px; margin-top: 14px; padding: 8px 0; border-bottom: 1px solid var(--line2); }
.ghost-btn:hover { color: #fff; }
.link { color: var(--text2); font-size: 12px; }
.link:hover { color: #fff; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line2); color: var(--text2); font-size: 12px; white-space: nowrap; transition: all 0.2s; }
.chip:hover { color: #fff; border-color: var(--line3); }
.chip.on { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: var(--line3); }
.chip em { font-style: normal; font-family: var(--f-m); font-size: 10px; color: var(--muted); }
.chip.static { cursor: default; font-family: var(--f-m); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255, 255, 255, 0.03); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.dot-ok { background: var(--green); box-shadow: 0 0 8px rgba(111, 220, 140, 0.6); }
.dot-warn { background: var(--yellow); box-shadow: 0 0 8px rgba(255, 200, 87, 0.6); }
.dot-crit { background: var(--red); box-shadow: 0 0 8px rgba(255, 93, 108, 0.6); }
.dot-info { background: var(--cyan); }
.dot-live { background: var(--orange); box-shadow: 0 0 0 0 rgba(255, 154, 77, 0.6); animation: pulse 1.8s infinite; }
.dot-off { background: var(--muted); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 154, 77, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(255, 154, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 154, 77, 0); } }
.simtag { display: inline-block; font-family: var(--f-m); font-size: 9px; letter-spacing: 0.1em; padding: 2px 5px; border-radius: 4px; color: #c7b6ff; background: rgba(155, 123, 255, 0.14); border: 1px solid rgba(155, 123, 255, 0.3); margin-inline-start: 8px; vertical-align: middle; line-height: 1.2; font-weight: 500; }
.kicker { font-family: var(--f-m); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text2); }
.note { font-size: 11px; color: var(--muted); margin-top: 8px; }
.pbar { height: 4px; background: rgba(255, 255, 255, 0.07); border-radius: 4px; overflow: hidden; }
.pbar b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #7bc59a, var(--green)); transition: width 0.8s cubic-bezier(.2, .8, .2, 1); }
.tabs { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); gap: 2px; }
.tabs button { padding: 6px 12px; border-radius: 8px; color: var(--text2); font-size: 12px; white-space: nowrap; transition: all 0.2s; }
.tabs button.on { background: rgba(255, 255, 255, 0.1); color: #fff; }
.tabs.sm button { padding: 4px 9px; font-size: 11px; }
.search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.03); color: var(--text2); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 16px; }
.search.sm { height: 32px; } .search.sm input { font-size: 13px; }
.search.lg { height: 50px; font-size: 16px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 0; }
.facts div { background: rgba(10, 12, 17, 0.92); padding: 10px 12px; }
.facts dt { font-family: var(--f-m); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.facts dd { margin: 2px 0 0; font-size: 13px; }
.kv { margin: 0; display: grid; gap: 7px; }
.kv div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; text-align: end; }
.empty { color: var(--muted); padding: 20px; text-align: center; font-size: 13px; }
.footnote { color: var(--muted); font-size: 11px; margin: 18px 4px 0; max-width: 900px; }

/* ---------- panel */
.panel { position: relative; background: linear-gradient(180deg, rgba(19, 22, 30, 0.82), rgba(11, 13, 18, 0.86)); border: 1px solid var(--line); border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 50px rgba(0, 0, 0, 0.25); min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 14px 16px 0; min-height: 30px; }
.panel-head > * { min-width: 0; max-width: 100%; }
.panel-head .tabs { overflow-x: auto; scrollbar-width: none; }
.panel-head .tabs::-webkit-scrollbar { display: none; }
.panel-head h3 { display: flex; align-items: center; gap: 8px; font-family: var(--f-m); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text2); font-weight: 500; }
.panel-head h3 .ico { color: var(--muted); }
.panel-body { padding: 14px 16px 16px; }
.panel-body.flush { padding: 10px; }

/* ---------- charts */
.chart { position: relative; width: 100%; }
.chart svg { display: block; overflow: visible; }
.chart .grid { stroke: rgba(255, 255, 255, 0.06); }
.chart .axis { stroke: rgba(255, 255, 255, 0.12); }
.chart .cross { stroke: rgba(255, 255, 255, 0.25); stroke-dasharray: 2 3; }
.chart .tick, .tick { font-family: var(--f-m); font-size: 9.5px; fill: var(--muted); color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--text2); margin-bottom: 6px; }
.legend span, .legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; }
.legend.v { display: grid; list-style: none; padding: 0; margin: 0; gap: 6px; }
.legend.v em { margin-inline-start: auto; font-style: normal; color: var(--text); padding-inline-start: 10px; }
.tip { position: absolute; z-index: 3; pointer-events: none; background: rgba(8, 10, 14, 0.96); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 9px; font-size: 11px; min-width: 120px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.tip b { display: block; font-family: var(--f-m); font-size: 10px; color: var(--text2); font-weight: 500; margin-bottom: 3px; }
.tip div { display: flex; align-items: center; gap: 6px; color: var(--text2); }
.tip div i { width: 7px; height: 7px; border-radius: 2px; }
.tip span { margin-inline-start: auto; color: var(--text); font-family: var(--f-m); padding-inline-start: 8px; }
.ring { position: relative; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; }
.ring-c { position: relative; text-align: center; line-height: 1.1; }
.ring-c b { font-family: var(--f-m); font-size: 12px; font-weight: 500; display: block; }
.ring-c small { font-size: 9px; color: var(--muted); }
.donut { position: relative; }
.donut svg { display: block; }
.donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut-c b { font-family: var(--f-m); font-size: 14px; font-weight: 500; }
.donut-c small { font-size: 9.5px; color: var(--muted); }
.spark svg { display: block; }
.heat-grid { display: grid; gap: 2px; align-items: center; }
.heat-grid i { aspect-ratio: 1.6; border-radius: 2px; transition: transform 0.15s; }
.heat-grid i.on { outline: 1.5px solid #fff; transform: scale(1.12); position: relative; z-index: 1; }
.heat-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.heat-scale { display: flex; gap: 6px; align-items: center; }
.heat-scale b { width: 60px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, hsl(197 55% 18%), hsl(197 85% 70%)); }

/* ---------- layout */
.main { position: relative; z-index: 1; padding: calc(var(--nav) + var(--sat) + 18px) calc(20px + var(--sar)) 40px calc(20px + var(--sal)); max-width: 1640px; margin: 0 auto; }
.main.route-explorer { padding: 0; max-width: none; }

/* ---------- HOME */
.hero { display: grid; grid-template-columns: 300px minmax(0, 1fr) 330px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, rgba(12, 13, 18, 0.9), rgba(7, 8, 12, 0.9)); min-height: 660px; }
.hero-left { padding: 28px 26px; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 2; }
.live { display: flex; align-items: center; gap: 8px; font-family: var(--f-m); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
.hero-title { font-family: var(--f-u); font-weight: 300; font-size: 48px; line-height: 1.02; letter-spacing: -0.02em; }
.hero-title em { font-style: normal; color: var(--text2); }
.hero-text { color: var(--text2); font-size: 13.5px; max-width: 240px; }
.hero-btns { display: flex; gap: 10px; align-items: center; }
.next-event { border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; display: grid; gap: 3px; background: rgba(255, 255, 255, 0.015); }
.ne-head { display: flex; align-items: center; gap: 8px; color: var(--text2); margin-bottom: 4px; }
.ne-nav { margin-inline-start: auto; display: flex; gap: 4px; }
.next-event b { font-weight: 500; font-size: 13.5px; }
.cd { color: var(--amber); }
.mission-status { margin-top: auto; border-top: 1px solid var(--line); padding-top: 16px; }
.ms-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text2); align-items: center; }
.ms-head .ok-text { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.wire { color: rgba(220, 230, 245, 0.7); width: 100%; height: auto; margin: 12px 0; }
.ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ms-grid small { display: block; font-family: var(--f-m); font-size: 9.5px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.ms-grid b { font-weight: 400; font-size: 17px; }
.hero-stage { position: relative; overflow: hidden; min-height: 520px; }
.hero-imgbox { position: absolute; inset: -10% -20%; display: grid; place-items: center; transition: translate 0.8s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.hero-img { width: min(100%, 1100px); max-width: none; }
.hero-img.hero-earth, .hero-img.hero-mars, .hero-img.hero-jupiter { width: min(62%, 680px); }
.hero-orbits { position: absolute; inset: 0; pointer-events: none; }
.hero-orbits svg { width: 100%; height: 100%; }
.hero-orbits ellipse { fill: none; stroke: rgba(255, 255, 255, 0.08); }
.target-tag { position: absolute; inset-inline-end: 26px; top: 26px; border: 1px solid var(--line2); background: rgba(8, 10, 14, 0.7); border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; }
.target-tag small { font-family: var(--f-m); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.target-tag b { font-family: var(--f-d); font-weight: 400; letter-spacing: 0.18em; font-size: 16px; }
.hero-kpis { position: absolute; inset-inline-end: 26px; bottom: 60px; display: grid; gap: 18px; text-align: center; }
.hero-kpis div { display: grid; justify-items: center; gap: 2px; color: var(--text2); }
.hero-kpis b { font-family: var(--f-d); font-weight: 300; font-size: 26px; color: #fff; }
.hero-kpis small { font-family: var(--f-m); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); max-width: 90px; }
.dots { position: absolute; inset-inline-start: 26px; bottom: 24px; display: flex; gap: 8px; }
.dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transition: all 0.3s; }
.dots button.on { background: var(--amber); width: 22px; border-radius: 4px; }
.hero-right { border-inline-start: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; }
.hero-right .panel { background: none; border: 0; border-radius: 0; box-shadow: none; }
.hero-right .panel + .panel { border-top: 1px solid var(--line); }
.iod-card { position: relative; width: 100%; aspect-ratio: 1.15; border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); background: #000; text-align: start; }
.iod-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.iod-card:hover img { transform: scale(1.06); }
.iod-title { position: absolute; inset-inline-start: 16px; top: 14px; font-family: var(--f-u); font-weight: 300; font-size: 26px; line-height: 1.05; max-width: 60%; }
.iod-play { position: absolute; inset-inline-end: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line3); display: grid; place-items: center; background: rgba(0, 0, 0, 0.4); }
.iod-meta { position: absolute; inset-inline-start: 16px; bottom: 14px; color: var(--text2); }
.mission-list { list-style: none; margin: 0; padding: 0; display: grid; }
.mission-list button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); text-align: start; border-radius: 6px; transition: background 0.2s; }
.mission-list li:last-child button { border-bottom: 0; }
.mission-list button:hover { background: rgba(255, 255, 255, 0.03); }
.mi-ico { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line2); display: grid; place-items: center; color: var(--text2); flex: none; }
.mi-t { flex: 1; min-width: 0; } .mi-t b { display: block; font-weight: 500; font-size: 13px; } .mi-t small { color: var(--muted); font-size: 11.5px; }
.mi-d { color: var(--text2); }
.cards-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.card-fleet .ship { color: rgba(170, 240, 190, 0.6); max-height: 120px; margin: 0 auto 8px; display: block; width: 80%; }
.fleet-foot { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.fleet-foot .ok-text { display: inline-flex; gap: 6px; align-items: center; font-family: var(--f-m); font-size: 10.5px; }
.pct { display: block; text-align: end; margin-top: 4px; }
.next-card { position: relative; display: block; width: 100%; height: 100%; min-height: 200px; border-radius: 10px; overflow: hidden; text-align: start; }
.next-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.next-card:hover img { transform: scale(1.05); }
.next-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.8)); }
.nc-t { position: absolute; inset-inline-start: 14px; bottom: 12px; z-index: 1; } .nc-t b { display: block; font-family: var(--f-d); font-size: 20px; font-weight: 300; letter-spacing: 0.08em; } .nc-t small { color: var(--text2); font-size: 11.5px; }
.next-card .icon-btn { position: absolute; inset-inline-end: 12px; bottom: 12px; z-index: 1; }
.card-next .panel-body { height: calc(100% - 44px); }
.scan { display: flex; align-items: center; gap: 18px; }
.scan > div { display: grid; gap: 6px; justify-items: start; }
.big { font-family: var(--f-d); font-weight: 300; font-size: 40px; line-height: 1; }
.scan small { color: var(--text2); font-size: 12px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-m); font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.1em; }
.vtl { list-style: none; margin: 0; padding: 0 0 0 16px; display: grid; gap: 6px; position: relative; }
.vtl::before { content: ''; position: absolute; inset-inline-start: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--line2); }
.vtl li { position: relative; display: flex; align-items: center; gap: 6px; }
.vtl li::before { content: ''; position: absolute; inset-inline-start: -16px; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-50%); background: #10131a; border: 1px solid var(--line3); }
.vtl li.done::before { background: var(--green); border-color: var(--green); }
.vtl li.now::before { background: var(--bg); border-color: var(--green); box-shadow: 0 0 0 3px rgba(111, 220, 140, 0.2); }
.vtl li > button { flex: 1; text-align: start; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; display: grid; }
.vtl li.sel > button, .vtl li > button:hover { border-color: var(--line2); background: rgba(255, 255, 255, 0.03); }
.vtl b { font-weight: 500; font-size: 12.5px; } .vtl small { font-family: var(--f-m); font-size: 10px; color: var(--muted); }
.vtl li.done small { color: var(--green); }
.vtl li.next b { color: var(--text2); }
.lower-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.lower-col { display: grid; gap: 14px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card-orrery .panel-body { padding: 0 6px 6px; }
.orrery { position: relative; width: 100%; height: 470px; }
.orrery.compact { height: 300px; }
.orrery canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.orrery-ctl { position: absolute; inset-inline-start: 12px; bottom: 12px; display: flex; gap: 6px; align-items: center; }
.explore-list { list-style: none; margin: 0; padding: 0; }
.explore-list button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text2); transition: color 0.2s; }
.explore-list li:last-child button { border-bottom: 0; }
.explore-list button:hover { color: #fff; }
.explore-list em { margin-inline-start: auto; font-style: normal; color: var(--text); }
.tele-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.tele-k small { display: block; font-family: var(--f-m); font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.tele-k b { font-weight: 400; font-size: 15px; color: var(--amber); }

/* ---------- EXPLORER */
.explorer { position: relative; height: 100vh; height: 100dvh; min-height: 560px; overflow: hidden; background: radial-gradient(90% 70% at 50% 50%, #080a12, #020205); }
.explorer-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; z-index: 1; }
.explorer-canvas:active { cursor: grabbing; }
.glow-bloom { position: absolute; inset: 10% 20%; pointer-events: none; z-index: 0; transition: background 1s; }
.explorer-fallback { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.explorer-fallback img { width: min(60vh, 70vw); }
.explorer-fallback p { position: absolute; bottom: 120px; }
.explorer-loading { position: absolute; left: 50%; top: calc(var(--nav) + 20px); transform: translateX(-50%); z-index: 3; display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--line2); color: var(--text2); }
.ex-stats { position: absolute; z-index: 2; inset-inline-start: max(28px, 7vw); top: 50%; transform: translateY(-50%); width: 300px; display: grid; gap: 30px; padding-inline-end: 64px; pointer-events: none; }
.ex-stats::before { content: ''; position: absolute; inset-inline-end: 46px; inset-inline-start: calc(-1 * max(28px, 7vw)); top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2)); }
.ex-arc { position: absolute; inset-inline-end: 0; top: -40px; bottom: -40px; width: 70px; height: calc(100% + 80px); }
.stat { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: var(--text2); margin-inline-end: calc(18px * sin(calc(var(--i) * 36deg)) * 1); transform: translateX(calc(-30px * var(--dirx) * sin(calc(var(--i) * 36deg)))); }
.stat > div { text-align: end; font-size: 12px; }
.stat b { color: #fff; font-weight: 400; font-size: 12.5px; }
.stat span { margin-inline-start: 6px; color: var(--text2); }
.stat .ico { color: rgba(255, 255, 255, 0.85); }
.ex-info { position: absolute; z-index: 2; inset-inline-end: max(28px, 6vw); top: 50%; transform: translateY(-46%); width: 330px; }
.ex-name { font-family: var(--f-d); font-weight: 300; font-size: 30px; letter-spacing: 0.42em; text-transform: uppercase; margin: 6px 0 16px; color: #f1f3f7; }
.ex-info .kicker { color: var(--muted); }
.desc-box { border: 1px solid rgba(255, 255, 255, 0.16); padding: 13px 14px; font-size: 12.5px; line-height: 1.55; color: #c5ccd7; background: rgba(0, 0, 0, 0.35); }
.desc-box + .desc-box { border-top: 0; }
.ex-select { position: absolute; z-index: 3; inset-inline-start: 0; inset-inline-end: 0; bottom: calc(18px + var(--sab)); display: flex; justify-content: center; pointer-events: none; }
.ex-track { display: flex; gap: 6px; pointer-events: auto; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.ex-track::-webkit-scrollbar { display: none; }
.ex-track button { display: grid; justify-items: center; gap: 9px; padding: 6px 10px; color: var(--muted); font-size: 12px; transition: color 0.3s; }
.ex-track button i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: all 0.4s cubic-bezier(.2, .8, .2, 1); }
.ex-track button:hover { color: var(--text); }
.ex-track button.on { color: #fff; }
.ex-track button.on i { width: 11px; height: 11px; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.7); margin-top: -2.5px; }
.ex-ctl { position: absolute; z-index: 3; inset-inline-end: 24px; bottom: calc(90px + var(--sab)); display: flex; gap: 6px; }
.ex-ctl .icon-btn { background: rgba(0, 0, 0, 0.35); }
.ex-menu { position: absolute; z-index: 3; inset-inline-end: 24px; top: calc(var(--nav) + var(--sat) + 14px); background: rgba(0, 0, 0, 0.35); }
.ex-drawer { position: absolute; z-index: 5; top: 0; inset-inline-end: 0; bottom: 0; width: min(390px, 92vw); padding: calc(var(--nav) + var(--sat) + 16px) 24px 24px; background: rgba(6, 8, 12, 0.94); border-inline-start: 1px solid var(--line2); transform: translateX(105%); transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); overflow-y: auto; }
.ex-drawer.open { transform: none; }
.ex-drawer header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ex-drawer h3 { font-family: var(--f-d); font-size: 22px; font-weight: 300; letter-spacing: 0.1em; }
.ex-drawer h3 small { font-family: var(--f-m); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-inline-start: 6px; }
.ex-drawer h4 { font-family: var(--f-m); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text2); margin: 20px 0 10px; font-weight: 500; }
.compo { display: grid; gap: 8px; }
.compo-row { display: grid; grid-template-columns: 110px 1fr 46px; align-items: center; gap: 10px; font-size: 12.5px; }
.compo-row .bar { height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; overflow: hidden; }
.compo-row .bar b { display: block; height: 100%; border-radius: 3px; }
.compo-row em { font-style: normal; font-family: var(--f-m); font-size: 11px; text-align: end; color: var(--text2); }
.sizecmp { display: flex; align-items: flex-end; gap: 28px; padding: 10px 0; min-height: 150px; }
.sizecmp div { display: grid; justify-items: center; gap: 8px; font-size: 11px; color: var(--text2); }

/* ---------- DASHBOARD */
.dash-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(90deg, rgba(20, 28, 44, 0.8), rgba(18, 14, 30, 0.8)); }
.dash-title { display: flex; align-items: center; gap: 12px; color: var(--cyan); }
.dash-title h2 { font-family: var(--f-d); font-weight: 400; font-size: 20px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #8fe3ff, #c9b5ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dash-title small { color: var(--text2); }
.dash-views { margin: 0 auto; }
.dash-tools { display: flex; align-items: center; gap: 8px; }
.sim-banner { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; padding: 9px 14px; border-radius: 10px; border: 1px dashed rgba(155, 123, 255, 0.35); background: rgba(155, 123, 255, 0.06); color: #cfc3f5; font-size: 12px; }
.sim-banner.strong { border-style: solid; border-color: rgba(255, 200, 87, 0.35); background: rgba(255, 200, 87, 0.06); color: #f0dcae; }
.dash-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.dash-col { display: grid; gap: 14px; min-width: 0; }
.view-weather .panel:not(.v-weather), .view-objects .panel:not(.v-objects) { display: none; }
.view-weather .dash-col.left { display: none; } .view-weather { grid-template-columns: minmax(0, 1fr) 360px; }
.view-objects .dash-col.right .panel:not(.v-objects) { display: none; }
.rings { display: flex; justify-content: space-around; margin-bottom: 10px; }
.rings > div { display: grid; justify-items: center; gap: 6px; }
.rings small { font-size: 11px; color: var(--text2); }
.neo { list-style: none; margin: 0; padding: 0; display: grid; }
.neo li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.neo li:last-child { border-bottom: 0; }
.neo b { font-weight: 500; display: block; } .neo small { color: var(--muted); font-size: 10.5px; display: block; }
.neo .mono { text-align: end; } .neo .mono small { font-family: var(--f-m); }
.risk { font-family: var(--f-m); font-size: 9.5px; padding: 3px 7px; border-radius: 5px; border: 1px solid var(--line2); color: var(--text2); display: inline-flex; align-items: center; gap: 4px; }
.risk-watch { color: var(--yellow); border-color: rgba(255, 200, 87, 0.4); background: rgba(255, 200, 87, 0.08); }
.prog { margin-bottom: 12px; } .prog:last-child { margin-bottom: 0; }
.prog > div:first-child { display: flex; justify-content: space-between; font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.sys .panel-body { padding: 0 8px 8px; }
.sys-wrap { position: relative; background: radial-gradient(60% 60% at 50% 50%, rgba(60, 40, 120, 0.18), transparent 70%); border-radius: 10px; }
.sys-card { position: absolute; inset-inline-end: 12px; top: 12px; width: 240px; display: flex; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid rgba(95, 212, 255, 0.3); background: rgba(6, 12, 20, 0.85); box-shadow: 0 0 30px rgba(95, 212, 255, 0.1); animation: fadeUp 0.5s cubic-bezier(.2, .8, .2, 1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
.sys-thumb { width: 56px; height: 56px; flex: none; }
.sys-card h4 { font-family: var(--f-d); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; color: var(--cyan); }
.sys-card dl { margin: 0 0 10px; display: grid; gap: 3px; }
.sys-card dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.sys-card dt { color: var(--muted); } .sys-card dd { margin: 0; }
.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.al { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); animation: fadeUp 0.5s; }
.al .ico { margin-top: 2px; }
.al > div { flex: 1; min-width: 0; } .al b { display: block; font-weight: 500; font-size: 12px; } .al small { color: var(--muted); font-size: 10px; }
.al-crit { border-color: rgba(255, 93, 108, 0.35); background: linear-gradient(90deg, rgba(255, 93, 108, 0.16), rgba(255, 93, 108, 0.04)); } .al-crit .ico { color: var(--red); }
.al-warn { border-color: rgba(255, 200, 87, 0.28); background: rgba(255, 200, 87, 0.06); } .al-warn .ico { color: var(--yellow); }
.al-info .ico { color: var(--cyan); }
.al .chip { margin-inline-start: auto; align-self: center; }
.telem-top { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.telem-top dl { margin: 0; flex: 1; display: grid; gap: 5px; }
.telem-top dl div { display: flex; justify-content: space-between; font-size: 11.5px; }
.telem-top dt { color: var(--muted); } .telem-top dd { margin: 0; color: var(--cyan); }
.donuts { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.donuts .legend { font-size: 11.5px; flex: 1; }

/* ---------- MISSION */
.focus-mission { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid rgba(95, 212, 255, 0.3); border-radius: 12px; background: rgba(95, 212, 255, 0.06); margin-bottom: 12px; font-size: 13px; color: var(--cyan); }
.focus-mission > div { flex: 1; color: var(--text); } .focus-mission p { color: var(--text2); margin-top: 4px; font-size: 12.5px; }
.mc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 2px 12px; }
.mc-brand { display: flex; align-items: center; gap: 12px; font-family: var(--f-d); letter-spacing: 0.3em; text-transform: uppercase; font-size: 13px; color: var(--text2); }
.mc-brand .mono { font-family: var(--f-d); font-size: 15px; color: #fff; letter-spacing: 0.4em; }
.mc-brand .sep { width: 1px; height: 16px; background: var(--line3); }
.mc-meta { display: flex; gap: 18px; color: var(--muted); flex-wrap: wrap; }
.mc-meta b { color: var(--text); font-weight: 500; margin-inline-start: 4px; }
.mc-flight { display: grid; grid-template-columns: 290px minmax(0, 1fr) 290px; gap: 14px; }
.mc-left, .mc-right { display: grid; gap: 14px; align-content: start; }
.crew { list-style: none; margin: 0; padding: 0; display: grid; }
.crew li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.crew li:last-child { border-bottom: 0; }
.avatar { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; font-family: var(--f-m); font-size: 12px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #000), #12151d); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.crew li > div { flex: 1; min-width: 0; } .crew b { display: block; font-weight: 500; font-size: 13px; } .crew small { font-family: var(--f-m); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.hr { color: var(--text2); }
.craft { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
.blueprint { color: rgba(200, 220, 240, 0.65); width: 100%; height: auto; }
.blueprint .part { cursor: pointer; transition: color 0.2s; outline: none; }
.blueprint .part:hover, .blueprint .part.on, .blueprint .part:focus-visible { color: var(--orange); }
.blueprint .part.on path, .blueprint .part.on rect { stroke-width: 1.4; }
.part-info b { display: block; font-weight: 500; font-size: 13px; margin-bottom: 2px; }
.part-info p { color: var(--text2); font-size: 12px; margin-top: 6px; }
.mc-center { position: relative; overflow: hidden; min-height: 560px; display: flex; flex-direction: column; background: radial-gradient(80% 70% at 30% 50%, rgba(30, 50, 90, 0.25), transparent 70%), linear-gradient(180deg, rgba(10, 12, 18, 0.95), rgba(6, 7, 11, 0.95)); }
.mc-hud { display: flex; justify-content: space-between; padding: 16px 18px; position: relative; z-index: 2; pointer-events: none; }
.mc-hud small { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 9.5px; }
.mc-hud b { font-weight: 400; font-size: 22px; }
.mc-hud .met { font-size: 20px; color: #fff; }
.mc-hud .r { text-align: end; } .mc-hud em { font-style: normal; font-size: 12px; color: var(--text2); }
.mc-hud.top .r b { font-family: var(--f-d); letter-spacing: 0.12em; }
.mc-hud.bottom { margin-top: auto; }
.mc-hud.bottom b { font-family: var(--f-d); font-weight: 300; font-size: 30px; }
.traj { position: absolute; inset: 0; }
.traj canvas { width: 100%; height: 100%; display: block; }
.evt-card { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, 12%); width: min(360px, 80%); padding: 14px 16px; border-radius: 12px; background: rgba(12, 14, 20, 0.9); border: 1px solid var(--line2); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); animation: fadeUp 0.6s cubic-bezier(.2, .8, .2, 1); }
.evt-card small { display: flex; align-items: center; gap: 6px; color: var(--amber); }
.evt-card h4 { font-size: 17px; margin: 6px 0 4px; font-weight: 500; }
.evt-card p { color: var(--text2); font-size: 12.5px; }
.not-scale { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); color: var(--muted); z-index: 2; white-space: nowrap; }
.tele-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tele-grid > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.tele-grid b { display: block; font-size: 17px; font-weight: 400; } .tele-grid small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--f-m); }
.tele-grid .hl b { color: var(--orange); }
.tele-grid .pbar { margin-top: 6px; } .tele-grid .pbar b { background: var(--orange); }
.facts-list { margin: 0; padding-inline-start: 16px; display: grid; gap: 8px; color: var(--text2); font-size: 12.5px; }
.facts-list b { color: var(--orange); font-weight: 500; }
.mc-timeline { margin-top: 14px; padding: 14px 16px; display: grid; gap: 12px; }
.tl-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.speed { display: flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.speed button { padding: 5px 10px; font-family: var(--f-m); font-size: 10.5px; color: var(--text2); }
.speed button.on { background: rgba(255, 255, 255, 0.12); color: #fff; }
.met-s { margin-inline-start: auto; color: var(--text); font-size: 12px; }
.tl-track { position: relative; padding: 18px 0 24px; }
.tl-track input[type='range'] { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; height: 18px; position: relative; z-index: 2; margin: 0; }
.tl-track input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, rgba(255, 170, 90, 0.8), rgba(255, 255, 255, 0.12)); }
.tl-track input::-moz-range-track { height: 2px; background: rgba(255, 255, 255, 0.15); }
.tl-track input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; margin-top: -6px; box-shadow: 0 0 0 4px rgba(255, 154, 77, 0.3); }
.tl-track input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.tl-events { position: absolute; inset-inline-start: 7px; inset-inline-end: 7px; top: 0; height: 18px; }
.tl-events button { position: absolute; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; font-family: var(--f-m); font-size: 9px; color: var(--muted); top: -2px; z-index: 3; }
.tl-events button i { width: 2px; height: 8px; background: rgba(255, 170, 90, 0.4); }
.tl-events button.done { color: var(--amber); } .tl-events button.done i { background: var(--orange); }
.tl-events button span { order: -1; }
.tl-days { position: absolute; inset-inline-start: 7px; inset-inline-end: 7px; bottom: 0; height: 14px; color: var(--muted); font-size: 9px; }
.tl-days span { position: absolute; }
.gallery { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.g-l { color: var(--muted); flex: none; line-height: 1.4; } .g-l b { color: var(--text); font-weight: 500; }
.g-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; padding-bottom: 4px; }
.g-strip button { flex: none; width: 110px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line2); transition: border-color 0.2s; background: #000; }
.g-strip button:hover { border-color: var(--orange); }
.g-strip img { width: 100%; height: 100%; object-fit: cover; }
.sec-title { display: flex; align-items: center; gap: 12px; margin: 34px 2px 14px; font-family: var(--f-d); font-weight: 300; font-size: 22px; letter-spacing: 0.04em; }
.sec-title span { font-family: var(--f-m); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line2); padding: 4px 8px; border-radius: 6px; }
.mc-ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ops-col { display: grid; gap: 14px; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { position: relative; text-align: start; border-radius: 12px; padding: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); display: grid; gap: 4px; min-height: 118px; align-content: end; }
.kpi .ico { position: absolute; inset-inline-start: 14px; top: 14px; color: var(--text2); padding: 6px; box-sizing: content-box; border-radius: 50%; background: rgba(255, 255, 255, 0.05); }
.kpi em { position: absolute; inset-inline-end: 12px; top: 14px; font-style: normal; font-family: var(--f-m); font-size: 10px; }
.kpi em.up { color: var(--green); } .kpi em.down { color: var(--red); }
.kpi b { font-size: 34px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.kpi small { color: var(--text2); font-size: 12px; }
.kpi.amber { background: radial-gradient(120% 120% at 20% 0%, rgba(255, 175, 60, 0.45), rgba(120, 70, 10, 0.35)); border-color: rgba(255, 190, 90, 0.4); box-shadow: 0 0 40px rgba(255, 160, 50, 0.18); }
.kpi.amber .ico { color: #ffd08a; background: rgba(255, 200, 120, 0.15); } .kpi.amber em { color: #ffe2b0; }
.pipe { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.pipe-h { display: flex; align-items: center; gap: 10px; }
.pipe-h > .ico { color: var(--text2); }
.pipe-h div { flex: 1; } .pipe-h b { display: block; font-weight: 500; font-size: 13px; } .pipe-h small { font-size: 12px; }
.pipe-h em { font-style: normal; }
.pipe-s { display: grid; grid-template-columns: 54px 1fr 54px; gap: 6px; }
.pipe-s > div { border: 1px solid var(--line); border-radius: 8px; padding: 8px; text-align: center; }
.pipe-s .grow { text-align: start; }
.pipe-s b { display: block; font-size: 18px; font-weight: 500; } .pipe-s small { font-family: var(--f-m); font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.pipe-s small em { font-style: normal; float: right; }
.pipe-s .pbar { margin-top: 8px; }
.pipe + .btn { margin: 12px auto; display: flex; }
.btn + .pipe { margin-top: 0; }
.ready-panel .panel-head h3 { color: var(--text); }
.craft-name { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.countdown { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.countdown > div { display: grid; }
.countdown b { font-size: 34px; font-weight: 600; line-height: 1; font-family: var(--f-m); }
.countdown small { font-family: var(--f-m); font-size: 9px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px; }
.countdown > span { font-size: 28px; color: var(--muted); margin-top: -12px; }
.countdown .ring { margin-inline-start: auto; }
.ready-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rtile { position: relative; text-align: start; border-radius: 12px; padding: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); display: grid; gap: 2px; min-height: 104px; align-content: end; transition: transform 0.2s; }
.rtile:hover { transform: translateY(-2px); }
.rtile .ico { position: absolute; inset-inline-start: 12px; top: 12px; color: var(--text2); }
.rtile em { position: absolute; inset-inline-end: 12px; top: 12px; font-style: normal; }
.rtile b { font-size: 22px; font-weight: 600; } .rtile small { color: var(--text2); font-size: 12px; }
.rtile.red { background: radial-gradient(120% 120% at 30% 0%, rgba(230, 60, 90, 0.55), rgba(90, 15, 30, 0.5)); border-color: rgba(255, 90, 110, 0.4); }
.rtile.amber { background: radial-gradient(120% 120% at 30% 0%, rgba(230, 160, 40, 0.5), rgba(100, 60, 10, 0.45)); border-color: rgba(255, 190, 90, 0.35); }
.rtile.red em, .rtile.amber em { color: rgba(255, 255, 255, 0.85); }
.mini-h { font-family: var(--f-m); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text2); margin: 18px 0 8px; font-weight: 500; }
.ai-card { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: var(--r); border: 1px solid rgba(155, 123, 255, 0.35); background: radial-gradient(100% 140% at 0% 0%, rgba(155, 123, 255, 0.18), rgba(14, 12, 24, 0.9)); box-shadow: 0 0 40px rgba(155, 123, 255, 0.12); }
.ai-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #d6c9ff; background: rgba(155, 123, 255, 0.25); flex: none; }
.ai-card > div { flex: 1; } .ai-card small { color: #b9a6ff; font-family: var(--f-m); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; } .ai-card b { display: block; font-weight: 500; font-size: 13.5px; margin: 2px 0; } .ai-card p { color: var(--text2); font-size: 12px; }
.details-info { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center; }
.bp-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: repeating-linear-gradient(0deg, rgba(95, 212, 255, 0.03) 0 1px, transparent 1px 16px), repeating-linear-gradient(90deg, rgba(95, 212, 255, 0.03) 0 1px, transparent 1px 16px); }
.approvals { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.approvals li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 12.5px; }
.approvals li span { display: flex; align-items: center; gap: 8px; }
.console .log { height: 150px; overflow-y: auto; font-family: var(--f-m); font-size: 11px; color: var(--text2); display: grid; align-content: start; gap: 4px; padding: 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); }
.tag { display: inline-block; min-width: 48px; color: var(--muted); margin-inline-end: 8px; }
.tag-CMD { color: var(--orange); } .tag-PROP, .tag-GNC { color: var(--cyan); } .tag-COMM { color: var(--violet); } .tag-FLIGHT { color: var(--green); }
.cmd { margin-top: 10px; border: 1px solid var(--line2); border-radius: 12px; padding: 10px; display: grid; gap: 10px; background: rgba(255, 255, 255, 0.02); }
.cmd input { background: none; border: 0; outline: 0; color: var(--orange); font: inherit; font-size: 16px; font-family: var(--f-m); }
.cmd input::placeholder { color: rgba(255, 154, 77, 0.55); font-size: 13px; }
.cmd-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.quick { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.quick .chip { height: 24px; font-size: 11px; padding: 0 8px; font-family: var(--f-m); }
.report { white-space: pre-wrap; font-family: var(--f-m); font-size: 11.5px; color: var(--text2); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line); border-radius: 10px; padding: 14px; max-height: 52vh; overflow: auto; margin: 14px 0; }
.flagged { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }

/* ---------- DISCOVERIES */
.disc-hero { position: relative; border-radius: 20px; overflow: hidden; min-height: 480px; border: 1px solid var(--line); display: flex; align-items: flex-end; background: #000; }
.disc-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.disc-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.2) 60%, transparent), linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent 50%); }
.disc-hero-txt { position: relative; z-index: 1; padding: 40px; max-width: 560px; display: grid; gap: 14px; justify-items: start; }
.disc-hero h1 { font-weight: 300; font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.disc-hero h1 em { font-style: normal; color: var(--amber); }
.disc-hero p:not(.kicker) { color: #c9d0da; font-size: 14px; }
.disc-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 16px; }
.cats { display: flex; gap: 6px; flex-wrap: wrap; }
.disc-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.disc-tools .search { flex: 1 1 180px; min-width: 0; }
.d-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); grid-auto-flow: dense; gap: 16px; }
.d-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #06070a; display: flex; flex-direction: column; min-height: 360px; }
.d-card.wide { grid-column: span 2; }
.d-card.tall { grid-row: span 2; }
.d-img { position: relative; flex: 1; min-height: 220px; overflow: hidden; display: block; width: 100%; background: #000; }
.d-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.d-card:hover .d-img img { transform: scale(1.05); }
.d-txt { padding: 14px 16px 16px; display: grid; gap: 6px; border-top: 1px solid var(--line); }
.d-txt h3 { font-family: var(--f-u); font-weight: 300; font-size: 24px; letter-spacing: -0.01em; }
.d-txt p:not(.kicker) { color: var(--text2); font-size: 13px; }
.d-txt .kicker { font-size: 9.5px; color: var(--amber); }
.d-save { position: absolute; top: 12px; inset-inline-end: 12px; background: rgba(0, 0, 0, 0.5); }

/* ---------- modal / palette / toasts */
.modal-wrap { position: fixed; inset: 0; z-index: 80; background: rgba(2, 3, 6, 0.72); display: grid; place-items: center; padding: 20px; overscroll-behavior: contain; }
.modal { position: relative; width: min(620px, 100%); max-height: calc(100dvh - 40px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; background: linear-gradient(180deg, #11141b, #0a0c11); border: 1px solid var(--line2); border-radius: 18px; padding: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }
.modal h2 { font-weight: 300; font-size: 32px; margin: 6px 0 10px; }
.modal h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; }
.modal > p { color: var(--text2); margin-bottom: 14px; }
.modal-x { position: absolute; inset-inline-end: 14px; top: 14px; z-index: 3; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.mission-modal .kicker { display: flex; align-items: center; gap: 8px; }
.palette { width: min(560px, 100%); padding: 14px; align-self: start; margin-top: 10vh; }
.palette .modal-x { display: none; }
.pal-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.pal-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--text2); }
.pal-list li.on { background: rgba(255, 255, 255, 0.06); color: #fff; }
.pal-list li span { flex: 1; min-width: 0; } .pal-list b { font-weight: 500; font-size: 13.5px; } .pal-list small { color: var(--muted); margin-inline-start: 8px; font-size: 12px; }
.pal-list em { font-style: normal; color: var(--muted); }
.pal-hint { margin-top: 10px; padding: 0 4px; }
.lightbox { width: min(1180px, 100%); padding: 0; }
/* close stays reachable while the article scrolls */
.lightbox > .modal-x { position: sticky; top: calc(12px + var(--sat)); inset-inline-end: auto; display: grid; margin-block: 12px -48px; margin-inline: auto 12px; background: rgba(0, 0, 0, 0.55); z-index: 4; }
.lb { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.lb-img { position: relative; background: #000; min-height: 420px; }
.lb-img img { width: 100%; height: 100%; object-fit: cover; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); }
.lb-prev { inset-inline-start: 14px; } .lb-next { inset-inline-end: 14px; }
.lb-txt { padding: 28px; display: grid; gap: 12px; align-content: start; }
.lb-txt .kicker { color: var(--amber); }
.lb-txt h2 { margin: 0; }
.lb-txt .lede { color: var(--text); font-size: 15px; }
.lb-txt p:not(.kicker):not(.lede):not(.note) { color: var(--text2); font-size: 13px; }
.lb-txt .btn { justify-self: start; }
.toasts { position: fixed; z-index: 90; left: 50%; bottom: calc(24px + var(--sab)); transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: rgba(14, 17, 24, 0.96); border: 1px solid var(--line2); font-size: 12.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); animation: fadeUp 0.4s cubic-bezier(.2, .8, .2, 1); }
.toast-ok .ico { color: var(--green); } .toast-warn .ico { color: var(--yellow); } .toast-info .ico { color: var(--cyan); }

/* ---------- responsive */
@media (max-width: 1360px) {
  .hero { grid-template-columns: 280px minmax(0, 1fr) 300px; }
  .hero-title { font-size: 42px; }
  .dash-grid { grid-template-columns: 270px minmax(0, 1fr) 290px; }
  .mc-flight { grid-template-columns: 260px minmax(0, 1fr) 260px; }
}
@media (max-width: 1180px) {
  .nav-pill button { padding: 8px 11px; font-size: 12.5px; }
  .utc { display: none; }
  .hero { grid-template-columns: 280px minmax(0, 1fr); }
  .hero-right { grid-column: 1 / -1; border-inline-start: 0; border-top: 1px solid var(--line); grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .hero-right .panel + .panel { border-top: 0; border-inline-start: 1px solid var(--line); }
  .iod-card { aspect-ratio: 1.6; }
  .cards-row { grid-template-columns: 1fr 1fr; }
  .lower-row { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .dash-col.center { grid-column: 1 / -1; order: -1; }
  .view-weather { grid-template-columns: 1fr; }
  .mc-flight { grid-template-columns: 1fr 1fr; }
  .mc-center { grid-column: 1 / -1; order: -1; }
  .mc-ops { grid-template-columns: 1fr 1fr; }
  .mc-ops .ops-col:last-child { grid-column: 1 / -1; }
  .ex-stats { inset-inline-start: 20px; width: 250px; }
  .ex-info { inset-inline-end: 20px; width: 280px; }
}
@media (max-width: 820px) {
  :root { --nav: 56px; }
  body { font-size: 13.5px; }
  .nav { padding-inline-start: calc(14px + var(--sal)); padding-inline-end: calc(14px + var(--sar)); }
  .nav-pill { display: none; }
  .nav-r { margin-inline-start: auto; }
  .tabbar { display: flex; position: fixed; z-index: 40; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; padding: 6px calc(6px + var(--sar)) calc(6px + var(--sab)) calc(6px + var(--sal)); background: rgba(6, 7, 11, 0.94); border-top: 1px solid var(--line); justify-content: space-around; }
  .tabbar button { display: grid; justify-items: center; gap: 3px; padding: 6px 4px; min-width: 58px; color: var(--muted); font-size: 10px; border-radius: 10px; }
  .tabbar button.on { color: #fff; background: rgba(255, 255, 255, 0.06); }
  .tabbar button.on .ico { color: var(--cyan); }
  .main { padding: calc(var(--nav) + var(--sat) + 12px) calc(12px + var(--sar)) calc(88px + var(--sab)) calc(12px + var(--sal)); }
  .toasts { bottom: calc(80px + var(--sab)); }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-stage { order: -1; min-height: 360px; border-bottom: 1px solid var(--line); }
  .hero-imgbox { inset: -5% -30%; }
  .hero-img { width: 100%; }
  .hero-img.hero-earth, .hero-img.hero-mars, .hero-img.hero-jupiter { width: 56%; }
  .hero-left { border-inline-end: 0; padding: 20px; }
  .hero-title { font-size: 38px; }
  .hero-text { max-width: none; }
  .hero-kpis { inset-inline-end: 14px; bottom: 44px; gap: 10px; }
  .hero-kpis b { font-size: 20px; }
  .target-tag { inset-inline-end: 14px; top: 14px; padding: 8px 10px; }
  .dots { inset-inline-start: 16px; bottom: 16px; }
  .hero-right { grid-template-columns: 1fr; }
  .hero-right .panel + .panel { border-inline-start: 0; border-top: 1px solid var(--line); }
  .cards-row { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .orrery { height: 340px; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-col.center { grid-column: auto; }
  .dash-views { order: 3; margin: 0; width: 100%; } .dash-views button { flex: 1; }
  .dash-tools { margin-inline-start: auto; }
  .sys-card { position: static; width: auto; margin: 8px; }
  .mc-flight { grid-template-columns: 1fr; }
  .mc-center { min-height: 440px; }
  .mc-hud b { font-size: 17px; } .mc-hud.bottom b { font-size: 22px; } .mc-hud .met { font-size: 15px; }
  .evt-card { top: auto; bottom: 64px; transform: translateX(-50%); }
  .mc-ops { grid-template-columns: 1fr; }
  .mc-ops .ops-col:last-child { grid-column: auto; }
  .countdown b { font-size: 26px; }
  .disc-hero { min-height: 420px; }
  .disc-hero h1 { font-size: 40px; }
  .disc-hero-txt { padding: 22px; }
  .d-grid { grid-template-columns: 1fr; }
  .d-card.wide { grid-column: auto; } .d-card.tall { grid-row: auto; }
  .lb { grid-template-columns: 1fr; }
  .lb-img { min-height: 260px; aspect-ratio: 1.6; }
  .lb-txt { padding: 20px; }
  .modal-wrap { padding: 10px; align-items: end; }
  .modal { padding: 18px; border-radius: 16px; }
  .palette { align-self: start; margin-top: 4vh; }
  /* explorer on phones */
  .explorer { min-height: 0; }
  .ex-info { inset-inline-start: 16px; inset-inline-end: 16px; top: calc(var(--nav) + var(--sat) + 8px); transform: none; width: auto; pointer-events: none; }
  .ex-info .ghost-btn { pointer-events: auto; margin-top: 8px; }
  .ex-name { font-size: 22px; margin: 2px 0 8px; letter-spacing: 0.34em; }
  .desc-box { font-size: 12px; padding: 10px 12px; }
  .desc-box + .desc-box { display: none; }
  .ex-stats { inset-inline-start: 0; inset-inline-end: 0; top: auto; bottom: calc(132px + var(--sab)); transform: none; width: auto; display: flex; gap: 8px; overflow-x: auto; padding: 0 16px; pointer-events: auto; scrollbar-width: none; }
  .ex-stats::-webkit-scrollbar { display: none; }
  .ex-stats::before, .ex-arc { display: none; }
  .stat { margin: 0 !important; transform: none !important; flex: none; flex-direction: row-reverse; border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px; background: rgba(0, 0, 0, 0.45); }
  .stat > div { text-align: start; } .stat span { display: block; margin: 0; font-size: 10.5px; }
  .ex-select { bottom: calc(76px + var(--sab)); }
  .ex-ctl { inset-inline-end: 12px; top: calc(var(--nav) + var(--sat) + 8px); bottom: auto; flex-direction: column; }
  .ex-menu { display: none; }
  .ex-ctl .icon-btn { width: 34px; height: 34px; }
  .ex-info { inset-inline-end: 60px; }
}
@media (max-width: 420px) {
  .hero-title { font-size: 32px; }
  .countdown { flex-wrap: wrap; }
  .kpi b { font-size: 28px; }
  .craft { grid-template-columns: 96px 1fr; }
  .details-info { grid-template-columns: 100px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.mc-timeline { grid-template-columns: minmax(0, 1fr); }
.gallery, .g-strip, .tl-track { min-width: 0; }
.g-strip { flex: 1; }
.countdown .ring b { font-size: 12px; font-weight: 500; }
.countdown .ring small { margin-top: 0; font-size: 8px; }
.pipe-h small { display: block; }
.hero-stage::after { content: ''; position: absolute; top: 0; inset-inline-end: 0; bottom: 0; width: 170px; background: linear-gradient(90deg, transparent, rgba(7, 8, 12, 0.85)); pointer-events: none; z-index: 1; }
.hero-kpis, .target-tag, .dots { z-index: 2; }
@media (max-width: 820px) { .hero-stage::after { width: 110px; } }
.sim-banner { display: block; } .sim-banner .ico { vertical-align: -2px; margin-inline-end: 6px; }
@media (max-width: 820px) {
  .hero-kpis { display: none; }
  .not-scale { display: none; }
  .explorer-fallback p { bottom: auto; top: 46%; }
  .hero-stage::after { display: none; }
}
@media (min-width: 821px) { .evt-card { inset-inline-start: 18px; top: auto; bottom: 92px; transform: none; width: 340px; } }
/* closed drawer must not take part in layout or hit-testing */
.ex-drawer { visibility: hidden; transition: transform 0.6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0.6s; }
.ex-drawer.open { visibility: visible; transition: transform 0.6s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
/* mobile: keep scrolling cheap — no backdrop blur, no large blurred shadows, no extra full-screen layer */
@media (max-width: 820px) {
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(4, 5, 10, 0.96); }
  .panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
  .vignette { display: none; }
  .kpi.amber, .ai-card, .sys-card, .btn.glow-orange, .btn.violet { box-shadow: none; }
  .tabs { max-width: 100%; }
}

/* ================= language: RTL + Arabic typography ================= */
:root { --dirx: 1; }
[dir='rtl'] {
  --dirx: -1;
  --f-d: 'IBM Plex Sans Arabic', 'Exo 2', system-ui, sans-serif;
  --f-u: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
  --f-m: 'JetBrains Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;
}
/* Arabic letters join: never track or force case */
[dir='rtl'] *, [dir='rtl'] *::before, [dir='rtl'] *::after { letter-spacing: 0 !important; text-transform: none !important; }
[dir='rtl'] .mono, [dir='rtl'] .kv dd, [dir='rtl'] .tick { unicode-bidi: plaintext; }
[dir='rtl'] .ico.dirx { transform: scaleX(-1); }
[dir='rtl'] .brand-word { margin-inline-end: 0; }
[dir='rtl'] .logo span { font-family: 'Exo 2', var(--f-u); letter-spacing: 0.42em !important; }
/* Arabic needs a touch more size and leading than Latin caps labels */
[dir='rtl'] .kicker, [dir='rtl'] .live { font-size: 12px; }
[dir='rtl'] .panel-head h3, [dir='rtl'] .mini-h, [dir='rtl'] .ex-drawer h4 { font-size: 12.5px; }
[dir='rtl'] .mono { font-size: 11.5px; }
[dir='rtl'] .simtag { font-family: var(--f-u); font-size: 10px; }
[dir='rtl'] .hero-title { line-height: 1.22; font-weight: 300; }
[dir='rtl'] .disc-hero h1 { line-height: 1.25; }
[dir='rtl'] .modal h2, [dir='rtl'] .d-txt h3, [dir='rtl'] .iod-title { line-height: 1.3; }
[dir='rtl'] .ex-name { font-size: 34px; font-weight: 400; }
[dir='rtl'] .stat b { font-size: 13px; }
[dir='rtl'] .ms-grid small, [dir='rtl'] .tele-k small, [dir='rtl'] .hero-kpis small, [dir='rtl'] .tele-grid small, [dir='rtl'] .kpi small,
[dir='rtl'] .mc-hud small, [dir='rtl'] .pipe-s small, [dir='rtl'] .countdown small, [dir='rtl'] .crew small, [dir='rtl'] .target-tag small, [dir='rtl'] .facts dt { font-size: 11px; }
/* directional fades & gradients mirror with the layout */
[dir='rtl'] .hero-stage::after { background: linear-gradient(270deg, transparent, rgba(7, 8, 12, 0.85)); }
[dir='rtl'] .disc-hero::after { background: linear-gradient(270deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.2) 60%, transparent), linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent 50%); }
[dir='rtl'] .ex-stats::before { background: linear-gradient(270deg, transparent, rgba(255, 255, 255, 0.2)); }
[dir='rtl'] .ex-arc { transform: scaleX(-1); }
[dir='rtl'] .al-crit { background: linear-gradient(270deg, rgba(255, 93, 108, 0.16), rgba(255, 93, 108, 0.04)); }
[dir='rtl'] .ex-drawer { transform: translateX(-105%); }
[dir='rtl'] .ex-drawer.open { transform: none; }
[dir='rtl'] .tl-events button { transform: translateX(50%); }
[dir='rtl'] .tl-track input::-webkit-slider-runnable-track { background: linear-gradient(270deg, rgba(255, 170, 90, 0.8), rgba(255, 255, 255, 0.12)); }
/* plot areas keep a left→right time axis in both languages; labels and tooltips are translated */
.chart svg { direction: ltr; }
.report { text-align: start; }

/* ================= language menu ================= */
.lang-wrap { position: relative; }
.lang-btn { width: auto; padding: 0 11px; gap: 6px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 500; }
.lang-btn span { font-family: var(--f-u); }
.lang-menu { width: 200px; }
.lang-menu .note-i { justify-content: space-between; align-items: center; font-size: 14px; font-family: 'Inter', 'IBM Plex Sans Arabic', sans-serif; }
.lang-menu .note-i[lang='ar'] { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.lang-menu .note-i.on { color: var(--cyan); background: rgba(95, 212, 255, 0.06); }

/* ================= footer / copyright ================= */
.site-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 28px; padding: 16px 4px 4px; border-top: 1px solid var(--line); color: var(--text2); font-size: 12px; }
.site-foot .dim { color: var(--muted); }
.ex-credit { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); display: grid; gap: 2px; }
@media (max-width: 820px) { .site-foot { justify-content: center; text-align: center; } }

/* phones: a topic opens as a full-height page that scrolls as one surface */
@media (max-width: 820px) {
  .modal-wrap:has(.lightbox) { padding: 0; align-items: stretch; }
  .modal.lightbox { width: 100%; max-height: none; height: 100dvh; border-radius: 0; border: 0; padding-bottom: calc(24px + var(--sab)); }
  .lightbox > .modal-x { top: calc(10px + var(--sat)); }
  .lb-img { min-height: 0; aspect-ratio: 1.45; }
}