/* ══════════════════════════════════════════
   CORAL SOUND — Apple Music-inspired Theme
   Floating panels · Frosted glass · Fluid
══════════════════════════════════════════ */

:root {
  --bg:    #0a0a0c;
  --bg2:   #141416;
  --bord:  rgba(255,255,255,0.08);
  --acc:   #e8735a;
  --acc2:  #f0a28e;
  --red:   #ff453a;
  --gold:  #ffd60a;
  --glow:  0 0 24px rgba(232,115,90,.28);
  --text:  #f5f5f7;
  --mut:   rgba(245,245,247,.38);

  --imm-color: #1a1a1c;

  --surf-1: color-mix(in srgb, var(--imm-color)  8%, #141416 92%);
  --surf-2: color-mix(in srgb, var(--imm-color) 13%, #1c1c1f 87%);
  --surf-3: color-mix(in srgb, var(--imm-color) 20%, #242428 80%);
  --surf-4: color-mix(in srgb, var(--imm-color) 10%, #18181b 90%);

  --acc-a03: rgba(232,115,90,.03);
  --acc-a04: rgba(232,115,90,.04);
  --acc-a05: rgba(232,115,90,.05);
  --acc-a06: rgba(232,115,90,.06);
  --acc-a07: rgba(232,115,90,.07);
  --acc-a08: rgba(232,115,90,.08);
  --acc-a10: rgba(232,115,90,.10);
  --acc-a12: rgba(232,115,90,.12);
  --acc-a15: rgba(232,115,90,.15);
  --acc-a18: rgba(232,115,90,.18);
  --acc-a20: rgba(232,115,90,.20);
  --acc-a25: rgba(232,115,90,.25);
  --acc-a30: rgba(232,115,90,.30);
  --acc-a55: rgba(232,115,90,.55);

  --bg-70:  rgba(10,10,12,.70);
  --bg-88:  rgba(10,10,12,.88);
  --bg-93:  rgba(10,10,12,.82);
  --bg-96:  rgba(10,10,12,.90);

  --bg-el:  #1c1c1e;
  --bg-ph:  #2c2c2e;
  --bg-ph2: #1c1c1e;

  --fhd:   'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --fmono: 'SF Mono', ui-monospace, 'Menlo', monospace;
  --fbody: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Layout measurements */
  --header-h: 58px;
  --player-h: 88px;
  --sidebar-w: 220px;
  --rpanel-w: 260px;
  --gap: 2%;           /* gap between floating panels */
  --mob-nav-h: 62px;
  --mob-player-h: 72px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 1000px;
}

@property --bg         { syntax:'<color>'; inherits:true; initial-value:#0a0a0c; }
@property --bg2        { syntax:'<color>'; inherits:true; initial-value:#141416; }
@property --acc        { syntax:'<color>'; inherits:true; initial-value:#e8735a; }
@property --acc2       { syntax:'<color>'; inherits:true; initial-value:#f0a28e; }
@property --text       { syntax:'<color>'; inherits:true; initial-value:#f5f5f7; }
@property --imm-color  { syntax:'<color>'; inherits:true; initial-value:#1a1a1c; }
@property --surf-1     { syntax:'<color>'; inherits:true; initial-value:#141416; }
@property --surf-2     { syntax:'<color>'; inherits:true; initial-value:#1c1c1f; }
@property --surf-3     { syntax:'<color>'; inherits:true; initial-value:#242428; }
@property --surf-4     { syntax:'<color>'; inherits:true; initial-value:#18181b; }

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; user-select:none }
html { height:100%; user-select:none }
body {
  background:var(--bg); color:var(--text); font-family:var(--fbody);
  height:100%; overflow:hidden;
  -webkit-tap-highlight-color:transparent; user-select:none;
  transition:background .5s, color .5s;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(232,115,90,.05) 0%, transparent 65%);
}
body::after {
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 80% 100%, rgba(240,162,142,.03) 0%, transparent 55%);
}

/* ══════════════════════════════════════════
   SHELL — simple full-screen stacking context
   All panels are position:fixed, not grid items
══════════════════════════════════════════ */
#shell {
  position:relative; z-index:2;
  width:100dvw; height:100dvh;
  overflow:hidden;
}

/* ══════════════════════════════════════════
   FLOATING GLASS MIXIN
   Applied to: header, sidebar, rpanel, player
══════════════════════════════════════════ */
.glass {
  backdrop-filter:blur(48px) saturate(1.8);
  -webkit-backdrop-filter:blur(48px) saturate(1.8);
  background:color-mix(in srgb, var(--surf-4) 88%, transparent 12%);
  border:1px solid var(--bord);
  box-shadow:
    0 8px 32px rgba(0,0,0,.45),
    0 2px 8px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.07);
  transition:background .8s, border-color .5s, box-shadow .5s;
}

/* ══════════════════════════════════════════
   HEADER — floating pill, top-center
══════════════════════════════════════════ */
header {
  position:fixed;
  top:var(--gap);
  left:50%;
  transform:translateX(-50%);
  z-index:50;
  width:calc(100% - var(--sidebar-w) - var(--rpanel-w) - var(--gap)*6);
  max-width:860px;
  min-width:320px;
  height:var(--header-h);
  border-radius:var(--radius-pill);
  display:flex; align-items:center; gap:12px; padding:0 18px;
  /* glass */
  backdrop-filter:blur(48px) saturate(1.8);
  -webkit-backdrop-filter:blur(48px) saturate(1.8);
  background:color-mix(in srgb, var(--surf-4) 88%, transparent 12%);
  border:1px solid var(--bord);
  box-shadow:
    0 8px 32px rgba(0,0,0,.45),
    0 2px 8px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.07);
  transition:background .8s, border-color .5s, width .3s;
}
header::before {
  content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  border-radius:1px;
}

.logo {
  display:flex; align-items:center; gap:9px; font-family:var(--fhd);
  font-weight:700; font-size:1rem; letter-spacing:-.2px; color:var(--text); flex-shrink:0;
}
.logo-ring {
  width:30px; height:30px; background:var(--acc); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(232,115,90,.5); flex-shrink:0;
}
.logo-ring::before { display:none }
.logo-ring::after { content:'♪'; font-size:.85rem; color:#fff; }
.logo-text { display:block; letter-spacing:-.15px }

.search-wrap {
  flex:1; display:flex; align-items:center; gap:8px;
  background: transparent; border-radius:var(--radius-pill);
  padding:7px 14px; transition:background .2s, box-shadow .2s;
  border:1px solid transparent;
}
.search-wrap:focus-within {
 caret-color: var(--acc);
}
.search-wrap input {
  background:none; border:none; outline:none; color:var(--text);
  font-family:var(--fbody); font-size:.85rem; width:100%;
}
.search-wrap input::placeholder { color:var(--mut) }
.search-wrap svg { flex-shrink:0; opacity:.4 }

.nav-tabs { display:flex; gap:2px; margin-left:auto }
.ntab {
  background:none; border:none; color:var(--mut); font-family:var(--fhd);
  font-size:.72rem; font-weight:500; letter-spacing:-.05px;
  padding:5px 12px; border-radius:20px; cursor:pointer; transition:all .15s; white-space:nowrap;
}
.ntab:hover { color:var(--text); background:rgba(255,255,255,.07) }
.ntab.active { color:var(--text); background:rgba(255,255,255,.11); font-weight:600 }
.mob-menu-btn { display:none }

/* ══════════════════════════════════════════
   MAIN CONTENT — scrolls behind all panels
══════════════════════════════════════════ */
.main {
  position:fixed;
  top:0; bottom:0;
  left:calc(var(--sidebar-w) + var(--gap)*2);
  right:calc(var(--rpanel-w) + var(--gap)*2);
  overflow-y:auto;
  padding:calc(var(--header-h) + var(--gap)*3) 20px calc(var(--player-h) + var(--gap)*3) 20px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.12) transparent;
  z-index:1;
}
.main::-webkit-scrollbar { width:3px }
.main::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:4px }

.main-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; gap:10px; flex-wrap:wrap;
}
.v-title {
  font-family:var(--fhd); font-size:1.3rem; font-weight:700; letter-spacing:-.4px; color:var(--text);
}
.badge {
  font-size:.72rem; font-weight:500; letter-spacing:-.05px;
  background:var(--surf-3); color:var(--mut); padding:3px 10px; border-radius:20px;
  transition:background .8s;
}

/* ══════════════════════════════════════════
   SIDEBAR — floating left panel
══════════════════════════════════════════ */
.sidebar {
  position:fixed;
  top:var(--gap);
  left:var(--gap);
  bottom:calc(var(--player-h) + var(--gap)*2);
  width:var(--sidebar-w);
  border-radius:var(--radius);
  overflow-y:auto;
  padding:14px 12px;
  z-index:10;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.12) transparent;
  /* glass */
  backdrop-filter:blur(40px) saturate(1.6);
  -webkit-backdrop-filter:blur(40px) saturate(1.6);
  background:color-mix(in srgb, var(--surf-1) 92%, transparent 8%);
  border:1px solid var(--bord);
  box-shadow:0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  transition:background .8s, border-color .5s;
}
.sidebar::-webkit-scrollbar { width:3px }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:4px }

/* ══════════════════════════════════════════
   RIGHT PANEL — floating right
══════════════════════════════════════════ */
.rpanel {
  position:fixed;
  top:var(--gap);
  right:var(--gap);
  bottom:calc(var(--player-h) + var(--gap)*2);
  width:var(--rpanel-w);
  border-radius:var(--radius);
  overflow-y:auto;
  padding:14px 12px;
  z-index:10;
  display:flex; flex-direction:column;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.12) transparent;
  /* glass */
  backdrop-filter:blur(40px) saturate(1.6);
  -webkit-backdrop-filter:blur(40px) saturate(1.6);
  background:color-mix(in srgb, var(--surf-1) 92%, transparent 8%);
  border:1px solid var(--bord);
  box-shadow:0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  transition:background .8s, border-color .5s;
}
.rpanel::-webkit-scrollbar { width:3px }
.rpanel::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:4px }

/* ══════════════════════════════════════════
   PLAYER — floating pill, bottom-center
══════════════════════════════════════════ */
.player {
  position:fixed;
  bottom:var(--gap);
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - var(--sidebar-w) - var(--rpanel-w) - var(--gap)*6);
  max-width:860px;
  min-width:320px;
  height:var(--player-h);
  z-index:100;
  border-radius:var(--radius-pill);
  display:flex; align-items:center; padding:0 20px; gap:18px; overflow:hidden;
  /* glass */
  backdrop-filter:blur(48px) saturate(2);
  -webkit-backdrop-filter:blur(48px) saturate(2);
  background:color-mix(in srgb, var(--surf-4) 90%, transparent 10%);
  border:1px solid var(--bord);
  box-shadow:
    0 10px 40px rgba(0,0,0,.55),
    0 2px 10px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:background .8s, box-shadow .5s, width .3s;
}
.player::before {
  content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
  background:linear-gradient(90deg, transparent, var(--acc), rgba(255,255,255,.15), transparent);
  opacity:.6;
}

.p-info { display:flex; align-items:center; gap:12px; width:220px; flex-shrink:0 }
.p-thumb {
  width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0;
  background-image:url("unknown-thumbnail.png"); background-size:100% 100%;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  transition:all .5s cubic-bezier(.34,1.56,.64,1);
}
.p-meta { min-width:0 }
.p-title {
  font-size:.83rem; font-weight:600; letter-spacing:-.2px;
  color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .5s;
}
.p-artist {
  font-size:.71rem; color:var(--acc); letter-spacing:-.05px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .5s;
}
.p-controls { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px }
.ctrl-btns { display:flex; align-items:center; gap:5px }
.ctrl-btn {
  background:none; border:none; color:var(--mut); cursor:pointer; font-size:1rem;
  padding:7px; border-radius:50%; transition:all .14s;
  display:flex; align-items:center; justify-content:center;
}
.ctrl-btn:hover { color:var(--text); background:rgba(255,255,255,.07) }
.ctrl-btn.lit { color:var(--acc) }
.play-btn {
  width:42px; height:42px;
  background:var(--text) !important; border-radius:50% !important;
  color:var(--bg) !important; font-size:1rem !important;
  box-shadow:0 4px 16px rgba(0,0,0,.4) !important;
  transition:transform .14s, box-shadow .14s !important;
}
.play-btn:hover { transform:scale(1.07) !important; box-shadow:0 6px 22px rgba(0,0,0,.5) !important }

.prog-row { display:flex; align-items:center; gap:10px; width:100%; max-width:560px }
.time { font-family:var(--fmono); font-size:.63rem; color:var(--mut); width:34px; flex-shrink:0 }
.prog-track {
  flex:1; height:4px; background:rgba(255,255,255,.13); border-radius:4px;
  cursor:pointer; position:relative; touch-action:none;
}
.prog-fill {
  height:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--acc), var(--acc2));
  transition:width .1s linear; position:relative;
}
.prog-fill::after {
  content:''; position:absolute; right:-5px; top:-4px; width:12px; height:12px;
  background:var(--text); border-radius:50%;
  box-shadow:0 0 0 2px var(--acc), 0 2px 6px rgba(0,0,0,.4);
}
.vol-row { display:flex; align-items:center; gap:8px; width:120px; flex-shrink:0 }
.vol-ico { font-size:.88rem; color:var(--mut); flex-shrink:0 }
.vol-track { flex:1; height:4px; background:rgba(255,255,255,.10); border-radius:4px; cursor:pointer; touch-action:none }
.vol-fill { height:100%; border-radius:4px; background:rgba(255,255,255,.45) }

/* ══════════════════════════════════════════
   SIDEBAR / RPANEL SHARED COMPONENTS
══════════════════════════════════════════ */
.s-title {
  font-family:var(--fhd); font-size:.68rem; letter-spacing:.4px; font-weight:600;
  color:var(--mut); margin-bottom:10px; display:flex; align-items:center; gap:8px;
  text-transform:uppercase;
}
.s-title::after { content:''; flex:1; height:1px; background:var(--bord) }
.s-sec { margin-bottom:20px }

.genre-chips { display:flex; flex-wrap:wrap; gap:5px }
.g-chip {
  background:var(--surf-2); color:var(--mut); border:none;
  font-family:var(--fbody); font-size:.74rem; font-weight:500;
  padding:5px 12px; border-radius:20px; cursor:pointer; transition:all .16s, background .8s;
}
.g-chip:hover, .g-chip.on { color:var(--acc); background:var(--surf-3) }

.pl-item {
  display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:var(--radius-sm);
  cursor:pointer; transition:all .14s, background .8s; margin-bottom:2px;
}
.pl-item:hover { background:var(--surf-2) }
.pl-item.on { background:var(--surf-3) }
.pl-name {
  flex:1; font-size:.8rem; font-weight:500; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pl-cnt {
  font-family:var(--fmono); font-size:.62rem;
  background:var(--surf-3); color:var(--mut); padding:2px 7px; border-radius:20px;
}
.btn-new-pl {
  width:100%; background:var(--surf-2); color:var(--mut); border:none;
  font-family:var(--fbody); font-size:.77rem; font-weight:500;
  padding:9px; cursor:pointer; border-radius:var(--radius-sm); transition:all .18s, background .8s;
}
.btn-new-pl:hover { background:var(--surf-3); color:var(--acc) }

/* Right panel specific */
.np-art {
  width:100%; aspect-ratio:1; border-radius:var(--radius); overflow:hidden;
  position:relative; margin-bottom:12px; flex-shrink:0;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.np-art img, .np-art-ph { width:100%; height:100%; display:block; object-fit:cover }
.np-art-ph {
  background:linear-gradient(145deg, var(--bg-ph), var(--bg-ph2));
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; color:rgba(255,255,255,.08); transition:background .5s;
}
.np-pulse { position:absolute; inset:0; border-radius:var(--radius); pointer-events:none; animation:npGl 3s ease-in-out infinite }
@keyframes npGl { 0%,100%{opacity:0} 50%{opacity:1; box-shadow:inset 0 0 30px rgba(232,115,90,.08)} }
.np-title {
  font-size:.83rem; font-weight:600; letter-spacing:-.15px; color:var(--text);
  margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.np-artist {
  font-size:.73rem; color:var(--acc); margin-bottom:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.visualizer {
  display:flex; align-items:flex-end; gap:2px; height:28px; margin-bottom:12px; flex-shrink:0;
  mask-image:linear-gradient(to right, black, transparent, black);
}
.vis-bar {
  flex:1; border-radius:2px;
  background:linear-gradient(0deg, var(--acc), var(--acc2));
  min-height:3px; transition:height .08s, background .5s;
}
.q-item {
  display:flex; align-items:center; gap:8px; padding:5px 7px;
  border-radius:var(--radius-sm); cursor:pointer; transition:all .13s; margin-bottom:2px;
}
.q-item:hover { background:rgba(255,255,255,.05) }
.q-item.q-now { background:rgba(232,115,90,.08) }
.q-num { font-family:var(--fmono); font-size:.6rem; color:var(--mut); width:16px; flex-shrink:0; text-align:center }
.q-info { flex:1; min-width:0 }
.q-t { font-size:.74rem; font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.q-a { font-size:.64rem; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.q-offline { font-size:.57rem; color:var(--gold); flex-shrink:0 }

/* Source selector */
.src-toggle { display:flex; gap:4px; margin-bottom:14px }
.src-btn {
  flex:1; background:var(--surf-2); color:var(--mut); border:none;
  font-family:var(--fbody); font-size:.73rem; font-weight:500;
  padding:7px 4px; border-radius:10px; cursor:pointer; transition:all .16s, background .8s; text-align:center;
}
.src-btn.on.both   { color:var(--acc);  background:var(--surf-3) }
.src-btn.on.jamendo{ color:#00c882; background:color-mix(in srgb,#00c882 12%,var(--surf-2) 88%) }
.src-btn.on.audius { color:#cc00ff; background:color-mix(in srgb,#cc00ff 12%,var(--surf-2) 88%) }

/* ══════════════════════════════════════════
   TRACK GRID
══════════════════════════════════════════ */
.tgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px }
.tcard {
  background:var(--surf-2); border-radius:var(--radius); overflow:hidden; cursor:pointer;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .8s;
  position:relative; animation:fadeUp .35s ease both;
}
.tcard:hover { transform:translateY(-4px) scale(1.01); box-shadow:0 16px 40px rgba(0,0,0,.5) }
.tcard.now { box-shadow:0 0 0 2px var(--acc), 0 8px 24px rgba(232,115,90,.18) }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

.tcard-img-wrap { position:relative; width:100%; aspect-ratio:1; overflow:hidden; background:var(--bg-el) }
.tcard-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9) contrast(1.05);
  background-image:url("unknown-thumbnail.png"); background-size:100% 100%;
}
.tcard-ph {
  width:100%; aspect-ratio:1;
  background:linear-gradient(145deg,var(--bg-ph),var(--bg-ph2));
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; color:rgba(255,255,255,.1); transition:background .5s;
}
.tcard-img-wrap .tcard-ph { position:absolute; inset:0; aspect-ratio:unset; height:100% }
.tcard-body { padding:10px 12px 6px }
.tcard-t {
  font-size:.82rem; font-weight:600; letter-spacing:-.1px;
  color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:3px;
}
.tcard-a { font-size:.71rem; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tcard-act { display:flex; gap:5px; align-items:center; padding:6px 12px 10px }
.ic-btn {
  background:none; border:none; color:var(--mut); width:30px; height:30px;
  border-radius:50%; cursor:pointer; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
  transition:all .14s; flex-shrink:0; position:relative;
}
.ic-btn:hover { background:rgba(255,255,255,.08); color:var(--text) }
.ic-btn.fav-on { color:var(--red) }
.ic-btn.dl-on { color:var(--gold) }
.ic-btn.dl-ing { color:rgba(255,255,255,.45); animation:dlPulse 1s ease-in-out infinite }
@keyframes dlPulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.dl-ring { position:absolute; inset:0; border-radius:50%; pointer-events:none }
.dl-ring svg { position:absolute; inset:0; width:100%; height:100% }
.play-bars { position:absolute; top:8px; left:8px; display:flex; gap:2px; align-items:flex-end; height:14px; z-index:100 }
.play-bars b { width:3px; background:var(--acc); border-radius:1px; animation:bar .7s ease-in-out infinite alternate }
.play-bars b:nth-child(2) { animation-delay:.18s }
.play-bars b:nth-child(3) { animation-delay:.36s }
@keyframes bar { from{height:3px} to{height:14px} }

.offline-badge {
  position:absolute; top:8px; right:8px; background:rgba(255,214,10,.15);
  border-radius:6px; padding:2px 7px;
  font-family:var(--fbody); font-size:.6rem; font-weight:600; color:var(--gold);
}
.src-badge { position:absolute; top:8px; right:8px; border-radius:6px; padding:2px 7px; font-size:.6rem; font-weight:600 }
.audius-badge { background:rgba(204,0,255,.18); color:#cc00ff }
.jamendo-badge { background:rgba(0,200,130,.15); color:#00c882 }

/* ══════════════════════════════════════════
   PLAYLIST UI
══════════════════════════════════════════ */
.pl-detail-hd {
  display:flex; align-items:flex-start; gap:16px; margin-bottom:20px;
  padding-bottom:18px; border-bottom:1px solid var(--bord); flex-wrap:wrap;
}
.pl-detail-cover { width:84px; height:84px; flex-shrink:0; border-radius:var(--radius); overflow:hidden }
.pl-detail-cover .pl-cover-mosaic { width:84px; height:84px; border-radius:0 }
.pl-detail-cover .tcard-ph { width:84px; height:84px; aspect-ratio:unset; border-radius:0; font-size:1.8rem }
.pl-cover-mosaic { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1px; background:var(--bg-ph2); overflow:hidden }
.pl-cover-mosaic img { width:100%; height:100%; object-fit:cover; display:block }
.pl-cover-mosaic .ph-cell { background:linear-gradient(135deg,var(--bg-ph),var(--bg-ph2)); display:flex; align-items:center; justify-content:center; font-size:.9rem; color:rgba(255,255,255,.1) }
.tcard .pl-cover-mosaic { width:100%; aspect-ratio:1; height:auto; border-radius:0 }
.pl-detail-meta { flex:1; min-width:140px }
.pl-detail-name { font-family:var(--fhd); font-size:.93rem; font-weight:700; letter-spacing:-.25px; color:var(--text); margin-bottom:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pl-detail-info { font-size:.73rem; color:var(--mut); margin-bottom:10px }
.pl-detail-btns { display:flex; gap:6px; flex-wrap:wrap; width:100% }
.pl-btn {
  background:var(--surf-3); border:none; color:var(--text); font-family:var(--fbody);
  font-size:.75rem; font-weight:500; padding:7px 14px; border-radius:20px;
  cursor:pointer; transition:all .16s, background .8s; white-space:nowrap;
}
.pl-btn:hover, .pl-btn.pri { background:color-mix(in srgb,var(--surf-3) 55%,white 45%) }
.pl-btn.danger:hover { background:rgba(255,69,58,.15); color:var(--red) }

/* Track list rows */
.tlist { display:flex; flex-direction:column; gap:2px }
.t-row {
  display:flex; align-items:center; gap:10px; padding:7px 10px;
  border-radius:var(--radius-sm); cursor:pointer; transition:all .14s, background .8s; position:relative;
}
.t-row:hover { background:var(--surf-2) }
.t-row.now { background:var(--surf-3) }
.t-row.drag-over { background:var(--surf-3); outline:1px solid var(--acc) }
.t-row-num { font-family:var(--fmono); font-size:.66rem; color:var(--mut); width:18px; text-align:center; flex-shrink:0 }
.t-row-thumb { width:40px; height:40px; border-radius:6px; object-fit:cover; flex-shrink:0; background:var(--surf-2) }
.t-row-ph { width:40px; height:40px; flex-shrink:0; background:var(--surf-2); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--mut) }
.t-row-info { flex:1; min-width:0 }
.t-row-t { font-size:.81rem; font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.t-row-a { font-size:.69rem; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.t-row-dur { font-family:var(--fmono); font-size:.64rem; color:var(--mut); flex-shrink:0; margin-right:4px }
.t-row-offline { font-size:.6rem; color:var(--gold); flex-shrink:0; opacity:.75 }
.t-row-del { background:none; border:none; color:var(--mut); cursor:pointer; font-size:.85rem; padding:6px; transition:color .14s; flex-shrink:0 }
.t-row-del:hover { color:var(--red) }
.drag-handle { color:var(--mut); cursor:grab; padding:4px; font-size:.9rem; flex-shrink:0; touch-action:none }
.drag-handle:active { cursor:grabbing }

/* ══════════════════════════════════════════
   OFFLINE STORAGE
══════════════════════════════════════════ */
.offline-storage {
  background:rgba(255,214,10,.04); border:1px solid rgba(255,214,10,.12);
  border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.offline-storage-info { flex:1; min-width:0 }
.offline-storage-title { font-size:.68rem; font-weight:600; letter-spacing:.2px; color:var(--gold); margin-bottom:2px }
.offline-storage-bar { height:3px; background:rgba(255,214,10,.08); border-radius:2px; overflow:hidden; margin-top:4px }
.offline-storage-fill { height:100%; background:var(--gold); border-radius:2px; transition:width .3s }
.offline-storage-size { font-family:var(--fmono); font-size:.62rem; color:rgba(255,214,10,.45); margin-top:3px }

/* ══════════════════════════════════════════
   MODAL
══════════════════════════════════════════ */
.overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.65); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .22s; padding:16px;
}
.overlay.open { opacity:1; pointer-events:all }
.modal {
  background:var(--surf-4); border:1px solid var(--bord);
  border-radius:18px; padding:24px; width:100%; max-width:360px;
  box-shadow:0 24px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(16px) scale(.98); transition:transform .22s;
}
.overlay.open .modal { transform:translateY(0) scale(1) }
.modal-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px }
.modal-title { font-family:var(--fhd); font-size:.93rem; font-weight:600; letter-spacing:-.2px; color:var(--text); margin:0 }
.modal-x {
  background:rgba(255,255,255,.07); border:none; color:var(--mut);
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  font-size:.85rem; display:flex; align-items:center; justify-content:center; transition:all .14s; flex-shrink:0;
}
.modal-x:hover { background:rgba(255,69,58,.15); color:var(--red) }
.m-input {
  width:100%; background:rgba(255,255,255,.07); border:none;
  border-radius:10px; color:var(--text); font-family:var(--fbody);
  font-size:.88rem; padding:11px 14px; outline:none; margin-bottom:14px; transition:box-shadow .2s;
}
.m-input:focus { box-shadow:0 0 0 3px rgba(232,115,90,.2) }
.m-row { display:flex; gap:8px; justify-content:flex-end }
.m-btn {
  background:rgba(255,255,255,.09); border:none; color:var(--text); font-family:var(--fbody);
  font-size:.82rem; font-weight:500; padding:9px 18px; cursor:pointer; border-radius:20px; transition:background .14s;
}
.m-btn.pri { background:var(--acc); color:#fff }
.m-btn:hover { background:rgba(255,255,255,.14) }
.m-btn.pri:hover { background:var(--acc2) }

/* ══════════════════════════════════════════
   CONTEXT MENU
══════════════════════════════════════════ */
.ctx-menu {
  position:fixed; z-index:600; background:var(--surf-4);
  border:1px solid var(--bord); border-radius:14px; min-width:190px;
  box-shadow:0 12px 40px rgba(0,0,0,.7); backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px); overflow:hidden; display:none;
}
.ctx-menu.open { display:block }
.ctx-item {
  display:flex; width:100%; background:none; border:none; color:var(--text);
  font-family:var(--fbody); font-size:.82rem; font-weight:400; padding:11px 16px;
  cursor:pointer; text-align:left; transition:all .12s; align-items:center; gap:10px;
}
.ctx-item:hover { background:rgba(255,255,255,.07) }
.ctx-item.danger { color:var(--red) }
.ctx-item.danger:hover { background:rgba(255,69,58,.08) }
.ctx-sep { height:1px; background:rgba(255,255,255,.07); margin:2px 0 }
.ctx-icon { width:14px; text-align:center; flex-shrink:0; opacity:.7 }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
.toast {
  position:fixed; bottom:calc(var(--player-h) + var(--gap) + 16px); right:22px; z-index:700;
  background:var(--surf-4); border:1px solid var(--bord);
  border-radius:12px; padding:10px 16px; font-family:var(--fbody);
  font-size:.8rem; font-weight:500; color:var(--text);
  box-shadow:0 8px 24px rgba(0,0,0,.5); max-width:280px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  transform:translateY(8px) scale(.97); opacity:0;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.toast.show { transform:translateY(0) scale(1); opacity:1 }
.toast.warn { color:var(--gold) }
.toast.err { color:var(--red) }

/* ══════════════════════════════════════════
   LOADER / EMPTY
══════════════════════════════════════════ */
.loader { display:flex; align-items:center; justify-content:center; padding:50px; gap:6px }
.l-dot { width:8px; height:8px; border-radius:50%; animation:ldot .9s ease-in-out infinite alternate }
.l-dot:nth-child(1) { background:var(--acc) }
.l-dot:nth-child(2) { background:var(--acc2); animation-delay:.25s }
.l-dot:nth-child(3) { background:rgba(255,255,255,.3); animation-delay:.5s }
@keyframes ldot { from{transform:translateY(0);opacity:.3} to{transform:translateY(-10px);opacity:1} }
.empty { text-align:center; padding:60px 20px; color:var(--mut); font-size:.82rem }
.empty-ico { font-size:2.8rem; opacity:.2; margin-bottom:10px }

/* ══════════════════════════════════════════
   DRAWER
══════════════════════════════════════════ */
.drawer-overlay {
  position:fixed; inset:0; z-index:400; background:rgba(0,0,0,.5);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.drawer-overlay.open { opacity:1; pointer-events:all }
.drawer {
  position:fixed; top:0; left:0; bottom:0; z-index:410; width:min(290px,85vw);
  background:var(--surf-1); border-right:1px solid var(--bord);
  overflow-y:auto; padding:16px;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.12) transparent;
}
.drawer::-webkit-scrollbar { width:3px }
.drawer::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:4px }
.drawer.open { transform:translateX(0) }
.drawer footer {
  position:absolute; justify-content:center; text-align:center;
 width:90%; font-size:8pt; margin-top:20px;
  padding-top:12px; border-top:1px solid var(--bord); box-sizing:border-box;
}
.drawer-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px }
.drawer-hd img { object-fit:cover; width:32px; border-radius:6px }
.drawer-logo {
  font-family:var(--fhd); font-size:.9rem; letter-spacing:-.2px; font-weight:700;
  color:transparent; background-clip:text; -webkit-background-clip:text;
  background-image:linear-gradient(135deg, #ff9f7a, var(--acc));
}
.drawer-close {
  background:rgba(255,255,255,.07); border:none; color:var(--mut);
  width:30px; height:30px; border-radius:8px; cursor:pointer;
  font-size:.9rem; display:flex; align-items:center; justify-content:center; transition:all .14s;
}
.drawer-close:hover { background:rgba(255,255,255,.12); color:var(--text) }

/* ══════════════════════════════════════════
   NOW PLAYING SHEET
   Desktop: floating right panel (not full screen)
   Mobile: full-screen sheet slides from bottom
══════════════════════════════════════════ */
.np-sheet {
  position:fixed; z-index:450;
  /* Desktop: right-side floating panel */
  top:var(--gap);
  right:calc(var(--rpanel-w) + var(--gap)*2);
  bottom:calc(var(--player-h) + var(--gap)*2);
  width:360px;
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--imm-color) 18%, #0a0a0c 82%);
  display:flex; flex-direction:column;
  padding:20px 20px 20px;
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  gap:0;
  /* Hidden by default, slides in from right on desktop */
  transform:translateX(calc(100% + var(--gap)*2 + var(--rpanel-w)));
  transition:transform .38s cubic-bezier(.4,0,.2,1), background .8s ease;
  border:1px solid var(--bord);
  box-shadow:0 16px 48px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.np-sheet.open { transform:translateX(0) }

.np-sheet-bg {
  position:absolute; inset:0;
  will-change:filter; filter:blur(25px) saturate(1.2);
  z-index:0; overflow:hidden; opacity:.45; border-radius:var(--radius);
  pointer-events:none;
}
.np-sheet .imm-fog {
  position:absolute; inset:0; pointer-events:none; z-index:1; border-radius:var(--radius);
  background:linear-gradient(to bottom, rgba(10,10,12,.55) 0%, rgba(10,10,12,.3) 40%, rgba(10,10,12,.55) 100%);
}
.np-sheet > *:not(.np-sheet-bg):not(.imm-fog) { position:relative; z-index:2 }

.np-sheet-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.np-sheet-title {
  font-family:var(--fhd); font-size:.72rem; font-weight:600; letter-spacing:.3px;
  text-transform:uppercase; color:var(--mut);
}
.np-sheet-close {
  background:rgba(255,255,255,.10); border:none; color:var(--text);
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  font-size:1rem; display:flex; align-items:center; justify-content:center; transition:all .14s;
}
.np-sheet-close:hover { background:rgba(255,255,255,.16) }

.np-sheet-art {
  width:min(200px,70%); aspect-ratio:1; border-radius:14px; overflow:hidden;
  margin:0 auto 16px; position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
}
.np-sheet-art img, .np-sheet-art-ph { width:100%; height:100%; display:block; object-fit:cover }
.np-sheet-art-ph {
  background:linear-gradient(145deg,var(--bg-ph),var(--bg-ph2));
  display:flex; align-items:center; justify-content:center;
  font-size:3.5rem; color:rgba(255,255,255,.08);
}
.np-sheet-pulse { position:absolute; inset:0; border-radius:14px; animation:npGl 3s ease-in-out infinite; pointer-events:none }

.np-sheet-info { text-align:center; margin-bottom:14px }
.np-sheet-img {
  background-image:url("unknown-thumbnail.png"); background-size:100% 100%;
  width:75%; object-fit:cover; border-radius:14px; display:block; margin:0 auto 10px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  transition:all .5s cubic-bezier(.34,1.56,.64,1);
}
.np-sheet-name {
  font-family:var(--fhd); font-size:1rem; font-weight:700; letter-spacing:-.25px;
  color:var(--text); transition:color .5s; margin-bottom:3px;
}
.np-sheet-artist { font-size:.82rem; color:var(--acc); transition:color .5s }

.np-sheet-vis {
  display:flex; align-items:flex-end; gap:2px; min-height:24px; margin-bottom:14px;
  justify-content:center;
  mask-image:linear-gradient(to right, transparent 5%, black 30%, black 70%, transparent 95%);
}
.np-sheet-vis .vis-bar { width:4px; flex:none }

.np-sheet-prog { display:flex; align-items:center; gap:10px; margin-bottom:14px }
.np-sheet-ctrl { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px }
.np-sheet-ctrl .ctrl-btn { padding:8px }
.np-sheet-ctrl .play-btn { width:50px; height:50px }
.np-sheet-vol { display:flex; align-items:center; gap:10px }
.np-sheet-vol .vol-track {
  flex:1; height:4px; background:rgba(255,255,255,.10); border-radius:4px;
  cursor:pointer; touch-action:none;
}
.np-sheet-queue { margin-top:18px }
.s-lyrics {
  white-space:pre-line; text-align:center; max-width:100%; margin:0 auto 16px;
  line-height:1.85; overflow-wrap:break-word; word-break:break-word;
  font-size:.95rem; color:var(--text); opacity:.75; letter-spacing:.01em;
}
.np-sheet-queue .s-title { margin-bottom:10px }
.sheet-handle { width:36px; height:4px; background:rgba(255,255,255,.18); border-radius:4px; margin:0 auto 14px }
.ambient-light {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(1.4);
  filter:blur(90px) saturate(1.4);
  opacity:.9; z-index:0; pointer-events:none;
}
.np-sheet-bg .particle { position:absolute; will-change:filter,transform; z-index:1 }
@keyframes moving {
  0%   { transform:translate3d(0,0,0) scale(1) rotate(0deg) }
  25%  { transform:translate3d(12px,-20px,0) scale(1.05) rotate(4deg) }
  50%  { transform:translate3d(-10px,-40px,0) scale(1.08) rotate(-5deg) }
  75%  { transform:translate3d(15px,-60px,0) scale(1.04) rotate(3deg) }
  100% { transform:translate3d(-8px,-80px,0) scale(1) rotate(-3deg) }
}

.immersive-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px }
.immersive-label { font-size:.82rem; font-weight:500; color:var(--text); letter-spacing:-.1px }
.immersive-desc { font-size:.70rem; color:var(--mut); letter-spacing:-.05px; line-height:1.4 }
.cs-switch { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0 }
.cs-switch input { opacity:0; width:0; height:0 }
.cs-slider { position:absolute; inset:0; cursor:pointer; background:rgba(255,255,255,.12); border-radius:24px; transition:all .3s }
.cs-slider::before {
  content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:transform .3s;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.cs-switch input:checked + .cs-slider { background:var(--acc) }
.cs-switch input:checked + .cs-slider::before { transform:translateX(18px) }

.mob-nav {
  display:none;
  position:fixed; bottom:var(--gap); left:50%; transform:translateX(-50%);
  z-index:99;
  background:color-mix(in srgb, var(--surf-4) 88%, transparent 12%);
  backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px);
  border:1px solid var(--bord); border-radius:var(--radius-pill);
  padding: 2%;
  box-shadow:0 8px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
  width:fit-content; height:fit-content;
  transition:border-color .5s, background .8s;
}
.mob-nav-btn {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; color:var(--mut); font-family:var(--fbody);
  font-size:.52rem; font-weight:500; letter-spacing:.1px;
  cursor:pointer; transition:all .16s; padding:7px 10px; border-radius:var(--radius-pill);
}
.mob-nav-btn.active, .mob-nav-btn:hover { color:var(--acc);}
.mob-nav-btn svg { margin-bottom:1px }

.mob-player-ctrl { display:none }
footer { display:grid; grid-template-rows:1fr 1fr }
.img-logo { border-radius:6px; width:25px; height:25px }

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET 600-1024px
   Sidebar + rpanel hidden, panels float over
   Header auto-width, player narrower
══════════════════════════════════════════ */
@media(max-width:1024px) {
  :root {
    --sidebar-w: 0px;
    --rpanel-w:  0px;
  }
  header {
    width:calc(100% - 32px);
    max-width:none;
  }
  .sidebar, .rpanel { display:none }
  .main {
    left:0; right:0;
    padding:calc(var(--header-h) + var(--gap)*3) 16px calc(var(--player-h) + var(--gap)*3) 16px;
  }
  .player {
    width:calc(100% - 32px);
    max-width:none;
    border-radius:18px;
  }
  .np-sheet {
    /* Full-screen sheet on tablet/mobile (slides from bottom) */
    top:0; right:0; left:0; width:100%;
    bottom:0;
    border-radius:24px 24px 0 0;
    transform:translateY(110%);
    padding:15% 20px calc(20px + var(--safe-b));
    border-left:none; border-right:none; border-bottom:none;
    overflow-y:scroll;
    -webkit-overflow-scrolling:touch;
  }
  .np-sheet.open { transform:translateY(0) }
  .mob-menu-btn {
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; color:var(--text);
    width:34px; height:34px; border-radius:8px; cursor:pointer; flex-shrink:0; transition:all .15s;
  }
  .mob-player-ctrl { display:flex; align-items:center; gap:4px; flex-shrink:0 }
  .p-controls { display:none }
  .vol-row { display:none }
  .p-info { width:auto; flex:1; min-width:0 }
  .p-thumb { width:44px; height:44px }
  .nav-tabs { display:none }
}

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE ≤599px
   Full pill nav at bottom, compact player
══════════════════════════════════════════ */
@media(max-width:599px) {
  :root {
    --header-h:   52px;
    --mob-player-h: 68px;
    --mob-nav-h:  62px;
  }
  .mob-nav {
    display:flex; align-items:center; justify-content:space-around;
    bottom:var(--gap);
    width:calc(100% - 32px);
    padding:4px 4px;
  }
  .player {
    bottom:calc(var(--mob-nav-h) + var(--gap)/2);
    height:var(--mob-player-h);
    padding:0 14px;
    border-radius:16px;
  }
  .main {
    padding:calc(var(--header-h) + var(--gap)*3) 12px
            calc(var(--mob-player-h) + var(--mob-nav-h) + var(--gap)*4) 12px;
  }
  .np-sheet {
    padding:15% 16px calc(16px + var(--safe-b));
    border-radius:20px 20px 0 0;
    gap: 5%;
  }
  .tgrid { grid-template-columns:repeat(2,1fr); gap:9px }
  .tcard-body { padding:8px 10px 4px }
  .tcard-t { font-size:.77rem }
  .tcard-a { font-size:.68rem }
  .tcard-act { padding:4px 8px 7px; gap:4px }
  .ic-btn { width:27px; height:27px; font-size:.75rem }
  .toast {
    bottom:calc(var(--mob-player-h) + var(--mob-nav-h) + var(--gap)*3 + 8px);
    right:10px; font-size:.74rem;
  }
  .np-sheet-img { width:65% }
  .np-sheet-name { font-size:.92rem }
  .s-lyrics { font-size:.9rem; max-width:90vw }
}

@media(max-width:380px) {
  .tgrid { grid-template-columns:repeat(2,1fr); gap:7px }
  .ic-btn { width:25px; height:25px; font-size:.68rem }
  .mob-nav-btn { padding:6px 7px }
}

/* Between tablet and full desktop — show player full width still */
@media(min-width:600px) and (max-width:1024px) {
  .mob-nav { display:none !important }
  .mob-player-ctrl { display:flex !important }
}