:root {
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #eef1f5; --text: #12161c; --muted: #5b6573;
  --border: #dde2e9; --accent: #1f5fd1; --accent-weak: #e3ecfb;
  --ok: #1a8f4c; --warn: #b7791f; --bad: #c53030; --info: #4a6fa5; --off: #8a94a3;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --radius: 12px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117; --surface: #151b23; --surface-2: #1c2430; --text: #e6edf3; --muted: #9aa6b4;
    --border: #2a3441; --accent: #6ea8fe; --accent-weak: #1a2b45;
    --ok: #3fb96f; --warn: #e0a43a; --bad: #f06a6a; --info: #7f9fcf; --off: #6b7685;
    --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1117; --surface: #151b23; --surface-2: #1c2430; --text: #e6edf3; --muted: #9aa6b4;
  --border: #2a3441; --accent: #6ea8fe; --accent-weak: #1a2b45;
  --ok: #3fb96f; --warn: #e0a43a; --bad: #f06a6a; --info: #7f9fcf; --off: #6b7685;
  --shadow: none; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
a { color: var(--accent); }
header.top {
  position: sticky; top: 0; z-index: 1000; background: var(--surface); border-bottom: 1px solid var(--border);
}
.top-inner { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.brand small { font-weight: 500; color: var(--muted); font-size: 12px; display: block; }
.brand svg { flex: none; }
nav.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
@media (max-width: 760px) { nav.tabs { order: 3; flex-basis: 100%; } .top-inner { gap: 8px; } }
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs button {
  background: none; border: 0; color: var(--muted); padding: 8px 12px; border-radius: 8px; cursor: pointer;
  font: inherit; font-weight: 550; white-space: nowrap;
}
nav.tabs button[aria-selected="true"] { background: var(--accent-weak); color: var(--accent); }
nav.tabs button:hover { color: var(--text); }
.theme-btn { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 6px 9px; cursor: pointer; }
main { max-width: 1240px; margin: 0 auto; padding: 20px 16px 60px; }
section.view { display: none; }
section.view.active { display: block; }
h1 { font-size: 26px; margin: 4px 0 6px; letter-spacing: -.01em; }
h2 { font-size: 18px; margin: 0 0 10px; }
h3 { font-size: 15px; margin: 0 0 6px; }
p.lead { color: var(--muted); margin: 0 0 18px; max-width: 820px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
main, section.view, .grid > * { min-width: 0; }
.banner > div { min-width: 0; overflow-wrap: anywhere; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); min-width: 0; }
.card.flat { box-shadow: none; }
.banner { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); margin-bottom: 16px; }
.banner .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.banner strong { font-size: 17px; }
.kpi .v { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--muted); font-size: 13px; }
.sat { display: flex; flex-direction: column; gap: 6px; border-left: 4px solid var(--off); }
.sat .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sat .name { font-weight: 700; font-size: 16px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.s-operational { color: var(--ok); } .s-degraded { color: var(--warn); } .s-unusable { color: var(--bad); }
.s-signal_only { color: var(--info); } .s-not_seen, .s-upcoming { color: var(--off); }
.sat.b-operational { border-left-color: var(--ok); } .sat.b-degraded { border-left-color: var(--warn); }
.sat.b-unusable { border-left-color: var(--bad); } .sat.b-signal_only { border-left-color: var(--info); }
.sat.b-upcoming { border-left-color: var(--accent); border-left-style: dashed; }
dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: 13px; }
dl.kv dt { color: var(--muted); } dl.kv dd { margin: 0; font-variant-numeric: tabular-nums; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.chart-box { position: relative; height: 300px; }
.chart-box.tall { height: 380px; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
select, input[type="number"], input[type="range"] { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
input[type="range"] { padding: 0; flex: 1; min-width: 160px; }
button.btn { font: inherit; background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 7px 12px; cursor: pointer; font-weight: 600; }
button.btn.ghost { background: var(--surface-2); color: var(--text); }
#map { height: 460px; border-radius: 10px; }
.legend-bar { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #fff5eb, #fee6ce, #fdd0a2, #fdae6b, #fd8d3c, #f16913, #d94801, #a63603, #7f2704); box-shadow: inset 0 0 0 1px var(--border); }
.legend-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.sky-wrap { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .sky-wrap { grid-template-columns: 1fr; } #map { height: 340px; } h1 { font-size: 22px; } }
svg.sky text { fill: var(--muted); font-size: 11px; }
.risk { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.risk-0 { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.risk-1 { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.risk-2 { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.risk-3 { background: var(--bad); color: #fff; }
.note { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--muted); }
.strip { display: grid; gap: 2px; }
.strip .cell { height: 16px; border-radius: 3px; background: var(--surface-2); }
code { font-family: var(--mono); font-size: 13px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
footer .inner { max-width: 1240px; margin: 0 auto; padding: 18px 16px; }
.empty { padding: 30px; text-align: center; color: var(--muted); }
.leaflet-container { background: var(--surface-2); font: inherit; }

/* today-in-brief */
.brief ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.brief li { display: grid; grid-template-columns: 10px minmax(110px, 160px) 1fr; gap: 10px; align-items: baseline; }
.brief li .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.brief li b { font-weight: 600; }
@media (max-width: 600px) { .brief li { grid-template-columns: 10px 1fr; } .brief li span.txt { grid-column: 2; } }
.conf-high { color: var(--bad); font-weight: 600; } .conf-medium { color: var(--warn); font-weight: 600; } .conf-low { color: var(--muted); }

/* findings */
.findings article { display: flex; flex-direction: column; }
.findings article h2 { font-size: 17px; line-height: 1.3; }
.findings article p { margin: 0 0 10px; flex: 1; }
.findings .tag { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
tr.clickable { cursor: pointer; } tr.clickable:hover td { background: var(--accent-weak); }
.grid > * { min-width: 0; }
#events td { white-space: normal; }
#cnDips, #flareEvents, #itfEpisodes, #events, #availability, #anomTable, #orbitTable, #dataTable, #apiTable { overflow-x: auto; }
.bubcal td, .bubcal th { padding: 3px 2px; text-align: center; }
.bubcal td:first-child, .bubcal th:first-child { text-align: left; padding-right: 10px; white-space: nowrap; }
.bubcal .cell { width: 22px; height: 18px; border-radius: 3px; margin: 0 auto; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
/* data-source labels */
.srcnote { font-size: 13px; color: var(--muted); margin: -10px 0 16px; max-width: 900px; }
.src { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; margin-right: 5px; vertical-align: 1px; }
.src-navic { background: var(--accent-weak); color: var(--accent); }
.src-gps { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.src-ext { background: transparent; color: var(--muted); border: 1px solid var(--border); }
#covCities, #covStations, #covSources { overflow-x: auto; }
@media (min-width: 761px) { nav.tabs { flex-wrap: wrap; overflow: visible; } nav.tabs button { padding: 7px 10px; } }

/* ---------------------------------------------------------------- 3D stages (always dark: it is space) */
.hero3d { margin: 14px 0 16px; }
.hero-note { margin: 6px 2px 0; }
.stage { position: relative; overflow: hidden; border-radius: var(--radius); isolation: isolate; font-size: 13px; color: #dfe8f3;
  height: clamp(460px, 68vh, 700px); border: 1px solid rgba(110, 168, 254, .18);
  background: radial-gradient(120% 90% at 62% 38%, #12264a 0%, #08101f 52%, #03060c 100%); }
.stage-iono { height: clamp(400px, 58vh, 600px); margin-bottom: 4px; }
.stage-sky { height: clamp(380px, 54vh, 560px); background: radial-gradient(120% 100% at 50% 100%, #0d2a3b 0%, #071321 55%, #03060c 100%); }
.stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.stage > canvas:focus-visible { box-shadow: inset 0 0 0 2px #6ea8fe; }
.stage .muted { color: #9aa6b4; }
.stage-fallback { display: grid; place-items: center; height: 100%; padding: 24px; text-align: center; color: #9aa6b4; }
.stage-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.stage-label { position: absolute; left: 0; top: 0; margin: -9px 0 0 11px; white-space: nowrap; font-size: 12px; font-weight: 600;
  color: #eef4fb; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, .85); will-change: transform; }
.stage-label.lb-dim { opacity: .55; }
.stage-label.lb-area { margin: -20px 0 0 -58px; font-size: 11px; font-weight: 500; color: #8fb8f5; letter-spacing: .03em; }
.stage-label.lb-station { font-size: 11px; font-weight: 500; color: #cfe0f5; margin: -7px 0 0 8px; }
.stage-label.lb-compass { margin: -11px 0 0 -6px; font-size: 16px; font-weight: 800; color: #fff; }
.stage-label.lb-elev { margin: -8px 0 0 4px; font-size: 11px; font-weight: 500; color: #9cc4f0; }
.stage-label.lb-me { margin: 6px 0 0 -11px; font-size: 11px; color: #fff; }
.stage .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.stage .sw.round { border-radius: 50%; }
.stage-tip { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; max-width: 270px; padding: 7px 10px; font-size: 12px; line-height: 1.45;
  background: rgba(8, 14, 26, .94); border: 1px solid rgba(110, 168, 254, .35); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.stage-bar { position: absolute; top: 12px; left: 12px; right: 58px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; }
.stage .seg, .stage .chips { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 10px;
  background: rgba(8, 14, 26, .72); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(6px); }
.stage-bar button { font: inherit; font-size: 12.5px; font-weight: 600; color: #b9c7d9; background: transparent; border: 0; border-radius: 7px; padding: 5px 10px; cursor: pointer; }
.stage-bar button:hover { color: #fff; }
.stage-bar button[aria-pressed="true"] { color: #fff; background: rgba(110, 168, 254, .22); box-shadow: inset 0 0 0 1px rgba(110, 168, 254, .6); }
.stage-cap { position: absolute; left: 14px; top: 58px; z-index: 2; max-width: min(380px, 46%); font-size: 12.5px; line-height: 1.5; color: #c3d1e2;
  text-shadow: 0 1px 3px #000; pointer-events: none; }
.stage-reset { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 10px; font-size: 18px; line-height: 1;
  color: #dfe8f3; background: rgba(8, 14, 26, .72); border: 1px solid rgba(255, 255, 255, .12); cursor: pointer; backdrop-filter: blur(6px); }
.stage-reset:hover { color: #fff; border-color: rgba(110, 168, 254, .6); }
.stage-time { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  background: rgba(8, 14, 26, .74); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; backdrop-filter: blur(6px); }
.stage-time input { flex: 1; min-width: 60px; accent-color: #6ea8fe; }
.stage-time .tl { font-size: 12px; color: #c9d6e6; white-space: nowrap; }
.stage-time button { font: inherit; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(110, 168, 254, .2); border: 1px solid rgba(110, 168, 254, .5);
  border-radius: 7px; padding: 4px 10px; cursor: pointer; min-width: 36px; }
.stage-legend { position: absolute; right: 12px; bottom: 66px; z-index: 2; max-width: 230px; padding: 8px 11px; font-size: 12px; line-height: 1.65;
  background: rgba(8, 14, 26, .74); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; backdrop-filter: blur(6px); }
.stage:not(:has(.stage-time)) .stage-legend { bottom: 12px; }
.stage-legend .lg-title { margin-top: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8e9bab; }
.stage-legend .lg-title:first-child { margin-top: 0; }
.stage-legend .ln { display: inline-block; width: 18px; height: 2px; margin-right: 6px; vertical-align: 3px; background: linear-gradient(90deg, #3fb96f, rgba(63, 185, 111, .15)); }
.stage-legend .lg-ramp { height: 8px; border-radius: 4px; margin-top: 4px; }
.stage-legend .lg-ticks { display: flex; justify-content: space-between; font-size: 11px; color: #9aa6b4; }
.stage-panel { position: absolute; top: 60px; right: 12px; z-index: 4; width: min(310px, calc(100% - 24px)); max-height: calc(100% - 140px); overflow: auto;
  padding: 12px 14px; font-size: 13px; line-height: 1.5; background: rgba(8, 14, 26, .93); border: 1px solid rgba(110, 168, 254, .38); border-radius: 12px;
  backdrop-filter: blur(8px); box-shadow: 0 12px 32px rgba(0, 0, 0, .55); animation: panelIn .18s ease-out; }
.stage-panel .ph { font-size: 15px; padding-right: 22px; }
.stage-panel .pill-d { font-size: 12px; font-weight: 700; margin-top: 2px; }
.stage-panel p { margin: 7px 0; }
.stage-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0; }
.stage-panel dt { color: #9aa6b4; }
.stage-panel dd { margin: 0; }
.stage-x { position: absolute; top: 6px; right: 8px; font-size: 22px; line-height: 1; color: #c9d6e6; background: none; border: 0; cursor: pointer; }
@keyframes panelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .stage { height: 500px; }
  .stage-iono, .stage-sky { height: 420px; }
  .stage-cap { display: none; }
  .stage-bar { right: 54px; gap: 6px; }
  .stage-bar button { padding: 5px 8px; font-size: 12px; }
  .stage-time { flex-wrap: wrap; row-gap: 2px; }
  .stage-time .tl { order: 3; flex-basis: 100%; text-align: center; font-size: 11px; }
  .stage-legend { bottom: 84px; max-width: 168px; padding: 6px 8px; font-size: 11px; line-height: 1.5; }
  .stage-panel { top: auto; bottom: 84px; max-height: 60%; }
}

.stage-legend summary { cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c9d6e6; list-style: none; }
.stage-legend summary::-webkit-details-marker { display: none; }
.stage-legend summary::before { content: "▸ "; }
.stage-legend details[open] summary::before { content: "▾ "; }
.stage-legend details[open] summary { margin-bottom: 4px; }

/* page-level segmented tabs (theme-aware) */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2 { margin: 0; }
.seg-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface-2); }
.seg-tabs button { font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: 7px; padding: 4px 12px; cursor: pointer; }
.seg-tabs button[aria-pressed="true"] { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.seg-tabs button[hidden] { display: none; }

/* motion + header polish */
section.view.active { animation: viewIn .28s ease-out; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
header.top { background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: saturate(1.4) blur(10px); }
.card.sat { transition: transform .16s ease, box-shadow .16s ease; }
.card.sat:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16, 24, 40, .12); }
@media (prefers-reduced-motion: reduce) {
  section.view.active, .stage-panel { animation: none; }
  .card.sat, .card.sat:hover { transition: none; transform: none; }
}

/* ================================================================ Live map (full-bleed 3D, always dark: it is space) */
body.live-mode main { max-width: none; padding: 0; }
body.live-mode footer { display: none; }
body.live-mode { overflow: hidden; background: #02050b; }
section#v-live.active { animation: none; }
.lm-host { position: relative; height: calc(100dvh - var(--hdr, 58px)); min-height: 520px; }
.lm [hidden] { display: none !important; }
body.live-mode header.top { --surface: #0a111e; --text: #e6edf3; --muted: #9aa6b4; --border: #1b2433; --accent: #6ea8fe; --accent-weak: #1a2b45; color: var(--text); color-scheme: dark; }
.lm-host.stage.lm { height: calc(100dvh - var(--hdr, 58px)); min-height: 480px; }
.stage.lm { border: 0; border-radius: 0; font-size: 13px; color: #e4ecf6; font-variant-numeric: tabular-nums;
  background: radial-gradient(90% 80% at 55% 45%, #0b1b36 0%, #050b17 55%, #010309 100%); }
.stage.lm > canvas { opacity: 0; transition: opacity .9s ease; }
.stage.lm.lm-ready > canvas { opacity: 1; }
.lm { --glass: rgba(9, 15, 28, .72); --glass-b: rgba(255, 255, 255, .09); --ink2: #9fb0c5; }
.lm-top > *, .lm-rail, .lm-legend, .lm-card, .lm-time, .lm-replaybar {
  background: var(--glass); border: 1px solid var(--glass-b); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05); border-radius: 14px; }
.lm-top { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 5; display: flex; align-items: flex-start; gap: 10px; pointer-events: none; }
.lm-title { margin-right: auto; }
.lm-views { flex: none; display: flex; gap: 2px; padding: 4px; }
.lm-views button { font: inherit; font-size: 12.5px; font-weight: 700; color: #b9c7d9; background: transparent; border: 0; border-radius: 9px; padding: 7px 12px; cursor: pointer; }
.lm-views button:hover { color: #fff; }
.lm-views button[aria-pressed="true"] { color: #fff; background: rgba(110, 168, 254, .22); box-shadow: inset 0 0 0 1px rgba(110, 168, 254, .55); }
.lm-top > * { pointer-events: auto; }
.lm-title { display: flex; align-items: center; gap: 11px; padding: 9px 14px 9px 10px; min-width: 0; }
.lm-title strong { display: block; font-size: 14.5px; letter-spacing: -.005em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-title small { display: block; color: var(--ink2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-title > div { min-width: 0; }
.lm-live { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #bff5d4; background: rgba(63, 185, 111, .16); border: 1px solid rgba(63, 185, 111, .45); padding: 3px 8px 3px 7px; border-radius: 999px; }
.lm-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3fb96f; box-shadow: 0 0 0 0 rgba(63, 185, 111, .7); animation: lmPulse 2s infinite; }
.lm-live.hist { color: #ffe2b0; background: rgba(224, 164, 58, .14); border-color: rgba(224, 164, 58, .45); }
.lm-live.hist::before { background: #e0a43a; animation: none; }
@keyframes lmPulse { 70% { box-shadow: 0 0 0 7px rgba(63, 185, 111, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 185, 111, 0); } }
.lm-search { position: relative; flex: 0 1 280px; padding: 0; }
.lm-search input { width: 100%; font: inherit; font-size: 13.5px; color: #fff; background: transparent; border: 0; outline: none; padding: 11px 14px 11px 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239fb0c5' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px 50%; }
.lm-search input::placeholder { color: #8394a9; }
.lm-search:focus-within { border-color: rgba(110, 168, 254, .7); }
.lm-search ul { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 5px; list-style: none; border-radius: 12px;
  background: rgba(9, 15, 28, .95); border: 1px solid var(--glass-b); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.lm-search li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.lm-search li span { color: var(--ink2); font-size: 12px; }
.lm-search li[aria-selected="true"], .lm-search li:hover { background: rgba(110, 168, 254, .18); }
/* layer rail */
.lm-rail { position: absolute; top: 76px; left: 14px; z-index: 4; width: 214px; padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100% - 180px); overflow: auto; scrollbar-width: thin; }
.lm-rail-h { font-size: 10.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: #7f90a6; padding: 8px 8px 4px; }
.lm-rail-h:first-child { padding-top: 2px; }
.lm-rail button { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: 13px; font-weight: 600; color: #c7d3e2; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 7px 8px; cursor: pointer; transition: background .15s, color .15s; }
.lm-rail button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.lm-rail button[aria-pressed="true"] { color: #fff; background: rgba(110, 168, 254, .16); border-color: rgba(110, 168, 254, .5); }
.lm-rail button i { flex: none; width: 22px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.lm-rail button span { flex: 1; }
.lm-rail kbd { font: 600 10.5px var(--mono); color: #7f90a6; border: 1px solid rgba(255, 255, 255, .14); border-radius: 4px; padding: 0 4px; }
.lm-rail label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 12.5px; color: #c7d3e2; cursor: pointer; border-radius: 8px; }
.lm-rail label:hover { background: rgba(255, 255, 255, .05); }
.lm-rail input[type=checkbox] { accent-color: #6ea8fe; margin: 0; }
.lm-rail .lm-replay { align-items: flex-start; background: linear-gradient(135deg, rgba(240, 185, 58, .16), rgba(239, 122, 42, .08)); border-color: rgba(240, 185, 58, .35); }
.lm-rail .lm-replay i { width: auto; height: auto; box-shadow: none; font-style: normal; font-size: 17px; line-height: 1.1; color: #fde39a; }
.lm-rail .lm-replay small { font-weight: 500; color: #c9b38a; font-size: 11.5px; }
.replaying .lm-rail .lm-replay { border-color: #f0b93a; background: rgba(240, 185, 58, .22); }
/* city chips */
.lm-cities { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.lm-city { position: absolute; left: 0; top: 0; margin: -12px 0 0 8px; display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 8px 0 7px;
  font: inherit; font-size: 12px; font-weight: 650; color: #f2f6fb; white-space: nowrap; cursor: pointer; pointer-events: auto;
  background: rgba(6, 11, 22, .62); border: 1px solid rgba(255, 255, 255, .13); border-radius: 7px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35); transition: border-color .15s, background .15s; will-change: transform; }
.lm-city .val { font-weight: 750; color: #fff; padding-left: 6px; border-left: 2px solid var(--c, #888); line-height: 1; }
.lm-city .val:empty { display: none; }
.lm-city.t3 { font-size: 11px; height: 21px; font-weight: 600; background: rgba(6, 11, 22, .5); }
.lm-city.nodata .nm { color: #b9c5d4; }
.lm-city:hover { border-color: rgba(255, 255, 255, .45); background: rgba(14, 24, 44, .85); z-index: 2; }
.lm-city.sel { border-color: #fff; background: rgba(20, 34, 62, .92); z-index: 3; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), 0 4px 16px rgba(0, 0, 0, .5); }
.replaying .lm-city .val { display: none; }
.stage-label.lm-satlab { font-size: 11.5px; padding: 2px 7px; border-radius: 6px; background: rgba(6, 11, 22, .66); border: 1px solid rgba(255, 255, 255, .12); text-shadow: none; }
.stage-label.lm-satlab small { color: #9fb0c5; font-weight: 500; }
.stage-label.lm-rlab { margin: -34px 0 0 -40px; padding: 4px 8px; font-size: 12px; border-radius: 7px; text-shadow: none; background: rgba(6, 11, 22, .72); border: 1px solid rgba(255, 255, 255, .14); transition: border-color .2s, background .2s; }
.stage-label.lm-rlab small { color: #b8a77f; font-weight: 500; }
.stage-label.lm-rlab.hot { border-color: #f0b93a; background: rgba(70, 44, 6, .85); }
/* legend */
.lm-legend { position: absolute; right: 14px; bottom: 92px; z-index: 4; width: 280px; padding: 12px 14px; font-size: 12.5px; line-height: 1.45; }
.lm-legend .lg-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.lm-legend .lg-h b { font-size: 13.5px; color: #fff; }
.lm-legend .lg-h span { color: var(--ink2); font-size: 11.5px; text-align: right; }
.lm-legend .lg-ramp { height: 9px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.lm-legend .lg-ticks { display: flex; justify-content: space-between; margin-top: 3px; font-size: 11px; color: #b3c1d2; }
.lm-legend .lg-words { color: #8394a9; margin-top: 0; }
.lm-legend p { margin: 8px 0 0; color: #c3cfdd; }
.lm-legend .lg-note { color: #8394a9; font-size: 11.5px; margin-top: 6px; }
.lm-legend .lg-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.lm-legend .lg-chip { font-size: 11px; font-weight: 600; color: #cfdbea; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
/* time bar */
.lm-time { position: absolute; left: 14px; right: 14px; bottom: 30px; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 9px 14px 9px 9px; }
.lm-play { flex: none; width: 40px; height: 40px; border-radius: 50%; font-size: 14px; color: #fff; cursor: pointer; border: 0;
  background: linear-gradient(135deg, #3d7fe6, #6ea8fe); box-shadow: 0 4px 14px rgba(61, 127, 230, .45); }
.lm-play:hover { filter: brightness(1.1); }
.lm-track { position: relative; flex: 1; min-width: 80px; height: 40px; }
.lm-daynight { position: absolute; left: 0; right: 0; top: 14px; height: 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.lm-flares { position: absolute; inset: 0; pointer-events: none; }
.lm-flares span { position: absolute; top: 11px; width: 2px; height: 18px; margin-left: -1px; background: #f0b93a; border-radius: 1px; opacity: .7; font-size: 0; }
.lm-flares span.big { opacity: 1; width: 3px; background: #fde39a; box-shadow: 0 0 8px #f0b93a; }
.lm-flares span.big::after, .lm-flares span.det::after { content: attr(data-l); }
.lm-flares span.det { background: #6ea8fe; box-shadow: 0 0 8px #6ea8fe; opacity: 1; width: 3px; }
.lm-flares span::after { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: #fde39a; white-space: nowrap; }
.lm-flares span.det::after { color: #a9cbff; top: 19px; }
.lm-track input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.lm-track input[type=range]::-webkit-slider-runnable-track { height: 40px; background: transparent; }
.lm-track input[type=range]::-moz-range-track { height: 40px; background: transparent; }
.lm-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 30px; margin-top: 5px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 3px rgba(110, 168, 254, .45), 0 0 14px rgba(255, 255, 255, .6); }
.lm-track input[type=range]::-moz-range-thumb { width: 4px; height: 30px; border: 0; border-radius: 2px; background: #fff; box-shadow: 0 0 0 3px rgba(110, 168, 254, .45); }
.lm-track input[type=range]:focus-visible { outline: 2px solid #6ea8fe; outline-offset: 2px; border-radius: 6px; }
.lm-tl { flex: none; min-width: 210px; text-align: right; line-height: 1.3; }
.lm-tl strong { display: block; font-size: 13.5px; color: #fff; }
.lm-tl small { color: var(--ink2); font-size: 11.5px; }
.lm-credit { position: absolute; left: 0; right: 0; bottom: 7px; z-index: 3; text-align: center; font-size: 10.5px; color: #6f8197; pointer-events: none; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* city card */
.lm-card { position: absolute; top: 76px; right: 14px; z-index: 6; width: 340px; max-height: calc(100% - 76px - 92px - 112px); overflow: auto; padding: 14px 16px 12px; animation: lmCardIn .22s ease-out; scrollbar-width: thin; }
@keyframes lmCardIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.lm-x { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; font-size: 20px; line-height: 1; color: #c9d6e6; background: rgba(255, 255, 255, .06); border: 0; border-radius: 8px; cursor: pointer; }
.lm-x:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.lc-h h3 { margin: 0; font-size: 18px; color: #fff; letter-spacing: -.01em; padding-right: 30px; }
.lc-h small { color: var(--ink2); font-size: 12px; }
.lc-big { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 6px; padding: 10px 12px; border-radius: 11px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, transparent), rgba(255, 255, 255, .02)); border-left: 3px solid var(--c); }
.lc-big .v { font-size: 30px; font-weight: 750; color: #fff; letter-spacing: -.02em; line-height: 1; }
.lc-big .u { color: #c3cfdd; font-size: 12.5px; }
.lc-dl { display: grid; grid-template-columns: 96px 1fr; gap: 7px 10px; margin: 8px 0 4px; font-size: 12.5px; }
.lc-dl dt { color: #8394a9; }
.lc-dl dd { margin: 0; color: #e4ecf6; min-width: 0; }
.lc-dl .muted { color: #8394a9; }
.lc-err { display: grid; grid-template-columns: auto 1fr 1fr; gap: 1px 10px; margin-bottom: 3px; }
.lc-err span { color: #b3c1d2; }
.lc-err em { font-style: normal; font-size: 10.5px; color: #8394a9; text-transform: uppercase; letter-spacing: .05em; text-align: right; }
.lc-err b { font-weight: 650; text-align: right; }
.lc-dl small { font-size: 11px; line-height: 1.35; display: block; }
.lm-card:not([hidden]) ~ .lm-legend p, .lm-card:not([hidden]) ~ .lm-legend .lg-meta { display: none; }
.lc-sats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.lc-sats span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.lc-sats i { width: 7px; height: 7px; border-radius: 50%; }
.lc-sats em { font-style: normal; color: #8394a9; }
.lc-spark { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.lc-spark svg { width: 100%; height: 66px; display: block; margin-top: 4px; cursor: crosshair; }
.lc-sh { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #c3cfdd; }
/* replay banner */
.lm-replaybar { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 6; width: min(660px, calc(100% - 28px)); display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border-color: rgba(240, 185, 58, .4); background: linear-gradient(135deg, rgba(48, 30, 6, .88), rgba(9, 15, 28, .88)); }
.lm-replaybar b { display: block; color: #fde39a; font-size: 14px; }
.lm-replaybar small { display: block; color: #d6c7a6; font-size: 12px; line-height: 1.45; margin-top: 2px; }
.lm-replaybar .rb-phase { flex: none; font-weight: 750; font-size: 12px; color: #fff; padding: 4px 9px; border-radius: 999px; background: rgba(240, 185, 58, .25); white-space: nowrap; }
.lm-replaybar .btn-x { flex: none; font: inherit; font-size: 12.5px; font-weight: 650; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.replaying .lm-legend, .replaying .lm-card { display: none; }
.lm .stage-tip { background: rgba(6, 11, 22, .94); border-color: rgba(255, 255, 255, .16); border-radius: 10px; }
/* status page call-to-action */
.live-cta { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; padding: 16px 18px; border-radius: var(--radius); color: #e9f1fb; text-decoration: none; overflow: hidden;
  background: radial-gradient(120% 160% at 100% 0%, rgba(239, 122, 42, .35), transparent 55%), radial-gradient(100% 140% at 0% 100%, rgba(61, 127, 230, .45), transparent 60%), #071226;
  border: 1px solid rgba(110, 168, 254, .3); box-shadow: 0 10px 30px rgba(7, 18, 38, .25); }
.live-cta b { display: block; font-size: 16px; color: #fff; }
.live-cta span { font-size: 13.5px; color: #b9c8dc; }
.live-cta .go { margin-left: auto; flex: none; font-weight: 700; font-size: 13.5px; padding: 8px 14px; border-radius: 999px; background: #fff; color: #0b1730; }
.live-cta:hover .go { background: #dbe8ff; }
nav.tabs button[data-view="live"]::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; vertical-align: 2px; border-radius: 50%; background: #ef7a2a; box-shadow: 0 0 6px #ef7a2a; }
@media (max-width: 900px) {
  .lm-rail { width: auto; right: 14px; top: 70px; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; max-height: none; padding: 5px; gap: 4px; scrollbar-width: none; }
  .lm-rail::-webkit-scrollbar { display: none; }
  .lm-rail-h, .lm-rail label, .lm-rail kbd { display: none; }
  .lm-rail button { flex: none; width: auto; padding: 6px 10px; white-space: nowrap; }
  .lm-rail button i { width: 14px; }
  .lm-rail .lm-replay small, .lm-rail .lm-replay br { display: none; }
  .lm-card { top: auto; bottom: 98px; left: 14px; right: 14px; width: auto; max-height: 46%; }
  .lm-card:not([hidden]) ~ .lm-legend { display: none; }
  .lm-legend { left: 14px; right: auto; bottom: 98px; width: min(300px, calc(100% - 28px)); padding: 9px 11px; }
  .lm-legend p { display: none; }
  .lm-replaybar { bottom: 98px; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .lm-top { top: 10px; left: 10px; right: 10px; gap: 8px; }
  .lm-title { padding: 7px 10px 7px 8px; gap: 8px; }
  .lm-title strong { font-size: 13px; }
  .lm-title small { display: none; }
  .lm-search { flex: 0 0 44px; transition: flex-basis .2s; }
  .lm-search:focus-within { flex-basis: 60%; }
  .lm-search input { padding-right: 4px; }
  .lm-search input::placeholder { color: transparent; }
  .lm-rail { left: 10px; right: 10px; top: 60px; }
  .lm-time { left: 10px; right: 10px; bottom: 22px; flex-wrap: wrap; gap: 2px 10px; padding: 7px 10px 6px 7px; }
  .lm-play { width: 36px; height: 36px; }
  .lm-tl { min-width: 0; flex-basis: 100%; order: 3; text-align: center; }
  .lm-tl strong { display: inline; font-size: 12px; } .lm-tl small { margin-left: 6px; }
  .lm-card, .lm-legend, .lm-replaybar { left: 10px; right: 10px; bottom: 112px; width: auto; transform: none; }
  .lm-credit { font-size: 9.5px; bottom: 4px; }
  .lc-dl { grid-template-columns: 84px 1fr; }
  .lm-replaybar small { display: none; }
  .live-cta { flex-wrap: wrap; } .live-cta .go { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .lm-live::before, .lm-card { animation: none; } .stage.lm > canvas { transition: none; } }