.flight-video-wrap {
  position: relative;
  width: 100%;
  background: #000;
}

.flight-hud {
  position: absolute;
  z-index: 20;
  top: 10px;
  left: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(74px, auto));
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 6px;
  background: rgb(8 12 14 / 82%);
  color: #fff;
  box-shadow: 0 2px 12px rgb(0 0 0 / 35%);
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.flight-hud > div {
  min-width: 0;
  padding: 7px 10px;
  border-right: 1px solid rgb(255 255 255 / 16%);
}

.flight-hud > div:last-child { border-right: 0; }

.flight-hud span {
  display: block;
  color: #aab4bc;
  font: 600 9px/1.2 "IBM Plex Sans", "Segoe UI", sans-serif;
  text-transform: uppercase;
}

.flight-hud strong {
  display: block;
  margin-top: 3px;
  color: #f8fafb;
  font: 700 15px/1.2 "IBM Plex Mono", Consolas, monospace;
  white-space: nowrap;
}

.flight-hud[data-state="stale"],
.flight-hud[data-state="unavailable"] { opacity: .58; }

.telemetry-panel {
  width: 100%;
  max-width: 960px;
  margin: 12px auto 0;
  border: 1px solid #2f353c;
  border-radius: 8px;
  background: #121518;
  color: #e9edf0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  overflow: hidden;
}

.telemetry-head {
  min-height: 42px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #2f353c;
  background: #191d21;
  font-size: 13px;
}

.telemetry-state {
  color: #5ee39a;
  font: 700 11px/1.2 "IBM Plex Mono", Consolas, monospace;
}

.telemetry-panel[data-state="stale"] { opacity: .62; }
.telemetry-panel[data-state="stale"] .telemetry-state { color: #f4bd4f; }
.telemetry-panel[data-state="disconnected"] .telemetry-state,
.telemetry-panel[data-state="unavailable"] .telemetry-state { color: #e46d68; }

.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.telemetry-grid > div {
  min-width: 0;
  min-height: 66px;
  padding: 10px 12px;
  border-right: 1px solid #252a2f;
  border-bottom: 1px solid #252a2f;
}

.telemetry-grid span,
.telemetry-grid small {
  display: block;
  color: #8d969f;
  font-size: 10px;
  line-height: 1.35;
  text-transform: uppercase;
}

.telemetry-grid b {
  display: block;
  margin-top: 5px;
  color: #f5f7f8;
  font: 600 13px/1.3 "IBM Plex Mono", Consolas, monospace;
  overflow-wrap: anywhere;
}

.flight-map-panel {
  position: relative;
  width: 100%;
  max-width: 960px;
  height: clamp(260px, 42vw, 380px);
  margin: 12px auto 0;
  overflow: hidden;
  border: 1px solid #2f353c;
  border-radius: 8px;
  background: #121518;
}

.flight-map-panel[hidden] { display: none; }
.flight-map { width: 100%; height: 100%; }
.flight-map-status {
  position: absolute;
  z-index: 500;
  top: 10px;
  right: 10px;
  padding: 6px 9px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 4px;
  background: rgb(18 21 24 / 88%);
  color: #e9edf0;
  font: 600 11px/1.2 "IBM Plex Mono", Consolas, monospace;
  pointer-events: none;
}

.flight-map-panel[data-state="stale"] { filter: saturate(.55); }

@media (max-width: 720px) {
  .flight-hud { grid-template-columns: repeat(2, minmax(86px, auto)); }
  .flight-hud > div:nth-child(2) { border-right: 0; }
  .flight-hud > div:nth-child(-n+2) { border-bottom: 1px solid rgb(255 255 255 / 16%); }
  .telemetry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .flight-hud {
    top: 6px;
    left: 6px;
    grid-template-columns: repeat(2, minmax(78px, auto));
  }
  .flight-hud > div { padding: 6px 7px; }
  .flight-hud strong { font-size: 12px; }
  .telemetry-grid { grid-template-columns: 1fr; }
  .telemetry-head { align-items: flex-start; flex-direction: column; }
  .flight-map-panel { height: 240px; }
}

.archive-panel {
  width: 100%;
  max-width: 960px;
  margin: 8px auto 0;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  gap: 10px 14px;
  align-items: center;
  border-top: 1px solid #2f353c;
  color: #e9edf0;
  font: 13px/1.4 "IBM Plex Sans", "Segoe UI", sans-serif;
}

.archive-panel:empty { display: none; }
.archive-panel select { min-width: 0; width: 100%; padding: 8px; border: 1px solid #3a424a; border-radius: 6px; background: #121518; color: #f5f7f8; }
.archive-links { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.archive-links a { color: #5ee39a; }
.archive-links small, .archive-empty { color: #8d969f; }

@media (max-width: 560px) {
  .archive-panel { grid-template-columns: 1fr; }
  .archive-links { grid-column: 1; }
}