/* ═══════════════════════════════════════════════════════════════
   ATLAS BEATS — v4 stylesheet
   Icons never depend on theme colours alone: every accent-coloured
   icon sits on a neutral surface or uses --ink (a guaranteed-light
   colour), so they stay visible on any cover-derived theme.
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter';     src: url('../fonts/Inter.woff2') format('woff2');     font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-latin-ext.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-latin-ext-700.woff2') format('woff2'); font-weight: 600 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-cyrillic.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-cyrillic-700.woff2') format('woff2'); font-weight: 600 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ring { syntax: '<percentage>'; inherits: true; initial-value: 0%; }

:root {
  --c1: #7c3aed; --c2: #3b82f6;
  /* accent used for icons/text: JS keeps this bright enough to read on dark (never darker than L=62%) */
  --accent: #a78bfa;
  --ink: #f5f5fa; --ink-2: #c9c9dc;
  --bg: #07060d; --bg-2: #0d0a1c;
  --glass: rgba(255, 255, 255, .055); --glass-2: rgba(255, 255, 255, .1); --glass-3: rgba(255, 255, 255, .16);
  --line: rgba(255, 255, 255, .085); --line-2: rgba(255, 255, 255, .16);
  --text: #f5f5fa; --muted: #a3a3ba; --dim: #6b6b85;
  --r-xl: 30px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  --sidebar-w: 276px; --player-h: 88px; --topbar-h: 70px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .55);
  --font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-fa: 'Vazirmatn', 'Inter', system-ui, Tahoma, sans-serif;
  --font-zh: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', system-ui, sans-serif;
  --font-logo: 'Montserrat', 'Inter', system-ui, sans-serif;
  --fs: 1;
  --ease: cubic-bezier(.22, .9, .3, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-theme: 1.1s;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font-en); font-size: calc(15px * var(--fs)); line-height: 1.5; overflow-x: hidden; overflow-y: auto; }
html[lang="fa"] body, html[lang="ar"] body { font-family: var(--font-fa); }
html[lang="zh"] body { font-family: var(--font-zh); }
.num, .kbd, .mono { font-family: var(--font-en); font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; touch-action: manipulation; }
button:disabled { opacity: .4; cursor: not-allowed; }
input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: color-mix(in srgb, var(--c1) 55%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.i.sm { width: 16px; height: 16px; } svg.i.xs { width: 13px; height: 13px; } svg.i.lg { width: 26px; height: 26px; }

/* ── Ambient ───────────────────────────────────────────────── */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
.ambient .cover-bg { position: absolute; inset: -12%; background-size: cover; background-position: center; filter: blur(70px) saturate(1.5) brightness(.42); opacity: 0; transition: opacity 1.4s ease; }
body.has-art .ambient .cover-bg { opacity: .6; }
.ambient .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; will-change: transform; transition: background var(--t-theme) ease; }
.ambient .o1 { width: 60vmax; height: 60vmax; top: -25vmax; inset-inline-start: -20vmax; background: var(--c1); animation: drift1 30s ease-in-out infinite alternate; }
.ambient .o2 { width: 50vmax; height: 50vmax; bottom: -22vmax; inset-inline-end: -15vmax; background: var(--c2); opacity: .38; animation: drift2 36s ease-in-out infinite alternate; }
.ambient .vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(5, 5, 8, .75) 100%); }
@keyframes drift1 { to { transform: translate(14vmax, 12vmax) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-16vmax, -10vmax) scale(1.08); } }

/* ── Shell ─────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.main { min-width: 0; padding: 0 28px calc(var(--player-h) + 44px + env(safe-area-inset-bottom, 0px)); }

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 6px; padding: 22px 16px calc(var(--player-h) + 20px); border-inline-end: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)); overflow-y: auto; scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; }
.brand img, .brand-m img { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 8px 28px color-mix(in srgb, var(--c1) 55%, transparent); transition: box-shadow var(--t-theme), transform .4s var(--spring); }
.brand:hover img { transform: rotate(-6deg) scale(1.06); }
.wordmark { font-family: var(--font-logo); font-weight: 800; font-size: 17px; letter-spacing: 2px; line-height: 1.1; white-space: nowrap; color: var(--ink); text-transform: uppercase; }
.wordmark .wm { display: inline-flex; align-items: baseline; gap: .38em; direction: ltr; }
.wordmark .wm b { font-weight: 800; color: #fff; letter-spacing: 2.5px; }
.wordmark .wm i { font-style: normal; font-weight: 600; letter-spacing: 3px; background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c2) 40%, transparent)); transition: filter var(--t-theme); }
.wordmark.xl { font-size: clamp(26px, 5vw, 44px); }
.wordmark small { display: block; margin-top: 5px; font-family: var(--font-en); font-weight: 600; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); }
html[lang="fa"] .wordmark small { font-family: var(--font-fa); letter-spacing: 0; font-size: 11px; }
html[lang="ar"] .wordmark small { font-family: var(--font-fa); letter-spacing: 0; font-size: 11px; }

.nav { display: grid; gap: 3px; }
.nav-item { display: flex; align-items: center; gap: 12px; height: 44px; padding-inline: 12px; border-radius: 13px; color: var(--muted); font-weight: 600; font-size: 14px; transition: background .2s, color .2s, transform .15s; text-align: start; position: relative; }
.nav-item:hover { background: var(--glass); color: var(--text); }
.nav-item:active { transform: scale(.98); }
.nav-item.active { color: var(--text); background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 26%, transparent), color-mix(in srgb, var(--c2) 10%, transparent)); }
.nav-item.active::before { content: ''; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), #fff); }
.nav-item .i { color: var(--dim); transition: color .2s; }
.nav-item.active .i { color: var(--ink); } .nav-item:hover .i { color: var(--ink-2); }
.nav-item .cnt { margin-inline-start: auto; font-size: 11px; font-weight: 700; color: var(--dim); background: var(--glass); padding: 2px 8px; border-radius: 999px; }
.nav-item.active .cnt { color: var(--text); background: rgba(255, 255, 255, .14); }

.side-block { margin-top: 14px; }
.side-block h4 { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--dim); font-weight: 700; padding: 0 12px 8px; display: flex; align-items: center; gap: 7px; }
html[lang="fa"] .side-block h4 { letter-spacing: 0; font-size: 12px; }
html[lang="ar"] .side-block h4 { letter-spacing: 0; font-size: 12px; }
.side-list { display: grid; gap: 3px; }
.side-st { display: flex; align-items: center; gap: 10px; height: 48px; padding-inline: 8px; border-radius: 13px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s, transform .15s; text-align: start; min-width: 0; }
.side-st:hover { background: var(--glass); color: var(--text); transform: translateX(var(--nudge, 2px)); }
html[dir="rtl"] .side-st { --nudge: -2px; }
.side-st.active { color: var(--text); background: var(--glass); }
.side-st .cv { position: relative; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg, var(--s1), var(--s2)); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.side-st .cv img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.side-st .cv img.loaded { opacity: 1; }
.side-st .cv .i { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.side-st .cv img.loaded ~ .i { opacity: 0; }
.side-st .tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.side-st .n { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.side-st .s { display: block; font-size: 11px; color: var(--dim); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.side-st.active .s { color: var(--muted); }
.side-st .bars { display: none; color: var(--ink); }
.side-st.active.is-playing .bars { display: flex; }
.side-foot { margin-top: auto; padding-top: 14px; display: grid; gap: 8px; }
.side-stat { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); text-align: start; transition: background .2s; }
.side-stat:hover { background: var(--glass-2); }
.side-stat .v { font-weight: 800; font-size: 15px; } .side-stat .k { font-size: 11px; color: var(--muted); }
.side-stat .i { color: var(--ink); }

/* ── Topbar ────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; height: var(--topbar-h); margin-inline: -28px; padding-inline: 28px;
  background: color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color .3s; }
.topbar.scrolled { border-bottom-color: var(--line); }
.brand-m { display: none; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-m img { width: 38px; height: 38px; border-radius: 11px; }
.brand-m .wordmark { font-size: 15px; }
.search { flex: 1; max-width: 560px; position: relative; margin-inline-end: auto; }
.search input { width: 100%; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); padding-inline: 44px 40px; outline: none; transition: border-color .25s, background .25s, box-shadow .25s; -webkit-appearance: none; appearance: none; }
.search input::-webkit-search-cancel-button { display: none; }
.search input:focus { border-color: var(--line-2); background: var(--glass-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.search input::placeholder { color: var(--dim); }
.search .ic { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search .clear { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 8px; display: none; place-items: center; color: var(--muted); }
.search .clear:hover { background: var(--glass-2); color: var(--text); }
.search.has-value .clear { display: grid; }
.search .kbd-hint { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); }
.search.has-value .kbd-hint, .search:focus-within .kbd-hint { display: none; }
.top-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.icon-btn { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); transition: background .2s, color .2s, transform .15s; position: relative; }
.icon-btn:hover { background: var(--glass-2); color: var(--text); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.active { color: var(--ink); background: var(--glass-2); }
.icon-btn .dot { position: absolute; top: 7px; inset-inline-end: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); display: none; }
.icon-btn.has-dot .dot { display: block; }
.lang-btn { width: auto; padding-inline: 12px; font-weight: 800; font-size: 12px; letter-spacing: .5px; gap: 6px; display: inline-flex; align-items: center; border: 1px solid var(--line); }
.install-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding-inline: 14px; border-radius: 13px; font-weight: 700; font-size: 13px; color: #0b0b12; background: linear-gradient(135deg, #fff, #dfe6ff); box-shadow: 0 8px 24px rgba(255, 255, 255, .12); }
.topbar .install-btn { display: none; }

/* ── Stage ─────────────────────────────────────────────────── */
.stage { position: relative; margin-top: 10px; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); isolation: isolate; box-shadow: var(--shadow); }
.stage-bg { position: absolute; inset: -60px; z-index: -3; background-size: cover; background-position: center; filter: blur(48px) saturate(1.7) brightness(.55); opacity: 0; transition: opacity 1.2s ease; transform: translateZ(0); }
body.has-art .stage-bg { opacity: .85; }
.stage-tint { position: absolute; inset: 0; z-index: -2; transition: background var(--t-theme); background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 34%, transparent), transparent 45%, color-mix(in srgb, var(--c2) 22%, transparent)), linear-gradient(180deg, rgba(5, 5, 8, .1), rgba(5, 5, 8, .82)); }
.stage-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .5; will-change: transform; transition: background var(--t-theme); }
.stage-blob.b1 { width: 380px; height: 380px; top: -120px; inset-inline-end: 8%; background: var(--c1); animation: blob1 18s ease-in-out infinite alternate; }
.stage-blob.b2 { width: 300px; height: 300px; bottom: -120px; inset-inline-start: 30%; background: var(--c2); opacity: .35; animation: blob2 22s ease-in-out infinite alternate; }
@keyframes blob1 { to { transform: translate(-80px, 60px) scale(1.15); } }
@keyframes blob2 { to { transform: translate(120px, -40px) scale(1.1); } }
.stage-in { position: relative; display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 20px; padding: 26px 40px 10px 26px; align-items: center; }
html[dir="rtl"] .stage-in { padding: 26px 26px 10px 40px; }

.disc-wrap { position: relative; width: 440px; height: 440px; margin-inline: auto; display: grid; place-items: center; }
.disc-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.disc-glow { position: absolute; width: 62%; height: 62%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c2) 55%, transparent), transparent 70%); filter: blur(24px); opacity: .35; transform: scale(var(--pulse, 1)); transition: background var(--t-theme); pointer-events: none; }
.disc { position: relative; width: 60%; height: 60%; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 5px rgba(255, 255, 255, .06), 0 0 70px color-mix(in srgb, var(--c1) 40%, transparent);
  animation: spin 26s linear infinite; animation-play-state: paused; transition: box-shadow var(--t-theme); }
body.playing .disc { animation-play-state: running; }
html.reduce-motion .disc { animation: none; }
.disc img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s; }
.disc img.loaded { opacity: 1; }
.disc .ph { position: absolute; inset: 0; display: grid; place-items: center; }
.disc .ph img { width: 100%; height: 100%; opacity: 1; }
.disc img.loaded ~ .ph { display: none; }
.disc .shine { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 255, 255, .14) 27%, transparent 34%, transparent 60%, rgba(255, 255, 255, .08) 68%, transparent 75%); pointer-events: none; }
.disc .rim { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), inset 0 0 40px rgba(0, 0, 0, .35); pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.disc-state { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.disc-state .spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .18); border-top-color: #fff; animation: rot .9s linear infinite; opacity: 0; transition: opacity .3s; }
body.is-loading .disc-state .spinner { opacity: 1; }
@keyframes rot { to { transform: rotate(360deg); } }

.stage-meta { min-width: 0; padding-block: 10px; }
.badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.badge { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding-inline: 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); color: var(--ink); }
.badge .i { color: var(--ink); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: pulseG 1.8s infinite; flex-shrink: 0; }
@keyframes pulseG { 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.badge.live-count { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .35); color: #d1fae5; }
.badge.live-count .num { font-size: 13px; transition: transform .3s var(--spring); display: inline-block; }
.badge.live-count .num.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.35); } }
.side-stat.presence { background: rgba(52, 211, 153, .08); border-color: rgba(52, 211, 153, .25); }
.side-stat.presence .v { color: #d1fae5; }
.nav-item.nav-ig { margin-top: 6px; color: var(--text); background: linear-gradient(90deg, rgba(236, 72, 153, .16), rgba(168, 85, 247, .1)); border: 1px solid rgba(236, 72, 153, .25); }
.nav-item.nav-ig .i { color: #f9a8d4; }
.nav-item .cnt.new { background: linear-gradient(135deg, #ec4899, #a855f7); color: #fff; font-size: 9px; letter-spacing: .5px; }
.ig-btn { width: auto; padding-inline: 12px; gap: 7px; display: inline-flex; font-weight: 700; font-size: 12px; color: #fff; background: linear-gradient(135deg, #f43f5e, #d946ef 55%, #8b5cf6); box-shadow: 0 8px 22px rgba(217, 70, 239, .3); }
.ig-btn:hover { filter: brightness(1.1); background: linear-gradient(135deg, #f43f5e, #d946ef 55%, #8b5cf6); color: #fff; }
.badge.live { background: rgba(239, 68, 68, .16); border-color: rgba(239, 68, 68, .4); color: #fecaca; }
.badge.live .pulse { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .7); } 70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.badge.station { background: color-mix(in srgb, var(--c1) 26%, rgba(0, 0, 0, .3)); border-color: color-mix(in srgb, var(--c1) 50%, transparent); }
.st-title { font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; line-height: 1.12; letter-spacing: -.6px; white-space: nowrap; overflow: hidden; text-shadow: 0 6px 30px rgba(0, 0, 0, .4); }
.st-title .marquee { display: inline-block; white-space: nowrap; }
.st-title .marquee.run { animation: marquee var(--mq-dur, 12s) linear infinite; padding-inline-end: 60px; }
@keyframes marquee { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(calc(-1 * var(--mq-dist, 0px))); } }
html[dir="rtl"] .st-title .marquee.run { animation-name: marqueeRtl; }
@keyframes marqueeRtl { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(var(--mq-dist, 0px)); } }
.st-artist { font-size: clamp(16px, 1.7vw, 21px); color: var(--ink-2); margin-top: 8px; font-weight: 500; overflow-wrap: anywhere; }
.st-album { font-size: 13px; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.progress { margin-top: 20px; }
.progress .bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.progress .fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #fff, var(--accent)); transition: width 1s linear; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent); }
html[dir="rtl"] .progress .fill { background: linear-gradient(-90deg, #fff, var(--accent)); }
.progress .times { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); margin-top: 7px; }

.controls { display: flex; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.ctl { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: rgba(255, 255, 255, .08); border: 1px solid var(--line); transition: background .2s, transform .15s, color .2s, border-color .2s; }
.ctl:hover { background: rgba(255, 255, 255, .15); }
.ctl:active { transform: scale(.92); }
.ctl.on { color: var(--ink); border-color: var(--line-2); background: rgba(255, 255, 255, .18); }
.ctl.on::after { content: ''; position: absolute; } 
.ctl.fav.on { color: #fb7185; border-color: rgba(251, 113, 133, .45); background: rgba(251, 113, 133, .14); }
.ctl.fav.on .i { fill: currentColor; }
.ctl.fav.burst .i { animation: heartBurst .5s var(--ease); }
@keyframes heartBurst { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.ctl.big { width: 74px; height: 74px; border: 0; color: #0b0b12; background: linear-gradient(135deg, #fff, #e6e9ff); box-shadow: 0 16px 44px rgba(255, 255, 255, .18), 0 10px 30px color-mix(in srgb, var(--c2) 35%, transparent); }
.ctl.big:hover { transform: scale(1.05); } .ctl.big:active { transform: scale(.95); }
.ctl.big .i { width: 30px; height: 30px; }
.ctl.big .i-play, .ctl.big .i-pause, .ctl.big .i-load { display: none; }
.ctl.big[data-state="idle"] .i-play, .ctl.big[data-state="paused"] .i-play { display: block; margin-inline-start: 3px; }
html[dir="rtl"] .ctl.big[data-state="idle"] .i-play, html[dir="rtl"] .ctl.big[data-state="paused"] .i-play { margin-inline-start: 0; margin-inline-end: 3px; }
.ctl.big[data-state="playing"] .i-pause { display: block; }
.ctl.big[data-state="loading"] .i-load { display: block; animation: rot 1s linear infinite; }
.ctl.big.loading { animation: ringPulse 1.2s ease-out infinite; }
@keyframes ringPulse { 0% { box-shadow: 0 16px 44px rgba(255, 255, 255, .18), 0 0 0 0 rgba(255, 255, 255, .3); } 100% { box-shadow: 0 16px 44px rgba(255, 255, 255, .18), 0 0 0 20px rgba(255, 255, 255, 0); } }
.ctl-sep { width: 1px; height: 26px; background: var(--line-2); margin-inline: 4px; }
.status-line { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--ink-2); min-height: 22px; flex-wrap: wrap; }
.status-line.err { color: #fca5a5; }

/* Sleep chip (in status line) — animated ring countdown */
.chip-sleep { display: none; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); color: var(--ink); font-size: 12px; font-weight: 700; }
html[dir="rtl"] .chip-sleep { padding: 4px 6px 4px 12px; }
.chip-sleep.show { display: inline-flex; animation: chipIn .5s var(--spring); }
@keyframes chipIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.chip-sleep .ring { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) var(--ring, 0%), rgba(255, 255, 255, .15) 0); position: relative; }
.chip-sleep .ring::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #0b0b14; }
.chip-sleep .ring .i { position: relative; z-index: 1; width: 10px; height: 10px; color: var(--ink); }

/* Up next / history */
.stage-side { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 26px 24px; }
.mini { background: rgba(5, 5, 8, .38); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; min-width: 0; }
.mini h4 { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); font-weight: 700; display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
html[lang="fa"] .mini h4 { letter-spacing: 0; font-size: 12px; }
html[lang="ar"] .mini h4 { letter-spacing: 0; font-size: 12px; }
.track { display: flex; align-items: center; gap: 12px; min-width: 0; }
.track + .track { margin-top: 9px; }
.track .th { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; object-fit: cover; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.track .tx { min-width: 0; flex: 1; }
.track .t { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track .a { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track .w { font-size: 11px; color: var(--dim); flex-shrink: 0; }
.track.empty { color: var(--dim); font-size: 13px; border: 0; padding: 6px 0; grid-column: auto; text-align: start; background: none; }

/* ── Ticker ────────────────────────────────────────────────── */
.ticker-wrap { display: flex; align-items: stretch; margin-top: 16px; height: 44px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); overflow: hidden; }
.ticker-label { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding-inline: 14px; font-weight: 800; font-size: 11px; letter-spacing: 2px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 80%, #000), color-mix(in srgb, var(--c2) 70%, #000)); transition: background var(--t-theme); }
html[lang="fa"] .ticker-label { letter-spacing: 0; font-size: 12px; }
html[lang="ar"] .ticker-label { letter-spacing: 0; font-size: 12px; }
.ticker-label .pulse { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulseW 1.4s infinite; }
@keyframes pulseW { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.ticker { flex: 1; min-width: 0; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.ticker-track { display: flex; width: max-content; height: 100%; animation: tick var(--dur, 120s) linear infinite; will-change: transform; }
html[dir="rtl"] .ticker-track { animation-name: tickRtl; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes tickRtl { to { transform: translateX(50%); } }
.tick { display: inline-flex; align-items: center; gap: 8px; padding-inline: 16px; height: 100%; white-space: nowrap; font-size: 13px; color: var(--muted); border-inline-end: 1px solid var(--line); transition: color .2s, background .2s; }
.tick:hover { color: var(--text); background: var(--glass); }
.tick b { color: var(--text); font-weight: 700; }
.tick.active, .tick.active b { color: var(--ink); }
.tick.active { background: var(--glass-2); }

/* ── Instagram song finder ─────────────────────────────────── */
.ig-result, .ig-card, .ig-manual { scroll-margin-top: 96px; scroll-margin-bottom: 120px; }
.ig { position: relative; scroll-margin-top: 84px; margin-top: 26px; border-radius: var(--r-xl); border: 1px solid var(--line); overflow: hidden; padding: 24px 26px 22px; background: var(--bg-2); isolation: isolate; box-shadow: var(--shadow); }
.ig::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 0% 0%, rgba(244, 63, 94, .22), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(139, 92, 246, .22), transparent 60%), linear-gradient(120deg, rgba(217, 70, 239, .08), transparent 50%); }
.ig::after { content: ''; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; background: conic-gradient(from 0deg, #f43f5e, #d946ef, #8b5cf6, #22d3ee, #f43f5e); opacity: .25; filter: blur(30px); }
.ig-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.ig-title { display: flex; align-items: center; gap: 14px; }
.ig-title h2 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.ig-title p { font-size: 13px; color: var(--muted); margin-top: 3px; max-width: 520px; }
.ig-badge { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #f9ce34, #ee2a7b 50%, #6228d7); box-shadow: 0 12px 30px rgba(238, 42, 123, .35); flex-shrink: 0; animation: igGlow 3s ease-in-out infinite; }
.ig-badge .i { width: 26px; height: 26px; }
@keyframes igGlow { 0%, 100% { box-shadow: 0 12px 30px rgba(238, 42, 123, .35); } 50% { box-shadow: 0 12px 40px rgba(98, 40, 215, .5); } }
.ig-steps { display: flex; gap: 8px; flex-wrap: wrap; }
.ig-steps > span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
html[dir="rtl"] .ig-steps > span { padding: 6px 6px 6px 12px; }
.ig-steps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #0b0b12; background: #fff; }
.ig-form { display: flex; gap: 10px; }
.ig-input { flex: 1; position: relative; min-width: 0; }
.ig-input > .i { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ig-input input { width: 100%; height: 56px; border-radius: 18px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .35); padding-inline: 48px 52px; font-size: 15px; outline: none; transition: border-color .25s, box-shadow .25s, background .25s; text-align: left; }
.ig-input input:focus { border-color: rgba(217, 70, 239, .6); box-shadow: 0 0 0 4px rgba(217, 70, 239, .18); background: rgba(0, 0, 0, .5); }
.ig-input input::placeholder { color: var(--dim); }
.ig-input input.bad { border-color: rgba(239, 68, 68, .6); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.ig-paste { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); }
.ig-paste:hover { background: var(--glass-2); color: var(--text); }
.ig-go { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding-inline: 26px; border-radius: 18px; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, #f43f5e, #d946ef 55%, #8b5cf6); background-size: 200% 200%; box-shadow: 0 14px 34px rgba(217, 70, 239, .35); transition: transform .2s, box-shadow .2s, filter .2s; overflow: hidden; white-space: nowrap; }
.ig-go:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(217, 70, 239, .45); filter: brightness(1.08); }
.ig-go:active { transform: scale(.97); }
.ig-go .ld { display: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: rot .8s linear infinite; }
.ig-go.busy { pointer-events: none; animation: gradShift 2s ease infinite; } .ig-go.busy .i { display: none; } .ig-go.busy .ld { display: block; }
@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.ig-status { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); animation: rowIn .4s var(--ease); }
.ig-wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.ig-wave i { width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #f9a8d4, #a855f7); animation: eqb .9s ease-in-out infinite; transform-origin: center; }
.ig-wave i:nth-child(1) { animation-delay: -.1s; } .ig-wave i:nth-child(2) { animation-delay: -.4s; } .ig-wave i:nth-child(3) { animation-delay: -.2s; } .ig-wave i:nth-child(4) { animation-delay: -.6s; } .ig-wave i:nth-child(5) { animation-delay: -.3s; }
.ig-result { margin-top: 16px; animation: rowIn .5s var(--ease); }
.ig-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 18px; border-radius: 22px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); position: relative; overflow: hidden; }
.ig-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 100% at 0% 50%, rgba(217, 70, 239, .15), transparent 60%); pointer-events: none; }
.ig-cover { position: relative; width: 150px; height: 150px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.ig-cover img { width: 100%; height: 100%; object-fit: cover; }
.ig-cover .pv { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .25); opacity: 0; transition: opacity .2s; cursor: pointer; }
.ig-cover:hover .pv, .ig-cover.playing .pv { opacity: 1; }
.ig-cover .pv span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #0b0b12; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.ig-cover .pv .i-pause { display: none; } .ig-cover.playing .pv .i-pause { display: block; } .ig-cover.playing .pv .i-play { display: none; }
.ig-cover .ring { position: absolute; inset: 0; border-radius: 18px; background: conic-gradient(#fff var(--p, 0%), transparent 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 3px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.ig-cover.playing .ring { opacity: 1; }
.ig-meta { min-width: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.ig-found { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #6ee7b7; }
html[lang="fa"] .ig-found { letter-spacing: 0; font-size: 12px; }
html[lang="ar"] .ig-found { letter-spacing: 0; font-size: 12px; }
.ig-found.med { color: #fcd34d; } .ig-found.low { color: #fca5a5; }
.ig-found .i { width: 14px; height: 14px; }
.ig-song { font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; line-height: 1.15; letter-spacing: -.4px; overflow-wrap: anywhere; }
.ig-artist { font-size: 16px; color: var(--ink-2); font-weight: 500; }
.ig-sub { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ig-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ig-actions .btn { height: 42px; padding-inline: 14px; font-size: 13px; border-radius: 12px; }
.ig-actions .btn.dl { color: #fff; background: linear-gradient(135deg, #22c55e, #06b6d4); border: 0; box-shadow: 0 8px 22px rgba(34, 197, 94, .3); }
.ig-actions .btn.dl:disabled { opacity: .55; }
.ig-dl-prog { display: none; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.ig-dl-prog.show { display: flex; }
.ig-dl-prog .bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; min-width: 120px; }
.ig-dl-prog .bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #22c55e, #06b6d4); transition: width .4s; }
.ig-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.ig-links a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 11px; border-radius: 999px; font-weight: 700; font-size: 12px; color: var(--text); background: var(--glass); border: 1px solid var(--line); transition: background .2s, transform .15s; }
.ig-links a:hover { background: var(--glass-2); transform: translateY(-1px); }
.ig-links a.sp { color: #86efac; } .ig-links a.yt { color: #fca5a5; } .ig-links a.ap { color: #f9a8d4; } .ig-links a.sc { color: #fdba74; }
.ig-alt { margin-top: 12px; }
.ig-alt h4 { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim); font-weight: 700; margin: 0 4px 8px; }
html[lang="fa"] .ig-alt h4 { letter-spacing: 0; font-size: 12px; }
html[lang="ar"] .ig-alt h4 { letter-spacing: 0; font-size: 12px; }
.ig-alt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ig-alt-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); text-align: start; min-width: 0; transition: background .2s, transform .15s; }
.ig-alt-item:hover { background: var(--glass-2); transform: translateY(-1px); }
.ig-alt-item img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--glass-2); }
.ig-alt-item .tx { min-width: 0; display: grid; gap: 1px; } .ig-alt-item .t { display: block; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ig-alt-item .a { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-manual { display: flex; gap: 8px; margin-top: 12px; }
.ig-manual input { flex: 1; height: 44px; border-radius: 13px; border: 1px solid var(--line); background: var(--glass); padding-inline: 14px; outline: none; min-width: 0; }
.ig-manual input:focus { border-color: var(--line-2); }
.ig-empty { display: grid; gap: 8px; padding: 22px; border-radius: 18px; background: rgba(0, 0, 0, .3); border: 1px dashed var(--line-2); text-align: center; }
.ig-empty .big { font-size: 34px; } .ig-empty b { font-size: 16px; } .ig-empty p { font-size: 13px; color: var(--muted); max-width: 520px; margin-inline: auto; }
.ig-post { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.ig-post img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }

/* ── Browse ────────────────────────────────────────────────── */
.browse { margin-top: 26px; }
.chips { display: none; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding-inline: 14px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--muted); background: var(--glass); border: 1px solid var(--line); transition: all .2s; white-space: nowrap; }
.chip.active { color: #0b0b12; background: #fff; border-color: transparent; box-shadow: 0 8px 22px rgba(255, 255, 255, .15); }
.chip .cnt { font-size: 11px; opacity: .7; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 0 14px; }
.section-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; }
.section-head h2 .i { color: var(--ink); }
.section-head .hint { font-size: 12px; color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; }
.card { --s1: var(--c1); --s2: var(--c2); position: relative; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--line); overflow: hidden; cursor: pointer; text-align: start; padding: 0; width: 100%; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s; animation: cardIn .45s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (hover: hover) { .card:hover { transform: translateY(-5px); background: var(--glass-2); box-shadow: 0 22px 50px rgba(0, 0, 0, .5); border-color: color-mix(in srgb, var(--s1) 50%, var(--line)); } }
.card.active { border-color: transparent; box-shadow: 0 18px 50px color-mix(in srgb, var(--s1) 28%, transparent); }
.card.active::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; z-index: 3; pointer-events: none; background: conic-gradient(from var(--spin), var(--s1), var(--s2), #fff, var(--s1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinBorder 3s linear infinite; }
@keyframes spinBorder { to { --spin: 360deg; } }
.card .art { position: relative; aspect-ratio: 1.2; background: linear-gradient(135deg, var(--s1), var(--s2)); overflow: hidden; }
.card .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s, transform .6s var(--ease); }
.card .art img.loaded { opacity: 1; }
@media (hover: hover) { .card:hover .art img { transform: scale(1.06); } }
.card .art .em { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); transition: opacity .4s; }
.card .art img.loaded ~ .em { opacity: 0; }
.card .art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 8, .05) 35%, rgba(5, 5, 8, .9)); }
.card .pill { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding-inline: 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(5, 5, 8, .62); color: #fff; }
.card .pill .i { width: 12px; height: 12px; }
.card .pick { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; height: 24px; padding-inline: 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .6px; display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, var(--s1), var(--s2)); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.card .pick ~ .pill { top: auto; bottom: 12px; inset-inline-start: 12px; }
.card.active.is-playing .pick ~ .pill { display: none; }
.card .fav-btn { position: absolute; top: 6px; inset-inline-end: 6px; z-index: 3; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: rgba(255, 255, 255, .85); background: rgba(5, 5, 8, .5); transition: transform .2s, color .2s, background .2s; }
.card .fav-btn:hover { transform: scale(1.1); background: rgba(5, 5, 8, .75); }
.card .fav-btn.on { color: #fb7185; } .card .fav-btn.on .i { fill: currentColor; } .card .fav-btn .i { width: 16px; height: 16px; }
.card .go { position: absolute; inset-inline-end: 12px; bottom: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #0b0b12; background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(8px); transition: all .3s var(--ease); }
@media (hover: hover) { .card:hover .go { opacity: 1; transform: none; } }
.card.active .go { opacity: 1; transform: none; }
.card .go .i-pause { display: none; }
.card.active.is-playing .go .i-pause { display: block; } .card.active.is-playing .go .i-play { display: none; }
.card .eqb { position: absolute; bottom: 14px; inset-inline-start: 14px; z-index: 2; display: none; }
.card.active.is-playing .eqb { display: flex; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.bars i { width: 3px; background: currentColor; border-radius: 2px; animation: eqb 1s ease-in-out infinite; transform-origin: bottom; }
.bars i:nth-child(1) { height: 60%; animation-delay: -.2s; } .bars i:nth-child(2) { height: 100%; animation-delay: -.6s; } .bars i:nth-child(3) { height: 45%; animation-delay: -.4s; } .bars i:nth-child(4) { height: 80%; animation-delay: -.8s; }
@keyframes eqb { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.card .eqb .bars { color: #fff; filter: drop-shadow(0 0 6px #fff); }
.card .body { padding: 12px 14px 14px; }
.card .name { font-weight: 800; font-size: 15px; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.card .name .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .name .sub { font-weight: 500; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .now { margin-top: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 18px; }
.card .now b { color: var(--text); font-weight: 600; }
.card .desc { margin-top: 2px; font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.compact .grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
body.compact .card .art { aspect-ratio: 1.45; } body.compact .card .desc { display: none; } body.compact .card .body { padding: 9px 12px 11px; } body.compact .card .name { font-size: 14px; }
body.no-ambient .ambient .cover-bg, body.no-ambient .ambient .orb { display: none; }
.empty { grid-column: 1 / -1; text-align: center; padding: 50px 20px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.empty .big { font-size: 40px; margin-bottom: 8px; }

/* ── Player bar ────────────────────────────────────────────── */
.player { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 10px); transform: translateY(130%); transition: transform .6s var(--ease); pointer-events: none; }
.player.show { transform: none; pointer-events: auto; }
.player-in { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr); align-items: center; gap: 14px; height: var(--player-h); padding: 0 18px; border-radius: 24px; width: min(1180px, 100%); margin-inline: auto;
  background: color-mix(in srgb, var(--bg-2) 84%, transparent); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border: 1px solid var(--line); box-shadow: 0 -8px 40px rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .45); }
.player-in::before { content: ''; position: absolute; inset: 0; pointer-events: none; transition: background var(--t-theme); background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 18%, transparent), transparent 45%, color-mix(in srgb, var(--c2) 12%, transparent)); }
.pl-prog { position: absolute; top: 0; inset-inline: 0; height: 3px; background: rgba(255, 255, 255, .08); }
.pl-prog i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #fff, var(--accent)); transition: width 1s linear; }
.pl-left { display: flex; align-items: center; gap: 12px; min-width: 0; position: relative; cursor: pointer; }
.pl-cover { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--c1), var(--c2)); position: relative; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.pl-cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.pl-cover img.loaded { opacity: 1; }
.pl-cover .ph { position: absolute; inset: 0; display: grid; place-items: center; }
.pl-cover .ph img { opacity: 1; }
.pl-cover > img.loaded ~ .ph { display: none; }
.pl-txt { min-width: 0; }
.pl-station { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); font-weight: 800; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[lang="fa"] .pl-station { letter-spacing: 0; font-size: 11px; }
html[lang="ar"] .pl-station { letter-spacing: 0; font-size: 11px; }
.pl-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-artist { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-center { display: flex; align-items: center; gap: 8px; position: relative; }
.pl-center .ctl { width: 40px; height: 40px; }
.pl-center .ctl.big { width: 56px; height: 56px; } .pl-center .ctl.big .i { width: 24px; height: 24px; }
.pl-right { display: flex; align-items: center; justify-content: flex-end; gap: 2px; position: relative; }
.pl-right .icon-btn { width: 38px; height: 38px; }
.vol { display: flex; align-items: center; gap: 6px; }
.vol input[type=range] { width: 110px; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #fff var(--p, 80%), rgba(255, 255, 255, .15) var(--p, 80%)); outline: none; cursor: pointer; margin: 0; }
html[dir="rtl"] input[type=range] { background: linear-gradient(-90deg, #fff var(--p, 80%), rgba(255, 255, 255, .15) var(--p, 80%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); transition: transform .15s; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.pl-fav-m { display: none; }

/* ── Mini player: ATLAS-branded floating window ───────────── */
.mini-player { position: fixed; z-index: 80; width: 372px; max-width: calc(100vw - 12px); border-radius: 20px; isolation: isolate; overflow: hidden; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 92%, var(--c1) 8%), color-mix(in srgb, var(--bg) 96%, var(--c2) 4%)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .3s, transform .45s var(--spring), box-shadow .2s; }
.mini-player.show { opacity: 1; transform: none; }
.mini-player.dragging { transition: none; box-shadow: 0 40px 100px rgba(0, 0, 0, .8), 0 0 0 1px color-mix(in srgb, var(--c1) 60%, transparent); }
.mini-player::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: background var(--t-theme); background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--c1) 22%, transparent), transparent 55%), radial-gradient(80% 100% at 0% 100%, color-mix(in srgb, var(--c2) 16%, transparent), transparent 55%); }
/* title bar */
.mp-bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 6px 0 12px; cursor: grab; touch-action: none; position: relative; background: rgba(0, 0, 0, .28); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.mp-bar::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--c1), var(--c2), transparent); opacity: .7; }
.mp-bar:active, .dragging .mp-bar { cursor: grabbing; }
.mp-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mp-brand img { width: 20px; height: 20px; border-radius: 6px; pointer-events: none; }
.mp-brand .wm { display: inline-flex; gap: .3em; direction: ltr; font-family: var(--font-logo); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; }
.mp-brand .wm b { font-weight: 800; color: #fff; } .mp-brand .wm i { font-style: normal; font-weight: 600; background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mp-live { display: none; align-items: center; gap: 5px; font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #fecaca; padding: 2px 7px; border-radius: 999px; background: rgba(239, 68, 68, .18); border: 1px solid rgba(239, 68, 68, .35); }
.mp-live i { width: 5px; height: 5px; border-radius: 50%; background: #ef4444; animation: pulseR 1.4s infinite; }
@keyframes pulseR { 50% { opacity: .3; } }
.is-playing .mp-live { display: inline-flex; }
.mp-eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; margin-inline-start: auto; opacity: 0; transition: opacity .3s; }
.mp-eq i { width: 3px; height: 30%; border-radius: 2px; background: linear-gradient(180deg, var(--c2), var(--c1)); }
.is-playing .mp-eq { opacity: 1; } .is-playing .mp-eq i { animation: eqb 1s ease-in-out infinite; }
.is-playing .mp-eq i:nth-child(2) { animation-delay: -.4s; } .is-playing .mp-eq i:nth-child(3) { animation-delay: -.2s; } .is-playing .mp-eq i:nth-child(4) { animation-delay: -.7s; }
.mp-win { display: flex; align-items: center; gap: 2px; }
.mp-wbtn { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); transition: background .18s, color .18s, transform .15s; }
.mp-wbtn .i { width: 14px; height: 14px; }
.mp-wbtn:hover { background: rgba(255, 255, 255, .1); color: #fff; } .mp-wbtn:active { transform: scale(.9); }
.mp-wbtn.close:hover { background: #ef4444; color: #fff; }
.mp-wbtn.pin { display: none; } .mp-wbtn.pin.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mini-player.in-pip .mp-wbtn.pin { display: grid; }
/* body */
.mp-body { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 12px 8px 12px; }
.mp-cover { position: relative; width: 72px; height: 72px; cursor: pointer; touch-action: pan-y; }
.mp-cover img { position: absolute; inset: 8px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 22px rgba(0, 0, 0, .55), 0 0 0 2px rgba(255, 255, 255, .08); pointer-events: none; }
.mp-cover::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #0b0b12; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
.mp-cover.spin img { animation: spin 14s linear infinite; }
.mp-viz { position: absolute; inset: 0; width: 72px; height: 72px; pointer-events: none; }
.mp-txt { min-width: 0; cursor: pointer; align-self: center; }
.mp-title { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.2px; }
.mp-title span { display: inline-block; white-space: nowrap; }
.mp-title.run { text-overflow: clip; } .mp-title.run span { animation: mpScroll var(--mq-dur, 10s) ease-in-out infinite alternate; }
@keyframes mpScroll { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(calc(var(--mq-dir, -1) * var(--mq-dist, 0px))); } }
html[dir="rtl"] .mp-title, [dir="rtl"] .mp-title { --mq-dir: 1; }
.mp-artist { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mp-station { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[lang="fa"] .mp-station, [lang="fa"] .mp-station { letter-spacing: 0; font-size: 11px; }
html[lang="ar"] .mp-station, [lang="fa"] .mp-station { letter-spacing: 0; font-size: 11px; }
.mp-ctl { display: flex; align-items: center; gap: 4px; }
.mp-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background .2s, transform .15s, color .2s; position: relative; }
.mp-btn:hover { background: rgba(255, 255, 255, .1); } .mp-btn:active { transform: scale(.9); }
.mp-btn .i { width: 18px; height: 18px; }
.mp-btn.big { width: 46px; height: 46px; background: #fff; color: #0b0b12; box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 4px color-mix(in srgb, var(--c1) 18%, transparent); }
.mp-btn.big:hover { background: #fff; transform: scale(1.06); } .mp-btn.big:active { transform: scale(.94); }
.mp-btn.big .i { width: 20px; height: 20px; }
.mp-btn.big .i-pause, .mp-btn.big .i-load { display: none; }
.mp-btn.big[data-state="playing"] .i-play { display: none; } .mp-btn.big[data-state="playing"] .i-pause { display: block; }
.mp-btn.big.loading .i-play, .mp-btn.big.loading .i-pause { display: none; } .mp-btn.big.loading .i-load { display: block; animation: rot .9s linear infinite; }
.mp-btn.sm { width: 30px; height: 30px; color: var(--muted); } .mp-btn.sm .i { width: 16px; height: 16px; } .mp-btn.sm:hover { color: #fff; }
.mp-btn.sm.on { color: #fb7185; } .mp-btn.sm.active { color: var(--accent); }
/* footer: progress + tools */
.mp-foot { position: relative; display: flex; align-items: center; gap: 2px; padding: 8px 10px 8px; background: rgba(0, 0, 0, .22); border-top: 1px solid rgba(255, 255, 255, .05); }
.mp-prog { position: absolute; top: -1px; inset-inline: 0; height: 2px; background: rgba(255, 255, 255, .08); }
.mp-prog i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--c2), var(--c1), #fff); transition: width 1s linear; box-shadow: 0 0 8px var(--c2); }
.mp-vol { flex: 1; min-width: 40px; margin-inline: 6px; height: 4px; }
.mp-time { font-size: 10.5px; color: var(--dim); min-width: 34px; text-align: center; }
/* collapsed = just the bar + a thin strip */
.mini-player.collapsed .mp-body, .mini-player.collapsed .mp-foot { display: none; }
.mini-player.collapsed { width: 372px; }
.mini-player.collapsed .mp-bar { height: 44px; border-bottom: 0; }
.mini-player.collapsed .mp-bar::after { bottom: 0; }
.mini-player.collapsed .mp-eq { margin-inline-start: 0; }
.mp-now { display: none; min-width: 0; flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 4px; }
.mp-cplay { display: none; }
.mp-cplay .i-pause { display: none; } .mp-cplay[data-state="playing"] .i-play { display: none; } .mp-cplay[data-state="playing"] .i-pause { display: block; }
.mini-player.collapsed .mp-now { display: block; } .mini-player.collapsed .mp-cplay { display: grid; width: 30px; height: 30px; background: #fff; color: #0b0b12; border-radius: 50%; } .mini-player.collapsed .mp-cplay:hover { background: #fff; }
.mini-player.collapsed .mp-live { display: none; } .mini-player.collapsed .mp-brand .wm { font-size: 10px; } .mini-player.collapsed .mp-brand img { width: 22px; height: 22px; } .mini-player.collapsed .mp-eq { display: none; } .mini-player.collapsed .mp-win { gap: 2px; } .mini-player.collapsed .mp-wbtn { width: 26px; }
.mini-player.collapsed #mpCollapse .i { transform: rotate(180deg); }
/* inside the Document-PiP window: the widget IS the window */
.pip-body { margin: 0; min-height: 100vh; background: #0b0b12; overflow: hidden; }
.mini-player.in-pip { position: fixed; inset: 0; width: auto; max-width: none; height: 100vh; border-radius: 0; border: 0; opacity: 1; transform: none; box-shadow: none; display: grid; grid-template-rows: 38px minmax(0, 1fr) auto; }
.mini-player.in-pip .mp-bar { cursor: default; } .mini-player.in-pip .mp-bar:active { cursor: default; }
.mini-player.in-pip #mpBack { display: grid; } .mini-player:not(.in-pip) #mpBack { display: none; }
.mini-player.in-pip .mp-body { padding: 10px 14px 6px; }
.mini-player.in-pip.collapsed { grid-template-rows: 1fr; }
.mini-player.in-pip.narrow .mp-station, .mini-player.in-pip.narrow .mp-time { display: none; }
.mini-player.in-pip.narrow .mp-body { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; } .mini-player.in-pip.narrow .mp-cover { width: 56px; height: 56px; } .mini-player.in-pip.narrow .mp-cover img { inset: 6px; width: 44px; height: 44px; } .mini-player.in-pip.narrow .mp-viz { width: 56px; height: 56px; }
html.reduce-motion .mp-cover.spin img, html.reduce-motion .mp-title.run span, html.reduce-motion .mp-eq i, html.reduce-motion .mp-live i { animation: none; }
.pip-body.reduce-motion * { animation: none !important; }

/* ── Tap-to-start (autoplay unlock) ─────────────────────────── */
@keyframes tapIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tsGrid { to { background-position: 0 58px, 0 0; } }
@keyframes tsCard { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes tsShine { 0%, 20% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
@keyframes ringOut { from { transform: scale(.92); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@keyframes tapFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ── Shield (inspector detected) ───────────────────────────── */
.shield { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; background: #05050a; color: #fff; text-align: center; overflow: hidden; cursor: not-allowed; user-select: none; -webkit-user-select: none; }
.shield-noise { position: absolute; inset: -50%; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); animation: scan 8s linear infinite; pointer-events: none; }
@keyframes scan { to { transform: translateY(33%); } }
.shield::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, #ef4444 22%, transparent), transparent 70%); }
.shield-box { position: relative; display: grid; justify-items: center; gap: 12px; padding: 40px 44px; border-radius: 30px; border: 1px solid rgba(239, 68, 68, .35); background: rgba(10, 8, 14, .8); box-shadow: 0 40px 120px rgba(0, 0, 0, .8), 0 0 60px rgba(239, 68, 68, .15); max-width: min(92vw, 520px); animation: shieldIn .5s var(--spring) both; }
@keyframes shieldIn { from { transform: scale(.9); opacity: 0; } }
.shield-box img { width: 96px; height: 96px; border-radius: 50%; filter: grayscale(.4); box-shadow: 0 0 0 4px rgba(239, 68, 68, .25); animation: shake .5s ease-in-out 3; }
.shield-box h2 { font-size: 24px; font-weight: 800; color: #fecaca; margin-top: 6px; }
.shield-box p { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 420px; }
.shield-code { font-family: var(--font-logo); font-size: 11px; letter-spacing: 3px; color: #ef4444; margin-top: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(239, 68, 68, .4); }
body.locked { overflow: hidden !important; }
body.locked > :not(.shield) { filter: blur(12px) grayscale(.6) brightness(.5); pointer-events: none !important; }

/* ── Content protection ────────────────────────────────────── */
img, svg, canvas, video { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
img { pointer-events: none; }
.card .art img, .pl-cover img, .mp-cover img, .disc img, .ig-cover img, .splash-card img, .track .th, .ig-alt-item img, .ig-post img, .toast img, .side-st img, .brand img, .brand-m img, .splash-logo, .shield-box img, .mp-brand img { pointer-events: none; }
body { -webkit-touch-callout: none; }
.stage, .card, .player, .mini-player, .sidebar, .topbar, .footer, .panel, .ig { user-select: none; -webkit-user-select: none; }
input, textarea, [contenteditable] { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }

/* ── Panels ────────────────────────────────────────────────── */
.backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility 0s linear .35s; }
.backdrop.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s, visibility 0s; }
.panel { position: fixed; z-index: 100; inset-inline: 0; bottom: 0; margin-inline: auto; width: min(580px, 100%); max-height: min(88vh, 780px); max-height: min(88dvh, 780px); overflow: auto; overscroll-behavior: contain;
  background: color-mix(in srgb, var(--bg-2) 94%, var(--c1) 6%); border: 1px solid var(--line); border-bottom: 0; border-radius: 26px 26px 0 0; padding: 16px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow); transform: translateY(105%); visibility: hidden; pointer-events: none; transition: transform .5s var(--ease), visibility 0s linear .5s; scrollbar-width: thin; }
.panel.show { transform: none; visibility: visible; pointer-events: auto; transition: transform .5s var(--ease), visibility 0s; }
.panel::before { content: ''; position: absolute; top: -1px; inset-inline: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .7; }
.grab { width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); margin: -2px auto 14px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel-head h3 { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.panel-head h3 .i { color: var(--ink); }
.panel-body { display: grid; gap: 10px; }
/* staggered reveal of children when a panel opens */
.panel .panel-body > * { opacity: 0; transform: translateY(14px); }
.panel.show .panel-body > * { animation: rowIn .55s var(--ease) forwards; }
.panel.show .panel-body > *:nth-child(1) { animation-delay: .05s; } .panel.show .panel-body > *:nth-child(2) { animation-delay: .1s; } .panel.show .panel-body > *:nth-child(3) { animation-delay: .15s; } .panel.show .panel-body > *:nth-child(4) { animation-delay: .2s; } .panel.show .panel-body > *:nth-child(5) { animation-delay: .25s; } .panel.show .panel-body > *:nth-child(6) { animation-delay: .3s; } .panel.show .panel-body > *:nth-child(7) { animation-delay: .35s; } .panel.show .panel-body > *:nth-child(8) { animation-delay: .4s; } .panel.show .panel-body > *:nth-child(n+9) { animation-delay: .45s; }
@keyframes rowIn { to { opacity: 1; transform: none; } }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); transition: background .25s, border-color .25s, transform .25s; }
.row:hover { background: var(--glass-2); }
.row .lbl { font-weight: 600; font-size: 14px; }
.row .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.row.danger { border-color: rgba(239, 68, 68, .3); } .row.danger .lbl { color: #fca5a5; }

/* Settings panel — richer rows */
.set-group { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--dim); font-weight: 800; padding: 10px 6px 0; display: flex; align-items: center; gap: 10px; }
.set-group::after { content: ''; flex: 1; height: 1px; background: var(--line); }
html[lang="fa"] .set-group { letter-spacing: 0; font-size: 12px; }
html[lang="ar"] .set-group { letter-spacing: 0; font-size: 12px; }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; max-width: 150px; }
.swatches button { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); border: 2px solid transparent; transition: transform .25s var(--spring), border-color .2s; box-shadow: 0 3px 10px rgba(0, 0, 0, .4); }
.swatches button:hover { transform: scale(1.15); }
.swatches button.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 40%, transparent); }
.btn-row { display: flex; gap: 6px; }
.btn.sm { height: 36px; padding-inline: 12px; font-size: 12px; border-radius: 10px; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); transition: background .25s, border-color .25s, transform .25s, box-shadow .25s; cursor: pointer; text-align: start; width: 100%; }
.set-row:hover { background: var(--glass-2); transform: translateX(var(--nudge, 3px)); }
html[dir="rtl"] .set-row { --nudge: -3px; }
.set-row.on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent); }
.set-row .ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; background: var(--glass-2); color: var(--ink-2); transition: background .35s, color .35s, transform .35s var(--spring); }
.set-row.on .ico { background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 70%, #fff), color-mix(in srgb, var(--c2) 70%, #fff)); color: #0b0b12; transform: rotate(-8deg) scale(1.06); }
.set-row .tx { flex: 1; min-width: 0; }
.set-row .lbl { font-weight: 700; font-size: 14px; }
.set-row .sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.switch { position: relative; width: 50px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .35s; flex-shrink: 0; overflow: hidden; }
.switch::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--c2), var(--c1)); opacity: 0; transition: opacity .35s; }
.switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .45s var(--spring), width .2s; }
.switch:active::after { width: 28px; }
.switch[aria-checked="true"]::before { opacity: 1; }
.switch[aria-checked="true"]::after { transform: translateX(22px); }
html[dir="rtl"] .switch[aria-checked="true"]::after { transform: translateX(-22px); }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); position: relative; }
.seg button { padding: 7px 16px; border-radius: 9px; font-weight: 700; font-size: 13px; color: var(--muted); position: relative; z-index: 1; transition: color .3s; }
.seg button.active { color: #0b0b12; }
.seg .thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 9px; background: #fff; transition: left .45s var(--spring), width .3s; z-index: 0; box-shadow: 0 4px 14px rgba(255,255,255,.2); }
.opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opt { padding: 14px 10px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); font-weight: 700; text-align: center; transition: all .25s var(--ease); }
.opt:hover { background: var(--glass-2); transform: translateY(-2px); }
.opt.active { background: linear-gradient(135deg, color-mix(in srgb, var(--c2) 30%, transparent), color-mix(in srgb, var(--c1) 30%, transparent)); border-color: var(--line-2); box-shadow: 0 0 0 1px var(--line-2), 0 10px 30px color-mix(in srgb, var(--c1) 20%, transparent); }
.opt.wide { grid-column: 1 / -1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding-inline: 18px; border-radius: 13px; font-weight: 700; background: var(--glass-2); border: 1px solid var(--line); transition: all .2s; }
.btn:hover { background: rgba(255, 255, 255, .15); }
.btn.primary { color: #0b0b12; background: linear-gradient(135deg, #fff, #e6e9ff); border: 0; }
.btn.danger { color: #fca5a5; border-color: rgba(239, 68, 68, .3); }

/* Sleep timer panel — the showpiece */
.sleep-hero { position: relative; display: grid; place-items: center; padding: 6px 0 14px; }
.sleep-dial { position: relative; width: 210px; height: 210px; border-radius: 50%; display: grid; place-items: center; }
.sleep-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sleep-dial .trk { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 10; }
.sleep-dial .prg { fill: none; stroke: url(#sleepGrad); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 597; stroke-dashoffset: 597; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 70%, transparent)); }
.sleep-dial .tick-dots { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .25) 0 .6deg, transparent .6deg 30deg); -webkit-mask: radial-gradient(circle, transparent 78px, #000 79px, #000 84px, transparent 85px); mask: radial-gradient(circle, transparent 78px, #000 79px, #000 84px, transparent 85px); }
.sleep-dial .core { position: relative; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .12), transparent 60%), rgba(0, 0, 0, .45); border: 1px solid var(--line-2); box-shadow: inset 0 0 40px rgba(0, 0, 0, .5); }
.sleep-dial .core .t { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1; color: var(--ink); }
.sleep-dial .core .l { font-size: 11px; color: var(--muted); margin-top: 6px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
html[lang="fa"] .sleep-dial .core .l { letter-spacing: 0; }
html[lang="ar"] .sleep-dial .core .l { letter-spacing: 0; }
.sleep-dial .moon { position: absolute; top: -8px; inset-inline-end: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #0b0b12; background: linear-gradient(135deg, #fff, #dfe3ff); box-shadow: 0 8px 24px rgba(255, 255, 255, .25); transform: scale(0); transition: transform .5s var(--spring); }
.sleep-panel.armed .sleep-dial .moon { transform: scale(1); }
.sleep-panel.armed .sleep-dial .core { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: inset 0 0 40px rgba(0, 0, 0, .5), 0 0 0 0 color-mix(in srgb, var(--accent) 25%, transparent); } 50% { box-shadow: inset 0 0 40px rgba(0, 0, 0, .5), 0 0 0 14px transparent; } }
.sleep-stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 20px; }
.sleep-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0; animation: twinkle var(--d, 3s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .9; transform: scale(1.2); } }
.sleep-hint { text-align: center; font-size: 12px; color: var(--muted); margin-top: -4px; }
.sleep-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sleep-opt { position: relative; padding: 14px 6px 12px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); text-align: center; transition: all .3s var(--ease); overflow: hidden; }
.sleep-opt .v { font-size: 22px; font-weight: 800; line-height: 1; color: var(--ink); }
.sleep-opt .u { font-size: 10px; color: var(--muted); margin-top: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
html[lang="fa"] .sleep-opt .u { letter-spacing: 0; font-size: 11px; }
html[lang="ar"] .sleep-opt .u { letter-spacing: 0; font-size: 11px; }
.sleep-opt:hover { background: var(--glass-2); transform: translateY(-3px); }
.sleep-opt.active { background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 40%, transparent), color-mix(in srgb, var(--c2) 30%, transparent)); border-color: var(--line-2); box-shadow: 0 12px 30px color-mix(in srgb, var(--c1) 25%, transparent); }
.sleep-opt.active::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 1.6s var(--ease) .1s; }
@keyframes sheen { to { transform: translateX(100%); } }
.sleep-opt.wide { grid-column: span 2; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; }
.sleep-opt.wide .v { font-size: 14px; }
.sleep-opt.off { color: var(--muted); }
.sleep-custom { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); }
.sleep-custom .hd { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; }
.sleep-custom .hd b { font-size: 16px; color: var(--ink); }
.sleep-custom input[type=range] { width: 100%; height: 6px; }
.sleep-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* EQ */
.eq-sliders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 10px 6px; }
.eq-s { display: grid; justify-items: center; gap: 10px; }
.eq-s input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 6px; height: 150px; background: linear-gradient(0deg, #fff var(--p, 50%), rgba(255, 255, 255, .15) var(--p, 50%)); }
html[dir="rtl"] .eq-s input[type=range] { background: linear-gradient(0deg, #fff var(--p, 50%), rgba(255, 255, 255, .15) var(--p, 50%)); }
.eq-s label { font-size: 13px; font-weight: 700; color: var(--muted); }
.eq-s .val { font-size: 12px; color: var(--ink); font-weight: 700; }
.eq-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.eq-presets .opt { padding: 9px 14px; font-size: 13px; }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--glass); font-size: 13px; }
.key-row > span:first-child { min-width: 0; line-height: 1.35; }
.kbd { flex-shrink: 0; } .kbd b .i { width: 12px; height: 12px; vertical-align: -1px; } .kbd b .i + .i { margin-inline-start: 2px; }
.kbd { display: inline-flex; align-items: center; gap: 4px; }
.kbd b { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding-inline: 7px; border-radius: 6px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); border-bottom-width: 2px; font-size: 11px; font-weight: 700; }
.stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card { padding: 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); }
.stat-card .v { font-size: 28px; font-weight: 800; color: var(--ink); }
.stat-card .k { font-size: 12px; color: var(--muted); margin-top: 2px; }
.top-list { display: grid; gap: 8px; }
.top-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--glass); }
.top-row .rank { font-weight: 800; color: var(--muted); }
.top-row .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); margin-top: 6px; overflow: hidden; }
.top-row .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--s1), var(--s2)); border-radius: 3px; }
.top-row .n { font-weight: 700; font-size: 14px; } .top-row .t { font-size: 12px; color: var(--muted); font-weight: 700; }
.share-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.share-grid .btn { height: 52px; }
.share-song { padding: 12px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); font-size: 14px; }
.share-song b { display: block; } .share-song span { color: var(--muted); font-size: 12px; }

/* ── Toasts ────────────────────────────────────────────────── */
.toasts { position: fixed; z-index: 120; inset-inline: 0; bottom: calc(var(--player-h) + 26px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: center; gap: 8px; pointer-events: none; padding-inline: 12px; }
.toast { display: inline-flex; align-items: center; gap: 10px; max-width: min(460px, 100%); padding: 11px 16px; border-radius: 14px; font-weight: 600; font-size: 14px; background: color-mix(in srgb, var(--bg-2) 88%, var(--c1) 12%); border: 1px solid var(--line-2); box-shadow: var(--shadow); animation: toastIn .45s var(--spring) both; }
.toast.out { animation: toastOut .3s ease forwards; }
.toast img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.toast .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.96); } }

/* ── Footer / splash / offline ─────────────────────────────── */
.footer { margin-top: 50px; padding: 26px 0 10px; text-align: center; color: var(--dim); font-size: 12px; border-top: 1px solid var(--line); }
.footer .wordmark { font-size: 15px; margin-bottom: 8px; display: block; }
.footer .made { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.footer .footer-links { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.footer .footer-links a { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: 12.5px; transition: color .2s, border-color .2s, transform .25s var(--spring); }
.footer .footer-links a:hover { color: var(--text); border-color: color-mix(in srgb, var(--c1) 55%, var(--line)); transform: translateY(-2px); }
.footer .footer-links a .i { width: 15px; height: 15px; color: var(--accent); }
.nav-item.nav-studio { text-decoration: none; }
.heart-beat { width: 16px; height: 16px; color: #fb7185; fill: currentColor; stroke: none; animation: heartbeat 1.3s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(251, 113, 133, .8)); }
@keyframes heartbeat { 0%, 100% { transform: scale(1); opacity: 1; } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.25); opacity: .85; } 70% { transform: scale(1); opacity: 1; } }
.splash { position: fixed; inset: 0; z-index: 999; overflow: hidden; background: #06060b; display: grid; place-items: center; transition: opacity .7s ease, visibility .7s; }
.splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-bg { position: absolute; inset: 0; background: radial-gradient(60% 50% at 30% 20%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 70%), radial-gradient(50% 50% at 75% 80%, color-mix(in srgb, var(--c2) 22%, transparent), transparent 70%); }
.splash-rows { position: absolute; inset: 0; direction: ltr; justify-items: start; display: grid; grid-template-rows: repeat(3, 1fr); gap: 18px; padding: 24px 0; transform: rotate(-6deg) scale(1.15); opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.splash-row { display: flex; gap: 18px; width: max-content; direction: ltr; animation: splashScroll var(--dur, 22s) linear infinite; will-change: transform; }
.splash-row.rev { animation-direction: reverse; }
.splash-row:nth-child(2) { animation-duration: 26s; } .splash-row:nth-child(3) { animation-duration: 20s; }
@keyframes splashScroll { to { transform: translateX(-50%); } }
.splash-card { flex: 0 0 auto; width: 210px; height: 100%; min-height: 150px; border-radius: 22px; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--s1), var(--s2)); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .08); }
.splash-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; animation: fadeIn .6s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: .9; } }
.splash-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6, 6, 11, .9)); }
.splash-card .em { position: absolute; top: 12px; inset-inline-start: 12px; font-size: 26px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.splash-card .nm { position: absolute; bottom: 12px; inset-inline: 12px; z-index: 1; font-weight: 800; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.splash-card .nm small { display: block; font-weight: 500; font-size: 11px; color: rgba(255, 255, 255, .7); }
.splash-center { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 34px 44px; border-radius: 34px; background: rgba(6, 6, 11, .55); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 120px rgba(0, 0, 0, .6); animation: splashIn .9s var(--ease) both; max-width: min(92vw, 520px); }
.splash-logo { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; box-shadow: 0 20px 60px color-mix(in srgb, var(--c1) 50%, transparent), 0 0 0 1px rgba(255, 255, 255, .1); animation: logoFloat 4s ease-in-out infinite; }
@keyframes logoFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-2deg); } }
.splash-tag { font-size: 13px; color: var(--muted); letter-spacing: .5px; }
.splash-count { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--muted); }
.splash-count .num { font-size: 26px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.splash-bar { width: 220px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 4px; }
.splash-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--c2), var(--c1), #fff); transition: width .3s linear; box-shadow: 0 0 14px var(--c2); }
.splash-skip { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); transition: all .2s; }
.splash-skip:hover { color: #fff; background: var(--glass-2); }
@keyframes splashIn { from { opacity: 0; transform: scale(.92) translateY(12px); } to { opacity: 1; transform: none; } }
.offline-bar { position: fixed; top: 0; inset-inline: 0; z-index: 200; text-align: center; padding: 8px; font-weight: 700; font-size: 13px; background: #ef4444; color: #fff; transform: translateY(-100%); transition: transform .4s var(--ease); pointer-events: none; }
.offline-bar.show { transform: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 10px; border: 3px solid var(--bg); }

/* ── Mobile nav (bottom tabs) ──────────────────────────────── */
.mnav { display: none; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
  .stage-in { grid-template-columns: 380px minmax(0, 1fr); }
  .disc-wrap { width: 380px; height: 380px; }
}
@media (max-width: 1023px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding-inline: 14px; }
  .topbar { margin-inline: -14px; padding-inline: 14px; height: 64px; }
  .brand-m { display: flex; }
  .topbar .install-btn { display: inline-flex; width: 42px; height: 42px; padding: 0; }
  .topbar .install-btn span { display: none; }
  .search .kbd-hint { display: none; }
  .chips { display: flex; position: sticky; top: 64px; z-index: 30; margin-inline: -14px; padding: 6px 14px 10px; background: linear-gradient(180deg, var(--bg) 78%, transparent); scroll-padding-inline: 14px; scroll-snap-type: x proximity; }
  .chip { scroll-snap-align: start; }
  .player { inset-inline-start: 0; }
  .toasts { inset-inline-start: 0; }
}
@media (min-width: 1024px) {
  .player { inset-inline-start: var(--sidebar-w); }
  .toasts { inset-inline-start: var(--sidebar-w); }
}
@media (max-width: 900px) {
  :root { --player-h: 76px; }
  .player-in { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding-inline: 12px; height: var(--player-h); border-radius: 20px; }
  .pl-right { display: none; }
  .pl-fav-m { display: grid; }
  .pl-center { gap: 4px; }
  .pl-center .ctl { width: 40px; height: 40px; background: transparent; border-color: transparent; }
  .pl-center .ctl.big { width: 50px; height: 50px; background: #fff; border-color: transparent; }
  .pl-cover { width: 50px; height: 50px; border-radius: 12px; }
  .pl-left { gap: 10px; }
  .pl-txt { padding-inline-end: 2px; }
}
@media (max-width: 380px) {
  .pl-fav-m { display: none; }
  .pl-center .ctl { width: 38px; height: 38px; }
}
@media (max-width: 767px) {
  .ig { padding: 18px 16px 16px; border-radius: 24px; margin-top: 18px; }
  .ig-title h2 { font-size: 18px; } .ig-title p { font-size: 12px; } .ig-badge { width: 44px; height: 44px; border-radius: 13px; }
  .ig-steps { display: none; }
  .ig-form { flex-direction: column; }
  .ig-go { height: 52px; }
  .ig-input input { height: 52px; font-size: 14px; }
  .ig-card { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .ig-cover { width: 100%; height: auto; aspect-ratio: 1; max-width: 180px; margin-inline: auto; }
  .ig-song { font-size: 21px; } .ig-artist { font-size: 15px; }
  .ig-found { font-size: 11px; line-height: 1.5; max-width: 100%; }
  .ig-actions .btn { height: 42px; flex: 1 1 auto; justify-content: center; }
  .ig-links a { height: 30px; padding-inline: 10px; font-size: 11px; }
  .ig-alt-item { padding: 8px; }
  .ig-manual { flex-direction: column; }
  .ig-manual .btn { height: 44px; justify-content: center; }
  .ig-meta { text-align: center; align-items: center; }
  .ig-actions, .ig-links, .ig-sub { justify-content: center; }
  .ig-alt-list { grid-template-columns: 1fr; }
  .splash-rows { gap: 12px; padding: 12px 0; transform: rotate(-8deg) scale(1.3); }
  .splash-card { width: 150px; min-height: 110px; border-radius: 16px; } .splash-card .nm { font-size: 12px; } .splash-card .em { font-size: 20px; }
  .splash-center { padding: 26px 22px; border-radius: 28px; gap: 8px; } .splash-logo { width: 100px; height: 100px; }
  .ig-btn span { display: none; } .ig-btn { width: 42px; padding-inline: 0 !important; }
  .mini-player { width: min(372px, calc(100vw - 12px)); }
  .mp-body { padding: 10px 10px 6px; }
  #btnPip { order: 10; width: 42px; height: 42px; background: rgba(255, 255, 255, .06); }
  .stage { border-radius: 24px; margin-top: 8px; }
  .stage-in, html[dir="rtl"] .stage-in { grid-template-columns: 1fr; gap: 4px; padding: 16px 16px 4px; text-align: center; }
  .disc-wrap { width: min(320px, 78vw); height: min(320px, 78vw); }
  .badges, .controls, .status-line { justify-content: center; }
  .badges { gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
  .badge.live-count { max-width: 100%; }
  .badge { height: 26px; font-size: 11px; padding-inline: 9px; }
  #bitrateBadge { display: none; }
  .st-title { font-size: clamp(22px, 6.5vw, 30px); white-space: normal; overflow: visible; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }
  .st-title .marquee { display: inline; white-space: normal; animation: none !important; padding: 0; }
  .st-artist { font-size: 15px; margin-top: 6px; }
  .st-artist { font-size: 15px; margin-top: 4px; }
  .controls { gap: 8px; margin-top: 16px; row-gap: 12px; }
  .ctl { width: 44px; height: 44px; }
  .ctl.big { width: 66px; height: 66px; }
  .ctl-sep { display: none; }
  /* two tidy rows: [♥ ⏮ ▶ ⏭ 🔀] then [🌙 EQ share] */
  #btnFav { order: 1; } #btnPrev { order: 2; } #btnPlay { order: 3; } #btnNext { order: 4; } #btnShuffle { order: 5; }
  .controls::after { content: ''; flex-basis: 100%; height: 0; order: 6; }
  #btnLike { order: 7; } #btnSleep { order: 7; } #btnEq { order: 8; } #btnShare { order: 9; }
  #btnSleep, #btnEq, #btnShare, #btnLike { width: 42px; height: 42px; background: rgba(255, 255, 255, .06); }
  .ctl.like.on { background: rgba(251, 113, 133, .14); }
  .stage-side { grid-template-columns: 1fr; padding: 4px 12px 14px; gap: 10px; }
  .mini { padding: 12px 14px; }
  .ticker-wrap { height: 40px; border-radius: 12px; }
  .ticker-label { padding-inline: 10px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card .body { padding: 10px 12px 12px; }
  .card .name { font-size: 14px; }
  .card .desc { display: none; }
  .card .art .em { font-size: 44px; }
  .card .go { width: 38px; height: 38px; opacity: 1; transform: none; background: rgba(255, 255, 255, .92); }
  .card .pick { font-size: 9px; height: 22px; }
  .card .pill { height: 22px; font-size: 10px; }
  .section-head h2 { font-size: 18px; }
  .panel { border-radius: 24px 24px 0 0; padding-inline: 16px; }
  .keys { grid-template-columns: 1fr; }
  .sleep-opts { grid-template-columns: repeat(3, 1fr); }
  .sleep-opt.wide { grid-column: span 3; }
  .sleep-dial { width: 190px; height: 190px; }
  .sleep-dial .core { width: 136px; height: 136px; }
  .sleep-dial .core .t { font-size: 30px; }
  .sleep-dial .tick-dots { -webkit-mask: radial-gradient(circle, transparent 70px, #000 71px, #000 76px, transparent 77px); mask: radial-gradient(circle, transparent 70px, #000 71px, #000 76px, transparent 77px); }
  .eq-s input[type=range] { height: 120px; }
  .share-grid { grid-template-columns: 1fr 1fr; }
  .toasts { bottom: calc(var(--player-h) + 20px + env(safe-area-inset-bottom, 0px)); }
  .toast { font-size: 13px; padding: 10px 14px; }
}
@media (max-width: 640px) {
  .brand-m .wordmark { display: none; }
  .brand-m img { width: 36px; height: 36px; }
  .top-actions #keysBtn, .top-actions #statsBtn { display: none; }
  .top-actions { gap: 2px; }
  .lang-btn { padding-inline: 10px; }
  .search { min-width: 0; margin-inline-end: 0; }
  .search input { padding-inline: 38px 12px; height: 42px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
  .search .ic { inset-inline-start: 12px; }
  .search .clear { inset-inline-end: 4px; }
  .search.has-value input { padding-inline-end: 36px; }
  .topbar { gap: 8px; }
}
@media (max-width: 480px) {
  .lang-btn { width: 42px; padding-inline: 0; } .lang-btn #langLabel { display: none; } .lang-btn .i { width: 20px; height: 20px; }
  .search input::placeholder { font-size: 14px; }
  .ig-input input, .ig-manual input { font-size: 16px; }
  .footer .made { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
}
@media (max-width: 420px) {
  .main { padding-inline: 10px; }
  .topbar { margin-inline: -10px; padding-inline: 10px; }
  .chips { margin-inline: -10px; padding-inline: 10px; }
  .grid { gap: 8px; }
  .card .name .sub { display: none; }
  .ctl { width: 42px; height: 42px; }
  .ctl.big { width: 62px; height: 62px; }
  .disc-wrap { width: min(280px, 76vw); height: min(280px, 76vw); }
  .player { padding-inline: 8px; }
  .player-in { padding-inline: 10px; gap: 8px; }
  .pl-cover { width: 44px; height: 44px; }
  .pl-title { font-size: 13px; }
  .sleep-opts { gap: 6px; }
  .sleep-opt .v { font-size: 19px; }
}
/* landscape phones: keep the stage compact */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1023px) {
  .topbar { position: static; height: 54px; }
  .chips { position: static; }
  .stage-in, html[dir="rtl"] .stage-in { grid-template-columns: 200px minmax(0, 1fr); text-align: start; padding: 12px 16px 4px; gap: 16px; }
  .disc-wrap { width: 200px; height: 200px; }
  .badges, .controls, .status-line { justify-content: flex-start; }
  .controls::after { display: none; }
  #btnSleep, #btnEq, #btnShare, #btnLike { order: 0; }
  .stage-side { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  :root { --player-h: 64px; }
  .pl-cover { width: 44px; height: 44px; }
  .pl-center .ctl.big { width: 46px; height: 46px; }
  .ig-form { flex-direction: row; }
}
/* touch devices: bigger hit areas, no hover-only affordances */
@media (hover: none) {
  .card .go { opacity: 1; transform: none; }
  .icon-btn, .ctl { min-width: 44px; min-height: 44px; }
}
/* very short desktop windows */
@media (min-width: 1024px) and (max-height: 700px) {
  .stage-in { grid-template-columns: 320px minmax(0, 1fr); }
  .disc-wrap { width: 320px; height: 320px; }
}

html.reduce-motion .splash-row, html.reduce-motion .splash-logo, html.reduce-motion .heart-beat, html.reduce-motion .ig-badge { animation: none; }

@media print { body > * { display: none !important; } body::after { content: 'ATLAS BEATS — printing is disabled'; display: block; padding: 40px; font: 700 18px sans-serif; } }

/* ── Desktop shell title bar (Electron / Windows app) ─────────── */
:root { --dtb-h: 0px; }
html.desktop { --dtb-h: 38px; }
.dtb { position: fixed; top: 0; inset-inline: 0; height: var(--dtb-h); z-index: 500; display: flex; align-items: center; justify-content: space-between; padding-inline: 12px 0; direction: ltr; -webkit-app-region: drag; user-select: none; background: linear-gradient(180deg, rgba(10, 10, 18, .92), rgba(10, 10, 18, .78)); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.dtb::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--c1), var(--c2), transparent); opacity: .7; }
.dtb-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dtb-brand img { width: 20px; height: 20px; border-radius: 6px; }
.dtb-brand .wm { font-family: 'Montserrat', var(--font-en); font-size: 11.5px; letter-spacing: 2.4px; display: inline-flex; gap: 5px; }
.dtb-brand .wm b { font-weight: 800; color: #fff; } .dtb-brand .wm i { font-style: normal; font-weight: 600; background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dtb-np { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; padding-inline-start: 10px; margin-inline-start: 4px; border-inline-start: 1px solid rgba(255, 255, 255, .1); }
.dtb-np:empty { display: none; }
.dtb-win { display: flex; height: 100%; -webkit-app-region: no-drag; }
.dtb-btn { width: 46px; height: 100%; display: grid; place-items: center; color: var(--ink-2); background: transparent; border: 0; border-radius: 0; cursor: default; transition: background .15s, color .15s; }
.dtb-btn .i { width: 12px; height: 12px; }
.dtb-btn#dtbPin .i { width: 14px; height: 14px; }
.dtb-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.dtb-btn.close:hover { background: #e81123; color: #fff; }
.dtb-btn.on { color: var(--c2); }
html.desktop body { padding-top: var(--dtb-h); }
html.desktop .sidebar { top: var(--dtb-h); height: calc(100vh - var(--dtb-h)); height: calc(100dvh - var(--dtb-h)); }
html.desktop .topbar { top: var(--dtb-h); }
html.desktop .offline-bar { top: var(--dtb-h); }
html.desktop .splash, html.desktop .shield { top: var(--dtb-h); }
html.desktop .shield { z-index: 499; }
html.desktop .install-btn { display: none !important; }
html.desktop .made small.web-only { display: none; }
html.desktop.maximized .dtb { border-radius: 0; }

/* ── "Get the Windows app" card (sidebar, web only) ── */
.win-app { display: flex; align-items: center; gap: 10px; margin: 8px 4px 0; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--text); border: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 14%, transparent), color-mix(in srgb, var(--c2) 10%, transparent)); transition: transform .2s, border-color .2s, box-shadow .2s; position: relative; overflow: hidden; }
.win-app::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%); background-size: 250% 100%; animation: tsShine 4s ease-in-out infinite; pointer-events: none; }
.win-app:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c2) 45%, var(--line)); box-shadow: 0 10px 30px color-mix(in srgb, var(--c1) 22%, transparent); }
.win-app .wa-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: #fff; color: #0078d4; }
.win-app .wa-ico .i { width: 18px; height: 18px; }
.win-app .wa-tx { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.win-app .wa-tx b { font-size: 13px; font-weight: 700; } .win-app .wa-tx small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-en); text-align: start; unicode-bidi: isolate; }
html[lang="fa"] .win-app .wa-tx small { text-align: right; }
html[lang="ar"] .win-app .wa-tx small { text-align: right; }
.win-app > .i.sm { color: var(--muted); flex: none; }
html.desktop .win-app { display: none !important; }
@media (hover: none) and (pointer: coarse) { .win-app { display: none; } }

/* ══ v4.4 ─ Header redesign ═══════════════════════════════════ */
.topbar { gap: 10px; overflow: visible; }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c1) 70%, transparent) 30%, color-mix(in srgb, var(--c2) 70%, transparent) 70%, transparent); opacity: 0; transition: opacity .4s; pointer-events: none; }
.topbar.scrolled::after { opacity: 1; }
.topbar.scrolled { border-bottom-color: transparent; }
.tb-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .8s; }
.topbar.scrolled .tb-aurora, body.playing .tb-aurora { opacity: 1; }
.tb-aurora i { position: absolute; top: -60%; width: 32%; height: 220%; filter: blur(38px); opacity: .22; border-radius: 50%; animation: tbAurora 14s ease-in-out infinite alternate; }
.tb-aurora i:nth-child(1) { left: 5%; background: var(--c1); }
.tb-aurora i:nth-child(2) { left: 40%; background: var(--c2); animation-delay: -5s; animation-duration: 18s; }
.tb-aurora i:nth-child(3) { left: 70%; background: var(--accent); animation-delay: -9s; animation-duration: 12s; }
@keyframes tbAurora { from { transform: translateX(-12%) rotate(8deg); } to { transform: translateX(14%) rotate(-6deg); } }
html.reduce-motion .tb-aurora i { animation: none; }
/* brand (mobile) */
.brand-m { position: relative; }
.brand-m img { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
/* live "now playing" strip inside the header (desktop) */
.tb-now { display: none; align-items: center; gap: 10px; min-width: 0; max-width: 34%; height: 40px; padding: 0 12px 0 8px; border-radius: 13px; border: 1px solid var(--line); background: var(--glass); opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .4s var(--spring), border-color .3s; direction: ltr; }
.tb-now.show { opacity: 1; transform: none; }
.tb-now.playing { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 10px 30px -14px color-mix(in srgb, var(--accent) 60%, transparent); }
.tb-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 3px 8px 3px 6px; border-radius: 8px; background: rgba(255, 255, 255, .05); flex-shrink: 0; }
.tb-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.tb-now.playing .tb-live { color: #ff5c7a; background: rgba(255, 92, 122, .12); }
.tb-now.playing .tb-live i { background: #ff4d6d; box-shadow: 0 0 10px #ff4d6d; animation: liveDot 1.4s ease-in-out infinite; }
@keyframes liveDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .5; } }
.tb-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; flex-shrink: 0; }
.tb-eq i { width: 3px; height: 30%; border-radius: 2px; background: linear-gradient(180deg, var(--c1), var(--c2)); opacity: .45; transition: height .3s; }
.tb-now.playing .tb-eq i { opacity: 1; animation: tbEq 1s ease-in-out infinite; }
.tb-now.playing .tb-eq i:nth-child(2) { animation-delay: -.2s; } .tb-now.playing .tb-eq i:nth-child(3) { animation-delay: -.45s; } .tb-now.playing .tb-eq i:nth-child(4) { animation-delay: -.7s; } .tb-now.playing .tb-eq i:nth-child(5) { animation-delay: -.3s; }
@keyframes tbEq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
html.reduce-motion .tb-eq i, html.reduce-motion .tb-live i { animation: none; }
.tb-song { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tb-title { font-weight: 800; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-artist { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-now.flip .tb-song { animation: tbFlip .5s var(--spring); }
@keyframes tbFlip { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tb-count { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--muted); margin-inline-start: 4px; padding-inline-start: 10px; border-inline-start: 1px solid var(--line); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.tb-count .i { width: 14px; height: 14px; }
.tb-count b { color: var(--ink); }
/* search: glow + shimmer */
.search { max-width: 520px; }
.search input { height: 42px; background: color-mix(in srgb, var(--glass) 80%, transparent); }
.search::before { content: ''; position: absolute; inset: -1px; border-radius: 15px; background: linear-gradient(120deg, var(--c1), var(--c2), var(--accent), var(--c1)); background-size: 300% 300%; opacity: 0; transition: opacity .3s; z-index: -1; filter: blur(6px); }
.search:focus-within::before { opacity: .55; animation: searchGlow 4s linear infinite; }
@keyframes searchGlow { to { background-position: 300% 0; } }
/* action buttons: subtle glass pills + tooltips */
.top-actions { gap: 5px; }
.top-actions .icon-btn { border: 1px solid transparent; }
.top-actions .icon-btn:hover { border-color: var(--line); background: var(--glass-2); }
.top-actions .icon-btn:not(.ig-btn):not(.lang-btn)::after { content: attr(title); position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); padding: 5px 9px; border-radius: 8px; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.top-actions .icon-btn:not(.ig-btn):not(.lang-btn):hover::after { opacity: 1; transform: translate(-50%, 0); }
/* telegram button */
/* language switcher: icon + menu */
.lang-wrap { position: relative; }
.lang-btn { padding-inline: 8px 10px; gap: 7px; height: 42px; }
.lang-btn .lang-ic { width: 24px; height: 24px; border-radius: 7px; }
.lang-btn .chev { width: 12px; height: 12px; opacity: .6; transition: transform .3s; }
.lang-wrap.open .chev { transform: rotate(180deg); }
.lang-wrap.open .lang-btn { background: var(--glass-2); color: var(--text); border-color: var(--line-2); }
.lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 232px; padding: 6px; border-radius: 16px; background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03) inset; z-index: 60; transform-origin: top; animation: menuIn .28s var(--spring); }
.lang-menu[hidden] { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 11px; color: var(--text); text-align: start; transition: background .18s; }
.lang-menu button:hover { background: var(--glass-2); }
.lang-menu button.active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.lang-menu .lang-ic { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }
.lang-menu .nm { font-weight: 800; font-size: 13.5px; }
.lang-menu small { color: var(--muted); font-size: 11px; margin-inline-start: auto; font-family: var(--font-en); }
.lang-menu .ok { width: 14px; height: 14px; color: var(--accent); }
.lang-menu .nm.rtl { font-family: var(--font-fa); }
/* settings language grid */
.lang-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.lang-grid button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); color: var(--muted); font-weight: 800; font-size: 12.5px; transition: border-color .2s, background .2s, color .2s, transform .15s; }
.lang-grid button:hover { border-color: var(--line-2); color: var(--text); }
.lang-grid button.active { color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, var(--glass)); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) inset; }
.lang-grid button:active { transform: scale(.96); }
.lang-grid .lang-ic { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; }
.lang-grid span.rtl { font-family: var(--font-fa); }
.lang-ic { display: inline-block; stroke: none; fill: currentColor; }
/* header responsive */
@media (min-width: 1280px) { .tb-now { display: flex; } }
@media (max-width: 1023px) { .tb-now { display: none; } .lang-btn #langLabel { display: none; } .lang-btn { padding-inline: 8px; gap: 4px; } .tg-btn { width: 42px; } }
@media (max-width: 640px) { .lang-btn .chev { display: none; } .lang-btn { padding-inline: 8px; width: 42px; } .lang-menu { position: fixed; inset-inline: 10px; top: calc(var(--topbar-h, 64px) + 6px); min-width: 0; } .lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══ v4.4 ─ Telegram bot card + send flow ═════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } }

/* language row: label on top, grid below */
.set-row.set-lang { flex-wrap: wrap; }
.set-row.set-lang .tx { flex: 1 1 140px; }
.set-row.set-lang .lang-grid { flex: 1 1 100%; margin-top: 4px; }
@media (min-width: 560px) { .lang-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lang-grid button { flex-direction: column; gap: 6px; padding: 10px 6px; font-size: 11.5px; } .lang-grid .lang-ic { width: 30px; height: 30px; border-radius: 9px; } }

/* ══ v5.3 ─ Song Finder entry points (sidebar / header) ═══ */
.nav-item.nav-ig { background: linear-gradient(90deg, rgba(217, 70, 239, .16), rgba(244, 63, 94, .08)); border-color: rgba(217, 70, 239, .3); }
.nav-item.nav-ig .i { color: #f0abfc; }
[dir="rtl"]

/* ══ v4.5 ─ Synced lyrics (karaoke) ═══════════════════════════ */
.lyrics { position: relative; margin: 4px 26px 0; padding: 0 0 6px; border-top: 1px solid var(--line); }
.ly-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 6px; }
.ly-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ly-title b { display: block; font-size: 13px; font-weight: 800; letter-spacing: .3px; color: var(--ink); }
.ly-title small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.ly-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 20px -8px var(--c2); flex-shrink: 0; transition: background var(--t-theme); }
.ly-ic .i { width: 17px; height: 17px; }
.ly-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ly-btn { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.ly-btn:hover { background: var(--glass-2); color: var(--text); border-color: var(--line); }
.ly-btn .i.xs { width: 14px; height: 14px; }
.ly-offset { font-size: 11px; font-weight: 800; color: var(--muted); min-width: 44px; text-align: center; padding: 4px 6px; border-radius: 8px; background: var(--glass); border: 1px solid var(--line); cursor: help; direction: ltr; font-variant-numeric: tabular-nums; }
.ly-offset.bump { animation: lyBump .35s var(--spring); }
@keyframes lyBump { 40% { transform: scale(1.12); } }
.ly-state { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); margin-inline-end: 4px; }
html[lang="fa"] .ly-state, html[lang="ar"] .ly-state { letter-spacing: 0; font-size: 11px; }
.ly-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.ly-state.synced { color: #4ade80; border-color: rgba(74, 222, 128, .35); } .ly-state.synced i { background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: liveDot 1.6s ease-in-out infinite; }
.ly-state.plain { color: #fbbf24; } .ly-state.plain i { background: #f59e0b; }
.ly-state.estimated { color: #a5b4fc; border-color: rgba(165, 180, 252, .35); } .ly-state.estimated i { background: #818cf8; box-shadow: 0 0 8px #818cf8; animation: liveDot 2.2s ease-in-out infinite; }
.ly-state.loading i { background: var(--accent); animation: liveDot .9s ease-in-out infinite; }
.ly-state.none, .ly-state.off { display: none; }
.ly-body { position: relative; height: 196px; transition: height .45s var(--spring), opacity .3s; }
.ly-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 70px 8px 90px; mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.ly-scroll::-webkit-scrollbar { display: none; }
.ly-lines { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
/* v5.2: one weight for every line (no bold-jump), no blur, tiny scale, and a per-line font: Latin → Inter, Arabic script → Vazirmatn (never per-glyph fallback) */
.ly-line { font-size: 19px; line-height: 1.5; font-weight: 700; color: var(--muted); opacity: .4; padding: 5px 10px; border-radius: 12px; transform-origin: 0 50%; transition: opacity .35s, color .35s, transform .4s var(--spring), text-shadow .35s; cursor: pointer; max-width: 100%; font-family: 'Inter', 'Vazirmatn', system-ui, sans-serif; font-synthesis: none; letter-spacing: -.005em; text-rendering: optimizeLegibility; }
.ly-line.rtl, .ly-line:lang(fa), .ly-line:lang(ar) { font-family: 'Vazirmatn', 'Inter', system-ui, sans-serif; letter-spacing: 0; line-height: 1.75; }
.ly-line.ltr { font-family: 'Inter', 'Vazirmatn', system-ui, sans-serif; }
[dir="rtl"] .ly-line { transform-origin: 100% 50%; }
.ly-line:hover { opacity: .72; }
.ly-line.near { opacity: .52; }
.ly-line.next { opacity: .66; color: var(--text); }
.ly-line.past { opacity: .3; }
.ly-line.active { opacity: 1; color: #fff; transform: scale(1.03); text-shadow: 0 0 22px color-mix(in srgb, var(--c2) 70%, transparent), 0 2px 8px rgba(0, 0, 0, .4); }
.ly-line.active::before { content: ''; position: absolute; inset-inline-start: -14px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform: translateY(-50%); }
.ly-line { position: relative; }
.ly-line.gap { font-size: 15px; letter-spacing: 4px; }
.ly-line.gap.active { animation: lyGap 1.4s ease-in-out infinite; }
@keyframes lyGap { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.ly-line.pre { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
html[lang="fa"] .ly-line.pre, html[lang="ar"] .ly-line.pre { letter-spacing: 0; }
.ly-line.plain { cursor: default; opacity: .8; color: var(--text); font-weight: 600; font-size: 16px; }
.ly-line.plain:hover { opacity: 1; }
.ly-note { font-size: 11px; color: var(--muted); padding: 0 10px 8px; }
.ly-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 20px; }
.ly-empty[hidden] { display: none; }
.ly-empty-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--glass); border: 1px solid var(--line); margin-bottom: 6px; }
.ly-empty.loading .ly-empty-ic { animation: lyPulse 1.2s ease-in-out infinite; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
@keyframes lyPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); } 50% { transform: scale(1.06); box-shadow: 0 0 0 12px transparent; } }
.ly-empty.instrumental .ly-empty-ic { color: var(--c2); }
.ly-empty b { font-size: 14px; font-weight: 800; color: var(--ink); } .ly-empty small { font-size: 12px; color: var(--muted); max-width: 360px; }
.ly-fade { display: none; }
.ly-credit { font-size: 10.5px; color: var(--dim); padding: 2px 10px 6px; }
.ly-credit a { color: var(--muted); font-weight: 700; }
/* sizes */
.lyrics[data-size="1"] .ly-line { font-size: 23px; } .lyrics[data-size="1"] .ly-body { height: 232px; }
.lyrics[data-size="2"] .ly-line { font-size: 28px; line-height: 1.4; } .lyrics[data-size="2"] .ly-body { height: 280px; }
/* collapsed / off */
.lyrics.collapsed .ly-body, .lyrics.collapsed .ly-credit { display: none; }
.lyrics.collapsed .ly-toggle .i, .lyrics.collapsed #lyToggle .i { transform: rotate(180deg); }
.lyrics.off .ly-tools .ly-btn:not(#lyToggle), .lyrics.off .ly-offset { display: none; }
.lyrics.off .ly-body { height: 120px; }
body.playing .lyrics .ly-ic { animation: lyGlow 3s ease-in-out infinite; }
@keyframes lyGlow { 0%, 100% { box-shadow: 0 8px 20px -8px var(--c2); } 50% { box-shadow: 0 10px 28px -6px var(--c1); } }
html.reduce-motion .ly-line, html.reduce-motion .ly-ic { animation: none; transition: none; }
/* ── cinema mode ── */
.ly-cinema { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr auto; background: #06060a; color: #fff; animation: lcIn .4s; }
@keyframes lcIn { from { opacity: 0; } to { opacity: 1; } }
.ly-cinema[hidden] { display: none; }
.lc-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(60px) saturate(1.6) brightness(.35); z-index: 0; animation: lcDrift 40s ease-in-out infinite alternate; }
@keyframes lcDrift { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.15) translate(-2%, 2%); } }
.lc-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, transparent, rgba(6, 6, 10, .55)); }
.lc-close { position: absolute; top: 18px; inset-inline-end: 18px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); backdrop-filter: blur(10px); }
.lc-close:hover { background: rgba(255, 255, 255, .16); }
.lc-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; padding: 22px 28px 0; }
.lc-head img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .8); }
.lc-meta { display: flex; flex-direction: column; min-width: 0; }
.lc-meta b { font-size: 20px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-meta span { font-size: 14px; color: rgba(255, 255, 255, .7); }
.lc-live { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; margin-inline-end: 60px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #ff5c7a; padding: 5px 10px; border-radius: 999px; background: rgba(255, 92, 122, .14); }
.lc-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 10px #ff4d6d; animation: liveDot 1.4s ease-in-out infinite; }
.lc-body { position: relative; z-index: 1; min-height: 0; }
.lc-scroll { height: 100%; overflow-y: auto; scrollbar-width: none; padding: 20vh 8vw 40vh; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent); }
.lc-scroll::-webkit-scrollbar { display: none; }
.lc-lines { gap: 10px; align-items: center !important; text-align: center; width: 100%; }
.lc-lines .ly-line { align-self: center; }
.lc-lines .ly-line { font-size: clamp(22px, 3.4vw, 44px); line-height: 1.35; color: rgba(255, 255, 255, .5); opacity: .32; transform-origin: 50% 50%; padding: 6px 18px; max-width: 1100px; }
.lc-lines .ly-line.near { opacity: .45; } .lc-lines .ly-line.next { opacity: .6; color: #fff; } .lc-lines .ly-line.past { opacity: .25; }
.lc-lines .ly-line.active { opacity: 1; color: #fff; transform: scale(1.05); text-shadow: 0 0 34px color-mix(in srgb, var(--c2) 80%, transparent), 0 0 80px color-mix(in srgb, var(--c1) 45%, transparent), 0 4px 14px rgba(0, 0, 0, .5); }
.lc-lines .ly-line.active::before { display: none; }
.lc-lines .ly-line.plain { font-size: clamp(16px, 2vw, 26px); opacity: .85; }
.lc-foot { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; padding: 0 28px 22px; }
.lc-prog { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.lc-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c1), var(--c2)); transition: width 1s linear; }
.lc-brand .wm { font-family: var(--font-logo); font-weight: 800; font-size: 13px; letter-spacing: 2px; display: inline-flex; gap: .4em; direction: ltr; text-transform: uppercase; }
.lc-brand .wm b { color: #fff; } .lc-brand .wm i { font-style: normal; font-weight: 600; background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.cinema { overflow: hidden; }
@media (max-width: 1023px) { .lyrics { margin: 0 14px; } .ly-title small { max-width: 34vw; } }
@media (max-width: 767px) { .ly-body { height: 168px; } .ly-line { font-size: 17px; } .lyrics[data-size="1"] .ly-line { font-size: 20px; } .lyrics[data-size="2"] .ly-line { font-size: 24px; } .ly-title small { display: none; } .lc-head { padding: 16px 16px 0; } .lc-head img { width: 48px; height: 48px; } .lc-meta b { font-size: 16px; } .lc-live { margin-inline-end: 50px; } .lc-scroll { padding: 16vh 6vw 36vh; } .lc-foot { padding: 0 16px 16px; } }
@media (max-width: 480px) { #lySize, .ly-state span { display: none; } .ly-state { padding: 4px; border-radius: 50%; margin: 0; } }

/* ── warp: arrival animation when returning from Share / Studio / About (?from=…) ── */
.warp { position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: #06060b; display: grid; place-items: center; opacity: 1; transition: opacity .6s ease; perspective: 900px; }
.warp[hidden] { display: none; }
.warp.out { opacity: 0; pointer-events: none; }
.warp-stars { position: absolute; inset: 0; display: block; }
.warp-stars b { position: absolute; left: 50%; top: 50%; width: var(--s, 2px); height: var(--l, 60vmax); margin-left: calc(var(--s, 2px) / -2); transform-origin: top center; transform: rotate(var(--a)) translateY(0) scaleY(0); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c2) 80%, #fff)); border-radius: 2px; opacity: 0; }
.warp.on .warp-stars b { animation: warpStar 1.25s cubic-bezier(.6, 0, .9, .4) var(--d, 0s) both; }
@keyframes warpStar { 0% { transform: rotate(var(--a)) translateY(6vmax) scaleY(0); opacity: 0; } 30% { opacity: .95; } 100% { transform: rotate(var(--a)) translateY(18vmax) scaleY(1.4); opacity: 0; } }
.warp-tunnel { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; }
.warp-tunnel i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c1) 55%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--c1) 25%, transparent), inset 0 0 40px color-mix(in srgb, var(--c2) 18%, transparent); transform: translateZ(-2400px); opacity: 0; }
.warp.on .warp-tunnel i { animation: warpRing 1.5s cubic-bezier(.4, 0, .8, .3) both; }
.warp-tunnel i:nth-child(1) { animation-delay: 0s; } .warp-tunnel i:nth-child(2) { animation-delay: .18s; } .warp-tunnel i:nth-child(3) { animation-delay: .36s; } .warp-tunnel i:nth-child(4) { animation-delay: .54s; } .warp-tunnel i:nth-child(5) { animation-delay: .72s; } .warp-tunnel i:nth-child(6) { animation-delay: .9s; }
@keyframes warpRing { 0% { transform: translateZ(-2400px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateZ(700px); opacity: 0; } }
.warp-core { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; transform: scale(.4); opacity: 0; filter: blur(14px); }
.warp.on .warp-core { animation: warpCore 1.1s var(--spring) .9s both; }
@keyframes warpCore { 0% { transform: scale(.35); opacity: 0; filter: blur(14px); } 55% { transform: scale(1.08); opacity: 1; filter: blur(0); } 100% { transform: scale(1); opacity: 1; filter: blur(0); } }
.warp-emblem { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.warp-emblem img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 20px 70px color-mix(in srgb, var(--c1) 60%, transparent), 0 0 0 1px rgba(255,255,255,.12); animation: warpSpin 8s linear infinite; }
@keyframes warpSpin { to { transform: rotate(360deg); } }
.warp-emblem .ring { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c2) 70%, transparent); opacity: 0; }
.warp.on .warp-emblem .ring { animation: warpPulse 1.6s ease-out 1.5s infinite; }
.warp-emblem .r2 { animation-delay: 1.9s !important; } .warp-emblem .r3 { animation-delay: 2.3s !important; }
@keyframes warpPulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.warp-wm .wm { font-size: clamp(28px, 6vw, 52px); }
.warp-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line-2); backdrop-filter: blur(10px); font-size: 13px; font-weight: 800; color: #fff; opacity: 0; transform: translateY(10px); }
.warp.on .warp-chip { animation: warpChip .6s var(--spring) 1.5s both; }
@keyframes warpChip { to { opacity: 1; transform: none; } }
.warp-chip .i { width: 16px; height: 16px; color: var(--c2); }
.warp-flash { position: absolute; inset: 0; background: radial-gradient(circle at center, #fff, color-mix(in srgb, var(--c2) 70%, #fff) 30%, transparent 70%); opacity: 0; pointer-events: none; }
.warp.on .warp-flash { animation: warpFlash .7s ease-out .85s both; }
@keyframes warpFlash { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: .95; } 100% { opacity: 0; transform: scale(1.6); } }
body.warping .app { opacity: 0; transform: scale(1.06); filter: blur(10px); }
body.warp-landed .app { animation: warpLand 1.1s var(--spring) both; }
@keyframes warpLand { 0% { opacity: 0; transform: scale(1.06); filter: blur(10px); } 100% { opacity: 1; transform: none; filter: none; } }
html.reduce-motion .warp-stars b, html.reduce-motion .warp-tunnel i, html.reduce-motion .warp-emblem img { animation: none !important; }
html.reduce-motion .warp.on .warp-core { animation-delay: 0s; animation-duration: .4s; }

/* ── Mobile drawer (☰) ────────────────────────────────────────── */
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 13px; background: var(--glass); border: 1px solid var(--line); flex-shrink: 0; }
.burger { display: grid; gap: 4.5px; width: 18px; }
.burger i { display: block; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s var(--spring), opacity .2s, width .3s; transform-origin: center; }
.burger i:nth-child(2) { width: 70%; justify-self: start; }
html[dir="rtl"] .burger i:nth-child(2) { justify-self: end; }
.menu-btn.on .burger i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .menu-btn.on .burger i:nth-child(2) { opacity: 0; width: 0; } .menu-btn.on .burger i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 160; width: min(330px, 86vw); padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px)); padding-top: calc(14px + env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: color-mix(in srgb, var(--bg-2, #0d0c16) 88%, transparent); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border-inline-end: 1px solid var(--line); box-shadow: 0 0 80px rgba(0,0,0,.6); transform: translateX(calc(-100% - 40px)); visibility: hidden; transition: transform .5s var(--spring), visibility 0s .5s; display: flex; flex-direction: column; gap: 14px; }
html[dir="rtl"] .drawer { transform: translateX(calc(100% + 40px)); }
.drawer::-webkit-scrollbar { display: none; }
.drawer.show, html[dir="rtl"] .drawer.show { transform: none; visibility: visible; transition: transform .5s var(--spring), visibility 0s; }
.drawer::before { content: ""; position: absolute; inset: -20% -40% auto -40%; height: 60%; background: radial-gradient(60% 60% at 30% 20%, color-mix(in srgb, var(--c1) 28%, transparent), transparent 70%), radial-gradient(50% 50% at 80% 40%, color-mix(in srgb, var(--c2) 18%, transparent), transparent 70%); pointer-events: none; z-index: -1; }
.dr-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility 0s .35s; }
.dr-backdrop.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s, visibility 0s; }
body.drawer-open { overflow: hidden; }
.dr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dr-head .brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .dr-head .brand img { width: 42px; height: 42px; border-radius: 13px; } .dr-head .wordmark { font-size: 15px; } .dr-head .wordmark small { display: block; font-size: 9.5px; color: var(--muted); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.dr-close { width: 40px; height: 40px; background: var(--glass); border: 1px solid var(--line); }
.dr-now { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 22%, transparent), color-mix(in srgb, var(--c2) 12%, transparent)); border: 1px solid color-mix(in srgb, var(--c1) 40%, var(--line)); }
.dr-now[hidden] { display: none; }
.dr-cover { position: relative; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--s1, var(--c1)), var(--s2, var(--c2))); overflow: hidden; flex: 0 0 auto; }
.dr-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dr-cover img[hidden] { display: none; } .dr-cover .i { width: 20px; height: 20px; color: #fff; }
.dr-tx { display: grid; min-width: 0; flex: 1; } .dr-tx b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dr-tx small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-play { position: relative; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #0b0b12; display: grid; place-items: center; flex: 0 0 auto; }
.dr-play .i { position: absolute; width: 18px; height: 18px; fill: currentColor; transition: opacity .2s, transform .3s var(--spring); } .dr-play .s { opacity: 0; transform: scale(.6); } .dr-now.playing .dr-play .s { opacity: 1; transform: none; } .dr-now.playing .dr-play .p { opacity: 0; transform: scale(.6); }
.dr-nav { display: grid; gap: 4px; }
.dr-item { display: flex; align-items: center; gap: 12px; height: 46px; padding-inline: 12px; border-radius: 14px; color: var(--muted); font-weight: 700; font-size: 14.5px; text-align: start; transition: background .2s, color .2s; opacity: 0; transform: translateX(-16px); animation: drIn .5s var(--spring) forwards; animation-delay: calc(var(--i, 0) * 35ms + 80ms); }
html[dir="rtl"] .dr-item { transform: translateX(16px); }
@keyframes drIn { to { opacity: 1; transform: none; } }
.dr-item .i { width: 20px; height: 20px; } .dr-item .cnt { margin-inline-start: auto; font-size: 11px; font-weight: 800; color: var(--muted); padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.06); }
.dr-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 30%, transparent), transparent); color: #fff; box-shadow: inset 3px 0 0 var(--c1); } html[dir="rtl"] .dr-item.active { box-shadow: inset -3px 0 0 var(--c1); }
.dr-item.active .cnt { background: var(--c1); color: #fff; }
.dr-sec h4 { margin: 0 0 8px; padding-inline: 4px; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--dim); font-weight: 800; }
.dr-pages { display: grid; gap: 4px; }
.dr-page { display: flex; align-items: center; gap: 12px; height: 44px; padding-inline: 12px; border-radius: 14px; color: var(--muted); font-weight: 700; font-size: 14px; text-align: start; background: rgba(255,255,255,.03); border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.dr-page .i { width: 19px; height: 19px; } .dr-page .cnt.new { margin-inline-start: auto; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; padding: 3px 7px; border-radius: 999px; background: linear-gradient(120deg, var(--c1), var(--c2)); color: #fff; }
.dr-page:active, .dr-page:hover { color: #fff; background: rgba(255,255,255,.07); border-color: var(--line); }
.dr-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dr-tool { display: grid; justify-items: center; gap: 7px; padding: 12px 6px 10px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--ink-2); font-size: 11px; font-weight: 700; text-align: center; transition: background .2s, transform .2s, border-color .2s; }
.dr-tool .i { width: 20px; height: 20px; color: var(--c2); } .dr-tool:active { transform: scale(.96); } .dr-tool:hover { background: rgba(255,255,255,.08); border-color: color-mix(in srgb, var(--c2) 45%, var(--line)); }
.dr-tool span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dr-langs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.dr-langs button { display: grid; justify-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--muted); font-size: 10.5px; font-weight: 800; transition: background .2s, color .2s, border-color .2s; }
.dr-langs button .i { width: 22px; height: 22px; } .dr-langs button.active { color: #fff; background: color-mix(in srgb, var(--c1) 30%, transparent); border-color: color-mix(in srgb, var(--c1) 60%, var(--line)); }
.dr-recent-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; scroll-snap-type: x proximity; } .dr-recent-list::-webkit-scrollbar { display: none; }
.dr-rc { flex: 0 0 auto; display: grid; justify-items: center; gap: 6px; width: 84px; padding: 8px 6px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--ink-2); font-size: 11px; font-weight: 700; scroll-snap-align: start; }
.dr-rc img, .dr-rc .em { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, var(--s1), var(--s2)); }
.dr-rc b { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dr-rc.active { border-color: var(--c1); color: #fff; }
.dr-foot { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 6px; }
.dr-stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); min-width: 0; }
.dr-stat .i, .dr-stat .pulse-dot { grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--c2); flex: 0 0 auto; } .dr-stat .pulse-dot { width: 10px; height: 10px; }
.dr-stat b { font-size: 15px; line-height: 1.1; min-width: 0; } .dr-stat small { font-size: 10px; line-height: 1.25; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dr-foot .install-btn { grid-column: span 2; justify-content: center; height: 44px; }
.dr-handle { grid-column: span 2; display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 14px; background: #fff; color: #0b0b12; font-family: var(--font-en); font-weight: 900; font-size: 14px; letter-spacing: -.01em; text-decoration: none; }
@media (max-width: 1023px) { .menu-btn { display: grid; place-items: center; } }
@media (min-width: 1024px) { .drawer, .dr-backdrop { display: none !important; } }

/* ── Mobile polish (v4.9) ─────────────────────────────────────── */
@media (max-width: 1023px) {
  .topbar { height: 60px; gap: 8px; }
  .brand-m img { width: 34px; height: 34px; border-radius: 10px; }
  .chips { top: 60px; }
  .footer .footer-links { justify-content: center; }
  .stage-in .badges .badge.live-count b { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 767px) {
  .top-actions #igBtn, .top-actions #settingsBtn { display: none; }   /* moved into the drawer */
  .search input { height: 44px; }
  .section-head { flex-wrap: wrap; gap: 8px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { border-radius: 18px; } .card .art { border-radius: 18px 18px 0 0; }
  .ticker-wrap { margin-inline: 0; }
  .lyrics { margin: 0; }
  .footer { padding-bottom: calc(var(--player-h) + 34px + env(safe-area-inset-bottom, 0px)); }
  .footer .footer-links a { height: 34px; padding: 0 12px; font-size: 12px; }
  .footer .footer-links { flex-wrap: wrap; }
  .splash-rows, .splash { overflow: hidden; }
  .panel { max-height: min(92dvh, 820px); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .mini-player { bottom: calc(var(--player-h) + 10px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
  .main { padding-inline: 12px; } .topbar { margin-inline: -12px; padding-inline: 12px; } .chips { margin-inline: -12px; padding-inline: 12px; }
  .brand-m .wordmark { display: none; }
  .stage-in, html[dir="rtl"] .stage-in { padding: 14px 12px 4px; }
  .disc-wrap { width: min(250px, 66vw); height: min(250px, 66vw); }
  .st-title { font-size: clamp(20px, 6vw, 26px); }
  .ctl { width: 42px; height: 42px; } .ctl.big { width: 60px; height: 60px; }
  .grid { gap: 8px; } .card .name { font-size: 13px; } .card .art .em { font-size: 38px; }
  .chip { height: 34px; padding-inline: 11px; font-size: 12px; }
  .section-head h2 { font-size: 16px; }
  .player-in { padding-inline: 10px; }
  .toast { max-width: calc(100vw - 32px); }
}
@media (max-width: 360px) {
  .dr-tools { grid-template-columns: repeat(2, 1fr); } .dr-langs { grid-template-columns: repeat(3, 1fr); }
  .stage-in .controls { gap: 6px; } .ctl.big { width: 56px; height: 56px; }
  .disc-wrap { width: min(220px, 62vw); height: min(220px, 62vw); }
}

/* ── Your Wrapped (stats panel) ───────────────────────────────── */
.wrap-box { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 26%, #0d0c16), color-mix(in srgb, var(--c2) 14%, #0a0a12)); border: 1px solid color-mix(in srgb, var(--c1) 40%, var(--line)); }
.wrap-box::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c2) 40%, transparent), transparent 70%); pointer-events: none; }
.wrap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wrap-k { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--c2); font-weight: 800; }
.wrap-p { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 20px; font-weight: 900; color: #fff; } .wrap-p .i { color: var(--c2); }
.wrap-d { font-size: 12px; color: var(--muted); margin-top: 2px; }
.wrap-acts { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.btn-mini { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding-inline: 12px; border-radius: 10px; background: #fff; color: #0b0b12; font-weight: 800; font-size: 12px; transition: transform .2s var(--spring), opacity .2s; white-space: nowrap; }
.btn-mini.ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid var(--line); } .btn-mini:active { transform: scale(.96); } .btn-mini.busy { opacity: .5; pointer-events: none; }
.wrap-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wrap-tile { display: grid; gap: 2px; padding: 10px 8px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid var(--line); text-align: center; min-width: 0; }
.wrap-tile b { font-size: 20px; font-weight: 900; } .wrap-tile small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrap-hours { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid var(--line); }
.wrap-hl { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-weight: 700; } .wrap-hl .pk { color: var(--c2); }
.wrap-bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 54px; }
.wrap-bars i { display: block; height: var(--h, 6%); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--c2), color-mix(in srgb, var(--c1) 70%, transparent)); opacity: .85; transform-origin: bottom; animation: wrapBar .7s var(--spring) both; }
.wrap-bars i.pk { background: #fff; box-shadow: 0 0 12px var(--c2); opacity: 1; }
@keyframes wrapBar { from { transform: scaleY(0); } }
.wrap-ax { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); font-family: var(--font-en); font-weight: 700; }
.wrap-preview { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.wrap-preview canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; } .wrap-preview.ready canvas { opacity: 1; }
.wrap-spin { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); } .wrap-spin .i { width: 28px; height: 28px; animation: spin 1s linear infinite; } .wrap-preview.ready .wrap-spin { display: none; }
@media (max-width: 480px) { .wrap-tiles { grid-template-columns: repeat(2, 1fr); } .wrap-head { flex-direction: column; } .wrap-acts { flex-direction: row; } }

/* ── v5.0 announcement bar (published from Studio admin) ── */
.ann-host { position: relative; z-index: 41; }
.ann-host .ann-bar { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 9px 12px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--a1) 28%, transparent), color-mix(in srgb, var(--a2) 14%, transparent)), var(--glass); backdrop-filter: blur(14px); font-size: 13px; opacity: 0; transform: translateY(-10px); transition: opacity .45s, transform .45s cubic-bezier(.2, .9, .2, 1); min-width: 0; }
.ann-host .ann-bar.in { opacity: 1; transform: none; }
.ann-host .ann-bar.out { opacity: 0; transform: translateY(-8px) scale(.98); }
.ann-host .ann-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, .12); flex: none; font-size: 15px; }
.ann-host .ann-tx { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
.ann-host .ann-tx b { font-weight: 900; }
.ann-host .ann-tx > span { color: rgba(255, 255, 255, .8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ann-host .ann-ver { font-style: normal; font-size: 10.5px; font-weight: 900; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.ann-host .ann-cta { padding: 6px 11px; border-radius: 999px; background: #fff; color: #0b0a17; font-weight: 900; font-size: 11.5px; text-decoration: none; flex: none; cursor: pointer; }
.ann-host .ann-x { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 900; cursor: pointer; flex: none; }
@media (max-width: 767px) { .ann-host .ann-bar { padding: 8px 10px; border-radius: 14px; font-size: 12px; } .ann-host .ann-tx > span { white-space: normal; } }

/* ═══════════════════════ v5.1 — Uniq Pick (Spotify playlist station) ═══════════════════════ */
.ctl.queue { position: relative; }
.ctl.queue .uq-src { position: absolute; top: -6px; inset-inline-end: -8px; height: 16px; padding-inline: 5px; border-radius: 999px; font: 800 8.5px/16px var(--font-en); letter-spacing: .5px; color: #0b0b12; background: linear-gradient(135deg, #1DB954, #5eead4); direction: ltr; box-shadow: 0 4px 12px rgba(29, 185, 84, .35); }
.ctl.queue .uq-src:empty { display: none; }
.ctl.queue .uq-src[data-k="30s"] { background: linear-gradient(135deg, #fbbf24, #f97316); }
.ctl.queue .uq-src[data-k="SPOTIFY"] { background: linear-gradient(135deg, #1DB954, #16a34a); color: #fff; }
.ctl.queue .uq-src[data-k="SOUNDCLOUD"] { background: linear-gradient(135deg, #f97316, #dc2626); color: #fff; }
.card .pick.uniq, .card[data-id="uniq"] .pick { background: linear-gradient(135deg, #1DB954, #a855f7); color: #fff; }
.card[data-id="uniq"] .art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 20%, rgba(29, 185, 84, .35), transparent 70%); pointer-events: none; }
body.is-playlist .progress .bar, body.is-playlist .pl-prog { cursor: pointer; }
body.is-playlist .progress .bar { height: 7px; transition: height .2s var(--ease); }
body.is-playlist .progress .bar:hover { height: 9px; }
body.is-playlist .pl-prog { height: 5px; }
body.is-playlist .pl-prog i { transition: width .25s linear; }
body.is-playlist .progress .fill { transition: width .25s linear; }
body.is-playlist #liveBadge { display: none; }
body.is-playlist #bitrateBadge { display: none; }

.uniq-panel { width: min(680px, 100%); }
.uq-body { gap: 12px; }
.uq-head { display: flex; gap: 16px; align-items: center; min-width: 0; }
.uq-cover { position: relative; flex: none; width: 112px; height: 112px; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #1DB954, #a855f7); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px var(--line); }
.uq-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uq-cover-badge { position: absolute; bottom: 6px; inset-inline-end: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #ff5500; color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.uq-cover-badge .i { width: 16px; height: 16px; }
.uq-info { min-width: 0; flex: 1; display: grid; gap: 4px; }
.uq-kicker { font: 800 10px/1 var(--font-en); letter-spacing: 1.6px; color: #1DB954; direction: ltr; text-align: start; }
.uq-name { font: 900 30px/1.05 var(--font-en); letter-spacing: -.5px; direction: ltr; text-align: start; background: linear-gradient(90deg, #fff, #c9ffe0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uq-meta { color: var(--muted); font-size: 12.5px; }
.uq-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.uq-open { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding-inline: 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #06110a; background: #1DB954; text-decoration: none; transition: transform .2s var(--spring), box-shadow .2s; }
.uq-open:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(29, 185, 84, .35); }
.uq-tgl { position: relative; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); background: rgba(255, 255, 255, .04); transition: all .2s var(--ease); }
.uq-tgl .i { width: 15px; height: 15px; }
.uq-tgl.on { color: #1DB954; border-color: rgba(29, 185, 84, .5); background: rgba(29, 185, 84, .12); }
.uq-tgl b { position: absolute; top: -4px; inset-inline-end: -3px; font: 800 9px/14px var(--font-en); min-width: 14px; border-radius: 7px; background: #1DB954; color: #000; text-align: center; }
.uq-tgl b:empty { display: none; }
.uq-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.uq-mode-btn { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 14px; text-align: start; color: var(--muted); transition: all .25s var(--ease); min-width: 0; }
.uq-mode-btn .i { flex: none; width: 18px; height: 18px; }
.uq-mode-btn span { display: grid; min-width: 0; }
.uq-mode-btn b { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uq-mode-btn small { font-size: 10.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uq-mode-btn.on { color: #06110a; background: linear-gradient(135deg, #fff, #d7ffe6); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.uq-mode-btn.on b, .uq-mode-btn.on small { color: #06110a; }
#uqModeSpotify.on { background: linear-gradient(135deg, #ff5500, #ff8a3d); }
.uq-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); background: rgba(255, 255, 255, .04); border: 1px dashed var(--line-2); }
.uq-note .i { flex: none; margin-top: 3px; color: #1DB954; }
.uq-note[data-kind="notePreview"] { border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .06); }
.uq-note[data-kind="notePreview"] .i { color: #fbbf24; }
.uq-note:empty { display: none; }
.uq-embed { position: relative; min-height: 80px; border-radius: 14px; overflow: hidden; background: #121212; }
.uq-embed iframe { display: block; width: 100%; height: 80px; border: 0; }
.uq-embed.plain iframe { height: 152px; }
.uq-embed-wait { position: absolute; inset: 0; display: grid; place-items: center; background: #121212; }
.uq-embed-wait .spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .15); border-top-color: #1DB954; animation: rot .9s linear infinite; }
.uq-embed.ready .uq-embed-wait { display: none; }
.uq-filter { position: relative; display: flex; align-items: center; gap: 10px; height: 42px; padding-inline: 14px; border-radius: 13px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--muted); }
.uq-filter input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; font-size: 13.5px; }
.uq-list { display: grid; gap: 2px; max-height: 42vh; overflow: auto; overscroll-behavior: contain; padding: 2px; margin-inline: -4px; scrollbar-width: thin; border-radius: 14px; }
.uq-row { display: grid; grid-template-columns: 30px 44px 1fr auto auto auto auto; align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px; border-radius: 13px; cursor: pointer; transition: background .2s, transform .2s var(--ease); position: relative; }
.uq-row:hover { background: rgba(255, 255, 255, .06); }
.uq-row:active { transform: scale(.995); }
.uq-row .uq-n { font-size: 12px; color: var(--dim); text-align: center; }
.uq-row .uq-eq { display: none; align-items: flex-end; justify-content: center; gap: 2px; height: 16px; }
.uq-row .uq-eq i { width: 3px; height: 100%; border-radius: 2px; background: #1DB954; transform-origin: bottom; animation: uqEq 1s ease-in-out infinite; }
.uq-row .uq-eq i:nth-child(2) { animation-delay: -.35s; } .uq-row .uq-eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes uqEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.uq-row.on { background: linear-gradient(90deg, rgba(29, 185, 84, .18), rgba(168, 85, 247, .1)); box-shadow: inset 0 0 0 1px rgba(29, 185, 84, .35); }
.uq-row.on .uq-n { display: none; } .uq-row.on .uq-eq { display: flex; }
body:not(.playing) .uq-row.on .uq-eq i { animation-play-state: paused; }
.uq-row.on .uq-tx b { color: #4ade80; }
.uq-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: linear-gradient(135deg, #1DB954, #a855f7); box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.uq-tx { display: grid; min-width: 0; gap: 2px; }
.uq-tx b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uq-tx small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uq-e { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 3px; font: 800 9px/1 var(--font-en); font-style: normal; color: #000; background: #a3a3ba; vertical-align: 1px; margin-inline-start: 4px; }
.uq-d { font-size: 12px; color: var(--muted); }
.uq-full { display: none; height: 18px; padding-inline: 6px; border-radius: 6px; font: 800 9px/18px var(--font-en); letter-spacing: .6px; color: #06110a; background: #1DB954; }
.uq-row[data-src="full"] .uq-full { display: inline-block; }
.uq-empty { padding: 26px; text-align: center; color: var(--dim); }
@media (max-width: 600px) {
  .uq-head { gap: 12px; } .uq-cover { width: 86px; height: 86px; border-radius: 16px; } .uq-name { font-size: 24px; }
  .uq-mode-btn small { display: none; } .uq-mode-btn { min-height: 44px; }
  .uq-row { grid-template-columns: 24px 40px 1fr auto auto; } .uq-row .uq-ir { display: none; } .uq-row .uq-full { position: absolute; top: 6px; inset-inline-end: 10px; height: 14px; line-height: 14px; font-size: 8px; } .uq-row[data-src="full"] .uq-tx { padding-inline-end: 40px; } .uq-thumb { width: 40px; height: 40px; }
  .uq-list { max-height: 46vh; }
}

/* ═══════════════════════ v5.1 — tab-in-tab pages (Share / Studio / About / Social inside the site) ═══════════════════════ */
.pages { position: fixed; inset: 0; z-index: 900; display: grid; grid-template-rows: auto 1fr; background: #06060b; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .38s var(--ease), transform .45s var(--ease); contain: strict; }
.pages.in { opacity: 1; transform: none; }
.pages[hidden] { display: none; }
body.page-open { overflow: hidden; }
body.page-open .mini-player, body.page-open .toasts { z-index: 950; }
.pg-strip { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 10px; padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box; background: linear-gradient(180deg, rgba(14, 14, 24, .98), rgba(10, 10, 18, .96)); border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.pg-strip::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), var(--c1), transparent); opacity: .6; }
.pg-home { flex: none; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px 0 6px; border-radius: 999px; color: var(--ink); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); transition: background .2s, transform .2s var(--spring); max-width: 46vw; }
html[dir="rtl"] .pg-home { padding: 0 6px 0 14px; }
.pg-home:hover { background: rgba(255, 255, 255, .1); transform: translateX(-2px); }
html[dir="rtl"] .pg-home:hover { transform: translateX(2px); }
.pg-orb { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #06060b; background: conic-gradient(from 0deg, var(--c1), var(--accent), #fff, var(--c1)); animation: pgOrb 6s linear infinite; box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent); }
.pg-orb .i { width: 16px; height: 16px; animation: pgOrbRev 6s linear infinite; }
html[dir="rtl"] .pg-orb .i { transform: scaleX(-1); animation: pgOrbRevRtl 6s linear infinite; }
@keyframes pgOrb { to { transform: rotate(360deg); } }
@keyframes pgOrbRev { to { transform: rotate(-360deg); } }
@keyframes pgOrbRevRtl { from { transform: scaleX(-1) rotate(0deg); } to { transform: scaleX(-1) rotate(360deg); } }
.pg-home-tx { display: grid; line-height: 1.1; text-align: start; min-width: 0; }
.pg-home-tx b { font: 900 12px/1.1 var(--font-en); letter-spacing: 1.2px; direction: ltr; }
.pg-home-tx small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-tabs { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; height: 100%; padding-inline: 2px; }
.pg-tabs::-webkit-scrollbar { display: none; }
.pg-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 14px; border-radius: 12px 12px 0 0; color: var(--muted); background: rgba(255, 255, 255, .03); border: 1px solid transparent; border-bottom: 0; font-size: 13px; font-weight: 600; max-width: 200px; transition: all .25s var(--ease); align-self: flex-end; }
html[dir="rtl"] .pg-tab { padding: 0 14px 0 8px; }
.pg-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
.pg-tab.on { color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .06)); border-color: var(--line-2); height: 42px; }
.pg-tab.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--c1)); }
.pg-tab .i { flex: none; }
.pg-tab.on .i { color: var(--accent); }
.pg-x { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--dim); transition: all .2s; }
.pg-x:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.pg-plus { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--line-2); transition: all .2s; }
.pg-plus:hover { color: var(--ink); border-style: solid; background: rgba(255, 255, 255, .06); }
.pg-plus.all { opacity: .4; }
.pg-frames { position: relative; min-height: 0; background: #06060b; }
.pg-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #06060b; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.pg-frame.on { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
.pg-loading { position: absolute; left: 0; right: 0; top: calc(56px + env(safe-area-inset-top, 0px)); height: 2px; overflow: hidden; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 3; }
.pg-loading span { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), var(--c1), transparent); animation: pgLoad 1.1s ease-in-out infinite; }
@keyframes pgLoad { from { left: -40%; } to { left: 100%; } }
.pages.loading .pg-loading { opacity: 1; }
.pg-menu { position: absolute; top: calc(60px + env(safe-area-inset-top, 0px)); inset-inline-end: 12px; z-index: 5; display: grid; gap: 4px; min-width: 200px; padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--bg-2) 92%, var(--c1) 8%); border: 1px solid var(--line-2); box-shadow: var(--shadow); opacity: 0; transform: translateY(-6px) scale(.96); transform-origin: top; transition: opacity .2s, transform .25s var(--spring); }
.pg-menu.in { opacity: 1; transform: none; }
.pg-menu button { display: flex; align-items: center; gap: 10px; height: 42px; padding-inline: 12px; border-radius: 11px; color: var(--ink); font-size: 13.5px; font-weight: 600; text-align: start; transition: background .2s; }
.pg-menu button:hover { background: rgba(255, 255, 255, .08); }
.pg-menu button .i { color: var(--accent); }
@media (max-width: 600px) {
  .pg-strip { height: 52px; gap: 6px; padding-inline: 8px; }
  .pg-home { max-width: 44vw; padding-inline-end: 10px; } .pg-home-tx b { font-size: 11px; } .pg-home-tx small { display: none; }
  .pg-tab { padding-inline-start: 10px; font-size: 12px; max-width: 128px; } .pg-tab .i { width: 14px; height: 14px; }
  .pg-loading { top: calc(52px + env(safe-area-inset-top, 0px)); }
}
/* playlist mode: "LIVE" chips become "PLAYLIST" (the Uniq Pick is on-demand, not a live stream) */
body.is-playlist .tb-live b, body.is-playlist .mp-live > span, body.is-playlist .lc-live > span { font-size: 0; }
body.is-playlist .tb-live b::after, body.is-playlist .mp-live > span::after, body.is-playlist .lc-live > span::after { content: 'PLAYLIST'; font-size: 10px; letter-spacing: .8px; }
body.is-playlist .tb-live i, body.is-playlist .mp-live i, body.is-playlist .lc-live i { background: #1DB954; box-shadow: 0 0 10px #1DB954; animation: none; }

/* ── v5.1.1: in-panel transport bar for Uniq Pick ── */
.uq-now{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;margin:10px 0 6px;padding:10px 12px;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.uq-now[hidden]{display:none}
.uq-now-art{width:48px;height:48px;border-radius:12px;object-fit:cover;background:rgba(255,255,255,.06);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.uq-now-tx{display:flex;flex-direction:column;min-width:0;gap:2px}
.uq-now-tx b{font-weight:800;font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uq-now-tx small{opacity:.72;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uq-now-st{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6;font-weight:700}
.uq-now[data-state="playing"] .uq-now-st{color:var(--accent,#d946ef);opacity:.95}
.uq-now[data-state="error"] .uq-now-st{color:#ff6b6b;opacity:.95}
.uq-now-ctl{display:flex;align-items:center;gap:6px}
.uq-ctl{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:inherit;display:grid;place-items:center;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s}
.uq-ctl:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.uq-ctl:active{transform:scale(.94)}
.uq-ctl.big{width:46px;height:46px;border:0;background:linear-gradient(135deg,var(--accent,#d946ef),var(--accent2,#6366f1));color:#fff;box-shadow:0 8px 22px -6px var(--accent,#d946ef)}
.uq-ctl.big .i{width:20px;height:20px}
.uq-ctl.big.loading{animation:uqPulse 1.1s ease-in-out infinite}
@keyframes uqPulse{0%,100%{box-shadow:0 0 0 0 rgba(217,70,239,.45)}50%{box-shadow:0 0 0 10px rgba(217,70,239,0)}}
html[dir="rtl"] .uq-ctl .i{transform:scaleX(-1)}
html[dir="rtl"] .uq-ctl.big .i{transform:none}
@media (max-width:560px){.uq-now{grid-template-columns:42px minmax(0,1fr) auto;gap:8px;padding:8px 10px}.uq-now-art{width:42px;height:42px}.uq-ctl{width:34px;height:34px}.uq-ctl.big{width:42px;height:42px}}

/* ── v5.1.2: static host (Cloudflare Pages) — server-only sections pause gracefully ── */
.host-note{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(250,204,21,.12),rgba(217,70,239,.08));border:1px dashed rgba(250,204,21,.45);color:#fde68a;font-size:.84rem;line-height:1.6}
.host-note[hidden]{display:none}
.host-note .i{flex:none;color:#facc15}
html.static-host .ig-form,html.static-host .ig-result,html.static-host .ig-steps{opacity:.42;pointer-events:none;filter:saturate(.6)}

/* ═══════════════════════════════════════════════════════════════════════════
   v5.2 — playlists first · radio behind a button · playlist switcher · Spotify-mode volume lock · lite mode
   ═══════════════════════════════════════════════════════════════════════════ */
/* playlist shelf */
.pl-shelf { margin-top: 26px; }
.pl-shelf .section-head h2 .i { color: #1DB954; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.pl-card .art { aspect-ratio: 1; }
.pl-card .art img { opacity: 0; }
.pl-card .art img.loaded { opacity: 1; }
.pl-card .art::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(5, 5, 10, .55)); }
.pl-card .pill { top: auto; bottom: 12px; inset-inline-start: 12px; }
.pl-card.active.is-playing .pill { display: none; }
.pl-card .name .sub.pl-sub { display: inline-flex; align-items: center; gap: 4px; font: 800 9.5px/1 var(--font-en); letter-spacing: 1.2px; color: #1DB954; direction: ltr; }
.pl-card .name .sub.pl-sub .i { width: 12px; height: 12px; }
.pl-card .pl-now { min-height: 18px; }
.pl-card .pl-cnt { direction: ltr; text-align: start; }
html[dir="rtl"] .pl-card .pl-cnt { direction: rtl; }
/* radio section behind a button */
.browse.radio { margin-top: 30px; }
.radio-toggle { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--line); color: var(--text); text-align: start; cursor: pointer; transition: background .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s; position: relative; overflow: hidden; }
.radio-toggle::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 18%, transparent), transparent 55%); opacity: .7; pointer-events: none; }
@media (hover: hover) { .radio-toggle:hover { background: var(--glass-2); border-color: color-mix(in srgb, var(--c1) 45%, var(--line)); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); } }
.radio-toggle .rt-ic { position: relative; flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 10px 24px color-mix(in srgb, var(--c1) 40%, transparent); }
.radio-toggle .rt-ic .i { width: 22px; height: 22px; }
.radio-toggle .rt-tx { position: relative; display: grid; gap: 3px; min-width: 0; flex: 1; }
.radio-toggle .rt-tx b { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.radio-toggle .rt-tx small { font-size: 12px; color: var(--muted); }
.radio-toggle .rt-cnt { position: relative; flex: none; height: 30px; min-width: 30px; padding-inline: 10px; border-radius: 999px; display: grid; place-items: center; font: 800 13px/1 var(--font-en); background: color-mix(in srgb, var(--c1) 22%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent); }
.radio-toggle .rt-chev { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); transition: transform .35s var(--spring), color .25s; }
.radio-toggle .rt-chev .i { width: 18px; height: 18px; }
body.radio-open .radio-toggle .rt-chev { transform: rotate(180deg); color: var(--ink); }
body.radio-open .radio-toggle { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.radio-body { display: none; padding-top: 16px; }
body.radio-open .radio-body { display: block; animation: radioIn .45s var(--ease) both; }
@keyframes radioIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* playlist switcher inside the panel */
.uq-switch { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.uq-switch::-webkit-scrollbar { display: none; }
.uq-sw { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; scroll-snap-align: center; transition: all .22s var(--ease); }
html[dir="rtl"] .uq-sw { padding: 4px 4px 4px 12px; }
.uq-sw img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--s1), var(--s2)); flex: none; }
.uq-sw.on { color: #04110a; background: linear-gradient(135deg, #fff, #d7ffe6); border-color: transparent; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
@media (hover: hover) { .uq-sw:hover:not(.on) { color: var(--ink); border-color: color-mix(in srgb, var(--s1) 50%, var(--line)); background: rgba(255, 255, 255, .08); } }
/* Spotify mode: the ATLAS volume sliders are parked (the embed has no volume API) */
body.vol-locked .vol, body.vol-locked .mp-vol { opacity: .38; }
body.vol-locked .vol input[type=range], body.vol-locked .mp-vol { cursor: not-allowed; }
/* lite mode (phones by default): no backdrop blur, lighter ambient, fewer infinite animations */
html.lite .topbar, html.lite .player, html.lite .backdrop, html.lite .dtb, html.lite .lang-menu, html.lite .lc-close, html.lite .warp-chip, html.lite .drawer, html.lite .dr-backdrop, html.lite .ann-host .ann-bar, html.lite .splash-center, html.lite .panel, html.lite .mini-player, html.lite .toast { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.lite .ambient .cover-bg { filter: blur(30px) saturate(1.3) brightness(.4); }
html.lite .ambient .orb { filter: blur(40px); animation: none !important; }
html.lite .stage-bg { filter: blur(24px) saturate(1.5) brightness(.55); }
html.lite .stage-blob { filter: blur(30px); animation: none !important; }
html.lite .disc-glow { filter: blur(12px); }
html.lite .tb-aurora i { animation: none !important; filter: blur(18px); }
html.lite .card, html.lite .pl-card { animation: none; transition: transform .2s, border-color .2s; }
html.lite .card.active::before { animation: none !important; background: linear-gradient(135deg, var(--s1), var(--s2)); }
html.lite .browse, html.lite .pl-shelf, html.lite .ig { content-visibility: auto; contain-intrinsic-size: auto 600px; }
html.lite .ig::after { animation: none !important; filter: blur(8px); }
html.lite .ly-line { transition: opacity .2s, color .2s, transform .2s; text-shadow: none; }
@media (max-width: 767px) {
  .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pl-card .body { padding: 10px 11px 12px; }
  .pl-card .name { font-size: 14px; }
  .radio-toggle { padding: 12px 12px; gap: 10px; }
  .radio-toggle .rt-ic { width: 40px; height: 40px; border-radius: 12px; }
  .radio-toggle .rt-tx b { font-size: 15px; }
  .radio-toggle .rt-tx small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .radio-toggle .rt-chev { width: 30px; height: 30px; }
}
@media (min-width: 1400px) { .pl-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
.uq-kicker.rtl { direction: rtl; font-family: var(--font-fa); letter-spacing: 0; font-size: 11px; }
.uq-name.rtl { direction: rtl; font-family: var(--font-fa); letter-spacing: 0; font-size: 27px; line-height: 1.3; }
.nav-item.pl-nav .i, .dr-item.pl-nav .i { color: #1DB954; }
.nav-item.pl-nav .cnt, .dr-item.pl-nav .cnt { background: rgba(29, 185, 84, .16); color: #4ade80; }
.pl-shelf.flash .section-head h2 { animation: shelfFlash 1.2s var(--ease); }
@keyframes shelfFlash { 0% { text-shadow: 0 0 0 transparent; } 30% { text-shadow: 0 0 24px rgba(29, 185, 84, .9); } 100% { text-shadow: 0 0 0 transparent; } }


/* ══ v5.3 ─ sidebar: fixed brand + stats, scrollable middle (nav · pages · recents) — nothing can squash or overlap any more ═══ */
.sidebar { overflow: hidden; gap: 0; }
.sidebar > * { flex-shrink: 0; }
.sidebar .brand { margin-bottom: 6px; }
.side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; display: flex; flex-direction: column; gap: 6px; margin-inline: -6px; padding-inline: 6px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); padding-bottom: 28px; }
.side-scroll::-webkit-scrollbar { display: none; }
.side-scroll > * { flex-shrink: 0; }
.side-scroll .nav-item, .side-scroll .side-st { min-height: 44px; }
.side-scroll .side-st { min-height: 48px; }
.side-foot { padding-top: 10px; }
@media (max-height: 760px) { .side-scroll .nav-item { height: 40px; min-height: 40px; font-size: 13.5px; } .side-scroll .side-st { height: 42px; min-height: 42px; } .side-scroll .side-st .cv { width: 30px; height: 30px; } .sidebar { padding-top: 14px; } .sidebar .brand { margin-bottom: 2px; } }
@media (max-height: 640px) { .side-foot { display: none; } }

/* ══ v5.3 ─ Song Finder (replaces the Telegram section): editorial header, big search bar ═══ */
.ig.finder { padding: 26px 28px 28px; content-visibility: auto; contain-intrinsic-size: auto 420px; }
.ig.finder::before { background: radial-gradient(70% 90% at 0% 0%, rgba(217, 70, 239, .18), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(244, 63, 94, .14), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)); }
.ig.finder::after { background: conic-gradient(from 0deg, #d946ef, #f43f5e, #fb923c, #a855f7, #d946ef); opacity: .35; }
.fd-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 22px; align-items: center; margin-bottom: 22px; }
.fd-orb { position: relative; width: 84px; height: 84px; border-radius: 28px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af); box-shadow: 0 18px 44px -12px rgba(221, 42, 123, .6), inset 0 1px 0 rgba(255, 255, 255, .35); }
.fd-orb .i { width: 40px; height: 40px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3)); }
.fd-ring { position: absolute; inset: -8px; border-radius: 34px; border: 1.5px solid rgba(221, 42, 123, .45); animation: fdRing 2.8s ease-out infinite; pointer-events: none; }
.fd-ring.r2 { animation-delay: 1.4s; }
@keyframes fdRing { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } }
.fd-tx { min-width: 0; }
.fd-kicker { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-en); font-size: 10.5px; font-weight: 800; letter-spacing: 2.2px; color: #f0abfc; padding: 4px 10px; border-radius: 999px; background: rgba(217, 70, 239, .12); border: 1px solid rgba(217, 70, 239, .3); margin-bottom: 10px; }
.fd-kicker .i { color: #f9a8d4; }
html[lang="fa"] .fd-kicker, html[lang="ar"] .fd-kicker { font-family: inherit; letter-spacing: 0; font-size: 11.5px; }
.fd-tx h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; letter-spacing: -.4px; line-height: 1.15; background: linear-gradient(90deg, #fff, #fbcfe8 60%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fd-tx p { margin-top: 8px; font-size: 13.5px; line-height: 1.75; color: var(--muted); max-width: 640px; }
.fd-steps { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.fd-steps > span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
html[dir="rtl"] .fd-steps > span { padding: 6px 6px 6px 12px; }
.fd-steps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: linear-gradient(135deg, #dd2a7b, #8134af); font-weight: 800; }
.ig.finder .ig-input input { height: 60px; font-size: 15.5px; padding-inline-start: 50px; padding-inline-end: 54px; }
.ig.finder .ig-input input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ig.finder .ig-input > .i { inset-inline-start: 18px; width: 22px; height: 22px; }
.ig.finder .ig-go { height: 60px; min-width: 150px; border-radius: 18px; }
.ig-status { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.ig-status[hidden] { display: none; }
.ig-wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.ig-wave i { width: 3px; border-radius: 2px; background: linear-gradient(180deg, #f0abfc, #dd2a7b); height: 6px; animation: igWave 1s ease-in-out infinite; }
.ig-wave i:nth-child(2) { animation-delay: -.2s; } .ig-wave i:nth-child(3) { animation-delay: -.4s; } .ig-wave i:nth-child(4) { animation-delay: -.6s; } .ig-wave i:nth-child(5) { animation-delay: -.8s; }
@keyframes igWave { 0%, 100% { height: 5px; } 50% { height: 18px; } }
.ig-btn { color: #fff !important; background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); border-color: transparent; box-shadow: 0 8px 22px rgba(221, 42, 123, .35); }
.ig-btn:hover { filter: brightness(1.08); }
@media (max-width: 720px) {
  .ig.finder { padding: 20px 16px 22px; }
  .fd-hero { grid-template-columns: 1fr; gap: 14px; text-align: center; justify-items: center; }
  .fd-steps { justify-content: center; }
  .fd-orb { width: 72px; height: 72px; border-radius: 24px; } .fd-orb .i { width: 34px; height: 34px; }
  .ig.finder .ig-form { flex-direction: column; } .ig.finder .ig-go { width: 100%; height: 54px; } .ig.finder .ig-input input { height: 54px; font-size: 15px; }
}
html.reduce-motion .fd-ring, html.lite .fd-ring { animation: none; opacity: .4; }

/* ══ v5.3 ─ volume: lock badge in Spotify mode, hardware-only hint on iOS ═══ */
.vol { position: relative; }
body.vol-locked .vol::after { content: ''; position: absolute; inset-inline-end: -5px; top: -7px; width: 17px; height: 17px; border-radius: 50%; background: #1DB954 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062b14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/10px no-repeat; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); pointer-events: none; }
body.vol-hw .vol input[type=range] { opacity: .55; }

/* ══ v5.3 ─ perf: off-screen sections are skipped by layout/paint; cheaper blur on big surfaces; paused bar look ═══ */
.pl-shelf, .browse, .ig { content-visibility: auto; contain-intrinsic-size: auto 560px; }
.ig { contain-intrinsic-size: auto 420px; }
body:not(.playing) .prog .fill, body:not(.playing) #progFill { opacity: .55; }
img.cv, .card img, .side-st .cv img { content-visibility: auto; }

/* ══ v5.3 ─ playlist shelf: grouped swipe rows ═══ */
.pl-grid.grouped { display: flex; flex-direction: column; gap: 22px; }
.pl-row { min-width: 0; }
.pl-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding-inline: 2px; }
.pl-row-head h3 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; color: var(--text); letter-spacing: -.1px; }
.pl-row-head h3 .i { color: #1DB954; }
.pl-row-head h3 em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--dim); background: var(--glass); border: 1px solid var(--line); padding: 1px 8px; border-radius: 999px; }
.pl-row-nav { display: flex; gap: 6px; }
.pl-arrow { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--glass); border: 1px solid var(--line); transition: background .2s, color .2s, transform .15s; }
.pl-arrow:hover { background: var(--glass-2); color: var(--text); transform: translateY(-1px); }
.pl-arrow:active { transform: scale(.94); }
html[dir="rtl"] .pl-arrow .i { transform: scaleX(-1); }
.pl-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 180px; justify-content: start; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 2px 10px; margin: -4px -2px -6px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
html[dir="rtl"] .pl-strip { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); }
.pl-strip::-webkit-scrollbar { display: none; }
.pl-strip > .card { scroll-snap-align: start; width: 100%; }
@media (min-width: 1200px) { .pl-strip { grid-auto-columns: 198px; } }
@media (max-width: 720px) { .pl-strip { grid-auto-columns: 152px; gap: 10px; } .pl-row-nav { display: none; } .pl-grid.grouped { gap: 18px; } .pl-row-head h3 { font-size: 13.5px; } }

/* ══ v5.3 ─ page links always visible: compact 2×2 grid under the brand; categories + recents scroll underneath ═══ */
.side-pages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 2px 0 10px; }
.side-pages .nav-item { flex-direction: column; justify-content: center; height: 58px; min-height: 58px; padding: 0 4px; gap: 6px; font-size: 10.5px; font-weight: 700; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); color: var(--muted); min-width: 0; text-decoration: none; text-align: center; }
.side-pages .nav-item > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.side-pages .nav-item .cnt { display: none; }
.side-pages .nav-item .i { width: 20px; height: 20px; flex: none; }
.side-pages .nav-item:hover { color: var(--text); }
.side-pages .nav-item.nav-ig { border-color: rgba(217, 70, 239, .35); color: var(--text); }
.side-pages .nav-item:hover { background: var(--glass-2); transform: translateY(-1px); }
.side-pages .nav-item.nav-ig { margin-top: 0; }
.side-pages .nav-item.nav-studio .i { color: #fbbf24; } .side-pages .nav-item.nav-about .i { color: #7dd3fc; } .side-pages .nav-item.nav-social .i { color: #86efac; }
.side-foot { grid-template-columns: 1fr 1fr; gap: 6px; }
.side-stat { padding: 9px 10px; gap: 9px; min-width: 0; }
.side-stat .v { font-size: 14px; } .side-stat .k { font-size: 10px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-stat > div { min-width: 0; }
.side-stat .i { width: 18px; height: 18px; flex: none; }

/* ══ v5.3.1 ─ direct entry: no start gate; intro splash off by default (Settings → Intro) ═══ */
.splash.hide.instant { transition: opacity .35s ease, visibility .35s; }
body.needs-tap .disc-state .state { animation: tapPulse 1.6s ease-in-out infinite; }
@keyframes tapPulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* ── v5.4: YouTube full-length player lives in the hero in place of the disc ───────────── */
.yt-host { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 16 / 9; transform: translate(-50%, -50%) scale(.92); border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 70px color-mix(in srgb, var(--c1) 35%, transparent); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease), transform .6s var(--spring); z-index: 3; }
.yt-host[hidden] { display: block; }
.yt-frame { position: absolute; inset: 0; }
.yt-frame iframe, .yt-frame > div { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
body.yt-live .yt-host { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
body.yt-live .disc, body.yt-live .disc-state { opacity: 0; pointer-events: none; transition: opacity .35s; }
body.yt-live .disc-glow { opacity: .55; width: 90%; height: 60%; border-radius: 30px; }
body.yt-live.is-loading .yt-host::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%); animation: ytShimmer 1.4s linear infinite; pointer-events: none; }
@keyframes ytShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.uq-mode-btn#uqModeYt.on { border-color: rgba(255, 70, 70, .55); background: linear-gradient(135deg, rgba(255, 0, 0, .18), rgba(124, 58, 237, .16)); }
.uq-mode-btn#uqModeYt .i { color: #ff4e45; }
.uq-note[data-kind="noteYoutube"] .i { color: #ff4e45; }
#uqSrc[data-k="YOUTUBE"] { background: linear-gradient(135deg, #ff0000, #7c3aed); color: #fff; }
@media (max-width: 1023px) { .yt-host { border-radius: 18px; } }

/* ── v5.5: fixed black · purple · blue ambience (dynamic cover theme off) ─────────────── */
html.theme-fixed .ambient .cover-bg, html.theme-fixed .stage-bg { opacity: 0 !important; }
html.theme-fixed .ambient::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 15% 0%, rgba(124, 58, 237, .32), transparent 60%), radial-gradient(50% 45% at 90% 10%, rgba(59, 130, 246, .26), transparent 60%), radial-gradient(60% 50% at 50% 100%, rgba(124, 58, 237, .18), transparent 65%); animation: fixedGlow 16s ease-in-out infinite alternate; pointer-events: none; }
@keyframes fixedGlow { from { transform: translate3d(0, 0, 0) scale(1); opacity: .85; } to { transform: translate3d(-2%, 2%, 0) scale(1.08); opacity: 1; } }
html.theme-fixed .stage { background: linear-gradient(160deg, #110c24 0%, #0b0a18 45%, #090e1f 100%); }

/* ── v5.5: lyrics — karaoke card redesign ─────────────────────────────────────────────── */
.lyrics { margin: 12px 26px 0; padding: 2px 18px 10px; border: 1px solid rgba(255, 255, 255, .09); border-top-color: rgba(255, 255, 255, .14); border-radius: 26px; background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 16%, transparent), color-mix(in srgb, var(--c2) 9%, transparent) 55%, rgba(255, 255, 255, .025)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .35); overflow: hidden; isolation: isolate; }
.lyrics::before { content: ''; position: absolute; width: 360px; height: 360px; inset-inline-end: -140px; top: -200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c1) 45%, transparent), transparent 68%); filter: blur(30px); opacity: .7; z-index: -1; pointer-events: none; }
.lyrics::after { content: ''; position: absolute; width: 300px; height: 300px; inset-inline-start: -120px; bottom: -200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c2) 40%, transparent), transparent 68%); filter: blur(34px); opacity: .55; z-index: -1; pointer-events: none; }
.ly-head { padding: 14px 4px 6px; }
.ly-ic { width: 38px; height: 38px; border-radius: 13px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; border: 0; box-shadow: 0 8px 22px color-mix(in srgb, var(--c1) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); position: relative; }
.ly-ic .i { width: 18px; height: 18px; }
body.playing .ly-ic::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid color-mix(in srgb, var(--c2) 70%, transparent); animation: lyRing 1.8s ease-out infinite; pointer-events: none; }
@keyframes lyRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.ly-title b { font-size: 14px; letter-spacing: .8px; text-transform: uppercase; background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--c2) 70%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ly-title small { font-size: 11.5px; }
.ly-btn { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.ly-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.ly-offset { background: rgba(255, 255, 255, .06); border-radius: 8px; padding: 4px 6px; min-width: 46px; }
.ly-state { padding: 4px 10px 4px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .25); letter-spacing: .6px; }
.ly-state.synced { background: linear-gradient(135deg, rgba(74, 222, 128, .18), rgba(34, 211, 238, .12)); }
.ly-body { height: 214px; }
.ly-scroll { padding: 64px 8px 84px; mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); }
.ly-lines { align-items: center; text-align: center; gap: 6px; }
.ly-line { font-size: 22px; line-height: 1.45; font-weight: 800; letter-spacing: -.012em; color: rgba(255, 255, 255, .34); opacity: 1; padding: 6px 16px; border-radius: 16px; transform-origin: 50% 50%; filter: blur(.35px); transition: color .4s, filter .4s, transform .5s var(--spring), opacity .4s, background .4s; }
.ly-line:hover { opacity: 1; color: rgba(255, 255, 255, .62); filter: none; }
.ly-line.past { color: rgba(255, 255, 255, .2); opacity: 1; filter: blur(.5px); }
.ly-line.near { opacity: 1; color: rgba(255, 255, 255, .42); }
.ly-line.next { opacity: 1; color: rgba(255, 255, 255, .58); filter: none; }
.ly-line.active { opacity: 1; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c1) 55%, transparent)) drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); transform: scale(1.07); color: #fff; background: linear-gradient(92deg, #fff 0%, color-mix(in srgb, var(--c2) 55%, #fff) 50%, #fff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
.ly-line.active::before { display: none; }
.ly-line.active::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 42%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 0 14px color-mix(in srgb, var(--c2) 70%, transparent); transform: translateX(-50%); animation: lyUnderline .6s var(--spring) both; }
@keyframes lyUnderline { from { width: 0; opacity: 0; } to { width: 42%; opacity: 1; } }
.ly-line.gap { font-size: 15px; letter-spacing: 6px; color: rgba(255, 255, 255, .4); filter: none; }
.ly-line.gap.active { -webkit-text-fill-color: currentColor; color: var(--accent); background: none; }
.ly-line.gap.active::after { display: none; }
.ly-line.pre { font-size: 12.5px; letter-spacing: 3px; font-weight: 800; color: rgba(255, 255, 255, .45); filter: none; }
.ly-line.pre.active { -webkit-text-fill-color: currentColor; color: var(--accent); background: none; transform: none; }
.ly-line.pre.active::after { display: none; }
.ly-line.plain { font-size: 17.5px; font-weight: 600; line-height: 1.7; color: rgba(255, 255, 255, .78); filter: none; opacity: 1; padding: 3px 14px; }
.ly-line.plain:hover { color: #fff; }
.ly-note { text-align: center; padding: 0 10px 10px; letter-spacing: .3px; }
.ly-empty b { background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--c2) 60%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ly-empty-ic { background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 35%, transparent), color-mix(in srgb, var(--c2) 25%, transparent)); border: 1px solid rgba(255, 255, 255, .12); }
.ly-credit { text-align: center; padding: 4px 10px 8px; }
.lyrics[data-size="1"] .ly-line { font-size: 26px; } .lyrics[data-size="1"] .ly-body { height: 250px; }
.lyrics[data-size="2"] .ly-line { font-size: 31px; line-height: 1.35; } .lyrics[data-size="2"] .ly-body { height: 300px; }
.lyrics[data-size="1"] .ly-line.plain { font-size: 19px; } .lyrics[data-size="2"] .ly-line.plain { font-size: 22px; }
.lyrics.off .ly-body { height: 130px; }
@media (max-width: 1023px) { .lyrics { margin: 10px 14px 0; padding: 0 12px 8px; border-radius: 22px; } .ly-line { font-size: 20px; padding: 5px 10px; } .lyrics[data-size="1"] .ly-line { font-size: 23px; } .lyrics[data-size="2"] .ly-line { font-size: 27px; } }

/* ── v5.6: music-reactive background (desktop) — the purple/blue theme stays, the cover glow breathes underneath ── */
html.theme-fixed .ambient::before { display: none; }
html.theme-fixed .ambient::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(60% 50% at 15% 0%, rgba(124, 58, 237, .32), transparent 60%), radial-gradient(50% 45% at 90% 10%, rgba(59, 130, 246, .26), transparent 60%), radial-gradient(60% 50% at 50% 100%, rgba(124, 58, 237, .18), transparent 65%); animation: fixedGlow 16s ease-in-out infinite alternate; pointer-events: none; }
html.theme-fixed:not(.bg-motion) .ambient .cover-bg, html.theme-fixed:not(.bg-motion) .stage-bg, html:not(.bg-motion) .ambient .cover-bg { opacity: 0 !important; }
html.bg-motion.theme-fixed body.has-art .ambient .cover-bg { opacity: .55 !important; }
html.bg-motion .ambient .cover-bg { transform: scale(var(--pulse, 1)); transition: opacity 1.4s ease, transform .22s ease-out; will-change: transform; }
html.bg-motion.theme-fixed .stage-bg { opacity: .35 !important; }
html.bg-motion .stage-blob.b1 { animation-duration: 12s; } html.bg-motion .stage-blob.b2 { animation-duration: 15s; }
html:not(.bg-motion) .stage-blob { animation: none !important; } html:not(.bg-motion) .ambient::after { animation: none !important; }

/* ── v5.6: phones & tablets — heavy animations off (no lag); every item is still switchable in Settings ── */
html.lite .stage-blob, html.lite .disc-glow, html.lite .lyrics::before, html.lite .lyrics::after, html.lite .ambient .cover-bg, html.lite .stage-bg, html.lite .ly-ic::after, html.lite .ambient .orb { display: none !important; }
html.lite .ambient::after, html.lite .ambient::before { animation: none !important; }
html.lite .disc, html.lite .splash-row, html.lite .splash-card, html.lite .yt-host::after, html.lite .tb-aurora, html.lite .ly-line.active::after, html.lite .heart-beat, html.lite .ig-wave i, html.lite .mini-player::before { animation: none !important; }
html.lite .ly-line, html.lite .ly-line.active { filter: none !important; }
html.lite .ly-line { transition: color .2s, transform .25s, opacity .2s; }
html.lite .ly-line.active { -webkit-text-fill-color: #fff; background: none; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
html.lite .ly-line.active::after { animation: none; width: 42%; opacity: 1; }
html.lite .lyrics { background: rgba(255, 255, 255, .035); box-shadow: none; }
html.lite .yt-host { transition: opacity .3s; }
html.lite .card, html.lite .pl-card, html.lite .uq-row, html.lite .side-st, html.lite .dr-st { transition: none; }
html.lite .card img, html.lite .pl-card img { transition: opacity .3s; }
html.lite .stage { box-shadow: none; }
html.lite .disc { box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
html.lite .splash-bg, html.lite .splash-center { filter: none !important; }
html.lite .lc-bg { filter: blur(20px) brightness(.35) !important; }
html.lite .toast, html.lite .panel, html.lite .drawer, html.lite .mini-player, html.lite .topbar, html.lite .player { background-color: rgba(10, 8, 22, .96); }
html.lite .btn-pulse, html.lite .pulse, html.lite .glow { animation: none !important; }
html.lite .pl-card:hover, html.lite .card:hover { transform: none; }
html.lite * { scroll-behavior: auto !important; }

/* ═══════════ v5.7 — ATLAS PICK: hero card on top of the shelf + full-screen mode ═══════════ */
.pick-hero { --s1: #7c3aed; --s2: #3b82f6; position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; min-height: 250px; cursor: pointer; background: #0a0814; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 90px -36px rgba(124, 58, 237, .8), 0 0 0 1px rgba(124, 58, 237, .12); transition: transform .5s var(--ease), box-shadow .5s var(--ease); contain: layout paint; }
.pick-hero:hover { transform: translateY(-3px); box-shadow: 0 46px 110px -36px rgba(124, 58, 237, .95), 0 0 0 1px rgba(167, 139, 250, .35); }
.pick-hero:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }
.pick-hero .ph-ring { position: absolute; inset: -1px; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ph-a, 0deg), #7c3aed, #3b82f6, #ec4899, #a78bfa, #7c3aed); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; animation: phRing 7s linear infinite; }
@property --ph-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes phRing { to { --ph-a: 360deg; } }
.pick-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 80% at 8% 20%, rgba(124, 58, 237, .45), transparent 60%), radial-gradient(50% 70% at 40% 110%, rgba(59, 130, 246, .35), transparent 60%), radial-gradient(40% 50% at 70% 0%, rgba(236, 72, 153, .22), transparent 60%); animation: phGlow 9s ease-in-out infinite alternate; }
@keyframes phGlow { from { opacity: .7; transform: translateX(-2%); } to { opacity: 1; transform: translateX(2%); } }
.ph-covers { position: absolute; inset-block: -14%; inset-inline-end: -6%; width: 58%; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-content: center; transform: rotate(-9deg) scale(1.1); pointer-events: none; }
.ph-covers img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 24px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); opacity: .92; animation: phFloat 6.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); background: linear-gradient(135deg, #2a1d5e, #0f1a3a); }
@keyframes phFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.ph-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, #0a0814 34%, rgba(10, 8, 20, .82) 54%, rgba(10, 8, 20, .25) 76%, rgba(10, 8, 20, .05)); }
html[dir="rtl"] .ph-shade { background: linear-gradient(270deg, #0a0814 34%, rgba(10, 8, 20, .82) 54%, rgba(10, 8, 20, .25) 76%, rgba(10, 8, 20, .05)); }
.ph-body { position: relative; z-index: 4; padding: 28px 30px 26px; display: grid; gap: 11px; max-width: 62%; justify-items: start; }
.ph-kicker { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; font: 800 10px/1 var(--font-en); letter-spacing: 1.8px; text-transform: uppercase; color: #ddd6fe; background: rgba(124, 58, 237, .18); border: 1px solid rgba(167, 139, 250, .35); direction: ltr; }
.ph-kicker .i { width: 12px; height: 12px; color: #c4b5fd; }
.ph-title { font: 900 clamp(36px, 5vw, 60px)/.95 var(--font-en); letter-spacing: -2px; color: #fff; direction: ltr; text-align: start; margin: 2px 0 0; text-shadow: 0 10px 40px rgba(124, 58, 237, .45); }
.ph-title b { font-weight: 900; background: linear-gradient(92deg, #a78bfa 0%, #60a5fa 55%, #f472b6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 24px rgba(96, 165, 250, .35)); }
.ph-sub { font-size: 13.5px; line-height: 1.7; color: var(--muted); max-width: 52ch; margin: 0; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-chip { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #ece8ff; white-space: nowrap; }
.ph-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 4px; width: 100%; }
.ph-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; font: 800 13px/1 inherit; font-family: inherit; color: #fff; border: 1px solid transparent; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, background .25s, filter .25s; }
.ph-btn .i { width: 16px; height: 16px; }
.ph-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.ph-open { background: linear-gradient(135deg, #7c3aed, #3b82f6); box-shadow: 0 14px 34px -12px rgba(124, 58, 237, 1); }
html[dir="rtl"] .ph-open .i { transform: scaleX(-1); }
.ph-mix { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.pick-hero.mix-on .ph-mix { background: linear-gradient(135deg, #ec4899, #7c3aed); border-color: transparent; box-shadow: 0 14px 34px -12px rgba(236, 72, 153, .9); }
.pick-hero.mix-on.is-playing .ph-mix .i { animation: phSpinIcon 2.4s linear infinite; }
@keyframes phSpinIcon { to { transform: rotate(360deg); } }
.ph-stat { font-size: 11.5px; color: var(--dim); margin-inline-start: auto; direction: ltr; white-space: nowrap; }
.pick-hero.mix-on .ph-kicker { background: rgba(236, 72, 153, .18); border-color: rgba(244, 114, 182, .4); color: #fbcfe8; }
@media (max-width: 860px) {
  .pick-hero { min-height: 0; border-radius: 22px; }
  .ph-covers { inset: 0; width: 100%; grid-template-columns: repeat(4, 1fr); transform: none; gap: 8px; opacity: .55; align-content: start; }
  .ph-covers img { border-radius: 12px; }
  .ph-shade { background: linear-gradient(180deg, rgba(10, 8, 20, .35), rgba(10, 8, 20, .9) 45%, #0a0814 70%); }
  html[dir="rtl"] .ph-shade { background: linear-gradient(180deg, rgba(10, 8, 20, .35), rgba(10, 8, 20, .9) 45%, #0a0814 70%); }
  .ph-body { max-width: 100%; padding: 92px 18px 18px; gap: 9px; }
  .ph-title { font-size: clamp(34px, 11vw, 46px); }
  .ph-sub { font-size: 12.5px; }
  .ph-chips .ph-chip:nth-child(n+7) { display: none; }
  .ph-btn { height: 40px; padding: 0 15px; font-size: 12.5px; }
  .ph-stat { flex-basis: 100%; margin: 0; }
}
/* phones (lite): no ring spin, no float, no glow drift */
html.lite .pick-hero .ph-ring, html.reduce-motion .pick-hero .ph-ring { animation: none; opacity: .7; }
html.lite .pick-hero::before, html.reduce-motion .pick-hero::before { animation: none; }
html.lite .ph-covers img, html.reduce-motion .ph-covers img { animation: none; }
html.lite .pick-hero, html.lite .pick-hero:hover { transform: none; transition: none; box-shadow: none; }
html.lite .ph-title { text-shadow: none; } html.lite .ph-title b { filter: none; }

/* ── the mode ── */
.pick-layer { position: fixed; inset: 0; z-index: 150; background: #06060b; display: grid; grid-template-rows: auto 1fr; opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .38s var(--ease), transform .45s var(--ease); contain: strict; }
.pick-layer.in { opacity: 1; transform: none; }
.pick-layer::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 50% at 20% 0%, rgba(124, 58, 237, .22), transparent 60%), radial-gradient(60% 50% at 90% 10%, rgba(59, 130, 246, .16), transparent 60%); }
body.pick-open { overflow: hidden; }
body.pick-open .player { z-index: 155; }
body.pick-open .mini-player, body.pick-open .toasts { z-index: 158; }
body.pick-open .backdrop, body.pick-open .panel { z-index: 170; }
body.pick-open .drawer { z-index: 175; }
.pk-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; border-bottom: 1px solid var(--line); background: rgba(6, 6, 11, .78); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.pk-back { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); color: #fff; cursor: pointer; font-family: inherit; transition: background .25s, transform .25s; }
html[dir="rtl"] .pk-back { padding: 0 4px 0 14px; }
.pk-back:hover { background: var(--glass-2); transform: translateX(-2px); }
html[dir="rtl"] .pk-back:hover { transform: translateX(2px); }
.pk-back .pg-orb { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; box-shadow: 0 8px 22px -8px var(--c1); }
.pk-back .pg-orb .i { width: 18px; height: 18px; }
html[dir="rtl"] .pk-back .pg-orb .i { transform: scaleX(-1); }
.pk-back-tx { display: grid; line-height: 1.15; text-align: start; }
.pk-back-tx b { font: 900 12.5px/1.1 var(--font-en); letter-spacing: 1.5px; direction: ltr; }
.pk-back-tx small { font-size: 10.5px; color: var(--dim); }
.pk-brand { display: grid; line-height: 1.15; }
.pk-brand b { font: 900 18px/1 var(--font-en); letter-spacing: -.4px; color: #fff; direction: ltr; }
.pk-brand b i { font-style: normal; background: linear-gradient(92deg, #a78bfa, #60a5fa, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pk-brand small { font-size: 11px; color: var(--dim); direction: ltr; text-align: start; }
.pk-search { position: relative; margin-inline-start: auto; display: flex; align-items: center; }
.pk-search .i { position: absolute; inset-inline-start: 12px; width: 16px; height: 16px; color: var(--dim); pointer-events: none; }
.pk-search input { height: 40px; width: min(300px, 34vw); border-radius: 999px; padding: 0 14px; padding-inline-start: 36px; background: var(--glass); border: 1px solid var(--line); color: #fff; font: 600 13px/1 inherit; font-family: inherit; outline: none; transition: border-color .25s, background .25s; }
.pk-search input:focus { border-color: color-mix(in srgb, var(--c1) 70%, transparent); background: var(--glass-2); }
.pk-search input::placeholder { color: var(--dim); }
.pk-mix { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); color: #fff; font: 800 12.5px/1 inherit; font-family: inherit; cursor: pointer; transition: background .25s, transform .25s, box-shadow .25s; white-space: nowrap; }
.pk-mix .i { width: 16px; height: 16px; }
.pk-mix:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .12); }
.pk-mix.on { background: linear-gradient(135deg, #ec4899, #7c3aed); border-color: transparent; box-shadow: 0 14px 34px -12px rgba(236, 72, 153, .9); }
body.playing .pk-mix.on .i { animation: phSpinIcon 2.4s linear infinite; }
.pk-scroll { position: relative; z-index: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 16px calc(var(--player-h, 86px) + 40px + env(safe-area-inset-bottom, 0px)); scrollbar-width: thin; }
.pk-wrap { max-width: 1240px; margin: 0 auto; display: grid; gap: 28px; }
.pk-banner { position: relative; overflow: hidden; border-radius: 26px; padding: 30px 32px; background: linear-gradient(135deg, rgba(124, 58, 237, .22), rgba(59, 130, 246, .12) 55%, rgba(236, 72, 153, .14)); border: 1px solid rgba(255, 255, 255, .09); isolation: isolate; }
.pk-blob { position: absolute; border-radius: 50%; filter: blur(48px); opacity: .6; z-index: -1; pointer-events: none; }
.pk-blob.a { width: 360px; height: 360px; inset-inline-end: -80px; top: -160px; background: #7c3aed; animation: pkBlob 10s ease-in-out infinite alternate; }
.pk-blob.b { width: 280px; height: 280px; inset-inline-start: 20%; bottom: -200px; background: #3b82f6; animation: pkBlob 13s ease-in-out infinite alternate-reverse; }
@keyframes pkBlob { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 30px) scale(1.15); } }
.pk-banner-tx { display: grid; gap: 10px; justify-items: start; max-width: 70ch; }
.pk-banner .ph-title { font-size: clamp(34px, 4.6vw, 54px); }
.pk-sec h3 { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 800; color: var(--text); margin: 0 0 12px; padding-inline: 2px; }
.pk-sec h3 .i { width: 18px; height: 18px; color: #a78bfa; }
.pk-sec h3 em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--dim); background: var(--glass); border: 1px solid var(--line); padding: 1px 8px; border-radius: 999px; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 14px; }
.pk-tile { --s1: var(--c1); --s2: var(--c2); position: relative; border-radius: 20px; overflow: hidden; background: var(--glass); border: 1px solid var(--line); cursor: pointer; isolation: isolate; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; animation: cardIn .5s var(--ease) both; }
.pk-tile:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--s1) 65%, transparent); box-shadow: 0 24px 50px -24px var(--s1); }
.pk-tile:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.pk-tile.active { border-color: color-mix(in srgb, var(--s1) 80%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--s1) 45%, transparent), 0 22px 48px -22px var(--s1); }
.pk-art { position: relative; aspect-ratio: 1; background: linear-gradient(135deg, color-mix(in srgb, var(--s1) 60%, #000), color-mix(in srgb, var(--s2) 60%, #000)); overflow: hidden; }
.pk-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s, transform .6s var(--ease); }
.pk-art img.loaded { opacity: 1; }
.pk-tile:hover .pk-art img { transform: scale(1.06); }
.pk-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(5, 5, 10, .6)); }
.pk-em { position: absolute; top: 9px; inset-inline-start: 9px; z-index: 2; width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; background: rgba(6, 6, 11, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .1); }
.pk-tile.is-playing .pk-em { display: none; }
.pk-eq { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; display: none; align-items: flex-end; gap: 3px; height: 18px; padding: 4px 7px; border-radius: 8px; background: rgba(6, 6, 11, .6); box-sizing: content-box; }
.pk-tile.is-playing .pk-eq { display: flex; }
.pk-eq i { width: 3px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #fff, var(--s1)); transform-origin: bottom; animation: pkEq .9s ease-in-out infinite; }
.pk-eq i:nth-child(2) { animation-delay: -.3s; } .pk-eq i:nth-child(3) { animation-delay: -.6s; } .pk-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes pkEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.pk-go { position: absolute; z-index: 2; inset-inline-end: 10px; bottom: 10px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--s1), var(--s2)); box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .3s, transform .3s var(--ease); }
.pk-go .i { width: 20px; height: 20px; }
.pk-go .i-pause { display: none; }
.pk-tile.is-playing .pk-go .i-pause { display: block; } .pk-tile.is-playing .pk-go .i-play { display: none; }
.pk-tile:hover .pk-go, .pk-tile.active .pk-go, .pk-tile:focus-visible .pk-go { opacity: 1; transform: none; }
.pk-tx { padding: 10px 12px 12px; display: grid; gap: 3px; min-width: 0; }
.pk-tx b { font-size: 13.5px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-tx small { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-sec .empty, #pickSections .empty { padding: 60px 0; text-align: center; color: var(--muted); }
@media (max-width: 860px) {
  .pk-top { flex-wrap: wrap; gap: 8px 10px; padding-inline: 12px; }
  .pk-back { height: 40px; }
  .pk-back-tx small { display: none; }
  .pk-brand small { display: none; }
  .pk-brand b { font-size: 16px; }
  .pk-mix { margin-inline-start: auto; height: 38px; padding: 0 13px; font-size: 12px; }
  .pk-search { order: 5; flex: 1 1 100%; margin: 0; }
  .pk-search input { width: 100%; height: 38px; }
  .pk-scroll { padding: 12px 12px calc(var(--player-h, 86px) + 36px + env(safe-area-inset-bottom, 0px)); }
  .pk-wrap { gap: 22px; }
  .pk-banner { padding: 20px 18px; border-radius: 20px; }
  .pk-banner .ph-title { font-size: clamp(30px, 9vw, 40px); }
  .pk-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  .pk-tile { border-radius: 16px; }
  .pk-go { opacity: 1; transform: none; width: 34px; height: 34px; inset-inline-end: 8px; bottom: 8px; }
  .pk-go .i { width: 16px; height: 16px; }
  .pk-tx { padding: 8px 10px 10px; } .pk-tx b { font-size: 12.5px; } .pk-tx small { font-size: 10.5px; }
}
/* phones (lite): solid bar, no blur, no blobs, no tile motion */
html.lite .pk-top { background: rgba(6, 6, 11, .97); backdrop-filter: none; -webkit-backdrop-filter: none; }
html.lite .pk-blob { display: none; }
html.lite .pk-tile, html.lite .pk-tile:hover { transform: none; transition: none; box-shadow: none; animation: none; }
html.lite .pk-art img { transition: opacity .25s; } html.lite .pk-tile:hover .pk-art img { transform: none; }
html.lite .pk-em { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.lite .pick-layer { transition: opacity .2s; transform: none; }
html.reduce-motion .pk-blob, html.reduce-motion .pk-eq i, html.reduce-motion .pk-mix.on .i { animation: none; }
body.pick-open .player, body.pick-open .toasts { inset-inline-start: 0; }
.pk-banner .ph-covers { inset-block: -30%; width: 52%; z-index: 0; }
.pk-banner .ph-shade { z-index: 0; background: linear-gradient(90deg, #0b0916 30%, rgba(11, 9, 22, .85) 50%, rgba(11, 9, 22, .2) 74%, rgba(11, 9, 22, 0)); }
html[dir="rtl"] .pk-banner .ph-shade { background: linear-gradient(270deg, #0b0916 30%, rgba(11, 9, 22, .85) 50%, rgba(11, 9, 22, .2) 74%, rgba(11, 9, 22, 0)); }
.pk-banner-tx { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .pk-banner .ph-covers { inset: 0; width: 100%; opacity: .45; }
  .pk-banner .ph-shade { background: linear-gradient(180deg, rgba(11, 9, 22, .4), rgba(11, 9, 22, .92) 50%, #0b0916 75%); }
  html[dir="rtl"] .pk-banner .ph-shade { background: linear-gradient(180deg, rgba(11, 9, 22, .4), rgba(11, 9, 22, .92) 50%, #0b0916 75%); }
  .pk-banner-tx { padding-top: 70px; }
  .pk-grid { grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); }
}

/* ═══════════ v5.8 — lyrics: formal & clean (no glow, no gradient text, no blobs) ═══════════ */
.lyrics { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .09); border-top-color: rgba(255, 255, 255, .12); border-radius: 22px; box-shadow: none; }
.lyrics::before, .lyrics::after { display: none; }
.ly-head { padding: 12px 4px 4px; border-bottom: 1px solid rgba(255, 255, 255, .06); margin-bottom: 2px; }
.ly-ic { width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); box-shadow: none; color: #fff; }
.ly-ic .i { width: 16px; height: 16px; }
body.playing .ly-ic::after { display: none; }
.ly-title b { font-size: 12px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: #fff; }
.ly-title small { font-size: 11px; color: var(--dim); }
.ly-btn { background: transparent; border: 1px solid rgba(255, 255, 255, .08); border-radius: 9px; }
.ly-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); transform: none; }
.ly-offset { background: transparent; border: 1px solid rgba(255, 255, 255, .08); }
.ly-state { background: transparent; border-color: rgba(255, 255, 255, .12); letter-spacing: 1px; font-size: 9.5px; }
.ly-state.synced { background: transparent; }
.ly-body { height: 206px; }
.ly-scroll { mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.ly-lines { gap: 2px; }
.ly-line { font-size: 20px; line-height: 1.6; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, .3); filter: none; background: none; padding: 5px 14px; border-radius: 0; transform-origin: 50% 50%; text-shadow: none; transition: color .35s, transform .4s var(--ease), opacity .3s; }
.ly-line:hover { color: rgba(255, 255, 255, .62); filter: none; }
.ly-line.past { color: rgba(255, 255, 255, .22); filter: none; }
.ly-line.near { color: rgba(255, 255, 255, .4); }
.ly-line.next { color: rgba(255, 255, 255, .56); }
.ly-line.active { color: #fff; font-weight: 700; filter: none; text-shadow: none; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; transform: scale(1.025); }
.ly-line.active::after, .ly-line.active::before { display: none; }
.ly-line.gap { font-size: 13px; letter-spacing: 5px; color: rgba(255, 255, 255, .3); }
.ly-line.gap.active, .ly-line.pre.active { color: rgba(255, 255, 255, .85); transform: none; }
.ly-line.pre { font-size: 11.5px; letter-spacing: 2.5px; font-weight: 700; color: rgba(255, 255, 255, .4); }
.ly-line.plain { font-size: 17px; font-weight: 500; line-height: 1.75; color: rgba(255, 255, 255, .74); }
.ly-note { color: var(--dim); letter-spacing: .2px; }
.ly-empty b { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: #fff; }
.ly-empty-ic { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.lyrics[data-size="1"] .ly-line { font-size: 24px; } .lyrics[data-size="2"] .ly-line { font-size: 28px; line-height: 1.4; }
/* cinema layer: same restraint */
.lc-lines .ly-line { text-shadow: none; filter: none; }
.lc-lines .ly-line.active { text-shadow: 0 2px 14px rgba(0, 0, 0, .45); filter: none; background: none; -webkit-text-fill-color: currentColor; color: #fff; transform: scale(1.04); }
.lc-lines .ly-line.active::after { display: none; }
html.lite .ly-line.active { text-shadow: none; }

/* ═══════════ v5.8 — ATLAS PICK hero: the five picks in one row ═══════════ */
.ph-covers { grid-template-columns: repeat(5, 1fr); gap: 10px; width: 56%; inset-block: auto; top: 50%; transform: translateY(-50%) rotate(-7deg) scale(1.08); }
.ph-covers img:nth-child(odd) { translate: 0 14px; }
@media (max-width: 860px) {
  .ph-covers { inset: 0; top: 0; width: 100%; transform: none; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 10px 10px 0; align-content: start; opacity: .6; }
  .ph-covers img:nth-child(odd) { translate: none; }
  .ph-covers img { border-radius: 10px; }
  .ph-shade { background: linear-gradient(180deg, rgba(10, 8, 20, .1), rgba(10, 8, 20, .88) 24%, #0a0814 40%); }
  html[dir="rtl"] .ph-shade { background: linear-gradient(180deg, rgba(10, 8, 20, .1), rgba(10, 8, 20, .88) 24%, #0a0814 40%); }
  .ph-body { padding: 96px 16px 16px; }
  .ph-chips .ph-chip:nth-child(n+7) { display: inline-flex; }
  .pk-banner .ph-covers { padding: 10px 10px 0; opacity: .5; }
  .pk-banner-tx { padding-top: 66px; }
}

/* ═══════════ v5.8 — phone layout fixes ═══════════ */
@media (max-width: 720px) {
  /* playlist cards: name on its own line, badge under it — no more “Atlas …” / “PLAY” clipping */
  .pl-card .name { flex-direction: column; align-items: flex-start; gap: 3px; }
  .pl-card .name .n { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; font-size: 13.5px; }
  .pl-card .name .sub.pl-sub { font-size: 9px; letter-spacing: 1px; }
  html[dir="rtl"] .pl-card .name { align-items: flex-end; }
  .pl-strip { grid-auto-columns: 158px; }
  /* lyrics header: title + state on the first line, tools on their own line */
  .ly-head { flex-wrap: wrap; gap: 8px 10px; padding: 10px 2px 6px; }
  .ly-title { flex: 1 1 auto; }
  .ly-title small { max-width: 52vw; }
  .ly-tools { flex: 0 0 auto; width: 100%; justify-content: flex-end; gap: 6px; }
  .ly-tools .ly-state { margin-inline-end: auto; }
  .ly-btn { width: 32px; height: 32px; }
  .ly-line { font-size: 18.5px; line-height: 1.55; padding: 4px 8px; }
  .ly-line.plain { font-size: 16px; }
  .lyrics[data-size="1"] .ly-line { font-size: 21px; } .lyrics[data-size="2"] .ly-line { font-size: 24px; }
  /* ticker: station name was clipped by the ON AIR pill */
  .ticker .tick:first-child, .ticker-wrap .tick:first-child { margin-inline-start: 8px; }
  /* bottom bar on phones: no clipping of the title block */
  .player .pl-title, .player .pl-artist { max-width: calc(100vw - 230px); }
}
@media (max-width: 720px) {
  /* ATLAS PICK layer top bar on phones: one tidy row (icon-only mix button), search below */
  .pk-top { flex-wrap: wrap; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; }
  .pk-top .pk-brand { flex: 1 1 auto; min-width: 0; }
  .pk-top .pk-mix { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 12px; }
  .pk-top .pk-mix span { display: none; }
  .pk-top .pk-search { flex: 1 1 100%; order: 9; }
}

/* v5.9: SoundCloud stations → ATLAS engine only */
body.pl-sc .uq-mode { display: none; }
/* v6.0: official SoundCloud player (server-free fallback) */
.uq-embed.sc { min-height: 20px; background: transparent; border-radius: 10px; }
.uq-embed.sc iframe.uq-sc { height: 20px; }
.uq-embed.sc .uq-embed-wait { background: rgba(18, 18, 18, .8); }
.uq-embed.sc .uq-embed-wait .spin { border-top-color: #f97316; }
body.uq-widget .uq-embed { margin-top: 6px; }
/* v6.1: blocked autoplay → the SoundCloud bar grows so its own play button is easy to tap */
body.uq-tap .uq-embed.sc iframe.uq-sc { height: 86px; }
.uq-embed { scroll-margin: 110px 0 140px; }
body.uq-tap .uq-embed.sc { outline: 2px solid rgba(249, 115, 22, .85); outline-offset: 2px; animation: uqTapPulse 1.3s ease-in-out infinite; }
@keyframes uqTapPulse { 0%, 100% { outline-color: rgba(249, 115, 22, .25); } 50% { outline-color: rgba(249, 115, 22, .95); } }
html.reduce-motion body.uq-tap .uq-embed.sc { animation: none; }

/* ═══ v6.3 — Persian-script names (rare: names are Latin by default) are set in Vazirmatn, never in a per-glyph fallback ═══ */
.fa-text, .fa-text * { font-family: var(--font-fa) !important; letter-spacing: 0 !important; unicode-bidi: plaintext; line-height: 1.55; }
#npTitleText.fa-text { font-weight: 800; }
.uq-row .uq-tx b.fa-text { font-weight: 700; }
.mp-title span.fa-text, #npArtist.fa-text, .uq-now-artist.fa-text { font-weight: 600; }

/* ── v6.4 Liked Songs: song-level hearts ───────────────────────────────────────── */
.uq-like { width: 30px; height: 30px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--dim); display: grid; place-items: center; cursor: pointer; transition: color .2s, transform .2s var(--ease), background .2s, border-color .2s, opacity .2s; opacity: .55; }
.uq-like .i { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transition: fill .2s, transform .2s var(--ease); }
.uq-row:hover .uq-like, .uq-like:focus-visible { opacity: 1; }
.uq-like:hover { color: #fb7185; background: rgba(251, 113, 133, .12); border-color: rgba(251, 113, 133, .35); transform: scale(1.08); }
.uq-like.on { opacity: 1; color: #fb7185; }
.uq-like.on .i { fill: currentColor; filter: drop-shadow(0 0 6px rgba(251, 113, 133, .55)); }
.uq-like.burst .i { animation: likePop .55s var(--ease) both; }
@keyframes likePop { 0% { transform: scale(.6); } 45% { transform: scale(1.35); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
.uq-like.burst::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(251, 113, 133, .7); animation: likeRing .6s ease-out both; pointer-events: none; }
@keyframes likeRing { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
html.mobile .uq-like, html.lite .uq-like { opacity: .85; }
.ctl.like, .uq-ctl.like { position: relative; opacity: 1; width: auto; }
.ctl.like { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: inherit; }
.ctl.like .i { width: 20px; height: 20px; stroke-width: 1.8; }
.ctl.like .note, .pl-like-m .note { position: absolute; right: 7px; bottom: 5px; font: 800 9px/1 var(--font-en); color: currentColor; font-style: normal; opacity: .8; }
.ctl.like.on, .uq-ctl.like.on { color: #fb7185; border-color: rgba(251, 113, 133, .45); background: rgba(251, 113, 133, .14); box-shadow: 0 0 18px rgba(251, 113, 133, .25); }
.ctl.like.on .i, .uq-ctl.like.on .i { fill: currentColor; }
.ctl.like:disabled, .uq-ctl.like:disabled { opacity: .35; cursor: default; }
.uq-ctl.like { width: 36px; height: 36px; }
body:not(.is-playlist) #btnLike, body:not(.is-playlist) #plLike { display: none; }
.uq-empty-liked { display: grid; justify-items: center; gap: 8px; padding: 34px 18px; text-align: center; }
.uq-empty-liked .i { width: 34px; height: 34px; color: #fb7185; fill: none; stroke: currentColor; stroke-width: 1.6; filter: drop-shadow(0 0 10px rgba(251, 113, 133, .45)); animation: heartbeat 1.6s ease-in-out infinite; }
.uq-empty-liked b { font-size: 15px; } .uq-empty-liked span { font-size: 12.5px; color: var(--muted); max-width: 300px; line-height: 1.7; }
.pl-card[data-id="liked"] .art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(190, 18, 60, .55), rgba(244, 114, 182, .25)); mix-blend-mode: screen; pointer-events: none; z-index: 1; }
.pl-card[data-id="liked"] .em { z-index: 2; }
@media (max-width: 640px) { .ctl.like { width: 44px; height: 44px; } .ctl.like .note { right: 5px; bottom: 4px; } .uq-row .uq-like { opacity: .8; } }
.pl-center .ctl.like { width: 40px; height: 40px; }
.pl-center .ctl.like .note { right: 5px; bottom: 4px; font-size: 8px; }
@media (max-width: 900px) { .pl-like-m { display: none; } }

/* ── v6.5 Iranian direct source (tiarin.ir) ───────────────────────────────────── */
.uq-ir { display: inline-block; height: 18px; padding-inline: 6px; border-radius: 6px; font: 800 9px/18px var(--font-en); letter-spacing: .6px; color: #052e16; background: linear-gradient(135deg, #22c55e, #86efac); box-shadow: 0 0 10px rgba(34, 197, 94, .35); }
.uq-src[data-k$="· IR"] { color: #86efac; }
.uq-mode[hidden], #uqModeSpotify[hidden] { display: none !important; }
.pl-card[data-id^="ir"] .em::after, .pl-card.is-ir .em::after { content: ''; }
.cat-ir-badge { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding-inline: 7px; border-radius: 999px; font: 800 9.5px/1 var(--font-en); letter-spacing: .5px; color: #052e16; background: linear-gradient(135deg, #22c55e, #86efac); }
.pl-card .ir-pill { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding-inline: 8px; border-radius: 999px; font: 800 9.5px/1 var(--font-en); letter-spacing: .6px; color: #052e16; background: linear-gradient(135deg, #22c55e, #86efac); box-shadow: 0 2px 10px rgba(34, 197, 94, .35); }
.pl-card .ir-pill svg { width: 10px; height: 10px; fill: currentColor; }
.uq-cover-badge.ir { background: linear-gradient(135deg, #16a34a, #4ade80); color: #052e16; }

/* ── v6.8 song search: site songs → open web → Google ─────────────────────────────────────── */
.song-results { margin-top: 22px; animation: ssIn .5s var(--ease) both; }
@keyframes ssIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.song-results .section-head h2 .i { color: #38bdf8; }
.ss-list { display: grid; gap: 4px; }
.ss-row { display: grid; grid-template-columns: 46px 1fr auto auto 36px; align-items: center; gap: 12px; min-height: 60px; padding: 7px 10px; border-radius: 14px; cursor: pointer; position: relative; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .05); transition: background .2s, transform .2s var(--ease), border-color .2s; animation: ssIn .4s var(--ease) both; }
.ss-row:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .1); }
.ss-row:active { transform: scale(.995); }
.ss-row .ss-th { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: linear-gradient(135deg, rgba(124, 58, 237, .35), rgba(59, 130, 246, .35)); opacity: 0; transition: opacity .35s; }
.ss-row .ss-th.loaded { opacity: 1; }
.ss-row .ss-eq { display: none; position: absolute; inset-inline-start: 24px; top: 50%; transform: translateY(-50%); align-items: flex-end; gap: 2px; height: 16px; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .8)); }
.ss-row .ss-eq i { width: 3px; height: 100%; border-radius: 2px; background: #fff; transform-origin: bottom; animation: uqEq 1s ease-in-out infinite; }
.ss-row .ss-eq i:nth-child(2) { animation-delay: -.35s; } .ss-row .ss-eq i:nth-child(3) { animation-delay: -.7s; }
.ss-row.on { background: linear-gradient(90deg, rgba(56, 189, 248, .16), rgba(124, 58, 237, .12)); border-color: rgba(56, 189, 248, .35); }
.ss-row.on .ss-eq { display: flex; } .ss-row.on:not(.is-playing) .ss-eq i { animation-play-state: paused; }
.ss-row .ss-tx { min-width: 0; display: grid; gap: 2px; }
.ss-row .ss-tx b { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-row .ss-tx small { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-row .ss-st { display: inline-flex; align-items: center; gap: 6px; max-width: 170px; padding: 4px 10px 4px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--s1) 55%, transparent), color-mix(in srgb, var(--s2) 55%, transparent)); border: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-row .ss-st i { font-style: normal; font-size: 13px; flex: none; }
.ss-row .ss-st em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-row .ss-st.web { background: linear-gradient(135deg, rgba(14, 165, 233, .5), rgba(99, 102, 241, .5)); }
.ss-row .ss-d { font-size: 12px; color: var(--dim); }
.ss-row .ss-play { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; transition: background .2s, transform .2s var(--ease); }
.ss-row:hover .ss-play { background: linear-gradient(135deg, #7c3aed, #3b82f6); transform: scale(1.06); }
.ss-row.on .ss-play { background: linear-gradient(135deg, #0ea5e9, #7c3aed); }
.ss-none { padding: 14px 12px; color: var(--dim); font-size: 13.5px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 255, 255, .1); }
.ss-web { margin-top: 14px; padding: 14px; border-radius: 18px; background: linear-gradient(160deg, rgba(14, 165, 233, .09), rgba(99, 102, 241, .07) 60%, transparent); border: 1px solid rgba(56, 189, 248, .18); }
.ss-web-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ss-web-head h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; }
.ss-web-head h3 i { font-style: normal; font-size: 18px; filter: drop-shadow(0 0 8px rgba(56, 189, 248, .6)); }
.ss-web-head .hint { color: var(--dim); font-size: 12.5px; }
.ss-web-acts { margin-inline-start: auto; display: inline-flex; gap: 8px; }
.ss-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #0ea5e9, #6366f1); border: 0; cursor: pointer; text-decoration: none; box-shadow: 0 8px 22px -10px rgba(14, 165, 233, .8); transition: transform .2s var(--ease), filter .2s; }
.ss-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.ss-btn.g { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; }
.ss-btn[hidden] { display: none; }
.ss-status { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; background: rgba(255, 255, 255, .04); color: var(--dim); font-size: 13px; }
.ss-web.auto .ss-web-head h3 i { animation: wsPulse 1.6s ease-in-out infinite; }
@keyframes wsPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
#eqUnavailable[data-state="nocors"] .sub { color: #fbbf24; }
@media (max-width: 720px) {
  .ss-row { grid-template-columns: 42px 1fr auto 32px; gap: 10px; min-height: 56px; padding: 6px 8px; }
  .ss-row .ss-th { width: 42px; height: 42px; } .ss-row .ss-d { display: none; } .ss-row .ss-st { max-width: 110px; font-size: 11px; } .ss-row .ss-play { width: 32px; height: 32px; }
  .ss-web-acts { margin-inline-start: 0; width: 100%; } .ss-btn { flex: 1; justify-content: center; }
}
html.lite .ss-row, html.lite .song-results { animation: none; }

/* ── v6.9: live "N people are listening to this song" chip under the title ── */
.song-listeners { display: inline-flex; align-items: center; gap: 7px; margin: 6px 0 2px; padding: 5px 12px 5px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: #e9d5ff; background: linear-gradient(90deg, rgba(124, 58, 237, .22), rgba(59, 130, 246, .16)); border: 1px solid rgba(167, 139, 250, .35); box-shadow: 0 6px 20px -12px rgba(124, 58, 237, .8); max-width: 100%; }
.song-listeners[hidden] { display: none; }
.song-listeners .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: songPulse 1.8s ease-out infinite; flex: none; }
.song-listeners .i { width: 14px; height: 14px; flex: none; opacity: .9; }
.song-listeners span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-listeners.bump { animation: bump .5s var(--spring); }
@keyframes songPulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
html.reduce-motion .song-listeners .pulse-dot { animation: none; }

/* ── v6.9: sub-page retry card ── */
.pg-fail { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7, 6, 13, .72); backdrop-filter: blur(10px); z-index: 5; }
.pg-fail-card { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 28px 30px; border-radius: 22px; background: linear-gradient(160deg, rgba(124, 58, 237, .18), rgba(59, 130, 246, .10)); border: 1px solid rgba(167, 139, 250, .3); max-width: 340px; }
.pg-fail-card .i { width: 34px; height: 34px; color: #c4b5fd; }
.pg-fail-card b { font-size: 17px; }
.pg-fail-card span { font-size: 13px; color: var(--muted, #a1a1aa); line-height: 1.6; }
.pg-fail-card .btn { margin-top: 6px; }

/* ── v6.9: playlist page (header + Songs / About tabs, every track one under the other) ── */
.pl-detail { margin: 0 0 26px; animation: pdIn .45s var(--spring) both; }
.pl-detail[hidden] { display: none; }
@keyframes pdIn { from { opacity: 0; transform: translateY(14px); } }
.pd-head { position: relative; display: grid; grid-template-columns: 208px 1fr; gap: 26px; align-items: end; padding: 28px; border-radius: 26px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); background: #0d0b18; isolation: isolate; }
.pd-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--s1, #7c3aed) 55%, transparent), transparent 60%), radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--s2, #3b82f6) 45%, transparent), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .35)); }
.pd-bg::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.pd-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .35); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .25s var(--spring), background .2s; z-index: 2; }
.pd-close:hover { transform: rotate(90deg) scale(1.06); background: rgba(255, 255, 255, .14); }
.pd-close .i { width: 18px; height: 18px; }
.pd-cover { position: relative; width: 208px; aspect-ratio: 1; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); background: linear-gradient(135deg, var(--s1, #7c3aed), var(--s2, #3b82f6)); }
.pd-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-em { position: absolute; left: 10px; bottom: 8px; font-size: 26px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.pd-tx { min-width: 0; display: grid; gap: 8px; }
.pd-kicker { display: inline-flex; align-items: center; gap: 6px; width: max-content; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #ddd6fe; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.pd-kicker .i { width: 12px; height: 12px; }
.pd-ir { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 6px; background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; letter-spacing: .08em; }
.pd-title { margin: 0; font-size: clamp(28px, 4vw, 52px); line-height: 1.05; font-weight: 900; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
.pd-sub { margin: 0; color: rgba(255, 255, 255, .7); font-size: 15px; }
[dir=ltr] .pd-sub, [dir=ltr] .pd-title { text-align: left; } [dir=rtl] .pd-sub, [dir=rtl] .pd-title { text-align: right; }
@media (max-width: 760px) { [dir] .pd-sub, [dir] .pd-title { text-align: center; } }
.pd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.pd-meta > span + span:not(.pd-here)::before { content: '·'; opacity: .5; margin-inline-end: 8px; }
.pd-here { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .3); color: #d1fae5; font-weight: 600; }
.pd-here .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.pd-here.on .pulse-dot { animation: songPulse 1.8s ease-out infinite; }
.pd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.pd-btn { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .25s var(--spring), background .2s, box-shadow .2s; }
.pd-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .13); }
.pd-btn:active { transform: scale(.97); }
.pd-btn .i { width: 20px; height: 20px; }
.pd-btn.primary { color: #0b0b12; background: linear-gradient(135deg, #fff, #e6e9ff); border: 0; box-shadow: 0 14px 34px -14px rgba(255, 255, 255, .55); padding-inline: 24px; }
.pd-btn.icon { width: 46px; padding: 0; justify-content: center; }
.pd-btn.icon.on { color: #fb7185; background: rgba(251, 113, 133, .14); border-color: rgba(251, 113, 133, .4); }
.pd-btn.icon.on .i { fill: currentColor; }
.pd-tabs { display: flex; align-items: center; gap: 4px; margin: 18px 4px 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pd-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 0; background: none; color: rgba(255, 255, 255, .6); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: color .2s; }
.pd-tab .i { width: 15px; height: 15px; }
.pd-tab small { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: inherit; }
.pd-tab:hover { color: #fff; }
.pd-tab.on { color: #fff; }
.pd-tab.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #a78bfa, #60a5fa); }
.pd-filter { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; height: 36px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }
.pd-filter .i { width: 14px; height: 14px; flex: none; }
.pd-filter input { width: 150px; background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: 13px; }
.pd-filter input::placeholder { color: rgba(255, 255, 255, .4); }
.pd-list { display: grid; gap: 2px; }
.pd-row { display: grid; grid-template-columns: 34px 46px minmax(0, 1fr) auto auto auto 52px; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 14px; cursor: pointer; transition: background .18s, transform .18s; border: 1px solid transparent; }
.pd-row:hover { background: rgba(255, 255, 255, .055); }
.pd-row:focus-visible { outline: 2px solid rgba(167, 139, 250, .7); outline-offset: 1px; }
.pd-row.on { background: linear-gradient(90deg, rgba(124, 58, 237, .22), rgba(59, 130, 246, .1)); border-color: rgba(167, 139, 250, .25); }
.pd-n, .pd-eq { grid-column: 1; } .pd-thumb { grid-column: 2; } .pd-rtx { grid-column: 3; } .pd-live { grid-column: 4; } .pd-dl { grid-column: 5; } .pd-like { grid-column: 6; } .pd-d { grid-column: 7; }
.pd-n { text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; }
.pd-row.on .pd-n { display: none; }
.pd-eq { display: none; align-items: flex-end; justify-content: center; gap: 2px; height: 14px; }
.pd-eq i { width: 3px; border-radius: 2px; background: linear-gradient(180deg, #a78bfa, #60a5fa); height: 40%; animation: uqEq 1s ease-in-out infinite; }
.pd-eq i:nth-child(2) { animation-delay: .18s; height: 100%; } .pd-eq i:nth-child(3) { animation-delay: .36s; height: 65%; }
.pd-row.on .pd-eq { display: flex; }
body:not(.playing) .pd-row.on .pd-eq i { animation-play-state: paused; }
@keyframes uqEq { 50% { transform: scaleY(.35); } }
.pd-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: rgba(255, 255, 255, .06); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .8); }
.pd-rtx { display: grid; min-width: 0; }
.pd-rtx b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-rtx small { font-size: 12.5px; color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-row.on .pd-rtx b { color: #e9d5ff; }
.pd-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .3); color: #d1fae5; }
.pd-live[hidden] { display: none; }
.pd-live .i { width: 12px; height: 12px; }
.pd-like { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: rgba(255, 255, 255, .45); display: grid; place-items: center; cursor: pointer; transition: color .2s, transform .25s var(--spring); }
.pd-like:hover { color: #fff; transform: scale(1.12); }
.pd-like.on { color: #fb7185; } .pd-like.on .i { fill: currentColor; }
.pd-d { text-align: end; font-size: 12.5px; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.pd-empty { padding: 40px; text-align: center; color: rgba(255, 255, 255, .55); }
.pd-about { padding: 8px 6px 4px; }
.pd-desc { font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, .8); max-width: 72ch; margin: 0 0 18px; }
.pd-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0; }
.pd-facts div { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); }
.pd-facts dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 6px; }
.pd-facts dd { margin: 0; font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .pd-head { grid-template-columns: 1fr; gap: 16px; padding: 18px; justify-items: center; text-align: center; }
  .pd-cover { width: min(200px, 54vw); }
  .pd-tx { justify-items: center; }
  .pd-meta, .pd-actions { justify-content: center; }
  .pd-title { font-size: clamp(24px, 7vw, 34px); }
  .pd-tabs { flex-wrap: wrap; }
  .pd-filter { width: 100%; margin: 4px 0 8px; } .pd-filter input { width: 100%; }
  .pd-row { grid-template-columns: 26px 42px minmax(0, 1fr) 36px 36px; gap: 6px; padding: 6px 6px; }
  .pd-live { display: none; }
  .pd-dl { grid-column: 4; } .pd-like { grid-column: 5; }
  .pd-d { display: none; }
}
html.reduce-motion .pl-detail, html.reduce-motion .pd-eq i { animation: none; }

/* ── v6.9: song download ── */
.pd-dl { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: rgba(255, 255, 255, .45); display: grid; place-items: center; cursor: pointer; transition: color .2s, transform .25s var(--spring); position: relative; }
.pd-dl:hover { color: #fff; transform: translateY(1px); }
.pd-dl.busy, .dl-btn.busy { color: #a78bfa; pointer-events: none; }
.pd-dl.busy::after, .dl-btn.busy .dl-ring { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: conic-gradient(#a78bfa calc(var(--p, 0) * 360deg), rgba(167, 139, 250, .18) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: dlSpin 1.2s linear infinite; }
.dl-btn { position: relative; } .dl-btn .dl-ring { display: none; } .dl-btn.busy .dl-ring { display: block; inset: 3px; }
@keyframes dlSpin { to { filter: hue-rotate(40deg); } }
/* v6.9: in-page download → last-resort toast with a link (only when the host renders the file inline) */
.toast.dl-toast { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.toast.dl-toast a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: linear-gradient(135deg, var(--c1, #7c3aed), var(--c2, #3b82f6)); color: #fff; font-weight: 700; font-size: 12.5px; text-decoration: none; }
/* v6.9.3: spoken announcement chip (between songs) */
.ad-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: linear-gradient(135deg, rgba(124, 58, 237, .22), rgba(59, 130, 246, .16)); border: 1px solid rgba(167, 139, 250, .35); color: #e9e4ff; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; animation: adIn .4s ease; }
.ad-chip .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .ad-chip .eq i { width: 3px; background: #c4b5fd; border-radius: 2px; animation: adEq .9s ease-in-out infinite; height: 6px; } .ad-chip .eq i:nth-child(2) { animation-delay: .15s; height: 11px; } .ad-chip .eq i:nth-child(3) { animation-delay: .3s; height: 8px; }
.ad-chip b { font-variant-numeric: tabular-nums; color: #fff; font-weight: 800; }
@keyframes adEq { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
@keyframes adIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
body.ad-on .song-listeners { display: none; }
@media (prefers-reduced-motion: reduce) { .ad-chip .eq i { animation: none; } }

/* ── v7.0 account button (header) ── */
.acc-btn { overflow: visible; }
.acc-ava { --ac: #7c3aed; position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; color: inherit; }
.acc-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-ava b { font: 800 12px/1 'Inter', sans-serif; color: #fff; }
.acc-btn.signed .acc-ava { background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--ac) 70%, #fff 12%), color-mix(in srgb, var(--ac) 60%, #000)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.acc-btn.signed .acc-ava.framed { overflow: visible; isolation: isolate; }
.acc-btn.signed .acc-ava.framed::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--aring); z-index: -1; animation: accRing 9s linear infinite; }
.acc-btn.signed .acc-ava.framed::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--bg, #07060d); pointer-events: none; }
.acc-btn.signed .acc-ava.framed img, .acc-btn.signed .acc-ava.framed b { border-radius: 50%; overflow: hidden; }
.acc-btn.signed .acc-ava.framed b { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--ac) 70%, #fff 12%), color-mix(in srgb, var(--ac) 60%, #000)); position: relative; z-index: 1; }
.acc-btn.signed .acc-ava.framed img { position: relative; z-index: 1; }
.acc-btn.premium::after { content: ""; position: absolute; top: 5px; inset-inline-end: 5px; width: 7px; height: 7px; border-radius: 50%; background: #e7c98a; box-shadow: 0 0 0 2px var(--bg, #07060d); }
.acc-dot { position: absolute; bottom: 5px; inset-inline-end: 5px; width: 12px; height: 12px; border-radius: 50%; background: #3b82f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat; box-shadow: 0 0 0 2px var(--bg, #07060d); }
@keyframes accRing { to { transform: rotate(360deg); } }
/* v7.1 page address: copy-link button in the page tab strip */
.pg-link { border-style: solid; margin-inline-start: 2px; }
html[data-file] .pg-link { display: none; }