/*
 * AIR PLAYER — Clean Responsive UI 2026 / v2
 * 기능용 DOM ID는 유지하고, 일반/자동차/모바일 화면을 하나의 디자인 시스템으로 통합합니다.
 */

:root {
    --air-bg: #f5f7fb;
    --air-bg-2: #eef2f7;
    --air-surface: rgba(255,255,255,.86);
    --air-surface-solid: #ffffff;
    --air-surface-soft: #f8fafc;
    --air-border: rgba(15,23,42,.085);
    --air-border-strong: rgba(15,23,42,.14);
    --air-text: #111827;
    --air-muted: #64748b;
    --air-faint: #94a3b8;
    --air-accent: #2563eb;
    --air-accent-soft: #eff6ff;
    --air-accent-2: #4f46e5;
    --air-success: #10b981;
    --air-danger: #ef4444;
    --air-shadow-xs: 0 4px 14px rgba(15,23,42,.04);
    --air-shadow-sm: 0 10px 30px rgba(15,23,42,.065);
    --air-shadow-md: 0 18px 52px rgba(15,23,42,.11);
    --air-shadow-lg: 0 28px 88px rgba(15,23,42,.18);
    --air-ease: cubic-bezier(.2,.8,.2,1);
    --air-header-h: 66px;
    --air-player-h: 96px;
}

html.dark {
    --air-bg: #090d14;
    --air-bg-2: #0d131d;
    --air-surface: rgba(15,21,31,.88);
    --air-surface-solid: #111823;
    --air-surface-soft: #151d29;
    --air-border: rgba(148,163,184,.11);
    --air-border-strong: rgba(148,163,184,.18);
    --air-text: #f8fafc;
    --air-muted: #94a3b8;
    --air-faint: #64748b;
    --air-accent: #60a5fa;
    --air-accent-soft: rgba(59,130,246,.14);
    --air-accent-2: #818cf8;
    --air-shadow-xs: 0 4px 14px rgba(0,0,0,.16);
    --air-shadow-sm: 0 10px 32px rgba(0,0,0,.24);
    --air-shadow-md: 0 20px 58px rgba(0,0,0,.34);
    --air-shadow-lg: 0 30px 92px rgba(0,0,0,.52);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--air-bg); color-scheme: light; scroll-behavior: smooth; }
html.dark { color-scheme: dark; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--air-text);
    font-family: Pretendard, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
    letter-spacing: -.015em;
    background:
        radial-gradient(circle at 8% -10%, rgba(37,99,235,.10), transparent 33rem),
        radial-gradient(circle at 96% 0%, rgba(99,102,241,.07), transparent 31rem),
        linear-gradient(180deg, #fbfcfe 0%, var(--air-bg) 34%, var(--air-bg) 100%) !important;
    overflow-x: hidden;
}

html.dark body {
    background:
        radial-gradient(circle at 10% -12%, rgba(59,130,246,.14), transparent 35rem),
        radial-gradient(circle at 92% 0%, rgba(99,102,241,.10), transparent 34rem),
        linear-gradient(180deg, #0c121c 0%, var(--air-bg) 38%, #070b11 100%) !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.55), transparent 22rem);
    opacity: .55;
}
html.dark body::before { background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 24rem); opacity: 1; }

body.has-bg { background: transparent !important; }
body.has-bg::before { display: none; }
#bg-overlay { background: rgba(246,248,252,.40); backdrop-filter: blur(2px) saturate(105%); -webkit-backdrop-filter: blur(2px) saturate(105%); }
html.dark #bg-overlay { background: rgba(3,7,12,.42); }

button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea { transition-timing-function: var(--air-ease) !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(37,99,235,.20) !important;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   HEADER / NORMAL MODE
------------------------------------------------------------------------ */
#main-header.air-topbar {
    position: sticky !important;
    top: 12px;
    z-index: 70 !important;
    width: calc(100% - 28px) !important;
    max-width: 1560px !important;
    height: var(--air-header-h) !important;
    margin: 12px auto 0 !important;
    padding: 10px 12px 10px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(210px,1fr) auto minmax(210px,1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    border: 1px solid var(--air-border) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: var(--air-shadow-sm) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}
html.dark #main-header.air-topbar { background: rgba(12,18,27,.84) !important; }
body.has-bg #main-header.air-topbar { background: rgba(255,255,255,.78) !important; }
html.dark body.has-bg #main-header.air-topbar { background: rgba(10,15,23,.80) !important; }

.air-brand { display: flex !important; align-items: center !important; gap: 11px !important; min-width: 0; }
.air-brand-mark {
    position: relative;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
    display: grid !important;
    place-items: center !important;
    border-radius: 13px !important;
    color: #fff !important;
    font-size: 17px !important;
    background: #111827 !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.16) !important;
    overflow: hidden;
}
.air-brand-mark::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    right: -10px;
    top: -12px;
    border-radius: 50%;
    background: rgba(96,165,250,.75);
    filter: blur(8px);
}
.air-brand-mark i { position: relative; z-index: 1; }
.air-brand-copy { min-width: 0; }
.air-brand-copy h1 { margin: 0; color: var(--air-text) !important; font-size: 17px !important; line-height: 1.05 !important; font-weight: 900 !important; letter-spacing: -.045em !important; white-space: nowrap; }
.air-brand-copy p { margin: 4px 0 0; color: var(--air-faint) !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: .17em !important; white-space: nowrap; }

.air-header-context {
    justify-self: center;
    min-height: 38px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 6px 12px !important;
    border: 1px solid var(--air-border) !important;
    border-radius: 14px !important;
    background: rgba(148,163,184,.06) !important;
    color: var(--air-muted) !important;
    pointer-events: none;
}
.air-weather { display: flex; align-items: center; white-space: nowrap; }
.air-weather i { margin-right: 7px !important; font-size: 15px !important; }
.air-weather span:nth-child(2) { color: var(--air-text) !important; font-size: 13px !important; font-weight: 850 !important; }
.air-weather span:nth-child(3) { color: var(--air-muted) !important; font-size: 11px !important; font-weight: 700 !important; }
.air-context-divider { width: 1px; height: 20px; background: var(--air-border-strong); }
.air-car-clock { align-items: center; gap: 7px; color: var(--air-text); font-size: 13px; font-weight: 850; white-space: nowrap; }
.air-car-clock i { color: var(--air-accent); }
.air-car-clock #car-day-text { color: var(--air-muted); font-size: 11px; font-weight: 700; }

.air-header-actions { justify-self: end; display: flex !important; align-items: center !important; gap: 6px !important; min-width: 0; }
.air-sync {
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    padding: 0 7px;
    color: var(--air-muted) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    white-space: nowrap;
}
.air-sync #sync-icon { color: var(--air-accent) !important; }

.air-action {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid var(--air-border) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.70) !important;
    color: var(--air-muted) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    text-decoration: none !important;
    cursor: pointer;
}
html.dark .air-action { background: rgba(255,255,255,.045) !important; }
.air-action:hover { color: var(--air-text) !important; border-color: var(--air-border-strong) !important; background: var(--air-surface-solid) !important; transform: translateY(-1px); }
.air-action-wide { width: auto !important; min-width: 38px !important; padding: 0 13px !important; font-size: 11px !important; font-weight: 800 !important; white-space: nowrap; }
.air-action-primary { border-color: #111827 !important; background: #111827 !important; color: #fff !important; box-shadow: 0 8px 18px rgba(15,23,42,.14) !important; }
.air-action-primary:hover { background: #1f2937 !important; color: #fff !important; transform: translateY(-1px); }
html.dark .air-action-primary { border-color: #f8fafc !important; background: #f8fafc !important; color: #0f172a !important; }
.air-action-accent { border-color: rgba(37,99,235,.18) !important; background: var(--air-accent-soft) !important; color: #2563eb !important; }
html.dark .air-action-accent { color: #93c5fd !important; }
.air-logout:hover { color: var(--air-danger) !important; }

/* ---------------------------------------------------------------------
   LIBRARY / FILTERS
------------------------------------------------------------------------ */
.air-main {
    width: 100% !important;
    max-width: 1560px !important;
    margin: 0 auto !important;
    padding: 34px 18px 170px !important;
}

.air-library-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 4px;
    margin-bottom: 20px;
}
.air-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; color: var(--air-faint); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.air-eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--air-accent); box-shadow: 0 0 0 5px rgba(37,99,235,.08); }
.air-library-heading h2 { margin: 0; color: var(--air-text); font-size: clamp(25px,2.2vw,34px); line-height: 1.15; font-weight: 900; letter-spacing: -.045em; }
.air-library-sub { margin: 8px 0 0; color: var(--air-muted); font-size: 12px; font-weight: 600; }
.air-library-status { display: flex; align-items: center; gap: 7px; padding-bottom: 2px; }
.air-library-status span { display: inline-flex; align-items: center; gap: 6px; height: 31px; padding: 0 10px; border: 1px solid var(--air-border); border-radius: 10px; background: rgba(255,255,255,.56); color: var(--air-muted); font-size: 9px; font-weight: 850; letter-spacing: .08em; }
html.dark .air-library-status span { background: rgba(255,255,255,.035); }
.air-library-status span:first-child i { color: #ef4444; }

#filter-wrapper.air-filter-panel {
    margin: 0 0 16px !important;
    padding: 10px !important;
    border: 1px solid var(--air-border) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.68) !important;
    box-shadow: var(--air-shadow-xs) !important;
    backdrop-filter: blur(14px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
}
html.dark #filter-wrapper.air-filter-panel { background: rgba(15,21,31,.67) !important; }
body.has-bg #filter-wrapper.air-filter-panel { background: rgba(255,255,255,.78) !important; }
html.dark body.has-bg #filter-wrapper.air-filter-panel { background: rgba(10,15,23,.80) !important; }

.air-filter-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin: 0 !important; }
.air-filter-tabs { min-width: 0; display: flex !important; align-items: center !important; gap: 4px !important; overflow-x: auto !important; padding: 0 !important; }
.air-filter-tabs > button,
.air-filter-tools > button {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--air-muted) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    transform: none !important;
}
.air-filter-tabs > button:hover,
.air-filter-tools > button:hover { background: rgba(148,163,184,.08) !important; color: var(--air-text) !important; }
.air-filter-tabs > button i { font-size: 10px; }
#filter-fav i { color: #f59e0b; }
#filter-youtube i { color: #ef4444; }
#filter-recommend { color: #6d28d9 !important; }
html.dark #filter-recommend { color: #a78bfa !important; }
#filter-autodj { margin-left: 2px; border-color: rgba(37,99,235,.10) !important; background: rgba(37,99,235,.075) !important; color: #2563eb !important; }
html.dark #filter-autodj { color: #93c5fd !important; background: rgba(59,130,246,.12) !important; }

/* JS가 동적으로 넣는 활성 클래스 대응 */
.air-filter-tabs > button.bg-gray-900,
.air-filter-tabs > button.text-white.bg-gray-900,
#filter-recommend.bg-purple-600,
#filter-recommend.dark\:bg-purple-500 {
    border-color: #111827 !important;
    background: #111827 !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(15,23,42,.14) !important;
    transform: none !important;
}
html.dark .air-filter-tabs > button.bg-gray-900,
html.dark .air-filter-tabs > button.dark\:bg-white,
html.dark #filter-recommend.bg-purple-600,
html.dark #filter-recommend.dark\:bg-purple-500 {
    border-color: #f8fafc !important;
    background: #f8fafc !important;
    color: #0f172a !important;
}

.air-filter-tools { flex: 0 0 auto; display: flex !important; align-items: center !important; gap: 4px !important; padding-left: 8px; border-left: 1px solid var(--air-border); }
.air-filter-tools > button { padding: 0 10px !important; border-color: var(--air-border) !important; background: rgba(148,163,184,.045) !important; }
#btn-restore-defaults { color: #dc2626 !important; background: rgba(239,68,68,.07) !important; }

.air-tags-row { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; margin: 8px 0 0 !important; padding: 8px 0 0 !important; border-top: 1px solid var(--air-border); }
.air-tags-scroll { flex: 1; min-width: 0; overflow-x: auto; padding: 0 2px; }
.air-tag-filters { display: flex !important; align-items: center !important; gap: 6px !important; width: max-content; }
#tag-filters-container > div { position: relative; }
#tag-filters-container button:not(.absolute),
#tag-filters-container > div > button:first-child {
    min-height: 29px !important;
    padding: 0 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--air-border) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.56) !important;
    color: var(--air-muted) !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    transform: none !important;
}
html.dark #tag-filters-container button:not(.absolute),
html.dark #tag-filters-container > div > button:first-child { background: rgba(255,255,255,.035) !important; }
#tag-filters-container button.bg-gray-900,
#tag-filters-container button.text-white {
    border-color: rgba(37,99,235,.18) !important;
    background: rgba(37,99,235,.09) !important;
    color: #2563eb !important;
}
html.dark #tag-filters-container button.bg-gray-900,
html.dark #tag-filters-container button.text-white { color: #93c5fd !important; }
#tag-filters-container .absolute { width: 18px !important; height: 18px !important; min-height: 18px !important; padding: 0 !important; }

.air-tag-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-25%) !important;
    z-index: 5 !important;
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--air-border) !important;
    border-radius: 9px !important;
    background: var(--air-surface-solid) !important;
    color: var(--air-muted) !important;
    box-shadow: var(--air-shadow-xs) !important;
    font-size: 9px !important;
}
.air-tag-arrow-left { left: -5px !important; }
.air-tag-arrow-right { right: -5px !important; }

/* ---------------------------------------------------------------------
   STATIONS — COMPACT HORIZONTAL CARDS
------------------------------------------------------------------------ */
.air-station-section { position: relative; }
.air-section-label { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 10px; color: var(--air-faint); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.air-section-label > div { display: flex; align-items: center; gap: 7px; }
.air-section-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.08); }

#stations-container.air-stations-grid,
#recommend-container.air-stations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px,1fr)) !important;
    gap: 11px !important;
}

.station-btn {
    position: relative !important;
    isolation: isolate;
    min-width: 0;
    min-height: 118px !important;
    height: 118px !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0,1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    column-gap: 14px !important;
    overflow: hidden !important;
    border: 1px solid var(--air-border) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: var(--air-shadow-xs) !important;
    text-align: left !important;
    transform: translateZ(0) !important;
    content-visibility: auto;
    contain-intrinsic-size: 118px;
}
html.dark .station-btn { background: rgba(17,24,35,.84) !important; }
body.has-bg .station-btn { background: rgba(255,255,255,.82) !important; backdrop-filter: blur(12px) saturate(120%) !important; -webkit-backdrop-filter: blur(12px) saturate(120%) !important; }
html.dark body.has-bg .station-btn { background: rgba(10,15,23,.83) !important; }
.station-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: transparent;
    transition: background .2s ease;
}
.station-btn:hover { border-color: var(--air-border-strong) !important; background: var(--air-surface-solid) !important; box-shadow: var(--air-shadow-sm) !important; transform: translateY(-2px) !important; }
html.dark .station-btn:hover { background: #141d2a !important; }
.station-btn:active { transform: translateY(0) scale(.99) !important; }
.station-btn.is-playing { border-color: rgba(37,99,235,.28) !important; background: #f8fbff !important; box-shadow: 0 10px 28px rgba(37,99,235,.09) !important; }
html.dark .station-btn.is-playing { background: rgba(30,58,95,.24) !important; border-color: rgba(96,165,250,.34) !important; }
.station-btn.is-playing::before { background: #2563eb; }

.station-btn .badge-wrap {
    position: absolute !important;
    top: 10px !important;
    right: 11px !important;
    left: auto !important;
    z-index: 2;
    min-height: 21px;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
    border: 1px solid var(--air-border) !important;
    border-radius: 7px !important;
    background: rgba(248,250,252,.78) !important;
    color: var(--air-faint) !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px);
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
}
html.dark .station-btn .badge-wrap { background: rgba(15,23,36,.72) !important; }
.station-btn[data-type="youtube"] .badge-wrap i { color: #ef4444 !important; }
.station-btn[data-type="link"] .badge-wrap i,
.station-btn[data-type="popup"] .badge-wrap i { color: #6366f1 !important; }
.station-btn .badge-wrap i { color: #10b981; }

.station-btn .icon-wrap {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    color: #fff !important;
    font-size: 21px !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.13) !important;
    transform: none !important;
    pointer-events: none;
}
.station-btn:hover .icon-wrap { transform: scale(1.025) !important; }
.station-btn .playing-indicator {
    position: absolute !important;
    right: -5px !important;
    bottom: -5px !important;
    width: 24px;
    height: 24px;
    padding: 5px !important;
    align-items: flex-end;
    justify-content: center;
    border: 2px solid var(--air-surface-solid) !important;
    border-radius: 8px !important;
    background: #111827 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(15,23,42,.16) !important;
}
html.dark .station-btn .playing-indicator { border-color: #111823 !important; background: #f8fafc !important; color: #0f172a !important; }

.station-btn .text-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 7px 46px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    overflow: hidden !important;
}
.station-btn .text-wrap h3 {
    width: 100% !important;
    margin: 0 !important;
    color: var(--air-text) !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    letter-spacing: -.025em !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.station-btn .text-wrap p {
    width: 100% !important;
    margin: 5px 0 0 !important;
    color: var(--air-muted) !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.station-btn .station-tags {
    position: absolute !important;
    left: 90px !important;
    right: 58px !important;
    bottom: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
}
.station-btn .station-tags span { flex: 0 0 auto; padding: 2px 5px !important; border-radius: 5px !important; background: rgba(148,163,184,.08) !important; color: var(--air-faint) !important; font-size: 8px !important; }

.station-btn .hover-menu {
    position: absolute !important;
    right: 9px !important;
    bottom: 8px !important;
    top: auto !important;
    z-index: 5 !important;
    min-height: 28px;
    padding: 2px 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
    border: 1px solid var(--air-border) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: none !important;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .18s ease, transform .18s ease !important;
}
html.dark .station-btn .hover-menu { background: rgba(17,24,35,.94) !important; }
.station-btn:hover .hover-menu, .station-btn:focus-within .hover-menu { opacity: 1 !important; transform: translateY(0) !important; }
.station-btn .hover-menu > div:not(.air-menu-divider) { width: 23px; height: 23px; padding: 0 !important; display: grid; place-items: center; border-radius: 6px; color: var(--air-faint); font-size: 9px !important; }
.station-btn .hover-menu > div:not(.air-menu-divider):hover { background: rgba(148,163,184,.10); color: var(--air-text); }
.station-btn .air-menu-divider, .station-btn .hover-menu > .w-px { width: 1px !important; height: 12px !important; margin: 0 1px !important; background: var(--air-border-strong) !important; }

.air-empty-state {
    margin-top: 10px;
    min-height: 220px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px dashed var(--air-border-strong);
    border-radius: 18px;
    background: rgba(255,255,255,.35);
    color: var(--air-faint);
}
html.dark .air-empty-state { background: rgba(255,255,255,.02); }
.air-empty-state > i { font-size: 32px; }
.air-empty-state p { margin: 0; color: var(--air-muted); font-size: 12px; font-weight: 750; }

/* List view: 한 줄씩 빠르게 훑는 모드 */
body.list-view:not(.car-mode) #stations-container,
body.list-view:not(.car-mode) #recommend-container { grid-template-columns: 1fr !important; gap: 7px !important; }
body.list-view:not(.car-mode) .station-btn { height: 76px !important; min-height: 76px !important; grid-template-columns: 44px minmax(0,1fr) !important; padding: 10px 13px !important; border-radius: 14px !important; contain-intrinsic-size: 76px; }
body.list-view:not(.car-mode) .station-btn .icon-wrap { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 12px !important; font-size: 17px !important; box-shadow: none !important; }
body.list-view:not(.car-mode) .station-btn .badge-wrap, body.list-view:not(.car-mode) .station-btn .station-tags { display: none !important; }
body.list-view:not(.car-mode) .station-btn .text-wrap { padding: 0 70px 0 0 !important; }
body.list-view:not(.car-mode) .station-btn .hover-menu { bottom: 50% !important; transform: translateY(50%) !important; opacity: .55; }
body.list-view:not(.car-mode) .station-btn:hover .hover-menu { opacity: 1; }

/* ---------------------------------------------------------------------
   BOTTOM PLAYER / NORMAL MODE
------------------------------------------------------------------------ */
#sticky-player.air-player-dock {
    position: fixed !important;
    left: 50% !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    top: auto !important;
    right: auto !important;
    width: calc(100% - 28px) !important;
    max-width: 1540px !important;
    height: auto !important;
    min-height: var(--air-player-h) !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    border: 1px solid var(--air-border-strong) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 18px 56px rgba(15,23,42,.14) !important;
    backdrop-filter: blur(20px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
}
html.dark #sticky-player.air-player-dock { background: rgba(12,18,27,.93) !important; box-shadow: 0 22px 66px rgba(0,0,0,.42) !important; }
body.has-bg #sticky-player.air-player-dock { background: rgba(255,255,255,.88) !important; }
html.dark body.has-bg #sticky-player.air-player-dock { background: rgba(8,13,20,.90) !important; }

.air-player-handle {
    position: absolute;
    left: 50%;
    top: -11px;
    width: 52px;
    height: 20px;
    padding: 0;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
}
.air-player-handle span { width: 28px; height: 3px; border-radius: 999px; background: rgba(100,116,139,.42); }
.air-player-handle:hover span { background: var(--air-muted); }

#player-container.air-player-layout {
    width: 100% !important;
    min-height: 94px !important;
    height: auto !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(235px,1fr) auto minmax(290px,1fr) !important;
    align-items: center !important;
    gap: 16px !important;
}

#player-left.air-now-playing { min-width: 0 !important; display: flex !important; align-items: center !important; gap: 12px !important; }
#status-icon.air-cover {
    position: relative;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #111827 !important;
    color: rgba(255,255,255,.84) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.15) !important;
    font-size: 20px !important;
}
#status-icon.air-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(145deg, rgba(255,255,255,.10), transparent 45%); }
#status-icon.is-active { box-shadow: 0 10px 26px rgba(37,99,235,.20) !important; }
.air-now-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
#current-station { margin: 0 !important; color: var(--air-text) !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 900 !important; letter-spacing: -.025em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#status-text { margin: 4px 0 0 !important; color: var(--air-muted) !important; font-size: 9px !important; line-height: 1.2 !important; font-weight: 750 !important; letter-spacing: .055em !important; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#header-track-title { margin-top: 4px !important; color: var(--air-muted); font-size: 10px; }

#broadcast-meta { max-width: 100%; margin: 0 0 5px !important; gap: 5px !important; overflow: hidden; }
.air-onair { height: 19px; padding: 0 6px; display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; border-radius: 6px; background: #ef4444; color: #fff; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.air-onair > span { width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: pulse 1.3s infinite; }
.air-mini-eq { height: 14px; display: flex; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.air-mini-eq > div { width: 2px; border-radius: 999px; background: var(--air-accent); }
.air-listeners { height: 19px; padding: 0 6px; display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; border-radius: 6px; background: rgba(16,185,129,.08); color: #059669; font-size: 8px; font-weight: 800; }
html.dark .air-listeners { color: #6ee7b7; }
.air-next-track { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; color: var(--air-muted); font-size: 8px; }
.air-next-track strong { color: #6366f1; font-size: 7px; letter-spacing: .06em; }
#next-track-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#player-center.air-player-center { min-width: 200px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; }
.air-transport { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; }
.air-transport button { padding: 0 !important; display: grid !important; place-items: center !important; border: 0 !important; box-shadow: none !important; cursor: pointer; }
#btn-prev, #btn-next, #btn-replay { width: 35px !important; height: 35px !important; border-radius: 11px !important; background: transparent !important; color: var(--air-muted) !important; font-size: 12px !important; }
#btn-prev:hover, #btn-next:hover, #btn-replay:hover { background: rgba(148,163,184,.09) !important; color: var(--air-text) !important; }
#btn-play-pause {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    background: #111827 !important;
    color: #fff !important;
    font-size: 17px !important;
    box-shadow: 0 9px 22px rgba(15,23,42,.18) !important;
}
html.dark #btn-play-pause { background: #f8fafc !important; color: #0f172a !important; box-shadow: 0 9px 22px rgba(0,0,0,.26) !important; }
#btn-play-pause:hover { transform: translateY(-1px) scale(1.02); }
#btn-play-pause:active { transform: scale(.97); }
#btn-play-pause:disabled { opacity: .45; cursor: default; }
#btn-play-pause i.fa-play { margin-left: 2px; }
#timeshift-toggle { gap: 4px !important; }
#timeshift-toggle > span { font-size: 9px !important; font-weight: 900 !important; letter-spacing: -.02em; }
#timeshift-toggle.is-timeshift-ready { color: #2563eb !important; background: rgba(37,99,235,.10) !important; }
#timeshift-toggle.is-timeshift-replaying { color: #7c3aed !important; background: rgba(124,58,237,.13) !important; animation: air-timeshift-pulse 1.4s ease-in-out infinite; }
#timeshift-toggle.is-timeshift-off { opacity: .55; }
@keyframes air-timeshift-pulse { 50% { transform: scale(1.05); } }

#yt-progress-container.air-progress { width: min(460px,44vw) !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; position: static !important; }
#yt-time-current, #yt-time-total { width: 32px !important; color: var(--air-faint) !important; font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important; }
#yt-time-current { text-align: right; }
#yt-progress-bar-bg { position: relative !important; flex: 1; height: 4px !important; overflow: hidden !important; border-radius: 999px !important; background: rgba(148,163,184,.18) !important; cursor: pointer; }
#yt-progress-bar { position: absolute !important; inset: 0 auto 0 0 !important; width: 0; height: 100% !important; border-radius: inherit; background: #2563eb !important; }

#player-right.air-player-tools { min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; }
#player-right > button {
    position: relative;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--air-border) !important;
    border-radius: 11px !important;
    background: rgba(148,163,184,.055) !important;
    color: var(--air-muted) !important;
    font-size: 10px !important;
    box-shadow: none !important;
}
#player-right > button:hover { background: rgba(148,163,184,.10) !important; color: var(--air-text) !important; }
#timer-text { position: absolute; right: -4px; top: -5px; min-width: 15px; min-height: 15px; padding: 2px 4px; display: grid; place-items: center; border-radius: 6px; background: #2563eb; color: #fff; font-size: 7px; font-weight: 900; box-shadow: 0 3px 8px rgba(37,99,235,.25); }
#timer-text:empty { display: none; }

.air-eq-wrap { position: relative; flex: 0 0 auto; }
#eq-preset {
    width: 112px !important;
    height: 36px !important;
    padding: 0 28px 0 11px !important;
    appearance: none !important;
    border: 1px solid var(--air-border) !important;
    border-radius: 11px !important;
    background: rgba(148,163,184,.055) !important;
    color: var(--air-muted) !important;
    outline: none !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    cursor: pointer;
}
.air-eq-wrap > i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--air-faint); font-size: 7px; pointer-events: none; }
.air-volume-wrap { height: 36px !important; min-width: 118px; padding: 0 10px !important; display: flex !important; align-items: center !important; gap: 8px !important; border: 1px solid var(--air-border) !important; border-radius: 11px !important; background: rgba(148,163,184,.055) !important; color: var(--air-faint) !important; }
.air-volume-wrap > i { font-size: 9px; }
#volume-slider { width: 78px !important; height: 3px !important; margin: 0 !important; appearance: none; border-radius: 999px; background: rgba(148,163,184,.25); accent-color: #2563eb; cursor: pointer; }

/* Mini player */
body.is-mini:not(.car-mode) #sticky-player { width: auto !important; min-width: 390px !important; max-width: calc(100% - 24px) !important; border-radius: 18px !important; }
body.is-mini:not(.car-mode) #player-container { min-height: 72px !important; grid-template-columns: minmax(180px,1fr) auto !important; padding: 8px 10px !important; gap: 8px !important; }
body.is-mini:not(.car-mode) #player-right, body.is-mini:not(.car-mode) #yt-progress-container, body.is-mini:not(.car-mode) #status-text, body.is-mini:not(.car-mode) #broadcast-meta, body.is-mini:not(.car-mode) #btn-replay { display: none !important; }
body.is-mini:not(.car-mode) #status-icon { width: 46px !important; height: 46px !important; min-width: 46px !important; border-radius: 13px !important; }
body.is-mini:not(.car-mode) #current-station { max-width: 185px; font-size: 12px !important; }
body.is-mini:not(.car-mode) #btn-play-pause { width: 44px !important; height: 44px !important; border-radius: 14px !important; }

/* Zen mode */
body.zen-mode:not(.car-mode) #main-header { height: 58px !important; padding-top: 7px !important; padding-bottom: 7px !important; }
body.zen-mode:not(.car-mode) .air-brand-mark { width: 38px !important; height: 38px !important; flex-basis: 38px; }
body.zen-mode:not(.car-mode) .air-brand-copy p, body.zen-mode:not(.car-mode) .air-header-context, body.zen-mode:not(.car-mode) .zen-hide span, body.zen-mode:not(.car-mode) #sync-text { display: none !important; }
body.zen-mode:not(.car-mode) .air-action.zen-hide, body.zen-mode:not(.car-mode) #zen-toggle { width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; }
body.zen-mode:not(.car-mode) #zen-icon { transform: rotate(180deg); }
body.zen-mode:not(.car-mode) .air-library-heading { display: none; }
body.zen-mode:not(.car-mode) #filter-wrapper { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
body.zen-mode:not(.car-mode) #tab-filters { max-height: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; }
body.zen-mode:not(.car-mode) #tag-section { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }

/* ---------------------------------------------------------------------
   MODALS
------------------------------------------------------------------------ */
#bg-modal, #custom-modal, #autodj-modal, #chapter-modal {
    background: rgba(3,7,18,.58) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
#bg-modal-content, #custom-modal-content, #autodj-modal-content, #chapter-modal-content {
    border: 1px solid var(--air-border-strong) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: var(--air-shadow-lg) !important;
}
html.dark #bg-modal-content, html.dark #custom-modal-content, html.dark #autodj-modal-content, html.dark #chapter-modal-content { background: rgba(15,21,31,.98) !important; }
#bg-modal-content h3, #custom-modal-content h3, #autodj-modal-content h3, #chapter-modal-content h3 { color: var(--air-text) !important; letter-spacing: -.03em !important; }
#custom-modal-content input, #autodj-modal-content input, #custom-modal-content textarea, #custom-modal-content select {
    border: 1px solid var(--air-border) !important;
    border-radius: 12px !important;
    background: rgba(148,163,184,.055) !important;
    color: var(--air-text) !important;
    box-shadow: none !important;
}
#custom-modal-content input:focus, #autodj-modal-content input:focus, #custom-modal-content textarea:focus, #custom-modal-content select:focus { border-color: rgba(37,99,235,.35) !important; }
#modal-submit-btn, #autodj-modal-content button[onclick="startCustomAutoDj()"] { background: #111827 !important; color: #fff !important; box-shadow: 0 8px 20px rgba(15,23,42,.15) !important; }
html.dark #modal-submit-btn, html.dark #autodj-modal-content button[onclick="startCustomAutoDj()"] { background: #f8fafc !important; color: #0f172a !important; }
#autodj-modal-content .grid > button { border-radius: 14px !important; box-shadow: none !important; }
#bg-theme-list .bg-theme-btn { border-radius: 14px !important; }

#screensaver-overlay { background: radial-gradient(circle at 50% 32%, rgba(37,99,235,.18), transparent 32rem), #020617 !important; }

/* ---------------------------------------------------------------------
   LOGIN
------------------------------------------------------------------------ */
body.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 12% 10%, rgba(37,99,235,.14), transparent 28rem),
        radial-gradient(circle at 88% 88%, rgba(99,102,241,.10), transparent 30rem),
        #f5f7fb !important;
}
html.dark body.auth-page { background: radial-gradient(circle at 12% 10%, rgba(59,130,246,.14), transparent 30rem), #090d14 !important; }
body.auth-page > div {
    border: 1px solid var(--air-border) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.90) !important;
    box-shadow: 0 28px 80px rgba(15,23,42,.13) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}
html.dark body.auth-page > div { background: rgba(15,21,31,.92) !important; box-shadow: 0 32px 88px rgba(0,0,0,.46) !important; }
body.auth-page > div > div:first-child > div:first-child { background: #111827 !important; color: #fff !important; border-radius: 18px !important; box-shadow: 0 10px 24px rgba(15,23,42,.18) !important; }
body.auth-page > div > div:first-child > div:first-child i { color: #fff !important; }
body.auth-page input, body.auth-page select { border: 1px solid var(--air-border) !important; background: rgba(148,163,184,.055) !important; color: var(--air-text) !important; }
body.auth-page button[type="submit"] { background: #111827 !important; color: #fff !important; box-shadow: 0 9px 22px rgba(15,23,42,.16) !important; }
html.dark body.auth-page button[type="submit"] { background: #f8fafc !important; color: #0f172a !important; }

/* =====================================================================
   CAR MODE — CLEAN TWO-PANE DASHBOARD
   왼쪽: 채널 리스트 / 오른쪽: 큰 플레이어 + 터치 컨트롤
======================================================================== */
body.car-mode {
    --car-rail: 350px;
    --car-header: 68px;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: #f2f5f9 !important;
}
html.dark body.car-mode { background: #070a0f !important; }
body.car-mode::before { display: none !important; }
body.car-mode #bg-overlay { background: rgba(238,243,249,.62) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.dark body.car-mode #bg-overlay { background: rgba(3,6,10,.58) !important; }

body.car-mode #main-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--car-header) !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    display: grid !important;
    grid-template-columns: var(--car-rail) minmax(260px,1fr) auto !important;
    gap: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--air-border) !important;
    border-radius: 0 !important;
    background: rgba(249,251,253,.94) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
}
html.dark body.car-mode #main-header { background: rgba(8,11,17,.95) !important; }
body.has-bg.car-mode #main-header { background: rgba(249,251,253,.92) !important; }
html.dark body.has-bg.car-mode #main-header { background: rgba(7,10,15,.93) !important; }

body.car-mode .air-brand { padding-left: 2px; }
body.car-mode .air-brand-mark { width: 40px !important; height: 40px !important; flex-basis: 40px; border-radius: 12px !important; }
body.car-mode .air-brand-copy h1 { font-size: 17px !important; }
body.car-mode .air-brand-copy p { display: none !important; }
body.car-mode #header-center-cluster {
    justify-self: start !important;
    margin-left: 14px;
    padding: 5px 12px !important;
    min-height: 38px;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(148,163,184,.055) !important;
}
body.car-mode .car-mode-only { display: inline-flex !important; }
body.car-mode .air-context-divider { display: block !important; }
body.car-mode .air-car-clock { display: inline-flex !important; }
body.car-mode .air-car-clock #car-time-text { font-size: 14px; }
body.car-mode .air-car-clock #car-day-text { display: inline !important; }
body.car-mode .air-header-actions { padding-left: 10px; }
body.car-mode #car-mode-autodj-btn { display: inline-flex !important; }
body.car-mode #bg-theme-btn, body.car-mode #wakelock-toggle, body.car-mode .air-logout, body.car-mode button[onclick="openCustomModal()"], body.car-mode #zen-toggle { display: none !important; }
body.car-mode .air-sync { display: flex !important; }
body.car-mode .air-sync #sync-text { display: none !important; }
body.car-mode #car-mode-btn, body.car-mode #theme-toggle { width: 40px !important; height: 40px !important; min-width: 40px !important; }
body.car-mode #car-mode-btn { border-color: rgba(37,99,235,.20) !important; background: var(--air-accent-soft) !important; color: #2563eb !important; }

/* 왼쪽 채널 레일 */
body.car-mode .air-main {
    position: fixed !important;
    left: 0 !important;
    top: var(--car-header) !important;
    bottom: 0 !important;
    width: var(--car-rail) !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 10px 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-right: 1px solid var(--air-border) !important;
    background: rgba(248,250,252,.88) !important;
    z-index: 20 !important;
    scrollbar-width: thin;
}
html.dark body.car-mode .air-main { background: rgba(9,13,20,.91) !important; }
body.has-bg.car-mode .air-main { background: rgba(248,250,252,.88) !important; }
html.dark body.has-bg.car-mode .air-main { background: rgba(7,11,17,.90) !important; }
body.car-mode .air-library-heading, body.car-mode .air-section-label { display: none !important; }

body.car-mode #filter-wrapper {
    margin: 0 0 9px !important;
    padding: 0 0 9px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--air-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
body.car-mode .air-filter-row { display: block !important; }
body.car-mode .air-filter-tabs { gap: 5px !important; padding: 0 0 2px !important; overflow-x: auto !important; }
body.car-mode .air-filter-tabs > button { height: 36px !important; padding: 0 11px !important; border: 1px solid var(--air-border) !important; border-radius: 10px !important; background: rgba(255,255,255,.65) !important; font-size: 10px !important; }
html.dark body.car-mode .air-filter-tabs > button { background: rgba(255,255,255,.035) !important; }
body.car-mode .air-filter-tabs > button.bg-gray-900,
body.car-mode #filter-recommend.bg-purple-600 { border-color: #2563eb !important; background: #2563eb !important; color: #fff !important; }
html.dark body.car-mode .air-filter-tabs > button.dark\:bg-white { border-color: #60a5fa !important; background: #2563eb !important; color: #fff !important; }
body.car-mode #filter-autodj { background: rgba(37,99,235,.08) !important; color: #2563eb !important; }
body.car-mode .air-filter-tools { display: none !important; }
body.car-mode .air-tags-row { margin-top: 7px !important; padding-top: 7px !important; }
body.car-mode #tag-filters-container button:not(.absolute), body.car-mode #tag-filters-container > div > button:first-child { min-height: 28px !important; font-size: 9px !important; border-radius: 8px !important; }
body.car-mode .air-tag-arrow { display: none !important; }

body.car-mode #stations-container,
body.car-mode #recommend-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}
body.car-mode .station-btn {
    width: 100% !important;
    height: 74px !important;
    min-height: 74px !important;
    padding: 9px 11px !important;
    grid-template-columns: 48px minmax(0,1fr) !important;
    column-gap: 10px !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.70) !important;
    box-shadow: none !important;
    contain-intrinsic-size: 74px;
}
html.dark body.car-mode .station-btn { background: rgba(255,255,255,.035) !important; }
body.car-mode .station-btn:hover { transform: none !important; background: rgba(255,255,255,.94) !important; box-shadow: none !important; }
html.dark body.car-mode .station-btn:hover { background: rgba(255,255,255,.065) !important; }
body.car-mode .station-btn.is-playing { border-color: rgba(37,99,235,.35) !important; background: #edf5ff !important; }
html.dark body.car-mode .station-btn.is-playing { background: rgba(37,99,235,.14) !important; }
body.car-mode .station-btn .icon-wrap { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 12px !important; font-size: 18px !important; box-shadow: none !important; }
body.car-mode .station-btn .text-wrap { padding: 0 7px 0 0 !important; }
body.car-mode .station-btn .text-wrap h3 { font-size: 13px !important; font-weight: 850 !important; }
body.car-mode .station-btn .text-wrap p { margin-top: 3px !important; font-size: 9px !important; }
body.car-mode .station-btn .badge-wrap, body.car-mode .station-btn .hover-menu, body.car-mode .station-btn .station-tags { display: none !important; }
body.car-mode .station-btn .playing-indicator { width: 22px; height: 22px; border-radius: 7px !important; }

/* 오른쪽 대형 플레이어 */
body.car-mode #sticky-player {
    position: fixed !important;
    left: var(--car-rail) !important;
    top: var(--car-header) !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(243,246,250,.70) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    z-index: 15 !important;
}
html.dark body.car-mode #sticky-player { background: rgba(5,8,13,.72) !important; }
body.has-bg.car-mode #sticky-player { background: rgba(244,247,251,.70) !important; }
html.dark body.has-bg.car-mode #sticky-player { background: rgba(4,7,11,.72) !important; }
body.car-mode .air-player-handle { display: none !important; }

body.car-mode #player-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: clamp(28px,3.8vw,64px) clamp(24px,4vw,72px) !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 184px !important;
    grid-template-rows: minmax(0,1fr) auto !important;
    grid-template-areas: "now tools" "center tools" !important;
    align-items: stretch !important;
    gap: clamp(18px,2.6vh,30px) 34px !important;
}

body.car-mode #player-left {
    grid-area: now !important;
    min-width: 0 !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(26px,3vw,44px) !important;
    padding: 0 !important;
}
body.car-mode #status-icon {
    width: clamp(170px,18vw,260px) !important;
    height: clamp(170px,18vw,260px) !important;
    min-width: clamp(170px,18vw,260px) !important;
    border-radius: clamp(28px,2.6vw,38px) !important;
    background: #dfe7f2 !important;
    color: rgba(255,255,255,.86) !important;
    box-shadow: 0 24px 58px rgba(15,23,42,.13) !important;
    font-size: clamp(40px,5vw,66px) !important;
}
html.dark body.car-mode #status-icon { background: #151d29 !important; box-shadow: 0 26px 62px rgba(0,0,0,.34) !important; }
body.car-mode #status-icon.is-colored { background: var(--car-dynamic-bg, #2563eb) !important; }
body.car-mode #status-icon::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,.18), transparent 50%, rgba(0,0,0,.08)); pointer-events: none; }
body.car-mode #status-icon.is-active .main-eq { gap: 8px; transform: scale(2.1); }
body.car-mode #status-icon.is-active .main-eq .eq-bar { width: 4px; }

body.car-mode .air-now-copy { min-width: 0; max-width: 720px; justify-content: center; }
body.car-mode #current-station {
    max-width: 100%;
    margin: 4px 0 0 !important;
    font-size: clamp(29px,3.4vw,48px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.055em !important;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
body.car-mode #status-text { margin-top: 12px !important; color: var(--air-muted) !important; font-size: clamp(11px,1.2vw,15px) !important; letter-spacing: .04em !important; text-transform: none; }
body.car-mode #broadcast-meta { margin-bottom: 12px !important; gap: 8px !important; flex-wrap: wrap; }
body.car-mode .air-onair { height: 24px; padding: 0 8px; font-size: 8px; border-radius: 7px; }
body.car-mode .air-listeners { height: 24px; padding: 0 8px; font-size: 9px; border-radius: 7px; }
body.car-mode .air-mini-eq { height: 18px; }
body.car-mode .air-next-track { flex-basis: 100%; max-width: 520px; height: 30px; margin-top: 2px; padding: 0 10px; border: 1px solid var(--air-border); border-radius: 8px; background: rgba(255,255,255,.38); font-size: 9px; }
html.dark body.car-mode .air-next-track { background: rgba(255,255,255,.035); }
body.car-mode #header-track-title { margin-top: 7px !important; font-size: 11px; }

body.car-mode #player-center {
    grid-area: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 760px !important;
    align-self: end !important;
    justify-self: start !important;
    align-items: stretch !important;
    gap: 16px !important;
}
body.car-mode .air-transport { justify-content: flex-start !important; gap: clamp(13px,1.8vw,22px) !important; }
body.car-mode #btn-prev, body.car-mode #btn-next, body.car-mode #btn-replay {
    width: clamp(48px,5vw,60px) !important;
    height: clamp(48px,5vw,60px) !important;
    border: 1px solid var(--air-border) !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.50) !important;
    color: var(--air-muted) !important;
    font-size: clamp(15px,1.5vw,20px) !important;
}
html.dark body.car-mode #btn-prev, html.dark body.car-mode #btn-next, html.dark body.car-mode #btn-replay { background: rgba(255,255,255,.04) !important; }
body.car-mode #btn-play-pause {
    width: clamp(76px,7vw,92px) !important;
    height: clamp(76px,7vw,92px) !important;
    border-radius: 25px !important;
    background: #111827 !important;
    color: #fff !important;
    font-size: clamp(24px,2.5vw,32px) !important;
    box-shadow: 0 18px 38px rgba(15,23,42,.19) !important;
}
html.dark body.car-mode #btn-play-pause { background: #f8fafc !important; color: #0f172a !important; }
body.car-mode #yt-progress-container { width: 100% !important; max-width: 720px !important; gap: 12px !important; }
body.car-mode #yt-progress-bar-bg { height: 6px !important; }
body.car-mode #yt-time-current, body.car-mode #yt-time-total { width: 40px !important; font-size: 9px !important; }

body.car-mode #player-right {
    grid-area: tools !important;
    width: 184px !important;
    min-width: 184px !important;
    height: 100% !important;
    padding-left: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 10px !important;
    border-left: 1px solid var(--air-border) !important;
}
body.car-mode #player-right > button {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.52) !important;
    font-size: 13px !important;
}
html.dark body.car-mode #player-right > button { background: rgba(255,255,255,.04) !important; }
body.car-mode #btn-add-dashboard, body.car-mode #pip-toggle { display: none !important; }
body.car-mode .air-eq-wrap { width: 100%; }
body.car-mode #eq-preset { width: 100% !important; height: 48px !important; border-radius: 14px !important; padding-left: 13px !important; background: rgba(255,255,255,.52) !important; font-size: 10px !important; }
html.dark body.car-mode #eq-preset { background: rgba(255,255,255,.04) !important; }
body.car-mode .air-volume-wrap { width: 100% !important; min-width: 0 !important; height: 48px !important; padding: 0 12px !important; border-radius: 14px !important; background: rgba(255,255,255,.52) !important; }
html.dark body.car-mode .air-volume-wrap { background: rgba(255,255,255,.04) !important; }
body.car-mode #volume-slider { width: 100% !important; }
body.car-mode #timer-text { right: 6px; top: 6px; }

/* 배경을 골라도 자동차 모드에서 과도한 블러가 생기지 않도록 */
body.has-bg.car-mode .station-btn, body.has-bg.car-mode #main-header, body.has-bg.car-mode .air-main, body.has-bg.car-mode #sticky-player { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Car mode widths */
@media (max-width: 1450px) and (min-width: 769px) {
    body.car-mode { --car-rail: 320px; }
    body.car-mode #player-container { grid-template-columns: minmax(0,1fr) 166px !important; gap: 20px 26px !important; padding: 28px 36px !important; }
    body.car-mode #player-right { width: 166px !important; min-width: 166px !important; padding-left: 18px !important; }
    body.car-mode #status-icon { width: clamp(150px,16vw,220px) !important; height: clamp(150px,16vw,220px) !important; min-width: clamp(150px,16vw,220px) !important; }
    body.car-mode #current-station { font-size: clamp(27px,3vw,42px) !important; }
}

@media (max-width: 1120px) and (min-width: 769px) {
    body.car-mode { --car-rail: 285px; }
    body.car-mode #main-header { grid-template-columns: var(--car-rail) minmax(220px,1fr) auto !important; }
    body.car-mode #header-center-cluster { margin-left: 8px; }
    body.car-mode .air-weather span:nth-child(3), body.car-mode #car-day-text { display: none !important; }
    body.car-mode #player-container { grid-template-columns: minmax(0,1fr) 148px !important; padding: 24px 26px !important; }
    body.car-mode #player-right { width: 148px !important; min-width: 148px !important; padding-left: 14px !important; }
    body.car-mode #player-left { gap: 22px !important; }
    body.car-mode #status-icon { width: 142px !important; height: 142px !important; min-width: 142px !important; border-radius: 26px !important; }
    body.car-mode #current-station { font-size: 29px !important; }
    body.car-mode .air-next-track { display: none !important; }
}

/* 낮은 차량용 가로 화면 */
@media (max-height: 560px) and (orientation: landscape) and (min-width: 769px) {
    body.car-mode { --car-header: 56px; --car-rail: 300px; }
    body.car-mode #main-header { padding: 6px 10px !important; }
    body.car-mode .air-brand-mark { width: 36px !important; height: 36px !important; flex-basis: 36px; }
    body.car-mode #header-center-cluster { min-height: 34px; }
    body.car-mode .air-action, body.car-mode #car-mode-btn, body.car-mode #theme-toggle { width: 36px !important; height: 36px !important; min-width: 36px !important; }
    body.car-mode #player-container { grid-template-columns: minmax(0,1fr) 138px !important; grid-template-rows: minmax(0,1fr) auto !important; padding: 18px 28px !important; gap: 12px 24px !important; }
    body.car-mode #status-icon { width: 122px !important; height: 122px !important; min-width: 122px !important; border-radius: 22px !important; }
    body.car-mode #current-station { font-size: 28px !important; }
    body.car-mode #broadcast-meta { margin-bottom: 6px !important; }
    body.car-mode #status-text { margin-top: 7px !important; font-size: 11px !important; }
    body.car-mode #btn-play-pause { width: 66px !important; height: 66px !important; border-radius: 20px !important; font-size: 22px !important; }
    body.car-mode #btn-prev, body.car-mode #btn-next, body.car-mode #btn-replay { width: 44px !important; height: 44px !important; border-radius: 14px !important; }
    body.car-mode #player-right { width: 138px !important; min-width: 138px !important; padding-left: 12px !important; gap: 7px !important; }
    body.car-mode #player-right > button, body.car-mode #eq-preset, body.car-mode .air-volume-wrap { height: 40px !important; min-height: 40px !important; border-radius: 11px !important; }
    body.car-mode .station-btn { height: 66px !important; min-height: 66px !important; grid-template-columns: 42px minmax(0,1fr) !important; }
    body.car-mode .station-btn .icon-wrap { width: 42px !important; height: 42px !important; min-width: 42px !important; }
}

/* =====================================================================
   NORMAL MOBILE / TABLET
======================================================================== */
@media (max-width: 1180px) {
    body:not(.car-mode) #main-header { grid-template-columns: 1fr auto !important; }
    body:not(.car-mode) #header-center-cluster { display: none !important; }
    body:not(.car-mode) .air-logout { display: none !important; }
    body:not(.car-mode) #player-container { grid-template-columns: minmax(220px,1fr) auto minmax(190px,.8fr) !important; gap: 10px !important; }
    body:not(.car-mode) .air-volume-wrap { display: none !important; }
}

@media (max-width: 850px) and (min-width: 769px) {
    body:not(.car-mode) #sync-status { display: none !important; }
    body:not(.car-mode) #bg-theme-btn, body:not(.car-mode) #wakelock-toggle { display: none !important; }
    body:not(.car-mode) #player-container { grid-template-columns: minmax(220px,1fr) auto !important; }
    body:not(.car-mode) #player-right { display: none !important; }
}

@media (max-width: 768px) {
    :root { --air-header-h: 58px; --air-player-h: 80px; }
    body::before { display: none; }

    body:not(.car-mode) #main-header {
        top: max(7px, env(safe-area-inset-top)) !important;
        width: calc(100% - 14px) !important;
        height: 58px !important;
        margin: 7px auto 0 !important;
        padding: 8px 8px 8px 10px !important;
        grid-template-columns: minmax(130px,1fr) auto !important;
        gap: 7px !important;
        border-radius: 17px !important;
    }
    body:not(.car-mode) .air-brand { gap: 8px !important; }
    body:not(.car-mode) .air-brand-mark { width: 36px !important; height: 36px !important; flex-basis: 36px; border-radius: 11px !important; font-size: 14px !important; }
    body:not(.car-mode) .air-brand-copy h1 { font-size: 14px !important; }
    body:not(.car-mode) .air-brand-copy p { font-size: 6px !important; margin-top: 3px !important; }
    body:not(.car-mode) .air-header-actions { gap: 4px !important; }
    body:not(.car-mode) .air-sync, body:not(.car-mode) #bg-theme-btn, body:not(.car-mode) #wakelock-toggle, body:not(.car-mode) .air-logout { display: none !important; }
    body:not(.car-mode) .air-action { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 10px !important; font-size: 11px !important; }
    body:not(.car-mode) .air-action-wide { width: 34px !important; padding: 0 !important; }
    body:not(.car-mode) .air-action-wide span { display: none !important; }

    .air-main { padding: 24px 9px 116px !important; }
    .air-library-heading { margin-bottom: 14px; padding: 0 4px; }
    .air-library-heading h2 { font-size: 22px; }
    .air-library-sub, .air-library-status { display: none; }
    .air-eyebrow { margin-bottom: 5px; font-size: 8px; }

    #filter-wrapper.air-filter-panel { margin-bottom: 11px !important; padding: 8px !important; border-radius: 16px !important; }
    .air-filter-row { display: block !important; }
    .air-filter-tabs { gap: 4px !important; padding-bottom: 2px !important; }
    .air-filter-tabs > button { height: 33px !important; min-height: 33px !important; padding: 0 10px !important; border-radius: 9px !important; font-size: 10px !important; }
    .air-filter-tools { margin-top: 6px; padding: 6px 0 0 !important; border-left: 0 !important; border-top: 1px solid var(--air-border); justify-content: flex-end; }
    .air-filter-tools > button { height: 30px !important; min-height: 30px !important; padding: 0 8px !important; border-radius: 8px !important; font-size: 9px !important; }
    #view-mode-text, #tag-toggle-text { display: none !important; }
    .air-tags-row { margin-top: 6px !important; padding-top: 6px !important; }
    #tag-filters-container button:not(.absolute), #tag-filters-container > div > button:first-child { min-height: 27px !important; padding: 0 8px !important; border-radius: 8px !important; font-size: 9px !important; }
    .air-tag-arrow { display: none !important; }

    .air-section-label { margin-bottom: 7px; }
    .air-section-label > span { display: none; }

    #stations-container.air-stations-grid, #recommend-container.air-stations-grid { grid-template-columns: 1fr !important; gap: 7px !important; }
    .station-btn {
        height: 78px !important;
        min-height: 78px !important;
        padding: 10px 11px !important;
        grid-template-columns: 48px minmax(0,1fr) !important;
        column-gap: 10px !important;
        border-radius: 14px !important;
        contain-intrinsic-size: 78px;
    }
    .station-btn .icon-wrap { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 12px !important; font-size: 18px !important; box-shadow: none !important; }
    .station-btn .badge-wrap, .station-btn .station-tags { display: none !important; }
    .station-btn .text-wrap { padding: 0 64px 0 0 !important; }
    .station-btn .text-wrap h3 { font-size: 12px !important; }
    .station-btn .text-wrap p { margin-top: 3px !important; font-size: 9px !important; }
    .station-btn .hover-menu { right: 7px !important; bottom: 50% !important; transform: translateY(50%) !important; opacity: .62 !important; }
    .station-btn .playing-indicator { width: 21px; height: 21px; padding: 4px !important; border-radius: 7px !important; }

    /* 모바일 플레이어: 정보 + 이전/재생/다음만 한 줄에 */
    #sticky-player.air-player-dock {
        bottom: max(7px, env(safe-area-inset-bottom)) !important;
        width: calc(100% - 14px) !important;
        min-height: 78px !important;
        border-radius: 17px !important;
    }
    .air-player-handle { top: -9px; height: 16px; }
    .air-player-handle span { width: 24px; }
    #player-container.air-player-layout {
        min-height: 78px !important;
        height: 78px !important;
        padding: 8px 9px !important;
        grid-template-columns: minmax(0,1fr) auto !important;
        gap: 5px !important;
    }
    #player-left { gap: 8px !important; }
    #status-icon.air-cover { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 12px !important; font-size: 15px !important; box-shadow: none !important; }
    #broadcast-meta, #header-track-title { display: none !important; }
    #current-station { font-size: 11px !important; }
    #status-text { margin-top: 3px !important; font-size: 7px !important; }
    #player-center { min-width: 0 !important; gap: 0 !important; }
    .air-transport { gap: 2px !important; }
    #btn-prev, #btn-next { width: 29px !important; height: 29px !important; border-radius: 9px !important; font-size: 10px !important; }
    #btn-replay { display: none !important; }
    #btn-play-pause { width: 42px !important; height: 42px !important; border-radius: 13px !important; font-size: 14px !important; box-shadow: none !important; }
    #player-right { display: none !important; }
    #yt-progress-container.air-progress { position: absolute !important; left: 10px !important; right: 10px !important; bottom: 3px !important; width: auto !important; gap: 5px !important; }
    #yt-time-current, #yt-time-total { display: none !important; }
    #yt-progress-bar-bg { height: 2px !important; }

    body.is-mini:not(.car-mode) #sticky-player { min-width: 0 !important; width: calc(100% - 14px) !important; }
    body.is-mini:not(.car-mode) #player-container { grid-template-columns: minmax(0,1fr) auto !important; }

    #bg-modal-content, #custom-modal-content, #autodj-modal-content, #chapter-modal-content { margin: 10px !important; padding: 20px !important; border-radius: 18px !important; max-height: calc(100dvh - 20px) !important; }
    #bg-theme-list { gap: 10px !important; }
    body.auth-page > div { border-radius: 20px !important; }
}

@media (max-width: 390px) {
    body:not(.car-mode) #theme-toggle { display: none !important; }
    body:not(.car-mode) .air-brand-copy p { display: none; }
    .air-library-heading h2 { font-size: 20px; }
    #current-station { max-width: 145px; }
    #btn-prev, #btn-next { width: 27px !important; }
}

/* =====================================================================
   CAR MODE — PHONE / PORTRAIT
======================================================================== */
@media (max-width: 768px) {
    body.car-mode {
        --car-header: 58px;
        --car-rail: 100%;
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }
    body.car-mode #main-header {
        height: var(--car-header) !important;
        padding: 7px 8px !important;
        grid-template-columns: minmax(118px,1fr) auto !important;
        gap: 6px !important;
    }
    body.car-mode .air-brand { padding: 0; gap: 7px !important; }
    body.car-mode .air-brand-mark { width: 35px !important; height: 35px !important; flex-basis: 35px; border-radius: 10px !important; font-size: 13px !important; }
    body.car-mode .air-brand-copy h1 { font-size: 13px !important; }
    body.car-mode #header-center-cluster { display: none !important; }
    body.car-mode .air-header-actions { gap: 4px !important; padding: 0 !important; }
    body.car-mode .air-sync { display: none !important; }
    body.car-mode #car-mode-autodj-btn { width: 34px !important; min-width: 34px !important; height: 34px !important; padding: 0 !important; }
    body.car-mode #car-mode-autodj-btn span { display: none !important; }
    body.car-mode #car-mode-btn, body.car-mode #theme-toggle { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 10px !important; }

    body.car-mode #sticky-player {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--car-header) !important;
        bottom: auto !important;
        width: 100% !important;
        height: 44dvh !important;
        min-height: 270px !important;
        max-height: 390px !important;
        border-bottom: 1px solid var(--air-border) !important;
        background: rgba(244,247,251,.90) !important;
    }
    html.dark body.car-mode #sticky-player { background: rgba(6,9,14,.92) !important; }
    body.car-mode #player-container {
        height: 100% !important;
        min-height: 100% !important;
        padding: 15px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 11px !important;
    }
    body.car-mode #player-left {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;
    }
    body.car-mode #status-icon { width: 84px !important; height: 84px !important; min-width: 84px !important; border-radius: 20px !important; font-size: 27px !important; box-shadow: 0 12px 26px rgba(15,23,42,.12) !important; }
    body.car-mode .air-now-copy { min-width: 0; max-width: 58vw; text-align: left; }
    body.car-mode #current-station { margin-top: 0 !important; font-size: 20px !important; line-height: 1.12 !important; -webkit-line-clamp: 2; }
    body.car-mode #status-text { margin-top: 6px !important; font-size: 9px !important; }
    body.car-mode #broadcast-meta { margin-bottom: 5px !important; gap: 4px !important; }
    body.car-mode .air-onair, body.car-mode .air-listeners { height: 19px; font-size: 7px; }
    body.car-mode .air-mini-eq, body.car-mode .air-next-track { display: none !important; }
    body.car-mode #player-center { width: 100% !important; max-width: 340px !important; align-self: center !important; justify-self: center !important; gap: 8px !important; }
    body.car-mode .air-transport { width: 100%; justify-content: center !important; gap: 12px !important; }
    body.car-mode #btn-prev, body.car-mode #btn-next, body.car-mode #btn-replay { width: 42px !important; height: 42px !important; border-radius: 13px !important; font-size: 14px !important; }
    body.car-mode #btn-play-pause { width: 62px !important; height: 62px !important; border-radius: 19px !important; font-size: 20px !important; box-shadow: 0 10px 24px rgba(15,23,42,.15) !important; }
    body.car-mode #yt-progress-container { width: 100% !important; gap: 6px !important; }
    body.car-mode #yt-time-current, body.car-mode #yt-time-total { display: none !important; }
    body.car-mode #player-right { display: none !important; }

    body.car-mode .air-main {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(var(--car-header) + min(44dvh, 390px)) !important;
        bottom: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 9px 8px 18px !important;
        border-right: 0 !important;
        overflow-y: auto !important;
        background: rgba(248,250,252,.96) !important;
    }
    html.dark body.car-mode .air-main { background: rgba(8,12,18,.97) !important; }
    body.car-mode #filter-wrapper { margin-bottom: 7px !important; padding-bottom: 7px !important; }
    body.car-mode .air-filter-tabs > button { height: 31px !important; padding: 0 9px !important; font-size: 9px !important; }
    body.car-mode .air-tags-row { display: none !important; }
    body.car-mode .station-btn { height: 66px !important; min-height: 66px !important; padding: 8px 10px !important; grid-template-columns: 42px minmax(0,1fr) !important; border-radius: 12px !important; contain-intrinsic-size: 66px; }
    body.car-mode .station-btn .icon-wrap { width: 42px !important; height: 42px !important; min-width: 42px !important; border-radius: 11px !important; font-size: 16px !important; }
    body.car-mode .station-btn .text-wrap h3 { font-size: 12px !important; }
    body.car-mode .station-btn .text-wrap p { font-size: 8px !important; }
}

/* Touch devices: 카드 메뉴를 숨기지 않음 */
@media (hover: none) and (pointer: coarse) {
    body:not(.car-mode) .station-btn .hover-menu { opacity: .60 !important; transform: translateY(0) !important; }
    body:not(.car-mode) .station-btn:active .hover-menu { opacity: 1 !important; }
}

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

/* 채널 대표 이미지·고정 */
.station-thumbnail,
.station-player-thumbnail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}
.station-btn .icon-wrap.has-station-thumbnail > i { opacity: 0; }
.station-btn .icon-wrap.has-station-thumbnail .playing-indicator { z-index: 3 !important; }
.station-btn.is-station-pinned { border-color: rgba(139,92,246,.38) !important; }
.station-btn.is-station-pinned::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139,92,246,.13);
    z-index: 4;
}
#status-icon.has-station-thumbnail { overflow: hidden !important; }
#status-icon.has-station-thumbnail #status-icon-default { opacity: 0 !important; }
#status-icon.has-station-thumbnail .main-eq { z-index: 3 !important; }
.station-thumbnail-preview-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 78px;
    width: 78px;
    height: 78px;
    overflow: hidden;
    border: 1px solid var(--air-border);
    border-radius: 18px;
    background: rgba(148,163,184,.12);
    color: #8b5cf6;
    font-size: 24px;
}
.station-thumbnail-preview-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =====================================================================
   GRAND KOLEOS CAR UI v3
   12.3-inch landscape-first HMI: large touch targets, compact information,
   cohesive player card, horizontal quick controls.
   This block intentionally overrides the previous car-mode layout while
   preserving every existing DOM id / JavaScript behavior.
======================================================================== */
body.car-mode {
    --car-header: 64px;
    --car-rail: clamp(292px, 25vw, 350px);
    --car-touch: 52px;
    --car-panel-max: 940px;
    --car-panel-radius: 30px;
    --car-gap: clamp(14px, 1.55vw, 24px);
}

/* Header: compact, always readable, no desktop-like excess. */
body.car-mode #main-header {
    height: var(--car-header) !important;
    grid-template-columns: var(--car-rail) minmax(250px, 1fr) auto !important;
    padding: 8px 12px !important;
    background: rgba(248,250,253,.97) !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.05) !important;
}
html.dark body.car-mode #main-header { background: rgba(7,10,15,.97) !important; }
body.car-mode .air-brand-mark {
    width: 42px !important; height: 42px !important; flex-basis: 42px !important;
    border-radius: 13px !important; font-size: 16px !important;
}
body.car-mode .air-brand-copy h1 { font-size: 16px !important; letter-spacing: -.035em !important; }
body.car-mode #header-center-cluster {
    min-height: 42px !important;
    margin-left: 10px !important;
    padding: 5px 12px !important;
    border-radius: 13px !important;
}
body.car-mode .air-weather span:nth-child(2),
body.car-mode .air-car-clock #car-time-text { font-size: 14px !important; }
body.car-mode .air-header-actions { gap: 7px !important; }
body.car-mode #car-mode-autodj-btn {
    height: 42px !important; min-height: 42px !important;
    padding: 0 14px !important; border-radius: 13px !important;
    font-size: 11px !important;
}
body.car-mode #car-mode-btn,
body.car-mode #theme-toggle {
    width: 42px !important; height: 42px !important; min-width: 42px !important;
    border-radius: 13px !important;
}

/* Left station rail: 6-ish stations visible on a typical landscape car viewport. */
body.car-mode .air-main {
    top: var(--car-header) !important;
    width: var(--car-rail) !important;
    padding: 10px 9px 14px !important;
    background: rgba(247,249,252,.98) !important;
    scrollbar-gutter: stable;
}
html.dark body.car-mode .air-main { background: rgba(8,12,18,.98) !important; }

body.car-mode #filter-wrapper {
    margin: 0 0 9px !important;
    padding: 0 0 9px !important;
}
body.car-mode .air-filter-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 6px !important;
    padding: 0 !important;
    overflow: visible !important;
}
body.car-mode .air-filter-tabs > button {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 6px !important;
    border-radius: 11px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.car-mode .air-filter-tabs > button i { margin-right: 4px !important; }
body.car-mode .air-tags-row {
    margin-top: 7px !important;
    padding-top: 7px !important;
}
body.car-mode #tag-filters-container button:not(.absolute),
body.car-mode #tag-filters-container > div > button:first-child {
    min-height: 34px !important;
    padding: 0 9px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
}

body.car-mode #stations-container,
body.car-mode #recommend-container { gap: 7px !important; }
body.car-mode .station-btn {
    height: 70px !important;
    min-height: 70px !important;
    padding: 9px 10px !important;
    grid-template-columns: 50px minmax(0,1fr) !important;
    column-gap: 10px !important;
    border-radius: 14px !important;
    border-width: 1px !important;
    contain-intrinsic-size: 70px;
}
body.car-mode .station-btn .icon-wrap {
    width: 50px !important; height: 50px !important; min-width: 50px !important;
    border-radius: 13px !important; font-size: 18px !important;
}
body.car-mode .station-btn .text-wrap h3 {
    font-size: 12.5px !important;
    line-height: 1.22 !important;
    letter-spacing: -.025em !important;
}
body.car-mode .station-btn .text-wrap p { font-size: 9px !important; margin-top: 3px !important; }
body.car-mode .station-btn.is-playing {
    border-color: rgba(37,99,235,.45) !important;
    background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(96,165,250,.045)) !important;
    box-shadow: inset 3px 0 0 #2563eb !important;
}
html.dark body.car-mode .station-btn.is-playing {
    background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(59,130,246,.07)) !important;
}

/* Right pane: centered, cohesive dashboard instead of a huge empty canvas. */
body.car-mode #sticky-player {
    left: var(--car-rail) !important;
    top: var(--car-header) !important;
    padding: clamp(16px, 2.2vw, 30px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 22% 20%, rgba(59,130,246,.08), transparent 32rem),
        radial-gradient(circle at 88% 84%, rgba(99,102,241,.055), transparent 28rem),
        #f2f5f9 !important;
}
html.dark body.car-mode #sticky-player {
    background:
        radial-gradient(circle at 22% 18%, rgba(37,99,235,.13), transparent 30rem),
        radial-gradient(circle at 88% 84%, rgba(79,70,229,.09), transparent 26rem),
        #070b11 !important;
}
body.has-bg.car-mode #sticky-player {
    background: rgba(239,244,249,.84) !important;
}
html.dark body.has-bg.car-mode #sticky-player {
    background: rgba(4,7,12,.86) !important;
}

body.car-mode #player-container {
    width: min(100%, var(--car-panel-max)) !important;
    height: min(680px, calc(100% - 4px)) !important;
    min-height: 0 !important;
    max-width: var(--car-panel-max) !important;
    max-height: 680px !important;
    padding: clamp(24px, 3vw, 38px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0,1fr) auto auto !important;
    grid-template-areas: "now" "center" "tools" !important;
    gap: clamp(18px, 2.3vh, 28px) !important;
    align-items: stretch !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    border-radius: var(--car-panel-radius) !important;
    background: rgba(255,255,255,.84) !important;
    box-shadow: 0 20px 55px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(10px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
    overflow: hidden !important;
}
html.dark body.car-mode #player-container {
    border-color: rgba(148,163,184,.13) !important;
    background: rgba(13,18,27,.88) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.30) !important;
}
body.has-bg.car-mode #player-container {
    background: rgba(250,252,255,.90) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.dark body.has-bg.car-mode #player-container { background: rgba(10,14,21,.92) !important; }

/* Now playing area */
body.car-mode #player-left {
    grid-area: now !important;
    width: 100% !important;
    align-self: center !important;
    display: grid !important;
    grid-template-columns: clamp(132px, 13.5vw, 172px) minmax(0,1fr) !important;
    align-items: center !important;
    gap: clamp(22px, 2.7vw, 34px) !important;
    padding: 0 !important;
}
body.car-mode #status-icon {
    width: clamp(132px, 13.5vw, 172px) !important;
    height: clamp(132px, 13.5vw, 172px) !important;
    min-width: clamp(132px, 13.5vw, 172px) !important;
    border-radius: clamp(24px, 2.3vw, 30px) !important;
    font-size: clamp(32px, 3vw, 46px) !important;
    box-shadow: 0 20px 42px rgba(15,23,42,.12) !important;
}
body.car-mode #status-icon.is-active .main-eq { transform: scale(1.55) !important; gap: 6px !important; }
body.car-mode #status-icon.is-active .main-eq .eq-bar { width: 3px !important; }
body.car-mode .air-now-copy { max-width: none !important; min-width: 0 !important; }
body.car-mode #broadcast-meta {
    margin: 0 0 12px !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
}
body.car-mode .air-onair,
body.car-mode .air-listeners { height: 25px !important; border-radius: 8px !important; }
body.car-mode .air-next-track {
    flex: 1 1 230px !important;
    max-width: 100% !important;
    min-width: 180px !important;
    height: 27px !important;
    margin: 0 !important;
    border-radius: 8px !important;
}
body.car-mode #current-station {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(26px, 2.45vw, 38px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.05em !important;
    -webkit-line-clamp: 2 !important;
}
body.car-mode #status-text {
    margin-top: 10px !important;
    font-size: clamp(11px, 1.05vw, 14px) !important;
    line-height: 1.35 !important;
}
body.car-mode #header-track-title { margin-top: 8px !important; font-size: 10px !important; }

/* Transport: centered and intentionally oversized for car touch. */
body.car-mode #player-center {
    grid-area: center !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: end !important;
    gap: 13px !important;
}
body.car-mode .air-transport {
    width: 100% !important;
    justify-content: center !important;
    gap: clamp(14px, 2vw, 22px) !important;
}
body.car-mode #btn-prev,
body.car-mode #btn-next,
body.car-mode #btn-replay {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 18px !important;
    background: rgba(148,163,184,.075) !important;
    font-size: 18px !important;
}
html.dark body.car-mode #btn-prev,
html.dark body.car-mode #btn-next,
html.dark body.car-mode #btn-replay { background: rgba(255,255,255,.055) !important; }
body.car-mode #btn-play-pause {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    border-radius: 24px !important;
    font-size: 27px !important;
    box-shadow: 0 16px 34px rgba(15,23,42,.18) !important;
}
body.car-mode #yt-progress-container {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    gap: 10px !important;
}
body.car-mode #yt-progress-bar-bg { height: 6px !important; }
body.car-mode #yt-time-current,
body.car-mode #yt-time-total { width: 42px !important; font-size: 9px !important; }

/* Quick tools: a horizontal car-friendly strip, not a narrow vertical rail. */
body.car-mode #player-right {
    grid-area: tools !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 16px 0 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--air-border) !important;
}
body.car-mode #player-right > button {
    width: 84px !important;
    height: var(--car-touch) !important;
    min-width: 84px !important;
    min-height: var(--car-touch) !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 15px !important;
    background: rgba(148,163,184,.07) !important;
    font-size: 13px !important;
}
html.dark body.car-mode #player-right > button { background: rgba(255,255,255,.05) !important; }
body.car-mode #player-right > button.hidden { display: none !important; }
body.car-mode #agc-toggle::after { content: "AUTO"; font-size: 9px; font-weight: 850; letter-spacing: .04em; }
body.car-mode #timer-toggle::after { content: "TIMER"; font-size: 9px; font-weight: 850; letter-spacing: .04em; }
body.car-mode #pip-toggle::after { content: "PIP"; font-size: 9px; font-weight: 850; }
body.car-mode #btn-add-dashboard::after { content: "ADD"; font-size: 9px; font-weight: 850; }
body.car-mode #timer-text { right: 5px !important; top: 4px !important; }
body.car-mode .air-eq-wrap {
    width: 150px !important;
    min-width: 128px !important;
    flex: 0 1 150px !important;
}
body.car-mode #eq-preset {
    width: 100% !important;
    height: var(--car-touch) !important;
    min-height: var(--car-touch) !important;
    padding: 0 30px 0 13px !important;
    border-radius: 15px !important;
    background: rgba(148,163,184,.07) !important;
    font-size: 10px !important;
}
html.dark body.car-mode #eq-preset { background: rgba(255,255,255,.05) !important; }
body.car-mode .air-volume-wrap {
    width: min(230px, 29%) !important;
    min-width: 170px !important;
    height: var(--car-touch) !important;
    min-height: var(--car-touch) !important;
    flex: 0 1 230px !important;
    padding: 0 14px !important;
    border-radius: 15px !important;
    background: rgba(148,163,184,.07) !important;
}
html.dark body.car-mode .air-volume-wrap { background: rgba(255,255,255,.05) !important; }
body.car-mode #volume-slider { min-width: 90px !important; }

/* 12.3-inch-like landscape: typical center-display effective width range. */
@media (max-width: 1380px) and (min-width: 769px) {
    body.car-mode {
        --car-rail: clamp(282px, 25vw, 320px);
        --car-panel-max: 860px;
        --car-touch: 50px;
    }
    body.car-mode #main-header { grid-template-columns: var(--car-rail) minmax(230px,1fr) auto !important; }
    body.car-mode .air-brand-copy h1 { font-size: 15px !important; }
    body.car-mode #player-container { padding: 26px 30px !important; border-radius: 26px !important; }
    body.car-mode #player-left { grid-template-columns: 142px minmax(0,1fr) !important; gap: 25px !important; }
    body.car-mode #status-icon { width: 142px !important; height: 142px !important; min-width: 142px !important; border-radius: 26px !important; }
    body.car-mode #current-station { font-size: clamp(25px, 2.5vw, 34px) !important; }
    body.car-mode #btn-play-pause { width: 78px !important; height: 78px !important; min-width: 78px !important; border-radius: 23px !important; }
    body.car-mode #btn-prev, body.car-mode #btn-next, body.car-mode #btn-replay { width: 56px !important; height: 56px !important; min-width: 56px !important; }
    body.car-mode #player-right > button { width: 78px !important; min-width: 78px !important; }
    body.car-mode .air-eq-wrap { width: 136px !important; min-width: 120px !important; }
    body.car-mode .air-volume-wrap { width: 190px !important; min-width: 150px !important; }
}

@media (max-width: 1120px) and (min-width: 769px) {
    body.car-mode {
        --car-rail: 275px;
        --car-panel-max: 760px;
    }
    body.car-mode #main-header { grid-template-columns: var(--car-rail) minmax(195px,1fr) auto !important; }
    body.car-mode #header-center-cluster { margin-left: 6px !important; padding-left: 9px !important; padding-right: 9px !important; }
    body.car-mode .air-weather span:nth-child(3), body.car-mode #car-day-text { display: none !important; }
    body.car-mode #car-mode-autodj-btn { width: 42px !important; min-width: 42px !important; padding: 0 !important; }
    body.car-mode #car-mode-autodj-btn span { display: none !important; }
    body.car-mode .air-filter-tabs > button { font-size: 8.7px !important; }
    body.car-mode #player-container { padding: 24px 25px !important; }
    body.car-mode #player-left { grid-template-columns: 124px minmax(0,1fr) !important; gap: 21px !important; }
    body.car-mode #status-icon { width: 124px !important; height: 124px !important; min-width: 124px !important; border-radius: 23px !important; }
    body.car-mode #current-station { font-size: 27px !important; }
    body.car-mode .air-next-track { display: none !important; }
    body.car-mode #player-right { gap: 7px !important; }
    body.car-mode #player-right > button { width: 66px !important; min-width: 66px !important; }
    body.car-mode #agc-toggle::after, body.car-mode #timer-toggle::after, body.car-mode #pip-toggle::after, body.car-mode #btn-add-dashboard::after { display: none !important; }
    body.car-mode .air-eq-wrap { width: 128px !important; min-width: 112px !important; }
    body.car-mode .air-volume-wrap { width: 165px !important; min-width: 130px !important; }
}

/* Low-height vehicle browsers: keep all primary controls above the fold. */
@media (max-height: 720px) and (orientation: landscape) and (min-width: 769px) {
    body.car-mode { --car-header: 58px; --car-touch: 46px; }
    body.car-mode #main-header { padding-top: 6px !important; padding-bottom: 6px !important; }
    body.car-mode .air-brand-mark { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
    body.car-mode #header-center-cluster { min-height: 38px !important; }
    body.car-mode #car-mode-autodj-btn, body.car-mode #car-mode-btn, body.car-mode #theme-toggle { height: 38px !important; min-height: 38px !important; }
    body.car-mode #car-mode-btn, body.car-mode #theme-toggle { width: 38px !important; min-width: 38px !important; }
    body.car-mode .air-main { padding-top: 8px !important; }
    body.car-mode .air-filter-tabs > button { height: 38px !important; min-height: 38px !important; }
    body.car-mode #tag-filters-container button:not(.absolute), body.car-mode #tag-filters-container > div > button:first-child { min-height: 30px !important; }
    body.car-mode .station-btn { height: 64px !important; min-height: 64px !important; grid-template-columns: 44px minmax(0,1fr) !important; contain-intrinsic-size: 64px; }
    body.car-mode .station-btn .icon-wrap { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 11px !important; }
    body.car-mode #sticky-player { padding: 14px 20px !important; }
    body.car-mode #player-container {
        height: calc(100% - 2px) !important;
        max-height: none !important;
        padding: 20px 26px !important;
        gap: 14px !important;
        border-radius: 24px !important;
    }
    body.car-mode #player-left { grid-template-columns: 112px minmax(0,1fr) !important; gap: 20px !important; }
    body.car-mode #status-icon { width: 112px !important; height: 112px !important; min-width: 112px !important; border-radius: 21px !important; }
    body.car-mode #broadcast-meta { margin-bottom: 7px !important; }
    body.car-mode .air-onair, body.car-mode .air-listeners { height: 22px !important; }
    body.car-mode #current-station { font-size: clamp(23px, 2.45vw, 31px) !important; }
    body.car-mode #status-text { margin-top: 7px !important; font-size: 10.5px !important; }
    body.car-mode #btn-play-pause { width: 70px !important; height: 70px !important; min-width: 70px !important; border-radius: 21px !important; font-size: 23px !important; }
    body.car-mode #btn-prev, body.car-mode #btn-next, body.car-mode #btn-replay { width: 50px !important; height: 50px !important; min-width: 50px !important; border-radius: 16px !important; }
    body.car-mode #player-center { gap: 8px !important; }
    body.car-mode #player-right { padding-top: 10px !important; gap: 7px !important; }
    body.car-mode #player-right > button { height: 46px !important; min-height: 46px !important; width: 68px !important; min-width: 68px !important; border-radius: 13px !important; }
    body.car-mode #eq-preset, body.car-mode .air-volume-wrap { height: 46px !important; min-height: 46px !important; border-radius: 13px !important; }
    body.car-mode .air-eq-wrap { width: 130px !important; }
    body.car-mode .air-volume-wrap { width: 176px !important; min-width: 135px !important; }
}

/* Very low landscape: hide secondary tags, never primary playback/tools. */
@media (max-height: 600px) and (orientation: landscape) and (min-width: 769px) {
    body.car-mode { --car-header: 54px; --car-rail: 286px; }
    body.car-mode #tag-section { display: none !important; }
    body.car-mode #filter-wrapper { padding-bottom: 7px !important; margin-bottom: 7px !important; }
    body.car-mode .air-filter-tabs > button { height: 34px !important; min-height: 34px !important; font-size: 8.5px !important; }
    body.car-mode .station-btn { height: 58px !important; min-height: 58px !important; grid-template-columns: 40px minmax(0,1fr) !important; contain-intrinsic-size: 58px; }
    body.car-mode .station-btn .icon-wrap { width: 40px !important; height: 40px !important; min-width: 40px !important; }
    body.car-mode .station-btn .text-wrap h3 { font-size: 11.5px !important; }
    body.car-mode #sticky-player { padding: 10px 16px !important; }
    body.car-mode #player-container { padding: 15px 22px !important; gap: 9px !important; border-radius: 20px !important; }
    body.car-mode #player-left { grid-template-columns: 92px minmax(0,1fr) !important; gap: 16px !important; }
    body.car-mode #status-icon { width: 92px !important; height: 92px !important; min-width: 92px !important; border-radius: 18px !important; }
    body.car-mode #broadcast-meta { margin-bottom: 4px !important; }
    body.car-mode .air-next-track, body.car-mode .air-mini-eq { display: none !important; }
    body.car-mode #current-station { font-size: 24px !important; }
    body.car-mode #status-text { margin-top: 5px !important; font-size: 10px !important; }
    body.car-mode #btn-play-pause { width: 62px !important; height: 62px !important; min-width: 62px !important; border-radius: 18px !important; }
    body.car-mode #btn-prev, body.car-mode #btn-next, body.car-mode #btn-replay { width: 46px !important; height: 46px !important; min-width: 46px !important; }
    body.car-mode #player-right { padding-top: 7px !important; }
    body.car-mode #player-right > button { height: 42px !important; min-height: 42px !important; width: 58px !important; min-width: 58px !important; }
    body.car-mode #eq-preset, body.car-mode .air-volume-wrap { height: 42px !important; min-height: 42px !important; }
    body.car-mode .air-eq-wrap { width: 118px !important; }
    body.car-mode .air-volume-wrap { width: 150px !important; min-width: 120px !important; }
}

/* Car mode on phones: preserve a simple one-hand layout and larger controls. */
@media (max-width: 768px) {
    body.car-mode { --car-header: 58px; --car-rail: 100%; --car-touch: 48px; }
    body.car-mode #sticky-player {
        padding: 0 !important;
        height: min(43dvh, 380px) !important;
        min-height: 268px !important;
        background: rgba(244,247,251,.97) !important;
    }
    html.dark body.car-mode #sticky-player { background: rgba(6,9,14,.98) !important; }
    body.car-mode #player-container {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        padding: 13px 12px !important;
        display: grid !important;
        grid-template-rows: minmax(0,1fr) auto !important;
        grid-template-areas: "now" "center" !important;
        gap: 9px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body.car-mode #player-left {
        display: grid !important;
        grid-template-columns: 82px minmax(0,1fr) !important;
        gap: 13px !important;
    }
    body.car-mode #status-icon { width: 82px !important; height: 82px !important; min-width: 82px !important; border-radius: 19px !important; }
    body.car-mode #broadcast-meta { margin-bottom: 5px !important; }
    body.car-mode .air-next-track, body.car-mode .air-mini-eq { display: none !important; }
    body.car-mode #current-station { font-size: 19px !important; line-height: 1.13 !important; }
    body.car-mode #status-text { margin-top: 5px !important; font-size: 9px !important; }
    body.car-mode #player-center { gap: 6px !important; }
    body.car-mode #btn-play-pause { width: 60px !important; height: 60px !important; min-width: 60px !important; border-radius: 18px !important; font-size: 19px !important; }
    body.car-mode #btn-prev, body.car-mode #btn-next, body.car-mode #btn-replay { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 13px !important; }
    body.car-mode #player-right { display: none !important; }
    body.car-mode .air-main {
        top: calc(var(--car-header) + min(43dvh, 380px)) !important;
        padding-top: 8px !important;
    }
    body.car-mode .air-filter-tabs {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 5px !important;
    }
    body.car-mode .air-filter-tabs > button { height: 35px !important; min-height: 35px !important; font-size: 8.5px !important; }
    body.car-mode .station-btn { height: 64px !important; min-height: 64px !important; }
}

/* Mobile car tools remain accessible via a horizontally scrollable quick row. */
@media (max-width: 768px) {
    body.car-mode #sticky-player {
        height: min(47dvh, 420px) !important;
        min-height: 308px !important;
    }
    body.car-mode #player-container {
        grid-template-rows: minmax(0,1fr) auto auto !important;
        grid-template-areas: "now" "center" "tools" !important;
        gap: 7px !important;
    }
    body.car-mode #player-right {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 7px 0 1px !important;
        gap: 6px !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border-left: 0 !important;
        border-top: 1px solid var(--air-border) !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    body.car-mode #player-right::-webkit-scrollbar { display: none; }
    body.car-mode #player-right > button {
        width: 48px !important;
        min-width: 48px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 13px !important;
        flex: 0 0 48px !important;
    }
    body.car-mode #agc-toggle::after,
    body.car-mode #timer-toggle::after,
    body.car-mode #pip-toggle::after,
    body.car-mode #btn-add-dashboard::after { display: none !important; }
    body.car-mode .air-eq-wrap {
        width: 118px !important;
        min-width: 118px !important;
        flex: 0 0 118px !important;
    }
    body.car-mode #eq-preset {
        height: 44px !important;
        min-height: 44px !important;
        padding-left: 10px !important;
        border-radius: 13px !important;
        font-size: 9px !important;
    }
    body.car-mode .air-volume-wrap {
        width: 150px !important;
        min-width: 150px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 150px !important;
        padding: 0 10px !important;
        border-radius: 13px !important;
    }
    body.car-mode .air-main {
        top: calc(var(--car-header) + min(47dvh, 420px)) !important;
    }
}

/* =====================================================================
   GRAND KOLEOS CAR UI v4 — REAL VEHICLE BROWSER TUNING
   실제 그랑 콜레오스 센터 디스플레이처럼 브라우저 상단 UI 때문에
   웹 뷰포트의 세로 높이가 짧은 환경을 우선 최적화합니다.
   - 플레이어는 한 화면 안에서 스크롤 없이 완결
   - 좌측 채널은 4~6개가 바로 보이도록 밀도 조정
   - 필터는 2줄 그리드 대신 1줄 가로 스크롤
   - 무거운 blur를 줄여 차량 브라우저 렌더링 비용 감소
   - 모든 기존 DOM id / 이벤트는 그대로 유지
======================================================================== */
@media (max-height: 560px) and (orientation: landscape) and (min-width: 769px) {
    body.car-mode {
        --car-header: 46px;
        --car-rail: clamp(268px, 24.5vw, 318px);
        --car-touch: 42px;
        --car-panel-max: none;
        overflow: hidden !important;
    }

    /* 차량 브라우저 자체 상단 바가 크므로 앱 헤더는 한 줄만 사용 */
    body.car-mode #main-header {
        height: var(--car-header) !important;
        min-height: var(--car-header) !important;
        grid-template-columns: var(--car-rail) minmax(190px, 1fr) auto !important;
        padding: 4px 8px !important;
        background: rgba(248,250,253,.985) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    html.dark body.car-mode #main-header { background: rgba(7,10,15,.985) !important; }
    body.car-mode .air-brand { gap: 7px !important; padding-left: 0 !important; }
    body.car-mode .air-brand-mark {
        width: 34px !important; height: 34px !important; min-width: 34px !important; flex-basis: 34px !important;
        border-radius: 10px !important; font-size: 13px !important;
    }
    body.car-mode .air-brand-copy h1 { font-size: 13px !important; letter-spacing: -.035em !important; }
    body.car-mode #header-center-cluster {
        min-height: 34px !important;
        height: 34px !important;
        margin-left: 5px !important;
        padding: 3px 9px !important;
        gap: 7px !important;
        border-radius: 10px !important;
        background: rgba(148,163,184,.045) !important;
        box-shadow: none !important;
    }
    body.car-mode .air-weather span:nth-child(3),
    body.car-mode #car-day-text { display: none !important; }
    body.car-mode .air-weather span:nth-child(2),
    body.car-mode .air-car-clock #car-time-text { font-size: 11px !important; }
    body.car-mode .air-header-actions { gap: 4px !important; padding-left: 5px !important; }
    body.car-mode .air-sync { display: none !important; }
    body.car-mode #car-mode-autodj-btn {
        width: 38px !important; min-width: 38px !important; height: 34px !important; min-height: 34px !important;
        padding: 0 !important; border-radius: 10px !important;
    }
    body.car-mode #car-mode-autodj-btn span { display: none !important; }
    body.car-mode #car-mode-btn,
    body.car-mode #theme-toggle {
        width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important;
        border-radius: 10px !important;
    }

    /* 채널 레일 — 실제 차량에서 5개 전후가 첫 화면에 보이도록 */
    body.car-mode .air-main {
        top: var(--car-header) !important;
        width: var(--car-rail) !important;
        padding: 6px 7px 10px !important;
        background: rgba(248,250,252,.99) !important;
        scrollbar-gutter: auto !important;
    }
    html.dark body.car-mode .air-main { background: rgba(8,12,18,.99) !important; }
    body.car-mode #filter-wrapper {
        margin: 0 0 6px !important;
        padding: 0 0 6px !important;
    }
    body.car-mode .air-filter-tabs {
        display: flex !important;
        flex-direction: row !important;
        gap: 5px !important;
        padding: 0 1px 1px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    body.car-mode .air-filter-tabs::-webkit-scrollbar { display: none !important; }
    body.car-mode .air-filter-tabs > button {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 76px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 9px !important;
        border-radius: 10px !important;
        font-size: 9px !important;
        scroll-snap-align: start;
    }
    body.car-mode .air-filter-tabs > button i { margin-right: 4px !important; }
    body.car-mode #tag-section { display: none !important; }

    body.car-mode #stations-container,
    body.car-mode #recommend-container { gap: 5px !important; }
    body.car-mode .station-btn {
        height: 56px !important;
        min-height: 56px !important;
        padding: 7px 9px !important;
        grid-template-columns: 38px minmax(0,1fr) !important;
        column-gap: 9px !important;
        border-radius: 11px !important;
        contain-intrinsic-size: 56px !important;
    }
    body.car-mode .station-btn .icon-wrap {
        width: 38px !important; height: 38px !important; min-width: 38px !important;
        border-radius: 10px !important; font-size: 14px !important;
    }
    body.car-mode .station-btn .text-wrap { padding-right: 2px !important; }
    body.car-mode .station-btn .text-wrap h3 {
        font-size: 11px !important;
        line-height: 1.18 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    body.car-mode .station-btn .text-wrap p {
        margin-top: 2px !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    body.car-mode .station-btn .playing-indicator { width: 18px !important; height: 18px !important; border-radius: 6px !important; }

    /* 플레이어 — 짧은 세로 뷰포트에서 모든 핵심 기능이 한 번에 보이게 */
    body.car-mode #sticky-player {
        left: var(--car-rail) !important;
        top: var(--car-header) !important;
        right: 0 !important;
        bottom: 0 !important;
        padding: 8px 10px !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        background: #f3f6fa !important;
    }
    html.dark body.car-mode #sticky-player { background: #080c12 !important; }
    body.has-bg.car-mode #sticky-player { background: rgba(241,245,249,.94) !important; }
    html.dark body.has-bg.car-mode #sticky-player { background: rgba(5,8,13,.95) !important; }

    body.car-mode #player-container {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 12px 16px !important;
        display: grid !important;
        grid-template-columns: minmax(300px, 1fr) minmax(290px, .92fr) !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "now now"
            "center tools" !important;
        gap: 8px 14px !important;
        align-items: center !important;
        border: 1px solid rgba(148,163,184,.20) !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.90) !important;
        box-shadow: 0 8px 26px rgba(15,23,42,.055) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: hidden !important;
    }
    html.dark body.car-mode #player-container {
        border-color: rgba(148,163,184,.13) !important;
        background: rgba(13,18,27,.94) !important;
        box-shadow: none !important;
    }
    body.has-bg.car-mode #player-container { background: rgba(251,253,255,.94) !important; }
    html.dark body.has-bg.car-mode #player-container { background: rgba(10,14,21,.95) !important; }

    body.car-mode #player-left {
        grid-area: now !important;
        align-self: stretch !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 88px minmax(0,1fr) !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 0 3px !important;
    }
    body.car-mode #status-icon {
        width: 88px !important; height: 88px !important; min-width: 88px !important;
        border-radius: 18px !important; font-size: 25px !important;
        box-shadow: 0 10px 24px rgba(15,23,42,.10) !important;
    }
    body.car-mode #status-icon.is-active .main-eq { transform: scale(1.24) !important; gap: 4px !important; }
    body.car-mode .air-now-copy { min-width: 0 !important; align-self: center !important; }
    body.car-mode #broadcast-meta {
        margin: 0 0 5px !important;
        gap: 5px !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }
    body.car-mode .air-onair,
    body.car-mode .air-listeners { height: 21px !important; min-height: 21px !important; padding-left: 7px !important; padding-right: 7px !important; font-size: 7px !important; }
    body.car-mode .air-mini-eq { display: none !important; }
    body.car-mode .air-next-track {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 22px !important;
        border-radius: 7px !important;
        overflow: hidden !important;
    }
    body.car-mode .air-next-track strong { font-size: 6.5px !important; }
    body.car-mode .air-next-track span {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        font-size: 7.5px !important;
    }
    body.car-mode #current-station {
        max-width: 100% !important;
        font-size: clamp(20px, 2.05vw, 28px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.045em !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }
    body.car-mode #status-text {
        margin-top: 5px !important;
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    body.car-mode #header-track-title { display: none !important; }

    body.car-mode #player-center {
        grid-area: center !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        align-self: end !important;
        justify-self: stretch !important;
        gap: 6px !important;
        padding: 0 2px !important;
    }
    body.car-mode .air-transport {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 9px !important;
    }
    body.car-mode #btn-prev,
    body.car-mode #btn-next,
    body.car-mode #btn-replay {
        width: 42px !important; height: 42px !important; min-width: 42px !important;
        border-radius: 13px !important; font-size: 13px !important;
    }
    body.car-mode #btn-play-pause {
        width: 58px !important; height: 58px !important; min-width: 58px !important;
        border-radius: 17px !important; font-size: 19px !important;
        box-shadow: 0 9px 22px rgba(15,23,42,.14) !important;
    }
    body.car-mode #yt-progress-container {
        width: 100% !important;
        max-width: 440px !important;
        margin: 0 !important;
        gap: 6px !important;
    }
    body.car-mode #yt-progress-bar-bg { height: 5px !important; }
    body.car-mode #yt-time-current,
    body.car-mode #yt-time-total { width: 31px !important; font-size: 7.5px !important; }

    /* 하단 우측 퀵 바: 운전 중 필요한 설정만 한 줄 */
    body.car-mode #player-right {
        grid-area: tools !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 58px !important;
        align-self: end !important;
        padding: 8px 0 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        overflow: hidden !important;
        border-left: 0 !important;
        border-top: 1px solid var(--air-border) !important;
    }
    body.car-mode #player-right > button {
        width: 42px !important; min-width: 42px !important;
        height: 42px !important; min-height: 42px !important;
        padding: 0 !important; flex: 0 0 42px !important;
        border-radius: 12px !important; font-size: 12px !important;
    }
    body.car-mode #agc-toggle::after,
    body.car-mode #timer-toggle::after,
    body.car-mode #pip-toggle::after,
    body.car-mode #btn-add-dashboard::after { display: none !important; }
    body.car-mode .air-eq-wrap {
        width: 112px !important; min-width: 100px !important; flex: 0 1 112px !important;
    }
    body.car-mode #eq-preset {
        width: 100% !important; height: 42px !important; min-height: 42px !important;
        padding: 0 24px 0 9px !important; border-radius: 12px !important; font-size: 8.5px !important;
    }
    body.car-mode .air-volume-wrap {
        width: 142px !important; min-width: 110px !important; height: 42px !important; min-height: 42px !important;
        flex: 0 1 142px !important; padding: 0 9px !important; border-radius: 12px !important;
    }
    body.car-mode .air-volume-wrap > i { font-size: 9px !important; }
    body.car-mode #volume-slider { min-width: 65px !important; }

    /* 차량 브라우저에서는 hover 애니메이션이 의미 없고 렌더링 낭비가 큼 */
    body.car-mode .station-btn,
    body.car-mode #player-container,
    body.car-mode #status-icon,
    body.car-mode #player-right > button { transition: none !important; }
}

/* 실제 가용 높이가 440px 안팎인 경우 한 단계 더 압축 */
@media (max-height: 440px) and (orientation: landscape) and (min-width: 769px) {
    body.car-mode { --car-header: 42px; --car-rail: clamp(258px, 24vw, 302px); }
    body.car-mode #main-header { padding: 3px 7px !important; }
    body.car-mode .air-brand-mark { width: 32px !important; height: 32px !important; min-width: 32px !important; flex-basis: 32px !important; }
    body.car-mode #header-center-cluster { height: 32px !important; min-height: 32px !important; }
    body.car-mode #car-mode-autodj-btn,
    body.car-mode #car-mode-btn,
    body.car-mode #theme-toggle { height: 32px !important; min-height: 32px !important; }
    body.car-mode #car-mode-btn,
    body.car-mode #theme-toggle { width: 32px !important; min-width: 32px !important; }

    body.car-mode .air-main { padding: 5px 6px 8px !important; }
    body.car-mode #filter-wrapper { margin-bottom: 5px !important; padding-bottom: 5px !important; }
    body.car-mode .air-filter-tabs > button { height: 34px !important; min-height: 34px !important; min-width: 70px !important; }
    body.car-mode .station-btn {
        height: 52px !important; min-height: 52px !important;
        grid-template-columns: 36px minmax(0,1fr) !important;
        padding: 6px 8px !important; contain-intrinsic-size: 52px !important;
    }
    body.car-mode .station-btn .icon-wrap { width: 36px !important; height: 36px !important; min-width: 36px !important; }

    body.car-mode #sticky-player { padding: 6px 8px !important; }
    body.car-mode #player-container {
        padding: 9px 12px !important;
        grid-template-columns: minmax(270px, 1fr) minmax(260px, .9fr) !important;
        gap: 6px 10px !important;
        border-radius: 15px !important;
    }
    body.car-mode #player-left { grid-template-columns: 74px minmax(0,1fr) !important; gap: 12px !important; }
    body.car-mode #status-icon { width: 74px !important; height: 74px !important; min-width: 74px !important; border-radius: 15px !important; font-size: 21px !important; }
    body.car-mode #broadcast-meta { margin-bottom: 3px !important; }
    body.car-mode .air-onair,
    body.car-mode .air-listeners { height: 19px !important; min-height: 19px !important; }
    body.car-mode .air-next-track { height: 20px !important; }
    body.car-mode #current-station { font-size: clamp(18px, 1.9vw, 24px) !important; }
    body.car-mode #status-text { margin-top: 3px !important; font-size: 8.5px !important; }

    body.car-mode #btn-prev,
    body.car-mode #btn-next,
    body.car-mode #btn-replay { width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 11px !important; }
    body.car-mode #btn-play-pause { width: 52px !important; height: 52px !important; min-width: 52px !important; border-radius: 15px !important; }
    body.car-mode #player-right { height: 52px !important; padding-top: 6px !important; gap: 5px !important; }
    body.car-mode #player-right > button { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; flex-basis: 38px !important; border-radius: 11px !important; }
    body.car-mode #eq-preset,
    body.car-mode .air-volume-wrap { height: 38px !important; min-height: 38px !important; border-radius: 11px !important; }
    body.car-mode .air-eq-wrap { width: 102px !important; min-width: 92px !important; }
    body.car-mode .air-volume-wrap { width: 128px !important; min-width: 100px !important; }
}

/* 좁은 차량 웹뷰에서도 하단 두 영역이 서로 침범하지 않게 축소 */
@media (max-width: 1050px) and (max-height: 560px) and (orientation: landscape) and (min-width: 769px) {
    body.car-mode { --car-rail: 250px; }
    body.car-mode #main-header { grid-template-columns: var(--car-rail) minmax(150px,1fr) auto !important; }
    body.car-mode #header-center-cluster { margin-left: 3px !important; }
    body.car-mode .air-weather { display: none !important; }
    body.car-mode .air-context-divider { display: none !important; }
    body.car-mode #player-container {
        grid-template-columns: minmax(240px,1fr) minmax(240px,.95fr) !important;
        padding-left: 10px !important; padding-right: 10px !important;
    }
    body.car-mode #player-left { grid-template-columns: 68px minmax(0,1fr) !important; gap: 10px !important; }
    body.car-mode #status-icon { width: 68px !important; height: 68px !important; min-width: 68px !important; border-radius: 14px !important; }
    body.car-mode #current-station { font-size: 19px !important; }
    body.car-mode .air-next-track { display: none !important; }
    body.car-mode .air-volume-wrap { width: 112px !important; min-width: 92px !important; }
    body.car-mode .air-eq-wrap { width: 96px !important; min-width: 88px !important; }
}

/* 모바일에서는 채널 목록 위의 안내와 필터를 항상 표시한다.
   데스크톱의 상단 메뉴 접기 상태가 모바일까지 이어져 목록만 보이던 문제를 방지한다. */
@media (max-width: 768px) {
    body.zen-mode:not(.car-mode) .air-library-heading {
        display: flex !important;
    }

    body.zen-mode:not(.car-mode) #filter-wrapper {
        padding: 8px !important;
        border: 1px solid var(--air-border) !important;
        background: var(--air-panel) !important;
        box-shadow: var(--air-shadow-xs) !important;
        backdrop-filter: blur(14px) saturate(125%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
    }

    html.dark body.zen-mode:not(.car-mode) #filter-wrapper {
        background: rgba(15,21,31,.67) !important;
    }

    body.zen-mode:not(.car-mode) #tab-filters {
        max-height: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }
}

/* 휴대폰 자동차 모드: 뒤쪽의 가로 차량용 2단 레이아웃이 left: var(--car-rail)을
   다시 적용해 플레이어를 화면 밖으로 밀어내지 않도록, 모바일 위치를 최종 고정한다. */
@media (max-width: 768px) {
    body.car-mode {
        --car-mobile-player-height: clamp(260px, 42dvh, 380px);
    }

    body.car-mode #sticky-player {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--car-header) !important;
        bottom: auto !important;
        width: 100% !important;
        height: var(--car-mobile-player-height) !important;
        min-height: 0 !important;
        max-height: none !important;
        z-index: 30 !important;
    }

    body.car-mode .air-main {
        left: 0 !important;
        right: 0 !important;
        top: calc(var(--car-header) + var(--car-mobile-player-height)) !important;
        bottom: 0 !important;
        width: 100% !important;
    }
}

/* =====================================================================
   DVR PLAYBACK STATUS / CONTINUOUS SAVED PLAYLIST
======================================================================== */
.air-now-copy { position: relative; overflow: visible !important; }
.air-dvr-info {
    position: relative;
    min-width: 0;
    max-width: 100%;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 8px;
    line-height: 1;
}
.air-dvr-info.hidden { display: none !important; }
.air-dvr-mode {
    height: 19px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .04em;
}
.air-dvr-mode.is-live { color: #047857; background: rgba(16,185,129,.12); }
.air-dvr-mode.is-paused { color: #b45309; background: rgba(245,158,11,.13); }
.air-dvr-mode.is-saved { color: #7c3aed; background: rgba(124,58,237,.13); }
html.dark .air-dvr-mode.is-live { color: #6ee7b7; }
html.dark .air-dvr-mode.is-paused { color: #fbbf24; }
html.dark .air-dvr-mode.is-saved { color: #c4b5fd; }
.air-dvr-current {
    min-width: 0;
    max-width: 250px;
    overflow: hidden;
    color: var(--air-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 750;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.air-dvr-list-button,
.air-dvr-live-button {
    height: 19px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    border: 1px solid var(--air-border);
    border-radius: 7px;
    background: rgba(148,163,184,.07);
    color: var(--air-muted);
    font-size: 7px;
    font-weight: 850;
    cursor: pointer;
}
.air-dvr-list-button:hover,
.air-dvr-live-button:hover { color: var(--air-text); background: rgba(148,163,184,.14); }
.air-dvr-live-button { color: #2563eb; }
.air-dvr-live-button.hidden { display: none !important; }
.air-dvr-playlist-panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    z-index: 120;
    width: min(430px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid var(--air-border-strong);
    border-radius: 15px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 20px 50px rgba(15,23,42,.20);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
html.dark .air-dvr-playlist-panel { background: rgba(11,16,24,.98); box-shadow: 0 22px 54px rgba(0,0,0,.46); }
.air-dvr-playlist-panel.hidden { display: none !important; }
.air-dvr-playlist-head {
    height: 48px;
    padding: 0 12px 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--air-border);
}
.air-dvr-playlist-head > div { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.air-dvr-playlist-head strong { color: var(--air-text); font-size: 12px; font-weight: 950; }
.air-dvr-playlist-head span { color: var(--air-muted); font-size: 8px; font-weight: 750; }
.air-dvr-playlist-head button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: rgba(148,163,184,.10);
    color: var(--air-muted);
    cursor: pointer;
}
.air-dvr-playlist-items { max-height: 230px; padding: 7px; overflow-y: auto; overscroll-behavior: contain; }
.air-dvr-playlist-hint { margin: 0; padding: 9px 14px 2px; color: var(--air-muted); font-size: 10px; line-height: 1.5; }
.air-dvr-playlist-row {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    min-height: 40px;
    padding: 0 8px;
    display: grid;
    grid-template-columns: 20px minmax(0,1fr) auto;
    align-items: center;
    gap: 6px;
    border-radius: 9px;
    color: var(--air-muted);
}
.air-dvr-playlist-row:hover { background: rgba(124,58,237,.08); }
.air-dvr-playlist-row:focus-visible { outline: 2px solid #8b5cf6; outline-offset: -2px; }
.air-dvr-playlist-row + .air-dvr-playlist-row { margin-top: 2px; }
.air-dvr-playlist-row.is-current { color: #7c3aed; background: rgba(124,58,237,.11); }
html.dark .air-dvr-playlist-row.is-current { color: #c4b5fd; }
.air-dvr-row-state { text-align: center; font-size: 9px; }
.air-dvr-row-file { overflow: hidden; font: 750 9px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; text-overflow: ellipsis; }
.air-dvr-row-time { font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.air-dvr-empty { padding: 26px 12px; color: var(--air-muted); font-size: 10px; font-weight: 750; text-align: center; }

body.car-mode .air-dvr-info { margin-top: 11px; gap: 7px; font-size: 10px; }
body.car-mode .air-dvr-mode,
body.car-mode .air-dvr-list-button,
body.car-mode .air-dvr-live-button { height: 27px; padding: 0 9px; border-radius: 9px; font-size: 9px; }
body.car-mode .air-dvr-current { max-width: min(380px, 34vw); font-size: 9px; }
body.car-mode .air-dvr-playlist-panel { top: calc(100% + 10px); bottom: auto; width: min(520px, calc(100vw - 30px)); }

@media (max-width: 768px) {
    body:not(.car-mode) .air-dvr-info { margin-top: 3px; gap: 3px; }
    body:not(.car-mode) .air-dvr-mode { height: 16px; padding: 0 5px; font-size: 6px; }
    body:not(.car-mode) .air-dvr-current { max-width: 105px; font-size: 6px; }
    body:not(.car-mode) .air-dvr-list-button,
    body:not(.car-mode) .air-dvr-live-button { width: 20px; height: 16px; padding: 0; font-size: 7px; }
    body:not(.car-mode) .air-dvr-list-button span,
    body:not(.car-mode) .air-dvr-live-button span { display: none !important; }
    body:not(.car-mode) .air-dvr-playlist-panel {
        position: fixed;
        left: 9px;
        right: 9px;
        bottom: calc(94px + env(safe-area-inset-bottom));
        width: auto;
    }
    body.car-mode .air-dvr-info { margin-top: 7px; gap: 5px; flex-wrap: wrap; }
    body.car-mode .air-dvr-mode,
    body.car-mode .air-dvr-list-button,
    body.car-mode .air-dvr-live-button { height: 22px; padding: 0 7px; font-size: 7px; }
    body.car-mode .air-dvr-current { max-width: 44vw; font-size: 7px; }
    body.car-mode .air-dvr-playlist-panel {
        position: fixed;
        left: 10px;
        right: 10px;
        top: calc(var(--car-header) + 112px);
        width: auto;
        max-height: min(250px, 38dvh);
    }
    .air-dvr-playlist-items { max-height: min(200px, 30dvh); }
}

/* V0908.0002 — saved-audio navigation and user-marked advertisement chapters */
.air-dvr-nav-button {
    min-height: 23px; padding: 0 7px; flex: 0 0 auto; border: 1px solid var(--air-border);
    border-radius: 7px; background: rgba(124,58,237,.08); color: var(--air-text);
    font-size: 9px; font-weight: 800; cursor: pointer;
}
.air-dvr-nav-button:disabled { opacity: .42; cursor: not-allowed; }
.air-dvr-chapter-panel {
    position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 125;
    width: min(440px, calc(100vw - 28px)); max-height: calc(100dvh - 130px);
    overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--air-border-strong);
    border-radius: 15px; background: rgba(255,255,255,.98); color: var(--air-text);
    box-shadow: 0 20px 50px rgba(15,23,42,.20); text-align: left; line-height: 1.5;
}
.air-dvr-chapter-panel.hidden { display: none !important; }
html.dark .air-dvr-chapter-panel { background: rgba(11,16,24,.98); }
.air-dvr-chapter-body { padding: 12px 14px; }
.air-dvr-chapter-clock { margin: 0 0 9px; font-size: 12px; font-weight: 800; }
.air-dvr-seek-buttons, .air-dvr-ad-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.air-dvr-chapter-panel .air-dvr-chapter-body button {
    min-height: 36px; padding: 6px 10px; border: 1px solid var(--air-border-strong);
    border-radius: 9px; font-size: 12px; font-weight: 750; color: var(--air-text);
    background: rgba(148,163,184,.08); cursor: pointer;
}
.air-dvr-chapter-panel .air-dvr-chapter-body button:disabled { opacity: .4; cursor: not-allowed; }
.air-dvr-chapter-panel button:not(:disabled):hover { background: rgba(124,58,237,.14); }
.air-dvr-chapter-panel button:focus-visible, .air-dvr-nav-button:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }
.air-dvr-seek-buttons button { flex: 1; }
.air-dvr-chapter-note { margin: 9px 0; color: var(--air-muted); font-size: 11px; line-height: 1.6; }
.air-dvr-ad-skip { width: 100%; background: rgba(124,58,237,.13) !important; }
.air-dvr-ad-auto { display: flex; align-items: center; gap: 7px; min-height: 38px; margin: 5px 0; font-size: 12px; font-weight: 700; cursor: pointer; }
.air-dvr-ad-auto input { width: 17px; height: 17px; flex: 0 0 auto; }
.air-dvr-chapter-items { max-height: 156px; overflow-y: auto; overscroll-behavior: contain; }
.air-dvr-chapter-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid var(--air-border); }
.air-dvr-chapter-row > span { flex: 1; min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
.air-dvr-chapter-panel .air-dvr-chapter-row button { flex: 0 0 auto; padding: 4px 8px; font-size: 10px; }
.air-dvr-chapter-empty { margin: 8px 0; font-size: 11px; color: var(--air-muted); }
.air-dvr-navigation-message { margin: 8px 0 0; font-size: 12px; font-weight: 750; line-height: 1.6; }
.air-dvr-navigation-message:empty { display: none; }
body.car-mode .air-dvr-nav-button { min-height: 30px; padding: 0 9px; font-size: 10px; }
body.car-mode .air-dvr-chapter-panel {
    position: fixed; left: 16px; top: 80px; bottom: auto; max-height: calc(100dvh - 100px);
    width: min(480px, calc(100vw - 32px));
}
body.car-mode .air-dvr-chapter-panel .air-dvr-chapter-body button { min-height: 44px; }
@media (max-width: 768px) {
    body:not(.car-mode) .air-dvr-nav-button { min-height: 20px; padding: 0 5px; font-size: 8px; }
    body:not(.car-mode) .air-dvr-current { max-width: 75px; }
    body:not(.car-mode) .air-dvr-chapter-panel {
        position: fixed; left: 9px; right: 9px; bottom: calc(94px + env(safe-area-inset-bottom));
        width: auto; max-height: calc(100dvh - 130px);
    }
    body.car-mode .air-dvr-chapter-panel { left: 10px; right: 10px; top: 70px; width: auto; max-height: calc(100dvh - 90px); }
    .air-dvr-chapter-panel .air-dvr-chapter-body button { min-height: 40px; }
}

/* V0908.0005: body-level DVR modal; never nested in the car player stacking context. */
#dvr-overlay.air-dvr-overlay {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 100%; height: 100%; height: 100dvh;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: rgba(15, 23, 42, .42); isolation: isolate;
}
#dvr-overlay.hidden { display: none !important; }
body.dvr-overlay-open { overflow: hidden !important; }
#dvr-overlay > #dvr-chapter-panel,
#dvr-overlay > #dvr-playlist-panel {
    position: relative !important; inset: auto !important; transform: none !important;
    margin: 0 !important; width: 100% !important; max-width: 540px !important;
    min-width: 0 !important; max-height: 100% !important; box-sizing: border-box;
    display: flex; flex-direction: column; overflow: hidden !important;
    flex: 0 1 540px; z-index: auto !important;
}
#dvr-overlay > .hidden { display: none !important; }
#dvr-overlay .air-dvr-playlist-head { flex: 0 0 auto; padding: 8px 12px; min-height: 60px; }
#dvr-overlay .air-dvr-playlist-head strong { font-size: 15px; }
#dvr-overlay .air-dvr-playlist-head span { font-size: 11px; }
#dvr-overlay .air-dvr-playlist-head button { width: 44px; height: 44px; flex: 0 0 44px; font-size: 16px; }
#dvr-overlay .air-dvr-chapter-body { overflow-y: auto; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#dvr-overlay .air-dvr-chapter-body button { min-height: 44px; }
#dvr-overlay .air-dvr-playlist-items { min-height: 0; max-height: min(65vh, 560px); max-height: min(65dvh, 560px); overflow-y: auto; }
#dvr-overlay .air-dvr-chapter-items { max-height: none; overflow: visible; }
#dvr-overlay .air-dvr-playlist-hint { flex: 0 0 auto; }
#dvr-overlay .air-dvr-playlist-row { min-height: 44px; }

/* V0908.0006 — reservations: independent body-level dialog, including car mode. */
.radio-schedule-launch { white-space: nowrap; width: auto !important; padding: 0 11px !important; font-size: 12px; font-weight: 800; }
.radio-schedule-launch.is-recording { color: #be123c; background: #fff1f2; border-color: #fda4af; }
html.dark .radio-schedule-launch.is-recording { color: #fda4af; background: #33151e; }
body.radio-schedule-open { overflow: hidden !important; }
#radio-schedule-overlay {
    position: fixed; inset: 0; z-index: 2147483100; isolation: isolate;
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    width: 100%; height: 100%; height: 100dvh;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: rgba(15,23,42,.5); color: var(--air-text, #172033); text-align: left;
    font-size: 14px; line-height: 1.5;
}
#radio-schedule-overlay[hidden], #radio-schedule-overlay [hidden] { display: none !important; }
#radio-schedule-overlay .rs-dialog {
    position: relative; inset: auto; transform: none; display: flex; flex-direction: column;
    width: min(100%, 680px); max-width: 680px; max-height: 100%; min-width: 0; min-height: 0;
    overflow: hidden; background: #fff; border: 1px solid var(--air-border-strong, #cbd5e1);
    border-radius: 18px; box-shadow: 0 20px 70px rgba(0,0,0,.3);
}
html.dark #radio-schedule-overlay .rs-dialog { background: #101722; }
#radio-schedule-overlay .rs-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; flex:0 0 auto; }
#radio-schedule-overlay .rs-head h2 { font-size: 18px; font-weight: 850; margin: 0; }
#radio-schedule-overlay .rs-head p { font-size:12px; color:var(--air-muted); margin: 2px 0 0; }
#radio-schedule-overlay .rs-head button { flex: 0 0 auto; }
#radio-schedule-overlay .rs-tabs { display:flex; gap:8px; padding:0 18px 10px; border-bottom:1px solid var(--air-border); flex:0 0 auto; }
#radio-schedule-overlay .rs-tabs button { flex:1; }
#radio-schedule-overlay .rs-tabs [aria-selected="true"] { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
html.dark #radio-schedule-overlay .rs-tabs [aria-selected="true"] { background:#352451; color:#e9d5ff; }
#radio-schedule-overlay .rs-scroll { overflow-y:auto; overflow-x:hidden; min-height:0; padding:14px 18px 20px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
#radio-schedule-overlay .rs-active { padding:12px; background:rgba(124,58,237,.07); border:1px solid var(--air-border); border-radius:12px; }
#radio-schedule-overlay .rs-active p { white-space:pre-line; margin:0; font-weight:700; overflow-wrap:anywhere; }
#radio-schedule-overlay .rs-active button { margin-top:8px; }
#radio-schedule-overlay .rs-card { padding:14px; margin:12px 0; border:1px solid var(--air-border-strong, #cbd5e1); border-radius:12px; overflow-wrap:anywhere; }
#radio-schedule-overlay h3 { font-size:16px; font-weight:800; margin:0 0 10px; }
#radio-schedule-overlay .rs-note { font-size:12px; line-height:1.65; color:var(--air-muted, #64748b); margin:6px 0; }
#radio-schedule-overlay .rs-message { font-size:13px; font-weight:750; margin:10px 0; overflow-wrap:anywhere; }
#radio-schedule-overlay .rs-message:empty { display:none; }
#radio-schedule-overlay .is-error { color:#c2410c; }
html.dark #radio-schedule-overlay .is-error { color:#fdba74; }
#radio-schedule-overlay label { display:block; min-width:0; font-size:13px; font-weight:700; margin:9px 0; }
#radio-schedule-overlay input:not([type="checkbox"]), #radio-schedule-overlay select {
    display:block; box-sizing:border-box; width:100%; min-width:0; max-width:100%; min-height:44px; margin-top:5px; padding:8px 10px;
    border:1px solid var(--air-border-strong, #cbd5e1); border-radius:9px; background:#fff; color:inherit; font:inherit; font-size:16px;
}
html.dark #radio-schedule-overlay input:not([type="checkbox"]), html.dark #radio-schedule-overlay select { background:#172131; color-scheme:dark; }
#radio-schedule-overlay .rs-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
#radio-schedule-overlay .rs-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
#radio-schedule-overlay button {
    display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:8px 12px; border:1px solid var(--air-border-strong, #cbd5e1);
    border-radius:9px; background:rgba(148,163,184,.07); color:inherit; font:inherit; font-size:13px; font-weight:750; cursor:pointer;
}
#radio-schedule-overlay button:disabled { opacity:.45; cursor:not-allowed; }
#radio-schedule-overlay .rs-primary { background:#6d28d9; border-color:#6d28d9; color:white; }
#radio-schedule-overlay :is(button,input,select,summary):focus-visible { outline:2px solid #8b5cf6; outline-offset:2px; }
#radio-schedule-overlay summary { cursor:pointer; min-height:36px; font-weight:750; }
#radio-schedule-overlay .rs-weekdays { display:flex; flex-wrap:wrap; gap:6px; }
#radio-schedule-overlay .rs-weekdays label { display:flex; align-items:center; gap:6px; margin:0; min-height:44px; padding:5px 8px; border:1px solid var(--air-border); border-radius:8px; }
#radio-schedule-overlay input[type="checkbox"] { width:18px; height:18px; }
#radio-schedule-overlay audio { display:block; width:100%; min-width:0; margin:12px 0; }
@media (max-width:420px) {
    #radio-schedule-overlay { padding:8px; }
    #radio-schedule-overlay .rs-head { padding:10px 12px; }
    #radio-schedule-overlay .rs-scroll { padding:12px; }
    #radio-schedule-overlay .rs-tabs { padding:0 12px 8px; }
    #radio-schedule-overlay .rs-card { padding:11px; }
    #radio-schedule-overlay .rs-grid { gap:8px; }
    .radio-schedule-launch { padding:0 7px !important; font-size:10px; }
}
@media (max-height:450px) {
    #radio-schedule-overlay { padding-top:6px; padding-bottom:6px; }
    #radio-schedule-overlay .rs-head { padding-top:6px; padding-bottom:6px; }
    #radio-schedule-overlay .rs-head p { display:none; }
    #radio-schedule-overlay .rs-tabs { padding-bottom:6px; }
}
/* Keep the new launcher reachable in legacy car/phone header layouts. */
body #radio-schedule-launch {
    width:auto !important; min-width:70px !important; flex:0 0 auto;
    padding:0 9px !important; font-size:12px !important;
}
@media (max-width:768px) {
    body.has-radio-schedule #main-header { grid-template-columns:minmax(0,1fr) auto !important; gap:6px !important; }
    body.has-radio-schedule #header-center-cluster { display:none !important; }
    body.has-radio-schedule .air-header-actions { gap:4px !important; padding-left:0 !important; }
    body.has-radio-schedule .air-brand { min-width:0; }
}
@media (max-width:480px) {
    body.has-radio-schedule .air-brand-copy { display:none !important; }
    body.has-radio-schedule .air-brand { gap:0 !important; }
}

/* V0909.0003 — direct 30 / 60 / 90 / 120-second jumps, with a 10-second undo. */
.air-dvr-info { flex-wrap: wrap; gap: 7px; }
.air-dvr-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
    min-width: 0; max-width: 100%; flex: 1 1 100%;
}
.air-dvr-meta .air-dvr-current { flex: 0 1 auto; }
.air-dvr-quick-controls {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
    width: 100%; max-width: 430px; min-width: 0; flex: 1 1 100%;
}
body .air-dvr-quick-controls > .air-dvr-nav-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 0; min-height: 38px; padding: 0 7px; border-radius: 9px;
    font-size: 12px; line-height: 1.2; font-weight: 800; white-space: nowrap;
    font-variant-numeric: tabular-nums; touch-action: manipulation;
}
.air-dvr-quick-controls > .air-dvr-rewind { background: rgba(148,163,184,.09); color: var(--air-muted); }
.air-dvr-quick-controls > .air-dvr-skip-long { background: rgba(124,58,237,.16); border-color: rgba(124,58,237,.28); color: #6d28d9; }
html.dark .air-dvr-quick-controls > .air-dvr-skip-long { color: #ddd6fe; }
.air-dvr-quick-controls > button:not(:disabled):hover { background: rgba(124,58,237,.22); }
.air-dvr-quick-controls > button:not(:disabled):active { transform: translateY(1px); }
.air-dvr-quick-controls > #dvr-chapter-toggle { background: transparent; }
.air-dvr-quick-controls > #dvr-chapter-toggle[aria-expanded="true"] { background: rgba(124,58,237,.18); }
#dvr-overlay .air-dvr-seek-buttons { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
#dvr-overlay .air-dvr-seek-buttons > button { min-width: 0; padding: 6px 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.air-dvr-quick-feedback {
    position: fixed; top: max(76px, calc(env(safe-area-inset-top) + 14px)); left: 50%; transform: translateX(-50%);
    z-index: 2147482990; box-sizing: border-box; width: max-content; max-width: min(560px,calc(100vw - 28px));
    padding: 12px 16px; border: 1px solid var(--air-border-strong); border-radius: 12px;
    background: #fff; color: var(--air-text); box-shadow: 0 8px 28px rgba(15,23,42,.16);
    font-size: 13px; font-weight: 750; line-height: 1.6; overflow-wrap: anywhere; pointer-events: none;
}
.air-dvr-quick-feedback:empty { display: none; }
html.dark .air-dvr-quick-feedback { background: #141b28; }
/* The compact footer gets its own full-width shortcut row, not tiny buttons beside the title. */
body:not(.car-mode) #sticky-player.has-dvr-quick-controls #player-container {
    position: relative; height: auto !important; min-height: 144px !important; padding-bottom: 60px !important;
}
body:not(.car-mode) #sticky-player.has-dvr-quick-controls :is(.air-now-copy,.air-dvr-info) { position: static; }
body:not(.car-mode) #sticky-player .air-dvr-quick-controls {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
    width: calc(100% - 28px); max-width: 430px;
}
body:not(.car-mode) #sticky-player.has-dvr-quick-controls .air-now-copy { flex: 1; }
body:not(.car-mode):has(#sticky-player.has-dvr-quick-controls) .air-main { padding-bottom: 192px !important; }
@media (max-width:768px) {
    body:not(.car-mode) #sticky-player.has-dvr-quick-controls #player-container {
        min-height: 130px !important; padding-bottom: 57px !important;
    }
    body:not(.car-mode) #sticky-player .air-dvr-quick-controls { width: calc(100% - 18px); bottom: 9px; gap: 4px; }
    body:not(.car-mode) .air-dvr-quick-controls > .air-dvr-nav-button { min-height: 40px; padding: 0 2px; font-size: 11px; }
    body:not(.car-mode) .air-dvr-meta { gap: 4px; }
    body:not(.car-mode) .air-dvr-meta .air-dvr-current { display: none; }
    body:not(.car-mode) .air-dvr-meta :is(.air-dvr-list-button,.air-dvr-live-button) { width: 24px; height: 22px; font-size: 9px; }
    body.car-mode .air-dvr-quick-controls { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
    body.car-mode .air-dvr-quick-controls > .air-dvr-nav-button { min-height: 34px; padding: 0 4px; font-size: 11px; }
    body.car-mode .air-dvr-meta { gap: 4px; }
    body.car-mode .air-dvr-meta .air-dvr-current { flex-basis: 100%; order: 5; }
}
@media (max-width:360px) {
    #dvr-overlay .air-dvr-seek-buttons { grid-template-columns: repeat(3,minmax(0,1fr)); }
    #dvr-overlay .air-dvr-seek-buttons > button { font-size: 12px; }
}
@media (max-width:768px) {
    /* Override the legacy 200px transport minimum so the next button stays on screen. */
    body:not(.car-mode) #sticky-player.has-dvr-quick-controls #player-center { min-width: 0 !important; width: auto !important; }
    body:not(.car-mode) .air-dvr-quick-controls > .air-dvr-nav-button { min-height: 44px; }
}
@media (max-width:768px) {
    body:not(.car-mode) #sticky-player.has-dvr-quick-controls #player-right { display: none !important; }
}