/* ============================================================
   FLOR MUSIC — Design System
   Premium minimal. Purple accent from the flower mark.
   ============================================================ */

/* Шрифт лежит у нас, а не на fonts.googleapis.com. @import заставлял браузер
   идти по цепочке: styles.css → CSS Google → файлы шрифта, то есть три
   лишних круга до первой буквы на экране, причём к хосту, который из
   России отвечает нестабильно. Onest — переменный, 4 файла на 63 КБ. */
/* cyrillic-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/gNMKW3F-SZuj7xmS-HY6EQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/gNMKW3F-SZuj7xmb-HY6EQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/gNMKW3F-SZuj7xmR-HY6EQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/gNMKW3F-SZuj7xmf-HY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens: shared ---------- */
:root{
  --accent: #6C3CE0;
  --accent-2: #A78BFA;
  --accent-soft: rgba(108,60,224,.14);
  --accent-grad: linear-gradient(135deg,#7C4DE8 0%,#6C3CE0 55%,#5326C9 100%);
  --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --ease: cubic-bezier(.22,.61,.36,1);
  /* slight overshoot — motion that feels alive rather than mechanical */
  --spring: cubic-bezier(.34,1.56,.64,1);
  --shadow-pop: 0 24px 60px -18px rgba(20,8,50,.55);
}

/* ---------- Dark theme (default) ---------- */
[data-theme="dark"]{
  --bg: #0C0814;
  --bg-grad: radial-gradient(1200px 700px at 80% -10%, rgba(108,60,224,.18), transparent 60%), #0C0814;
  --surface: #141022;
  --surface-2: #1B1530;
  --surface-3: #221A3C;
  --hover: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.08);
  --text: #F3EEFF;
  --text-2: #B4A9CE;
  --text-3: #7C7396;
  --on-accent: #ffffff;
  --player-bg: rgba(16,11,28,.82);
  --scrim: linear-gradient(180deg, rgba(12,8,20,0) 0%, rgba(12,8,20,.85) 100%);
}

/* ---------- Light theme ---------- */
[data-theme="light"]{
  --bg: #F6F4F2;
  --bg-grad: radial-gradient(1100px 650px at 82% -12%, rgba(108,60,224,.10), transparent 60%), #F6F4F2;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #F1ECFB;
  --hover: rgba(20,10,40,.04);
  --line: rgba(20,10,40,.08);
  --text: #1A1426;
  --text-2: #5C5470;
  --text-3: #948CA6;
  --on-accent: #ffffff;
  --player-bg: rgba(255,255,255,.86);
  --scrim: linear-gradient(180deg, rgba(246,244,242,0) 0%, rgba(246,244,242,.9) 100%);
  --shadow-pop: 0 24px 60px -20px rgba(60,30,120,.28);
}

/* ---------- Liquid Glass theme (iOS 26 style) ----------
   Dark frosted glass. The colourful background shows softly THROUGH the
   panels (glassy), while text and layers stay crisp. Structural chrome
   (topbar, player) is kept opaque enough that scrolling content never
   bleeds through it. */
[data-theme="glass"]{
  --bg: #120d33;
  --bg-grad:
    radial-gradient(74% 60% at 14% 8%, rgba(126,92,214,.42), transparent 62%),
    radial-gradient(60% 50% at 90% 6%, rgba(198,110,182,.30), transparent 62%),
    radial-gradient(66% 58% at 88% 94%, rgba(88,126,220,.36), transparent 62%),
    radial-gradient(58% 54% at 8% 92%, rgba(80,168,192,.26), transparent 62%),
    linear-gradient(165deg,#1b1447,#100b2b);
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.09);
  --surface-3: rgba(255,255,255,.12);
  --hover: rgba(255,255,255,.10);
  --line: rgba(255,255,255,.12);
  --text: #ffffff;
  --text-2: rgba(255,255,255,.80);
  --text-3: rgba(255,255,255,.56);
  --on-accent: #fff;
  --player-bg: rgba(16,11,38,.80);
  --scrim: linear-gradient(180deg, transparent, rgba(14,8,34,.4));
  --shadow-pop: 0 26px 64px -20px rgba(0,0,0,.55);
}
/* Large frosted panels: dark translucent glass over the colourful backdrop. */
[data-theme="glass"] .sidebar,
[data-theme="glass"] .main{
  background: rgba(18,12,42,.5) !important;
  -webkit-backdrop-filter: blur(36px) saturate(150%);
  backdrop-filter: blur(36px) saturate(150%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 20px 50px rgba(0,0,0,.35);
}
/* Chrome that overlays scrolling content — kept dense so nothing bleeds. */
[data-theme="glass"] .topbar{
  background: rgba(17,11,40,.82) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
[data-theme="glass"] .player{
  background: rgba(16,11,38,.82) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 20px 50px rgba(0,0,0,.4);
}
/* Real panels & rows get the lighter glass. NOTE: content tiles (.card,
   .genre) and hero buttons (.btn-glass) are deliberately excluded — they
   carry their own art/gradient and must stay native, or their text clips
   and neighbours look glued together. */
[data-theme="glass"] #modalBox,
[data-theme="glass"] .notif-panel,
[data-theme="glass"] #ctxMenu,
[data-theme="glass"] .set-row,
[data-theme="glass"] .quick,
[data-theme="glass"] .m-card-row,
[data-theme="glass"] .vpn-banner{
  background: rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.22);
}
[data-theme="glass"] .searchbar{ background: rgba(255,255,255,.06) !important; }
[data-theme="glass"] .icon-btn{ background: rgba(255,255,255,.08); }
[data-theme="glass"] .chip{ background: rgba(255,255,255,.08); }
[data-theme="glass"] .chip.active{ background: rgba(255,255,255,.92); color:#2a1560; }
/* very subtle drifting sheen over the background */
[data-theme="glass"] body::after{
  content:''; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background: radial-gradient(38% 38% at 32% 30%, rgba(255,255,255,.03), transparent 60%);
  animation: glassDrift 22s ease-in-out infinite alternate;
}
@keyframes glassDrift{ from{ transform:translate(-4%,-3%) } to{ transform:translate(6%,5%) } }

/* ---------- Launch screen ----------
   Covers the first paint so the app never shows half-assembled. Fades out
   once app.js signals it is ready; `.gone` removes it from the tree. */
.splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(124,77,255,.28), transparent 70%),
    var(--bg, #141022);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.splash.hide{ opacity:0; transform:scale(1.06); pointer-events:none; }
.splash.gone{ display:none; }

.splash-mark{ position:relative; width:96px; height:96px; display:grid; place-items:center; }
.splash-mark img{
  width:100%; height:100%; border-radius:24px; display:block;
  box-shadow:0 20px 50px -12px rgba(108,60,224,.7);
  animation: splashPop .7s cubic-bezier(.34,1.56,.64,1) both, splashBreathe 2.4s 0.7s ease-in-out infinite;
}
/* A ring pulses outward from the mark — reads as "starting up", not "stuck". */
.splash-ring{
  position:absolute; inset:-10px; border-radius:30px;
  border:2px solid rgba(157,91,224,.55);
  animation: splashRing 1.8s ease-out infinite;
}
.splash-word{
  font-size:26px; font-weight:800; letter-spacing:.16em; color:#fff;
  animation: splashFade .6s .25s both;
}
.splash-word b{ color:#9D5BE0; font-weight:800; }
.splash-bar{
  width:132px; height:3px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.12); animation: splashFade .6s .4s both;
}
.splash-bar i{
  display:block; width:40%; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,#6C3CE0,#9D5BE0);
  animation: splashSlide 1.15s ease-in-out infinite;
}
@keyframes splashPop{ from{ opacity:0; transform:scale(.72) } to{ opacity:1; transform:none } }
@keyframes splashBreathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } }
@keyframes splashRing{ 0%{ transform:scale(.9); opacity:.75 } 100%{ transform:scale(1.35); opacity:0 } }
@keyframes splashFade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@keyframes splashSlide{ 0%{ transform:translateX(-115%) } 100%{ transform:translateX(365%) } }
@media (prefers-reduced-motion: reduce){
  .splash-mark img, .splash-ring, .splash-bar i{ animation:none; }
}

/* ---------- Reset ---------- */
*{ box-sizing: border-box; margin:0; padding:0; }
#florAudio{
  position:fixed; left:0; bottom:0;
  width:2px; height:2px;
  opacity:0.02; pointer-events:none; z-index:0;
}
.vpn-banner{
  display:flex; align-items:center; gap:10px;
  margin:0 16px 8px; padding:10px 14px;
  background:rgba(255,80,80,.12); border:1px solid rgba(255,80,80,.25);
  border-radius:12px; font-size:13px; line-height:1.4; color:var(--text-2);
}
.vpn-banner[hidden]{ display:none !important; }
.vpn-banner-close{
  flex-shrink:0; margin-left:auto;
  background:none; border:none; color:var(--text-3);
  font-size:20px; line-height:1; cursor:pointer; padding:0 4px;
}
html,body{
  height:100%;
  /* App-like touch: no double-tap zoom, no pinch, no page rubber-band */
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* Installed as a PWA the page is drawn edge-to-edge (viewport-fit=cover), so the
   safe areas behind the status bar and the home indicator expose <html>. Without
   a colour there they render as black bands and the app looks letterboxed —
   painting <html> with the app background makes it fill the screen like a native app. */
/* ---- Diagnostic mode: open with ?debug=frames ----
   Paints each layer a different colour so a screenshot says exactly which
   surface a stray band belongs to:
     RED    = the page canvas (<html>) — my CSS owns it
     GREEN  = .app
     BLUE   = .main
     BLACK  = none of the above → the OS/browser chrome, not the page. */
html.dbg-frames{ background:#ff0000 !important; background-image:none !important; }
html.dbg-frames .app{ background:#00c853 !important; }
html.dbg-frames .main{ background:#2962ff !important; }
html.dbg-frames .mtabs{ outline:3px solid #ffea00 !important; }
html.dbg-frames .player{ outline:3px solid #ff9100 !important; }

html{
  background: var(--bg-color, var(--bg));
  background-image: var(--bg-grad);
  background-size: cover;
  background-attachment: fixed;   /* the gradient spans the safe areas too */
}
body{
  font-family: var(--font);
  /* <html> paints the gradient (it also covers the safe areas); body stays clear
     so the two can never differ and show a seam at the screen edges. */
  background: transparent;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
input, textarea, [contenteditable="true"]{
  user-select: text;
  -webkit-user-select: text;
}
button{ font-family: inherit; cursor: pointer; border:none; background:none; color: inherit; }
input{ font-family: inherit; }
::selection{ background: var(--accent); color:#fff; }

/* thin scrollbars */
.scroll::-webkit-scrollbar{ width:10px; height:10px; }
.scroll::-webkit-scrollbar-thumb{ background: var(--line); border-radius:10px; border:3px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-thumb:hover{ background: var(--text-3); background-clip: padding-box; }
.scroll{ scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* ============================================================
   App shell
   ============================================================ */
.app{
  display: grid;
  grid-template-columns: 264px 1fr;
  grid-template-rows: 1fr auto;
  height: 100vh;
  gap: var(--sp-3);
  padding: var(--sp-3);
}
.app.collapsed{ grid-template-columns: 84px 1fr; }

/* ---------- Sidebar ---------- */
.sidebar{
  grid-row: 1 / 2;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.brand{
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px 14px;
}
.brand .mark{ width: 34px; height: 34px; flex: none; }
.brand .word{ font-weight: 800; font-size: 20px; letter-spacing: -0.03em; }
.brand .word b{ color: var(--accent-2); font-weight: 800; }
.app.collapsed .brand .word{ display:none; }
.app.collapsed .brand{ justify-content:center; padding: 20px 0 14px; }

.nav{ padding: 6px 12px; display:flex; flex-direction: column; gap: 2px; }
.nav-item{
  display:flex; align-items:center; gap: 14px;
  padding: 11px 14px; border-radius: var(--r-sm);
  color: var(--text-2); font-size: 15px; font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.nav-item svg{ width: 21px; height:21px; flex:none; }
.nav-item:hover{ background: var(--hover); color: var(--text); }
.nav-item.active{ background: var(--accent-soft); color: var(--text); }
.nav-item.active svg{ color: var(--accent-2); }
.app.collapsed .nav-item span{ display:none; }
.app.collapsed .nav-item{ justify-content:center; padding: 11px 0; }

.side-sep{ height:1px; background: var(--line); margin: 12px 18px; }
.side-label{
  padding: 4px 26px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-3);
}
.app.collapsed .side-label{ display:none; }

.playlists{ flex:1; overflow-y: auto; padding: 4px 12px 12px; min-height:0; }
.pl-item{
  display:flex; align-items:center; gap: 12px;
  padding: 8px 10px; border-radius: var(--r-sm); cursor:pointer;
  transition: background .18s var(--ease);
}
.pl-item:hover{ background: var(--hover); }
.pl-cover{ width: 42px; height: 42px; border-radius: 9px; flex:none; }
.pl-meta{ min-width:0; }
.pl-meta .t{ font-size: 14px; font-weight: 600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-meta .s{ font-size: 12.5px; color: var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app.collapsed .pl-meta,.app.collapsed .side-label,.app.collapsed .side-cta span{ display:none; }
.app.collapsed .pl-item{ justify-content:center; padding:8px 0; }

.side-cta{
  margin: 4px 12px 14px; padding: 11px 14px; border-radius: var(--r-sm);
  display:flex; align-items:center; gap:12px; color: var(--text-2);
  font-weight:600; font-size:14px; border: 1px dashed var(--line);
  transition: .18s var(--ease);
}
.side-cta:hover{ color: var(--text); border-color: var(--text-3); }
.side-cta svg{ width:20px;height:20px;flex:none; }

/* ============================================================
   Main column
   ============================================================ */
.main{
  grid-row: 1 / 2;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  display:flex; flex-direction:column;
  min-height:0; min-width:0;
}

/* top bar */
.topbar{
  position: sticky; top:0; z-index: 20;
  display:flex; align-items:center; gap: 16px;
  padding: 16px 26px;
  background: linear-gradient(180deg, var(--surface) 60%, transparent);
}
.tb-nav{ display:flex; gap:8px; }
.icon-btn{
  width: 38px; height: 38px; border-radius: 50%;
  display:grid; place-items:center; background: var(--surface-3);
  color: var(--text-2); transition: .16s var(--ease);
}
.icon-btn:hover{ color: var(--text); transform: scale(1.05); }
.icon-btn svg{ width:19px; height:19px; }
.tb-spacer{ flex:1; }

.searchbar{
  flex: 1; max-width: 460px;
  display:flex; align-items:center; gap:10px;
  background: var(--surface-3); border-radius: 999px;
  padding: 10px 18px; color: var(--text-3);
  border: 1px solid transparent; transition: .18s var(--ease);
}
.searchbar:focus-within{ border-color: var(--accent); }
.searchbar svg{ width:19px; height:19px; flex:none; }
.searchbar input{ flex:1; background:none; border:none; outline:none; color: var(--text); font-size: 15px; }
.searchbar input::placeholder{ color: var(--text-3); }

.theme-toggle{
  display:flex; align-items:center; gap:8px; background: var(--surface-3);
  border-radius: 999px; padding: 5px;
}
.theme-toggle button{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color: var(--text-3); }
.theme-toggle button.on{ background: var(--accent); color:#fff; }
.theme-toggle svg{ width:16px; height:16px; }

.avatar{
  width: 38px; height:38px; border-radius:50%;
  background: var(--accent-grad); display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:15px; cursor:pointer;
  border: 2px solid transparent; transition:.16s var(--ease); overflow:hidden;
}
.avatar.has-img{ padding:0; }
.avatar.has-img img, .pa.has-img img, .m-prof-av.has-img img, .m-av.has-img img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
}
.avatar:hover{ border-color: var(--accent-2); }

/* scroll region for screens */
.content{ flex:1; overflow-y: auto; min-height:0; }
.content-inner{ padding: 4px 26px 40px; }

/* ---------- Screen system ---------- */
.screen{ display:none; }
.screen.active{ display:block; }

/* ---------- Section ---------- */
.section{ margin-top: 34px; }
.section:first-child{ margin-top: 8px; }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 16px; }
.sec-head h2{ font-size: 24px; font-weight: 800; letter-spacing:-0.028em; }
.sec-head a{ font-size: 13.5px; color: var(--text-3); font-weight:600; cursor:pointer; }
.sec-head a:hover{ color: var(--text); }

/* greeting */
.greeting{ font-size: 30px; font-weight: 800; letter-spacing:-0.03em; margin: 14px 0 4px; }

/* ---------- Cards ---------- */
.row{ display:grid; grid-auto-flow: column; grid-auto-columns: 180px; gap: 18px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.row::-webkit-scrollbar{ height: 8px; }
.card{ scroll-snap-align: start; cursor:pointer; }
.card .art{
  width:100%; aspect-ratio:1; border-radius: var(--r-md); overflow:hidden;
  position:relative;
  box-shadow: 0 10px 28px -14px rgba(0,0,0,.5);
  transition: transform .34s var(--spring), box-shadow .34s var(--ease);
}
/* Lift + deepen on hover; settle back on press so the card feels physical. */
.card:hover .art{
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 22px 44px -16px rgba(0,0,0,.62);
}
.card:active .art{ transform: translateY(-2px) scale(.995); transition-duration:.12s; }
/* A soft sheen across the artwork edge reads as glass, not a flat thumbnail. */
.card .art::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.05);
}
.card .t{ margin-top:12px; font-size:15px; font-weight:600; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .s{ font-size:13px; color: var(--text-3); margin-top:3px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .play-fab{
  position:absolute; right:12px; bottom:12px; width:46px; height:46px; border-radius:50%;
  background: var(--accent); display:grid; place-items:center; color:#fff;
  box-shadow: 0 10px 22px -6px rgba(108,60,224,.7);
  opacity:0; transform: translateY(8px); transition: .22s var(--ease);
}
.card:hover .play-fab{ opacity:1; transform:none; }
.card .play-fab svg{ width:20px; height:20px; margin-left:2px; }

/* quick grid (home) */
.quick-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 10px; }
.quick{
  display:flex; align-items:center; gap:14px; background: var(--surface-3);
  border-radius: var(--r-sm); overflow:hidden; cursor:pointer; height:64px;
  transition:.18s var(--ease); position:relative;
}
.quick:hover{ background: var(--accent-soft); }
.quick .qc{ width:64px; height:64px; flex:none; }
.quick .qt{ font-weight:700; font-size:14.5px; }
.quick .qplay{ margin-left:auto; margin-right:14px; width:40px;height:40px;border-radius:50%; background:var(--accent); display:grid; place-items:center; color:#fff; opacity:0; transition:.18s var(--ease); box-shadow:0 8px 18px -6px rgba(108,60,224,.6); }
.quick:hover .qplay{ opacity:1; }
.quick .qplay svg{ width:17px; height:17px; margin-left:1px; }

/* round cards (artists) */
.card.round .art{ border-radius:50%; }

/* hero wave card */
.hero-wave{
  position:relative; border-radius: var(--r-lg); overflow:hidden;
  padding: 34px 36px; min-height: 220px; display:flex; flex-direction:column; justify-content:flex-end;
  background: linear-gradient(120deg,#3A1C8C 0%, #6C3CE0 48%, #9D5BE0 100%);
  color:#fff;
}
.hero-wave .glow{ position:absolute; inset:0; background: radial-gradient(600px 300px at 90% 10%, rgba(255,255,255,.22), transparent 60%); }
.hero-wave .eyebrow{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; opacity:.85; position:relative; }
.hero-wave h1{ font-size: 38px; font-weight:800; letter-spacing:-0.03em; margin-top:8px; position:relative; }
.hero-wave p{ font-size:15px; opacity:.86; margin-top:8px; max-width:440px; position:relative; }
.hero-wave .h-actions{ display:flex; gap:12px; margin-top:22px; position:relative; }
.btn-glass{ background: rgba(255,255,255,.16); backdrop-filter: blur(8px); color:#fff; padding:12px 24px; border-radius:999px; font-weight:700; font-size:15px; display:flex; align-items:center; gap:9px; transition:.16s var(--ease); }
.btn-glass:hover{ background: rgba(255,255,255,.28); }
.btn-glass.solid{ background:#fff; color:#3A1C8C; }
.btn-glass.solid:hover{ transform: scale(1.03); }
.btn-glass svg{ width:18px; height:18px; }
.equalizer{ position:absolute; right:36px; top:34px; display:flex; gap:5px; align-items:flex-end; height:54px; }
.equalizer i{ width:6px; background:rgba(255,255,255,.65); border-radius:3px; animation: eq 1.1s var(--ease) infinite; }
.equalizer i:nth-child(1){ height:40%; animation-delay:0s;}
.equalizer i:nth-child(2){ height:75%; animation-delay:.15s;}
.equalizer i:nth-child(3){ height:55%; animation-delay:.3s;}
.equalizer i:nth-child(4){ height:90%; animation-delay:.1s;}
.equalizer i:nth-child(5){ height:48%; animation-delay:.25s;}
@keyframes eq{ 0%,100%{ transform: scaleY(.5);} 50%{ transform: scaleY(1);} }
@media (prefers-reduced-motion: reduce){ .equalizer i{ animation:none; } }

/* ============================================================
   Track list
   ============================================================ */
.tracklist{ margin-top: 8px; }
.track{
  display:grid; grid-template-columns: 28px 44px 1fr 160px 88px 44px; align-items:center;
  gap: 16px; padding: 8px 14px; border-radius: var(--r-sm); cursor:pointer;
  /* Списки бывают по 40+ строк: то, что за пределами экрана, браузер
     пропускает при пересчёте стилей и отрисовке — прокрутка ровнее. */
  content-visibility: auto; contain-intrinsic-size: auto 60px;
  transition: background .15s var(--ease); color: var(--text-2);
}
.track:hover{ background: var(--hover); }
.track.playing{ color: var(--accent-2); }
.track .idx{ font-size:14px; text-align:center; color: var(--text-3); }
.track:hover .idx .num{ display:none; }
.track .idx .play{ display:none; }
.track:hover .idx .play{ display:inline; }
.track .idx .play svg, .track .idx .pause svg{ width:15px; height:15px; color: var(--text); }
.track .tcover{ width:44px; height:44px; border-radius:9px; flex:none; }
.track .tinfo{ min-width:0; }
.track .tinfo .tt{ font-size:15px; font-weight:600; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track.playing .tinfo .tt{ color: var(--accent-2); }
.track .tinfo .ta{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track .talbum{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track .tdur{ font-size:13.5px; text-align:right; font-variant-numeric: tabular-nums; }
.track .tact{ display:flex; gap:6px; justify-content:flex-end; opacity:1; transition:.15s var(--ease); }
.track .tact .like, .track .tact .more{ opacity:0; transition:.15s var(--ease); }
.track:hover .tact .like, .track:hover .tact .more{ opacity:1; }
@media (hover:none){
  .track .tact .like, .track .tact .more{ opacity:1; }
}
.track .tact button{ width:30px;height:30px;border-radius:50%; display:grid;place-items:center; color:var(--text-3); }
.track .tact button:hover{ color: var(--text); background: var(--hover); }
.track .tact svg{ width:17px; height:17px; }
.track .like.on{ color: var(--accent); opacity:1; }
.track-head{
  display:grid; grid-template-columns: 28px 44px 1fr 160px 88px 44px; gap:16px;
  padding: 6px 14px; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color: var(--text-3); border-bottom:1px solid var(--line); margin-bottom:6px; font-weight:700;
}
.track-head .r{ text-align:right; }

/* compact track row (queue) */
.track.compact{ grid-template-columns: 28px 44px 1fr auto; }

/* ============================================================
   Playlist header
   ============================================================ */
.pl-header{ display:flex; gap: 30px; align-items:flex-end; padding: 24px 0 10px; }
.pl-header .big-cover{ width: 224px; height:224px; border-radius: var(--r-md); flex:none; box-shadow: var(--shadow-pop); }
.pl-header .meta .kind{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color: var(--text-3); }
.pl-header .meta h1{ font-size: 56px; font-weight:800; letter-spacing:-0.04em; line-height:1.02; margin: 12px 0 16px; }
.pl-header .meta .desc{ font-size:15px; color: var(--text-2); max-width: 560px; line-height:1.5; }
.pl-header .meta .stats{ display:flex; align-items:center; gap:8px; margin-top:16px; font-size:14px; color: var(--text-2); }
.pl-header .meta .stats .dot{ width:4px; height:4px; border-radius:50%; background: var(--text-3); }
.pl-header .meta .stats b{ color: var(--text); font-weight:700; }
.pl-actions{ display:flex; align-items:center; gap:18px; margin: 24px 0 8px; }
.btn-play-lg{ width:60px; height:60px; border-radius:50%; background: var(--accent-grad); display:grid; place-items:center; color:#fff; box-shadow: 0 14px 30px -8px rgba(108,60,224,.6); transition:.16s var(--ease); }
.btn-play-lg:hover{ transform: scale(1.06); }
.btn-play-lg svg{ width:26px; height:26px; margin-left:3px; }
.btn-ghost{ width:46px;height:46px;border-radius:50%; display:grid; place-items:center; color: var(--text-2); border:1px solid var(--line); transition:.16s var(--ease); }
.btn-ghost:hover{ color: var(--text); border-color: var(--text-3); }
.btn-ghost svg{ width:21px; height:21px; }
.btn-ghost.txt{ width:auto; height:46px; border-radius:999px; padding:0 20px; gap:9px; font-weight:600; font-size:14.5px;
  display:inline-flex; align-items:center; justify-content:center; }
.btn-ghost.txt svg{ width:19px; height:19px; flex:none; }

/* ============================================================
   Search screen
   ============================================================ */
.search-hero{ position:relative; }
.bigsearch{
  display:flex; align-items:center; gap:14px; background: var(--surface-3);
  border-radius: 999px; padding: 16px 24px; margin: 8px 0 22px;
  border: 1.5px solid transparent; transition:.18s var(--ease);
}
.bigsearch:focus-within{ border-color: var(--accent); }
.bigsearch svg{ width:23px; height:23px; color: var(--text-3); }
.bigsearch input{ flex:1; background:none; border:none; outline:none; font-size:18px; color: var(--text); }
.bigsearch input::placeholder{ color: var(--text-3); }
.source-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 26px; }
.chip{
  padding: 9px 18px; border-radius: 999px; background: var(--surface-3);
  font-size:14px; font-weight:600; color: var(--text-2); transition:.16s var(--ease);
  border:1px solid transparent; display:flex; align-items:center; gap:8px;
}
.chip:hover{ color: var(--text); }
.chip.active{ background: var(--text); color: var(--bg); }
[data-theme="light"] .chip.active{ background:#1A1426; color:#fff; }
.chip .src-dot{ width:9px; height:9px; border-radius:50%; }

/* ===== Original playlist covers (mosaic / single / aurora) ===== */
.pl-header .big-cover, .m-pl-cover, .pl-result-cover{ border-radius: 20px; overflow:hidden; }
.pl-cover-art{ width:100%; height:100%; border-radius:inherit; overflow:hidden; }
.pl-cover-art.single{ background-size:cover; background-position:center; }
.pl-cover-art.mosaic{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.pl-cover-art.mosaic i{ background-size:cover; background-position:center; }
/* Abstract mesh-gradient art with the FLOR star — modern generated cover, 8 variants */
.pl-cover-art.mesh{ background-color:#2a1a52; position:relative; }
.pl-mini{ overflow:hidden; border-radius:12px; }
.pl-cover, .qc, .art, .pl-cover-art{ overflow:hidden; }
.pl-cover-art .pl-logo{ position:absolute; inset:0; display:grid; place-items:center; z-index:1; }
.pl-cover-art .pl-logo svg{ width:40%; max-width:88px; color:#fff; opacity:.94; filter:drop-shadow(0 4px 12px rgba(0,0,0,.28)); }
/* liquid-glass heart is bigger + softly glows */
.pl-cover-art .pl-logo.heart svg{ width:58%; max-width:126px; opacity:1; filter:drop-shadow(0 6px 16px rgba(70,18,110,.5)) drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.pl-cover-art.mesh.plm1{ background:
  radial-gradient(at 18% 20%, #8b5cff 0, transparent 55%),
  radial-gradient(at 82% 12%, #ff5db6 0, transparent 48%),
  radial-gradient(at 78% 82%, #4d7dff 0, transparent 55%),
  radial-gradient(at 12% 88%, #b14dff 0, transparent 50%), #3a1c8c; }
.pl-cover-art.mesh.plm2{ background:
  radial-gradient(at 25% 15%, #5eead4 0, transparent 50%),
  radial-gradient(at 85% 30%, #6d8bff 0, transparent 52%),
  radial-gradient(at 70% 85%, #a855f7 0, transparent 55%),
  radial-gradient(at 10% 80%, #38bdf8 0, transparent 50%), #1e2a78; }
.pl-cover-art.mesh.plm3{ background:
  radial-gradient(at 20% 22%, #ff8fb1 0, transparent 52%),
  radial-gradient(at 80% 18%, #c04dff 0, transparent 50%),
  radial-gradient(at 75% 80%, #7c4dff 0, transparent 55%),
  radial-gradient(at 15% 82%, #ff6ec7 0, transparent 48%), #5b1c8c; }
.pl-cover-art.mesh.plm4{ background:
  radial-gradient(at 22% 18%, #60a5fa 0, transparent 52%),
  radial-gradient(at 82% 22%, #818cf8 0, transparent 50%),
  radial-gradient(at 78% 84%, #22d3ee 0, transparent 52%),
  radial-gradient(at 12% 85%, #a78bfa 0, transparent 52%), #1c2b6b; }
.pl-cover-art.mesh.plm5{ background:
  radial-gradient(at 20% 20%, #f472b6 0, transparent 50%),
  radial-gradient(at 85% 15%, #fb7185 0, transparent 48%),
  radial-gradient(at 72% 82%, #a855f7 0, transparent 55%),
  radial-gradient(at 14% 85%, #8b5cff 0, transparent 52%), #6d1e6b; }
.pl-cover-art.mesh.plm6{ background:
  radial-gradient(at 24% 16%, #a78bfa 0, transparent 52%),
  radial-gradient(at 80% 24%, #f0abfc 0, transparent 50%),
  radial-gradient(at 78% 80%, #6366f1 0, transparent 55%),
  radial-gradient(at 12% 82%, #c084fc 0, transparent 50%), #3a1c6b; }
.pl-cover-art.mesh.plm7{ background:
  radial-gradient(at 22% 20%, #34d399 0, transparent 50%),
  radial-gradient(at 84% 18%, #22d3ee 0, transparent 50%),
  radial-gradient(at 74% 84%, #6d8bff 0, transparent 54%),
  radial-gradient(at 12% 82%, #a855f7 0, transparent 50%), #143a6b; }
.pl-cover-art.mesh.plm8{ background:
  radial-gradient(at 20% 18%, #c084fc 0, transparent 52%),
  radial-gradient(at 82% 16%, #7c9bff 0, transparent 50%),
  radial-gradient(at 76% 82%, #ff6ec7 0, transparent 52%),
  radial-gradient(at 14% 84%, #8b5cff 0, transparent 52%), #341c7a; }

/* public/private badge */
.pl-badge{ font-size:12px; font-weight:600; color:var(--accent-2); }
.pl-badge.muted{ color:var(--text-3); }

/* Follow button */
.btn-follow{ padding:11px 20px; border-radius:999px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  background:var(--accent); color:#fff; border:none; transition:.15s var(--ease); }
.btn-follow:hover{ filter:brightness(1.08); }
.btn-follow.on{ background:transparent; color:var(--text-2); border:1.5px solid var(--line); }
.btn-follow.on:hover{ color:var(--text); border-color:var(--text-3); }

/* ---- Recent searches (empty search screen) ---- */
.search-hist{ margin-top:6px; }
.search-hist-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.search-hist-head h3{ font-size:19px; font-weight:800; letter-spacing:-.02em; }
.sh-clear{ background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:13.5px; font-weight:600; color:var(--text-3); }
.sh-clear:hover{ color:var(--text); }
.search-hist-list{ display:flex; flex-wrap:wrap; gap:9px; }
.sh-chip{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 8px 9px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface-3); color:var(--text); font-family:inherit; font-size:14px; font-weight:600;
  transition: background .16s var(--ease), transform .16s var(--spring), border-color .16s var(--ease); }
.sh-chip:hover{ background:var(--hover); border-color:var(--text-3); }
.sh-chip:active{ transform:scale(.95); }
.sh-ico{ display:inline-flex; width:15px; height:15px; color:var(--text-3); }
.sh-ico svg{ width:100%; height:100%; }
.sh-q{ max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-x{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%;
  color:var(--text-3); font-size:16px; line-height:1; }
.sh-x:hover{ background:var(--line); color:var(--text); }

/* Playlist result card in search */
.pl-result-cover{ width:112px; height:112px; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.pl-result .artist-name{ margin-top:10px; }

/* ===== Playlist settings modal (minimalist) ===== */
.pset{ display:flex; flex-direction:column; gap:8px; text-align:left; margin-top:4px; }
.pset-label{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin-top:12px; }
.pset-seg{ display:flex; gap:8px; }
/* Playlist cover picker (create modal + settings) */
.pl-create-top{ display:flex; align-items:center; gap:14px; margin-top:4px; }
.pl-create-top .modal-input{ flex:1; margin:0; }
.pl-cover-pick{ position:relative; width:72px; height:72px; flex:none; border-radius:14px; overflow:hidden;
  border:1.5px dashed var(--line); background:var(--surface-3); cursor:pointer; padding:0; }
.pl-cover-pick.has{ border-style:solid; border-color:var(--line); }
.pl-cover-prev{ position:absolute; inset:0; background-size:cover; background-position:center; }
.pl-cover-cam{ position:absolute; inset:0; display:grid; place-items:center; color:var(--text-3); }
.pl-cover-cam svg{ width:22px; height:22px; }
.pl-cover-pick.has .pl-cover-cam{ background:rgba(0,0,0,.34); color:#fff; opacity:0; transition:opacity .15s var(--ease); }
.pl-cover-pick.has:hover .pl-cover-cam{ opacity:1; }
.pset-seg button{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:14px;
  background:var(--surface); border:1.5px solid var(--line); color:var(--text-2); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:.15s var(--ease); }
.pset-seg button svg{ width:17px; height:17px; }
.pset-seg button:hover{ border-color:var(--text-3); }
.pset-seg button.on{ border-color:var(--accent); color:var(--text); background:var(--accent-soft); }
.pset-hint{ font-size:12.5px; color:var(--text-3); margin-top:2px; }
.pset-collab{ display:flex; gap:8px; }
.pset-collab .modal-input{ flex:1; margin:0; }
.pset-collab .btn-modal{ flex:none; padding:0 16px; }
.pset-collab-list{ display:flex; flex-wrap:wrap; gap:8px; }
.pset-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 8px 6px 12px; border-radius:999px; background:var(--hover); font-size:13px; }
.pset-chip button{ border:none; background:none; color:var(--text-3); cursor:pointer; font-size:16px; line-height:1; padding:0 2px; }
.pset-chip button:hover{ color:var(--text); }
.btn-modal.danger-ghost{ background:transparent; color:#ff6b6b; border:1.5px solid rgba(255,107,107,.4); }
.btn-modal.danger-ghost:hover{ background:rgba(255,107,107,.12); }

/* Back button on artist / playlist pages */
.page-back{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 18px;
  padding:9px 16px 9px 13px; border-radius:999px;
  background:var(--surface); color:var(--text-2); border:1px solid var(--line);
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  transition:.15s var(--ease);
}
.page-back:hover{ background:var(--hover); color:var(--text); }
.page-back svg{ width:18px; height:18px; }

/* Clickable artist name → opens the artist page */
.ta-link{ cursor:pointer; }
.ta-link:hover{ color: var(--text); text-decoration: underline; }

/* Artist cards in search + the artist page cover */
.artist-sec{ margin: 6px 0 24px; }
.artist-sec-t{ font-size:18px; font-weight:700; margin:0 0 14px; }
.artist-row{ display:flex; gap:18px; overflow-x:auto; padding-bottom:4px; }
.artist-card{ flex:none; width:112px; text-align:center; cursor:pointer; }
/* position:relative + absolute img — при display:grid буква и фото попадали в
   РАЗНЫЕ строки сетки, и буква висела над картинкой вместо подложки. */
.artist-av{ position:relative; width:112px; height:112px; border-radius:50%; overflow:hidden; display:grid; place-items:center; transition: transform .18s var(--ease); box-shadow:0 6px 18px rgba(0,0,0,.25); }
.artist-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.artist-av span{ font-size:38px; font-weight:800; color:#fff; }
.artist-card:hover .artist-av{ transform: translateY(-3px) scale(1.03); }
.artist-name{ margin-top:10px; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.big-cover.artist-cover, .pl-header .big-cover{ }

.genre-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.genre{
  position:relative; aspect-ratio: 16/9; border-radius: var(--r-md); overflow:hidden;
  padding:18px; cursor:pointer; transition: transform .2s var(--ease);
}
.genre:hover{ transform: translateY(-3px); }
.genre h3{ color:#fff; font-size:19px; font-weight:700; position:relative; z-index:2; }
/* Tone-on-tone 3D relief: the icon takes on the card's own colour (semi-transparent
   white tint) and is embossed with a light top edge + dark bottom shadow so it
   reads as a raised object moulded from the card, not a flat white line. */
.genre::after{ content:''; position:absolute; right:2px; bottom:-16px; width:104px; height:104px; border-radius:50%; background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.12), rgba(255,255,255,0) 68%); z-index:1; }
.genre-ic{
  position:absolute; right:16px; bottom:12px; z-index:1;
  font-size:56px; line-height:1;
  /* show the real emoji (all details visible) at 20% transparency + soft shadow */
  opacity:.8;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.35));
  transition: transform .28s var(--ease), opacity .2s var(--ease);
  pointer-events:none; user-select:none;
}
.genre:hover .genre-ic{ transform: scale(1.12) translateY(-3px); opacity:.95; }

/* ============================================================
   Library
   ============================================================ */
.lib-tabs{ display:flex; gap:10px; margin: 8px 0 24px; }
.grid-cards{ display:grid; grid-template-columns: repeat(auto-fill,minmax(168px,1fr)); gap: 22px; }

/* ============================================================
   Settings
   ============================================================ */
.settings{ max-width: 720px; }
.set-group{ margin-top: 30px; }
.set-group h3{ font-size:14px; text-transform:uppercase; letter-spacing:.08em; color: var(--text-3); margin-bottom:12px; font-weight:700; }
.set-row{
  display:flex; align-items:center; gap:16px; padding: 16px 18px;
  background: var(--surface-3); border-radius: var(--r-sm); margin-bottom:10px;
}
.set-row .si{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none; }
.set-row .st{ flex:1; }
.set-row .st .a{ font-size:15.5px; font-weight:600; }
.set-row .st .b{ font-size:13px; color: var(--text-3); margin-top:2px; }
.set-row .badge{ font-size:13px; font-weight:600; color: var(--accent-2); padding:6px 14px; border-radius:999px; background: var(--accent-soft); }
.switch{ width:46px; height:27px; border-radius:999px; background: var(--line); position:relative; transition:.2s var(--ease); flex:none; }
.switch.on{ background: var(--accent); }
.switch::after{ content:''; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:.2s var(--ease); box-shadow:0 2px 5px rgba(0,0,0,.25); }
.switch.on::after{ left:22px; }
.seg{ display:flex; background: var(--surface); border-radius:999px; padding:4px; gap:2px; }
.seg button{ padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:600; color: var(--text-3); }
.seg button.on{ background: var(--accent); color:#fff; }
.seg3 button{ padding:8px 13px; font-size:13px; }
/* BETA badge on the Glass theme option */
.beta-tag{
  display:inline-block; vertical-align:super;
  margin-left:5px; padding:1px 4px; border-radius:5px;
  font-size:8px; font-weight:800; letter-spacing:.04em; line-height:1;
  text-transform:uppercase; background:var(--accent); color:#fff;
}
.seg button.on .beta-tag, .m-seg button.on .beta-tag{ background:rgba(255,255,255,.3); color:#fff; }
/* Hide volume UI where the OS blocks programmatic volume (iOS) */
body.no-volume .fs-volume, body.no-volume .np-right{ display:none !important; }
/* Language dropdown (22 languages — a select, not a segmented control) */
.lang-select{
  font-family:inherit; font-size:14px; font-weight:600; color:var(--text);
  background:var(--surface-3); border:1px solid var(--line); border-radius:12px;
  padding:9px 34px 9px 14px; cursor:pointer; max-width:190px; flex:none;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:16px;
}
.lang-select:focus{ outline:none; border-color:var(--accent); }
.lang-select option{ color:#111; }

.profile-top{ display:flex; align-items:center; gap:24px; padding: 16px 0 8px; }
.profile-top .avatar-wrap{ position:relative; flex:none; }
.profile-top .pa{ width:104px; height:104px; border-radius:50%; background: var(--accent-grad); display:grid; place-items:center; color:#fff; font-size:40px; font-weight:800; cursor:pointer; overflow:hidden; }
.profile-top .av-badge{ position:absolute; right:2px; bottom:2px; width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; border:3px solid var(--bg); cursor:pointer; box-shadow:0 4px 14px rgba(108,60,224,.45); }
.profile-top .av-badge svg{ width:17px; height:17px; }
.avatar-edit-btn{ margin-top:12px; display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; background:var(--accent-soft); color:var(--accent-2); font-weight:700; font-size:13px; border:none; cursor:pointer; font-family:inherit; }
.avatar-edit-btn svg{ width:16px; height:16px; }
.avatar-edit-btn:hover{ background:var(--accent); color:#fff; }
.profile-top h1{ font-size:38px; font-weight:800; letter-spacing:-0.03em; }
.profile-top .ps{ color: var(--text-2); margin-top:6px; font-size:15px; }
.profile-top .ps b{ color: var(--text); }

/* ============================================================
   Now-playing bar (mini player)
   ============================================================ */
.player{
  grid-column: 1 / 3; grid-row: 2 / 3;
  /* A touch of liquid glass in every theme: the surface is translucent and the
     backdrop is blurred, so the player floats over the page instead of sealing
     it off. (The dedicated "glass" theme pushes this much further.) */
  background: color-mix(in srgb, var(--player-bg) 78%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  padding: 12px 20px; gap: 20px;
}
.np-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.np-left .npc{ width:56px; height:56px; border-radius:11px; flex:none; cursor:pointer; transition: transform .2s var(--ease); }
.np-left .npc:hover{ transform: scale(1.04); }
.np-left .npmeta{ min-width:0; }
.np-left .npmeta .t{ font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-left .npmeta .a{ font-size:13px; color: var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-like{ width:36px;height:36px;border-radius:50%; display:grid; place-items:center; color:var(--text-3); flex:none; border:none; background:transparent; cursor:pointer; }
.np-like:hover{ color: var(--text); }
.np-like.on{ color: var(--accent); }
.np-like svg{ width:19px; height:19px; }
.np-addpl{ width:36px;height:36px;border-radius:50%; display:grid; place-items:center; flex:none; border:1.5px solid var(--fs-tint-border, rgba(108,60,224,.45)); background:var(--fs-tint-soft, var(--accent-soft)); color:var(--fs-on-tint, var(--accent-2)); cursor:pointer; transition:.15s var(--ease); box-shadow:0 4px 14px var(--fs-tint-glow, rgba(108,60,224,.25)); }
.np-addpl:hover{ filter:brightness(1.08); }
.np-addpl svg{ width:19px; height:19px; }
.player{ --fs-tint: var(--accent); --fs-tint-soft: rgba(108,60,224,.22); --fs-tint-border: rgba(108,60,224,.4); --fs-tint-glow: rgba(108,60,224,.2); --fs-on-tint: var(--accent-2); }

.np-center{ display:flex; flex-direction:column; align-items:center; gap:9px; width: 520px; max-width: 40vw; }
.np-controls{ display:flex; align-items:center; gap:20px; }
.np-controls button{ color: var(--text-2); display:grid; place-items:center; transition:.15s var(--ease); }
.np-controls button:hover{ color: var(--text); }
.np-controls button.sm svg{ width:19px; height:19px; }
.np-controls button.on{ color: var(--accent-2); }
.np-play{ width:42px; height:42px; border-radius:50%; background: var(--text); color: var(--bg) !important; display:grid; place-items:center; transition:.15s var(--ease); }
[data-theme="light"] .np-play{ background:#1A1426; color:#fff !important; }
.np-play:hover{ transform: scale(1.07); }
.np-play svg{ width:20px; height:20px; }
/* Между мобильным брейкпоинтом (760px) и широким десктопом плеер раньше
   переполнялся: три равные колонки не помещались, и правый блок с громкостью
   и очередью уезжал за край. Отдаём центру ровно столько, сколько нужно. */
@media (max-width: 1180px){
  .player{ grid-template-columns: minmax(0,1fr) auto minmax(0,auto); gap:12px; padding:12px 14px; }
  .np-center{ width:auto; max-width:none; min-width:0; }
  .np-controls{ gap:14px; }
  .np-left .npmeta{ max-width:34vw; }
  .np-right{ gap:10px; }
  .np-right .vol .bar{ width:70px; }
}
@media (max-width: 980px){
  /* Совсем узко — прячем вторичное, но НИКОГДА не громкость и не воспроизведение. */
  .np-left .np-addpl{ display:none; }
  .np-right #queueBtn{ display:none; }
  .np-right .vol .bar{ width:54px; }
  .np-progress .tm{ min-width:30px; font-size:11px; }
}

.np-progress{ display:flex; align-items:center; gap:12px; width:100%; }
/* Nothing loaded → no empty progress strip sitting there looking broken. */
body:not(.has-track) .np-progress{ visibility:hidden; }
.np-progress .tm{ font-size:12px; color: var(--text-3); font-variant-numeric: tabular-nums; min-width:36px; }
.np-progress .tm.r{ text-align:left; }
.bar{ flex:1; height:5px; background: var(--line); border-radius:999px; position:relative; cursor:pointer; }
.bar .fill{ position:absolute; left:0; top:0; bottom:0; background: var(--accent); border-radius:999px; }
.bar .knob{ position:absolute; top:50%; transform: translate(-50%,-50%); width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.4); opacity:0; transition:opacity .15s; }
.bar:hover .knob{ opacity:1; }
.bar:hover .fill{ background: var(--accent-2); }

.np-right{ display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.np-right button{ color: var(--text-3); display:grid; place-items:center; transition:.15s var(--ease); }
.np-right button:hover{ color: var(--text); }
.np-right button svg{ width:19px; height:19px; }
.vol{ display:flex; align-items:center; gap:10px; width:130px; }
.vol .bar{ height:5px; }
.expand-btn{ color: var(--text-3); }

/* ============================================================
   Fullscreen player
   ============================================================ */
.fsplayer{
  position: fixed; inset:0; z-index: 100;
  background: var(--bg);
  /* Own compositor layer: without it the slide repaints the blurred ambient
     layer every frame and the sheet visibly stutters on phones. */
  will-change: transform;
  transform: translateY(100%); transition: transform .42s cubic-bezier(.32,.72,0,1);
  display:grid; grid-template-columns: 1.1fr .9fr;
  overflow:hidden;
  --fs-tint: var(--accent);
  --fs-tint-soft: rgba(108,60,224,.28);
  --fs-tint-border: rgba(255,255,255,.22);
  --fs-tint-glow: rgba(108,60,224,.35);
  --fs-on-tint: #fff;
}
.fsplayer.open{ transform: none; }
/* Ambient: the artwork itself, blown up and blurred into a living light source.
   Two layers drifting at different speeds read as depth rather than a flat wash. */
.fsplayer .ambient{
  position:absolute; inset:-10%; z-index:0;
  filter: blur(100px) saturate(170%) brightness(.62);
  opacity:.5; transform: scale(1.5);
  animation: ambientDrift 24s ease-in-out infinite alternate;
  /* The drift only starts AFTER the sheet has finished sliding — animating a
     100px blur at the same time as the transform is what caused the stutter. */
  animation-play-state: paused;
}
.fsplayer.open .ambient{ animation-delay:.45s; animation-play-state: running; }
.fsplayer:not(.open) .ambient::after{ animation-play-state: paused; }
.fsplayer .ambient::after{
  content:''; position:absolute; inset:0;
  background: inherit; background-size:cover; background-position:center;
  filter: blur(130px) saturate(190%) brightness(.7);
  opacity:.35; transform: scale(1.25) rotate(8deg);
  animation: ambientDrift 34s ease-in-out infinite alternate-reverse;
}
/* Vignette keeps text legible over the bright artwork glow. */
.fsplayer::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 15%, transparent 20%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.28), transparent 30%, rgba(0,0,0,.45));
}
@keyframes ambientDrift{
  from{ transform: scale(1.5) translate(-3%, -2%); }
  to  { transform: scale(1.7) translate(4%, 3%); }
}
/* On short windows the column used to overflow and silently cut off whatever sat
   at the bottom — the volume slider. Scroll instead of clipping, and let the
   cover shrink with the viewport so it normally never comes to that. */
.fs-left{
  position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding: 32px 40px;
  min-height:0; overflow-y:auto; overscroll-behavior:contain;
}
.fs-left::-webkit-scrollbar{ width:0; }
/* Ноутбучные экраны: собираем колонку плотнее, чтобы ВСЁ — включая громкость —
   помещалось на экран без прокрутки. */
@media (max-height: 900px){
  .fs-left{ padding:18px 32px; justify-content:flex-start; }
  .fs-cover{ width:min(26vh, 260px); }
  .fs-trackinfo{ margin-top:14px; }
  .fs-trackinfo .tt{ font-size:clamp(19px,2.6vh,26px); }
  .fs-trackinfo .ta{ font-size:15px; margin-top:3px; }
  .fs-track-actions{ margin-top:10px; gap:12px; }
  .fs-like, .fs-addpl{ width:42px; height:42px; }
  .fs-progress{ margin-top:12px; }
  .fs-progress .bar.wave{ height:38px; }
  .fs-controls{ margin-top:12px; }
  .fs-controls .fs-play{ width:58px; height:58px; }
  .fs-volume{ margin-top:12px; }
  .fs-nowplaying{ margin-bottom:6px; }
}
/* Cover glows in the artwork's own colour (--fs-tint-glow is derived from the
   art by applyTrackTint), so light appears to spill from the picture itself. */
.fs-cover{
  /* 32vh keeps room for title, waveform, controls AND the volume row on short
     laptop screens, where 40vh pushed the bottom of the column out of view. */
  position:relative; width: min(32vh, 360px); aspect-ratio:1; border-radius: var(--r-lg); flex:none;
  box-shadow:
    0 30px 60px -12px var(--fs-tint-glow, rgba(0,0,0,.4)),
    0 40px 90px -20px rgba(0,0,0,.7);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* ---- Waveform scrubber ---- */
.bar.wave{
  --p: 0%;
  position:relative; height:44px; background:none; border-radius:0; overflow:hidden;
  cursor:pointer; touch-action:none;
}
.bar.wave .wave-bars{
  position:absolute; inset:0; display:flex; align-items:center; gap:2px;
  padding:0; pointer-events:none;
}
.bar.wave .wave-bars i{
  flex:1 1 0; min-width:2px; border-radius:999px;
  background: var(--text-3); opacity:.24;      /* unplayed stays quiet… */
  transition: height .3s var(--ease);
}
/* Played portion is a clipped copy tinted with the artwork colour. */
.bar.wave .wave-played{
  position:absolute; inset:0; width:var(--p); overflow:hidden; pointer-events:none;
  transition: width .12s linear;
}
/* Во время перетаскивания сглаживание только мешает — полоса должна стоять
   ровно под пальцем, а не догонять его с задержкой. */
.bar.wave.dragging .wave-played{ transition:none; }
.bar.wave .wave-played .wave-bars{ width:100%; }
/* …so the played portion reads instantly, lit in the artwork's colour. */
.bar.wave .wave-played .wave-bars i{
  background:#fff; opacity:1;
  box-shadow: 0 0 12px var(--fs-tint-glow, rgba(255,255,255,.6));
}
.bar.wave .wave-played .wave-bars{ position:absolute; inset:0; }
/* the clipped copy must keep the FULL track width so bars line up 1:1 */
.bar.wave .wave-played > .wave-bars{ width:var(--wave-w, 100%); }

/* ---- "NOW PLAYING" eyebrow with a live equaliser ---- */
.fs-nowplaying{
  display:flex; align-items:center; gap:8px; align-self:flex-start;
  font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color: var(--fs-tint, var(--accent-2)); margin-bottom:10px;
}
.fs-eq{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.fs-eq i{ width:2.5px; border-radius:999px; background:currentColor; animation: eqBounce 1s ease-in-out infinite; }
.fs-eq i:nth-child(1){ height:40%; animation-delay:0s; }
.fs-eq i:nth-child(2){ height:85%; animation-delay:.18s; }
.fs-eq i:nth-child(3){ height:60%; animation-delay:.36s; }
.fs-eq i:nth-child(4){ height:95%; animation-delay:.12s; }
@keyframes eqBounce{ 0%,100%{ transform:scaleY(.45);} 50%{ transform:scaleY(1);} }
body:not(.is-playing) .fs-eq i{ animation-play-state: paused; }

.fs-trackinfo{ width: min(40vh,400px); margin-top: 28px; }
.fs-trackinfo .tt{ font-size: clamp(24px,3.4vh,34px); font-weight:800; letter-spacing:-0.03em; }
.fs-trackinfo .ta{ font-size: 18px; color: var(--text-2); margin-top:6px; }
.fs-track-actions{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:20px; }
.fs-like, .fs-addpl{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; border:1.5px solid var(--fs-tint-border);
  background: var(--fs-tint-soft); color: var(--fs-on-tint);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor:pointer; transition: transform .15s var(--ease), background .2s var(--ease), color .2s var(--ease);
  box-shadow: 0 10px 28px var(--fs-tint-glow);
}
.fs-like:active, .fs-addpl:active{ transform: scale(.93); }
.fs-like.on{ background: var(--fs-tint); color: var(--fs-on-tint); border-color: transparent; }
.fs-like svg, .fs-addpl svg{ width:22px; height:22px; display:block; }
.fs-volume{ display:flex; align-items:center; gap:12px; width: min(40vh,400px); max-width:280px; margin-top:22px; }
.fs-volume button{ color: var(--text-2); display:grid; place-items:center; flex:none; }
.fs-volume button:hover{ color: var(--text); }
.fs-volume button svg{ width:20px; height:20px; }
.fs-volume .bar{ height:5px; }
.fs-volume .bar .fill{ background: var(--fs-tint); }
.fs-progress{ width: min(40vh,400px); margin-top: 22px; }
.fs-progress .bar .fill{ background: var(--fs-tint); }
.fs-progress .bar:hover .fill{ filter: brightness(1.08); }
.fs-progress .bar{ height:6px; }
.fs-progress .bar.wave{ height:52px; background:none; }   /* waveform needs real height */
/* Mini-player waveform — shorter, tighter bars so it fits the compact bar. */
.np-progress .bar.wave{ height:30px; background:none; }
.np-progress .bar.wave .wave-bars{ gap:1.5px; }
/* Raise the floor: at this size very short bars read as dots, not a waveform. */
.np-progress .bar.wave .wave-bars i{ min-width:1.5px; min-height:7px; }
.np-progress .bar.wave .wave-played .wave-bars i{ box-shadow:0 0 7px var(--fs-tint-glow, rgba(255,255,255,.5)); }
.fs-times{ display:flex; justify-content:space-between; margin-top:10px; font-size:13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fs-controls{ display:flex; align-items:center; justify-content:center; gap: clamp(18px,3vw,30px); margin-top: 20px; }
.fs-controls button{ color: var(--text-2); display:grid; place-items:center; transition:.15s var(--ease); }
.fs-controls button:hover{ color: var(--text); }
.fs-controls button svg{ width: 26px; height:26px; }
.fs-controls .fs-play{ width:72px; height:72px; border-radius:50%; background: var(--text); color: var(--bg) !important; }
[data-theme="light"] .fs-controls .fs-play{ background:#1A1426; color:#fff !important; }
/* The play button is the focal point — it sits in a halo of the track's colour. */
.fs-controls .fs-play{
  box-shadow: 0 12px 34px -6px var(--fs-tint-glow, rgba(0,0,0,.45)), 0 0 0 8px var(--fs-tint-soft, transparent);
  transition: transform .28s var(--spring), box-shadow .3s var(--ease);
}
.fs-controls .fs-play:hover{ transform: scale(1.07); box-shadow: 0 16px 44px -6px var(--fs-tint-glow, rgba(0,0,0,.5)), 0 0 0 12px var(--fs-tint-soft, transparent); }
.fs-controls .fs-play:active{ transform: scale(.97); transition-duration:.1s; }
.fs-controls .fs-play svg{ width:30px; height:30px; }
.fs-controls .on{ color: var(--accent-2); }

.fs-right{ position:relative; z-index:1; background: var(--surface); border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
[data-theme="dark"] .fs-right{ background: rgba(20,16,34,.6); backdrop-filter: blur(40px); }
.fs-rtabs{ display:flex; align-items:center; gap:6px; padding: 24px 28px 16px; }
.fs-rtabs button{ padding:8px 16px; border-radius:999px; font-weight:600; font-size:14.5px; color: var(--text-3); }
.fs-rtabs button.on{ background: var(--hover); color: var(--text); }

/* Collapsible queue panel — a handle on the divider hides it; another on the
   right edge brings it back, so the artwork can go full-width. */
.fsplayer.fs-noqueue{ grid-template-columns: 1fr; }
.fsplayer.fs-noqueue .fs-right{ display:none; }
.fs-qclose{
  position:absolute; z-index:6; left:0; top:50%; transform:translate(-100%,-50%);
  display:flex; align-items:center; justify-content:center;
  width:22px; height:60px; border-radius:10px 0 0 10px;
  background: var(--hover); color: var(--text-3);
  border:1px solid var(--line); border-right:none; cursor:pointer;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.fs-qclose:hover{ color: var(--text); background: var(--line); }
.fs-qclose svg{ width:16px; height:16px; }
.fs-qopen{
  position:absolute; z-index:20; right:0; top:50%; transform:translateY(-50%);
  display:none; align-items:center; justify-content:center;
  width:32px; height:66px; border-radius:12px 0 0 12px;
  background: rgba(255,255,255,.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,.24); border-right:none;
  color:#fff; cursor:pointer; transition: background .15s var(--ease);
}
.fs-qopen:hover{ background: rgba(255,255,255,.24); }
.fs-qopen svg{ width:20px; height:20px; }
.fsplayer.fs-noqueue .fs-qopen{ display:flex; }
.fs-queue{ flex:1; overflow-y:auto; padding: 0 18px 28px; min-height:0; }
.fs-close{
  position:absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 20px; z-index:20;
  min-height:44px; padding:0 16px 0 12px; border-radius:999px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,.28);
  display:inline-flex; align-items:center; gap:6px;
  color:#fff; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.fs-close:hover{ background: rgba(255,255,255,.24); }
.fs-close:active{ transform: scale(.96); }
.fs-close svg{ width:20px; height:20px; flex:none; }
.fs-close-label{ display:inline; }
.fs-minimize{
  display:none; margin-top:28px; padding:12px 28px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12);
  color:#fff; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.lyrics{ padding: 8px 30px 40px; font-size:24px; font-weight:600; line-height:1.7; color: var(--text-3); }
.lyrics .cur{ color: var(--text); }

/* ============================================================
   Cover gradients (premium, muted)
   ============================================================ */
.cv1{ background: linear-gradient(135deg,#6C3CE0,#3A1C8C); }
.cv2{ background: linear-gradient(135deg,#C77DFF,#7B2FF7); }
.cv3{ background: linear-gradient(140deg,#2D2A55,#5C4B9E); }
.cv4{ background: linear-gradient(135deg,#FF8FB1,#8E3FBE); }
.cv5{ background: linear-gradient(135deg,#1E2A52,#3D6FB4); }
.cv6{ background: linear-gradient(135deg,#E0A458,#A23E6C); }
.cv7{ background: linear-gradient(140deg,#3A1C8C,#9D5BE0); }
.cv8{ background: linear-gradient(135deg,#2B2540,#6C3CE0); }
.cv9{ background: linear-gradient(135deg,#4EC8C0,#2A5A8C); }
.cv10{ background: linear-gradient(135deg,#B8B0D8,#6C5CA8); }
.cv11{ background: linear-gradient(140deg,#1A1530,#4A2C8C); }
.cv12{ background: linear-gradient(135deg,#F2B5A0,#7B4FA8); }

/* responsive scale down */
@media (max-width: 1100px){
  .pl-header .big-cover{ width:180px; height:180px; }
  .pl-header .meta h1{ font-size:42px; }
  .np-center{ max-width: 32vw; }
}

/* ============================================================
   FLOR MUSIC — Real-app additions (covers, search, states)
   ============================================================ */

/* Real cover artwork sits on top of the gradient fallback */
.art img.cover-img,
.tcover img.cover-img,
.npc img.cover-img,
.pl-cover img.cover-img,
.qc img.cover-img,
.fs-cover img.cover-img,
.big-cover img.cover-img,
.m-pl-hero > .cv img.cover-img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
  opacity:0; transition:opacity .4s var(--ease);
}
.art img.cover-img.loaded,
.tcover img.cover-img.loaded,
.npc img.cover-img.loaded,
.pl-cover img.cover-img.loaded,
.qc img.cover-img.loaded,
.fs-cover img.cover-img.loaded,
.big-cover img.cover-img.loaded,
.m-pl-hero > .cv img.cover-img.loaded{ opacity:1; }
.art, .tcover, .npc, .pl-cover, .qc{ background-size:cover; background-position:center; }
.ambient{ background-size:cover; background-position:center; }

/* Source badge on tracks/cards */
.src-tag{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:6px; flex:none;
}
.src-tag.audius{ background:rgba(124,77,232,.16); color:var(--accent-2); }
.src-tag.itunes{ background:rgba(250,90,160,.15); color:#FF8FB1; }
.track .tinfo .tt-row{ display:flex; align-items:center; gap:8px; min-width:0; }
.track .tinfo .tt-row .tt{ min-width:0; }

/* Loading skeletons */
.skeleton-row{ display:grid; grid-auto-flow:column; grid-auto-columns:180px; gap:18px; }
.sk{ background:var(--surface-3); border-radius:var(--r-md); position:relative; overflow:hidden; }
.sk::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.09) 45%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.09) 55%, transparent 80%);
  animation:shimmer 1.6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes shimmer{ 100%{ transform:translateX(100%);} }

/* Sections rise into place instead of popping in — staggered down the page. */
.section{ animation: sectionIn .5s var(--ease) both; }
.section:nth-of-type(2){ animation-delay:.05s; }
.section:nth-of-type(3){ animation-delay:.1s; }
.section:nth-of-type(4){ animation-delay:.15s; }
.section:nth-of-type(n+5){ animation-delay:.2s; }
@keyframes sectionIn{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .section{ animation:none; }
  .fsplayer .ambient, .fsplayer .ambient::after{ animation:none; }
}
.sk-card{ width:180px; }
.sk-card .sk{ width:100%; aspect-ratio:1; }
.sk-card .sk-line{ height:13px; border-radius:6px; margin-top:12px; background:var(--surface-3); }
.sk-card .sk-line.short{ width:60%; margin-top:8px; }
@media (prefers-reduced-motion: reduce){ .sk::after{ animation:none; } }

/* Spinner */
.spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--line);
  border-top-color:var(--accent-2); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.center-state{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:70px 0; color:var(--text-3); text-align:center; }
.center-state .cs-title{ font-size:17px; font-weight:700; color:var(--text-2); }
.center-state .cs-sub{ font-size:14px; max-width:380px; }

/* Equalizer mini-indicator on the playing row */
.eq-mini{ display:inline-flex; gap:2px; align-items:flex-end; height:14px; }
.eq-mini i{ width:2.5px; background:var(--accent-2); border-radius:2px; animation:eqm .9s ease-in-out infinite; }
.eq-mini i:nth-child(1){ height:40%; animation-delay:0s; }
.eq-mini i:nth-child(2){ height:90%; animation-delay:.2s; }
.eq-mini i:nth-child(3){ height:60%; animation-delay:.4s; }
@keyframes eqm{ 0%,100%{ transform:scaleY(.4);} 50%{ transform:scaleY(1);} }
@media (prefers-reduced-motion: reduce){ .eq-mini i{ animation:none; } }

/* Toast notifications */
.toasts{ position:fixed; bottom:110px; left:50%; transform:translateX(-50%); z-index:200;
  display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast{ background:var(--surface-3); color:var(--text); border:1px solid var(--line);
  padding:12px 20px; border-radius:999px; font-size:14px; font-weight:600;
  box-shadow:var(--shadow-pop); animation:toastIn .3s var(--ease); display:flex; align-items:center; gap:10px; }
.toast svg{ width:18px; height:18px; color:var(--accent-2); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }

/* Buffering pulse on play buttons */
.np-play.loading svg, .fs-play.loading svg, .btn-play-lg.loading svg{ opacity:.35; }

/* Search results layout */
.search-results-head{ display:flex; align-items:center; gap:12px; margin:6px 0 16px; }
.search-results-head h2{ font-size:23px; font-weight:700; letter-spacing:-0.02em; }
.search-results-head .count{ color:var(--text-3); font-size:14px; font-weight:600; }

/* Disabled-source note */
.src-note-inline{ display:inline-flex; align-items:center; gap:6px; }

/* Make track grid columns hide album nicely on narrow */
@media (max-width: 900px){
  .track, .track-head{ grid-template-columns:28px 44px 1fr 70px 44px; }
  .track .talbum, .track-head > div:nth-child(4){ display:none; }
}

/* volume bar visually filled */
.vol .bar .fill{ background:var(--accent); }

/* ============================================================
   FLOR MUSIC — v2 additions
   ============================================================ */

/* Hide the topbar search while on the dedicated Search screen
   (the big search there is the single source of truth — no duplicate). */
.app.on-search .topbar .searchbar{ display:none; }

/* "more" (⋯) button on track rows */
.track .tact .addpl{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--accent-2); background:var(--accent-soft); }
.track .tact .addpl:hover{ color:#fff; background:var(--accent); }
.track .tact .addpl svg{ width:17px; height:17px; }
.track .tact .more{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--text-3); }
.track .tact .more:hover{ color:var(--text); background:var(--hover); }
.track .tact .more svg{ width:17px; height:17px; }

/* widen the action column so ♥ + ⋯ both fit */
.track:not(.compact), .track-head{ grid-template-columns:28px 44px 1fr 160px 78px 72px; }
@media (max-width: 900px){
  .track:not(.compact), .track-head{ grid-template-columns:28px 44px 1fr 60px 72px; }
}

/* danger ghost button */
.btn-ghost.danger{ color:#ff6b8a; border-color:rgba(255,107,138,.3); }
.btn-ghost.danger:hover{ color:#ff8fa3; border-color:#ff6b8a; }

/* ---------- Notifications ---------- */
.notif-wrap{ position:relative; }
.notif-dot{ position:absolute; top:7px; right:7px; width:9px; height:9px; border-radius:50%;
  background:#ff5a7a; border:2px solid var(--surface); }
.notif-panel{
  position:fixed; top:70px; right:24px; width:340px; max-height:440px; overflow-y:auto; z-index:300;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-pop); padding:8px; animation:popIn .16s var(--ease);
}
@keyframes popIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
.np-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px 10px; font-weight:700; font-size:15px; }
.np-head button{ font-size:12.5px; font-weight:600; color:var(--accent-2); }
.np-head button:hover{ text-decoration:underline; }
.np-empty{ padding:24px; text-align:center; color:var(--text-3); font-size:14px; }
.np-item{ display:flex; gap:12px; padding:11px 10px; border-radius:var(--r-sm); cursor:pointer; transition:background .15s var(--ease); }
.np-item:hover{ background:var(--hover); }
.np-item.unread{ background:var(--accent-soft); }
.np-ic{ width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--surface-3); color:var(--accent-2); }
.np-ic svg{ width:18px; height:18px; }
.np-tx{ min-width:0; }
.np-t{ font-size:14px; font-weight:600; }
.np-b{ font-size:12.5px; color:var(--text-3); margin-top:2px; line-height:1.4; }

/* ---------- Context menu ---------- */
.ctx-menu{
  position:fixed; z-index:300; min-width:230px; max-height:60vh; overflow-y:auto;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-pop); padding:6px; animation:popIn .14s var(--ease);
}
.ctx-menu button{ display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:9px 11px; border-radius:var(--r-xs); font-size:14px; font-weight:500; color:var(--text-2); }
.ctx-menu button:hover{ background:var(--hover); color:var(--text); }
.ctx-menu button svg{ width:18px; height:18px; flex:none; color:var(--text-3); }
.ctx-menu button:hover svg{ color:var(--accent-2); }
.ctx-menu button.danger{ color:#ff6b8a; }
.ctx-menu button.danger svg{ color:#ff6b8a; }
body.fs-open .ctx-menu, .ctx-menu.ctx-sheet{ z-index:520 !important; }
.ctx-sep{ height:1px; background:var(--line); margin:6px 8px; }
.ctx-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); padding:8px 11px 4px; font-weight:700; }

/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; z-index:400; background:rgba(8,5,16,.6); backdrop-filter:blur(6px);
  display:grid; place-items:center; animation:popIn .18s var(--ease); }
.modal{ width:min(420px,92vw); background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-pop); padding:30px 28px; position:relative; }
.modal h2{ font-size:24px; font-weight:800; letter-spacing:-0.02em; }
.modal-sub{ color:var(--text-2); font-size:14px; margin-top:8px; line-height:1.5; }
.modal-close{ position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:var(--surface-3); color:var(--text-2); }
.modal-close:hover{ color:var(--text); }
.modal-close svg{ width:18px; height:18px; }
.modal-input{ width:100%; margin-top:16px; padding:13px 16px; border-radius:var(--r-sm);
  background:var(--surface-3); border:1.5px solid transparent; color:var(--text); font-size:15px; outline:none; }
.modal-input:focus{ border-color:var(--accent); }
.modal-input::placeholder{ color:var(--text-3); }
.modal-actions{ display:flex; gap:10px; margin-top:22px; justify-content:flex-end; }
.btn-modal{ padding:12px 22px; border-radius:999px; font-weight:700; font-size:14.5px; transition:.16s var(--ease); }
.btn-modal.ghost{ color:var(--text-2); border:1px solid var(--line); }
.btn-modal.ghost:hover{ color:var(--text); border-color:var(--text-3); }
.btn-modal.primary{ background:var(--accent-grad); color:#fff; box-shadow:0 10px 24px -8px rgba(108,60,224,.6); }
.btn-modal.primary:hover{ transform:scale(1.03); }
.btn-modal.wide{ width:100%; }

/* Auth */
.auth-brand{ display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:8px; }
.auth-brand .word{ font-weight:800; font-size:24px; letter-spacing:-0.03em; }
.auth-brand .word b{ color:var(--accent-2); }
.auth-tabs{ display:flex; gap:4px; background:var(--surface-3); border-radius:999px; padding:4px; margin:18px 0 6px; }
.auth-tabs button{ flex:1; padding:10px; border-radius:999px; font-weight:600; font-size:14px; color:var(--text-3); }
.auth-tabs button.on{ background:var(--accent); color:#fff; }
.auth-err{ color:#ff6b8a; font-size:13px; margin-top:12px; font-weight:600; }
.auth-note{ color:var(--text-3); font-size:12px; margin-top:16px; text-align:center; line-height:1.5; }
.auth-links{ display:flex; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap; }
.auth-link{ background:none; border:none; color:var(--accent-2); font-size:13px; font-weight:600; cursor:pointer; padding:2px 0; }
.auth-link:hover{ text-decoration:underline; }
[hidden]{ display:none !important; }

/* Hidden YouTube engine — kept rendered (not display:none) so audio plays,
   but parked off-screen since we only use it for sound. */
#ytplayer-wrap{ position:fixed; width:1px; height:1px; left:-9999px; top:auto; bottom:0; overflow:hidden; opacity:0; pointer-events:none; }

/* YouTube source tag */
.src-tag.youtube{ background:rgba(255,0,51,.14); color:#ff6b81; }
.chip .src-dot{ box-shadow:0 0 0 0 transparent; }

/* Mobile bottom-nav / brand are hidden on desktop; mobile.css drives phone layout. */
.mtabs{ display:none; }
.tb-brand{ display:none; }


/* ---------- Текст песни + караоке ---------- */
.fs-lyrics{ padding:22px 26px 40px; overflow-y:auto; height:100%; }
.fs-lyrics::-webkit-scrollbar{ width:0; }
.lyr{
  font-size:19px; font-weight:700; line-height:1.42; margin:0 0 16px;
  color:var(--text-3); opacity:.5; cursor:pointer;
  transition: color .25s var(--ease), opacity .25s var(--ease), transform .25s var(--spring);
}
.lyr:hover{ opacity:.8; }
.lyr.past{ opacity:.28; }
/* Активная строка крупнее и светится цветом обложки — видно боковым зрением. */
.lyr.on{
  color:#fff; opacity:1; transform:scale(1.04); transform-origin:left center;
  text-shadow:0 0 22px var(--fs-tint-glow, rgba(255,255,255,.35));
}
.lyr-plain{ font-size:16px; line-height:1.7; color:var(--text-2); white-space:pre-wrap; }
.lyr-empty{ padding:40px 0; text-align:center; color:var(--text-3); font-size:14.5px; }

/* Кнопка караоке в ряду вкладок */
.fs-karaoke{
  margin-left:auto; width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center; border:none; cursor:pointer;
  background:var(--surface-3); color:var(--text-2); transition:.18s var(--ease);
}
.fs-karaoke svg{ width:18px; height:18px; }
.fs-karaoke:hover{ color:var(--text); }
.fs-karaoke.on{
  background:var(--accent); color:#fff;
  box-shadow:0 0 0 4px var(--accent-soft), 0 6px 18px -6px var(--accent);
}

/* Караоке: текст крупный и по центру — чтобы петь, глядя издалека. */
body.karaoke .fs-lyrics{ padding:30px 30px 60px; }
body.karaoke .lyr{ font-size:27px; text-align:center; margin-bottom:22px; }
body.karaoke .lyr.on{ transform:scale(1.07); transform-origin:center; }
body.karaoke .fs-left{ opacity:.35; transition:opacity .3s var(--ease); }
@media (prefers-reduced-motion: reduce){ .lyr{ transition:none; } }

/* ---------- Отзыв на тест (июль 2026) ----------
   Полоса шла рывками: обновление приходит ~4 раза в секунду, и без сглаживания
   это видно как ступеньки. Плавный переход между обновлениями скрывает их. */
.bar .fill{ transition: width .25s linear; }
.bar.dragging .fill{ transition:none; }
.np-progress .bar.wave .wave-played,
.fs-progress .bar.wave .wave-played{ transition: width .25s linear; }
.bar.wave.dragging .wave-played{ transition:none; }

/* Ручная подстройка синхронизации текста */
.lyr-sync{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:center;
  gap:10px; margin:-8px 0 18px; padding:8px 0;
  background:linear-gradient(180deg, var(--bg) 70%, transparent);
}
.lyr-sync button{
  border:1px solid var(--line); background:var(--surface-3); color:var(--text-2);
  font-family:inherit; font-size:12.5px; font-weight:700; padding:5px 11px;
  border-radius:999px; cursor:pointer; transition:.15s var(--ease);
}
.lyr-sync button:hover{ color:var(--text); border-color:var(--text-3); }
.lyr-sync button:active{ transform:scale(.94); }
.lyr-off{ font-size:12px; color:var(--text-3); min-width:72px; text-align:center; font-variant-numeric:tabular-nums; }