/* bundle-critical.css — base + animations + layout + components + mobile */
/* ========================================
   base.css - CSS Variables & Reset
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Global keyboard focus indicator — purple ring matching site theme */
:focus-visible {
    outline: 2px solid rgba(217, 70, 239, 0.8);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   Z-INDEX SCALE — ChordStar (single source of truth)
   Keep all z-index values here; never hardcode them elsewhere.

   Layer     Value    Usage
   ──────    ─────    ─────────────────────────────────────────
   content   1–11     Cards, sections, inner components
   sticky    50–100   Sticky elements, dropdown items
   overlay   500–502  Modals, backdrop layers
   nav       999      Lesson overlay (lsYouTube)
   ticker    1000     News ticker bar
   sidebar   1001     Desktop sidebar (above ticker)
   lesson    1002     Lesson player overlay
   modal     2000     Full-screen modals (onboarding, etc.)
   toast     8000     Practice toasts, social toasts
   intro     9000     Intro splash screen
   blocker   9500     CS portal blocker
   loading   9600     Loading screens
   search    9999     Global search dropdown (mobile)
   replay    999999   Replay moment overlay (highest)
   ═════════════════════════════════════════════════════════ */

:root {
    --z-content:  10;
    --z-sticky:   50;
    --z-overlay:  500;
    --z-nav:      999;
    --z-ticker:   1000;
    --z-sidebar:  1001;
    --z-lesson:   1002;
    --z-modal:    2000;
    --z-toast:    8000;
    --z-intro:    9000;
    --z-blocker:  9500;
    --z-loading:  9600;
    --z-search:   9999;
    --z-replay:   999999;
}

:root {
    --bg-dark: #0a0514;
    --sidebar-bg: #120820;
    --card-bg: #1a0f2e;
    --primary: #d946ef;
    --accent-red: #ef4444;
    --accent-purple: #a855f7;
    --accent-pink: #ec4899;
    --accent-orange: #f97316;
    --text: #f0e7ff;
    --text-dim: #c4b5fd;

    /* Dark mode defaults for new variables */
    --page-bg:           linear-gradient(135deg, #0a0514 0%, #1a0a2e 50%, #16001e 100%);
    --detail-bg:         linear-gradient(135deg, rgba(26,15,46,0.92), rgba(18,8,32,0.92));
    --card-bg-alpha:     rgba(26,15,46,0.7);
    --input-bg:          rgba(18,8,32,0.6);
    --output-bg:         rgba(15,8,30,0.95);
    --output-bg-light:   rgba(10,5,20,0.6);
    --modal-bg:          rgba(26,15,46,0.95);
    --overlay-bg:        rgba(0,0,0,0.52);
    --key-display-bg:    linear-gradient(135deg, rgba(10,5,20,0.9), rgba(26,15,46,0.7));

    /* Native browser controls (selects, scrollbars) render in dark mode */
    color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE — Same vibe as dark, just inverted palette
   Dark purple → Soft lavender/pink/white
   Glows, gradients, depth — all preserved
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --bg-dark:           #f5eeff;
    --sidebar-bg:        #f0e6ff;
    --card-bg:           #fdfaff;
    --color-text-secondary: rgba(76,29,149,0.65);
    --primary:           #b91fd6;
    --accent-red:        #d63838;
    --accent-purple:     #8b35d6;
    --accent-pink:       #d63880;
    --accent-orange:     #d97706;
    --text:              #1a0535;
    --text-dim:          #5b2d8c;

    /* Page-level full-screen overlays */
    --page-bg:           linear-gradient(135deg, #ede0ff 0%, #f5eeff 55%, #f0e6ff 100%);
    --detail-bg:         linear-gradient(135deg, rgba(237,224,255,0.92), rgba(253,250,255,0.92));

    /* Card / panel backgrounds */
    --card-bg-alpha:     rgba(237,224,255,0.55);
    --input-bg:          rgba(255,255,255,0.88);
    --output-bg:         rgba(255,255,255,0.88);
    --output-bg-light:   rgba(237,224,255,0.6);
    --modal-bg:          rgba(237,224,255,0.97);
    --overlay-bg:        rgba(185,31,214,0.08);

    /* Key display in toolkit */
    --key-display-bg:    linear-gradient(135deg, rgba(237,224,255,0.8), rgba(253,250,255,0.9));

    /* Native browser controls render in light mode */
    color-scheme: light;
}

/* Body — light lavender gradient mirrors dark's deep purple gradient */
[data-theme="light"] body {
    background: linear-gradient(135deg, #f0e6ff 0%, #f9efff 50%, #fff0f9 100%);
    color: var(--text);
}

/* Ambient glow — light pink/purple like dark mode's purple glow */
[data-theme="light"] body::before {
    background:
        radial-gradient(circle at 20% 50%, rgba(185,31,214,0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(214,56,56,0.10) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(139,53,214,0.08) 0%, transparent 50%);
}

/* Sidebar — light version of dark sidebar */
[data-theme="light"] .sidebar {
    background: linear-gradient(180deg, #ede0ff 0%, #e4d0ff 100%);
    border-right: 1px solid rgba(185,31,214,0.15);
}
[data-theme="light"] .nav-link { color: #3d1060; }
[data-theme="light"] .nav-link:hover {
    background: rgba(185,31,214,0.1);
    color: var(--primary);
}
[data-theme="light"] .nav-link.active {
    background: linear-gradient(135deg, rgba(185,31,214,0.2), rgba(139,53,214,0.13));
    color: var(--primary);
}
[data-theme="light"] .tagline { color: #8b35d6; }

/* Section title gradient */
[data-theme="light"] .section-title {
    background: linear-gradient(90deg, #b91fd6, #8b35d6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
[data-theme="light"] .section-subtitle { color: #5b2d8c; }

/* Cards */
[data-theme="light"] .release-card,
[data-theme="light"] .ls-card,
[data-theme="light"] .cm-card,
[data-theme="light"] .cm-user-card,
[data-theme="light"] .profile-card {
    background: linear-gradient(135deg, rgba(253,250,255,0.95), rgba(237,224,255,0.75));
    border: 1px solid rgba(185,31,214,0.14);
    box-shadow: 0 4px 20px rgba(139,53,214,0.08);
}
[data-theme="light"] .ls-card:hover,
[data-theme="light"] .release-card:hover {
    box-shadow: 0 8px 32px rgba(185,31,214,0.18);
    border-color: rgba(185,31,214,0.35);
}
[data-theme="light"] .ls-card-title { color: #1a0535; }
[data-theme="light"] .ls-card-artist { color: #5b2d8c; }

/* Video / release card body */
[data-theme="light"] .release-card-body,
[data-theme="light"] .video-card-body {
    background: linear-gradient(135deg, rgba(253,250,255,0.95), rgba(237,224,255,0.75));
    color: #1a0535;
}
[data-theme="light"] .video-card-title { color: #1a0535; }
[data-theme="light"] .video-card-artist {
    background: linear-gradient(90deg, #b91fd6, #d63838);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Playlist / Liked Songs empty states ─────────────────────
   Dark mode: subtle dark glass card with faint purple glow
   Light mode: soft lavender glass card with accent border glow  */
.pl-empty-state {
    text-align: center;
    padding: 2.8rem 1.5rem;
    background: linear-gradient(135deg, rgba(26,15,46,0.6), rgba(18,8,32,0.55));
    border: 1px solid rgba(168,85,247,0.2);
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(217,70,239,0.06) inset,
                0 8px 32px rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
}
.pl-empty-icon {
    font-size: 2.8rem;
    margin-bottom: 0.85rem;
    display: block;
    filter: drop-shadow(0 0 10px rgba(217,70,239,0.55));
}
.pl-empty-msg {
    font-family: 'Outfit', sans-serif;
    font-size: 0.87rem;
    color: rgba(196,181,212,0.65);
    margin: 0;
    line-height: 1.55;
}

[data-theme="light"] .pl-empty-state {
    background: linear-gradient(135deg, rgba(253,250,255,0.9), rgba(237,224,255,0.7)) !important;
    border: 1.5px solid rgba(185,31,214,0.22) !important;
    box-shadow: 0 0 0 1px rgba(185,31,214,0.08) inset,
                0 8px 28px rgba(185,31,214,0.1),
                0 2px 8px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .pl-empty-icon {
    filter: drop-shadow(0 0 10px rgba(185,31,214,0.5)) !important;
}
[data-theme="light"] .pl-empty-msg {
    color: #5b2d8c !important;
}

/* ── News ticker — Light Mode ─────────────────────────────────
   Dark mode keeps the vivid pink-to-purple gradient + glow (layout.css).
   Light mode was overriding with a flat near-black gradient — no energy.
   Fix: use a lighter, vivid brand gradient so the ticker has the same
   visual weight it has in dark mode.                                     */
[data-theme="light"] .news-ticker {
    background: linear-gradient(90deg,
        #9b1fc1 0%,
        #c026d3 30%,
        #a855f7 60%,
        #9b1fc1 100%) !important;
    box-shadow: 0 4px 20px rgba(185,31,214,0.45) !important;
}
[data-theme="light"] .latest-badge {
    background: rgba(0,0,0,0.25) !important;
    color: #fff !important;
}
[data-theme="light"] .ticker-item {
    color: rgba(255,255,255,0.95) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.3) !important;
}

/* App header mobile */
[data-theme="light"] .app-header {
    background: rgba(237,224,255,0.97) !important;
    border-bottom: 1px solid rgba(185,31,214,0.2) !important;
}
[data-theme="light"] .app-header h3 {
    background: linear-gradient(90deg, #b91fd6, #8b35d6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="light"] .menu-btn { color: #b91fd6; }

/* Bottom player */
[data-theme="light"] .bottom-player-bar {
    background: rgba(237,224,255,0.97) !important;
    border-top: 2px solid rgba(185,31,214,0.3) !important;
    box-shadow: 0 -5px 30px rgba(185,31,214,0.12) !important;
}

/* Filter buttons */
/* ── Filter / Community tab buttons — Light Mode ──────────────
   Root cause: border was rgba(185,31,214,0.18) — nearly invisible.
   Background was rgba(237,224,255,0.6) — blends into the page bg.
   Text color #3d1060 on pale lavender fails WCAG AA at small sizes.
   Fixes: stronger border, distinct surface bg, sharper text, richer
   hover and active states that match the dark-mode energy level.     */
[data-theme="light"] .ls-filter-btn {
    background: rgba(253,250,255,0.85) !important;
    border: 1.5px solid rgba(185,31,214,0.28) !important;
    color: #3d1060 !important;
    box-shadow: 0 1px 4px rgba(185,31,214,0.08) !important;
}
[data-theme="light"] .ls-filter-btn:hover {
    background: rgba(185,31,214,0.12) !important;
    border-color: rgba(185,31,214,0.5) !important;
    color: #9b1fc1 !important;
    box-shadow: 0 3px 12px rgba(185,31,214,0.18) !important;
    transform: translateY(-1px);
}
[data-theme="light"] .ls-filter-btn.active {
    background: linear-gradient(135deg, #c026d3, #9333ea) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(185,31,214,0.38) !important;
}

/* Sidebar search */
[data-theme="light"] .sidebar-search-input {
    background: rgba(185,31,214,0.06) !important;
    border-color: rgba(185,31,214,0.18) !important;
    color: #1a0535 !important;
}
[data-theme="light"] .sidebar-search-input::placeholder { color: rgba(91,45,140,0.5) !important; }

/* Mobile header search input */
[data-theme="light"] #mobileSearchInput {
    background: rgba(185,31,214,0.08);
    border-color: rgba(185,31,214,0.22);
    color: #1a0535;
}

/* Search dropdown — default dark background (overrides any missing inline bg) */
#mobileSearchDropdown,
#desktopSearchDropdown {
    background: #1a0f2e;
}

/* Search dropdown — Light Mode: force white bg with !important to beat inline styles */
[data-theme="light"] #mobileSearchDropdown,
[data-theme="light"] #desktopSearchDropdown {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07) !important;
}
[data-theme="light"] .gs-title { color: #111111 !important; }
[data-theme="light"] .gs-artist { color: #555555 !important; }
[data-theme="light"] .gs-empty { color: #666666 !important; }
[data-theme="light"] .gs-type { color: #7c3aed !important; background: rgba(124,58,237,0.08) !important; border-color: rgba(124,58,237,0.2) !important; }
[data-theme="light"] .gs-tag { color: #7c3aed !important; background: rgba(124,58,237,0.08) !important; border-color: rgba(124,58,237,0.2) !important; }
[data-theme="light"] .gs-item { border-bottom: 1px solid rgba(0,0,0,0.07) !important; }
[data-theme="light"] .gs-item:hover { background: rgba(124,58,237,0.05) !important; }
[data-theme="light"] .gs-section-header { color: #7c3aed !important; border-bottom-color: rgba(0,0,0,0.08) !important; background: rgba(124,58,237,0.04) !important; }
[data-theme="light"] .gs-thumb-icon { background: rgba(124,58,237,0.08) !important; border-color: rgba(124,58,237,0.15) !important; }

/* Auth section in sidebar */
[data-theme="light"] .sidebar-auth { border-top: 1px solid rgba(185,31,214,0.15); }
[data-theme="light"] .sidebar-login-btn {
    background: linear-gradient(135deg, rgba(185,31,214,0.12), rgba(139,53,214,0.07));
    border: 1px solid rgba(185,31,214,0.22);
    color: #3d1060;
}
[data-theme="light"] .sidebar-login-btn:hover {
    background: linear-gradient(135deg, rgba(185,31,214,0.2), rgba(139,53,214,0.14));
}
[data-theme="light"] .sidebar-user-email { color: #5b2d8c; }
[data-theme="light"] .sidebar-logout-btn {
    background: rgba(214,56,56,0.07);
    color: #d63838;
    border: 1px solid rgba(214,56,56,0.18);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d946ef 0%, #a855f7 50%, #ef4444 100%); border-radius: 10px; box-shadow: 0 0 6px rgba(217,70,239,0.45); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #e879f9 0%, #c084fc 50%, #f87171 100%); box-shadow: 0 0 10px rgba(217,70,239,0.7); }
* { scrollbar-width: thin; scrollbar-color: #a855f7 transparent; }
[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(185,31,214,0.04); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(185,31,214,0.22); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(185,31,214,0.38); }

/* ── Light mode footer fix — overrides hardcoded white rgba inline styles ── */
[data-theme="light"] #cs-seo-block {
    border-top-color: rgba(185,31,214,0.12) !important;
}
[data-theme="light"] #cs-seo-block h1 {
    color: rgba(76,29,149,0.6) !important;
}
[data-theme="light"] #cs-seo-block p {
    color: rgba(76,29,149,0.55) !important;
}
[data-theme="light"] #cs-seo-footer {
    background: rgba(185,31,214,0.05) !important;
    border-top: 1px solid rgba(185,31,214,0.18) !important;
}
[data-theme="light"] #cs-seo-footer h3 {
    color: rgba(109,40,217,0.5) !important;
}
[data-theme="light"] #cs-seo-footer a {
    color: rgba(76,29,149,0.65) !important;
}
[data-theme="light"] #cs-seo-footer a:hover {
    color: #a855f7 !important;
    text-decoration: underline !important;
}
[data-theme="light"] #cs-seo-footer span {
    color: rgba(76,29,149,0.45) !important;
}
[data-theme="light"] #cs-seo-footer div {
    border-color: rgba(185,31,214,0.12) !important;
}

body {
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(135deg, #0a0514 0%, #1a0a2e 50%, #16001e 100%);
    background-attachment: fixed;
    color: var(--text);
    overflow-x: hidden;
    padding-top: 3rem;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(217, 70, 239, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(239, 68, 68, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(168, 85, 247, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

textarea {
    width: 100%;
    min-height: 120px;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(217, 70, 239, 0.3);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    resize: vertical;
    margin-bottom: 1rem;
}

textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.3);
}

/* ── Skip navigation — keyboard & screen reader accessibility ── */
.skip-nav-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--primary, #d946ef);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 0 0 8px 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 999999;
    transition: top 0.2s;
    text-decoration: none;
}
.skip-nav-link:focus { top: 0; }

/* ── Global Search Dropdown ──────────────────────────────── */
.gs-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(168,85,247,0.1);
    transition: background 0.15s;
}
.gs-item:last-child { border-bottom: none; }
.gs-item:hover { background: rgba(217,70,239,0.1); }
.gs-thumb {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
/* Icon thumb — for courses / tracks without a YouTube thumbnail */
.gs-thumb-icon {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: rgba(168,85,247,0.14);
    border: 1px solid rgba(168,85,247,0.2);
}
.gs-info { flex: 1; min-width: 0; }
.gs-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #f0e7ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gs-artist {
    font-family: 'Outfit', sans-serif;
    font-size: 0.73rem;
    color: rgba(196,181,212,0.55);
}
/* Type badge replaces old difficulty tag — wider style */
.gs-type {
    font-size: 0.64rem;
    background: rgba(168,85,247,0.15);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 6px;
    padding: 0.18rem 0.45rem;
    color: #c4b5fd;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
}
.gs-tag {
    font-size: 0.68rem;
    background: rgba(168,85,247,0.15);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 6px;
    padding: 0.15rem 0.4rem;
    color: #c4b5fd;
    flex-shrink: 0;
}
/* Section divider inside dropdown */
.gs-section-header {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(168,85,247,0.65);
    padding: 0.55rem 1rem 0.25rem;
    border-bottom: 1px solid rgba(168,85,247,0.1);
}
.gs-empty {
    padding: 1rem;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.83rem;
    color: rgba(196,181,212,0.5);
}
/* Panel header — desktop explorer title bar */
.gs-panel-header {
    padding: 0.65rem 1.1rem 0.45rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(168,85,247,0.65);
    border-bottom: 1px solid rgba(168,85,247,0.12);
    background: rgba(168,85,247,0.04);
}
/* Left accent bar on the panel */
#desktopSearchDropdown {
    border-left: 3px solid rgba(168,85,247,0.5);
}
[data-theme="light"] #desktopSearchDropdown {
    border-left: 3px solid rgba(124,58,237,0.35) !important;
}
[data-theme="light"] .gs-panel-header {
    color: #7c3aed !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
    background: rgba(124,58,237,0.04) !important;
}


/* ══════════════════════════════════════════════════════════
   LIGHT MODE — Deep Component Overrides
   Fixing all hardcoded dark rgba() values across all CSS files
   ══════════════════════════════════════════════════════════ */

/* ── Body right-side gradient fix ── */
[data-theme="light"] body {
    background: linear-gradient(135deg, #ede0ff 0%, #f3e8ff 40%, #fce7f3 70%, #f5f0ff 100%) !important;
}

/* ── Toolkit section backgrounds ── */
[data-theme="light"] .toolkit-section,
[data-theme="light"] .toolkit-card,
[data-theme="light"] .tk-section {
    background: linear-gradient(135deg, rgba(253,250,255,0.9), rgba(237,224,255,0.7)) !important;
    border-color: rgba(185,31,214,0.12) !important;
}

[data-theme="light"] .toolkit-panel,
[data-theme="light"] .tk-panel {
    background: rgba(237,224,255,0.5) !important;
}

/* Toolkit inputs / textareas / selects — currently pure black */
[data-theme="light"] .toolkit-section input,
[data-theme="light"] .toolkit-section textarea,
[data-theme="light"] .toolkit-section select,
[data-theme="light"] textarea,
[data-theme="light"] select {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(185,31,214,0.2) !important;
    color: #1a0535 !important;
}

[data-theme="light"] textarea::placeholder,
[data-theme="light"] input::placeholder {
    color: rgba(91,45,140,0.4) !important;
}

/* ── Player cards (Music Player) — currently grayish ── */
[data-theme="light"] .song-card,
[data-theme="light"] .player-card,
[data-theme="light"] .music-card {
    background: linear-gradient(135deg, rgba(253,250,255,0.95), rgba(237,224,255,0.75)) !important;
    border-color: rgba(185,31,214,0.12) !important;
    box-shadow: 0 4px 20px rgba(139,53,214,0.08) !important;
}

[data-theme="light"] .song-card:hover,
[data-theme="light"] .player-card:hover {
    box-shadow: 0 8px 28px rgba(185,31,214,0.18) !important;
    border-color: rgba(185,31,214,0.3) !important;
}

[data-theme="light"] .song-title,
[data-theme="light"] .song-artist,
[data-theme="light"] .card-title,
[data-theme="light"] .card-artist {
    color: #1a0535 !important;
}

/* ── Community cards ── */
[data-theme="light"] .cm-user-card,
[data-theme="light"] .cm-card {
    background: linear-gradient(135deg, rgba(253,250,255,0.95), rgba(237,224,255,0.7)) !important;
    border-color: rgba(185,31,214,0.12) !important;
    box-shadow: 0 4px 18px rgba(139,53,214,0.07) !important;
}

[data-theme="light"] .cm-user-name,
[data-theme="light"] .cm-name {
    color: #1a0535 !important;
}

[data-theme="light"] .cm-instrument,
[data-theme="light"] .cm-subtitle {
    color: #5b2d8c !important;
}

/* Weekly challenge card — keep dark (it's meant to stand out) */
[data-theme="light"] .cm-weekly-challenge,
[data-theme="light"] .wc-card {
    background: linear-gradient(135deg, #2d0a4e, #1e0835) !important;
    color: #f0e7ff !important;
}

/* Community follow button */
[data-theme="light"] .cm-follow-btn {
    border-color: rgba(185,31,214,0.3) !important;
    color: #b91fd6 !important;
    background: rgba(185,31,214,0.06) !important;
}

[data-theme="light"] .cm-follow-btn:hover {
    background: rgba(185,31,214,0.12) !important;
}

/* ── Learning Hub — lesson cards ── */
[data-theme="light"] .lesson-card,
[data-theme="light"] .course-card,
[data-theme="light"] .llp-lesson-card {
    background: linear-gradient(135deg, rgba(253,250,255,0.95), rgba(237,224,255,0.75)) !important;
    border-color: rgba(185,31,214,0.12) !important;
}

[data-theme="light"] .lesson-card:hover {
    box-shadow: 0 8px 28px rgba(185,31,214,0.16) !important;
}

[data-theme="light"] .lesson-title,
[data-theme="light"] .llp-lesson-title {
    color: #1a0535 !important;
}

[data-theme="light"] .lesson-meta,
[data-theme="light"] .llp-lesson-meta {
    color: #5b2d8c !important;
}

/* ── Song detail / practice view ── */
[data-theme="light"] .song-detail-bg,
[data-theme="light"] .ls-detail-panel {
    background: linear-gradient(135deg, rgba(237,224,255,0.7), rgba(253,250,255,0.9)) !important;
}

[data-theme="light"] .song-detail-section,
[data-theme="light"] .tabs-section,
[data-theme="light"] .chords-section {
    background: rgba(237,224,255,0.45) !important;
    border-color: rgba(185,31,214,0.12) !important;
    color: #1a0535 !important;
}

/* ── Comments section ── */
[data-theme="light"] .comments-section {
    background: rgba(237,224,255,0.4) !important;
    border-color: rgba(185,31,214,0.15) !important;
}

[data-theme="light"] .comment-input {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(185,31,214,0.2) !important;
    color: #1a0535 !important;
}

[data-theme="light"] .comment-item {
    background: rgba(253,250,255,0.85) !important;
    border-color: rgba(185,31,214,0.1) !important;
}

/* ── Bottom player (full override) ── */
[data-theme="light"] .bottom-player-bar {
    background: rgba(237,224,255,0.98) !important;
    border-top: 2px solid rgba(185,31,214,0.25) !important;
    box-shadow: 0 -4px 24px rgba(185,31,214,0.1) !important;
}

[data-theme="light"] .song-info-title,
[data-theme="light"] .player-song-title {
    color: #1a0535 !important;
}

[data-theme="light"] .song-info-artist,
[data-theme="light"] .player-song-artist {
    color: #5b2d8c !important;
}

/* Progress bar track */
[data-theme="light"] .progress-bar,
[data-theme="light"] .seek-bar {
    background: rgba(185,31,214,0.15) !important;
}

/* ── Modals in light mode ── */
[data-theme="light"] .modal-overlay,
[data-theme="light"] .modal-backdrop {
    background: rgba(180,140,220,0.35) !important;
    backdrop-filter: blur(8px);
}

[data-theme="light"] .modal-content,
[data-theme="light"] .modal-box,
[data-theme="light"] .auth-modal {
    background: linear-gradient(135deg, #fdfaff, #ede0ff) !important;
    border-color: rgba(185,31,214,0.2) !important;
    box-shadow: 0 20px 60px rgba(139,53,214,0.2) !important;
    color: #1a0535 !important;
}

/* ── Profile section ── */
[data-theme="light"] .profile-card,
[data-theme="light"] .profile-section {
    background: linear-gradient(135deg, rgba(253,250,255,0.95), rgba(237,224,255,0.75)) !important;
    border-color: rgba(185,31,214,0.12) !important;
}

/* ── Batch badge ── */
[data-theme="light"] .batch-badge,
[data-theme="light"] .cm-batch-badge {
    background: rgba(185,31,214,0.1) !important;
    border: 1px solid rgba(185,31,214,0.25) !important;
    color: #b91fd6 !important;
}

/* ── Nav text in sidebar (light sidebar) ── */
[data-theme="light"] .nav-icon { filter: none; }

/* ── Tag pills on song cards ── */
[data-theme="light"] .ls-tag {
    color: #3d1060 !important;
}

/* ── Section dividers ── */
[data-theme="light"] hr,
[data-theme="light"] .divider {
    border-color: rgba(185,31,214,0.15) !important;
}


/* ── PRECISE CLASS OVERRIDES ── */

/* Toolkit */
[data-theme="light"] .toolkit-section {
    background: linear-gradient(135deg, rgba(253,250,255,0.92), rgba(237,224,255,0.65)) !important;
    border: 1px solid rgba(185,31,214,0.12);
    box-shadow: 0 4px 20px rgba(139,53,214,0.06);
}
[data-theme="light"] .toolkit-section select,
[data-theme="light"] .toolkit-section input,
[data-theme="light"] .toolkit-section textarea {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(185,31,214,0.2) !important;
    color: #1a0535 !important;
}
[data-theme="light"] .toolkit-section select option {
    background: #fdfaff !important;
    color: #1a0535 !important;
}
[data-theme="light"] .toolkit-title { color: #b91fd6 !important; }

/* Music Player song cards */
[data-theme="light"] .song-card {
    background: linear-gradient(135deg, rgba(253,250,255,0.92), rgba(237,224,255,0.7)) !important;
    border: 1px solid rgba(185,31,214,0.12) !important;
    box-shadow: 0 4px 18px rgba(139,53,214,0.07) !important;
}
[data-theme="light"] .song-card:hover {
    border-color: rgba(185,31,214,0.4) !important;
    box-shadow: 0 10px 30px rgba(185,31,214,0.18) !important;
}
[data-theme="light"] .song-card-title { color: #1a0535 !important; }
[data-theme="light"] .song-card-artist { color: #5b2d8c !important; }
[data-theme="light"] .song-card-genre {
    background: rgba(185,31,214,0.08) !important;
    color: #8b35d6 !important;
}

/* Community cards */
[data-theme="light"] .cm-card {
    background: linear-gradient(135deg, rgba(253,250,255,0.92), rgba(237,224,255,0.65)) !important;
    border-color: rgba(185,31,214,0.14) !important;
    box-shadow: 0 4px 18px rgba(139,53,214,0.06) !important;
}
[data-theme="light"] .cm-card:hover {
    box-shadow: 0 8px 28px rgba(185,31,214,0.16) !important;
    border-color: rgba(185,31,214,0.35) !important;
}
[data-theme="light"] .cm-card-name { color: #1a0535 !important; }
[data-theme="light"] .cm-card-interest { color: #5b2d8c !important; }
[data-theme="light"] .cm-batch-badge {
    background: rgba(185,31,214,0.1) !important;
    border-color: rgba(185,31,214,0.28) !important;
    color: #b91fd6 !important;
}

/* Learning hub lesson cards */
[data-theme="light"] .llp-lesson-card,
[data-theme="light"] .lhp-course-card {
    background: linear-gradient(135deg, rgba(253,250,255,0.92), rgba(237,224,255,0.7)) !important;
    border-color: rgba(185,31,214,0.12) !important;
}

/* LS detail panel */
[data-theme="light"] .ls-detail-panel {
    background: linear-gradient(135deg, rgba(237,224,255,0.6), rgba(253,250,255,0.88)) !important;
}


/* ══════════════════════════════════════════════════════════
   LIGHT MODE — FULL DEPTH FIX v3
   Fixed-position full-screen pages, activity feed, profile,
   leaderboard, music player detail, back button
   ══════════════════════════════════════════════════════════ */

/* ── 1. LEARN SONGS DETAIL MODAL (full screen overlay) ── */
[data-theme="light"] .ls-detail-modal {
    background: linear-gradient(135deg, #ede0ff 0%, #f5eeff 50%, #fce7f3 100%) !important;
}

/* Back/Close button — not a floating circle, nicer pill */
[data-theme="light"] .ls-detail-close {
    background: linear-gradient(135deg, #b91fd6, #8b35d6) !important;
    box-shadow: 0 4px 16px rgba(185,31,214,0.35) !important;
}

/* Detail sections inside modal */
[data-theme="light"] .ls-detail-section {
    background: rgba(237,224,255,0.55) !important;
    border: 1px solid rgba(185,31,214,0.12) !important;
}

[data-theme="light"] .ls-detail-section-title { color: #b91fd6 !important; }
[data-theme="light"] .ls-detail-title { color: #1a0535 !important; }
[data-theme="light"] .ls-detail-artist { color: #5b2d8c !important; }
[data-theme="light"] .ls-detail-desc { color: #3d1060 !important; }

/* Chord pills inside detail */
[data-theme="light"] .ls-chord-chip {
    background: rgba(185,31,214,0.1) !important;
    border-color: rgba(185,31,214,0.25) !important;
    color: #1a0535 !important;
}

/* Tabs textarea */
[data-theme="light"] .ls-tabs-box {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(185,31,214,0.2) !important;
    color: #1a0535 !important;
}

/* Progress bar */
[data-theme="light"] .ls-progress-bar { background: rgba(185,31,214,0.15) !important; }

/* ── 2. LEARNING COURSE PAGE (lcp-page — full screen) ── */
[data-theme="light"] .lcp-page {
    background: linear-gradient(135deg, #ede0ff 0%, #f5eeff 50%, #fce7f3 100%) !important;
}

[data-theme="light"] .lcp-back-btn {
    background: linear-gradient(135deg, rgba(185,31,214,0.12), rgba(139,53,214,0.08)) !important;
    border-color: rgba(185,31,214,0.25) !important;
    color: #b91fd6 !important;
}

[data-theme="light"] .lcp-course-title { color: #1a0535 !important; }
[data-theme="light"] .lcp-lesson-card {
    background: linear-gradient(135deg, rgba(253,250,255,0.9), rgba(237,224,255,0.7)) !important;
    border-color: rgba(185,31,214,0.15) !important;
}
[data-theme="light"] .lcp-lesson-card:hover {
    box-shadow: 0 8px 28px rgba(185,31,214,0.16) !important;
    border-color: rgba(185,31,214,0.35) !important;
}
[data-theme="light"] .lcp-lesson-title,
[data-theme="light"] .lcp-lesson-desc { color: #1a0535 !important; }
[data-theme="light"] .lcp-lesson-meta { color: #5b2d8c !important; }

/* ── FIX: .lcp-course-title uses -webkit-text-fill-color:transparent     ──
   That property overrides plain `color`, so the base.css color rule above
   was silently ignored. We must also reset the gradient-clip to get a
   readable heading in light mode.                                           */
[data-theme="light"] .lcp-course-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #1a0535 !important;
    color: #1a0535 !important;
}

/* ── Supporting lcp-page elements that lacked light-mode colours ── */
[data-theme="light"] .lcp-section-title    { color: #3d1060 !important; }
[data-theme="light"] .lcp-hero-meta        { color: #5b2d8c !important; }
[data-theme="light"] .lcp-lesson-sub       { color: #5b2d8c !important; }
[data-theme="light"] .lcp-lesson-dur       { color: #7c3aad !important; }
[data-theme="light"] .lcp-divider          { background: linear-gradient(90deg, rgba(185,31,214,0.3), transparent) !important; }
[data-theme="light"] .lcp-progress-bar     { background: rgba(185,31,214,0.15) !important; }
[data-theme="light"] .lcp-progress-label   { color: #5b2d8c !important; }

/* ── Lesson Player page (llp-page) — light mode ──────────────────────────
   Previous note ("stays dark — immersive video player") was incorrect for
   the surrounding chrome. The <iframe> video remains black (correct), but
   the topbar, titles, description, and playlist panel must follow the theme.
   ──────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .llp-page {
    background: linear-gradient(135deg, #ede0ff 0%, #f5eeff 50%, #fce7f3 100%) !important;
}

/* Top bar */
[data-theme="light"] .llp-topbar {
    background: rgba(245, 238, 255, 0.96) !important;
    border-bottom-color: rgba(185,31,214,0.18) !important;
}
[data-theme="light"] .llp-topbar-course {
    color: #3d1060 !important;
}
[data-theme="light"] .llp-topbar-brand {
    color: #b91fd6 !important;
}
[data-theme="light"] .llp-back-btn {
    background: linear-gradient(135deg, rgba(185,31,214,0.12), rgba(139,53,214,0.08)) !important;
    border-color: rgba(185,31,214,0.25) !important;
    color: #b91fd6 !important;
}

/* Meta line */
[data-theme="light"] .llp-meta-line { color: #5b2d8c !important; }
[data-theme="light"] .llp-dur-label { color: #5b2d8c !important; }

/* ── FIX: .llp-title has the same -webkit-text-fill-color:transparent bug
   as .lcp-course-title. The gradient starts at #f0e7ff (near-white) which
   is invisible on a light background.                                      */
[data-theme="light"] .llp-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #1a0535 !important;
    color: #1a0535 !important;
}
[data-theme="light"] .llp-subtitle { color: #5b2d8c !important; }

/* Description area */
[data-theme="light"] .llp-desc-area {
    background: rgba(237,224,255,0.55) !important;
    border-color: rgba(185,31,214,0.15) !important;
}
[data-theme="light"] .llp-desc-text { color: #3d1060 !important; }

/* Playlist panel */
[data-theme="light"] .llp-playlist-panel {
    background: rgba(253,250,255,0.9) !important;
    border-color: rgba(185,31,214,0.18) !important;
}
[data-theme="light"] .llp-playlist-header {
    background: rgba(185,31,214,0.07) !important;
    border-bottom-color: rgba(185,31,214,0.15) !important;
}
[data-theme="light"] .llp-playlist-title { color: #1a0535 !important; }

/* Playlist rows */
[data-theme="light"] .llp-pl-item {
    border-bottom-color: rgba(185,31,214,0.07) !important;
}
[data-theme="light"] .llp-pl-item:hover {
    background: rgba(185,31,214,0.07) !important;
}
[data-theme="light"] .llp-pl-item.active {
    background: rgba(185,31,214,0.12) !important;
    border-left-color: #b91fd6 !important;
}
[data-theme="light"] .llp-pl-name          { color: #1a0535 !important; }
[data-theme="light"] .llp-pl-item.active .llp-pl-name { color: #b91fd6 !important; }
[data-theme="light"] .llp-pl-dur           { color: #5b2d8c !important; }

/* ── 3. MUSIC PLAYER SONG DETAIL PAGE ── */
[data-theme="light"] .song-detail-page {
    background: linear-gradient(135deg, #ede0ff 0%, #f5eeff 50%, #fce7f3 100%) !important;
}

[data-theme="light"] .song-detail-title { color: #1a0535 !important; }
[data-theme="light"] .song-detail-artist { color: #5b2d8c !important; }

[data-theme="light"] .song-detail-section,
[data-theme="light"] .practice-controls-panel,
[data-theme="light"] .song-detail-stats-bar {
    background: rgba(237,224,255,0.5) !important;
    border-color: rgba(185,31,214,0.12) !important;
    color: #1a0535 !important;
}

[data-theme="light"] .song-detail-stats-bar span { color: #b91fd6 !important; }
[data-theme="light"] .song-detail-stats-label { color: #5b2d8c !important; }

[data-theme="light"] .similar-song-item {
    background: rgba(237,224,255,0.45) !important;
    border-color: rgba(185,31,214,0.1) !important;
    color: #1a0535 !important;
}
[data-theme="light"] .similar-song-item:hover {
    background: rgba(185,31,214,0.1) !important;
}

[data-theme="light"] .back-to-music-btn {
    background: linear-gradient(135deg, rgba(185,31,214,0.12), rgba(139,53,214,0.08)) !important;
    border-color: rgba(185,31,214,0.25) !important;
    color: #b91fd6 !important;
}

/* Up Next sidebar */
[data-theme="light"] .up-next-panel {
    background: rgba(237,224,255,0.5) !important;
    border-color: rgba(185,31,214,0.12) !important;
}

/* ── 4. COMMUNITY ACTIVITY FEED ── */
[data-theme="light"] .cm-feed-item {
    background: rgba(253,250,255,0.88) !important;
    border-color: rgba(185,31,214,0.2) !important;
    box-shadow: 0 2px 8px rgba(139,53,214,0.06) !important;
}
[data-theme="light"] .cm-feed-item:hover {
    background: rgba(237,224,255,0.85) !important;
    border-color: rgba(185,31,214,0.35) !important;
}
/* .cm-feed-text uses var(--text-primary, #f1f0ff) fallback */
[data-theme="light"] .cm-feed-text { color: #1a0535 !important; }
[data-theme="light"] .cm-feed-text strong { color: #9b1fc1 !important; }
[data-theme="light"] .cm-feed-time { color: #5b2d8c !important; }
[data-theme="light"] .cm-feed-subtitle { color: #5b2d8c !important; }

/* ── 5. LEADERBOARD ── */
[data-theme="light"] .cm-lb-row {
    background: rgba(253,250,255,0.8) !important;
    border-color: rgba(185,31,214,0.1) !important;
    color: #1a0535 !important;
}
[data-theme="light"] .cm-lb-row:hover {
    background: rgba(237,224,255,0.85) !important;
    border-color: rgba(185,31,214,0.28) !important;
}
[data-theme="light"] .cm-lb-row--you {
    background: rgba(185,31,214,0.1) !important;
    border-color: #b91fd6 !important;
}
[data-theme="light"] .cm-lb-row--top1 { background: rgba(234,179,8,0.07) !important; border-color: rgba(234,179,8,0.3) !important; }
[data-theme="light"] .cm-lb-row--top2 { background: rgba(156,163,175,0.07) !important; border-color: rgba(156,163,175,0.25) !important; }
[data-theme="light"] .cm-lb-row--top3 { background: rgba(180,120,60,0.07) !important; border-color: rgba(180,120,60,0.25) !important; }

[data-theme="light"] .cm-lb-name,
[data-theme="light"] .cm-lb-rank-num { color: #1a0535 !important; }
[data-theme="light"] .cm-lb-mins { color: #5b2d8c !important; }

/* Podium */
[data-theme="light"] .cm-lb-podium-name { color: #1a0535 !important; }
[data-theme="light"] .cm-lb-podium-mins { color: #5b2d8c !important; }
[data-theme="light"] .cm-lb-podium-stage {
    background: rgba(185,31,214,0.12) !important;
    border-color: rgba(185,31,214,0.2) !important;
}

/* ── 6. FOLLOWING / FOLLOWERS LIST ── */
/* Previous selectors (.cm-following-item, .cm-follower-item, .cm-follow-row)
   did not match any real class in community.css — actual selector is
   .cm-list-row, used by both Following and Followers tabs.              */
[data-theme="light"] .cm-list-row {
    background: rgba(253,250,255,0.88) !important;
    border-color: rgba(185,31,214,0.2) !important;
    box-shadow: 0 2px 8px rgba(139,53,214,0.06) !important;
}
[data-theme="light"] .cm-list-row:hover {
    background: rgba(237,224,255,0.85) !important;
    border-color: rgba(185,31,214,0.35) !important;
}
/* .cm-list-name uses var(--text-primary, #f1f0ff) fallback — invisible in light */
[data-theme="light"] .cm-list-name {
    color: #1a0535 !important;
}
/* .cm-list-badge: purple pill faint at 12% opacity on lavender */
[data-theme="light"] .cm-list-badge {
    background: rgba(185,31,214,0.13) !important;
    border: 1.5px solid rgba(185,31,214,0.35) !important;
    color: #9b1fc1 !important;
}
/* Streak pill in Following/Followers rows */
[data-theme="light"] .cm-list-streak {
    background: rgba(185,31,214,0.1) !important;
    border-color: rgba(185,31,214,0.35) !important;
    color: #9b1fc1 !important;
}
[data-theme="light"] .cm-list-streak.cm-streak-active {
    background: rgba(234,179,8,0.12) !important;
    border-color: rgba(180,130,0,0.38) !important;
    color: #a16207 !important;
}
/* View Profile button */
[data-theme="light"] .cm-view-profile-btn {
    background: rgba(185,31,214,0.07) !important;
    border-color: rgba(185,31,214,0.3) !important;
    color: #9b1fc1 !important;
}
[data-theme="light"] .cm-view-profile-btn:hover {
    background: rgba(185,31,214,0.14) !important;
    border-color: rgba(185,31,214,0.5) !important;
}

/* ── 7. PROFILE PAGE ── */
[data-theme="light"] .prd-card {
    background: linear-gradient(135deg, rgba(253,250,255,0.92), rgba(237,224,255,0.7)) !important;
    border-color: rgba(185,31,214,0.14) !important;
    box-shadow: 0 4px 18px rgba(139,53,214,0.07) !important;
}
[data-theme="light"] .prd-card:hover { border-color: rgba(185,31,214,0.3) !important; }
[data-theme="light"] .prd-card-title { color: #5b2d8c !important; }
[data-theme="light"] .prd-stat-val { color: #b91fd6 !important; }
[data-theme="light"] .prd-stat-label { color: #5b2d8c !important; }

/* Profile input fields */
[data-theme="light"] .profile-input {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(185,31,214,0.2) !important;
    color: #1a0535 !important;
}
[data-theme="light"] .profile-input:focus {
    border-color: #b91fd6 !important;
    box-shadow: 0 0 12px rgba(185,31,214,0.2) !important;
}
[data-theme="light"] .profile-input option {
    background: #fdfaff !important;
    color: #1a0535 !important;
}

/* Profile name and bio */
[data-theme="light"] .prd-profile-name { color: #1a0535 !important; }
[data-theme="light"] .prd-profile-bio { color: #5b2d8c !important; }

/* Streak card (inline styles in JS — target wrapper) */
[data-theme="light"] .streak-card {
    background: linear-gradient(135deg, rgba(237,224,255,0.85), rgba(253,250,255,0.9)) !important;
    border-color: rgba(185,31,214,0.2) !important;
}

/* Profile header area */
[data-theme="light"] #profileDashboard,
[data-theme="light"] .prd-profile-card {
    background: linear-gradient(135deg, rgba(237,224,255,0.7), rgba(253,250,255,0.9)) !important;
    border-color: rgba(185,31,214,0.15) !important;
}

/* ── 8. MUSIC PLAYER BAR ── */
[data-theme="light"] .bottom-player-bar * { color: #1a0535 !important; }
[data-theme="light"] .bottom-player-bar .song-title,
[data-theme="light"] .bottom-player-bar .player-title { color: #1a0535 !important; }
[data-theme="light"] .bottom-player-bar .song-artist,
[data-theme="light"] .bottom-player-bar .player-artist { color: #5b2d8c !important; }
[data-theme="light"] .bottom-player-bar button { color: #b91fd6 !important; }
[data-theme="light"] .progress-fill,
[data-theme="light"] .seek-fill { background: linear-gradient(90deg, #b91fd6, #8b35d6) !important; }

/* ── 9. BATCH PROGRESS ITEMS ── */
[data-theme="light"] .prd-batch-item {
    background: rgba(237,224,255,0.5) !important;
    border-color: rgba(185,31,214,0.12) !important;
}
[data-theme="light"] .prd-batch-item.prd-batch-reached {
    background: rgba(185,31,214,0.1) !important;
}
[data-theme="light"] .prd-batch-item.prd-batch-current {
    background: linear-gradient(135deg, rgba(185,31,214,0.2), rgba(139,53,214,0.15)) !important;
    border-color: #b91fd6 !important;
}
[data-theme="light"] .prd-batch-name { color: #1a0535 !important; }
[data-theme="light"] .prd-batch-days { color: #5b2d8c !important; }


/* ══════════════════════════════════════════════════════════
   LIGHT MODE — FINAL TARGETED FIXES
   1. Toolkit dark boxes
   2. Back button style
   3. Community leaderboard podium
   4. Music player practice controls
   ══════════════════════════════════════════════════════════ */

/* ── TOOLKIT: output-box (chord families, progressions result) ── */
[data-theme="light"] .output-box {
    background: rgba(255,255,255,0.88) !important;
    border-color: rgba(185,31,214,0.18) !important;
    color: #1a0535 !important;
}

[data-theme="light"] #outputChords {
    background: rgba(255,255,255,0.88) !important;
    border-color: rgba(185,31,214,0.18) !important;
    color: #1a0535 !important;
}

[data-theme="light"] #outputChords[readonly] {
    background: rgba(237,224,255,0.6) !important;
    color: #3d1060 !important;
}

/* Toolkit practice controls inside song detail */
[data-theme="light"] .practice-controls-section {
    background: rgba(237,224,255,0.45) !important;
    border: 1px solid rgba(185,31,214,0.12) !important;
}

[data-theme="light"] .practice-control-group {
    background: rgba(253,250,255,0.85) !important;
    border-color: rgba(185,31,214,0.18) !important;
}

[data-theme="light"] .practice-control-label { color: #5b2d8c !important; }

/* Speed selector, AB loop buttons, transpose buttons */
[data-theme="light"] .speed-selector-large,
[data-theme="light"] .ab-loop-btn-large,
[data-theme="light"] .transpose-btn {
    background: rgba(255,255,255,0.88) !important;
    border-color: rgba(185,31,214,0.25) !important;
    color: #1a0535 !important;
}

[data-theme="light"] .speed-selector-large:hover,
[data-theme="light"] .ab-loop-btn-large:hover,
[data-theme="light"] .transpose-btn:hover {
    background: rgba(185,31,214,0.08) !important;
    border-color: rgba(185,31,214,0.45) !important;
}

/* Key display container */
[data-theme="light"] .key-display-container {
    background: linear-gradient(135deg, rgba(237,224,255,0.7), rgba(253,250,255,0.9)) !important;
    border-color: rgba(185,31,214,0.2) !important;
}

[data-theme="light"] .key-type { color: #5b2d8c !important; }

/* key-info-hint */
[data-theme="light"] .key-info-hint {
    background: rgba(237,224,255,0.55) !important;
    border-left-color: #b91fd6 !important;
}
[data-theme="light"] .key-info-hint p { color: #3d1060 !important; }

/* ── BACK BUTTON (ls-detail-close) — pill style ── */
[data-theme="light"] .ls-detail-close {
    width: auto !important;
    height: auto !important;
    border-radius: 24px !important;
    padding: 0.55rem 1.2rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #b91fd6, #8b35d6) !important;
    box-shadow: 0 4px 16px rgba(185,31,214,0.3) !important;
    color: #fff !important;
    letter-spacing: 0.3px;
}

[data-theme="light"] .ls-detail-close:hover {
    transform: translateX(-2px) !important;
    box-shadow: 0 6px 22px rgba(185,31,214,0.45) !important;
}

/* Dark mode back button also fix — too round circle feels weird */
.ls-detail-close {
    border-radius: 24px !important;
    width: auto !important;
    height: auto !important;
    padding: 0.55rem 1.2rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}

/* ── COMMUNITY LEADERBOARD PODIUM ── */
[data-theme="light"] .cm-lb-podium-stage {
    background: linear-gradient(180deg, rgba(185,31,214,0.2) 0%, rgba(139,53,214,0.08) 100%) !important;
    border-color: rgba(185,31,214,0.25) !important;
}

[data-theme="light"] .cm-lb-podium-item:nth-child(2) .cm-lb-podium-stage {
    background: linear-gradient(180deg, rgba(185,31,214,0.3) 0%, rgba(139,53,214,0.12) 100%) !important;
    border-color: rgba(185,31,214,0.4) !important;
}

[data-theme="light"] .cm-lb-podium-name { color: #1a0535 !important; }
[data-theme="light"] .cm-lb-podium-mins { color: #5b2d8c !important; }

/* Login prompt row in leaderboard */
[data-theme="light"] .cm-lb-login-row,
[data-theme="light"] .cm-lb-login-prompt {
    background: rgba(237,224,255,0.5) !important;
    border-color: rgba(185,31,214,0.15) !important;
    color: #5b2d8c !important;
}

/* ================================================================
   COMMUNITY LIGHT MODE — CONTRAST & READABILITY FIXES
   Root causes:
   • Many selectors use `--text-primary` whose fallback is #f1f0ff
     (near-white) — invisible on light backgrounds.
   • Translucent dark colours (rgba(26,15,46,…)) used in streak pins
     render correctly in dark mode but become murky mid-gray in light.
   • Insight/pill borders at 22-25% opacity disappear on pale lavender.
   • Yellow (#f59e0b) on a pale-yellow 7%-alpha bg fails contrast.
   All fixes below use only existing palette values.
   ================================================================ */

/* ── 1. Community Discover Cards ─────────────────────────────── */
/* Stronger card border so cards separate from page bg */
[data-theme="light"] .cm-card {
    border-color: rgba(185,31,214,0.22) !important;
    box-shadow: 0 4px 20px rgba(139,53,214,0.1),
                0 1px 4px rgba(185,31,214,0.08) !important;
}
[data-theme="light"] .cm-card:hover {
    border-color: rgba(185,31,214,0.42) !important;
    box-shadow: 0 8px 32px rgba(185,31,214,0.2) !important;
}
/* Names use --text-primary fallback #f1f0ff — force dark */
[data-theme="light"] .cm-card-name {
    color: #1a0535 !important;
    font-weight: 700 !important;
}
[data-theme="light"] .cm-card-interest { color: #5b2d8c !important; }

/* Batch badge — readable purple pill, not faint tint */
[data-theme="light"] .cm-batch-badge {
    background: rgba(185,31,214,0.13) !important;
    border: 1.5px solid rgba(185,31,214,0.35) !important;
    color: #9b1fc1 !important;
}

/* ── 2. Streak pins — dark gradient backgrounds invisible in light */
/* Cool pin (purple) */
[data-theme="light"] .cm-streak-pin--cool {
    background: linear-gradient(135deg, rgba(237,224,255,0.97), rgba(253,244,255,0.95)) !important;
    border: 1.5px solid rgba(185,31,214,0.5) !important;
    color: #9b1fc1 !important;
    box-shadow: 0 2px 8px rgba(185,31,214,0.2) !important;
}
/* Hot pin (amber) */
[data-theme="light"] .cm-streak-pin--hot {
    background: linear-gradient(135deg, rgba(255,251,235,0.97), rgba(254,243,199,0.95)) !important;
    border: 1.5px solid rgba(245,158,11,0.6) !important;
    color: #b45309 !important;
    box-shadow: 0 2px 8px rgba(245,158,11,0.2) !important;
}

/* ── 3. Leaderboard Header ──────────────────────────────────── */
/* cm-lb-title uses --text-primary fallback #f1f0ff — invisible */
[data-theme="light"] .cm-lb-title {
    color: #1a0535 !important;
}
[data-theme="light"] .cm-lb-subtitle {
    color: #5b2d8c !important;
}
[data-theme="light"] .cm-lb-batch-tag {
    /* batch tag is colour-set inline by JS; box-shadow keeps it visible */
    box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
}

/* ── 4. Reset Timer / Countdown Pill ────────────────────────── */
/* rgba(168,85,247,0.1) bg + rgba(168,85,247,0.22) border + #c084fc
   text are all extremely faint on lavender backgrounds */
[data-theme="light"] .cm-lb-countdown-pill {
    background: rgba(185,31,214,0.1) !important;
    border: 1.5px solid rgba(185,31,214,0.35) !important;
    color: #9b1fc1 !important;
}

/* ── 5. Insight / Rank Highlight Message Bar ────────────────── */
/* Base insight bar — --text-primary fallback #f1f0ff invisible */
[data-theme="light"] .cm-lb-insight {
    background: rgba(237,224,255,0.65) !important;
    border: 1.5px solid rgba(185,31,214,0.3) !important;
    color: #1a0535 !important;
}
[data-theme="light"] .cm-lb-insight strong {
    color: #9b1fc1 !important;
}

/* "Almost there" / top-3 bar — 7% yellow bg + 22% border vanishes */
[data-theme="light"] .cm-lb-insight--top3 {
    background: rgba(234,179,8,0.1) !important;
    border-color: rgba(180,130,0,0.38) !important;
}
[data-theme="light"] .cm-lb-insight--top3 strong {
    color: #a16207 !important;   /* amber-700 — WCAG AA on pale yellow */
}

/* Leader bar */
[data-theme="light"] .cm-lb-insight--leader {
    background: rgba(234,179,8,0.1) !important;
    border-color: rgba(180,130,0,0.35) !important;
}
[data-theme="light"] .cm-lb-insight--leader strong {
    color: #a16207 !important;
}

/* Close-to-next-rank bar */
[data-theme="light"] .cm-lb-insight--close {
    background: rgba(52,211,153,0.1) !important;
    border-color: rgba(16,185,129,0.35) !important;
}
[data-theme="light"] .cm-lb-insight--close strong {
    color: #065f46 !important;
}

/* Guest bar */
[data-theme="light"] .cm-lb-insight--guest {
    background: rgba(237,224,255,0.55) !important;
    border-color: rgba(185,31,214,0.2) !important;
    color: #5b2d8c !important;
}

/* ── 6. Batch pill & Elite badges in leaderboard rows ──────── */
[data-theme="light"] .cm-lb-batch-pill {
    background: rgba(185,31,214,0.12) !important;
    border: 1.5px solid rgba(185,31,214,0.32) !important;
    color: #9b1fc1 !important;
}
/* Weekly leader badge — amber on pale bg fails contrast */
[data-theme="light"] .cm-lb-badge--leader {
    background: rgba(234,179,8,0.12) !important;
    border-color: rgba(180,130,0,0.35) !important;
    color: #a16207 !important;
}
/* Consistent performer badge */
[data-theme="light"] .cm-lb-badge--consistent {
    background: rgba(185,31,214,0.12) !important;
    border-color: rgba(185,31,214,0.32) !important;
    color: #9b1fc1 !important;
}

/* ── 7. Leaderboard "you" row — stronger visual anchor ──────── */
[data-theme="light"] .cm-lb-row--you {
    background: rgba(185,31,214,0.1) !important;
    border: 1.5px solid #b91fd6 !important;
    box-shadow: 0 0 0 1px rgba(185,31,214,0.15),
                0 4px 16px rgba(185,31,214,0.12) !important;
}
[data-theme="light"] .cm-lb-row--you .cm-lb-name {
    color: #6b21a8 !important;
    font-weight: 700 !important;
}

/* ── 8. Weekly challenge card in Discover ───────────────────── */
[data-theme="light"] .cm-challenge-card {
    background: linear-gradient(135deg,
        rgba(253,250,255,0.97) 0%,
        rgba(237,224,255,0.92) 50%,
        rgba(253,244,255,0.97) 100%) !important;
    border: 1.5px solid rgba(185,31,214,0.28) !important;
    box-shadow: 0 8px 32px rgba(139,53,214,0.12),
                0 2px 8px rgba(185,31,214,0.07) !important;
}
[data-theme="light"] .cm-challenge-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #1a0535 !important;
    color: #1a0535 !important;
}
[data-theme="light"] .cm-challenge-desc   { color: #3d1060 !important; }
[data-theme="light"] .cm-challenge-week   { color: #5b2d8c !important; }
[data-theme="light"] .cm-challenge-pill {
    background: rgba(185,31,214,0.12) !important;
    border-color: rgba(185,31,214,0.38) !important;
    color: #9b1fc1 !important;
}
[data-theme="light"] .cm-challenge-join-hint { color: #7c3aad !important; }

/* ── MUSIC PLAYER — Song detail practice panel ── */
[data-theme="light"] .practice-controls-panel {
    background: rgba(237,224,255,0.45) !important;
    border-color: rgba(185,31,214,0.12) !important;
}

/* Overall light mode feel — remove pink right bleed */
[data-theme="light"] body {
    background: linear-gradient(135deg, #ede0ff 0%, #f5eeff 55%, #f0e6ff 100%) !important;
}

/* ========================================
   animations.css - Keyframes & Animations
======================================== */

/* ── Ticker scroll ───────────────────────────────────────────────────
   Moves exactly -50% so the second identical set snaps back to the
   first set position for a truly seamless, gapless loop.
   Both desktop and mobile use the same keyframe.                    */
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Legacy alias — kept so any external references still work */
@keyframes scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes scrollMobile {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 25px rgba(217, 70, 239, 0.6); }
    50% { box-shadow: 0 0 35px rgba(217, 70, 239, 0.9); }
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 10px rgba(217, 70, 239, 0.5);
    }
    50% {
        opacity: 0.7;
        text-shadow: 0 0 20px rgba(217, 70, 239, 0.8);
    }
}

/* Flowing comment tunnel animations */
@keyframes tunnelFromTop {
    0% {
        top: 50%;
        opacity: 0;
        transform: translateX(-50%) scale(0.3);
        filter: blur(3px);
    }
    20% {
        opacity: 0.8;
        transform: translateX(-50%) scale(0.6);
        filter: blur(1px);
    }
    40% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        filter: blur(0px);
    }
    100% {
        top: -100px;
        opacity: 0;
        transform: translateX(-50%) scale(1.1);
    }
}

@keyframes tunnelFromRight {
    0% {
        left: 50%;
        opacity: 0;
        transform: translateY(-50%) scale(0.3);
        filter: blur(3px);
    }
    20% {
        opacity: 0.8;
        transform: translateY(-50%) scale(0.6);
        filter: blur(1px);
    }
    40% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
        filter: blur(0px);
    }
    100% {
        left: calc(100% + 100px);
        opacity: 0;
        transform: translateY(-50%) scale(1.1);
    }
}

@keyframes tunnelFromBottom {
    0% {
        top: 50%;
        opacity: 0;
        transform: translateX(-50%) scale(0.3);
        filter: blur(3px);
    }
    20% {
        opacity: 0.8;
        transform: translateX(-50%) scale(0.6);
        filter: blur(1px);
    }
    40% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        filter: blur(0px);
    }
    100% {
        top: calc(100% + 100px);
        opacity: 0;
        transform: translateX(-50%) scale(1.1);
    }
}

@keyframes tunnelFromLeft {
    0% {
        left: 50%;
        opacity: 0;
        transform: translateY(-50%) scale(0.3);
        filter: blur(3px);
    }
    20% {
        opacity: 0.8;
        transform: translateY(-50%) scale(0.6);
        filter: blur(1px);
    }
    40% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
        filter: blur(0px);
    }
    100% {
        left: -100px;
        opacity: 0;
        transform: translateY(-50%) scale(1.1);
    }
}

/* ── Loading spinner animation (used by initial portal blocker) ── */
@keyframes cs-b-pulse {
    0%, 100% { transform: scale(1);   opacity: .7; }
    50%       { transform: scale(1.4); opacity: 1;  }
}
/* ========================================
   layout.css - Sidebar & Layout
======================================== */

/* News Ticker */
.news-ticker {
    background: linear-gradient(90deg, var(--accent-red) 0%, var(--primary) 50%, var(--accent-purple) 100%);
    color: white;
    padding: 0.7rem 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    font-weight: 500;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 20px rgba(217, 70, 239, 0.5);
}

.latest-badge {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 0.7rem 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    flex-shrink: 0;
    z-index: 10;
}

.ticker-wrapper {
    flex: 1;
    overflow: hidden;
    /* Mask edges so items fade in/out cleanly at both ends */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

/* ── ticker-content: the moving track ───────────────────────────────
   NO gap here — gap is handled inside each .ticker-set with padding-right.
   This ensures translateX(-50%) lands exactly at the seam between the
   two sets, giving a perfect seamless loop.                           */
.ticker-content {
    display: flex;
    flex-wrap: nowrap;
    /* animation applied via JS after content is ready to avoid FOUC */
    will-change: transform;
}

/* ── ticker-set: one copy of all items ──────────────────────────────
   padding-right mirrors the internal gap so the visual space between
   the last item of set-1 and the first item of set-2 is identical to
   the space between any two items within a single set.               */
.ticker-set {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    padding-right: 3rem;  /* CRITICAL: must equal gap value */
    flex-shrink: 0;
    white-space: nowrap;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ticker-item::before {
    content: '⭐';
    font-size: 1rem;
}

/* Layout */
.container {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh; /* iOS Safari: uses visual viewport, avoids address-bar overlap */
    position: relative;
    z-index: 1;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background: rgba(18, 8, 32, 0.8);
    backdrop-filter: blur(20px);
    padding: 2rem 1.5rem;
    position: fixed;
    top: 3rem;
    height: calc(100vh - 3rem);
    height: calc(100dvh - 3rem);
    border-right: 2px solid rgba(217, 70, 239, 0.3);
    box-shadow: 4px 0 20px rgba(217, 70, 239, 0.2);
    z-index: 1002; /* above lesson overlay (1001) and ticker (1000) */

    /* ── Scrollable sidebar ── */
    overflow-y: auto;
    overflow-y: overlay; /* floats over content, no layout shift */
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent; /* Firefox: hidden by default */
}

/* Webkit: 4px slim scrollbar, hidden until hover */
.sidebar::-webkit-scrollbar {
    width: 4px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* Reveal on hover — purple gradient to match site theme */
.sidebar:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d946ef 0%, #a855f7 50%, #ef4444 100%);
    box-shadow: 0 0 6px rgba(217, 70, 239, 0.55);
}
.sidebar:hover {
    scrollbar-color: #a855f7 transparent; /* Firefox reveal */
}

.logo-container {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(217, 70, 239, 0.3);
}

.logo-img {
    width: 160px;
    height: auto;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 4px 12px rgba(217, 70, 239, 0.6));
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.05);
}

.tagline {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    background: linear-gradient(90deg, var(--primary), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    list-style: none;
}

.nav-item {
    margin-bottom: 0.5rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1.1rem;
    color: var(--text);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(180deg, var(--primary), var(--accent-red));
    transform: scaleY(0);
    transition: transform 0.3s;
}

.nav-link:hover,
.nav-link.active {
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
    color: var(--primary);
    box-shadow: 0 4px 15px rgba(217, 70, 239, 0.3);
}

.nav-link:hover::before,
.nav-link.active::before {
    transform: scaleY(1);
}

.nav-icon {
    font-size: 1.2rem;
}

.lock-screen {
    position: absolute;
    bottom: 2rem;
    left: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dim);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0.6rem 1rem;
    border-radius: 8px;
}

.lock-screen:hover {
    color: var(--primary);
    background: rgba(217, 70, 239, 0.1);
}

/* Main Content */
.main-content {
    margin-left: 260px;
    flex: 1;
    padding: 2rem 3rem;
    padding-top: 1rem;
    width: calc(100% - 260px);
    max-width: calc(100% - 260px);
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Section Header */
.section-header {
    margin-bottom: 2rem;
}

.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, var(--primary), var(--accent-red), var(--accent-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(217, 70, 239, 0.5);
}

.section-subtitle {
    color: var(--text-dim);
    font-size: 1.1rem;
}

.updated-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.3), rgba(239, 68, 68, 0.3));
    color: white;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    float: right;
    margin-top: 0.5rem;
    border: 1px solid rgba(217, 70, 239, 0.5);
    box-shadow: 0 4px 15px rgba(217, 70, 239, 0.4);
}

/* Tab Sections */
.tab-section {
    display: none;
}

.tab-section.active {
    display: block;
    animation: fadeIn 0.4s;
}

/* App Header (Mobile) */
.app-header {
    display: none;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 3rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.show {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* ─── Sidebar Auth Section ──────────────────────────── */
.sidebar-auth {
    padding: 1rem 1.2rem;
    border-top: 1px solid rgba(217, 70, 239, 0.15);
    margin-top: auto;
}

.sidebar-login-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(217, 70, 239, 0.12);
    border: 1.5px solid rgba(217, 70, 239, 0.35);
    border-radius: 12px;
    color: #d946ef;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s;
}
.sidebar-login-btn:hover {
    background: rgba(217, 70, 239, 0.25);
    border-color: #d946ef;
    box-shadow: 0 4px 16px rgba(217, 70, 239, 0.3);
    transform: translateY(-1px);
}

.sidebar-user-email {
    font-size: 0.78rem;
    color: #a855f7;
    word-break: break-all;
    padding: 0.4rem 0.2rem;
    margin-bottom: 0.5rem;
    font-family: 'Outfit', sans-serif;
}

.sidebar-logout-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1.5px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #ef4444;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
}
.sidebar-logout-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

/* ─── Auth Modal Tab Buttons ─────────────────────────── */
.auth-tab-btn {
    background: transparent;
    color: #a78bba;
}
.auth-tab-btn.active {
    background: linear-gradient(135deg, #d946ef, #a855f7) !important;
    color: white !important;
    box-shadow: 0 2px 10px rgba(217, 70, 239, 0.4);
}

/* ─── Auth messages ──────────────────────────────────── */
.auth-message {
    font-size: 0.85rem;
    min-height: 1.2em;
    color: transparent;
    margin: 0;
    font-family: 'Outfit', sans-serif;
}
.auth-message.error   { color: #f87171; }
.auth-message.success { color: #4ade80; }

/* ── Sidebar Search (Desktop Only) ─────────────────────── */
.sidebar-search-wrap {
    padding: 0.6rem 1rem 0.2rem;
    display: block;
    position: relative; /* Anchor for dropdown measurement via JS */
}

.sidebar-search-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 20px;
    padding: 0.48rem 1rem;
    color: #f0e7ff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.sidebar-search-input::placeholder {
    color: rgba(196,181,212,0.45);
}

/* Hide sidebar search on mobile (mobile uses header search) */
@media (max-width: 768px) {
    .sidebar-search-wrap { display: none; }
}

/* Hide mobile header title text (search replaces it) */
@media (max-width: 768px) {
    #appTitle { display: none; }
    #globalSearchWrapper { display: flex !important; }
}

/* Desktop: hide the mobile header search wrapper */
@media (min-width: 769px) {
    .app-header #globalSearchWrapper { display: none !important; }
}

/* ── Desktop Search Results — Floating Explorer Panel ──────────
   On desktop (≥900px), the results panel appears as a floating
   window to the RIGHT of the sidebar, not below the search input.
   JS (_positionDesktopDropdown) sets left/top/maxHeight each time.
   CSS only defines the panel's visual shape and inner layout.
──────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
    #desktopSearchDropdown {
        position: fixed;                    /* viewport-relative, escapes sidebar stacking */
        /* left, top, width, maxHeight — all set by JS dynamically */
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(168,85,247,0.3) transparent;
        z-index: 999999;                    /* above sidebar (1002) + all overlays */
        border-radius: 14px;
        box-shadow:
            0 4px  8px  rgba(0,0,0,0.10),
            0 12px 32px rgba(0,0,0,0.18),
            0 24px 56px rgba(0,0,0,0.16);
        /* Smooth open animation */
        animation: gsPanelIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
        /* Own GPU layer — escapes backdrop-filter stacking context */
        will-change: transform;
    }

    @keyframes gsPanelIn {
        from { opacity: 0; transform: translateX(-10px) scale(0.98); }
        to   { opacity: 1; transform: translateX(0)     scale(1);    }
    }

    /* Panel header — optional title bar at top */
    #desktopSearchDropdown .gs-panel-header {
        padding: 0.75rem 1.1rem 0.5rem;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: rgba(168,85,247,0.7);
        border-bottom: 1px solid rgba(168,85,247,0.12);
    }

    /* Items */
    #desktopSearchDropdown .gs-item {
        padding: 0.78rem 1.1rem;
        gap: 0.85rem;
        transition: background 0.13s ease;
    }

    /* Thumbnails */
    #desktopSearchDropdown .gs-thumb,
    #desktopSearchDropdown .gs-thumb-icon {
        width: 42px;
        height: 42px;
        border-radius: 8px;
    }

    /* Title */
    #desktopSearchDropdown .gs-title {
        font-size: 0.9rem;
    }

    /* Artist subtitle */
    #desktopSearchDropdown .gs-artist {
        font-size: 0.75rem;
        margin-top: 2px;
    }

    /* Section headers */
    #desktopSearchDropdown .gs-section-header {
        padding: 0.6rem 1.1rem 0.3rem;
        font-size: 0.66rem;
        letter-spacing: 0.09em;
    }

    /* Type badge */
    #desktopSearchDropdown .gs-type {
        font-size: 0.66rem;
        padding: 0.18rem 0.52rem;
        border-radius: 5px;
    }
}

/* Mobile — desktop panel never shown on mobile */
@media (max-width: 899px) {
    #desktopSearchDropdown {
        display: none !important;
    }
}

/* ========================================
   components.css - Cards, Buttons, Modals
======================================== */

/* Cards Grid */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.release-card {
    background: rgba(26, 15, 46, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
}

.release-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, var(--primary), var(--accent-red));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
}

.release-card:hover::before {
    opacity: 1;
}

.release-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px rgba(217, 70, 239, 0.4), 0 0 40px rgba(239, 68, 68, 0.3);
}

/* Card Image - Perfect YouTube Thumbnail Ratio */
.card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: contain;
    background: #000;
    border-radius: 16px 16px 0 0;
}

.release-card:hover .card-image {
    transform: scale(1.08);
}

.card-content {
    padding: 1.5rem;
}

.card-artist {
    font-size: 0.8rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    font-family: 'Space Grotesk', sans-serif;
}

.card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Quick Stats */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.15), rgba(239, 68, 68, 0.1));
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(217, 70, 239, 0.3);
    transition: all 0.3s;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(217, 70, 239, 0.3);
    border-color: var(--primary);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary), var(--accent-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.3rem;
}

/* Practice Logs */
.practice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.practice-card {
    background: rgba(26, 15, 46, 0.5);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(217, 70, 239, 0.2);
    transition: all 0.3s;
}

.practice-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 25px rgba(217, 70, 239, 0.3);
}

.instrument-icon {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
}

.instrument-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.practice-time {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.practice-label {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.add-note-btn {
    margin-top: 1rem;
    width: 100%;
    padding: 0.7rem;
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.2), rgba(239, 68, 68, 0.2));
    border: 1px solid rgba(217, 70, 239, 0.5);
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
}

.add-note-btn:hover {
    background: linear-gradient(135deg, var(--primary), var(--accent-red));
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(217, 70, 239, 0.4);
}

/* Buttons */
.primary-btn {
    background: linear-gradient(135deg, var(--primary), var(--accent-red));
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    box-shadow: 0 5px 20px rgba(217, 70, 239, 0.4);
}

.primary-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(217, 70, 239, 0.6);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-content {
    background: linear-gradient(135deg, rgba(26, 15, 46, 0.95), rgba(18, 8, 32, 0.95));
    backdrop-filter: blur(20px);
    padding: 2.5rem;
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    border: 2px solid rgba(217, 70, 239, 0.5);
    box-shadow: 0 20px 60px rgba(217, 70, 239, 0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary), var(--accent-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.close-btn {
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-dim);
    transition: color 0.3s;
    background: none;
    border: none;
}

.close-btn:hover {
    color: var(--primary);
}

/* Learning Hub */
.learning-grid {
    gap: 25px;
}

.level {
    font-size: 13px;
    margin: 8px 0;
}

.level.beginner { color: #22c55e; }
.level.intermediate { color: #facc15; }
.level.advanced { color: #ef4444; }

/* Lesson List */
.lesson-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.lesson-btn {
    background: linear-gradient(135deg, #d946ef, #ef4444);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════
   Staggered entry animations for release cards + learning hub
   ═══════════════════════════════════════════════════════ */

/* New Releases + Learning Hub cards */
#youtubeGrid .release-card,
.learning-grid .release-card {
    animation: fadeIn 0.4s ease both;
}
#youtubeGrid .release-card:nth-child(1),
.learning-grid .release-card:nth-child(1) { animation-delay: 0ms; }
#youtubeGrid .release-card:nth-child(2),
.learning-grid .release-card:nth-child(2) { animation-delay: 70ms; }
#youtubeGrid .release-card:nth-child(3),
.learning-grid .release-card:nth-child(3) { animation-delay: 140ms; }
#youtubeGrid .release-card:nth-child(4),
.learning-grid .release-card:nth-child(4) { animation-delay: 210ms; }
#youtubeGrid .release-card:nth-child(5),
.learning-grid .release-card:nth-child(5) { animation-delay: 280ms; }
#youtubeGrid .release-card:nth-child(6),
.learning-grid .release-card:nth-child(6) { animation-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
    #youtubeGrid .release-card,
    .learning-grid .release-card { animation: none; }
}

/* ================================================================
   Achievement Badge Wall (achievements.js)
   ================================================================ */
.ach-badge-wall {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.ach-rarity-group { }
.ach-rarity-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ach-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.ach-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    border: 1px solid;
    min-width: 72px;
    max-width: 88px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}
.ach-badge-item.earned:hover {
    transform: translateY(-2px);
}
.ach-badge-icon { font-size: 1.5rem; line-height: 1; }
.ach-badge-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}
.ach-badge-check {
    font-size: 0.6rem;
    color: #22c55e;
    font-weight: 700;
}

/* ================================================================
   Getting Started Checklist (gettingStarted.js)
   ================================================================ */
.gs-task.gs-done .gs-badge-icon { filter: grayscale(1); }

/* ================================================================
   Weekly Goal Widget (weeklyGoal.js)
   ================================================================ */
[data-theme="light"] .wg-widget {
    background: linear-gradient(135deg, rgba(245,240,255,0.8), rgba(237,224,255,0.9));
    border-color: rgba(185,31,214,0.18);
}

/* ================================================================
   XP Sidebar Bar (xpSystem.js) — light mode
   ================================================================ */
[data-theme="light"] #sidebarXPBar {
    background: rgba(185,31,214,0.05);
    border-color: rgba(185,31,214,0.15);
}
[data-theme="light"] #sidebarXPBar .xp-level-title,
[data-theme="light"] #sidebarXPBar .xp-progress-text {
    color: rgba(91,45,140,0.65);
}

/* ================================================================
   Song Requests (songRequest.js) — light mode
   ================================================================ */
[data-theme="light"] .sr-panel {
    color: var(--text);
}
[data-theme="light"] .sr-item {
    background: rgba(245,240,255,0.6) !important;
    border-color: rgba(185,31,214,0.12) !important;
}

/* ================================================================
   Achievement Badge Tooltip (Fix v41.1)
   ================================================================ */
.ach-badge-tooltip {
    font-family: 'Outfit', sans-serif;
}
.ach-badge-item {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.ach-badge-item:active {
    transform: scale(0.95);
}

/* ================================================================
   Learning Hub — Course card mini progress bar  v1
   Shown at bottom of each .release-card[data-course] on hub page
   ================================================================ */
.lhub-card-progress {
    margin-top: 0.9rem;
    display: none; /* shown via JS after progress loads */
}
.lhub-card-progress.has-progress {
    display: block;
}
.lhub-card-progress-bar {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}
.lhub-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #d946ef, #a855f7);
    border-radius: 99px;
    transition: width 0.5s ease;
}
.lhub-card-progress-label {
    font-size: 0.7rem;
    color: rgba(217,70,239,0.75);
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
}
.lhub-card-progress-label.complete {
    color: #4ade80;
}

/* ================================================================
   Daily Learning Goal Card — dlg-* prefix
   ChordStar Music Learning Portal

   Sits below the Weekly Goal widget in the Practice section.
   Color: teal-green accent to visually distinguish from the
   purple Daily Challenge card and the weekly goal.
   Mobile: side-by-side layout mirroring dc-card mobile pattern.
   ================================================================ */

/* ── Outer card ─────────────────────────────────────────────── */
.dlg-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(10,28,22,0.97) 0%,
        rgba(6,20,16,0.98) 60%,
        rgba(10,26,20,0.97) 100%);
    border: 1.5px solid rgba(34,197,94,0.35);
    border-radius: 18px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow:
        0 0 0 1px rgba(34,197,94,0.08),
        0 6px 28px rgba(34,197,94,0.12),
        0 2px 6px rgba(0,0,0,0.35);
    transition: border-color 0.3s, box-shadow 0.3s;
    animation: dlg-enter 0.45s cubic-bezier(0.34,1.4,0.64,1) both;
}

@keyframes dlg-enter {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.dlg-card:hover {
    border-color: rgba(34,197,94,0.55);
    box-shadow:
        0 0 0 1px rgba(34,197,94,0.14),
        0 10px 38px rgba(34,197,94,0.2),
        0 2px 6px rgba(0,0,0,0.35);
}

/* Completed variant */
.dlg-card--done {
    border-color: rgba(34,197,94,0.5);
    background: linear-gradient(135deg,
        rgba(10,30,20,0.97) 0%,
        rgba(6,22,14,0.98) 100%);
    box-shadow:
        0 0 0 1px rgba(34,197,94,0.15),
        0 6px 28px rgba(34,197,94,0.2),
        0 2px 6px rgba(0,0,0,0.35);
}

/* Decorative glow orb */
.dlg-card-orb {
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(34,197,94,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ── Label row ─────────────────────────────────────────────── */
.dlg-label-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.dlg-pill {
    display: inline-block;
    background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(74,222,128,0.14));
    border: 1px solid rgba(34,197,94,0.4);
    border-radius: 50px;
    padding: 0.2rem 0.8rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: 0.3px;
}

/* ── Body ──────────────────────────────────────────────────── */
.dlg-body {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.dlg-body--done {
    align-items: center;
}

.dlg-text { flex: 1; min-width: 0; }

/* ── Title (incomplete) ────────────────────────────────────── */
.dlg-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1rem, 2.6vw, 1.2rem);
    font-weight: 800;
    background: linear-gradient(90deg, #f0fdf4 0%, #4ade80 55%, #22c55e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.45rem;
    line-height: 1.25;
}

/* ── Meta row (progress + reward) ─────────────────────────── */
.dlg-meta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.dlg-progress-tag,
.dlg-reward-tag {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(196,181,212,0.6);
}

.dlg-progress-tag strong,
.dlg-reward-tag strong {
    color: rgba(196,181,212,0.85);
    font-weight: 700;
}

/* ── CTA button ────────────────────────────────────────────── */
.dlg-cta-wrap { flex-shrink: 0; }

.dlg-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.3rem;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    border: none;
    border-radius: 50px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(34,197,94,0.38);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    letter-spacing: 0.2px;
}

.dlg-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 24px rgba(34,197,94,0.52);
}

.dlg-cta-btn:active {
    transform: translateY(0);
    opacity: 0.9;
}

/* ── Completed state content ───────────────────────────────── */
.dlg-title--done {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1rem, 2.6vw, 1.2rem);
    font-weight: 800;
    color: #4ade80;
    margin: 0 0 0.3rem;
    line-height: 1.25;
}

.dlg-done-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(196,181,212,0.55);
    margin: 0;
}

.dlg-done-check {
    font-size: 2rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(34,197,94,0.5));
}

/* ── Light theme overrides ─────────────────────────────────── */
[data-theme="light"] .dlg-card {
    background: linear-gradient(135deg, rgba(240,253,244,0.98), rgba(220,252,231,0.97));
    border-color: rgba(34,197,94,0.4);
}

[data-theme="light"] .dlg-title {
    background: linear-gradient(90deg, #14532d, #16a34a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .dlg-title--done {
    color: #15803d;
}

[data-theme="light"] .dlg-progress-tag,
[data-theme="light"] .dlg-reward-tag {
    color: rgba(20,83,45,0.65);
}

[data-theme="light"] .dlg-done-sub {
    color: rgba(20,83,45,0.55);
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .dlg-card {
        padding: 0.85rem 1rem;
        margin-bottom: 1rem;
        border-radius: 14px;
    }

    .dlg-card-orb { display: none; }

    .dlg-label-row {
        margin-bottom: 0.55rem;
    }

    .dlg-pill {
        font-size: 0.67rem;
        padding: 0.14rem 0.6rem;
    }

    .dlg-body {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: nowrap;
    }

    .dlg-text { flex: 1; min-width: 0; }

    .dlg-title {
        font-size: 0.92rem;
        margin-bottom: 0.2rem;
    }

    .dlg-meta-row {
        gap: 0.5rem;
    }

    .dlg-progress-tag,
    .dlg-reward-tag {
        font-size: 0.7rem;
    }

    .dlg-cta-btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.78rem;
    }

    .dlg-title--done {
        font-size: 0.92rem;
    }

    .dlg-done-sub {
        font-size: 0.7rem;
    }

    .dlg-done-check {
        font-size: 1.5rem;
    }
}
/* ========================================
   mobile.css - Responsive & Mobile Styles
======================================== */

@media (max-width: 768px) {

    /* App Header */
    .app-header {
        display: flex;
        position: fixed;
        top: 26px;
        left: 0;
        width: 100%;
        height: 55px;
        background: rgba(12, 5, 24, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(217, 70, 239, 0.25);
        box-shadow: 0 2px 20px rgba(0,0,0,0.5);
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        z-index: 9500;
    }

    .app-header h3 {
        color: var(--text);
        font-size: 18px;
        background: linear-gradient(90deg, var(--primary), var(--accent-purple));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .menu-btn {
        font-size: 22px;
        color: var(--primary);
        cursor: pointer;
    }

    /* Sidebar */
    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        width: 75%;
        height: 100%;
        transition: 0.3s ease;
        z-index: 9000;
        padding-top: 90px !important;
    }

    .sidebar.show { left: 0; }

    .sidebar .logo { margin-top: 10px !important; }

    /* Main Content */
    .main-content {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        padding-top: 90px !important;
    }

    /* News Ticker */
    .news-ticker {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        right: 0;
        height: 26px !important;
        padding: 0 !important;
        z-index: 9600 !important;
        backdrop-filter: blur(6px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .latest-badge {
        padding: 0 10px !important;
        font-size: 10px !important;
        letter-spacing: 1px !important;
    }

    .ticker-wrapper {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .ticker-content {
        font-size: 11px !important;
        /* JS sets the animation; only override the duration here */
        animation-duration: 40s !important;
    }

    /* Tighten gap/padding on small screens — must stay equal to each other */
    .ticker-set {
        gap: 2rem !important;
        padding-right: 2rem !important;
        font-size: 11px !important;
    }

    .ticker-item::before { font-size: 0.8rem !important; }

    /* Section Header */
    .section-header {
        margin-bottom: 1.5rem;
        padding: 0 0.5rem;
    }

    .section-title {
        font-size: 1.8rem !important;
        margin-bottom: 0.4rem;
        line-height: 1.2;
    }

    .section-subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 0.8rem;
        display: block;
    }

    /* Practice section header — stack on mobile */
    .ls-practice-header-top {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Surprise Me button — compact on mobile */
    .ls-surprise-btn {
        float: none !important;
        display: inline-flex !important;
        margin: 0 !important;
        font-size: 0.7rem !important;
        padding: 0.38rem 0.85rem !important;
        align-self: flex-start;
    }

    .updated-badge {
        float: none !important;
        display: block;
        width: fit-content;
        margin: 0.8rem auto 0 auto !important;
        font-size: 0.7rem;
        padding: 0.4rem 0.9rem;
    }

    /* Section Content */
    .main-content,
    .section-content,
    .tab-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box;
    }

    .tab-section { padding-bottom: 140px !important; }

    /* Cards Grid */
    .cards-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-content: center !important;
        justify-items: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 18px;
    }

    .release-card {
        width: 100% !important;
        max-width: 380px;
        margin: 0 auto !important;
        margin-bottom: 1.5rem !important;
    }

    /* Card Content */
    .card-content { padding: 1.2rem !important; }
    .card-artist { font-size: 0.75rem !important; margin-bottom: 0.4rem !important; }
    .card-title { font-size: 1.1rem !important; line-height: 1.3 !important; margin-bottom: 0.6rem !important; }
    .card-meta { font-size: 0.8rem !important; gap: 0.6rem !important; }

    /* Prevent Horizontal Scroll */
    body, html { overflow-x: hidden !important; }

    /* Surprise Me Button */
    .primary-btn { margin-bottom: 2rem !important; }

    /* Video Modal */
    #videoModal .modal-content {
        max-width: 95% !important;
        width: 95% !important;
        padding: 1rem !important;
        margin: 1rem auto;
    }

    #videoModal .modal-header { margin-bottom: 1rem !important; }
    #videoModal .modal-title { font-size: 1.2rem !important; }

    #videoModal .modal-header button[onclick="openCommentPopup()"] {
        position: static !important;
        transform: none !important;
        margin-left: auto;
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
    }

    #videoModal .close-btn { font-size: 1.5rem !important; }

    /* Comment Popup */
    #commentPopup {
        min-width: unset !important;
        width: 90% !important;
        max-width: 90% !important;
        padding: 1.5rem !important;
        border-radius: 16px !important;
    }

    #commentPopupTitle { font-size: 1.3rem !important; margin-bottom: 1rem !important; }
    #commentPopupInput { font-size: 0.95rem !important; min-height: 80px !important; padding: 0.8rem !important; }
    #commentPopupButtons { gap: 0.8rem !important; }
    #commentPopupButtons button { padding: 0.7rem 1.2rem !important; font-size: 0.9rem !important; }

    /* Toolkit */
    .tool-row { grid-template-columns: 1fr; }
    #toolkit { padding: 0 10px; }

    /* Practice Controls */
    .practice-controls-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .practice-controls-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 1.25rem !important;
    }

    .practice-control-group {
        padding: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .transpose-controls {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.6rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .transpose-btn {
        flex: 1 !important;
        min-width: 60px !important;
        box-sizing: border-box !important;
    }

    .transpose-value {
        flex-shrink: 0 !important;
        min-width: 60px !important;
        box-sizing: border-box !important;
    }

    .reset-key-btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .speed-slider-wrapper {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .speed-slider {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .key-info-hint {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        word-break: break-word !important;
    }

    .key-info-hint p {
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 0.78rem !important;
    }

    .ab-loop-buttons { gap: 0.6rem; }

    .ab-loop-btn-large {
        min-width: 60px;
        padding: 0.8rem;
        font-size: 0.9rem;
    }

    /* Music Player */
    .music-player-container { padding: 1.5rem; }

    .player-display {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .album-art {
        width: 220px;
        height: 220px;
        margin: 0 auto;
    }

    .now-playing-info h2 { font-size: 1.8rem; }

    .control-buttons { gap: 1.5rem; }
    .control-btn { width: 50px; height: 50px; font-size: 1.2rem; }
    .play-btn { width: 70px; height: 70px; font-size: 1.8rem; }
    .volume-slider { width: 150px; }

    .playlist-item {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .playlist-meta {
        width: 100%;
        justify-content: flex-start;
    }

    /* ═══════════════════════════════════════════════════════════
       SONG DETAIL PAGE — SPOTIFY-STYLE MOBILE REDESIGN
       ═══════════════════════════════════════════════════════════ */

    /* Page wrapper */
    .song-detail-page {
        top: 0 !important;
        left: 0 !important;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, #1e0a35 0%, #0a0514 55%, #080310 100%);
    }

    .song-detail-container {
        padding: 0;
        padding-bottom: 0.5rem;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Back button: sticky frosted-glass strip */
    .back-button {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        position: sticky;
        top: 0;
        z-index: 10;
        width: auto;
        margin: 0.6rem 1rem;
        padding: 0.45rem 1rem;
        border: 1px solid rgba(217, 70, 239, 0.35);
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        color: rgba(196, 181, 212, 0.85);
        background: rgba(14, 8, 28, 0.75);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        text-align: left;
        transition: color 0.2s, border-color 0.2s;
    }
    .back-button:hover, .back-button:active {
        background: rgba(14, 8, 28, 0.92);
        color: #d946ef;
        border-color: rgba(217, 70, 239, 0.7);
        transform: none;
    }

    /* Header: artwork full-width top, info centered below */
    .song-detail-header {
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-bottom: 0;
        padding: 0;
        text-align: center;
    }

    /* Artwork — full-width, properly centred */
    .song-detail-artwork {
        width: 100%;
        padding: 1.2rem 0.9rem 0.8rem;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .song-detail-artwork img {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 16px;
        display: block;
        box-shadow: 0 20px 56px rgba(217, 70, 239, 0.32), 0 6px 20px rgba(0,0,0,0.65);
        object-fit: cover;
        object-position: center;
    }

    /* Song info block */
    .song-detail-info {
        width: 100%;
        padding: 0 0.75rem;
        padding-top: 0.5rem;
        text-align: center;
    }

    /* Title: large, wrappable */
    .song-detail-title {
        font-size: clamp(1.35rem, 6vw, 1.9rem);
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 0.3rem;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        word-break: break-word;
        max-width: 100%;
    }

    /* Artist: muted */
    .song-detail-artist {
        font-size: 0.95rem;
        font-weight: 500;
        color: rgba(196, 181, 212, 0.6);
        margin-bottom: 1.2rem;
    }

    /* Action buttons: single flex row, icon + label stacked */
    .song-detail-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        justify-content: stretch;
        gap: 0.45rem;
        margin-bottom: 1.25rem;
        flex-wrap: nowrap;
        width: 100%;
        box-sizing: border-box;
    }

    .action-button {
        flex: 1 !important;
        min-width: 0;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.2rem;
        padding: 0.7rem 0.35rem !important;
        font-size: 0.68rem !important;
        font-weight: 700;
        min-height: 56px;
        border-radius: 14px !important;
        border-width: 1.5px !important;
        text-align: center;
        transition: transform 0.15s, background 0.2s;
    }
    .action-button:active { transform: scale(0.95) !important; }
    .action-button span { font-size: 1.25rem !important; line-height: 1; display: block; }
    .action-button.primary {
        flex: 1.5 !important;
        background: var(--primary, #d946ef) !important;
        border-color: var(--primary, #d946ef) !important;
        color: #fff !important;
        box-shadow: 0 4px 18px rgba(217, 70, 239, 0.45);
    }

    /* Stats — 2×2 grid so all labels & values show in full */
    .song-detail-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
        padding: 0.5rem 0 !important;
        margin: 0 0 1.1rem !important;
        border-radius: 14px !important;
        border: 1.5px solid rgba(168, 85, 247, 0.18) !important;
        background: rgba(255, 255, 255, 0.03) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .stat-item {
        text-align: center;
        padding: 0.55rem 0.4rem;
        border-right: 1px solid rgba(168, 85, 247, 0.14);
        border-bottom: 1px solid rgba(168, 85, 247, 0.10);
        overflow: hidden;
    }
    /* Remove bottom border on last row (items 3 & 4) */
    .stat-item:nth-child(3),
    .stat-item:nth-child(4) { border-bottom: none; }
    /* Remove right border on right-column items (2 & 4) */
    .stat-item:nth-child(2),
    .stat-item:nth-child(4) { border-right: none; }
    .stat-item .stat-value {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--primary, #d946ef);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .stat-item .stat-label {
        font-size: 0.6rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: rgba(196, 181, 212, 0.5);
        margin-top: 0.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Content area: single column, full-width */
    .song-detail-content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.6rem;
        margin-top: 0;
        padding: 0 0.5rem;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .song-detail-main {
        order: 1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Sidebar "Up Next": full-width card with scrollable list */
    .song-detail-sidebar {
        order: 2;
        padding: 1rem;
        position: static !important;
        max-height: none !important;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(168, 85, 247, 0.14);
        border-radius: 16px;
        overflow: hidden;
    }

    .similar-songs-list {
        max-height: 820px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 4px !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(217,70,239,0.4) transparent !important;
    }
    .similar-songs-list::-webkit-scrollbar { width: 3px; }
    .similar-songs-list::-webkit-scrollbar-thumb {
        background: rgba(217,70,239,0.4);
        border-radius: 4px;
    }

    .section-title-small { font-size: 1rem; font-weight: 700; margin-bottom: 0.7rem; color: var(--primary, #d946ef); }

    /* Lyrics */
    .lyrics-section   { padding: 1rem; margin-bottom: 0; border-radius: 16px; }
    .lyrics-text      { font-size: 0.92rem; line-height: 1.85; }

    /* Comments */
    .comments-section      { padding: 1rem; border-radius: 16px; }
    .comment-input-wrapper { flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
    .comment-input         { min-height: 70px; font-size: 1rem; padding: 0.8rem; border-radius: 10px; }
    .comment-submit-btn    { width: 100%; padding: 0.8rem; font-size: 0.9rem; min-height: 44px; border-radius: 10px; }
    .comments-list         { max-height: none; overflow-y: visible; }
    .comment-item          { padding: 0.8rem; border-radius: 10px; }
    .comment-time          { font-size: 0.75rem; }

    /* Similar songs */
    .similar-song-item   { padding: 0.6rem 0.5rem; min-height: 52px; border-radius: 10px; border: none; background: transparent; }
    .similar-song-item:hover, .similar-song-item:active { background: rgba(217,70,239,0.1); transform: none; }
    .similar-song-image  { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; }
    .similar-song-info   { min-width: 0; flex: 1; }
    .similar-song-title  { font-size: 0.88rem; font-weight: 600; max-width: none; }
    .similar-song-artist { font-size: 0.75rem; max-width: none; }

    /* Bottom Player - Mobile */
    .bottom-player-bar {
        left: 0;
        padding: 0.8rem 1rem;
        /* Add safe area inset for iPhones with home bar (notched devices) */
        padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
        position: fixed;
        overflow: visible;
    }

    /* Thin progress line on top */
    .bottom-player-bar::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 3px;
        width: var(--progress-percent, 0%);
        background: linear-gradient(90deg, var(--primary), var(--accent-red));
        border-radius: 0 3px 3px 0;
        z-index: 10;
        transition: width 0.1s linear, height 0.2s, box-shadow 0.2s;
    }

    .bottom-player-bar.mobile-dragging::before {
        height: 5px;
        box-shadow: 0 0 8px rgba(217, 70, 239, 0.7), 0 0 16px rgba(217, 70, 239, 0.3);
        top: -1px;
    }

    .bottom-player-bar.mobile-dragging::before,
    .bottom-player-bar.mobile-dragging::after {
        transition: none !important;
    }

    .bottom-player-bar::after {
        content: '';
        position: absolute;
        top: -4px;
        left: var(--progress-percent, 0%);
        transform: translateX(-50%);
        width: 11px;
        height: 11px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(217, 70, 239, 0.9);
        z-index: 11;
        opacity: 0;
        transition: opacity 0.2s, left 0.1s linear;
    }

    .bottom-player-bar.mobile-dragging::after { opacity: 1; }

    .bottom-player-content {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .bottom-player-song-info {
        flex: 1;
        min-width: 0;
        gap: 0.6rem;
        order: 1;
    }

    .bottom-player-artwork { width: 45px; height: 45px; flex-shrink: 0; }

    .bottom-player-text { flex: 1; min-width: 0; }

    .bottom-player-title {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 0.1rem;
    }

    .bottom-player-artist {
        font-size: 0.7rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bottom-player-controls-wrapper {
        flex-direction: row;
        gap: 0.5rem;
        flex-shrink: 0;
        width: auto;
        order: 2;
    }

    .bottom-player-controls { gap: 0.8rem; }

    .bottom-control-btn {
        font-size: 1.2rem;
        width: 35px;
        height: 35px;
        padding: 0.3rem;
    }

    .bottom-control-btn.play-btn {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .bottom-progress-wrapper { display: none; }
    .bottom-player-volume { display: none; }

    .bottom-player-bar .playback-speed-control,
    .bottom-player-bar .ab-loop-control {
        display: none !important;
    }

    .mobile-menu-overlay.show { display: block; }

    .music-dashboard { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
    .song-card-image { height: 150px; }
}