@font-face {
      font-family: 'RacingEnergy';
      src: url('../RacingEnergy-Regular.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    :root {
      --bg:#0c0c0c; --bg2:#151515; --bg3:#1e1e1e; --border:#2a2a2a;
      --text:#f0f0f0; --muted:#999; --dimmed:#555;
      --radius:14px; --player-h:80px; --nav-h:64px; --sidebar-w:220px;
      --accent:#C94010; --accent2:#E05020; --accent-fg:#fff;
      --accent-play:#585858; --accent-play2:#484848; --accent-play-fg:#c0c0c0;
      --green:#22c55e;
    }
    body.color-mode { --accent-play:#FF5E1A; --accent-play2:#FF8C42; --accent-play-fg:#fff; }

    /* ─── UI THEMA'S ─── */
    body.ui-winamp {
      --bg:#0d0d0d; --bg2:#111111; --bg3:#1a1a1a; --border:#003a0f;
      --text:#00ff41; --muted:#007a1f; --dimmed:#004010;
      --accent:#00cc33; --accent2:#00ff41; --accent-fg:#000;
      --accent-play:#006618; --accent-play2:#009922; --accent-play-fg:#000;
      --ui-font:'Courier New',monospace; --radius:4px;
    }
    body.ui-winamp.color-mode { --accent-play:#00ff41; --accent-play2:#66ff88; --accent-play-fg:#000; }
    body.ui-winamp *:not(.torch-logo-text) { font-family:'Courier New',monospace !important; }
    body.ui-winamp .screen { background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,65,.015) 2px,rgba(0,255,65,.015) 4px); }

    body.ui-wmp {
      --bg:#070d1a; --bg2:#0e1628; --bg3:#162038; --border:#263a6a;
      --text:#c8d8ff; --muted:#4a6a9a; --dimmed:#1a2a4a;
      --accent:#3a6ad0; --accent2:#5a8ae0; --accent-fg:#fff;
      --accent-play:#1a3a80; --accent-play2:#2a5ab0; --accent-play-fg:#fff;
      --radius:6px;
    }
    body.ui-wmp.color-mode { --accent-play:#5a8ae0; --accent-play2:#8aacf0; --accent-play-fg:#fff; }
    body.ui-wmp .app-header { background:linear-gradient(180deg,#101e38 0%,#070d1a 100%); }
    body.ui-wmp .bottom-nav { background:linear-gradient(180deg,#0e1628,#070d1a); border-top:1px solid #263a6a; }

    body.ui-itunes {
      --bg:#ebebeb; --bg2:#e0e0e0; --bg3:#d4d4d4; --border:#c0c0c0;
      --text:#1a1a1a; --muted:#666; --dimmed:#aaa;
      --accent:#0070c9; --accent2:#2090e9; --accent-fg:#fff;
      --accent-play:#555; --accent-play2:#777; --accent-play-fg:#fff;
      --radius:10px;
    }
    body.ui-itunes.color-mode { --accent-play:#0070c9; --accent-play2:#2090e9; --accent-play-fg:#fff; }
    body.ui-itunes .torch-logo-text { color:var(--text) !important; }
    body.ui-itunes .screen { background:var(--bg); }
    body.ui-itunes .app-header { background:linear-gradient(180deg,#e8e8e8,#d8d8d8); border-bottom:1px solid #bbb; }
    body.ui-itunes .bottom-nav { background:linear-gradient(180deg,#e0e0e0,#d0d0d0); border-top:1px solid #bbb; }
    body.ui-itunes .nav-label { color:#555; }
    body.ui-itunes .section-title { color:#888; }

    body.ui-cassette {
      --bg:#150c04; --bg2:#1e1208; --bg3:#2a1a0a; --border:#4a3010;
      --text:#e8c87a; --muted:#7a5a1a; --dimmed:#3a2808;
      --accent:#d4a44a; --accent2:#f0c870; --accent-fg:#1a0f05;
      --accent-play:#5a3a08; --accent-play2:#8a5a10; --accent-play-fg:#1a0f05;
      --radius:8px;
    }
    body.ui-cassette.color-mode { --accent-play:#d4a44a; --accent-play2:#f0c870; --accent-play-fg:#1a0f05; }
    body.ui-cassette *:not(.torch-logo-text) { font-family:'Courier New',monospace !important; }

    *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;}
    input,textarea,[contenteditable]{user-select:text;-webkit-user-select:text;}
    html{overscroll-behavior:none;}
    body{
      font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
      background:var(--bg);color:var(--text);
      min-height:100vh;min-height:100dvh;max-width:430px;margin:0 auto;
      position:relative;overflow-x:hidden;
      overscroll-behavior:none;
      -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    }
    .screen{display:none;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--bg);}
    .screen.active{display:flex;}

    /* ─── TORCH LOGO FRAME ─── */
    .torch-logo-frame{
      display:flex;align-items:center;justify-content:center;
      padding:0;border:none;
      cursor:pointer;transition:opacity .2s;
      text-decoration:none;width:100%;
    }
    .torch-logo-frame:hover{opacity:0.75;}
    .torch-logo-text{
      font-size:clamp(28px,8vw,52px);font-weight:normal;letter-spacing:0.08em;
      color:var(--text);text-transform:uppercase;
      font-family:'RacingEnergy','Impact','Arial Black',sans-serif;
      width:100%;text-align:center;
    }

    /* ─── LOGIN ─── */
    #screen-login{
      align-items:center;justify-content:center;padding:40px 32px;
      background:radial-gradient(ellipse at 50% 15%,#1c0c00 0%,var(--bg) 65%);
    }
    /* ── Membership onboarding ── */
    #screen-membership{
      align-items:center;justify-content:flex-start;
      background:radial-gradient(ellipse at 50% 0%,#1c0c00 0%,var(--bg) 60%);
      overflow-y:auto;
    }
    .membership-wrap{
      width:100%;max-width:430px;padding:40px 20px 0;
      display:flex;flex-direction:column;gap:16px;
    }
    .membership-logo{text-align:center;margin-bottom:4px;}
    .membership-hd{font-size:22px;font-weight:800;color:var(--text);text-align:center;text-wrap:balance;}
    .membership-sub{font-size:13px;color:var(--muted);text-align:center;line-height:1.6;max-width:300px;margin:0 auto;}
    .ms-card{
      background:var(--bg2);border:1px solid var(--border);border-radius:18px;
      padding:20px;cursor:pointer;position:relative;overflow:hidden;
      transition:border-color .2s, transform .12s;
    }
    .ms-card:active{transform:scale(0.98);}
    .ms-card-featured{border-color:var(--accent);}
    .ms-card-god{background:linear-gradient(145deg,#130f00,#1c1600);border-color:#6b4e00;}
    .ms-gold-glow{position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(200,146,10,.25) 0%,transparent 70%);pointer-events:none;}
    .ms-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
    .ms-name{font-size:16px;font-weight:800;color:var(--text);margin-bottom:3px;}
    .ms-tagline{font-size:11px;color:var(--dimmed);font-style:italic;}
    .ms-price-tag{font-size:20px;font-weight:800;color:var(--text);white-space:nowrap;flex-shrink:0;}
    .ms-price-tag span{font-size:11px;font-weight:500;color:var(--muted);}
    .ms-price-accent{color:var(--accent);}
    .ms-desc{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:14px;}
    .ms-btn{width:100%;padding:14px;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s;}
    .ms-btn:active{opacity:.75;}
    .ms-btn-primary{background:var(--accent);color:#fff;}
    .ms-btn-ghost{background:var(--bg3);color:var(--text);border:1px solid var(--border);}
    .ms-btn-god{background:#c8920a;color:#0a0800;}
    /* ── Dev Test screen ── */
    #screen-devtest{align-items:center;justify-content:flex-start;overflow-y:auto;background:var(--bg);}
    .devtest-wrap{width:100%;max-width:430px;padding:48px 20px 0;display:flex;flex-direction:column;gap:10px;}
    .devtest-header{margin-bottom:8px;}
    .devtest-label{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
    .devtest-title{font-size:24px;font-weight:800;color:var(--text);margin-bottom:6px;}
    .devtest-sub{font-size:13px;color:var(--muted);line-height:1.55;}
    .devtest-section-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--dimmed);padding-top:6px;}
    .devtest-flow-btn{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;transition:border-color .15s,background .15s;}
    .devtest-flow-btn:active{background:var(--bg3);}
    .devtest-flow-btn:hover{border-color:#444;}
    .devtest-flow-primary{border-color:var(--accent);}
    .devtest-flow-primary .devtest-flow-name{color:var(--accent);}
    .devtest-flow-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px;}
    .devtest-flow-desc{font-size:12px;color:var(--muted);line-height:1.45;}
    .login-logo{display:flex;flex-direction:column;align-items:center;margin-bottom:52px;}
    .login-logo p{font-size:12px;color:var(--muted);letter-spacing:1.5px;margin-top:8px;text-transform:uppercase;}
    .login-form{width:100%;display:flex;flex-direction:column;gap:14px;}
    .input-group{display:flex;flex-direction:column;gap:6px;}
    .input-group label{font-size:11px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;}
    .input-group input{
      background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);
      padding:14px 16px;font-size:16px;color:var(--text);outline:none;transition:border-color .2s;
    }
    .input-group input:focus{border-color:#FF5E1A;}
    .btn-primary{
      background:#FF5E1A;color:#fff;border:none;border-radius:var(--radius);
      padding:16px;font-size:16px;font-weight:700;cursor:pointer;margin-top:8px;
      transition:opacity .2s;letter-spacing:.5px;
    }
    .btn-primary:active{opacity:.8;}
    .btn-primary:disabled{opacity:.45;cursor:not-allowed;}
    .auth-error{color:#e05540;font-size:13px;display:none;padding:0 2px;margin-top:-4px;}
    .auth-error.visible{display:block;}
    #screen-register{align-items:flex-start;justify-content:flex-start;padding:0;background:radial-gradient(ellipse at 50% 15%,#1c0c00 0%,var(--bg) 65%);}
    #screen-register .scrollable{padding:40px 32px;}
    .btn-ghost{
      background:transparent;color:var(--muted);border:1px solid var(--border);
      border-radius:var(--radius);padding:14px;font-size:14px;cursor:pointer;
      transition:color .2s,border-color .2s;
    }
    .btn-ghost:active{color:var(--text);border-color:#FF5E1A;}
    .login-divider{display:flex;align-items:center;gap:12px;margin:2px 0;}
    .login-divider span{color:var(--dimmed);font-size:12px;}
    .login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border);}

    /* ─── APP HEADER ─── */
    .app-header{padding:52px 20px 16px;background:var(--bg);position:sticky;top:0;z-index:10;}
    .app-header-inner{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:36px;}
    .app-header-inner .torch-logo-text{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;}
    .header-avatar{position:relative;z-index:2;}
    .header-avatar{
      width:36px;height:36px;border-radius:50%;background:var(--accent);
      display:flex;align-items:center;justify-content:center;
      font-weight:700;font-size:14px;cursor:pointer;color:var(--accent-fg);
      transition:background-color .15s,color .15s;
    }
    .now-playing-dot{
      width:6px;height:6px;border-radius:50%;background:var(--accent);
      transition:background-color .15s;animation:dotPulse 1.4s ease-in-out infinite;display:none;
    }
    body.color-mode .now-playing-dot{display:block;}
    @keyframes dotPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.5);opacity:.6;}}

    /* ─── SCROLLABLE ─── */
    .scrollable{flex:1;overflow-y:auto;padding:0;-webkit-overflow-scrolling:touch;}
    .section{padding:20px 20px 0;}
    .section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:14px;}

    /* ─── FEATURED CARD ─── */
    .featured-card{
      border-radius:18px;overflow:hidden;position:relative;height:200px;
      background:#111;cursor:pointer;margin-bottom:20px;
    }
    .featured-glow{
      position:absolute;right:-20px;top:-20px;width:200px;height:200px;border-radius:50%;
      background:radial-gradient(circle,rgba(255,94,26,0) 0%,transparent 70%);
      transition:background .15s;pointer-events:none;
    }
    body.color-mode .featured-glow{background:radial-gradient(circle,rgba(255,94,26,.25) 0%,transparent 70%);}
    .featured-card-content{
      position:absolute;bottom:0;left:0;right:0;padding:20px;
      background:linear-gradient(transparent,rgba(0,0,0,.75));
    }
    .featured-badge{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:6px;transition:color .15s;}
    .featured-title{font-size:22px;font-weight:800;margin-bottom:4px;text-wrap:balance;}
    .featured-sub{font-size:13px;color:var(--muted);}
    .play-btn-float{
      position:absolute;bottom:20px;right:20px;width:44px;height:44px;
      background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;
      cursor:pointer;transition:background-color .15s;
    }

    /* ─── HORIZONTAL SCROLL ─── */
    .h-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;}
    .h-scroll::-webkit-scrollbar{display:none;}

    /* ─── ALBUM CARD ─── */
    .album-card{flex:0 0 130px;cursor:pointer;}
    .album-art{
      width:130px;height:130px;border-radius:12px;background:var(--bg3);
      margin-bottom:8px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
    }
    .album-art img{width:100%;height:100%;object-fit:cover;display:block;}
    .album-art-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;}
    .album-card-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .album-card-artist{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

    /* ─── FEATURED CAROUSEL ─── */
    .feat-carousel{
      position:relative;border-radius:18px;overflow:hidden;
      height:200px;cursor:pointer;margin-bottom:12px;
    }
    .feat-track{
      display:flex;height:100%;will-change:transform;
    }
    .feat-slide{
      flex:0 0 100%;position:relative;
      background:linear-gradient(160deg,#1c1030 0%,#0d1525 55%,#0a1020 100%);
      overflow:hidden;
    }
    .feat-slide .feat-img{
      position:absolute;inset:0;width:100%;height:100%;
      object-fit:cover;opacity:0;pointer-events:none;
      transition:opacity 0.4s ease;
    }
    .feat-slide .feat-img.loaded{opacity:.85;}
    .feat-gradient{
      position:absolute;inset:0;z-index:1;pointer-events:none;
      background:linear-gradient(to bottom, transparent 35%, rgba(0,0,0,0.78));
    }
    .feat-overlay{
      position:absolute;inset:0;z-index:2;pointer-events:none;
      transition:opacity 0.22s ease;
    }
    .feat-dots{display:flex;justify-content:center;gap:7px;padding-bottom:4px;}
    .feat-dot{
      width:6px;height:6px;border-radius:50%;
      background:var(--dimmed);cursor:pointer;
      transition:background .2s, width .2s, border-radius .2s;
    }
    .feat-dot.active{background:var(--accent);width:18px;border-radius:3px;}

    /* ─── PLAYLIST CARD ─── */
    .playlist-card{flex:0 0 130px;cursor:pointer;}
    .playlist-art{
      width:130px;height:130px;border-radius:12px;
      margin-bottom:8px;display:flex;align-items:center;justify-content:center;
      overflow:hidden;
    }
    .playlist-card-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .playlist-card-meta{font-size:11px;color:var(--muted);margin-top:2px;}

    /* ─── TRENDING VIBES ─── */
    .vibe-sub{font-size:12px;color:var(--muted);margin-top:-6px;margin-bottom:14px;}
    .vibe-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    .vibe-card{
      background:var(--bg2);border-radius:12px;padding:14px 12px;
      border:1px solid var(--border);
      position:relative;overflow:hidden;
    }
    .vibe-card::before{
      content:'';position:absolute;top:-24px;right:-24px;
      width:80px;height:80px;border-radius:50%;
      background:radial-gradient(circle,var(--vibe-a) 0%,transparent 70%);
      opacity:0.35;pointer-events:none;
    }
    .vibe-label{font-size:11px;font-weight:700;color:var(--text);margin-bottom:10px;line-height:1.35;}
    .vibe-bar-wrap{height:3px;background:rgba(255,255,255,0.1);border-radius:3px;margin-bottom:8px;overflow:hidden;}
    .vibe-bar{height:100%;background:linear-gradient(90deg,var(--vibe-a),var(--vibe-b));border-radius:inherit;}
    .vibe-delta{font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;}
    .vibe-delta.up{color:#4cd964;}
    .vibe-delta.neutral{color:var(--muted);}
    .vibe-delta.down{color:#ff3b30;}

    /* ─── TRACK MENU QUICK ACTIONS ─── */
    .track-menu-actions{display:flex;gap:10px;padding:12px 16px 6px;}
    .tm-action-btn{
      flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
      padding:13px 10px;border-radius:12px;border:none;cursor:pointer;
      font-size:14px;font-weight:600;
      background:var(--bg3);color:var(--text);transition:opacity .15s;
    }
    .tm-action-btn.primary{background:var(--accent);color:#fff;}
    .tm-action-btn:active{opacity:0.75;}

    /* ─── TRACK ROW ─── */
    /* ─── VIP CARDS ─── */
    .vip-cards-row{
      display:flex; gap:14px; padding:0 0 32px;
    }
    .vip-flip-wrap{
      flex:1; max-width:160px; aspect-ratio:0.63; perspective:900px; cursor:pointer;
    }
    /* Override flip-card-back defaults for VIP */
    .vip-flip-wrap .flip-card-back{
      padding:0; justify-content:flex-start; text-align:left;
    }

    /* Shared face styles */
    .vip-face{
      position:absolute; inset:0; border-radius:18px; overflow:hidden;
      display:flex; flex-direction:column;
      box-shadow:0 16px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.07);
    }
    /* Holographic shimmer */
    .vip-face::after{
      content:''; pointer-events:none;
      position:absolute; inset:0; z-index:10;
      background:linear-gradient(125deg,
        transparent 25%, rgba(255,255,255,.06) 38%,
        rgba(255,255,255,.13) 50%, rgba(255,255,255,.06) 62%,
        transparent 75%);
      background-size:300% 100%;
      animation:vipShine 5s ease-in-out infinite;
    }
    @keyframes vipShine{
      0%,100%{background-position:150% 0;}
      50%{background-position:-50% 0;}
    }

    /* Front face layout */
    .vip-front{ padding:16px 14px 14px; justify-content:space-between; }
    .vip-front-top{ display:flex; justify-content:space-between; align-items:center; }
    .vip-logo{ font-family:'RacingEnergy',sans-serif; font-size:16px; letter-spacing:.12em; }
    .vip-badge{
      font-size:7px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
      padding:3px 7px; border-radius:100px;
    }
    .vip-front-mid{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:12px 0 8px; }
    .vip-artist-name{ font-size:22px; font-weight:900; line-height:1.1; letter-spacing:-.01em; }
    .vip-tour{ font-size:9px; font-weight:600; letter-spacing:.05em; opacity:.6; margin-top:5px; line-height:1.4; }
    .vip-front-bot{ display:flex; flex-direction:column; gap:2px; }
    .vip-chip{
      width:28px; height:20px; border-radius:4px;
      background:linear-gradient(135deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,.08) 100%);
      border:1px solid rgba(255,255,255,.2); margin-bottom:8px;
    }
    .vip-card-num{ font-size:9px; letter-spacing:.15em; opacity:.45; font-weight:600; }
    .vip-holder{ font-size:10px; font-weight:700; letter-spacing:.06em; opacity:.75; }
    .vip-valid-row{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:4px; }
    .vip-valid-label{ font-size:6px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; opacity:.4; }
    .vip-valid-val{ font-size:9px; font-weight:700; }
    .vip-flip-hint{ font-size:7px; opacity:.3; letter-spacing:.5px; text-align:right; }

    /* Back face layout */
    .vip-back{ padding:16px 14px 14px; justify-content:space-between; align-items:center; }
    .vip-back-stripe{
      width:calc(100% + 28px); height:32px; margin:0 -14px;
      background:rgba(0,0,0,.55);
    }
    .vip-qr-area{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
    .vip-qr-area svg{ border-radius:6px; display:block; }
    .vip-qr-label{ font-size:7px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; opacity:.4; }
    .vip-back-bot{ width:100%; }
    .vip-back-label{ font-size:6px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; opacity:.4; margin-bottom:2px; }
    .vip-back-val{ font-size:10px; font-weight:700; }

    /* Card 1 — Crimson/Gold */
    .vip-crimson{ background:linear-gradient(170deg,#2a0808 0%,#420e0e 45%,#2c1000 80%,#180600 100%); color:#f5d9c0; border:1px solid rgba(180,60,10,.3); }
    .vip-crimson .vip-logo{ color:#c8800a; }
    .vip-crimson .vip-badge{ background:rgba(180,60,10,.2); color:#d4884a; border:1px solid rgba(180,60,10,.4); }
    .vip-crimson .qr-bg{ fill:#f0d5b8; }
    .vip-crimson .qr-fg{ fill:#240808; }

    /* Card 2 — Electric Navy */
    .vip-electric{ background:linear-gradient(170deg,#010810 0%,#051220 45%,#091830 80%,#020b1c 100%); color:#bdd8ff; border:1px solid rgba(40,110,255,.25); }
    .vip-electric .vip-logo{ color:#3a88ff; }
    .vip-electric .vip-badge{ background:rgba(40,100,255,.15); color:#70aaff; border:1px solid rgba(40,100,255,.35); }
    .vip-electric .qr-bg{ fill:#bdd8ff; }
    .vip-electric .qr-fg{ fill:#010810; }

    /* ─── NAV FADE ANIMATION ─── */
    .screen.nav-transition{
      position:fixed;inset:0;min-height:100vh;min-height:100dvh;
      will-change:transform,opacity;
    }

    .e-tag{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:3px;background:var(--dimmed);color:var(--bg);font-size:9px;font-weight:800;line-height:1;margin-left:6px;vertical-align:middle;flex-shrink:0;}
    .track-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s,filter .15s;-webkit-tap-highlight-color:transparent;}
    /* hover alleen op apparaten met een echte muis — voorkomt iOS Safari
       'sticky hover': daar toont de eerste tap de hover-state in plaats van
       de click-handler te triggeren */
    @media (hover:hover){
      .track-row:hover{background:var(--bg3);}
    }
    .track-row:last-child{border-bottom:none;}
    /* tap-feedback: korte puls zodat de gebruiker altijd respons ziet,
       ook als de track al speelt en playTrack niets nieuws doet */
    .track-row.click-pulse{ animation:trackPulse 220ms ease-out; }
    @keyframes trackPulse{
      0%   { transform:scale(1);    background:transparent; }
      40%  { transform:scale(.985); background:rgba(255,255,255,.10); }
      100% { transform:scale(1);    background:transparent; }
    }
    .track-num{width:20px;text-align:center;font-size:13px;color:var(--dimmed);}
    .track-art{
      width:44px;height:44px;border-radius:8px;background:var(--bg3);
      display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden;
    }
    .track-art img{width:100%;height:100%;object-fit:cover;}
    /* Hover-play-knop op klein artwork (desktop): ronde knop centraal, verschijnt bij
       hover. Klik = direct afspelen; ernaast klikken gaat naar de weergave (bubbelt). */
    .feed-art, .track-art{position:relative;}
    .art-play-btn{
      position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;
      background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer;
      display:flex;align-items:center;justify-content:center;padding:0;
      opacity:0;transition:opacity .14s,transform .14s,background .14s;z-index:3;
      -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    }
    @media (hover:hover){
      .feed-art:hover .art-play-btn, .track-art:hover .art-play-btn{opacity:1;}
      .art-play-btn:hover{background:rgba(0,0,0,.82);transform:scale(1.1);}
    }
    @media (hover:none){ .art-play-btn{display:none;} }
    .track-info{flex:1;min-width:0;}
    .track-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .track-artist{font-size:12px;color:var(--muted);}
    /* inline-block + max-width: alleen de artiestnaam-tekst is klikbaar (→ artiest),
       de rest van de rij valt door naar de play-handler. Voorkomt dat de hele
       onderste regel een 'ga naar artiest'-tapval is. */
    .track-artist-link{cursor:pointer;transition:color .15s;display:inline-block;max-width:100%;vertical-align:top;}
    .track-artist-link:hover{color:var(--text);text-decoration:underline;}
    /* Op mobiel (touch) is de artiestnaam in track-/release-rijen NIET klikbaar:
       de tik valt door naar de rij (= afspelen). Naar de artiest navigeer je op
       mobiel alleen via het Now Playing-scherm (.np-artist, aparte handler). */
    @media (hover: none) and (pointer: coarse) {
      .track-artist-link{pointer-events:none;}
    }
    /* Header-artiest op release/album/single-detail: WÉL klikbaar (ook mobiel) —
       de detail-header is geen play-tapval, dus geen conflict met afspelen. */
    .detail-artist-link{cursor:pointer;transition:color .15s;}
    .detail-artist-link:hover{color:var(--text);text-decoration:underline;}
    .track-duration{font-size:12px;color:var(--dimmed);}

    /* ─── CD SINGLES (Mijn Ontdekkingen) ─── */
    .singles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 20px;}
    .single-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;}
    .cd-disc{
      width:90px;height:90px;border-radius:50%;overflow:hidden;position:relative;
      box-shadow:0 2px 16px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.06);
    }
    .cd-disc img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
    .cd-hole{
      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      width:22%;height:22%;border-radius:50%;
      background:var(--bg);border:1.5px solid rgba(255,255,255,.15);z-index:2;
    }
    .single-name{font-size:11px;font-weight:600;text-align:center;color:var(--text);line-height:1.3;}
    .single-artist{font-size:10px;color:var(--muted);text-align:center;}

    /* ─── ARTIST BANNER CARD ─── */
    .artist-banner-card{
      position:relative;border-radius:14px;overflow:hidden;
      height:80px;cursor:pointer;margin-bottom:10px;
    }
    .ab-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
    .ab-overlay{
      position:absolute;inset:0;
      background:linear-gradient(to right,transparent 25%,rgba(12,12,12,.92) 75%);
    }
    .ab-name{
      position:absolute;right:16px;top:50%;transform:translateY(-50%);
      font-size:15px;font-weight:700;color:#fff;text-align:right;
    }
    .ab-sub{position:absolute;right:16px;top:calc(50% + 16px);font-size:11px;color:rgba(255,255,255,.5);}

    /* ─── PLAYLIST FULL-BG CARD ─── */
    /* ─── PLAYLIST BANNER CARD (Collectie) ─── */
    .playlist-banner-card{
      position:relative;border-radius:14px;overflow:hidden;
      height:90px;cursor:pointer;margin-bottom:10px;
    }
    .pb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
    .pb-overlay{
      position:absolute;inset:0;
      background:linear-gradient(to top,rgba(0,0,0,.80) 0%,rgba(0,0,0,.15) 60%,transparent 100%);
    }
    .pb-name{
      position:absolute;left:14px;bottom:20px;
      font-size:15px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);
    }
    .pb-sub{position:absolute;left:14px;bottom:6px;font-size:11px;color:rgba(255,255,255,.6);}

    /* ─── PLAYLIST COVER CARDS ─── */
    .pl-cover-grid{
      display:grid;grid-template-columns:1fr 1fr;
      gap:20px 14px;padding:0 20px 24px;
    }
    .pl-cover-card{
      position:relative;aspect-ratio:1;overflow:hidden;
      border-radius:14px 14px 2px 2px;cursor:pointer;
    }
    .pl-cover-card img{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
    }
    .pl-cover-card::after{
      content:'';position:absolute;bottom:0;left:0;right:0;height:75%;
      background:linear-gradient(to top, var(--bg) 0%, rgba(0,0,0,.5) 55%, transparent 100%);
      pointer-events:none;
    }
    .pl-cover-name{
      position:absolute;bottom:10px;left:10px;right:10px;
      font-size:13px;font-weight:800;color:#fff;
      z-index:1;line-height:1.25;
      text-shadow:0 1px 8px rgba(0,0,0,.7);
    }
    .pl-cover-sub{
      position:absolute;bottom:-1px;left:10px;
      font-size:10px;color:rgba(255,255,255,.5);z-index:1;
    }


    /* ─── SIDEBAR PLAYLIST BANNER ─── */
    .sb-playlist-card{
      position:relative;height:44px;border-radius:10px;overflow:hidden;
      cursor:pointer;margin:0 10px 4px;flex-shrink:0;
    }
    .sb-playlist-card img{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    }
    .sb-playlist-card::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(to right, var(--bg) 0%, var(--bg) 38%, rgba(0,0,0,.4) 62%, transparent 90%);
      pointer-events:none;
    }
    .sb-playlist-card-name{
      position:absolute;top:50%;left:14px;right:10px;transform:translateY(-50%);
      font-size:14px;font-weight:500;color:var(--text);
      z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      transition:color .15s;
    }
    .sb-playlist-card:hover .sb-playlist-card-name{color:var(--text);}

    .sb-artist-card{
      position:relative;height:44px;border-radius:10px;overflow:hidden;
      cursor:pointer;margin:0 10px 4px;flex-shrink:0;
    }
    .sb-artist-card img{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center;
    }
    .sb-artist-card::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(to right, transparent 20%, rgba(0,0,0,.7) 60%, var(--bg) 100%);
      pointer-events:none;
    }
    .sb-artist-card-name{
      position:absolute;top:50%;right:14px;left:10px;transform:translateY(-50%);
      font-size:14px;font-weight:500;color:var(--text);
      z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      text-align:right;transition:color .15s;
    }
    .sb-artist-card:hover .sb-artist-card-name{color:var(--text);}

    .sb-album-card{
      position:relative;height:44px;border-radius:10px;overflow:hidden;
      cursor:pointer;margin:0 10px 4px;flex-shrink:0;background:var(--bg3);
    }
    .sb-album-card img{
      position:absolute;right:0;top:0;height:100%;width:52px;
      object-fit:cover;
    }
    .sb-album-card::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(to right,var(--bg3) 52%,rgba(0,0,0,.25) 78%,transparent 100%);
      pointer-events:none;
    }
    .sb-album-card-name{
      position:absolute;top:50%;left:14px;right:58px;transform:translateY(-50%);
      font-size:14px;font-weight:500;color:var(--text);
      z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      transition:color .15s;
    }
    .sb-album-card:hover .sb-album-card-name{color:var(--text);}

    .mob-ontdek-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:10px;}
    .mob-ontdek-chips::-webkit-scrollbar{display:none;}
    .mob-ontdek-search{margin-bottom:8px;}
    .mob-ontdek-search input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:9px 16px;color:var(--text);font-size:14px;outline:none;font-family:inherit;box-sizing:border-box;}
    .mob-ontdek-search input::placeholder{color:var(--dimmed);}
    .mob-ontdek-search input:focus{border-color:var(--accent);}
    .mob-ontdek-cards{padding:0 10px;}
    /* Hoogte + radius voor alle kaarten op mobiel */
    .mob-ontdek-cards .sb-album-card,
    .mob-ontdek-cards .sb-artist-card,
    .mob-ontdek-cards .sb-playlist-card{height:64px;margin:0 0 6px;border-radius:12px;}
    /* Album-kaart op mobiel: vierkant thumbnail rechts, donkere bg (geen grijs) */
    .mob-ontdek-cards .sb-album-card{background:var(--bg2);}
    .mob-ontdek-cards .sb-album-card img{position:absolute;right:0;top:0;height:100%;width:64px;object-fit:cover;}
    .mob-ontdek-cards .sb-album-card::after{background:linear-gradient(to right,var(--bg2) 56%,rgba(0,0,0,.1) 82%,transparent 100%);}
    /* Twee-regel tekst in album- en artist-/playlist-kaarten */
    .mob-card-text{position:absolute;top:50%;left:14px;right:76px;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;}
    .mob-card-title{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .mob-card-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .mob-ontdek-cards .sb-artist-card-name,.mob-ontdek-cards .sb-playlist-card-name{font-size:15px;}
    /* Singles: rij met rond artwork + twee regels */
    .mob-single-row{display:flex;align-items:center;gap:14px;padding:0 14px;height:64px;cursor:pointer;border-radius:12px;margin:0 0 4px;transition:background .15s;touch-action:manipulation;}
    .mob-single-row:active{background:var(--bg3);}
    .mob-single-row-art{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;}
    .mob-single-row-art img{width:100%;height:100%;object-fit:cover;}
    .mob-single-row-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
    .mob-single-row-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .mob-single-row-artist{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

    /* ─── SURPRISE BUTTONS ─── */
    .surprise-btns{display:flex;flex-direction:column;gap:10px;padding:0 20px 24px;}
    .surprise-btn{
      display:flex;align-items:center;gap:14px;
      background:var(--bg2);border:1px solid var(--border);border-radius:14px;
      padding:14px 16px;cursor:pointer;color:var(--text);
      text-align:left;width:100%;transition:background .15s,border-color .15s;
    }
    .surprise-btn:hover{background:var(--bg3);border-color:#555;}
    .surprise-icon{flex-shrink:0;width:32px;display:flex;align-items:center;justify-content:center;color:var(--accent);}
    .surprise-label{font-size:14px;font-weight:700;display:block;line-height:1.2;}
    .surprise-sub{font-size:11px;color:var(--muted);display:block;margin-top:2px;}

    /* ─── FILTER CHIPS ─── */
    .filter-tabs{display:flex;gap:8px;padding:4px 20px 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
    .filter-tabs::-webkit-scrollbar{display:none;}
    .ftab{
      padding:6px 14px;border-radius:100px;font-size:12px;font-weight:600;
      cursor:pointer;white-space:nowrap;background:var(--bg3);color:var(--muted);
      border:1.5px solid var(--border);transition:background .15s,color .15s,border-color .15s;
      flex-shrink:0;user-select:none;
    }
    .ftab:hover{background:var(--bg2);color:var(--text);border-color:#444;}
    #ftab-alle:not(.active){background:var(--bg3);color:var(--text);border-color:#555;font-size:16px;padding:4px 12px;}
    .ftab.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);transition:background-color .15s,color .15s,border-color .15s;}

    /* ─── ARTIEST FULL-BG CARD ─── */
    .artist-bg-list{display:flex;flex-direction:column;gap:10px;padding:0 20px;}
    .artist-bg-card{position:relative;border-radius:14px;overflow:hidden;height:90px;cursor:pointer;}
    .artist-bg-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center;}
    .artist-bg-overlay{position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.85) 65%,#000 100%);}
    .artist-bg-name{position:absolute;right:16px;top:50%;transform:translateY(-65%);font-size:16px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);text-align:right;}
    .artist-bg-sub{position:absolute;right:16px;top:50%;transform:translateY(20%);font-size:11px;color:rgba(255,255,255,.6);text-align:right;}

    /* ─── EP / ALBUM GRID ─── */
    .release-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 20px 16px;}
    .release-card{cursor:pointer;}
    .release-art{width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--bg3);margin-bottom:8px;}
    .release-art img{width:100%;height:100%;object-fit:cover;}
    .release-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .release-artist{font-size:12px;color:var(--muted);margin-top:2px;}
    .release-meta{font-size:11px;color:var(--dimmed);margin-top:2px;}
    #artiest-discografie.release-grid{grid-template-columns:repeat(4,1fr);gap:10px;}
    #artiest-discografie .release-art{border-radius:7px;margin-bottom:5px;}
    #artiest-discografie .release-title{font-size:11px;}
    #artiest-discografie .release-artist{font-size:10px;margin-top:1px;}

    /* sectietitel binnen ontdekkingen */
    .od-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--muted);padding:20px 20px 10px;}

    /* ─── MINI PLAYER ─── */
    .mini-player{
      position:fixed;bottom:calc(var(--nav-h) + 10px);left:50%;transform:translateX(-50%);
      width:152px;
      height:30px;
      z-index:20;cursor:pointer;overflow:visible;
      transition:width 0.42s cubic-bezier(0.4,0,0.2,1), height 0.38s cubic-bezier(0.4,0,0.2,1);
    }
    .mini-player.active{ width:calc(100vw - 20px); }
    .mini-player.expanded{ height:68px; }

    /* Achtergrond schil */
    .mp-bg-layer{
      position:absolute;inset:0;border-radius:100px;overflow:hidden;
      background:rgba(14,14,14,0.94);
      backdrop-filter:blur(24px) saturate(160%);
      -webkit-backdrop-filter:blur(24px) saturate(160%);
      border:1px solid rgba(255,255,255,0.13);
      box-shadow:0 8px 32px rgba(0,0,0,0.45), inset 0 1.5px 0 rgba(255,255,255,0.08);
      transition:border-radius 0.38s cubic-bezier(0.4,0,0.2,1);
      z-index:0;
    }
    .mini-player.expanded .mp-bg-layer{ border-radius:16px; }

    /* Artwork achtergrond — Ken Burns zoom */
    .mp-bg-img{
      position:absolute;inset:0;width:100%;height:100%;
      object-fit:cover;
      filter:brightness(0.3) saturate(2.4);
      opacity:0;transition:opacity 0.6s;pointer-events:none;
      transform-origin:center;
    }
    .mini-player.expanded .mp-bg-img{
      opacity:1;
      animation:mpArtZoom 22s ease-in-out infinite;
    }
    @keyframes mpArtZoom{
      0%   { transform:scale(1.05) translate(0%,  0%); }
      33%  { transform:scale(1.14) translate(2%,  -2%); }
      66%  { transform:scale(1.10) translate(-2%, 1%); }
      100% { transform:scale(1.05) translate(0%,  0%); }
    }

    /* Content wrapper */
    .mp-content{ position:relative;z-index:1;height:100%;overflow:visible; }

    /* Track info — bovenste rij bij expand */
    .mp-info-row{
      position:absolute; top:0; left:0; right:0;
      display:flex; flex-direction:column; align-items:stretch;
      padding:6px 16px;
      opacity:0; transform:translateY(-4px);
      transition:opacity 0.25s ease-out, transform 0.25s ease-out;
      pointer-events:none; overflow:hidden; gap:2px;
    }
    .mini-player.expanded .mp-info-row{
      opacity:1; transform:translateY(0); pointer-events:auto;
    }
    .mini-player-name{ font-size:12px;line-height:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);text-align:center; }
    .mini-player-artist{ font-size:11px;line-height:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center; }

    /* Knoppen rij — onderste rij bij expand, met tijden naast knoppen */
    .mp-ctrl-row{
      position:absolute; bottom:0; left:0; right:0; height:30px;
      display:grid;
      grid-template-columns:0 30px 56px 30px 0;
      align-items:center;
      justify-items:center;
      justify-content:center;
      gap:0 6px;
      overflow:visible;
    }
    .mini-player.active .mp-ctrl-row{
      grid-template-columns:1fr 44px 56px 44px 1fr;
    }
    .mp-vinyl-anchor{ width:56px;height:1px;visibility:hidden; }
    .mp-time{
      font-size:10px;color:rgba(255,255,255,0.65);
      opacity:0;transition:opacity 0.2s 0.1s;white-space:nowrap;
      overflow:hidden; width:0; min-width:0;
    }
    .mini-player.active .mp-time{ width:auto; min-width:28px; }
    .mini-player.expanded .mp-time{ opacity:1; }

    .ctrl-btn{background:none;border:none;color:#fff;cursor:pointer;padding:0;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;opacity:0.7;transition:opacity .2s;touch-action:manipulation;}
    .ctrl-btn:hover{opacity:1;}
    .ctrl-btn:active{opacity:1;}

    /* Afspeelknop — statisch, gecentreerd op ctrl-rij middellijn, steekt boven en onder uit */
    .ctrl-btn.play{
      position:absolute;
      left:50%; bottom:15px;
      width:50px;height:50px;border-radius:0;opacity:1;padding:0;
      background:none;border:none;box-shadow:none;
      display:flex;align-items:center;justify-content:center;
      transform:translate(-50%,50%);
      z-index:3;
    }
    /* Expanded: ctrl-row omhoog voor gelijke spacing */
    .mini-player.expanded .mp-ctrl-row{ bottom:5px; }
    .mini-player.expanded .ctrl-btn.play{ bottom:20px; }

    /* Shuffle / Repeat — absolut in expanded player */
    .mp-extra-btn{
      position:absolute;bottom:0;
      background:none;border:none;color:rgba(255,255,255,.65);
      cursor:pointer;padding:0;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
      opacity:0;pointer-events:none;transition:opacity .2s .05s;touch-action:manipulation;
    }
    .mini-player.expanded .mp-extra-btn{opacity:1;pointer-events:auto;}
    .mp-extra-btn.active{color:#FF5E1A;opacity:1 !important;}
    .mp-extra-btn-shuffle{left:10px;}
    .mp-extra-btn-repeat{right:10px;}

    /* Progress bar — liquid glass */
    .progress-bar{
      position:absolute; bottom:0; left:22px; right:22px;
      height:18px;
      display:flex; align-items:flex-end;
      cursor:pointer; z-index:4;
      opacity:1; transition:opacity 0.4s ease;
    }
    .progress-bar.hidden{ opacity:0; pointer-events:none; }
    .progress-track{
      position:relative; width:100%; height:1.5px;
      background:rgba(255,255,255,0.06);
      border-radius:4px;
      overflow:hidden;
      border:0.5px solid rgba(255,255,255,0.18);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 4px rgba(0,0,0,0.45);
      backdrop-filter:blur(8px) saturate(200%);
      -webkit-backdrop-filter:blur(8px) saturate(200%);
      transition:height 0.18s ease, border-radius 0.18s ease;
    }
    .progress-bar:hover .progress-track,
    .progress-bar.dragging .progress-track,
    .progress-bar.pressed .progress-track{ height:6px; border-radius:6px; }
    .progress-fill{
      height:100%; width:0%;
      background:linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.22) 100%);
      border-radius:inherit;
      pointer-events:none;
      position:relative;
      overflow:hidden;
      backdrop-filter:blur(0px) saturate(320%) brightness(1.45);
      -webkit-backdrop-filter:blur(0px) saturate(320%) brightness(1.45);
    }
    /* Vloeibare shimmer-sweep over het glas */
    .progress-fill::after{
      content:'';
      position:absolute; inset:0;
      background:linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.55) 50%,
        transparent 100%
      );
      background-size:200% 100%;
      animation:liquidShimmer 2.4s ease-in-out infinite;
    }
    @keyframes liquidShimmer{
      0%   { background-position:-100% 0; opacity:0.5; }
      50%  { opacity:1; }
      100% { background-position:220% 0; opacity:0.5; }
    }
    .progress-thumb{
      position:absolute; top:50%;
      width:13px; height:13px; border-radius:50%;
      background:rgba(255,255,255,0.92);
      backdrop-filter:blur(4px);
      -webkit-backdrop-filter:blur(4px);
      border:0.5px solid rgba(255,255,255,0.6);
      box-shadow:0 1px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.8);
      transform:translate(-50%,-50%) scale(0);
      transition:transform 0.15s ease;
      pointer-events:none; left:0%;
    }
    .progress-bar:hover .progress-thumb,
    .progress-bar.dragging .progress-thumb,
    .progress-bar.pressed .progress-thumb{ transform:translate(-50%,-50%) scale(1); }

    /* ─── PLAYER SKINS ─── */

    /* Winamp */
    .mini-player.skin-winamp{
      background:#1a1a1a;border-radius:6px;border:1px solid #00ff41;
      box-shadow:0 0 18px rgba(0,255,65,0.25),0 4px 20px rgba(0,0,0,.8);
      backdrop-filter:none;-webkit-backdrop-filter:none;
      font-family:'Courier New',monospace;
    }
    .skin-winamp .mini-player-name{color:#00ff41;font-family:'Courier New',monospace;font-size:12px;text-transform:uppercase;letter-spacing:1px;}
    .skin-winamp .mini-player-artist{color:#007a1f;font-family:'Courier New',monospace;font-size:10px;}
    .skin-winamp .ctrl-btn{color:#00ff41;opacity:0.8;}
    .skin-winamp .ctrl-btn.play{background:#00ff41;border-radius:2px;}
    .skin-winamp .ctrl-btn.play svg path{fill:#000;}
    .skin-winamp .progress-bar{background:#003a0f;height:4px;}
    .skin-winamp .progress-fill{background:#00ff41;border-radius:0;}

    /* Windows Media Player */
    .mini-player.skin-wmp{
      background:linear-gradient(180deg,#3a4a6b 0%,#1a2240 50%,#0d1426 100%);
      border-radius:8px;border:1px solid #5a7ab5;
      box-shadow:0 4px 24px rgba(0,0,0,.7),inset 0 1px 0 rgba(120,160,255,0.2);
      backdrop-filter:none;-webkit-backdrop-filter:none;
    }
    .skin-wmp .mini-player-name{color:#c8d8ff;font-size:13px;font-weight:700;}
    .skin-wmp .mini-player-artist{color:#6888bb;}
    .skin-wmp .ctrl-btn{color:#8aacf0;opacity:1;}
    .skin-wmp .ctrl-btn.play{background:linear-gradient(180deg,#5a8ae0,#2a4a90);border-radius:50%;border:1px solid #8aacf0;box-shadow:0 2px 8px rgba(0,0,0,.5);}
    .skin-wmp .progress-bar{background:#0d1e44;height:4px;}
    .skin-wmp .progress-fill{background:linear-gradient(90deg,#4a7ae0,#8aacf0);border-radius:0;}

    /* iTunes / iPod */
    .mini-player.skin-itunes{
      background:linear-gradient(180deg,#e8e8e8 0%,#c8c8c8 100%);
      border-radius:12px;border:1px solid #aaa;
      box-shadow:0 4px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.8);
      backdrop-filter:none;-webkit-backdrop-filter:none;
    }
    .skin-itunes .mini-player-name{color:#111;font-size:13px;font-weight:600;}
    .skin-itunes .mini-player-artist{color:#555;}
    .skin-itunes .ctrl-btn{color:#333;opacity:0.85;}
    .skin-itunes .ctrl-btn.play{background:linear-gradient(180deg,#666,#333);border-radius:50%;border:1px solid #222;box-shadow:0 2px 6px rgba(0,0,0,.4);}
    .skin-itunes .ctrl-btn.play svg path{fill:#fff;}
    .skin-itunes .progress-bar{background:#aaa;height:3px;}
    .skin-itunes .progress-fill{background:linear-gradient(90deg,#555,#888);border-radius:2px;}

    /* Cassette */
    .mini-player.skin-cassette{
      background:linear-gradient(135deg,#2a1a0a 0%,#1a0f05 100%);
      border-radius:10px;border:2px solid #6b4a1a;
      box-shadow:0 4px 24px rgba(0,0,0,.6),inset 0 1px 0 rgba(180,120,40,.15);
      backdrop-filter:none;-webkit-backdrop-filter:none;
    }
    .skin-cassette .mini-player-name{color:#d4a44a;font-family:'Courier New',monospace;font-size:12px;letter-spacing:.5px;}
    .skin-cassette .mini-player-artist{color:#7a5a1a;font-family:'Courier New',monospace;font-size:10px;}
    .skin-cassette .ctrl-btn{color:#d4a44a;opacity:0.9;}
    .skin-cassette .ctrl-btn.play{background:#6b4a1a;border-radius:3px;border:1px solid #d4a44a;}
    .skin-cassette .ctrl-btn.play svg path{fill:#d4a44a;}
    .skin-cassette .progress-bar{background:#3a2a0a;height:3px;}
    .skin-cassette .progress-fill{background:#d4a44a;border-radius:0;}

    /* ─── PLAYER OPTIONS SETTINGS ─── */
    .player-skin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 20px;}
    .player-skin-opt{
      border-radius:12px;overflow:hidden;cursor:pointer;
      border:2px solid transparent;transition:border-color .2s,transform .15s;
    }
    .player-skin-opt.selected{border-color:var(--accent);}
    .player-skin-opt:active{transform:scale(0.97);}
    .player-skin-preview{
      height:64px;display:flex;align-items:center;justify-content:center;
      padding:0 12px;gap:8px;position:relative;
    }
    .player-skin-preview .ps-dot{width:22px;height:22px;border-radius:50%;flex-shrink:0;}
    .player-skin-preview .ps-lines{flex:1;display:flex;flex-direction:column;gap:4px;}
    .player-skin-preview .ps-line{height:5px;border-radius:3px;width:100%;}
    .player-skin-preview .ps-line.short{width:60%;}
    .player-skin-preview .ps-btn{width:20px;height:20px;border-radius:50%;flex-shrink:0;}
    .player-skin-name{
      font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
      padding:6px 10px;background:rgba(0,0,0,.3);
    }
    /* preview: glass */
    .ps-glass .player-skin-preview{background:rgba(120,120,128,.25);backdrop-filter:blur(12px);}
    .ps-glass .ps-dot{background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.3);}
    .ps-glass .ps-line{background:rgba(255,255,255,.3);}
    .ps-glass .ps-btn{background:rgba(255,255,255,.4);}
    .ps-glass .player-skin-name{color:#eee;}
    /* preview: winamp */
    .ps-winamp .player-skin-preview{background:#1a1a1a;border-bottom:1px solid #00ff41;}
    .ps-winamp .ps-dot{background:#1a1a1a;border:1px solid #00ff41;}
    .ps-winamp .ps-line{background:#00ff41;opacity:.7;}
    .ps-winamp .ps-btn{background:#00ff41;border-radius:2px;}
    .ps-winamp .player-skin-name{color:#00ff41;background:#111;font-family:'Courier New',monospace;}
    /* preview: wmp */
    .ps-wmp .player-skin-preview{background:linear-gradient(180deg,#3a4a6b,#0d1426);}
    .ps-wmp .ps-dot{background:#1a2240;border:1px solid #5a7ab5;}
    .ps-wmp .ps-line{background:#5a7ab5;opacity:.8;}
    .ps-wmp .ps-btn{background:linear-gradient(180deg,#5a8ae0,#2a4a90);border:1px solid #8aacf0;}
    .ps-wmp .player-skin-name{color:#c8d8ff;background:rgba(10,20,50,.6);}
    /* preview: itunes */
    .ps-itunes .player-skin-preview{background:linear-gradient(180deg,#e8e8e8,#c8c8c8);}
    .ps-itunes .ps-dot{background:#ddd;border:1px solid #aaa;}
    .ps-itunes .ps-line{background:#888;opacity:.6;}
    .ps-itunes .ps-btn{background:linear-gradient(180deg,#666,#333);}
    .ps-itunes .player-skin-name{color:#222;background:rgba(180,180,180,.5);}
    /* preview: cassette */
    .ps-cassette .player-skin-preview{background:linear-gradient(135deg,#2a1a0a,#1a0f05);border-bottom:1px solid #6b4a1a;}
    .ps-cassette .ps-dot{background:#2a1a0a;border:1px solid #d4a44a;}
    .ps-cassette .ps-line{background:#d4a44a;opacity:.6;}
    .ps-cassette .ps-btn{background:#6b4a1a;border:1px solid #d4a44a;border-radius:2px;}
    .ps-cassette .player-skin-name{color:#d4a44a;background:rgba(30,15,0,.5);font-family:'Courier New',monospace;}

    /* ─── BOTTOM NAV ─── */
    .bottom-nav{
      position:fixed;bottom:0;left:50%;transform:translateX(-50%);
      width:min(430px,100vw);height:var(--nav-h);
      background:rgba(10,10,10,.94);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
      border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;z-index:30;
    }
    .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;padding:8px 0;}
    .nav-label{font-size:10px;font-weight:600;letter-spacing:.3px;color:var(--muted);transition:color .15s;}
    .nav-item svg{color:var(--muted);transition:color .15s;}
    .nav-item:hover svg,.nav-item:hover .nav-label{color:var(--text);}
    .nav-item.active .nav-label{color:var(--accent);}
    .nav-item.active svg{color:var(--accent);}
    /* ─── FILTER CHIPS (sidebar + mobiel Ontdekkingen) ─── */
    .sidebar-chip{padding:6px 14px;border-radius:100px;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;flex-shrink:0;background:var(--bg3);color:var(--muted);border:1px solid var(--border);transition:background .15s,color .15s,border-color .15s;}
    .sidebar-chip.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);}

    /* ─── CLICK FLASH ─── */
    .nav-item, .ftab, .sidebar-chip, .lib-filter, .maand-tab,
    .ts-opt, .ctrl-btn, .np-btn, .track-row, .card {
      transition: filter 0.5s ease-out;
    }
    .nav-item:active, .ftab:active, .sidebar-chip:active, .lib-filter:active,
    .maand-tab:active, .ts-opt:active, .ctrl-btn:active, .np-btn:active {
      filter: brightness(2.0);
      transition: filter 0s;
    }
    .detail-play-btn:active, .detail-buy-btn:active, .detail-shuffle-btn:active,
    .detail-like-btn:active, .np-btn:active, .ctrl-btn:active,
    .surprise-btn:active, .album-track-buy:active {
      transform: scale(0.97);
      transition: transform 0s;
    }


    /* ─── MIJN MAAND ─── */
    .maand-tabs{display:flex;gap:0;margin:0 20px 20px;border-radius:10px;overflow:hidden;border:1px solid var(--border);}
    .maand-tab{
      flex:1;padding:10px;text-align:center;font-size:13px;font-weight:600;cursor:pointer;
      background:var(--bg3);color:var(--muted);transition:background .2s,color .15s;
    }
    .maand-tab.active{background:var(--accent);color:var(--accent-fg);transition:background-color .15s,color .15s;}
    .chart-container{background:var(--bg2);border-radius:20px;padding:24px;margin:0 20px 16px;border:1px solid var(--border);}
    .chart-label{text-align:center;margin-bottom:20px;}
    .chart-label .amount{font-size:36px;font-weight:800;font-variant-numeric:tabular-nums;}
    .chart-label .amount span{font-size:20px;color:var(--muted);font-weight:400;}
    .chart-label .sublabel{font-size:12px;color:var(--muted);margin-top:4px;}
    #pieChart{display:block;margin:0 auto 20px;}
    .chart-legend{display:flex;flex-direction:column;gap:10px;}
    .legend-item{display:flex;align-items:center;justify-content:space-between;}
    .legend-left{display:flex;align-items:center;gap:10px;}
    .legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
    .legend-name{font-size:14px;font-weight:500;}
    .legend-pct{font-size:12px;color:var(--muted);margin-left:6px;}
    .legend-euro{font-size:14px;font-weight:600;color:var(--accent);transition:color .15s;}
    .maand-info-box{background:var(--bg2);border-radius:16px;padding:16px 20px;margin:0 20px 16px;border:1px solid var(--border);}
    .maand-info-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:14px;}
    .maand-info-row:not(:last-child){border-bottom:1px solid var(--border);}
    .maand-info-label{color:var(--muted);}
    .maand-info-value{font-weight:600;}
    .maand-info-value.flame{color:var(--accent);transition:color .15s;}
    .alltime-box{background:var(--bg2);border-radius:16px;padding:20px;margin:0 20px 16px;border:1px solid var(--border);}
    .alltime-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:16px;}
    .alltime-stat{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);}
    .alltime-stat:last-child{border-bottom:none;}
    .alltime-label{font-size:14px;color:var(--muted);}
    .alltime-value{font-size:18px;font-weight:800;color:var(--accent);transition:color .15s;}

    /* ─── SEARCH ─── */
    .search-bar{display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin:0 0 20px;}
    .search-bar input{flex:1;background:none;border:none;color:var(--text);font-size:15px;outline:none;}
    .search-bar input::placeholder{color:var(--dimmed);}
    .orb-wrap{padding:0 20px 24px;}
    .orb-frame{width:100%;height:520px;border:none;border-radius:var(--radius);display:block;background:#000;}
    /* ── LOCATIE ZOEKEN ── */
    .loc-prompt{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 20px;margin:0 20px 24px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);}
    .loc-prompt-icon{margin-bottom:12px;line-height:1;}
    .loc-prompt-text{font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px;}
    .loc-prompt-sub{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:20px;max-width:260px;}
    .loc-prompt-btn{display:flex;align-items:center;gap:8px;padding:12px 22px;background:var(--accent);border:none;border-radius:100px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;touch-action:manipulation;transition:opacity .15s;}
    .loc-prompt-btn:active{opacity:.7;}
    .loc-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:36px 20px;color:var(--muted);font-size:13px;}
    .loc-dots{display:flex;gap:6px;}
    .loc-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:locPulse 1.2s ease-in-out infinite;}
    .loc-dot:nth-child(2){animation-delay:.2s;}
    .loc-dot:nth-child(3){animation-delay:.4s;}
    @keyframes locPulse{0%,80%,100%{opacity:.25;transform:scale(.8);}40%{opacity:1;transform:scale(1);}}
    .loc-city-label{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);padding:0 20px 8px;letter-spacing:.6px;text-transform:uppercase;}
    .loc-city-label svg{color:var(--accent);flex-shrink:0;}
    .loc-radius-row{display:flex;align-items:center;gap:10px;padding:0 20px 14px;}
    .loc-radius-label{font-size:11px;color:var(--muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.6px;}
    .loc-radius-slider{flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;background:var(--border);outline:none;cursor:pointer;}
    .loc-radius-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 0 3px rgba(201,64,16,.18);}
    .loc-radius-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;}
    .loc-radius-val{font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap;min-width:38px;text-align:right;}
    .loc-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px 24px;}
    .loc-card{border-radius:14px;overflow:hidden;position:relative;height:100px;cursor:pointer;background:var(--bg3);border:1px solid var(--border);display:flex;flex-direction:column;justify-content:flex-end;transition:border-color .2s;}
    .loc-card:active{border-color:var(--accent);}
    .loc-card-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.35;}
    .loc-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8) 40%,transparent);}
    .loc-card-body{position:relative;padding:10px;}
    .loc-card-name{font-size:13px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:2px;}
    .loc-card-genre{font-size:10px;color:rgba(255,255,255,.55);}
    .loc-card-dist{position:absolute;top:8px;left:8px;background:rgba(201,64,16,.85);border-radius:20px;padding:2px 7px;font-size:10px;font-weight:700;color:#fff;}
    .loc-empty{display:flex;align-items:center;gap:10px;padding:20px 20px 28px;color:var(--muted);font-size:13px;}
    .loc-denied{display:flex;align-items:flex-start;gap:12px;padding:18px;margin:0 20px 24px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);color:var(--muted);font-size:13px;line-height:1.5;}

    /* ─── FEED ─── */
    .feed-item{display:flex;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border);cursor:pointer;}
    .feed-item:last-child{border-bottom:none;}
    .feed-art{width:56px;height:56px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--bg3);}
    .feed-art img{width:100%;height:100%;object-fit:cover;}
    .feed-info{flex:1;min-width:0;}
    .feed-artist{font-size:13px;font-weight:700;margin-bottom:3px;}
    .feed-text{font-size:13px;color:var(--muted);line-height:1.4;}
    .feed-time{font-size:11px;color:var(--dimmed);margin-top:4px;}
    .feed-badge{
      display:inline-block;font-size:9px;font-weight:700;letter-spacing:1px;
      text-transform:uppercase;padding:2px 7px;border-radius:10px;
      background:var(--accent);color:var(--accent-fg);margin-bottom:4px;
      transition:background-color .15s,color .15s;
    }

    /* ─── PROFIEL ─── */
    .profiel-header{display:flex;flex-direction:column;align-items:center;padding:40px 20px 24px;}
    .profiel-avatar{
      width:84px;height:84px;border-radius:50%;background:var(--accent);
      display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;
      overflow:hidden;
      color:var(--accent-fg);margin-bottom:14px;border:3px solid var(--accent2);
      transition:background-color .15s,border-color .15s,color .15s;
    }
    .profiel-name{font-size:22px;font-weight:800;margin-bottom:4px;}
    .profiel-plan{font-size:13px;color:var(--muted);}
    .profiel-plan span{color:var(--accent);font-weight:600;transition:color .15s;}
    .profiel-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);border-radius:16px;overflow:hidden;margin:0 20px 20px;}
    .stat-box{background:var(--bg2);padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;}
    .stat-number{font-size:20px;font-weight:800;}
    .stat-label{font-size:11px;color:var(--muted);text-align:center;}
    .menu-list{padding:0 20px;display:flex;flex-direction:column;gap:2px;}
    .menu-item{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--border);cursor:pointer;}
    .menu-item:last-child{border-bottom:none;}
    .menu-left{display:flex;align-items:center;gap:14px;}
    .menu-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg3);color:var(--muted);}
    .menu-label{font-size:16px;font-weight:600;}
    .menu-sub{font-size:13px;color:var(--muted);}
    .menu-arrow{color:var(--dimmed);}

    /* ─── TIERS ─── */
    .tier-hero{padding:28px 24px 16px;text-align:center;}
    .tier-hero-title{
      font-family:'RacingEnergy','Impact','Arial Black',sans-serif;
      font-size:clamp(20px,6vw,28px);font-weight:normal;letter-spacing:0.05em;
      text-transform:uppercase;line-height:1.2;margin-bottom:8px;color:var(--text);
    }
    .tier-hero-sub{font-size:13px;color:var(--muted);line-height:1.5;}
    .tier-card{
      margin:0 16px 12px;border-radius:16px;padding:20px 20px 18px;
      background:var(--bg2);border:1.5px solid var(--border);
      position:relative;overflow:hidden;cursor:pointer;
      transition:transform .15s,border-color .15s;
    }
    .tier-card:active{transform:scale(0.98);}
    .tier-card.active-plan{border-color:var(--accent);}
    .tier-card.god-mode{background:linear-gradient(145deg,#130f00,#1c1600);border-color:#6b4e00;}
    .tier-name{
      font-size:13px;font-weight:800;text-transform:uppercase;
      letter-spacing:0.12em;color:var(--muted);margin-bottom:3px;
    }
    .tier-card.active-plan .tier-name{color:var(--accent);}
    .tier-card.god-mode .tier-name{color:#c8920a;}
    .tier-subtitle{font-size:11px;color:var(--dimmed);margin-bottom:14px;font-style:italic;}
    .tier-price{font-size:34px;font-weight:900;line-height:1;margin-bottom:12px;}
    .tier-price small{font-size:14px;font-weight:400;color:var(--muted);}
    .tier-card.god-mode .tier-price{color:#e0a80a;}
    .tier-free-price{font-size:22px;font-weight:900;color:var(--dimmed);}
    .tier-desc{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:16px;}
    .tier-btn{
      display:block;width:100%;padding:13px;border-radius:10px;
      border:none;cursor:pointer;font-size:14px;font-weight:700;
      background:var(--bg3);color:var(--text);transition:opacity .15s;
    }
    .tier-btn:active{opacity:.7;}
    .tier-card.active-plan .tier-btn{background:var(--accent);color:#fff;}
    .tier-card.god-mode .tier-btn{background:#c8920a;color:#0a0800;}
    .tier-badge{
      position:absolute;top:16px;right:16px;
      background:var(--accent);color:#fff;
      font-size:9px;font-weight:800;letter-spacing:1.2px;
      text-transform:uppercase;padding:3px 9px;border-radius:20px;
    }
    .tier-gold-badge{
      position:absolute;top:16px;right:16px;
      background:#c8920a;color:#0a0800;
      font-size:9px;font-weight:800;letter-spacing:1.2px;
      text-transform:uppercase;padding:3px 9px;border-radius:20px;
    }
    .tier-gold-glow{
      position:absolute;top:-40px;right:-40px;
      width:130px;height:130px;border-radius:50%;
      background:radial-gradient(circle,rgba(200,146,10,.18) 0%,transparent 70%);
      pointer-events:none;
    }

    /* ─── INSTELLINGEN ─── */
    .settings-grid{display:block;}
    .settings-card{}
    /* Terug-knop voor submenu's — altijd linksboven, consistent in alle submenu's */
    .submenu-back{
      display:flex;align-items:center;gap:8px;padding:52px 20px 16px;
      font-size:15px;color:var(--muted);cursor:pointer;
    }
    .submenu-back svg{ flex-shrink:0; }
    .submenu-back:hover{ color:var(--text); }
    .settings-section{padding:0 20px 24px;}
    .settings-section-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--muted);padding:20px 20px 12px;}
    .settings-description{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:16px;padding:12px 16px;background:var(--bg2);border-radius:12px;border:1px solid var(--border);}
    .algo-slider-row{padding:0 0 22px;}
    .algo-slider-row:last-child{padding-bottom:4px;}
    .algo-slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px;font-weight:600;}
    .algo-slider-value{font-size:13px;font-weight:700;color:var(--accent);}
    .algo-slider-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:8px;}
    .algo-slider{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;outline:none;cursor:pointer;}
    .algo-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 0 4px rgba(201,64,16,.15);}
    .algo-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;}
    .theme-option{
      display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);
    }
    .theme-option:last-child{border-bottom:none;}
    .theme-preview{width:44px;height:44px;border-radius:10px;flex-shrink:0;overflow:hidden;position:relative;}
    .theme-dolce{background:linear-gradient(135deg,#1a0a0a,#6b1a1a);}
    .theme-nike{background:linear-gradient(135deg,#0a0a0a,#111);}
    .theme-gaza{background:linear-gradient(135deg,#003300,#006600);}
    .theme-info{flex:1;}
    .theme-name{font-size:14px;font-weight:600;margin-bottom:2px;}
    .theme-price{font-size:12px;color:var(--muted);}
    .buy-btn{
      padding:8px 16px;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;
      background:var(--accent);color:var(--accent-fg);border:none;white-space:nowrap;
      transition:background-color .15s,color .15s;
    }
    .buy-btn.owned{background:var(--bg3);color:var(--text);border:1px solid var(--border);}
    .icon-options{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
    .icon-opt{
      aspect-ratio:1;border-radius:16px;cursor:pointer;border:2px solid transparent;
      transition:border-color .2s;overflow:hidden;
    }
    .icon-opt.selected{border-color:var(--accent);}
    .icon-opt-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;}
    .text-style-opts{display:flex;gap:10px;margin:0 20px;}
    .ts-opt{
      flex:1;padding:12px;border-radius:12px;text-align:center;font-size:14px;font-weight:700;
      cursor:pointer;background:var(--bg3);color:var(--muted);border:2px solid transparent;
      transition:border-color .2s,color .2s;
    }
    .ts-opt.active{border-color:var(--accent);color:var(--text);transition:border-color .15s,color .2s;}

    /* ─── COLLECTIE ─── */
    .lib-filter{
      padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
      background:var(--bg3);color:var(--muted);border:1px solid var(--border);
      transition:background-color .2s,color .2s,border-color .15s;flex-shrink:0;
    }
    .lib-filter.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);transition:background-color .15s,color .15s,border-color .15s;}

    /* ─── NOW PLAYING (full screen) ─── */
    .np-screen{
      position:fixed;top:0;left:0;right:0;bottom:0;
      transform:translateY(100%);
      background:var(--bg);z-index:100;display:flex;flex-direction:column;
      transition:transform 300ms cubic-bezier(.32,.72,0,1);overflow:hidden;will-change:transform;
    }
    .np-screen.open{transform:translateY(0);}
    .np-bg-blob{
      position:absolute;width:340px;height:340px;border-radius:50%;top:-60px;right:-80px;
      background:radial-gradient(circle,rgba(255,94,26,0) 0%,transparent 70%);
      transition:background .15s;pointer-events:none;
    }
    body.color-mode .np-bg-blob{background:radial-gradient(circle,rgba(255,94,26,0) 0%,transparent 70%);}
    .np-header{display:flex;align-items:center;justify-content:space-between;padding:52px 24px 8px;position:relative;z-index:1;}
    .np-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);}
    .np-label{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);}
    .np-opts{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:color .15s;}
    .np-opts.queue-active{color:var(--accent);}

    /* CD artwork */
    .np-artwork-wrap{
      width:calc(100% - 56px);max-width:374px;aspect-ratio:1;
      margin:8px auto 26px;border-radius:20px;position:relative;flex-shrink:0;
      box-shadow:0 26px 64px rgba(0,0,0,.55);
      perspective:1000px;
    }
    body.color-mode .np-artwork-wrap{box-shadow:0 26px 64px rgba(0,0,0,.55);}
    .np-cd-img{
      width:100%;height:100%;object-fit:cover;border-radius:20px;
    }
    .cd-center-hole{display:none;}
    .np-cd-placeholder{
      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
      background:var(--bg3);color:var(--dimmed);border-radius:20px;
    }

    /* --- Flip Card --- */
    .flip-card { cursor:pointer; }
    .flip-card-inner {
      position:relative; width:100%; height:100%;
      transform-style:preserve-3d;
      transition:transform 0.38s cubic-bezier(0.23,1,0.32,1);
    }
    .flip-card.flipped .flip-card-inner { transform:rotateY(180deg); }
    .flip-card-front, .flip-card-back {
      position:absolute; inset:0;
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
    }
    .flip-card-back {
      transform:rotateY(180deg);
      background:rgba(16,16,18,0.98);
      overflow:hidden;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      padding:16px 14px;
      box-sizing:border-box;
      text-align:center;
    }
    .flip-back-label {
      font-size:9px; letter-spacing:2px; text-transform:uppercase;
      color:var(--dimmed); margin-bottom:8px; font-weight:700;
    }
    .flip-back-title { font-size:15px; font-weight:800; color:var(--text); margin-bottom:3px; line-height:1.2; }
    .flip-back-artist { font-size:12px; color:var(--accent); margin-bottom:10px; font-weight:600; }
    .flip-back-meta { font-size:11px; color:var(--dimmed); margin-bottom:10px; line-height:1.6; }
    .flip-back-tracks { width:100%; margin-bottom:8px; }
    .flip-back-track {
      display:flex; justify-content:space-between; align-items:center;
      padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.06);
      font-size:11px;
    }
    .flip-back-track:last-child { border-bottom:none; }
    .flip-back-track-num { color:var(--dimmed); width:16px; flex-shrink:0; text-align:right; margin-right:8px; }
    .flip-back-track-name { color:var(--text); flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .flip-hint {
      font-size:9px; color:rgba(255,255,255,0.25); margin-top:auto; padding-top:8px;
      letter-spacing:0.5px;
    }
    /* NP flip faces — square album-cover shape */
    .np-artwork-face {
      border-radius:20px; overflow:hidden;
    }
    /* Collectible flip card */
    .col-flip-wrap { perspective:900px; max-width:300px; margin-bottom:4px; }
    .col-flip-card { width:100%; height:400px; cursor:default; touch-action:none; }
    .col-flip-card .flip-card-inner { border-radius:20px; box-shadow:0 24px 64px rgba(0,0,0,.7); }
    .col-flip-card .flip-card-front {
      border-radius:20px; overflow:hidden;
      background:radial-gradient(ellipse at 50% 20%,#1c1200 0%,#0d0d0d 65%);
      border:1px solid rgba(201,64,16,.35);
      display:flex; flex-direction:column;
    }
    .col-flip-card .flip-card-back {
      border-radius:20px;
      background:radial-gradient(ellipse at 50% 80%,#1c1200 0%,#090909 70%);
      border:1px solid rgba(201,64,16,.35);
      padding:28px 20px 24px;
      justify-content:flex-start; align-items:center;
    }
    .col-name-btn {
      background:none; border:none; color:#fff; cursor:pointer;
      font-size:19px; font-weight:800; letter-spacing:-.01em;
      padding:0; text-align:center; line-height:1.2;
    }
    .col-name-btn:hover { color:var(--accent); }
    .np-artwork-face.flip-card-back {
      border-radius:50%; padding:22%;
    }

    /* --- Artwork Overlay --- */
    .artwork-overlay {
      position:fixed; inset:0; z-index:200;
      background:rgba(0,0,0,0.88);
      backdrop-filter:blur(20px) saturate(120%);
      display:flex; align-items:center; justify-content:center;
      opacity:0; pointer-events:none;
      transition:opacity 0.28s ease;
    }
    .artwork-overlay.open {
      opacity:1; pointer-events:auto;
    }
    .artwork-overlay-inner {
      position:relative;
      display:flex; align-items:center; justify-content:center;
      transform:scale(0.84); transition:transform 0.32s cubic-bezier(0.34,1.44,0.64,1);
    }
    .artwork-overlay.open .artwork-overlay-inner {
      transform:scale(1);
    }
    .artwork-overlay-card {
      width:min(82vw, 82vh);
      height:min(82vw, 82vh);
      perspective:900px;
      box-shadow:0 24px 80px rgba(0,0,0,0.75);
    }
    .artwork-overlay-close {
      position:absolute; top:-14px; right:-14px;
      width:34px; height:34px; border-radius:50%;
      background:rgba(30,30,30,0.95); border:1px solid rgba(255,255,255,0.15);
      color:#fff; display:flex; align-items:center; justify-content:center;
      cursor:pointer; z-index:10;
      box-shadow:0 4px 12px rgba(0,0,0,0.5);
    }
    /* Credit rows inside overlay back face */
    .overlay-credits-scroll {
      width:100%; overflow-y:auto; flex:1; min-height:0;
      scrollbar-width:none;
    }
    .overlay-credits-scroll::-webkit-scrollbar { display:none; }
    .credit-row {
      display:grid; grid-template-columns:42% 58%;
      gap:0 8px; padding:5px 0;
      border-bottom:1px solid rgba(255,255,255,0.06);
      font-size:11px; line-height:1.45; text-align:left;
    }
    .credit-row:last-child { border-bottom:none; }
    .credit-label {
      color:rgba(255,255,255,0.35); font-weight:600;
      letter-spacing:0.4px; text-transform:uppercase; font-size:9px;
      padding-top:1px;
    }
    .credit-value { color:rgba(255,255,255,0.82); }
    .credit-copyright {
      font-size:9px; color:rgba(255,255,255,0.22);
      text-align:center; margin-top:10px; line-height:1.5;
      padding-top:8px; border-top:1px solid rgba(255,255,255,0.06);
    }

    .np-info{padding:0 28px;display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
    .np-track{font-size:21px;font-weight:800;letter-spacing:-.3px;}
    .np-artist{font-size:14px;color:var(--muted);margin-top:3px;cursor:pointer;display:inline-block;transition:color .15s;}
    .np-artist:active{color:var(--accent);}
    .np-like{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--dimmed);flex-shrink:0;transition:color .2s;}
    .np-like.liked{color:#FF5E1A;}
    .detail-like-btn.liked{color:#FF5E1A !important;border-color:#FF5E1A !important;}
    .detail-buy-btn{height:36px;background:var(--bg3);border:1px solid #3a3a3a;border-radius:100px;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;padding:0 14px;white-space:nowrap;display:flex;align-items:center;gap:5px;transition:background .15s,color .15s,border-color .15s;flex-shrink:0;}
    .detail-buy-btn:hover{background:#2a2a2a;color:var(--text);border-color:#555;}
    .album-track-buy{font-size:11px;font-weight:600;color:var(--dimmed);background:none;border:1px solid #333;border-radius:20px;padding:2px 7px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;line-height:1.6;}
    .album-track-buy:hover{background:var(--bg3);color:var(--muted);border-color:#555;}
    .album-track-buy.owned{color:var(--accent);border-color:rgba(201,64,16,.4);}
    .lib-download-btn{flex-shrink:0;margin-left:auto;background:none;border:1px solid var(--border);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--accent);cursor:pointer;transition:background .15s,border-color .15s;}
    .lib-download-btn:hover{background:rgba(201,64,16,.1);border-color:var(--accent);}

    /* Waveform */
    .np-waveform-wrap{padding:0 28px;margin-bottom:4px;position:relative;}
    #npGlowCanvas{position:absolute;left:28px;top:-84px;width:calc(100% - 56px);height:240px;display:block;pointer-events:none;z-index:0;}
    #waveformCanvas{position:relative;z-index:1;width:100%;height:72px;display:block;cursor:pointer;}
    .np-times{display:flex;justify-content:space-between;padding:0 28px;margin-bottom:4px;font-size:11px;color:var(--dimmed);}

    .np-controls{display:flex;align-items:center;justify-content:space-between;padding:8px 24px 16px;}
    .np-btn{background:none;border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;opacity:.55;transition:opacity .15s;}
    .np-btn:active{opacity:1;}
    .np-btn.main{width:60px;height:60px;background:none;padding:0;border-radius:50%;opacity:1;overflow:hidden;transition:transform .12s;}
    .np-btn.main circle{transition:fill 450ms ease;}   /* kleur faadt soepel tussen play/pauze-staat */
    .np-btn.main:active{transform:scale(.93);}
    .np-btn.queue-active{opacity:1;color:var(--accent);}

    /* ─── NP WACHTRIJ ─── */
    #np-queue-view{display:none;flex-direction:column;flex:1;overflow-y:auto;padding:0 24px 80px;overscroll-behavior:contain;}
    .np-queue-heading{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);padding:16px 0 10px;border-bottom:1px solid var(--border);}
    .np-queue-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;touch-action:manipulation;}
    .np-queue-item:active{opacity:.5;}
    .np-queue-num{font-size:12px;color:var(--dimmed);width:20px;text-align:right;flex-shrink:0;}
    .np-queue-info{flex:1;min-width:0;}
    .np-queue-title{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
    .np-queue-title.now{color:var(--accent);}
    .np-queue-artist{font-size:12px;color:var(--muted);}

    /* ─── SIDEBAR ─── */
    .sidebar{display:none;}

    /* ─── PREVIEW MODE (niet ingelogd op deep-link) ─── */
    body.preview-mode #bottomNav,
    body.preview-mode .sidebar{ display:none !important; }
    @media (min-width:640px){
      body.preview-mode .screen{ margin-left:0 !important; }
    }
    body.preview-mode #headerBack,
    body.preview-mode .detail-back,
    body.preview-mode .detail-buy-btn,
    body.preview-mode .detail-shuffle-btn,
    body.preview-mode .detail-like-btn,
    body.preview-mode .artiest-vip-btn,
    body.preview-mode .track-dots-btn{ display:none !important; }
    /* Houd .detail-action-row + .detail-play-btn zichtbaar zodat de
       bezoeker de preview kan starten */
    .preview-cta{
      position:fixed; left:8px; right:8px; z-index:35;
      bottom: calc(20px + 64px + 12px); /* boven .dp */
      display:none; align-items:center; gap:12px;
      background: linear-gradient(135deg, rgba(201,64,16,0.96), rgba(224,80,32,0.96));
      color:#fff; padding:12px 16px;
      border-radius:14px;
      box-shadow: 0 10px 30px rgba(0,0,0,.45);
      pointer-events:auto;
    }
    body.preview-mode .preview-cta{
      display:flex;
      opacity:0;
      animation: previewCtaIn 0.4s ease-out 1.0s forwards;
    }
    @keyframes previewCtaIn { to { opacity:1; } }
    .preview-cta-text{ flex:1; min-width:0; line-height:1.3; }
    .preview-cta-text strong{
      display:block; font-size:13.5px; font-weight:700;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .preview-cta-text span{
      display:block; font-size:11px; opacity:0.9; margin-top:1px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .preview-cta-btn{
      flex:none; background:#fff; color:#0c0c0c; border:none;
      padding:10px 16px; border-radius:99px;
      font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;
      -webkit-tap-highlight-color:transparent;
    }
    .preview-cta-btn:active{ transform:scale(.96); }
    @media (max-width:639px){
      body.preview-mode .dp{ bottom: 14px; }
      .preview-cta{ bottom: calc(14px + 52px + 10px); }
    }

    /* ─── DESKTOP ─── */
    /* ═══ DESKTOP SPELER — single-row balk, klapt omhoog open tot paneel ═══ */
    .dp{
      display:none; position:fixed; bottom:20px; z-index:30;
      left:calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2);
      transform:translateX(-50%);
      width:min(900px, calc(100vw - var(--sidebar-w) - 48px));
      height:64px; border-radius:32px; overflow:visible;
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 14px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
      transition:height .42s cubic-bezier(.4,0,.2,1), border-radius .42s cubic-bezier(.4,0,.2,1);
      user-select:none; cursor:pointer;
    }
    .dp.dp-open{ height:476px; border-radius:24px; cursor:default; }

    .dp-bg-wrap{ position:absolute; inset:0; background:#0e0e0e;
      overflow:hidden; border-radius:inherit; }
    .dp-glass{ position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:inherit; }
    .dp-bg{
      position:absolute; inset:-22%; width:144%; height:144%; object-fit:cover;
      filter:brightness(.44) saturate(2);
      opacity:0; transition:opacity .45s ease, transform .55s cubic-bezier(.4,0,.2,1);
      transform-origin:center center;
    }
    .dp-bg.loaded{ opacity:1; animation:mpArtZoom 24s ease-in-out infinite; }
    /* Uitgeklapt: de bewegende laag krimpt naar het midden en lost op, terwijl het
       centrale vierkante artwork-card opengroeit → de achtergrond "beweegt naar het
       artwork toe" (zelfde bestand) i.p.v. los te blijven als achtergrond. */
    .dp.dp-open .dp-bg{ opacity:0; transform:scale(.42); animation-play-state:paused; }
    .dp-bg-wrap::after{ content:""; position:absolute; inset:0;
      background:linear-gradient(180deg,rgba(8,8,8,.20),rgba(8,8,8,.62)); }

    .dp-body{ position:absolute; left:0; right:0; bottom:0; height:476px;
      display:flex; flex-direction:column; }

    /* artwork-paneel (alleen zichtbaar wanneer open) */
    .dp-panel{ flex:1; min-height:0; position:relative;
      display:flex; align-items:center; justify-content:center; padding:18px 20px 6px;
      opacity:0; visibility:hidden;
      transition:opacity .25s, visibility 0s linear .25s;
      pointer-events:none; }
    .dp.dp-open .dp-panel{
      opacity:1; visibility:visible;
      transition:opacity .25s, visibility 0s linear 0s;
      pointer-events:auto;
    }
    .dp-collapse{
      position:absolute; top:12px; left:14px; width:38px; height:38px;
      display:flex; align-items:center; justify-content:center;
      background:rgba(0,0,0,.34); border:none; border-radius:50%;
      color:#fff; cursor:pointer; opacity:0; transition:opacity .25s, background .15s;
    }
    .dp.dp-open .dp-collapse{ opacity:.9; }
    .dp-collapse:hover{ background:rgba(0,0,0,.6); }
    .dp-art-frame{
      width:min(296px,62%); aspect-ratio:1/1; border-radius:14px; overflow:hidden;
      background:#1a1a1a; box-shadow:0 16px 48px rgba(0,0,0,.6);
      opacity:0; transform:scale(.6);
      transition:opacity .35s .08s, transform .55s cubic-bezier(.4,0,.2,1) .04s;
    }
    /* groeit open vanuit het midden, ontvangt de krimpende achtergrondlaag */
    .dp.dp-open .dp-art-frame{ opacity:1; transform:scale(1); }
    .dp-art{ width:100%; height:100%; object-fit:cover; display:block; }

    /* balk — altijd zichtbaar — single row */
    .dp-bar{ flex:none; height:64px; box-sizing:border-box;
      padding:0 12px; display:flex; align-items:center; gap:10px; }

    .dp-art-mini{ width:44px; height:44px; flex:none; border-radius:50%;
      overflow:hidden; background:#1a1a1a; box-shadow:0 4px 12px rgba(0,0,0,.4); }
    .dp-art-mini img{ width:100%; height:100%; object-fit:cover; display:block; }

    .dp-meta{ flex:0 1 160px; min-width:0; text-align:left; padding:0; }
    .dp-title{ font-size:12.5px; font-weight:700; color:#fff; line-height:15px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dp-artist{ font-size:11px; color:rgba(255,255,255,.62); line-height:13px;
      margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dp-artist.clickable{ cursor:pointer; }
    .dp-artist.clickable:hover{ color:#fff; text-decoration:underline; }

    .dp-wave{ flex:1; min-width:60px; height:34px; position:relative;
      cursor:pointer; }
    .dp-wave canvas{ width:100%; height:100%; display:block; }
    .dp-wave-loading{ position:absolute; inset:0; display:flex; align-items:center;
      justify-content:center; font-size:10px; letter-spacing:.08em;
      color:rgba(255,255,255,.35); pointer-events:none; text-transform:uppercase; }

    .dp-time{ flex:none; font-size:11px; color:rgba(255,255,255,.7);
      font-variant-numeric:tabular-nums; white-space:nowrap; padding:0 4px; }
    .dp-time .dp-cur{ color:#fff; }
    .dp-time .dp-sep{ color:rgba(255,255,255,.35); margin:0 4px; }

    .dp-transport{ display:flex; align-items:center; gap:4px; flex:none; }
    .dp-secondary{ display:flex; align-items:center; gap:2px; flex:none;
      padding-left:4px; }

    .dp-btn{
      width:32px; height:32px; flex:none; padding:0;
      display:flex; align-items:center; justify-content:center;
      background:none; border:none; color:#fff; cursor:pointer; border-radius:50%;
      transition:background .15s, transform .12s, color .15s; touch-action:manipulation;
    }
    .dp-btn:hover{ background:rgba(255,255,255,.13); }
    .dp-btn:active{ transform:scale(.9); }
    .dp-sec{ color:rgba(255,255,255,.55); width:28px; height:28px; }
    .dp-sec svg{ width:15px; height:15px; }
    .dp-sec:hover{ color:#fff; }
    .dp-sec.active{ color:var(--accent); }
    .dp-play{ width:36px; height:36px; background:#fff; color:#0e0e0e; }
    .dp-play:hover{ background:#fff; transform:scale(1.06); }
    .dp-play:active{ transform:scale(.94); }

    /* volume — klein icoon, klapt open zolang ingedrukt */
    .dp-vol{ position:relative; }
    .dp-vol-pop{
      position:absolute; left:50%; bottom:24px; transform:translateX(-50%) scaleY(0);
      transform-origin:bottom center;
      width:40px; height:124px; border-radius:20px;
      background:rgba(18,18,18,.97); border:1px solid rgba(255,255,255,.15);
      box-shadow:0 10px 30px rgba(0,0,0,.6);
      display:flex; align-items:center; justify-content:center;
      opacity:0; pointer-events:none;
      transition:transform .18s cubic-bezier(.4,0,.2,1), opacity .16s;
    }
    .dp-vol.open .dp-vol-pop{ transform:translateX(-50%) scaleY(1); opacity:1; pointer-events:auto; }
    .dp-vol-track{ position:relative; width:6px; height:96px; border-radius:3px;
      background:rgba(255,255,255,.18); }
    .dp-vol-fill{ position:absolute; left:0; right:0; bottom:0; height:85%;
      border-radius:3px; background:var(--accent); }
    .dp-vol-thumb{ position:absolute; left:50%; bottom:85%;
      width:12px; height:12px; border-radius:50%; background:#fff;
      box-shadow:0 2px 6px rgba(0,0,0,.55), 0 0 0 2px rgba(201,64,16,.25);
      transform:translate(-50%, 50%); pointer-events:none;
      transition:bottom .08s linear, transform .12s, box-shadow .15s; }
    .dp-vol.open .dp-vol-thumb{ transform:translate(-50%, 50%) scale(1.05); }

    /* .dp werkt op alle viewports — de oude mobiele mini-speler verbergen we volledig */
    .dp.dp-shown{ display:block; }
    #miniPlayer{ display:none !important; }

    /* ─── DESKTOP SPELER — mobiele variant (<640px) ─── */
    /* Eenvoudiger: artwork (met play-overlay) · titel/artiest · zoomed waveform.
       Geen prev/play/next, geen tijd, geen secundaire knoppen. */
    @media (max-width:639px){
      .dp{
        left:50%; transform:translateX(-50%);
        bottom:calc(var(--nav-h) + 10px);
        width:calc(100vw - 16px);
        height:58px; border-radius:29px;
      }
      .dp.dp-open{ height:58px; border-radius:29px; cursor:pointer; }
      /* dp-body inkorten tot bar-hoogte zodat er geen onzichtbaar gebied is
         dat clicks op de rest van het scherm onderschept */
      .dp-body{ height:58px; }
      .dp .dp-panel{ display:none; }
      .dp .dp-secondary{ display:none; }
      .dp .dp-collapse{ display:none; }
      .dp .dp-transport{ display:none; }
      .dp .dp-time{ display:none; }

      .dp-bar{ height:58px; padding:0 10px; gap:10px; }

      /* Play/pause = doorzichtige glazen ZIJKANT van de speler. De linkerkant is
         frosted-transparant (scherm erachter schijnt erdoor) en fadet horizontaal,
         met een rechte verticale rand, volledig in de balk-achtergrond vóór de tekst. */
      .dp-art-mini{
        width:88px; height:100%; flex:none; margin-left:-10px; border-radius:0;
        cursor:pointer; position:relative; background:transparent;
        transition:transform .12s;
      }
      .dp-art-mini:active{ transform:scale(.97); }
      .dp-art-mini img{ display:none; }
      .dp-art-overlay{
        position:absolute; left:0; top:0; width:56px; height:100%;
        display:flex; align-items:center; justify-content:center;
        background:transparent; color:#fff; pointer-events:none;
      }
      .dp-art-overlay svg{ width:22px; height:22px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
      /* Solide speler-zijkanten: geen transparante/glazen randen meer. De frosted
         glaslaag is weg en de (al opake) achtergrond vult de hele pil edge-to-edge. */
      .dp-glass{ display:none; }
      .dp-bg-wrap{ -webkit-mask:none; mask:none; }
      /* clip op mobiel zodat de glazen zijkant de ronding volgt; geen rand/highlight-lijn */
      .dp{ overflow:hidden; border-color:transparent; box-shadow:0 12px 36px rgba(0,0,0,.5); }

      .dp-meta{ flex:0 1 110px; min-width:50px; }
      .dp-title{ font-size:12.5px; line-height:14px; }
      .dp-artist{ font-size:10.5px; line-height:12px; margin-top:1px; }

      .dp-wave{
        flex:1; height:36px; min-width:60px;
        touch-action:none;
      }
      /* zachte fade aan de randen — bars verschijnen en verdwijnen geleidelijk */
      .dp-wave canvas{
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
                mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
      }

      /* artiestnaam niet klikbaar op mobiel — tap valt door naar de bar (opent NP) */
      .dp-artist.clickable{
        pointer-events:none;
        text-decoration:none;
        cursor:default;
      }
      .dp-artist.clickable:hover{
        color:rgba(255,255,255,.62);
        text-decoration:none;
      }
    }

    /* Op desktop: art-overlay verbergen (daar is een aparte play-knop) */
    @media (min-width:640px){
      .dp-art-overlay{ display:none; }
    }

    @media(min-width:640px){
      body{max-width:100%;}
      .sidebar{
        display:flex;flex-direction:column;position:fixed;left:0;top:0;
        bottom:var(--player-h);width:var(--sidebar-w);
        background:var(--bg2);border-right:1px solid var(--border);
        padding:16px 0 20px;z-index:25;opacity:0;pointer-events:none;transition:opacity .3s;
        overflow-y:auto;
      }
      .sidebar.visible{opacity:1;pointer-events:all;}
      .sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px;flex:1;}
      .sidebar-item{
        display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:10px;
        cursor:pointer;font-size:14px;font-weight:500;color:var(--text);
        transition:background-color .15s,color .15s;
      }
      .sidebar-item:hover{background:var(--bg3);color:var(--text);}
      .sidebar-item.active{background:var(--bg3);color:var(--accent);transition:color .15s;}
      .sidebar-item svg{flex-shrink:0;color:inherit;}
      #sb-alle .sidebar-item, #sb-singles .sidebar-item,
      #sb-artiesten .sidebar-item, #sb-playlists .sidebar-item,
      #sb-albums .sidebar-item { color:var(--text); }
      .sidebar-divider{height:1px;background:var(--border);margin:12px 20px;}
      .od-search-wrap{padding:4px 10px 8px;}
      .od-search-wrap input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:7px 14px;color:var(--text);font-size:13px;outline:none;font-family:inherit;box-sizing:border-box;}
      .od-search-wrap input::placeholder{color:var(--dimmed);}
      .od-search-wrap input:focus{border-color:var(--accent);}
      .sidebar-section-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dimmed);padding:8px 14px 6px;}
      .sidebar-filter-row{display:flex;gap:6px;padding:4px 14px 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
      .sidebar-filter-row::-webkit-scrollbar{display:none;}
      .sidebar-chip:hover{background:var(--bg2);color:var(--text);border-color:#444;}
      .screen{margin-left:var(--sidebar-w);}
      #screen-login{margin-left:0;align-items:center;justify-content:center;}
      #screen-login .login-logo,#screen-login .login-form{width:100%;max-width:380px;}
      #screen-membership{margin-left:0;align-items:center;}
      #screen-membership .membership-wrap{max-width:430px;}
      #screen-devtest{margin-left:0;align-items:center;}
      #screen-devtest .devtest-wrap{max-width:430px;}
      .app-header{padding-top:28px;}
      #bottomNav{display:none!important;}
      .mini-player{left:calc(var(--sidebar-w) + 50% - var(--sidebar-w)/2);transform:translateX(-50%);width:152px;bottom:20px;}
      .mini-player.active{width:min(620px,calc(100% - var(--sidebar-w) - 48px));}
      .mini-player-art{width:48px;height:48px;}
      .scrollable{padding-bottom:calc(var(--player-h)+20px);}
      .np-screen{left:var(--sidebar-w);transform:translateY(100%);width:calc(100% - var(--sidebar-w));max-width:none;}
      .np-screen.open{transform:translateY(0);}
      .np-artwork-wrap{width:min(300px,calc(100% - 80px));}
      .album-card{flex:0 0 150px;}
      .album-art{width:150px;height:150px;}
      .featured-card{height:240px;}
      .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0 12px 12px;}
      .settings-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin:4px;display:flex;flex-direction:column;}
      .settings-card .settings-section-head{padding-top:16px;}
      .settings-card .player-skin-grid{padding:0 20px 20px;}
      .settings-card .text-style-opts{margin:0 20px 20px;}

    }
  
    /* ─── SCHERM-ENTREE ANIMATIE ─── */
    /* screenIn speelt alleen bij directe tab-wissels (klasse screen-in).
       Tijdens een nav-transitie regelt JS de animatie zelf — die schermen
       krijgen geen screen-in, dus geen ongewenste extra fade. */
    @keyframes screenIn {
      from { opacity:0; }
      to   { opacity:1; }
    }
    .screen.screen-in {
      animation: screenIn 150ms cubic-bezier(0.165,0.84,0.44,1) both;
    }

    /* ─── REDUCED MOTION ─── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
      .screen.nav-transition { will-change: auto; }
      .np-screen { transition: none; }
    }

    /* ══════════════════════════════════════════
       DETAIL SCHERMEN — gedeelde stijlen
    ══════════════════════════════════════════ */
    .detail-hero{position:relative;width:100%;height:270px;flex-shrink:0;overflow:hidden;}
    .detail-hero-img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;}
    .playlist-orb-viewer{position:absolute;inset:0;width:100%;height:100%;border:none;display:none;background:#000;}
    .detail-hero-grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(0,0,0,.35) 45%,var(--bg) 100%);}
    .detail-footer-banner{position:relative;width:100%;height:200px;overflow:hidden;flex-shrink:0;margin-top:8px;}
    .detail-footer-banner img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;}
    .detail-footer-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom, var(--bg) 0%, transparent 45%, transparent 100%);}
    .detail-back{position:absolute;top:16px;left:16px;z-index:4;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;border:1px solid rgba(255,255,255,.15);}
    .detail-hero-info{position:absolute;bottom:0;left:20px;right:20px;z-index:3;padding-bottom:18px;}
    .detail-hero-label{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin-bottom:5px;}
    .detail-hero-title{font-size:26px;font-weight:900;color:#fff;line-height:1.1;margin-bottom:4px;}
    .detail-hero-sub{font-size:13px;color:rgba(255,255,255,.6);}
    .detail-body{flex:1;overflow-y:auto;padding-bottom:100px;}
    /* Playlist eindigt met de ingefade artwork-footer als laatste element —
       geen zwart vlak (padding) eronder. */
    #screen-playlist .detail-body{padding-bottom:0;}
    #screen-playlist .detail-footer-banner{margin-bottom:0;}

    /* Collection-items faden in na het laden (geen flits), met lichte stagger. */
    @keyframes libFadeIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
    .lib-fade-in{animation:libFadeIn .34s cubic-bezier(.165,.84,.44,1) both;}
    .detail-action-row{display:flex;gap:10px;padding:18px 20px 6px;align-items:center;}
    .detail-play-btn{flex:1;height:36px;background:var(--accent);color:#fff;border:none;border-radius:100px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
    .detail-shuffle-btn{width:36px;height:36px;flex-shrink:0;background:var(--bg3);border:1px solid var(--border);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);}
    .detail-shuffle-btn:hover{color:var(--text);}
    .detail-shuffle-btn.active{color:#FF5E1A;border-color:#FF5E1A;}
    .detail-like-btn{width:36px;height:36px;flex-shrink:0;background:var(--bg3);border:1px solid var(--border);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);}
    .detail-like-btn:hover{color:var(--accent);}

    /* Artiest */
    /* Artiest headshot rondje */

    .artiest-stats-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px 20px 6px;}
    .artiest-stats{display:flex;width:100%;gap:0;padding-top:4px;}
    .artiest-stat{flex:1;text-align:center;}
    .artiest-stat-val{font-size:16px;font-weight:800;color:var(--text);}
    .artiest-stat-lbl{font-size:10px;color:var(--muted);margin-top:2px;letter-spacing:.5px;}
    .artiest-bio{font-size:13px;color:var(--muted);line-height:1.6;padding:0 20px 20px;}

    /* ─── ARTIEST VIP KNOP ─── */
    .artiest-vip-btn{
      display:flex;align-items:center;gap:5px;
      padding:0 12px;height:36px;
      background:transparent;
      border:1px solid var(--border);border-radius:18px;cursor:pointer;
      font-size:12px;font-weight:700;letter-spacing:.04em;
      color:var(--muted);transition:all .2s;flex-shrink:0;margin-left:auto;
    }
    .artiest-vip-btn:hover{border-color:#555;color:var(--text);}
    .artiest-vip-btn svg{color:var(--muted);transition:color .2s;}
    .artiest-vip-btn.active{background:linear-gradient(135deg,#2d2100,#433100);border-color:#c9a010;color:#ffd700;}
    .artiest-vip-btn.active svg{color:#ffd700;}
    .artiest-vip-btn.active:hover{background:linear-gradient(135deg,#3d2d00,#5a4200);}

    /* ─── ARTIEST VIP SCREEN ─── */
    .avip-badge-hero{
      display:inline-flex;align-items:center;gap:5px;
      background:rgba(201,64,16,.25);border:1px solid rgba(201,64,16,.4);
      border-radius:12px;padding:3px 10px;
      font-size:11px;font-weight:700;color:var(--accent2);
      letter-spacing:.05em;margin-bottom:6px;
    }
    .avip-frag-list{padding:0 20px 100px;}
    .avip-frag-item{
      display:grid;grid-template-columns:44px 1fr auto;
      align-items:center;gap:12px;
      padding:12px 0;border-bottom:1px solid var(--border);
      cursor:pointer;border-radius:8px;transition:background .15s;
    }
    .avip-frag-item:hover{background:var(--bg3);}
    .avip-frag-item.locked{cursor:default;opacity:.45;pointer-events:none;}
    .avip-frag-art{width:44px;height:44px;border-radius:8px;overflow:hidden;background:var(--bg3);}
    .avip-frag-art img{width:100%;height:100%;object-fit:cover;}
    .avip-frag-info{min-width:0;}
    .avip-frag-title{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .avip-frag-desc{font-size:11px;color:var(--muted);margin-top:2px;}
    .avip-frag-play{
      width:32px;height:32px;border-radius:50%;
      background:var(--accent);display:flex;align-items:center;justify-content:center;
      color:#fff;flex-shrink:0;
    }
    .avip-frag-dur{font-size:12px;color:var(--dimmed);white-space:nowrap;}
    .avip-lock-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--dimmed);font-weight:600;}
    .avip-paywall{
      margin:20px 20px 0;
      background:var(--bg2);border:1px solid var(--border);
      border-radius:14px;padding:22px 18px;
      display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
    }
    .avip-paywall-icon{margin-bottom:2px;color:var(--dimmed);}
    .avip-paywall-title{font-size:17px;font-weight:800;color:var(--text);}
    .avip-paywall-sub{font-size:13px;color:var(--muted);line-height:1.55;}
    .avip-paywall-price{font-size:24px;font-weight:900;color:var(--accent);}
    .avip-paywall-btn{
      width:100%;padding:13px;background:var(--accent);color:#fff;
      border:none;border-radius:12px;font-size:15px;font-weight:700;
      cursor:pointer;transition:background .2s;
    }
    .avip-paywall-btn:hover{background:var(--accent2);}
    .avip-section-title{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;padding:16px 20px 8px;}
    .avip-unlocked-badge{
      display:inline-flex;align-items:center;gap:6px;
      background:rgba(34,180,80,.12);border:1px solid rgba(34,180,80,.25);
      border-radius:12px;padding:4px 12px;margin:14px 20px 0;
      font-size:11px;font-weight:700;color:#22b450;letter-spacing:.04em;
    }

    /* Single — artwork float */
    .single-detail-hero{position:relative;width:100%;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:60px;}
    .single-detail-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(40px) brightness(.35);transform:scale(1.1);}
    .single-detail-art{position:relative;z-index:2;width:180px;height:180px;border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.7);}
    .single-detail-art .flip-card { width:100%; height:100%; }
    .single-detail-art .flip-card-front { border-radius:16px; overflow:hidden; }
    .single-detail-art .flip-card-back { border-radius:16px; }
    .single-detail-art img{width:100%;height:100%;object-fit:cover;}
    .single-detail-fade{position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to bottom,transparent,var(--bg));z-index:3;}
    .single-detail-info{position:relative;z-index:2;text-align:center;padding:18px 20px 0;}
    .single-detail-title{font-size:22px;font-weight:900;color:#fff;margin-bottom:4px;}
    .single-detail-artist{font-size:14px;color:var(--accent);font-weight:600;cursor:pointer;}
    .single-detail-meta{font-size:12px;color:var(--muted);margin-top:4px;}

    /* Album tracklist */
    .album-tracklist{padding:0 20px;}
    .album-track-row{display:grid;grid-template-columns:28px 1fr auto auto auto;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
    @media (hover:hover){ .album-track-row:hover{background:var(--bg3);} }
    .album-track-row:last-child{border-bottom:none;}
    .album-track-num{font-size:13px;color:var(--dimmed);text-align:right;}
    .album-track-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
    .album-track-dur{font-size:12px;color:var(--dimmed);white-space:nowrap;}
    .album-info-block{padding:20px;color:var(--muted);font-size:12px;line-height:1.6;border-top:1px solid var(--border);margin-top:8px;}

    /* --- Track dots button --- */
    .track-dots-btn {
      flex-shrink:0; width:36px; height:36px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      color:var(--dimmed); cursor:pointer;
      transition:background .15s, color .15s;
    }
    @media (hover:hover){ .track-dots-btn:hover { background:var(--bg3); color:var(--text); } }

    /* --- Track add (+) button & dropdown --- */
    .track-add-btn {
      flex-shrink:0; width:32px; height:32px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      color:var(--dimmed); cursor:pointer; position:relative;
      opacity:0; transition:opacity .15s, background .15s, color .15s;
    }
    @media (hover:hover){
      .track-row:hover .track-add-btn { opacity:1; }
      .track-add-btn:hover { background:var(--bg3); color:var(--text); }
    }
    /* Op touch geen hover-reveal → +-knop altijd zichtbaar zodat 'ie bruikbaar blijft,
       en de eerste tik op de rij meteen de click afvuurt (geen sticky-hover-tap). */
    @media (hover:none) and (pointer:coarse){ .track-add-btn{ opacity:1; } }
    .track-add-dropdown {
      position:absolute; right:0; top:calc(100% + 4px); z-index:50;
      background:var(--bg2); border:1px solid var(--border);
      border-radius:10px; min-width:180px;
      box-shadow:0 8px 24px rgba(0,0,0,.5);
      overflow:hidden; display:none;
    }
    .track-add-dropdown.open { display:block; }
    .track-add-opt {
      display:flex; align-items:center; gap:10px;
      padding:11px 14px; cursor:pointer; font-size:13px; color:var(--text);
      transition:background .12s;
    }
    .track-add-opt:hover { background:var(--bg3); }
    .track-add-opt svg { flex-shrink:0; color:var(--dimmed); }

    /* --- Track menu bottom sheet --- */
    .track-menu-backdrop {
      position:fixed; inset:0; z-index:299;
      background:rgba(0,0,0,0.55);
      opacity:0; pointer-events:none;
      transition:opacity 0.24s ease;
    }
    .track-menu-backdrop.open { opacity:1; pointer-events:auto; }

    .track-menu-sheet {
      position:fixed; bottom:0; left:0; right:0; z-index:300;
      background:var(--bg2);
      border-radius:20px 20px 0 0;
      padding-bottom:max(env(safe-area-inset-bottom, 0px), 16px);
      transform:translateY(100%);
      transition:transform 0.28s cubic-bezier(0.23,1,0.32,1);
      box-shadow:0 -8px 40px rgba(0,0,0,0.5);
    }
    .track-menu-sheet.open { transform:translateY(0); }

    .track-menu-handle {
      width:36px; height:4px; border-radius:2px;
      background:rgba(255,255,255,0.15);
      margin:10px auto 0;
    }
    .track-menu-header {
      display:flex; align-items:center; gap:12px;
      padding:14px 18px 12px;
      border-bottom:1px solid var(--border);
    }
    .track-menu-art {
      width:46px; height:46px; border-radius:8px; overflow:hidden; flex-shrink:0;
    }
    .track-menu-art img { width:100%; height:100%; object-fit:cover; }
    .track-menu-title { font-size:14px; font-weight:700; color:var(--text); line-height:1.3; }
    .track-menu-artist { font-size:12px; color:var(--muted); margin-top:2px; }

    .track-menu-options { padding:6px 0; }
    .track-menu-opt {
      display:flex; align-items:center; gap:14px;
      padding:13px 20px; cursor:pointer;
      transition:background .12s;
    }
    .track-menu-opt:hover { background:var(--bg3); }
    .track-menu-opt svg { flex-shrink:0; color:var(--dimmed); }
    .track-menu-opt-label { font-size:14px; color:var(--text); }
    .track-menu-opt-sub { font-size:11px; color:var(--dimmed); margin-top:1px; }
    .track-menu-divider { height:1px; background:var(--border); margin:4px 0; }

    /* Podcast afleveringen */
    .podcast-ep{display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);cursor:pointer;align-items:flex-start;}
    .podcast-ep:active{background:var(--bg2);}
    .podcast-ep-art{width:52px;height:52px;border-radius:8px;overflow:hidden;flex-shrink:0;}
    .podcast-ep-art img{width:100%;height:100%;object-fit:cover;}
    .podcast-ep-body{flex:1;min-width:0;}
    .podcast-ep-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px;line-height:1.3;}
    .podcast-ep-desc{font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px;line-height:1.4;}
    .podcast-ep-meta{font-size:11px;color:var(--dimmed);}
    .podcast-ep-play{width:36px;height:36px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--muted);align-self:center;}
    .podcast-ep-play:hover{color:var(--text);border-color:var(--accent);}

    /* Gerelateerd / suggesties */
    .related-scroll{display:flex;gap:12px;padding:4px 20px 16px;overflow-x:auto;scrollbar-width:none;}
    .related-scroll::-webkit-scrollbar{display:none;}
    .related-card{flex-shrink:0;width:100px;cursor:pointer;}
    .related-card-art{width:100px;height:100px;border-radius:10px;overflow:hidden;margin-bottom:6px;}
    .related-card-art img{width:100%;height:100%;object-fit:cover;}
    .related-card-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .related-card-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

    /* ─── ZOEKRESULTATEN ─── */
    .search-results{padding:0 20px 24px;}
    .search-res-section{margin-bottom:18px;}
    .search-res-label{font-size:11px;font-weight:700;color:var(--dimmed);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;padding:0 2px;}
    .search-res-row{display:flex;align-items:center;gap:12px;padding:8px 10px;cursor:pointer;border-radius:10px;transition:background .12s;}
    .search-res-row:hover,.search-res-row:active{background:var(--bg3);}
    .search-res-art{width:42px;height:42px;border-radius:7px;overflow:hidden;flex-shrink:0;background:var(--bg3);}
    .search-res-art.round{border-radius:50%;}
    .search-res-art img{width:100%;height:100%;object-fit:cover;}
    .search-res-info{flex:1;min-width:0;}
    .search-res-name{font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .search-res-sub{font-size:12px;color:var(--muted);}
    .search-empty{padding:48px 20px;text-align:center;color:var(--muted);font-size:14px;line-height:1.6;}

    /* ─── TORCH PITCH INBOX ─── */
    .pitch-inbox-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg);}
    .pitch-inbox-tab{
      flex:1;padding:12px 0;font-size:13px;font-weight:600;color:var(--muted);
      text-align:center;cursor:pointer;border-bottom:2px solid transparent;
      transition:color .15s,border-color .15s;position:relative;
    }
    .pitch-inbox-tab.active{color:var(--text);border-bottom-color:var(--accent);}
    .pitch-inbox-badge{
      display:inline-flex;align-items:center;justify-content:center;
      background:var(--accent);color:#fff;border-radius:100px;
      font-size:9px;font-weight:700;min-width:15px;height:15px;padding:0 4px;
      margin-left:5px;vertical-align:middle;
    }
    .pitch-req-card{
      padding:16px 20px;border-bottom:1px solid var(--border);
    }
    .pitch-req-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
    .pitch-req-art{
      width:52px;height:52px;border-radius:10px;background:var(--bg3);flex-shrink:0;overflow:hidden;position:relative;
    }
    .pitch-req-art img{width:100%;height:100%;object-fit:cover;}
    .pitch-preview-btn{
      position:absolute;bottom:4px;right:4px;width:22px;height:22px;border-radius:50%;
      background:rgba(0,0,0,.72);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
      color:#fff;padding:0;transition:transform .1s,opacity .15s;flex-shrink:0;
    }
    .pitch-preview-btn:active{transform:scale(0.85);}
    .pitch-preview-btn.no-preview{opacity:.35;cursor:default;}
    .pitch-preview-bar{
      display:none;align-items:center;gap:8px;padding:0 2px;margin:-6px 0 10px;
    }
    .pitch-preview-bar.active{display:flex;}
    .pitch-preview-progress{flex:1;height:3px;background:var(--bg3);border-radius:2px;overflow:hidden;}
    .pitch-preview-progress-fill{height:100%;background:var(--accent);border-radius:2px;width:0%;transition:width .25s linear;}
    .pitch-preview-time{font-size:10px;color:var(--dimmed);flex-shrink:0;min-width:26px;text-align:right;}
    .pitch-req-info{flex:1;min-width:0;}
    .pitch-req-artist{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .pitch-req-track{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .pitch-req-meta{font-size:11px;color:var(--dimmed);margin-top:3px;}
    .pitch-req-amount{text-align:right;flex-shrink:0;}
    .pitch-req-amount-val{font-size:20px;font-weight:800;line-height:1;}
    .pitch-req-amount-sub{font-size:10px;color:var(--green);margin-top:3px;}
    .pitch-req-message{
      font-size:13px;color:var(--muted);line-height:1.5;
      background:var(--bg3);border-radius:10px;padding:10px 12px;margin-bottom:12px;
      font-style:italic;
    }
    .pitch-req-actions{display:flex;gap:8px;}
    .pitch-req-btn{
      flex:1;padding:10px 0;border-radius:10px;font-size:13px;font-weight:700;
      cursor:pointer;border:none;font-family:inherit;transition:opacity .15s,transform .12s;
    }
    .pitch-req-btn:active{transform:scale(0.96);opacity:.85;}
    .pitch-req-btn.accept{background:var(--green);color:#000;}
    .pitch-req-btn.decline{background:var(--bg3);color:var(--muted);border:1px solid var(--border);}
    .pitch-req-btn.counter{background:var(--accent);color:#fff;}
    .pitch-placement-badge{
      display:inline-flex;align-items:center;gap:4px;
      font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
      padding:3px 8px;border-radius:6px;
      background:rgba(201,64,16,.15);color:var(--accent);
    }
    .pitch-expiry{font-size:11px;color:var(--dimmed);}
    .pitch-expiry.urgent{color:var(--yellow);}
    .pitch-status-accepted{
      display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
      color:var(--green);padding:8px 12px;background:rgba(76,217,100,.1);
      border-radius:8px;margin-top:4px;
    }
    .pitch-status-declined{
      display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
      color:var(--muted);padding:8px 12px;background:var(--bg3);border-radius:8px;margin-top:4px;
    }
    .pitch-monetization-card{
      margin:16px 20px;padding:18px;border-radius:16px;
      background:linear-gradient(135deg,#0e0800 0%,#1c1000 100%);
      border:1px solid rgba(201,64,16,.3);
    }
    .pitch-monetization-title{font-size:14px;font-weight:700;margin-bottom:4px;}
    .pitch-monetization-sub{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:14px;}
    .pitch-monetization-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
    .toggle{width:44px;height:26px;border-radius:13px;background:var(--bg4);border:1px solid var(--border);cursor:pointer;position:relative;transition:background .2s,border-color .2s;flex-shrink:0;}
    .toggle.on{background:var(--accent);border-color:var(--accent);}
    .toggle-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;}
    .toggle.on .toggle-knob{transform:translateX(18px);}
    .pitch-genre-input{
      width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:10px;
      padding:10px 14px;font-size:13px;color:var(--text);outline:none;font-family:inherit;
      transition:border-color .2s;
    }
    .pitch-genre-input:focus{border-color:var(--accent);}
    .sidebar-notif-badge{
      background:var(--accent);color:#fff;border-radius:100px;
      font-size:9px;font-weight:700;min-width:16px;height:16px;padding:0 4px;
      display:inline-flex;align-items:center;justify-content:center;
      margin-left:auto;
    }

    /* iOS-stijl notificatie-badge: rood balletje met cijfer (Pitch Inbox-meldingen) */
    .ios-badge{
      display:inline-flex;align-items:center;justify-content:center;
      background:#FF3B30;color:#fff;border-radius:100px;
      font-size:11px;font-weight:700;line-height:1;
      min-width:18px;height:18px;padding:0 5px;
    }
    /* op het bottom-nav Profile-icoon: rechtsboven, met ring voor contrast */
    .nav-badge{
      position:absolute;top:1px;left:calc(50% + 5px);
      min-width:16px;height:16px;font-size:10px;padding:0 4px;
      box-shadow:0 0 0 2px var(--bg);
    }

    /* ─── BIBLIOTHEEK DROP ZONE ─── */
    .lib-drop-zone{position:relative;min-height:40px;flex:1 1 auto;}
    /* Sleepbare kaarten echt grijpbaar maken ondanks globale user-select:none.
       -webkit-user-drag:element forceert drag in WebKit/Safari; het artwork laat
       de kaart-drag overnemen zodat je het artwork zelf kunt oppakken. */
    [data-drag]{cursor:grab;}
    [data-drag]:active{cursor:grabbing;}
    [data-drag] img{-webkit-user-drag:none;}
    /* Zwevende thumbnail tijdens het slepen naar de library (pointer-sleep). */
    .lib-drag-ghost{
      position:fixed;z-index:9999;width:52px;height:52px;border-radius:10px;overflow:hidden;
      pointer-events:none;transform:translate(-50%,-50%);opacity:.92;
      box-shadow:0 10px 28px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);
    }
    .lib-drag-ghost img{width:100%;height:100%;object-fit:cover;display:block;}
    .lib-drop-overlay{
      position:absolute;inset:0;z-index:20;
      background:rgba(0,0,0,.88);border-radius:12px;margin:4px 8px;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
      pointer-events:none;opacity:0;transition:opacity .18s;
    }
    .lib-drop-overlay.active{opacity:1;}
    .lib-drop-icon{width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
      display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);}
    .lib-drop-label{font-size:12px;color:rgba(255,255,255,.5);font-weight:500;text-align:center;}
    /* Mobile nav drag target */
    .nav-item.lib-drag-over{background:rgba(0,0,0,.6);border-radius:14px;}
    .nav-item.lib-drag-over .nav-label{color:var(--accent);}