:root {
  color-scheme: dark;
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  --bg: #050b11;
  --panel: rgba(8, 21, 31, .96);
  /* Opaque twin of --panel, for pinned strips that must not ghost scrolling text. */
  --panel-scrim: #08151f;
  --panel-2: #0b1b27;
  --panel-input-bg: #0a1a25;
  --panel-sort-bg: #0a1d28;
  --panel-card-bg: #091923;
  --panel-metric-bg: #081821;
  --panel-card-hover-bg: #0b2230;
  --panel-detail-accent-bg: #071720;
  --panel-photo-caption-bg: #071923;
  --panel-disclaimer-bg: #1c170d;
  --panel-disclaimer-border: #554729;
  --panel-disclaimer-color: #987f54;
  --line: #173748;
  --line-bright: #29617a;
  --text: #d9ebf2;
  --muted: #7898a7;
  --cyan: #62d6f4;
  --mint: #64efb2;
  --amber: #ffc65b;
  --vertical-climb: #68edb4;
  --vertical-descend: #ffb45d;
  --red: #ff6b6b;
  --live-action-border: #2f6f58;
  --live-action-border-hover: #4aa882;
  --live-action-bg: #0a1f1c;
  --live-action-bg-hover: #0f2e28;
  --live-action-color: #8de0c1;
  --scrollbar-size: 9px;
  --scrollbar-track: #07151e;
  --scrollbar-thumb: #24485b;
  --scrollbar-thumb-hover: #3c7189;
  --map-overlay-bg: rgba(7, 21, 29, .80);
  --map-overlay-bg-strong: rgba(7, 21, 29, .92);
  --map-popover-bg: rgba(7, 21, 29, .92);
  --map-toast-bg: rgba(11, 37, 50, .93);
  --map-overlay-border: rgba(38, 86, 109, .78);
  --map-overlay-field-bg: #091d29;
  --map-live-overlay-mix: 80%;
  --map-live-overlay-hover-mix: 93%;
  --top: 64px;
  --status: 28px;
  --left: 276px;
  --right: 318px;
  --left-compact: 76px;
  --right-compact: 76px;
  --left-slot: var(--left);
  --right-slot: var(--right);
  --map-edge: 12px;
  --map-left-clearance: 0px;
  --map-right-clearance: 0px;
  --map-bottom-left-clearance: 0px;
  --map-bottom-right-clearance: 0px;
  --topbar-padding-x: 16px;
  --topbar-gap: 18px;
  --topbar-detail-toggle-width: 64px;
}

/*
 * The day raster map occupies most of the screen and makes the near-black application frame read
 * heavier than it does beside the night map. Lift the outer chrome into a calm blue-grey and bring
 * inset forms partway with it; borders and a small luminance step retain the console hierarchy.
 */
html[data-map-tone="light"] {
  --bg: #0b1b24;
  --panel: rgba(16, 37, 48, .965);
  --panel-scrim: #102530;
  --panel-2: #14303d;
  --panel-input-bg: #0f2732;
  --panel-sort-bg: #0f2732;
  --panel-card-bg: #0d222c;
  --panel-metric-bg: #0d222c;
  --panel-card-hover-bg: #14303d;
  --panel-detail-accent-bg: #0d222c;
  --panel-photo-caption-bg: #0d222c;
  --panel-disclaimer-bg: #1c2926;
  --panel-disclaimer-border: #6f5c34;
  --panel-disclaimer-color: #bda269;
  --line: #2a5668;
  --line-bright: #447f96;
  --muted: #91afba;
  --scrollbar-track: #0d202a;
  --scrollbar-thumb: #3b6576;
  --scrollbar-thumb-hover: #518397;
  --map-overlay-bg: rgba(7, 21, 29, .68);
  --map-overlay-bg-strong: rgba(7, 21, 29, .76);
  --map-popover-bg: rgba(7, 21, 29, .68);
  --map-toast-bg: rgba(7, 27, 37, .76);
  --map-overlay-border: rgba(38, 86, 109, .68);
  --map-overlay-field-bg: rgba(9, 29, 41, .56);
  --map-live-overlay-mix: 68%;
  --map-live-overlay-hover-mix: 78%;
}

/* Bright raster maps should remain visible through every map control. The shared variables above
   keep small HUDs, tool stacks, airport controls, legends and popovers in one opacity family. */
html[data-map-tone="light"] .layer-popover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, .42);
  backdrop-filter: blur(10px);
}
html[data-map-tone="light"] .airport-overlay {
  box-shadow: 0 8px 20px rgba(0, 0, 0, .34);
  backdrop-filter: blur(9px);
}

:root {
  --tooltip-bg: #0a1a26f7;
  --tooltip-border: #2f6884;
  --tooltip-color: #d6eefa;
  --tooltip-muted: #8fb0be;
  --tooltip-strong: #eaf6fb;
  --tooltip-meta: #9bb8c6;
}

html[data-map-tone="light"] {
  --tooltip-bg: rgba(7, 25, 35, .82);
  --tooltip-border: rgba(47, 104, 132, .82);
}

.app-tooltip {
  position: fixed; left: 0; top: 0; z-index: 99999; pointer-events: none;
  box-sizing: border-box;
  max-width: min(320px, calc(100vw - 24px));
  padding: 8px 11px;
  background: var(--tooltip-bg); color: var(--tooltip-color);
  border: 1px solid var(--tooltip-border); border-radius: 7px;
  font: 500 11px/1.45 Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  letter-spacing: .1px;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: anywhere;
  box-shadow: 0 12px 28px #000b, 0 0 0 1px #3bd4ff10;
  backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}
.app-tooltip.is-stack,
.app-tooltip.is-rich {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  min-width: min(196px, calc(100vw - 24px));
  white-space: normal;
}
.app-tooltip.is-visible { opacity: 1; transform: none; }
.app-tooltip-line {
  margin: 0;
  line-height: 1.4;
  max-width: 100%;
}
.app-tooltip-line.is-title {
  color: var(--tooltip-strong);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .02em;
}
.app-tooltip-line.is-body { color: var(--tooltip-color); }
.app-tooltip-line.is-kv {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
}
.app-tooltip-k {
  color: var(--tooltip-muted);
  font-weight: 600;
  flex: 0 1 auto;
}
.app-tooltip-k::after { content: ": "; }
.app-tooltip-v {
  color: var(--tooltip-strong);
  font-weight: 650;
  flex: 1 1 8em;
  min-width: 0;
}
.app-tooltip-line.is-meta {
  color: var(--tooltip-meta);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  line-height: 1.35;
}
.app-tooltip-line.is-foot {
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid #2a556366;
  color: #93b0bc;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
}
.app-tooltip::after {
  content: ""; position: absolute; left: var(--arrow-x, 50%); width: 7px; height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--tooltip-bg); border: 1px solid var(--tooltip-border);
}
.app-tooltip[data-placement="top"]::after { bottom: -4px; border-top: 0; border-left: 0; }
.app-tooltip[data-placement="bottom"]::after { top: -4px; border-bottom: 0; border-right: 0; }
@media (prefers-reduced-motion: reduce) { .app-tooltip { transition: none; } }

/* Contextual traffic inspector: a pinned info card for a neighbour aircraft during replay. */
.map-info-card-layer {
  position: absolute; inset: 0; z-index: 50; overflow: hidden; pointer-events: none;
}
.context-info-card {
  --card-accent: var(--cyan);
  position: absolute; left: 0; top: 0; z-index: 24; width: 236px; min-width: 236px; max-width: 236px;
  padding: 10px 12px 9px; border-radius: 10px;
  background: linear-gradient(180deg, #0b1a24f2, #071219f2);
  border: 1px solid #2f6d7e; box-shadow: 0 14px 34px #000b;
  color: #dbe9ee; font: 500 11px/1.4 Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  pointer-events: auto; cursor: grab; user-select: none;
  contain: layout style; will-change: transform;
}
.context-info-card.is-preparing { visibility: hidden; pointer-events: none; }
.context-info-card.dragging { cursor: grabbing; }
/* Main/self target card → amber theme accent (border + pin + route). It is the primary target in
   every mode — a lone live selection or measurement badge 1 — matching the on-map "1 (amber)" badge.
   When cards overlap while relocating, the primary card stays above the secondary. */
.context-info-card.is-self { --card-accent: var(--amber); z-index: 25; border-color: var(--amber); box-shadow: 0 14px 34px #000b, 0 0 0 1px #e6b94f2e; }
.context-info-card.is-detail-active {
  border-color: var(--card-accent);
  box-shadow: 0 14px 34px #000b, 0 0 0 2px color-mix(in srgb, var(--card-accent) 34%, transparent), 0 0 19px color-mix(in srgb, var(--card-accent) 18%, transparent);
}
.context-info-card.is-self .context-info-pin { color: var(--amber); }
.context-info-card.is-self .context-info-route .context-info-route-arrow { color: var(--amber); }
.context-info-card.is-self .context-info-pin[aria-pressed="true"] { background: #3a2a05cc; border-color: var(--amber); color: var(--amber); }
.context-info-card.is-self .context-info-route .context-info-code:hover,
.context-info-card.is-self .context-info-route .context-info-code:focus-visible { text-decoration-color: var(--amber); }
/* Secondary/context target card → cyan accent, matching the on-map "2 (cyan)" measurement badge. */
.context-info-card:not(.is-self) { border-color: var(--cyan); }
.context-info-card:not(.is-self) .context-info-pin { color: var(--cyan); }
.context-info-card:not(.is-self) .context-info-route .context-info-route-arrow { color: var(--cyan); }
.context-info-card:not(.is-self) .context-info-pin[aria-pressed="true"] { background: #05303dcc; border-color: var(--cyan); color: var(--cyan); }
.map-target-edge {
  --edge-color: var(--cyan);
  position: absolute; z-index: 27; left: 50%; top: 50%;
  min-width: 94px; max-width: 154px; height: 27px; padding: 0 8px 0 5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transform: translate(-50%, -50%); border: 1px solid color-mix(in srgb, var(--edge-color) 68%, transparent);
  border-radius: 14px; background: #071821eb; color: #dff6ff;
  box-shadow: 0 5px 16px #0009, 0 0 0 1px color-mix(in srgb, var(--edge-color) 16%, transparent);
  font: 600 10px/1 Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  cursor: pointer; pointer-events: auto; white-space: nowrap;
}
.map-target-edge[hidden] { display: none !important; }
.map-target-edge.is-self { --edge-color: var(--amber); z-index: 28; }
.map-target-edge.is-search-preview { --edge-color: #9d8cff; z-index: 29; }
.map-target-edge:hover { background: #0c2632f5; border-color: var(--edge-color); }
.map-target-edge:focus-visible { outline: 2px solid var(--edge-color); outline-offset: 2px; }
.map-target-edge-arrow {
  flex: 0 0 auto; color: var(--edge-color); font-size: 10px;
  transform: rotate(var(--edge-angle, 0deg)); transform-origin: center;
}
.map-target-edge strong { flex: 1 1 auto; min-width: 42px; overflow: hidden; text-overflow: ellipsis; letter-spacing: .25px; }
.map-target-edge small { flex: 0 0 auto; color: #87a5b2; font-size: 8px; font-variant-numeric: tabular-nums; }
.map-target-edge.is-stale { border-style: dashed; opacity: .78; }
.context-info-photo img { -webkit-user-drag: none; user-select: none; }
.context-info-close {
  position: absolute; top: 6px; right: 6px; z-index: 2; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 6px; background: #04101899; color: #cfe2ea;
  font-size: 15px; line-height: 18px; cursor: pointer;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.context-info-close:hover {
  background: #04101ecc;
  color: #eaf4f7;
  box-shadow: 0 0 0 2px #3bd4ff22;
}
.context-info-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #3bd4ff30;
}
.context-info-pin {
  position: absolute; top: 6px; left: 6px; z-index: 2; width: 22px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #ffffff26; border-radius: 6px; background: #04101899; color: #cfe2ea; cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.context-info-pin svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.context-info-pin:hover {
  background: #04101ecc;
  color: #eaf4f7;
  border-color: #3bd4ff44;
  box-shadow: 0 0 0 2px #3bd4ff18;
}
.context-info-pin:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #3bd4ff30;
}
.context-info-pin[aria-pressed="true"] { background: #3a2a05cc; border-color: var(--amber); color: var(--amber); }
.context-info-pin[aria-pressed="true"] svg { fill: currentColor; }
.context-info-photo {
  position: relative; margin: -10px -12px 9px; height: 116px; overflow: hidden;
  border-radius: 10px 10px 0 0; background: #0a1620;
}
.context-info-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.context-info-photo.no-photo {
  height: 58px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 118%, #193949 0, transparent 54%),
    repeating-linear-gradient(90deg, transparent 0 28px, #ffffff08 29px),
    linear-gradient(180deg, #0e2331, #0a1620);
  border-bottom: 1px solid #ffffff12;
}
.context-info-photo.no-photo img { display: none; }
.context-info-photo-symbol { font-size: 18px; line-height: 1; color: #6f97a6; opacity: .78; }
.context-info-card.is-self .context-info-photo-symbol { color: var(--amber); }
.context-info-photo.loading { background: linear-gradient(90deg, #0d1c27, #12303f, #0d1c27); background-size: 200% 100%; animation: contextPhotoShimmer 1.15s linear infinite; }
.context-info-photo.loading img { opacity: 0; }
@keyframes contextPhotoShimmer { to { background-position: -200% 0; } }
.context-info-photo-tag {
  position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 5px;
  font-size: 9px; background: #041018cc; color: #bcd4dd;
}
.context-info-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1px 8px; min-width: 0; }
.context-info-head strong {
  grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: #eafaff; letter-spacing: .3px;
  padding-right: 18px; /* leave room for the × when there is no photo band */
}
.context-info-subrow {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  width: 100%; min-width: 0; box-sizing: border-box;
}
.context-info-subrow #contextInfoSub,
.context-info-subrow #selfInfoSub {
  min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; color: #83a7b3;
}
.context-info-quality {
  grid-column: 2;
  grid-row: 1;
  flex: 0 0 auto;
  margin-left: 0;
  align-self: center;
}
.context-info-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0 0; }
.context-info-grid dt { color: #7c9eab; font-size: 10px; }
.context-info-grid dd { margin: 0; color: #e4f1f5; font-variant-numeric: tabular-nums; text-align: right; }
/* All vertical-motion readouts use the same palette as 승강 mode. */
.context-info-grid dd.is-climb { color: var(--vertical-climb); }
.context-info-grid dd.is-descend { color: var(--vertical-descend); }
.context-info-grid dd .viewport-aircraft-trend.is-climb { color: var(--vertical-climb); }
.context-info-grid dd .viewport-aircraft-trend.is-descend { color: var(--vertical-descend); }
.context-info-grid dd .viewport-aircraft-trend.is-level { color: #829eaa; }
.context-info-grid dd .viewport-aircraft-trend.is-ground { color: #8a9aa3; }
.context-info-grid dd.wind-help { color: #7fe0a6; }
.context-info-grid dd.wind-warn { color: #ffcf70; }
.context-info-grid dd.wind-alert { color: #ff8b7a; }
.context-info-grid dd.wind-neutral { color: #bcd7e4; }
.context-info-grid dd.wind-model { white-space: nowrap; font-size: 10px; }
.context-info-grid dd.wind-model .wind-warn { color: #ffcf70; }
.context-info-grid dd.wind-model .wind-alert { color: #ff8b7a; }
.context-info-grid dd.wind-model .wind-neutral { color: #bcd7e4; }
.context-info-grid dt[data-app-tooltip], .context-info-grid dd[data-app-tooltip] { cursor: help; }
.context-info-wind-note {
  margin-top: 5px; padding: 4px 6px; border-left: 2px solid #547f8e; border-radius: 2px;
  background: #16303b4d; color: #88aab6; font-size: 8px; line-height: 1.45; word-break: keep-all;
}
.context-info-wind-note[hidden] { display: none !important; }

.wind-overlay.is-unavailable .wind-overlay-body { opacity: .78; }
.wind-overlay-toggle:disabled,
.wind-level-slider:disabled,
.wind-panel-minimize:disabled { cursor: not-allowed; opacity: .58; }
.layer-row:has(input:disabled) { cursor: not-allowed; opacity: .52; }
.context-info-footer {
  display: block;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid #ffffff14;
  min-width: 0;
}
.context-info-route {
  --journey-progress: .5;
  --journey-line: #3fa8bd;
  --journey-plane: #9bf6ef;
  --journey-plane-glow: var(--cyan);
  margin: 0; padding: 0; border: 0; min-width: 0;
  color: #eef7fa; word-break: keep-all;
}
.context-info-card.is-self .context-info-route {
  --journey-line: #c89b36;
  --journey-plane: #ffe39a;
  --journey-plane-glow: var(--amber);
}
.context-info-route[hidden] { display: none !important; }
.context-info-journey-codes,
.context-info-journey-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.context-info-route .context-info-code {
  color: #dcebf0; font-size: 10px; font-weight: 750; letter-spacing: .04em;
  cursor: help; text-decoration: underline dotted #ffffff4d; text-underline-offset: 3px;
}
.context-info-route.is-route-color-mode {
  --route-origin-color: #657881;
  --route-destination-color: #657881;
  --journey-line: var(--route-origin-color);
  --journey-plane: var(--route-destination-color);
  --journey-plane-glow: var(--route-destination-color);
}
.context-info-route.is-route-color-mode .context-info-code.is-origin { color: var(--route-origin-color); }
.context-info-route.is-route-color-mode .context-info-code.is-destination { color: var(--route-destination-color); }
.context-info-route.is-route-color-mode .context-info-code.is-origin:hover,
.context-info-route.is-route-color-mode .context-info-code.is-origin:focus-visible,
.context-info-route.is-route-color-mode .context-info-code.is-destination:hover,
.context-info-route.is-route-color-mode .context-info-code.is-destination:focus-visible {
  color: color-mix(in srgb, currentColor 78%, white);
}
.context-info-route.is-route-color-mode .context-info-journey-track::before {
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--route-origin-color) 62%, #49616c) 0 5px, transparent 5px 8px);
}
.context-info-route .context-info-code:hover, .context-info-route .context-info-code:focus-visible { color: #fff; text-decoration-color: var(--amber); outline: none; }
.context-info-route .context-info-code.is-placeholder { color: #67838e; font-size: 8px; text-decoration: none; cursor: default; }
.context-info-journey-track {
  position: relative; height: 15px; margin: 1px 3px 0;
}
.context-info-journey-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px;
  border-radius: 2px; background: repeating-linear-gradient(90deg, #49616c 0 5px, transparent 5px 8px);
}
.context-info-journey-fill {
  position: absolute; left: 0; top: 7px; width: calc(var(--journey-progress) * 100%); height: 2px;
  border-radius: 2px; background: var(--journey-line); box-shadow: 0 0 7px color-mix(in srgb, var(--journey-line) 45%, transparent);
}
.context-info-journey-plane {
  position: absolute; z-index: 1; left: calc(var(--journey-progress) * 100%); top: 8px;
  display: block; width: 18px; height: 18px;
  color: var(--journey-plane); font-size: 0; line-height: 0;
  text-shadow: 0 1px 2px #02070a, 0 0 5px color-mix(in srgb, var(--journey-plane-glow) 68%, transparent);
  transform: translate(-50%, -50%);
  transition: left .3s ease;
}
.context-info-journey-plane .journey-aircraft-shape {
  display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 1px 2px #02070a) drop-shadow(0 0 4px color-mix(in srgb, var(--journey-plane-glow) 68%, transparent));
}
.context-info-route.is-progress-unknown .context-info-journey-fill { display: none; }
.context-info-route.is-progress-unknown .context-info-journey-plane,
.detail-journey-progress.is-progress-unknown .context-info-journey-plane { color: #718b96; text-shadow: 0 1px 2px #02070a; }
.context-info-route.is-progress-unknown .context-info-journey-plane .journey-aircraft-shape,
.detail-journey-progress.is-progress-unknown .context-info-journey-plane .journey-aircraft-shape { filter: drop-shadow(0 1px 2px #02070a); }
.context-info-route.is-route-loading .context-info-journey-track::before { opacity: .72; }
.context-info-route.is-route-loading .context-info-journey-plane { animation: route-loading-pulse 1.1s ease-in-out infinite alternate; }
@keyframes route-loading-pulse { from { opacity: .38; } to { opacity: .82; } }
@media (prefers-reduced-motion: reduce) { .context-info-route.is-route-loading .context-info-journey-plane { animation: none; opacity: .62; } }
.context-info-journey-meta { margin-top: 1px; color: #6f929e; font-size: 8px; }
.context-info-journey-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-info-journey-meta strong { flex: 0 0 auto; color: #9db7c1; font-size: 8px; font-weight: 600; white-space: nowrap; }
.context-info-time {
  margin: 0;
  font-size: 9px; color: #6f929e; white-space: nowrap;
}
.context-info-detail {
  position: absolute; z-index: 4; right: 0; bottom: 7px; min-height: 26px; padding: 4px 6px 4px 7px;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 48%, transparent); border-right: 0; border-radius: 7px 0 0 7px;
  background: #071119e8; box-shadow: -5px 4px 14px #0008; color: color-mix(in srgb, var(--card-accent) 82%, white);
  font: 700 9px/1.2 Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  letter-spacing: .03em; cursor: pointer; touch-action: manipulation; backdrop-filter: blur(6px);
  transition: padding .14s ease, background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.context-info-detail[hidden] { display: none !important; }
.context-info-detail-panel { position: relative; width: 12px; height: 11px; border: 1px solid currentColor; border-radius: 2px; opacity: .9; }
.context-info-detail-panel i { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 3px; border-left: 1px solid currentColor; background: color-mix(in srgb, var(--card-accent) 18%, transparent); }
.context-info-detail-chevron { font-size: 14px; line-height: .8; transition: transform .14s ease; }
.context-info-detail:hover { padding-left: 9px; background: #10202aed; border-color: var(--card-accent); color: color-mix(in srgb, var(--card-accent) 68%, white); }
.context-info-detail:hover .context-info-detail-chevron { transform: translateX(2px); }
.context-info-detail.is-open { background: color-mix(in srgb, var(--card-accent) 18%, #071119e8); border-color: var(--card-accent); color: color-mix(in srgb, var(--card-accent) 62%, white); }
.context-info-detail.is-open .context-info-detail-panel i { background: color-mix(in srgb, var(--card-accent) 48%, transparent); }
.context-info-detail.is-open .context-info-detail-chevron { transform: rotate(180deg); }
.context-info-detail:focus-visible {
  outline: none; border-color: var(--card-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--card-accent) 22%, transparent);
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
*::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb { min-height: 32px; background: var(--scrollbar-thumb); border: 2px solid var(--scrollbar-track); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
*::-webkit-scrollbar-corner { background: var(--scrollbar-track); }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.app-shell { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top) minmax(0, 1fr) var(--status); }
.topbar { position: relative; display: flex; align-items: center; padding: 0 var(--topbar-padding-x); gap: var(--topbar-gap); background: #07131d; border-bottom: 1px solid var(--line); z-index: 20; transition: background-color .24s ease, border-color .24s ease; }
html[data-map-tone="light"] .topbar { background: #0d202b; }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: var(--left);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  text-align: left;
  font: inherit;
}
.brand-mark { width: 29px; height: 29px; display: block; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 0 6px #42d9ef55); }
.brand strong { font-size: 14px; letter-spacing: .16em; color: #a8eaff; display: block; }
.brand:hover strong { color: #dff7ff; }
.brand:hover .brand-mark { filter: drop-shadow(0 0 8px #42d9ef88) brightness(1.08); }
.brand:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 3px;
}
.brand small, .connection small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; letter-spacing: .02em; }
html.is-reloading .app-shell { opacity: .72; transition: opacity .18s ease; }
html.is-reloading #loadingState { display: flex !important; }
.topbar-map-center-slot,
.topbar-right-slot { display: contents; }
.mode-switcher {
  position: absolute; left: var(--mode-switcher-center-x, 50%); top: 50%; transform: translate(-50%, -50%); z-index: 1;
  display: flex; align-items: center; gap: 5px; padding: 4px;
  background: linear-gradient(180deg, #0b202d 0%, #081923 100%);
  border: 1px solid #244a5e; border-radius: 10px;
  box-shadow: 0 5px 16px #02080d66, inset 0 1px 0 #ffffff08;
  transition: left .18s ease, border-color .14s ease;
}
.mode-switcher-compact {
  position: absolute; left: var(--mode-switcher-center-x, 50%); top: 50%; z-index: 2;
  transform: translate(-50%, -50%); visibility: hidden; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; height: 41px; padding: 0 12px;
  border: 1px solid #31566a; border-radius: 9px; background: #091a26; color: #dff7ff;
  font: 700 11px/1 ui-monospace, "Pretendard", "Noto Sans KR", sans-serif;
  cursor: pointer; white-space: nowrap; transition: left .18s ease, border-color .14s ease, background .14s ease;
}
.mode-switcher-compact b { color: var(--cyan); font-size: 10px; transition: transform .14s ease; }
.mode-switcher-compact:hover,
.mode-switcher-compact:focus-visible { border-color: var(--cyan); background: #0f2735; }
.mode-switcher-select {
  border: 0; background: transparent; border-radius: 7px; color: #88a8b7; padding: 7px 14px; cursor: pointer; font-size: 12px;
}
.mode-switcher-select.active { background: #16405a; color: #dff7ff; box-shadow: inset 0 0 0 1px #397999; }
.mode-switcher-divider {
  width: 1px; align-self: stretch; margin: 4px 0; background: #23465a;
}
.mode-switcher-settings {
  flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: #6d8f9f; cursor: pointer; font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.mode-switcher-settings:hover,
.mode-switcher-settings[aria-expanded="true"] { color: var(--cyan); background: #0f2735; }
.mode-panel-toggle {
  position: absolute; top: 50%; z-index: 2; width: 27px; height: 41px; padding: 0;
  border: 1px solid #244a5e;
  background: linear-gradient(180deg, #0b202d 0%, #081923 100%); color: #82aaba;
  box-shadow: 0 4px 12px #02080d3d, inset 0 1px 0 #ffffff06;
  display: inline-grid; place-items: center; cursor: pointer; pointer-events: auto;
  font: 700 14px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  transition: left .18s ease, border-color .14s ease, color .14s ease, background .14s ease, box-shadow .14s ease;
}
.mode-panel-toggle::before {
  content: ""; position: absolute; top: 13px; bottom: 13px; width: 1px;
  background: var(--cyan); opacity: 0; transition: opacity .14s ease;
}
.mode-panel-toggle-left::before { left: 0; }
.mode-panel-toggle-right::before { right: 0; }
.mode-panel-toggle span { transform: translateY(-1px); }
.mode-panel-toggle[aria-expanded="true"] {
  color: #9bc8d8;
}
.mode-panel-toggle[aria-expanded="true"]::before {
  opacity: .58;
}
.mode-panel-toggle:hover,
.mode-panel-toggle:focus-visible {
  background: #0d2634; color: #a9d8e7;
  box-shadow: 0 4px 12px #02080d55, inset 0 1px 0 #ffffff08;
}
.mode-panel-toggle:active {
  background: #0c2432;
}
.mode-panel-toggle-left {
  left: calc(var(--mode-switcher-center-x, 50%) - var(--mode-switcher-full-width, 246px) / 2);
  transform: translate(-100%, -50%);
  border-right: 0; border-radius: 10px 0 0 10px;
}
.mode-panel-toggle-right {
  left: calc(var(--mode-switcher-center-x, 50%) + var(--mode-switcher-full-width, 246px) / 2);
  transform: translateY(-50%);
  border-left: 0; border-radius: 0 10px 10px 0;
}
html[data-mode-switcher-layout="compact"] .mode-panel-toggle-left {
  left: calc(var(--mode-switcher-center-x, 50%) - var(--mode-switcher-compact-width, 82px) / 2);
}
html[data-mode-switcher-layout="compact"] .mode-panel-toggle-right {
  left: calc(var(--mode-switcher-center-x, 50%) + var(--mode-switcher-compact-width, 82px) / 2);
}
.mode-preset-popover {
  position: fixed; z-index: 30; width: min(272px, calc(100vw - 18px)); padding: 10px;
  border: 1px solid #2b6078; border-radius: 7px; background: #07151df5; box-shadow: 0 12px 32px #000a; backdrop-filter: blur(8px);
  max-height: calc(100vh - 68px); overflow-y: auto; overscroll-behavior: contain;
}
.mode-preset-popover[hidden] { display: none !important; }
.mode-preset-popover-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px;
}
.mode-preset-popover-heading strong { color: #d7eef7; font-size: 11px; }
.mode-preset-group-label { display: block; margin: 0 0 6px; color: #6f94a3; font-size: 8px; letter-spacing: .04em; }
#modePresetPopoverClose {
  width: 30px; height: 30px; border: 0; border-radius: 5px; background: transparent; color: #9fc3d3; font-size: 18px; cursor: pointer;
}
#modePresetPopoverClose {
  transition: color .14s ease, background .14s ease, box-shadow .14s ease;
}
#modePresetPopoverClose:hover {
  color: white;
  background: #123041;
  box-shadow: 0 0 0 2px #3bd4ff18;
}
#modePresetPopoverClose:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #3bd4ff28;
}
.mode-preset-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 6px;
}
.mode-preset-tab {
  min-height: 32px; border: 1px solid #28536a; border-radius: 5px; background: #0d2635; color: #9fc3d3;
  font-size: 10px; line-height: 1.2; cursor: pointer; position: relative;
}
.mode-preset-tab:hover,
.mode-preset-tab:focus-visible { border-color: var(--cyan); color: white; }
.mode-preset-tab.active {
  background: #16405a; color: #dff7ff; box-shadow: inset 0 0 0 1px #397999;
}
.mode-preset-tab.is-customized::after {
  content: ''; position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--amber);
}
.mode-preset-tab-note {
  margin: 0 0 8px; color: #7fa4b3; font-size: 9px; line-height: 1.35;
}
.mode-preset-section + .mode-preset-section { margin-top: 8px; }
.mode-preset-section-label {
  display: block; margin-bottom: 6px; color: #8eb0bc; font-size: 9px; letter-spacing: .04em;
}
.mode-preset-wind { display: grid; gap: 5px; }
.mode-preset-wind strong {
  color: #dff7ff; font: 700 11px ui-monospace, monospace; letter-spacing: .02em;
}
.mode-preset-wind-ends {
  display: flex; justify-content: space-between; padding: 0 6px; color: #6f93a3; font-size: 8px;
}
.mode-preset-layers { display: grid; gap: 4px; }
.mode-preset-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px;
}
.mode-preset-actions-end { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mode-preset-reset,
.mode-preset-cancel,
.mode-preset-apply {
  min-height: 34px; border-radius: 5px; font-size: 10px; cursor: pointer; padding: 0 10px;
}
.mode-preset-reset {
  border: 1px solid #28536a; background: #0d2635; color: #9fc3d3;
}
.mode-preset-reset:hover { border-color: var(--cyan); color: white; }
.mode-preset-cancel {
  border: 1px solid #28536a; background: transparent; color: #9fc3d3;
}
.mode-preset-cancel:hover { border-color: #3d7f99; color: white; }
.mode-preset-apply {
  border: 1px solid #2f8798; background: #165b68; color: #dff7ff; font-weight: 700;
}
.mode-preset-apply:hover { border-color: var(--cyan); background: #1a6d7c; color: white; }
.topbar-quick-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar-quick-action { position: relative; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #31566a; border-radius: 8px; background: #0a1c27; color: #a9ccda; padding: 0; cursor: pointer; }
.topbar-quick-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topbar-quick-action:hover { border-color: var(--cyan); background: #103042; color: #e3f8ff; box-shadow: 0 0 0 2px #41bdd51c; }
.topbar-quick-action:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.topbar-quick-action strong { position: absolute; top: -5px; right: -5px; display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 3px; border: 1px solid #245568; border-radius: 999px; background: #14384a; color: var(--cyan); font: 700 8px/1 ui-monospace, monospace; letter-spacing: .02em; }
.topbar-search-toggle { color: var(--cyan); }
.topbar-search-toggle:hover, .topbar-search-toggle[aria-expanded="true"] { border-color: var(--cyan); background: #103042; color: #e3f8ff; box-shadow: 0 0 0 2px #41bdd51c; }
.time-shift-toggle { margin-left: 0; }
.time-shift-toggle strong { min-width: 22px; font-family: system-ui, sans-serif; letter-spacing: -.04em; }
.time-shift-toggle.active {
  border-color: #c9a14a; background: #2a2212; color: #ffe7b0;
  box-shadow: inset 0 0 0 1px #8a6b29;
}
.time-shift-toggle.active:hover { border-color: var(--amber); color: #fff1cf; }
.time-shift-toggle.active:focus-visible { outline-color: var(--amber); }
.time-shift-toggle.active strong { border-color: #8a6b29; background: #2a2212; color: var(--amber); }
.connection { min-width: var(--right); display: flex; justify-content: flex-end; align-items: center; gap: 9px; }
.connection strong {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; letter-spacing: .05em;
}
.connection #statusText { font: inherit; letter-spacing: inherit; }
.connection-backup {
  color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 0;
}
.connection-route {
  color: var(--amber); font-size: 10px; font-weight: 600; letter-spacing: 0;
}
.connection-route[data-state="error"] { color: var(--red); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px currentColor; color: var(--amber); }
.status-dot.live { background: var(--mint); color: var(--mint); }
.status-dot.error { background: var(--red); color: var(--red); }
.status-dot.timeshift { background: var(--cyan); color: var(--cyan); }
/* Brand refresh boot: cover HTML "연결 중" until / after sync boot script. */
html.brand-refresh-boot .connection .status-dot {
  background: var(--mint) !important;
  color: var(--mint) !important;
}
html.brand-refresh-boot #statusText {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
html.brand-refresh-boot #statusText::before {
  content: 'LIVE';
  font-size: 11px;
  letter-spacing: .05em;
}
html.brand-refresh-boot #latencyText {
  font-size: 0 !important;
}
html.brand-refresh-boot #latencyText::before {
  content: '갱신 중';
  font-size: 10px;
  color: var(--muted);
}

.workspace { min-height: 0; display: grid; grid-template-columns: var(--left-slot) minmax(0, 1fr) var(--right-slot); position: relative; overflow: hidden; }
.control-panel, .detail-panel { min-height: 0; background: var(--panel); z-index: 12; }
.control-panel {
  grid-column: 1;
  border-right: 1px solid var(--line);
  padding: 18px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.detail-panel {
  grid-column: 3;
  --detail-accent: var(--cyan);
  --detail-frame: #1b5264;
  --detail-divider: #1f5263;
  --detail-photo-frame: #1c4d60;
  border-left: 1px solid var(--line);
  /*
   * No padding-top here on purpose. This element is its own scroll container and
   * its heading is sticky; browsers disagree on whether a sticky top offset is
   * measured from the scrollport's padding box or its content box, so a non-zero
   * padding-top left an uncovered strip where content scrolled past the heading.
   * The heading owns the top inset instead, which pins it flush at every width.
   */
  padding: 0 14px 18px;
  --detail-heading-inset: 14px;
}
.detail-panel[data-detail-target="primary"] {
  --detail-accent: var(--amber);
  --detail-photo-frame: color-mix(in srgb, var(--amber) 42%, #1c4d60);
}
.detail-panel[data-detail-target="secondary"] {
  --detail-accent: var(--cyan);
  --detail-photo-frame: color-mix(in srgb, var(--cyan) 44%, #1c4d60);
}
.detail-panel, .control-scroll { overflow: auto; }

/* Airport flow keeps its context fixed; only the nearby-operation list owns scrolling. */
.detail-panel.is-airport-briefing {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.detail-panel.is-airport-briefing > .panel-heading { flex: 0 0 auto; }
.detail-panel.is-airport-briefing::after { display: none; }
.detail-panel.is-airport-briefing #mapFeatureDetail {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.detail-panel.is-airport-briefing .facility-photo { flex: 0 0 auto; }
.detail-panel.is-airport-briefing .feature-schedule-section {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}
.detail-panel.is-airport-briefing .feature-schedule-list {
  /* Keep a short list as short content; only a long list consumes the remaining panel height. */
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}
.detail-panel.is-airport-briefing .feature-schedule-limit { flex: 0 0 auto; }

/*
 * The two panels scroll differently: the left one scrolls an inner .control-scroll
 * so its heading stays put, while the right panel is itself the scroll container,
 * so "공항 정보" used to scroll away and left a long flight list with no visible
 * owner. Pin the right heading instead of restructuring the markup. --panel is
 * 96% opaque, which would ghost the text scrolling underneath, so the pinned
 * strip paints the equivalent solid colour.
 */
.detail-panel > .panel-heading {
  position: sticky;
  top: 0;
  z-index: 4;
  /*
   * Longhands only: .detail-panel-heading already owns margin-bottom and
   * padding-bottom (plus its divider border), and a shorthand here would silently
   * reset them back to the generic .panel-heading spacing.
   */
  margin-left: -14px;
  margin-right: -14px;
  padding-top: var(--detail-heading-inset);
  padding-left: 14px;
  padding-right: 14px;
  background: var(--panel-scrim);
}

/*
 * Both panels clipped their last row flush against the panel edge, which reads
 * as "cut off" rather than "keep scrolling". A sticky pseudo-element pinned to
 * the bottom of each scrollport fades the cut. It costs nothing when the content
 * is short: the gradient resolves to the panel colour it is drawn on.
 */
.detail-panel::after,
.control-scroll::after {
  content: "";
  display: block;
  position: sticky;
  z-index: 3;
  height: 20px;
  pointer-events: none;
  background: linear-gradient(180deg, #08151f00, var(--panel-scrim));
}
.detail-panel::after { bottom: 0; margin: 0 -14px -18px; }
.control-scroll::after { bottom: 0; margin: 0 -16px -12px; }
.control-panel-compact, .detail-panel-compact { display: none; }
@media (min-width: 1200px) {
  #controlsToggle, #detailToggle { display: none; }
  .topbar-map-center-slot {
    position: absolute;
    inset: 0;
    display: block;
    min-width: 0;
    pointer-events: none;
  }
  .mode-switcher {
    position: absolute;
    left: var(--mode-switcher-center-x, 50%);
    top: 50%;
    transform: translate(-50%, -50%);
    flex: 0 0 auto;
    pointer-events: auto;
    border-radius: 0;
  }
  .mode-switcher-compact { border-radius: 0; }
  html[data-mode-switcher-layout="compact"] .mode-switcher {
    visibility: hidden;
    pointer-events: none;
  }
  html[data-mode-switcher-layout="compact"] .mode-switcher-compact {
    visibility: visible;
    pointer-events: auto;
  }
  html[data-mode-switcher-layout="compact"][data-mode-switcher-menu="open"] .mode-switcher {
    top: calc(100% + 8px);
    transform: translateX(-50%);
    visibility: visible;
    pointer-events: auto;
    z-index: 5;
    box-shadow: 0 12px 28px #000b;
    border-radius: 10px;
  }
  html[data-mode-switcher-layout="compact"][data-mode-switcher-menu="open"] .mode-switcher-compact b {
    transform: rotate(180deg);
  }
  .topbar-map-center-slot .mode-preset-popover { pointer-events: auto; }
  /*
   * Compact rails are map overlays, not layout columns. The canvas therefore
   * uses the full viewport while HUD controls keep a safe rail clearance.
   */
  html[data-control-panel="compact"] {
    --left-slot: 0px;
    --map-left-clearance: var(--left-compact);
  }
  html[data-control-panel="open"] {
    --left-slot: 0px;
    --map-left-clearance: var(--left);
  }
  html[data-control-panel="closed"] { --left-slot: 0px; }
  html[data-detail-panel="compact"] {
    --right-slot: 0px;
    --map-right-clearance: var(--right-compact);
  }
  html[data-detail-panel="open"] {
    --right-slot: 0px;
    --map-right-clearance: var(--right);
  }
  html[data-detail-panel="compact"] .map-side-controls {
    right: calc(var(--right-compact) / 2);
    transform: translate(50%, -50%);
  }
  html[data-detail-panel="closed"] { --right-slot: 0px; }
  .topbar-quick-actions {
    position: static;
    transform: none;
    margin: 0;
    flex: 0 0 auto;
  }
  .topbar-right-slot {
    position: absolute;
    inset: 0 0 0 auto;
    width: auto;
    padding: 0 var(--topbar-padding-x);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .topbar-right-slot .connection {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: 0;
  }
  #detailToggle {
    flex-basis: var(--topbar-detail-toggle-width);
    width: var(--topbar-detail-toggle-width);
    min-width: var(--topbar-detail-toggle-width);
  }
  html[data-control-panel="closed"] .control-panel,
  html[data-detail-panel="closed"] .detail-panel { display: none; }
  html[data-control-panel="compact"] .control-panel:not(.is-panel-exiting) {
    position: absolute; inset: 0 auto 0 0;
    width: var(--left-compact); padding: 0; overflow: hidden;
    border: 0; background: transparent; pointer-events: none;
  }
  /* Expanded panels overlay the map so opening either side never resizes its canvas. */
  html[data-control-panel="open"] .control-panel,
  .control-panel.is-panel-exiting {
    position: absolute; inset: 0 auto 0 0;
    bottom: var(--panel-bottom-clearance, 0px);
    width: var(--left); z-index: 45;
    box-shadow: 0 0 35px #000b;
  }
  html[data-control-panel="compact"] .control-panel:not(.is-panel-exiting) > :not(.control-panel-compact) { display: none !important; }
  html[data-control-panel="compact"] .control-panel:not(.is-panel-exiting) .control-panel-compact {
    position: relative;
    width: 100%; height: 100%; padding: 12px 7px 14px;
    border: 0; background: transparent;
    color: var(--text);
    display: flex; flex-direction: column; align-items: center;
  }
  html[data-detail-panel="compact"] .detail-panel:not(.is-panel-exiting) {
    position: absolute; inset: 0 0 0 auto;
    width: var(--right-compact); padding: 0; overflow: hidden;
    border: 0; background: transparent; pointer-events: none;
  }
  html[data-detail-panel="open"] .detail-panel,
  .detail-panel.is-panel-exiting {
    position: absolute; inset: 0 0 0 auto;
    bottom: var(--panel-bottom-clearance, 0px);
    width: var(--right); z-index: 45;
    box-shadow: 0 0 35px #000b;
  }
  html[data-detail-panel="compact"] .detail-panel:not(.is-panel-exiting) > :not(.detail-panel-compact) { display: none !important; }
  html[data-detail-panel="compact"] .detail-panel:not(.is-panel-exiting) .detail-panel-compact {
    width: 100%; height: 100%; padding: 12px 7px 14px;
    border: 0; background: transparent;
    color: var(--text); display: flex; flex-direction: column; align-items: center;
  }
  .control-panel-compact-main {
    width: 100%; padding: 8px 3px 11px; border: 1px solid #173748;
    border-radius: 8px; background: rgba(8, 21, 31, .88); color: inherit; cursor: pointer;
    box-shadow: 0 8px 24px #0007; backdrop-filter: blur(6px); pointer-events: auto;
    display: flex; flex-direction: column; align-items: center;
  }
  .control-panel-compact-expand {
    width: 34px; height: 34px; margin-bottom: 9px;
    border: 1px solid #285065; border-radius: 8px; background: #0b202d;
    color: #83d9ed; font: 400 24px/30px ui-sans-serif, sans-serif;
    display: grid; place-items: center; transition: border-color .15s, background .15s, color .15s;
  }
  .control-panel-compact .eyebrow {
    margin-bottom: 8px; font-size: 7px; letter-spacing: .12em;
  }
  .control-panel-compact-count {
    display: inline-flex; align-items: baseline; justify-content: center; gap: 3px;
    max-width: 100%; white-space: nowrap;
  }
  .control-panel-compact-count strong {
    color: #dff7ff; font: 700 24px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    font-variant-numeric: tabular-nums;
  }
  .control-panel-compact-unit { flex: 0 0 auto; color: #7697a6; font-size: 9px; }
  .control-panel-compact-label,
  .detail-panel-compact-label {
    margin-top: 7px;
    color: #9bb8c4;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }
  .control-panel-compact-context,
  .detail-panel-compact-context {
    max-width: 100%;
    min-height: 12px;
    margin-top: 4px;
    color: #7697a6;
    font: inherit;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    white-space: nowrap;
  }
  .control-panel-compact-status {
    min-height: 12px; color: #91afbb; font-size: 8px; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  }
  .control-panel-compact-context[hidden],
  .control-panel-compact-status[hidden] { display: none !important; }
  .control-panel-compact-status i {
    width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%;
    background: #5a7a88; box-shadow: 0 0 7px currentColor; color: #5a7a88;
  }
  .control-panel-compact-status i[data-state="live"] { background: var(--mint); color: var(--mint); }
  .control-panel-compact-status i[data-state="delayed"] { background: var(--amber); color: var(--amber); }
  .control-panel-compact-status i[data-state="offline"] { background: var(--red); color: var(--red); }
  .control-panel-compact-status i[data-state="shift"] { background: var(--cyan); color: var(--cyan); }
  .control-panel-compact-live {
    width: 100%; margin-top: 8px; padding-top: 7px; border-top: 1px solid #173748;
    display: flex; align-items: baseline; justify-content: center; gap: 5px;
    color: #76b9c9; font: 700 7px/1 ui-monospace, monospace; letter-spacing: .1em;
  }
  .control-panel-compact-live[hidden] { display: none !important; }
  .control-panel-compact-live strong {
    color: var(--amber); font: 700 13px/1 ui-monospace, monospace; letter-spacing: 0;
  }
  .control-panel-compact-main:hover .control-panel-compact-expand {
    border-color: #3d7892;
    background: linear-gradient(90deg, #0f2938 0%, #0f2938 72%, #123343 100%);
    box-shadow: inset -2px 0 0 #67dff577, 0 0 10px #41bdd51c;
    color: #d7f3fb;
  }
  .control-panel-compact-main:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .detail-panel-compact-main {
    width: 100%; height: auto; padding: 8px 3px 11px; border: 1px solid #173748;
    border-radius: 8px; background: rgba(8, 21, 31, .88); color: inherit; cursor: pointer;
    box-shadow: 0 8px 24px #0007; backdrop-filter: blur(6px); pointer-events: auto;
    display: flex; flex-direction: column; align-items: center;
  }
  .detail-panel-compact-expand {
    width: 34px; height: 34px; margin-bottom: 9px;
    border: 1px solid #285065; border-radius: 8px; background: #0b202d;
    color: #83d9ed; font: 400 24px/30px ui-sans-serif, sans-serif;
    display: grid; place-items: center; transition: border-color .15s, background .15s, color .15s;
  }
  .detail-panel-compact .eyebrow { margin-bottom: 10px; font-size: 7px; letter-spacing: .12em; }
  .detail-panel-compact-count {
    display: inline-flex; align-items: baseline; justify-content: center; gap: 3px;
    max-width: 100%; white-space: nowrap;
  }
  .detail-panel-compact-count strong {
    color: #dff7ff; font: 700 24px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    font-variant-numeric: tabular-nums;
  }
  .detail-panel-compact-count span { flex: 0 0 auto; color: #7697a6; font-size: 9px; }
  .detail-panel-compact-main[data-mode="target"] .detail-panel-compact-count {
    width: 100%;
  }
  .detail-panel-compact-main[data-mode="target"] .detail-panel-compact-count strong {
    width: 100%; overflow: hidden; text-overflow: ellipsis;
    color: #dff7ff; font-size: 11px; line-height: 1.2; letter-spacing: -.02em;
  }
  .detail-panel-compact-main:hover .detail-panel-compact-expand { border-color: #3d7892; background: #0f2938; color: #d7f3fb; }
  .detail-panel-compact-main:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
}
.detail-section.is-loading .detail-section-summary { color: #78bccc; }
.detail-section.is-loading .detail-section-summary::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px;
  border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px #3bd4ff88;
  animation: detail-section-loading 1s ease-in-out infinite alternate;
}
@keyframes detail-section-loading { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .detail-section.is-loading .detail-section-summary::before { animation: none; opacity: .7; }
}
.time-explorer-entry-status { position: fixed; z-index: 58; top: calc(18px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 11px; width: max-content; max-width: calc(100vw - 24px); padding: 10px 12px; border: 1px solid #397a70; border-radius: 12px; background: #0a2627f5; color: #d9f5ec; box-shadow: 0 12px 36px #0008; font-size: 13px; }
.time-explorer-entry-status[hidden] { display: none; }
.time-explorer-entry-indicator { width: 10px; height: 10px; flex: 0 0 auto; border: 2px solid #557d70; border-top-color: #a9f1cf; border-radius: 50%; animation: time-explorer-spin .8s linear infinite; }
.time-explorer-entry-status button { min-height: 34px; padding: 0 11px; border: 1px solid #54786e; border-radius: 8px; background: #123a38; color: #d8f6eb; font: inherit; cursor: pointer; }
.time-explorer-entry-status button:hover, .time-explorer-entry-status button:focus-visible { border-color: #a5e5cc; outline: 2px solid #a5e5cc55; }
@keyframes time-explorer-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .time-explorer-entry-status { top: calc(10px + env(safe-area-inset-top, 0px)); font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .time-explorer-entry-indicator { animation: none; border: 2px solid #a9f1cf; } }
.control-panel > .panel-heading, .control-panel > .summary-block { flex: 0 0 auto; margin-left: 16px; margin-right: 16px; }
.control-panel > .panel-heading { margin-bottom: 8px; }
.control-scroll {
  min-height: 0; flex: 1 1 auto; padding: 0 16px 12px;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.control-scroll::-webkit-scrollbar { width: 7px; }
.control-scroll::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.control-scroll::-webkit-scrollbar-thumb { border: 2px solid var(--scrollbar-track); border-radius: 999px; background: var(--scrollbar-thumb); }
.control-footer {
  flex: 0 0 auto;
  padding: 8px 12px 12px;
  border-top: 0;
  background: transparent;
}
.disclaimer {
  margin: 0;
  color: var(--panel-disclaimer-color);
  font-size: 10px;
  line-height: 1.45;
  border: 1px solid var(--panel-disclaimer-border);
  background: var(--panel-disclaimer-bg);
  border-radius: 6px;
  padding: 8px 10px;
  word-break: keep-all;
  overflow-wrap: normal;
}
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.panel-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.eyebrow { display: block; color: var(--cyan); letter-spacing: .16em; font-size: 9px; margin-bottom: 3px; }
h2, h3, h4, p { margin-top: 0; }
.panel-heading h2 { font-size: 17px; margin: 0; font-weight: 650; }
.panel-heading-toggle {
  width: 30px; height: 30px; padding: 0; border: 1px solid #285065; border-radius: 7px;
  background: #0b202d; color: #83d9ed; cursor: pointer; display: inline-grid; place-items: center;
}
.panel-heading-toggle span { font: 400 22px/1 ui-sans-serif, sans-serif; }
.panel-heading-toggle:hover { border-color: #3d7892; background: #0f2938; color: #d7f3fb; }
.panel-heading-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.dock-only { display: inline-grid; }
.detail-heading-copy { min-width: 0; flex: 1 1 auto; }
.detail-heading-meta { min-height: 14px; display: flex; align-items: center; gap: 6px; }
.detail-heading-meta .eyebrow { margin-bottom: 0; color: var(--detail-accent); }
.detail-heading-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* Aircraft detail uses the photo hero only — legacy chip/dial header must never resurface. */
#detailContent > .target-header { display: none !important; }
.detail-panel.has-hero-photo #detailContent > .target-header { display: none !important; }
.detail-panel-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--detail-frame, var(--line, #17394a));
}
.detail-back-button { border: 1px solid transparent; border-radius: 5px; background: transparent; color: #8eb9c8; padding: 6px 8px; min-height: 32px; font-size: 10px; white-space: nowrap; cursor: pointer; }
.detail-back-button:hover { border-color: #2b6983; background: var(--panel-card-hover-bg); color: #c5e7f3; }
.detail-back-button.is-airport-ops-back {
  color: #8eb9c8;
}
.detail-back-button.is-airport-ops-back:hover {
  border-color: #2b6983;
  background: #0b2230;
  color: #c5e7f3;
}
.detail-back-button[hidden] { display: none !important; }
.viewport-aircraft-row.is-returned { box-shadow: inset 2px 0 0 var(--cyan); background: var(--panel-card-hover-bg); }
.viewport-aircraft-row.is-map-preview { background: var(--panel-card-hover-bg); box-shadow: inset 2px 0 0 var(--cyan); }
.control-section { border-top: 1px solid #153141; padding: 16px 0; }
.control-panel > .summary-block.control-section {
  border-top: 0;
  padding-top: 6px;
  padding-bottom: 10px;
}
.control-section > label, .section-title { display: flex; align-items: center; justify-content: space-between; color: #b8d0da; font-size: 11px; font-weight: 600; margin-bottom: 9px; }
.section-title output, .section-title small { font-size: 10px; color: var(--cyan); font-weight: 500; }
.section-title .interesting-events-status {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--cyan, #67dff5); font-size: 10px; font-weight: 500; line-height: 1.3;
}
.event-section-heading {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.activity-type-filters {
  min-width: 0; display: flex; align-items: center; gap: 3px; overflow-x: auto;
  scrollbar-width: none; white-space: nowrap;
}
.activity-type-filters::-webkit-scrollbar { display: none; }
.activity-type-filter {
  flex: 0 0 auto; min-width: 0; height: 19px; padding: 0 6px; border: 1px solid #234958;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border-radius: 10px; background: #0a202a; color: #789eac; cursor: pointer;
  font: 650 8px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; vertical-align: middle;
}
.activity-type-filter:hover { color: #c7e8ef; border-color: #397085; }
.activity-type-filter[aria-pressed="true"] {
  color: #bcebf2; border-color: #3f8295; background: #10313d;
}
.activity-type-filter.is-static { cursor: default; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.event-feed-more {
  margin: 0; width: 100%;
  padding: 8px;
  border: 0; border-top: 1px solid #153141;
  background: transparent;
  color: #6f97a7;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
}
.event-feed > .event-feed-more { min-height: 32px; padding: 8px; border-bottom: 0; text-align: center; }
.event-feed > .event-feed-more:hover,
.event-feed > .event-feed-more:focus-visible { background: var(--panel-card-hover-bg); color: #b8e7f1; outline: none; }
.section-title .interesting-events-status[data-state="idle"] {
  color: var(--muted);
}
.section-title .interesting-events-status[data-state="idle"] .summary-status-dot {
  background: #627b88;
  box-shadow: none;
}
.airport-order-hint { color: var(--muted); font-size: 9px; font-weight: 500; }
.search-section,
.recent-observation-section { position: relative; z-index: 14; }
.search-combobox {
  position: relative;
  overflow: visible;
  border: 1px solid #22485b;
  border-radius: 7px;
  background: var(--panel-input-bg);
}
.search-combobox:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px #41bdd522;
}
.search-combobox.compact-search-entry {
  animation: compact-search-entry .8s ease-out;
}
@keyframes compact-search-entry {
  0% { border-color: #b9f2ff; box-shadow: 0 0 0 4px #62d6f455, 0 0 18px #62d6f42e; }
  100% { border-color: var(--cyan); box-shadow: 0 0 0 2px #41bdd522; }
}
.search-combobox[data-open="true"] {
  border-color: color-mix(in srgb, var(--cyan) 55%, #22485b);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 16;
}
.search-box {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 10px;
}
.search-box:focus-within { border-color: transparent; box-shadow: none; }
.search-box span { color: var(--cyan); font-size: 20px; transform: rotate(-15deg); }
.search-box kbd { margin-left: auto; border: 1px solid #2b5365; border-radius: 4px; color: #75a4b3; padding: 2px 5px; font: 700 9px/1 ui-monospace, monospace; }
input, select { background: var(--panel-input-bg); border: 1px solid #22485b; border-radius: 6px; color: var(--text); padding: 8px 9px; min-width: 0; }
.search-box input { border: 0; background: transparent; padding: 0; width: 100%; outline: 0; }
select {
  width: 100%;
  appearance: none; -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%237fb4c9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
select:hover { border-color: var(--line-bright); }
select:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px #62d6f440; }
select option { background: var(--panel-2); color: var(--text); }
select option:checked { background: #16405a; color: #eafaff; }
.search-results {
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(100% - 1px);
  z-index: 17;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--cyan) 55%, #22485b);
  border-top: 1px solid #17394a;
  border-radius: 0 0 7px 7px;
  background: color-mix(in srgb, var(--panel-input-bg) 97%, transparent);
  box-shadow: 0 14px 28px #000a;
  backdrop-filter: blur(8px);
  overflow: hidden;
  max-height: min(220px, 42vh);
  overflow-y: auto;
}
.search-results[hidden] { display: none !important; }
.search-results .search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid rgba(23, 50, 65, 0.72);
  background: transparent;
  padding: 7px 9px;
  cursor: pointer;
  text-align: left;
  font-size: 11px;
  color: inherit;
}
.search-results .search-result:last-child { border-bottom: 0; }
.search-results .search-result:hover { background: #123248; }
.search-results .search-result:disabled { cursor: default; opacity: 0.72; }
.search-results .search-empty {
  margin: 0;
  padding: 8px 10px;
  color: #6f8a97;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
}
.search-result-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.search-result-identity,
.search-result-match-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-identity {
  color: var(--text);
  font-weight: 600;
}
.search-result-reason {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.search-field-chip {
  flex: 0 0 auto;
  padding: 1px 4px;
  border: 1px solid rgba(103, 223, 245, 0.25);
  border-radius: 4px;
  color: #8fc8d7;
  font-size: 9px;
  line-height: 1.35;
}
.search-result-match-value {
  color: #8faab6;
  font-size: 10px;
  font-weight: 500;
}
.search-result-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; color: var(--muted); white-space: nowrap; }
.search-map-state { border: 1px solid #245568; border-radius: 999px; padding: 2px 5px; color: #86b4c1; font-size: 8px; font-style: normal; font-weight: 700; letter-spacing: .02em; }
.search-result.is-map-visible .search-map-state { border-color: #337d70; color: #70dfbd; }
.search-result--activity .search-event-state {
  border: 1px solid #2a5667; border-radius: 8px; padding: 1px 5px;
  color: #75a9b8; font: 700 7px/1.2 ui-monospace, monospace; font-style: normal;
}
.search-result--activity.is-live .search-event-state { border-color: #347d6e; color: var(--mint); }
.search-result.is-search-selected { background: #12384a; box-shadow: inset 3px 0 0 var(--amber); }
.search-results .search-result.is-map-preview { background: #1d314d; box-shadow: inset 3px 0 0 #9d8cff; }
.search-results .search-hit {
  color: var(--amber);
  background: transparent;
  font-weight: 700;
  padding: 0;
  border-radius: 0;
}
.search-result-group + .search-result-group { border-top: 1px solid #17394a; }
.search-result-group-title { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px 5px; color: #7baeba; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .1em; }
.search-result-group-title small { color: #5f8491; font: inherit; }

.search-overlay { position: fixed; z-index: 59; top: var(--search-overlay-top, 54px); left: var(--search-overlay-left, 12px); width: min(390px, calc(100vw - 24px)); }
.search-overlay[hidden] { display: none; }
.search-dialog { --search-results-bottom-gap: 16px; box-sizing: border-box; overflow: hidden; border: 1px solid #2e7188; border-radius: 12px; background: linear-gradient(145deg, #0c2531f5, #06151ef8); box-shadow: 0 24px 70px #000c, inset 0 1px #ffffff0c; backdrop-filter: blur(16px); }
.search-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 16px 0; cursor: grab; user-select: none; touch-action: none; }
.search-dialog-heading.is-dragging { cursor: grabbing; }
.search-dialog-drag-handle { min-width: 0; }
.search-dialog-actions { display: flex; align-items: center; gap: 6px; }
.search-dialog-heading .eyebrow { margin-bottom: 4px; font-size: 8px; }
.search-dialog-heading h2 { margin: 0; color: #e7f9ff; font-size: 18px; }
.search-dialog-heading button { width: 28px; height: 28px; border: 1px solid #315c6e; border-radius: 6px; background: #0b202b; color: #a9cdd8; cursor: pointer; font-size: 19px; line-height: 1; }
.search-dialog-heading .search-dialog-reset { color: #83cfe0; font-size: 16px; }
.search-dialog-heading button:hover, .search-dialog-heading button:focus-visible { border-color: var(--cyan); color: white; outline: none; }
.search-dialog-lead { margin: 5px 16px 12px; color: #8db1bd; font-size: 10px; line-height: 1.45; }
.search-dialog .search-combobox { margin: 0 16px; }
.search-dialog .search-combobox[data-open="true"] { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; }
.search-dialog:has(.search-results:not([hidden])) { padding-bottom: var(--search-results-bottom-gap); }
.search-dialog .search-results { position: static; max-height: min(320px, calc(100dvh - 176px)); margin: 8px 0 0; padding-bottom: 10px; border: 1px solid #17394a; border-radius: 7px; }
html[data-map-tone="light"] .search-dialog { border-color: #347a94; background: linear-gradient(145deg, rgba(7, 31, 42, .985), rgba(5, 20, 29, .985)); box-shadow: 0 24px 72px rgba(0, 0, 0, .62), inset 0 1px rgba(225, 249, 255, .12); backdrop-filter: blur(20px); }
html[data-map-tone="light"] .search-dialog .search-results { background: rgba(7, 27, 38, .98); border-color: #24596d; }
html[data-map-tone="light"] .search-map-state { background: #092630; border-color: #397d91; color: #b9edf5; }
html[data-map-tone="light"] .map-target-edge { background: rgba(5, 27, 37, .96); box-shadow: 0 6px 18px rgba(0, 0, 0, .58), 0 0 0 1px color-mix(in srgb, var(--edge-color) 30%, transparent); }
.search-discovery { padding: 12px 16px 16px; }
.search-discovery[hidden] { display: none !important; }
.search-discovery-hint { margin: 0; color: #7598a4; font-size: 9px; }
.search-discovery-hint b { color: #bde8f2; font-weight: 650; }
.search-kind-hints { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.search-kind-hints span { border: 1px solid #244f60; border-radius: 999px; background: #0b202a; color: #91b9c5; padding: 3px 6px; font-size: 8px; }
.search-discovery-section { margin-top: 15px; }
.search-discovery-section h3 { margin: 0 0 7px; color: #b7dce6; font-size: 10px; }
.search-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; }
.search-shortcut { display: inline-flex; align-items: baseline; gap: 5px; min-height: 30px; border: 1px solid #28566a; border-radius: 6px; background: #0a1e28; color: #c2e6ef; padding: 5px 7px; cursor: pointer; font-size: 9px; }
.search-shortcut:hover, .search-shortcut:focus-visible { border-color: var(--cyan); background: #113244; color: white; outline: none; }
.search-shortcut small { color: #6da6b5; font-size: 8px; }
.recent-observation-feed {
  --recent-observation-rows: 3;
  min-width: 0;
  height: calc(var(--recent-observation-rows) * 45px + 1px);
  overflow: hidden;
  border: 1px solid #17394a;
  border-radius: 5px;
  background: var(--panel-card-bg);
}

/*
 * The fixed row height keeps the list from jumping as rows stream in, but the
 * empty state is a single line of text, so reserving three row slots burned
 * 136px of the left panel on first load and pushed the interesting-event
 * section (which does have content) below the fold. Collapse to content height
 * while empty; the reserved height returns as soon as real rows render.
 */
.recent-observation-feed:has(> .empty-event) { height: auto; }
.recent-observation-feed > .empty-event { padding: 8px; }
.recent-observation-limit {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.recent-observation-limit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 1px 2px 1px 4px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--cyan);
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
.recent-observation-limit-toggle::after {
  content: "";
  width: 7px;
  height: 5px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%2356d6c3' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E")
    center / 7px 5px no-repeat;
}
.recent-observation-limit-toggle:hover,
.recent-observation-limit-toggle[aria-expanded="true"],
.recent-observation-limit-toggle:focus-visible {
  background: rgba(86, 214, 195, 0.1);
  outline: none;
}
.recent-observation-limit-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 2px;
  min-width: 36px;
  padding: 4px;
  border: 1px solid #2b6078;
  border-radius: 6px;
  background: #07151df5;
  box-shadow: 0 10px 24px #000a;
  backdrop-filter: blur(8px);
}
.recent-observation-limit-menu[hidden] { display: none !important; }
.recent-observation-limit-menu button {
  min-width: 28px;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #bce7f4;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-align: center;
}
.recent-observation-limit-menu button:hover,
.recent-observation-limit-menu button:focus-visible {
  border-color: #2b6983;
  background: var(--panel-card-bg);
  outline: none;
  color: #e4fbff;
}
.recent-observation-limit-menu button[aria-selected="true"] {
  border-color: #397999;
  background: rgba(82, 213, 240, 0.1);
  color: var(--cyan);
}
.recent-observation-list {
  height: 100%;
  align-content: start;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}
.recent-observation-list .viewport-aircraft-row { height: 44px; min-height: 44px; padding: 7px 8px; }
.recent-observation-list .viewport-aircraft-row.is-weak { opacity: .7; }
.recent-observation-list li:last-child { border-bottom: 0; }
.input-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.input-pair label { font-size: 9px; color: var(--muted); }
.input-pair input { width: 100%; display: block; margin-top: 4px; }
.preset-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 7px; }
.preset-row button, .action-row button {
  border: 1px solid #28536a;
  background: #0d2635;
  padding: 7px 5px;
  border-radius: 5px;
  color: #9fc3d3;
  font-size: 10px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}
@media (hover: hover) and (pointer: fine) {
  .preset-row button:hover {
    border-color: var(--cyan);
    background: #123848;
    color: #e8fbff;
    box-shadow: 0 0 0 2px #3bd4ff18;
  }
  .preset-row button:active {
    transform: translateY(1px);
    box-shadow: 0 0 0 2px #3bd4ff28;
  }
}
.preset-row button:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px #3bd4ff28;
}
.switch-row { margin: 0 !important; padding: 7px 0; cursor: pointer; }
.switch-row span { font-size: 11px; }
.switch-row small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; font-size: 9px; }
.switch-row input { position: absolute; opacity: 0; }
.switch-row i { width: 32px; height: 17px; border-radius: 10px; background: #183342; position: relative; transition: .2s; }
.switch-row i::after { content: ""; width: 11px; height: 11px; border-radius: 50%; position: absolute; left: 3px; top: 3px; background: #7693a1; transition: .2s; }
.switch-row input:checked + i { background: #165b68; }
.switch-row input:checked + i::after { left: 18px; background: var(--mint); box-shadow: 0 0 7px #64efb288; }
.summary-block {
  min-width: 0;
  padding: 6px 0 10px;
  border-bottom: 0;
  container-type: inline-size;
  container-name: summary-block;
}
.summary-overview-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.summary-block .summary-hero {
  min-height: 48px;
  padding: 0 2px;
  gap: 5px;
}
.summary-block .summary-hero:hover { background: transparent; }
.summary-block .summary-hero.selected {
  border-color: transparent;
  background: transparent;
}
.summary-block .summary-hero > span:first-child {
  color: #9ab3be;
  font-size: 12px;
  font-weight: 600;
}
.summary-block .summary-hero-value {
  color: #e0f4fa;
  font: 650 29px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.045em;
}
.summary-block .summary-hero-unit { color: #aac3ce; font-size: 12px; font-weight: 500; }
.summary-conditions { position: static; flex: 0 0 auto; }
.summary-conditions > summary {
  min-height: 32px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  color: #9dbbc6;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.summary-conditions > summary::-webkit-details-marker { display: none; }
.summary-conditions > summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s ease;
}
.summary-conditions[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.summary-conditions > summary:hover,
.summary-conditions > summary:focus-visible { color: #d7edf4; outline: none; }
.summary-conditions > summary:focus-visible { box-shadow: 0 0 0 2px #62d6f440; border-radius: 4px; }
.summary-conditions-body {
  position: absolute;
  z-index: 8;
  top: calc(100% + 3px);
  right: 0;
  width: min(270px, calc(100vw - 36px));
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #214657;
  border-radius: 6px;
  background: #091923;
  box-shadow: 0 12px 28px #0009;
}
.summary-conditions-body .summary-activity {
  min-height: 30px;
  margin: 0;
  padding: 0;
  gap: 6px;
}
.summary-conditions-body .summary-motion { min-height: 26px; padding: 1px 5px; }
.summary-conditions-body .summary-status-row { margin: 4px 0 0; }
.summary-conditions-body .summary-side-metrics:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  align-items: stretch;
  gap: 5px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin-right: 0;
  flex: 0 1 auto;
}
.summary-scope-label {
  margin: 0 2px;
  color: #718d9a;
  font-size: 10px;
  line-height: 1.35;
}
.summary-active-focus {
  min-width: 0;
  margin: 5px 2px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #b7dbe5;
  font-size: 11px;
}
.summary-active-focus[hidden] { display: none !important; }
.summary-active-focus button {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid #285165;
  border-radius: 4px;
  background: transparent;
  color: #95cddd;
  font: inherit;
  cursor: pointer;
}
.summary-active-focus button:hover,
.summary-active-focus button:focus-visible { border-color: #4b94a8; color: #d8f5fc; outline: none; }
.summary-recency {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  color: var(--cyan, #67dff5);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}
.summary-status-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #627b88;
}
.summary-status-dot[data-state="live"] {
  background: #43dba5;
  box-shadow: 0 0 8px rgba(67, 219, 165, 0.35);
}
.summary-status-dot[data-state="delayed"] {
  background: #e5b85f;
  box-shadow: 0 0 8px rgba(229, 184, 95, 0.25);
}
.summary-status-dot[data-state="offline"] {
  background: #db7676;
  box-shadow: 0 0 8px rgba(219, 118, 118, 0.22);
}
.summary-status-dot[data-state="shift"] {
  background: var(--cyan, #67dff5);
  box-shadow: 0 0 8px rgba(103, 223, 245, 0.25);
}
.summary-status-dot[data-state="waiting"] {
  background: #627b88;
  box-shadow: none;
}
.summary-focus-target {
  box-sizing: border-box;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.summary-focus-target:focus-visible {
  outline: 2px solid var(--cyan, #67dff5);
  outline-offset: 2px;
}
.summary-focus-target:disabled {
  cursor: default;
  opacity: 0.38;
}
.summary-hero-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
}
.summary-side-metrics {
  flex: 0 0 86px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 21px 21px;
  justify-items: stretch;
  align-content: start;
  gap: 1px;
  width: 86px;
  min-width: 86px;
  min-height: 43px;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.summary-side-metrics[hidden] { display: none !important; }
.summary-side-metrics .summary-stale,
.summary-side-metrics .summary-excluded {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  justify-items: stretch;
  column-gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 21px;
  margin: 0;
  padding: 3px 5px 3px 11px;
  border: 1px solid transparent;
  border-radius: 5px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}
.summary-side-metrics .summary-stale {
  justify-content: stretch;
}
.summary-side-metrics .summary-stale > span,
.summary-side-metrics .summary-excluded > span {
  justify-self: start;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
}
.summary-side-metrics .summary-stale > strong,
.summary-side-metrics .summary-excluded > strong {
  min-width: 22px;
  width: 22px;
  justify-self: end;
  text-align: right;
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.summary-excluded {
  color: #c9a98c;
  cursor: default;
}
.summary-side-metrics .summary-excluded > span,
.summary-side-metrics .summary-excluded > strong {
  color: #c9a98c;
}
.summary-excluded.has-tooltip {
  cursor: pointer;
}
.summary-excluded.has-tooltip:hover,
.summary-excluded.has-tooltip:focus-visible {
  border-color: rgba(201, 169, 140, 0.42);
  background: rgba(201, 169, 140, 0.1);
  color: #e0c4a0;
  outline: none;
}
.summary-excluded.has-tooltip:hover > span,
.summary-excluded.has-tooltip:focus-visible > span,
.summary-excluded.has-tooltip:hover > strong,
.summary-excluded.has-tooltip:focus-visible > strong {
  color: #f0d7b4;
}
.summary-excluded.is-placeholder,
.summary-stale.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}
.summary-excluded[hidden],
.summary-stale[hidden] { display: none !important; }
.summary-hero {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  padding: 5px 7px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.summary-hero:hover { background: rgba(82, 213, 240, 0.055); }
.summary-hero.selected {
  border-color: rgba(103, 223, 245, 0.32);
  background: rgba(82, 213, 240, 0.08);
}
.summary-hero-value {
  color: #bdefff;
  font: 600 32px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
.summary-hero-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.summary-hero-unit {
  color: #bdefff;
  font-size: 14px;
  font-weight: 600;
}
.summary-hero-label {
  color: var(--muted, #718b98);
  font-size: 12px;
}
.summary-activity {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  margin-top: 0;
  padding: 3px 7px;
  border-top: 0;
  border-bottom: 0;
}
.summary-activity-title {
  flex: 0 0 auto;
  margin-right: 3px;
  color: var(--muted, #718b98);
  font-size: 10px;
}
.summary-motion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 38px;
  min-height: 24px;
  padding: 2px 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #bce7f4;
  cursor: pointer;
}
.summary-motion:hover:not(:disabled) {
  border-color: #2b6983;
  background: var(--panel-card-bg);
}
.summary-motion.selected {
  border-color: rgba(103, 223, 245, 0.45);
  background: rgba(82, 213, 240, 0.11);
  color: #e4fbff;
}
.summary-motion-icon {
  font-size: 9px;
  line-height: 1;
}
.summary-motion[data-summary-focus="climb"] .summary-motion-icon,
.summary-motion[data-summary-focus="climb"] strong {
  color: var(--vertical-climb);
}
.summary-motion[data-summary-focus="level"] .summary-motion-icon {
  color: #829eaa;
  font-size: 12px;
  transform: translateY(-1px);
}
.summary-motion[data-summary-focus="descend"] .summary-motion-icon,
.summary-motion[data-summary-focus="descend"] strong {
  color: var(--vertical-descend);
}
.summary-motion strong {
  color: inherit;
  font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.summary-stale {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 28px;
  min-height: 28px;
  margin: 0 4px 0 0;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #688492;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.summary-stale:hover {
  border-color: rgba(103, 223, 245, 0.14);
  background: rgba(103, 223, 245, 0.035);
  color: #91adba;
}
.summary-stale.selected {
  border-color: rgba(103, 223, 245, 0.45);
  background: rgba(82, 213, 240, 0.11);
  color: #9ddce8;
}
.summary-stale strong {
  color: inherit;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.summary-status-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin: 2px 7px 0;
}
.summary-focus-control {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.summary-focus-status {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  max-width: 100%;
  margin: 0;
  padding: 2px 4px 2px 2px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #9ddce8;
  font: inherit;
  font-size: 10px;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.summary-focus-status:hover,
.summary-focus-status:focus-visible,
.summary-focus-status[aria-expanded="true"] {
  border-color: rgba(103, 223, 245, 0.14);
  background: rgba(103, 223, 245, 0.035);
  outline: none;
}
.summary-focus-status-prefix {
  color: #9ddce8;
  font-weight: 500;
}
.summary-focus-status-value {
  font: inherit;
  font-weight: 600;
  color: #9ddce8;
}
.summary-focus-status[data-focus="climb"] .summary-focus-status-value { color: var(--vertical-climb); }
.summary-focus-status[data-focus="level"] .summary-focus-status-value { color: #bce7f4; }
.summary-focus-status[data-focus="descend"] .summary-focus-status-value { color: var(--vertical-descend); }
.summary-focus-status[data-focus="stale"] .summary-focus-status-value { color: #91adba; }
.summary-focus-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 40;
  min-width: 108px;
  padding: 4px;
  border: 1px solid #2b6078;
  border-radius: 7px;
  background: #07151df5;
  box-shadow: 0 10px 24px #000a;
  backdrop-filter: blur(8px);
}
.summary-focus-menu[hidden] { display: none !important; }
.summary-focus-menu button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 5px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #9eb9c6;
  font: inherit;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}
.summary-focus-menu button:hover,
.summary-focus-menu button:focus-visible {
  background: #123041;
  color: #e8f6fc;
  outline: none;
}
.summary-focus-menu button:disabled {
  opacity: .38;
  cursor: default;
  pointer-events: none;
}
.summary-focus-menu button[data-summary-focus="climb"] { color: color-mix(in srgb, var(--vertical-climb) 78%, #9eb9c6); }
.summary-focus-menu button[data-summary-focus="climb"].is-selected,
.summary-focus-menu button[data-summary-focus="climb"]:hover {
  color: var(--vertical-climb);
  background: color-mix(in srgb, var(--vertical-climb) 12%, #0d2130);
}
.summary-focus-menu button[data-summary-focus="descend"] { color: color-mix(in srgb, var(--vertical-descend) 78%, #9eb9c6); }
.summary-focus-menu button[data-summary-focus="descend"].is-selected,
.summary-focus-menu button[data-summary-focus="descend"]:hover {
  color: var(--vertical-descend);
  background: color-mix(in srgb, var(--vertical-descend) 12%, #0d2130);
}
.summary-focus-menu button[data-summary-focus="level"].is-selected,
.summary-focus-menu button[data-summary-focus="level"]:hover {
  color: #e4fbff;
}
.summary-aux-status {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 55%;
  margin: 0;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  box-sizing: border-box;
  color: #9ddce8;
  font-size: 9px;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.summary-aux-status.has-tooltip {
  cursor: pointer;
}
.summary-aux-status.has-tooltip:hover,
.summary-aux-status.has-tooltip:focus-visible {
  border-color: rgba(103, 223, 245, 0.14);
  background: rgba(103, 223, 245, 0.035);
  color: #d4f4fb;
  outline: none;
}
.summary-aux-status[data-warn="true"] {
  color: color-mix(in srgb, var(--amber, #ffc65b) 72%, #9ddce8);
}
.summary-aux-status[data-warn="true"].has-tooltip:hover,
.summary-aux-status[data-warn="true"].has-tooltip:focus-visible {
  border-color: color-mix(in srgb, var(--amber, #ffc65b) 42%, transparent);
  background: color-mix(in srgb, var(--amber, #ffc65b) 10%, transparent);
  color: color-mix(in srgb, var(--amber, #ffc65b) 82%, #fff);
}
.summary-aux-status[hidden] {
  display: none !important;
}
.summary-metric-popover {
  position: fixed;
  z-index: 91;
  box-sizing: border-box;
  min-width: 196px;
  max-width: min(268px, calc(100vw - 24px));
  border: 1px solid #2b6078;
  border-radius: 7px;
  background: #07151df5;
  box-shadow: 0 12px 32px #000a;
  backdrop-filter: blur(8px);
  color: #d7eef7;
  pointer-events: auto;
  overflow: visible;
}
.summary-metric-popover[hidden] { display: none !important; }
/* Bridge the horizontal gap from trigger → right-side popover. */
.summary-metric-popover::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  left: -12px;
}
.summary-metric-popover-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 10px 6px; border-bottom: 1px solid #1d485c;
  border-radius: 7px 7px 0 0;
  background: #07151df5;
}
.summary-metric-popover-chips,
.summary-metric-popover-list,
.summary-metric-popover-more {
  background: #07151df5;
}
.summary-metric-popover-more { border-radius: 0 0 7px 7px; }
.summary-metric-popover-head span {
  color: var(--cyan); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.summary-metric-popover-head strong {
  color: #d9eef6; font: 700 13px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums;
}
.summary-metric-popover[data-kind="excluded"] .summary-metric-popover-head span,
.summary-metric-popover[data-kind="excluded"] .summary-metric-popover-head strong { color: #c9a98c; }
.summary-metric-popover[data-kind="stale"] .summary-metric-popover-head span,
.summary-metric-popover[data-kind="stale"] .summary-metric-popover-head strong { color: #9eb4c4; }
.summary-metric-popover[data-kind="special"] .summary-metric-popover-head span,
.summary-metric-popover[data-kind="special"] .summary-metric-popover-head strong { color: #7ed0e2; }
.summary-metric-popover-chips {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 7px 10px 6px;
}
.summary-metric-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 999px;
  border: 1px solid #2b6078; background: #0d2130; color: #9fc3d3;
  font-size: 8px; font-weight: 600; white-space: nowrap;
  cursor: pointer; font-family: inherit;
}
.summary-metric-chip:hover { border-color: #3d7f99; color: #cfeaf5; }
.summary-metric-chip.is-active {
  box-shadow: 0 0 0 1px #67dff566;
  filter: brightness(1.12);
}
.summary-metric-chip em {
  color: #e3f7fd; font: 700 9px/1 ui-monospace, monospace; font-style: normal;
}
.summary-metric-chip.is-altitude { border-color: #7c6130; background: #3d2f13; color: #f0c67a; }
.summary-metric-chip.is-altitude em { color: #ffe2a8; }
.summary-metric-chip.is-under { border-color: #28657d; background: #102c3a; color: #79c2dd; }
.summary-metric-chip.is-under em { color: #c5eefb; }
.summary-metric-chip.is-signal,
.summary-metric-chip.is-delayed { border-color: #3f5260; background: #1a2630; color: #9db1bf; }
.summary-metric-chip.is-signal em,
.summary-metric-chip.is-delayed em { color: #d4e0e8; }
.summary-metric-chip.is-ground { border-color: #28657d; background: #102c3a; color: #79c2dd; }
.summary-metric-chip.is-ground em { color: #c5eefb; }
.summary-metric-chip.is-rotor { border-color: #28657d; background: #102c3a; color: #79c2dd; }
.summary-metric-chip.is-rotor em { color: #c5eefb; }
.summary-metric-chip.is-light { border-color: #2d6a58; background: #0f2c26; color: #7dcfb6; }
.summary-metric-chip.is-light em { color: #b8f0dc; }
.summary-metric-chip.is-special { border-color: #3f5260; background: #1a2630; color: #9db1bf; }
.summary-metric-chip.is-special em { color: #d4e0e8; }
.summary-metric-popover-list {
  margin: 0; padding: 0; display: grid; gap: 0;
  max-height: min(280px, 42vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 0 0 7px 7px;
}
.summary-metric-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
  width: 100%; margin: 0; padding: 5px 10px;
  border: 0; border-radius: 0; background: transparent; color: inherit;
  text-align: left; cursor: pointer; font: inherit;
}
.summary-metric-row:nth-child(odd) { background: #0a1c27; }
.summary-metric-row:hover,
.summary-metric-row.is-map-preview,
.summary-metric-row:focus-visible {
  background: #123041;
  box-shadow: inset 2px 0 0 var(--cyan);
  outline: none;
}
.summary-metric-id { min-width: 0; display: grid; gap: 1px; }
.summary-metric-id strong {
  color: #e8f6fc; font: 600 10px/1.2 ui-monospace, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.summary-metric-id span,
.summary-metric-id .summary-metric-route {
  color: #6f9cac; font: 500 8px/1.2 ui-monospace, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.summary-metric-id .summary-metric-route.has-route { color: #9eb9c6; }
.summary-metric-id .summary-metric-route.is-loading { color: #6eb8c9; }
.summary-metric-id .summary-metric-route.is-unknown { color: var(--muted); }
.summary-metric-reason {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #9fc3d3;
  font: 600 8px/1 ui-monospace, monospace; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.summary-metric-reason.is-stacked {
  display: grid; justify-items: end; gap: 2px;
}
.summary-metric-alt-main {
  display: inline-flex; align-items: center; gap: 3px;
  color: #e8f6fc; font: 600 10px/1 ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.summary-metric-alt-delta {
  color: #f0c67a; font: 600 9px/1 ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.summary-metric-alt-delta.is-over { color: #f0c67a; }
.summary-metric-alt-delta.is-under { color: #79c2dd; }
.summary-metric-reason.is-altitude { color: #f0c67a; }
.summary-metric-reason.is-under { color: #79c2dd; }
.summary-metric-reason.is-signal,
.summary-metric-reason.is-delayed { color: #9db1bf; }
.summary-metric-reason.is-ground { color: #79c2dd; }
.summary-metric-reason.is-rotor { color: #79c2dd; }
.summary-metric-reason.is-light { color: #7dcfb6; }
.summary-metric-reason.is-special { color: #9db1bf; }
.summary-metric-popover-more {
  margin: 0; padding: 5px 10px 8px; border-top: 1px solid #1d485c;
  color: #6f9cac; font-size: 8px; text-align: right;
}
@container summary-block (max-width: 240px) {
  .summary-aux-status { max-width: 46%; }
}
.event-feed {
  --event-feed-row-height: 45px;
  min-width: 0;
  display: block;
  border: 1px solid #17394a;
  border-radius: 5px;
  background: var(--panel-card-bg);
}
.event-feed-item {
  position: relative;
  display: flex; align-items: stretch; justify-content: space-between; gap: 0;
  height: var(--event-feed-row-height); min-height: var(--event-feed-row-height);
  box-sizing: border-box;
  border: 0; border-bottom: 1px solid #153141; border-radius: 0; background: transparent; padding: 0;
}
.event-feed-item:last-of-type { border-bottom: 0; }
.event-feed-item:hover { background: var(--panel-card-hover-bg); }
.event-feed-item.is-playing {
  background: color-mix(in srgb, var(--amber) 8%, var(--panel-card-bg));
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--amber) 72%, #17394a);
}
.event-feed-item.is-loading {
  background: color-mix(in srgb, var(--cyan) 7%, var(--panel-card-bg));
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--cyan) 72%, #17394a);
}
.event-feed-item.is-loading .event-feed-copy { cursor: progress; }
.event-feed-item.is-loading::after {
  content: '';
  position: absolute;
  right: 7px;
  bottom: 6px;
  width: 9px;
  height: 9px;
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: event-feed-loading-spin .65s linear infinite;
  pointer-events: none;
}
@keyframes event-feed-loading-spin { to { transform: rotate(360deg); } }
.event-feed > button {
  width: 100%; min-height: var(--event-feed-row-height); border: 0; border-bottom: 1px solid #153141;
  border-radius: 0; background: transparent; padding: 7px 8px; text-align: left; cursor: pointer; color: inherit;
}
.event-feed > button:last-of-type { border-bottom: 0; }
.event-feed > button:hover { background: var(--panel-card-hover-bg); }
.event-feed-copy {
  flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden;
  padding: 4px 3px 2px 8px; border: 0; background: none;
  display: grid; grid-template-rows: 14px 1fr;
  color: inherit; text-align: left; font: inherit; cursor: pointer;
}
.event-feed-copy:focus-visible { outline: 1px solid var(--cyan); outline-offset: -2px; border-radius: 3px; }
.event-feed-rail {
  flex: 0 0 58px; width: 58px; height: 100%; min-width: 58px; overflow: hidden; padding: 4px 2px 0 0;
  display: grid; grid-template-rows: 13px 1fr; justify-items: end; align-items: start;
  gap: 0;
}
.event-feed-actions {
  align-self: end; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 0;
}
.event-feed-play,
.event-feed-delete {
  width: 23px; height: 27px; margin: 0; padding: 0;
  border: 0; border-radius: 4px; background: transparent;
  cursor: pointer; line-height: 1;
}
.event-feed-play {
  color: var(--amber); font-size: 10px;
  transform: translateY(0) scale(1);
  transition:
    color .15s ease,
    text-shadow .15s ease,
    transform .09s cubic-bezier(.2, .8, .2, 1),
    background-color .09s ease,
    box-shadow .09s ease;
}
.event-feed-play:hover,
.event-feed-play:focus-visible {
  color: #ffe6a8;
  text-shadow: 0 0 6px color-mix(in srgb, var(--amber) 55%, transparent);
}
.event-feed-play:active,
.event-feed-play.is-pressed {
  transform: translateY(1px) scale(0.82);
  background: color-mix(in srgb, var(--amber) 16%, #0f2430);
  box-shadow: inset 0 1px 2px #00000055;
  text-shadow: none;
}
.event-feed-play.is-stop {
  color: #ffc978;
  font-size: 9px;
}
.event-feed-play.is-stop:hover,
.event-feed-play.is-stop:focus-visible {
  color: #ffe6a8;
  text-shadow: 0 0 6px color-mix(in srgb, var(--amber) 55%, transparent);
}
.event-feed-play.is-press-pulse {
  animation: event-feed-play-press .24s cubic-bezier(.2, .85, .25, 1);
}
@keyframes event-feed-play-press {
  0% {
    transform: translateY(1px) scale(0.78);
    background: color-mix(in srgb, var(--amber) 18%, #0f2430);
    box-shadow: inset 0 1px 2px #00000055;
  }
  55% {
    transform: translateY(-1px) scale(1.08);
    background: color-mix(in srgb, var(--amber) 10%, transparent);
    box-shadow: none;
  }
  100% {
    transform: translateY(0) scale(1);
    background: transparent;
    box-shadow: none;
  }
}
.event-feed-delete {
  color: #5f737d; font: 700 14px/1 ui-monospace, monospace; opacity: .75;
}
.event-feed-delete:hover,
.event-feed-item:has(.event-feed-menu) .event-feed-delete {
  color: #9aadb6; opacity: 1; background: #0f2430;
}
.event-feed .event-feed-title {
  display: block; width: 100%; min-width: 0;
  margin: 0; color: #bce7f4; font: 600 10px ui-monospace, monospace;
}
.event-feed .event-feed-title-lead {
  display: block; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: inherit; font: inherit; font-size: inherit;
}
.event-feed-rail .event-feed-title-kind {
  display: block; margin: 0; padding: 0 2px;
  color: #bce7f4; font: 600 10px ui-monospace, monospace;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; line-height: 1.2; text-align: right;
}
.event-feed .event-feed-title .event-feed-title-kind {
  display: inline; margin: 0 0 0 6px;
  color: inherit; font: inherit; white-space: nowrap;
}
.event-feed-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 5px;
  align-self: center; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.35;
}
.event-feed-summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-feed-summary > b { flex: 0 0 auto; color: #72cce9; font-size: 9px; font-weight: 700; }
.event-feed-copy:hover .event-feed-summary > b { color: #b8efff; }
.event-feed > .empty-event {
  min-height: 44px; padding: 8px;
  display: flex; align-items: center;
}

.event-review { display: grid; gap: 9px; }
.event-review[hidden] { display: none; }
.event-review-hero {
  padding: 12px; border: 1px solid #285b70; border-radius: 8px;
  background: linear-gradient(145deg, rgba(16, 63, 79, .72), rgba(6, 31, 41, .92));
}
.event-review-status-row { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 3px 7px; margin-bottom: 8px; }
.event-review-status-copy { min-width: 0; display: flex; align-items: center; gap: 5px; }
.event-review-status-copy strong { min-width: 0; overflow: hidden; color: var(--mint); font: 700 9px/1.2 var(--mono); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.event-review-status-copy span { flex: 0 0 auto; padding: 2px 5px; border: 1px solid #9a7136; border-radius: 8px; background: #5a3c162e; color: var(--amber); font: 700 7px/1.2 var(--mono); }
.event-review-status-row time { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 7px; white-space: nowrap; }
.event-review-status-row button { grid-column: 2; grid-row: 1 / span 2; width: 24px; height: 24px; padding: 0; border: 1px solid #31586a; border-radius: 5px; background: #0b2632; color: #91b3bf; cursor: pointer; font: 700 13px/1 var(--mono); }
.event-review-status-row button:hover, .event-review-status-row button:focus-visible { border-color: #55a6bb; color: #effcff; outline: none; }
.event-review-hero h3 { margin: 0; color: #f2fbff; font-size: 17px; line-height: 1.2; }
.event-review-subject { margin: 4px 0 0; color: #a7c6d1; font: 700 10px/1.35 var(--mono); }
.event-review-verdict { margin: 9px 0 0; color: #d8edf4; font-size: 10px; line-height: 1.5; }
.event-review-section { padding: 0 2px; }
.event-review-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.event-review-section h4 { margin: 0; color: #dceef5; font-size: 11px; }
.event-review-section header small { color: var(--muted); font-size: 8px; }
.event-review dl { margin: 0; display: grid; gap: 0; }
.event-review dl > div { display: grid; grid-template-columns: minmax(82px, .72fr) minmax(0, 1.28fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(72, 125, 145, .2); }
.event-review dt { color: #86a9b6; font-size: 9px; }
.event-review dd { min-width: 0; margin: 0; color: #dceef5; text-align: right; }
.event-review dd > strong { display: block; font: 650 10px/1.35 var(--mono); overflow-wrap: anywhere; }
.event-review dd > small { display: block; margin-top: 2px; color: #7697a3; font: 7px/1.25 var(--mono); }
.event-review dd[data-tone="pass"] > strong::before { content: '✓ '; color: var(--mint); }
.event-review-continuity { margin: 0; padding: 8px 9px; border: 1px solid rgba(72, 125, 145, .32); border-radius: 6px; background: rgba(7, 27, 36, .72); }
.event-review-continuity > div:first-child { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: baseline; }
.event-review-continuity strong { color: #dceef5; font-size: 9px; }
.event-review-continuity span { color: #9ebbc5; font-size: 8px; text-align: right; }
.event-review-continuity small { display: none; }
.event-review-continuity[data-level="good"] strong { color: var(--mint); }
.event-review-continuity[data-level="mixed"] strong { color: var(--amber); }
.event-review-continuity[data-level="poor"] strong { color: #ff8b83; }
.continuity-track { position: relative; height: 7px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: #214854; }
.continuity-track::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #5ed8b4, #45b9d4); opacity: .65; }
.continuity-gap { position: absolute; top: 0; bottom: 0; z-index: 1; min-width: 2px; background: #f4be55; box-shadow: 0 0 3px #0008; }
.continuity-gap.major { background: #ff7168; }
.event-review-disclosure { border: 1px solid rgba(72, 125, 145, .3); border-radius: 6px; padding: 0 9px; }
.event-review-disclosure > summary { min-height: 34px; display: flex; align-items: center; gap: 7px; color: #9dc0cc; cursor: pointer; list-style: none; }
.event-review-disclosure > summary::-webkit-details-marker { display: none; }
.event-review-disclosure > summary::before { content: '›'; color: #69bfd3; font: 700 12px/1 var(--mono); transition: transform .14s ease; }
.event-review-disclosure[open] > summary::before { transform: rotate(90deg); }
.event-review-disclosure > summary strong { color: #b9d5df; font-size: 9px; }
.event-review-disclosure > summary small { margin-left: auto; color: #6f919d; font-size: 7px; }
.event-review-disclosure[open] { padding-bottom: 8px; }
.event-review-disclosure[open] > summary { margin-bottom: 3px; border-bottom: 1px solid rgba(72, 125, 145, .18); }
.event-review-disclosure[hidden] { display: none; }
#eventReviewWarnings { margin-top: 8px; color: var(--amber); font-size: 8px; line-height: 1.45; }
.event-review-disclaimer { margin: 1px 2px 0; padding: 7px 8px; border-left: 2px solid #507784; background: rgba(16, 43, 53, .45); color: #7898a3; font-size: 7px; line-height: 1.5; }
.event-review-actions { display: block; }
.event-review-actions button { min-height: 36px; border: 1px solid #294b59; border-radius: 4px; background: #091a23; color: #9ebfca; }
.event-review-actions > .action-primary { width: 100%; border-color: #3d91a9; background: #0d3442; color: #ddf8ff; font-weight: 700; }
.event-review-package-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.event-review-package-actions button { min-height: 31px; border: 1px solid #2b5968; border-radius: 4px; background: rgba(10, 37, 47, .86); color: #b8dbe6; cursor: pointer; font-size: 9px; }
.event-review-actions button:hover:not(:disabled), .event-review-tools button:hover:not(:disabled) { border-color: #55a6bb; color: #e5faff; }
.event-review-package-actions button[disabled] { opacity: .55; cursor: wait; }
.event-review-tools > small { display: block; margin-top: 6px; color: #6f919d; font-size: 7px; line-height: 1.45; }
.event-official-context > p { margin: 0 0 7px; color: #789aa6; font-size: 8px; line-height: 1.4; }
.event-official-context-items,
#eventOfficialContextItems { display: grid; gap: 6px; }
.event-official-item { padding: 9px; border: 1px solid rgba(63, 129, 147, .36); border-radius: 6px; background: rgba(7, 28, 37, .78); }
.event-official-item > small { display: block; color: #67cfe4; font: 700 7px/1.2 var(--mono); letter-spacing: .06em; }
.event-official-item strong { display: block; margin-top: 4px; color: #dceff5; font-size: 10px; line-height: 1.35; }
.event-official-item p { margin: 5px 0 0; color: #a7c3cc; font: 8px/1.5 var(--mono); overflow-wrap: anywhere; }
.event-official-item span { display: block; margin-top: 4px; color: #7698a4; font-size: 7px; line-height: 1.45; }
.event-official-item em { display: block; margin-top: 6px; color: #6f929d; font: normal 7px/1.45 var(--mono); }
.event-official-item[data-tone="unavailable"] { border-style: dashed; background: rgba(12, 27, 34, .6); }
.event-official-item[data-tone="unavailable"] > small,
.event-official-item[data-tone="unavailable"] strong { color: #8ca6ae; }
.event-feed-item > .event-feed-copy > span:not([class*="event-feed-title"]):not(.event-feed-summary),
.event-feed > button > span:not([class*="event-feed-title"]) {
  display: block; color: var(--muted); font-size: 8px; margin-top: 3px;
}
.event-feed .enter .event-feed-title-lead::before { content: '▼ '; color: var(--mint); }
.event-feed .exit .event-feed-title-lead::before { content: '▲ '; color: var(--amber); }
.event-feed .go-around .event-feed-title-lead::before { content: '↺ '; color: var(--amber); }
.event-feed .close-encounter .event-feed-title-lead::before { content: '⚠ '; color: #ff6b6b; }
.event-feed-menu {
  position: absolute; z-index: 30; right: 4px; top: calc(100% - 2px);
  display: grid; gap: 4px; min-width: 108px;
  padding: 6px; border: 1px solid #2b6983; border-radius: 6px; background: #0b1c27;
  box-shadow: 0 8px 18px #00000066;
}
.event-feed-menu button {
  width: 100%; border: 1px solid #1f4a5d; border-radius: 4px; background: #102735; color: #cfeaf4;
  padding: 5px 7px; font-size: 10px; text-align: left; cursor: pointer;
}
.event-feed-menu button:hover { border-color: #3f8fb0; color: #fff; }
.event-feed-menu button[data-action="confirm-delete"] { border-color: #4a3a3a; color: #c9b0b0; background: #1a1515; }
.event-feed-menu button[data-action="confirm-delete"]:hover { border-color: #7a5555; color: #ffd0d0; }
.event-feed-menu-confirm { margin: 0 0 2px; color: #9eb8c4; font-size: 9px; line-height: 1.35; }
.empty-event { color: var(--muted); font-size: 9px; line-height: 1.5; margin: 0; }

.map-context-menu {
  position: fixed; z-index: 40; display: grid; gap: 4px; min-width: 168px;
  padding: 7px; border: 1px solid #2b6983; border-radius: 6px; background: #0b1c27;
  box-shadow: 0 8px 18px #00000066;
}
.map-context-menu[hidden] { display: none !important; }
.map-context-menu-label {
  margin: 0 0 2px; color: #9eb8c4; font-size: 9px; line-height: 1.35;
}
.map-context-menu button {
  width: 100%; border: 1px solid #1f4a5d; border-radius: 4px; background: #102735; color: #cfeaf4;
  padding: 6px 8px; font-size: 11px; text-align: left; cursor: pointer;
}
.map-context-menu button:hover { border-color: #3f8fb0; color: #fff; }
.map-context-menu button[data-action="cancel"] { color: #9eb8c4; }

.radar-stage {
  grid-column: 2;
  min-width: 0; min-height: 0; position: relative; background: #06111a; overflow: hidden; touch-action: none;
  container-type: inline-size; container-name: radar-stage;
}
.radar-stage[data-transport-mode]::after {
  content: "";
  position: absolute;
  inset: 0 var(--map-right-clearance, 0px) 0 var(--map-left-clearance, 0px);
  z-index: 8;
  border: 2px solid color-mix(in srgb, var(--amber) 50%, transparent);
  box-shadow: inset 0 0 10px rgba(255, 198, 91, 0.12);
  pointer-events: none;
  transition: inset 220ms cubic-bezier(.22, 1, .36, 1);
}
/* Overlay panels keep the map canvas full-size, so inset the replay frame to the visible map. */
@media (max-width: 1199px) {
  html[data-control-panel="open"] { --map-left-clearance: min(86vw, 320px); }
  html[data-detail-panel="open"] { --map-right-clearance: min(86vw, 320px); }
}
@container radar-stage (max-width: 420px) {
  .layer-popover {
    right: calc(100% + 8px); left: auto; top: 50%; bottom: auto;
    transform: translateY(-50%); width: min(210px, 78cqi);
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  }
  .layer-popover[hidden] { display: none !important; }
  .layer-row { min-height: 44px; padding: 6px 5px; }
}
#mapCanvas, #rainCanvas, #kmaObservationCanvas, #windCanvas, #radar, #mapResizeSnapshot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#mapCanvas { z-index: 0; pointer-events: none; }
#rainCanvas { z-index: 1; pointer-events: none; }
#kmaObservationCanvas { z-index: 2; pointer-events: none; }
#windCanvas { z-index: 3; }
#radar { z-index: 4; }

#windCanvas { z-index: 3; pointer-events: none; }
#radar { z-index: 4; cursor: crosshair; }
.map-resize-snapshot { z-index: 6; visibility: hidden; pointer-events: none; }
.map-resize-snapshot.is-active { visibility: visible; }
.proximity-label-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.proximity-label {
  --proximity-label-color: #ffe08a;
  position: absolute; transform: translate(-50%, calc(-100% - 7px));
  max-width: min(260px, calc(100% - 16px));
  display: flex; align-items: stretch;
  border: 1px solid var(--proximity-label-color); border-radius: 5px;
  background: #12160cee; color: var(--proximity-label-color); box-shadow: 0 2px 8px #0008;
  overflow: hidden; pointer-events: auto;
  transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.proximity-label-value {
  min-width: 0; padding: 3px 7px; border: 0; background: transparent; color: inherit;
  font: 700 10px/1.35 ui-monospace, monospace; white-space: nowrap; text-overflow: ellipsis;
  overflow: hidden; cursor: pointer;
}
.proximity-label-close {
  width: 25px; min-width: 25px; padding: 0; border: 0; border-left: 1px solid color-mix(in srgb, var(--proximity-label-color) 52%, transparent);
  background: #2a2110; color: inherit; cursor: pointer; font: 400 18px/1 ui-sans-serif, sans-serif;
  transition: background .14s ease, color .14s ease;
}
.proximity-label-close:hover { background: #3a2c12; color: #ffeab2; }
.proximity-label-close:focus-visible { outline: 2px solid var(--proximity-label-color); outline-offset: -2px; }
.activity-count {
  min-width: 18px; height: 18px; padding: 0 5px; border: 1px solid #28566a; border-radius: 9px;
  display: inline-grid; place-items: center; color: #a9d5df; background: #0a1e28;
  font: 700 9px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; cursor: pointer;
}
.activity-count:hover { color: #d2f2f7; border-color: #3f8295; }
.activity-count[aria-pressed="true"] { color: #bcebf2; border-color: #3f8295; background: #10313d; }
.activity-section { padding-top: 4px; scrollbar-gutter: auto; }
.activity-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 4px;
  border-bottom: 1px solid #183744;
  background: var(--panel-scrim);
}
.activity-tab {
  position: relative;
  min-height: 38px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #809da9;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.activity-tab-unread {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 1px solid #8a5b2c;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  color: #ffe0ac;
  background: #392817;
  font: 700 9px/1 ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.activity-tab-unread[hidden] { display: none; }
.activity-tab[aria-selected="true"] { color: #d8eef4; }
.activity-tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #53c6d9;
}
.activity-tab:hover { color: #d7edf4; }
.activity-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; border-radius: 3px; }
.activity-tab-panel[hidden] { display: none !important; }
.activity-filter-row {
  min-width: 0;
  min-height: 35px;
  margin: 2px 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.activity-basis-label { color: #a7c1cb; font-size: 11px; font-weight: 600; }
.activity-filter-control {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: #718d99;
  font-size: 10px;
  white-space: nowrap;
}
.activity-current-panel > .activity-filter-row {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(46px, auto) minmax(78px, .8fr) minmax(106px, 1fr);
  align-items: end;
  gap: 8px;
}
.activity-current-panel .activity-basis-label {
  align-self: center;
  white-space: nowrap;
}
.activity-current-panel .activity-filter-control {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 30px;
  align-items: stretch;
  gap: 3px;
}
.activity-current-panel .activity-filter-control select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.activity-type-select {
  width: auto;
  min-width: 106px;
  max-width: min(180px, 58vw);
  height: 30px;
  padding: 3px 26px 3px 8px;
  border-color: #203f4e;
  border-radius: 4px;
  background-color: #0a1922;
  color: #bfd3da;
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}
.activity-history-panel { padding-bottom: 8px; }
.activity-group {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0 0 8px;
  border-top: 1px solid #183744;
}
.activity-group:first-child { border-top: 0; }
.activity-group > summary {
  min-height: 40px;
  padding: 0 2px;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #a9c1ca;
  font-size: 11px;
  font-weight: 600;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.activity-group > summary::-webkit-details-marker { display: none; }
.activity-group-heading { min-width: 0; display: inline-flex; align-items: center; gap: 8px; }
.activity-group-heading > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-group > summary i {
  flex: 0 0 auto;
  width: 6px; height: 6px; border-right: 1px solid #75a8b8; border-bottom: 1px solid #75a8b8;
  transform: rotate(45deg) translateY(-2px); transition: transform .16s ease;
}
.activity-group[open] > summary i { transform: rotate(225deg) translate(-1px, -1px); }
.activity-group > summary:hover { color: #d2edf4; }
.activity-group.has-new-event > summary { animation: activity-history-arrival 1.1s ease 2; }
.activity-count {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #708f9c;
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  cursor: default;
}
.activity-count:hover { color: #9bb5c0; border-color: transparent; }
.activity-retention-note {
  margin: -2px 2px 5px;
  color: #6d8995;
  font-size: 10px;
  line-height: 1.35;
}
.activity-retention-note[hidden] { display: none !important; }
.activity-history-filter { margin: 0 0 5px; justify-content: flex-end; }
.activity-subgroup { margin: 0; padding: 2px 0 8px; }
.activity-subgroup + .activity-subgroup { border-top: 1px solid #183744; padding-top: 8px; }
.activity-subgroup > h3 {
  min-height: 28px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9eb9c4;
  font-size: 11px;
  font-weight: 600;
}
.activity-subgroup > h3 > span { color: #718d99; font-size: 10px; font-weight: 500; }
.event-feed { border: 0; border-radius: 0; background: transparent; }
.live-activity-feed { border: 0; }
.event-feed-item { --event-feed-row-height: 52px; border-bottom-color: #122c38; }
.live-activity-aircraft-row { height: 52px; min-height: 52px; }
.live-activity-item { box-shadow: none; }
.live-activity-item.is-selected {
  background: color-mix(in srgb, var(--cyan) 11%, var(--panel-card-bg));
  box-shadow: inset 2px 0 0 var(--live-activity-rail);
}
.live-activity-item.is-map-preview { background: color-mix(in srgb, var(--cyan) 7%, var(--panel-card-bg)); }
.live-activity-item.close-encounter { box-shadow: inset 2px 0 0 var(--red); }
.live-activity-item.is-selected.close-encounter { box-shadow: inset 2px 0 0 var(--red); }
.live-activity-aircraft-copy { padding: 6px 5px 5px 7px; gap: 2px; }
.live-activity-identity { color: #d6e8ed; font: 600 12px/1.2 ui-sans-serif, system-ui, sans-serif; }
.live-activity-altitude { color: #a9c7d1; font: 500 11px/1.2 ui-sans-serif, system-ui, sans-serif; }
.live-activity-altitude.live-activity-kind { color: #a9c7d1; }
.live-activity-context,
.live-activity-motion { color: #83a0ac; font: 400 10px/1.2 ui-sans-serif, system-ui, sans-serif; }
.live-activity-glyph { width: 8px; margin-right: 5px; font-size: 10px; }
.past-activity-item,
.recent-activity-item { box-shadow: none; }
.past-activity-item.close-encounter,
.recent-activity-item.close-encounter { box-shadow: inset 2px 0 0 var(--red); }
.past-activity-copy,
.recent-activity-copy { padding: 6px 4px 5px 7px; }
#eventFeed .event-feed-item > .event-feed-copy.past-activity-copy > .past-activity-subject,
#recentEventFeed .event-feed-item > .event-feed-copy.recent-activity-copy > .recent-activity-subject {
  color: #d6e8ed;
  font: 600 11px/1.2 ui-sans-serif, system-ui, sans-serif;
}
#eventFeed .event-feed-item > .event-feed-copy.past-activity-copy > .past-activity-detail,
#recentEventFeed .event-feed-item > .event-feed-copy.recent-activity-copy > .recent-activity-context {
  color: #83a0ac;
  font: 400 10px/1.2 ui-sans-serif, system-ui, sans-serif;
}
.past-activity-rail,
.recent-activity-rail { padding-top: 4px; padding-bottom: 4px; }
.empty-event {
  margin: 4px 0 12px;
  padding: 10px 2px;
  color: #718a96;
  font-size: 11px;
  line-height: 1.4;
}
@keyframes activity-history-arrival {
  0%, 100% { color: #9dbbc6; background: transparent; }
  45% { color: #ffe0a0; background: color-mix(in srgb, var(--amber) 10%, transparent); }
}
.live-activity-feed { border-color: #225267; }
/* LIVE rail taxonomy: cyan=ordinary/holding, mint=departure, amber=arrival/go-around.
   A close encounter is the sole red warning exception. Vertical ▲▼ colors stay motion-only. */
.live-activity-item {
  --live-activity-rail: var(--cyan);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--live-activity-rail) 66%, transparent);
}
.live-activity-item.is-map-preview { background: color-mix(in srgb, var(--cyan) 9%, var(--panel-card-bg)); }
.live-activity-item.is-selected {
  background: color-mix(in srgb, var(--cyan) 14%, var(--panel-card-bg));
  box-shadow:
    inset 3px 0 0 var(--live-activity-rail),
    inset 0 0 0 1px color-mix(in srgb, var(--cyan) 42%, transparent);
}
.live-activity-item.is-selected .live-activity-identity { color: #f0fbff; }
.live-activity-item.is-selected.is-map-preview { background: color-mix(in srgb, var(--cyan) 20%, var(--panel-card-bg)); }
.live-activity-aircraft-row {
  min-height: 58px;
}
.live-activity-aircraft-copy {
  padding: 6px 8px;
  display: grid; grid-template-rows: auto auto auto; gap: 2px;
}
/* Override the generic event-feed direct-span fallback: these rows must keep
   two grid columns so the context and motion values land on opposite edges. */
.event-feed-item.live-activity-aircraft-row > .event-feed-copy.live-activity-aircraft-copy > .live-activity-line {
  min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) max-content;
  align-items: baseline; column-gap: 7px;
}
.live-activity-identity,
.live-activity-altitude {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #d7eef7; font: 600 10px ui-monospace, monospace;
}
.live-activity-altitude { text-align: right; }
.live-activity-glyph {
  display: inline-block; width: 12px; margin-right: 3px;
  color: var(--live-activity-rail); font-style: normal; font-weight: 800; text-align: center;
}
.live-activity-context,
.live-activity-motion {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font: 9px ui-monospace, monospace;
}
.live-activity-context { color: #9eb9c6; }
.live-activity-motion { text-align: right; }
.activity-recommendation-line {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #77b9cb; font: 8px ui-monospace, monospace;
}
.activity-recommendation-line[hidden] { display: none; }
.activity-recommendation-label { color: #8ce6f4; font-weight: 800; margin-right: 5px; }
.activity-viewing-label { color: #77e2ba; font: 800 8px ui-monospace, monospace; margin-left: 5px; }
.activity-order-select {
  width: 100%; min-width: 0; max-width: 100%; height: 30px;
  padding: 3px 23px 3px 7px;
  border: 1px solid #203f4e; border-radius: 4px;
  background-color: #0a1922; color: #bfd3da;
  font: inherit; font-size: 10px; font-weight: 500; line-height: 1.2;
}
.live-activity-item.routine-movement { --live-activity-rail: var(--mint); }
.live-activity-item.routine-landing-approach,
.live-activity-item.go-around { --live-activity-rail: var(--amber); }
.live-activity-item.close-encounter { --live-activity-rail: var(--red); }
.live-activity-item .event-feed-title { color: #d3f1f7; }
.live-activity-item .event-feed-summary > b { color: var(--cyan); }
.past-activity-item,
.recent-activity-item {
  --activity-record-rail: var(--cyan);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--activity-record-rail) 66%, transparent);
}
.past-activity-item.go-around,
.recent-activity-item.go-around,
.recent-activity-item.routine-landing { --activity-record-rail: var(--amber); }
.past-activity-item.close-encounter,
.recent-activity-item.close-encounter { --activity-record-rail: var(--red); }
.recent-activity-item.routine-takeoff { --activity-record-rail: var(--mint); }
.past-activity-copy,
.recent-activity-copy {
  padding: 7px 4px 6px 9px;
  display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 2px;
}
#eventFeed .event-feed-item > .event-feed-copy.past-activity-copy > .past-activity-subject,
#recentEventFeed .event-feed-item > .event-feed-copy.recent-activity-copy > .recent-activity-subject,
.past-activity-context,
.recent-activity-context {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#eventFeed .event-feed-item > .event-feed-copy.past-activity-copy > .past-activity-subject,
#recentEventFeed .event-feed-item > .event-feed-copy.recent-activity-copy > .recent-activity-subject {
  color: #d7eef7; font: 650 10px ui-monospace, monospace;
}
.recent-activity-identity { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-activity-ended {
  color: #79a7b5; font: 650 9px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
#eventFeed .event-feed-item > .event-feed-copy.past-activity-copy > .past-activity-detail {
  min-width: 0; margin: 0;
  color: #9eb9c6; font: 9px ui-monospace, monospace;
}
#recentEventFeed .event-feed-item > .event-feed-copy.recent-activity-copy > .recent-activity-detail {
  display: flex; align-items: center; width: 100%; height: 100%; min-width: 0; box-sizing: border-box;
  margin: 0; color: #9eb9c6; font: 9px ui-monospace, monospace;
}
.past-activity-detail { display: flex; align-items: center; gap: 5px; }
.past-activity-detail > .past-activity-context { flex: 1 1 auto; }
.recent-activity-detail {
  min-width: 0;
}
.recent-activity-detail > .recent-activity-context { flex: 1 1 auto; min-width: 0; }
.past-activity-glyph,
.recent-activity-glyph {
  display: inline-block; width: 12px; margin-right: 3px;
  color: var(--activity-record-rail); font-style: normal; font-weight: 800; text-align: center;
}
.past-activity-rail,
.recent-activity-rail {
  position: relative;
  flex: 0 0 58px; width: 58px; min-width: 58px; height: 100%; overflow: hidden; padding: 6px 4px 5px 0;
  display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); justify-items: end; align-items: center;
  box-sizing: border-box;
}
.past-activity-rail { flex-basis: 66px; width: 66px; min-width: 66px; }
.recent-activity-rail {
  padding: 7px 4px 6px 0; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 2px;
}
.past-activity-kind,
.recent-activity-kind {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--activity-record-rail); font: 700 10px ui-monospace, monospace;
}
.past-activity-actions,
.recent-activity-actions { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.recent-activity-rail-secondary {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  width: 100%; min-width: 0; height: 100%;
}
.recent-activity-actions.has-action {
  position: absolute; inset: 0; align-items: center;
  opacity: 0; pointer-events: none;
}
.recent-activity-item:hover .recent-activity-actions.has-action,
.recent-activity-item:focus-within .recent-activity-actions.has-action,
.recent-activity-item.is-playing .recent-activity-actions.has-action { opacity: 1; pointer-events: auto; }
.recent-activity-item:hover .recent-activity-ended,
.recent-activity-item:focus-within .recent-activity-ended,
.recent-activity-item.is-playing .recent-activity-ended { opacity: 0; }
.past-activity-delete {
  position: static; width: 21px; height: 21px; padding: 0;
  border: 1px solid #234b5b; border-radius: 5px; background: #0d2733; color: #8caab5; cursor: pointer;
  font: 700 13px/1 ui-monospace, monospace;
}
.past-activity-delete:hover,
.past-activity-delete:focus-visible { color: #d9f3fa; border-color: #4f8294; outline: none; }
.recent-activity-autoplay { color: #6f97a7; font-size: 8px; white-space: nowrap; }
.event-feed-review {
  min-width: 38px; height: 26px; padding: 0 4px; border: 0; border-radius: 4px;
  background: transparent; color: #77b9c8; cursor: pointer; font-size: 8px; font-weight: 650;
}
.event-feed-review:hover, .event-feed-review:focus-visible { background: #0f2d3a; color: #c8edf5; outline: none; }
.event-feed-review[aria-expanded="true"] { background: #123846; color: var(--cyan); box-shadow: inset 0 0 0 1px #2f7286; }
@media (prefers-reduced-motion: reduce) {
  .activity-group.has-new-event > summary { animation: none; color: #ffe0a0; }
}
.proximity-label:hover, .proximity-label:focus-within, .proximity-label .proximity-label-value[aria-pressed="true"] {
  background: #2d2718f2; box-shadow: 0 0 0 2px color-mix(in srgb, var(--proximity-label-color) 28%, transparent), 0 3px 10px #000a;
}
.proximity-label-value:focus-visible { outline: 2px solid var(--proximity-label-color); outline-offset: -2px; }
#radar.feature-hover { cursor: pointer; }
#radar.metar-anchor-hover { cursor: help; }
#radar.dragging { cursor: grabbing; }
#radar.marker-dragging { cursor: grabbing; }
.radar-vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 120px #000b; background: radial-gradient(circle at center, transparent 45%, #02070b55 100%); }
html[data-map-tone="light"] .radar-vignette {
  /* Blue-grey at the edge visually hands the bright map to the lifted chrome without a black ring. */
  box-shadow: inset 0 0 112px rgba(7, 24, 32, .58);
  background: radial-gradient(circle at center, transparent 48%, rgba(7, 20, 28, .20) 100%);
}
.map-hud { position: absolute; z-index: 7; padding: 7px 9px; background: var(--map-overlay-bg); border: 1px solid var(--map-overlay-border); backdrop-filter: blur(6px); border-radius: 5px; pointer-events: none; }
.map-top-left {
  position: absolute; top: 12px; left: calc(12px + var(--map-left-clearance)); z-index: 7;
  display: flex; align-items: flex-start; gap: 6px; pointer-events: none;
}
.map-top-left .map-hud { position: static; }
.map-top-left .mode-hud,
.map-top-left .map-altitude-control { pointer-events: auto; flex: 0 0 auto; }
/* Center-top clock chrome: LIVE chip (here) swaps with .playback-exit in transport modes. */
.map-clock-mode[hidden] { display: none !important; }
.map-clock-mode {
  position: absolute; top: 12px; left: 50%; z-index: 9;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--live-action-border); border-radius: 6px;
  background: color-mix(in srgb, var(--live-action-bg) var(--map-live-overlay-mix), transparent); backdrop-filter: blur(6px);
  color: var(--live-action-color); cursor: default; user-select: none;
  font: inherit; appearance: none; -webkit-appearance: none;
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}
.map-clock-mode strong {
  font: 800 11px/1 ui-monospace, "Pretendard", "Noto Sans KR", sans-serif;
  letter-spacing: .14em;
}
.map-clock-mode-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 6px #70e9bd88;
  transition: box-shadow .14s ease, transform .14s ease;
}
.map-clock-mode.is-flash {
  animation: clock-mode-flash 1.5s ease-out;
}
@keyframes clock-mode-flash {
  0% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
  72% { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.map-hud.mode-hud {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 9px; box-sizing: border-box;
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.map-hud span { display: block; color: var(--cyan); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.map-hud.mode-hud span {
  display: inline; flex: 0 0 auto; white-space: nowrap;
}
.map-hud strong { font-size: 11px; }
.map-hud.mode-hud strong {
  display: inline; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.map-hud.mode-hud:hover,
.map-hud.mode-hud:focus-visible {
  border-color: #3d7f99; background: #0a1c27f0; outline: none;
}
.wind-overlay {
  /* Shared shell for wind-only / cloud-only / both — one fixed footprint. */
  --weather-form-width: 240px;
  --weather-form-inset: 8px;
  --weather-action-width: 32px;
  --weather-action-gap: 2px;
  box-sizing: border-box;
  position: relative; z-index: 7; width: var(--weather-form-width); min-width: var(--weather-form-width); padding: 8px var(--weather-form-inset) 0;
  display: flex; flex-direction: column-reverse; gap: 7px;
  border: 1px solid var(--map-overlay-border); border-radius: 7px;
  background: var(--map-overlay-bg); box-shadow: 0 8px 24px #0007, inset 0 1px rgba(220, 247, 255, .035);
  backdrop-filter: blur(9px) saturate(.92);
  color: #b9d7e2; pointer-events: auto; transition: border-color .18s ease, background .18s ease;
}
.wind-overlay[hidden] { display: none !important; }
.wind-overlay-head {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: center; gap: 0; min-height: 28px;
}
.weather-primary-layers { grid-column: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; min-width: 0; }
.weather-layer-basis {
  padding: 2px 3px; border: 1px solid; border-radius: 999px;
  font: 800 6px/1.3 ui-monospace, monospace; letter-spacing: .06em; text-align: center;
}
html[data-map-tone="light"] .wind-overlay {
  border-color: rgba(54, 111, 134, .82);
  background: rgba(6, 22, 30, .79);
  box-shadow: 0 9px 26px rgba(0, 0, 0, .48), inset 0 1px rgba(224, 248, 255, .07);
  backdrop-filter: blur(11px) saturate(.86);
}
.weather-layer-toggles { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2px; min-width: 0; }
.wind-overlay-head-actions {
  position: absolute; z-index: 1;
  left: calc(100% + var(--weather-form-inset) + 1px + var(--weather-action-gap));
  top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; width: var(--weather-action-width); height: 28px;
}
/* 본체 밖의 공통 기상 버튼은 나타나도 본체 폭과 세 레이어 배치를 바꾸지 않는다. */
.wind-overlay.is-collapsed .wind-overlay-head-actions { visibility: hidden; pointer-events: none; }
.wind-panel-minimize {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--weather-action-width); height: 28px; padding: 0;
  border: 1px solid var(--map-overlay-border); border-radius: 5px;
  background: var(--map-overlay-bg); color: #9fc3d3; cursor: pointer;
}
.wind-panel-minimize:not(:disabled):hover { border-color: #3d7f99; background: #123647; color: white; }
.wind-panel-minimize:disabled {
  border-color: #24404c; background: #081821; color: #536f7b; cursor: not-allowed; opacity: .82;
}
.wind-panel-minimize:disabled .wind-panel-chevron { border-color: #536f7b; }
.wind-panel-minimize:focus-visible { outline: 1px solid var(--cyan); outline-offset: 0; }
.wind-panel-chevron {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #6f9cac;
  border-bottom: 1.5px solid #6f9cac;
  box-sizing: border-box;
  /* Minimized: point up (panel opens upward). Expanded: point down. */
  transform: translateY(1px) rotate(225deg);
  transition: border-color .14s ease, transform .18s ease;
}
.wind-panel-minimize:not(:disabled):hover .wind-panel-chevron,
.wind-panel-minimize:not(:disabled)[aria-expanded="true"] .wind-panel-chevron { border-color: #9fd0e2; }
.wind-panel-minimize:not(:disabled)[aria-expanded="true"] .wind-panel-chevron {
  transform: translateY(-1px) rotate(45deg);
}
.wind-overlay-toggle {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 25px; min-width: 0; padding: 2px 5px; border: 1px solid transparent;
  border-radius: 5px; background: transparent; color: #7898a5; cursor: pointer;
}
.wind-overlay-toggle span { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.wind-overlay-toggle span i { color: #6c91a0; font: 800 16px/1 ui-monospace, monospace; text-shadow: none; }
.wind-overlay-toggle .weather-radar-glyph { display: inline-flex; width: 16px; height: 14px; align-items: center; }
.weather-radar-glyph svg { width: 100%; height: 100%; overflow: visible; }
.weather-radar-glyph path { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; }
.wind-overlay-toggle small { display: none; }
.wind-overlay-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--toggle-accent, var(--cyan)) 72%, #1c4250);
  background: color-mix(in srgb, var(--toggle-accent, var(--cyan)) 17%, transparent);
  color: #e7fbff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--toggle-accent, var(--cyan)) 18%, transparent);
}
.wind-overlay-toggle[aria-pressed="true"] span i { color: var(--cyan); text-shadow: 0 0 7px #4fe1ff99; }
.wind-overlay-toggle { --toggle-accent: var(--cyan); }
.rain-overlay-toggle span i { font-family: inherit; font-size: 12px; }
.rain-overlay-toggle { --toggle-accent: #5db7ff; }
.rain-overlay-toggle[aria-pressed="true"] span i { color: #5db7ff; text-shadow: 0 0 7px #3e9fff88; }
.rain-overlay-toggle[aria-pressed="true"] small { color: #72c9ff; }
.radar-overlay-toggle span i { font-size: 12px; }
.radar-overlay-toggle { --toggle-accent: #67e4c2; }
.radar-overlay-toggle[aria-pressed="true"] span i { color: #67e4c2; text-shadow: 0 0 7px #55e7bd88; }
.satellite-overlay-toggle span i { color: #a8c9dd; font-size: 12px; text-shadow: 0 0 7px #9bc7de66; }
.radar-overlay-toggle[aria-pressed="true"] small { color: #74e6bb; }
.satellite-overlay-toggle[aria-pressed="true"] small { color: #bad9e8; }
.wind-overlay-toggle:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
.weather-detail-context {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 5px; border-bottom: 1px solid rgba(44, 91, 108, .48);
}
.weather-detail-context strong { color: #e0f5fa; font-size: 10px; }
.weather-detail-context span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #769ca9; font-size: 7px; white-space: nowrap; }
.cloud-source-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 8px; }
.cloud-source-row > span { color: #83a8b4; font-size: 8px; }
.cloud-source-row > small { grid-column: 1 / -1; color: #6f959f; font-size: 7px; }
.weather-source-options { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.weather-source-options button {
  min-height: 25px; padding: 3px 5px; border: 1px solid #28566a; border-radius: 4px;
  background: #091d28; color: #8cabb6; font-size: 8px; cursor: pointer;
}
.weather-source-options button[aria-pressed="true"] { border-color: #3f91a7; background: rgba(38, 120, 145, .24); color: #dff8ff; }
.weather-source-options button:focus-visible { outline: 1px solid var(--cyan); outline-offset: 1px; }
.weather-advanced {
  display: flex; flex-direction: column-reverse; gap: 0; margin: 0;
  border: 1px solid rgba(46, 104, 124, .56); border-radius: 5px; background: rgba(7, 27, 37, .52);
}
.weather-advanced summary {
  min-height: 28px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  box-sizing: border-box; color: #a9d1dc; font-size: 8px; font-weight: 800; cursor: pointer; list-style: none;
}
.weather-advanced summary::-webkit-details-marker { display: none; }
.weather-advanced summary:hover { color: #e2f8ff; background: rgba(42, 151, 182, .1); }
.weather-advanced summary:focus-visible { outline: 1px solid var(--cyan); outline-offset: 1px; }
.weather-advanced summary small { display: inline-flex; align-items: center; gap: 6px; color: #74a4b3; font-size: 7px; font-weight: 700; }
.weather-advanced summary b { font: inherit; }
.weather-advanced-close-label { display: none; }
.weather-advanced[open] .weather-advanced-open-label { display: none; }
.weather-advanced[open] .weather-advanced-close-label { display: inline; color: #8dd9e9; }
.weather-advanced-chevron {
  width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg); transition: transform .16s ease;
}
.weather-advanced[open] .weather-advanced-chevron { transform: translateY(1px) rotate(225deg); }
.weather-advanced-content { display: grid; gap: 7px; padding: 8px 7px; border-bottom: 1px solid rgba(46, 104, 124, .46); }
.wind-altitude-row { display: grid; gap: 4px; }
.cloud-compare-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding-top: 1px;
}
.cloud-compare-row label { display: grid; gap: 3px; min-width: 0; color: #7fa4b3; font-size: 8px; }
.cloud-compare-row select {
  width: 100%; min-width: 0; height: 25px; padding: 0 22px 0 7px;
  border: 1px solid #28566a; border-radius: 4px;
  background: #091d28; color: #d7eef7; font: 700 9px ui-monospace, monospace;
}
.cloud-compare-row select:hover { border-color: #3f829c; }
.cloud-compare-row select:focus-visible { outline: 1px solid #4fe1ff; outline-offset: 1px; }
.cloud-compare-row select:disabled { opacity: .5; cursor: not-allowed; }
.metar-cloud-anchor-tooltip {
  position: absolute; z-index: 10; width: max-content; max-width: min(310px, calc(100% - 20px));
  display: grid; gap: 3px; padding: 8px 10px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--metar-color, #7f9ca7) 75%, #244857);
  border-radius: 6px; background: rgba(4, 17, 23, .96);
  color: #dceff5; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  font: 700 9px/1.35 ui-monospace, "SFMono-Regular", Consolas, monospace;
}
.metar-cloud-anchor-tooltip[hidden] { display: none !important; }
.metar-cloud-anchor-tooltip strong { color: #f2fbff; font-size: 10px; }
.metar-cloud-anchor-tooltip span { color: #c5e0e8; }
.metar-cloud-anchor-tooltip small { color: var(--metar-color, #9bb5bf); font: inherit; }
.wind-altitude-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  color: #7fa4b3; font-size: 8px; min-width: 0;
}
.wind-altitude-meta > span { flex: 0 0 auto; }
.wind-altitude-meta strong {
  color: #dff7ff; font: 700 11px ui-monospace, monospace;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}
.wind-altitude-ends {
  display: flex; justify-content: space-between; padding: 0 6px; color: #618998; font-size: 7px;
}
.wind-follow-row {
  /* Same form column as cloud: wrap a second toggle under instead of widening the shell. */
  display: flex; align-items: center; gap: 2px 10px; flex-wrap: wrap; min-width: 0;
}
.wind-follow-altitude {
  display: flex; align-items: center; gap: 6px; margin-top: 2px; min-height: 22px; min-width: 0;
  color: #8eb0bc; font-size: 8px; cursor: pointer; user-select: none; white-space: nowrap;
}
.wind-follow-altitude input {
  position: absolute; opacity: 0;
}
.wind-follow-altitude i {
  position: relative; pointer-events: none; flex: 0 0 auto; width: 28px; height: 15px; border-radius: 999px;
  background: #12303c; box-shadow: inset 0 0 0 1px #28536a;
}
.wind-follow-altitude i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
  border-radius: 50%; background: #7fa4b3; transition: left .14s ease, background .14s ease;
}
.wind-follow-altitude input:checked + i { background: #165b68; box-shadow: inset 0 0 0 1px #2f8798; }
.wind-follow-altitude input:checked + i::after { left: 15px; background: var(--mint); box-shadow: 0 0 6px #64efb288; }
.wind-follow-altitude:hover { color: #c6e7f2; }
.wind-follow-altitude:focus-within { outline: 1px solid #3bd4ff44; outline-offset: 2px; border-radius: 4px; }
.wind-follow-altitude.is-disabled { opacity: .45; cursor: not-allowed; }
.wind-overlay.is-wind-off #windAltitudeRow .wind-follow-row { display: none; }
/* Edge-aligned discrete wind altitude slider (thumb centers sit on track ends). */
.wind-level-slider {
  --wind-level-pct: 0%;
  --wind-thumb: 12px;
  width: 100%;
  height: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.wind-level-slider:focus-visible { outline: none; }
.wind-level-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px #0a1c27, 0 0 0 4px #3bd4ff55;
}
.wind-level-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px #0a1c27, 0 0 0 4px #3bd4ff55;
}
.wind-level-slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #4fe1ff 0%,
    #4fe1ff var(--wind-level-pct),
    #1a3a48 var(--wind-level-pct),
    #1a3a48 100%
  );
}
.wind-level-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--wind-thumb);
  height: var(--wind-thumb);
  margin-top: -4.5px;
  border: 0;
  border-radius: 50%;
  background: #9cf2ff;
  box-shadow: 0 0 0 2px #0a1c27;
}
.wind-level-slider::-moz-range-track {
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: #1a3a48;
}
.wind-level-slider::-moz-range-progress {
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: #4fe1ff;
}
.wind-level-slider::-moz-range-thumb {
  width: var(--wind-thumb);
  height: var(--wind-thumb);
  border: 0;
  border-radius: 50%;
  background: #9cf2ff;
  box-shadow: 0 0 0 2px #0a1c27;
}
.wind-level-slider:disabled {
  cursor: not-allowed;
  opacity: .58;
}
.wind-overlay-body { display: block; }
.wind-overlay.is-collapsed { --weather-form-inset: 5px; height: 28px; min-height: 28px; padding: 0 var(--weather-form-inset); gap: 0; align-self: stretch; }
.wind-overlay.is-collapsed .wind-overlay-head { height: 100%; min-height: 0; align-items: center; }
.wind-overlay.is-collapsed .weather-detail-context,
.wind-overlay.is-collapsed #windAltitudeRow,
.wind-overlay.is-collapsed #cloudSourceRow,
.wind-overlay.is-collapsed #cloudAdvanced,
.wind-overlay.is-collapsed #cloudCompareRow,
.wind-overlay.is-collapsed #cloudAltitudeRow,
.wind-overlay.is-collapsed .wind-overlay-body { display: none; }
.wind-overlay.is-collapsed .weather-primary-layers,
.wind-overlay.is-minimized:not(.is-collapsed) .weather-primary-layers { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 1px; height: 100%; }
.wind-overlay.is-collapsed .wind-overlay-toggle,
.wind-overlay.is-minimized:not(.is-collapsed) .wind-overlay-toggle { justify-content: center; min-height: 0; height: 100%; padding-inline: 4px; }
.wind-overlay.is-collapsed .wind-overlay-toggle small,
.wind-overlay.is-minimized:not(.is-collapsed) .wind-overlay-toggle small { display: none; }
.wind-overlay.is-collapsed .wind-overlay-toggle span,
.wind-overlay.is-minimized:not(.is-collapsed) .wind-overlay-toggle span { font-size: 8px; letter-spacing: 0; }
.wind-overlay.is-collapsed .wind-overlay-toggle:not([aria-pressed="true"]) span i { color: #6c91a0; text-shadow: none; }
.wind-overlay.is-minimized:not(.is-collapsed) { --weather-form-inset: 5px; height: 28px; min-height: 28px; padding: 0 var(--weather-form-inset); gap: 0; }
.wind-overlay.is-minimized:not(.is-collapsed) .wind-overlay-head { height: 100%; min-height: 0; }
.wind-overlay.is-minimized:not(.is-collapsed) #windAltitudeRow,
.wind-overlay.is-minimized:not(.is-collapsed) .weather-detail-context,
.wind-overlay.is-minimized:not(.is-collapsed) #cloudSourceRow,
.wind-overlay.is-minimized:not(.is-collapsed) #cloudAdvanced,
.wind-overlay.is-minimized:not(.is-collapsed) #cloudCompareRow,
.wind-overlay.is-minimized:not(.is-collapsed) #cloudAltitudeRow,
.wind-overlay.is-minimized:not(.is-collapsed) .wind-overlay-body { display: none; }
.wind-overlay.is-wind-off #windAltitudeRow,
.wind-overlay.is-wind-off .wind-summary:not(.rain-summary),
.wind-overlay.is-wind-off .runway-wind-context,
.wind-overlay.is-wind-off .wind-speed-scale { display: none; }
.wind-overlay.is-rain-off #cloudAltitudeRow,
.wind-overlay.is-rain-off #cloudCompareRow,
.wind-overlay.is-rain-off .rain-summary,
.wind-overlay.is-rain-off .rain-speed-scale { display: none; }
.wind-overlay.is-model-off .wind-summary,
.wind-overlay.is-model-off .runway-wind-context,
.wind-overlay.is-model-off .wind-overlay-foot,
.wind-overlay.is-model-off .model-data-disclosure,
.wind-overlay.is-model-off .metar-anchor-disclosure { display: none; }
.wind-overlay.is-observation-off .kma-observation-panel,
.wind-overlay.is-observation-off .observation-data-disclosure { display: none; }
.wind-overlay:not(.is-detail-wind) #windAltitudeRow,
.wind-overlay:not(.is-detail-wind) .wind-summary:not(.rain-summary),
.wind-overlay:not(.is-detail-wind) .runway-wind-context,
.wind-overlay:not(.is-detail-cloud) #cloudSourceRow,
.wind-overlay:not(.is-detail-cloud) #cloudAdvanced,
.wind-overlay:not(.is-detail-cloud) .rain-summary,
.wind-overlay:not(.is-detail-cloud) .metar-anchor-disclosure { display: none; }
.wind-overlay:not(.is-detail-radar):not(.is-detail-cloud) .kma-observation-panel { display: none; }
.wind-overlay.is-detail-wind.is-wind-off #windAltitudeRow,
.wind-overlay.is-detail-wind.is-wind-off .wind-summary,
.wind-overlay.is-detail-cloud.is-rain-off #cloudSourceRow,
.wind-overlay.is-detail-cloud.is-rain-off #cloudAdvanced { display: none; }
.wind-overlay.is-detail-cloud.is-cloud-source-satellite #cloudAdvanced,
.wind-overlay.is-detail-cloud.is-cloud-source-satellite .rain-summary,
.wind-overlay.is-detail-cloud.is-cloud-source-satellite .rain-speed-scale,
.wind-overlay.is-detail-cloud.is-cloud-source-satellite .wind-overlay-foot { display: none; }
.wind-overlay.is-detail-cloud.is-cloud-source-model .kma-observation-panel,
.wind-overlay.is-detail-cloud.is-cloud-source-model .observation-data-disclosure { display: none; }
.wind-overlay.is-detail-cloud .kma-radar-scale,
.wind-overlay.is-detail-cloud #kmaRadarPanelRow { display: none !important; }
.wind-overlay.is-detail-radar #kmaCloudPanelRow { display: none !important; }
.wind-overlay.is-detail-radar .wind-overlay-foot,
.wind-overlay.is-detail-radar .wind-summary,
.wind-overlay.is-detail-radar .rain-summary,
.wind-overlay.is-detail-radar .metar-anchor-disclosure { display: none; }
.cloud-level-mini { color: #8ec8ff; }
.wind-summary { margin: 7px 0 0; color: #9fc5d3; font-size: 8px; line-height: 1.4; }
.rain-summary { color: #a8d9ff; }
.wind-summary.is-error { color: #f0aa82; }
.runway-wind-context {
  display: grid; gap: 3px; margin-top: 7px; padding: 7px; border: 1px solid rgba(103, 223, 245, .26);
  border-radius: 5px; background: rgba(14, 48, 61, .56);
}
.runway-wind-context[hidden] { display: none !important; }
.runway-wind-context strong { color: #e2fbff; font-size: 10px; }
.runway-wind-context span { color: #9ed4e3; font: 8px ui-monospace, monospace; }
.runway-wind-context small { color: #9a865d; font-size: 7px; line-height: 1.35; }
.wind-overlay-foot { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 7px; color: #618998; font-size: 7px; }
.wind-overlay-foot > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wind-speed-scale { display: flex; align-items: center; flex: 0 0 auto; }
.wind-speed-scale i { display: block; width: 8px; height: 3px; }
.wind-speed-scale i:nth-child(1) { background: #2db7ff; }
.wind-speed-scale i:nth-child(2) { background: #4ce8be; }
.wind-speed-scale i:nth-child(3) { background: #dded53; }
.wind-speed-scale i:nth-child(4) { background: #ffad3d; }
.model-data-disclosure {
  display: flex; align-items: center; gap: 5px; margin: 5px 0 0; color: #9ed4e3; font-size: 7px; line-height: 1.35;
}
.wind-overlay.is-wind-off.is-rain-off .model-data-disclosure { display: none; }
.basis-badge {
  flex: 0 0 auto; padding: 1px 5px; border-radius: 999px; border: 1px solid;
  font: 800 6.5px/1.5 ui-monospace, monospace; letter-spacing: .06em;
}
.basis-model { color: #76d7ee; border-color: #27718a; background: rgba(31, 119, 146, .14); }
.basis-observation { color: #77e2b4; border-color: #267559; background: rgba(38, 117, 89, .14); }
.kma-observation-panel {
  display: grid; gap: 5px; margin-top: 7px; padding: 7px;
  border: 1px solid rgba(74, 191, 160, .25); border-radius: 5px;
  background: rgba(9, 38, 42, .48);
}
.kma-observation-panel[hidden] { display: none !important; }
.kma-observation-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.kma-observation-row[hidden] { display: none !important; }
.kma-observation-row span { color: #8fb9bf; font-size: 7px; white-space: nowrap; }
.kma-observation-row span b { color: #76e2ba; font: 800 6px ui-monospace, monospace; letter-spacing: .06em; }
.kma-observation-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #d9f2ef; font-size: 8px; white-space: nowrap; text-align: right; }
.kma-observation-meta { display: grid; gap: 2px; margin: 0; padding: 4px 0; border-block: 1px solid rgba(89, 145, 157, .13); }
.kma-observation-meta > div { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 6px; align-items: baseline; }
.kma-observation-meta dt { color: #668a92; font: 700 6.5px/1.35 ui-monospace, monospace; letter-spacing: .04em; }
.kma-observation-meta dd { min-width: 0; margin: 0; color: #a8c7cc; font-size: 7px; line-height: 1.35; text-align: right; }
.kma-observation-meta dd[data-state="delayed"] { color: #e4b866; }
.kma-observation-meta dd[data-state="healthy"] { color: #76d8b1; }
.kma-radar-scale { display: flex; align-items: center; gap: 0; }
.kma-radar-scale i { width: 12px; height: 3px; }
.kma-radar-scale i:nth-child(1) { background: #30b2d8; }
.kma-radar-scale i:nth-child(2) { background: #2ac280; }
.kma-radar-scale i:nth-child(3) { background: #bcd73e; }
.kma-radar-scale i:nth-child(4) { background: #ffae37; }
.kma-radar-scale i:nth-child(5) { background: #f64e40; }
.kma-radar-scale small { margin-left: 5px; color: #789aa2; font-size: 6.5px; }
.kma-observation-note { color: #6f959b; font-size: 6.5px; line-height: 1.35; }
.observation-data-disclosure {
  display: flex; align-items: center; gap: 5px; margin: 4px 0 0; color: #8fbac5; font-size: 7px; line-height: 1.35;
}
.observation-data-disclosure[hidden] { display: none !important; }
.metar-anchor-disclosure {
  display: flex; align-items: center; gap: 5px; margin: 4px 0 0; color: #8fbac5; font-size: 7px; line-height: 1.35;
}
.metar-anchor-disclosure[hidden] { display: none !important; }
.metar-anchor-disclosure > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metar-anchor-key { display: inline-flex; gap: 2px; margin-left: auto; flex: 0 0 auto; }
.metar-anchor-key i { width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 0 1px #04141a; }
.metar-anchor-key .match { background: #70e5b2; }
.metar-anchor-key .partial { background: #f0c66a; }
.metar-anchor-key .mismatch { background: #ef8a72; }
.wind-speed-scale b { margin-left: 4px; color: #789daa; font-size: 7px; font-weight: 500; }
.rain-speed-scale { display: flex; align-items: center; flex: 0 0 auto; }
.rain-speed-scale i { display: block; width: 8px; height: 3px; }
.rain-speed-scale i:nth-child(1) { background: #4b8fe0; }
.rain-speed-scale i:nth-child(2) { background: #43d7d2; }
.rain-speed-scale i:nth-child(3) { background: #efd14c; }
.rain-speed-scale i:nth-child(4) { background: #ff684c; }
.rain-speed-scale b { margin-left: 4px; color: #789daa; font-size: 7px; font-weight: 500; }
.airport-control { position: absolute; top: 12px; right: calc(12px + var(--map-right-clearance)); z-index: 12; }
.airport-control-toggle { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 9px; border: 1px solid var(--map-overlay-border); border-radius: 7px; background: var(--map-overlay-bg); color: #b8d2dc; box-shadow: 0 6px 18px #0006; backdrop-filter: blur(7px); font: 700 9px/1 ui-monospace, monospace; cursor: pointer; }
.airport-control-home-label { display: inline-flex; align-items: center; gap: 3px; }
.airport-control-home-icon { display: block; flex: 0 0 11px; width: 11px; height: 11px; }
.airport-control-toggle strong { color: var(--cyan); font-size: 10px; }
.airport-control-toggle i { color: #8aa9b5; font: normal 12px/1 system-ui, sans-serif; transition: transform .15s ease; }
.airport-control-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.airport-overlay { position: absolute; top: calc(100% + 6px); right: 0; width: 188px; padding: 8px; border: 1px solid var(--map-overlay-border); border-radius: 7px; background: var(--map-overlay-bg); box-shadow: 0 8px 24px #0007; backdrop-filter: blur(7px); }
.airport-overlay[hidden] { display: none !important; }
.airport-overlay-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.airport-overlay-heading label { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; color: var(--cyan); font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.airport-overlay-heading label small { color: #95cfc6; font-size: 8px; font-weight: 500; letter-spacing: 0; }
.airport-overlay-heading > button { flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid #26566d; border-radius: 4px; background: var(--map-overlay-field-bg); color: #aac6d1; font-size: 15px; line-height: 1; cursor: pointer; }
.airport-select-row { display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 4px; min-width: 0; }
.airport-overlay select { width: 100%; min-width: 0; padding: 6px 24px 6px 8px; border-color: #26566d; background-color: var(--map-overlay-field-bg); font-size: 10px; }
.airport-favorite-toggle,
.airport-quick-choice { min-width: 0; border: 1px solid #26566d; border-radius: 4px; background: var(--map-overlay-field-bg); color: #b8d2dc; font: 700 9px/1 ui-monospace, monospace; }
.airport-favorite-toggle { color: var(--amber); font-size: 16px; }
.airport-favorite-toggle[aria-pressed="true"] { background: #342613; border-color: #826126; }
.airport-home-hint { display: flex; align-items: center; gap: 5px; margin: 7px 0 0; color: #829ca7; font-size: 8px; line-height: 1.4; }
.airport-home-hint .airport-control-home-icon { flex-basis: 10px; width: 10px; height: 10px; color: var(--cyan); }
.airport-quick-access { display: flex; gap: 4px; margin-top: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.airport-quick-access[hidden] { display: none !important; }
.airport-quick-access::-webkit-scrollbar { display: none; }
.airport-quick-choice { flex: 0 0 auto; padding: 5px 7px; color: var(--cyan); }
.airport-quick-choice.is-current { border-color: var(--cyan); background: #0c3040; color: #e4f8ff; }
.airport-control button:focus-visible,
.airport-overlay select:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.map-home-button[hidden] { display: none !important; }
.coordinates { color: #80a6b5; font: 9px ui-monospace, monospace; display: flex; align-items: center; height: 28px; padding: 0 9px; box-sizing: border-box; }
.map-bottom-left {
  position: absolute; left: calc(var(--map-edge) + var(--map-bottom-left-clearance)); bottom: var(--map-edge); z-index: 7;
  display: flex; align-items: flex-end; gap: 6px;
}
.map-bottom-left .map-hud { position: static; }
.basemap-attribution {
  position: absolute; right: calc(var(--map-edge) + var(--map-bottom-right-clearance)); bottom: 3px; z-index: 6;
  height: 13px; max-width: calc(100% - var(--map-edge) * 2 - var(--map-bottom-left-clearance) - var(--map-bottom-right-clearance)); padding: 0 4px; display: block;
  border-radius: 2px; background: var(--map-overlay-bg); color: #6f93a3;
  font: 9px/13px system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.basemap-attribution[hidden] { display: none !important; }
.basemap-attribution a { color: inherit; text-decoration: none; pointer-events: auto; }
.basemap-attribution a:hover,
.basemap-attribution a:focus-visible { color: #c5e9f4; text-decoration: underline; }
.map-legend { position: absolute; right: calc(var(--map-edge) + var(--map-bottom-right-clearance)); bottom: 21px; z-index: 6; color: #a9c4cf; touch-action: manipulation; }
.map-legend[open] { z-index: 14; }
.basemap-attribution[hidden] + .map-legend { bottom: var(--map-edge); }
.map-legend summary { display: flex; align-items: center; gap: 9px; min-height: 28px; padding: 0 8px; border: 1px solid var(--map-overlay-border); border-radius: 5px; background: var(--map-overlay-bg); backdrop-filter: blur(6px); cursor: pointer; list-style: none; font-size: 8px; }
.map-legend summary::-webkit-details-marker { display: none; }
.map-legend summary span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.map-legend summary > .legend-status-summary,
.map-legend summary > .legend-altitude-summary,
.map-legend summary > .legend-vertical-summary,
.map-legend summary > .legend-route-summary { gap: 9px; }
.legend-altitude-ramp,
.legend-altitude-scale {
  background: linear-gradient(90deg, #f07b45 0%, #e6ae52 25%, #a8c96c 50%, #68edb4 75%, #55c7f2 100%);
}
.map-legend summary .legend-altitude-ramp { display: block; width: 70px; height: 6px; border-radius: 3px; box-shadow: 0 0 7px rgba(72, 195, 195, .4); }
.legend-altitude-scale { display: block; width: 100%; height: 8px; border-radius: 3px; }
.legend-altitude-ticks { display: flex; justify-content: space-between; margin-top: 3px; color: #7899a7; }
.legend-altitude-ticks small { font-size: 7px; }
html[data-map-tone="light"] .legend-altitude-ramp,
html[data-map-tone="light"] .legend-altitude-scale {
  background: linear-gradient(90deg, #a83d12 0%, #8a5100 25%, #5e762a 50%, #0a7a56 75%, #176b99 100%);
}
.map-legend [hidden] { display: none !important; }
.map-legend summary b { color: #6f9cac; font-size: 8px; transition: transform .18s; }
.map-legend[open] summary b { transform: rotate(180deg); }
.map-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; }
.map-legend i.fresh { color: #68edb4; }.map-legend i.delayed { color: #e6ae52; }.map-legend i.stale { color: #657881; }
.map-legend i.climb { color: #68edb4; }.map-legend i.descend { color: #ffb45d; }
.map-legend i.route-icn { color: #61c2e5; }.map-legend i.route-gmp { color: #84e561; }
.map-legend i.route-cju { color: #e56192; }.map-legend i.route-pus { color: #a361e5; }
.map-legend i.route-tae { color: #7965d2; }.map-legend i.route-cjj { color: #d28b65; }
.map-legend i.route-kwj { color: #a3d265; }.map-legend i.route-other { color: #b7ccd5; }
.map-legend i.route-rsu { color: #6bbdbb; }.map-legend i.route-usn { color: #6b86bd; }
.map-legend i.route-kpo { color: #a16bbd; }.map-legend i.route-kuv { color: #bd6b76; }
.map-legend i.route-hin { color: #bd9c6b; }.map-legend i.route-mwx { color: #6bbd82; }
.map-legend i:is(.route-icn, .route-gmp, .route-cju, .route-pus, .route-tae, .route-cjj, .route-kwj, .route-rsu, .route-usn, .route-kpo, .route-kuv, .route-hin, .route-mwx, .route-other, .route-overseas) {
  width: 9px; height: 9px;
}
.map-legend i.route-overseas { color: #839ba6; }
.map-legend i.route-unknown {
  border: 1px solid currentColor; background: transparent; color: #657881; box-shadow: 0 0 3px currentColor;
}
html[data-map-tone="light"] .map-legend i { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
html[data-map-tone="light"] .map-legend i.fresh { color: #0a7a56; }
html[data-map-tone="light"] .map-legend i.delayed { color: #8a5100; }
html[data-map-tone="light"] .map-legend i.stale { color: #4f6371; }
html[data-map-tone="light"] .map-legend i.climb { color: #0a7a56; }
html[data-map-tone="light"] .map-legend i.descend { color: #a8490c; }
html[data-map-tone="light"] .map-legend i.route-icn { color: #1f7493; }
html[data-map-tone="light"] .map-legend i.route-gmp { color: #3e931f; }
html[data-map-tone="light"] .map-legend i.route-cju { color: #931f4a; }
html[data-map-tone="light"] .map-legend i.route-pus { color: #591f93; }
html[data-map-tone="light"] .map-legend i.route-tae { color: #453394; }
html[data-map-tone="light"] .map-legend i.route-cjj { color: #945533; }
html[data-map-tone="light"] .map-legend i.route-kwj { color: #6a9433; }
html[data-map-tone="light"] .map-legend i.route-rsu { color: #4b9594; }
html[data-map-tone="light"] .map-legend i.route-usn { color: #4b6495; }
html[data-map-tone="light"] .map-legend i.route-kpo { color: #7d4b95; }
html[data-map-tone="light"] .map-legend i.route-kuv { color: #954b55; }
html[data-map-tone="light"] .map-legend i.route-hin { color: #95784b; }
html[data-map-tone="light"] .map-legend i.route-mwx { color: #4b9560; }
html[data-map-tone="light"] .map-legend i.route-other { color: #496775; }
html[data-map-tone="light"] .map-legend i.route-overseas { color: #536b76; }
html[data-map-tone="light"] .map-legend i.route-unknown { color: #4f6371; }
.map-legend i.selected { color: #ffd05e; }.map-legend i.ground { color: #78a1ae; }.map-legend i.emergency { color: #ff6b6b; }
html[data-map-tone="light"] .map-legend i.selected { color: #b45309; }
html[data-map-tone="light"] .map-legend i.ground { color: #2c5a6d; }
html[data-map-tone="light"] .map-legend i.emergency { color: #c01526; }
.legend-panel { position: absolute; right: 0; bottom: calc(100% + 6px + var(--legend-bottom-clearance, 0px)); width: 188px; padding: 10px; border: 1px solid var(--map-overlay-border); border-radius: 6px; background: var(--map-overlay-bg-strong); box-shadow: 0 10px 30px #0009; backdrop-filter: blur(8px); }
.legend-panel strong { display: block; margin-bottom: 8px; color: #d6edf5; font-size: 9px; }
.legend-panel p { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 6px; margin: 6px 0; font-size: 8px; }
.legend-panel p span { color: #b9d0d9; }.legend-panel p small { color: #668896; font-size: 7px; }
.legend-freshness-note { display: block; margin-top: 8px; color: #6f919f; font-size: 7px; line-height: 1.45; }
.legend-route-airports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 8px; }
.legend-route-airports span { display: flex; align-items: center; gap: 5px; color: #a9c4cf; font: 650 8px ui-monospace, monospace; }
.legend-panel hr { height: 1px; margin: 8px 0; border: 0; background: var(--line); }
.map-side-controls {
  position: absolute; right: calc(12px + var(--map-right-clearance)); top: 50%; transform: translateY(-50%); z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.follow-map-status {
  position: absolute; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 32;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 96px);
  padding: 6px 7px 6px 12px; transform: translateX(-50%);
  border: 1px solid #d69b3d; border-radius: 999px; background: #101d24f2; color: #ffe3aa;
  box-shadow: 0 5px 18px #0009; font-size: 11px; line-height: 1.35; backdrop-filter: blur(8px);
}
.follow-map-status[hidden] { display: none !important; }
.follow-map-status > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-map-status button {
  flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid #47b9a0; border-radius: 999px;
  background: #12352f; color: #a9f1dc; font-size: 11px; font-weight: 750; cursor: pointer;
}
.follow-map-status button:hover { background: #19483e; color: #e0fff4; }
.follow-map-status button:focus-visible { outline: 2px solid #6cf3c8; outline-offset: 2px; }
.map-tool-stack {
  display: grid;
  border: 1px solid var(--map-overlay-border); border-radius: 5px; overflow: visible;
  background: var(--map-overlay-bg); box-shadow: 0 8px 24px #0007;
}
.map-tool-stack > button,
.map-tool-stack .layer-menu-trigger {
  width: 31px; height: 29px; margin: 0; padding: 0;
  border: 0; border-bottom: 1px solid #26566d; border-radius: 0;
  background: transparent; color: #bdeaff; cursor: pointer;
  box-shadow: none;
  transition: background-color .12s ease, color .12s ease, transform .1s ease, box-shadow .1s ease;
}
.map-tool-stack > button.map-home-button {
  display: inline-flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; color: var(--cyan);
}
.map-home-icon { display: block; width: 12px; height: 12px; }
.map-home-button small { font: 700 8px/1 ui-monospace, monospace; }
.map-tool-stack > button:hover,
.map-tool-stack .layer-menu-trigger:hover,
.map-tool-stack .layer-menu-trigger[aria-expanded="true"] {
  background: var(--map-overlay-bg-strong); color: #e4fbff;
}
.map-tool-stack > button:active:not(:disabled),
.map-tool-stack .layer-menu-trigger:active:not(:disabled) {
  position: relative; z-index: 2;
  transform: translateY(1px) scale(.96);
  background: color-mix(in srgb, var(--cyan, #67dff5) 18%, var(--map-overlay-bg-strong));
  color: #fff;
  box-shadow: inset 0 1px 3px #0008, 0 0 0 1px color-mix(in srgb, var(--cyan, #67dff5) 38%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .map-tool-stack > button,
  .map-tool-stack .layer-menu-trigger { transition: none; }
  .map-tool-stack > button:active:not(:disabled),
  .map-tool-stack .layer-menu-trigger:active:not(:disabled) { transform: none; }
}
.map-tool-divider {
  height: 3px; border-bottom: 1px solid #26566d;
  background: color-mix(in srgb, #041018 70%, #26566d);
}
.layer-control { position: relative; }
.layer-menu-trigger {
  display: grid; place-items: center;
}
.map-tool-glyph { display: block; color: currentColor; font: 700 15px/1 ui-monospace, monospace; }
.map-tool-aircraft-glyph { font-size: 14px; transform: rotate(-12deg); }
.layer-menu-trigger:focus-visible,
.map-tool-stack > button:focus-visible {
  outline: 2px solid var(--cyan, #67dff5); outline-offset: -2px; z-index: 1;
}
.layer-popover {
  position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  width: 156px; padding: 6px; border: 1px solid #2b6078; border-radius: 7px;
  background: var(--map-popover-bg); box-shadow: 0 12px 32px #000a; backdrop-filter: blur(8px);
}
.layer-popover[hidden] { display: none !important; }
.layer-row {
  position: relative; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 7px;
  min-height: 36px; margin: 0; padding: 4px 6px; border: 1px solid transparent; border-radius: 5px;
  color: #bce7f4; font-size: 11px; font-weight: 600; cursor: pointer;
}
.layer-row:hover { border-color: #2b6983; background: #091923; }
.layer-row:has(input:checked) { color: #e4fbff; background: rgba(82, 213, 240, 0.06); }
.layer-row-icon {
  display: grid; place-items: center; color: #67dff5; font: 700 11px/1 ui-monospace, monospace;
}
.layer-row-copy { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 날짜는 그룹 제목으로, 편명과 당시 노선은 두 줄로 나눠 좁은 상세에서도 생략하지 않는다. */
.past-flight-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.past-flight-day-heading {
  display: flex; align-items: center; gap: 6px; padding: 7px 4px 3px;
  color: #9bbdcc; font: 700 10px/1.4 ui-monospace, monospace;
}
.past-flight-day-heading:first-child { padding-top: 3px; }
.past-flight-day-heading small { color: #638b9c; font: 500 9px/1.4 system-ui, sans-serif; }
.past-flight-day-heading::after { content: ''; flex: 1; height: 1px; background: rgba(45, 92, 112, .45); }
.past-flight-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center; gap: 8px; padding: 4px; border-radius: 5px;
  color: #bce7f4; font-size: 10px; line-height: 1.3;
}
.past-flight-row:hover { background: rgba(82, 213, 240, .07); }
.past-flight-content { min-width: 0; display: grid; gap: 3px; }
.past-flight-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr) max-content; align-items: center; gap: 5px; }
.past-flight-time { color: #9ec7d6; font: 600 10px/1.4 ui-monospace, monospace; white-space: nowrap; }
.past-flight-callsign { color: #e4fbff; font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.past-flight-secondary-callsign { display: block; margin-top: 1px; color: #789aa8; font: 9px ui-monospace, monospace; font-weight: 500; }
.past-flight-detail { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.past-flight-where { min-width: 0; color: #8fb3c2; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.past-flight-where.is-known { color: #bce7e1; font-family: ui-monospace, monospace; }
.past-flight-where small { display: inline-block; margin-left: 4px; color: #7196a6; font: 400 9px/1.4 system-ui, sans-serif; }
.past-flight-kind {
  justify-self: start; padding: 1px 3px; border-radius: 3px;
  font: 600 8px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap;
}
.past-flight-kind.is-arrival { background: rgba(100, 239, 178, .14); color: #7ef0bb; }
.past-flight-kind.is-departure { background: rgba(255, 199, 97, .14); color: #ffc261; }
.past-flight-kind.is-sighting { background: rgba(126, 166, 184, .14); color: #9ec7d6; }
.past-flight-row.is-sighting .past-flight-callsign { color: #bce7f4; font-weight: 600; }
.past-flight-meta { flex: 0 0 auto; color: #6f93a3; font-size: 9px; text-align: right; white-space: nowrap; }
.past-flight-correction { color: #b8a574; font-size: 9px; line-height: 1.4; }
.past-flight-play {
  padding: 1px 5px; border: 1px solid #1d4a5d; border-radius: 4px; background: #0b1c26;
  color: var(--mint, #64efb2); font: 600 9px/1.4 ui-monospace, monospace; cursor: pointer;
}
.past-flight-play:hover { border-color: #2b6983; color: #d7f4ff; }
.past-flight-play:focus-visible { outline: 2px solid var(--cyan, #67dff5); outline-offset: 1px; }
.past-flight-empty { padding: 4px; color: #7ea6b8; font-size: 10px; }
.past-flight-note { margin: 5px 0 0; color: #5d8496; font-size: 9px; line-height: 1.4; }
.layer-row input { position: absolute; opacity: 0; pointer-events: none; }
.layer-row i {
  width: 32px; height: 17px; border-radius: 10px; background: #183342; position: relative; transition: .2s;
}
.layer-row i::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%; position: absolute; left: 3px; top: 3px;
  background: #7693a1; transition: .2s;
}
.layer-row input:checked + i { background: #165b68; }
.layer-row input:checked + i::after { left: 18px; background: var(--mint); box-shadow: 0 0 7px #64efb288; }
.layer-row:focus-within { outline: 2px solid var(--cyan, #67dff5); outline-offset: 1px; }
.layer-row.is-sub {
  margin-left: 10px;
  min-height: 30px;
  padding: 2px 6px;
  color: #9eb9c6;
  font-size: 10px;
  font-weight: 500;
}
/* Style picker for 실제 지도: a small segmented control inside a sub layer row. The buttons take
   their own line and share it evenly; labels must never wrap, so the type is light and small. */
.layer-style-row { grid-template-columns: 18px 1fr; row-gap: 4px; padding-bottom: 5px; cursor: default; }
.layer-style-row:hover { border-color: transparent; background: none; }
.layer-style-row:focus-within { outline: none; }
.layer-style-row .layer-row-copy { white-space: nowrap; }
.layer-style-options { grid-column: 1 / -1; display: flex; gap: 4px; }
.layer-style-options button {
  flex: 1 1 0; min-width: 0; height: 21px; padding: 0 2px; border: 1px solid #1d4a5d; border-radius: 4px;
  background: #0b1c26; color: #8fb3c2; font: 500 9px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.layer-style-options button:hover { border-color: #2b6983; color: #d7f4ff; }
.layer-style-options button:focus-visible { outline: 1px solid #67dff577; outline-offset: -2px; }
.layer-style-options button[aria-pressed="true"] {
  border-color: var(--cyan, #67dff5); background: #12414f; color: #eafaff;
}
html[data-map-tone="light"] .layer-row:hover { background: var(--map-overlay-field-bg); }
html[data-map-tone="light"] .layer-style-options button { background: var(--map-overlay-field-bg); }
html[data-map-tone="light"] .layer-style-options button[aria-pressed="true"] { background: rgba(18, 65, 79, .72); }
.aircraft-color-mode-row {
  margin-bottom: 2px; padding-bottom: 6px; border-bottom-color: rgba(43, 96, 120, .45); border-radius: 0;
}
.aircraft-color-mode-row:hover { border-bottom-color: rgba(43, 96, 120, .45); }
.aircraft-color-mode-row:focus-within { outline: none; }
.aircraft-color-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid #1d4658; }
.aircraft-color-mode-options button {
  height: 23px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
}
.aircraft-color-mode-options button:hover { border-color: transparent; border-bottom-color: #2b6983; background: rgba(82, 213, 240, .035); }
.aircraft-color-mode-options button[aria-pressed="true"] {
  border-color: transparent; border-bottom-color: var(--cyan, #67dff5); background: linear-gradient(180deg, transparent, rgba(82, 213, 240, .09));
}
.layer-style-row[hidden], .layer-row.is-sub[hidden] { display: none; }
.layer-row.is-sub .layer-row-icon { color: #7fb6c4; font-size: 10px; }
.layer-row.is-sub:has(input:disabled) { opacity: .42; }
.layer-style-row.is-disabled { opacity: .42; cursor: not-allowed; }
.layer-style-row.is-disabled .layer-style-options button { cursor: not-allowed; }
.map-altitude-control { position: relative; display: flex; }
.map-altitude-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; min-height: 28px; width: auto;
  padding: 0 8px 0 9px; border: 1px solid var(--map-overlay-border); border-radius: 5px;
  background: var(--map-overlay-bg); color: #bdeaff; box-shadow: none; backdrop-filter: blur(6px);
  cursor: pointer; text-align: left; box-sizing: border-box;
}
.map-altitude-toggle > span {
  display: inline; color: var(--cyan); font-size: 8px; font-weight: 700; letter-spacing: .1em; white-space: nowrap;
}
.map-altitude-toggle output {
  display: inline; margin-top: 0; color: #d9eef6; font: 600 9px ui-monospace, monospace; white-space: nowrap;
}
.map-altitude-chevron {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 1.5px solid #6f9cac;
  border-bottom: 1.5px solid #6f9cac;
  box-sizing: border-box;
  transform: translateY(-1px) rotate(45deg);
  transition: border-color .14s ease, transform .18s ease;
}
.map-altitude-toggle:hover,
.map-altitude-toggle[aria-expanded="true"] { border-color: #3d7f99; background: var(--map-overlay-bg-strong); }
.map-altitude-toggle:hover .map-altitude-chevron,
.map-altitude-toggle[aria-expanded="true"] .map-altitude-chevron { border-color: #9fd0e2; }
.map-altitude-toggle[aria-expanded="true"] .map-altitude-chevron { transform: translateY(1px) rotate(225deg); }
.map-altitude-popover {
  position: absolute; left: 0; right: auto; top: calc(100% + 8px); bottom: auto; transform: none; width: 230px; padding: 10px;
  border: 1px solid #2b6078; border-radius: 7px; background: var(--map-overlay-bg-strong); box-shadow: 0 12px 32px #000a; backdrop-filter: blur(8px);
}
.map-altitude-popover[hidden] { display: none !important; }
.map-altitude-popover-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.map-altitude-popover-heading strong { color: #d7eef7; font-size: 11px; }
#altitudeClose { width: 30px; height: 30px; border: 0; border-radius: 5px; background: transparent; color: #9fc3d3; font-size: 18px; cursor: pointer; }
#altitudeClose {
  transition: color .14s ease, background .14s ease, box-shadow .14s ease;
}
#altitudeClose:hover {
  color: white;
  background: #123041;
  box-shadow: 0 0 0 2px #3bd4ff18;
}
#altitudeClose:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #3bd4ff28;
}
.map-altitude-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.map-altitude-inputs label { font-size: 9px; color: var(--muted); }
.map-altitude-inputs span { display: block; margin-bottom: 4px; }
.map-altitude-inputs input { width: 100%; }
.map-altitude-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.map-altitude-presets button {
  min-height: 34px; border: 1px solid #28536a; background: #0d2635; padding: 6px 4px; border-radius: 5px;
  color: #9fc3d3; font-size: 9px; line-height: 1.25; cursor: pointer;
}
.map-altitude-presets button:hover { border-color: var(--cyan); color: white; }
.map-tool-stack > button:first-child { border-radius: 4px 4px 0 0; }
.map-tool-stack .layer-control:last-child .layer-menu-trigger { border-bottom: 0; border-radius: 0 0 4px 4px; }
.map-tool-stack > #nearbySkyButton { color: #80e6cf; }
.map-tool-stack > #nearbySkyButton:hover { color: #e2fff7; background: #0d3538; }
.measurement { position: absolute; top: 48px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; background: #19170ddd; color: #ffe08a; border: 1px solid #8a6b29; padding: 6px 7px 6px 12px; border-radius: 6px; font-size: 10px; z-index: 8; }
.measurement[hidden] { display: none; }
.measurement .measurement-value {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 1px 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.measurement .measurement-value:hover,
.measurement .measurement-value[aria-pressed="true"] {
  border-color: #c9a045;
  background: #3a2c1233;
  box-shadow: 0 0 0 2px #ffc65b22;
}
.measurement .measurement-value:focus-visible {
  outline: 2px solid #ffd36b;
  outline-offset: 2px;
}
.measurement .measurement-close {
  width: 23px;
  height: 23px;
  padding: 0;
  border: 1px solid #755d2d;
  border-radius: 4px;
  background: #2a2110;
  color: #ffe08a;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.measurement .measurement-close:hover {
  border-color: #c9a045;
  background: #3a2c12;
  box-shadow: 0 0 0 2px #ffc65b22;
}
.measurement .measurement-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffc65b30;
}
.playback-exit {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  background: color-mix(in srgb, var(--live-action-bg) 87%, transparent); color: var(--live-action-color);
  border: 1px solid var(--live-action-border);
  padding: 7px 11px; border-radius: 6px; font-size: 10px; z-index: 9;
  cursor: pointer; user-select: none;
  letter-spacing: .06em;
  font-weight: 700;
  font-family: inherit;
}
.playback-exit > i { color: #68a98f; font-style: normal; font-size: 9px; }
.playback-exit > strong { color: var(--live-action-color); font-size: 9px; letter-spacing: .04em; }
.playback-exit[hidden] { display: none; }
.playback-exit.is-enter { animation: playback-exit-enter .45s ease-out; }
@keyframes playback-exit-enter {
  0% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.playback-exit:hover { border-color: var(--live-action-border-hover); background: color-mix(in srgb, var(--live-action-bg-hover) 93%, transparent); }
.playback-exit:focus-visible { outline: 2px solid var(--live-action-color); outline-offset: 2px; }
.toast { position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%); background: var(--map-toast-bg); border: 1px solid #3b8aaa; padding: 9px 14px; border-radius: 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, .34); backdrop-filter: blur(9px); font-size: 10px; z-index: 8; }
.transport-bar {
  --transport-border: #9b762e;
  --transport-bg: #111b23f2;
  --transport-button-bg: #211c11;
  --transport-button-border: #755d2d;
  --transport-button-color: #ffd878;
  --transport-accent: #e6b94f;
  --transport-title: #f0d28a;
  --transport-muted: #a99565;
  position: absolute; left: 50%; bottom: var(--replay-clearance, 12px); transform: translateX(-50%); z-index: 9;
  width: min(740px, max(290px, calc(100% - 408px))); min-height: 0; padding: 10px 12px;
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 112px auto 60px;
  grid-template-areas: "play info speed actions exit" "clock clock clock clock clock" "timeline timeline timeline timeline timeline" "range range range range range";
  align-items: center; gap: 6px 9px; overflow: visible;
  background: linear-gradient(110deg, #202018f5, var(--transport-bg) 35%); border: 1px solid var(--transport-border); border-radius: 10px; box-shadow: 0 10px 30px #0009;
  transition: bottom .1s linear;
}
.transport-bar[hidden] { display: none; }
.transport-bar button {
  height: 36px; border: 1px solid var(--transport-button-border); border-radius: 6px;
  background: var(--transport-button-bg); color: var(--transport-button-color); cursor: pointer;
}
.transport-play { grid-area: play; width: 36px; font-size: 17px; }
.transport-info { display: contents; }
.transport-exit-slot { grid-area: exit; min-width: 0; }
.transport-more-toggle { display: none; }
.transport-info-headline { grid-area: info; display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.transport-info small { flex: 0 0 auto; margin-right: 6px; color: var(--transport-accent); font-size: 9px; font-weight: 800; letter-spacing: .035em; }
.transport-info strong { min-width: 0; overflow: hidden; color: var(--transport-title); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.transport-info #transportStatus { grid-area: clock; color: var(--transport-title); font: 600 11px ui-monospace, monospace; font-variant-numeric: tabular-nums; line-height: 1.5; overflow-wrap: anywhere; }
.transport-range { grid-area: range; display: flex; justify-content: space-between; gap: 8px; color: var(--transport-muted); font: 600 10px ui-monospace, monospace; font-variant-numeric: tabular-nums; line-height: 1.5; }
.transport-range span { white-space: nowrap; }
.transport-speed-menu { grid-area: speed; position: relative; min-width: 0; }
.transport-menu-trigger {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 22px 0 9px; white-space: nowrap; overflow: hidden;
}
.transport-menu-trigger::after {
  content: "▾"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--transport-muted); font-size: 9px; line-height: 1; pointer-events: none;
  transition: color .14s ease, transform .14s ease;
}
.transport-menu-trigger:hover::after,
.transport-menu-trigger[aria-expanded="true"]::after { color: var(--transport-accent); }
.transport-menu-trigger[aria-expanded="true"]::after { transform: translateY(-50%) rotate(180deg); }
.transport-menu-trigger:hover,
.transport-menu-trigger[aria-expanded="true"] { border-color: var(--transport-accent); }
.transport-menu-trigger[aria-expanded="true"] { color: #fff; }
.transport-speed-toggle { width: 112px; font: 800 9px ui-monospace, monospace; }
.transport-speed-toggle span { min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.transport-speed-toggle[data-automatic="false"] span { font-size: 12px; letter-spacing: .05em; }
.transport-bar .transport-speed-toggle[data-automatic="true"] {
  border-color: var(--transport-accent); background: #443716; color: #fff;
}
.transport-bar .transport-speed-toggle[data-automatic="true"]::after { color: var(--transport-accent); }
.transport-speed-popover {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 4;
  padding: 10px; border: 1px solid var(--transport-border); border-radius: 8px;
  background: #0b1922fa; box-shadow: 0 14px 34px #000b;
}
.transport-speed-popover { width: 190px; }
.transport-speed-popover[hidden] { display: none; }
.transport-popover-heading { margin-bottom: 8px; padding: 0 2px 8px; border-bottom: 1px solid color-mix(in srgb, var(--transport-border) 50%, transparent); }
.transport-popover-heading strong { display: block; color: var(--transport-title); font-size: 10px; }
.transport-popover-heading small { display: block; margin-top: 3px; color: var(--transport-muted); font-size: 7px; line-height: 1.4; }
.transport-speeds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; align-items: center; }
.transport-speed-option {
  width: auto; height: 31px; padding: 0 5px;
  border: 1px solid var(--transport-button-border); border-radius: 5px;
  background: var(--transport-button-bg); color: var(--transport-button-color);
  font: 700 9px ui-monospace, monospace; white-space: nowrap; cursor: pointer;
}
.transport-speed-option:hover { border-color: var(--transport-accent); }
.transport-speed-option:focus-visible { outline: 2px solid var(--transport-accent); outline-offset: 2px; }
.transport-bar .transport-speed-option[aria-pressed="true"],
.transport-bar .transport-speed-option.active {
  border-color: var(--transport-accent); background: #443716; color: #fff;
}
.transport-auto-option {
  height: 31px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--transport-button-border); border-radius: 5px;
  background: var(--transport-button-bg); color: var(--transport-muted);
  font: 700 9px ui-monospace, monospace; white-space: nowrap; cursor: pointer;
}
.transport-auto-option:hover { border-color: var(--transport-accent); }
.transport-auto-option:focus-visible { outline: 2px solid var(--transport-accent); outline-offset: 2px; }
.transport-auto-option .transport-auto-check { width: 8px; opacity: .25; font-size: 9px; }
.transport-auto-option[aria-pressed="true"] { color: var(--transport-button-color); border-color: var(--transport-accent); }
.transport-auto-option[aria-pressed="true"] .transport-auto-check { opacity: 1; }
.transport-bar .transport-auto-option[aria-pressed="true"] { background: #443716; color: #fff; }
.transport-auto-speed { width: 100%; margin-bottom: 7px; justify-content: flex-start; }
.transport-auto-speed small { margin-left: auto; color: var(--transport-muted); font: 700 7px ui-monospace, monospace; }
.transport-actions { grid-area: actions; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.transport-auto-zoom-inline { width: 144px; justify-content: center; }
.transport-context-traffic-inline { width: 78px; justify-content: center; }
.transport-action { min-width: 0; padding: 0 8px; }
.transport-save { width: 62px; border-color: #7c6531; font: 800 8px ui-monospace, monospace; white-space: nowrap; }
.transport-save:hover, .transport-save:focus-visible { border-color: var(--transport-accent); color: #fff2bd; outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--transport-accent) 18%, transparent); }
.transport-jump {
  width: 62px; padding: 0 22px 0 9px; font-size: 8px;
}
.transport-bar button.transport-exit {
  width: 52px; min-height: 32px; flex: 0 0 52px;
  border-color: var(--live-action-border);
  background: var(--live-action-bg);
  color: var(--live-action-color);
  box-shadow: none;
  font: 800 8px ui-monospace, monospace;
}
.transport-bar button.transport-exit:hover {
  border-color: var(--live-action-border-hover);
  background: var(--live-action-bg-hover);
  color: #b8f5dc;
  box-shadow: 0 0 10px #64efb238;
}
.transport-bar button.transport-exit:focus-visible { outline: 2px solid var(--live-action-color); outline-offset: 2px; }
.transport-bar button.transport-exit:active {
  border-color: var(--mint); background: #174936; color: #d8ffef;
  box-shadow: none;
}
.transport-timeline-wrap { grid-area: timeline; position: relative; width: 100%; min-height: 14px; display: flex; align-items: center; }
.transport-timeline { width: 100%; height: 4px; padding: 0; border: 0; accent-color: var(--transport-accent); }
.transport-gap-markers { position: absolute; left: 0; right: 0; top: 50%; height: 8px; transform: translateY(-50%); pointer-events: none; z-index: 2; overflow: hidden; border-radius: 4px; }
.transport-gap-markers[hidden] { display: none; }
.transport-gap-marker { position: absolute; top: 0; bottom: 0; min-width: 2px; background: #07131a; border-left: 1px solid #ffc261; border-right: 1px solid #ffc261; box-shadow: 0 0 3px #000; }
.transport-gap-marker.major { background: #240d10; border-color: #ff7168; }
.transport-timeline-marker {
  position: absolute; top: 50%; width: 2px; height: 13px; transform: translate(-50%, -50%);
  background: var(--transport-accent); border-radius: 1px; pointer-events: none; z-index: 3;
  box-shadow: 0 0 5px color-mix(in srgb, var(--transport-accent) 70%, transparent);
}
.transport-timeline-marker::before {
  content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--transport-accent);
}
.transport-timeline-marker[hidden] { display: none; }
.transport-jump-popover {
  position: absolute; right: 8px; bottom: calc(100% + 8px); z-index: 3;
  width: min(390px, calc(100vw - 36px)); max-height: min(560px, calc(100vh - 120px)); overflow-y: auto; padding: 12px;
  border: 1px solid var(--transport-border); border-radius: 8px;
  background: #091923f7; box-shadow: 0 14px 34px #000b;
}
.transport-jump-popover[hidden] { display: none; }
.transport-jump-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.transport-jump-heading strong { display: block; color: var(--transport-title); font-size: 11px; }
.transport-jump-heading span { display: block; max-width: 310px; margin-top: 3px; color: var(--transport-muted); font-size: 8px; line-height: 1.45; }
.transport-bar button#transportJumpClose { width: 26px; height: 26px; flex: 0 0 auto; }
.transport-jump-current {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--transport-border) 65%, transparent); border-radius: 6px; background: #211c11;
}
.transport-jump-current span { color: var(--transport-muted); font-size: 8px; }
.transport-jump-current strong { color: #e4f8ff; font: 800 9px ui-monospace, monospace; text-align: right; }
.transport-jump-section-label { display: block; margin-bottom: 6px; color: var(--transport-muted); font-size: 8px; letter-spacing: .04em; }
.transport-jump-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.transport-bar .transport-jump-options button { height: 29px; padding: 0 4px; font: 700 8px ui-monospace, monospace; }
.transport-jump-options button.is-wide { grid-column: span 2; }
.transport-jump-options button.is-current { border-color: var(--transport-accent); background: #443716; color: #fff; }
.transport-jump-bookmark { margin-top: 9px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--transport-border) 55%, transparent); }
.transport-jump-bookmark[hidden] { display: none; }
.transport-jump-bookmark-status { margin: 0 0 6px; color: var(--transport-muted); font-size: 8px; line-height: 1.45; }
.transport-jump-bookmark-status[data-state="set"] { color: #ffc261; }
.transport-jump-bookmark-actions { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 5px; }
.transport-bar .transport-jump-bookmark-actions button { height: 29px; padding: 0 6px; font: 700 8px ui-monospace, monospace; }
.transport-bar .transport-jump-bookmark-actions button[hidden] { display: none; }
.transport-jump-direct { margin-top: 9px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--transport-border) 55%, transparent); }
.transport-jump-direct[hidden] { display: none; }
.transport-jump-direct label { display: block; margin-bottom: 5px; color: var(--transport-muted); font-size: 8px; }
.transport-jump-direct > div { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 5px; }
.transport-jump-direct input {
  min-width: 0; height: 34px; padding: 0 9px; border: 1px solid var(--transport-button-border); border-radius: 5px;
  background: #07151d; color: var(--transport-button-color); color-scheme: dark; font: 9px ui-monospace, monospace;
}
.transport-bar .transport-jump-direct button { height: 34px; font-size: 8px; font-weight: 800; }
.transport-jump-archive-status { margin: 7px 0 0; color: #7fa9b8; font-size: 8px; line-height: 1.4; }
.transport-jump-archive-status[data-state="ready"] { color: #75d9b1; }
.transport-jump-archive-status[data-state="error"] { color: #e8a37d; }
.loading-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #06111add; transition: opacity .3s; z-index: 7; }
.loading-state[hidden] { display: none; }
.loading-state span { width: 48px; height: 48px; border: 1px solid #2a6b83; border-radius: 50%; position: relative; }
.loading-state span::after { content: ""; width: 50%; height: 1px; background: var(--mint); position: absolute; left: 50%; top: 50%; transform-origin: left; animation: sweep 1.5s linear infinite; box-shadow: 0 0 8px var(--mint); }
.loading-state strong { font-size: 12px; }
.loading-state small { color: var(--muted); font-size: 9px; }
@keyframes sweep { to { transform: rotate(360deg); } }

.empty-detail { text-align: center; padding: 55px 13px; color: var(--muted); }
.empty-detail strong { display: block; color: #bcd5df; font-size: 12px; margin: 18px 0 7px; }
.empty-detail p { font-size: 10px; line-height: 1.6; }
.empty-detail.viewport-aircraft-panel { text-align: left; padding: 0; color: inherit; }
.viewport-aircraft-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 9px; margin-bottom: 7px; border-bottom: 1px solid var(--line); }
.viewport-aircraft-explain { min-width: 0; display: grid; gap: 2px; }
.viewport-aircraft-scope { color: var(--muted); font-size: 9px; line-height: 1.4; }
.viewport-aircraft-reason { color: #6f919f; font-size: 8px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#viewportAircraftCount { color: #bdefff; font: 600 14px ui-monospace, monospace; }
.viewport-aircraft-toolbar { min-height: 27px; margin-bottom: 3px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--muted); font-size: 8px; }
.viewport-aircraft-toolbar label { letter-spacing: .08em; }
.viewport-aircraft-toolbar select { width: auto; min-width: 112px; height: 23px; padding: 2px 24px 2px 7px; border-color: #245268; border-radius: 5px; background-color: var(--panel-sort-bg); color: #aac8d3; font-size: 9px; }
.viewport-aircraft-list { list-style: none; margin: 0; padding: 0; display: grid; }
.viewport-live-section[hidden],
.viewport-schedule-section[hidden],
.viewport-aircraft-list[hidden],
.viewport-schedule-list[hidden],
.viewport-aircraft-message[hidden],
.feature-schedule-section[hidden],
.feature-schedule-list[hidden],
.feature-schedule-message[hidden],
.feature-technical-section[hidden] { display: none !important; }
.viewport-aircraft-list li { border-bottom: 1px solid #153141; }
.viewport-aircraft-row { width: 100%; min-height: 48px; border: 0; background: transparent; color: inherit; text-align: left; padding: 8px 10px; cursor: pointer; display: grid; gap: 3px; }
.viewport-aircraft-row:hover { background: var(--panel-card-hover-bg); }
.viewport-aircraft-line-primary,
.viewport-aircraft-line-secondary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.viewport-aircraft-identity,
.viewport-aircraft-altitude { font: 600 11px ui-monospace, monospace; color: #d7eef7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewport-aircraft-altitude { flex: 0 0 auto; }
.viewport-aircraft-trend.is-climb { color: var(--vertical-climb); }
.viewport-aircraft-trend.is-descend { color: var(--vertical-descend); }
.viewport-aircraft-trend.is-level { color: #829eaa; }
.viewport-aircraft-trend.is-ground { color: #8a9aa3; }
.viewport-aircraft-identity { min-width: 0; }
.viewport-aircraft-line-secondary { color: var(--muted); font-size: 9px; }
.viewport-aircraft-route-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; }
.viewport-aircraft-route,
.viewport-aircraft-motion { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewport-aircraft-route { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, monospace; color: #9eb9c6; }
.viewport-aircraft-route.has-route { color: #c2dce7; }
.viewport-aircraft-route.is-loading { color: #6eb8c9; }
.viewport-aircraft-route.is-unknown { color: var(--muted); }
.viewport-aircraft-motion { flex: 0 0 auto; font-family: ui-monospace, monospace; }
.viewport-aircraft-row.delayed .viewport-aircraft-altitude { color: var(--amber); }
.viewport-aircraft-row.ghost .viewport-aircraft-altitude { color: #8a9aa3; }
.viewport-aircraft-badge { display: inline-block; margin-left: 6px; padding: 1px 4px; border-radius: 3px; font: 600 8px ui-monospace, monospace; vertical-align: middle; }
.viewport-aircraft-badge.is-emergency,
.viewport-aircraft-badge.is-collision { background: #3a1518; color: var(--red); border: 1px solid #7a2d34; }
.viewport-aircraft-badge.is-proximity { background: #3d2f13; color: #f0c67a; border: 1px solid #7c6130; }
.viewport-aircraft-badge.is-go-around { background: #12372c; color: #8de0c1; border: 1px solid #2f6f58; }
.viewport-aircraft-limit { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.viewport-aircraft-message { text-align: left; padding: 14px 4px 8px; color: var(--muted); }
.viewport-aircraft-message .target-reticle { margin: 0 auto; }
.viewport-aircraft-message strong { display: block; color: #bcd5df; font-size: 12px; margin: 0 0 7px; }
.viewport-aircraft-message > p { margin: 0 0 12px; font-size: 10px; line-height: 1.55; }
.learn-tip {
  margin: 0 0 10px;
  padding: 0;
  color: #7f9eab;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .01em;
}
.learn-tip[hidden] { display: none !important; }
.learn-guide {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.learn-guide[hidden] { display: none !important; }
.learn-guide li {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #1c4d60;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(14, 75, 91, .18), rgba(6, 22, 31, .88));
}
.learn-guide strong {
  margin: 0;
  color: var(--cyan);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: none;
}
.learn-guide span {
  color: #9eb8c4;
  font-size: 10px;
  line-height: 1.45;
}
.viewport-schedule-section { display: grid; }
.viewport-schedule-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
#viewportScheduleCount { color: #bdefff; font: 600 14px ui-monospace, monospace; }
.viewport-schedule-list { list-style: none; margin: 0; padding: 0; display: grid; }
.viewport-schedule-list li { border-bottom: 1px solid #153141; }
.viewport-schedule-row { width: 100%; min-height: 54px; border: 0; background: transparent; color: inherit; text-align: left; padding: 8px 10px; cursor: pointer; display: grid; gap: 3px; }
.viewport-schedule-row:hover { background: var(--panel-card-hover-bg); }
.viewport-schedule-row.is-returned { box-shadow: inset 2px 0 0 var(--cyan); background: var(--panel-card-hover-bg); }
.viewport-schedule-row.has-live { box-shadow: inset 2px 0 0 #2d6f86; }
.viewport-schedule-row.is-map-preview { background: var(--panel-card-hover-bg); box-shadow: inset 2px 0 0 var(--cyan); }
.viewport-schedule-signal { display: inline-flex; margin-left: 5px; color: #5edcf3; font: 700 7px ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; white-space: nowrap; vertical-align: middle; }
.viewport-schedule-line-primary,
.viewport-schedule-line-secondary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.viewport-schedule-identity { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d7eef7; font: 600 11px ui-monospace, monospace; }
.viewport-schedule-callsign { margin-left: 5px; color: #7697a5; font: 9px ui-monospace, monospace; }
.viewport-schedule-direction { display: inline-block; min-width: 28px; margin-right: 6px; padding: 1px 5px; border: 1px solid; border-radius: 999px; text-align: center; font: 700 8px ui-monospace, monospace; vertical-align: middle; white-space: nowrap; }
.viewport-schedule-direction.departure { color: var(--cyan); border-color: #28708b; background: #0b2a38; }
.viewport-schedule-direction.arrival { color: var(--mint); border-color: #267157; background: #0b2d25; }
.viewport-schedule-direction.inferred { border-style: dashed; opacity: .84; }
/* Direction owns colour; planned keeps that colour and changes only the certainty treatment. */
.viewport-schedule-direction.planned { border-style: dashed; opacity: .82; }
.viewport-schedule-time { color: #e3f7ff; }
.viewport-schedule-status { flex: 0 0 auto; color: var(--muted); font-size: 9px; white-space: nowrap; }
.viewport-schedule-status.is-kinematics {
  color: #d7eef7;
  font: 700 11px/1 ui-monospace, monospace;
}
.viewport-schedule-line-secondary { color: var(--muted); font-size: 9px; }
.viewport-schedule-route { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; color: #c2dce7; }
.viewport-schedule-route.is-airport-scoped {
  display: flex; align-items: baseline; gap: 4px; overflow: hidden; text-overflow: clip; font-family: inherit;
}
.viewport-schedule-route-role { flex: 0 0 auto; color: var(--muted); white-space: nowrap; }
.viewport-schedule-route-code { flex: 0 0 auto; color: #c2dce7; font-family: ui-monospace, monospace; white-space: nowrap; }
.viewport-schedule-route-name {
  min-width: 0; overflow: hidden; color: #c2dce7; text-overflow: ellipsis; white-space: nowrap;
}
.viewport-schedule-route.is-unknown .viewport-schedule-route-name { color: var(--muted); }
.viewport-schedule-meta { flex: 0 0 auto; white-space: nowrap; font-family: ui-monospace, monospace; }
.target-reticle { display: block; margin: auto; width: 54px; height: 54px; border: 1px solid #265a70; border-radius: 50%; position: relative; }
.target-reticle::before, .target-reticle::after { content: ""; position: absolute; background: #265a70; }
.target-reticle::before { width: 70px; height: 1px; left: -8px; top: 26px; }
.target-reticle::after { height: 70px; width: 1px; top: -8px; left: 26px; }
.target-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.state-chip { display: inline-block; background: #123e3b; color: var(--mint); border: 1px solid #276659; padding: 3px 6px; border-radius: 4px; font-size: 8px; }
.state-chip.delayed { background: #3b2e13; color: var(--amber); border-color: #705b27; }
.state-chip.ghost { background: #2b2e31; color: #a8b3b8; border-color: #4a5358; }
.state-chip.replay { background: #3a2f15; color: #ffd878; border-color: #7a6029; }
.state-chip.planned { background: #102c3a; color: var(--cyan); border-color: #28657d; }
.state-chip.planned.arrival { background: #0b2d25; color: var(--mint); border-color: #267157; }
.target-header h3 { font: 600 24px ui-monospace, monospace; margin: 7px 0 2px; color: #e6f8ff; }
.target-header p { color: var(--muted); font-size: 10px; margin: 0; }
.heading-dial { width: 58px; height: 58px; border: 1px solid #255269; border-radius: 50%; position: relative; display: grid; place-items: center; color: #9bc3d4; font: 9px ui-monospace, monospace; }
.heading-dial::before { content: "N"; position: absolute; top: -5px; font-size: 7px; color: var(--cyan); background: var(--panel); padding: 0 2px; }
.heading-dial i { position: absolute; width: 1px; height: 19px; background: var(--mint); left: 28px; top: 7px; transform-origin: 50% 22px; }
.action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.action-row:not(.feature-actions) { grid-template-columns: repeat(2, 1fr); }
#detailContent > .action-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  position: sticky;
  bottom: 0;
  z-index: 3;
  /* Document order is after flight info; sticky keeps actions reachable while scrolling. */
  margin: 8px 0 0;
  padding: 0;
  min-height: 31px;
  border: 1px solid var(--detail-frame, #1b5264);
  border-radius: 7px;
  background: var(--panel-detail-accent-bg);
}
.detail-drag-handle {
  display: none;
}
.detail-action-drag-handle {
  position: absolute;
  left: 50%;
  top: -8px;
  z-index: 4;
  width: 34px;
  height: 12px;
  border: 0;
  border-radius: 999px;
  background: #081b24e6;
  box-shadow: 0 0 0 1px #24556799, 0 4px 12px #020b1080;
  opacity: 0;
  transform: translateX(-50%) translateY(3px) scale(.88);
  transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease;
  cursor: grab;
  touch-action: none;
}
.detail-action-drag-handle::before,
.detail-action-drag-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 14px;
  height: 1px;
  border-radius: 999px;
  background: #83c2d5;
  transform: translateX(-50%);
}
.detail-action-drag-handle::before { top: 4px; }
.detail-action-drag-handle::after { top: 7px; }
.detail-section-collapsible,
.detail-replay-group,
#detailContent > .action-row {
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}
.detail-action-drag-handle:active { cursor: grabbing; }
#detailContent > .action-row:hover > .detail-action-drag-handle,
.detail-action-drag-handle:focus-visible {
  opacity: .92;
  transform: translateX(-50%) translateY(0) scale(1);
}
.detail-action-drag-handle:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .detail-section-collapsible:has(> .detail-section-header:hover) {
    transform: translateY(-1px);
    border-color: #31809a;
    box-shadow: 0 6px 14px #020a0f66, inset 0 0 16px #37bce90a;
  }
  .detail-replay-group:has(.detail-section-header:hover) {
    transform: translateY(-1px);
  }
  .detail-replay-group:has(.detail-section-header:hover) > .aircraft-situation {
    border-color: #31809a;
    box-shadow: 0 6px 14px #020a0f66, inset 0 0 16px #37bce90a;
  }
  #detailContent > .action-row:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 6px 10px #020a0f66);
  }
}
@media (hover: none), (pointer: coarse) {
  .detail-action-drag-handle { opacity: .62; transform: translateX(-50%) scale(1); }
}
#detailContent > .action-row button {
  min-width: 0;
  min-height: 31px;
  padding: 6px 2px;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.action-row button.action-primary { border-color: #2f7087; background: #0e3040; color: #c6f2ff; font-weight: 700; }
.action-row button.action-secondary { border-color: #233f4d; background: var(--panel-card-bg); color: #7899a8; }
/* Active = "running now": soft breathe (not a static tint). Accent swaps for tool buttons. */
.action-row button.active {
  --action-active-accent: var(--mint);
  position: relative;
  border-color: var(--action-active-accent);
  color: var(--action-active-accent);
  background: #0c302c;
  animation: action-active-breathe 2.4s ease-in-out infinite;
}
#watchAircraftButton.active {
  border-color: var(--mint);
  color: var(--mint);
  background: #0c302c;
}
#measureButton.active,
#historyButton.active {
  --action-active-accent: var(--amber);
  border-color: var(--amber);
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, #0d2635);
}
@keyframes action-active-breathe {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--action-active-accent) 18%, transparent),
      0 0 0 1px color-mix(in srgb, var(--action-active-accent) 28%, transparent),
      0 0 12px color-mix(in srgb, var(--action-active-accent) 10%, transparent);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--action-active-accent) 42%, transparent),
      0 0 0 1px color-mix(in srgb, var(--action-active-accent) 62%, transparent),
      0 0 18px color-mix(in srgb, var(--action-active-accent) 26%, transparent);
  }
}
/* Purpose-aware hover: track=cyan, alert=cyan-soft, tools=lift, active keeps mint/amber */
@media (hover: hover) and (pointer: fine) {
  .action-row button.action-primary:hover:not(:disabled):not(.active) {
    border-color: #5bd7f4;
    background: #134556;
    color: #effcff;
    box-shadow: 0 0 0 2px #3bd4ff22, 0 0 14px #35cdeb14;
  }
  #followButton:hover:not(:disabled):not(.active) {
    border-color: #5bd7f4;
    color: #effcff;
  }
  #watchAircraftButton:hover:not(:disabled):not(.active) {
    border-color: #4ec8e4;
    background: #123848;
    color: #e7fbff;
    box-shadow: 0 0 0 2px #3bd4ff1c;
  }
  .action-row button.action-secondary:hover:not(:disabled):not(.active) {
    border-color: #3a7a94;
    background: #0d2634;
    color: #d5eef7;
    box-shadow: 0 0 0 2px #2b698318;
  }
  #historyButton:hover:not(:disabled):not(.active),
  #measureButton:hover:not(:disabled):not(.active) {
    border-color: #3f8fb0;
    color: #e4f6fd;
  }
  .action-row button.active:hover:not(:disabled) {
    border-color: #8ff5c8;
    color: #d9fff0;
    background: #0f3a34;
    /* Keep breathe animation — do not freeze a static hover shadow. */
  }
  #measureButton.active:hover:not(:disabled),
  #historyButton.active:hover:not(:disabled) {
    border-color: #ffe08a;
    color: #fff1cf;
    background: color-mix(in srgb, var(--amber) 18%, #0d2635);
  }
  .action-row button:active:not(:disabled) {
    transform: translateY(1px);
  }
}
.action-row button:focus-visible:not(:disabled) {
  outline: none;
  box-shadow: 0 0 0 2px #3bd4ff30;
}
.action-row button:disabled { opacity: .42; cursor: not-allowed; border-color: #27414e; color: #68818c; }
.action-row button:disabled:hover { box-shadow: none; transform: none; }
/* 상세 도구는 하나의 막대로 묶고, 실행 상태만 기존 민트·앰버 색으로 구분한다. */
#detailContent > .action-row button {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 29px; padding: 4px 3px; border: 0; border-radius: 0;
  background: transparent; color: #acc9d5; font: 600 9px/1.2 var(--font-sans, sans-serif);
  animation: none; box-shadow: none; transform: none;
}
#detailContent > .action-row button:first-of-type { border-radius: 6px 0 0 6px; }
#detailContent > .action-row button:last-of-type { border-radius: 0 6px 6px 0; }
#detailContent > .action-row button + button { border-left: 1px solid var(--detail-divider, #173f4e); }
.detail-action-icon { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.detail-action-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#detailContent > .action-row button.active {
  color: var(--action-active-accent, var(--mint));
  background: color-mix(in srgb, var(--action-active-accent, var(--mint)) 12%, var(--panel-detail-accent-bg));
  box-shadow: inset 0 -2px var(--action-active-accent, var(--mint));
}
#detailContent > .action-row button:disabled { color: var(--muted); opacity: .42; }
#detailContent > .action-row button:focus-visible {
  outline: 1px solid var(--cyan); outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
  #detailContent > .action-row:hover { transform: none; filter: none; }
  #detailContent > .action-row button:hover:not(:disabled) {
    color: #e4f6fd; background: #12303d;
  }
  #detailContent > .action-row button.active:hover:not(:disabled) {
    color: var(--action-active-accent, var(--mint));
    background: color-mix(in srgb, var(--action-active-accent, var(--mint)) 18%, var(--panel-detail-accent-bg));
  }
}
.feature-metrics dd { font-size: 9px; white-space: nowrap; letter-spacing: -.02em; }
.aircraft-photo {
  --photo-scrim-strong: rgba(3,16,25,.72);
  --photo-scrim-mid: rgba(4,19,26,.38);
  position: relative; margin: 0 0 9px; overflow: hidden; border: 1px solid var(--detail-photo-frame, #1c4d60); border-radius: 8px; background: #071923;
}
.aircraft-photo[hidden] { display: none; }
#aircraftPhoto { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.detail-layout-reset {
  display: none; width: 30px; height: 30px; padding: 0; place-items: center;
  border: 1px solid #284b59; border-radius: 6px; background: #081b25; color: #91aab4;
  font: 500 18px/1 var(--font-sans, sans-serif); cursor: pointer; touch-action: manipulation;
}
#detailPanel:has(#detailContent:not([hidden])) .detail-layout-reset { display: inline-grid; }
.detail-layout-reset:hover { border-color: #43829a; color: #d3eff8; }
.detail-layout-reset:focus-visible,
.aircraft-photo-toggle:focus-visible { outline: 2px solid var(--detail-accent, var(--cyan)); outline-offset: 1px; }
.photo-mode #detailContent > .target-header { display: none !important; }
.aircraft-photo > .aircraft-photo-media { position: relative; display: block; width: 100%; height: 145px; min-height: 138px; max-height: 145px; overflow: hidden; background: linear-gradient(110deg, #091d28 25%, #103041 45%, #091d28 65%); background-size: 240% 100%; }
.aircraft-photo-toggle {
  position: absolute; inset: 0 0 auto; z-index: 6; display: flex; align-items: flex-start; justify-content: flex-end;
  box-sizing: border-box; width: 100%; height: 145px; min-height: 138px; padding: 10px 14px 0 0;
  border: 0; border-radius: 0; background: transparent; color: #d8edf3;
  cursor: pointer; touch-action: manipulation; opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s, color .15s;
}
.aircraft-photo-toggle:hover { color: var(--cyan); }
.aircraft-photo:hover > .aircraft-photo-toggle,
.aircraft-photo:has(:focus-visible) > .aircraft-photo-toggle,
.aircraft-photo.is-collapsed > .aircraft-photo-toggle { opacity: 1; transform: translateY(0); pointer-events: auto; }
.aircraft-photo-toggle-label { display: none; }
.aircraft-photo-summary { display: none; }
.aircraft-photo-toggle::before {
  content: ""; position: absolute; top: 8px; left: 50%; width: 16px; height: 4px;
  border-top: 1px solid #83c2d5; border-bottom: 1px solid #83c2d5; border-radius: 999px;
  opacity: 0; transform: translate(-50%, -4px) scaleX(.75);
  transition: opacity .16s ease, transform .16s ease; pointer-events: none;
}
.aircraft-photo:hover > .aircraft-photo-toggle::before,
.aircraft-photo:has(:focus-visible) > .aircraft-photo-toggle::before {
  opacity: .72; transform: translate(-50%, 0) scaleX(1);
}
.aircraft-photo:hover > .aircraft-photo-toggle .detail-section-chevron,
.aircraft-photo:has(:focus-visible) > .aircraft-photo-toggle .detail-section-chevron { opacity: 1; }
.aircraft-photo.is-collapsed { min-height: 0; padding: 0 10px; background: var(--panel-detail-accent-bg); }
.aircraft-photo.is-collapsed > .detail-photo-identity,
.aircraft-photo.is-collapsed > figcaption,
.aircraft-photo.is-collapsed > .photo-manage-overlay { display: none; }
.aircraft-photo.is-collapsed > .aircraft-photo-toggle {
  position: relative; inset: auto; z-index: 4; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; height: 34px; min-height: 34px;
  padding: 2px 0; border: 0; border-radius: 0; background: transparent; color: var(--detail-accent, var(--cyan));
  text-shadow: 0 1px 4px #02090f;
  opacity: 1; transform: none; pointer-events: auto;
}
.aircraft-photo.is-collapsed > .aircraft-photo-media {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none;
  border-radius: 0; pointer-events: none;
}
.aircraft-photo.is-collapsed > .aircraft-photo-media::after,
.aircraft-photo.is-collapsed > .aircraft-photo-media > :not(img),
.aircraft-photo.is-collapsed.no-photo > .aircraft-photo-media { display: none; }
.aircraft-photo.is-collapsed .aircraft-photo-summary { display: block; color: #d4e7ef; font-weight: 600; }
.aircraft-photo.is-collapsed > .aircraft-photo-toggle::before { top: 2px; }
.aircraft-photo.is-collapsed > .aircraft-photo-toggle .aircraft-photo-toggle-label { display: block; font: 700 11px/1.2 var(--font-sans, sans-serif); }
.aircraft-photo.is-collapsed > .aircraft-photo-toggle .detail-section-chevron { transform: translateY(-2px) rotate(45deg); }
.aircraft-photo > .aircraft-photo-media::before,
.aircraft-photo > .aircraft-photo-media::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; pointer-events: none; opacity: 0; transition: opacity .18s ease;
}
.aircraft-photo > .aircraft-photo-media::before {
  bottom: 0; height: 54%;
  background: linear-gradient(0deg, var(--photo-scrim-strong) 0%, var(--photo-scrim-mid) 48%, transparent 100%);
}
#aircraftPhoto > .aircraft-photo-media::before {
  top: 0; bottom: auto; height: 46%;
  background: linear-gradient(180deg, var(--photo-scrim-strong) 0%, var(--photo-scrim-mid) 48%, transparent 100%);
}
#aircraftPhoto.is-collapsed > .aircraft-photo-media::before {
  inset: 0; height: 100%; opacity: 1;
  background: linear-gradient(90deg, #061720f0 0%, #061720bf 30%, #06172060 62%, #061720b8 100%);
}
.aircraft-photo.is-collapsed img { opacity: .8; }
.aircraft-photo > .aircraft-photo-media::after {
  top: auto; bottom: 0; height: 38%;
  background: linear-gradient(0deg, var(--photo-scrim-strong) 0%, var(--photo-scrim-mid) 52%, transparent 100%);
}
.aircraft-photo.has-identity-scrim > .aircraft-photo-media::before { opacity: 1; }
.aircraft-photo.has-operator-scrim > .aircraft-photo-media::after { opacity: 1; }
.aircraft-photo.loading > .aircraft-photo-media { animation: photo-loading 1.4s ease-in-out infinite; }
.aircraft-photo img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 45%; }
.aircraft-photo.loading img { visibility: hidden; }
.aircraft-photo-overlay.detail-photo-identity {
  position: absolute; inset: auto auto 36px 0; z-index: 3; display: block; box-sizing: border-box;
  width: auto; max-width: calc(100% - 106px); padding: 0 12px;
  color: white; pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.92), 0 0 14px rgba(0,0,0,.4);
}
#aircraftPhoto .aircraft-photo-overlay.detail-photo-identity { inset: 8px auto auto 0; max-width: calc(100% - 142px); }
.aircraft-photo-overlay.detail-photo-identity[hidden] { display: none; }
.aircraft-photo-overlay > div { min-width: 0; max-width: 100%; }
.aircraft-photo-overlay > div[data-full-label] { position: relative; pointer-events: auto; }
.aircraft-photo-overlay > div[data-full-label]::after, .aircraft-photo-operator[data-full-label]::after { content: attr(data-full-label); position: absolute; z-index: 4; width: max-content; max-width: min(250px, 76vw); padding: 5px 7px; overflow: hidden; border: 1px solid #28657d; border-radius: 4px; background: #071923f2; box-shadow: 0 5px 16px #0009; color: #e9faff; font: 650 10px/1.3 var(--font-sans, sans-serif); text-align: left; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translateY(-2px); transition: opacity .14s, transform .14s; pointer-events: none; }
.aircraft-photo-overlay > div[data-full-label]::after { top: calc(100% + 6px); left: 0; }
.aircraft-photo-overlay > div[data-full-label]:hover::after { opacity: 1; transform: translateY(0); }
.aircraft-photo-overlay strong { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f1fbff; font: 750 15px/1.2 var(--font-sans, sans-serif); }
.aircraft-photo-overlay span { display: block; margin-top: 3px; overflow: hidden; color: #b3d3df; font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.aircraft-photo-overlay span[hidden] { display: none; }
.aircraft-photo > .aircraft-photo-media .aircraft-photo-state { position: absolute; z-index: 3; bottom: 10px; left: 9px; display: inline-block; width: fit-content; max-width: 42%; margin: 0; padding: 2px 5px; overflow: hidden; border: 1px solid #80682f; border-radius: 3px; background: #352d16e8; box-shadow: 0 2px 8px #0008; color: #ffd878; font-size: 7px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.aircraft-photo > .aircraft-photo-media .aircraft-photo-state[hidden] { display: none; }
.aircraft-photo-operator {
  position: absolute; z-index: 3; top: auto; right: 12px; bottom: 10px; box-sizing: border-box; max-width: 48%; padding: 0;
  overflow: hidden; color: white; text-align: right;
  text-shadow: 0 1px 3px rgba(0,0,0,.92), 0 0 14px rgba(0,0,0,.4);
}
.aircraft-photo-operator[hidden] { display: none; }
.aircraft-photo-operator strong { display: block; overflow: hidden; color: #f1fbff; font: 750 13px/1.25 var(--font-sans, sans-serif); text-overflow: ellipsis; white-space: nowrap; }
.aircraft-photo-operator[data-full-label] { pointer-events: auto; }
.aircraft-photo-operator[data-full-label]::after { top: auto; right: 0; bottom: calc(100% + 6px); text-align: right; }
.aircraft-photo-operator[data-full-label]:hover::after { opacity: 1; transform: translateY(0); }
.aircraft-photo figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 24px; padding: 5px 9px; background: var(--panel-photo-caption-bg); color: var(--muted); font-size: 8px; }
.aircraft-photo figcaption span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aircraft-photo figcaption a { color: var(--detail-accent, var(--cyan)); text-decoration: none; white-space: nowrap; }
.facility-photo { margin-top: 0; }
.facility-photo img { object-position: center; }
.photo-manage-overlay { position: absolute; z-index: 7; top: 7px; left: 7px; display: flex; gap: 5px; opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .15s, transform .15s; }
#aircraftPhoto > .photo-manage-overlay { right: 35px; left: auto; }
.facility-photo .photo-manage-overlay { right: 7px; left: auto; }
.aircraft-photo:hover .photo-manage-overlay, .aircraft-photo:has(:focus-visible) .photo-manage-overlay, .aircraft-photo.no-photo .photo-manage-overlay { opacity: 1; transform: translateY(0); pointer-events: auto; }
.photo-manage-overlay button { min-height: 24px; padding: 4px 7px; border: 1px solid #3b687b; border-radius: 4px; background: #06151ee8; box-shadow: 0 3px 12px #000a; color: #c4e2ec; font-size: 7px; backdrop-filter: blur(7px); }
.photo-manage-overlay button:hover, .photo-manage-overlay button:focus-visible { border-color: var(--cyan); color: white; background: #0b2935f2; }
.photo-manage-overlay button:last-child { color: #ffd778; border-color: #78652f; }
.photo-manage-overlay button[hidden] { display: none; }
.aircraft-photo.no-photo > .aircraft-photo-media {
  min-height: 138px; max-height: 145px; cursor: default;
  background: linear-gradient(145deg, #0a1f2c 0%, #123748 46%, #071721 100%);
}
.aircraft-photo.no-photo img { display: none; }
.aircraft-photo.no-photo figcaption a { display: none; }
@media (hover: none) {
  .photo-manage-overlay { opacity: 1; transform: none; pointer-events: auto; }
  .aircraft-photo:not(.is-collapsed) > .aircraft-photo-toggle { opacity: 1; transform: none; pointer-events: auto; }
}
@media (hover: hover) and (pointer: fine) {
  #aircraftPhoto:not(.is-collapsed):hover {
    transform: translateY(-1px); border-color: #31809a;
    box-shadow: 0 6px 14px #020a0f66, inset 0 0 16px #37bce90a;
  }
}
@keyframes photo-loading { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 10px; background: var(--line); border: 1px solid var(--line); }
/* Only the metric cells — not nested divs like .journey-time-row. */
.metrics > div {
  position: relative;
  background: var(--panel-card-bg);
  padding: 10px;
  transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
.metrics > div[data-app-tooltip] { cursor: help; }
.metrics dt { font-size: 8px; color: var(--muted); transition: color .15s ease; }
.metrics dd { margin: 4px 0 0; font: 600 12px ui-monospace, monospace; color: #dff7ff; transition: color .15s ease; }
@media (hover: hover) and (pointer: fine) {
  .metrics > div[data-app-tooltip]:hover {
    background: #0e2a38;
    box-shadow: inset 0 0 0 1px #3bd4ff33, 0 0 0 1px #3bd4ff14;
    z-index: 1;
  }
  .metrics > div[data-app-tooltip]:hover dt { color: #9ec4d2; }
  .metrics > div[data-app-tooltip]:hover dd { color: #effcff; }
}
.aircraft-situation {
  display: grid;
  gap: 0;
  margin: 0 0 9px;
  padding: 9px 10px;
  border: 1px solid var(--detail-frame, #286276);
  border-radius: 7px;
  background:
    radial-gradient(
      ellipse 125% 85% at 0 0,
      color-mix(in srgb, var(--detail-accent, var(--cyan)) 10%, transparent) 0%,
      transparent 58%
    ),
    var(--panel-detail-accent-bg);
}
.aircraft-situation-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  min-width: 0;
  line-height: 1;
}
.aircraft-situation-label > span:first-child {
  color: var(--detail-accent, var(--cyan));
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 700;
}
.aircraft-situation-warn {
  color: #ffcf70;
  font-style: normal;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.aircraft-situation-warn[hidden] { display: none !important; }
.aircraft-situation-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px;
  padding: 6px 0 9px;
}
/* 재생 중에만 설명 한 줄 공간을 유지한다. LIVE는 설명이 없으면 여백을 줄인다. */
.aircraft-situation.is-replay .aircraft-situation-copy {
  grid-template-rows: auto 12px;
}
.aircraft-situation-copy > strong {
  min-width: 0;
  color: #f4fcff;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aircraft-situation-copy > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #8fb1bf;
  font-size: 9px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}
/* Match map-card weather tones (shared wind-/precip- impact classes). */
.aircraft-situation-copy > p.wind-help,
.aircraft-situation-copy > p .wind-help { color: #7fe0a6; }
.aircraft-situation-copy > p.wind-warn,
.aircraft-situation-copy > p .wind-warn { color: #ffcf70; }
.aircraft-situation-copy > p.wind-alert,
.aircraft-situation-copy > p .wind-alert { color: #ff8b7a; }
.aircraft-situation-copy > p.wind-neutral,
.aircraft-situation-copy > p .wind-neutral { color: #9bb8c6; }
.aircraft-situation-copy > p[hidden] { display: none !important; }
.aircraft-situation-copy > p[data-app-tooltip=""] { cursor: default; }
/* Position quality shares the headline row, one line below the section label. */
.aircraft-situation-quality {
  grid-column: 2;
  grid-row: 1;
  margin-left: 7px;
  flex: 0 0 auto;
}
.aircraft-situation-quality[hidden] { display: none !important; }
.aircraft-situation-metrics,
.live-flight-info .live-journey-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  grid-auto-rows: minmax(47px, auto);
  align-items: stretch;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--line);
}
.aircraft-situation-metrics > div,
.live-flight-info .live-journey-metrics > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 47px;
  padding: 8px 8px 7px;
  background: var(--panel-metric-bg);
}
.aircraft-situation-metrics dt,
.live-flight-info .live-journey-metrics dt {
  position: absolute;
  top: 5px;
  left: 7px;
  z-index: 1;
  margin: 0;
  padding: 0;
  color: #7fa0ae;
  font: 600 8px/1 Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  letter-spacing: .08em;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
}
.metrics.aircraft-situation-metrics dd,
.live-flight-info .live-journey-metrics dd {
  min-width: 0;
  min-height: 0;
  margin: 0;
  color: #f0f8fc;
  font: 600 12px/1.2 Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  text-align: center;
}
.aircraft-situation-metrics dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aircraft-situation-metrics dd.is-climb { color: var(--vertical-climb); }
.aircraft-situation-metrics dd.is-descend { color: var(--vertical-descend); }
.aircraft-situation-metrics dd.is-level { color: #b9d1da; }
.aircraft-situation-footer {
  min-width: 0;
  min-height: 22px;
  padding: 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.aircraft-situation-footer > p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #e4f1f5;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aircraft-situation-footer > p.wind-help,
.aircraft-situation-footer > p .wind-help { color: #7fe0a6; }
.aircraft-situation-footer > p.wind-warn,
.aircraft-situation-footer > p .wind-warn { color: #ffcf70; }
.aircraft-situation-footer > p.wind-alert,
.aircraft-situation-footer > p .wind-alert { color: #ff8b7a; }
.aircraft-situation-footer > p.wind-neutral,
.aircraft-situation-footer > p .wind-neutral { color: #bcd7e4; }
.aircraft-situation-footer > span {
  flex: 0 0 auto;
  color: #718e9a;
  font-family: inherit;
  font-size: 8px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

/*
 * ADS-B position quality: target glyph + 0–4 accuracy bars + independent freshness dot.
 * It intentionally avoids an antenna icon: the value is not RF/RSSI signal strength.
 */
.position-quality-indicator {
  --pq-color: #8aa6b2;
  --pq-freshness: #8297a0;
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  min-width: 34px;
  min-height: 14px;
  padding: 2px 3px;
  border: 1px solid transparent;
  border-radius: 5px;
  box-sizing: border-box;
  color: var(--pq-color);
  cursor: help;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, filter .14s ease;
}
.position-quality-indicator.is-precise { --pq-color: #72e4bd; }
.position-quality-indicator.is-good { --pq-color: #73d9f0; }
.position-quality-indicator.is-fair { --pq-color: #ffc867; }
.position-quality-indicator.is-poor { --pq-color: #ff8b7a; }
.position-quality-indicator.is-unknown { --pq-color: #8197a1; }
.position-quality-indicator.is-unrecorded { --pq-color: #7894a0; }
.position-quality-indicator.freshness-fresh { --pq-freshness: #72e4bd; }
.position-quality-indicator.freshness-delayed { --pq-freshness: #ffc867; }
.position-quality-indicator.freshness-ghost { --pq-freshness: #9aa9af; }
.position-quality-indicator.freshness-expired { --pq-freshness: #ff746f; }
.position-quality-indicator.freshness-replay { --pq-freshness: #73d9f0; }
.position-quality-target {
  position: relative;
  align-self: center;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
  opacity: .92;
}
.position-quality-target::before,
.position-quality-target::after {
  content: '';
  position: absolute;
  background: currentColor;
  opacity: .92;
}
.position-quality-target::before { left: 3px; top: -3px; width: 1px; height: 12px; }
.position-quality-target::after { left: -3px; top: 3px; width: 12px; height: 1px; }
.position-quality-bars {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 11px;
}
.position-quality-bars > i {
  display: block;
  width: 3px;
  border: 1px solid currentColor;
  border-radius: 1px 1px 0 0;
  box-sizing: border-box;
  opacity: .28;
}
.position-quality-bars > i:nth-child(1) { height: 4px; }
.position-quality-bars > i:nth-child(2) { height: 6px; }
.position-quality-bars > i:nth-child(3) { height: 8px; }
.position-quality-bars > i:nth-child(4) { height: 11px; }
.position-quality-bars > i.is-filled { background: currentColor; opacity: 1; }
.position-quality-bars.has-unrecorded-mark > i { opacity: .14; }
.position-quality-unrecorded-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  color: #b7ccd5;
  font: 800 9px/1 ui-monospace, monospace;
  text-shadow: 0 1px 2px #071923, 0 0 3px #071923;
}
.position-quality-freshness {
  align-self: flex-start;
  width: 4px;
  height: 4px;
  margin: 1px 0 0 -1px;
  border-radius: 50%;
  background: var(--pq-freshness);
  box-shadow: 0 0 0 1px #071923;
}
.position-quality-indicator:focus-visible {
  outline: none;
  background: #ffffff0d;
  border-color: color-mix(in srgb, currentColor 48%, transparent);
  box-shadow: 0 0 0 2px #3bd4ff20;
}
@media (hover: hover) and (pointer: fine) {
  .position-quality-indicator:hover {
    background: #ffffff0a;
    border-color: color-mix(in srgb, currentColor 35%, transparent);
    filter: brightness(1.15);
  }
}
.aircraft-situation-altitude {
  color: #e5f6fc;
  font-weight: 700 !important;
  white-space: nowrap;
  cursor: help;
}
.aircraft-situation-altitude:has(.is-ground) { color: #8a9aa3; }
.aircraft-situation-speed {
  color: #e5f6fc;
  white-space: nowrap;
  cursor: help;
}
.aircraft-situation-altitude[data-app-tooltip=""],
.aircraft-situation-speed[data-app-tooltip=""],
.aircraft-situation-vertical-rate[data-app-tooltip=""],
.aircraft-situation-track[data-app-tooltip=""] { cursor: default; }
.aircraft-situation.is-position-poor {
  border-color: #6e5a2a;
}
/* Ground: whole card slate (border/fill/label) — not the cyan cruise palette. */
.aircraft-situation.is-ground {
  border-color: #4d5963;
}
.aircraft-situation.is-ground .aircraft-situation-label > span:first-child { color: #9aa8b0; }
.aircraft-situation.is-ground .aircraft-situation-copy > p { color: #7f8d96; }
.aircraft-situation.is-ground.is-position-poor { border-color: #6a6250; }
.aircraft-situation.is-alert { border-color: #9c4747; }
.aircraft-situation.is-alert .aircraft-situation-label > span:first-child { color: #ff8585; }
.aircraft-situation.is-replay { border-color: #796029; }
.detail-section { border-top: 1px solid var(--line); padding: 12px 0; }
.detail-section h4 { font-size: 11px; color: var(--detail-accent, var(--cyan)); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 9px; }
.detail-section-collapsible > .detail-section-header { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; cursor: grab; user-select: none; touch-action: none; transition: background .16s ease, box-shadow .16s ease; }
.detail-section-collapsible > .detail-section-header:active { cursor: grabbing; }
.detail-section-collapsible > .detail-section-header::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 16px;
  height: 4px;
  border-top: 1px solid #83c2d5;
  border-bottom: 1px solid #83c2d5;
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -4px) scaleX(.75);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .detail-section-collapsible > .detail-section-header:hover {
    background: linear-gradient(90deg, #37bce90c, transparent 38%, transparent 62%, #37bce908);
  }
  .detail-section-collapsible > .detail-section-header:hover::before,
  .detail-section-collapsible > .detail-section-header:focus-visible::before {
    opacity: .72;
    transform: translate(-50%, 0) scaleX(1);
  }
}
.detail-section-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7896a3; font: 500 9px ui-monospace, monospace; letter-spacing: 0; text-align: right; text-transform: none; }
.aircraft-situation-summary,
.live-flight-summary { display: none; }
.aircraft-situation.is-collapsed .aircraft-situation-summary,
.live-flight-info.is-collapsed .live-flight-summary { display: block; grid-column: 2; font-size: 9px; font-variant-numeric: tabular-nums; }
.live-flight-info.is-collapsed .live-flight-summary { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.live-flight-info .live-flight-summary span { color: inherit; font: inherit; letter-spacing: 0; word-break: normal; }
.compact-route-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 3px; min-width: 0; }
.compact-route-endpoint { display: flex; align-items: baseline; min-width: 0; }
.compact-route-endpoint b { flex: none; font: inherit; }
.compact-route-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.compact-route-qualification { flex: none; }
.aircraft-situation.is-collapsed .aircraft-situation-warn,
.live-flight-info.is-collapsed #liveFlightNumber,
.live-flight-info.is-collapsed #liveFlightSource { display: none; }
.aircraft-situation.is-collapsed .aircraft-situation-summary {
  display: block; min-width: 0; color: #acc9d5;
  font: 500 10px/1.2 var(--font-sans, sans-serif); text-align: right;
}
.detail-section-collapsible.is-collapsed .detail-section-summary { color: #9dbac7; }
.live-flight-info.is-collapsed .live-flight-summary { font-family: var(--font-sans, sans-serif); }
.detail-section-header:focus-visible { outline: 1px solid var(--detail-accent, var(--cyan)); outline-offset: 3px; border-radius: 3px; }
.detail-section-chevron { flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--detail-accent, var(--cyan)); border-bottom: 1.5px solid var(--detail-accent, var(--cyan)); transform: translateY(1px) rotate(-135deg); transition: transform .18s ease, opacity .15s ease; }
@media (hover: hover) and (pointer: fine) {
  .detail-section-chevron { opacity: 0; }
  .detail-section-header:hover .detail-section-chevron,
  .detail-section-header:focus-visible .detail-section-chevron { opacity: 1; }
}
.detail-section-collapsible.is-collapsed > .detail-section-header { margin-bottom: 0; }
.detail-section-collapsible.is-collapsed .detail-section-chevron { transform: translateY(-2px) rotate(45deg); }
.detail-section-collapsible.is-collapsed .detail-section-chevron,
.aircraft-photo.is-collapsed .detail-section-chevron { opacity: .4; }
.detail-section-collapsible.is-collapsed > .detail-section-header:hover .detail-section-chevron,
.aircraft-photo.is-collapsed > .aircraft-photo-toggle:hover .detail-section-chevron { opacity: 1; }
.detail-section-collapsible.is-collapsed .detail-section-body { display: none; }
/* 실시간 상태와 운항 경로는 본문 래퍼가 없는 카드이므로, 접으면 제목과 한 줄 요약만 남긴다. 두 카드를 접으면
   기체를 고른 뒤 스크롤 없이 과거 이력까지 닿는다. 기본값은 지금처럼 펼침이다. */
.aircraft-situation.detail-section-collapsible > .detail-section-header,
.live-flight-info.detail-section-collapsible > .detail-section-header { cursor: grab; user-select: none; }
/* `위치 부정확`은 평소 hidden이라 그리드 항목에서 빠진다. 그러면 chevron이 가운데 열로 올라와 제목 바로
   옆에 붙으므로, 다른 섹션과 같이 항상 마지막 열 우측 끝에 고정한다. */
.aircraft-situation.detail-section-collapsible > .detail-section-header > .detail-section-chevron,
.live-flight-info.detail-section-collapsible > .detail-section-header > .detail-section-chevron {
  grid-column: -2 / -1; justify-self: end;
}
.aircraft-situation.is-collapsed > *:not(.aircraft-situation-label),
.live-flight-info.is-collapsed > *:not(.detail-section-header) { display: none; }
.aircraft-situation.is-collapsed,
.live-flight-info.is-collapsed { min-height: 30px; padding: 0 10px; gap: 0; }
.aircraft-situation.is-collapsed > .detail-section-header,
.live-flight-info.is-collapsed > .detail-section-header { min-height: 28px; }
.aircraft-situation.is-collapsed > .detail-section-header { gap: 8px; }
.live-flight-info.detail-section-collapsible > .detail-section-header { align-items: center; }
#detailContent > [data-detail-layout-item] { margin-top: 8px; }
#detailContent > .detail-replay-group > .aircraft-situation { margin: 0; }
.detail-section div > p { display: flex; justify-content: space-between; margin: 5px 0; font-size: 9px; color: var(--muted); }
.detail-section p strong { color: #bdd3dc; font-weight: 500; font-family: ui-monospace, monospace; }
#detailContent > .detail-section-collapsible {
  margin-top: 8px;
  padding: 0 10px;
  border: 1px solid var(--detail-frame, #1b5264);
  border-radius: 7px;
  background: var(--panel-detail-accent-bg);
}
#detailContent > .detail-section-collapsible > .detail-section-header {
  min-height: 39px;
  margin: 0;
}
#detailContent > .detail-section-collapsible > .detail-section-body {
  padding: 2px 0 6px;
  border-top: 1px solid var(--detail-divider, #173f4e);
}
#identityRows,
#qualityRows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
}
#detailContent > .detail-section-collapsible.is-collapsed > .detail-section-body { display: none; }
#detailContent > .detail-section-collapsible.is-collapsed {
  min-height: 30px;
  padding-block: 0;
}
#detailContent > .detail-section-collapsible.is-collapsed > .detail-section-header { min-height: 28px; }
.detail-layout-placeholder {
  box-sizing: border-box;
  min-height: 28px;
  margin-top: 8px;
  border: 1px dashed #52bddc99;
  border-radius: 7px;
  background: linear-gradient(90deg, #1b6f8926, #44c5ed18 50%, #1b6f8926);
  box-shadow: inset 0 0 18px #3bd4ff12, 0 0 12px #3bd4ff12;
  animation: detail-layout-placeholder-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes detail-layout-placeholder-pulse {
  from { border-color: #4395ad66; opacity: .72; }
  to { border-color: #70ddffcc; opacity: 1; }
}
#detailContent > [data-detail-layout-item].is-dragging {
  opacity: .22;
  filter: saturate(.45) brightness(.8);
}
body.detail-layout-dragging,
body.detail-layout-dragging * { cursor: grabbing !important; }
.detail-drag-ghost {
  position: fixed !important;
  left: -2000px !important;
  top: -2000px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 9999 !important;
  box-sizing: border-box;
  margin: 0 !important;
  opacity: .9;
  pointer-events: none;
  transform: rotate(.8deg) scale(.98);
  filter: saturate(1.15) brightness(1.08);
  box-shadow: 0 18px 38px #01080db8, 0 0 0 1px #67ddff99, 0 0 22px #3bd4ff2e !important;
}
.detail-drag-ghost.is-pointer-ghost {
  left: var(--detail-ghost-x) !important;
  top: var(--detail-ghost-y) !important;
  transform-origin: var(--detail-ghost-grab-x) var(--detail-ghost-grab-y);
  transform: rotate(.8deg) scale(.98);
}
@media (prefers-reduced-motion: reduce) {
  .detail-layout-placeholder { animation: none; }
  .detail-action-drag-handle,
  .detail-section-collapsible,
  .detail-replay-group,
  #detailContent > .action-row,
  .detail-section-collapsible > .detail-section-header,
  .detail-section-collapsible > .detail-section-header::before { transition: none; }
}
#identityRows > p,
#qualityRows > p {
  min-width: 0;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px dotted #183e4b;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  color: #7898a6;
  font-size: 8px;
}
#identityRows > p strong,
#qualityRows > p strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #d4e8ef;
  font: 550 8px/1.3 ui-monospace, monospace;
  text-align: right;
}
.notice-card { padding: 10px; border: 1px solid #863f3f; background: #2b1515; color: #ffb5b5; font-size: 10px; border-radius: 5px; }

.schedule-clock { width: 70px; height: 58px; border: 1px solid #28657d; border-radius: 7px; display: grid; place-content: center; text-align: center; background: #0a1c27; }
.schedule-clock strong { color: var(--cyan); font: 700 16px ui-monospace, monospace; }
.schedule-clock span { color: var(--muted); font: 7px ui-monospace, monospace; margin-top: 2px; }
.schedule-route { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; gap: 6px; margin: 14px 0; padding: 13px 10px; border: 1px solid var(--line); background: var(--panel-card-bg); border-radius: 7px; }
.schedule-route div:last-child { text-align: right; }
.schedule-route small { display: block; color: var(--cyan); font: 700 11px ui-monospace, monospace; }
.schedule-route strong { display: block; margin-top: 4px; color: #c9e0e9; font-size: 9px; }
.schedule-route i { color: var(--mint); font-style: normal; text-align: center; }
.schedule-route.is-route-color-mode {
  --route-origin-color: #657881;
  --route-destination-color: #657881;
}
.schedule-route.is-route-color-mode > div:first-child small,
.schedule-route.is-route-color-mode > div:first-child strong { color: var(--route-origin-color); }
.schedule-route.is-route-color-mode > div:last-child small,
.schedule-route.is-route-color-mode > div:last-child strong { color: var(--route-destination-color); }
.schedule-route.is-route-color-mode > i {
  color: color-mix(in srgb, var(--route-origin-color) 50%, var(--route-destination-color));
}
.schedule-metrics dd { font-size: 10px; white-space: nowrap; }
.schedule-metrics dd.journey-time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: normal;
  line-height: 1.2;
}
.schedule-metrics dd.journey-time.is-dual { gap: 2px; }
.schedule-metrics dd.journey-time.is-empty {
  color: var(--muted);
  font-weight: 500;
  font-size: 10px;
}
.journey-time-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  line-height: 1.2;
  padding: 0;
  background: transparent;
}
.journey-time-row.is-pair {
  flex-wrap: wrap;
  gap: 2px 4px;
  padding: 0;
}
.journey-time-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.journey-time-label {
  flex: 0 0 auto;
  color: #7f9eab;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.journey-time-value {
  color: #d5e8f0;
  font: 700 10px ui-monospace, monospace;
}
.journey-time-value.is-emphasis,
.journey-time.is-dual .journey-time-value.is-emphasis {
  color: #e8f7ff;
  font-size: 11px;
}
.metrics dd .time-qualifier {
  color: #7f9eab;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0;
}
.live-flight-info {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--detail-frame, #1b5264);
  border-radius: 7px;
  background:
    radial-gradient(
      ellipse 125% 85% at 0 0,
      color-mix(in srgb, var(--detail-accent, var(--cyan)) 10%, transparent) 0%,
      transparent 58%
    ),
    var(--panel-detail-accent-bg);
}
.live-flight-info > header { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.live-flight-info > header div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.live-flight-info > header span { color: var(--detail-accent, var(--cyan)); font-size: 11px; font-weight: 700; letter-spacing: .1em; word-break: keep-all; }
.live-flight-info > header strong {
  color: #e1f8ff;
  font: 600 12px/1.2 Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.live-flight-info > header small { color: var(--muted); font-size: 8px; text-align: right; word-break: keep-all; }
.live-flight-info.is-loading { border-color: color-mix(in srgb, var(--cyan) 48%, #1b5264); }
.live-flight-info.is-loading > header small::after {
  display: inline-block;
  width: 1.4em;
  overflow: hidden;
  vertical-align: bottom;
  content: '…';
  animation: live-flight-loading 1.2s steps(3, end) infinite;
}
.live-flight-info.is-loading .schedule-route strong,
.live-flight-info.is-loading .live-journey-metrics dd { color: #82a7b5; }
.live-flight-info.is-unavailable { border-color: #294752; }
@keyframes live-flight-loading {
  0% { width: 0; }
  100% { width: 1.4em; }
}
@media (prefers-reduced-motion: reduce) {
  .live-flight-info.is-loading > header small::after { animation: none; }
}
.live-flight-info .schedule-route {
  margin: 6px 0 0;
  padding: 7px 0 4px;
  border: 0;
  background: transparent;
}
.live-flight-info .schedule-route small {
  font: 700 12px/1.1 Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  letter-spacing: 0.02em;
}
.live-flight-info .schedule-route small[data-app-tooltip] {
  cursor: help;
  text-decoration: underline dotted #ffffff4d;
  text-underline-offset: 3px;
}
.live-flight-info .schedule-route small[data-app-tooltip]:hover,
.live-flight-info .schedule-route small[data-app-tooltip]:focus-visible {
  color: #fff;
  text-decoration-color: var(--detail-accent, var(--cyan));
  outline: none;
}
.live-flight-info .schedule-route strong {
  margin-top: 2px;
  color: #c5dce6;
  font: 500 10px/1.25 Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
}
.detail-journey-progress {
  --journey-progress: .5;
  --journey-line: color-mix(in srgb, var(--detail-accent, var(--amber)) 78%, #8ca4ad);
  --journey-plane: color-mix(in srgb, var(--detail-accent, var(--amber)) 60%, white);
  --journey-plane-glow: var(--detail-accent, var(--amber));
  margin: 0 0 7px;
  padding: 0 1px;
  cursor: help;
}
.detail-journey-progress[hidden] { display: none !important; }
.detail-journey-progress.is-progress-unknown .context-info-journey-fill { display: none; }
.detail-journey-progress .context-info-journey-meta {
  margin-top: 2px;
  color: #718e9a;
  font-size: 8px;
}
.detail-journey-progress .context-info-journey-meta strong { color: #a9c0c9; font-size: 8px; }
/* Shared 2×2 board chrome is defined with .aircraft-situation-metrics above. */
.live-flight-info .live-journey-metrics dd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap;
}
.live-flight-info .live-journey-metrics {
  grid-auto-rows: minmax(43px, auto);
  margin-bottom: 8px;
}
.live-flight-info .live-journey-metrics > div {
  min-height: 43px;
  padding: 6px 8px 5px;
}
.live-flight-info .live-journey-metrics dd.journey-time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  text-align: center;
}
.live-flight-info .live-journey-metrics dd.journey-time.is-empty {
  color: #7f96a2;
  font: 500 11px/1.2 Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
}
.live-flight-info .live-journey-metrics dd.journey-time[data-app-tooltip] {
  cursor: help;
}
.live-flight-info .journey-time-row {
  display: block;
  width: 100%;
  line-height: 1;
}
.live-flight-info .journey-time-row.is-pair {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 3px;
}
/* Center the white clock; suffix sits after it and does not shift the center. */
.live-flight-info .journey-time-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  column-gap: 0;
  width: 100%;
}
.live-flight-info .journey-time-value,
.live-flight-info .journey-time-value.is-emphasis,
.live-flight-info .journey-time.is-dual .journey-time-value,
.live-flight-info .journey-time.is-dual .journey-time-value.is-emphasis {
  grid-column: 2;
  justify-self: center;
  color: #f4fbff;
  font: 600 13px/1 Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.live-flight-info .journey-time-label {
  grid-column: 3;
  justify-self: start;
  margin-left: 4px;
  color: #7fa0ae;
  font: 600 8px/1 Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
/* Archive/recent playback: one amber frame per card. Do not frame the situation wrapper too. */
.detail-replay-group.is-archived-route {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.detail-replay-group.is-archived-route .aircraft-situation {
  border-color: color-mix(in srgb, var(--amber) 55%, #17394a);
}
.live-flight-info.is-archived-route {
  margin-top: 10px;
  border-color: color-mix(in srgb, var(--amber) 55%, #17394a);
}
.live-flight-info.is-archived-route > header strong { color: color-mix(in srgb, var(--amber) 88%, #fff); }
.live-flight-info.is-archived-route > header span { color: var(--amber); }
.live-flight-info.is-archived-route .journey-time-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.live-flight-info.is-archived-route .journey-time-label { margin-left: 0; }
.live-flight-info > header small .route-provenance { color: var(--amber); font-weight: 600; }
.schedule-notice { padding: 9px; border: 1px solid #4b4328; border-radius: 5px; background: #19170f; color: #aa9767; font-size: 8px; line-height: 1.5; }
.feature-actions { grid-template-columns: 1fr; }
.feature-actions[hidden] { display: none !important; }
.feature-actions #featureScheduleButton { font-size: 9px; }
.feature-schedule-section { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.feature-schedule-header { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "heading heading" "meta controls" "summary summary"; align-items: center; column-gap: 10px; row-gap: 6px; margin-bottom: 10px; }
.feature-schedule-heading-line { grid-area: heading; display: flex; align-items: center; gap: 6px; min-width: 0; }
.feature-schedule-header h4 { margin: 0; color: var(--cyan); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.feature-schedule-info-wrap { position: static; display: inline-flex; flex: 0 0 auto; }
.feature-schedule-info { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 1px solid #3a768b; border-radius: 50%; background: #0a2632; color: #bdefff; font: 700 12px/1 ui-sans-serif, system-ui, sans-serif; cursor: help; }
.feature-schedule-info:hover, .feature-schedule-info:focus-visible { border-color: var(--cyan); background: #123c4b; color: #fff; outline: none; }
.feature-schedule-controls { grid-area: controls; display: flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.feature-schedule-sort-control { display: inline-flex; align-items: center; }
.feature-schedule-sort-control select { width: auto; min-width: 70px; padding: 3px 20px 3px 6px; border-radius: 4px; background-color: var(--panel-sort-bg); background-position: right 6px center; font-size: 9px; }
.feature-schedule-limit-control .recent-observation-limit-toggle { font-size: 9px; }
.feature-schedule-limit-control .recent-observation-limit-menu { min-width: 54px; }
.feature-schedule-meta { grid-area: meta; min-width: 0; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.2; white-space: nowrap; }
.feature-schedule-count-summary { margin: -2px 0 8px; color: #a7c4cf; font-size: 9px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.feature-schedule-count-summary[hidden] { display: none; }
.feature-schedule-summary { grid-area: summary; display: flex; align-items: stretch; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.feature-schedule-summary::-webkit-scrollbar { display: none; }
.feature-schedule-filter { min-width: max-content; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 6px; border: 1px solid #274a5a; border-radius: 4px; background: #091b25; color: #88a9b7; font: 700 8px/1 ui-monospace, monospace; white-space: nowrap; cursor: pointer; transition: background-color .14s ease, border-color .14s ease, color .14s ease; }
.feature-schedule-filter span { white-space: nowrap; }
.feature-schedule-filter b { color: currentColor; font-size: 10px; font-variant-numeric: tabular-nums; }
.feature-schedule-filter.departure { color: #67d7f2; }
.feature-schedule-filter.arrival { color: #62e7af; }
/* Planned filters inherit their directional colour and use a dashed border as their second signal. */
.feature-schedule-filter.planned { border-style: dashed; opacity: .82; }
.feature-schedule-filter.all { color: #b7d4df; }
.feature-schedule-filter:hover, .feature-schedule-filter:focus-visible { border-color: currentColor; background: #102b37; outline: none; }
.feature-schedule-filter.is-selected { border-color: currentColor; background: color-mix(in srgb, currentColor 15%, #102631); box-shadow: inset 0 1px #ffffff0d; }
.feature-schedule-message { padding: 12px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-card-bg); color: var(--muted); }
.feature-schedule-message strong { display: block; color: #bcd5df; font-size: 11px; margin-bottom: 6px; }
.feature-schedule-message p { margin: 0; font-size: 10px; line-height: 1.55; }
.feature-schedule-message button { margin-top: 10px; }
.feature-schedule-limit { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.feature-technical-section { margin-top: 4px; }
.feature-runway-note { margin-top: 12px; padding: 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-card-bg); color: var(--muted); font-size: 8px; line-height: 1.5; }

.theme-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 22px; background: #02070bb8; backdrop-filter: blur(6px); }
.theme-modal[hidden] { display: none; }
.save-track-title-modal { z-index: 78; }
.save-track-title-dialog { width: min(360px, 100%); padding: 16px; border: 1px solid #8a6a2d; border-radius: 10px; background: linear-gradient(145deg, #151d21fb, #0b151cfb); box-shadow: 0 24px 80px #000e, inset 0 1px #ffffff08; }
.save-track-title-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.save-track-title-dialog h2 { margin: 3px 0 0; color: #f0d28a; font-size: 15px; }
.save-track-title-dialog header button { width: 28px; height: 28px; border: 1px solid #5e5337; border-radius: 6px; background: #181b18; color: #cdbb8c; cursor: pointer; }
.save-track-title-dialog label { display: block; margin-top: 15px; color: #c9b982; font-size: 9px; font-weight: 800; }
.save-track-title-dialog input { width: 100%; margin-top: 6px; padding: 10px 11px; border: 1px solid #66562e; border-radius: 6px; background: #081218; color: #f5e8bf; outline: none; font-size: 11px; }
.save-track-title-dialog input:focus { border-color: #d9a83d; box-shadow: 0 0 0 2px #d9a83d22; }
.save-track-title-dialog p { margin: 8px 1px 0; color: #7f927f; font-size: 8px; line-height: 1.5; }
.save-track-title-dialog p strong { color: #baa66f; font-weight: 700; }
.save-track-title-dialog footer { display: flex; justify-content: flex-end; gap: 7px; margin-top: 16px; }
.save-track-title-dialog footer button { min-width: 84px; padding: 8px 11px; border: 1px solid #425661; border-radius: 6px; background: #0b202a; color: #a8c4cf; cursor: pointer; font-size: 9px; }
.save-track-title-dialog footer button.primary { border-color: #8a6a2d; background: #2b2413; color: #f0cf78; }
.save-track-title-dialog footer button:hover, .save-track-title-dialog footer button:focus-visible { border-color: var(--transport-accent); color: #fff; outline: none; }
.photo-editor-modal { z-index: 65; }
.photo-editor-dialog { width: min(590px, 100%); overflow: hidden; border: 1px solid #286078; border-radius: 10px; background: #081620fa; box-shadow: 0 24px 80px #000e; }
.photo-editor-dialog > header { display: flex; justify-content: space-between; gap: 16px; padding: 15px 17px 13px; border-bottom: 1px solid var(--line); }
.photo-editor-dialog > header h2 { margin: 1px 0 0; font-size: 17px; }
.photo-editor-dialog > header p { margin: 4px 0 0; color: #8eb0bd; font-size: 9px; }
.photo-editor-dialog > header button {
  width: 30px;
  height: 30px;
  border: 1px solid #31566a;
  border-radius: 5px;
  background: #0b202c;
  color: #a9cbd8;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}
@media (hover: hover) and (pointer: fine) {
  .photo-editor-dialog > header button:hover {
    border-color: #5a8fa8;
    background: #143848;
    color: #eff8fc;
    box-shadow: 0 0 0 2px #3bd4ff1c;
  }
  .photo-editor-dialog > header button:active {
    transform: translateY(1px);
    background: #0f2c38;
  }
}
.photo-editor-dialog > header button:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px #3bd4ff28;
}
.photo-editor-body { padding: 16px 17px 14px; }
.photo-paste-zone { position: relative; min-height: 244px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #2a6f89; border-radius: 8px; outline: none; background: radial-gradient(circle at 50% 42%, #133849 0, #081923 68%); cursor: pointer; transition: border-color .16s, background .16s, box-shadow .16s; }
.photo-paste-zone:hover, .photo-paste-zone:focus, .photo-paste-zone.dragging { border-color: var(--cyan); background: radial-gradient(circle at 50% 42%, #17485d 0, #091c27 70%); box-shadow: 0 0 0 3px #35cdeb18; }
.photo-paste-zone img { display: block; width: 100%; max-height: min(52vh, 420px); object-fit: contain; background: #030b10; }
.photo-paste-zone img[hidden] { display: none; }
.photo-paste-zone > div { display: grid; justify-items: center; gap: 7px; padding: 34px; text-align: center; pointer-events: none; }
.photo-paste-zone > div[hidden] { display: none; }
.photo-paste-zone > div strong { color: #d9f5ff; font-size: 13px; }
.photo-paste-zone > div span { color: var(--cyan); font: 700 10px ui-monospace, monospace; }
.photo-paste-zone > div small { color: var(--muted); font-size: 8px; }
.photo-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.photo-editor-toolbar button { padding: 7px 12px; border-color: #2b6178; color: #b9deeb; }
.photo-editor-toolbar span { color: #6e919f; font: 8px ui-monospace, monospace; text-align: right; }
.photo-editor-note { margin-top: 12px; padding: 10px 11px; border: 1px solid #235060; border-radius: 6px; background: #0a202a; }
.photo-editor-note strong { color: var(--mint); font-size: 9px; }
.photo-editor-note p { margin: 4px 0 0; color: #7e9eaa; font-size: 8px; line-height: 1.5; }
.photo-editor-dialog > footer { display: flex; justify-content: flex-end; gap: 7px; padding: 12px 17px 15px; border-top: 1px solid var(--line); background: #07131c; }
.photo-editor-dialog > footer button { min-width: 90px; padding: 8px 12px; border: 1px solid #31566a; border-radius: 6px; background: #0c2634; color: #b3d0dc; cursor: pointer; }
.photo-editor-dialog > footer button:hover, .photo-editor-dialog > footer button:focus-visible { border-color: var(--cyan); color: #effcff; outline: none; box-shadow: 0 0 0 2px #3bd4ff20; }
.photo-editor-dialog > footer button:last-child { border-color: #2f816a; color: var(--mint); background: #0b2c26; }
.photo-editor-dialog > footer button:last-child:hover, .photo-editor-dialog > footer button:last-child:focus-visible { border-color: var(--mint); color: #d6fff0; background: #0e3a31; box-shadow: 0 0 0 2px #35eab820; }
.photo-editor-dialog > footer button:disabled { opacity: .38; cursor: not-allowed; }
.photo-editor-dialog > footer button.danger-text { margin-right: auto; min-width: 0; border-color: #7a2d34; color: var(--red); background: #1c0f11; }
.aircraft-watch-modal { z-index: 66; }
.aircraft-watch-dialog { width: min(580px, 100%); max-height: min(760px, calc(100vh - 44px)); display: flex; flex-direction: column; }
.aircraft-watch-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 8px 17px 0; border-bottom: 1px solid var(--line); background: #07131c; }
.aircraft-watch-tabs button {
  padding: 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #7899a7;
  cursor: pointer;
  font-size: 10px;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
@media (hover: hover) and (pointer: fine) {
  .aircraft-watch-tabs button:hover:not(.active) {
    color: #cfeaf4;
    background: #0a1c27;
  }
}
.aircraft-watch-tabs button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}
.aircraft-watch-tabs button.active { border-bottom-color: var(--cyan); color: #def7ff; }
.aircraft-watch-tabs strong { margin-left: 4px; color: var(--cyan); font: 700 8px ui-monospace, monospace; }
.aircraft-watch-editor { padding: 15px 17px; border-bottom: 1px solid var(--line); background: #0a1c27; }
.aircraft-watch-editor[hidden] { display: none; }
.aircraft-watch-editor > strong { display: block; margin-bottom: 9px; color: #d7eef7; font-size: 11px; }
.aircraft-watch-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.aircraft-watch-options label { position: relative; min-width: 0; cursor: pointer; }
.aircraft-watch-options input { position: absolute; opacity: 0; pointer-events: none; }
.aircraft-watch-options label > span {
  min-height: 66px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border: 1px solid #28536a;
  border-radius: 7px;
  background: #0b2330;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .14s;
}
@media (hover: hover) and (pointer: fine) {
  .aircraft-watch-options label:hover > span {
    border-color: #3f8fb0;
    background: #102c3a;
    box-shadow: 0 0 0 2px #3bd4ff14;
  }
  .aircraft-watch-options input:not(:checked) + span:active {
    transform: translateY(1px);
  }
}
.aircraft-watch-options b { color: #b8d6e1; font-size: 10px; }
.aircraft-watch-options small { color: #6f929f; font-size: 8px; line-height: 1.4; }
.aircraft-watch-options input:checked + span { border-color: var(--cyan); background: #123849; box-shadow: inset 0 0 0 1px #3bd4ff55; }
.aircraft-watch-options input:checked + span b { color: #e1f9ff; }
@media (hover: hover) and (pointer: fine) {
  .aircraft-watch-options input:checked + span:hover {
    border-color: #7ae4ff;
    background: #164456;
    box-shadow: inset 0 0 0 1px #3bd4ff66, 0 0 0 2px #3bd4ff18;
  }
}
.aircraft-watch-options input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.aircraft-watch-expiry { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; color: #8eb0bd; font-size: 9px; }
.aircraft-watch-expiry select { min-width: 130px; padding: 7px 9px; border: 1px solid #2a5568; border-radius: 5px; background: #071620; color: var(--text); }
.aircraft-watch-editor-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 11px; }
.aircraft-watch-editor-actions button, .aircraft-watch-card button {
  padding: 7px 10px;
  border: 1px solid #31566a;
  border-radius: 5px;
  background: #0c2634;
  color: #b3d0dc;
  cursor: pointer;
  font-size: 9px;
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}
@media (hover: hover) and (pointer: fine) {
  .aircraft-watch-editor-actions #aircraftWatchEditorCancel:hover,
  .aircraft-watch-card button:hover:not(.danger) {
    border-color: var(--cyan);
    background: #123848;
    color: #effcff;
    box-shadow: 0 0 0 2px #3bd4ff18;
  }
  .aircraft-watch-editor-actions #aircraftWatchSave {
    border-color: #2f816a;
    color: var(--mint);
    background: #0b2c26;
  }
  .aircraft-watch-editor-actions #aircraftWatchSave:hover {
    border-color: #64efb2;
    color: #d6fff0;
    background: #0e3a31;
    box-shadow: 0 0 0 2px #35eab820, 0 0 14px #64efb214;
  }
  .aircraft-watch-editor-actions button:active,
  .aircraft-watch-card button:active {
    transform: translateY(1px);
  }
}
.aircraft-watch-editor-actions button:focus-visible,
.aircraft-watch-card button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #3bd4ff28;
}
#aircraftWatchSave { border-color: #39705f; color: var(--mint); background: #0b2c26; }
.aircraft-watch-management { min-height: 0; display: flex; flex-direction: column; padding: 14px 17px 17px; }
.aircraft-watch-management-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.aircraft-watch-management-heading strong { color: #c9e2eb; font-size: 10px; }
.aircraft-watch-management-heading small { color: var(--muted); font-size: 8px; }
.aircraft-watch-list { min-height: 0; overflow: auto; display: grid; gap: 6px; }
.aircraft-watch-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid #173b4d; border-radius: 7px; background: #091b26; }
.aircraft-watch-card > div:first-child { min-width: 0; }
.aircraft-watch-card strong { display: block; overflow: hidden; color: #d8edf5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.aircraft-watch-card p { margin: 4px 0 0; color: var(--cyan); font-size: 8px; }
.aircraft-watch-card small { display: block; margin-top: 4px; color: #668795; font-size: 7px; }
.aircraft-watch-card > div:last-child { display: flex; gap: 5px; flex: 0 0 auto; }
.aircraft-watch-card button.danger { border-color: #63343a; color: #e99ba3; background: #251318; }
.aircraft-watch-empty { padding: 25px 10px 18px; text-align: center; color: var(--muted); }
.aircraft-watch-empty[hidden] { display: none; }
.aircraft-watch-empty strong { color: #bcd4de; font-size: 10px; }
.aircraft-watch-empty p { margin: 6px 0 0; font-size: 8px; }
.aircraft-watch-history { min-height: 220px; padding: 13px 17px 17px; overflow: hidden; }
.aircraft-watch-history[hidden] { display: none; }
.aircraft-watch-history-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: #89aab7; font-size: 8px; }
.aircraft-watch-history-tools > div { display: flex; gap: 5px; }
.aircraft-watch-history-tools button {
  padding: 6px 8px;
  border: 1px solid #31566a;
  border-radius: 5px;
  background: #0c2634;
  color: #9fc2d0;
  cursor: pointer;
  font-size: 8px;
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}
@media (hover: hover) and (pointer: fine) {
  .aircraft-watch-history-tools button:hover,
  .aircraft-watch-message button:hover {
    border-color: var(--cyan);
    background: #123848;
    color: #effcff;
    box-shadow: 0 0 0 2px #3bd4ff18;
  }
}
.aircraft-watch-history-list { max-height: min(430px, 52vh); overflow: auto; display: grid; gap: 6px; }
.aircraft-watch-message { display: flex; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid #173b4d; border-radius: 7px; background: #091b26; }
.aircraft-watch-message.unread { border-color: #2d7189; background: #0b2836; box-shadow: inset 3px 0 var(--cyan); }
.aircraft-watch-message strong { color: #d8edf5; font-size: 10px; }
.aircraft-watch-message p { margin: 4px 0; color: #9fc2cf; font-size: 8px; }
.aircraft-watch-message small { color: #668795; font-size: 7px; }
.aircraft-watch-message > div:first-child { min-width: 0; }
.aircraft-watch-message > div:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex: 0 0 auto; }
.aircraft-watch-message button {
  padding: 6px 8px;
  border: 1px solid #31566a;
  border-radius: 5px;
  background: #0c2634;
  color: #9fc2d0;
  cursor: pointer;
  font-size: 8px;
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}
.aircraft-watch-message button.replay { border-color: #39705f; color: var(--mint); background: #0b2c26; }
.aircraft-watch-message button:disabled { opacity: .52; cursor: wait; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .aircraft-watch-card button.danger:hover {
    border-color: #a85a63;
    color: #ffd0d0;
    background: #3a1c22;
    box-shadow: 0 0 0 2px #e99ba318;
  }
}
.saved-tracks-modal { z-index: 60; }
.saved-tracks-modal[hidden] { display: none; }
.theme-modal.time-explorer-modal { z-index: 61; padding: 16px; }
.time-explorer-dialog {
  width: min(900px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column;
  overflow: hidden; border: 1px solid #2b6d82; border-radius: 16px;
  background: linear-gradient(145deg, #0b2430fb, #06141dfb); box-shadow: 0 26px 84px #000d, inset 0 1px #ffffff0c;
}
.time-explorer-dialog > header {
  flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, auto) 32px;
  align-items: start; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #1d4557;
}
.time-explorer-heading-copy { min-width: 0; }
.time-explorer-dialog > header h2 { margin: 0; color: #e3f6fb; font-size: 21px; line-height: 1.3; }
.time-explorer-dialog > header p { margin: 5px 0 0; color: #8eb0bd; font-size: 11px; line-height: 1.45; word-break: keep-all; }
.time-explorer-dialog > header button {
  width: 32px; height: 32px; border: 1px solid #315d70; border-radius: 7px;
  background: #0a202b; color: #a9cfda; font-size: 22px; line-height: 1; cursor: pointer;
}
.time-explorer-dialog button:focus-visible, .time-explorer-dialog select:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}
.time-explorer-dialog > header button:hover { border-color: var(--cyan); color: #fff; background: #113345; }
.time-explorer-coverage { min-width: 0; display: grid; gap: 3px; text-align: right; }
.time-explorer-coverage span { color: #78bbcf; font-size: 10px; }
.time-explorer-coverage strong { color: #d8eef5; font: 700 11px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }
.time-explorer-coverage small { color: #7fa3b0; font-size: 10px; line-height: 1.4; }
/* 날짜와 재생 설정을 동시에 보여 주며, PC 본문에는 스크롤 영역을 만들지 않는다. */
.time-explorer-body { min-height: 0; padding: 14px 20px; display: grid; gap: 12px; }
.time-explorer-section { min-width: 0; margin: 0; }
.time-explorer-label, .time-explorer-section > label, .time-explorer-field label { color: #9bc3cf; font-size: 12px; font-weight: 650; }
.time-explorer-find { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 5px 8px; }
.time-explorer-find > div { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 8px; }
.time-explorer-find input, .time-explorer-field input {
  min-width: 0; width: 100%; height: 36px; border: 1px solid #2d6478; border-radius: 7px;
  background: #071923; color: #e0f6fb; padding: 0 10px; font: 500 13px/1.3 system-ui, sans-serif; color-scheme: dark;
}
.time-explorer-find input:focus, .time-explorer-field input:focus { border-color: var(--cyan); outline: 2px solid #3bd4ff33; }
.time-explorer-find small, .time-explorer-feedback { grid-column: 2; margin: 0; font-size: 10px; line-height: 1.5; }
.time-explorer-find small { color: #7599a7; }
.time-explorer-feedback { color: #7fdcb5; overflow-wrap: anywhere; }
.time-explorer-feedback:empty { display: none; }
.time-explorer-feedback.is-error { color: #f2a988; }
.time-explorer-find:has(.time-explorer-feedback:not(:empty)) > small { display: none; }
.time-explorer-find button, .time-explorer-quick button, .time-explorer-dayparts button, .time-explorer-actions button {
  border: 1px solid #315d70; border-radius: 7px; background: #0d2937; color: #b7dbe4;
  font: 650 12px/1.3 system-ui, sans-serif; cursor: pointer;
}
.time-explorer-find button:hover:not(:disabled), .time-explorer-quick button:hover:not(:disabled), .time-explorer-dayparts button:hover:not(:disabled) {
  border-color: #4d97ad; background: #123647; color: #edfbff;
}
.time-explorer-shortcuts { display: grid; grid-template-columns: 70px minmax(0, 1fr) 166px; align-items: center; gap: 8px; }
.time-explorer-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.time-explorer-quick button { min-height: 32px; padding: 0 10px; white-space: nowrap; font-size: 11px; }
.time-explorer-shortcuts select { height: 32px; font-size: 11px; border-color: #315d70; }
.time-explorer-quick button.is-current, .time-explorer-dayparts button.is-current, .time-explorer-shortcuts select.is-current {
  border-color: #b48b38; background-color: #382d16; color: #ffe0a2;
}
.time-explorer-workspace { min-width: 0; display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 20px; padding-top: 12px; border-top: 1px solid #1c4253; }
.time-explorer-date-pane, .time-explorer-playback-pane { min-width: 0; }
.time-explorer-playback-pane { padding-left: 20px; border-left: 1px solid #1c4253; }
.time-explorer-step { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #d8edf4; font-size: 13px; line-height: 22px; }
.time-explorer-step > span { width: 22px; height: 22px; border: 1px solid #326479; border-radius: 50%; color: #88d3e4; font: 700 11px/20px ui-monospace, monospace; text-align: center; }
.time-explorer-field { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 10px; }
.time-explorer-calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.time-explorer-calendar-nav strong { color: #d9f2f8; font: 650 13px/1.3 system-ui, sans-serif; }
.time-explorer-calendar-nav button { width: 30px; height: 28px; border: 1px solid #315d70; border-radius: 6px; background: #0b2230; color: #a7d6e2; cursor: pointer; font-size: 20px; line-height: 1; }
.time-explorer-calendar-nav button:hover:not(:disabled) { border-color: var(--cyan); color: #f1fdff; }
.time-explorer-weekdays, .time-explorer-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.time-explorer-weekdays { margin: 7px 0 4px; }
.time-explorer-weekdays span { color: #779ba8; font-size: 10px; line-height: 14px; text-align: center; }
.time-explorer-calendar { grid-template-rows: repeat(6, 28px); }
.time-explorer-calendar button { min-width: 0; height: 100%; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #c2e1e9; font: 650 12px/1 ui-monospace, monospace; cursor: pointer; }
.time-explorer-calendar button.is-available { border-color: #1c5064; background: #0a202c; }
.time-explorer-calendar button.is-available:hover { border-color: var(--cyan); background: #123445; color: #fff; }
.time-explorer-calendar button.is-selected { border-color: #c89c43; background: #3a2f19; color: #ffe1a7; box-shadow: inset 0 0 0 1px #ffca6d33; }
.time-explorer-calendar button:disabled { color: #426572; cursor: default; opacity: 1; }
.time-explorer-timeline { padding: 8px 10px; border-radius: 9px; background: #0b2632; }
.time-explorer-timeline-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.time-explorer-timeline-heading label { color: #9bc3cf; font-size: 10px; }
.time-explorer-timeline-heading span { color: #ffe0a2; font: 700 15px/1.3 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.time-explorer-timeline-track { position: relative; height: 26px; margin: 3px 7px 0; display: flex; align-items: center; }
.time-explorer-timeline-track::before { content: ""; position: absolute; inset: 10px 0; border-radius: 99px; background: #234653; }
.time-explorer-timeline-track > span { position: absolute; left: var(--range-start, 0%); width: var(--range-width, 0%); height: 6px; border-radius: 99px; background: #d29e3d; opacity: .7; pointer-events: none; }
.time-explorer-timeline-track input { appearance: none; -webkit-appearance: none; position: relative; z-index: 1; width: 100%; height: 26px; padding: 0; margin: 0; border: 0; background: transparent; cursor: ew-resize; }
.time-explorer-timeline-track input::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.time-explorer-timeline-track input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 2px solid #ffe1a3; border-radius: 50%; background: #9b6a21; box-shadow: 0 0 0 3px #e2ae4533; }
.time-explorer-timeline-track input::-moz-range-track { height: 4px; background: transparent; }
.time-explorer-timeline-track input::-moz-range-progress { background: transparent; }
.time-explorer-timeline-track input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #ffe1a3; border-radius: 50%; background: #9b6a21; box-shadow: 0 0 0 3px #e2ae4533; }
.time-explorer-timeline-ticks { display: flex; justify-content: space-between; color: #7294a1; font-size: 9px; line-height: 13px; }
.time-explorer-dayparts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.time-explorer-dayparts button { min-height: 28px; padding: 0 4px; font-size: 11px; }
.time-explorer-playback-section { margin-top: 12px; }
.time-explorer-playback-section > .time-explorer-label { display: block; margin-bottom: 6px; }
.time-explorer-playback-options { display: grid; grid-template-columns: repeat(var(--duration-columns, 1), minmax(0, 1fr)); gap: 6px; }
.time-explorer-playback-options button { min-height: 36px; border: 1px solid #315d70; border-radius: 7px; background: #0d2937; color: #b7dbe4; font: 650 12px/1.3 system-ui, sans-serif; cursor: pointer; }
.time-explorer-playback-options button:hover { border-color: #4d97ad; background: #123647; color: #edfbff; }
.time-explorer-playback-options button.is-current { border-color: #b48b38; background: #382d16; color: #ffe0a2; }
.time-explorer-playback-section > small { display: block; margin-top: 6px; color: #86aab7; font-size: 10px; line-height: 1.5; word-break: keep-all; }
.time-explorer-dialog > footer { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 12px 20px; border-top: 1px solid #285567; background: #091e28; }
.time-explorer-preview { min-width: 0; display: grid; gap: 3px; }
.time-explorer-period { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); align-items: center; gap: 8px; }
.time-explorer-period > div { min-width: 0; display: grid; gap: 3px; }
.time-explorer-period span { color: #87b3c2; font-size: 10px; }
.time-explorer-period strong { color: #e7f8fb; font: 700 12px/1.4 ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.time-explorer-period .time-explorer-period-arrow { color: #d9b572; font-size: 16px; }
.time-explorer-preview > small { color: #86aab7; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.time-explorer-preview > #timeExplorerRangeSummary { color: #dfc186; }
.time-explorer-actions { display: grid; grid-template-columns: auto auto; gap: 8px; }
.time-explorer-actions button { min-height: 42px; padding: 0 14px; white-space: nowrap; }
.time-explorer-actions button:hover:not(:disabled) { border-color: var(--cyan); color: #fff; }
.time-explorer-actions .primary { min-width: 138px; border-color: #b48b38; background: #4b3716; color: #ffe0a2; }
.time-explorer-actions .primary:hover:not(:disabled) { border-color: #f2c76f; background: #5a4219; color: #fff5dc; }
.time-explorer-dialog button:disabled, .time-explorer-dialog select:disabled { opacity: .45; cursor: not-allowed; }
html[data-map-tone="light"] .time-explorer-dialog { border-color: #377b91; background: linear-gradient(145deg, rgba(7, 30, 41, .985), rgba(5, 20, 29, .99)); }
@media (min-width: 700px) and (max-height: 740px) {
  .time-explorer-dialog > header { padding-block: 12px; }
  .time-explorer-body { padding-block: 10px; gap: 10px; }
  .time-explorer-workspace { padding-top: 10px; }
  .time-explorer-step { margin-bottom: 8px; }
  .time-explorer-field { margin-bottom: 8px; }
  .time-explorer-calendar { grid-template-rows: repeat(6, 26px); gap: 3px; }
  .time-explorer-weekdays { margin-block: 5px 3px; }
  .time-explorer-dialog > footer { padding-block: 10px; }
}
@media (min-width: 700px) and (max-width: 820px) {
  .time-explorer-dialog > header { grid-template-columns: minmax(0, 1fr) minmax(210px, auto) 32px; gap: 10px; }
  .time-explorer-coverage { max-width: 235px; }
  .time-explorer-shortcuts { grid-template-columns: 70px minmax(0, 1fr) 142px; }
  .time-explorer-quick button { padding-inline: 8px; font-size: 10px; }
  .time-explorer-workspace { gap: 14px; }
  .time-explorer-playback-pane { padding-left: 14px; }
  .time-explorer-period strong { font-size: 11px; }
  .time-explorer-actions button { padding-inline: 10px; font-size: 11px; }
  .time-explorer-actions .primary { min-width: 116px; }
}
@media (min-width: 700px) and (max-height: 640px) {
  .time-explorer-dialog > header h2 { font-size: 19px; }
  .time-explorer-dialog > header p { font-size: 10px; }
  .time-explorer-body { gap: 8px; }
  .time-explorer-find input, .time-explorer-field input { height: 32px; }
  .time-explorer-calendar { grid-template-rows: repeat(6, 23px); }
  .time-explorer-field { margin-bottom: 6px; }
  .time-explorer-timeline { padding-block: 6px; }
  .time-explorer-dayparts { margin-top: 6px; }
  .time-explorer-playback-section { margin-top: 8px; }
  .time-explorer-playback-options button { min-height: 32px; }
}
@media (min-width: 700px) and (max-height: 600px) {
  .theme-modal.time-explorer-modal { padding: 8px; }
  .time-explorer-dialog { max-height: calc(100dvh - 16px); }
  .time-explorer-body { padding-block: 8px; gap: 6px; }
  .time-explorer-calendar { grid-template-rows: repeat(6, 22px); }
  .time-explorer-dialog > footer { padding-block: 8px; }
}
@media (max-width: 699px) {
  .theme-modal.time-explorer-modal { align-items: end; padding: 0; }
  .time-explorer-dialog { width: 100%; max-height: 94dvh; border-radius: 16px 16px 0 0; border-bottom: 0; }
  .time-explorer-dialog > header { grid-template-columns: minmax(0, 1fr) 32px; gap: 10px; padding: 14px 16px; }
  .time-explorer-dialog > header h2 { font-size: 20px; }
  .time-explorer-dialog > header button { grid-column: 2; grid-row: 1; }
  .time-explorer-coverage { grid-column: 1 / -1; text-align: left; grid-template-columns: auto minmax(0, 1fr); gap: 3px 8px; }
  .time-explorer-coverage strong { text-align: right; }
  .time-explorer-coverage small { grid-column: 1 / -1; }
  .time-explorer-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px; gap: 12px; }
  .time-explorer-find { grid-template-columns: 1fr; gap: 6px; }
  .time-explorer-find small, .time-explorer-feedback { grid-column: 1; }
  .time-explorer-find input, .time-explorer-field input { height: 40px; font-size: 16px; }
  .time-explorer-find input { font-size: 14px; }
  .time-explorer-shortcuts { grid-template-columns: 1fr; gap: 6px; }
  .time-explorer-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .time-explorer-quick button { min-height: 38px; padding-inline: 5px; }
  .time-explorer-shortcuts select { height: 38px; font-size: 12px; }
  .time-explorer-workspace { grid-template-columns: 1fr; gap: 14px; }
  .time-explorer-playback-pane { padding: 14px 0 0; border-left: 0; border-top: 1px solid #1c4253; }
  .time-explorer-calendar { grid-template-rows: repeat(6, 36px); }
  .time-explorer-calendar-nav button { width: 36px; height: 32px; }
  .time-explorer-dayparts button { min-height: 36px; }
  .time-explorer-playback-options button { min-height: 40px; }
  .time-explorer-dialog > footer { grid-template-columns: 1fr; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .time-explorer-period { gap: 5px; }
  .time-explorer-period strong { font-size: 11px; }
  .time-explorer-actions { grid-template-columns: 1fr 1fr; }
  .time-explorer-actions button { min-height: 44px; padding-inline: 6px; font-size: 11px; }
  .time-explorer-actions .primary { min-width: 0; }
}
/* 극단적인 확대·낮은 창에서도 컨트롤을 잘라 내지 않는다. */
@media (min-width: 700px) and (max-height: 560px) {
  .time-explorer-body { overflow-y: auto; overscroll-behavior: contain; }
}
@media (prefers-reduced-motion: reduce) {
  .time-explorer-dialog { scroll-behavior: auto; }
}
.saved-tracks-dialog { width: min(760px, 100%); max-height: min(760px, calc(100vh - 44px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #286078; border-radius: 10px; background: #081620f8; box-shadow: 0 24px 80px #000d; }
.saved-tracks-dialog > header { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px 13px; border-bottom: 1px solid var(--line); }
.saved-tracks-dialog > header h2 { margin: 0; font-size: 17px; }
.saved-tracks-dialog > header p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.saved-tracks-dialog > header button {
  width: 30px;
  height: 30px;
  border: 1px solid #31566a;
  border-radius: 5px;
  background: #0b202c;
  color: #a9cbd8;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}
@media (hover: hover) and (pointer: fine) {
  .saved-tracks-dialog > header button:hover {
    border-color: #5a8fa8;
    background: #143848;
    color: #eff8fc;
    box-shadow: 0 0 0 2px #3bd4ff1c;
  }
  .saved-tracks-dialog > header button:active {
    transform: translateY(1px);
    background: #0f2c38;
  }
}
.saved-tracks-dialog > header button:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px #3bd4ff28;
}
.saved-tracks-tools { display: grid; grid-template-columns: minmax(180px, 1fr) 135px 135px; gap: 8px; padding: 12px 18px 8px; }
.saved-tracks-tools input, .saved-tracks-tools select { width: 100%; padding: 7px 8px; font-size: 9px; }
.saved-track-edit { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(100px, .55fr) 54px 54px; gap: 7px; padding: 8px 18px; background: #0b202b; border-top: 1px solid #18394a; border-bottom: 1px solid #18394a; }
.saved-track-edit[hidden] { display: none; }
.saved-track-edit input { width: 100%; padding: 7px; font-size: 9px; }
.saved-track-edit-bookmark { grid-column: 1 / -1; }
.saved-track-edit-bookmark[hidden] { display: none; }
.saved-track-edit button, .saved-track-card button { border: 1px solid #31566a; border-radius: 5px; background: #0d2635; color: #a9ccda; padding: 6px 8px; cursor: pointer; font-size: 8px; }
.saved-track-edit button:hover, .saved-track-card button:hover { border-color: var(--cyan); color: white; }
.saved-track-card button.danger:hover { border-color: #a44f4f; color: #ffaaaa; }
.saved-tracks-summary { display: flex; justify-content: space-between; padding: 4px 18px 9px; color: #9db9c5; font-size: 8px; }
.saved-tracks-summary small { color: var(--muted); }
.saved-tracks-list { min-height: 0; overflow: auto; padding: 0 18px 18px; }
.saved-track-group + .saved-track-group { margin-top: 14px; }
.saved-track-group > h3 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 7px 2px 6px; background: #081620f5; color: var(--cyan); font-size: 8px; letter-spacing: .1em; }
.saved-track-card { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border: 1px solid #173b4d; border-radius: 7px; background: #091b26; }
.saved-track-card + .saved-track-card { margin-top: 6px; }
.saved-track-card:hover { border-color: #2d6178; background: #0b2230; }
.saved-track-card.is-open { border-color: #2d6f86; background: #0b2230; }
.saved-track-open-badge { display: inline-block; margin-right: 6px; padding: 1px 5px; border: 1px solid #34748a; border-radius: 3px; background: #123646; color: var(--cyan); font: 600 8px ui-monospace, monospace; vertical-align: middle; }
.saved-track-thumb { position: relative; width: 112px; aspect-ratio: 5 / 3; overflow: hidden; border: 1px solid #1c4659; border-radius: 5px; background: #06131c; }
.saved-track-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.saved-track-thumb-source { position: absolute; right: 3px; bottom: 3px; max-width: calc(100% - 6px); overflow: hidden; padding: 2px 3px; border-radius: 2px; background: #03101acc; color: #b9d5df !important; font-size: 5px !important; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.saved-track-thumb.fallback { display: grid; place-content: center; justify-items: center; gap: 3px; color: #4d879f; background: radial-gradient(circle at 50% 35%, #123246 0, #081923 66%); }
.saved-track-thumb.fallback span { font-size: 22px; line-height: 1; text-shadow: 0 0 12px #32d7ff55; }
.saved-track-thumb.fallback small { color: #527786; font-size: 6px; letter-spacing: .08em; }
.saved-track-copy { min-width: 0; }
.saved-track-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d8edf5; font-size: 10px; }
.saved-track-card p { margin: 4px 0 0; color: #83a4b2; font-size: 8px; }
.saved-track-card small { display: block; margin-top: 4px; color: #5f8190; font: 7px ui-monospace, monospace; }
.saved-track-card .saved-track-actions { display: flex; gap: 5px; }
.saved-track-card .play { border-color: #39705f; color: var(--mint); }

/* Replay entry points share one teal outline language; only available width changes the label. */
.replay-entry-button,
.aircraft-watch-message button.replay.replay-entry-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #2b6670;
  border-radius: 5px;
  background: #0a272d;
  color: #64e8d3;
  font: 700 9px/1 ui-monospace, monospace;
  cursor: pointer;
  box-shadow: inset 0 1px #ffffff08;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease, transform .09s ease;
}
.replay-entry-button--icon { width: 24px; height: 23px; padding: 0; }
.replay-entry-button--text { min-height: 28px; padding: 6px 9px; white-space: nowrap; }
.replay-entry-button:hover,
.replay-entry-button:focus-visible,
.aircraft-watch-message button.replay.replay-entry-button:hover,
.aircraft-watch-message button.replay.replay-entry-button:focus-visible {
  border-color: #51bdc7;
  background: #0d3439;
  color: #d9ffff;
  box-shadow: 0 0 0 2px #43d2d31a, inset 0 1px #ffffff0d;
  text-shadow: none;
}
.replay-entry-button:focus-visible { outline: 1px solid #72e4ec; outline-offset: 2px; }
.replay-entry-button:active,
.replay-entry-button.is-pressed { transform: translateY(1px) scale(.94); }
.event-feed-play.replay-entry-button { margin: 2px 0; font-size: 9px; }
.event-feed-play.replay-entry-button.is-stop {
  border-color: #80622f;
  background: #302512;
  color: #ffd17b;
  font-size: 8px;
}
.past-flight-play.replay-entry-button { padding: 0; }
.saved-track-card .play.replay-entry-button { border-color: #2b6670; background: #0a272d; color: #64e8d3; }
.saved-tracks-empty { padding: 46px 18px 58px; text-align: center; color: var(--muted); }
.saved-tracks-empty[hidden] { display: none; }
.saved-tracks-empty strong { color: #bcd4de; font-size: 11px; }
.saved-tracks-empty p { margin: 7px 0 0; font-size: 9px; }

.app-dialog-modal { z-index: 80; background: #010609d6; }
.app-dialog { width: min(410px, 100%); display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px 15px; padding: 18px; border: 1px solid #2b6077; border-radius: 10px; background: linear-gradient(145deg, #0b202cfb, #07131cfb); box-shadow: 0 24px 80px #000e, inset 0 1px #ffffff08; }
.app-dialog-symbol { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #377086; border-radius: 50%; background: #0d2a37; color: var(--cyan); font: 700 18px ui-monospace, monospace; box-shadow: 0 0 18px #3bd4ff1c; }
.app-dialog-copy h2 { margin: 3px 0 7px; color: #e0f3fa; font-size: 15px; }
.app-dialog-copy p { margin: 0; color: #aac4cf; font-size: 10px; line-height: 1.65; }
.app-dialog-copy small { display: block; margin-top: 8px; padding: 7px 8px; border-left: 2px solid #31586a; background: #06131b; color: #718f9c; font-size: 8px; line-height: 1.5; }
.app-dialog-copy small[hidden] { display: none; }
.app-dialog-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 7px; padding-top: 3px; }
.app-dialog-actions button { min-width: 78px; border: 1px solid #31566a; border-radius: 6px; background: #0c2634; color: #b3d0dc; padding: 8px 12px; cursor: pointer; font-size: 9px; }
.app-dialog-actions button:hover, .app-dialog-actions button:focus-visible { border-color: var(--cyan); color: #effcff; outline: none; box-shadow: 0 0 0 2px #3bd4ff20; }
.app-dialog-actions #appDialogConfirm { border-color: #39705f; color: var(--mint); }
.app-dialog.danger { border-color: #82551d; }
.app-dialog.danger .app-dialog-symbol { border-color: #a77928; background: #302410; color: #ffc454; box-shadow: 0 0 18px #ffb52e22; }
.app-dialog.danger .app-dialog-copy small { border-left-color: #8a6423; color: #b99d66; }
.app-dialog.danger #appDialogConfirm { border-color: #9a6821; background: #382711; color: #ffd071; }
.app-dialog.danger #appDialogConfirm:hover, .app-dialog.danger #appDialogConfirm:focus-visible { border-color: #ffc454; color: #fff4d7; box-shadow: 0 0 0 2px #ffc45420; }

.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  background: #061019;
  transition: background-color .24s ease, border-color .24s ease;
  border-top: 1px solid var(--line);
  color: #668795;
  font: 9px ui-monospace, monospace;
  z-index: 20;
  /*
   * This bar is exactly --status (28px) tall, so a single wrapped line overflows
   * it and gets clipped mid-glyph. Nothing in here may wrap; anything too long
   * must ellipsize instead.
   */
  white-space: nowrap;
}
html[data-map-tone="light"] .statusbar { background: #0c1d27; }
.statusbar-group > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#clock { display: inline-flex; gap: 5px; flex: 0 0 auto; }
.statusbar-group {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}
.statusbar-ops,
.statusbar-meta {
  /*
   * Size these from their content, not from a zero basis. Growing all three groups
   * equally handed the fixed-length readouts (clock, provider, health, version) a
   * third of the bar each and ellipsed them away, while the elastic message feed
   * kept its share. The feed degrades gracefully, so let it absorb the remainder.
   */
  flex: 0 1 auto;
  min-width: 0;
}
.statusbar-center {
  flex: 1.6 1 0;
  min-width: 0;
  justify-content: center;
  max-width: min(560px, 46vw);
}

.statusbar-meta { justify-content: flex-end; }
.statusbar-ops #providerText { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statusbar-provider-health {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: #7fa6b6;
}
.statusbar-provider-health[hidden] { display: none; }
.live-data-attribution {
  color: var(--muted);
  text-decoration: none;
}
.live-data-attribution::before {
  content: "·";
  margin: 0 8px;
  color: #3d5a68;
  pointer-events: none;
}
.live-data-attribution:hover,
.live-data-attribution:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}
.statusbar-health-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #5a7a88;
  box-shadow: 0 0 6px currentColor;
  color: #5a7a88;
}
.statusbar-health-dot[data-state="ok"] { background: var(--mint); color: var(--mint); }
.statusbar-health-dot[data-state="warn"] { background: var(--amber); color: var(--amber); }
.statusbar-health-dot[data-state="error"] { background: var(--red); color: var(--red); }
.statusbar-health-dot[data-state="shift"] { background: var(--cyan); color: var(--cyan); }
.statusbar-health-dot[data-state="waiting"] { background: #5a7a88; color: #5a7a88; }
.statusbar-meta #fpsText { color: #5a7a88; }
.statusbar-meta #serverText.has-since-tip,
.statusbar-meta #serverText[title] { cursor: help; }
.statusbar-ops > span + span::before,
.statusbar-meta > span + span::before {
  content: "·";
  margin: 0 8px;
  color: #3d5a68;
  pointer-events: none;
}
.activity-stream {
  width: 100%;
  min-width: 0;
  height: 26px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
  color: #c9dde6;
}
.activity-stream[hidden] { display: none; }
.activity-stream-nav {
  position: relative;
  flex: 0 0 auto; width: 36px; height: 24px; padding: 0;
  border: 0; border-radius: 4px;
  background: transparent; color: #9ac4d2; cursor: pointer;
  font-size: 16px; font-weight: 700; line-height: 1;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.activity-stream-nav::after {
  position: absolute; top: 5px; color: #6091a1;
  font-size: 7px; font-weight: 800; letter-spacing: .05em;
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease;
}
.activity-stream-nav--previous { border-right: 1px solid #1a4050; }
.activity-stream-nav--previous::after { content: '이전'; left: 20px; }
.activity-stream-nav--next { border-left: 1px solid #1a4050; }
.activity-stream-nav--next::after { content: '다음'; right: 20px; }
.activity-stream-nav:hover, .activity-stream-nav:focus-visible { color: #e5f8ff; background: linear-gradient(90deg, #0b2734, #113848); outline: none; }
.activity-stream-nav--previous:hover { transform: translateX(-1px); }
.activity-stream-nav--next:hover { transform: translateX(1px); }
.activity-stream-nav:hover::after, .activity-stream-nav:focus-visible::after { opacity: 1; }
.activity-stream-nav:disabled { opacity: .32; color: #668391; cursor: default; background: transparent; transform: none; }
.activity-stream-nav:disabled::after { display: none; }
.activity-stream-body {
  min-width: 0; height: 24px;
  display: inline-flex; justify-content: center; align-items: center; gap: 5px;
  padding: 0 7px; border: 0; border-radius: 4px;
  background: transparent; color: inherit; text-align: center; cursor: pointer;
  font: inherit;
}
.activity-stream-body:hover { background: #0d2430aa; }
.activity-stream-body:disabled { cursor: default; }
.activity-stream-body.is-map-preview { background: #113544; box-shadow: inset 0 0 0 1px #3bd4ff44; }
.activity-stream-body:focus-visible {
  outline: none; box-shadow: 0 0 0 1px #3bd4ff55;
}
.activity-stream-signal {
  flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
  background: var(--mint); color: var(--mint); box-shadow: 0 0 7px currentColor;
}
.activity-stream[data-mode="focus"] .activity-stream-signal {
  background: #648c9d; color: #648c9d; box-shadow: none;
}
.activity-stream-mode {
  flex: 0 0 auto; color: var(--mint);
  font-size: 8px; font-weight: 800; letter-spacing: .08em; white-space: nowrap;
}
.activity-stream[data-mode="focus"] .activity-stream-mode { color: #82a9b8; }
.activity-stream[data-mode="recent"] .activity-stream-mode,
.activity-stream[data-mode="past"] .activity-stream-mode { color: #e5bc78; }
.activity-stream[data-mode="replay"] .activity-stream-mode { color: #bc9bec; }
.activity-stream[data-mode="unavailable"] .activity-stream-mode { color: #8998a0; }
.activity-stream-kind {
  flex: 0 0 auto; padding: 0 4px; border-radius: 3px;
  background: #123445; color: #9fd7ea;
  font-size: 8px; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
  line-height: 14px;
}
.activity-stream[data-tone="landing"] .activity-stream-kind { background: #3a2a08; color: #ffd27a; }
.activity-stream[data-tone="takeoff"] .activity-stream-kind { background: #0f2f24; color: #8fe0b8; }
.activity-stream[data-tone="alert"] .activity-stream-kind { background: #3a1720; color: #ff9da8; }
.activity-stream[data-tone="neutral"] .activity-stream-kind { background: #0f2f3a; color: #8fd7e8; }
.activity-stream-text {
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 9px; font-weight: 600; color: #d7ebf2; text-align: center;
}
.activity-stream-time {
  flex: 0 0 auto; color: #5f8494; font-size: 8px; white-space: nowrap;
}
.activity-stream-action {
  flex: 0 0 auto; color: #72c8dd; font-size: 8px; font-weight: 700; white-space: nowrap;
}
.activity-stream[data-mode="focus"] .activity-stream-action { color: #83adbb; }
.activity-stream-trail {
  flex: 0 0 auto; display: flex; align-items: center; gap: 3px;
  justify-self: end;
}
.activity-stream-count {
  min-width: 26px; color: #6f97a7; font-size: 8px; text-align: center; font-variant-numeric: tabular-nums;
}
.activity-stream-new {
  padding: 0 4px; border: 0; border-radius: 3px;
  background: #1a4d3a; color: #8fe0b8;
  font-size: 7px; font-weight: 800; letter-spacing: .04em; cursor: pointer;
  line-height: 14px;
}
.activity-stream-new:hover { background: #226348; }
.icon-button, .close-button { border: 0; background: transparent; cursor: pointer; }
.panel-toggle {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  border: 1px solid #21475b; border-radius: 8px; background: #0a1c28;
  color: #8fb7c7; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.panel-toggle > span { font-size: 18px; line-height: 1; }
.panel-toggle small { display: none; color: inherit; font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.panel-toggle:hover { border-color: #3b7892; color: #d7f3fb; background: #0f2938; }
.panel-toggle[aria-expanded="true"] { border-color: #397b96; color: var(--cyan); background: #123448; }
.panel-close { width: 34px; height: 34px; color: #91afba; font-size: 20px; }
.mobile-only { display: none; }

@media (max-width: 1050px) {
  :root { --left: 248px; --right: 280px; }
  .brand { min-width: 200px; }
  .connection { min-width: 180px; }
}

@media (min-width: 1600px) {
  .panel-toggle { width: auto; min-width: 52px; padding: 0 9px; }
  .panel-toggle small { display: inline; }
}

@media (max-width: 1599px) {
  :root { --topbar-padding-x: 10px; --topbar-gap: 9px; --topbar-detail-toggle-width: 34px; }
  .topbar { padding-left: 10px; padding-right: 10px; gap: 9px; }
  .brand { min-width: 160px; }
  .brand small { display: none; }
  .connection { min-width: 112px; }
  .time-shift-toggle span,
  .saved-tracks-toggle span,
  .topbar-search-toggle small { display: none; }
  .topbar-quick-actions { gap: 9px; }
}

@media (max-width: 1199px) {
  .dock-only { display: none !important; }
  .mode-switcher-compact { display: none !important; }
  .mode-switcher { visibility: visible !important; pointer-events: auto !important; }
  .workspace { display: block; }
  .radar-stage { position: absolute; inset: 0; }
  .control-panel, .detail-panel {
    position: absolute; top: 0; bottom: var(--panel-bottom-clearance, 0px); width: min(86vw, 320px);
    box-shadow: 0 0 35px #000b; z-index: 25;
  }
  .control-panel { left: 0; transform: translateX(-105%); }
  .control-panel.open { transform: translateX(0); }
  .detail-panel { right: 0; transform: translateX(105%); }
  .detail-panel.open { transform: translateX(0); }
  .workspace:has(.radar-stage[data-transport-mode]) .control-panel.open,
  .workspace:has(.radar-stage[data-transport-mode]) .detail-panel.open {
    bottom: max(var(--panel-bottom-clearance, 0px), calc(var(--replay-clearance, 52px) + 76px + 8px + env(safe-area-inset-bottom, 0px)));
  }
  /* Popovers must remain above an open observation panel; the bar itself sits below its reserved edge. */
  .radar-stage[data-transport-mode] .transport-bar { z-index: 30; }
  .panel-close.mobile-only { display: inline-grid; place-items: center; }
}

/*
 * 821-1199px has no dock rails, so the mode switcher shares the topbar row with
 * the quick-action chips. updateModeSwitcherLayout() only runs its collision
 * solver at >=1200px and clears --mode-switcher-center-x below that, so the base
 * rule fell back to left:50% and overlapped the time-shift chip (measured 43px
 * at a 827px viewport). Hand the switcher back to the topbar flex flow: paired
 * auto margins centre it inside the space that is actually free, which makes the
 * overlap structurally impossible at every width in this range.
 */
@media (min-width: 821px) and (max-width: 1199px) {
  .mode-switcher {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    flex: 0 0 auto;
    margin-left: auto;
  }
}

.schedule-lab {
  position: fixed;
  left: 50%;
  bottom: 36px;
  z-index: 70;
  width: min(520px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid #56c8df66;
  border-radius: 10px;
  background: #07131aee;
  box-shadow: 0 14px 42px #000b, inset 0 1px #b8f5ff12;
  color: #d8edf3;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}
.schedule-lab[hidden] { display: none; }
.schedule-lab header,
.schedule-lab-controls,
.schedule-lab-tago {
  display: flex;
  align-items: center;
  gap: 8px;
}
.schedule-lab header { justify-content: space-between; margin-bottom: 8px; }
.schedule-lab header div { display: grid; gap: 2px; }
.schedule-lab header strong { font-size: 12px; letter-spacing: .08em; }
.schedule-lab header > span {
  padding: 3px 7px;
  border: 1px solid #55cbe755;
  border-radius: 999px;
  color: #76ddef;
  font: 700 10px/1.2 ui-monospace, monospace;
}
.schedule-lab-controls label { color: #8fb2bd; font-size: 10px; white-space: nowrap; }
.schedule-lab-controls select {
  min-width: 0;
  flex: 1;
  height: 30px;
  border: 1px solid #31515e;
  border-radius: 6px;
  background: #0b2029;
  color: #e0f3f7;
  padding: 0 7px;
}
.schedule-lab button {
  min-height: 30px;
  border: 1px solid #3e8494;
  border-radius: 6px;
  background: #10323d;
  color: #c9eef5;
  padding: 0 9px;
  font-size: 10px;
  cursor: pointer;
}
.schedule-lab button:hover { border-color: #6edcf0; background: #154552; }
.schedule-lab button:disabled { opacity: .45; cursor: wait; }
.schedule-lab-summary {
  margin: 8px 0 0;
  color: #a8c4cc;
  font-size: 10px;
  line-height: 1.45;
}
.schedule-lab-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}
.schedule-lab-metrics span {
  display: grid;
  gap: 2px;
  padding: 5px 6px;
  border-radius: 5px;
  background: #10252d;
  color: #87aab4;
  font-size: 8px;
}
.schedule-lab-metrics strong { color: #e1f5f8; font-size: 11px; }
.schedule-lab-tago {
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #31515e77;
}
.schedule-lab-tago small {
  min-width: 0;
  overflow: hidden;
  color: #8fb2bd;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 820px) {
  :root { --top: 56px; }
  .map-side-controls { right: 8px; }
  .map-tool-stack > button,
  .map-tool-stack .layer-menu-trigger { width: 40px; height: 40px; }
  .layer-popover {
    right: calc(100% + 8px); left: auto; top: 50%; bottom: auto;
    transform: translateY(-50%); width: min(180px, 72vw);
  }
  .layer-row { min-height: 44px; }
  .map-altitude-popover {
    width: min(220px, calc(100vw - 24px));
  }
  .map-altitude-presets button { min-height: 36px; }
  .mobile-only { display: inline-grid; place-items: center; }
  .detail-panel-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .detail-panel.is-feature-detail .detail-panel-heading { margin-bottom: 10px; }
  .detail-panel.is-feature-detail:not(.has-detail-back) .detail-panel-heading { grid-template-columns: 1fr auto; }
  .detail-back-desktop { display: none !important; }
  .detail-back-mobile:not([hidden]) { display: inline-flex; align-items: center; }
  .detail-heading-copy { min-width: 0; }
  .topbar { padding: 0 9px; gap: 8px; }
  .brand { min-width: 0; flex: 1; }
  .brand small {
    display: block;
    font-size: 8px;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand-mark { width: 22px; height: 22px; }
  /*
   * The map's top-centre lane cannot hold everything at this width. The left HUD
   * cluster (mode chip + altitude control) already runs to ~285px and the switcher
   * is ~206px wide, so centring the switcher parked it straight on top of the
   * altitude control and the LIVE chip. Because the switcher is absolutely
   * positioned inside .topbar (z-index 20) it covered them in a higher stacking
   * context, making both unreachable rather than merely dimmed -- elementFromPoint
   * over the altitude chip returned a mode button.
   *
   * Give the switcher the second HUD row instead, level with the airport card on
   * the right, and send the LIVE chip to the free right end of the first row. Total
   * HUD height is unchanged; only the horizontal lanes are separated.
   */
  .mode-switcher {
    position: absolute;
    top: calc(var(--top) + 56px);
    left: calc(var(--map-edge) + var(--map-left-clearance));
    transform: none;
    z-index: 9;
    white-space: nowrap;
  }
  .map-top-left {
    /* The LIVE chip is 68px wide; keep an 8px gap before its fixed right lane. */
    right: calc(var(--map-edge) + var(--map-right-clearance) + 76px);
    min-width: 0;
  }
  .map-top-left .mode-hud,
  .map-top-left .map-altitude-control {
    min-width: 0;
    flex: 0 1 auto;
  }
  .map-top-left .map-altitude-toggle {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
  }
  .map-top-left .map-altitude-toggle output {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .map-clock-mode {
    left: auto;
    right: calc(var(--map-edge) + var(--map-right-clearance));
    transform: none;
  }
  .mode-switcher-select { min-height: 36px; padding: 6px 10px; font-size: 11px; }
  .mode-switcher-settings { flex-basis: 36px; width: 36px; height: 36px; font-size: 17px; }
  .mode-preset-tab { font-size: 9px; min-height: 30px; }
  .airport-control { top: 56px; }
  .airport-control-toggle { min-height: 44px; padding-inline: 10px; font-size: 10px; box-sizing: border-box; }
  .airport-overlay {
    right: calc(1px - var(--map-right-clearance));
    width: min(260px, calc(100vw - 24px));
    padding: 8px;
    box-sizing: border-box;
  }
  .airport-overlay-heading { gap: 8px; margin-bottom: 8px; }
  .airport-overlay-heading label { font-size: 10px; }
  .airport-overlay-heading label small { font-size: 9px; }
  .airport-overlay-heading > button { flex-basis: 44px; width: 44px; height: 44px; font-size: 18px; }
  .airport-select-row { grid-template-columns: minmax(0, 1fr) 44px; gap: 6px; }
  .airport-overlay select { min-height: 44px; font-size: 11px; }
  .airport-favorite-toggle { width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 19px; }
  .airport-home-hint { margin-top: 8px; font-size: 9px; }
  .map-home-icon { width: 15px; height: 15px; }
  .map-home-button small { font-size: 9px; }
  .airport-quick-access { gap: 6px; margin-top: 6px; }
  .airport-quick-choice { min-width: 44px; min-height: 44px; padding: 6px 8px; font-size: 10px; }
  /* 좌표 칩의 폭에 밀리지 않게 지도 왼쪽을 기준으로 본체와 바깥 버튼을 배치한다. */
  .wind-overlay { position: absolute; left: 0; bottom: 42px; width: min(var(--weather-form-width, 240px), calc(100vw - 24px - var(--weather-action-width) - var(--weather-action-gap))); min-width: 0; }
  .wind-overlay.is-collapsed .wind-overlay-toggle span,
  .wind-overlay.is-minimized:not(.is-collapsed) .wind-overlay-toggle span { font-size: 0; }
  .wind-overlay.is-collapsed .wind-overlay-toggle span i,
  .wind-overlay.is-minimized:not(.is-collapsed) .wind-overlay-toggle span i { font-size: 13px; }
  .connection { min-width: 0; }
  .saved-tracks-toggle span { display: none; }
  .time-shift-toggle span { display: none; }
  .connection small { display: none; }
  .icon-button { width: 34px; height: 34px; color: #a7d3e3; font-size: 19px; }
  .aircraft-watch-dialog { max-height: calc(100vh - 16px); }
  .aircraft-watch-options { grid-template-columns: 1fr; }
  .aircraft-watch-options label > span { min-height: 0; }
  .aircraft-watch-message { align-items: flex-start; flex-direction: column; }
  .aircraft-watch-message > div:last-child { width: 100%; flex-wrap: wrap; }
  .toast { bottom: 72px; }
  .statusbar-center { max-width: none; flex: 1 1 0; }
  .statusbar-ops > span + span::before,
  .statusbar-meta > span + span::before { margin: 0 5px; }
  .activity-stream-time, .activity-stream-action { display: none; }
  .transport-bar {
    bottom: var(--replay-clearance, 52px); width: min(740px, max(290px, calc(100% - 408px))); min-height: 70px;
    grid-template-columns: 30px minmax(0, 1fr) 104px auto 44px;
    grid-template-areas: "play info speed actions exit" "clock clock clock clock clock" "timeline timeline timeline timeline timeline" "range range range range range";
    gap: 6px 5px;
  }
  .transport-speed-toggle { width: 104px; padding: 0 22px 0 8px; }
  .transport-speed-popover { right: 0; width: min(190px, calc(100vw - 28px)); }
  .transport-auto-option { height: 32px; }
  .transport-speed-option { min-width: 0; height: 32px; }
  .transport-auto-zoom-inline { width: 144px; padding: 0 5px; }
  .transport-context-traffic-inline { width: 70px; padding: 0 5px; }
  .transport-save { width: 54px; padding: 0 4px; }
  .transport-jump { width: 56px; padding-left: 6px; }
  .transport-bar button.transport-exit { width: 44px; flex-basis: 44px; padding: 0 3px; }
  .transport-jump-popover { right: 0; bottom: calc(100% + 6px); }
  .theme-modal { padding: 8px; }
  .search-overlay { top: auto !important; right: 8px; bottom: 8px; left: 8px !important; width: auto; }
  .search-dialog { max-height: calc(100vh - 16px); overflow-y: auto; }
  .search-dialog .search-results { max-height: min(260px, calc(100dvh - 176px)); }
  .saved-tracks-dialog { max-height: calc(100vh - 16px); }
  .saved-tracks-tools { grid-template-columns: 1fr 1fr; padding: 10px 12px 7px; }
  .saved-tracks-tools input { grid-column: 1 / -1; }
  .saved-track-edit { grid-template-columns: 1fr 1fr; padding: 8px 12px; }
  .saved-tracks-list { padding: 0 12px 12px; }
  .saved-track-card { grid-template-columns: 82px minmax(0, 1fr); }
  .saved-track-thumb { width: 82px; }
  .saved-track-card .saved-track-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .statusbar-ops #providerText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /*
   * At this width the date pushes the provider name and health readout out of the
   * bar. The time is the part that changes and matters; the date stays in the
   * #clock tooltip.
   */
  .clock-date { display: none; }
  #fpsText { display: none; }
  .schedule-lab { bottom: 38px; padding: 8px; }
  .schedule-lab-controls { flex-wrap: wrap; }
  .schedule-lab-controls label { width: 100%; }
  .schedule-lab-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-lab-tago { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 380px) {
  .map-top-left .mode-hud { gap: 4px; padding-inline: 6px; }
  .map-top-left .mode-hud > span { display: none; }
}

@media (max-height: 620px) and (min-width: 821px) {
  .control-panel { padding-top: 10px; }
  /* The detail panel's top inset lives in its sticky heading, not its own padding. */
  .detail-panel { --detail-heading-inset: 10px; }
  .control-section { padding: 9px 0; }
  .panel-heading { margin-bottom: 8px; }
}

/* Keep every topbar control reachable on narrow phones instead of clipping the right edge. */
@media (max-width: 600px) {
  .transport-bar {
    bottom: calc(var(--replay-clearance, 52px) + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 18px); min-height: 0; padding: 8px;
    grid-template-columns: 44px minmax(0, 1fr) 88px 44px 44px;
    grid-template-areas: "info info info info info" "play speed speed exit more" "clock clock clock clock clock" "timeline timeline timeline timeline timeline" "range range range range range";
    gap: 4px;
  }
  .transport-play,
  .transport-bar button.transport-exit,
  .transport-more-toggle { width: 44px; height: 44px; min-height: 44px; }
  .transport-bar button.transport-exit { flex-basis: 44px; padding: 0 2px; font-size: 8px; }
  .transport-more-toggle {
    grid-area: more; display: inline-grid; place-items: center; padding: 0;
    border-color: var(--transport-button-border); font-size: 19px; line-height: 1; letter-spacing: .04em;
  }
  .transport-more-toggle[aria-expanded="true"] { border-color: var(--transport-accent); background: #443716; color: #fff; }
  .transport-bar .transport-speed-toggle { width: 88px; height: 44px; padding: 0 16px 0 5px; font-size: 8px; }
  .transport-speed-toggle::after { right: 5px; }
  .transport-info-headline { min-width: 0; }
  .transport-info small { margin-right: 4px; font-size: 8px; }
  .transport-info strong { font-size: 10px; }
  .transport-info #transportStatus { font-size: 11px; }
  .transport-range { font-size: 10px; gap: 4px; }
  .transport-timeline-wrap { min-height: 44px; }
  .transport-timeline { height: 44px; touch-action: pan-x; }
  .transport-actions {
    position: absolute; right: 8px; bottom: calc(100% + 8px); z-index: 10;
    display: none; width: min(244px, calc(100vw - 34px)); padding: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    border: 1px solid var(--transport-border); border-radius: 8px;
    background: #0b1922fa; box-shadow: 0 14px 34px #000b;
  }
  .transport-bar.transport-more-open .transport-actions { display: grid; }
  .transport-actions > button { width: 100%; min-width: 0; height: 44px; min-height: 44px; flex: initial; padding: 0 5px; font-size: 9px; }
  .transport-actions .transport-auto-option { width: 100%; height: 44px; }
  .transport-jump-popover { max-height: min(560px, calc(100dvh - 120px)); }
  .workspace:has(.radar-stage[data-transport-mode]) .control-panel.open,
  .workspace:has(.radar-stage[data-transport-mode]) .detail-panel.open {
    bottom: calc(var(--replay-clearance, 52px) + var(--transport-height, 170px) + 8px + env(safe-area-inset-bottom, 0px));
  }
}

/* 지도 영역이 좁아지면 날짜와 조작을 나누고 하단 지도 조작 영역을 비운다. */
@container radar-stage (max-width: 1060px) {
  .transport-bar {
    width: min(740px, max(290px, calc(100% - 408px))); padding: 8px;
    grid-template-columns: 44px minmax(0, 1fr) 88px 60px 44px;
    grid-template-areas: "info info info info info" "play speed speed exit more" "clock clock clock clock clock" "timeline timeline timeline timeline timeline" "range range range range range";
    gap: 4px;
  }
  .transport-more-toggle { grid-area: more; display: inline-grid; place-items: center; width: 44px; font-size: 19px; }
  .transport-actions {
    position: absolute; right: 8px; bottom: calc(100% + 8px); z-index: 10;
    display: none; width: min(244px, calc(100% - 16px)); padding: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    border: 1px solid var(--transport-border); border-radius: 8px;
    background: #0b1922fa; box-shadow: 0 14px 34px #000b;
  }
  .transport-bar.transport-more-open .transport-actions { display: grid; }
  .transport-actions > button { width: 100%; min-width: 0; flex: initial; }
  .transport-info #transportStatus { font-size: 11px; }
  .transport-range { font-size: 10px; gap: 4px; }
}

@media (max-width: 480px) {
  .topbar { padding: 0 8px; gap: 5px; }
  .brand { min-width: 0; flex: 1 1 auto; gap: 6px; overflow: hidden; }
  .brand strong { font-size: 12px; letter-spacing: .1em; white-space: nowrap; }
  .brand small { display: none; }
  .topbar-quick-actions { flex: 0 0 auto; gap: 4px; }
  .topbar-quick-action { width: 36px; height: 36px; }
  .connection { flex: 0 0 8px; min-width: 8px; gap: 0; }
  .connection strong { display: block; width: 8px; font-size: 0; }
  .connection #statusText,
  .connection-backup,
  .connection small { display: none; }
  .connection .status-dot { width: 7px; height: 7px; }
  #detailToggle { flex: 0 0 36px; width: 36px; min-width: 36px; height: 36px; padding: 0; }
  #detailToggle small { display: none; }
  .panel-toggle > span { font-size: 16px; }
  /* Preserve enough room for the integrated activity stream on narrow phones. */
  .statusbar #serverText { display: none; }
}

@media (max-width: 360px) {
  .activity-current-panel > .activity-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    row-gap: 4px;
    min-height: 0;
  }
  .activity-current-panel > .activity-filter-row .activity-basis-label {
    grid-column: 1 / -1;
  }
}

/* One-shot "내 주변 하늘" finder: native dialog keeps focus contained without a JS focus loop. */
.nearby-sky-dialog {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(480px, calc(100vw - 28px));
  max-height: min(80dvh, 740px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #2a6377;
  border-radius: 16px;
  background: linear-gradient(155deg, #0a1d29, #07141d 76%);
  color: #d5eaf0;
  box-shadow: 0 22px 70px #000b;
}
.nearby-sky-dialog[open] { display: flex; flex-direction: column; }
.nearby-sky-dialog::backdrop { background: #020a10cc; }
.nearby-sky-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #1a3d4c;
}
.nearby-sky-eyebrow { color: #69d4e5; font: 750 9px/1.2 ui-monospace, monospace; letter-spacing: .12em; }
.nearby-sky-heading h2 { margin: 5px 0 0; color: #e3f3f7; font-size: 19px; line-height: 1.15; }
.nearby-sky-close {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid #315d70;
  border-radius: 11px;
  background: #0b202b;
  color: #b6dce7;
  font: 400 25px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.nearby-sky-close:hover { border-color: #67c5d8; color: #fff; }
.nearby-sky-close:focus-visible,
.nearby-sky-actions button:focus-visible,
.nearby-sky-card:focus-visible { outline: 2px solid #65d6e6; outline-offset: 2px; }
.nearby-sky-body {
  min-height: 0;
  max-height: min(calc(80dvh - 72px), 660px);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 12px 16px 16px;
}
.nearby-sky-description { margin: 0 0 11px; color: #a9c3cd; font-size: 12px; line-height: 1.5; }
.nearby-sky-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.nearby-sky-actions button {
  min-width: 0;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid #2b697d;
  border-radius: 10px;
  background: #102d3a;
  color: #dff7fb;
  font: 700 11px/1.25 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.nearby-sky-actions .nearby-sky-primary {
  border-color: #287a82;
  background: linear-gradient(145deg, #124451, #102f3c);
  color: #c9fff0;
}
.nearby-sky-actions button:hover:not(:disabled) { border-color: #63cfe0; background-color: #153d4b; }
.nearby-sky-actions button:disabled { opacity: .68; cursor: wait; }
.nearby-sky-location-status,
.nearby-sky-live-status {
  margin: 9px 1px 0;
  color: #8eabb7;
  font-size: 10px;
  line-height: 1.45;
}
.nearby-sky-live-status { color: #78d8bd; font-variant-numeric: tabular-nums; }
.nearby-sky-results { display: grid; gap: 7px; margin-top: 10px; }
.nearby-sky-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 20px 12px;
  border: 1px dashed #24495a;
  border-radius: 12px;
  background: #091923;
  text-align: center;
}
.nearby-sky-empty-icon { color: #70d9c0; font-size: 24px; line-height: 1; }
.nearby-sky-empty strong { color: #d6edf3; font-size: 12px; line-height: 1.4; }
.nearby-sky-empty p { max-width: 330px; margin: 0; color: #91aab5; font-size: 10px; line-height: 1.5; }
.nearby-sky-card {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 70px;
  padding: 9px 11px;
  border: 1px solid #234e60;
  border-radius: 10px;
  background: #0b202b;
  color: #cde5ec;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.nearby-sky-card:hover { border-color: #53aab9; background: #0e2a37; }
.nearby-sky-card-heading,
.nearby-sky-card-meta,
.nearby-sky-card-foot { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.nearby-sky-card-heading strong {
  min-width: 0; overflow: hidden; color: #e1f6fa; text-overflow: ellipsis; white-space: nowrap;
  font: 750 12px/1.25 ui-monospace, monospace;
}
.nearby-sky-card-heading b { flex: 0 0 auto; color: #84e7d0; font: 750 12px/1.25 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.nearby-sky-card-meta { color: #a3bfca; font: 10px/1.3 ui-monospace, monospace; }
.nearby-sky-card-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nearby-sky-card-foot { align-items: baseline; color: #83ddc4; font-size: 9px; line-height: 1.35; }
.nearby-sky-card-foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nearby-sky-card-foot small { flex: 0 0 auto; color: #7896a3; font-size: 8px; white-space: nowrap; }
.nearby-sky-more { margin: 1px 2px 0; color: #7896a3; font-size: 9px; text-align: center; }
.nearby-sky-privacy { margin: 12px 1px 0; padding-top: 10px; border-top: 1px solid #1a3a49; color: #7795a1; font-size: 9px; line-height: 1.5; }

@media (max-width: 600px) {
  .nearby-sky-dialog {
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: 84dvh;
    margin: 0 auto;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 18px 18px 0 0;
  }
  .nearby-sky-heading { padding: 13px 16px 10px; }
  .nearby-sky-heading h2 { font-size: 18px; }
  .nearby-sky-body { max-height: calc(84dvh - 70px - env(safe-area-inset-bottom, 0px)); padding: 11px 14px calc(13px + env(safe-area-inset-bottom, 0px)); }
  .nearby-sky-actions button { min-height: 48px; padding-inline: 7px; }
  .nearby-sky-card { min-height: 72px; padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}