#viewModeSwitch { display: flex; gap: 4px; padding: 4px; border: 1px solid #187e45; border-radius: 10px; background: #05160f; }
#viewModeSwitch button { flex: 1; width: auto !important; min-height: 40px; margin: 0 !important; border: 0 !important; border-radius: 7px; background: transparent !important; color: #c5eed7 !important; font: 650 13px system-ui, sans-serif !important; cursor: pointer; }
#viewModeSwitch button[aria-pressed="true"] { background: #39ff82 !important; color: #042312 !important; }
#viewModeSwitch button:focus-visible { outline: 2px solid white; outline-offset: -3px; }
@media (max-width: 700px) { #viewModeSwitch { display: none !important; } }
@media (min-width: 701px) {
  html[data-view-mode="map"] body { background: #dce8d4 !important; }
  html[data-view-mode="map"] body #radar {
    position: fixed !important; inset: 0 !important;
    width: 100vw !important; height: 100dvh !important;
    max-width: none !important; max-height: none !important;
    transform: none !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    outline: none !important; clip-path: none !important; z-index: 5 !important;
  }
  html[data-view-mode="map"] body #radarWorldMapHost { opacity: 1 !important; background: #cfe0c8 !important; }
  html[data-view-mode="map"] body :is(#radarCompassLayer, .radarCompass, #compassN, #compassS, #compassE, #compassW) { display: none !important; }
  html[data-view-mode] body #phoneApp { display: block !important; pointer-events: none; }
  html[data-view-mode] body #phoneApp > :not(#phoneMapCredit) { display: none !important; }
  html[data-view-mode] body #phoneMapCredit { display: block; position: fixed; left: 18px; bottom: 66px; z-index: 100630; padding: 4px 7px; border-radius: 5px; background: #132c3cbf; color: var(--ui-surface, white); font: 10px/1.4 system-ui, sans-serif; pointer-events: auto; text-decoration: none; }
}
/* Modern map workspace; radar and phone layouts retain their own presentation. */
#mapLiveStatus, #mapExitButton { display: none; }
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) {
    --map-ink: var(--ui-ink, #193347); --map-muted: var(--ui-muted, #647a8a); --map-accent: var(--ui-accent, #087f8b);
    font-family: Inter, 'Segoe UI', system-ui, sans-serif !important;
    & :is(#brandPanel, #brandLogo, #weatherPanel, #topTimePanel, #dashboardClock, #dashboardBrand, #radarSourceBadge, #hint, #source, #status, #topLiveStatus) { display: none !important; }
    & #phoneApp > #phoneTopBar { display: flex !important; }
    & #phoneTopBar { position: fixed; inset: 16px 16px auto; height: 72px; box-sizing: border-box; padding: 12px 16px 12px 70px; align-items: center; gap: 22px; background: var(--ui-surface, #fffffffa); color: var(--map-ink); border: 1px solid var(--ui-border, #dce7ed); border-radius: 20px; box-shadow: 0 8px 30px #173d5114; z-index: 100760; pointer-events: auto; }
    & .phoneBrandRow { flex: 0 0 170px; display: flex; align-items: center; }
    & .phoneBrand { display: block; width: 170px; height: 42px; object-fit: contain; }
    & #phoneConnection { display: none; }
    & #phoneSearchWrap { display: flex; flex: 1; align-items: center; gap: 12px; max-width: 520px; min-width: 140px; height: 46px; padding: 0 12px; border: 1px solid var(--ui-border, #dbe6ec); border-radius: 12px; background: var(--ui-soft, #f3f7f9); }
    & #phoneSearchWrap > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--map-accent); }
    & #phoneSearchInput { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--map-ink); font: 14px system-ui, sans-serif; }
    & #phoneSearchWrap:focus-within { outline: 2px solid var(--ui-accent, #168d99); outline-offset: 2px; }
    & .phoneCount { display: none; }
    & #phoneSearchClear { width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--map-muted); font-size: 22px; cursor: pointer; }
    & #phoneSearchResults { display: none; position: absolute; top: 82px; left: 250px; width: min(520px, calc(100vw - 300px)); max-height: 55vh; overflow: auto; background: var(--ui-surface, white); border: 1px solid var(--ui-border, #dce7ed); border-radius: 16px; box-shadow: 0 12px 40px #173d5126; }
    &.phone-search-open #phoneSearchResults { display: block; }
    & .phoneSearchHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--ui-soft, #f5f8fa); border-bottom: 1px solid var(--ui-border, #e5edf2); }
    & .phoneSearchHead .phoneSearchHeading { flex: 1; min-width: 0; }
    & .phoneSearchClose { flex: 0 0 auto; width: 34px; height: 34px; margin-right: 10px; border: 0; border-radius: 9px; background: transparent; color: var(--map-muted); font-size: 22px; line-height: 1; cursor: pointer; }
    & .phoneSearchClose:hover { background: var(--ui-hover, #eef8f8); color: var(--map-ink); }
    & .phoneSearchHeading { padding: 16px; margin: 0; color: var(--map-muted); background: var(--ui-soft, #f5f8fa); font-size: 12px; }
    & .phoneSearchRow { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 18px; background: var(--ui-surface, white); border: 0; border-bottom: 1px solid var(--ui-border, #e5edf2); color: var(--map-ink); text-align: left; cursor: pointer; }
    & .phoneSearchRow:hover { background: var(--ui-hover, #eef8f8); }
    & .phoneSearchRow span, & .phoneSearchEmpty { color: var(--map-muted); font-size: 12px; }
    & .phoneSearchEmpty { padding: 16px; }
    & #mapLiveStatus { display: flex; align-items: center; gap: 9px; margin-left: auto; white-space: nowrap; }
    & #mapLiveStatus strong { display: block; font-size: 13px; font-weight: 650; }
    & #mapTrafficStatus { display: block; margin-top: 4px; color: var(--map-muted); font-size: 11px; }
    & .mapLiveDot { width: 8px; height: 8px; border-radius: 50%; background: #13aa7a; box-shadow: 0 0 0 4px #13aa7a16; }
    & :is(#mapExitButton, #spaceModeButton) { display: block; flex-shrink: 0; height: 42px; padding: 0 14px; border: 1px solid var(--ui-border, #dbe6ec); border-radius: 10px; background: var(--ui-surface, white); color: var(--map-ink); font: 600 12px system-ui; cursor: pointer; }
    & #leftHamburgerButton { top: 30px !important; left: 30px !important; width: 42px !important; height: 42px !important; min-width: 0 !important; border: 0 !important; border-radius: 11px !important; color: var(--ui-ink, #244a60) !important; background: var(--ui-soft, #eef4f7) !important; box-shadow: none !important; font: 24px system-ui !important; z-index: 100770 !important; }
    & #leftHamburgerMenu { width: 232px !important; padding: 12px !important; box-sizing: border-box !important; border: 1px solid var(--ui-border, #dce7ed) !important; border-radius: 18px !important; background: var(--ui-surface, #fffffff7) !important; box-shadow: 0 12px 32px #173d511c !important; max-height: calc(100dvh - 190px) !important; overflow: auto !important; }
    & #leftHamburgerMenu.closed { visibility: hidden !important; pointer-events: none !important; }
    & #leftMenuItems { gap: 5px !important; }
    & #leftMenuItems > button, & #soundEffectsButton { display: flex !important; align-items: center; width: 100% !important; min-height: 46px !important; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--ui-ink, #345266) !important; text-align: left !important; font: 600 12px/1.4 system-ui !important; letter-spacing: 0 !important; box-shadow: none !important; }
    & #leftMenuItems > button:hover, & #soundEffectsButton:hover { background: var(--ui-hover, #ecf6f7) !important; color: var(--ui-accent, #087f8b) !important; }
    & #viewModeSwitch { padding: 4px; gap: 4px; margin-bottom: 8px; border: 0; border-radius: 12px; background: var(--ui-soft, #edf3f6); }
    & #viewModeSwitch button { min-height: 38px; color: var(--ui-muted, #627989) !important; }
    & #viewModeSwitch button[aria-pressed="true"] { color: var(--ui-accent, #08727d) !important; background: var(--ui-surface, white) !important; box-shadow: 0 2px 6px #19334712; }
    & #phoneFlightCard { top: 104px !important; border-radius: 20px; box-shadow: 0 12px 40px #173d5126; max-height: calc(100dvh - 184px); }
    & #radarSourceSelector { padding: 6px !important; border: 1px solid var(--ui-border, #dce7ed) !important; border-radius: 16px !important; background: var(--ui-surface, #fffffffa) !important; box-shadow: 0 6px 24px #173d5120 !important; width: 340px !important; gap: 5px !important; }
    & #radarSourceSelector .radarSourceBtn { height: 40px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--ui-muted, #627989) !important; font: 650 11px system-ui !important; box-shadow: none !important; }
    & #radarSourceSelector .radarSourceBtn.active { background: var(--ui-accent, #087f8b) !important; color: var(--ui-surface, white) !important; }
    & :is(#bottomLeftIconDock button, #displaySettingsButton) { border: 1px solid var(--ui-border, #dce7ed) !important; background: var(--ui-surface, white) !important; color: var(--ui-ink, #345266) !important; border-radius: 12px !important; box-shadow: 0 4px 16px #173d5117 !important; min-height: 44px !important; font-family: system-ui !important; }
    & #radarZoomControls { display: flex !important; flex-direction: column-reverse; position: fixed !important; inset: auto 20px 94px auto !important; transform: none !important; gap: 0 !important; padding: 4px !important; border: 1px solid var(--ui-border, #dce7ed) !important; border-radius: 14px !important; background: var(--ui-surface, white) !important; box-shadow: 0 4px 20px #173d511a; z-index: 100640 !important; }
    & #radarZoomControls button { height: 42px !important; width: 42px !important; background: var(--ui-surface, white) !important; color: var(--ui-ink, #345266) !important; border: 0 !important; border-radius: 9px !important; font: 24px system-ui !important; }
    & #radarZoomLabel { display: none !important; }
    & :is(#displaySettingsPanel, #soundEffectsMenu) { color: var(--ui-ink, #193347) !important; background: var(--ui-surface, white) !important; border: 1px solid var(--ui-border, #dce7ed) !important; border-radius: 18px !important; padding: 18px !important; box-shadow: 0 12px 40px #173d5126 !important; font: 600 13px/1.5 system-ui !important; }
    & #displaySettingsPanel label { display: flex; align-items: center; min-height: 42px; gap: 10px; color: var(--ui-ink, #345266) !important; }
    & #displaySettingsPanel input { accent-color: var(--ui-accent, #087f8b); width: 19px; height: 19px; }
    & :is(#trackBox, #metarSearchBox, #airportVideoBox, #routeFinderPanel, #routeResultPanel, #emergencyWatchBox, #metarPinnedCard, #airportTrafficCard, #routeInfoCard, #starlinkCard) { background: var(--ui-surface, #fff) !important; color: var(--ui-ink, #193347) !important; border: 1px solid var(--ui-border, #dce7ed) !important; border-radius: 20px !important; box-shadow: 0 14px 50px #173d5126 !important; font-family: system-ui !important; }
    & :is(#trackBox, #metarSearchBox, #airportVideoBox, #routeFinderPanel, #routeResultPanel, #emergencyWatchBox, #metarPinnedCard, #airportTrafficCard, #routeInfoCard) :is(h2, h3, p, label, strong, span, div) { color: inherit; font-family: system-ui !important; }
    & :is(#trackBox, #metarSearchBox, #airportVideoBox, #routeFinderPanel, #emergencyWatchBox) input { min-height: 44px; background: var(--ui-soft, #f3f7f9) !important; color: var(--ui-ink, #193347) !important; border: 1px solid var(--ui-border, #cddde7) !important; border-radius: 10px !important; }
    & :is(#trackBox, #metarSearchBox, #airportVideoBox, #routeFinderPanel, #routeResultPanel, #emergencyWatchBox) button { background: var(--ui-soft, #eef5f7) !important; color: var(--ui-accent, #176574) !important; border: 1px solid var(--ui-border, #d8e7ec) !important; border-radius: 10px !important; min-height: 40px; font-family: system-ui !important; }
    & :is(#trackBox, #metarSearchBox, #airportVideoBox, #routeFinderPanel) button.primary { background: var(--ui-accent, #087f8b) !important; color: var(--ui-surface, white) !important; }
    & #phoneMapCredit { background: var(--ui-surface, #ffffffeb); color: var(--ui-muted, #526d7f); border: 1px solid var(--ui-border, #dce7ed); border-radius: 8px; bottom: 76px; }
  }
}
@media (min-width: 701px) and (max-width: 1050px) {
  html[data-view-mode] body:not(.phone-layout) {
    & #phoneTopBar { gap: 12px; }
    & .phoneBrandRow { flex-basis: 140px; }
    & .phoneBrand { width: 140px; }
    & #mapLiveStatus { display: none; }
    & :is(#mapExitButton, #spaceModeButton) { font-size: 11px; padding: 0 10px; }
    & #phoneSearchResults { left: 200px; width: calc(100vw - 248px); }
    & #radarSourceSelector { width: 285px !important; }
  }
}
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) #leftMenuItems [data-map-label] { font-size: 0 !important; }
  html[data-view-mode] body:not(.phone-layout) #leftMenuItems [data-map-label]::before { content: attr(data-map-label); font: 600 13px system-ui; }
  html[data-view-mode] body:not(.phone-layout) #leftMenuItems [data-map-label]::after { content: '›'; margin-left: auto; font: 20px system-ui; color: var(--ui-muted, #8ca1af); }
  /* LIVE VIDEOS'ta YouTube işareti yazının solunda kalsın: etiket
     ::before ile üretildiği için sıralama açıkça veriliyor. */
  html[data-view-mode] body:not(.phone-layout) #leftMenuItems :is(#liveVideoButton, #simVideoButton) { gap: 9px; }
  html[data-view-mode] body:not(.phone-layout) #leftMenuItems :is(#liveVideoButton, #simVideoButton) > .liveVideoMark { order: 1; }
  html[data-view-mode] body:not(.phone-layout) #leftMenuItems :is(#liveVideoButton, #simVideoButton)::before { order: 2; }
  html[data-view-mode] body:not(.phone-layout) #leftMenuItems :is(#liveVideoButton, #simVideoButton)::after { order: 3; }
}
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) #leftHamburgerMenu #leftMenuItems [data-map-label] { font-size: 0 !important; }
  html[data-view-mode] body:not(.phone-layout) #bottomLeftIconDock#bottomLeftIconDock button { border: 1px solid var(--ui-border, #dce7ed) !important; background: var(--ui-surface, white) !important; color: var(--ui-ink, #345266) !important; box-shadow: 0 4px 16px #173d5117 !important; }
}
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) #radarZoomControls :is(#radarZoomIn, #radarZoomOut) { display: block !important; }
  html[data-view-mode] body:not(.phone-layout) #bottomLeftIconDock svg [stroke] { stroke: var(--ui-ink, #345266) !important; }
  html[data-view-mode] body:not(.phone-layout) #bottomLeftIconDock svg [fill]:not([fill="none"]) { fill: var(--ui-ink, #345266) !important; }
}
@media (min-width: 701px) and (max-width: 1050px) {
  html[data-view-mode] body:not(.phone-layout) #mapLiveStatus { display: flex; position: fixed; top: 104px; right: 20px; padding: 10px 14px; background: var(--ui-surface, #fffffff5); border: 1px solid var(--ui-border, #dce7ed); border-radius: 12px; box-shadow: 0 4px 16px #173d5112; }
}
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) #leftHamburgerMenu:not(.closed) #leftMenuItems > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (min-width: 701px) and (max-width: 1050px) {
  html[data-view-mode] body:not(.phone-layout) #mapLiveStatus { top: auto; right: auto; left: 18px; bottom: 126px; }
}
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) .mapDataSources { display: block; margin-top: 3px; color: var(--ui-muted, #6b8190); font: 9px/1.2 system-ui; }
  html[data-view-mode] body:not(.phone-layout) .mapDataSources a { color: inherit; text-decoration: none; }
  html[data-view-mode] body:not(.phone-layout) .mapDataSources a:hover { text-decoration: underline; }
}
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) {
    & #phoneSearchWrap { flex: 0 1 320px; max-width: 320px; }
    & #phoneSearchResults { width: 360px; max-width: calc(100vw - 300px); }
    & :is(#findAirportModal, #airportVideoModal, #viewSettingsModal, #liveVideoModal, #simVideoModal) { z-index: 100800 !important; background: #122b4166 !important; backdrop-filter: blur(5px); }
    & #findAirportBox { width: min(480px, calc(100vw - 40px)) !important; max-height: calc(100dvh - 64px); overflow: auto; box-sizing: border-box; padding: 26px !important; border: 1px solid var(--ui-border, #dce7ed) !important; border-radius: 22px !important; background: var(--ui-surface, white) !important; color: var(--ui-ink, #193347) !important; box-shadow: 0 20px 70px #102c4033 !important; font: 14px/1.5 system-ui !important; }
    & #findAirportBox :is(h2, p, strong, span) { color: var(--ui-ink, #193347) !important; font-family: system-ui !important; letter-spacing: 0 !important; }
    & #findAirportBox h2 { margin-top: 0; font-size: 21px; }
    & #findAirportBox p, & #findAirportBox span { color: var(--ui-muted, #657c8c) !important; }
    & #findAirportInput { width: 100%; box-sizing: border-box; min-height: 48px; background: var(--ui-soft, #f2f7f9) !important; border: 1px solid var(--ui-border, #d4e2e9) !important; border-radius: 12px !important; padding: 12px; color: var(--ui-ink, #193347) !important; font: 16px system-ui !important; }
    & #findAirportBox button { padding: 12px 14px !important; min-height: 44px; border: 1px solid var(--ui-border, #dce7ed) !important; border-radius: 11px !important; background: var(--ui-soft, #f4f8fa) !important; color: var(--ui-ink, #193347) !important; font: 13px/1.5 system-ui !important; }
    & #findAirportBox .routeFinderResult { width: 100%; margin-top: 8px; text-align: left; }
    & #findAirportBox button:hover { background: var(--ui-hover, #e8f5f5) !important; }
    & #radarSourceSelector { display: flex !important; width: 372px !important; min-width: 0 !important; max-width: calc(100vw - 36px) !important; padding: 8px !important; box-sizing: border-box !important; gap: 6px !important; overflow: hidden; }
    & #radarSourceSelector .radarSourceBtn { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; padding: 0 10px !important; margin: 0 !important; transform: none !important; }
    & #bottomLeftIconDock { position: fixed !important; left: auto !important; right: 120px !important; bottom: 16px !important; top: auto !important; display: flex !important; flex-direction: row !important; gap: 6px !important; width: auto !important; height: 44px !important; align-items: center !important; transform: none !important; z-index: 100640 !important; }
    & #bottomLeftIconDock#bottomLeftIconDock button { position: relative !important; inset: auto !important; width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 0 !important; margin: 0 !important; transform: none !important; border-radius: 13px !important; }
    & #bottomLeftIconDock button::before { background-color: var(--ui-ink, #345266) !important; }
    & #bottomLeftIconDock button:hover { background: var(--ui-hover, #e8f5f5) !important; }
    & #bottomLeftIconDock button:focus-visible { outline: 2px solid var(--ui-accent, #087f8b); outline-offset: 3px; }
    /* MAP düğmesi kalktı: Ayarlar sağ alt köşede tek başına duruyor. */
    & #displaySettingsButton { right: 18px !important; bottom: 16px !important; width: 96px !important; height: 44px !important; box-sizing: border-box !important; }
  }
}
@media (min-width: 701px) and (max-width: 1050px) {
  html[data-view-mode] body:not(.phone-layout) {
    & #phoneSearchWrap { flex-basis: 220px; max-width: 240px; }
    & #phoneSearchResults { left: 200px; width: 320px; max-width: calc(100vw - 248px); }
    & #radarSourceSelector { left: 18px !important; right: auto !important; transform: none !important; width: 310px !important; }
  }
}
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) #bottomLeftIconDock#bottomLeftIconDock button::before { background-color: var(--ui-ink, #345266) !important; }
}
/* Query results share one scrollable column; controls remain within their card flow. */
#mapResultStack { display: none; }
#routeDetailsButton { display: none; }
.mapRouteDrawing circle:not(.routeAirportHit) { fill: #087fbb; stroke: var(--ui-surface, white); stroke-width: 2; }
.mapRouteDrawing text { fill: #12415d; stroke: var(--ui-surface, white); stroke-width: 3px; paint-order: stroke; font: 700 11px system-ui; }
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) {
    & #phoneTopBar { right: auto; width: max-content; max-width: calc(100vw - 32px); gap: 16px; }
    & #phoneSearchWrap { box-sizing: border-box; flex: 0 1 280px; width: 280px; min-width: 130px; }
    & #mapLiveStatus { display: flex; position: static; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
    & #mapResultStack { color: var(--map-ink); display: flex; flex-direction: column; gap: 12px; position: fixed; top: 104px; right: 82px; width: 320px; max-width: calc(100vw - 36px); max-height: calc(100dvh - 190px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; z-index: 100650; pointer-events: none; border-radius: 18px; }
    & #mapResultStack > * { position: relative !important; inset: auto !important; transform: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; max-height: none !important; flex: none; box-sizing: border-box; margin: 0 !important; padding: 18px !important; pointer-events: auto; background: var(--ui-surface, white) !important; color: var(--ui-ink, #193347) !important; border: 1px solid var(--ui-border, #dce7ed) !important; border-radius: 18px !important; box-shadow: none !important; font: 13px/1.5 system-ui !important; }
    & #mapResultStack :is(div, span, strong, p, label, pre) { color: inherit !important; font-family: system-ui !important; letter-spacing: 0 !important; text-shadow: none !important; }
    & #mapResultStack :is(.routeInfoHeader, #metarCardHeader, #atbHeader, .routeAirportPopupHeader) { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--ui-border, #e2ebef); background: transparent !important; font-size: 12px; }
    & #mapResultStack :is(.routeInfoGrid, .metarGrid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    & #mapResultStack :is(.routeInfoGrid > div, .metarCell) { padding: 10px; background: var(--ui-soft, #f2f7f9) !important; border: 0 !important; border-radius: 10px; font-size: 10px; }
    & #mapResultStack :is(.routeInfoGrid strong, .metarValue) { display: block; margin-top: 4px; font-size: 15px; font-weight: 650; }
    & #mapResultStack .routeInfoWide { grid-column: 1 / -1; }
    & #mapResultStack #routeInfoRoute { font-size: 24px; font-weight: 750; margin-bottom: 16px; }
    & #mapResultStack :is(#routeInfoString, #metarRaw, #routeAirportPopupMetar) { overflow-wrap: anywhere; white-space: pre-wrap; font-size: 12px; line-height: 1.6; }
    & #mapResultStack :is(#metarRaw, .routeInfoSource) { margin-top: 12px; padding: 10px; background: var(--ui-soft, #f3f7f9) !important; border: 0 !important; border-radius: 8px; }
    & #mapResultStack button { min-height: 36px; padding: 6px 10px; border: 1px solid var(--ui-border, #d6e5ec) !important; border-radius: 9px !important; background: var(--ui-soft, #eef6f8) !important; color: var(--ui-accent, #176574) !important; font: 600 12px system-ui !important; cursor: pointer; }
    & #mapResultStack button.active { background: var(--ui-accent, #087f8b) !important; color: var(--ui-surface, white) !important; }
    & #mapResultStack #routePlanningToolbar { padding: 10px !important; gap: 6px; flex-wrap: wrap; }
    & #routeDetailsButton { display: block; }
    & #activeRouteBar { display: none !important; }
    & #mapResultStack :is(#atbList, #atbBody) { max-height: 280px; overflow: auto; }
    & :is(#trackModal, #metarSearchModal, #routeFinderModal, #routeResultModal, #emergencyWatchModal) { z-index: 100800 !important; background: #122b4166 !important; backdrop-filter: blur(5px); }
    & :is(#trackBox, #metarSearchBox, #airportVideoBox, #routeFinderPanel, #routeResultPanel, #emergencyWatchBox) { box-sizing: border-box; width: min(540px, calc(100vw - 40px)) !important; max-height: calc(100dvh - 64px) !important; overflow: auto !important; padding: 24px !important; }
    & #routeResultPanel { width: min(760px, calc(100vw - 40px)) !important; }
    & :is(#routeFinderPanel, #routeResultPanel, #trackBox, #metarSearchBox, #airportVideoBox, #emergencyWatchBox) :is(div, span, label, strong, p, th, td) { color: var(--ui-ink, #345266) !important; font-family: system-ui !important; text-shadow: none !important; letter-spacing: 0 !important; }
    & :is(#routeFinderPanel, #routeResultPanel) :is(.routeFinderSummary, #routeResultSummary, #routeResultString, .routeFinderResults, .routeResultTableWrap) { border: 1px solid var(--ui-border, #dce7ed) !important; background: var(--ui-soft, #f3f7f9) !important; border-radius: 12px; padding: 12px; }
    & #routeResultTable :is(th, td) { padding: 12px 10px; border-color: var(--ui-border, #dce7ed) !important; background: transparent !important; font-size: 12px; }
    & #routeResultTable th { background: #eaf1f5 !important; }
    & :is(.routeFinderTitle, .routeResultTitle) { font-size: 21px; font-weight: 700; }
    & #routeFinderCreate { background: var(--ui-accent, #087f8b) !important; color: var(--ui-surface, white) !important; }
  }
}
@media (min-width: 701px) and (max-width: 1050px) {
  html[data-view-mode] body:not(.phone-layout) {
    & #phoneTopBar { gap: 10px; padding-right: 12px; }
    & .phoneBrandRow { flex-basis: 110px; }
    & .phoneBrand { width: 110px; }
    & #phoneSearchWrap { width: 180px; flex-basis: 180px; }
    & #mapLiveStatus { min-width: 105px; white-space: normal; }
    & #mapLiveStatus strong { font-size: 11px; }
    & #mapTrafficStatus { font-size: 9px; max-width: 115px; }
    & .mapDataSources { font-size: 8px; }
    & :is(#mapExitButton, #spaceModeButton) { max-width: 90px; white-space: normal; }
    & #phoneSearchResults { left: 190px; }
    & #mapResultStack { right: 18px; width: 286px; }
  }
}
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) #mapResultStack .routeInfoGrid span { display: block; font-size: 10px !important; font-weight: 500 !important; color: var(--ui-muted, #647a8a) !important; }
  html[data-view-mode] body:not(.phone-layout) #mapResultStack .routeInfoSource { font: 10px system-ui !important; text-align: left; }
  html[data-view-mode] body:not(.phone-layout) #mapResultStack .routeInfoHeader { font-weight: 600 !important; }
}
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) {
    & #mapResultStack :is(.atbRow, .atbEmpty, #atbTabs, #routeAirportPopupRunways, .starlinkStats > div) { background: var(--ui-soft, #f3f7f9) !important; border-color: var(--ui-border, #dce7ed) !important; border-radius: 8px; }
    & #mapResultStack #emergencyAlertTitle { color: #b83a32 !important; }
    & .routeDirectionArrow { fill: #087fbb !important; stroke: var(--ui-surface, white) !important; stroke-width: 1px; }
  }
}
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) #phoneMapCredit { left: 0; bottom: 0; top: auto; border-radius: 0 6px 0 0; padding: 2px 6px; font-size: 9px; }
  html[data-view-mode] body:not(.phone-layout) #mapResultStack > #starlinkStatus { background: #faf7ff !important; color: #563879 !important; border-color: #e5d9f2 !important; font: 13px/1.5 system-ui !important; padding: 14px 16px !important; }
}
@media (max-width: 700px) {
  body.phone-layout #phoneMapCredit { left: 0; top: auto; bottom: calc(var(--phone-nav, 68px) + env(safe-area-inset-bottom, 0px)); border-radius: 0 6px 0 0; padding: 2px 5px; }
}
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) {
    & #mapResultStack { top: 16px; max-height: calc(100dvh - 104px); }
    & #phoneFlightCard { top: var(--map-header-bottom, 104px) !important; }
    & #phoneSearchResults { top: calc(100% + 10px); }
    &:has(#mapResultStack > .visible, #mapResultStack > .show, #mapResultStack > #starlinkCard:not([hidden])) #phoneTopBar { max-width: calc(100vw - 434px); }
  }
}
@media (min-width: 701px) and (max-width: 1050px) {
  html[data-view-mode] body:not(.phone-layout):has(#mapResultStack > .visible, #mapResultStack > .show, #mapResultStack > #starlinkCard:not([hidden])) #phoneTopBar {
    max-width: calc(100vw - 334px); flex-wrap: wrap; height: auto; min-height: 72px;
  }
  html[data-view-mode] body:not(.phone-layout):has(#mapResultStack > .visible, #mapResultStack > .show, #mapResultStack > #starlinkCard:not([hidden])) #phoneSearchWrap { flex: 1 1 130px; width: 130px; }
}

@media (min-width: 701px) {
  body:not(.phone-layout) #displaySettingsPanel {
    z-index: 100790 !important;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
  }
}

@media (min-width: 701px) {
  html[data-view-mode="radar"] body:not(.phone-layout) {
    --ui-surface: #061a10f5; --ui-soft: #0c291b; --ui-hover: #123d27;
    --ui-border: #23583b; --ui-ink: #d9f5e2; --ui-muted: #afd1ba; --ui-accent: #43ff84;
    --phone-ink: #c4f7d4; --phone-muted: #8ebc9d; --phone-accent: #43ff84; --phone-border: #23583b;
    & .phoneBrand { filter: brightness(0) saturate(100%) invert(89%) sepia(24%) saturate(851%) hue-rotate(75deg); }
    & #radarSourceSelector .radarSourceBtn.active, & #routeFinderCreate, & #mapResultStack button.active, & #phoneFlightFollow { color: #03200e !important; }
    & #phoneFlightCard, & #phoneFlightCard .phoneFlightHead, & #phoneFlightCard #phoneFlightRoute, & #phoneFlightExpand { background: #061a10 !important; color: #c4f7d4; border-color: #23583b; }
    & #phoneFlightCard :is(#phoneFlightClose, #phoneAircraftType, #phoneAircraftPhotoWrap) { background: #0c291b; color: #b9edc9; }
    & #phoneFlightCard :is(.phoneAirlineLine, #phoneFlightStatus, #phoneFlightRoute strong, #phoneFlightRoute small, #phoneFlightRoute span, #phoneRouteProgress > div) { color: #a4d7b4; }
    & #phoneProgressBar { accent-color: #43ff84; }
    & #phoneProgressBar::-webkit-progress-value { background: #43ff84; }
    & #phoneProgressBar::-webkit-progress-bar { background: #17482d; }
  }
}

@media (min-width: 701px) {
  html[data-view-mode="radar"] body:not(.phone-layout) {
    & #phoneFlightCard {
      --phone-ink: #d9f5e2; --phone-muted: #afd1ba;
      --phone-accent: #43ff84; --phone-border: #23583b;
    }
    & input::placeholder { color: #afd1ba !important; opacity: 1; }
    & :is(#phoneFlightCallsign, .phoneFlightStats strong) { color: #e4f8eb !important; }
    & :is(#phoneFlightMeta, .phoneFlightStats span) { color: #afd1ba !important; }
    & #phoneFlightExpand { color: #7ff5a5 !important; }
    & #phoneFlightFollow.active { background: #43ff84; color: #03200e; }
    & #routeResultTable th { background: #143723 !important; }
    & #mapResultStack #emergencyAlertTitle { color: #ffaca0 !important; }
    & #starlinkCard :is(small, a) { color: #d3b7ff !important; }
    & #displaySettingsPanel :is(select, option) { background: #0c291b; color: #d9f5e2; border-color: #23583b; }
  }
}

#siteCopyright {
  position: fixed; right: 6px; bottom: 0; z-index: 100610;
  padding: 1px 5px; border-radius: 5px 5px 0 0;
  background: #ffffffeb; color: #526d7f;
  font: 10px/1.4 system-ui, sans-serif; white-space: nowrap;
}
#siteCopyright a { color: #176574; font-weight: 650; text-decoration: none; }
#siteCopyright a:hover { text-decoration: underline; }
#siteCopyright a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (min-width: 701px) {
  html[data-view-mode="radar"] #siteCopyright { background: #061a10eb; color: #afd1ba; }
  html[data-view-mode="radar"] #siteCopyright a { color: #b9f2cb; }
}
@media (max-width: 700px) {
  #phoneMenuSheet #siteCopyright { position: static; margin-top: 8px; padding: 12px 0 0; border-top: 1px solid #dce5eb; border-radius: 0; background: transparent; text-align: center; white-space: normal; font-size: 11px; }
  #siteCopyright a { display: inline-block; padding: 5px 0; }
  html[data-mobile-theme="dark"] #siteCopyright { background: #172330ed; color: #b9cad4; }
  html[data-mobile-theme="dark"] #siteCopyright a { color: #8fe5d8; }
}

@media (min-width: 701px) {
  html[data-view-mode] #siteCopyright {
    right: 270px; left: auto; bottom: 38px;
    transform: translateY(50%); padding: 5px 8px; border-radius: 8px;
  }
}

#desktopBasemapSection { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-border, #dce7ed); }
#desktopBasemapTitle { margin: 0 0 10px; font: 600 12px system-ui; color: var(--ui-muted, #647a8a); }
#desktopBasemap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#desktopBasemap button { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px; text-align: left; border: 2px solid var(--ui-border, #dce7ed); border-radius: 12px; background: var(--ui-surface, white); color: var(--ui-ink, #193347); cursor: pointer; }
#desktopBasemap button[aria-pressed="true"] { border-color: var(--ui-accent, #087f8b); background: var(--ui-soft, #edf8f8); }
#desktopBasemap button:focus-visible { outline: 2px solid var(--ui-accent, #087f8b); outline-offset: 3px; }
#desktopBasemap strong { font: 650 12px system-ui; }
#desktopBasemap small { color: var(--ui-muted, #5a7180); font: 10px/1.4 system-ui; }
#desktopBasemap .basemapPreview { height: 38px; border-radius: 6px; }
#desktopBasemap .basemapStreets { background: linear-gradient(28deg, transparent 42%, white 43% 48%, transparent 49%), linear-gradient(110deg, #deebd7 35%, #b9dcec 36% 48%, #e8eedf 49%); }
#desktopBasemap .basemapSatellite { background: linear-gradient(28deg, transparent 40%, #ada995 41% 43%, transparent 44%), linear-gradient(110deg, #536d38 35%, #315e75 36% 48%, #6e8048 49% 72%, #8c8061 73%); }
@media (min-width: 701px) { html[data-view-mode] #displaySettingsPanel { width: 320px; max-width: calc(100vw - 36px); } }
@media (max-width: 700px) { #desktopBasemapSection { display: none; } }
/* Tablet dialogs share readable controls and a centered, scrollable layout. */
@media (min-width: 701px) and (max-width: 1366px) {
  html[data-view-mode] body:not(.phone-layout) {
    & :is(#trackModal, #metarSearchModal, #routeFinderModal, #routeResultModal, #findAirportModal, #emergencyWatchModal) { align-items: center !important; padding: 24px !important; box-sizing: border-box; }
    & :is(#trackBox, #metarSearchBox, #airportVideoBox, #routeFinderPanel, #routeResultPanel, #findAirportBox, #emergencyWatchBox) {
      margin: 0 !important;
      & p, & :is(.routeFinderSubtitle, #routeResultSubtitle, #trackNetworkLabel, #trackMessage, #metarSearchMessage, .routeFinderSummary, #routeFinderSummary) { font-size: 14px !important; line-height: 1.5 !important; }
      & :is(label, .routeFinderField > span, #routeFinderLiveStatus, #routeResultNote, #routeResultString) { font-size: 13px !important; line-height: 1.5 !important; }
      & #routeDataAttribution { font-size: 11px !important; line-height: 1.5 !important; }
      & input { min-width: 0; min-height: 48px; box-sizing: border-box; font: 16px system-ui !important; }
      & button { min-height: 44px; min-width: 44px; font: 600 13px system-ui !important; }
    }
    & .routeFinderFields { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
    & .routeFinderField { min-width: 0; }
    & .routeFinderResults { max-height: 200px; overflow: auto; }
    & .displaySettingsTitle { color: var(--ui-muted, #647a8a) !important; border-color: var(--ui-border, #dce7ed) !important; }
    & #mapResultStack :is(.routeInfoGrid span, .routeInfoSource) { font-size: 11px !important; }
    & #mapResultStack .routeInfoGrid strong { font-size: 13px !important; }
  }
}
/* Narrow tablets use one results column so flight and airport cards cannot overlap. */
@media (min-width: 701px) and (max-width: 1050px) {
  html[data-view-mode] body:not(.phone-layout) {
    & #mapResultStack { left: var(--flight-card-left, 18px); right: auto; top: calc(var(--map-header-bottom, 88px) + 16px); width: min(340px, calc(100vw - var(--flight-card-left, 18px) - 18px)); max-height: calc(100dvh - var(--map-header-bottom, 88px) - 170px); pointer-events: none; }
    & #mapResultStack > * { pointer-events: auto; }
    & #mapResultStack #phoneFlightCard { position: relative !important; inset: auto !important; width: 100% !important; max-width: none !important; max-height: none !important; flex: 0 0 auto; margin: 0; transform: none !important; box-sizing: border-box; }
    & #phoneTopBar { max-width: calc(100vw - 32px) !important; }
  }
}
@media (min-width: 701px) and (max-width: 1366px) {
  html[data-view-mode] body:not(.phone-layout) #mapResultStack {
    & :is(.metarLabel, #metarCardStatus, #atbUpdated) { font-size: 11px !important; line-height: 1.5 !important; }
    & :is(.metarValue, .atbCallsign, .atbRoute, .atbStatus) { overflow-wrap: anywhere; }
    & :is(#metarClose, #atbClose, .atbTab, #routeInfoClose, #routeAirportPopupClose, #starlinkCard > button) { min-width: 44px; min-height: 44px; }
  }
}

@media (min-width: 701px) and (max-width: 1366px) {
  html[data-view-mode] #leftMenuItems #siteCopyright { position: static; inset: auto; transform: none; order: 999; flex: 0 0 auto; margin-top: 8px; padding: 12px 0 4px; border-top: 1px solid var(--ui-border, #dce5eb); border-radius: 0; background: transparent; text-align: center; white-space: normal; font-size: 11px; }
  #leftMenuItems #siteCopyright a { display: inline-block; padding: 6px 0; }
}
/* Compact tablet cards without clipping their summary content. */
@media (min-width: 701px) and (max-width: 1366px) {
  html[data-view-mode] body:not(.phone-layout) {
    & #mapResultStack { gap: 8px; }
    & #mapResultStack > * { flex: 0 0 auto; min-height: 0 !important; overflow: auto; padding: 12px !important; border-radius: 15px !important; }
    & #mapResultStack #routePlanningToolbar { flex: 0 0 auto; min-height: 0 !important; padding: 8px !important; }
    & #mapResultStack #phoneFlightCard { flex: 0 0 auto; padding: 0 12px 12px !important; }
    & #mapResultStack :is(.routeInfoHeader, #metarCardHeader, #atbHeader, .routeAirportPopupHeader) { margin-bottom: 8px; padding-bottom: 8px; }
    & #mapResultStack :is(.routeInfoGrid, .metarGrid) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    & #mapResultStack :is(.routeInfoGrid > div, .metarCell) { padding: 7px; }
    & #mapResultStack :is(.routeInfoWide, #metarRaw) { grid-column: 1 / -1; }
    & #mapResultStack :is(#atbList, #atbBody, #routeAirportPopupRunways) { max-height: 150px; overflow: auto; }
    & #phoneFlightCard .phoneFlightHead { padding: 8px 0; }
    & #phoneFlightCard #phoneFlightCallsign { font-size: 17px; }
    & #phoneFlightCard .phoneAirlineLine { padding-bottom: 6px; }
    & #phoneAircraftPhoto { height: auto; }
    & #phoneFlightCard #phoneFlightRoute { padding: 8px 0; }
    & #phoneFlightRoute strong { font-size: 23px; }
    & #phoneFlightCard .phoneFlightStats { margin-top: 8px; padding-top: 8px; }
    & :is(#trackBox, #metarSearchBox, #airportVideoBox, #routeFinderPanel, #routeResultPanel, #findAirportBox, #emergencyWatchBox) { padding: 18px !important; max-height: calc(100dvh - 48px) !important; }
    & :is(#routeFinderSummary, #routeResultSummary, #routeResultString) { padding: 8px !important; margin-top: 8px; margin-bottom: 8px; }
    & .routeResultTableWrap { max-height: min(32dvh, 260px); overflow: auto; }
    & #routeResultTable :is(th, td) { padding: 7px 8px; }
  }
}

html[data-view-mode="map"] #displaySettingsPanel .aircraftIconSetting { display: none !important; }


/* Ayarlar ve Canlı Videolar pencereleri her iki görünümde de modern harita
   tasarımını kullanıyor: radar modunun yeşil paleti bu iki kartı sarmasın,
   bu yüzden renkler değişkenlerden değil doğrudan veriliyor. */
@media (min-width: 701px) {
  html[data-view-mode] body:not(.phone-layout) :is(#viewSettingsBox, #liveVideoBox, #simVideoBox) {
    width: min(480px, calc(100vw - 40px)) !important;
    max-height: calc(100dvh - 64px) !important;
    box-sizing: border-box !important;
    padding: 26px !important;
    border: 1px solid #dce7ed !important;
    border-radius: 22px !important;
    background: #fff !important;
    color: #193347 !important;
    box-shadow: 0 20px 70px #102c4033 !important;
    font: 14px/1.5 system-ui, sans-serif !important;
  }
  html[data-view-mode] body:not(.phone-layout) :is(#viewSettingsBox, #liveVideoBox, #simVideoBox) h2 {
    margin-top: 0 !important;
    color: #193347 !important;
    font: 700 21px system-ui, sans-serif !important;
    letter-spacing: 0 !important;
  }
  html[data-view-mode] body:not(.phone-layout) :is(#viewSettingsBox, #liveVideoBox, #simVideoBox) p {
    color: #657c8c !important;
    font-family: system-ui, sans-serif !important;
    letter-spacing: 0 !important;
  }
  html[data-view-mode] body:not(.phone-layout) :is(#viewSettingsBox, #liveVideoBox, #simVideoBox) .metarActions button {
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 14px !important;
    border: 1px solid #dce7ed !important;
    border-radius: 11px !important;
    background: #f4f8fa !important;
    color: #193347 !important;
    font: 13px/1.5 system-ui, sans-serif !important;
    letter-spacing: 0 !important;
  }
  html[data-view-mode] body:not(.phone-layout) :is(#viewSettingsBox, #liveVideoBox, #simVideoBox) .metarActions button:hover {
    background: #e8f5f5 !important;
  }
  /* Görünüm anahtarı da radar yeşili yerine açık düzende. */
  html[data-view-mode] body:not(.phone-layout) #viewSettingsBox #viewModeSwitch {
    border: 0 !important;
    border-radius: 12px !important;
    background: #edf3f6 !important;
  }
  html[data-view-mode] body:not(.phone-layout) #viewSettingsBox #viewModeSwitch button {
    color: #627989 !important;
    background: transparent !important;
  }
  html[data-view-mode] body:not(.phone-layout) #viewSettingsBox #viewModeSwitch button[aria-pressed="true"] {
    color: #08727d !important;
    background: #fff !important;
    box-shadow: 0 2px 6px #19334712;
  }
  html[data-view-mode] body:not(.phone-layout) .liveVideoRow {
    border: 1px solid #dce7ed !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #193347 !important;
  }
  html[data-view-mode] body:not(.phone-layout) .liveVideoRow:hover {
    border-color: #087f8b !important;
    background: #eef8f8 !important;
  }
  html[data-view-mode] body:not(.phone-layout) .liveVideoRow strong {
    color: #193347 !important;
    font: 650 13px system-ui, sans-serif !important;
    letter-spacing: 0 !important;
  }
  html[data-view-mode] body:not(.phone-layout) .liveVideoRow small {
    color: #657c8c !important;
    font: 500 11px system-ui, sans-serif !important;
  }
  html[data-view-mode] body:not(.phone-layout) .liveVideoThumb { background: #eef3f6 !important; }
  html[data-view-mode] body:not(.phone-layout) .liveVideoHeading {
    color: #657c8c !important;
    font: 700 10px system-ui, sans-serif !important;
    letter-spacing: .1em !important;
  }
  html[data-view-mode] body:not(.phone-layout) .liveVideoEmpty {
    color: #657c8c !important;
    font-family: system-ui, sans-serif !important;
  }
}

html[data-view-mode] body #spaceModeButton, html[data-view-mode] body #viewModeSwitch [data-space-view] { background:linear-gradient(135deg,#28204d,#58368c) !important; border-color:#8570b9; color:#f4efff !important; }
html[data-view-mode] body #spaceModeButton:hover, html[data-view-mode] body #viewModeSwitch [data-space-view]:hover { background:linear-gradient(135deg,#382a67,#7249ad) !important; }