/* ================================================================
   SPOTIFY CLONE — CSS
   Tokens → Base → Sidebar → Search morph → Main → Player → Mobile
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ── TOKENS ────────────────────────────────────────────────────── */
:root {
  --bg:        #0a0a0a;
  --surface:   #121212;
  --card:      #181818;
  --hover:     #282828;
  --active:    #3e3e3e;
  --elev:      #242424;
  --border:    rgba(255,255,255,.07);
  --green:     #1db954;
  --green-h:   #1ed760;
  --white:     #fff;
  --t1:        #fff;
  --t2:        #b3b3b3;
  --t3:        #6a6a6a;
  --scrim:     rgba(0,0,0,.78);

  --gap:   8px;
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-f:   9999px;

  --sidebar-w: 272px;
  --player-h:  88px;     /* overridden per breakpoint */
  --topnav-h:  64px;

  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  .2s;
  --font: 'DM Sans', system-ui, sans-serif;

  --sh1: 0 4px 16px rgba(0,0,0,.5);
  --sh2: 0 12px 40px rgba(0,0,0,.7);
}

/* ── RESET ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--t1);font-size:14px;line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font-family:var(--font);cursor:pointer;border:none;background:none;color:inherit}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
ul{list-style:none}
input{font-family:var(--font)}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#444;border-radius:var(--r-f)}
::-webkit-scrollbar-thumb:hover{background:#666}

/* ── MIXINS (as utility classes) ──────────────────────────────── */
.flex-center{display:flex;align-items:center;justify-content:center}

/* ================================================================
   APP SHELL
   ================================================================ */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  height:calc(100dvh - var(--player-h));
  gap:var(--gap);
  padding:var(--gap) var(--gap) 0;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar{
  background:var(--surface);
  border-radius:var(--r-xl);
  display:flex;flex-direction:column;
  overflow:hidden;min-height:0;
}

/* overlay */
.sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:var(--scrim);z-index:98;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
  backdrop-filter:blur(3px);
}
.sidebar-overlay.active{opacity:1;pointer-events:all}

/* header */
.sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 20px 16px;flex-shrink:0;
}
.logo{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;letter-spacing:-.4px}
.logo svg{width:30px;height:30px;color:var(--green);flex-shrink:0}

.close-sidebar{
  display:none;width:32px;height:32px;
  align-items:center;justify-content:center;
  color:var(--t2);border-radius:var(--r-f);transition:all var(--dur) var(--ease);
}
.close-sidebar:hover{background:var(--hover);color:var(--white)}
.close-sidebar svg{width:18px;height:18px}

/* ── SIDEBAR NAV ───────────────────────────────────────────────── */
.sidebar-nav{
  padding:8px 12px;
  display:flex;flex-direction:column;gap:4px;
  flex-shrink:0;
}

/* base nav-item style */
.nav-item{
  display:flex;align-items:center;gap:16px;
  padding:10px 12px;border-radius:var(--r-md);
  color:var(--t2);font-weight:600;font-size:14px;
  width:100%;text-align:left;transition:all var(--dur) var(--ease);
}
.nav-item svg{width:22px;height:22px;flex-shrink:0}
.nav-item:hover,.nav-item.active{color:var(--white);background:var(--hover)}
.nav-item.active{background:none}   /* home stays white text, no bg */

/* ================================================================
   SEARCH NAV → MORPH
   The wrapper holds both layers at the same height.
   When .open, the button fades out & slides up,
   the input field fades in & slides down from same position.
   ================================================================ */
.nav-search-item{
  position:relative;
  /* min-height keeps the space stable while animating */
  min-height:44px;
}

/* --- Layer A: button --- */
.nav-search-btn{
  /* identical look to .nav-item */
  display:flex;align-items:center;gap:16px;
  padding:10px 12px;border-radius:var(--r-md);
  color:var(--t2);font-weight:600;font-size:14px;
  width:100%;text-align:left;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease),
             opacity .2s var(--ease), transform .2s var(--ease);
  position:relative;z-index:1;
}
.nav-search-btn svg{width:22px;height:22px;flex-shrink:0}
.nav-search-btn:hover{color:var(--white);background:var(--hover)}

/* when search is open — hide the button */
.nav-search-item.open .nav-search-btn{
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px);
}

/* --- Layer B: input field --- */
.nav-search-field{
  position:absolute;
  top:0;left:0;right:0;
  display:flex;align-items:center;gap:8px;
  background:var(--elev);
  border:1.5px solid transparent;
  border-radius:var(--r-lg);
  padding:0 10px 0 14px;
  height:44px;
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease),
             border-color var(--dur) var(--ease);
  z-index:2;
}
.nav-search-field svg{width:16px;height:16px;color:var(--t2);flex-shrink:0}
.nav-search-field input{
  flex:1;background:none;border:none;outline:none;
  color:var(--t1);font-size:13px;min-width:0;
}
.nav-search-field input::placeholder{color:var(--t3)}
.nav-search-field:focus-within{border-color:var(--white)}

.nsf-close{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--t2);border-radius:var(--r-f);
  transition:color var(--dur) var(--ease);flex-shrink:0;
}
.nsf-close:hover{color:var(--white)}
.nsf-close svg{width:14px;height:14px}

/* when search is open — show the field */
.nav-search-item.open .nav-search-field{
  opacity:1;
  pointer-events:all;
  transform:translateY(0);
}

/* --- Search results list --- */
.sidebar-results{
  display:flex;flex-direction:column;gap:2px;
  max-height:0;overflow:hidden;
  transition:max-height .3s var(--ease);
  margin-top:4px;
}
.nav-search-item.open .sidebar-results{
  max-height:300px;
  overflow-y:auto;
}

.sidebar-results li{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--r-md);
  cursor:pointer;transition:background var(--dur) var(--ease);
  min-height:44px;
}
.sidebar-results li:hover{background:var(--hover)}
.sidebar-results li.sr-playing .sr-li-name{color:var(--green)}

.sr-li-art{
  width:36px;height:36px;flex-shrink:0;
  border-radius:var(--r-sm);overflow:hidden;
  background:var(--elev);
  display:flex;align-items:center;justify-content:center;
}
.sr-li-art img{width:100%;height:100%;object-fit:cover}
.sr-li-art svg{width:16px;height:16px;color:var(--t2)}
.sr-li-info{flex:1;min-width:0}
.sr-li-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
.sr-li-album{font-size:11px;color:var(--t2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-empty{padding:12px 10px;font-size:13px;color:var(--t2);text-align:center}

/* ── LIBRARY ───────────────────────────────────────────────────── */
.library-section{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
  margin:8px 0;border-top:1px solid var(--border);padding-top:12px;
}
.library-header{padding:4px 20px 10px;flex-shrink:0}
.library-title{display:flex;align-items:center;gap:10px;color:var(--t2);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.library-title svg{width:18px;height:18px}

.song-list{flex:1;overflow-y:auto;padding:0 8px 8px}
.song-list li{
  display:flex;align-items:center;gap:12px;
  padding:8px 12px;border-radius:var(--r-md);
  cursor:pointer;transition:background var(--dur) var(--ease);min-height:52px;
}
.song-list li:hover{background:var(--hover)}
.song-list li.active{background:var(--active)}
.song-list li.active .sl-name{color:var(--green)}
.sl-num{width:20px;text-align:center;color:var(--t3);font-size:12px;font-variant-numeric:tabular-nums;flex-shrink:0}
.song-list li.active .sl-num{display:none}
.sl-play-indicator{display:none;width:20px;align-items:center;justify-content:center;flex-shrink:0}
.song-list li.active .sl-play-indicator{display:flex}
.sl-play-indicator svg{width:12px;height:12px;color:var(--green)}
.sl-info{flex:1;min-width:0}
.sl-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1);line-height:1.4}
.sl-artist{font-size:11px;color:var(--t2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sidebar-footer{
  padding:12px 20px;display:flex;flex-wrap:wrap;gap:6px 10px;
  font-size:11px;color:var(--t3);border-top:1px solid var(--border);flex-shrink:0;
}
.sidebar-footer a:hover{color:var(--white);text-decoration:underline}

/* ================================================================
   MAIN CONTENT
   ================================================================ */
.main-content{
  background:linear-gradient(180deg,#1c1e30 0%,#181818 36%);
  border-radius:var(--r-xl);
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  min-height:0;scroll-behavior:smooth;
}

/* ── TOP NAV ───────────────────────────────────────────────────── */
.top-nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:0 24px;height:var(--topnav-h);
  background:rgba(28,30,48,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.nav-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

.hamburger-btn{
  display:none;width:38px;height:38px;
  align-items:center;justify-content:center;
  background:var(--hover);border-radius:var(--r-f);
  color:var(--t1);transition:all var(--dur) var(--ease);flex-shrink:0;
}
.hamburger-btn:hover{background:var(--active)}
.hamburger-btn svg{width:20px;height:20px}

.nav-arrows{display:flex;gap:8px;flex-shrink:0}
.nav-arrow{
  width:32px;height:32px;border-radius:var(--r-f);
  background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  color:var(--t1);transition:all var(--dur) var(--ease);
}
.nav-arrow:hover{background:rgba(255,255,255,.12)}
.nav-arrow svg{width:18px;height:18px}

.search-bar{
  flex:1;max-width:380px;display:flex;align-items:center;
  background:var(--hover);border-radius:var(--r-f);
  padding:0 16px;gap:8px;
  border:1.5px solid transparent;transition:all var(--dur) var(--ease);height:40px;
}
.search-bar:focus-within{border-color:var(--white);background:var(--elev)}
.search-bar svg{width:16px;height:16px;color:var(--t2);flex-shrink:0}
.search-bar input{flex:1;background:none;border:none;outline:none;color:var(--t1);font-size:14px;min-width:0}
.search-bar input::placeholder{color:var(--t2)}
.search-clear{display:none;width:20px;height:20px;align-items:center;justify-content:center;color:var(--t2);border-radius:var(--r-f);transition:color var(--dur) var(--ease);flex-shrink:0}
.search-clear.visible{display:flex}
.search-clear:hover{color:var(--white)}
.search-clear svg{width:12px;height:12px}

.btn-signup{color:var(--t2);font-weight:700;font-size:14px;padding:8px 16px;border-radius:var(--r-f);transition:all var(--dur) var(--ease);white-space:nowrap}
.btn-signup:hover{color:var(--white)}
.btn-login{background:var(--white);color:#000;font-weight:700;font-size:14px;padding:10px 20px;border-radius:var(--r-f);transition:all var(--dur) var(--ease);white-space:nowrap}
.btn-login:hover{background:#eee;transform:scale(1.03)}

/* ── GREETING ──────────────────────────────────────────────────── */
.greeting-section{padding:32px 24px 20px}
.greeting-text{font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:-.5px;margin-bottom:20px}

.quick-play-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.quick-card{display:flex;align-items:center;background:rgba(255,255,255,.08);border-radius:var(--r-md);overflow:hidden;cursor:pointer;transition:background var(--dur) var(--ease);min-height:56px}
.quick-card:hover{background:rgba(255,255,255,.18)}
.quick-card:hover .quick-play{opacity:1;transform:translateY(0)}
.quick-card-img{width:56px;height:56px;object-fit:cover;flex-shrink:0}
.quick-card-img-fallback{width:56px;height:56px;background:linear-gradient(135deg,#333,#555);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.quick-card-name{flex:1;padding:8px 16px;font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-play{width:44px;height:44px;background:var(--green);border-radius:var(--r-f);display:flex;align-items:center;justify-content:center;margin-right:8px;opacity:0;transform:translateY(6px);transition:all .25s var(--ease);flex-shrink:0;box-shadow:var(--sh1)}
.quick-play:hover{background:var(--green-h);transform:translateY(0) scale(1.06) !important}
.quick-play svg{width:18px;height:18px;color:#000;margin-left:2px}

/* ── ALBUMS ────────────────────────────────────────────────────── */
.albums-section{padding:16px 24px 48px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.section-header h2{font-size:clamp(18px,2.5vw,24px);font-weight:800;letter-spacing:-.3px}
.show-all-btn{font-size:12px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.1em;transition:color var(--dur) var(--ease)}
.show-all-btn:hover{color:var(--white)}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px}

.album-card{background:var(--card);border-radius:var(--r-lg);padding:16px;cursor:pointer;position:relative;transition:background .3s var(--ease),transform .2s var(--ease);display:flex;flex-direction:column;gap:12px}
.album-card:hover{background:var(--hover);transform:translateY(-2px)}
.album-card:hover .card-play-btn{opacity:1;transform:translateY(0)}
.card-img-wrap{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:1/1;background:var(--elev);box-shadow:var(--sh1)}
.card-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.card-img-fallback{width:100%;height:100%;background:linear-gradient(135deg,#2a2a2a,#4a4a4a);display:flex;align-items:center;justify-content:center;font-size:36px}
.card-play-btn{position:absolute;bottom:8px;right:8px;width:44px;height:44px;background:var(--green);border-radius:var(--r-f);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:all .25s var(--ease);box-shadow:var(--sh1)}
.card-play-btn:hover{background:var(--green-h);transform:translateY(0) scale(1.06) !important}
.card-play-btn svg{width:20px;height:20px;color:#000;margin-left:2px}
.card-body{display:flex;flex-direction:column;gap:4px}
.card-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-desc{font-size:12px;color:var(--t2);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ── SEARCH RESULTS PAGE ───────────────────────────────────────── */
.search-results{padding:24px 24px 48px;display:none}
.search-results h2{font-size:20px;font-weight:800;margin-bottom:20px}
.search-result-list{display:flex;flex-direction:column;gap:2px}
.search-result-list li{display:flex;align-items:center;gap:16px;padding:8px 12px;border-radius:var(--r-md);cursor:pointer;transition:background var(--dur) var(--ease);min-height:56px}
.search-result-list li:hover{background:var(--hover)}
.sr-num{width:24px;text-align:center;color:var(--t3);font-size:13px;flex-shrink:0}
.sr-info{flex:1;min-width:0}
.sr-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-album{font-size:12px;color:var(--t2);margin-top:2px}
.sr-play{width:36px;height:36px;border-radius:var(--r-f);background:var(--green);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dur) var(--ease);flex-shrink:0}
.search-result-list li:hover .sr-play{opacity:1}
.sr-play svg{width:16px;height:16px;color:#000;margin-left:2px}

/* ================================================================
   PLAYER BAR — DESKTOP (3-column grid)
   ================================================================ */
.player-bar{
  position:fixed;bottom:0;left:0;right:0;
  height:var(--player-h);
  background:#181818;
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 16px;gap:12px;
  z-index:50;
}

/* shared row wrapper — flex strip */
.prow{display:flex;align-items:center}

/* ── INFO (left) ───────────────────────────────────────────────── */
.prow-info{gap:12px;min-width:0}

.player-thumb{
  width:56px;height:56px;background:var(--elev);border-radius:var(--r-sm);
  overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh1);
}
.player-thumb svg{width:28px;height:28px;color:var(--t2)}
.player-thumb img{width:100%;height:100%;object-fit:cover}

.player-meta{flex:1;min-width:0}
.player-song-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1.4}
.player-album-name{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin-top:2px}

.like-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--t2);border-radius:var(--r-f);transition:all var(--dur) var(--ease);flex-shrink:0}
.like-btn:hover{color:var(--white);transform:scale(1.1)}
.like-btn.liked{color:var(--green)}
.like-btn.liked svg{fill:currentColor}
.like-btn svg{width:18px;height:18px}

/* ── CONTROLS (center) ─────────────────────────────────────────── */
.prow-controls{
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:480px;max-width:100%;
}

.ctrl-btns{display:flex;align-items:center;gap:16px}

.ctrl-btn{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  color:var(--t2);border-radius:var(--r-f);
  transition:all var(--dur) var(--ease);
}
.ctrl-btn:hover{color:var(--white);transform:scale(1.1)}
.ctrl-btn.active{color:var(--green)}
.ctrl-btn svg{width:18px;height:18px}

.play-pause-btn{
  width:40px;height:40px;
  background:var(--white);border-radius:var(--r-f);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur) var(--ease);flex-shrink:0;
}
.play-pause-btn:hover{background:#eee;transform:scale(1.06)}
.play-pause-btn:active{transform:scale(.96)}
.play-pause-btn svg{width:22px;height:22px;color:#000}

/* seek */
.seek-row{display:flex;align-items:center;gap:8px;width:100%}
.time-label{font-size:11px;color:var(--t2);font-variant-numeric:tabular-nums;min-width:34px;flex-shrink:0}
#totalTime{text-align:right}

.progress-bar{
  flex:1;height:4px;background:#535353;border-radius:var(--r-f);
  position:relative;cursor:pointer;transition:height .15s;
}
.progress-bar:hover{height:6px}
.progress-bar:hover .progress-thumb{opacity:1;transform:translate(-50%,-50%) scale(1)}
.progress-bar:hover .progress-fill{background:var(--green)}
.progress-fill{height:100%;background:var(--white);border-radius:var(--r-f);pointer-events:none;width:0%;transition:background .1s}
.progress-thumb{
  position:absolute;top:50%;left:0;
  width:14px;height:14px;background:var(--white);border-radius:var(--r-f);
  transform:translate(-50%,-50%) scale(0);opacity:0;
  transition:opacity .15s,transform .15s var(--ease);pointer-events:none;
}

/* ── VOLUME (right) ────────────────────────────────────────────── */
.prow-volume{gap:8px;justify-content:flex-end}
.vol-btn svg{width:22px;height:22px}
.volume-track-wrap{width:110px}

.volume-bar{
  height:4px;background:#535353;border-radius:var(--r-f);
  position:relative;cursor:pointer;transition:height .15s;
}
.volume-bar:hover{height:6px}
.volume-bar:hover .volume-thumb{opacity:1;transform:translate(-50%,-50%) scale(1)}
.volume-bar:hover .volume-fill{background:var(--green)}
.volume-fill{height:100%;background:var(--white);border-radius:var(--r-f);pointer-events:none;width:70%;transition:background .1s}
.volume-thumb{
  position:absolute;top:50%;left:0;
  width:12px;height:12px;background:var(--white);border-radius:var(--r-f);
  transform:translate(-50%,-50%) scale(0);opacity:0;
  transition:opacity .15s,transform .15s var(--ease);pointer-events:none;
}

/* ================================================================
   QUEUE PANEL
   ================================================================ */
.queue-panel{
  position:fixed;
  bottom:calc(var(--player-h) + 8px);right:16px;
  width:320px;max-height:420px;
  background:#2a2a2a;border-radius:var(--r-xl);
  box-shadow:var(--sh2);border:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(16px) scale(.96);opacity:0;pointer-events:none;
  transition:all .25s var(--ease);z-index:60;
}
.queue-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:all}
.queue-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.queue-header h3{font-size:16px;font-weight:700}
.queue-header>button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--t2);border-radius:var(--r-f);transition:all var(--dur) var(--ease)}
.queue-header>button:hover{color:var(--white);background:var(--hover)}
.queue-header>button svg{width:16px;height:16px}
.queue-list{overflow-y:auto;padding:8px}
.queue-list li{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--r-md);cursor:pointer;transition:background var(--dur) var(--ease);min-height:48px}
.queue-list li:hover{background:var(--hover)}
.queue-list li.now-playing{background:rgba(29,185,84,.12)}
.queue-list li.now-playing .q-name{color:var(--green)}
.q-num{width:20px;text-align:center;font-size:12px;color:var(--t3);flex-shrink:0}
.q-info{flex:1;min-width:0}
.q-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-album{font-size:11px;color:var(--t2);margin-top:1px}

/* ================================================================
   TOAST
   ================================================================ */
.toast{
  position:fixed;
  bottom:calc(var(--player-h) + 20px);left:50%;
  transform:translateX(-50%) translateY(12px);
  background:#333;color:var(--white);
  padding:10px 24px;border-radius:var(--r-f);
  font-size:13px;font-weight:600;
  opacity:0;pointer-events:none;
  transition:all .3s var(--ease);z-index:999;
  white-space:nowrap;box-shadow:var(--sh2);
  border:1px solid rgba(255,255,255,.08);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* 1280 */
@media(max-width:1280px){
  :root{--sidebar-w:240px}
  .quick-play-grid{grid-template-columns:repeat(2,1fr)}
}

/* 1024 */
@media(max-width:1024px){
  :root{--sidebar-w:210px}
  .btn-signup{display:none}
  .prow-controls{width:340px}
  .volume-track-wrap{width:90px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
}

/* ────────────────────────────────────────────────────────────────
   768 — sidebar becomes drawer, player stays 3-col but compressed
   ──────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  :root{--player-h:80px;--topnav-h:56px}

  .app{grid-template-columns:1fr;padding:0;gap:0;height:calc(100dvh - var(--player-h))}

  /* Off-canvas sidebar */
  .sidebar{
    position:fixed;left:0;top:0;
    width:min(300px,85vw) !important;
    height:calc(100dvh - var(--player-h));
    z-index:100;border-radius:0 var(--r-xl) var(--r-xl) 0;
    transform:translateX(-100%);transition:transform .3s var(--ease);
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay{display:block}
  .close-sidebar{display:flex}
  .hamburger-btn{display:flex}

  .main-content{border-radius:0}
  .top-nav{padding:0 16px;gap:8px}
  .nav-arrows{display:none}
  .search-bar{max-width:none}
  .btn-login{padding:8px 16px;font-size:13px}

  .greeting-section{padding:20px 16px 16px}
  .quick-play-grid{grid-template-columns:repeat(2,1fr)}
  .albums-section{padding:16px 16px 40px}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .album-card{padding:12px;gap:8px}

  /* Player stays 3-col */
  .player-bar{padding:0 12px;gap:8px}
  .player-thumb{width:48px;height:48px}
  .prow-info{max-width:100%}
  .volume-track-wrap{width:80px}

  .queue-panel{width:calc(100vw - 40px);right:16px}
}

/* ────────────────────────────────────────────────────────────────
   540 — MOBILE PLAYER: switch to 3-row stacked layout
   Row 1: thumb + song name + like
   Row 2: shuffle | prev | ▶ | next | repeat
   Row 3: vol-icon | vol-bar | time | seekbar | time
   ──────────────────────────────────────────────────────────────── */
@media(max-width:540px){
  :root{--player-h:136px;--topnav-h:52px}

  /* ── content adjustments ── */
  .top-nav{padding:0 12px;gap:8px}
  .search-bar{height:36px;padding:0 12px}
  .search-bar input{font-size:13px}
  .btn-login{padding:7px 14px;font-size:12px}

  .greeting-section{padding:16px 12px 12px}
  .greeting-text{font-size:18px;margin-bottom:12px}
  .quick-play-grid{grid-template-columns:1fr 1fr;gap:8px}
  .quick-card-img,.quick-card-img-fallback{width:48px;height:48px}
  .quick-card-name{font-size:12px;padding:0 12px}
  .quick-play{width:36px;height:36px;margin-right:6px}
  .quick-play svg{width:14px;height:14px}

  .albums-section{padding:12px 12px 40px}
  .section-header h2{font-size:16px}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .album-card{padding:10px;border-radius:var(--r-md);gap:8px}
  .card-title{font-size:13px}
  .card-desc{font-size:11px}
  .card-play-btn{width:36px;height:36px;bottom:6px;right:6px}
  .card-play-btn svg{width:16px;height:16px}
  .search-results{padding:16px 12px 40px}

  /* ── PLAYER: 3-row stack ── */
  .player-bar{
    /* Switch to row layout */
    grid-template-columns: 1fr;
    grid-template-rows: 44px 44px 32px;
    height: var(--player-h);
    padding: 8px 14px 10px;
    gap: 4px;
    align-items: stretch;
  }

  /* Row 1 — .prow-info */
  .prow-info{
    grid-row: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .player-thumb{
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
  }
  .player-thumb svg{ width: 18px; height: 18px; }
  .player-song-name { font-size: 13px; }
  .player-album-name{ font-size: 11px; }
  .like-btn{ width: 28px; height: 28px; margin-left: auto; flex-shrink: 0; }
  .like-btn svg{ width: 16px; height: 16px; }

  /* Row 2 — .prow-controls */
  .prow-controls{
    grid-row: 2;
    flex-direction: row;        /* horizontal in row 2 */
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
  }
  /* hide the seek row — it moves to row 3 */
  .prow-controls .seek-row{ display: none; }

  .ctrl-btns{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0;
  }
  .ctrl-btn{ width: 36px; height: 36px; }
  .ctrl-btn svg{ width: 18px; height: 18px; }
  .play-pause-btn{ width: 38px; height: 38px; }
  .play-pause-btn svg{ width: 20px; height: 20px; }

  /* Row 3 — .prow-volume  (repurposed: vol + seek combined) */
  .prow-volume{
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
  }

  /* ── Inside row 3: inject the seek row via JS sibling trick ──
     We reuse .prow-volume and prepend the seek content.
     The seek-row is moved here in CSS order using a pseudo-element trick —
     actually we show a COPY via the .seek-row that's inside .prow-volume.
     (see HTML: we add a duplicate .seek-row inside .prow-volume) */

  /* Volume icon smaller */
  .vol-btn svg{ width: 18px; height: 18px; }
  .queue-btn{ display: none; } /* hide queue on tiny screens */

  /* Volume bar */
  .volume-track-wrap{
    width: 72px;
    flex-shrink: 0;
  }

  /* The seek row inside row-3 */
  .prow-volume .seek-row{
    display: flex;
    flex: 1;
    gap: 6px;
    align-items: center;
  }
  .time-label{ font-size: 10px; min-width: 28px; }

  .queue-panel{width:calc(100vw - 24px);right:12px}
}

/* 360 */
@media(max-width:360px){
  :root{--player-h:136px}
  .top-nav{padding:0 8px}
  .btn-login{display:none}
  .greeting-section{padding:12px}
  .quick-play-grid{grid-template-columns:1fr}
  .albums-section{padding:12px}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .album-card{padding:8px}
  .player-thumb{display:none}
  .player-bar{padding:8px 10px 10px}
}