:root {
  --void: #070B11;
  --panel: #0D141E;
  --panel-raised: #111B27;
  --line: #1C2A38;
  --line-bright: #2A4051;
  --text: #E6EDF3;
  --text-dim: #76899A;
  --text-faint: #668193;
  --accent: #3FB6FF;
  --accent-soft: #7FE7C4;
}

* { box-sizing: border-box; }

html, body {
  background: var(--void);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background:
    radial-gradient(circle at 72% 44%, rgba(18, 57, 76, 0.16), transparent 34%),
    var(--void);
  display: flex;
  flex-direction: column;
}

.app-shell {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.app-shell::before {
  background-image: linear-gradient(rgba(63, 182, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 182, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* ---- Top HUD ---- */
.hud-top {
  align-items: center;
  background: rgba(13, 20, 30, 0.9);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex: none;
  justify-content: space-between;
  min-height: 78px;
  padding: 16px 28px;
  position: relative;
  z-index: 2;
}

.hud-top::after {
  background: linear-gradient(90deg, var(--accent), var(--accent-soft), transparent 70%);
  content: '';
  height: 1px;
  left: 28px;
  opacity: 0.8;
  position: absolute;
  top: 0;
  width: min(360px, 42vw);
}

.brand-lockup,
.hud-right,
.network-state,
.clock-block,
.brand-meta,
.map-mode,
.map-bottomline,
.stats-header,
.feed-key {
  align-items: center;
  display: flex;
}

.brand-lockup { gap: 14px; }

.brand-emblem {
  height: 38px;
  position: relative;
  width: 38px;
}

.emblem-ring,
.emblem-core {
  border-radius: 50%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.emblem-ring-outer {
  border: 1px solid rgba(63, 182, 255, 0.8);
  height: 34px;
  width: 34px;
}

.emblem-ring-inner {
  border: 1px solid rgba(127, 231, 196, 0.55);
  border-left-color: transparent;
  height: 22px;
  transform: translate(-50%, -50%) rotate(-32deg);
  width: 22px;
}

.emblem-core {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(63, 182, 255, 0.8);
  height: 5px;
  width: 5px;
}

.brand-copy { min-width: 0; }

.brand-meta,
.hud-label,
.map-overline,
.map-context,
.map-mode,
.map-bottomline,
.stats-header,
.panel-index,
.feed-key {
  font-size: 9px;
  letter-spacing: 1.4px;
  line-height: 1;
}

.brand-meta {
  color: var(--text-dim);
  gap: 8px;
  margin-bottom: 5px;
  white-space: nowrap;
}

.meta-divider { color: var(--text-faint); }

.mark {
  animation: pulse-mark 2s ease-in-out infinite;
  color: var(--accent-soft);
  font-size: 8px;
}

@keyframes pulse-mark {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 0.78;
}

.subtitle {
  color: var(--text-dim);
  font-size: 9px;
  letter-spacing: 1.2px;
  margin-top: 7px;
}

.hud-right { gap: 28px; }

.network-state,
.clock-block {
  align-items: flex-end;
  flex-direction: column;
  gap: 5px;
}

.hud-label { color: var(--text-faint); }

.network-state strong,
.clock-block strong {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.network-state strong { color: var(--accent-soft); }
.clock-block strong { color: var(--text); }
.network-state.is-partial strong { color: #DCA86B; }
.network-state.is-standby strong { color: var(--text-faint); }
.network-state.is-syncing strong { color: var(--accent); }
.network-state.is-replay strong { color: var(--accent); }

/* ---- Command deck ---- */
.command-deck {
  align-items: flex-end;
  background: rgba(9, 15, 23, 0.94);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex: none;
  gap: 16px;
  min-height: 62px;
  padding: 10px 28px;
  position: relative;
  z-index: 2;
}

.command-deck::after {
  background: linear-gradient(90deg, transparent, rgba(63, 182, 255, 0.38), transparent);
  bottom: -1px;
  content: '';
  height: 1px;
  left: 18%;
  position: absolute;
  width: 64%;
}

.command-identity,
.command-control,
.command-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.command-identity { margin-right: auto; }

.command-label {
  color: var(--text-faint);
  font-size: 8px;
  letter-spacing: 1.1px;
  line-height: 1;
}

.command-readout {
  color: var(--accent-soft);
  font-size: 10px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.command-control select,
.command-search input {
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--line-bright);
  border-radius: 0;
  color: var(--text);
  font: inherit;
  font-size: 9px;
  min-height: 28px;
  min-width: 124px;
  padding: 0 9px;
}

.command-search input { min-width: 188px; }
.history-format { appearance: none; background: var(--panel); border: 1px solid var(--line-bright); color: var(--text-faint); font: inherit; font-size: 8px; min-height: 28px; padding: 0 7px; }
.command-control select:focus,
.command-search input:focus,
.history-format:focus { border-color: var(--accent); outline: 1px solid rgba(63, 182, 255, 0.2); }
.command-search input::placeholder { color: var(--text-faint); }

.command-segmented {
  display: flex;
  min-height: 28px;
}

.command-segmented button {
  background: var(--panel);
  border: 1px solid var(--line-bright);
  color: var(--text-faint);
  cursor: pointer;
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.7px;
  min-width: 42px;
  padding: 0 8px;
}

.command-segmented button + button { border-left: 0; }
.command-segmented button:hover,
.command-segmented button.is-active { background: rgba(63, 182, 255, 0.12); border-color: var(--accent); color: var(--accent-soft); }

.window-note {
  color: var(--text-faint);
  font-size: 7px;
  letter-spacing: 0.5px;
  margin-top: 1px;
  white-space: nowrap;
}

.command-export {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line-bright);
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 8px;
  gap: 8px;
  letter-spacing: 0.7px;
  min-height: 28px;
  padding: 0 10px;
  white-space: nowrap;
}

.command-export:hover { border-color: var(--accent); color: var(--accent-soft); }
.command-export:disabled { cursor: wait; opacity: 0.55; }
.command-export span { font-size: 12px; line-height: 1; }

.live-pulse,
.mode-dot,
.legend-dot {
  background: var(--accent-soft);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(127, 231, 196, 0.1), 0 0 10px rgba(127, 231, 196, 0.5);
  height: 5px;
  width: 5px;
}

.live-pulse { animation: pulse-mark 2s ease-in-out infinite; }

/* ---- Body shell: sidebar + map + intelligence rail ---- */
.body-shell {
  display: flex;
  flex: 1;
  gap: 16px;
  min-height: 0;
  padding: 18px 24px 14px;
  position: relative;
  z-index: 1;
}

.intel-panel {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow-y: auto;
  scrollbar-color: var(--line-bright) transparent;
  width: 292px;
}

.orbital-card,
.news-panel {
  background: linear-gradient(145deg, rgba(17, 27, 39, 0.94), rgba(8, 14, 22, 0.94));
  border: 1px solid var(--line);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18);
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.orbital-card {
  flex: 0 0 304px;
  padding: 16px 16px 13px;
}

.orbital-card::before,
.news-panel::before {
  border-color: var(--accent-soft);
  border-style: solid;
  border-width: 1px 0 0 1px;
  content: '';
  height: 9px;
  left: -1px;
  opacity: 0.65;
  position: absolute;
  top: -1px;
  width: 9px;
}

.intel-topline {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-width: 0;
}

.orbital-stage {
  background:
    radial-gradient(circle at 50% 48%, rgba(28, 99, 128, 0.22), transparent 40%),
    linear-gradient(145deg, rgba(4, 11, 18, 0.2), rgba(5, 12, 19, 0.9));
  border: 1px solid rgba(42, 64, 81, 0.8);
  height: 216px;
  margin-top: 13px;
  overflow: hidden;
  position: relative;
}

#orbital-globe {
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.orbital-fallback {
  align-items: center;
  color: var(--text-faint);
  display: flex;
  font-size: 8px;
  height: 100%;
  justify-content: center;
  letter-spacing: 0.8px;
  padding: 20px;
  text-align: center;
}

.orbital-scanline {
  background: linear-gradient(180deg, transparent, rgba(127, 231, 196, 0.12), transparent);
  height: 26%;
  inset: 37% 0 auto;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.orbit-tag {
  color: var(--text-faint);
  font-size: 7px;
  letter-spacing: 0.9px;
  line-height: 1.35;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.orbit-tag-top { left: 10px; top: 10px; }
.orbit-tag-bottom { bottom: 9px; right: 10px; text-align: right; }

.orbital-caption {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: 12px;
}

.orbital-caption strong {
  color: var(--accent-soft);
  font-size: 9px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.orbital-caption span {
  color: var(--text-faint);
  font-size: 8px;
  line-height: 1.35;
  text-align: right;
}

.news-panel {
  display: flex;
  flex: 0 0 460px;
  flex-direction: column;
  min-height: 460px;
  padding: 16px;
}

.news-panel-head { align-items: flex-start; }

.news-radar-stats {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  padding-bottom: 12px;
}

.news-radar-stats div { display: grid; gap: 4px; }

.news-radar-stats strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.news-radar-stats span {
  color: var(--text-faint);
  font-size: 6px;
  letter-spacing: 0.7px;
}

.news-status {
  color: var(--text-faint);
  font-size: 8px;
  letter-spacing: 0.6px;
  line-height: 1.5;
  margin: 11px 0 7px;
  min-height: 13px;
}

.news-status.is-loading { color: var(--accent); }
.news-status.is-live { color: var(--accent-soft); }
.news-status.is-warn { color: #DCA86B; }
.news-status.is-replay { color: var(--accent); }

.news-filters {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.news-filters button {
  background: transparent;
  border: 1px solid var(--line-bright);
  color: var(--text-faint);
  cursor: pointer;
  font: inherit;
  font-size: 6px;
  letter-spacing: 0.7px;
  padding: 5px 7px;
}

.news-filters button:hover,
.news-filters button.is-active {
  border-color: var(--accent);
  color: var(--accent-soft);
}

.news-controls {
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(0, 1fr) 92px;
  margin-bottom: 10px;
}

.news-search-wrap input,
.news-sort-wrap select {
  background: rgba(7, 11, 17, 0.75);
  border: 1px solid var(--line-bright);
  color: var(--text);
  font: inherit;
  font-size: 7px;
  min-height: 28px;
  padding: 6px 8px;
  width: 100%;
}

.news-search-wrap input::placeholder { color: var(--text-faint); }
.news-search-wrap input:focus,
.news-sort-wrap select:focus { border-color: var(--accent); outline: none; }

.news-sort-wrap select { color: var(--accent-soft); }

.sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  clip: rect(0, 0, 0, 0);
}

.news-coverage {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.coverage-head {
  color: var(--text-faint);
  display: flex;
  font-size: 6px;
  justify-content: space-between;
  letter-spacing: 0.8px;
  margin-bottom: 7px;
}

.coverage-list { display: grid; gap: 5px; }

.coverage-row {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: 58px minmax(0, 1fr) 18px;
}

.coverage-row > span:first-child,
.coverage-row strong {
  color: var(--text-dim);
  font-size: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coverage-row strong {
  color: var(--accent-soft);
  font-weight: 500;
  text-align: right;
}

.coverage-track {
  background: rgba(42, 64, 81, 0.65);
  height: 3px;
  overflow: hidden;
}

.coverage-track i {
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  display: block;
  height: 100%;
}

.news-focus {
  align-items: center;
  background: rgba(63, 182, 255, 0.07);
  border: 1px solid rgba(63, 182, 255, 0.55);
  display: flex;
  gap: 7px;
  margin-top: 9px;
  padding: 7px 8px;
}

.news-focus[hidden] { display: none; }

.news-focus > span {
  color: var(--accent);
  font-size: 6px;
  letter-spacing: 0.6px;
}

.news-focus strong {
  color: var(--text);
  flex: 1;
  font-size: 8px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-focus button,
.news-focus-button {
  background: transparent;
  border: 1px solid var(--line-bright);
  color: var(--accent-soft);
  cursor: pointer;
  font: inherit;
  font-size: 6px;
  letter-spacing: 0.5px;
  padding: 4px 5px;
}

.news-focus button:hover,
.news-focus-button:hover { border-color: var(--accent); color: var(--accent); }

.news-focus-button:disabled {
  border-color: var(--line);
  color: var(--text-faint);
  cursor: not-allowed;
}

.news-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: var(--line-bright) transparent;
}

.news-empty {
  color: var(--text-faint);
  font-size: 7px;
  letter-spacing: 0.6px;
  line-height: 1.6;
  padding: 15px 0;
}

.news-item {
  border-top: 1px solid rgba(42, 64, 81, 0.75);
  padding: 11px 0 10px;
}

.news-item-top {
  align-items: center;
  display: flex;
  gap: 7px;
  justify-content: space-between;
}

.news-item-meta,
.news-item-domain {
  color: var(--text-faint);
  font-size: 7px;
  letter-spacing: 0.7px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-badge {
  border: 1px solid var(--line-bright);
  color: var(--text-faint);
  flex: none;
  font-size: 6px;
  letter-spacing: 0.5px;
  padding: 3px 4px;
}

.news-badge.is-fast-signal { border-color: rgba(127, 231, 196, 0.7); color: var(--accent-soft); }
.news-badge.is-fresh { border-color: rgba(63, 182, 255, 0.7); color: var(--accent); }

.news-item-title {
  color: var(--text);
  display: block;
  font-size: 10px;
  line-height: 1.45;
  margin: 5px 0;
  text-decoration: none;
}

.news-item-title:hover { color: var(--accent); }

.news-item-foot {
  align-items: center;
  display: flex;
  gap: 7px;
  justify-content: space-between;
  margin-top: 7px;
}

.news-item-origin {
  color: var(--text-faint);
  flex: 1;
  font-size: 6px;
  letter-spacing: 0.4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-caveat {
  color: var(--text-faint);
  flex: none;
  font-size: 6px;
  letter-spacing: 0.35px;
  line-height: 1.45;
  margin-top: 9px;
}

.news-source {
  border-top: 1px solid var(--line);
  color: var(--accent);
  flex: none;
  font-size: 8px;
  letter-spacing: 0.8px;
  margin-top: 10px;
  padding-top: 12px;
  text-decoration: none;
}

.news-source:hover { color: var(--accent-soft); }
.news-source span { float: right; font-size: 12px; line-height: 8px; }

.layer-panel {
  background: linear-gradient(135deg, rgba(17, 27, 39, 0.92), rgba(9, 15, 23, 0.92));
  border: 1px solid var(--line);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18);
  display: flex;
  flex: none;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px;
  position: relative;
  width: 264px;
}

.layer-panel::before,
.layer-panel::after,
#map-wrap::before,
#map-wrap::after {
  border-color: var(--accent);
  border-style: solid;
  content: '';
  height: 9px;
  opacity: 0.75;
  position: absolute;
  width: 9px;
}

.layer-panel::before {
  border-width: 1px 0 0 1px;
  left: -1px;
  top: -1px;
}

.layer-panel::after {
  border-width: 0 1px 1px 0;
  bottom: -1px;
  right: -1px;
}

.panel-topline {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.panel-heading {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 1.6px;
}

.panel-subhead {
  color: var(--text-faint);
  font-size: 7px;
  letter-spacing: 0.7px;
  margin-top: 5px;
}

.panel-index { color: var(--text-faint); }

.panel-intro {
  border-bottom: 1px solid var(--line);
  margin: 16px 0 8px;
  padding-bottom: 16px;
}

.panel-intro p {
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 5px;
}

.panel-intro span,
.panel-foot p {
  color: var(--text-faint);
  font-size: 9px;
  letter-spacing: 0.4px;
  line-height: 1.5;
  margin: 0;
}

.story-panel {
  border-bottom: 1px solid var(--line);
  margin-bottom: 3px;
  padding: 3px 0 12px;
}

.story-heading {
  align-items: center;
  color: var(--accent-soft);
  display: flex;
  font-size: 8px;
  justify-content: space-between;
  letter-spacing: 1.2px;
  margin-bottom: 7px;
}

.story-heading small {
  color: var(--text-faint);
  font-size: 7px;
  letter-spacing: 0.7px;
}

.story-grid { display: grid; gap: 4px; }

.story-button,
.share-button,
.welcome-primary,
.welcome-secondary {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-bright);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.story-button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 39px;
  padding: 7px 8px;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.story-button strong {
  color: var(--text);
  font-size: 8px;
  letter-spacing: 0.7px;
}

.story-button span {
  color: var(--text-faint);
  font-size: 7px;
  letter-spacing: 0.1px;
}

.story-button:hover,
.story-button.is-active {
  background: rgba(63, 182, 255, 0.08);
  border-color: var(--accent);
  transform: translateX(2px);
}

.story-button.is-active strong { color: var(--accent-soft); }

.share-button {
  border-color: transparent;
  color: var(--accent);
  font-size: 8px;
  letter-spacing: 0.8px;
  margin-top: 5px;
  padding: 5px 0 0;
  width: 100%;
}

.share-button:hover { color: var(--accent-soft); }
.share-button span { float: right; font-size: 12px; line-height: 8px; }
.replay-link { color: #DCA86B; }
.replay-link:hover { color: #F0C419; }

.layer-list { display: contents; }

.layer-toggle {
  align-items: center;
  border-bottom: 1px solid rgba(28, 42, 56, 0.85);
  cursor: pointer;
  display: flex;
  gap: 10px;
  min-height: 48px;
  min-width: 0;
  overflow: hidden;
  padding: 9px 4px;
  position: relative;
}

.layer-toggle::before {
  background: var(--accent);
  content: '';
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 140ms ease;
}

.layer-toggle:hover::before { opacity: 0.05; }

.layer-toggle input {
  accent-color: var(--accent);
  cursor: pointer;
  height: 13px;
  margin: 0;
  position: relative;
  width: 13px;
}

.swatch {
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.24);
  flex: none;
  height: 8px;
  position: relative;
  width: 8px;
  z-index: 1;
}

.layer-name {
  color: var(--text);
  font-size: 11px;
  letter-spacing: 0.1px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.layer-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  position: relative;
}

.layer-meta {
  color: var(--text-faint);
  font-size: 7px;
  letter-spacing: 0.7px;
  line-height: 1;
}

.layer-toggle[data-state="loading"] .layer-meta { color: var(--accent); }
.layer-toggle[data-state="online"] .layer-meta { color: var(--accent-soft); }
.layer-toggle[data-state="replay"] .layer-meta { color: var(--accent); }
.layer-toggle[data-state="fallback"] .layer-meta { color: #DCA86B; }
.layer-toggle[data-state="unavailable"] .layer-meta { color: #DCA86B; }

.layer-toggle.layer-error .layer-name { color: #FF8A8A; }

.panel-foot {
  border-top: 1px solid var(--line);
  margin-top: auto;
  padding-top: 16px;
}

.feed-key {
  color: var(--text-dim);
  gap: 7px;
  margin-bottom: 7px;
}

.feed-key-line {
  background: var(--accent-soft);
  height: 1px;
  width: 17px;
}

/* ---- Map ---- */
#map-wrap {
  background: rgba(5, 10, 16, 0.72);
  border: 1px solid var(--line);
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

#map-wrap::before {
  border-width: 1px 0 0 1px;
  left: -1px;
  top: -1px;
  z-index: 4;
}

#map-wrap::after {
  border-width: 0 1px 1px 0;
  bottom: -1px;
  right: -1px;
  z-index: 4;
}

.map-topbar {
  align-items: center;
  background: rgba(13, 20, 30, 0.85);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex: none;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 17px;
}

.map-topbar > div:first-child {
  align-items: baseline;
  display: flex;
  gap: 12px;
}

.map-actions {
  align-items: center;
  display: flex;
  gap: 12px;
}

.map-zoom-controls {
  display: inline-flex;
}

.map-zoom-controls button {
  background: transparent;
  border: 1px solid var(--line-bright);
  color: var(--text-faint);
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  min-height: 25px;
  min-width: 25px;
  padding: 0 5px;
}

.map-zoom-controls button + button { border-left: 0; }
.map-zoom-controls button:hover,
.map-zoom-controls button:focus-visible { border-color: var(--accent); color: var(--accent-soft); outline: none; }

.tour-control {
  background: transparent;
  border: 1px solid var(--line-bright);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 7px;
  letter-spacing: 0.8px;
  padding: 6px 8px;
}

.tour-control:hover,
.tour-control.is-running {
  border-color: var(--accent);
  color: var(--accent-soft);
}

.mission-control,
.mission-close,
.mission-tools button,
.mission-query-row button,
.mission-examples button,
.briefing-head button,
.briefing-foot button {
  background: transparent;
  border: 1px solid var(--line-bright);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 7px;
  letter-spacing: 0.7px;
  padding: 6px 8px;
}

.mission-control:hover,
.mission-control:focus-visible,
.mission-close:hover,
.mission-tools button:hover,
.mission-query-row button:hover,
.mission-examples button:hover,
.briefing-head button:hover,
.briefing-foot button:hover {
  border-color: var(--accent);
  color: var(--accent-soft);
  outline: none;
}

.map-overline { color: var(--text); }
.map-context { color: var(--text-faint); }

.map-mode {
  color: var(--accent-soft);
  gap: 8px;
}

.map-viewport {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.map-grid {
  background-image:
    linear-gradient(rgba(63, 182, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 182, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(17, 54, 73, 0.22), transparent 58%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.global-news-ticker {
  align-items: center;
  background: rgba(7, 11, 17, 0.84);
  border: 1px solid rgba(42, 64, 81, 0.9);
  bottom: 15px;
  display: flex;
  gap: 10px;
  left: 18px;
  max-width: min(88%, 720px);
  padding: 8px 10px;
  position: absolute;
  right: 18px;
  z-index: 4;
}

.ticker-kicker {
  align-items: center;
  color: var(--accent-soft);
  display: inline-flex;
  flex: none;
  font-size: 7px;
  gap: 6px;
  letter-spacing: 0.9px;
}

.ticker-kicker i {
  background: var(--accent-soft);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(127, 231, 196, 0.8);
  height: 5px;
  width: 5px;
}

#news-ticker-link {
  color: var(--text);
  flex: 1;
  font-size: 8px;
  line-height: 1.35;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#news-ticker-link:hover { color: var(--accent); }

.ticker-meta {
  color: var(--text-faint);
  flex: none;
  font-size: 6px;
  letter-spacing: 0.5px;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-viewport::after {
  background: radial-gradient(ellipse at center, transparent 52%, rgba(2, 6, 11, 0.5) 100%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

#map {
  display: block;
  height: 100%;
  position: relative;
  touch-action: none;
  width: 100%;
  z-index: 2;
}

#map:active { cursor: grabbing; }

.land {
  fill: #152231;
  stroke: #233445;
  stroke-width: 0.55;
}

.layer-dot {
  cursor: help;
  opacity: 0.9;
  transition: opacity 120ms ease;
}

.layer-dot:hover { opacity: 1; }
.layer-dot:focus { opacity: 1; outline: none; }

.cluster-marker {
  stroke: var(--void);
  stroke-width: 1.2;
}

.aircraft-marker {
  filter: drop-shadow(0 0 2px rgba(63, 182, 255, 0.75));
  transform-box: fill-box;
  transform-origin: center;
}

.layer-lines-buildings .layer-line {
  opacity: 0.76;
  stroke-linejoin: bevel;
}

.layer-line {
  fill: none;
  opacity: 0.58;
  pointer-events: none;
  stroke: var(--accent-soft);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

.map-corner {
  border-color: rgba(127, 231, 196, 0.48);
  border-style: solid;
  height: 22px;
  position: absolute;
  width: 22px;
  z-index: 3;
}

.map-corner-tl {
  border-width: 1px 0 0 1px;
  left: 16px;
  top: 16px;
}

.map-corner-br {
  border-width: 0 1px 1px 0;
  bottom: 16px;
  right: 16px;
}

.map-hint {
  bottom: 16px;
  color: var(--text-faint);
  font-size: 8px;
  letter-spacing: 1px;
  position: absolute;
  right: 50px;
  z-index: 3;
}

.mission-drawer {
  background: linear-gradient(145deg, rgba(13, 24, 35, 0.98), rgba(5, 11, 18, 0.98));
  border: 1px solid var(--accent);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.48), 0 0 28px rgba(63, 182, 255, 0.12);
  max-height: calc(100% - 28px);
  overflow-y: auto;
  padding: 16px;
  position: absolute;
  right: 14px;
  top: 14px;
  width: min(360px, calc(100% - 28px));
  z-index: 6;
}

.mission-drawer[hidden],
.briefing-overlay[hidden] { display: none; }

.mission-head,
.fusion-heading,
.briefing-head,
.briefing-foot {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.mission-head strong {
  display: block;
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 25px;
  letter-spacing: 1px;
  line-height: 0.95;
  margin-top: 4px;
}

.mission-kicker,
.mission-query label,
.fusion-heading,
.briefing-evidence-title,
.briefing-grid span {
  color: var(--text-faint);
  font-size: 7px;
  letter-spacing: 1px;
}

.mission-query { display: block; margin-top: 20px; }
.mission-query-row { display: flex; gap: 6px; margin-top: 7px; }
.mission-query-row input {
  background: rgba(7, 11, 17, 0.85);
  border: 1px solid var(--line-bright);
  color: var(--text);
  flex: 1;
  font: inherit;
  font-size: 9px;
  min-width: 0;
  padding: 9px;
}
.mission-query-row input:focus { border-color: var(--accent); outline: 1px solid rgba(63, 182, 255, 0.2); }
.mission-examples { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.mission-examples button { color: var(--text-dim); font-size: 6px; padding: 5px 6px; }
.copilot-card { background: linear-gradient(145deg, rgba(20, 42, 53, 0.72), rgba(7, 15, 23, 0.84)); border: 1px solid rgba(127, 231, 196, 0.42); margin-top: 15px; padding: 11px; }
.copilot-head { align-items: center; display: flex; justify-content: space-between; }
.copilot-head span { color: var(--accent-soft); font-size: 8px; letter-spacing: 1px; }
.copilot-head small { color: var(--text-faint); font-size: 6px; letter-spacing: 0.5px; }
.copilot-card > strong { color: var(--text); display: block; font-size: 9px; letter-spacing: 0.5px; margin-top: 12px; }
.copilot-card > p { color: var(--text-dim); font-size: 8px; line-height: 1.55; margin: 6px 0 11px; }
.copilot-metrics { border-bottom: 1px solid rgba(42, 64, 81, 0.8); border-top: 1px solid rgba(42, 64, 81, 0.8); display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); padding: 8px 0; }
.copilot-metrics div { display: grid; gap: 4px; }
.copilot-metrics span,
.copilot-facts > div > span { color: var(--text-faint); font-size: 6px; letter-spacing: 0.7px; }
.copilot-metrics strong { color: var(--accent-soft); font-size: 9px; font-weight: 500; }
.copilot-facts { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); margin-top: 9px; }
.copilot-facts > div { background: rgba(7, 11, 17, 0.36); min-width: 0; padding: 7px; }
.copilot-facts ul { color: var(--text-dim); display: grid; font-size: 6px; gap: 5px; line-height: 1.45; list-style: none; margin: 6px 0 0; padding: 0; }
.copilot-facts li::before { color: var(--accent-soft); content: '•'; margin-right: 4px; }
.copilot-sources { border-top: 1px solid rgba(42, 64, 81, 0.8); display: grid; gap: 4px; margin-top: 9px; padding-top: 8px; }
.copilot-source-row { align-items: center; display: flex; justify-content: space-between; }
.copilot-source-row span { color: var(--text-dim); font-size: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copilot-source-row small { color: var(--text-faint); font-size: 6px; white-space: nowrap; }
.mission-tools { display: flex; gap: 7px; margin-top: 16px; }
.mission-share { background: transparent; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 6px; letter-spacing: 0.7px; margin-top: 10px; padding: 0; }
.mission-share:hover { color: var(--accent-soft); }
.mission-tools button[aria-pressed="true"] { background: rgba(220, 168, 107, 0.15); border-color: #DCA86B; color: #F0C48B; }
.timeline-control { display: block; margin-top: 17px; }
.timeline-control > span { align-items: baseline; display: flex; justify-content: space-between; }
.timeline-control b { color: var(--accent-soft); font-size: 8px; letter-spacing: 1px; }
.timeline-control small { color: var(--text-faint); font-size: 7px; }
.timeline-control input { accent-color: var(--accent); margin: 11px 0 0; width: 100%; }
.ledger-section { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 13px; }
.ledger-list { display: grid; gap: 6px; margin-top: 9px; }
.ledger-row { align-items: start; border-left: 1px solid var(--accent); display: grid; gap: 7px; grid-template-columns: 58px 1fr; padding: 6px 0 6px 8px; }
.ledger-row > span { color: var(--accent-soft); font-size: 6px; line-height: 1.35; }
.ledger-row div { display: grid; gap: 3px; min-width: 0; }
.ledger-row strong { color: var(--text-dim); font-size: 7px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.ledger-row small { color: var(--text-faint); font-size: 6px; line-height: 1.35; }
.ledger-empty { color: var(--text-faint); font-size: 7px; line-height: 1.5; padding: 8px 0; }
.ledger-export { background: transparent; border: 1px solid var(--line-bright); color: var(--accent); cursor: pointer; font: inherit; font-size: 6px; letter-spacing: 0.7px; margin-top: 9px; padding: 6px 7px; }
.ledger-export:hover { border-color: var(--accent); color: var(--accent-soft); }
.fusion-section { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 13px; }
.fusion-heading { align-items: center; }
.fusion-heading small { color: var(--text-faint); font-size: 6px; letter-spacing: 0.6px; }
.fusion-list { display: grid; gap: 6px; margin-top: 9px; }
.fusion-card { border: 1px solid var(--line); display: grid; gap: 4px; padding: 9px; }
.fusion-card strong { color: var(--text); font-size: 8px; line-height: 1.35; }
.fusion-card span { color: var(--text-dim); font-size: 7px; line-height: 1.4; }
.fusion-card small { color: var(--accent-soft); font-size: 6px; letter-spacing: 0.6px; }
.fusion-card button { background: transparent; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 6px; justify-self: start; margin-top: 2px; padding: 0; }
.fusion-card button:hover { color: var(--accent-soft); }
.fusion-empty { color: var(--text-faint); font-size: 7px; line-height: 1.5; padding: 8px 0; }
.alert-section { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 13px; }
.alert-form { display: flex; gap: 5px; margin-top: 9px; }
.alert-form select,
.alert-form input { background: rgba(7, 11, 17, 0.85); border: 1px solid var(--line-bright); color: var(--text); font: inherit; font-size: 7px; min-width: 0; padding: 7px; }
.alert-form select { flex: 1; }
.alert-form input { width: 55px; }
.alert-form button { background: transparent; border: 1px solid var(--line-bright); color: var(--accent); cursor: pointer; font: inherit; font-size: 7px; padding: 6px 8px; }
.alert-form button:hover { border-color: var(--accent); color: var(--accent-soft); }
.alert-list { display: grid; gap: 5px; margin-top: 8px; }
.alert-rule { align-items: center; border: 1px solid var(--line); display: flex; gap: 8px; justify-content: space-between; padding: 7px; }
.alert-rule span { color: var(--text-dim); font-size: 7px; }
.alert-rule small { color: var(--accent-soft); font-size: 6px; }
.alert-rule button { background: transparent; border: 0; color: var(--text-faint); cursor: pointer; font: inherit; font-size: 6px; padding: 0; }
.alert-rule button:hover { color: #F0C48B; }
.baseline-section { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 11px; }
.baseline-toggle { align-items: center; background: transparent; border: 0; color: var(--accent); cursor: pointer; display: flex; font: inherit; font-size: 7px; justify-content: space-between; letter-spacing: 0.8px; padding: 0; width: 100%; }
.baseline-toggle:hover { color: var(--accent-soft); }
.baseline-list { display: grid; gap: 5px; margin-top: 9px; }
.baseline-row { align-items: center; border-bottom: 1px solid rgba(42, 64, 81, 0.5); display: flex; justify-content: space-between; padding: 6px 0; }
.baseline-row span { color: var(--text-dim); font-size: 7px; }
.baseline-row strong { color: var(--text); font-size: 7px; font-weight: 500; }
.baseline-row strong.is-up { color: #F0C48B; }
.baseline-row strong.is-down { color: var(--accent-soft); }
.baseline-list[hidden] { display: none; }

.status-overlay {
  align-items: center;
  background: rgba(13, 20, 30, 0.93);
  border: 1px solid var(--line-bright);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  color: var(--text-dim);
  display: flex;
  font-size: 10px;
  gap: 10px;
  left: 50%;
  letter-spacing: 1.6px;
  padding: 12px 16px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 5;
}

.status-overlay::before {
  animation: pulse-mark 1.4s ease-in-out infinite;
  color: var(--accent);
  content: '◉';
  font-size: 9px;
}

.status-overlay.hidden { display: none; }

.map-bottomline {
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  flex: none;
  justify-content: space-between;
  min-height: 33px;
  padding: 0 17px;
}

.map-bottomline span:first-child {
  align-items: center;
  display: flex;
  gap: 8px;
}

.map-attribution {
  color: var(--text-faint);
  font-size: 7px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ---- Persistent signal inspector ---- */
.signal-inspector {
  background: linear-gradient(145deg, rgba(17, 27, 39, 0.94), rgba(8, 14, 22, 0.94));
  border: 1px solid var(--line);
  flex: none;
  min-height: 390px;
  overflow-y: auto;
  padding: 14px;
  scrollbar-color: var(--line-bright) transparent;
}

.inspector-close {
  background: transparent;
  border: 0;
  color: var(--text-faint);
  cursor: pointer;
  font: inherit;
  font-size: 7px;
  letter-spacing: 0.8px;
  padding: 3px 0;
}

.inspector-close:hover { color: var(--accent); }
.inspector-empty,
.inspector-status { color: var(--text-faint); font-size: 8px; line-height: 1.5; }
.inspector-empty { margin-top: 26px; }
.inspector-kicker,
.inspector-section-head { align-items: center; display: flex; justify-content: space-between; }
.inspector-kicker { color: var(--accent-soft); font-size: 7px; letter-spacing: 0.8px; margin-top: 15px; }
.inspector-kicker span:last-child { color: var(--text-faint); }
.inspector-title { color: var(--text); display: block; font-size: 13px; line-height: 1.35; margin: 8px 0 10px; }
.inspector-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.inspector-badge { border: 1px solid var(--line-bright); color: var(--text-dim); font-size: 6px; letter-spacing: 0.6px; padding: 4px 5px; }
.inspector-badge-confidence { border-color: rgba(127, 231, 196, 0.55); color: var(--accent-soft); }
.inspector-badge-confidence.is-observed,
.inspector-badge-confidence.is-source-reported { color: var(--accent-soft); }
.inspector-badge-confidence.is-estimated,
.inspector-badge-confidence.is-fallback { border-color: rgba(220, 168, 107, 0.7); color: #DCA86B; }
.inspector-location-card { align-items: center; background: rgba(63, 182, 255, 0.07); border: 1px solid rgba(63, 182, 255, 0.35); display: flex; gap: 8px; margin: 12px 0; padding: 9px; }
.inspector-location-icon { color: var(--accent); font-size: 22px; line-height: 1; }
.inspector-location-card > div:nth-child(2) { display: grid; flex: 1; gap: 4px; min-width: 0; }
.inspector-location-card span { color: var(--accent); font-size: 6px; letter-spacing: 0.7px; }
.inspector-location-card strong { color: var(--text); font-size: 9px; font-weight: 500; overflow-wrap: anywhere; }
.inspector-location-card small { color: var(--text-faint); font-size: 6px; line-height: 1.35; }
.inspector-focus { background: transparent; border: 1px solid var(--line-bright); color: var(--accent); cursor: pointer; font: inherit; font-size: 6px; letter-spacing: 0.6px; padding: 5px 6px; white-space: nowrap; }
.inspector-focus:hover { border-color: var(--accent); color: var(--accent-soft); }
.inspector-focus:disabled { color: var(--text-faint); cursor: not-allowed; }
.inspector-grid { border-bottom: 1px solid var(--line); display: grid; gap: 7px 9px; grid-template-columns: 64px 1fr; padding-bottom: 12px; }
.inspector-grid span { color: var(--text-faint); font-size: 7px; letter-spacing: 0.7px; }
.inspector-grid strong { color: var(--text-dim); font-size: 8px; font-weight: 500; overflow-wrap: anywhere; }
.inspector-evidence,
.inspector-related { border-bottom: 1px solid var(--line); padding: 12px 0; }
.inspector-section-head { color: var(--accent); font-size: 7px; letter-spacing: 0.8px; }
.inspector-section-head span:last-child { color: var(--text-faint); font-size: 6px; }
.evidence-line { align-items: center; color: var(--text-dim); display: flex; font-size: 7px; gap: 7px; line-height: 1.4; margin-top: 7px; }
.evidence-line i { background: var(--accent-soft); border-radius: 50%; box-shadow: 0 0 6px rgba(127, 231, 196, 0.55); flex: none; height: 4px; width: 4px; }
.related-list { display: grid; gap: 6px; margin-top: 8px; }
.related-row { border-left: 1px solid var(--line-bright); display: grid; gap: 3px; padding-left: 8px; }
.related-row strong { color: var(--text-dim); font-size: 7px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.related-row span,
.related-empty { color: var(--text-faint); font-size: 6px; letter-spacing: 0.4px; }
.inspector-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.inspector-watch,
.inspector-brief,
.inspector-copy,
.inspector-actions a { background: transparent; border: 1px solid var(--line-bright); color: var(--accent); cursor: pointer; font: inherit; font-size: 7px; letter-spacing: 0.6px; padding: 6px 7px; text-decoration: none; }
.inspector-copy { color: var(--accent-soft); }
.inspector-watch:hover,
.inspector-brief:hover,
.inspector-copy:hover,
.inspector-actions a:hover { border-color: var(--accent); color: var(--accent-soft); }
.inspector-watch:disabled,
.inspector-brief:disabled,
.inspector-copy:disabled { color: var(--text-faint); cursor: not-allowed; }
.inspector-status { color: var(--accent-soft); margin-top: 9px; min-height: 13px; }

.legend-dot {
  display: inline-block;
  height: 5px;
  width: 5px;
}

.briefing-overlay {
  align-items: center;
  background: rgba(2, 6, 11, 0.78);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 20;
}
.briefing-card {
  background: linear-gradient(145deg, #111b27, #080e16);
  border: 1px solid var(--accent);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62);
  max-height: 90vh;
  max-width: 620px;
  overflow: auto;
  padding: 21px;
  width: 100%;
}
.briefing-head { border-bottom: 1px solid var(--line); padding-bottom: 13px; }
.briefing-head h2 { font-family: 'Big Shoulders Display', sans-serif; font-size: 34px; letter-spacing: 1px; line-height: 0.9; margin: 5px 0 0; }
.briefing-card > p { color: var(--text-dim); font-size: 9px; line-height: 1.7; margin: 17px 0; }
.briefing-grid { border-bottom: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); padding-bottom: 16px; }
.briefing-grid div { display: grid; gap: 5px; }
.briefing-grid strong { color: var(--text); font-size: 9px; font-weight: 500; overflow-wrap: anywhere; }
.briefing-evidence-title { margin-top: 17px; }
.briefing-evidence { color: var(--text-dim); display: grid; font-size: 8px; gap: 8px; line-height: 1.5; margin: 10px 0 19px; padding-left: 18px; }
.briefing-foot { align-items: center; border-top: 1px solid var(--line); gap: 10px; padding-top: 13px; }
.briefing-foot span { color: var(--accent-soft); font-size: 7px; line-height: 1.4; }

/* ---- Bottom HUD ---- */
.hud-bottom {
  background: rgba(13, 20, 30, 0.86);
  border-top: 1px solid var(--line);
  flex: none;
  padding: 0 24px 14px;
  position: relative;
  z-index: 1;
}

.brief-strip {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.brief-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 29px;
}

.brief-title {
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 1.4px;
}

.brief-head > span {
  color: var(--text-faint);
  font-size: 7px;
  letter-spacing: 0.8px;
}

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

.brief-card {
  background: rgba(17, 27, 39, 0.56);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 9px 12px 8px;
}

.brief-label {
  color: var(--text-dim);
  font-size: 7px;
  letter-spacing: 0.9px;
}

.brief-card strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief-card > span:last-child {
  color: var(--text-faint);
  font-size: 7px;
  letter-spacing: 0.35px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pulse-bars {
  align-items: end;
  display: flex;
  gap: 3px;
  height: 19px;
  min-width: 0;
}

.pulse-bar {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  flex: 1;
  min-width: 3px;
  opacity: 0.78;
}

.pulse-bar:hover { opacity: 1; }

.brief-card.is-alert { border-color: rgba(240, 196, 25, 0.6); }
.brief-card.is-alert strong { color: #F0C419; }

.welcome-overlay {
  align-items: center;
  background: rgba(2, 6, 11, 0.78);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 20;
}

.welcome-overlay[hidden] { display: none; }

.welcome-card {
  background:
    linear-gradient(135deg, rgba(17, 27, 39, 0.98), rgba(7, 13, 21, 0.98)),
    var(--panel);
  border: 1px solid var(--line-bright);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(63, 182, 255, 0.08);
  max-width: 650px;
  padding: 34px;
  position: relative;
  width: 100%;
}

.welcome-card::before,
.welcome-card::after {
  border-color: var(--accent);
  border-style: solid;
  content: '';
  height: 12px;
  position: absolute;
  width: 12px;
}

.welcome-card::before { border-width: 1px 0 0 1px; left: -1px; top: -1px; }
.welcome-card::after { border-width: 0 1px 1px 0; bottom: -1px; right: -1px; }

.welcome-kicker {
  color: var(--accent-soft);
  font-size: 9px;
  letter-spacing: 1.8px;
  margin-bottom: 18px;
}

.welcome-card h1 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: clamp(42px, 7vw, 68px);
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 0.85;
  margin: 0;
  max-width: 470px;
}

.welcome-lede {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.65;
  margin: 20px 0 26px;
  max-width: 500px;
}

.welcome-steps {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 18px;
}

.welcome-steps div { display: flex; flex-direction: column; gap: 6px; }

.welcome-steps span {
  color: var(--accent);
  font-size: 8px;
  letter-spacing: 1px;
}

.welcome-steps strong { font-size: 10px; font-weight: 500; }

.welcome-steps small {
  color: var(--text-faint);
  font-size: 8px;
  line-height: 1.45;
}

.welcome-actions {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.welcome-primary,
.welcome-secondary {
  font-size: 9px;
  letter-spacing: 0.9px;
  padding: 12px 14px;
}

.welcome-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #06101A;
  font-weight: 700;
}

.welcome-primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.welcome-secondary { color: var(--accent); }
.welcome-secondary:hover { border-color: var(--accent); color: var(--accent-soft); }

.welcome-foot {
  color: var(--text-faint);
  font-size: 7px;
  letter-spacing: 1px;
  margin-top: 22px;
}

.stats-header {
  color: var(--accent);
  justify-content: space-between;
  min-height: 31px;
  padding: 0 2px;
}

.stats-note { color: var(--text-faint); }

.stats-row {
  border: 1px solid var(--line);
  display: flex;
  min-height: 61px;
  overflow-x: auto;
}

.stat {
  border-right: 1px solid var(--line);
  min-width: 155px;
  padding: 12px 20px 10px;
}

.stat:last-child { border-right: none; }

.stat-label {
  color: var(--text-dim);
  font-size: 9px;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  white-space: nowrap;
}

.stat-value {
  color: var(--text);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mark, .live-pulse, .status-overlay::before { animation: none; }
}

@media (max-width: 900px) {
  .hud-top { padding-left: 20px; padding-right: 20px; }
  .hud-top::after { left: 20px; }
  .command-deck { align-items: stretch; flex-wrap: wrap; gap: 8px 10px; padding: 9px 16px; }
  .command-identity { flex: 1 0 100%; }
  .command-search { flex: 1 1 170px; }
  .command-export { flex: 0 0 auto; }
  .body-shell { gap: 12px; padding: 12px 16px 10px; }
  .layer-panel { padding: 15px; width: 220px; }
  .intel-panel { width: 238px; }
  .orbital-card { flex-basis: 270px; padding: 14px; }
  .orbital-stage { height: 184px; }
  .orbital-caption { display: block; }
  .orbital-caption span { display: block; margin-top: 5px; text-align: left; }
  .hud-bottom { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 900px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body { display: block; }
  .app-shell { min-height: 100vh; }
  .hud-top { min-height: 68px; padding: 13px 14px; }
  .hud-top::after { left: 14px; }
  .command-deck { padding: 9px 10px; }
  .command-readout { font-size: 9px; }
  .command-control select { min-width: 112px; }
  .command-search { flex-basis: 145px; }
  .command-search input { min-width: 0; width: 100%; }
  .command-export { font-size: 7px; padding: 0 8px; }
  .brand-lockup { gap: 10px; }
  .brand-emblem { height: 30px; width: 30px; }
  .emblem-ring-outer { height: 28px; width: 28px; }
  .emblem-ring-inner { height: 18px; width: 18px; }
  .title { font-size: 30px; }
  .brand-meta { font-size: 8px; letter-spacing: 1px; }
  .subtitle { display: none; }
  .network-state { display: none; }
  .hud-right { gap: 0; }
  .body-shell { flex: none; flex-direction: column; overflow: visible; padding: 10px 10px 8px; }
  .layer-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    max-height: none;
    overflow: visible;
    padding: 12px 13px;
    width: 100%;
  }
  .panel-topline,
  .panel-intro,
  .story-panel,
  .layer-list,
  .panel-foot { grid-column: 1 / -1; }
  .layer-list { display: contents; }
  .panel-intro { margin: 10px 0 2px; padding-bottom: 10px; }
  .panel-intro p { font-size: 11px; }
  .panel-intro span,
  .panel-foot p { font-size: 8px; }
  .layer-toggle { min-height: 38px; padding: 6px 2px; }
  .layer-name { font-size: 10px; }
  .panel-foot { display: none; }
  .story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-button { min-height: 48px; padding: 7px 6px; }
  .story-button strong { font-size: 7px; line-height: 1.2; }
  .story-button span { font-size: 7px; line-height: 1.3; }
  .share-button { font-size: 7px; }
  #map-wrap { flex: none; height: min(44vh, 380px); min-height: 320px; }
  .map-topbar { min-height: 38px; padding: 0 11px; }
  .map-topbar > div:first-child { gap: 7px; }
  .map-overline { font-size: 8px; }
  .map-context { display: none; }
  .map-attribution { display: none; }
  .tour-control { display: inline-flex; font-size: 7px; padding: 6px 7px; }
   .map-mode { font-size: 8px; }
   .map-hint { display: none; }
   .global-news-ticker { bottom: 10px; left: 10px; max-width: none; right: 10px; }
   .ticker-meta { display: none; }
   #news-ticker-link { font-size: 7px; }
   .map-bottomline { font-size: 8px; min-height: 28px; padding: 0 11px; }
  .hud-bottom { padding: 0 10px 10px; }
  .stats-header { font-size: 8px; min-height: 26px; }
  .stats-note { display: none; }
  .stats-row { min-height: 54px; }
  .stat { min-width: 132px; padding: 10px 13px 8px; }
  .stat-label { font-size: 8px; margin-bottom: 5px; }
  .stat-value { font-size: 17px; }
  .brief-head > span { display: none; }
  .brief-grid { display: flex; overflow-x: auto; }
  .brief-card { flex: 0 0 142px; }
   .intel-panel { overflow: visible; width: 100%; }
  .orbital-card { flex-basis: auto; padding: 13px; }
  .orbital-stage { height: min(52vw, 260px); min-height: 210px; }
   .news-panel { flex: none; min-height: 420px; }
   .signal-inspector { min-height: 370px; }
}

@media (max-width: 390px) {
  .brand-meta { display: none; }
  .title { font-size: 29px; }
  .command-search { flex-basis: 100%; }
  .command-export { flex: 1 1 100%; justify-content: center; }
  .layer-panel { max-height: none; }
}

@media (max-width: 900px) {
  .welcome-overlay { align-items: flex-start; overflow-y: auto; padding: 14px; }
  .welcome-card { margin: auto 0; padding: 24px; }
  .welcome-card h1 { font-size: 48px; }
  .welcome-steps { grid-template-columns: 1fr; gap: 12px; }
  .welcome-actions { flex-direction: column; }
}