/* ===== Top nav: more breathing room ===== */
    .topbar{padding:18px 26px !important;gap:14px}
    .topbar-logo,.sidebar-name,.topbar-brand{font-size:20px !important;font-weight:900 !important;letter-spacing:.03em !important}
    .topbar .topbar-app,.topbar .topbar-link{padding:11px 20px !important;font-size:13px !important}
    @media(max-width:768px){
      .topbar{padding:14px 16px !important}
      .topbar-logo,.sidebar-name,.topbar-brand{font-size:18px !important}
    }

    /* ===== Popup player redesign — glass, centered, no jumping ===== */
    .retro-overlay{padding:32px !important}
    @media(max-width:768px){ .retro-overlay{padding:0 !important} }
    .retro-player{
      background:rgba(10,10,10,.78) !important;
      backdrop-filter:blur(28px) saturate(140%) !important;
      -webkit-backdrop-filter:blur(28px) saturate(140%) !important;
      border:1px solid rgba(255,255,255,.06) !important;
      border-radius:28px !important;
      box-shadow:0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(212,175,55,.04), inset 0 1px 0 rgba(255,255,255,.04) !important;
      max-width:1080px !important;
      max-height:min(760px, 92vh) !important;
      width:100% !important;
      grid-template-columns:1fr 360px !important;
      overflow:hidden !important;
    }
    @media(max-width:768px){
      .retro-player{
        border-radius:0 !important;
        max-width:100vw !important;
        max-height:100% !important;
        background:#000 !important;
        backdrop-filter:none !important;
        grid-template-columns:1fr !important;
      }
    }
    .retro-left{padding:22px 32px 26px !important}
    @media(max-width:768px){.retro-left{padding:18px 18px 22px !important}}
    .retro-right{background:rgba(255,255,255,.02) !important;border-left:1px solid rgba(255,255,255,.05) !important}
    @media(max-width:768px){.retro-right{border-left:none !important}}

    /* prevent body content jumping when player opens (clip scrollbar shift) */
    html{scrollbar-gutter:stable}

    /* ===== Seek bar rebuild — always visible, drag, buffer, hover ===== */
    .retro-progress{
      height:8px !important;
      background:rgba(255,255,255,.16) !important;
      border-radius:999px !important;
      margin:14px 0 6px !important;
      cursor:pointer !important;
      position:relative !important;
      overflow:visible !important;
      transition:height .15s ease !important;
    }
    .retro-progress::before{
      /* buffered region */
      content:"";position:absolute;left:0;top:0;height:100%;width:var(--buf,0%);
      background:rgba(255,255,255,.28);border-radius:999px;transition:width .25s linear;pointer-events:none;
    }
    .retro-progress:hover{height:10px !important}
    .retro-progress-fill{
      height:100% !important;
      background:#ffffff !important;
      border-radius:999px !important;
      transition:width .15s linear !important;
      box-shadow:0 0 10px rgba(255,255,255,.18) !important;
      position:relative !important;
    }
    .retro-progress:hover .retro-progress-fill{background:var(--accent) !important;box-shadow:0 0 12px rgba(212,175,55,.45) !important}
    .retro-progress-fill::after{
      content:"" !important;
      position:absolute !important;
      right:-8px !important;top:50% !important;
      transform:translateY(-50%) scale(0) !important;
      width:16px !important;height:16px !important;border-radius:50% !important;
      background:#fff !important;
      box-shadow:0 0 0 4px rgba(255,255,255,.18) !important;
      transition:transform .18s cubic-bezier(.22,.61,.36,1), background .2s, box-shadow .2s !important;
      opacity:1 !important;
    }
    .retro-progress:hover .retro-progress-fill::after,
    .retro-progress.dragging .retro-progress-fill::after{
      transform:translateY(-50%) scale(1) !important;
      background:var(--accent) !important;
      box-shadow:0 0 0 6px rgba(212,175,55,.22) !important;
    }
    .lcd-time-row{font-size:12px !important;color:rgba(255,255,255,.55) !important;letter-spacing:.04em;padding:0 2px !important;font-variant-numeric:tabular-nums}

    /* ===== Title marquee ===== */
    .lcd-title{padding:0 !important;overflow:hidden !important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
    .lcd-title-inner{display:inline-block;white-space:nowrap;will-change:transform}
    .lcd-title-inner.marquee{animation:rsMarquee var(--mq-dur,14s) linear infinite}
    @keyframes rsMarquee{
      0%   {transform:translateX(0)}
      8%   {transform:translateX(0)}                       /* 2s pause at start */
      50%  {transform:translateX(calc(-1 * var(--mq-dist,200px) - 24px))}
      58%  {transform:translateX(calc(-1 * var(--mq-dist,200px) - 24px))} /* 2s pause at end */
      100% {transform:translateX(0)}
    }
    .mini-bar-title{
      display:inline-block !important;
      white-space:nowrap !important;
      max-width:100%;
    }
    .mini-bar-title.marquee{animation:rsMarquee var(--mq-dur,14s) linear infinite}

    /* ===== Bottom mini-player rewrite ===== */
    .mini-bar{
      background:rgba(0,0,0,.88) !important;
      backdrop-filter:blur(22px) !important;
      -webkit-backdrop-filter:blur(22px) !important;
      border-top:1px solid rgba(255,255,255,.06) !important;
      height:auto !important;
      min-height:64px;
      padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 10px) !important;
      bottom:0 !important;
      gap:14px !important;
    }
    .mini-bar::before{display:none !important}
    .mini-bar.visible ~ .bottom-nav, .mini-bar.visible{
      /* mini-bar sits above bottom-nav on mobile */
    }
    @media(max-width:768px){
      .mini-bar{
        bottom:calc(64px + env(safe-area-inset-bottom,0px)) !important; /* above bottom-nav */
        border-radius:14px !important;
        margin:0 10px;
        left:0 !important;right:0 !important;
        border:1px solid rgba(255,255,255,.06) !important;
      }
    }
    .mini-bar-thumb{
      width:44px !important;height:44px !important;border-radius:10px !important;
      border:none !important;
      background:linear-gradient(135deg,#222 0%,#0a0a0a 100%) !important;
      font-size:16px !important;color:rgba(255,255,255,.85) !important;
    }
    .mini-bar-title{font-size:14px !important;font-weight:600 !important;color:#fff !important}
    .mini-bar-artist{font-size:12px !important;color:rgba(255,255,255,.55) !important;font-weight:500}
    .mini-bar-open{background:transparent !important;border:1px solid rgba(255,255,255,.14) !important;color:rgba(255,255,255,.75) !important;border-radius:999px !important;padding:6px 14px !important;font-weight:600 !important;font-size:11.5px !important;letter-spacing:.04em !important}
    .mini-bar-open:hover{border-color:var(--accent) !important;color:var(--accent) !important}
    .mini-bar-progress{height:2px !important;background:var(--accent) !important;box-shadow:0 0 8px rgba(212,175,55,.6) !important}

    /* push page content above the mini-bar so it never overlaps */
    body.has-mini-bar .page{padding-bottom:96px}
    @media(max-width:768px){
      body.has-mini-bar .page{padding-bottom:160px}
    }

    /* ===== Mobile typography bump (settings/profile only) ===== */
    @media(max-width:768px){
      .pc-row{font-size:15.5px !important;padding:14px 14px !important}
      .pc-row svg{width:20px;height:20px}
      .pc-settings-label{font-size:11.5px !important;letter-spacing:.18em !important;margin-bottom:12px !important}
      .profile-card-name{font-size:22px !important}
      .profile-card-email{font-size:14px !important}
      .profile-card-since{font-size:13px !important}
      .profile-stat-num{font-size:24px !important}
      .profile-stat-label{font-size:11.5px !important;letter-spacing:.12em}
      .nav-label{font-size:10.5px !important;letter-spacing:.22em !important}
      .nav-item{font-size:15px !important;padding:13px 14px !important}
      .dd-item{font-size:14.5px !important;padding:12px 14px !important}
      .profile-action{font-size:13.5px !important;padding:13px 16px !important}
    }

    /* ===== Library panels (Liked / Playlists / Notes) — Spotify mobile look ===== */
    .panel-head{padding:18px 18px 12px !important}
    .panel-head .panel-title{font-size:22px !important;font-weight:900 !important;letter-spacing:-.02em !important}
    .lib-segment{display:flex;gap:8px;padding:6px 18px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .lib-segment::-webkit-scrollbar{display:none}
    .lib-seg-btn{
      flex-shrink:0;display:inline-flex;align-items:center;gap:7px;
      background:transparent;border:1.5px solid rgba(255,255,255,.18);
      color:rgba(255,255,255,.85);border-radius:999px;
      padding:8px 16px;font-family:'Roboto',sans-serif;font-size:13px;font-weight:600;
      cursor:pointer;transition:all .2s;
    }
    .lib-seg-btn:hover{border-color:var(--accent);color:var(--accent)}
    .lib-seg-btn.active{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.5);color:#fff}

    /* row card matching the screenshot */
    .lib-row{
      display:flex;align-items:center;gap:14px;
      padding:10px 14px;border-radius:14px;cursor:pointer;
      transition:background .2s, transform .15s;
      position:relative;
    }
    .lib-row:hover{background:rgba(255,255,255,.04)}
    .lib-row.now{background:linear-gradient(90deg,rgba(212,175,55,.10),rgba(212,175,55,.02))}
    .lib-thumb{
      width:54px;height:54px;border-radius:10px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,#1a1a1a,#0a0a0a);
      font-weight:800;color:#fff;font-size:18px;
      box-shadow:0 4px 14px rgba(0,0,0,.4);
    }
    .lib-row.now .lib-thumb{box-shadow:0 4px 18px rgba(212,175,55,.25)}
    .lib-info{flex:1;min-width:0}
    .lib-title{font-size:15px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
    .lib-row.now .lib-title{color:var(--accent)}
    .lib-sub{font-size:13px;color:rgba(255,255,255,.55);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .lib-play{
      width:44px;height:44px;border-radius:50%;border:none;
      background:linear-gradient(135deg,#ff5060,#c01a2e);color:#fff;
      display:flex;align-items:center;justify-content:center;cursor:pointer;
      box-shadow:0 8px 22px rgba(255,80,96,.36);
      flex-shrink:0;transition:transform .15s, box-shadow .2s;
    }
    .lib-play:hover{transform:scale(1.06);box-shadow:0 12px 30px rgba(255,80,96,.5)}
    .lib-menu-btn{
      background:transparent;border:none;color:rgba(255,255,255,.55);
      width:32px;height:32px;border-radius:50%;cursor:pointer;
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
      transition:background .2s, color .2s;
    }
    .lib-menu-btn:hover{background:rgba(255,255,255,.08);color:var(--accent)}