/* ============ NAVA · نوا — design tokens ============ */
@font-face{font-family:Estedad;src:url("fonts/Estedad-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Estedad;src:url("fonts/Estedad-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Estedad;src:url("fonts/Estedad-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Estedad;src:url("fonts/Estedad-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Estedad;src:url("fonts/Estedad-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
:root{
  --bg:      #101214;
  --surface: #191D20;
  --surface-2:#1D2226;
  --surface-3:#23282C;
  --line:    rgba(242,238,231,0.07);
  --line-soft: rgba(242,238,231,0.05);
  --text:    #F2EEE7;      /* warm ivory */
  --text-2:  #C7C4BD;
  --text-3:  #A5AAA7;      /* muted stone */
  --text-4:  #6E7371;
  --accent:  #D5E5AD;      /* pale pistachio */
  --accent-ink:#10151a;
  --copper:  #C88D70;      /* soft copper */
  --danger:  #D68A7E;

  --e-acc:   hsla(from var(--accent) h s l / .5);
  --accent-hue: 92;
  --accent-sat: 52%;
  --accent-lit: 79%;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;

  --fs-1: 13px; --fs-2: 14px; --fs-3: 16px; --fs-4: 20px; --fs-5: 28px; --fs-6: 38px;
  --speed: 180ms;
  --ease: cubic-bezier(.4,0,.2,1);
  --rail-w: 72px;
  --queue-w: 320px;
  --player-h: 84px;

  --font: 'Estedad';
  --sans-fallback: ui-sans-serif, system-ui, 'Segoe UI', Tahoma, sans-serif;
  --latin: 'Estedad';
  color-scheme: dark;
}

*{box-sizing:border-box;min-width:0}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font), var(--sans-fallback);
  font-size:var(--fs-2);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:color-mix(in srgb, var(--accent) 30%, transparent)}
bdi{unicode-bidi:isolate}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}

/* Focus visibility — depends not only on color */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:0}

.ic{width:20px;height:20px;flex:none}

/* ============ ambience wash (signature glow) ============ */
.ambience{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 620px at 74% 8%, rgba(213,229,173,.055), transparent 60%),
    radial-gradient(900px 520px at 12% 92%, rgba(200,141,112,.05), transparent 60%);
  transition:opacity .9s var(--ease);
}

/* ============ App grid ============ */
.app{
  position:relative;z-index:1;
  display:grid;
  height:100%;
  /* RTL grid: named columns ordered left->right in source; in RTL first column = rightmost.
     rail (right) | stage (center) | queue (left) */
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: 1fr var(--player-h);
  grid-template-areas:
    "rail   stage"
    "player player";
  min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom);
}
.app.has-queue{grid-template-columns:var(--rail-w) minmax(0,1fr) var(--queue-w);grid-template-areas:"rail stage queue" "player player player"}

/* ============ Rail (right) ============ */
.rail{
  grid-area:rail;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:20px 10px 16px;
  border-inline-end:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 45%, transparent);
}
.rail-brand{margin-bottom:8px;display:flex;flex-direction:column;align-items:center;gap:6px}
.brand-mark{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-weight:700;font-size:20px;color:var(--accent);
  background:linear-gradient(150deg, color-mix(in srgb,var(--accent) 18%, transparent), transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%, transparent);
}
.brand-text{font-size:11px;letter-spacing:.18em;color:var(--text-3);font-weight:600}
.rail-links{display:flex;flex-direction:column;gap:4px;width:100%}
.rail-link{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;
  padding:10px 0;border-radius:12px;color:var(--text-4);
  font-size:10.5px;font-weight:500;transition:color var(--ease) var(--speed,160ms);
  min-height:48px;
}
.rail-link .ic{width:21px;height:21px}
.rail-link:hover{color:var(--text-2)}
.rail-link.is-active{
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
}
.rail-link.is-active::before{
  content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--accent);border-radius:2px;
}
.rail-link.is-active .rail-dot{opacity:1}
.rail-settings{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.version-badge{font-size:10px;color:var(--text-4);font-variant-numeric:tabular-nums;letter-spacing:.4px;background:var(--surface-2);border:1px solid var(--line);padding:3px 7px;border-radius:6px;direction:ltr}

/* ============ Stage (center editorial) ============ */
.stage{
  grid-area:stage;
  overflow-y:auto;
  padding:34px clamp(22px, 3.2vw, 46px) 40px;
}
.stage::-webkit-scrollbar{width:10px}
.stage::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:3px solid var(--bg)}
.stage::-webkit-scrollbar-track{background:transparent}

.page{animation:pageIn .34s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Greeting */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:8px}
.hello h1{font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.3}
.hello .sub{color:var(--text-3);margin-top:4px;font-size:var(--fs-3)}
.hello .icon-mark{color:var(--copper)}

/* Search (home) */
.stage-search{position:relative;max-width:460px;margin:16px 0 34px}
.stage-search .ic{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.stage-search input{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:13px;
  padding:13px 48px 13px 16px;color:var(--text);font:inherit;font-size:var(--fs-3);
  transition:border-color .18s var(--ease), background .18s;
}
.stage-search input::placeholder{color:var(--text-4)}
.stage-search input:focus{border-color:color-mix(in srgb,var(--accent) 45%, transparent);background:var(--surface-2)}

/* Section label */
.sec{display:flex;align-items:center;justify-content:space-between;margin:34px 0 16px}
.sec h2{font-size:var(--fs-4);font-weight:700}
.sec .readmore{color:var(--text-3);font-size:var(--fs-1);cursor:pointer;border-radius:6px}
.sec .readmore:hover{color:var(--accent)}

/* Featured album — editorial hero */
.featured{
  display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:clamp(20px,3vw,38px);
  align-items:center;padding:26px;border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.02) inset;
}
.featured-art{position:relative;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden}
.featured-art img{width:100%;height:100%;object-fit:cover}
.featured-art .coat{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,transparent 40%,rgba(10,11,13,.72));color:#fff;
}
.featured-art .coat .play-round{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -8px color-mix(in srgb,var(--accent) 40%,transparent);
}
.featured-copy .kicker{color:var(--copper);font-size:var(--fs-1);font-weight:600;margin-bottom:10px;letter-spacing:.02em}
.featured-copy h2{font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.35;margin-bottom:6px}
.featured-copy .artis{margin-bottom:20px}
.featured-copy .desc{color:var(--text-2);font-size:var(--fs-2);max-width:36ch}
.featured-actions{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-inline:18px;
  border-radius:12px;font-weight:700;font-size:var(--fs-2);transition:transform .12s, background .18s, box-shadow .18s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 26px -12px color-mix(in srgb,var(--accent) 55%,transparent)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 90%,white);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line);color:var(--text-2);background:transparent}
.btn-ghost:hover{border-color:var(--text-3);color:var(--text)}
.icon-btn{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  color:var(--text-3);transition:color .16s,background .16s;
}
.icon-btn:hover{color:var(--text);background:var(--surface-2)}
.icon-btn[data-active="true"]{color:var(--accent)}

/* Mood carousel */
.moods{display:flex;gap:14px;padding-inline:2px;scroll-snap-type:inline mandatory;overflow-x:auto;scrollbar-width:none;margin-inline:var(--moods-scroll,-2px)}
.moods::-webkit-scrollbar{display:none}
.mood{
  flex:0 0 auto;width:150px;scroll-snap-align:start;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:transform .18s, border-color .18s;
  scroll-snap-stop:always;
}
.mood:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.mood-art{position:relative;aspect-ratio:1}
.mood-art img{width:100%;height:100%;object-fit:cover}
.mood-art .tag{position:absolute;top:10px;inset-inline-start:10px;background:rgba(16,18,20,.72);backdrop-filter:blur(6px);padding:3px 9px;border-radius:999px;font-size:10.5px;color:var(--text-2);font-weight:600}
.mood-cap{padding:10px 12px}
.mood-cap b{display:block;font-size:var(--fs-2);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mood-cap span{font-size:var(--fs-1);color:var(--text-3)}
.carousel-nav{margin-inline-start:auto;display:flex;gap:6px}
.mood-scroll-hint{display:none;align-items:center;gap:4px;margin-inline-start:auto;color:var(--text-4);font-size:11px}
.car-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);color:var(--text-2);display:grid;place-items:center;transition:all .16s}
.car-btn:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
.car-btn:disabled{opacity:.25;cursor:default}

/* Track list */
.tracks{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.track{
  display:grid;grid-template-columns:34px 1fr minmax(0,14%) minmax(0,20%) 46px 60px;
  gap:12px;align-items:center;padding:10px 16px;cursor:default;min-height:56px;
  transition:background .14s;
}
.track:hover{background:var(--surface-2)}
.track .idx{text-align:center;color:var(--text-4);font-variant-numeric:tabular-nums;font-size:var(--fs-1)}
.track .play-ind{display:none;justify-content:center;color:var(--accent)}
.track.is-current .idx-no{display:none}
.track.is-current .play-ind{display:flex}
.track-main{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.track-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track.is-current .track-title{color:var(--accent)}
.track-artist{font-size:var(--fs-1);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-album{font-size:var(--fs-1);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-like{color:var(--text-4);display:grid;place-items:center;width:40px;height:40px;border-radius:10px;justify-self:center}
.track-like:hover{color:var(--text)}
.track-like[data-liked="true"]{color:var(--copper)}
.track-dur{color:var(--text-3);font-variant-numeric:tabular-nums;font-size:var(--fs-1);text-align:end;padding-inline-end:2px}
.track-more{color:var(--text-4);display:grid;place-items:center;width:40px;height:40px;border-radius:10px;justify-self:center}
.track-more:hover{color:var(--text)}
.drag-handle{display:none}
/* playing bars indicator */
.p-ind{display:none;gap:2.5px;align-items:flex-end;height:16px;width:20px;justify-content:center}
.p-ind i{width:3px;border-radius:2px;background:var(--accent);animation:none}
.p-ind i:nth-child(1){height:60%}
.p-ind i:nth-child(2){height:100%}
.p-ind i:nth-child(3){height:45%}
.is-playing .p-ind i{animation:eq .9s ease-in-out infinite}
.is-playing .p-ind i:nth-child(2){animation-delay:.2s}
.is-playing .p-ind i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.track.is-current.is-playing .p-ind{display:inline-flex}

/* ============ Player dock ============ */
.player{
  grid-area:player;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(12px,2vw,28px);
  padding:8px 20px;
  background:color-mix(in srgb,var(--surface) 88%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  z-index:5;
}
.now{display:flex;align-items:center;gap:12px;min-width:0;max-width:340px}
.now-art{position:relative;width:52px;height:52px;border-radius:9px;overflow:hidden;transition:border-radius .2s var(--ease)}
.now-art .art-glow,.np-artbox .art-glow{position:absolute;inset:-30%;filter:blur(28px);opacity:0;transition:opacity .6s var(--ease)}
.now-art .art-glow{background:var(--glow)}
.now-cover{width:100%;height:100%;object-fit:cover}
.now-art:hover{border-radius:50%}
.now-meta{min-width:0}
.now-title{font-weight:700;font-size:var(--fs-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.now-title:hover{text-decoration:underline;text-decoration-color:var(--text-3)}
.now-artist{font-size:var(--fs-1);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now .like-btn{width:38px;height:38px}
.now .like-btn[data-liked="true"]{color:var(--copper)}

.playback{display:flex;flex-direction:column;gap:5px;min-width:0;max-width:640px;margin-inline:auto;width:100%}
.pb-controls{display:flex;align-items:center;justify-content:center;gap:6px}
.spawn-btn{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--text-3);transition:color .16s,background .16s}
.spawn-btn:hover{color:var(--text);background:var(--surface-2)}
.spawn-btn[data-state="on"]{color:var(--accent)}
.play-btn{width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;transition:transform .16s,box-shadow .2s;box-shadow:0 8px 26px -10px color-mix(in srgb,var(--accent) 50%,transparent)}
.play-btn:hover{transform:scale(1.07)}
.play-btn:active{transform:scale(.95)}
.play-btn .ic{width:26px;height:26px}
.pb-timeline{display:flex;align-items:center;gap:10px}
.time{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--text-3);min-width:36px;text-align:center}

.seek{flex:1;position:relative;height:26px;display:flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;direction:ltr}
.seek-track{position:relative;width:100%;height:4px;border-radius:4px;background:var(--surface-3)}
.seek-buffer{position:absolute;inset:0;background:color-mix(in srgb,var(--accent) 20%,transparent);border-radius:4px;width:0%}
.seek-fill{position:absolute;inset-inline-start:0;top:0;height:100%;background:var(--accent);border-radius:4px;width:0%}
.seek-thumb{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%) scale(0);transition:transform .15s;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);pointer-events:none}
.seek:hover .seek-thumb,.seek:focus-visible .seek-thumb,.seek.dragging .seek-thumb{transform:translate(-50%,-50%) scale(1)}
.seek:hover .seek-thumb{transition:transform .15s}
.seek:focus-visible .seek-track{box-shadow:0 0 0 2px var(--accent) inset}
.vol{width:90px;height:26px;display:flex;align-items:center;cursor:pointer;position:relative;direction:ltr}
.dock-extra{display:flex;align-items:center;gap:2px}

/* tooltips */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);inset-inline-start:50%;transform:translateX(50%) translateY(3px);
  background:var(--surface-3);color:var(--text-2);font-size:11px;font-weight:600;padding:5px 10px;border-radius:8px;border:1px solid var(--line);
  opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;white-space:nowrap;z-index:60;
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translateX(50%) translateY(0)}
/* rail/mobile tips should anchor above differently for top area — rail is vertical; ok */

/* ============ Mobile bottom nav ============ */
.mobile-nav{display:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ============ Responsive ============ */
@media (max-width:1280px){
  .track{grid-template-columns:30px 1fr minmax(0,16%) 48px 48px}
  .track-album{display:none}
}
@media (max-width:1024px){
  :root{--queue-w:290px}
  .app{grid-template-columns:var(--rail-w) 1fr}
  .app:not(.has-queue){grid-template-areas:
    "rail stage"
    "player player";}
  .app.has-queue{grid-template-columns:var(--rail-w) minmax(0,1fr) var(--queue-w);grid-template-areas:
    "rail stage  queue"
    "player player player";}
  .featured{grid-template-columns:1fr;grid-template-rows:auto auto}
  .featured-art{max-width:320px}
  .dock-extra{display:none}
}
@media (max-width:820px){
  :root{--rail-w:64px}
}
@media (max-width:760px){
  /* mobile: hide rail, show bottom nav */
  :root{--rail-w:0px;--queue-w:280px;--player-h:72px;--mobile-nav-h:64px}
  .app{
    grid-template-columns:1fr;
    grid-template-areas:"stage";
    grid-template-rows:1fr;
    padding-bottom:calc(var(--player-h) + var(--mobile-nav-h) + env(safe-area-inset-bottom) + 18px);
  }
  .player{
    position:fixed;bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));inset-inline:0;width:100%;height:var(--player-h);
    overflow:hidden;border-radius:0;border-top:1px solid var(--line);
    padding:8px 12px;grid-template-columns:minmax(0,1fr) auto;gap:8px;
  }
  .player .now{max-width:none;gap:10px}
  .player .now-art{width:48px;height:48px;flex:none}
  .player .now .like-btn{display:none}
  .player .playback{width:auto;margin:0}
  .player .pb-controls{gap:0}
  .player .pb-controls .spawn-btn,.player .pb-timeline{display:none}
  .player .play-btn{width:48px;height:48px}
  .player .dock-extra{display:none}
  .rail{display:none}
  .queue{position:fixed;inset-inline:0;top:0;bottom:auto;height:72vh;z-index:40;width:auto;transform:translateY(100%);border-top:none}
  .mobile-nav{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;bottom:0;inset-inline:0;height:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
    padding:4px 6px calc(env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);z-index:30;
  }
  .mn-btn{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-4);font-size:10.5px;min-height:46px;justify-content:center;border-radius:10px;font-weight:600}
  .mn-btn .ic{width:22px;height:22px}
  .mn-btn.is-active{color:var(--accent)}
}
@media (max-width:560px){}

/* Queue panel */
.queue{
  grid-area:queue;width:var(--queue-w);border-inline-start:1px solid var(--line);
  display:none;flex-direction:column;overflow:hidden;background:color-mix(in srgb,var(--surface) 55%,transparent);
}
.app.has-queue .queue{display:flex}
.queue-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px;border-bottom:1px solid var(--line)}
.queue-title{display:flex;align-items:center;gap:8px;font-size:var(--fs-2);font-weight:700;color:var(--text-2)}
.queue-list{overflow-y:auto;padding:8px}
.q-item{display:grid;grid-template-columns:44px 1fr 30px;gap:10px;align-items:center;padding:7px 8px;border-radius:10px;min-height:52px;transition:background .14s}
.q-item:hover{background:var(--surface-2)}
.q-item.is-current{background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.q-art{width:44px;height:44px;border-radius:8px;overflow:hidden;position:relative}
.q-art img{width:100%;height:100%;object-fit:cover}
.q-meta{min-width:0}
.q-title{font-size:var(--fs-1);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-artist{font-size:11px;color:var(--text-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-act{color:var(--text-4);display:grid;place-items:center;width:28px;height:28px;border-radius:8px}
.q-act:hover{color:var(--text);background:var(--surface-3)}
.q-empty{color:var(--text-4);text-align:center;padding:34px 16px;font-size:var(--fs-2);display:flex;flex-direction:column;gap:8px;align-items:center}
.q-empty .ic{width:30px;height:30px;opacity:.5}
.q-current-plays{color:var(--accent)}

/* empty queue & reorder drag state left minor */

/* ============ Search page ============ */
.search-head{padding:6px 2px 6px}
.search-input-row{display:flex;gap:10px;align-items:center}
.results-group{margin-top:26px}
.results-group h3{font-size:var(--fs-2);color:var(--text-2);margin-bottom:10px;font-weight:700}
.results-group .sec{opacity:.5}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:60px 20px;color:var(--text-3)}
.empty-state .ic{width:44px;height:44px;color:var(--text-4)}

/* ============ Library and album pages ============ */
.page-title{margin-bottom:24px}
.page-title h1{font-size:clamp(28px,4vw,42px);line-height:1.3}
.page-title p{margin-top:6px}
.albgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.album-card{display:flex;flex-direction:column;text-align:start;padding:12px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);transition:transform .18s,border-color .18s,background .18s}
.album-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 28%,var(--line));background:var(--surface-2)}
.album-art{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--surface-3)}
.album-art img{width:100%;height:100%;object-fit:cover}
.album-art .halo{position:absolute;inset:auto 12% -16% 12%;height:26%;background:hsl(var(--pd) 45% 50%/.35);filter:blur(18px)}
.album-cap{padding:12px 2px 2px;min-width:0}
.album-cap b,.album-cap span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.album-cap b{font-size:15px}.album-cap span{font-size:12px;color:var(--text-3);margin-top:2px}
.album-hero{display:grid;grid-template-columns:minmax(190px,280px) minmax(0,1fr);align-items:end;gap:clamp(22px,4vw,46px);padding:26px;border-radius:var(--r-xl);background:linear-gradient(145deg,hsl(var(--al) 24% 20%/.72),var(--surface));border:1px solid var(--line)}
.album-hero-art{width:100%;max-width:280px;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 28px 55px -30px #000}
.album-hero-art img{width:100%;height:100%;object-fit:cover}
.album-hero-copy h1{font-size:clamp(30px,5vw,52px);line-height:1.18;margin:4px 0 8px}
.album-hero-copy .kicker{color:var(--copper);font-weight:700;font-size:12px}
.album-hero-copy .artist{color:var(--text-2);margin-bottom:4px}

/* ============ Lyrics ============ */
.lyrics{padding:8px 12px 36px}
.ly-line{padding:13px 12px;color:var(--text-3);font-size:16px;line-height:1.8;border-radius:10px;transition:color .2s,background .2s,transform .2s}
.ly-line.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);transform:translateX(-4px)}
.ly-note{text-align:center;padding:0 12px 18px;font-size:12px}

/* ============ Context menu ============ */
.ctxmenu{
  position:fixed;z-index:70;min-width:200px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px;padding:6px;box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
  transform-origin:top;animation:menuIn .14s var(--ease);
}
@keyframes menuIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.ctxmenu[hidden]{display:none}
.ctx-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:8px;font-size:var(--fs-2);color:var(--text-2);min-height:40px}
.ctx-item:hover{background:var(--surface);color:var(--text)}
.ctx-item .ic{width:17px;height:17px;color:var(--text-4)}
.ctx-item.danger{color:var(--danger)}
.ctx-sep{height:1px;background:var(--line);margin:6px 8px}

/* ============ Toast ============ */
.toast{
  position:fixed;bottom:86px;left:50%;transform:translateX(-50%) translateY(10px);z-index:70;
  background:var(--surface-3);border:1px solid var(--line);color:var(--text-2);
  padding:10px 18px;border-radius:12px;font-size:var(--fs-1);font-weight:600;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.8);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
@media (max-width:760px){.toast{bottom:calc(var(--player-h) + var(--mobile-nav-h) + env(safe-area-inset-bottom) + 12px)}}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ Now-playing overlay ============ */
.np-overlay{
  position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease);
}
.np-overlay.open{opacity:1;pointer-events:auto}
.np-sheet{
  position:relative;height:100%;width:100%;display:flex;flex-direction:column;align-items:center;
  padding:14px 26px calc(28px + env(safe-area-inset-bottom));overflow-y:auto;transform:translateY(6%);transition:transform .28s var(--ease);
}
.np-overlay.open .np-sheet{transform:none}
.np-grab{width:44px;height:30px;display:grid;place-items:center;color:var(--text-3);border-radius:10px;align-self:flex-start;margin-bottom:6px}
.np-artbox{position:relative;width:min(72vw,340px);aspect-ratio:1;margin:auto 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.85)}
.np-artbox .art-glow{background:var(--glow);opacity:0}
.np-cover{width:100%;height:100%;object-fit:cover}
.np-meta{width:100%;max-width:480px;margin-top:20px;text-align:center}
.np-title{font-size:clamp(20px,6vw,30px);font-weight:800}
.np-artist{color:var(--text-2);margin-top:4px;font-size:clamp(14px,4vw,17px)}
.np-tl{width:100%;max-width:500px;margin:18px 0 4px;position:relative;height:26px;display:flex;flex-direction:column;justify-content:center;cursor:pointer;direction:ltr}
.np-times{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--text-3);margin-top:6px;width:100%}
.np-controls{display:flex;align-items:center;gap:20px;margin-top:14px}
.np-controls .play-btn{width:70px;height:70px;border-radius:50%}
.np-controls .play-btn .ic{width:32px;height:32px}
.np-controls .spawn-btn.big{width:52px;height:52px}
.np-controls .spawn-btn.big .ic{width:26px;height:26px}
.np-actions{display:flex;gap:8px;margin-top:22px;justify-content:center;width:100%;max-width:360px}

/* ============ Bottom sheet (queue & lyrics on mobile) ============ */
.sheet-host{position:fixed;inset:0;z-index:90;pointer-events:none}
.sheet-host[hidden]{display:none}
.sheet-host:not([hidden]){pointer-events:auto}
.sheet{
  position:absolute;inset-inline:0;bottom:0;height:74vh;background:var(--surface);border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl);
  border-top:1px solid var(--line);box-shadow:0 -20px 60px -30px rgba(0,0,0,.9);
  display:flex;flex-direction:column;transform:translateY(100%);transition:transform .28s var(--ease);
}
.sheet.open{transform:none}
.sheet-backdrop{position:absolute;inset:0;background:rgba(8,9,10,.6);opacity:1;transition:opacity .2s}
.sheet-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.sheet-bar .handle{position:absolute;top:8px;inset-inline-start:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:4px;background:var(--line-soft);pointer-events:none}
.sheet-body{flex:1;overflow-y:auto;padding:8px}
.sheet h3{font-size:var(--fs-3);font-weight:700;display:flex;align-items:center;gap:8px}

/* ============ Focus mode ============ */
body.focus .rail .rail-links,body.focus .queue,body.focus .dock-extra,body.focus .mobile-nav{display:none}
body.focus .app{height:100vh;overflow:hidden}
body.focus .rail{display:none}
body.focus .stage{display:grid;place-items:center;overflow:hidden}
.focus-view{display:none}
body.focus .focus-view{position:fixed;z-index:4;inset:0 0 var(--player-h) 0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;text-align:center;padding:24px;background:var(--bg)}
.focus-art{position:relative;width:min(58vh,54vw,420px);aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 60px 120px -50px rgba(0,0,0,.9)}
body.focus .player{position:fixed;bottom:0;inset-inline:0}
body.focus .pb-controls{justify-content:center}

/* ============ Misc utility ============ */
.glow-on{opacity:1 !important}
.muted{color:var(--text-3)}
.tabnums{font-variant-numeric:tabular-nums}
hr.sep{border:0;height:1px;background:var(--line);margin:26px 0}

/* lyrics panel in expanded (desktop right-of-stage not needed) */

/* Screen-reader only */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:560px){
  .featured{padding:16px}
  .featured-art{max-width:none}
  .featured-art .coat .play-round{width:54px;height:54px}
  .stage{padding:24px 16px 30px}
  .hello h1{font-size:26px}
  .hello .sub{font-size:14px}
  .stage-search{margin-bottom:24px}
  .featured-actions{display:grid;grid-template-columns:1fr 1fr}
  .featured-actions .btn{justify-content:center;padding-inline:12px}
  .featured-actions .btn:first-child{grid-column:1/-1}
  .sec{margin-top:28px}
  .sec h2{font-size:18px}
  .carousel-nav{display:none}
  .mood-scroll-hint{display:flex}
  .mood{width:138px}
  .track{grid-template-columns:28px minmax(0,1fr) 42px 42px;padding:8px 10px;gap:6px}
  .track-dur{display:none}
  .track-like,.track-more{width:42px;height:42px}
  .album-hero{grid-template-columns:1fr;text-align:center}
  .album-hero-art{margin-inline:auto}
  .np-sheet{padding-inline:18px}
  .np-controls{gap:8px;width:100%;justify-content:center}
}