/* ==========================================================================
   YukiMusic LIGHT THEME (2026-10-18) — loaded last, active on
   html[data-theme="light"] (set by the inline boot script + Theme in app.js).
   Not an invert: cool paper background, white cards with soft shadows,
   frosted milk glass, deepened team accent (Drivers.inkOf). The home hero
   liquid goes pastel (f1-flow.js uniform L); the full player and garage stay
   dark on purpose — they are artwork/car showcases.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-main: #f3f4f7;
  --bg-surface: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --bg-glass-card: rgba(16, 22, 34, 0.04);
  --border-subtle: rgba(16, 22, 34, 0.08);
  --border-active: rgba(16, 22, 34, 0.18);
  --text-primary: #0e1117;
  --text-secondary: rgba(14, 17, 23, 0.64);
  --text-muted: rgba(14, 17, 23, 0.42);

  --rim: inset 0 0 0 0.5px rgba(16, 22, 34, 0.10);
  --rim-strong: inset 0 0 0 0.5px rgba(16, 22, 34, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --surface-1: #ffffff;
  --surface-2: rgba(16, 22, 34, 0.055);
  --card-shadow: 0 1px 2px rgba(16, 22, 34, 0.05), 0 4px 14px rgba(16, 22, 34, 0.05);

  --lg-fill: rgba(255, 255, 255, 0.62);
  --lg-fill-top: rgba(255, 255, 255, 0.78);
  --lg-glow:
    inset 0 0 0 0.5px rgba(16, 22, 34, 0.10),
    inset 0.5px 0.5px 0 0 rgba(255, 255, 255, 0.95),
    inset -0.5px -0.5px 0 0 rgba(255, 255, 255, 0.7);
  --lg-drop: 0 6px 20px rgba(16, 22, 34, 0.10), 0 1px 3px rgba(16, 22, 34, 0.08);
}

[data-theme="light"] body {
  background: radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--accent) 9%, #f3f4f7), #f3f4f7 70%) fixed, #f3f4f7;
  color: var(--text-primary);
}
[data-theme="light"] .app-viewport { box-shadow: 0 30px 80px rgba(16, 22, 34, 0.18), 0 0 0 1px rgba(16, 22, 34, 0.08); }
[data-theme="light"] .ambient-backdrop { opacity: 0.3; }

/* Theme segmented control (both themes) */
.theme-seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); box-shadow: var(--rim); flex-shrink: 0; }
.theme-seg button { width: 36px; height: 30px; border: none; border-radius: 9px; background: transparent; color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, color .2s ease; }
.theme-seg button.active { background: var(--accent); color: #0b0d12; }
[data-theme="light"] .theme-seg button.active { color: #fff; }

/* --------------------------------------------------------------------------
   DARK ISLANDS — artwork / car showcases keep the night look in light mode
   -------------------------------------------------------------------------- */
[data-theme="light"] :is(.full-player-modal, .garage, #aidj, .driver-card, .release-card, .stats-card-sheet) {
  color-scheme: dark;
  --accent: var(--accent-neon);
  --bg-main: #060709;
  --bg-surface: #111318;
  --bg-glass: rgba(16, 18, 24, 0.88);
  --bg-glass-card: rgba(255, 255, 255, 0.05);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(255, 255, 255, 0.22);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.68);
  --text-muted: rgba(255, 255, 255, 0.38);
  --rim: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  --rim-strong: inset 0 0 0 0.5px rgba(255, 255, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --surface-1: rgba(255, 255, 255, 0.055);
  --surface-2: rgba(255, 255, 255, 0.09);
  --card-shadow: none;
  --lg-fill: rgba(255, 255, 255, 0.025);
  --lg-fill-top: rgba(255, 255, 255, 0.05);
  --lg-glow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.05),
    inset 0.5px 0.5px 0 0 rgba(255, 255, 255, 0.28),
    inset -0.5px -0.5px 0 0 rgba(255, 255, 255, 0.28);
  --lg-drop: 0 8px 24px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
  color: var(--text-primary);
}
[data-theme="light"] .driver-card { box-shadow: var(--rim), 0 10px 24px -12px rgba(16, 22, 34, 0.45); }
[data-theme="light"] .release-card { box-shadow: var(--rim), 0 10px 24px -12px rgba(16, 22, 34, 0.4); }

/* --------------------------------------------------------------------------
   CARDS — white on paper, a soft lift instead of a glowing rim
   -------------------------------------------------------------------------- */
[data-theme="light"] :is(.set-group, .lib-tile, .settings-link, .notif-item, .stat-card, .top-result, .more-tracks-btn) {
  background: #fff;
  box-shadow: var(--rim), var(--card-shadow);
}
[data-theme="light"] .lib-tile.active { box-shadow: inset 0 0 0 1px rgba(16, 22, 34, 0.18), var(--card-shadow); }
[data-theme="light"] :is(.top-result:hover, .top-result:active) { background: #fafbfc; }
[data-theme="light"] .top-result img { box-shadow: 0 8px 22px -6px rgba(16, 22, 34, 0.35); }
[data-theme="light"] .set-row + .set-row { box-shadow: inset 0 0.5px 0 rgba(16, 22, 34, 0.08); }
[data-theme="light"] .set-row:active { background: rgba(16, 22, 34, 0.04); }
[data-theme="light"] .switch { background: rgba(16, 22, 34, 0.14); }
[data-theme="light"] .switch:checked { background: var(--accent); }
[data-theme="light"] .switch::after { box-shadow: 0 1px 4px rgba(16, 22, 34, 0.3); }
[data-theme="light"] .chart-hero { background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, #fff), #fff 72%); box-shadow: var(--rim), var(--card-shadow); }
[data-theme="light"] .chart-hero-covers img { box-shadow: 0 10px 22px -8px rgba(16, 22, 34, 0.45); }
[data-theme="light"] .chart-move.up { color: #059669; }
[data-theme="light"] .chart-move.down { color: #e11d48; }
[data-theme="light"] .chart-more:hover { color: var(--text-primary); }
[data-theme="light"] :is(.skeleton-thumb, .skeleton-line) { background: linear-gradient(90deg, rgba(16,22,34,0.05) 25%, rgba(16,22,34,0.11) 50%, rgba(16,22,34,0.05) 75%); background-size: 200% 100%; }
[data-theme="light"] :is(.grid-cover-card, .trend-cover-wrap) { box-shadow: 0 8px 20px -6px rgba(16, 22, 34, 0.3); }
[data-theme="light"] .album-cover-wrap #albumCoverImg { box-shadow: 0 24px 44px -18px rgba(16, 22, 34, 0.55), var(--rim); }
[data-theme="light"] .profile-avatar-lg { box-shadow: 0 0 0 3px #fff, 0 16px 34px -12px rgba(16, 22, 34, 0.45); }
[data-theme="light"] .profile-cover-blur { opacity: 0.3; }
[data-theme="light"] .profile-handle { color: var(--text-muted); }
[data-theme="light"] .vinyl-discogs-btn { background: #fff; border-color: transparent; box-shadow: var(--rim), var(--card-shadow); }
[data-theme="light"] .vinyl-discogs-btn:hover { background: color-mix(in srgb, var(--accent) 7%, #fff); }
[data-theme="light"] .vinyl-btn-title { color: var(--text-primary); }
[data-theme="light"] .vinyl-btn-action { background: var(--surface-2); }
[data-theme="light"] .artist-drop-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, #fff), #fff 80%); box-shadow: var(--rim), var(--card-shadow); }
[data-theme="light"] :is(.artist-drop-title, .artist-drop-timer .timer-unit span) { color: var(--text-primary); }
[data-theme="light"] .artist-drop-timer { background: var(--surface-2); }

/* Inverse "primary" pills: ink on paper instead of white on white */
[data-theme="light"] :is(.pill-btn.primary, .update-btn.primary, .avatar-picker-badge) { background: #0e1117; color: #fff; }
[data-theme="light"] #searchView .search-tab-pill.active { background: #0e1117 !important; color: #fff !important; }
[data-theme="light"] .app-viewport .lg-glass.active { --lg-fill: rgba(14, 17, 23, 0.9); --lg-fill-top: rgba(14, 17, 23, 0.86); color: #fff; }
[data-theme="light"] :is(.play-all-btn, .artist-drop-btn, .top-result-play, .chart-move.new, .lib-tile-ico.offline, .side-ico.offline, .artist-eyebrow svg) { color: #fff; }
[data-theme="light"] .auth-btn { color: #fff; }
[data-theme="light"] .auth-btn { background: var(--accent); }

/* --------------------------------------------------------------------------
   HOME HERO + DRAWER
   -------------------------------------------------------------------------- */
[data-theme="light"] .f1-hero-stage { background: radial-gradient(120% 80% at 50% 40%, color-mix(in srgb, var(--theme-main, #00F5D4) 22%, #f3f4f7), #f3f4f7 75%); }
[data-theme="light"] .f1-hero-stage .f1-car-img,
[data-theme="light"] .f1-hero-stage.playing .f1-car-img { filter: drop-shadow(0 16px 22px rgba(16, 22, 34, 0.35)); }
[data-theme="light"] .f1-track-info-tag { background: rgba(255, 255, 255, 0.78); box-shadow: var(--rim), 0 6px 18px rgba(16, 22, 34, 0.12); }
[data-theme="light"] .swipe-up-hint { color: rgba(14, 17, 23, 0.5); }
[data-theme="light"] .f1-chevron-btn { background: rgba(255, 255, 255, 0.55); color: var(--text-secondary); box-shadow: var(--rim); }
[data-theme="light"] :is(.f1-chevron-btn:hover, .f1-chevron-btn:active) { background: rgba(255, 255, 255, 0.85); }
[data-theme="light"] .pit-board-drawer { background: rgba(246, 247, 250, 0.96); box-shadow: 0 -12px 36px rgba(16, 22, 34, 0.14); }
[data-theme="light"] .app-viewport .pit-board-drawer.lg-glass { --lg-fill: rgba(246, 247, 250, 0.9); --lg-fill-top: rgba(250, 251, 253, 0.94); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 1), inset 0 1px 0 rgba(16, 22, 34, 0.06), 0 -12px 36px rgba(16, 22, 34, 0.14); }
[data-theme="light"] .drawer-handle-pill { background: rgba(14, 17, 23, 0.22); }
[data-theme="light"] .offline-status-banner { background: var(--surface-2); }

/* --------------------------------------------------------------------------
   BARS — header buttons, back buttons, mini player, bottom nav
   -------------------------------------------------------------------------- */
[data-theme="light"] .icon-btn:hover { background: rgba(16, 22, 34, 0.06); }
[data-theme="light"] .back-fab { color: var(--text-primary); background: rgba(255, 255, 255, 0.7); }
[data-theme="light"] .back-fab:hover { background: rgba(255, 255, 255, 0.9); }
[data-theme="light"] .floating-back-btn { background: rgba(255, 255, 255, 0.75); border-color: rgba(16, 22, 34, 0.08); box-shadow: 0 4px 14px rgba(16, 22, 34, 0.12); color: var(--text-primary); }
[data-theme="light"] .app-viewport :is(.mini-player, .mini-player.lg-glass, .main-wrapper #miniPlayer.mini-player) {
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: inset 0 0 0 0.5px rgba(16, 22, 34, 0.08), 0 10px 28px -8px rgba(16, 22, 34, 0.22) !important;
}
[data-theme="light"] .mini-player .mini-btn { color: var(--text-secondary); }
[data-theme="light"] .mini-player .mini-btn:hover { color: var(--text-primary); background: rgba(16, 22, 34, 0.06); }
[data-theme="light"] .mini-player .mini-btn.liked { color: #e11d48; }
[data-theme="light"] .mini-player #miniPlayBtn { color: var(--text-primary); }
@media (min-width: 768px) {
  [data-theme="light"] .mini-player #miniPlayBtn,
  [data-theme="light"] .mini-player #miniPlayBtn:hover { background: #0e1117; color: #fff; }
}
[data-theme="light"] .mini-player-progress-bar { background: rgba(16, 22, 34, 0.08); }
[data-theme="light"] .mini-player.is-buffering .mini-player-progress-bar::after { background: linear-gradient(90deg, transparent, rgba(14, 17, 23, 0.4), transparent); }
[data-theme="light"] .app-viewport .bottom-nav-container .nav-pill.lg-glass { --lg-fill: rgba(255, 255, 255, 0.72); --lg-fill-top: rgba(255, 255, 255, 0.82); }
[data-theme="light"] .nav-pill { box-shadow: var(--lg-glow), 0 12px 30px -8px rgba(16, 22, 34, 0.22); }
[data-theme="light"] .bottom-nav-container .nav-item { color: rgba(14, 17, 23, 0.48); }
[data-theme="light"] .bottom-nav-container .nav-item.active { color: var(--text-primary); }
[data-theme="light"] .app-viewport .nav-lens { --lg-fill: rgba(16, 22, 34, 0.06); --lg-fill-top: rgba(16, 22, 34, 0.08); }
[data-theme="light"] .lg-refract .app-viewport .nav-lens.lifted { --lg-fill: rgba(255, 255, 255, 0.2); --lg-fill-top: rgba(255, 255, 255, 0.35); }
[data-theme="light"] .sidebar-nav .nav-item.active { background: rgba(16, 22, 34, 0.06); color: var(--text-primary); border-color: transparent; }
[data-theme="light"] .notif-dot { box-shadow: 0 0 0 2px var(--bg-main); }

/* --------------------------------------------------------------------------
   SEARCH, ARTIST, TRACK ROWS
   -------------------------------------------------------------------------- */
[data-theme="light"] .search-input:focus,
[data-theme="light"] #searchView .search-input:focus { background: #fff; }
[data-theme="light"] #searchView .search-input::placeholder { color: var(--text-muted); }
[data-theme="light"] .search-input-icon { color: var(--text-muted); }
[data-theme="light"] .search-clear-btn { background: rgba(16, 22, 34, 0.1); color: var(--text-primary); }
[data-theme="light"] .search-clear-btn:hover { background: rgba(16, 22, 34, 0.18); }
[data-theme="light"] .like-btn { color: var(--text-muted); }
[data-theme="light"] .more-tracks-btn:hover { color: var(--text-primary); }
[data-theme="light"] .hero-banner-overlay { background: linear-gradient(180deg, rgba(243, 244, 247, 0) 0%, rgba(243, 244, 247, 0) 40%, rgba(243, 244, 247, 0.72) 72%, var(--bg-main) 100%); }
[data-theme="light"] .artist-eyebrow { color: var(--text-secondary); }
[data-theme="light"] .download-progress-ring .ring-bg { stroke: rgba(16, 22, 34, 0.15); }
[data-theme="light"] .download-progress-ring .ring-fill { stroke: var(--text-primary); }
[data-theme="light"] .offline-icon-circle { border-color: var(--text-primary); color: var(--text-primary); box-shadow: none; }
[data-theme="light"] .friend-prog { background: rgba(16, 22, 34, 0.15); }
[data-theme="light"] .friend-prog i { background: var(--text-primary); }

/* --------------------------------------------------------------------------
   SHEETS + MODALS
   -------------------------------------------------------------------------- */
[data-theme="light"] .auth-modal { background: rgba(243, 244, 247, 0.97); }
[data-theme="light"] .auth-divider::before, [data-theme="light"] .auth-divider::after { background: rgba(16, 22, 34, 0.12); }
[data-theme="light"] .auth-input { background: #fff; box-shadow: var(--rim); }
[data-theme="light"] .context-sheet-backdrop { background: rgba(16, 22, 34, 0.32); }
[data-theme="light"] .context-sheet { background: #fff; box-shadow: 0 -10px 40px rgba(16, 22, 34, 0.16); }
[data-theme="light"] .context-grip { background: rgba(16, 22, 34, 0.18); }
[data-theme="light"] .context-btn.primary { background: #f3f4f7; }
[data-theme="light"] :is(.context-btn.primary:hover, .context-btn.primary:active) { background: #eceef2; }
[data-theme="light"] :is(.context-btn.secondary:hover, .context-btn.secondary:active) { background: rgba(16, 22, 34, 0.04); }
[data-theme="light"] :is(.context-btn.danger, .context-btn.danger svg) { color: #e5484d; }
[data-theme="light"] .update-backdrop.open { background: rgba(16, 22, 34, 0.32); }
[data-theme="light"] .update-sheet { background: #fff; box-shadow: 0 -10px 40px rgba(16, 22, 34, 0.16); }
[data-theme="light"] .update-logo { box-shadow: 0 10px 24px -10px rgba(16, 22, 34, 0.4), var(--rim); }
[data-theme="light"] .toast-notification { box-shadow: 0 10px 30px rgba(16, 22, 34, 0.2); }

/* Playlists */
[data-theme="light"] .pl-cover { background: rgba(16, 22, 34, 0.06); }
[data-theme="light"] .pl-row-tools button { background: rgba(16, 22, 34, 0.06); }
[data-theme="light"] .pl-modal-back { background: rgba(16, 22, 34, 0.32); }
[data-theme="light"] .pl-modal { background: rgba(255, 255, 255, 0.97); color: var(--text-primary); box-shadow: 0 20px 50px rgba(16, 22, 34, 0.2); }
[data-theme="light"] .pl-input { background: #f3f4f7; color: var(--text-primary); }
[data-theme="light"] .pl-seg button { background: rgba(16, 22, 34, 0.05); }
[data-theme="light"] .pl-seg button.on { border-color: rgba(16, 22, 34, 0.5); background: rgba(16, 22, 34, 0.08); }
[data-theme="light"] .pill-btn.danger { color: #e5484d; }
[data-theme="light"] .pl-row { color: var(--text-primary); }
[data-theme="light"] .pl-row:active { background: rgba(16, 22, 34, 0.05); }
[data-theme="light"] .pl-row-ico { background: rgba(16, 22, 34, 0.06); }
[data-theme="light"] .pl-hero-cover .pl-cover { box-shadow: 0 24px 44px -18px rgba(16, 22, 34, 0.5), var(--rim); }
[data-theme="light"] .pl-grow-empty { color: var(--text-secondary); }
[data-theme="light"] .pl-grow-btn { color: var(--text-primary); background: #fff; box-shadow: var(--rim), var(--card-shadow); }
[data-theme="light"] .pl-grow-btn:active { background: #f6f7f9; }
[data-theme="light"] .pl-grow-btn.ai { background: linear-gradient(135deg, rgba(124, 92, 255, 0.16), rgba(255, 95, 162, 0.12)); box-shadow: inset 0 0 0 0.5px rgba(124, 92, 255, 0.3); }
[data-theme="light"] .pl-grow-btn.ai svg { color: #b03a86; }
[data-theme="light"] .pl-x { background: rgba(16, 22, 34, 0.07); color: var(--text-primary); }
[data-theme="light"] .pl-search { background: #f3f4f7; color: var(--text-muted); }
[data-theme="light"] .pl-search input { color: var(--text-primary); }
[data-theme="light"] .pl-tabs button { color: var(--text-secondary); background: rgba(16, 22, 34, 0.05); }
[data-theme="light"] .pl-tabs button.on { background: #0e1117; color: #fff; }
[data-theme="light"] .pl-pick:active { background: rgba(16, 22, 34, 0.05); }
[data-theme="light"] .pl-pick img { background: rgba(16, 22, 34, 0.06); }
[data-theme="light"] .pl-pick-btn { color: var(--text-primary); box-shadow: inset 0 0 0 1.2px rgba(16, 22, 34, 0.3); }
[data-theme="light"] .pl-pick.on .pl-pick-btn { color: #fff; }
[data-theme="light"] .dj-chip { color: var(--text-primary); background: rgba(16, 22, 34, 0.05); box-shadow: inset 0 0 0 0.5px rgba(16, 22, 34, 0.15); }
[data-theme="light"] .dj-chip svg { color: #d6338a; }

/* Badges sitting on artwork stay dark glass */
[data-theme="light"] .app-viewport .trend-badge.lg-glass,
[data-theme="light"] .trend-badge { --lg-fill: rgba(0, 0, 0, 0.55); --lg-fill-top: rgba(0, 0, 0, 0.5); --lg-glow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.6); color: #fff; }

/* --------------------------------------------------------------------------
   DESKTOP (≥768): sidebar + player bar
   -------------------------------------------------------------------------- */
[data-theme="light"] .desktop-sidebar { background: #fbfbfc; box-shadow: inset -0.5px 0 0 rgba(16, 22, 34, 0.1); }
[data-theme="light"] .sidebar-nav .nav-item { color: var(--text-secondary); }
[data-theme="light"] .sidebar-nav .nav-item:hover { color: var(--text-primary); background: rgba(16, 22, 34, 0.04); }
[data-theme="light"] .sidebar-footer { box-shadow: inset 0 0.5px 0 rgba(16, 22, 34, 0.08); }
[data-theme="light"] .desk-search { background: #fff; box-shadow: var(--rim), var(--card-shadow); }
[data-theme="light"] .desk-search:hover { background: #fff; }
[data-theme="light"] .desk-search kbd { background: var(--surface-2); }
[data-theme="light"] .desk-progress { color: var(--text-muted); }
[data-theme="light"] .desk-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, rgba(14, 17, 23, 0.85) var(--progress), rgba(16, 22, 34, 0.14) var(--progress)); }
[data-theme="light"] .desk-range:hover::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--accent) var(--progress), rgba(16, 22, 34, 0.16) var(--progress)); }
[data-theme="light"] .desk-range::-webkit-slider-thumb { background: #0e1117; }
[data-theme="light"] .desk-range::-moz-range-track { background: rgba(16, 22, 34, 0.14); }
[data-theme="light"] .desk-range::-moz-range-progress { background: rgba(14, 17, 23, 0.85); }
[data-theme="light"] .desk-range::-moz-range-thumb { background: #0e1117; }