/* vFIDS application styles. Served via vfids_asset.php?asset=vfids-css. */
[data-vfids-feature][hidden], #changelogModalBody li[hidden] { display: none !important; }
:root {
      --bg: #050b14;
      --bg-root: #050b14;
      --bg-gradient: radial-gradient(circle at 46% 0%, #112944 0%, #07111f 45%, #050b14 78%);
      --glass-surface: rgba(14, 26, 43, 0.72);
      --glass-border: rgba(126, 207, 255, 0.11);
      --glass-highlight: rgba(32, 200, 255, 0.05);
      --primary: #20c8ff; --primary-dim: rgba(32, 200, 255, 0.16);
      --text-main: #f1f5f9; --text-muted: #94a3b8;
      --good: #10b981; --good-bg: rgba(16, 185, 129, 0.15);
      --warn: #f59e0b; --warn-bg: rgba(245, 158, 11, 0.15);
      --bad: #ef4444;  --bad-bg: rgba(239, 68, 68, 0.15);
      --info: #0ea5e9; --info-bg: rgba(14, 165, 233, 0.15);
      --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }

    :root[data-theme="dark"] {
      --bg: #050b14;
      --bg-root: #050b14;
      --bg-gradient: radial-gradient(circle at 46% 0%, #112944 0%, #07111f 45%, #050b14 78%);
      --glass-surface: rgba(14, 26, 43, 0.72);
      --glass-border: rgba(126, 207, 255, 0.11);
      --glass-highlight: rgba(32, 200, 255, 0.05);
      --primary: #20c8ff;
      --primary-dim: rgba(32, 200, 255, 0.16);
      --text-main: #f1f5f9;
      --text-muted: #94a3b8;
      --good: #10b981;
      --good-bg: rgba(16, 185, 129, 0.15);
      --warn: #f59e0b;
      --warn-bg: rgba(245, 158, 11, 0.15);
      --bad: #ef4444;
      --bad-bg: rgba(239, 68, 68, 0.15);
      --info: #0ea5e9;
      --info-bg: rgba(14, 165, 233, 0.15);
    }

    :root[data-theme="light"] {
      --bg: #f1f4f6;
      --bg-root: #f1f4f6;
      --bg-gradient: none;
      --glass-surface: #ffffff;
      --glass-border: #d4dce3;
      --glass-highlight: #eef6f8;
      --primary: #076780;
      --primary-dim: #e4f3f6;
      --text-main: #202c39;
      --text-muted: #526175;
      --good: #086447;
      --good-bg: #e7f3ed;
      --warn: #8a4608;
      --warn-bg: #fff3df;
      --bad: #b4232d;
      --bad-bg: #fdeced;
      --info: #075e87;
      --info-bg: #e8f3fa;
    }

    .headerDivider { height: 24px; border-left: 1px solid var(--glass-border); margin: 0 8px; }
    .sidebarSectionTop { margin-top: 20px; }
    .sidebarMetarText { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; color: var(--text-muted); }
    .mobileConfigBtn { width: 100%; margin-bottom: 10px; justify-content: center; display: flex; gap: 10px; }
    .airportViewHidden { display: none; }
    .modalSubtitleTiny { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
    .xpBreakdownDivider { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--glass-border); }
    .pilotBreakdownTitle { margin-bottom: 8px; border: none; }
    .cfgTitle { margin-bottom: 16px; color: var(--primary); }
    .cfgAirportInput { width: 100%; text-align: center; font-weight: 700; text-transform: uppercase; }
    .cfgSelectLanguage { width: 140px; }
    .cfgSelectBoardMode { width: 190px; }
    .cfgSectionTitle { margin: 24px 0 12px; color: var(--primary); }
    .cfgHelpSpaced { margin-bottom: 12px; }
    .cfgSubhead { margin: 0 0 8px 0; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .cfgCacheActions { justify-content: space-between; }
    .cfgCacheActionButtons { display: flex; gap: 10px; align-items: center; }
    .legendContents { display: contents; }
    .autocompleteAirportName { font-size: 10px; opacity: 0.6; }
    .runwayInlineNotice { opacity: 0.5; font-size: 11px; font-family: var(--font-mono); border: 1px solid var(--glass-border); padding: 2px 6px; border-radius: 4px; }
    .runwayLoadingText { opacity: 0.7; font-size: 12px; font-family: var(--font-mono); }
    .atisBadgeInline { padding: 1px 4px; font-size: 9px; vertical-align: middle; background: var(--primary); color: #000; border-radius: 2px; }
    .runwayStatusIcon { margin-right: 6px; font-size: 14px; }
    .runwayStatusIcon.warn { color: var(--warn); }
    .runwayStatusIcon.info { color: var(--info); }
    .sidebarRunwayStack { display: flex; flex-direction: column; gap: 10px; }
    .xpLegendPill { cursor: default; }
    .boardStrong { font-weight: 800; }
    .nowrapEllipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mutedLow { opacity: 0.2; }
    .unitSmall { font-size: 9px; opacity: 0.6; }
    .actualPilotMapFill { width: 100%; height: 100%; }
    .xpIndexDot { margin-top: 4px; }
    .xpIndexLabel { font-weight: 700; color: var(--text-muted); }
    .xpIndexValue { font-weight: 800; color: var(--text-main); text-align: right; }
    .xpIndexLoaded { color: var(--text-muted); font-size: 9px; opacity: 0.7; }
    .xpIndexTooltipGrid { display: grid; white-space: normal; grid-template-columns: auto auto auto auto; gap: 2px 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; }
    .xpIndexTooltipTitle { grid-column: 1/-1; margin-bottom: 2px; font-weight: 700; font-size: 10px; letter-spacing: 0.05em; color: var(--text-main); border-bottom: 1px solid var(--glass-border); padding-bottom: 2px; }
    #fullscreenBtn.fullscreenStretch { color: var(--primary); }
    #fullscreenBtn.fullscreenActive { color: var(--bad); }

    :root[data-theme="light"] header {
      background: rgba(248, 251, 255, 0.9);
      box-shadow: 0 4px 20px rgba(40, 62, 90, 0.12);
    }
    :root[data-theme="light"] .brand h1,
    :root[data-theme="light"] .board h2,
    :root[data-theme="light"] .modal h3,
    :root[data-theme="light"] .modal h4 {
      color: #162033;
    }
    :root[data-theme="light"] .brandDescriptor { color: #5b6f89; }
    :root[data-theme="light"] .mobile-sidebar { background: #f8fbff; box-shadow: -10px 0 30px rgba(43, 62, 90, 0.18); }
    :root[data-theme="light"] .sidebar-overlay { background: rgba(15, 23, 42, 0.28); }
    :root[data-theme="light"] .board,
    :root[data-theme="light"] .modal,
    :root[data-theme="light"] .cfg-section,
    :root[data-theme="light"] .cfgBlock,
    :root[data-theme="light"] .card,
    :root[data-theme="light"] details.card,
    :root[data-theme="light"] .pilotMapCard {
      background: rgba(255, 255, 255, 0.84);
      border-color: var(--glass-border);
      box-shadow: 0 12px 32px rgba(46, 70, 101, 0.11);
    }
    :root[data-theme="light"] th,
    :root[data-theme="light"] .boardHeader,
    :root[data-theme="light"] .modalHead,
    :root[data-theme="light"] .cfgActions,
    :root[data-theme="light"] footer.legendBar {
      background: rgba(248, 251, 255, 0.88);
      border-color: var(--glass-border);
    }
    :root[data-theme="light"] tbody tr:hover { background-color: rgba(8, 126, 164, 0.07); }
    :root[data-theme="light"] .cfg-input,
    :root[data-theme="light"] select,
    :root[data-theme="light"] input {
      background-color: rgba(255, 255, 255, 0.92);
      color: var(--text-main);
      border-color: rgba(42, 75, 112, 0.20);
    }
    :root[data-theme="light"] .pill,
    :root[data-theme="light"] .badge,
    :root[data-theme="light"] .tabBtn,
    :root[data-theme="light"] button {
      box-shadow: none;
    }
    :root[data-theme="light"] .leaflet-container {
      filter: saturate(0.88) brightness(1.04) contrast(0.96);
    }

    /* --- BASIS --- */
    * { box-sizing: border-box; }
    body { margin: 0; background-color: var(--bg-root); background-image: var(--bg-gradient); background-attachment: fixed; color: var(--text-main); font-family: var(--font-ui); padding-bottom: 60px; min-height: 100vh; -webkit-font-smoothing: antialiased; }
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

    /* --- LAYOUT HEADER --- */
    header { position: sticky; top: 0; z-index: 50; background: rgba(5, 11, 20, 0.88); border-bottom: 1px solid var(--glass-border); backdrop-filter: blur(16px); box-shadow: 0 4px 22px rgba(0,8,20,0.32); }
    .wrap { max-width: 1600px; margin: 0 auto; padding: 12px 20px; }
    .topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; }

    .headerLeft { display: flex; align-items: center; gap: 16px; min-width: 0; }
    .brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-main); text-decoration: none; }
    .brandLogo { width: 42px; height: 42px; flex: 0 0 auto; filter: drop-shadow(0 4px 10px rgba(32,200,255,0.2)); }
    .brandText { display: flex; flex-direction: column; min-width: 0; }
    .brand h1 { margin: 0; font-size: 22px; font-weight: 760; line-height: 1; letter-spacing: 0; color: #f8fbff; }
    .brandV { color: var(--primary); }
    .brand .sub { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; white-space: nowrap; }
    .brandDescriptor { color: #b7c7da; overflow: hidden; text-overflow: ellipsis; }

    #utcClockMobile { display: none; } /* Default Desktop */

    /* --- SIDEBAR & MOBILE --- */
    .mobile-sidebar { position: fixed; right: -320px; top: 0; width: 300px; height: 100%; background: #111418; z-index: 3000; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 25px; box-shadow: -10px 0 30px rgba(0,0,0,0.7); border-left: 1px solid var(--glass-border); overflow-y: auto; visibility: hidden; }
    .mobile-sidebar.open { transform: translateX(-320px); visibility: visible; }
    .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 2999; display: none; backdrop-filter: blur(4px); animation: fadeIn 0.2s; }
    .sidebar-overlay.open { display: block; }
    .sidebar-section { margin-bottom: 30px; }
    .sidebarWeatherTrigger { display: block; position: relative; width: 100%; height: auto; padding: 12px 28px 12px 12px; text-align: left; white-space: normal; border: 1px solid var(--glass-border); border-radius: 6px; background: transparent; color: var(--text-main); cursor: pointer; }
    .sidebarWeatherTrigger:hover { border-color: var(--text-muted); background: transparent; }
    .sidebarWeatherTrigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
    .sidebarWeatherArrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 22px; }
    .sidebar-section h4 { font-size: 11px; text-transform: uppercase; color: var(--primary); margin-bottom: 15px; border-bottom: 1px solid var(--glass-border); padding-bottom: 5px; opacity: 0.8; }
    .sidebar-close { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 24px; color: var(--text-muted); cursor: pointer; padding: 5px; }

    #mobileMenuBtn { display: none; font-size: 16px; background: var(--primary-dim); color: var(--primary); border: 1px solid var(--primary); border-radius: 6px; cursor: pointer; flex-shrink: 0; }

    /* --- MOBILE OPTIMIERUNGEN (Zusammengefasst) --- */
    @media (max-width: 900px) {
        .topbar { grid-template-columns: auto minmax(50px, 1fr) auto; gap: 10px; padding: 8px 0; }
        .brand .sub, #runwayContainer, .controls button:not(#mobileMenuBtn), #utcPill { display: none !important; }
        .brand { gap: 8px; }
        .brandLogo { width: 32px; height: 32px; }
        .brand h1 { font-size: 17px; }
        .headerLeft { gap: 0; }
        #utcClockMobile {
            display: block; font-family: var(--font-mono); font-size: 12px; color: var(--primary); font-weight: 700; margin-top: -2px;
        }
        .airportTabs { transform: scale(0.8); justify-self: center; flex-shrink: 1; min-width: 0; }
        .controls { justify-content: flex-end; gap: 6px; flex-shrink: 0; display: flex; align-items: center; }
        .pill.clockPill { padding: 4px 8px; border: none; background: transparent; }
        .pill.clockPill .dot, .pill.clockPill span:not(#utcClock) { display: none; }
        .legendInner > *:not(.statusGroup) { display: none !important; }
        .statusGroup { margin: 0 auto; width: 100%; justify-content: center; gap: 8px; }
        .legendVersion::before { display: none; }
        body.sidebar-open { overflow: hidden; }
        #mobileMenuBtn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
    }

    /* --- FULLSCREEN APP --- */
    body.app-full { overflow: hidden; }
    body.app-full header { position: fixed; width: 100%; top: 0; }
    body.app-full main { padding-top: 80px; }
    body.app-full .wrap { max-width: 100% !important; padding: 0 10px !important; }
    body.app-full main .wrap { height: calc(100vh - 140px); }
    body.app-full .grid { height: 100%; gap: 10px; }
    body.app-full .board { min-height: 0; flex: 1; }
    body.app-full footer { position: fixed; bottom: 0; width: 100%; }

    /* --- UI ELEMENTS (Header) --- */
    .controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

    .airportTabs { display: flex; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 8px; padding: 2px; gap: 2px; }
    .airportTab { border: none; background: transparent; color: var(--text-muted); padding: 6px 12px; font-size: 13px; font-weight: 700; border-radius: 6px; cursor: pointer; transition: all 0.2s; font-family: var(--font-mono); text-transform: uppercase; }
    .airportTab:hover { background: rgba(255,255,255,0.05); color: #fff; }
    .airportTab.active { background: var(--primary-dim); color: var(--primary); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2); }
    .airportTab:disabled { opacity: 0.3; cursor: default; background: transparent; box-shadow: none; color: var(--text-muted); }

    /* --- FORMS & INPUTS --- */
    label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
    input, select, button { background: rgba(0,0,0,0.3); color: var(--text-main); border: 1px solid var(--glass-border); border-radius: 8px; padding: 8px 12px; font-size: 13px; outline: none; font-family: var(--font-ui); transition: all 0.2s ease; }
    input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-dim); background: rgba(0,0,0,0.5); }
    /* Global Input style (Header use-case primarily) */
    input { font-family: var(--font-mono); text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; width: 80px; text-align: center; }

    button { cursor: pointer; font-weight: 600; background: rgba(255,255,255,0.03); }
    button:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
    button:active { transform: translateY(1px); }
    button.debug-active { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.1); animation: pulseRed 2s infinite; }
    @keyframes pulseRed { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }

    /* --- CLOCK PILL --- */
    .pill { font-family: var(--font-mono); font-size: 11px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--glass-border); background: rgba(0,0,0,0.2); color: var(--text-muted); display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
    .pill.clockPill { background: rgba(14, 165, 233, 0.08); border-color: rgba(14, 165, 233, 0.2); color: #bae6fd; }
    #utcClock { font-weight: 700; color: #fff; letter-spacing: 0.05em; font-size: 1.25em; }
    .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 0 5px rgba(255,255,255,0.1); }
    .dot.good { background: var(--good); box-shadow: 0 0 6px var(--good); }
    .dot.warn { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
    .dot.bad { background: var(--bad); box-shadow: 0 0 6px var(--bad); }
    .dot.info { background: var(--info); box-shadow: 0 0 6px var(--info); }

    /* --- BOARD & GRID --- */
    main .wrap { padding-top: 24px; padding-bottom: 40px; }
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .airport-view.board-mode-single { grid-template-columns: minmax(0, 1fr); }
    .airport-view { position: relative; isolation: isolate; }
    .airportLoadOverlay {
      position: absolute;
      inset: 0;
      z-index: 30;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: clamp(18px, 8vh, 72px) 28px 28px;
      background: linear-gradient(180deg, rgba(7,10,15,0.14), rgba(7,10,15,0.26));
      pointer-events: none;
    }
    .airportLoadOverlay[hidden] { display: none !important; }
    /* Remote boards are fully hidden until individually verified. The app
       header, airport tabs, settings and legal controls remain available. */
    .vfidsRemotePresentation .airport-view.loading { min-height: 360px; }
    .vfidsRemotePresentation .airport-view.loading .board { display: none !important; }
    .vfidsRemotePresentation .airportLoadOverlay { background: none; padding: 56px 20px; pointer-events: auto; }
    .vfidsRemotePresentation .airportLoadCard { min-width: 0; width: min(420px,100%); max-width: 100%; padding: 24px; gap: 14px; border: 0; box-shadow: none; background: transparent; backdrop-filter: none; }
    .vfidsRemotePresentation .airportLoadSpinner { width: 24px; height: 24px; border-width: 2px; border-top-color: var(--primary); }
    .vfidsRemotePresentation .airportLoadTitle { font-size: 15px; letter-spacing: .01em; text-transform: none; color: var(--text-main); }
    .vfidsRemotePresentation .airportLoadText { color: var(--text-muted); }
    .vfidsRemotePresentation .airport-view[data-load-state="error"] .airportLoadSpinner { animation: none; border-color: var(--warn); }
    .vfidsAirportRetry { border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text-main); padding: 8px 12px; font: inherit; font-size: 12px; cursor: pointer; }
    .vfidsAirportRetry[hidden] { display: none; }
    .vfidsAirportRetry:disabled { opacity: .55; cursor: wait; }
    .airportTab[data-load-state]:not([data-load-state="ready"])::after { content: ""; display: inline-block; vertical-align: middle; margin-left: 7px; width: 8px; height: 8px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; opacity: .7; }
    .airportTab[data-load-state="error"]::after { background: var(--warn); border-color: var(--warn); animation: none; }
    @media (prefers-reduced-motion: reduce) { .airportTab[data-load-state]::after, .vfidsRemotePresentation .airportLoadSpinner { animation: none !important; } }
    .airportLoadCard {
      min-width: min(340px, calc(100vw - 48px));
      max-width: min(460px, 92%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 22px 24px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.11);
      background: rgba(12,18,28,0.74);
      box-shadow: 0 24px 56px rgba(0,0,0,0.34);
      backdrop-filter: blur(16px);
      text-align: center;
    }
    .airportLoadSpinner {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 3px solid rgba(255,255,255,0.12);
      border-top-color: rgba(255,255,255,0.95);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset;
      animation: spin 0.9s linear infinite;
    }
    .airportLoadTitle {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #f8fafc;
    }
    .airportLoadText {
      max-width: 34ch;
      font-size: 12px;
      line-height: 1.5;
      color: #cbd5e1;
    }
    .airportLoadSteps {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-top: 2px;
    }
    .airportLoadStep {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 7px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 999px;
      background: rgba(255,255,255,0.045);
      color: var(--text-muted);
      font: 700 10px/1 var(--font-mono);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .airportLoadStep .dot {
      width: 5px;
      height: 5px;
      box-shadow: none;
      background: rgba(148,163,184,0.62);
    }
    .airportLoadStep.done {
      border-color: rgba(34,197,94,0.18);
      color: #bbf7d0;
      background: rgba(34,197,94,0.08);
    }
    .airportLoadStep.done .dot {
      background: var(--good);
      box-shadow: 0 0 6px rgba(34,197,94,0.55);
    }
    .airport-view.loading .board {
      filter: blur(8px) saturate(0.82);
      opacity: 0.52;
      transform: scale(0.994);
      pointer-events: none;
      user-select: none;
    }
    .airport-view.loading .board,
    .airport-view.loading .board * {
      transition: none !important;
      animation-play-state: paused !important;
      caret-color: transparent;
    }
    @media (max-width: 1100px) { .grid { grid-template-columns: 1fr; } }
    @media (max-width: 700px) {
      .airportLoadOverlay { padding: 16px 16px 12px; }
      .airportLoadCard {
        min-width: 0;
        width: 100%;
        padding: 18px 16px;
        gap: 8px;
      }
      .airportLoadSpinner {
        width: 34px;
        height: 34px;
      }
    }

    .board { background: var(--glass-surface); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column; min-height: 500px; }
    .board.is-hidden-by-mode { display: none !important; }
    .boardHeader { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--glass-border); background: rgba(255,255,255,0.02); }
    .boardHeader h2 { margin: 0; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
    .boardHeader h2::before { content:''; display:block; width:4px; height:16px; background:var(--primary); border-radius:2px; }
    .boardHeader .mini { display: flex; gap: 8px; align-items: center; }

    /* --- RUNWAY & METAR --- */
    .runwayBox { display: flex; flex-direction: column; justify-content: center; margin-left: 20px; padding-left: 20px; border-left: 1px solid var(--glass-border); height: 42px; }
    #runwayContainer {
      cursor: pointer;
      border-radius: 10px;
      transition: background 0.18s ease, box-shadow 0.18s ease;
    }
    #runwayContainer:hover {
      background: rgba(255,255,255,0.04);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
    }
    #runwayContainer:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px rgba(59,130,246,0.45);
      background: rgba(59,130,246,0.08);
    }
    .runwayRow { display: flex; align-items: center; gap: 16px; font-size: 20px; }
    .runwayGlobal { display: flex; align-items: center; gap: 16px; border: none; margin: 0; padding: 0; height: auto; cursor: pointer; } /* Combined Definition */

    .runwayGroup { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
    .runwayGroup .lbl { font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 10px; opacity: 0.7; }
    .runwayGroup .val { font-weight: 700; color: #fff; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); }
    .runwayGlobal.pred .val { color: var(--warn); border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.1); }
    .runwayGlobal.atis .val { color: #fff; border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.15); }
    .runwaySourceChip { display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: 3px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.12); background: rgba(15,23,42,0.68); color: #cbd5e1; }
    .runwaySourceChip.pred { color: var(--warn); border-color: rgba(245, 158, 11, 0.28); background: rgba(245, 158, 11, 0.10); }
    .runwaySourceChip.atis { color: #dbeafe; border-color: rgba(59, 130, 246, 0.30); background: rgba(59, 130, 246, 0.12); }

    .metarRow { margin-top: 2px; white-space: nowrap; overflow: hidden; max-width: 300px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); opacity: 0.6; letter-spacing: 0.03em; cursor: pointer; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%); mask-image: linear-gradient(to right, #000 85%, transparent 100%); }
    .metarRow.loading { opacity: 0.86; color: #93c5fd; }
    .metarRow:hover { opacity: 1; color: #fff; }
    .hint { font-size: 11px; color: var(--text-muted); font-weight: 500; }

/* --- TABLE STYLING --- */
    table { width: 100%; max-width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; table-layout: auto; }
    thead th { text-align: left; color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 8px; border-bottom: 1px solid var(--glass-border); background: rgba(15, 17, 21, 0.95); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); box-sizing: border-box; }
/* --- TABLE STYLING OPTIMIZED --- */
    /* Hardware-Beschleunigung erzwingen und Easing verbessern */
    tbody tr { 
        position: relative; /* Wichtig für Z-Index */
        transition: background 0.2s, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s; 
        border-bottom: 1px solid rgba(255,255,255,0.03); 
        /* Progress Bar Logic bleibt */
        background-image: var(--bg-prog, none); 
        background-size: var(--prog-pct, 0%) 1.5px; 
        background-repeat: no-repeat; 
        background-position: var(--prog-pos, bottom left); 
    }
    
    /* Bewegte Rows schweben über Nachbarn, ohne automatisch als "Event" zu wirken */
    tbody tr.is-moving {
        z-index: 10;
    }
    tbody tr.is-moving-emph {
        z-index: 11;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        background-color: var(--glass-surface);
    }

    /* Sanfteres Ausblenden beim Entfernen */
    tbody tr.removing { 
        opacity: 0; 
        transform: scale(0.95); 
        pointer-events: none; 
        z-index: 0; 
    }
    
    /* Sanfteres Einblenden */
    tbody tr.adding { 
        opacity: 0; 
        transform: translateY(15px) scale(0.98); 
    }
    tbody tr.prog-ltr { --bg-prog: linear-gradient(to right, var(--prog-color), var(--prog-color)); --prog-pos: bottom left; }
    tbody tr.prog-rtl { --bg-prog: linear-gradient(to left, var(--prog-color), var(--prog-color)); --prog-pos: bottom right; }
    .prog-text { font-size: 9px; color: var(--text-muted); opacity: 0.8; margin-top: 3px; font-family: var(--font-mono); letter-spacing: 0.02em; }
        tbody tr:last-child { border-bottom: none; }
    tbody tr:hover { background-color: var(--glass-highlight); }
    tbody td { padding: 10px 8px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-main); box-sizing: border-box; }

    td.right { padding-right: 16px !important; }
    td:nth-last-child(2), th:nth-last-child(2) { width: 1px; min-width: 150px; } /* Status Spalte Protection */
    .right { text-align: right; }
    .center { text-align: center; }
    .muted { color: var(--text-muted); }

        /* Spalten-Definitionen */
        /* Links klebend */
        th:nth-child(1), td:nth-child(1) { width: 65px; text-align: center; } /* Zeit */
        th:nth-child(2), td:nth-child(2) { width: 90px; } /* Callsign */
        th:nth-child(3), td:nth-child(3) { width: 50px; } /* ICAO (Von/Nach) */

        /* Mitte: Flexibel */
        th:nth-child(4), td:nth-child(4) { width: auto; } /* Type/Route nimmt den Rest */

        /* Rechts klebend */
        th:nth-child(5), td:nth-child(5) { width: 65px; text-align: right; } /* ALT/GS */
        th:nth-child(6), td:nth-child(6) { width: 160px; text-align: left; } /* Status */
        th:nth-child(7), td:nth-child(7) { width: 75px; text-align: right; } /* XP */

        /* Zellen-Inhalte ausrichten */
        td.right { padding-right: 12px !important; }

        /* Route-Spalte Logik (Breite begrenzen damit Text-Overflow funktioniert) */
        .cell-route {

                max-width: 0; /* Erlaubt der Zelle zu schrumpfen und Text abzuschneiden */
                width: 100%;
color: var(--text-muted);
        opacity: 0.5;
        font-size: 11px;

        /* Der Fade-Out Effekt nach rechts */
        -webkit-mask-image: linear-gradient(to right, #000 60%, transparent 95%);
        mask-image: linear-gradient(to right, #000 60%, transparent 95%);
        }

    /* Stacked ALT/GS Cell */
    .cell-stacked { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; line-height: 1.2; }
    .cell-stacked .topVal { font-weight: 700; color: #fff; font-size: 12px; }
    .cell-stacked .botVal { font-weight: 500; color: var(--text-muted); font-size: 11px; opacity: 0.8; }

    /* Row States */
    tbody tr.finishedRow, tbody tr.groundRow { opacity: 0.5; filter: grayscale(0.6); }
    tbody tr.finishedRow:hover, tbody tr.groundRow:hover { opacity: 0.8; }
    tbody tr.landedDivider { border-top: 3px solid rgba(255,255,255,0.10); }
    tbody tr.runwayDividerRow td { padding: 7px 10px 4px; border: none; background: linear-gradient(180deg, rgba(148,163,184,0.035), rgba(148,163,184,0.00)); }
    .runwayDivider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #cbd5e1;
    }
    .runwayDivider.closing {
      opacity: 0.75;
      gap: 0;
    }
    .runwayDivider::before,
    .runwayDivider::after {
      content: "";
      flex: 1 1 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(148,163,184,0.42), transparent);
    }
    .runwayDivider.closing::before,
    .runwayDivider.closing::after {
      background: linear-gradient(90deg, transparent, rgba(148,163,184,0.24), transparent);
    }
    .runwayDivider > span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 10px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.34);
      background: rgba(15,23,42,0.88);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 4px 12px rgba(0,0,0,0.16);
      white-space: nowrap;
    }
    .runwayDivider.closing > span { display: none; }

    /* --- BADGES & PILLS --- */
    .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; transition: all 0.3s ease; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .badge span:not(.sDot) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .badge .sDot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
    .badge.good { background: var(--good-bg); color: var(--good); border-color: rgba(16, 185, 129, 0.2); }
    .badge.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(245, 158, 11, 0.2); }
    .badge.bad  { background: var(--bad-bg); color: var(--bad); border-color: rgba(239, 68, 68, 0.2); }
    .badge.info { background: var(--info-bg); color: var(--info); border-color: rgba(14, 165, 233, 0.2); }
    .badge.blink { animation: pulseGlow 1.5s infinite; }
    @keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.1); } 70% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

    .status-wrapper { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .detail-pill { font-family: var(--font-mono); font-size: 10px; color: #94a3b8; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); padding: 3px 6px; border-radius: 4px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    @media (max-width: 680px) {
      .status-wrapper.swapCompact {
        display: grid;
        align-items: start;
        min-height: 24px;
        width: 100%;
        position: relative;
      }
      .status-wrapper.swapCompact .badge,
      .status-wrapper.swapCompact .detail-pill {
        grid-area: 1 / 1;
        justify-self: start;
        max-width: calc(100% - 2px);
        pointer-events: none;
        transition: opacity 0.18s ease, visibility 0.18s linear;
      }
      .status-wrapper.swapCompact .badge {
        opacity: 1;
        visibility: visible;
      }
      .status-wrapper.swapCompact .detail-pill {
        opacity: 0;
        visibility: hidden;
      }
      :root[data-compact-pill="detail"] .status-wrapper.swapCompact .badge {
        opacity: 0;
        visibility: hidden;
      }
      :root[data-compact-pill="detail"] .status-wrapper.swapCompact .detail-pill {
        opacity: 1;
        visibility: visible;
      }
    }

    .xpPill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2); cursor: help; user-select: none; transition: 0.2s; }
    .xpPill:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); }
    .xpPill .xDot { width: 6px; height: 6px; border-radius: 50%; }
    .xpPill.good .xDot { background: var(--good); box-shadow: 0 0 5px var(--good); }
    .xpPill.warn .xDot { background: var(--warn); box-shadow: 0 0 5px var(--warn); }
    .xpPill.bad  .xDot { background: var(--bad);  box-shadow: 0 0 5px var(--bad); }
    .xpPill.info .xDot { background: var(--info); box-shadow: 0 0 5px var(--info); }
    .xpPill.missing { opacity: 0.5; background: rgba(255,255,255,0.02); border-color: transparent; cursor: default; }
    .xpPill.missing .xDot { background: var(--text-muted); }
    .xpPill.loading { opacity: 0.6; cursor: wait; }
    .xpPill .spinner { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.1); border-top-color: #fff; animation: spin 0.8s linear infinite; }
    @keyframes spin { to{ transform: rotate(360deg); } }
    .dayPlus { margin-left: 4px; font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }

    /* Time Cells */
    td.timeCell { position: relative; padding-top: 18px; }
    td.timeCell.hasSub { padding-bottom: 16px; }
    td.timeCell .timeKind { position: absolute; top: 4px; left: 6px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); opacity: 0.75; pointer-events: none; user-select: none; }
    td.timeCell .timeKind.blink { animation: blinkSoft 1.3s infinite; }
    td.timeCell .timeVal { display: block; }
    td.timeCell .timeVal.loading { display: inline-flex; align-items: center; min-height: 18px; color: var(--text-muted); }
    td.timeCell .timeVal.blink { animation: blinkSoft 1.3s infinite; }
    td.timeCell .timeSpinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.14); border-top-color: rgba(255,255,255,0.95); animation: spin 0.8s linear infinite; }
    td.timeCell .timeSub { position: absolute; bottom: 3px; left: 6px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); opacity: 0.70; pointer-events: none; user-select: none; white-space: nowrap; }
    td.timeCell .timeSub .subKind { margin-right: 6px; opacity: 0.85; }
    @keyframes blinkSoft { 0%,100% { opacity: 0.25; } 50% { opacity: 0.95; } }

    /* --- TOOLTIPS --- */
    .tooltip { position: fixed; z-index: 100; pointer-events: none; background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(255,255,255,0.1); padding: 12px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); font-family: var(--font-mono); font-size: 14px; line-height: 1.5; color: #e2e8f0; opacity: 0; transform: translate(-50%, -115%) scale(0.95); transition: opacity 0.15s, transform 0.15s; white-space: pre; backdrop-filter: blur(8px); }
    .tooltip.show { opacity: 1; transform: translate(-50%, -115%) scale(1); }
    .tooltip.south { transform: translate(-50%, 24px) scale(0.95); padding: 4px 8px; line-height: 2.5; white-space:normal; }
    .tooltip.south.show { transform: translate(-50%, 24px) scale(1); }

    /* --- MODALS GENERAL --- */
    .modalOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center; z-index: 3100; padding: 20px; animation: fadeIn 0.2s ease-out; }
    @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
    .modalOverlay.show { display: flex; }
    .modal { width: min(800px, 100%); background: #1e293b; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); overflow: hidden; display: flex; flex-direction: column; }

    /* Pilot Modal Specifics */
    .modal.pilotModal { width: min(760px, 100%); max-height: min(92vh, 920px); }
    .modalBody.pilotBody { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; grid-template-columns: none; overflow-y: auto; max-height: calc(92vh - 84px); }
    @media (max-width: 800px){
      .modalOverlay { padding: 10px; }
      .modalBody.pilotBody{ padding: 14px; gap: 12px; max-height: calc(92vh - 74px); }
    }

    /* Modal Structure */
    .modalHead { padding: 16px 24px; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; }
    .modalHead h3 { margin: 0; font-size: 16px; color: #fff; letter-spacing: 0.05em; text-transform: uppercase; }
    .modalHead .close { background: transparent; border: none; font-size: 20px; padding: 4px; color: var(--text-muted); }
    .modalHead .close:hover { color: #fff; background: rgba(255,255,255,0.1); }
    .modalBody { padding: 24px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; overflow-y: auto; max-height: 80vh; scrollbar-gutter: stable; }
    @media (max-width: 800px) { .modalBody { grid-template-columns: 1fr; } }
    .legalLinks { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .legalLinkBtn { border: 0; background: transparent; color: var(--text-muted); padding: 4px 6px; font-size: 10px; font-family: var(--font-mono); }
    .legalLinkBtn:hover { color: var(--primary); background: rgba(255,255,255,0.04); }
    .mobileLegalLinks { display: grid; gap: 8px; margin-top: 10px; }
    .mobileLegalLinks .legalLinkBtn { width: 100%; justify-content: flex-start; border: 1px solid var(--glass-border); border-radius: 8px; padding: 8px 10px; text-align: left; }
    .modal.legalModal { width: min(860px, 96vw); max-height: min(92vh, 920px); }
    .legalTabs { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--glass-border); background: rgba(5,11,20,0.42); overflow-x: auto; }
    .legalTabBtn { flex: 0 0 auto; border-radius: 8px; padding: 8px 11px; color: var(--text-muted); }
    .legalTabBtn.active { color: #fff; border-color: rgba(32,200,255,0.34); background: rgba(32,200,255,0.12); }
    .modalBody.legalBody { display: block; padding: 20px 22px; max-height: calc(92vh - 138px); line-height: 1.55; }
    .legalPanel h4 { margin: 0 0 12px; color: var(--primary); }
    .legalPanel h5 { margin: 18px 0 7px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-main); }
    .legalMuted { color: var(--text-muted); font-size: 12px; }
    .legalDefinitionList { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 14px; margin: 16px 0 0; }
    .legalDefinitionList dt { color: var(--text-muted); font-size: 11px; text-transform: uppercase; }
    .legalDefinitionList dd { margin: 0; overflow-wrap: anywhere; }
    .legalContactReveal { padding: 6px 10px; border-radius: 8px; }
    .legalContactValue { display: inline-block; margin-left: 10px; color: var(--text-main); font-family: var(--font-mono); overflow-wrap: anywhere; }
    .legalList { margin: 8px 0 0; padding-left: 20px; color: var(--text-main); }
    .legalList li { margin-bottom: 8px; }
    .consentOptions { display: grid; gap: 10px; }
    .consentOption { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--glass-border); border-radius: 8px; background: rgba(255,255,255,0.03); }
    .consentOptionTextWrap { display: grid; gap: 4px; min-width: 0; }
    .consentOptionTitle { display: block; font-weight: 760; color: var(--text-main); line-height: 1.25; }
    .consentOptionText { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
    .consentOptionControl { display: flex; justify-content: center; align-items: center; min-height: 24px; }
    .consentOptionControl input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
    .consentBanner { position: fixed; left: 16px; right: 16px; bottom: 54px; z-index: 250; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid rgba(32,200,255,0.24); border-radius: 10px; background: rgba(7,17,31,0.96); color: var(--text-main); box-shadow: 0 18px 42px rgba(0,0,0,0.42); backdrop-filter: blur(16px); }
    .consentBanner[hidden] { display: none; }
    .consentBannerText { display: grid; gap: 4px; min-width: 0; }
    .consentBannerText span { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
    .consentBannerActions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
    .pilotMapConsentPlaceholder { height: 100%; min-height: 190px; display: grid; place-items: center; padding: 18px; text-align: center; color: var(--text-muted); background: rgba(15,23,42,0.78); }
    .pilotMapConsentPlaceholder button { margin-top: 10px; }
    :root[data-theme="light"] .legalTabs { border-bottom-color: var(--glass-border); background: rgba(233, 242, 252, 0.72); }
    :root[data-theme="light"] .legalTabBtn { color: #4f6078; border-color: rgba(42, 75, 112, 0.16); background: rgba(255, 255, 255, 0.58); }
    :root[data-theme="light"] .legalTabBtn.active { color: #0f172a; border-color: rgba(8, 126, 164, 0.36); background: rgba(8, 126, 164, 0.14); }
    :root[data-theme="light"] .legalBody { color: var(--text-main); background: rgba(255, 255, 255, 0.86); }
    :root[data-theme="light"] .legalPanel h4 { color: #087ea4; }
    :root[data-theme="light"] .legalPanel h5,
    :root[data-theme="light"] .legalDefinitionList dd,
    :root[data-theme="light"] .legalContactValue,
    :root[data-theme="light"] .legalList { color: #162033; }
    :root[data-theme="light"] .legalMuted,
    :root[data-theme="light"] .legalDefinitionList dt { color: #5b6f89; }
    :root[data-theme="light"] .consentOption { border-color: rgba(42, 75, 112, 0.18); background: rgba(248, 251, 255, 0.78); }
    :root[data-theme="light"] .consentBanner { background: rgba(248, 251, 255, 0.96); color: #162033; border-color: rgba(8, 126, 164, 0.24); box-shadow: 0 18px 42px rgba(34, 54, 82, 0.22); }
    :root[data-theme="light"] .consentBannerText span { color: #5b6f89; }
    :root[data-theme="light"] .pilotMapConsentPlaceholder { color: #5b6f89; background: rgba(233, 242, 252, 0.82); }
    @media (max-width: 760px) {
      .legalDefinitionList { grid-template-columns: 1fr; }
      .consentBanner { left: 10px; right: 10px; bottom: 48px; grid-template-columns: 1fr; }
      .consentBannerActions { justify-content: stretch; }
      .consentBannerActions button { flex: 1 1 120px; }
    }

    /* Content Cards */
    .card { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 16px; }
    .card h4 { margin: 0 0 16px 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px; }
    .kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px; font-family: var(--font-mono); font-size: 13px; }
    .kv.compactKv { grid-template-columns: 124px 1fr; gap: 6px 10px; font-size: 12px; }
    .kv.flightKvPrimary { grid-template-columns: 132px 1fr; }
    @media (max-width: 800px){
      .kv, .kv.compactKv, .kv.flightKvPrimary { grid-template-columns: 104px 1fr; font-size: 12px; }
    }
    .kv .k { color: var(--text-muted); }
    .kv .v { color: #fff; overflow-wrap: anywhere; }
    .list { margin: 0; padding-left: 20px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); line-height: 1.6; }
    .list li { margin-bottom: 6px; }
    .xpBreakdownList { padding-left: 0; list-style: none; font-family: var(--font); display: grid; gap: 8px; }
    .xpBreakdownList li { margin: 0; }
    .xpExplain {
      padding: 10px 12px;
      border: 1px solid rgba(148,163,184,0.18);
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(15,23,42,0.72), rgba(30,41,59,0.45));
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.45;
    }
    .xpComponent {
      display: grid;
      grid-template-columns: minmax(110px, 0.85fr) minmax(180px, 1.4fr) auto;
      align-items: center;
      gap: 10px;
      padding: 9px 11px;
      border: 1px solid rgba(148,163,184,0.16);
      border-radius: 12px;
      background: rgba(15,23,42,0.42);
    }
    .xpComponent.age { border-color: rgba(56,189,248,0.22); background: rgba(14,165,233,0.08); }
    .xpComponent.score { border-color: rgba(34,197,94,0.25); background: rgba(34,197,94,0.08); }
    .xpComponent .xpName { color: #fff; font-weight: 800; letter-spacing: 0.01em; }
    .xpComponent .xpDesc { color: var(--text-muted); font-size: 11px; line-height: 1.35; }
    .xpComponent .xpValue { color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 800; white-space: nowrap; }
    @media (max-width: 640px) {
      .xpComponent { grid-template-columns: 1fr; align-items: start; }
      .xpComponent .xpValue { white-space: normal; }
    }
    .linkRow { margin-top: 16px; display: flex; gap: 10px; }

        /* --- COLLAPSIBLE CARDS (DETAILS) --- */
        details.card { padding: 0; transition: all 0.3s ease; }
        details.card > summary { padding: 14px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; user-select: none; outline: none; }
        details.card > summary::-webkit-details-marker { display: none; }
        details.card > summary h4 { margin: 0; padding: 0; border: none; display: inline-block; }
        details.card > summary::after { content: '▼'; font-size: 10px; color: var(--text-muted); transition: transform 0.2s; }
        details[open].card > summary::after { transform: rotate(180deg); }
        details[open].card > summary { border-bottom: 1px solid rgba(255,255,255,0.05); }
        .details-content { padding: 16px; animation: slideDown 0.2s ease-out; }
        .summaryBlock { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 auto; }
        .diagSummary { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
        .diagChip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.22); background: rgba(15,23,42,0.56); color: #dbeafe; font-family: var(--font-mono); font-size: 10px; line-height: 1.2; white-space: nowrap; max-width: 100%; }
        .diagChip .lbl { color: var(--text-muted); }
        .diagChip .val { color: #fff; overflow: hidden; text-overflow: ellipsis; }
        .diagGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; min-width: 0; }
        .diagGroup { min-width: 0; padding: 10px; border: 1px solid rgba(148,163,184,0.14); border-radius: 8px; background: rgba(15,23,42,0.34); }
        .diagGroupTitle { margin: 0 0 8px; color: #cbd5e1; font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
        .diagRows { display: grid; gap: 6px; min-width: 0; }
        .diagRow { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: start; min-width: 0; }
        .diagRow.is-wide { grid-template-columns: 1fr; gap: 4px; }
        .diagRowKey { color: var(--text-muted); font-size: 11px; line-height: 1.35; }
        .diagRowValue { color: #f8fafc; font-family: var(--font-mono); font-size: 11px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
        .diagRowValue.is-muted { color: #94a3b8; }
        .diagRowValue.is-warn { color: #fbbf24; }
        .diagCandidateList { display: grid; gap: 5px; min-width: 0; }
        .diagCandidate { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 7px; align-items: center; min-width: 0; padding: 5px 6px; border: 1px solid rgba(148,163,184,0.12); border-radius: 6px; background: rgba(2,6,23,0.28); }
        .diagCandidateRunway { color: #bfdbfe; font-weight: 800; white-space: nowrap; }
        .diagCandidateEntry { color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .diagCandidateProb { color: #f8fafc; text-align: right; white-space: nowrap; }
        .diagMuted { color: #94a3b8; font-family: var(--font-mono); font-size: 11px; }
        @media (max-width: 640px){
          .diagGrid { grid-template-columns: 1fr; }
          .diagRow { grid-template-columns: 82px minmax(0, 1fr); }
          .diagCandidate { grid-template-columns: 40px minmax(0, 1fr) 40px; }
        }

    /* --- PILOT MAP --- */
    #pilotMapCard { --map-toolbar-height: 46px; display: grid; grid-template-rows: var(--map-toolbar-height) minmax(0, 1fr); border: 1px solid var(--glass-border); border-radius: 8px; height: clamp(250px, 36vh, 360px); min-height: 240px; width: 100%; overflow: hidden; position: relative; z-index: 1; background: var(--bg); flex: 0 0 auto; }
    #actualPilotMap { grid-row: 2; min-height: 0; touch-action: none; }
    #pilotMapCard > .pilotMapConsentPlaceholder { grid-row: 1 / -1; }
    .leaflet-container { background: transparent !important; }
    .pilotMapBasemapTile { filter: brightness(0.68) saturate(0.78) contrast(1.08); opacity: 0.96; }
    .pilotMapFallbackTile { filter: brightness(0.64) saturate(0.74) contrast(1.02); opacity: 0.92; }
    .pilotTaxiRouteHalo,
    .pilotTaxiRouteLine { pointer-events: stroke; }
    .mapRouteBadge {
      position: absolute;
      top: calc(var(--map-toolbar-height) + 8px);
      left: 8px;
      z-index: 610;
      max-width: calc(100% - 16px);
      padding: 6px 9px;
      border-radius: 8px;
      border: 1px solid rgba(250,204,21,0.36);
      background: rgba(15,23,42,0.78);
      color: rgba(248,250,252,0.95);
      box-shadow: 0 8px 22px rgba(0,0,0,0.24);
      backdrop-filter: blur(7px);
      font: 800 10px/1.2 var(--font-mono);
      letter-spacing: 0.02em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mapRouteBadge[hidden] { display: none; }
    .map-dot { background: #fff; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,1); border: 2px solid var(--primary); }
    .map-plane { display: flex; align-items: center; justify-content: center; }
    .pilotTrafficPlaneMarker { background: transparent !important; border: 0 !important; display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; }
    .pilotTrafficPlane { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; filter: drop-shadow(0 0 4px rgba(0,0,0,0.92)); transition: transform 0.12s ease, filter 0.12s ease; }
    .pilotTrafficPlaneMarker:hover .pilotTrafficPlane { transform: scale(1.14); filter: drop-shadow(0 0 7px rgba(125,211,252,0.65)) drop-shadow(0 0 4px rgba(0,0,0,0.92)); }
    .pilotTrafficPlane svg { width: 18px; height: 18px; }
    .pilotTrafficPlaneMarker.is-selected .pilotTrafficPlane { filter: drop-shadow(0 0 5px rgba(250,204,21,0.78)) drop-shadow(0 0 5px rgba(0,0,0,0.88)); }
    .pilotTrafficTagMarker { background: transparent !important; border: 0 !important; opacity: 1; transition: opacity 0.22s ease; }
    .pilotTrafficTagMarker.is-hidden { opacity: 0; pointer-events: none; }
    .pilotTrafficTagMarker.is-dragging { opacity: 0.96; transition: none; z-index: 9999 !important; }
    .pilotTrafficTag {
      --tag-accent: #93c5fd;
      width: 88px;
      min-height: 40px;
      padding: 4px 4px 4px 7px;
      border-radius: 7px;
      border: 1px solid rgba(148,163,184,0.28);
      background: linear-gradient(135deg, rgba(15,23,42,0.90), rgba(15,23,42,0.68));
      box-shadow: 0 8px 22px rgba(0,0,0,0.34);
      color: rgba(241,245,249,0.94);
      cursor: grab;
      font-family: var(--font-mono);
      line-height: 1.08;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(7px);
      user-select: none;
      white-space: nowrap;
    }
    .pilotTrafficTag::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tag-accent); opacity: 0.92; }
    .pilotTrafficTag--dep { --tag-accent: #60a5fa; }
    .pilotTrafficTag--arr { --tag-accent: #fbbf24; }
    .pilotTrafficTag--selected { border-color: rgba(250,204,21,0.72); background: linear-gradient(135deg, rgba(30,41,59,0.96), rgba(15,23,42,0.78)); box-shadow: 0 10px 28px rgba(0,0,0,0.42), 0 0 0 1px rgba(250,204,21,0.16); }
    .pilotTrafficTagLine { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 3px; min-width: 0; }
    .pilotTrafficCallsign,
    .pilotTrafficAlt,
    .pilotTrafficSpeed { color: #fff; font-weight: 900; letter-spacing: 0.035em; overflow: hidden; text-overflow: ellipsis; }
    .pilotTrafficCallsign { font-size: 10px; }
    .pilotTrafficAlt,
    .pilotTrafficSpeed { font-size: 9px; }
    .pilotTrafficType,
    .pilotTrafficTrend,
    .pilotTrafficDest { color: rgba(203,213,225,0.72); font-size: 8px; font-weight: 900; letter-spacing: 0.04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .pilotTrafficTrend { display: inline-flex; align-items: baseline; gap: 3px; }
    .pilotTrafficTrend.is-hidden { display: none; }
    .pilotTrafficTrendArrow { font-size: 10px; line-height: 1; opacity: 0.86; }
    .pilotTrafficTagLine + .pilotTrafficTagLine { margin-top: 1px; }
    .pilotTrafficTagMarker.is-compact .pilotTrafficTag { width: 76px; min-height: 34px; padding: 3px 4px 3px 6px; border-radius: 6px; }
    .pilotTrafficTagMarker.is-compact .pilotTrafficCallsign { font-size: 8.8px; }
    .pilotTrafficTagMarker.is-compact .pilotTrafficAlt,
    .pilotTrafficTagMarker.is-compact .pilotTrafficSpeed { font-size: 8px; }
    .pilotTrafficTagMarker.is-compact .pilotTrafficType,
    .pilotTrafficTagMarker.is-compact .pilotTrafficTrend,
    .pilotTrafficTagMarker.is-compact .pilotTrafficDest { font-size: 7px; }
    .pilotTrafficTagMarker.is-collapsed { width: 68px !important; height: 24px !important; }
    .pilotTrafficTagMarker.is-collapsed .pilotTrafficTag { width: 64px; min-height: 22px; padding: 4px 6px 4px 9px; border-radius: 7px; cursor: pointer; }
    .pilotTrafficTagMarker.is-collapsed .pilotTrafficTagLine { display: block; margin: 0; }
    .pilotTrafficTagMarker.is-collapsed .pilotTrafficTagLine:not(:first-child),
    .pilotTrafficTagMarker.is-collapsed .pilotTrafficType { display: none; }
    .pilotTrafficTagMarker.is-collapsed .pilotTrafficCallsign { display: block; max-width: 49px; font-size: 9px; line-height: 1.15; }
    .mapToolbar { grid-row: 1; display: flex; justify-content: flex-end; gap: 6px; align-items: center; padding: 5px 8px; min-width: 0; background: var(--glass-surface); border-bottom: 1px solid var(--glass-border); }
    .mapTrafficFilter { display: flex; align-items: center; gap: 2px; min-width: 0; }
    .mapTrafficFilterBtn { min-width: 38px; min-height: 34px; border: 0; background: transparent; color: var(--text-muted); border-radius: 6px; padding: 5px 8px; font-size: 11px; font-weight: 800; letter-spacing: 0; line-height: 1; cursor: pointer; touch-action: manipulation; }
    .mapTrafficFilterBtn:hover { color: var(--text-main); background: var(--primary-dim); }
    .mapTrafficFilterBtn.is-active { color: var(--primary); background: var(--primary-dim); box-shadow: inset 0 0 0 1px var(--glass-border); }
    .mapResetBtn { min-height: 34px; border: 1px solid var(--glass-border); background: transparent; color: var(--text-main); border-radius: 6px; padding: 6px 10px; font-size: 11px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
    .mapResetBtn:hover { background: var(--primary-dim); border-color: var(--primary); }
    .mapResetIcon { width: 36px; padding: 0; flex: 0 0 auto; font-size: 24px; line-height: 1; }
    .mapToggleBtn { min-width: 72px; }
    .mapToggleBtn.is-on { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); }
    .mapToolbar button:focus-visible, .pilotTrafficPlaneMarker:focus-visible, .pilotTrafficTagMarker:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
    .pilotRunwayTooltip { background: rgba(15, 23, 42, 0.88); border: 1px solid rgba(148, 163, 184, 0.35); color: rgba(255,255,255,0.92); box-shadow: 0 4px 16px rgba(0,0,0,0.28); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
    @media (max-width: 800px), (pointer: coarse){
      #pilotMapCard { --map-toolbar-height: 56px; height: clamp(300px, 48svh, 420px); min-height: 280px; }
      .mapToolbar { gap: 4px; padding: 5px 6px; }
      .mapTrafficFilter { flex: 1; }
      .mapTrafficFilterBtn { flex: 1; min-width: 44px; min-height: 44px; padding: 5px 6px; }
      .mapResetBtn { min-height: 44px; padding: 5px 8px; }
      .mapResetIcon { width: 44px; }
      .mapToggleBtn { min-width: 64px; }
      #actualPilotMap .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; touch-action: manipulation; }
      .modal.pilotModal .modalHead .close { min-width: 44px; min-height: 44px; }
      .modalBody.pilotBody { overscroll-behavior-y: contain; }
    }
    @media (pointer: coarse){
      .pilotTrafficTagMarker, .pilotTrafficTagMarker.is-collapsed { height: 44px !important; }
      .pilotTrafficTagMarker .pilotTrafficTag { min-height: 44px !important; display: flex; flex-direction: column; justify-content: center; backdrop-filter: none; }
      .pilotTrafficTagMarker.is-collapsed .pilotTrafficCallsign { font-size: 10px; }
    }


    .aBtn { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 6px; background: var(--primary-dim); color: var(--primary); text-decoration: none; font-size: 12px; font-weight: 600; border: 1px solid rgba(59, 130, 246, 0.2); transition: 0.2s; }
    .aBtn:hover { background: var(--primary); color: #fff; }

    .btnRow { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 16px; margin-right: 12px; margin-bottom: 12px; border-top: 1px solid rgba(255,255,255,0.05); }
    .btnGhost { background: transparent; border: 1px solid transparent; color: var(--text-muted); }
    .btnGhost:hover { color: #fff; background: rgba(255,255,255,0.05); }
    .btnPrimary { background: var(--primary); color: #fff; border-color: transparent; }
    .btnPrimary:hover { background: #2563eb; }
    .btnPrimary.is-saving { position: relative; pointer-events: none; opacity: .82; padding-left: 38px; }
    .btnPrimary.is-saving::before { content: ""; position: absolute; left: 15px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: fidsBtnSpin .75s linear infinite; }
    @keyframes fidsBtnSpin { to { transform: rotate(360deg); } }
    .btnDanger { color: var(--bad); background: rgba(239, 68, 68, 0.1); border-color: transparent; }
    .btnDanger:hover { background: var(--bad); color: #fff; }

    /* --- CONFIG MODAL --- */
    .modal.cfgModal {
      width: min(980px, 94vw);
      height: min(820px, 90vh);
      background: rgba(7, 17, 31, 0.96);
      backdrop-filter: blur(22px);
      border: 1px solid rgba(126,207,255,0.12);
      box-shadow: 0 50px 100px -24px rgba(0,8,20,0.66);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .configModalWorkflow .modalHead {
      flex-shrink: 0;
      background: rgba(5, 11, 20, 0.46);
      border-bottom: 1px solid rgba(126,207,255,0.1);
      padding: 18px 22px;
    }
    .configModalWorkflow .modalHead h3 {
      font-size: 16px;
      font-weight: 740;
      letter-spacing: 0.01em;
      color: #f8fbff;
    }
    .cfgModalTitleBlock {
      min-width: 0;
    }
    .cfgModalIntro {
      margin-top: 3px;
      color: var(--text-muted);
      font-size: 11px;
      line-height: 1.4;
    }
    .modalBody.cfgBody {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      padding: 0;
    }
    .cfgShell {
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
      flex: 1 1 auto;
      min-height: 0;
    }
    .cfgNav {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 16px;
      border-right: 1px solid rgba(126,207,255,0.1);
      background: rgba(5, 11, 20, 0.3);
      overflow-y: auto;
    }
    .cfgNavBtn {
      width: 100%;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: var(--text-muted);
      padding: 11px 12px;
      text-align: left;
      cursor: pointer;
      transition: background .18s, border-color .18s, color .18s;
      font-family: var(--font-ui);
    }
    .cfgNavBtn:hover {
      color: #fff;
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.06);
    }
    .cfgNavBtn.active {
      color: #fff;
      background: rgba(32, 200, 255, 0.12);
      border-color: rgba(32, 200, 255, 0.34);
      box-shadow: inset 3px 0 0 var(--primary);
    }
    .cfgNavTitle {
      display: block;
      font-size: 13px;
      font-weight: 760;
      line-height: 1.2;
    }
    .cfgNavDesc {
      display: block;
      margin-top: 3px;
      font-size: 11px;
      line-height: 1.35;
      color: var(--text-muted);
    }
    .cfgContent {
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }
    .tabPanel {
      display: none;
    }
    .tabPanel.active {
      display: block;
      height: 100%;
      overflow-y: auto;
      padding: 22px 24px 26px;
      scrollbar-gutter: stable;
    }
    .cfgBlock {
      border-top: 1px solid rgba(126,207,255,0.1);
      padding-top: 16px;
      margin-bottom: 24px;
    }
    .cfgBlock:first-child {
      border-top: 0;
      padding-top: 0;
    }
    .cfgBlockHead {
      margin: 0 0 14px;
    }
    .cfgBlockHead h4 {
      margin: 0;
      color: #f8fbff;
      font-size: 13px;
      font-weight: 760;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .cfgBlockHead .sub,
    .cfg-row .sub {
      display: block;
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.45;
      margin-top: 3px;
    }
    .cfg-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 0;
    }
    .cfg-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 12px 14px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.055);
      border-radius: 8px;
      transition: background 0.18s, border-color 0.18s;
    }
    .cfg-row:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(126,207,255,0.12);
    }
    .cfg-row label {
      margin: 0;
      font-size: 13px;
      font-weight: 620;
      color: #e2e8f0;
      text-transform: none;
      letter-spacing: 0;
      cursor: pointer;
    }
    .cfg-row-stack {
      align-items: stretch;
      flex-direction: column;
    }
    .cfg-control {
      flex: 0 0 auto;
      min-width: 180px;
      max-width: 100%;
    }
    .cfg-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      width: 100%;
    }
    .cfg-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    .cfgActions {
      flex-shrink: 0;
      margin: 0;
      padding: 14px 22px 18px;
      border-top: 1px solid rgba(126,207,255,0.1);
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      background: rgba(5, 11, 20, 0.6);
      backdrop-filter: blur(10px);
    }

    @media (max-width: 760px) {
      .modal.cfgModal {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
      }
      .configModalWorkflow .modalHead {
        padding: 14px 16px;
      }
      .cfgShell {
        display: flex;
        flex-direction: column;
      }
      .cfgNav {
        flex-direction: row;
        gap: 8px;
        padding: 10px 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(126,207,255,0.1);
        overflow-x: auto;
        overflow-y: hidden;
      }
      .cfgNavBtn {
        flex: 0 0 auto;
        width: auto;
        min-width: 136px;
        padding: 9px 11px;
        white-space: nowrap;
      }
      .cfgNavBtn.active {
        box-shadow: inset 0 -3px 0 var(--primary);
      }
      .cfgNavDesc {
        display: none;
      }
      .cfgContent {
        flex: 1 1 auto;
      }
      .tabPanel.active {
        padding: 16px 14px 20px;
      }
      .cfg-row {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
      }
      .cfg-control {
        min-width: 0;
        width: 100%;
      }
      .cfg-grid-2 {
        grid-template-columns: 1fr;
      }
      .cfgActions {
        flex-wrap: wrap;
        padding: 12px;
      }
      .cfgActions .btnPrimary {
        flex: 1 1 180px;
      }
    }
    @media (max-width: 480px) {
      .cfg-grid-3 {
        grid-template-columns: 1fr;
      }
    }

    /* Info Modal Styles */
    .modal.infoModal { width: min(500px, 100%); }
    .info-body { line-height: 1.6; color: var(--text-main); }
    .info-body p { margin-bottom: 15px; }
    .infoWarning {
      margin: 0 0 14px;
      padding: 12px 14px;
      border: 1px solid rgba(245,158,11,0.28);
      border-radius: 14px;
      background: rgba(245,158,11,0.10);
      color: #fde68a;
      line-height: 1.45;
    }
    .infoNoteSmall {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.5;
      opacity: 0.88;
    }
    .info-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      padding-top: 15px;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .dont-show-label { display: flex; align-items: center; gap: 8px; cursor: pointer; text-transform: none; font-weight: 400; color: var(--text-muted); }
    .dont-show-label input { width: auto; cursor: pointer; }
    .modal.changelogModal { width: min(780px, 100%); max-height: min(92vh, 920px); }
    .modalBody.changelogBody { display: block; padding: 0; max-height: calc(92vh - 74px); }
    .changelogIntro {
      padding: 18px 22px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
    }
    .changelogIntro .tiny { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
    .changelogContent { padding: 18px 22px 22px; overflow-y: auto; max-height: calc(92vh - 214px); }
    .changelogFooter {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 14px 22px 18px;
      border-top: 1px solid rgba(255,255,255,0.06);
      background: rgba(15,23,42,0.72);
    }
    .changelogFooter .btnPrimary { min-width: 120px; }
    .changelogKnownBugs {
      border: 1px solid rgba(245,158,11,0.24);
      background: rgba(245,158,11,0.08);
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 16px;
    }
    .changelogKnownBugs h4,
    .changelogSection h5 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
    .changelogKnownBugs ul,
    .changelogSection ul { margin: 0; padding-left: 18px; }
    .changelogKnownBugs li,
    .changelogSection li { margin: 5px 0; line-height: 1.45; color: var(--text-main); }
    .changelogTimeline { display: flex; flex-direction: column; gap: 14px; }
    .changelogRelease {
      border: 1px solid rgba(148,163,184,0.18);
      border-radius: 10px;
      background: rgba(15,23,42,0.34);
      overflow: hidden;
    }
    .changelogReleaseHead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      background: rgba(255,255,255,0.035);
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .changelogDate { font-weight: 700; color: #fff; font-size: 13px; }
    .changelogTime { color: var(--text-muted); font-size: 12px; margin-left: 8px; }
    .changelogVersionBadge {
      border: 1px solid rgba(32,200,255,0.30);
      background: rgba(32,200,255,0.10);
      color: #7dd3fc;
      border-radius: 999px;
      padding: 3px 9px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }
    .changelogSection { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.035); }
    .changelogSection:first-of-type { border-top: none; }
    .changelogSection.improvements h5 { color: #93c5fd; }
    .changelogSection.fixes h5 { color: #86efac; }
    .changelogSection.features h5 { color: #c4b5fd; }
    .changelogEmpty { color: var(--text-muted); padding: 16px; }

    /* Runway / Weather info modal */
    .modal.runwayInfoModal { width: min(980px, 100%); max-height: min(92vh, 960px); }
    .modalBody.runwayInfoBody {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 18px 20px;
      max-height: calc(92vh - 78px);
    }
    .runwayInfoTop {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
      gap: 16px;
      align-items: start;
    }
    .runwayInfoSummaryMeta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 14px;
    }
    .runwayInfoMetaChip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.2);
      background: rgba(15,23,42,0.52);
      color: #e2e8f0;
      font-family: var(--font-mono);
      font-size: 11px;
      line-height: 1.2;
    }
    .runwayInfoMetaChip .lbl { color: var(--text-muted); }
    .runwayInfoRunwayGroups {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .runwayInfoRunwayGroups .runwayGroup {
      gap: 8px;
      padding: 6px 10px;
      border-radius: 10px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
    }
    .runwayInfoSourceNote {
      margin-top: 12px;
      font-size: 11px;
      line-height: 1.5;
      color: var(--text-muted);
    }
    .runwayInfoWeatherKv {
      grid-template-columns: 112px 1fr;
      gap: 8px 12px;
      font-size: 12px;
    }
    .runwayInfoStack {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .runwayRawCard {
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.025);
    }
    .runwayRawHead {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 10px;
    }
    .runwayRawTitle {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #fff;
    }
    .runwayRawSub {
      margin-top: 3px;
      color: var(--text-muted);
      font-size: 11px;
      line-height: 1.4;
    }
    .runwayRawText {
      margin: 0;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.6;
      color: #dbeafe;
    }
    .predictionTrace {
      margin: 0;
      padding-left: 18px;
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.55;
      color: #dbeafe;
    }
    .predictionTrace li { margin-bottom: 6px; }
    .predictionHuman {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .predictionHint {
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.45;
    }
    .predictionSummaryGrid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .predictionSummaryCard {
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      border-radius: 12px;
      padding: 12px;
      min-width: 0;
    }
    .predictionSummaryLabel {
      color: var(--text-muted);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .predictionSummaryValue {
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }
    .predictionSummarySub {
      color: #cbd5e1;
      font-size: 11px;
      line-height: 1.45;
      margin-top: 6px;
    }
    .predictionSectionTitle {
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .predictionEvalList {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .predictionEvalCard {
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }
    .predictionEvalCard.is-blocked {
      border-color: rgba(239,68,68,0.35);
      background: rgba(127,29,29,0.22);
    }
    .predictionEvalCard.is-rejected {
      border-color: rgba(245,158,11,0.30);
      background: rgba(120,53,15,0.18);
    }
    .predictionEvalCard.is-ok {
      border-color: rgba(34,197,94,0.25);
      background: rgba(20,83,45,0.15);
    }
    .predictionEvalHead {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
    }
    .predictionEvalRunway {
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      gap: 6px;
      align-items: baseline;
      flex-wrap: wrap;
    }
    .predictionEvalOp {
      color: #93c5fd;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.05em;
    }
    .predictionEvalStatus {
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .predictionEvalStatus.is-ok {
      color: #dcfce7;
      background: rgba(34,197,94,0.18);
    }
    .predictionEvalStatus.is-blocked {
      color: #fecaca;
      background: rgba(239,68,68,0.18);
    }
    .predictionEvalStatus.is-rejected {
      color: #fde68a;
      background: rgba(245,158,11,0.18);
    }
    .predictionMetricRow {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .predictionMetricChip {
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 11px;
      font-family: var(--font-mono);
      background: rgba(15,23,42,0.55);
      color: #dbeafe;
      border: 1px solid rgba(148,163,184,0.18);
    }
    .predictionEvalReason {
      color: #cbd5e1;
      font-size: 12px;
      line-height: 1.5;
    }
    .predictionRawDetails {
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      background: rgba(255,255,255,0.025);
      padding: 10px 12px;
    }
    .predictionRawDetails summary {
      cursor: pointer;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      list-style: none;
    }
    .predictionRawDetails summary::-webkit-details-marker { display: none; }
    .predictionRawBody { margin-top: 10px; }
    @media (max-width: 800px) {
      .predictionSummaryGrid,
      .predictionEvalList { grid-template-columns: 1fr; }
    }
    .atisStations {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .atisStationCard {
      padding: 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.025);
    }
    .atisStationHead {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
    }
    .atisStationTitle {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #fff;
    }
    .atisStationSub {
      margin-top: 4px;
      color: var(--text-muted);
      font-size: 11px;
      line-height: 1.45;
    }
    .atisStationSummary {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }
    .atisStationSummary .runwayGroup {
      gap: 8px;
      padding: 5px 9px;
      border-radius: 9px;
      background: rgba(15,23,42,0.52);
      border: 1px solid rgba(148,163,184,0.16);
    }
    .atisRawBlock {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .atisLine {
      padding: 9px 11px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.05);
      background: rgba(15,23,42,0.44);
      color: #e2e8f0;
    }
    .atisLine.is-arr {
      background: rgba(37,99,235,0.07);
      border-color: rgba(96,165,250,0.22);
      box-shadow: inset 3px 0 0 rgba(96,165,250,0.45);
    }
    .atisLine.is-dep {
      background: rgba(245,158,11,0.07);
      border-color: rgba(251,191,36,0.23);
      box-shadow: inset 3px 0 0 rgba(251,191,36,0.45);
    }
    .atisLine.is-both {
      background: linear-gradient(90deg, rgba(37,99,235,0.08), rgba(245,158,11,0.08));
      border-color: rgba(255,255,255,0.14);
      box-shadow: inset 3px 0 0 rgba(147,197,253,0.45), inset -3px 0 0 rgba(251,191,36,0.32);
    }
    .atisLineText {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.55;
    }
    .atisInlineMark {
      display: inline;
      padding: 1px 4px;
      border-radius: 5px;
      color: #fff;
      font-weight: 700;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
    .atisInlineMark.arr {
      background: rgba(37,99,235,0.34);
      box-shadow: inset 0 0 0 1px rgba(96,165,250,0.38);
    }
    .atisInlineMark.dep {
      background: rgba(245,158,11,0.31);
      box-shadow: inset 0 0 0 1px rgba(251,191,36,0.38);
    }
    .atisInlineMark.both {
      background: rgba(148,163,184,0.24);
      box-shadow: inset 0 0 0 1px rgba(226,232,240,0.18);
    }
    .atisLineTags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    .atisLineTag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(0,0,0,0.22);
      color: #fff;
      font-family: var(--font-mono);
      font-size: 10px;
      line-height: 1.2;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .atisLineTag.arr {
      color: #dbeafe;
      border-color: rgba(96,165,250,0.35);
      background: rgba(37,99,235,0.15);
    }
    .atisLineTag.dep {
      color: #fde68a;
      border-color: rgba(251,191,36,0.34);
      background: rgba(245,158,11,0.16);
    }
    .atisLineTag.both {
      color: #f8fafc;
      border-color: rgba(255,255,255,0.18);
      background: rgba(51,65,85,0.4);
    }
    .atisLineTag .atisSourceRaw {
      opacity: 0.72;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .atisLineTag .atisSourceArrow {
      opacity: 0.55;
      font-weight: 900;
    }
    .runwayInfoEmpty {
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px dashed rgba(148,163,184,0.28);
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.55;
      background: rgba(15,23,42,0.28);
    }
    @media (max-width: 900px) {
      .modal.runwayInfoModal { width: min(100%, 100%); }
      .modalBody.runwayInfoBody { padding: 14px; gap: 12px; max-height: calc(92vh - 74px); }
      .runwayInfoTop { grid-template-columns: 1fr; }
      .runwayInfoWeatherKv { grid-template-columns: 98px 1fr; }
      .atisStationHead, .runwayRawHead { flex-direction: column; align-items: stretch; }
    }

    /* --- AUTOCOMPLETE & VALIDATION --- */
    .input-wrapper { position: relative; display: block; }
    .cfg-input.invalid { border-color: var(--bad) !important; color: var(--bad) !important; background: rgba(239, 68, 68, 0.1); }
    .cfg-validation-note {
        grid-column: 1 / -1;
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.35;
        color: var(--text-muted);
        min-height: 15px;
    }
    .cfg-validation-note.error { color: var(--bad); }
    .cfg-validation-note.ok { color: var(--good); }
    .cfgSaveFeedback { align-self: center; margin-right: auto; max-width: 420px; min-width: 0; color: var(--bad); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
    .cfgSaveFeedback[hidden] { display: none; }
    .cfgModal .cfg-input.invalid:focus { border-color: var(--bad) !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18); }
    @media (max-width: 760px) { .cfgModal .cfgSaveFeedback { grid-column: 1 / -1; max-width: none; margin-right: 0; } }

    .autocomplete-list {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #1e293b;
        border: 1px solid var(--glass-border);
        border-radius: 6px;
        margin-top: 4px;
        z-index: 9999;
        max-height: 160px; /* Ca. 5 Einträge */
        overflow-y: auto;
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        display: none;
    }
    .autocomplete-list.open { display: block; }
    .autocomplete-item {
        padding: 8px 12px;
        font-size: 12px;
        font-family: var(--font-mono);
        color: var(--text-muted);
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .autocomplete-item:hover,
    .autocomplete-item.active { background: var(--primary-dim); color: #fff; }
    .autocomplete-item strong { color: #fff; font-weight: 700; }
    .autocomplete-item .loc { font-size: 10px; opacity: 0.7; float: right; }
    .input-clear {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 18px;
        height: 18px;
        display: none;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 999px;
        background: rgba(255,255,255,0.08);
        color: var(--text-muted);
        font-size: 11px;
        line-height: 1;
        padding: 0;
        z-index: 3;
    }
    .input-clear.show { display: inline-flex; }
    .input-clear:hover { background: rgba(239,68,68,0.18); color: #fff; }

    /* Modern Inputs */
    .cfg-input { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 8px 28px 8px 12px; border-radius: 6px; font-family: var(--font-mono); font-size: 13px; text-align: right; width: 120px; transition: 0.2s; }
    .cfg-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); outline: none; background: rgba(0,0,0,0.5); }
    .cfg-input.loading { cursor: progress; opacity: 0.7; color: var(--text-muted); font-style: italic; }
        .cfg-select { appearance: none; background-color: rgba(0,0,0,0.3); background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394a3b8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 10px top 50%; background-size: 10px auto; padding-right: 30px; }

    /* Toggle Switch */
    .toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.1); transition: .3s; border-radius: 34px; border: 1px solid rgba(255,255,255,0.1); }
    .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: #94a3b8; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
    input:checked + .slider { background-color: var(--primary-dim); border-color: var(--primary); }
    input:checked + .slider:before { transform: translateX(20px); background-color: var(--primary); }
    input:focus + .slider { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }

    /* Cache & Column Lists */
    .cacheBar { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); overflow: hidden; margin: 12px 0 14px; }
    .cacheBarFill { height: 100%; width: 0%; background: linear-gradient(90deg, rgba(59,130,246,0.9), rgba(16,185,129,0.9)); transition: width 0.25s ease; }
    .cacheList { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
    .cacheRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.2); font-family: var(--font-mono); font-size: 11px; }
    .cacheRow .k { flex: 1; min-width: 0; color:#e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display:flex; align-items:center; gap:8px; }
    .cacheRow .v { flex: 0 0 auto; color: var(--text-muted); }
    .typeBadge { font-size:9px; font-weight:700; padding:2px 4px; border-radius:3px; text-transform:uppercase; color:#000; }
    .typeBadge.ls { background:#94a3b8; }
    .typeBadge.idb { background:#3b82f6; color:#fff; }

    .colHelp { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
    .colList { display: flex; flex-direction: column; gap: 6px; }
    .colItem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; }
    .colItem .name { font-weight: 500; font-size: 13px; color: #f1f5f9; flex: 1; font-family: var(--font-mono); }
    .colItem .miniBtns { display: flex; gap: 2px; background: rgba(0,0,0,0.3); border-radius: 6px; padding: 2px; }
    .colItem .miniBtns button { background: transparent; border: none; color: var(--text-muted); width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-family: var(--font-mono); }
    .colItem .miniBtns button:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: #fff; }
    .colItem .miniBtns button:disabled { opacity: 0.2; cursor: default; }

    /* --- FOOTER LEGEND --- */
    footer.legendBar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(15, 17, 21, 0.9); backdrop-filter: blur(12px); border-top: 1px solid var(--glass-border); font-family: var(--font-mono); font-size: 11px; }
    .legendInner { max-width: 1600px; margin: 0 auto; padding: 10px 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; color: var(--text-muted); }
    .legendTitle { font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; }
    .legendNote { opacity: 0.7; margin-right: auto; }
    .statusGroup { display: flex; gap: 12px; margin-left: auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
    .statusGroup .pill { padding: 4px 10px; font-size: 10px; height: 24px; background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); }
    .legendVersion { color: var(--primary); border-color: rgba(32, 200, 255, 0.24) !important; background: rgba(32, 200, 255, 0.08) !important; letter-spacing: 0.04em; cursor: help; }
    .legendVersion::before { content: "vFids"; color: var(--text-muted); margin-right: 6px; }

/* --- RESPONSIVE LOGIC (Zoom Levels) --- */
    /* Stufe 1: Laptops / Zoom */
    @media (max-width: 1350px) {
        .cell-route > span:last-child { display: none !important; }
        .cell-route > span:nth-child(2) { display: none !important; }
        th .opt-route { display: none !important; }
        /* Mitte schrumpfen lassen */
        th:nth-child(4), td:nth-child(4) { width: 50px !important; min-width: 50px; }
    }

    /* Stufe 2: Tablets / Starker Zoom */
    @media (max-width: 1100px) {
        /* ALT/GS (Spalte 5) ausblenden */
        th.col-altgs, td.col-altgs { display: none !important; }
    }

    /* Stufe 3: Mobile (Smartphone) - KRITISCH FÜR XP SICHTBARKEIT */
    @media (max-width: 800px) {
        /* Semantische Mobile-Regeln statt nth-child, damit Reorder/Custom Layouts stabil bleiben */
        th.col-ap, td.col-ap,
        th.col-altgs, td.col-altgs { display: none !important; }

        th.col-status, td.col-status {
            width: 100px !important;
            min-width: 100px !important;
        }

        th.col-xp, td.col-xp {
            width: 55px !important;
            min-width: 55px !important;
            max-width: 55px !important;
            display: table-cell !important;
            padding-left: 2px !important;
            padding-right: 2px !important;
        }

        th.col-typeRoute, td.col-typeRoute {
            min-width: 0 !important;
            width: auto !important;
        }

        table { table-layout: fixed; width: 100%; max-width: 100%; }
        .topbar { grid-template-columns: auto 1fr auto; }
    }

    /* Stufe 4: Sehr kleine Geräte (iPhone SE etc) */
    @media (max-width: 400px) {
        /* Wenn es extrem eng wird: Zeige nur Zeit, Callsign, Status, XP */
        th.col-typeRoute, td.col-typeRoute { display: none !important; }
        th.col-callsign, td.col-callsign { width: 80px !important; min-width: 80px !important; }
    }

/* --- LIGHT THEME: CONFIG MODAL READABILITY --- */
:root[data-theme="light"] .modal.cfgModal {
  background: #f8fbff;
  color: #152033;
  border-color: rgba(42, 75, 112, 0.18);
  box-shadow: 0 46px 90px -26px rgba(15, 23, 42, 0.34);
}

:root[data-theme="light"] .configModalWorkflow .modalHead {
  background: rgba(248, 251, 255, 0.96);
  border-bottom-color: rgba(42, 75, 112, 0.16);
}

:root[data-theme="light"] .configModalWorkflow .modalHead h3 {
  color: #162033;
}

:root[data-theme="light"] .cfgModalIntro {
  color: #526985;
}

:root[data-theme="light"] .modalBody.cfgBody {
  background: linear-gradient(180deg, #eef3f8 0%, #e7eef6 100%);
}

:root[data-theme="light"] .cfgShell {
  background: rgba(229, 237, 247, 0.72);
}

:root[data-theme="light"] .cfgNav {
  background: rgba(226, 235, 245, 0.88);
  border-right-color: rgba(42, 75, 112, 0.14);
}

:root[data-theme="light"] .cfgNavBtn {
  color: #526985;
  background: transparent;
}

:root[data-theme="light"] .cfgNavBtn .cfgNavTitle {
  color: #526985;
}

:root[data-theme="light"] .cfgNavBtn .cfgNavDesc {
  color: #64748b;
}

:root[data-theme="light"] .cfgNavBtn:hover {
  color: #152033;
  background: rgba(8, 126, 164, 0.08);
  border-color: rgba(8, 126, 164, 0.22);
}

:root[data-theme="light"] .cfgNavBtn:hover .cfgNavTitle {
  color: #24344d;
}

:root[data-theme="light"] .cfgNavBtn.active {
  color: #ffffff;
  background: linear-gradient(135deg, #087ea4 0%, #0f9fc8 100%);
  border-color: rgba(8, 126, 164, 0.38);
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.65), 0 10px 22px rgba(8, 126, 164, 0.18);
}

:root[data-theme="light"] .cfgNavBtn.active .cfgNavTitle,
:root[data-theme="light"] .cfgNavBtn.active .cfgNavDesc {
  color: #ffffff;
}

:root[data-theme="light"] .tabPanel {
  color: #152033;
}

:root[data-theme="light"] .cfgBlock {
  border-top-color: rgba(42, 75, 112, 0.13);
  background: transparent;
  box-shadow: none;
}

:root[data-theme="light"] .cfgBlockHead h4,
:root[data-theme="light"] .cfgTitle,
:root[data-theme="light"] .cfgSectionTitle {
  color: #172033;
}

:root[data-theme="light"] .cfgBlockHead .sub,
:root[data-theme="light"] .cfg-row .sub,
:root[data-theme="light"] .colHelp,
:root[data-theme="light"] .hint {
  color: #526985;
}

:root[data-theme="light"] .cfg-section {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

:root[data-theme="light"] .cfg-row {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(42, 75, 112, 0.12);
  color: #24344d;
}

:root[data-theme="light"] .cfg-row:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(8, 126, 164, 0.24);
}

:root[data-theme="light"] .cfg-row label {
  color: #24344d;
}

:root[data-theme="light"] .cfg-input,
:root[data-theme="light"] .cfg-select {
  background-color: rgba(255, 255, 255, 0.96);
  color: #152033;
  border-color: rgba(42, 75, 112, 0.22);
}

:root[data-theme="light"] .cfg-input:focus,
:root[data-theme="light"] .cfg-select:focus {
  background-color: #ffffff;
  border-color: #087ea4;
  box-shadow: 0 0 0 3px rgba(8, 126, 164, 0.16);
}

:root[data-theme="light"] .slider {
  background-color: #cbd5e1;
  border-color: #94a3b8;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
}

:root[data-theme="light"] .slider:before {
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.24);
}

:root[data-theme="light"] input:checked + .slider {
  background-color: rgba(8, 126, 164, 0.22);
  border-color: #087ea4;
}

:root[data-theme="light"] input:checked + .slider:before {
  background-color: #087ea4;
}

:root[data-theme="light"] .cfgActions {
  background: rgba(248, 251, 255, 0.96);
  border-top-color: rgba(42, 75, 112, 0.16);
}

:root[data-theme="light"] .btnGhost {
  color: #526985;
}

:root[data-theme="light"] .btnGhost:hover {
  color: #152033;
  background: rgba(8, 126, 164, 0.08);
}

:root[data-theme="light"] .cacheBar {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(42, 75, 112, 0.13);
}

:root[data-theme="light"] .cacheRow {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(42, 75, 112, 0.12);
}

:root[data-theme="light"] .cacheRow .k {
  color: #24344d;
}

:root[data-theme="light"] .cacheRow .v {
  color: #526985;
}

:root[data-theme="light"] .colItem {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(42, 75, 112, 0.12);
}

:root[data-theme="light"] .colItem .name {
  color: #24344d;
}

:root[data-theme="light"] .colItem .miniBtns {
  background: rgba(100, 116, 139, 0.12);
}

:root[data-theme="light"] .colItem .miniBtns button {
  color: #526985;
}

:root[data-theme="light"] .colItem .miniBtns button:hover:not(:disabled) {
  background: rgba(8, 126, 164, 0.12);
  color: #152033;
}

:root[data-theme="light"] .autocomplete-list {
  background: #ffffff;
  border-color: rgba(42, 75, 112, 0.18);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.16);
}

:root[data-theme="light"] .autocomplete-item {
  color: #526985;
  border-bottom-color: rgba(42, 75, 112, 0.10);
}

:root[data-theme="light"] .autocomplete-item:hover,
:root[data-theme="light"] .autocomplete-item.active {
  background: rgba(8, 126, 164, 0.11);
  color: #152033;
}

:root[data-theme="light"] .autocomplete-item strong {
  color: #172033;
}

:root[data-theme="light"] .input-clear {
  background: rgba(100, 116, 139, 0.12);
  color: #526985;
}

:root[data-theme="light"] .input-clear:hover {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

/* --- LIGHT THEME: PILOT MODAL READABILITY --- */
:root[data-theme="light"] .modal.pilotModal {
  background: #f8fbff;
  color: #152033;
  border-color: rgba(42, 75, 112, 0.18);
  box-shadow: 0 46px 90px -26px rgba(15, 23, 42, 0.34);
}

:root[data-theme="light"] .modal.pilotModal .modalHead {
  background: rgba(248, 251, 255, 0.96);
  border-bottom-color: rgba(42, 75, 112, 0.16);
}

:root[data-theme="light"] .modal.pilotModal .modalHead h3 {
  color: #162033;
}

:root[data-theme="light"] .modal.pilotModal .modalSubtitleTiny,
:root[data-theme="light"] .modal.pilotModal .modalHead .close {
  color: #526985;
}

:root[data-theme="light"] .modal.pilotModal .modalHead .close:hover {
  color: #152033;
  background: rgba(8, 126, 164, 0.08);
}

:root[data-theme="light"] .modalBody.pilotBody {
  background: linear-gradient(180deg, #eef3f8 0%, #e7eef6 100%);
  color: #152033;
}

:root[data-theme="light"] .modal.pilotModal .card {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(42, 75, 112, 0.12);
  box-shadow: 0 12px 30px rgba(46, 70, 101, 0.10);
  color: #152033;
}

:root[data-theme="light"] .modal.pilotModal details.card > summary {
  background: transparent;
}

:root[data-theme="light"] .modal.pilotModal details[open].card > summary {
  border-bottom-color: rgba(42, 75, 112, 0.12);
}

:root[data-theme="light"] .modal.pilotModal .card h4,
:root[data-theme="light"] .modal.pilotModal .pilotBreakdownTitle {
  color: #172033;
  border-bottom-color: rgba(42, 75, 112, 0.13);
}

:root[data-theme="light"] .modal.pilotModal details.card > summary::after {
  color: #526985;
}

:root[data-theme="light"] .modal.pilotModal .kv .k {
  color: #526985;
}

:root[data-theme="light"] .modal.pilotModal .kv .v {
  color: #24344d;
}

:root[data-theme="light"] .modal.pilotModal .list {
  color: #526985;
}

:root[data-theme="light"] .modal.pilotModal .xpExplain {
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.96), rgba(226, 235, 245, 0.88));
  border-color: rgba(42, 75, 112, 0.14);
  color: #526985;
}

:root[data-theme="light"] .modal.pilotModal .xpComponent {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(42, 75, 112, 0.13);
}

:root[data-theme="light"] .modal.pilotModal .xpComponent.age {
  background: rgba(224, 242, 254, 0.78);
  border-color: rgba(14, 116, 144, 0.22);
}

:root[data-theme="light"] .modal.pilotModal .xpComponent.score {
  background: rgba(220, 252, 231, 0.78);
  border-color: rgba(4, 120, 87, 0.22);
}

:root[data-theme="light"] .modal.pilotModal .xpComponent .xpName {
  color: #24344d;
}

:root[data-theme="light"] .modal.pilotModal .xpComponent .xpDesc {
  color: #526985;
}

:root[data-theme="light"] .modal.pilotModal .xpComponent .xpValue {
  color: #24344d;
}

:root[data-theme="light"] .modal.pilotModal .diagChip {
  background: rgba(226, 235, 245, 0.88);
  border-color: rgba(42, 75, 112, 0.14);
  color: #24344d;
}

:root[data-theme="light"] .modal.pilotModal .diagChip .lbl {
  color: #64748b;
}

:root[data-theme="light"] .modal.pilotModal .diagChip .val {
  color: #172033;
}

:root[data-theme="light"] .modal.pilotModal .diagGroup {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(42, 75, 112, 0.12);
}

:root[data-theme="light"] .modal.pilotModal .diagGroupTitle {
  color: #526985;
}

:root[data-theme="light"] .modal.pilotModal .diagRowKey {
  color: #64748b;
}

:root[data-theme="light"] .modal.pilotModal .diagRowValue {
  color: #24344d;
}

:root[data-theme="light"] .modal.pilotModal .diagRowValue.is-muted,
:root[data-theme="light"] .modal.pilotModal .diagMuted {
  color: #64748b;
}

:root[data-theme="light"] .modal.pilotModal .diagRowValue.is-warn {
  color: #b45309;
}

:root[data-theme="light"] .modal.pilotModal .diagCandidate {
  background: rgba(248, 251, 255, 0.92);
  border-color: rgba(42, 75, 112, 0.11);
}

:root[data-theme="light"] .modal.pilotModal .diagCandidateRunway {
  color: #075985;
}

:root[data-theme="light"] .modal.pilotModal .diagCandidateEntry {
  color: #24344d;
}

:root[data-theme="light"] .modal.pilotModal .diagCandidateProb {
  color: #172033;
}

/* --- LIGHT THEME: CHANGELOG MODAL READABILITY --- */
:root[data-theme="light"] .modal.changelogModal {
  background: #f8fbff;
  color: #152033;
  border-color: rgba(42, 75, 112, 0.18);
  box-shadow: 0 46px 90px -26px rgba(15, 23, 42, 0.34);
}

:root[data-theme="light"] .modal.changelogModal .modalHead {
  background: rgba(248, 251, 255, 0.96);
  border-bottom-color: rgba(42, 75, 112, 0.16);
}

:root[data-theme="light"] .modal.changelogModal .modalHead h3 {
  color: #162033;
}

:root[data-theme="light"] .modal.changelogModal .modalHead .tiny,
:root[data-theme="light"] .modal.changelogModal .modalHead .close {
  color: #526985;
}

:root[data-theme="light"] .modal.changelogModal .modalHead .close:hover {
  color: #152033;
  background: rgba(8, 126, 164, 0.08);
}

:root[data-theme="light"] .modalBody.changelogBody {
  background: linear-gradient(180deg, #eef3f8 0%, #e7eef6 100%);
  color: #152033;
}

:root[data-theme="light"] .changelogIntro {
  background: rgba(248, 251, 255, 0.92);
  border-bottom-color: rgba(42, 75, 112, 0.12);
}

:root[data-theme="light"] .changelogIntro h3 {
  color: #172033;
}

:root[data-theme="light"] .changelogIntro .tiny {
  color: #526985;
}

:root[data-theme="light"] .changelogContent {
  background: rgba(255, 255, 255, 0.40);
}

:root[data-theme="light"] .changelogKnownBugs {
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(180, 83, 9, 0.22);
  box-shadow: none;
}

:root[data-theme="light"] .changelogKnownBugs h4 {
  color: #92400e;
}

:root[data-theme="light"] .changelogKnownBugs li {
  color: #24344d;
}

:root[data-theme="light"] .changelogRelease {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(42, 75, 112, 0.13);
  box-shadow: 0 14px 30px rgba(46, 70, 101, 0.10);
}

:root[data-theme="light"] .changelogReleaseHead {
  background: rgba(248, 251, 255, 0.92);
  border-bottom-color: rgba(42, 75, 112, 0.12);
}

:root[data-theme="light"] .changelogDate {
  color: #172033;
}

:root[data-theme="light"] .changelogTime {
  color: #526985;
}

:root[data-theme="light"] .changelogVersionBadge {
  color: #0369a1;
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(3, 105, 161, 0.18);
}

:root[data-theme="light"] .changelogSection {
  border-top-color: rgba(42, 75, 112, 0.10);
}

:root[data-theme="light"] .changelogSection h5 {
  color: #526985;
}

:root[data-theme="light"] .changelogSection.improvements h5 {
  color: #0369a1;
}

:root[data-theme="light"] .changelogSection.fixes h5 {
  color: #047857;
}

:root[data-theme="light"] .changelogSection.features h5 {
  color: #6d28d9;
}

:root[data-theme="light"] .changelogSection li {
  color: #24344d;
}

:root[data-theme="light"] .changelogEmpty {
  color: #526985;
}

:root[data-theme="light"] .changelogFooter {
  background: rgba(248, 251, 255, 0.96);
  border-top-color: rgba(42, 75, 112, 0.16);
}

/* Light surfaces need their own ink colors, not translucent dark-theme whites. */
:root[data-theme="light"] header {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(32, 44, 57, 0.06);
}
:root[data-theme="light"] .board {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(32, 44, 57, 0.04);
}
:root[data-theme="light"] :is(.boardHeader, thead th, footer.legendBar) {
  background: #f8fafb;
}
:root[data-theme="light"] .airportTabs {
  background: transparent;
  border-color: transparent;
}
:root[data-theme="light"] .airportTab {
  color: var(--text-muted);
  background: transparent;
  letter-spacing: 0;
}
:root[data-theme="light"] .airportTab:hover:not(:disabled) {
  color: var(--text-main);
  background: #edf2f5;
}
:root[data-theme="light"] .airportTab.active {
  color: #075c70;
  background: var(--primary-dim);
  box-shadow: inset 0 0 0 1px #b8d8e1, inset 0 -2px 0 var(--primary);
}
:root[data-theme="light"] .airportTab.active:hover { background: #d9edf2; }
:root[data-theme="light"] .airportTab .badge {
  color: #075c70;
  background: #ffffff;
  border-color: #b8d8e1;
}
:root[data-theme="light"] .airportTab:disabled { opacity: 0.55; }
:root[data-theme="light"] .pill.clockPill {
  color: #07556d;
  background: #edf7fa;
  border-color: #a5cdd9;
}
:root[data-theme="light"] #utcClock,
:root[data-theme="light"] #utcClockMobile {
  color: #17313c;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="light"] :is(.controls button, .boardHeader button):hover {
  color: var(--primary);
  background: var(--primary-dim);
  border-color: #a5cdd9;
}
:root[data-theme="light"] :is(button, [role="button"]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
:root[data-theme="light"] :is(.dot, .xDot) { box-shadow: none; }
:root[data-theme="light"] .runwayGroup .lbl { color: var(--text-muted); opacity: 1; }
:root[data-theme="light"] .runwayGroup .val,
:root[data-theme="light"] .runwaySourceChip {
  color: #263c4c;
  background: #edf1f4;
  border-color: #c6d2dd;
}
:root[data-theme="light"] .runwayGlobal.atis .val,
:root[data-theme="light"] .runwaySourceChip.atis {
  color: #174e87;
  background: #e8f2fc;
  border-color: #a9c7e5;
}
:root[data-theme="light"] .runwayGlobal.pred .val,
:root[data-theme="light"] .runwaySourceChip.pred {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: #dcbc85;
}
:root[data-theme="light"] .metarRow {
  opacity: 1;
  color: var(--text-muted);
  -webkit-mask-image: none;
  mask-image: none;
  text-overflow: ellipsis;
}
:root[data-theme="light"] .metarRow:is(:hover, .loading) { color: var(--primary); }
:root[data-theme="light"] .atisBadgeInline { color: #ffffff; }
:root[data-theme="light"] :is(.runwayInlineNotice, .runwayLoadingText, .legendNote) { opacity: 1; }

:root[data-theme="light"] .cell-route {
  color: var(--text-muted);
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}
:root[data-theme="light"] :is(.cell-stacked .topVal, .legendTitle) { color: var(--text-main); }
:root[data-theme="light"] :is(.prog-text, .cell-stacked .botVal, .timeKind, .timeSub, .timeSub .subKind, .mutedLow) {
  color: var(--text-muted);
  opacity: 1;
}
:root[data-theme="light"] tbody tr { border-bottom-color: #e4e9ee; }
/* De-emphasize completed/remote-ground flights without fading their contents twice. */
:root[data-theme="light"] tbody tr:is(.finishedRow, .groundRow):not(.adding):not(.removing) {
  opacity: 1;
  filter: none;
  background-color: #f5f7f9;
}
:root[data-theme="light"] tbody tr:is(.finishedRow, .groundRow) td { color: var(--text-muted); }
:root[data-theme="light"] tbody tr:is(.finishedRow, .groundRow):hover { background-color: #eaf2f5; }
:root[data-theme="light"] tbody tr.landedDivider { border-top-color: #c6d2dd; }
:root[data-theme="light"] .runwayDivider { color: #365568; }
:root[data-theme="light"] .runwayDivider > span {
  background: #edf4f7;
  border-color: #c5d6df;
  box-shadow: none;
}
:root[data-theme="light"] .detail-pill {
  color: #435469;
  background: #f0f4f7;
  border-color: #cbd6df;
}
:root[data-theme="light"] .xpPill {
  color: var(--text-main);
  background: #f0f4f7;
  border-color: #d4dce3;
}
:root[data-theme="light"] .xpPill:hover { background: #e7eef3; border-color: #b5c6d2; }
:root[data-theme="light"] .xpPill:is(.missing, .loading) { opacity: 1; color: var(--text-muted); }
:root[data-theme="light"] :is(.xpPill .spinner, .timeSpinner) {
  border-color: #c5d6df;
  border-top-color: var(--primary);
}
:root[data-theme="light"] .statusGroup .pill:not(.legendVersion) {
  color: var(--text-muted);
  background: #ffffff;
  border-color: var(--glass-border);
}
:root[data-theme="light"] .tooltip {
  color: var(--text-main);
  background: #ffffff;
  border-color: #c6d2dd;
  box-shadow: 0 4px 16px rgba(32, 44, 57, 0.14);
}
:root[data-theme="light"] ::-webkit-scrollbar-track { background: #eef2f5; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #b3c0cb; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #8c9eac; }
:root[data-theme="light"] .infoWarning { color: var(--warn); background: var(--warn-bg); }
:root[data-theme="light"] .airportLoadCard {
  background: #ffffff;
  border-color: var(--glass-border);
  box-shadow: 0 8px 24px rgba(32, 44, 57, 0.12);
}
:root[data-theme="light"] .airportLoadTitle { color: var(--text-main); }
:root[data-theme="light"] .airportLoadText { color: var(--text-muted); }
:root[data-theme="light"] .airportLoadSpinner { border-color: #d4dce3; border-top-color: var(--primary); }
:root[data-theme="light"] .airportLoadStep { background: #f0f4f7; border-color: #d4dce3; }
:root[data-theme="light"] .airportLoadStep.done { color: var(--good); background: var(--good-bg); }

/* Keep runway/weather details consistent with the header, including REX and ATIS states. */
:root[data-theme="light"] .modal.runwayInfoModal .modalBody { background: #f3f6f8; }
:root[data-theme="light"] .modal.runwayInfoModal .card { background: #ffffff; box-shadow: none; }
:root[data-theme="light"] :is(.runwayInfoModal .kv .v, .runwayRawTitle, .runwayRawText,
  .predictionTrace, .predictionSummaryValue, .predictionSectionTitle, .predictionEvalRunway,
  .predictionRawDetails summary, .atisStationTitle) { color: var(--text-main); }
:root[data-theme="light"] :is(.predictionSummarySub, .predictionEvalReason) { color: var(--text-muted); }
:root[data-theme="light"] :is(.runwayInfoMetaChip, .predictionMetricChip, .atisLineTag,
  .runwayInfoEmpty, .atisStationSummary .runwayGroup) {
  color: var(--text-main);
  background: #f0f4f7;
  border-color: #cbd6df;
}
:root[data-theme="light"] :is(.runwayRawCard, .atisStationCard, .predictionSummaryCard,
  .predictionEvalCard, .predictionRawDetails, .runwayInfoRunwayGroups .runwayGroup) {
  background: #f8fafb;
  border-color: var(--glass-border);
}
:root[data-theme="light"] .predictionEvalCard.is-ok { background: var(--good-bg); border-color: #a6cebb; }
:root[data-theme="light"] .predictionEvalCard.is-rejected { background: var(--warn-bg); border-color: #dcbc85; }
:root[data-theme="light"] .predictionEvalCard.is-blocked { background: var(--bad-bg); border-color: #e3a7ad; }
:root[data-theme="light"] .predictionEvalOp { color: var(--info); }
:root[data-theme="light"] .predictionEvalStatus.is-ok { color: var(--good); background: var(--good-bg); }
:root[data-theme="light"] .predictionEvalStatus.is-rejected { color: var(--warn); background: var(--warn-bg); }
:root[data-theme="light"] .predictionEvalStatus.is-blocked { color: var(--bad); background: var(--bad-bg); }
:root[data-theme="light"] .atisLine { color: var(--text-main); background: #f8fafb; border-color: #d4dce3; }
:root[data-theme="light"] .atisLine.is-arr { background: #f0f6fd; }
:root[data-theme="light"] .atisLine.is-dep { background: #fff8ed; }
:root[data-theme="light"] .atisLine.is-both { background: #f0f4f7; }
:root[data-theme="light"] .atisInlineMark.arr,
:root[data-theme="light"] .atisLineTag.arr { color: #174e87; background: #e0edfc; border-color: #a9c7e5; }
:root[data-theme="light"] .atisInlineMark.dep,
:root[data-theme="light"] .atisLineTag.dep { color: var(--warn); background: #ffedce; border-color: #dcbc85; }
:root[data-theme="light"] .atisInlineMark.both,
:root[data-theme="light"] .atisLineTag.both { color: #263c4c; background: #e3ebf1; border-color: #b5c6d2; }
:root[data-theme="light"] :is(.atisSourceRaw, .atisSourceArrow) { opacity: 1; }

@media (max-width: 800px) {
  :root[data-theme="light"] .board .xpPill {
    max-width: 100%;
    gap: 4px;
    padding: 3px 5px;
    font-variant-numeric: tabular-nums;
  }
  :root[data-theme="light"] .board .xpPill .lvl { display: none; }
  :root[data-theme="light"] .board .xpPill .xDot { flex-shrink: 0; }
}

/* North-up airport overview. Geometry and SVG sizing need no animation/resize loop. */
.runwayInfoModal {
  --sketch-bg: #131e2a;
  --sketch-taxi: #344756;
  --sketch-runway: #617587;
  --sketch-ink: #e5edf4;
  --sketch-dep: #f1b75e;
  --sketch-arr: #58cde3;
}
:root[data-theme="light"] .runwayInfoModal {
  --sketch-bg: #f8fafb;
  --sketch-taxi: #d0dce2;
  --sketch-runway: #899ca9;
  --sketch-ink: #263c4c;
  --sketch-dep: #925413;
  --sketch-arr: #076780;
}
.runwayInfoModal .runwayInfoBody { gap: 0; background: var(--sketch-bg); }
.runwayOverviewSummary { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding-bottom: 16px; }
.runwayOverviewSummary h4 { margin: 0; font-size: 12px; letter-spacing: 0; }
.runwayOverviewSummary .runwayInfoSummaryMeta { flex-basis: 100%; margin: 0; gap: 6px 18px; }
.runwayOverviewSummary .runwayInfoMetaChip { padding: 0; border: 0; background: transparent; border-radius: 0; }
.runwayOverviewSummary .runwayInfoRunwayGroups .runwayGroup { padding: 0; border: 0; background: transparent; border-radius: 0; }
.runwayInfoModal .runwayInfoTop { grid-template-columns: minmax(0,1fr) 280px; gap: 20px; padding: 16px 0 20px; border-top: 1px solid var(--glass-border); }
.runwaySketch { margin: 0; min-width: 0; align-self: center; }
.runwaySketchSvg { display: block; width: 100%; height: auto; aspect-ratio: 700 / 340; }
/* One static background filter; runway motion and labels are separate siblings. */
.sketchContext { filter: blur(0.65px); opacity: 0.9; pointer-events: none; }
.sketchTaxi { stroke: var(--sketch-taxi); stroke-width: 1.3; fill: none; }
.sketchRunway { stroke: var(--sketch-runway); stroke-width: 10; stroke-linecap: butt; fill: none; }
.sketchActive, .sketchFlow { stroke-width: 3; stroke-linejoin: round; fill: none; }
.sketchActive { opacity: 0.55; }
:is(.sketchActive, .sketchFlow).dep { stroke: var(--sketch-dep); }
:is(.sketchActive, .sketchFlow).arr { stroke: var(--sketch-arr); }
.sketchFlow {
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  animation: runwayFlow 4.8s linear infinite;
  animation-play-state: paused;
}
.sketchFlow.is-still { animation: none; transform: translateX(calc(var(--flow-distance) * 0.4)); opacity: 1; }
@keyframes runwayFlow {
  0% { transform: translateX(0); opacity: 0; }
  12%, 84% { opacity: 1; }
  100% { transform: translateX(var(--flow-distance)); opacity: 0; }
}
.sketchNorth { stroke: var(--sketch-ink); stroke-width: 1.8; fill: none; }
.sketchNorthText { fill: var(--sketch-ink); font: 13px var(--font-mono); }
.sketchLabel, .sketchConnections { color: var(--sketch-runway); }
.sketchLeader { stroke: currentColor; stroke-width: 1; fill: none; }
.sketchEndpoint { fill: currentColor; }
.sketchLabel rect { fill: var(--sketch-bg); stroke: none; }
.sketchLabel text { fill: var(--sketch-ink); font: 600 18px var(--font-mono); letter-spacing: 0; }
:is(.sketchLabel, .sketchConnections).dep { color: var(--sketch-dep); }
:is(.sketchLabel, .sketchConnections).arr, :is(.sketchLabel, .sketchConnections).both { color: var(--sketch-arr); }
.sketchLabel.dep text, .sketchLabel.arr text { fill: currentColor; }
.runwaySketchCaption { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 10px; color: var(--text-muted); line-height: 1.5; }
.runwaySketchCaption a { color: inherit; text-underline-offset: 2px; margin-left: auto; }
.sketchLegend { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--font-mono); }
.sketchLegend::before { content: ""; width: 18px; height: 3px; background: currentColor; }
.sketchLegend.dep { color: var(--sketch-dep); }
.sketchLegend.arr { color: var(--sketch-arr); }
.runwaySketchEmpty { display: grid; place-items: center; min-height: 180px; color: var(--text-muted); font-size: 13px; text-align: center; }
.runwayWeatherPanel { min-width: 0; border-left: 1px solid var(--glass-border); padding-left: 20px; }
.runwayWeatherPanel h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0; }
.runwayWind { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.windRose { display: block; width: 112px; height: 112px; flex: 0 0 112px; overflow: visible; }
.windRose text { fill: var(--sketch-ink); font: 12px var(--font-mono); }
.windRing, .windTicks, .windNeutral { stroke: var(--sketch-runway); stroke-width: 1.4; fill: none; }
.windSector { fill: var(--primary-dim); stroke: var(--sketch-arr); stroke-width: 0.7; }
.windVane { fill: var(--sketch-arr); }
.windShaft { stroke: var(--sketch-arr); stroke-width: 3; }
.windMotion, .windVariableMotion {
  transform-box: view-box;
  transform-origin: 90px 90px;
  animation: windSway 8.6s ease-in-out infinite;
  animation-play-state: paused;
  --wind-swing: 1.5deg;
}
.windMotion.breeze { --wind-swing: 2.8deg; animation-duration: 6.7s; }
.windMotion.strong { --wind-swing: 2deg; animation-duration: 4.7s; }
.windMotion.veering { --wind-swing: 6deg; animation-duration: 11.3s; }
.windMotion.gusting { --wind-swing: 5deg; animation-name: windGust; animation-duration: 7.1s; }
.windMotion.narrow { --wind-swing: 1deg; }
.windVariableMotion { --wind-swing: 22deg; animation-duration: 13.7s; }
.windVariableMotion.gusting { --wind-swing: 28deg; animation-duration: 9.7s; }
.windVariableMotion.strong { animation-duration: 10.3s; }
#runwayInfoModalOverlay.show:not(.windMotionPaused) :is(.windMotion, .windVariableMotion, .sketchFlow) { animation-play-state: running; }
@keyframes windSway {
  0%, 100% { transform: rotate(0deg); }
  16% { transform: rotate(calc(var(--wind-swing) * -0.65)); }
  37% { transform: rotate(var(--wind-swing)); }
  58% { transform: rotate(calc(var(--wind-swing) * -0.3)); }
  76% { transform: rotate(calc(var(--wind-swing) * 0.45)); }
  89% { transform: rotate(calc(var(--wind-swing) * -0.2)); }
}
@keyframes windGust {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(calc(var(--wind-swing) * -0.2)); }
  32% { transform: rotate(var(--wind-swing)); }
  40% { transform: rotate(calc(var(--wind-swing) * -0.8)); }
  53% { transform: rotate(calc(var(--wind-swing) * 0.4)); }
  70% { transform: rotate(calc(var(--wind-swing) * -0.15)); }
  85% { transform: rotate(calc(var(--wind-swing) * 0.25)); }
}
@media (prefers-reduced-motion: reduce) {
  .windMotion, .windVariableMotion { animation: none; transform: none; }
  .sketchFlow { animation: none; transform: translateX(calc(var(--flow-distance) * 0.4)); opacity: 1; }
  .sketchActive { opacity: 1; }
}
.windReading { display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font: 12px var(--font-mono); line-height: 1.4; }
.windReading strong { color: var(--text-main); font-size: 13px; }
.runwayWeatherPanel .runwayInfoWeatherKv { grid-template-columns: minmax(68px, 0.7fr) minmax(0, 1.3fr); gap: 8px 10px; font-size: 11px; line-height: 1.5; align-items: start; }
.runwayInfoWeatherKv .k { overflow-wrap: anywhere; }
.runwayInfoWeatherKv .v { overflow-wrap: anywhere; }
.metarDecodedDetails { display: grid; grid-template-columns: minmax(100px, 0.25fr) minmax(0, 1fr); gap: 8px 16px; font-size: 12px; line-height: 1.5; }
.metarDecodedDetails:empty { display: none; }
.metarDecodedDetails dt { color: var(--text-muted); }
.metarDecodedDetails dd { margin: 0; overflow-wrap: anywhere; color: var(--text-main); }
.runwayDisclosure { border-top: 1px solid var(--glass-border); padding: 0; }
.runwayDisclosure > summary { padding: 14px 0; cursor: pointer; color: var(--text-main); font-size: 12px; font-weight: 600; }
.runwayDisclosure > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.runwayDisclosure > :not(summary) { margin-bottom: 16px; }
.runwayDisclosure .runwayInfoSourceNote { margin-top: 0; }
.runwayInfoModal .runwayRawCard, .runwayInfoModal .atisStationCard { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.runwayInfoModal .atisStationCard + .atisStationCard { padding-top: 16px; border-top: 1px solid var(--glass-border); }
/* Dialog controls retain adequate hit areas without enlarging the board itself. */
body:has(#configModalOverlay.show), body:has(#runwayInfoModalOverlay.show) { overflow: hidden; }
.cfgModal .cfg-input { min-height: 44px; max-width: 100%; }
.cfgModal .cfgAirportInput { width: 100%; padding-right: 44px; letter-spacing: 0; }
.cfgModal .cfgSelectLanguage { width: 160px; }
.cfgModal #cfgBoardMode { width: 230px; }
.cfgModal .input-clear { top: 0; right: 0; width: 44px; height: 44px; border-radius: 6px; background: transparent; font-size: 13px; }
.cfgModal .autocomplete-item { min-height: 48px; overflow-wrap: anywhere; }
.cfgModal .cfgActions button, .cfgModal .modalHead button { min-height: 44px; min-width: 44px; }
.cfgModal .modalBody.cfgBody { max-height: none; }
.cfgModal .cfg-row > label[for] { cursor: pointer; flex: 1; padding-block: 10px; }
.cfgModal .toggle { height: 44px; }
.cfgModal .toggle .slider { top: 10px; bottom: 10px; }
.cfgModal .toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.cfgModal .cfg-row:has(> .toggle) { flex-direction: row; align-items: center; gap: 16px; }
.cfgModal button:focus-visible, .sidebar-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cfgModal .tabPanel { overscroll-behavior: contain; scroll-padding-block: 16px; }
@media (max-width: 760px) {
  #configModalOverlay { padding: 0; top: var(--cfg-visible-top, 0px); bottom: auto; height: var(--cfg-visible-height, 100dvh); }
  #configModalOverlay .cfgModal { width: 100%; height: 100%; max-height: 100%; max-width: 100%; border-radius: 0; }
  .cfgModal .modalHead { flex-shrink: 0; padding: max(10px, env(safe-area-inset-top)) 14px 10px; }
  .cfgModal .cfgModalIntro, .cfgModal .cfgBlockHead > .sub { display: none; }
  .cfgModal .cfgNav { padding: 8px 12px; gap: 6px; flex: 0 0 auto; overscroll-behavior-x: contain; }
  .cfgModal .cfgNavBtn { min-width: auto; min-height: 44px; padding: 10px 14px; }
  .cfgModal .cfg-input { font-size: 16px; }
  .cfgModal .cfgSelectLanguage, .cfgModal #cfgBoardMode { width: 100%; }
  .cfgModal .cfgActions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .cfgModal .cfgActions button { padding: 8px 4px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .cfgModal .autocomplete-list { max-height: min(180px, 32dvh); }
  .cfgModal .colItem button { min-width: 44px; min-height: 44px; }
  #mobileMenuBtn { width: 44px; height: 44px; }
}
.runwayInfoModal .atisStationHead { margin-bottom: 8px; }
.runwayInfoModal .atisStationSub { overflow-wrap: anywhere; }
.runwayInfoModal .atisLine { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.runwayInfoModal .atisRawBlock { gap: 4px; }
.atisHighlightControl { display: flex; align-items: center; gap: 10px; width: fit-content; font-size: 12px; color: var(--text-main); cursor: pointer; }
.atisHighlightControl input { appearance: none; width: 32px; height: 18px; flex: 0 0 32px; padding: 0; margin: 0; border-radius: 12px; border: 1px solid var(--sketch-runway); background: var(--glass-surface); cursor: pointer; }
.atisHighlightControl input::before { content: ""; display: block; width: 12px; height: 12px; margin: 2px; border-radius: 50%; background: var(--text-muted); }
.atisHighlightControl input:checked { background: var(--primary-dim); border-color: var(--primary); }
.atisHighlightControl input:checked::before { transform: translateX(14px); background: var(--primary); }
.atisHighlightControl input:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 680px) {
  .runwayInfoModal .runwayInfoTop { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .runwayWeatherPanel { border-left: 0; padding-left: 0; border-top: 1px solid var(--glass-border); padding-top: 12px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px 16px; }
  .runwayWeatherPanel h4 { grid-column: 1 / -1; margin-bottom: 0; }
  .runwayWind { margin: 0; gap: 6px; }
  .runwayWeatherPanel .runwayWind { grid-column: 1 / -1; }
  .runwayWeatherPanel .runwayInfoWeatherKv { grid-column: 1 / -1; grid-template-columns: minmax(100px, 0.6fr) minmax(0, 1.4fr); }
  .runwayOverviewSummary { gap: 10px; }
  .runwayOverviewSummary h4 { flex-basis: 100%; }
  .runwayOverviewSummary .runwayInfoSummaryMeta { gap: 6px 12px; }
  .runwayWeatherPanel .runwayInfoWeatherKv { align-content: center; }
}