*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
    :root{
      /* Reckless · Black · White · Gold-on-hover */
      --bg:#000;--bg2:#0a0a0a;--bg3:#141414;
      --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.16);
      --cream:#ffffff;--cream2:#ffffff;--cream3:rgba(255,255,255,.72);
      --text:#ffffff;--text2:rgba(255,255,255,.72);--text3:rgba(255,255,255,.48);
      --white:#ffffff;--red:#ff4d4f;
      --accent:#D4AF37;--accent-soft:#E6C457;--accent-glow:rgba(212,175,55,.28);
      --seekbar:#ffffff;--seekbar-bg:rgba(255,255,255,.15);
      --sidebar-w:240px;--player-h:58px;
    }

    /* ========== Reckless global overrides ==========
       No transforms on click (was breaking the player).
       Sliding-gold bg micro-anim on button press instead. */
    *{-webkit-tap-highlight-color:transparent}
    :focus{outline:none}
    :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
    ::selection{background:var(--accent);color:#000}

    /* Button click feedback — a gold sheen sweeps across, no scale */
    .nav-item,.dd-item,.bnav-item,.topbar-app,.topbar-link,
    .pc-row,.btn-cta,.cta-primary,.primary-btn,
    .filter-btn,.profile-action,.dd-item,.create-btn,
    .pl-action-btn{
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }
    .nav-item::after,.dd-item::after,.bnav-item::after,
    .topbar-app::after,.topbar-link::after,
    .pc-row::after,
    .btn-cta::after,.cta-primary::after,.primary-btn::after,
    .filter-btn::after,.profile-action::after,
    .pl-action-btn::after{
      content:"";position:absolute;inset:0;z-index:-1;
      background:linear-gradient(90deg,
        rgba(212,175,55,0) 0%,
        rgba(212,175,55,.18) 50%,
        rgba(212,175,55,0) 100%);
      transform:translateX(-110%);
      transition:transform .45s cubic-bezier(.22,.61,.36,1);
      pointer-events:none;
    }
    .nav-item:active::after,.dd-item:active::after,.bnav-item:active::after,
    .topbar-app:active::after,.topbar-link:active::after,
    .pc-row:active::after,
    .btn-cta:active::after,.cta-primary:active::after,.primary-btn:active::after,
    .filter-btn:active::after,.profile-action:active::after,
    .pl-action-btn:active::after{transform:translateX(110%)}

    /* gold accent hovers */
    .nav-item:hover,.dd-item:hover,.bnav-item:hover{color:var(--accent) !important}
    .nav-item:hover .nav-ico,.dd-item:hover svg,.bnav-item:hover svg{color:var(--accent);opacity:1}
    a:hover{color:var(--accent)}

    /* large pill CTAs */
    .btn-cta,.cta-primary,.primary-btn,.topbar-app{
      border-radius:999px !important;
      padding:14px 30px;
      font-weight:700;
      letter-spacing:.02em;
      font-size:14px;
      background:#fff;color:#000;border:none;cursor:pointer;
      transition:all .25s cubic-bezier(.22,.61,.36,1);
    }
    .btn-cta:hover,.cta-primary:hover,.primary-btn:hover,.topbar-app:hover{
      background:var(--accent);color:#000;transform:translateY(-2px);
      box-shadow:0 8px 24px var(--accent-glow);
    }

    /* pill nav rows */
    .nav-item,.dd-item{border-radius:999px !important}
    .play-btn{border-radius:50% !important}

    /* strip stale borders */
    .sidebar,.topbar,.dropdown,.panel,.modal-card,.card{
      border-color:var(--border) !important;
    }

    /* CRITICAL — never scale inside the player or sliders */
    .retro-overlay,.retro-overlay *,
    input[type="range"],.retro-progress,.retro-progress *,
    .retro-vol,.retro-vol *,#audio-engine{
      transform:none !important;
    }
    /* Range inputs stay native scale */
    input[type="range"]::before{display:none !important}

    /* ===== retro-overlay (full-screen player) — retune to b/w/gold ===== */
    .retro-overlay,.retro-overlay::before{background:#000 !important}
    .retro-overlay .retro-art{background:linear-gradient(135deg,#1a1a1a 0%,#0a0a0a 100%) !important;box-shadow:0 24px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) !important}
    .retro-overlay .retro-art-initial{color:rgba(255,255,255,.92) !important;text-shadow:0 4px 24px rgba(0,0,0,.6) !important}
    .retro-overlay .retro-vinyl{background:radial-gradient(circle at center,#1a1a1a 0%,#0a0a0a 30%,#1a1a1a 32%,#000 65%,#000 100%) !important}
    .retro-overlay .retro-vinyl::after{background:radial-gradient(circle at center,var(--accent) 0%,#5a4418 60%,#1a1208 100%) !important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), 0 0 16px rgba(212,175,55,.32) !important}
    .retro-overlay .retro-waveform span{background:linear-gradient(180deg,#fff,rgba(255,255,255,.25)) !important}
    .retro-overlay .lcd-artist{color:rgba(255,255,255,.55) !important}
    .retro-overlay .lcd-time-row{color:rgba(255,255,255,.45) !important}
    .retro-overlay .retro-topbar-title{color:rgba(255,255,255,.85) !important}
    .retro-overlay .retro-icon-btn{color:rgba(255,255,255,.55) !important}
    .retro-overlay .retro-icon-btn:hover{background:rgba(255,255,255,.08) !important;color:var(--accent) !important}
    .retro-overlay .retro-icon-btn.liked{color:#ff6b8a !important}
    .retro-overlay .retro-track-actions .retro-icon-btn.featured{background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(212,175,55,.06)) !important;border:1px solid rgba(212,175,55,.28) !important;color:var(--accent) !important}
    .retro-overlay .retro-track-actions .retro-icon-btn.featured:hover{background:linear-gradient(135deg,rgba(212,175,55,.28),rgba(212,175,55,.12)) !important}
    .retro-overlay .retro-btn{color:rgba(255,255,255,.65) !important}
    .retro-overlay .retro-btn:hover{background:rgba(255,255,255,.08) !important;color:var(--accent) !important}
    .retro-overlay .retro-btn.active{color:var(--accent) !important}
    .retro-overlay .retro-btn.play{background:#fff !important;color:#000 !important;box-shadow:0 8px 28px rgba(255,255,255,.12) !important}
    .retro-overlay .retro-btn.play:hover{background:var(--accent) !important;box-shadow:0 12px 36px rgba(212,175,55,.36) !important}
    .retro-overlay .retro-tabs{border-bottom:1px solid rgba(255,255,255,.06) !important}
    .retro-overlay .retro-tab{color:rgba(255,255,255,.5) !important}
    .retro-overlay .retro-tab:hover{color:rgba(255,255,255,.85) !important}
    .retro-overlay .retro-tab.active{color:#fff !important;border-bottom-color:var(--accent) !important}
    .retro-overlay .retro-tab-count{background:rgba(255,255,255,.08) !important;color:rgba(255,255,255,.7) !important}
    .retro-overlay .retro-tab.active .retro-tab-count{background:rgba(212,175,55,.22) !important;color:var(--accent) !important}
    .retro-overlay .ayat-line{color:rgba(255,255,255,.32) !important}
    .retro-overlay .ayat-line:hover{color:rgba(255,255,255,.65) !important}
    .retro-overlay .ayat-line.active{color:#fff !important;text-shadow:0 0 30px rgba(212,175,55,.45) !important}
    .retro-overlay .ayat-line.upcoming{color:rgba(255,255,255,.48) !important}
    .retro-overlay .ayat-empty{color:rgba(255,255,255,.4) !important}
    .retro-overlay .queue-item:hover{background:rgba(255,255,255,.05) !important}
    .retro-overlay .queue-item.now{background:rgba(212,175,55,.10) !important}
    .retro-overlay .queue-item.now::before{background:var(--accent) !important}
    .retro-overlay .queue-title{color:rgba(255,255,255,.95) !important}
    .retro-overlay .queue-item.now .queue-title{color:var(--accent) !important}
    .retro-overlay .queue-artist{color:rgba(255,255,255,.5) !important}
    .retro-overlay .queue-dur{color:rgba(255,255,255,.4) !important}
    .retro-overlay .queue-now-bars span{background:var(--accent) !important}
    .retro-overlay .queue-section{color:rgba(255,255,255,.4) !important}
    .retro-overlay .retro-vol-slider{background:rgba(255,255,255,.18) !important}
    .retro-overlay .retro-vol-slider::-webkit-slider-thumb{background:#fff !important;box-shadow:0 0 0 2px rgba(212,175,55,.0) !important;transition:box-shadow .2s,transform .15s}
    .retro-overlay .retro-vol-slider:hover::-webkit-slider-thumb,
    .retro-overlay .retro-vol-slider:active::-webkit-slider-thumb{background:var(--accent) !important}
    .retro-overlay .retro-vol-ico{color:rgba(255,255,255,.55) !important}
    .retro-overlay .retro-vol-ico:hover{color:var(--accent) !important}
    .retro-overlay .retro-tab:hover,.retro-overlay .retro-tab.active{transform:none !important}
    /* ============================================== */

    html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow:hidden;max-width:100vw;overscroll-behavior:none}
    body{height:100vh;height:100dvh;max-width:100vw;background:var(--bg);color:var(--text);font-family:'Roboto',sans-serif;display:flex;overflow:hidden;overscroll-behavior:none;transition:background .4s,color .4s;width:100%;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
    body{animation:pageIn .9s cubic-bezier(.22,.61,.36,1) both}
    @keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    /* Splash screen for PWA opening — total ~0.9s (logo .55s in, brief hold, .35s fade) */
    #app-splash{position:fixed;inset:0;background:#000;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:splashOut .22s cubic-bezier(.4,0,.2,1) .15s forwards;pointer-events:none}
    #app-splash .splash-logo{font-family:'Roboto',sans-serif;font-size:42px;font-weight:900;color:#fff;letter-spacing:-1px;animation:splashLogo .3s cubic-bezier(.22,.61,.36,1) both}
    #app-splash .splash-sub{font-size:10px;color:var(--accent);letter-spacing:.4em;text-transform:uppercase;margin-top:8px;font-weight:700;animation:splashLogo .3s cubic-bezier(.22,.61,.36,1) .05s both}
    @keyframes splashLogo{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}
    @keyframes splashOut{to{opacity:0;visibility:hidden}}
    .page-out{animation:pageOut .35s cubic-bezier(.4,0,1,1) forwards!important}
    @keyframes pageOut{to{opacity:0;transform:scale(.97) translateY(-6px)}}

    /* SIDEBAR */
    .sidebar{width:var(--sidebar-w);height:100vh;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:100;transition:transform .3s ease,background .4s}
    .sidebar-brand{padding:22px 20px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .2s}
    .sidebar-brand:hover{opacity:.7}
    .sidebar-eye{font-size:8px;letter-spacing:.4em;color:var(--text3);text-transform:uppercase;margin-bottom:3px}
    .sidebar-name{font-family:'Roboto',sans-serif;font-size:19px;font-weight:700;color:var(--cream);letter-spacing:-.5px}
    .sidebar-name span{color:var(--text3);font-weight:400}
    .sidebar-nav{padding:12px 8px;flex:1;overflow-y:auto}
    .nav-label{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text3);padding:0 12px;margin:14px 0 5px;opacity:.8}
    .nav-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:5px;cursor:pointer;font-size:14px;color:var(--text2);transition:all .15s;border:none;background:none;width:100%;font-family:'Roboto',sans-serif;text-align:left}
    .nav-item:hover{background:var(--bg3);color:var(--text);transform:translateX(2px)}
    .nav-item.active{background:var(--bg3);color:var(--cream)}
    .nav-ico{width:15px;height:15px;flex-shrink:0;opacity:.5;transition:opacity .2s}
    .nav-item.active .nav-ico,.nav-item:hover .nav-ico{opacity:1}
    /* playlist items in sidebar */
    .nav-playlist{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:5px;cursor:pointer;font-size:12px;color:var(--text3);transition:all .15s;border:none;background:none;width:100%;font-family:'Roboto',sans-serif;text-align:left}
    .nav-playlist:hover{background:var(--bg3);color:var(--text2)}
    .nav-playlist-dot{width:6px;height:6px;border-radius:50%;background:var(--cream3);flex-shrink:0}
    .sidebar-footer{padding:10px 14px;border-top:1px solid var(--border)}
    .sidebar-user{display:flex;align-items:center;gap:9px;margin-bottom:10px}
    .u-avatar{width:30px;height:30px;border-radius:50%;background:var(--bg3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--cream2);flex-shrink:0}
    .u-info{flex:1;min-width:0}
    .u-name{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .u-role{font-size:10px;color:var(--text3);margin-top:1px}
    .logout-btn{background:none;border:none;color:var(--text3);cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .15s}
    .logout-btn:hover{color:var(--text)}
    .msa-credit{text-align:center;padding-top:8px;border-top:1px solid var(--border)}
    .msa-line1{font-size:9px;color:var(--text3);letter-spacing:.06em;opacity:.8}
    .msa-line2{font-family:'Roboto',sans-serif;font-size:10px;color:var(--text3);display:block;margin-top:2px;opacity:.6}
    .msa-line3{font-size:8px;color:var(--text3);letter-spacing:.18em;margin-top:2px;display:block;opacity:.4}

    /* MAIN */
    .main{margin-left:var(--sidebar-w);flex:1;height:100vh;height:100dvh;max-width:100vw;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-bottom:calc(var(--player-h) + 76px);position:relative;z-index:1;-webkit-overflow-scrolling:touch;background:var(--bg)}
    .main::-webkit-scrollbar{width:3px}
    .main::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

    /* TOPBAR */
    .topbar{position:sticky;top:0;z-index:50;background:rgba(14,11,8,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;gap:12px;transition:background .4s}
    .mobile-menu-btn{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:4px;flex-shrink:0}
    .back-btn{background:none;border:1px solid var(--border);border-radius:4px;color:var(--text3);font-family:'Roboto',sans-serif;font-size:11px;padding:5px 11px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s;flex-shrink:0}
    .back-btn:hover{border-color:var(--border2);color:var(--text2);transform:translateX(-1px)}
    .search-wrap{flex:1;max-width:340px;position:relative}
    .search-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none}
    .search-input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:'Roboto',sans-serif;font-size:13px;padding:8px 11px 8px 33px;outline:none;transition:border-color .2s}
    .search-input::placeholder{color:var(--text3)}
    .search-input:focus{border-color:var(--border2)}
    .profile-area{margin-left:auto;position:relative}
    .profile-btn{width:32px;height:32px;border-radius:50%;background:var(--bg3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--cream2);cursor:pointer;transition:all .2s;flex-shrink:0}
    .profile-btn:hover,.profile-btn.open{border-color:var(--cream3);color:var(--cream)}

    /* DROPDOWN */
    .dropdown{position:absolute;top:calc(100%+10px);right:0;width:210px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:6px;z-index:200;opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 12px 40px rgba(0,0,0,.6)}
    .dropdown.open{opacity:1;transform:none;pointer-events:all}
    .dd-user{padding:10px 12px;border-bottom:1px solid var(--border);margin-bottom:4px}
    .dd-name{font-size:13px;font-weight:500;color:var(--white)}
    .dd-email{font-size:10px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .dd-section{font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text3);padding:7px 12px 3px}
    .dd-item{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:5px;cursor:pointer;font-size:12px;color:var(--text2);transition:background .15s,color .15s;border:none;background:none;width:100%;font-family:'Roboto',sans-serif;text-align:left}
    .dd-item:hover{background:var(--bg3);color:var(--text)}
    .dd-divider{height:1px;background:var(--border);margin:4px 0}
    .theme-row{display:flex;align-items:center;gap:8px;padding:6px 12px 8px}
    .theme-dot{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .2s;flex-shrink:0}
    .theme-dot:hover{transform:scale(1.15)}
    /* Avatar upload */
    .profile-btn{position:relative}
    .avatar-upload-input{display:none}
    .avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}
    
    /* Artist SVG artwork styles */
    .artist-artwork{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
    .artist-artwork svg{position:absolute;inset:0;width:100%;height:100%}
    .artist-artwork-initial{position:relative;z-index:2;font-family:'Roboto',sans-serif;font-weight:700;opacity:.9}

    .theme-dot.active{border-color:var(--cream2)}
    .theme-dark{background:#131008}.theme-light{background:#ede5d5}.theme-cyan{background:#080f16}
    .theme-label{font-size:10px;color:var(--text3);margin-left:4px}

    /* PAGE CONTENT */
    .page-content{padding:24px 24px 8px}
    .greeting{margin-bottom:22px}
    .greeting-time{font-size:10px;color:var(--text3);letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px}
    .greeting-title{font-family:'Roboto',sans-serif;font-size:clamp(26px,5vw,36px);font-weight:700;color:var(--white);letter-spacing:-.5px}
    .greeting-sub{font-size:13px;color:var(--text2);margin-top:4px;font-weight:300}

    /* FILTERS */
    .filter-row{display:flex;gap:6px;margin-bottom:24px;flex-wrap:wrap}
    .filter-btn{background:none;border:1px solid var(--border);border-radius:20px;color:var(--text3);font-family:'Roboto',sans-serif;font-size:13px;font-weight:500;padding:7px 16px;cursor:pointer;transition:all .2s}
    .filter-btn:hover{border-color:var(--cream3);color:var(--text2);transform:translateY(-1px)}
    .filter-btn.active{background:var(--cream2);color:#0e0b08;border-color:var(--cream2);font-weight:600}

    /* SECTIONS */
    .section{margin-bottom:32px}
    .section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px}
    .section-title{font-family:'Roboto',sans-serif;font-size:19px;font-weight:700;color:var(--white)}
    .section-meta{font-size:11px;color:var(--text3);margin-top:2px}
    .see-all{font-size:10px;color:var(--text3);cursor:pointer;letter-spacing:.1em;text-transform:uppercase;transition:color .2s;background:none;border:none;font-family:'Roboto',sans-serif}
    .see-all:hover{color:var(--cream2)}

    /* RETRO PLAYER — fixed-box layout with right-side read-along/queue */
    .retro-overlay{position:fixed;inset:0;background:#000;z-index:300;opacity:0;pointer-events:none;transition:opacity .35s;backdrop-filter:blur(20px);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px}
    .retro-overlay.open{opacity:1;pointer-events:all}
    .retro-player{position:relative;z-index:301;width:100%;max-width:960px;height:100%;max-height:min(720px,100%);background:linear-gradient(180deg,rgba(20,16,10,.65) 0%,rgba(10,8,6,.55) 100%);border:1px solid rgba(220,190,130,.08);border-radius:22px;padding:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .35s;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(220,190,130,.04);display:grid;grid-template-columns:1fr 340px;grid-template-rows:1fr;overflow:hidden;transform:translateY(40px) scale(.98);opacity:0}
    .retro-overlay.open .retro-player{transform:translateY(0) scale(1);opacity:1}
    .retro-player{position:relative;z-index:3}
    .retro-left{position:relative;display:flex;flex-direction:column;padding:18px 26px 22px;overflow:hidden;min-width:0}
    .retro-right{position:relative;display:flex;flex-direction:column;background:rgba(8,6,4,.4);border-left:1px solid rgba(220,190,130,.06);overflow:hidden;min-height:0}
    .retro-topbar{display:flex;align-items:center;justify-content:space-between;padding:4px 0 14px;flex-shrink:0}
    .retro-chevron{background:none;border:none;color:rgba(220,190,130,.7);cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;transition:all .2s}
    .retro-chevron:hover{background:rgba(220,190,130,.08);color:var(--cream)}
    .retro-topbar-title{font-size:13px;font-weight:500;color:rgba(220,190,130,.85);letter-spacing:.04em;font-family:'Roboto',sans-serif}
    .retro-topmenu{display:flex;align-items:center;gap:6px}
    .retro-icon-btn{background:none;border:none;color:rgba(220,190,130,.55);cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}
    .retro-icon-btn:hover{background:rgba(220,190,130,.08);color:var(--cream)}
    .retro-icon-btn.liked{color:#e8546c}
    .retro-brand{display:none}
    /* Album art + vinyl */
    .retro-art-wrap{position:relative;display:flex;justify-content:center;align-items:center;margin:2px auto 18px;width:100%;max-width:260px;aspect-ratio:1;flex-shrink:0}
    .retro-art{width:78%;height:78%;border-radius:18px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:none;flex-shrink:0;background:linear-gradient(135deg,#3a2818 0%,#1a1208 100%);box-shadow:0 24px 60px rgba(0,0,0,.7),0 0 0 1px rgba(220,190,130,.06);z-index:2;margin:0}
    .retro-art::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 35% 25%,rgba(255,220,150,.18) 0%,transparent 50%);pointer-events:none}
    .retro-art-initial{font-family:'Roboto',sans-serif;font-size:56px;font-weight:700;opacity:.85;color:rgba(255,235,200,.9);letter-spacing:-2px;position:relative;z-index:1;text-shadow:0 4px 24px rgba(0,0,0,.5)}
    .retro-art.spinning-art{animation:artPulse 3s ease-in-out infinite}
    @keyframes artPulse{0%,100%{box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(220,190,130,.06)}50%{box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(220,190,130,.18),0 0 60px rgba(200,169,100,.12)}}
    .retro-vinyl{position:absolute;right:0;top:50%;transform:translate(35%,-50%);width:78%;height:78%;border-radius:50%;background:radial-gradient(circle at center,#1a1410 0%,#0a0806 30%,#1a1410 32%,#050402 65%,#0e0b08 100%);z-index:1;box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.04);animation:vinylSpin 8s linear infinite paused}
    .retro-vinyl::before{content:'';position:absolute;inset:8%;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0,transparent 2px,rgba(255,255,255,.025) 2px,rgba(255,255,255,.025) 3px)}
    .retro-vinyl::after{content:'';position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle at center,var(--cream2) 0%,#7a5630 60%,#3a2818 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 0 12px rgba(200,169,100,.2)}
    .retro-overlay.playing .retro-vinyl{animation-play-state:running}
    @keyframes vinylSpin{to{transform:translate(35%,-50%) rotate(360deg)}}
    /* Waveform */
    .retro-waveform{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:30px;margin:2px 0 10px;overflow:hidden;flex-shrink:0}
    .retro-waveform span{display:block;width:2px;background:linear-gradient(180deg,var(--cream2),rgba(200,169,100,.25));border-radius:1px;transition:opacity .25s,transform .25s}
    .retro-waveform span.dim{opacity:.18}
    /* LCD — title + artist large, centered */
    .lcd{background:transparent;border:none;border-radius:0;padding:0;margin-bottom:14px;position:relative;overflow:visible;text-align:center}
    .lcd::before{content:none}
    .lcd-label{display:none}
    .lcd-title{font-family:'Roboto',sans-serif;font-size:22px;font-weight:700;color:var(--white);letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;padding:0 12px}
    .lcd-title-inner{display:inline-block}
    .lcd-title-inner.scroll{animation:lcdScroll 8s linear infinite}
    @keyframes lcdScroll{0%{transform:translateX(0)}40%{transform:translateX(-50%)}50%{transform:translateX(-50%)}90%{transform:translateX(0)}100%{transform:translateX(0)}}
    .lcd-artist{font-size:14px;color:rgba(200,169,100,.7);margin-top:6px;font-family:'Roboto',sans-serif;font-weight:500;letter-spacing:.02em}
    .lcd-time-row{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:rgba(180,148,90,.55);font-family:'Roboto',sans-serif;letter-spacing:.04em;font-variant-numeric:tabular-nums;padding:0 4px}
    .retro-progress{height:6px;background:rgba(255,255,255,.14);border-radius:999px;margin:8px 0;cursor:pointer;position:relative;transition:height .15s}
    .retro-progress:hover{height:8px}
    .retro-progress-fill{height:100%;background:#fff;border-radius:999px;width:0%;transition:width .15s linear;position:relative}
    .retro-progress-fill::after{content:'';position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(212,175,55,.25);opacity:0;transition:opacity .2s}
    .retro-progress:hover .retro-progress-fill::after{opacity:1}
    .retro-progress:hover .retro-progress-fill{background:var(--accent)}
    /* Track action row (download/like/share) — like reference */
    .retro-track-actions{display:flex;align-items:center;justify-content:center;gap:18px;margin:14px 0 4px}
    .retro-track-actions .retro-icon-btn{width:44px;height:44px}
    .retro-track-actions .retro-icon-btn.featured{background:linear-gradient(135deg,rgba(212,184,112,.18),rgba(184,154,90,.08));border:1px solid rgba(212,184,112,.25);color:var(--cream)}
    .retro-track-actions .retro-icon-btn.featured:hover{background:linear-gradient(135deg,rgba(212,184,112,.28),rgba(184,154,90,.14));transform:translateY(-2px)}
    /* Big control row */
    .retro-btns{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0 8px}
    .retro-btn{width:46px;height:46px;border-radius:50%;background:transparent;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;color:rgba(220,190,130,.65);flex-shrink:0}
    .retro-btn:hover{background:rgba(220,190,130,.08);color:var(--cream);transform:translateY(-1px)}
    .retro-btn:active{transform:scale(.93)}
    .retro-btn.active{color:var(--cream)}
    .retro-btn.play{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#f4d488 0%,#c8a050 100%);border:none;color:#0e0b08;box-shadow:0 8px 28px rgba(200,169,100,.35),0 0 0 1px rgba(255,235,180,.2) inset}
    .retro-btn.play:hover{background:linear-gradient(135deg,#fae09a 0%,#d4b870 100%);transform:scale(1.04);box-shadow:0 12px 36px rgba(200,169,100,.45)}
    /* Right-side tabs */
    .retro-tabs{display:flex;padding:14px 16px 0;flex-shrink:0;gap:4px;border-bottom:1px solid rgba(220,190,130,.06)}
    .retro-tab{flex:1;background:none;border:none;color:rgba(220,190,130,.45);font-family:'Roboto',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.04em;padding:10px 6px 12px;cursor:pointer;transition:color .2s;border-bottom:2px solid transparent;margin-bottom:-1px}
    .retro-tab:hover{color:rgba(220,190,130,.75)}
    .retro-tab.active{color:var(--cream);border-bottom-color:var(--cream2)}
    .retro-tab-count{display:inline-block;background:rgba(220,190,130,.1);color:rgba(220,190,130,.7);font-size:10px;font-weight:700;padding:1px 7px;border-radius:30px;margin-left:5px;vertical-align:1px}
    .retro-tab.active .retro-tab-count{background:rgba(220,190,130,.18);color:var(--cream)}
    .retro-panel{display:none;flex:1;min-height:0;flex-direction:column}
    .retro-panel.active{display:flex}

    /* Queue / Up Next */
    .retro-queue{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 10px 24px;scrollbar-width:thin;scrollbar-color:rgba(220,190,130,.1) transparent}
    .retro-queue::-webkit-scrollbar{width:4px}
    .retro-queue::-webkit-scrollbar-thumb{background:rgba(220,190,130,.15);border-radius:2px}
    /* Read-along ayat list — same scroll treatment as the queue; without
       these rules the scroller has no height constraint or overflow, so it
       can't be scrolled at all (and the JS auto-scroll no-ops). */
    .retro-ayat{flex:1;min-height:0;display:flex;flex-direction:column}
    .retro-ayat-scroller{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 14px 24px;scrollbar-width:thin;scrollbar-color:rgba(220,190,130,.1) transparent}
    .retro-ayat-scroller::-webkit-scrollbar{width:4px}
    .retro-ayat-scroller::-webkit-scrollbar-thumb{background:rgba(220,190,130,.15);border-radius:2px}
    .queue-section{font-size:9px;letter-spacing:.18em;color:rgba(220,190,130,.4);text-transform:uppercase;font-weight:700;padding:12px 10px 6px}
    .queue-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;cursor:pointer;transition:background .2s;position:relative}
    .queue-item:hover{background:rgba(220,190,130,.05)}
    .queue-item.now{background:rgba(220,190,130,.08)}
    .queue-item.now::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--cream2);border-radius:2px}
    .queue-thumb{width:38px;height:38px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Roboto',sans-serif;font-size:15px;font-weight:700;color:rgba(255,235,200,.85);position:relative;overflow:hidden}
    .queue-info{flex:1;min-width:0}
    .queue-title{font-size:13px;font-weight:600;color:rgba(240,224,192,.95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
    .queue-item.now .queue-title{color:var(--cream)}
    .queue-artist{font-size:11.5px;color:rgba(220,190,130,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
    .queue-dur{font-size:11px;color:rgba(220,190,130,.4);font-variant-numeric:tabular-nums;flex-shrink:0}
    .queue-now-bars{display:flex;align-items:flex-end;gap:1.5px;height:14px;width:14px;flex-shrink:0}
    .queue-now-bars span{width:2px;background:var(--cream2);border-radius:1px;animation:queueBar .9s ease-in-out infinite}
    .queue-now-bars span:nth-child(1){height:40%;animation-delay:0s}
    .queue-now-bars span:nth-child(2){height:80%;animation-delay:.15s}
    .queue-now-bars span:nth-child(3){height:55%;animation-delay:.3s}
    @keyframes queueBar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
    .queue-empty{text-align:center;color:rgba(220,190,130,.35);font-size:13px;padding:30px 18px;font-style:italic}
    .retro-extras{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:12px 4px 0;border-top:1px solid rgba(220,190,130,.06);flex-wrap:wrap}
    .retro-like{display:none}
    .retro-speed{background:rgba(220,190,130,.05);border:1px solid rgba(220,190,130,.15);border-radius:30px;color:rgba(220,190,130,.7);cursor:pointer;padding:6px 12px;font-size:11px;font-family:'Roboto',sans-serif;font-weight:600;transition:all .2s}
    .retro-speed:hover{border-color:rgba(220,190,130,.3);color:var(--cream)}
    .retro-vol{display:flex;align-items:center;gap:8px;flex:1;justify-content:center;min-width:140px}
    .retro-vol-ico{color:rgba(220,190,130,.55);background:none;border:none;cursor:pointer;transition:color .2s;padding:4px;display:flex;align-items:center}
    .retro-vol-ico:hover{color:var(--cream)}
    .retro-vol-slider{-webkit-appearance:none;appearance:none;width:100px;height:3px;background:rgba(220,190,130,.15);border-radius:2px;outline:none;cursor:pointer}
    .retro-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--cream2);cursor:pointer;box-shadow:0 0 6px rgba(200,169,100,.4);transition:transform .15s}
    .retro-vol-slider::-webkit-slider-thumb:hover{transform:scale(1.3)}
    .retro-vol-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--cream2);cursor:pointer;border:none}
    .retro-close{display:none}
    /* sleep timer badge */
    .sleep-badge{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:rgba(220,190,130,.08);border:1px solid rgba(220,190,130,.18);border-radius:30px;padding:4px 12px;font-size:11px;color:var(--cream2);font-family:'Roboto',sans-serif;letter-spacing:.04em;font-weight:500;display:none;z-index:5}
    .sleep-badge.visible{display:block}

    /* MINI BAR */
    .mini-bar{position:fixed;bottom:0;left:0;right:0;height:66px;z-index:200;background:rgba(12,9,6,.96);backdrop-filter:blur(24px);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:12px;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
    .mini-bar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(200,169,100,.12),transparent)}
    .mini-bar.visible{transform:translateY(0)}
    .mini-bar-thumb{width:36px;height:36px;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--border);font-family:'Roboto',sans-serif;font-size:14px;font-weight:700}
    .mini-bar-info{flex:1;min-width:0;cursor:pointer}
    .mini-bar-title{font-size:13px;font-weight:600;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .mini-bar-artist{font-size:11px;color:var(--text2);margin-top:2px}
    .mini-bar-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
    .mini-ctrl{background:none;border:none;color:var(--text3);cursor:pointer;padding:5px;transition:color .2s,transform .15s}
    .mini-ctrl:hover{color:var(--cream2);transform:scale(1.1)}
    .mini-play{width:34px;height:34px;border-radius:50%;background:var(--cream2);color:#0e0b08;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:all .15s}
    .mini-play:hover{background:var(--cream);transform:scale(1.08)}
    .mini-bar-open{background:none;border:1px solid var(--border);border-radius:4px;color:var(--text3);font-size:10px;font-family:'Roboto',sans-serif;padding:3px 8px;cursor:pointer;transition:all .2s;flex-shrink:0}
    .mini-bar-open:hover{border-color:var(--border2);color:var(--text2)}
    .mini-bar-progress{position:absolute;bottom:0;left:0;height:3px;background:#fff;pointer-events:none;transition:width .3s linear;box-shadow:0 0 4px rgba(255,255,255,.5)}

    /* PLAYLIST PANEL */
    .panel{position:fixed;top:0;right:0;height:100vh;width:320px;background:var(--bg2);border-left:1px solid var(--border);z-index:250;transform:translateX(110%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}
    .panel.open{transform:translateX(0)}
    .panel-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
    .panel-title{font-family:'Roboto',sans-serif;font-size:16px;font-weight:700;color:var(--white)}
    .panel-close{background:none;border:none;color:var(--text3);cursor:pointer;padding:4px;transition:color .2s}
    .panel-close:hover{color:var(--text)}
    .panel-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px;-webkit-overflow-scrolling:touch}
    .panel-footer{padding:12px;border-top:1px solid var(--border);flex-shrink:0}

    /* Playlist create */
    .playlist-card{background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:12px;margin-bottom:8px;transition:border-color .2s;cursor:pointer}
    .playlist-card:hover{border-color:var(--border2)}
    .playlist-card.active-pl{border-color:var(--cream3)}
    .playlist-card-name{font-size:15px;font-weight:600;color:var(--white);margin-bottom:4px}
    .playlist-card-meta{font-size:13px;color:var(--text2)}
    .playlist-card-actions{display:flex;gap:6px;margin-top:8px}
    .pl-action-btn{background:none;border:1px solid var(--border2);border-radius:4px;color:var(--text2);font-size:13px;font-family:'Roboto',sans-serif;padding:7px 14px;cursor:pointer;transition:all .2s}
    .pl-action-btn:hover{border-color:var(--border2);color:var(--text2)}
    .pl-action-btn.danger:hover{border-color:var(--red);color:var(--red)}
    .create-playlist-input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:'Roboto',sans-serif;font-size:13px;padding:9px 11px;outline:none;margin-bottom:8px;transition:border-color .2s}
    .create-playlist-input:focus{border-color:var(--border2)}
    .create-playlist-input::placeholder{color:var(--text3)}
    .create-btn{width:100%;background:var(--cream2);color:#0e0b08;border:none;border-radius:5px;font-family:'Roboto',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px;cursor:pointer;transition:all .2s}
    .create-btn:hover{background:var(--cream);transform:translateY(-1px)}

    /* Living Imaginations CSS removed */
    /* In-app back button */
    .app-back{display:none;background:none;border:1px solid var(--border);border-radius:6px;color:var(--text2);cursor:pointer;padding:6px 10px;align-items:center;gap:5px;font-family:'Roboto',sans-serif;font-size:13px;transition:all .2s;flex-shrink:0}
    .app-back:hover{border-color:var(--cream3);color:var(--cream);transform:translateX(-1px)}
    .app-back.show{display:flex}
    /* ── Profile photo cropper modal ─────────────────────── */
    .pic-crop-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:900;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px);padding:18px}
    .pic-crop-overlay.open{display:flex;animation:pageIn .22s ease}
    .pic-crop-card{background:#0f0f0f;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px;width:360px;max-width:calc(100vw - 32px)}
    .pic-crop-title{font-size:17px;font-weight:700;color:#fff;margin-bottom:4px}
    .pic-crop-sub{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:16px;line-height:1.5}
    .pic-crop-stage{position:relative;width:320px;height:320px;margin:0 auto;background:#000;border-radius:10px;overflow:hidden;touch-action:none;user-select:none;cursor:grab;max-width:100%}
    .pic-crop-stage:active{cursor:grabbing}
    .pic-crop-stage canvas{display:block;width:100%;height:100%}
    .pic-crop-mask{position:absolute;inset:0;pointer-events:none;
      box-shadow:0 0 0 9999px rgba(0,0,0,.55);border-radius:50%;
      border:2px solid rgba(255,255,255,.65)}
    .pic-crop-zoom{display:flex;align-items:center;gap:10px;margin:14px 0 4px;font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
    .pic-crop-zoom input[type=range]{flex:1;accent-color:var(--accent)}
    .pic-crop-actions{display:flex;gap:8px;margin-top:14px}
    .pic-crop-actions .profile-action{flex:1}

    /* Sleep timer modal */
    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:400;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
    .modal-overlay.open{display:flex}
    .modal{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:28px;width:300px;max-width:calc(100vw - 32px)}
    .modal-title{font-family:'Roboto',sans-serif;font-size:18px;font-weight:700;color:var(--white);margin-bottom:6px}
    .modal-sub{font-size:12px;color:var(--text3);margin-bottom:20px;font-weight:300}
    .timer-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
    .timer-opt{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:10px 6px;text-align:center;cursor:pointer;transition:all .2s;font-family:'Roboto',sans-serif;font-size:12px;color:var(--text2)}
    .pl-pick-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s}
    .pl-pick-item:hover,.pl-pick-item:active{border-color:var(--cream2);background:var(--bg2)}
    .pl-pick-name{font-size:15px;font-weight:500;color:var(--white)}
    .pl-pick-count{font-size:12px;color:var(--text3)}
    .pl-pick-add{background:var(--cream2);color:#0e0b08;border:none;border-radius:4px;font-size:12px;font-weight:700;padding:6px 12px;cursor:pointer;font-family:'Roboto',sans-serif}
    .timer-opt:hover{border-color:var(--cream3);color:var(--cream2)}
    .timer-opt.active{background:var(--cream2);color:#0e0b08;border-color:var(--cream2);font-weight:600}
    .timer-opt-label{font-size:10px;color:inherit;margin-top:2px;opacity:.7}
    .modal-cancel{width:100%;background:none;border:1px solid var(--border);border-radius:5px;color:var(--text3);font-family:'Roboto',sans-serif;font-size:11px;padding:9px;cursor:pointer;transition:all .2s}
    .modal-cancel:hover{border-color:var(--border2);color:var(--text2)}


    /* Card action button */
    .card-action-btn{background:rgba(255,255,255,.06);border:1px solid var(--border2);border-radius:4px;color:var(--text2);cursor:pointer;padding:4px 6px;transition:all .2s;display:flex;align-items:center;justify-content:center}
    .card-action-btn:hover{background:rgba(255,255,255,.1);color:var(--cream2)}

    /* Card action menu */
    .card-menu{position:fixed;background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:6px;z-index:500;min-width:180px;box-shadow:0 8px 32px rgba(0,0,0,.6);display:none;animation:pageIn .2s ease}
    .card-menu.open{display:block}
    .card-menu-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text);transition:background .15s;border:none;background:none;width:100%;font-family:'Roboto',sans-serif;text-align:left;font-weight:400}
    .card-menu-item:hover,.card-menu-item:active{background:var(--bg3)}
    .card-menu-title{font-size:11px;color:var(--text3);padding:6px 14px 4px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border);margin-bottom:4px}
    /* Context menu */
    .ctx-menu{position:fixed;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:5px;z-index:500;min-width:180px;box-shadow:0 8px 32px rgba(0,0,0,.5);display:none}
    .ctx-menu.open{display:block}
    .ctx-item{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:5px;cursor:pointer;font-size:12px;color:var(--text2);transition:background .15s,color .15s;border:none;background:none;width:100%;font-family:'Roboto',sans-serif;text-align:left}
    .ctx-item:hover{background:var(--bg3);color:var(--text)}
    .ctx-divider{height:1px;background:var(--border);margin:3px 0}

    /* foundation bar — persistent bottom nav across the whole app.
       On desktop it sits to the right of the sidebar; on mobile it spans full width. */
    .bottom-nav{display:block;position:fixed;bottom:0;left:var(--sidebar-w);right:0;background:rgba(8,7,6,.98);border-top:1px solid rgba(255,255,255,.08);z-index:150;padding:4px 0 calc(env(safe-area-inset-bottom,0px) + 4px)}
    .bottom-nav-inner{display:flex;justify-content:space-around}
    .bnav-item{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:6px 14px;border-radius:10px;color:rgba(255,255,255,.45);transition:color .15s;background:none;border:none;font-family:'Roboto',sans-serif}
    .bnav-item:hover,.bnav-item.active{color:#fff}
    .bnav-item.active svg{color:var(--accent)}
    .bnav-item span{font-size:10px;letter-spacing:.02em;text-transform:none;font-weight:600}

    /* empty + skeleton */
    .empty-state{text-align:center;padding:44px 20px;color:var(--text3)}
    .empty-state h3{font-family:'Roboto',sans-serif;font-size:17px;color:var(--text2);margin:12px 0 6px}
    .empty-state p{font-size:12px;line-height:1.7;font-weight:300}
    .skeleton{background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);background-size:200% 100%;animation:shimmer 1.6s infinite;border-radius:3px}
    @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

    .page-footer{text-align:center;padding:20px 20px 6px;border-top:1px solid var(--border)}
    .footer-brand{font-family:'Roboto',sans-serif;font-size:13px;color:var(--text3);display:block}
    .footer-founder{font-size:10px;color:var(--border2);letter-spacing:.1em;text-transform:uppercase;margin-top:3px;display:block}
    .footer-year{font-size:9px;color:var(--border);letter-spacing:.1em;margin-top:2px;display:block}

    .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:99;backdrop-filter:blur(2px)}
    /* ── PROFILE CARD ── */
    .profile-card-overlay{position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:700;display:none;align-items:center;justify-content:center;backdrop-filter:blur(14px);padding:20px}
    .profile-card-overlay.open{display:flex}
    .profile-card{background:#0a0a0a;border:none;border-radius:22px;width:100%;max-width:440px;max-height:calc(100vh - 40px);overflow-y:auto;overflow-x:hidden;animation:pageIn .3s ease;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
    .profile-card::-webkit-scrollbar{width:6px}
    .profile-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
    .profile-card-banner{height:120px;position:relative;display:flex;align-items:flex-end;padding:0 20px 0;background:linear-gradient(135deg,#1a1a1a 0%,#0a0a0a 100%)}
    .profile-card-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,175,55,.10),transparent 60%)}
    .profile-banner-pattern{position:absolute;inset:0;overflow:hidden;opacity:.4}
    .profile-avatar-wrap{position:absolute;bottom:-30px;left:20px;width:70px;height:70px;border-radius:50%;border:3px solid var(--bg2);overflow:hidden;background:var(--bg3);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.5)}
    .profile-avatar-wrap img{width:100%;height:100%;object-fit:cover;border-radius:50%}
    .profile-avatar-initials{font-family:'Roboto',sans-serif;font-size:26px;font-weight:700;color:var(--cream2)}
    .profile-card-body{padding:44px 20px 20px}
    .profile-card-name{font-family:'Roboto',sans-serif;font-size:20px;font-weight:700;color:var(--white);letter-spacing:-.3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .profile-card-email{font-size:12px;color:var(--text3);margin-top:3px}
    /* Tier badge */
    .tier-badge{display:none;align-items:center;gap:5px;padding:3px 10px;border-radius:30px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:'Roboto',sans-serif;line-height:1}
    .tier-badge.visible{display:inline-flex}
    .tier-badge .tier-dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
    .tier-badge.silver{background:linear-gradient(135deg,rgba(200,210,220,.18),rgba(170,180,200,.1));color:#d0d8e0;border:1px solid rgba(200,210,220,.25)}
    .tier-badge.gold{background:linear-gradient(135deg,rgba(220,184,122,.22),rgba(184,154,90,.12));color:#f0d088;border:1px solid rgba(220,184,122,.35)}
    .tier-badge.founder{background:linear-gradient(135deg,rgba(192,57,43,.25),rgba(192,57,43,.12));color:#ff9070;border:1px solid rgba(192,57,43,.4)}
    .profile-btn .tier-dot-ind{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:var(--cream);box-shadow:0 0 8px var(--cream2),0 0 0 2px var(--bg);display:none}
    .profile-btn.has-tier .tier-dot-ind{display:block}
    .profile-btn.tier-gold .tier-dot-ind{background:#f0d088}
    .profile-btn.tier-silver .tier-dot-ind{background:#d0d8e0}
    .profile-btn.tier-founder .tier-dot-ind{background:#ff9070}
    .profile-card-since{font-size:11px;color:var(--text3);margin-top:2px;font-style:italic}
    .profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:16px 0}
    .profile-stat{background:var(--bg3);padding:14px 8px;text-align:center}
    .profile-stat-num{font-family:'Roboto',sans-serif;font-size:22px;font-weight:700;color:var(--cream);display:block}
    .profile-stat-label{font-size:10px;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;margin-top:3px;display:block}
    .profile-card-actions{display:flex;gap:8px;margin-top:4px}
    .profile-action{flex:1;padding:10px;border-radius:7px;font-family:'Roboto',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;border:none}
    .profile-action.primary{background:var(--cream2);color:#0e0b08}
    .profile-action.primary:hover{background:var(--cream)}
    .profile-action.secondary{background:var(--bg3);color:var(--text2);border:1px solid var(--border2)}
    .profile-action.secondary:hover{color:var(--text)}
    .avatar-opt{width:44px;height:44px;border-radius:10px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;flex-shrink:0;transition:all .2s}
    .avatar-opt:hover,.avatar-opt.active{border-color:var(--cream2);transform:scale(1.1)}
    .profile-card-close{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.4);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.7);transition:all .2s}
    .profile-card-close:hover{background:rgba(0,0,0,.6);color:#fff}


    @media(max-width:768px){
      /* Lock the page so only .main scrolls — kills infinite horizontal+vertical bounce */
      html,body{overflow:hidden;position:fixed;inset:0;width:100%;height:100%;max-width:100vw;overscroll-behavior:none;touch-action:pan-y}
      body{font-size:16px;font-weight:400}
      .sidebar{transform:translateX(-100%)}
      .sidebar.open{transform:translateX(0)}
      .sidebar-overlay.open{display:block}
      .main{margin-left:0;height:100%;width:100%;max-width:100vw;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:180px}
      /* Every direct child of main capped at viewport width so nothing pushes h-scroll */
      .main > *{max-width:100vw}
      .mobile-menu-btn{display:flex}
      .bottom-nav{display:block;left:0}
      .back-btn{display:none}     /* Home lives in the foundation bar on mobile */
      .back-btn span{display:none}
      .page-content{padding:16px 14px 14px;max-width:100vw}
      .topbar{padding:10px 12px}
      .panel{width:100%;max-width:100vw}
      /* Full-screen, single-column player on mobile */
      .retro-overlay{padding:0}
      .retro-player{width:100%;max-width:100vw;height:100%;max-height:100%;border-radius:0;grid-template-columns:1fr;grid-template-rows:1fr;border:none;background:linear-gradient(180deg,rgba(14,11,8,.55) 0%,rgba(6,4,10,.62) 100%)}
      .retro-left{padding:14px 20px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
      .retro-right{display:none;border-left:none;border-top:1px solid rgba(220,190,130,.06)}
      /* When right-panel is toggled on mobile, slide it over */
      .retro-overlay.show-panel .retro-left{display:none}
      .retro-overlay.show-panel .retro-right{display:flex;grid-row:1}
      .retro-art-wrap{max-width:62vw;margin:6px auto 18px}
      .retro-art-initial{font-size:64px}
      .retro-btn{width:46px;height:46px}
      .retro-btn.play{width:68px;height:68px}
      .retro-btns{gap:14px;margin:14px 0 4px}
      .lcd-title{font-size:24px;font-weight:700}
      .lcd-artist{font-size:14px;font-weight:500}
      .lcd-time-row{font-size:12.5px;font-weight:500}
      /* Mobile-only "Show panel" toggle (read-along/queue) */
      .mobile-panel-toggle{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 4px;background:rgba(220,190,130,.05);border:1px solid rgba(220,190,130,.15);border-radius:30px;color:rgba(220,190,130,.8);font-size:12px;font-weight:600;padding:8px 18px;cursor:pointer;letter-spacing:.04em;font-family:'Roboto',sans-serif}
      .mobile-panel-back{display:flex;align-items:center;gap:6px;background:none;border:none;color:rgba(220,190,130,.65);font-family:'Roboto',sans-serif;font-size:12.5px;font-weight:600;padding:14px 16px 6px;cursor:pointer}
      .retro-extras{justify-content:center}
    }
    /* Tablet narrow desktop: keep two-column but smaller right panel */
    @media(min-width:769px) and (max-width:1024px){
      .retro-player{max-width:880px;grid-template-columns:1fr 300px}
    }
    @media(min-width:769px){
      .mobile-panel-toggle,.mobile-panel-back{display:none}
      .mini-bar{padding:0 14px;height:74px;bottom:60px}
      .mini-bar-title{font-size:15.5px;font-weight:700}
      .mini-bar-artist{font-size:13px;font-weight:500}
      .mini-play{width:44px;height:44px}
      .mini-ctrl svg{width:20px;height:20px}
      .filter-btn{font-size:14px;font-weight:600;padding:9px 18px}
      .filter-row{gap:10px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;max-width:100vw}
      .filter-row::-webkit-scrollbar{display:none}
      .filter-btn{flex-shrink:0}
      .greeting-title{font-size:30px;font-weight:700;letter-spacing:-.5px}
      .section-title{font-size:22px;font-weight:700;letter-spacing:-.3px}
      .section-meta{font-size:12.5px;font-weight:500}
      .search-input{font-size:16px;font-weight:500;padding:12px 14px 12px 38px}
      .bnav-item{padding:7px 12px}
      .bnav-item svg{width:25px;height:25px}
      .bnav-item span{font-size:11.5px;font-weight:600;letter-spacing:.02em}
      .bottom-nav{padding:7px 0 max(10px,env(safe-area-inset-bottom))}
      .player-right{display:none}
      /* Web users get an always-visible, grabbable seek handle */
      .retro-progress{height:8px}
      .retro-progress-fill::after{opacity:1;width:16px;height:16px;right:-8px;background:var(--accent);box-shadow:0 0 0 4px rgba(212,175,55,.22),0 2px 6px rgba(0,0,0,.4)}
      .retro-progress:hover{height:10px}
      .mini-bar-progress{height:4px}
      .nav-item{padding:14px 12px;font-size:16px;font-weight:500}
      .dd-item{padding:13px 14px;font-size:15px;font-weight:500}
      .card-menu-item{padding:14px 16px;font-size:15px;font-weight:500}
      .ctx-item{padding:13px 14px;font-size:14px;font-weight:500}
      .pl-action-btn{padding:11px 18px;font-size:14.5px;font-weight:600;min-height:44px}
      .create-playlist-input{font-size:16px;padding:14px}
      .mem-textarea{font-size:16px;height:114px;font-weight:400}
      .mem-save-btn{padding:14px;font-size:14px;font-weight:700;min-height:48px;letter-spacing:.04em}
      .mem-action-btn{padding:11px 14px;font-size:13.5px;font-weight:600;min-height:44px}
      .mem-card-text{font-size:15.5px;font-weight:400;line-height:1.55}
      .npicker-item{padding:13px 10px;min-height:54px}
      .npicker-title{font-size:15px;font-weight:600}
      .npicker-artist{font-size:12.5px;font-weight:500}
      .npicker-search{font-size:15px;padding:11px 14px}
      .pl-pick-item{padding:16px}
      .pl-pick-name{font-size:16.5px;font-weight:600}
      .panel-title{font-size:17px;font-weight:700}
      .u-name{font-size:13.5px;font-weight:600}
      .dd-name{font-size:14px;font-weight:600}
      .dd-email{font-size:11px;font-weight:500}
    }
    @media(max-width:420px){
      .retro-btns{gap:8px}
      .retro-btn{width:50px;height:50px}
      .retro-btn.play{width:64px;height:64px}
      .greeting-title{font-size:27px;font-weight:700}
      .section-title{font-size:20px;font-weight:700}
      .card-title{font-size:14.5px;font-weight:700}
    }