/* ═══════════════════════════════════════════
   YM-STYLE DARK THEME
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
@keyframes spin-loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin-anim { animation: spin-loading 1s linear infinite; }

/* ── GLOBAL SMOOTH ANIMATIONS ────────────── */
@keyframes mz-fadeIn    { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
@keyframes mz-fadeUp    { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
@keyframes mz-scaleIn   { from { opacity:0; transform:scale(.92) } to { opacity:1; transform:scale(1) } }
@keyframes mz-slideR    { from { opacity:0; transform:translateX(-12px) } to { opacity:1; transform:translateX(0) } }
@keyframes mz-slideL    { from { opacity:0; transform:translateX(12px) } to { opacity:1; transform:translateX(0) } }
@keyframes mz-pop       { 0% { transform:scale(1) } 50% { transform:scale(1.05) } 100% { transform:scale(1) } }

/* Transitions on interactive elements */
a, button, input, select, textarea,
.px-btn, .nav-btn, .sidebar-nav-btn,
.ym-result, .coll-card, .track-item,
.settings-tab, .toggle-row, .kr-search-row,
.kr-queue-row, .gc-msg, .sidebar-pl-item,
#sidebar-liked, .auth-tab, .karaoke-icon-btn,
.karaoke-btn, .search-src-btn, .kr-tab,
.mini-btn, .lyset-font-btn {
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s, transform .15s;
}

/* Hover effects */
.px-btn:hover { filter: brightness(1.15); }
.px-btn:active, .mini-btn:active, .karaoke-icon-btn:active { transform: scale(.93); }
.nav-btn:hover, .sidebar-nav-btn:hover { background: var(--bg3); }
.coll-card:hover { filter: brightness(1.08); }
.ym-result:hover { background: var(--bg3); }
.track-item:hover { background: var(--bg3); }
.settings-tab:hover { filter: brightness(1.1); }
.kr-tab:hover { filter: brightness(1.1); }
.search-src-btn:hover { filter: brightness(1.15); }
.karaoke-icon-btn:hover { background: var(--bg4); }
.sidebar-pl-item:hover { background: var(--bg3); }
#sidebar-liked:hover { filter: brightness(1.06); }
.auth-tab:hover { filter: brightness(1.12); }
.gc-msg:hover { background: rgba(255,255,255,.03); }
.toggle-row:hover { background: var(--bg3); }

/* Sidebar */
#sidebar { transition: width .25s ease, min-width .25s ease, max-width .25s ease; }
.nav-btn, .sidebar-nav-btn { transition: background .2s ease, color .2s ease, transform .15s ease; }
.nav-btn:active, .sidebar-nav-btn:active { transform: scale(.92); }
.nav-btn.active { transition: color .25s ease, background .25s ease; }

/* Player bar */
#player-bar { transition: background .4s ease, box-shadow .4s ease; }
#player-cover-wrap { transition: transform .3s ease; }
#player-cover-wrap:hover { transform: scale(1.06); }

/* Expanded player tabs */
.exp-tab { transition: color .2s ease, border-color .25s ease, transform .12s ease; }
.exp-tab:active { transform: scale(.93); }

/* Settings tabs */
.settings-tab { transition: background .2s ease, color .2s ease, transform .12s ease; }
.settings-tab:active { transform: scale(.93); }

/* Chat */
#global-chat { transition: width .25s ease, transform .25s ease; }
.gc-msg { animation: mz-fadeIn .15s ease; }

/* Auth screen */
#auth-box { animation: mz-scaleIn .4s cubic-bezier(.34,1.56,.64,1); }

/* Expanded player */
.exp-panel { animation: mz-fadeUp .3s ease; }

/* View transitions — subtle fade */
#view-library, #view-search, #view-collection,
#view-settings, #view-karaoke, #view-explore {
  animation: mz-fadeIn .2s ease;
}

/* Smooth scroll */
#gc-messages, #content { scroll-behavior: smooth; }

/* Input focus glow */
.px-input:focus { box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 255,107,53), .25); }

/* Settings panel */
#settings-panel { animation: mz-scaleIn .2s ease; }

/* Player progress smooth */
#player-progress-fill { transition: width .15s linear; }
#player-vol-fill { transition: width .1s linear; }

:root {
  --bg:       #121212;
  --bg2:      #0d0d0d;
  --bg3:      #1e1e1e;
  --bg4:      #282828;
  --bg5:      #333;
  --accent:   #4984a2;
  --on-accent: #fff;
  --accent2:  #5fa3c4;
  --green:    #4caf50;
  --red:      #f44336;
  --yellow:   #ffdb4d;
  --text:     #fff;
  --text2:    #b3b3b3;
  --dim:      #888;
  --dim2:     #555;
  --border:   #282828;
  --sidebar:  320px;
  --card-min: 160px;
  --player-h: 88px;
  --fs:       14px;
  --nav-sz:   22px;
  --gap:      16px;
  --font:     'Inter', 'Segoe UI', system-ui, sans-serif;
  --r:        8px;
  --cover-r:  8px;
  --cover-sz: 44px;
  --border-w: 1px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs);
  overflow: hidden;
}

/* scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim2); }

/* ── CRT (legacy, hidden by default) ───── */
#scanlines, #crt-vignette { display: none; }
#scanlines.on {
  display: block;
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,0,0,0.05) 2px,rgba(0,0,0,0.05) 4px);
}
#crt-vignette.on {
  display: block;
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.7) 100%);
}
body.no-pixel-font *:not(.lyric-line):not(.ly-word):not(.ly-grad):not(.lyset-preview):not(.lyf-btn):not(#lyset-preview):not(#karaoke-lyrics-lines *):not(#exp-lyrics-lines *) { font-family: var(--font) !important; }

/* Smooth animations toggle */
body.no-smooth * { transition: none !important; animation-duration: 0.01ms !important; }

/* Cover background blur toggle */
body.no-cover-bg .ap-bg { display: none !important; }
body.no-cover-bg #exp-left { background-image: none !important; }

/* ── LAYOUT ─────────────────────────────── */
#app {
  display: flex;
  height: calc(100vh - var(--player-h));
  position: relative; z-index: 1;
}

/* ── PARTICLE BACKGROUND CANVAS ──────────── */
#particles-canvas {
  display: none;
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}
/* browse visibility: show particles through the content while browsing
   (only when allowed there and the track screen isn't open) */
body.particles-on.pt-browse:not(.exp-open) #content { background: transparent !important; }
body.particles-on.pt-browse:not(.exp-open) #view-library,
body.particles-on.pt-browse:not(.exp-open) #view-search,
body.particles-on.pt-browse:not(.exp-open) #view-collection,
body.particles-on.pt-browse:not(.exp-open) #main-grid { background: transparent !important; }
body.particles-on.pt-browse:not(.exp-open) #player-bar { background: color-mix(in srgb, var(--bg2) 86%, transparent); }

/* track visibility: particles sit ON TOP of the now-playing screen while open */
body.particles-on.pt-track.exp-open #particles-canvas { z-index: 5001; display: block !important; }

/* particle shape picker cards (reuse viz-preset-grid layout) */
.pt-shape-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; aspect-ratio: 1; border-radius: 10px; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
  font-size: 22px; transition: all 0.15s; user-select: none;
}
.pt-shape-card span { font-size: 9px; color: var(--dim); }
.pt-shape-card:hover { background: var(--bg4); }
.pt-shape-card.active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* ── GLOBAL CHAT ─────────────────────────── */
#global-chat {
  width: 300px; min-width: 220px; max-width: 400px;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}
#gc-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
#gc-title { font-weight: 700; font-size: 14px; flex: 1; }
.gc-close { background: none; border: none; color: var(--dim); font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; }
.gc-close:hover { color: var(--text); }
#gc-messages {
  flex: 1; overflow-y: auto; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 6px;
  scrollbar-width: thin;
}
.gc-msg {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 0;
}
.gc-msg-header {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11px;
}
.gc-msg-name { font-weight: 700; color: var(--accent); }
.gc-msg-time { color: var(--dim); font-size: 10px; }
.gc-msg-text { font-size: 13px; color: var(--text); word-break: break-word; line-height: 1.4; }
.gc-msg-system { font-size: 11px; color: var(--dim); font-style: italic; text-align: center; padding: 4px 0; }
#gc-input-wrap {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-top: 1px solid var(--border);
  background: var(--bg3);
}
#gc-input { flex: 1; font-size: 13px; padding: 6px 10px; }
#gc-send-btn { background: none; border: none; cursor: pointer; padding: 4px; display: flex; }
#gc-send-btn:hover svg { fill: var(--accent2); }
#gc-toggle-btn {
  position: fixed; bottom: calc(var(--player-h) + 16px); right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.4); z-index: 100;
  transition: transform .15s, box-shadow .15s;
}
#gc-toggle-btn:hover { transform: scale(1.1); box-shadow: 0 4px 20px rgba(0,0,0,.5); }
#gc-unread-badge {
  position: absolute; top: -4px; right: -4px;
  background: #ff4444; color: #fff; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
@media (max-width: 768px) {
  #global-chat { position: fixed; top: 48px; left: 0; right: 0; bottom: calc(var(--player-h) + 56px); width: 100%; max-width: 100%; z-index: 50; display: none !important; }
  #global-chat[data-mob-open="1"] { display: flex !important; }
  #gc-toggle-btn { display: none !important; }
}

/* ── SIDEBAR (YM-style) ──────────────────── */
#sidebar {
  width: var(--sidebar) !important;
  min-width: var(--sidebar) !important;
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  border-radius: 0 24px 24px 0;
  padding: 24px 20px 20px;
  margin: 12px 0 12px 12px;
  box-shadow: 4px 0 32px rgba(0,0,0,.3);
}

/* Logo */
#sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; margin-bottom: 24px; padding: 0 8px;
  flex-shrink: 0;
}
#sidebar-logo:hover #sidebar-logo-text { color: var(--text); }
#sidebar-logo-text { font-size: 18px; font-weight: 700; color: var(--text2); letter-spacing: 1px; transition: color .15s; }
#cat-wrap { width: 28px; height: 28px; flex-shrink: 0; overflow: hidden; }
#cat-canvas { width: 28px; height: 28px; display: block; }
#logo { display: none; }

/* Nav */
#px-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  width: 100%;
}
.nav-btn {
  background: none;
  color: var(--text2);
  border: none;
  width: 100%; height: 52px;
  cursor: pointer;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 18px;
  padding: 0 18px;
  transition: background 0.15s, color 0.15s;
  position: relative;
  font-family: var(--font);
}
.nav-btn svg { width: 26px; height: 26px; flex-shrink: 0; }
.nav-label { font-size: 16px; font-weight: 500; white-space: nowrap; min-width: 0; }
.nav-btn:hover { background: var(--bg4); color: var(--text); }
.nav-btn.active { background: var(--bg4); color: var(--text); font-weight: 600; }
.nav-btn.active[data-view="likes"] { color: var(--red); }
.nav-btn::after { display: none; }
.settings-btn { display: none; }

/* Sidebar liked tracks */
#sidebar-liked {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin: 12px 8px 0; border-radius: 8px;
  cursor: pointer; transition: background .15s;
}
#sidebar-liked:hover { background: var(--bg4); }
.sidebar-liked-icon {
  width: 36px; height: 36px; border-radius: 6px;
  background: linear-gradient(135deg, #7b2fbe, #e13b74);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.sidebar-liked-text { font-size: 13px; color: var(--text); font-weight: 500; }
.sidebar-liked-count { font-size: 11px; color: var(--dim); margin-left: auto; }

/* Sidebar playlists */
#sidebar-playlists {
  flex: 1; overflow-y: auto; margin-top: 12px;
  border-top: 1px solid var(--border); padding-top: 12px;
}
#sidebar-pl-header {
  font-size: 12px; color: var(--dim); letter-spacing: 1px;
  padding: 8px 16px; font-weight: 700; text-transform: uppercase;
}
.sidebar-pl-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; font-size: 14px; color: var(--text2);
  cursor: pointer; border-radius: 10px; margin: 2px 8px;
  transition: background .12s, color .12s;
}
.sidebar-pl-item:hover { background: var(--bg4); color: var(--text); }
.sidebar-pl-item img {
  width: 40px; height: 40px; border-radius: 8px; object-fit: cover;
  flex-shrink: 0;
}
.sidebar-pl-item .pl-info { flex: 1; min-width: 0; }
.sidebar-pl-item .pl-name { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-pl-item .pl-sub { font-size: 12px; color: var(--dim); margin-top: 2px; }

/* Sidebar artists */
.sidebar-artist-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer; border-radius: 10px; margin: 2px 8px;
  transition: background .12s;
}
.sidebar-artist-item:hover { background: var(--bg4); }
.sidebar-artist-item img {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0;
}
.sidebar-artist-item .artist-info { flex: 1; min-width: 0; }
.sidebar-artist-item .artist-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-artist-item .artist-sub { font-size: 12px; color: var(--dim); margin-top: 2px; }

/* Profile bar */
#profile-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 8px 0; flex-shrink: 0; width: 100%;
  border-top: 1px solid var(--border); margin-top: 8px;
}
#profile-avatar {
  width: 32px; height: 32px;
  border-radius: 50%; background: var(--bg4);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  font-size: 12px; font-weight: 600; color: var(--text2);
  transition: background 0.15s; user-select: none;
}
#profile-avatar:hover { background: var(--bg5); }
#profile-avatar { overflow: hidden; }
#profile-avatar img.pf-av-img { width: 100%; height: 100%; object-fit: cover; display: block; }
#profile-name-text { font-size: 13px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Settings avatar */
.settings-avatar-row { display: flex; align-items: center; gap: 14px; margin: 6px 0 12px; }
.settings-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: var(--bg4);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  flex-shrink: 0; font-size: 22px; font-weight: 700; color: var(--text2);
  border: 2px solid var(--border);
}
.settings-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.settings-avatar-actions { display: flex; flex-direction: column; gap: 6px; }
.settings-avatar-actions .px-btn { padding: 6px 14px; font-size: 11px; }
[data-style="brutal"] .settings-avatar { border-radius: 0; }
[data-style="soft"] .settings-avatar { border-radius: 18px; }

/* ── Audio tab: equalizer / speed / sleep ── */
.eq-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.eq-head .px-btn { padding: 6px 16px; font-size: 12px; }
.eq-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.eq-preset-btn, .speed-btn, .sleep-btn {
  background: var(--bg3); color: var(--text2); border: 1px solid var(--border);
  border-radius: var(--r, 8px); padding: 6px 12px; font-size: 12px; font-family: var(--font);
  cursor: pointer; transition: all .15s;
}
.eq-preset-btn:hover, .speed-btn:hover, .sleep-btn:hover { background: var(--bg4); color: var(--text); }
.eq-preset-btn.active, .speed-btn.active, .sleep-btn.active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700;
}
.eq-sliders { display: flex; justify-content: space-between; gap: 10px; }
.eq-band { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.eq-val { font-size: 11px; color: var(--accent); font-weight: 700; min-height: 14px; }
.eq-freq { font-size: 10px; color: var(--dim); }
.eq-slider {
  -webkit-appearance: none; appearance: none;
  writing-mode: vertical-lr; direction: rtl;
  width: 6px; height: 120px; background: var(--bg4);
  border-radius: 4px; cursor: pointer; outline: none;
}
.eq-slider:disabled { opacity: .4; cursor: not-allowed; }
.eq-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 2px solid var(--bg2);
}
.eq-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 2px solid var(--bg2);
}
.speed-btns, .sleep-btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Player audio quick popover ── */
.audio-popover {
  position: fixed; right: 16px; bottom: calc(var(--player-h, 90px) + 12px);
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; z-index: 1200;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.audio-pop-sec { margin-bottom: 16px; }
.audio-pop-sec:last-child { margin-bottom: 0; }
.audio-pop-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.audio-pop-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; display: block; }
.audio-pop-row .audio-pop-title { margin-bottom: 0; }
.audio-pop-link { background: none; border: none; color: var(--accent); font-size: 11px; cursor: pointer; padding: 8px 0 0; font-family: var(--font); }
.audio-pop-link:hover { text-decoration: underline; }
.audio-pop-status { font-size: 11px; color: var(--dim); margin-top: 8px; min-height: 14px; }

.px-icon-btn {
  background: none; border: none;
  color: var(--dim); cursor: pointer;
  padding: 6px; border-radius: 6px;
  font-size: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.px-icon-btn:hover { background: var(--bg4); color: var(--text); }

/* Hidden compat */
#search-wrap, #artist-list, #sidebar-footer, #profile-name { display: none !important; }

.px-input {
  width: 100%; font-family: var(--font); font-size: 13px;
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; outline: none; transition: border-color 0.15s;
}
.px-input:focus { border-color: var(--accent); }
.px-input::placeholder { color: var(--dim2); }
.artist-item, .artist-count { display: none; }

/* ── COLLECTION TABS ─────────────────────── */
.collection-tabs {
  display: flex; gap: 0; padding: 20px 24px 0;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.coll-tab {
  font-family: var(--font); font-size: 15px; font-weight: 500;
  background: none; border: none; color: var(--dim);
  padding: 12px 20px; cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color .2s ease, border-color .25s ease, transform .15s ease, background .2s ease;
}
.coll-tab:hover { color: var(--text); }
.coll-tab:active { transform: scale(.95); }
.coll-tab.active { color: var(--text); border-bottom-color: var(--accent); }
#collection-content { padding: 20px 24px; animation: mz-fadeIn .2s ease; }

/* ── Collection grid & cards ── */
.coll-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.coll-count {
  font-size: 14px; color: var(--dim); font-weight: 500;
}
.btn-play-all {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  background: var(--accent); color: var(--on-accent); border: none;
  padding: 8px 20px; border-radius: 20px; cursor: pointer;
  transition: opacity .15s;
}
.btn-play-all:hover { opacity: .85; }

.coll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--gap);
}
.coll-card {
  cursor: pointer; border-radius: 8px;
  padding: 12px; transition: background .15s;
}
.coll-card:hover { background: var(--bg4); }
.coll-card-img {
  width: 100%; aspect-ratio: 1; border-radius: 6px;
  overflow: hidden; margin-bottom: 10px; background: var(--bg3);
}
.coll-card-img img { width: 100%; height: 100%; object-fit: cover; }
.coll-card-img-round { border-radius: 50%; }
.coll-card-img-round img { border-radius: 50%; }
.coll-card-title {
  font-size: 14px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coll-card-sub {
  font-size: 12px; color: var(--dim); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coll-card-sub a { color: var(--dim); text-decoration: none; }
.coll-card-sub a:hover { color: var(--text); text-decoration: underline; }
.coll-card-artist { text-align: center; }
.coll-empty {
  padding: 60px 24px; text-align: center;
  color: var(--dim); font-size: 15px;
}

/* ── Sidebar playlist items ── */
.sidebar-pl-item {
  padding: 6px 16px; font-size: 13px; color: var(--dim);
  cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; transition: color .15s, background .15s;
  border-radius: 4px; margin: 0 8px;
}
.sidebar-pl-item:hover { color: var(--text); background: var(--bg4); }

/* ── MAIN CONTENT ──────────────────────── */
#content {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  position: relative;
}

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 10px;
  padding: 24px 24px 0;
  flex-wrap: wrap;
}

.px-section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}

/* Breadcrumb */
#breadcrumb {
  font-size: 13px;
  color: var(--dim);
  padding: 16px 24px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.crumb { cursor: pointer; color: var(--dim); transition: color 0.12s; }
.crumb:hover { color: var(--text); }
.crumb-sep { color: var(--dim2); }
.crumb-active { color: var(--text); }

/* Buttons */
.px-btn {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  background: var(--bg4);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.px-btn:hover { background: var(--bg5); color: var(--text); }

.accent-btn {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
.accent-btn:hover { background: var(--accent2) !important; }

.danger-btn {
  background: none !important;
  color: var(--red) !important;
  border-color: var(--red) !important;
}
.danger-btn:hover { background: var(--red) !important; color: #fff !important; }

/* ── CARD GRID ─────────────────────────── */
#main-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--gap);
  padding: 16px 24px 24px;
}

.card {
  background: transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background 0.15s;
  padding: 8px;
}
.card:hover { background: var(--bg3); }
.card-cover-wrap { position: relative; border-radius: var(--r); overflow: hidden; margin-bottom: 10px; }
.card-cover { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: var(--r); }
.card-cover-placeholder {
  width: 100%; aspect-ratio: 1; background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: var(--dim2); border-radius: var(--r);
}
.card-play-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.3);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 8px;
  opacity: 0; transition: opacity 0.2s;
  border-radius: var(--r);
}
.card:hover .card-play-overlay { opacity: 1; }
.card-play-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  padding-left: 2px;
}
.card-info { padding: 0 2px; }
.card-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 3px;
}
.card-sub { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── ALBUM HEADER ──────────────────────── */
.album-header {
  display: flex; align-items: flex-end; gap: 24px;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.album-header-cover {
  width: 180px; height: 180px; flex-shrink: 0;
  border-radius: 12px; object-fit: cover;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.album-header-cover-ph {
  width: 180px; height: 180px; flex-shrink: 0;
  background: var(--bg3); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; color: var(--dim2);
}
.album-header-info { flex: 1; }
.album-header-label { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.album-header-title { font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: 6px; letter-spacing: -0.5px; }
.album-header-artist { font-size: 15px; color: var(--accent); font-weight: 500; margin-bottom: 16px; cursor: pointer; }
.album-header-artist:hover { text-decoration: underline; }
.album-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn-play-all {
  font-family: var(--font); font-size: 14px; font-weight: 600;
  background: var(--accent); color: var(--on-accent);
  border: none; border-radius: 20px;
  padding: 10px 24px; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex; align-items: center; gap: 6px;
}
.btn-play-all:hover { background: var(--accent2); transform: scale(1.03); }
.btn-play-all:active { transform: scale(0.98); }

.btn-shuffle-all {
  font-family: var(--font); font-size: 14px; font-weight: 500;
  background: transparent; color: var(--text2);
  border: 1px solid var(--bg5); border-radius: 20px;
  padding: 10px 22px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-shuffle-all:hover { background: var(--bg4); border-color: var(--dim); }

/* ── TRACK LIST ────────────────────────── */
.track-list { display: flex; flex-direction: column; padding: 0 12px 24px; }
.track-item {
  display: flex; align-items: center; padding: 8px 12px; gap: 12px;
  cursor: pointer; border-radius: 6px;
  transition: background 0.12s;
}
.track-item:hover { background: var(--bg3); }
.track-item.playing { background: rgba(255,219,77,0.08); }
.track-item.playing .track-title { color: var(--accent); }
.track-item.playing .track-num { color: var(--accent); }

.track-num { width: 24px; text-align: right; font-size: 13px; color: var(--dim); flex-shrink: 0; }
.track-bars { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.track-item.playing .track-bars { display: flex; }
.track-item.playing .track-num-text { display: none; }
.bar { width: 3px; background: var(--accent); border-radius: 2px; animation: bar-anim 0.6s ease-in-out infinite; }
.bar:nth-child(1){height:5px} .bar:nth-child(2){height:10px;animation-delay:.2s} .bar:nth-child(3){height:7px;animation-delay:.1s}
@keyframes bar-anim{0%,100%{transform:scaleY(0.3)}50%{transform:scaleY(1)}}
.track-title { flex: 1; font-size: 14px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── YM SEARCH VIEW ────────────────────── */
#view-search { padding: 0; }
#token-banner {
  margin: 16px 24px;
  background: rgba(255,219,77,0.08);
  border: 1px solid rgba(255,219,77,0.3);
  border-radius: var(--r);
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.banner-text { font-size: 13px; color: var(--accent); }

#search-ym-wrap {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 32px 24px 0; align-items: center;
  max-width: 700px; margin: 0 auto;
}
.search-big {
  flex: 1 !important; font-size: 16px !important; padding: 14px 24px !important;
  border-radius: 28px !important; background: var(--bg4) !important;
  border: none !important; min-width: 200px;
}
.search-big:focus { box-shadow: 0 0 0 2px var(--accent); }
.search-input-wrap { position: relative; flex: 1; min-width: 200px; }
.search-input-wrap .search-big { width: 100%; }

/* Search suggest dropdown */
.search-suggest {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg3); border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.5); z-index: 1000; max-height: 360px;
  overflow-y: auto; border: 1px solid var(--border);
}
.search-suggest.visible { display: block; }
.search-suggest-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  cursor: pointer; transition: background .12s;
}
.search-suggest-item:hover, .search-suggest-item.active { background: var(--bg4); }
.search-suggest-item-cover {
  width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0;
  background: var(--bg2); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.search-suggest-item-cover img { width: 100%; height: 100%; object-fit: cover; }
.search-suggest-item-info { flex: 1; overflow: hidden; }
.search-suggest-item-title { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggest-item-sub { font-size: 11px; color: var(--dim); margin-top: 1px; }
.search-suggest-item-icon { color: var(--dim); flex-shrink: 0; }

/* Artist link in search results */
.yt-artist-link, .sp-artist-link { color: var(--dim); text-decoration: none; transition: color .15s; }
.yt-artist-link:hover { color: #f00; }
.sp-artist-link:hover { color: #1DB954; }

/* Search source toggle */
#search-source-toggle {
  display: flex; gap: 4px; background: var(--bg3); border-radius: 20px; padding: 3px;
}
.search-src-btn {
  font-family: var(--font); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: 18px;
  border: none; background: none; color: var(--dim);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.search-src-btn:hover { color: var(--text); }
.search-src-btn.active {
  background: var(--accent); color: var(--on-accent);
}
.search-src-btn svg { flex-shrink: 0; }

/* YTM badge in results */
.ytm-badge {
  font-size: 10px; font-weight: 700; color: #ff0000;
  background: rgba(255,0,0,.12); padding: 2px 6px;
  border-radius: 4px; white-space: nowrap;
}

#search-ym-status { font-size: 14px; color: var(--dim); min-height: 20px; padding: 12px 24px 0; }

/* Search results */
#search-ym-results { display: flex; flex-direction: column; padding: 8px 12px; }
.ym-result {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 6px; cursor: pointer;
  transition: background 0.12s;
}
.ym-result:hover { background: var(--bg3); }

.ym-cover {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 6px; background: var(--bg3);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--dim2);
}
.ym-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ym-info { flex: 1; min-width: 0; }
.ym-title { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 3px; }
.ym-meta { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ym-dur { font-size: 12px; color: var(--dim); flex-shrink: 0; }
.ym-dl-btn {
  font-family: var(--font); font-size: 12px; font-weight: 500;
  background: var(--bg4); color: var(--text2);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 12px; cursor: pointer; flex-shrink: 0;
  transition: background 0.15s;
  white-space: nowrap;
}
.ym-dl-btn:hover { background: var(--bg5); color: var(--text); }
.ym-dl-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Search like button */
.ym-like-btn {
  background: none; border: none; cursor: pointer;
  color: var(--dim); padding: 6px; flex-shrink: 0;
  transition: color .15s, transform .15s;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.ym-like-btn:hover { color: var(--text); transform: scale(1.15); }
.ym-like-btn.liked { color: var(--red); animation: heart-pop 0.35s ease; }
.ym-like-btn.liked:hover { color: var(--red); }

/* progress */
.ym-progress-wrap { flex-shrink: 0; width: 90px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.ym-progress-bar { width: 100%; height: 4px; background: var(--bg4); border-radius: 2px; overflow: hidden; }
.ym-progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.2s; border-radius: 2px; }
.ym-progress-label { font-size: 11px; color: var(--dim); }

/* ── QUEUE VIEW ────────────────────────── */
#queue-list { display: flex; flex-direction: column; padding: 8px 12px; }
.queue-item {
  display: flex; align-items: center; padding: 8px 12px; gap: 12px;
  cursor: pointer; border-radius: 6px;
  transition: background 0.12s;
}
.queue-item:hover { background: var(--bg3); }
.queue-item.playing { background: rgba(255,219,77,0.08); }
.queue-item.playing .qi-title { color: var(--accent); }
.qi-idx { width: 24px; text-align: right; font-size: 13px; color: var(--dim); flex-shrink: 0; }
.qi-cover {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 6px; background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--dim2); overflow: hidden;
}
.qi-cover img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; }
.qi-info { flex: 1; min-width: 0; }
.qi-title { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }
.qi-meta { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qi-remove {
  font-size: 16px; background: none; border: none;
  color: var(--dim2); cursor: pointer; padding: 4px; opacity: 0;
  border-radius: 4px; flex-shrink: 0;
  transition: opacity 0.15s, color 0.15s;
}
.queue-item:hover .qi-remove { opacity: 1; }
.qi-remove:hover { color: var(--red); }

/* ── PLAYER BAR ────────────────────────── */
#player-bar {
  height: var(--player-h);
  background: var(--bg2);
  border-top: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 24px; gap: 20px;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  box-shadow: 0 -4px 24px rgba(0,0,0,.25);
}

/* Left: cover + info + like */
#player-left {
  display: flex; align-items: center; gap: 14px;
  width: 300px; flex-shrink: 0; min-width: 0;
}
#player-cover-wrap {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 12px; overflow: hidden;
  position: relative; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
#player-cover-wrap:hover::after {
  content: '↑';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff;
  border-radius: 6px;
}
#player-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
#player-cover-ph {
  width: 100%; height: 100%; background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--dim2);
  position: absolute; top: 0; left: 0; border-radius: 6px;
}
#player-info { flex: 1; min-width: 0; overflow: hidden; }
#player-title {
  font-size: 15px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 3px;
}
#player-artist { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#btn-like { color: var(--dim2); }
#btn-like:hover { color: var(--red) !important; background: none !important; }
#btn-like.liked { color: var(--red) !important; animation: heart-pop 0.35s ease; }
#btn-like.liked:hover { color: var(--red) !important; }

/* Center: controls + progress */
#player-center {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#player-controls { display: flex; align-items: center; gap: 8px; }

.px-ctrl-btn {
  background: none; color: var(--dim); border: none;
  width: 40px; height: 40px;
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: color 0.15s, background 0.15s;
}
.px-ctrl-btn:hover { color: var(--text); background: var(--bg4); }
.px-ctrl-btn.active { color: var(--accent); }

.px-play-btn {
  width: 48px !important; height: 48px !important;
  background: var(--text) !important; color: var(--bg) !important;
  border-radius: 50% !important; font-size: 16px !important;
  transition: transform 0.1s, background 0.15s !important;
  box-shadow: none !important;
}
.px-play-btn:hover { background: #e0e0e0 !important; transform: scale(1.06) !important; color: var(--bg) !important; }
.px-play-btn:active { animation: play-pulse 0.3s ease !important; }
@keyframes play-pulse { 0%{transform:scale(1)} 50%{transform:scale(0.85)} 100%{transform:scale(1)} }

#player-progress-wrap {
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: 520px;
}
#time-current, #time-total { font-size: 11px; color: var(--dim); width: 32px; flex-shrink: 0; user-select: none; }
#time-total { text-align: right; }

#progress-bar {
  flex: 1; height: 4px; background: var(--bg5);
  border-radius: 2px; cursor: pointer; position: relative;
  transition: height 0.15s;
}
#progress-bar:hover { height: 6px; }
#progress-fill {
  height: 100%; background: var(--text);
  border-radius: 2px;
  width: 0%; transition: width 0.1s linear; pointer-events: none;
}
#progress-bar:hover #progress-fill { background: var(--accent); }
#progress-thumb {
  width: 12px; height: 12px; background: var(--text);
  border-radius: 50%;
  position: absolute; top: 50%; left: 0%;
  transform: translate(-50%,-50%); opacity: 0;
  transition: opacity 0.15s; pointer-events: none;
}
#progress-bar:hover #progress-thumb { opacity: 1; }

/* Right: queue + volume */
#player-right {
  width: 180px; display: flex; align-items: center;
  justify-content: flex-end; gap: 4px; flex-shrink: 0;
}
#volume-wrap { display: flex; align-items: center; gap: 6px; }
.px-range {
  width: 80px; cursor: pointer;
  accent-color: var(--text); height: 4px;
  border-radius: 2px;
}

/* ── SETTINGS PANEL ────────────────────── */
#settings-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200;
  backdrop-filter: blur(2px);
}
#settings-panel {
  position: fixed; top: 0; right: 0; bottom: var(--player-h);
  width: 340px; background: var(--bg2);
  border-left: 1px solid var(--border);
  z-index: 201; overflow-y: auto;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.4);
}
#settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  position: sticky; top: 0; background: var(--bg2); z-index: 3;
}
#settings-tabs {
  display: flex; gap: 6px; padding: 10px 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--border); background: var(--bg2);
  position: sticky; top: 57px; z-index: 2; overflow-x: auto; scrollbar-width: none;
}
#settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
  flex: 0 0 auto; white-space: nowrap; padding: 7px 12px; border: none;
  border-radius: 8px; background: var(--bg3); color: var(--dim);
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active { background: var(--accent); color: var(--on-accent); }
.settings-section { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.settings-label { font-size: 11px; color: var(--dim); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.8px; }
.settings-hint { font-size: 11px; color: var(--dim2); margin-top: 8px; line-height: 1.6; word-break: break-all; font-family: monospace; }

/* Custom GUI color pickers */
.gui-color-row {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
}
.gui-color-input {
  width: 36px; height: 28px; border: 2px solid var(--border); border-radius: 6px;
  cursor: pointer; background: transparent; padding: 0;
  -webkit-appearance: none; appearance: none;
}
.gui-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.gui-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.gui-color-hex { font-family: monospace; font-size: 12px; color: var(--dim); min-width: 60px; }
.mini-btn {
  font-size: 10px !important; padding: 3px 8px !important; border-radius: 4px !important;
  background: var(--bg4) !important; color: var(--dim) !important; border: 1px solid var(--border) !important;
  cursor: pointer; transition: all 0.15s;
}
.mini-btn:hover { background: var(--bg5) !important; color: var(--text) !important; }
.mini-btn.active { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }

/* Theme grid */
#theme-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.theme-tile {
  padding: 8px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: border-color 0.15s, background 0.15s;
  background: var(--bg3);
}
.theme-tile:hover { border-color: var(--dim); background: var(--bg4); }
.theme-tile.active { border-color: var(--accent); }
.theme-swatches { display: flex; gap: 3px; }
.theme-swatch { width: 10px; height: 10px; border-radius: 2px; }
.theme-name { font-size: 10px; color: var(--text2); text-align: center; white-space: nowrap; }

/* Toggles */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; font-size: 13px; color: var(--text);
}
.px-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.px-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.px-toggle-track {
  width: 36px; height: 20px;
  background: var(--bg5); border-radius: 10px;
  position: relative; display: block; cursor: pointer;
  transition: background 0.2s;
}
.px-toggle-track::after {
  content: ''; position: absolute;
  left: 3px; top: 3px; width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  transition: left 0.2s;
}
.px-toggle input:checked + .px-toggle-track { background: var(--accent); }
.px-toggle input:checked + .px-toggle-track::after { left: 19px; }

/* ── EMPTY STATE ───────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 20px;
  color: var(--dim); gap: 12px; font-size: 14px; text-align: center;
}

/* ── LOADING ───────────────────────────── */
#loading {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; z-index: 9990;
}
.loading-text { font-size: 14px; color: var(--dim); animation: fade-pulse 1s ease-in-out infinite; }
@keyframes fade-pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }
#cat-wrap.dancing { animation: none; }

/* ── AUTH SCREEN ───────────────────────── */
#auth-screen, #key-gate {
  position: fixed; inset: 0; z-index: 8000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
#key-gate { z-index: 8500; }
#auth-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  padding: 36px 36px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  min-width: 320px; max-width: 360px; width: 90%;
}
#auth-canvas { width: 52px; height: 52px; border-radius: 10px; }
#auth-title {
  font-size: 20px; font-weight: 700; color: var(--text);
  letter-spacing: -0.3px;
}
#auth-tabs { display: flex; width: 100%; gap: 0; background: var(--bg3); border-radius: 8px; padding: 3px; }
.auth-tab {
  flex: 1; font-family: var(--font); font-size: 13px; font-weight: 500;
  background: none; color: var(--dim);
  border: none; padding: 7px 4px; cursor: pointer;
  border-radius: 6px; transition: background 0.15s, color 0.15s;
}
.auth-tab.active { background: var(--bg5); color: var(--text); }
#auth-login-form, #auth-register-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.auth-error { font-size: 12px; color: var(--red); min-height: 14px; text-align: center; }
.auth-submit {
  width: 100%; margin-top: 4px;
  font-size: 14px; font-weight: 600;
  background: var(--accent); color: var(--on-accent);
  border: none; border-radius: 24px;
  padding: 12px; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.auth-submit:hover { background: var(--accent2); transform: scale(1.02); }
.auth-submit:active { transform: scale(0.98); }

/* ── EXPANDED PLAYER ───────────────────── */
#exp-player {
  position: fixed; inset: 0; z-index: 5000;
  background: var(--bg);
  display: flex; flex-direction: row;
  overflow: hidden;
}
#exp-close {
  position: absolute; top: 16px; right: 20px;
  font-size: 20px; background: none; border: none; color: var(--dim);
  cursor: pointer; z-index: 10; padding: 6px 10px; border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
#exp-close:hover { background: var(--bg3); color: var(--text); }

/* exp left panel */
#exp-left {
  width: 420px; flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px; padding: 48px 40px;
  border-right: 1px solid var(--border);
}
#exp-cover-wrap {
  width: 260px; height: 260px; flex-shrink: 0;
  border-radius: 16px; overflow: hidden;
  cursor: pointer;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  transition: transform 0.2s;
}
#exp-cover-wrap:hover { transform: scale(1.02); }
#exp-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
#exp-cover-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; color: var(--dim2); background: var(--bg3);
}
#exp-track-info { text-align: center; width: 100%; }
#exp-title {
  font-size: 18px; font-weight: 700; color: var(--text);
  margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: -0.3px;
}
#exp-artist { font-size: 14px; color: var(--dim); }
#exp-controls { display: flex; gap: 12px; align-items: center; }
#exp-controls .px-play-btn {
  width: 52px !important; height: 52px !important; font-size: 18px !important;
}
#exp-progress-wrap {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-size: 12px; color: var(--dim);
}
#exp-progress-bar {
  flex: 1; height: 4px; background: var(--bg5);
  border-radius: 2px; position: relative; cursor: pointer;
  transition: height 0.15s;
}
#exp-progress-bar:hover { height: 6px; }
#exp-progress-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--text); border-radius: 2px; width: 0%;
  transition: width 0.25s linear;
}
#exp-progress-bar:hover #exp-progress-fill { background: var(--accent); }
#exp-progress-thumb {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 12px; height: 12px; background: var(--text);
  border-radius: 50%; left: 0%; opacity: 0; transition: opacity 0.15s;
}
#exp-progress-bar:hover #exp-progress-thumb { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════
   VINYL MODE — spinning record on the left, lyrics on the right
   Toggled by .vinyl-on on #exp-player (via the "ВИНИЛ" tab).
   ════════════════════════════════════════════════════════════════════ */
#exp-player.vinyl-on #exp-left {
  background: radial-gradient(120% 120% at 50% 0%, var(--bg3) 0%, var(--bg) 70%);
}
#exp-player.vinyl-on #exp-cover-wrap {
  width: min(340px, 60vh); height: min(340px, 60vh);
  border-radius: 50%; overflow: visible; cursor: pointer;
  background: #080808;
  background-image:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.05) 0 1px, rgba(0,0,0,0) 1px 4px),
    radial-gradient(circle at 38% 32%, rgba(255,255,255,0.10), rgba(255,255,255,0) 45%);
  box-shadow: 0 22px 70px rgba(0,0,0,0.75), inset 0 0 0 2px rgba(255,255,255,0.04);
  transition: none;
  animation: vinyl-spin 4.2s linear infinite;
  animation-play-state: paused;
}
body.audio-playing #exp-player.vinyl-on #exp-cover-wrap { animation-play-state: running; }
#exp-player.vinyl-on #exp-cover-wrap:hover { transform: none; }
/* tint the disc with the cover colour (setting "Цвет винила под обложку") */
#exp-player.vinyl-on.vinyl-cover #exp-cover-wrap {
  background-image:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.06) 0 1px, rgba(0,0,0,0) 1px 4px),
    radial-gradient(circle at 38% 32%, rgba(255,255,255,0.12), rgba(255,255,255,0) 45%),
    radial-gradient(circle at 50% 50%, rgba(var(--vinyl-rgb,40,40,40),0.5) 0%, rgba(0,0,0,0.92) 78%);
  box-shadow: 0 22px 70px rgba(0,0,0,0.7),
              0 0 70px rgba(var(--vinyl-rgb,40,40,40),0.45),
              inset 0 0 0 2px rgba(var(--vinyl-rgb,255,255,255),0.18);
}
/* album art becomes the round centre label */
#exp-player.vinyl-on #exp-cover,
#exp-player.vinyl-on #exp-cover-ph {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40%; height: 40%; border-radius: 50%; font-size: 28px;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.65), 0 0 0 6px rgba(255,255,255,0.10),
              inset 0 0 18px rgba(0,0,0,0.5);
}
/* spindle hole */
#exp-player.vinyl-on #exp-cover-wrap::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); box-shadow: 0 0 0 3px #050505, inset 0 0 4px rgba(0,0,0,0.8);
  z-index: 2;
}
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
/* on mobile the disc sits on top, lyrics fill the rest (matches the mockup) */
@media (max-width: 768px) {
  #exp-player.vinyl-on #exp-cover-wrap { width: min(70vw, 320px); height: min(70vw, 320px); margin: 12px auto; }
}

/* ── AI stem mixer (СТЕМЫ tab) ─────────────────────────────────────────── */
#exp-stems-content { padding: 16px 18px; overflow-y: auto; }
.sm-intro, .sm-note { font-size: 12px; color: var(--dim); line-height: 1.5; }
.sm-intro { margin-bottom: 12px; }
.sm-note { margin-top: 14px; }
.sm-head { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; color: var(--text2); margin-bottom: 10px; text-transform: uppercase; }
.sm-strips { display: flex; flex-direction: column; gap: 8px; }
.sm-strip {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
}
.sm-mute {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--bg4); color: var(--text);
  cursor: pointer; font-size: 16px; line-height: 1; transition: all 0.15s;
}
.sm-mute:hover { border-color: var(--accent); }
.sm-mute.muted { background: rgba(255,80,80,0.18); border-color: #ff5c6c; opacity: 0.85; }
.sm-name { width: 86px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.sm-vol { flex: 1; accent-color: var(--accent); cursor: pointer; min-width: 60px; }
.sm-dl { flex-shrink: 0; color: var(--dim); text-decoration: none; font-size: 18px; padding: 0 4px; }
.sm-dl:hover { color: var(--accent); }
.sm-transport { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.sm-play {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  border: none; background: var(--accent); color: var(--on-accent); cursor: pointer;
  font-size: 18px; display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s;
}
.sm-play:hover { transform: scale(1.06); }
.sm-prog { flex: 1; height: 6px; border-radius: 3px; background: var(--bg5); cursor: pointer; position: relative; }
.sm-prog-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 3px; transition: width 0.2s linear; }
.sm-time { font-size: 11px; color: var(--dim); min-width: 84px; text-align: left; font-variant-numeric: tabular-nums; }

/* On the STEMS tab the mixer sits on top and the synced lyrics scroll below it */
#exp-player.stems-on #exp-stems-content { flex: 0 0 auto; max-height: 52%; overflow-y: auto; }
#exp-player.stems-on #exp-lyrics-content { flex: 1 1 auto; min-height: 0; display: flex !important; border-top: 1px solid var(--border); }

/* ── DAW-style lanes ── */
.sm-transport { margin: 0 0 12px; }
.sm-daw-tag { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--dim2); text-transform: uppercase; }
.sm-lanes { position: relative; display: flex; flex-direction: column; gap: 6px; }
.sm-lane {
  display: flex; align-items: stretch; gap: 0;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; min-height: 60px;
  transition: opacity 0.15s;
}
.sm-lane.sm-dim { opacity: 0.45; }
.sm-lane-head {
  width: 168px; flex-shrink: 0; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 8px 10px; background: var(--bg4);
}
.sm-lane-head .sm-name { font-size: 13px; font-weight: 700; color: var(--text); }
.sm-lane-ctl { display: flex; align-items: center; gap: 6px; }
.sm-ms {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--bg5); color: var(--dim);
  font-size: 11px; font-weight: 800; cursor: pointer; transition: all 0.12s;
}
.sm-ms:hover { color: var(--text); }
.sm-m.on { background: #ff5c6c; border-color: #ff5c6c; color: #fff; }
.sm-s.on { background: #ffd24a; border-color: #ffd24a; color: #000; }
.sm-lane-ctl .sm-vol { flex: 1; min-width: 40px; accent-color: var(--accent); cursor: pointer; }
.sm-lane-ctl .sm-dl { flex-shrink: 0; color: var(--dim); text-decoration: none; font-size: 15px; }
.sm-lane-ctl .sm-dl:hover { color: var(--accent); }
.sm-lane-wave { flex: 1; min-width: 0; cursor: pointer; position: relative; }
.sm-lane-wave canvas { display: block; width: 100%; height: 100%; }
.sm-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; left: 168px;
  background: rgba(255,255,255,0.85); box-shadow: 0 0 6px rgba(255,255,255,0.6);
  pointer-events: none; z-index: 5;
}

/* exp right panel */
#exp-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#exp-tabs {
  display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0;
  padding: 0 8px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
#exp-tabs::-webkit-scrollbar { display: none; }
.exp-tab {
  font-family: var(--font); font-size: 14px; font-weight: 500;
  background: none; border: none; color: var(--dim);
  padding: 16px 12px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s;
  white-space: nowrap; flex-shrink: 0;
}
.exp-tab:hover { color: var(--text); }
.exp-tab.active { color: var(--text); border-bottom-color: var(--accent); }

#exp-queue-content, #exp-tabs-content { flex: 1; overflow-y: auto; padding: 8px 0; }
#exp-lyrics-content { flex: 1; overflow: hidden; padding: 0; }
.exp-queue-item {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 20px; cursor: pointer; border-radius: 6px;
  transition: background 0.12s;
}
.exp-queue-item:hover { background: var(--bg3); }
.exp-queue-item.playing { background: rgba(255,219,77,0.08); }
.exp-qi-cover {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 6px; overflow: hidden; background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--dim2);
}
.exp-qi-cover img { width: 100%; height: 100%; object-fit: cover; }
.exp-qi-info { min-width: 0; }
.exp-qi-title {
  font-size: 14px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 3px;
}
.exp-qi-meta { font-size: 12px; color: var(--dim); }

/* Lyrics */
#exp-lyrics-content {
  display: flex; flex-direction: column; position: relative;
}
#exp-lyrics-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
}
#exp-lyrics-lines { padding: 40px 24px 20px; display: flex; flex-direction: column; gap: 18px; min-height: 200px; overflow: visible; }

/* ── Base lyric line (default: scrolling list) ── */
.lyric-line {
  font-size: 22px; color: var(--text2);
  line-height: 1.35; cursor: pointer;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease, color .3s ease, filter .35s ease;
  opacity: 0.55; font-weight: 600;
  font-family: var(--font);
  position: relative;
  word-break: break-word; overflow-wrap: break-word;
  max-width: 100%;
  overflow: visible;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform-origin: left center;
  will-change: transform, opacity;
}
.lyric-line.static {
  opacity: 0.85; cursor: default; font-size: 17px;
  color: var(--text2); line-height: 1.7;
}
.lyric-line.active {
  color: var(--text); opacity: 1; font-weight: 600; transform: scale(1.12); line-height: 1.3;
}
.lyric-line.prev, .lyric-line.upcoming { opacity: 0.7; }
.lyric-line.far { opacity: 0.3; }
.lyric-line:hover { opacity: 1 !important; color: var(--text) !important; }

/* ── Char spans: word-by-word color for non-typewriter ── */
.lyric-line .ly-word {
  display: inline;
  transition: color .12s ease;
}
.lyric-line.active .ly-word { color: var(--dim); opacity: 0.35; transition: color .12s ease, opacity .15s ease; -webkit-text-fill-color: initial; }
.lyric-line.active .ly-word.lit { color: var(--ly-color, var(--accent)); opacity: 1; }
.lyric-line.active[data-ly-grad] .ly-word.lit {
  background: var(--ly-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 1;
}
.lyric-line.active[data-ly-grad] .ly-word:not(.lit) {
  background: none; -webkit-text-fill-color: initial; opacity: 0.25;
}
/* Keep typewriter/single non-lit words hidden even with gradient */
[data-ly-anim="typewriter"] .lyric-line.active[data-ly-grad] .ly-word:not(.lit) {
  opacity: 0; background: none; -webkit-text-fill-color: initial;
}
[data-ly-tw-show="1"][data-ly-anim="typewriter"] .lyric-line.active[data-ly-grad] .ly-word:not(.lit) {
  opacity: 0.2;
}
[data-ly-anim="single"] .lyric-line.active[data-ly-grad] .ly-word:not(.lit) {
  opacity: 0.2; background: none; -webkit-text-fill-color: initial;
}

/* ── Animation: Классика (classic) — whole-line highlight, no word-by-word ── */
[data-ly-anim="classic"] .lyric-line.active .ly-word {
  color: var(--ly-color, var(--accent)) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: initial;
}
[data-ly-anim="classic"] .lyric-line.active[data-ly-grad] .ly-word {
  background: var(--ly-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 1 !important;
}

/* ── Animation: Кинетик (kinetic) ── */
[data-ly-anim="kinetic"] .lyric-line { transition: all .45s cubic-bezier(.34,1.2,.64,1); }
[data-ly-anim="kinetic"] .lyric-line.active { transform: scale(1); }
[data-ly-anim="kinetic"] .lyric-line:not(.active) { transform: scale(0.93); }
[data-ly-anim="kinetic"] .lyric-line.far { opacity: 0.08; transform: scale(0.88); }

/* ── Animation: Фокус (focus) — only active sharp, rest blur ── */
[data-ly-anim="focus"] .lyric-line { transition: all .5s ease; filter: blur(2.5px); opacity: 0.12; }
[data-ly-anim="focus"] .lyric-line.active { filter: blur(0); opacity: 1; }
[data-ly-anim="focus"] .lyric-line.prev,
[data-ly-anim="focus"] .lyric-line.upcoming { filter: blur(1.2px); opacity: 0.25; }
[data-ly-anim="focus"] .lyric-line.far { filter: blur(4px); opacity: 0; }

/* ── Animation: Волна (wave) ── */
[data-ly-anim="wave"] .lyric-line { transition: all .4s ease; }
[data-ly-anim="wave"] .lyric-line.active { animation: ly-wave-float 2.5s ease-in-out infinite; }
[data-ly-anim="wave"] .lyric-line.far { opacity: 0.08; }
@keyframes ly-wave-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ══ Animation: Печать (typewriter) — SINGLE CENTERED LINE ══ */
/* Container overrides */
#exp-lyrics-content[data-ly-anim="typewriter"] #exp-lyrics-scroll {
  overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 12px;
}
#exp-lyrics-content[data-ly-anim="typewriter"] #exp-lyrics-lines {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 0 30px; gap: 0; text-align: center; min-height: 100%;
  position: relative; overflow: visible; flex-direction: row;
}
/* Hide ALL non-active lines */
[data-ly-anim="typewriter"] .lyric-line {
  display: none !important; opacity: 0; transition: none;
}
/* Active line: big, centered, animated entrance */
[data-ly-anim="typewriter"] .lyric-line.active {
  display: block !important; opacity: 1; pointer-events: auto;
  font-size: clamp(28px, 5vw, 56px); font-weight: 900; line-height: 1.2;
  max-width: 90%; text-align: center;
  word-break: break-word; overflow-wrap: break-word;
  animation: ly-line-in .5s cubic-bezier(.16,1,.3,1) both;
}
/* Leaving line — exit animation set by JS */
[data-ly-anim="typewriter"] .lyric-line.ly-leaving {
  display: block !important; opacity: 1; pointer-events: none;
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  animation-timing-function: ease-out;
}
/* Char hiding for typewriter — use opacity so full line width is reserved */
[data-ly-anim="typewriter"] .lyric-line.active .ly-word {
  display: inline;
  opacity: 0;
  transition: none;
  color: var(--ly-color, var(--accent));
}
/* Chars appear */
[data-ly-anim="typewriter"] .lyric-line.active .ly-word.lit {
  opacity: 1;
  color: var(--ly-color, var(--accent));
  animation: ly-type-pop .06s ease-out both;
}
[data-ly-anim="typewriter"] .lyric-line.active[data-ly-grad] .ly-word.lit {
  background: var(--ly-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 1;
}
/* Typewriter: show upcoming (un-lit) words dimly when toggled on */
[data-ly-tw-show="1"][data-ly-anim="typewriter"] .lyric-line.active .ly-word {
  opacity: 0.2;
}
[data-ly-tw-show="1"][data-ly-anim="typewriter"] .lyric-line.active .ly-word.lit {
  opacity: 1;
}

/* ── Animation: Single line (строка) — only active line visible, centered ── */
[data-ly-anim="single"] .lyric-line {
  display: none !important;
}
[data-ly-anim="single"] .lyric-line.active {
  display: flex !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: clamp(24px, 4.5vw, 48px);
  font-weight: 900;
  opacity: 1;
  max-width: 90%;
  margin: 0 auto;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
  animation: ly-single-in 0.4s cubic-bezier(.16,1,.3,1) both;
}
[data-ly-anim="single"] .lyric-line.active .ly-word { display: inline; transition: opacity .12s ease, color .12s ease; }
[data-ly-anim="single"] .lyric-line.active .ly-word:not(.lit) { opacity: 0.3; color: var(--dim); }
[data-ly-anim="single"] .lyric-line.active .ly-word.lit { opacity: 1; color: var(--ly-color, var(--accent)); }
[data-ly-anim="single"] .lyric-line.active[data-ly-grad] .ly-word.lit {
  background: var(--ly-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 1;
}
[data-ly-anim="single"] #exp-lyrics-lines,
[data-ly-anim="single"] #karaoke-lyrics-lines {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}
@keyframes ly-single-in {
  0%   { opacity: 0; transform: translateY(18px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ly-line-in {
  0%   { opacity: 0; transform: scale(0.55) translateY(35px); filter: blur(16px); }
  50%  { opacity: 1; filter: blur(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
/* Exit animations — set via JS on .ly-leaving */
@keyframes ly-line-out { /* blur */
  0%   { opacity: 1; transform: translateY(-50%) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(calc(-50% - 40px)) scale(0.7); filter: blur(18px); }
}
@keyframes ly-exit-fade {
  0%   { opacity: 1; transform: translateY(-50%); }
  100% { opacity: 0; transform: translateY(-50%); }
}
@keyframes ly-exit-up {
  0%   { opacity: 1; transform: translateY(-50%); }
  100% { opacity: 0; transform: translateY(calc(-50% - 120px)); }
}
@keyframes ly-exit-down {
  0%   { opacity: 1; transform: translateY(-50%); }
  100% { opacity: 0; transform: translateY(calc(-50% + 120px)); }
}
@keyframes ly-exit-zoom {
  0%   { opacity: 1; transform: translateY(-50%) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-50%) scale(2.5); filter: blur(10px); }
}
@keyframes ly-exit-shrink {
  0%   { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-50%) scale(0); }
}
@keyframes ly-exit-glitch {
  0%   { opacity: 1; transform: translateY(-50%); filter: none; }
  15%  { opacity: 1; transform: translateY(-50%) skewX(20deg) translateX(30px); filter: hue-rotate(90deg); }
  30%  { opacity: 0.9; transform: translateY(-50%) skewX(-15deg) translateX(-40px); filter: hue-rotate(180deg); }
  50%  { opacity: 0.6; transform: translateY(-50%) skewX(10deg) translateX(20px); filter: hue-rotate(-90deg) saturate(3); }
  70%  { opacity: 0.3; transform: translateY(-50%) skewX(-20deg) translateX(-25px); filter: hue-rotate(270deg); }
  100% { opacity: 0; transform: translateY(-50%) skewX(0); filter: none; }
}
@keyframes ly-exit-flip {
  0%   { opacity: 1; transform: translateY(-50%) perspective(800px) rotateX(0deg); }
  100% { opacity: 0; transform: translateY(-50%) perspective(800px) rotateX(90deg) scale(0.8); }
}
/* Exit animation names applied directly via JS on .ly-leaving elements */
@keyframes ly-type-pop {
  0%   { transform: scale(0.4) translateY(5px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── Animation: Неон (neon glow pulse) ── */
[data-ly-anim="neon"] .lyric-line { transition: all .4s ease; }
[data-ly-anim="neon"] .lyric-line.active { animation: ly-neon-pulse 1.5s ease-in-out infinite; }
[data-ly-anim="neon"] .lyric-line.far { opacity: 0.08; }
@keyframes ly-neon-pulse {
  0%, 100% { text-shadow: 0 0 10px currentColor, 0 0 30px currentColor, 0 0 60px currentColor; }
  50% { text-shadow: 0 0 5px currentColor, 0 0 15px currentColor, 0 0 35px currentColor; }
}

/* ── Animation: Глитч (glitch) ── */
[data-ly-anim="glitch"] .lyric-line { transition: all .3s ease; }
[data-ly-anim="glitch"] .lyric-line.active { animation: ly-glitch 3s infinite linear; }
[data-ly-anim="glitch"] .lyric-line.far { opacity: 0.08; }
@keyframes ly-glitch {
  0%, 92%, 100% { transform: translate(0); }
  93% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
  95% { transform: translate(2px, -1px); }
  97% { transform: translate(-1px, -1px); filter: hue-rotate(-90deg); }
}

/* ── Anim selector grid ── */
.lyset-anim-grid { display:flex; flex-wrap:wrap; gap:5px; margin:4px 0; }
.lya-btn {
  padding:5px 12px; border-radius:8px; cursor:pointer;
  background:var(--bg3); border:1.5px solid var(--border);
  color:var(--text2); font-size:11px; font-weight:600;
  transition:all .12s; white-space:nowrap;
}
.lya-btn:hover { border-color:var(--dim); color:var(--text); }
.lya-btn.active { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--bg3)); }
.lyrics-empty {
  text-align: center; color: var(--dim); font-size: 16px;
  padding: 60px 20px; line-height: 2.5;
}
.lyrics-empty-new {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 24px; text-align: center;
}

/* ── Songsterr Tabs Panel ── */
#exp-tabs-content { padding: 0; }
.tabs-status { padding: 32px 20px; text-align: center; color: var(--dim); font-size: 13px; }
.tabs-empty { text-align: center; color: var(--dim); font-size: 14px; padding: 48px 20px; line-height: 2.5; }

/* Tab panel header */
.tab-panel-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--border);
}
.tab-panel-song { flex: 1; min-width: 0; }
.tab-panel-title { font-size: 15px; font-weight: 600; color: var(--text); }
.tab-panel-artist { font-size: 12px; color: var(--dim); margin-top: 2px; }
.tab-panel-open {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: #ff6b35; color: #fff;
  border-radius: 8px; text-decoration: none; font-size: 12px; font-weight: 600;
  white-space: nowrap; transition: background .15s; flex-shrink: 0;
}
.tab-panel-open:hover { background: #ff8555; }

/* Big open Songsterr button */
.tab-open-big {
  display: flex; align-items: center; gap: 14px;
  margin: 16px; padding: 16px 20px;
  background: linear-gradient(135deg, #ff6b35, #ff8c00);
  border-radius: 12px; text-decoration: none; color: #fff;
  transition: transform .12s, box-shadow .12s;
}
.tab-open-big:hover { transform: scale(1.02); box-shadow: 0 4px 20px rgba(255,107,53,0.4); }
.tab-open-big svg { flex-shrink: 0; opacity: 0.9; }
.tab-open-title { font-size: 15px; font-weight: 600; }
.tab-open-sub { font-size: 12px; opacity: 0.8; margin-top: 2px; }

/* Section headers */
.tabs-section-header {
  font-size: 11px; color: var(--dim); letter-spacing: .5px; font-weight: 600;
  padding: 14px 16px 6px; text-transform: uppercase;
}

/* Tracks list */
.tab-tracks-list { padding: 0 8px; }
.tab-track-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  transition: background .12s;
}
.tab-track-row:hover { background: var(--bg4); }
.tab-track-icon { color: #ff8c00; flex-shrink: 0; display: flex; align-items: center; }
.tab-track-icon svg { width: 20px; height: 20px; flex-shrink: 0; }

.tab-track-details { flex: 1; min-width: 0; }
.tab-track-name { font-size: 13px; color: var(--text); font-weight: 500; }
.tab-track-meta { font-size: 11px; color: var(--dim); margin-top: 2px; }
.tab-track-views {
  font-size: 11px; color: var(--dim); flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
}
.tab-track-views::before { content: ''; }

/* Other results */
.tabs-result-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; transition: background .12s;
  text-decoration: none; color: inherit;
}
.tabs-result-row:hover { background: var(--bg4); }
.tabs-result-info { flex: 1; min-width: 0; }
.tabs-result-title { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs-result-artist { font-size: 11px; color: var(--dim); margin-top: 1px; }
.tabs-open-icon { color: var(--dim); flex-shrink: 0; opacity: 0.5; }
.tabs-result-row:hover .tabs-open-icon { opacity: 1; color: var(--accent); }

/* ── Audio Visualizer (cyan glow bars) ── */
#lyrics-visualizer {
  width: 100%; height: 120px;
  flex-shrink: 0;
  pointer-events: none;
}

/* ── KARAOKE ──────────────────────────── */
#karaoke-standalone { flex:1; overflow-y:auto; padding:0; display:flex; flex-direction:column; position:relative; }
#karaoke-back-btn:hover { filter: brightness(1.25); }

/* Lobby */
#karaoke-lobby { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; padding:48px 24px; gap:0; }
.karaoke-hero { text-align:center; margin-bottom:24px; }
.karaoke-hero svg { width:36px; height:36px; }
.karaoke-hero h2 { margin:10px 0 4px; font-size:18px; color:var(--text); font-weight:700; }
.karaoke-hero p { color:var(--dim2); font-size:12px; max-width:260px; margin:0 auto; line-height:1.4; }
.karaoke-name-row { width:100%; max-width:240px; margin-bottom:14px; }
.karaoke-name-row input {
  width:100%; background:var(--bg3); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:9px 14px; font-size:13px; font-family:var(--font); outline:none;
  text-align:center; transition:border-color .2s;
}
.karaoke-name-row input:focus { border-color:var(--accent); }
.karaoke-actions { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:240px; }
.karaoke-btn {
  padding:9px 18px; border-radius:8px; font-size:13px; font-weight:600;
  font-family:var(--font); cursor:pointer; border:none; transition:all .15s; width:100%;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.karaoke-btn-create { background:var(--accent); color: var(--on-accent); font-weight:700; }
.karaoke-btn-create:hover { filter:brightness(1.1); transform:translateY(-1px); }
.karaoke-btn-join { background:var(--bg3); color:var(--text); border:1px solid var(--border); flex-shrink:0; width:auto; padding:9px 16px; }
.karaoke-btn-join:hover { border-color:var(--accent); }
.karaoke-btn-small {
  padding:5px 10px; border-radius:6px; font-size:11px; font-family:var(--font);
  background:var(--bg3); color:var(--text); border:1px solid var(--border); cursor:pointer;
  display:flex; align-items:center; gap:4px; transition:all .15s;
}
.karaoke-btn-small:hover { border-color:var(--accent); }
.karaoke-divider { width:100%; display:flex; align-items:center; gap:10px; color:var(--dim2); font-size:11px; }
.karaoke-divider::before,.karaoke-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.karaoke-join-row { display:flex; gap:6px; width:100%; }
.karaoke-join-row input {
  flex:1; background:var(--bg3); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:9px 12px; font-size:14px; font-family:var(--font);
  outline:none; text-align:center; letter-spacing:3px; font-weight:700;
}
.karaoke-join-row input:focus { border-color:var(--accent); }
.karaoke-error { color:#ff4444; font-size:11px; min-height:14px; margin-top:4px; }

/* Audio settings */
.karaoke-settings-details { width:100%; max-width:240px; margin-top:10px; }
.karaoke-settings-details summary {
  cursor:pointer; color:var(--dim2); font-size:11px; text-align:center;
  padding:4px; user-select:none;
}
.karaoke-settings-details summary:hover { color:var(--text); }
.karaoke-audio-settings { display:flex; flex-direction:column; gap:10px; padding:12px 0; }
.karaoke-audio-settings label { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--text); font-weight:500; }
.karaoke-audio-settings select {
  background:var(--bg3); color:var(--text); border:1px solid var(--dim2);
  border-radius:8px; padding:9px 12px; font-size:13px; font-family:var(--font); outline:none;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  padding-right:28px; cursor:pointer;
}
.karaoke-audio-settings select:hover { border-color:var(--accent); }
#karaoke-mic-meter, #karaoke-mic-meter2 {
  height:6px; background:var(--bg3); border-radius:3px; overflow:hidden;
}
#karaoke-mic-meter-fill, #karaoke-mic-meter-fill2 {
  height:100%; width:0; background:var(--accent); border-radius:3px; transition:width .05s;
}

/* Room */
/* ═══ Karaoke Room ═══ */
#karaoke-room { display:flex; flex-direction:column; flex:1; overflow:hidden; }
#karaoke-room-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-bottom:1px solid var(--border); flex-shrink:0; gap:8px;
  /* clear the absolutely-positioned Return button (top-left) so it doesn't cover the room code */
  padding-left:140px;
}
.karaoke-room-left { display:flex; align-items:center; gap:8px; }
.karaoke-room-code { display:flex; align-items:center; gap:4px; }
.karaoke-room-code span { font-size:15px; color:var(--accent); letter-spacing:3px; font-weight:800; }
.karaoke-copy-btn {
  background:none; border:none; color:var(--dim); cursor:pointer; padding:4px;
  border-radius:4px; transition:all .15s;
}
.karaoke-copy-btn:hover { color:var(--text); background:var(--bg3); }
.karaoke-room-controls { display:flex; gap:3px; flex-shrink:0; }
.karaoke-icon-btn {
  background:none; border:1px solid transparent; border-radius:6px; color:var(--text2);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s;
}
.karaoke-icon-btn:hover { background:var(--bg3); color:var(--text); }
.karaoke-icon-btn.active { background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent); border-color:var(--accent); }
.karaoke-icon-btn.karaoke-leave { color:#ff4444; }
.karaoke-icon-btn.karaoke-leave:hover { background:rgba(255,68,68,.12); }
.karaoke-icon-btn.muted { color:#ff4444; opacity:.7; }
.karaoke-icon-btn.speaking {
  background:#4caf50 !important; color:#fff !important; border-color:#4caf50 !important;
  box-shadow:0 0 10px rgba(76,175,80,.5);
  animation: mic-pulse .8s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%,100% { box-shadow:0 0 6px rgba(76,175,80,.4); }
  50% { box-shadow:0 0 14px rgba(76,175,80,.7); }
}

/* Voice dot animation */
.kr-member-dot { transition: background .15s, box-shadow .15s; }

/* Settings panel */
#karaoke-room-settings {
  padding:10px 12px; border-bottom:1px solid var(--border); background:var(--bg2);
}
.kr-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kr-settings-col { display:flex; flex-direction:column; gap:4px; }
.kr-label { font-size:11px; color:var(--dim); display:flex; flex-direction:column; gap:4px; }
.kr-label select {
  background:var(--bg3); color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:5px 8px; font-size:11px; font-family:var(--font); outline:none;
}
.kr-range { width:100%; accent-color:var(--accent); height:4px; }
.kr-meter { height:4px; background:var(--bg3); border-radius:2px; overflow:hidden; }
.kr-meter > div { height:100%; background:var(--accent); width:0; transition:width .1s; }

/* Body: 3-column layout */
#karaoke-body { display:flex; flex:1; overflow:hidden; min-height:0; }

/* Left sidebar: members */
#kr-sidebar {
  width:180px; flex-shrink:0; border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow-y:auto; padding:8px;
}
.kr-section-title { font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:1px; padding:4px 4px 8px; font-weight:600; }
.kr-member {
  display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:6px;
  font-size:12px; color:var(--text2); transition:background .15s;
}
.kr-member:hover { background:var(--bg3); }
.kr-member.host { color:var(--accent); }
.kr-member.me { color:var(--text); font-weight:600; }
.kr-member-dot { width:6px; height:6px; border-radius:50%; background:var(--dim2); flex-shrink:0; transition:background .2s; }
.kr-member-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kr-member-name small { opacity:.5; font-size:10px; }
.kr-member-vol { width:48px; height:3px; accent-color:var(--accent); flex-shrink:0; }

/* Center: lyrics + now playing */
#kr-center { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
#karaoke-now-playing {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
#karaoke-now-playing img { width:40px; height:40px; border-radius:6px; object-fit:cover; }
#karaoke-track-info { flex:1; overflow:hidden; }
#karaoke-track-title { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#karaoke-track-artist { font-size:11px; color:var(--dim2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#karaoke-lyrics-area { flex:1; overflow-y:auto; display:flex; flex-direction:column; align-items:center; padding:16px 16px 40vh; }
#karaoke-lyrics-lines { width:100%; text-align:center; padding-top:30vh; padding-bottom:30vh; }
#karaoke-lyrics-lines .lyric-line { text-align:center; transform-origin:center center; font-size:22px; font-weight:600; padding:6px 12px; transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease, color .3s ease, text-shadow .3s ease; opacity:0.55; color:var(--text2); overflow:visible; word-break:break-word; overflow-wrap:break-word; will-change:transform,opacity; }
#karaoke-lyrics-lines .lyric-line.prev, #karaoke-lyrics-lines .lyric-line.upcoming { opacity:0.7; }
#karaoke-lyrics-lines .lyric-line.far { opacity:0.3; }
#karaoke-lyrics-lines .lyric-line.active { transform:scale(1.15); color:var(--accent); text-shadow:0 0 20px color-mix(in srgb, var(--accent) 40%, transparent); opacity:1; line-height:1.25; }

/* Karaoke animation overrides */
[data-ly-anim="focus"] #karaoke-lyrics-lines .lyric-line { filter:blur(2.5px); opacity:0.1; }
[data-ly-anim="focus"] #karaoke-lyrics-lines .lyric-line.active { filter:blur(0); opacity:1; }
[data-ly-anim="focus"] #karaoke-lyrics-lines .lyric-line.prev,
[data-ly-anim="focus"] #karaoke-lyrics-lines .lyric-line.upcoming { filter:blur(1.2px); opacity:0.2; }
[data-ly-anim="focus"] #karaoke-lyrics-lines .lyric-line.far { filter:blur(4px); opacity:0; }
[data-ly-anim="kinetic"] #karaoke-lyrics-lines .lyric-line:not(.active) { transform:scale(0.93); }
[data-ly-anim="kinetic"] #karaoke-lyrics-lines .lyric-line.far { opacity:0.08; transform:scale(0.88); }
[data-ly-anim="wave"] #karaoke-lyrics-lines .lyric-line.active { animation:ly-wave-float 2.5s ease-in-out infinite; }
[data-ly-anim="neon"] #karaoke-lyrics-lines .lyric-line.active { animation:ly-neon-pulse 1.5s ease-in-out infinite; }
[data-ly-anim="glitch"] #karaoke-lyrics-lines .lyric-line.active { animation:ly-glitch 3s infinite linear; }
/* Karaoke typewriter — single centered */
[data-ly-anim="typewriter"] #karaoke-lyrics-lines { display:flex; align-items:center; justify-content:center; padding:0 16px; position:relative; }
[data-ly-anim="typewriter"] #karaoke-lyrics-lines .lyric-line { display:none !important; }
[data-ly-anim="typewriter"] #karaoke-lyrics-lines .lyric-line.active { display:block !important; font-size:clamp(24px, 4.5vw, 48px); font-weight:900; opacity:1; max-width:90%; word-break:break-word; overflow-wrap:break-word; line-height:1.2; animation:ly-line-in .5s cubic-bezier(.16,1,.3,1) both; }
[data-ly-anim="typewriter"] #karaoke-lyrics-lines .lyric-line.ly-leaving { display:block !important; position:absolute; animation-timing-function:ease-out; pointer-events:none; }
[data-ly-anim="typewriter"] #karaoke-lyrics-lines .lyric-line.active .ly-word { display:inline; opacity:0; transition:none; color:var(--ly-color, var(--accent)); }
[data-ly-anim="typewriter"] #karaoke-lyrics-lines .lyric-line.active .ly-word.lit { opacity:1; color:var(--ly-color, var(--accent)); animation:ly-type-pop .06s ease-out both; }
#karaoke-waiting { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--dim2); font-size:13px; }

/* Right panel: search + queue */
#kr-right-panel {
  width:260px; flex-shrink:0; border-left:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
.kr-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.kr-tab {
  flex:1; padding:8px 0; text-align:center; font-size:11px; font-weight:600;
  color:var(--dim); background:none; border:none; border-bottom:2px solid transparent;
  cursor:pointer; font-family:var(--font); transition:all .15s;
}
.kr-tab:hover { color:var(--text2); }
.kr-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.kr-tab span { font-size:10px; opacity:.6; }

/* Search tab */
#kr-search-tab { display:flex; flex-direction:column; flex:1; overflow:hidden; }
#karaoke-search-wrap {
  display:flex; gap:4px; padding:8px; flex-shrink:0;
}
#karaoke-search-wrap input {
  flex:1; background:var(--bg3); color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:7px 10px; font-size:12px; font-family:var(--font); outline:none;
}
#karaoke-search-wrap input:focus { border-color:var(--accent); }
.kr-search-btn {
  background:var(--bg3); border:1px solid var(--border); border-radius:6px; color:var(--text2);
  padding:0 10px; cursor:pointer; display:flex; align-items:center; transition:all .15s;
}
.kr-search-btn:hover { border-color:var(--accent); color:var(--text); }
#karaoke-search-results { flex:1; overflow-y:auto; padding:0 4px; }
.kr-search-row {
  display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:6px;
  cursor:default; transition:background .15s;
}
.kr-search-row:hover { background:var(--bg3); }
.kr-sr-cover { width:32px; height:32px; border-radius:4px; object-fit:cover; flex-shrink:0; background:var(--bg3); display:flex; align-items:center; justify-content:center; color:var(--dim2); font-size:12px; }
.kr-sr-info { flex:1; overflow:hidden; min-width:0; }
.kr-sr-title { font-size:12px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kr-sr-artist { font-size:10px; color:var(--dim2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kr-sr-actions { display:flex; gap:3px; flex-shrink:0; }
.kr-sr-play, .kr-sr-add, .kr-sr-vote {
  width:26px; height:26px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg3); color:var(--text2); font-size:11px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.kr-sr-play:hover { background:var(--accent); color: var(--on-accent); border-color:var(--accent); }
.kr-sr-add:hover { background:var(--bg4); color:var(--text); border-color:var(--accent); }
.kr-sr-vote { color:var(--accent); }
.kr-sr-vote:hover { background:var(--accent); color: var(--on-accent); border-color:var(--accent); }

/* Rec button pulse */
#karaoke-rec-btn.active { animation: kr-rec-pulse 1s infinite; }
@keyframes kr-rec-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,68,68,.5); } 50% { box-shadow: 0 0 0 6px rgba(255,68,68,0); } }

/* Reaction float */
@keyframes kr-reaction-float {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-120px) scale(1.4); opacity: 0; }
}

/* Votes tab */
#kr-votes-tab { flex:1; flex-direction:column; overflow-y:auto; padding:4px; }

/* Queue tab */
#kr-queue-tab { display:flex; flex:1; flex-direction:column; overflow-y:auto; padding:4px; }
.kr-queue-row {
  display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:6px;
  transition:background .15s;
}
.kr-queue-row:hover { background:var(--bg3); }
.kr-q-num { font-size:10px; color:var(--dim); width:16px; text-align:center; flex-shrink:0; }
.kr-q-cover { width:28px; height:28px; border-radius:4px; object-fit:cover; flex-shrink:0; background:var(--bg3); display:flex; align-items:center; justify-content:center; color:var(--dim2); font-size:11px; }
.kr-q-info { flex:1; overflow:hidden; min-width:0; }
.kr-q-title { font-size:11px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kr-q-artist { font-size:10px; color:var(--dim2); }
.kr-q-actions { display:flex; gap:2px; flex-shrink:0; }
.kr-q-play, .kr-q-del {
  width:22px; height:22px; border-radius:50%; border:none;
  background:none; color:var(--dim); font-size:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.kr-q-play:hover { color:var(--accent); }
.kr-q-del:hover { color:#ff4444; }

#karaoke-voice-bar {
  border-top:1px solid var(--border); flex-shrink:0; padding:6px 12px; min-height:28px;
}
#karaoke-voice-indicators { display:flex; gap:6px; justify-content:center; }

/* ── HOME PAGE ─────────────────────────── */
.home-search { padding: 24px 24px 8px; position: relative; }
.home-search-input {
  width: 100%; background: var(--bg3); color: var(--text);
  border: 1px solid var(--border); border-radius: 24px;
  padding: 13px 20px; font-size: 15px; font-family: var(--font);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.home-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,219,77,0.12); }
.home-section { padding: 20px 24px 4px; }
.home-section-title {
  font-size: 20px; font-weight: 700; color: var(--text);
  margin-bottom: 16px; letter-spacing: -0.3px;
}
.home-scroll-row {
  display: flex; gap: 14px;
  overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: thin; scrollbar-color: var(--bg5) transparent;
}
.home-recent-card {
  width: 150px; flex-shrink: 0; cursor: pointer;
  border-radius: var(--r); padding: 8px;
  transition: background 0.15s;
}
.home-recent-card:hover { background: var(--bg3); }
.home-card-img {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--bg3); aspect-ratio: 1; margin-bottom: 8px;
}
.home-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.3s; }
.home-card-img-round { border-radius: 50%; }
.home-card-img-round img { border-radius: 50%; }
.home-recent-card:hover .home-card-img img,
.home-artist-card:hover .home-card-img img { transform: scale(1.05); }
.home-card-play {
  position: absolute; bottom: 8px; right: 8px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); border: none; color: var(--on-accent);
  font-size: 12px; cursor: pointer;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  padding-left: 2px;
}
.home-recent-card:hover .home-card-play,
.home-artist-card:hover .home-card-play { opacity: 1; transform: translateY(0); }
.home-card-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 3px;
}
.home-card-sub {
  font-size: 12px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-artists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 4px; padding-bottom: 16px;
}
.home-artist-card { cursor: pointer; border-radius: var(--r); padding: 8px; transition: background 0.15s; }
.home-artist-card:hover { background: var(--bg3); }
.home-cover-ph {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:36px; color:var(--dim2); background:var(--bg3);
}

/* ── HOME CHART ────────────────────────── */
.home-chart-list { display:flex; flex-direction:column; padding-bottom:8px; }
.home-chart-row {
  display:flex; align-items:center; gap:12px;
  padding:8px 12px; border-radius:6px; cursor:pointer;
  transition: background 0.12s;
}
.home-chart-row:hover { background: var(--bg3); }
.home-chart-pos {
  font-size:13px; color:var(--dim); width:20px; text-align:center;
  flex-shrink:0; font-weight:500;
}
.home-chart-cover {
  width:44px; height:44px; flex-shrink:0;
  border-radius:6px; overflow:hidden; background:var(--bg3);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--dim2);
}
.home-chart-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.home-chart-cover-ph { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--dim); }
.home-chart-info { flex:1; min-width:0; }
.home-chart-title { font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:2px; }
.home-chart-artist { font-size:12px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-chart-dur { font-size:12px; color:var(--dim); flex-shrink:0; }
.home-chart-dl {
  flex-shrink:0; background:none; border:none; cursor:pointer;
  color:var(--dim); font-size:18px; padding:4px 8px; border-radius:4px;
  transition: color 0.15s, background 0.15s;
}
.home-chart-dl:hover { color:var(--text); background:var(--bg4); }
.home-ym-searching {
  padding:20px; text-align:center; font-size:13px; color:var(--dim);
}

/* ── YM SEARCH SECTIONS ────────────────── */
#view-search { padding-top: 0; overflow-y: auto; }
#ym-artist-detail, #ym-album-detail { padding-bottom: 80px; }
.ym-section { margin-bottom: 16px; padding: 8px 24px; }
.ym-section-label { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 16px; }

.ym-artists-row { display: flex; gap: 16px; flex-wrap: wrap; padding: 0 2px; }
.ym-artist-chip {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; cursor: pointer; width: 80px;
}
.ym-artist-chip-img {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--bg3); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--dim2);
  transition: transform 0.2s;
}
.ym-artist-chip:hover .ym-artist-chip-img { transform: scale(1.06); }
.ym-artist-chip-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ym-artist-chip-name { font-size: 12px; color: var(--dim); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.ym-artist-chip:hover .ym-artist-chip-name { color: var(--text); }

.ym-detail-header { display: flex; align-items: flex-start; gap: 20px; padding: 16px 12px; }
.ym-detail-cover-wrap { width: 80px; height: 80px; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.ym-detail-cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ym-detail-cover-ph { width: 80px; height: 80px; border-radius: 50%; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--dim2); flex-shrink: 0; }
.ym-detail-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; }

.ym-albums-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px,1fr)); gap: 12px; padding: 0 12px; }
.ym-album-card { cursor: pointer; border-radius: var(--r); padding: 8px; transition: background 0.12s; }
.ym-album-card:hover { background: var(--bg3); }
.ym-album-card-img { width: 100%; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; margin-bottom: 8px; background: var(--bg3); }
.ym-album-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ym-album-card-title { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }
.ym-album-card-sub { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── PLAYLISTS ─────────────────────────── */
.pl-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; cursor: pointer; border-radius: 6px;
  transition: background 0.12s;
}
.pl-row:hover { background: var(--bg3); }
.pl-row-icon { font-size: 18px; color: var(--dim2); flex-shrink: 0; }
.pl-row-info { flex: 1; min-width: 0; }
.pl-row-name { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }
.pl-row-meta { font-size: 12px; color: var(--dim); }
#playlists-list { padding: 8px 12px; }

/* ── ADD TO PLAYLIST POPUP ─────────────── */
.add-to-pl-popup {
  position: fixed; z-index: 500;
  bottom: calc(var(--player-h) + 12px); left: 50%; transform: translateX(-50%);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  min-width: 220px; max-width: 300px; overflow: hidden;
}
.add-to-pl-title {
  font-size: 12px; color: var(--dim); padding: 12px 16px;
  border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.8px;
}
.add-to-pl-item {
  font-size: 14px; color: var(--text);
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.add-to-pl-item:hover { background: var(--bg3); }
.add-to-pl-item:last-child { border-bottom: none; }

.artist-link {
  cursor: pointer;
  color: var(--text2);
  transition: color 0.15s;
}
.artist-link:hover { color: var(--text); text-decoration: underline; }
#player-artist .artist-link { color: var(--dim); }
#player-artist .artist-link:hover { color: var(--text2); }
#exp-artist .artist-link { color: var(--dim); }
#exp-artist .artist-link:hover { color: var(--text); }
.album-header-artist .artist-link { color: var(--accent); }
.album-header-artist .artist-link:hover { color: var(--accent2); }

/* ── LIKES VIEW ────────────────────────── */
#likes-list { padding: 0 12px 24px; }
.likes-cover {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 6px; background: var(--bg3); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--dim2);
}
.likes-cover img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; }
.likes-info { flex: 1; min-width: 0; }
.likes-title { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }
.likes-meta { font-size: 12px; color: var(--dim); }

/* ── ARTIST PROFILE PAGE ───────────────── */
.artist-profile { position: relative; overflow: hidden; margin-bottom: 0; }
.artist-profile-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 20%;
  filter: blur(60px) brightness(0.25) saturate(1.2);
  transform: scale(1.1); z-index: 0;
}
.artist-profile-body {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; gap: 24px;
  padding: 48px 24px 24px;
}
.artist-profile-avatar {
  flex-shrink: 0; width: 120px; height: 120px;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.artist-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artist-profile-avatar-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: var(--dim2); background: var(--bg3);
}
.artist-profile-info { flex: 1; min-width: 0; }
.artist-profile-label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.artist-profile-name { font-size: 36px; font-weight: 700; color: var(--text); letter-spacing: -1px; margin-bottom: 8px; }
.artist-profile-meta { font-size: 13px; color: var(--text2); margin-bottom: 20px; }
.artist-profile-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.artist-like-btn {
  font-family: var(--font); font-size: 13px; font-weight: 500;
  background: transparent; border: 1px solid var(--dim2);
  color: var(--text2); padding: 8px 18px; cursor: pointer;
  border-radius: 20px; transition: border-color 0.15s, color 0.15s;
}
.artist-like-btn:hover { border-color: var(--text); color: var(--text); }
.artist-like-btn.liked { border-color: var(--red); color: var(--red); }
.artist-albums-label { font-size: 20px; font-weight: 700; color: var(--text); padding: 20px 24px 8px; }
.artist-albums-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 4px; padding: 0 16px 24px; }

/* ── PROFILE ROWS ──────────────────────── */
.profile-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.profile-row.active .profile-row-name { color: var(--accent); }
.profile-row-name { flex: 1; cursor: pointer; color: var(--text); }
.profile-row-name:hover { color: var(--dim); }
.profile-row-meta { color: var(--dim); font-size: 12px; flex-shrink: 0; }

/* ── TRACK ADD BUTTON ──────────────────── */
.track-add-btn {
  font-size: 16px; background: none; border: none; color: var(--dim2);
  cursor: pointer; padding: 0 6px; opacity: 0; flex-shrink: 0; border-radius: 4px;
  transition: opacity 0.15s, color 0.15s;
}
.track-item:hover .track-add-btn { opacity: 1; }
.track-add-btn:hover { color: var(--text); }

/* ── THEMES ────────────────────────────── */
:root[data-theme="matrix"] {
  --bg:#000d00; --bg2:#001200; --bg3:#001a00; --bg4:#003300;
  --accent:#00ff41; --accent2:#39ff70;
  --text:#ccffe8; --dim:#336633; --border:#003300;
}
:root[data-theme="ocean"] {
  --bg:#000814; --bg2:#001233; --bg3:#001a4d; --bg4:#002266;
  --accent:#0096ff; --accent2:#40b3ff;
  --text:#cce8ff; --dim:#336699; --border:#002266;
}
:root[data-theme="amber"] {
  --bg:#0d0800; --bg2:#1a1000; --bg3:#261800; --bg4:#332100;
  --accent:#ff8c00; --accent2:#ffa333;
  --text:#fff0cc; --dim:#664400; --border:#332100;
}
:root[data-theme="dmg"] {
  --bg:#0f380f; --bg2:#1a4e1a; --bg3:#306230; --bg4:#4a7c4a;
  --accent:#9bbc0f; --accent2:#b8d318;
  --text:#9bbc0f; --dim:#306230; --border:#306230;
}
:root[data-theme="midnight"] {
  --bg:#080810; --bg2:#0e0e1c; --bg3:#141428; --bg4:#1e1e38;
  --accent:#7c4dff; --accent2:#9c6dff;
  --text:#e8e0ff; --dim:#4040aa; --border:#1e1e38;
}
:root[data-theme="red"] {
  --bg:#0d0000; --bg2:#1a0000; --bg3:#260000; --bg4:#330000;
  --accent:#ff1744; --accent2:#ff5252;
  --text:#ffe8e8; --dim:#660022; --border:#330000;
}
:root[data-theme="neon"] {
  --bg:#0a0014; --bg2:#0f001e; --bg3:#160028; --bg4:#1e0036;
  --accent:#ff00ff; --accent2:#ff66ff;
  --text:#f0e0ff; --text2:#cc99ff; --dim:#7733aa; --dim2:#4d1a80; --border:#1e0036;
  --bg5:#2a004d;
}
:root[data-theme="sakura"] {
  --bg:#120810; --bg2:#1a0e18; --bg3:#241420; --bg4:#2e1a28;
  --accent:#ff69b4; --accent2:#ff8cc8;
  --text:#fff0f5; --text2:#d4a0b8; --dim:#884466; --dim2:#553344; --border:#2e1a28;
  --bg5:#3a2030;
}
:root[data-theme="sunset"] {
  --bg:#0d0512; --bg2:#160820; --bg3:#1f0c2e; --bg4:#2a1040;
  --accent:#ff6b35; --accent2:#ff9a5c;
  --text:#ffe8d9; --text2:#cc9977; --dim:#884422; --dim2:#553311; --border:#2a1040;
  --bg5:#351450;
}
:root[data-theme="nord"] {
  --bg:#2e3440; --bg2:#272d38; --bg3:#3b4252; --bg4:#434c5e;
  --accent:#88c0d0; --accent2:#8fbcbb;
  --text:#eceff4; --text2:#d8dee9; --dim:#6a7b8e; --dim2:#4c566a; --border:#3b4252;
  --bg5:#4c566a;
}
/* Player utility buttons (speed / sleep timer) in the expanded-player controls */
.exp-util-btn { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.exp-util-btn.active { color: var(--accent); }
#sleep-timer-label { font-size: 11px; font-weight: 700; }

/* ═══ AURORA GLASS — полностью переработанная стеклянная тема ═══ */
:root[data-theme="auroraglass"] {
  --bg:#0b1020; --bg2:#0e1428; --bg3:#182342; --bg4:#20305c; --bg5:#293d73;
  --accent:#7ee8fa; --accent2:#80ffdb;
  --text:#eef4ff; --text2:#b8c6e6; --dim:#7a8cb8; --dim2:#4a5a85; --border:#243358;
  --accent-rgb: 126,232,250;
}
[data-theme="auroraglass"] body {
  background:
    radial-gradient(ellipse 90% 60% at 15% -10%, rgba(126,232,250,0.14), transparent 60%),
    radial-gradient(ellipse 70% 55% at 90% 15%, rgba(200,182,255,0.13), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(128,255,219,0.10), transparent 60%),
    linear-gradient(160deg, #0b1020 0%, #0d1430 45%, #101040 100%);
  background-attachment: fixed;
}
/* Frosted surfaces */
[data-theme="auroraglass"] #sidebar,
[data-theme="auroraglass"] #player-bar,
[data-theme="auroraglass"] #global-chat {
  background: rgba(14,20,44,0.55) !important;
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-color: rgba(126,232,250,0.10);
}
[data-theme="auroraglass"] #exp-player {
  background: rgba(11,16,34,0.72);
  backdrop-filter: blur(32px) saturate(1.3);
  -webkit-backdrop-filter: blur(32px) saturate(1.3);
}
[data-theme="auroraglass"] .modal-box,
[data-theme="auroraglass"] .px-modal-inner {
  background: rgba(16,23,48,0.8) !important;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(126,232,250,0.15);
  border-radius: 18px;
}
/* Soft rounded cards with glass borders */
[data-theme="auroraglass"] .track-item,
[data-theme="auroraglass"] .queue-item,
[data-theme="auroraglass"] .wave-st-item,
[data-theme="auroraglass"] .ym-quick-card {
  border-radius: 12px;
}
[data-theme="auroraglass"] .track-item:hover,
[data-theme="auroraglass"] .queue-item:hover {
  background: rgba(126,232,250,0.07);
}
[data-theme="auroraglass"] .album-card,
[data-theme="auroraglass"] .artist-card {
  background: rgba(22,32,64,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(126,232,250,0.08);
  border-radius: 16px;
}
[data-theme="auroraglass"] .px-input {
  background: rgba(14,20,44,0.6);
  border-color: rgba(126,232,250,0.18);
  border-radius: 10px;
}
[data-theme="auroraglass"] .px-btn,
[data-theme="auroraglass"] .btn-play-all {
  border-radius: 10px;
}
[data-theme="auroraglass"] #mobile-nav {
  background: rgba(11,16,34,0.82) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top-color: rgba(126,232,250,0.12);
}
[data-theme="auroraglass"] ::-webkit-scrollbar-thumb {
  background: rgba(126,232,250,0.25);
  border-radius: 8px;
}
[data-theme="auroraglass"] #progress-fill,
[data-theme="auroraglass"] .ym-progress-fill {
  background: linear-gradient(90deg, #7ee8fa, #80ffdb);
}
[data-theme="auroraglass"] #sidebar-logo-text {
  background: linear-gradient(90deg, #7ee8fa, #c8b6ff, #80ffdb);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

:root[data-theme="dracula"] {
  --bg:#282a36; --bg2:#21222c; --bg3:#343746; --bg4:#3e4154;
  --accent:#bd93f9; --accent2:#caa8fc;
  --text:#f8f8f2; --text2:#c0b8d0; --dim:#6272a4; --dim2:#44475a; --border:#343746;
  --bg5:#44475a;
}
:root[data-theme="monokai"] {
  --bg:#272822; --bg2:#1e1f1a; --bg3:#3e3d32; --bg4:#49483e;
  --accent:#f92672; --accent2:#fd5f96;
  --text:#f8f8f2; --text2:#c0c0b0; --dim:#75715e; --dim2:#49483e; --border:#3e3d32;
  --bg5:#575746;
}
:root[data-theme="gruvbox"] {
  --bg:#1d2021; --bg2:#181919; --bg3:#282828; --bg4:#3c3836;
  --accent:#fb4934; --accent2:#fe8019;
  --text:#ebdbb2; --text2:#bdae93; --dim:#928374; --dim2:#665c54; --border:#3c3836;
  --bg5:#504945;
}
:root[data-theme="snow"] {
  --bg:#f0f0f5; --bg2:#ffffff; --bg3:#e4e4ec; --bg4:#d0d0dc;
  --accent:#4361ee; --accent2:#5a78ff;
  --text:#1a1a2e; --text2:#444466; --dim:#8888aa; --dim2:#bbbbcc; --border:#d0d0dc;
  --bg5:#c0c0d0; --green:#2e7d32; --red:#d32f2f; --yellow:#f9a825;
}
[data-theme="snow"] ::-webkit-scrollbar-thumb { background: #bbb; }
[data-theme="snow"] ::-webkit-scrollbar-thumb:hover { background: #999; }
[data-theme="snow"] #settings-panel,
[data-theme="snow"] .sidebar { box-shadow: 1px 0 8px rgba(0,0,0,0.08); }
:root[data-theme="lavender"] {
  --bg:#0e0b16; --bg2:#130f1c; --bg3:#1a1428; --bg4:#221a34;
  --accent:#a239ca; --accent2:#c06de0;
  --text:#e8d5f5; --text2:#b098cc; --dim:#6644aa; --dim2:#442288; --border:#221a34;
  --bg5:#2a2040;
}
:root[data-theme="copper"] {
  --bg:#0f0a07; --bg2:#18120c; --bg3:#221a12; --bg4:#2c2218;
  --accent:#b87333; --accent2:#d4944a;
  --text:#f5deb3; --text2:#c0a880; --dim:#886644; --dim2:#554433; --border:#2c2218;
  --bg5:#362a1e;
}
:root[data-theme="spotify"] {
  --bg:#121212; --bg2:#0a0a0a; --bg3:#1a1a1a; --bg4:#242424;
  --accent:#1db954; --accent2:#1ed760;
  --text:#ffffff; --text2:#b3b3b3; --dim:#727272; --dim2:#404040; --border:#282828;
  --bg5:#333333;
}
:root[data-theme="vapor"] {
  --bg:#1a0b2e; --bg2:#160a28; --bg3:#241140; --bg4:#321a55;
  --accent:#ff71ce; --accent2:#01cdfe;
  --text:#fdf0ff; --text2:#c8a5e0; --dim:#9a6ec0; --dim2:#6a3f96; --border:#321a55;
  --bg5:#3d2266;
}
:root[data-theme="emerald"] {
  --bg:#04140d; --bg2:#06190f; --bg3:#0b2417; --bg4:#103021;
  --accent:#2ee6a0; --accent2:#10b981;
  --text:#e3fff1; --text2:#9fd8bf; --dim:#5d9e82; --dim2:#37614f; --border:#103021;
  --bg5:#163d2b;
}
:root[data-theme="blood"] {
  --bg:#120304; --bg2:#180406; --bg3:#24080a; --bg4:#330c10;
  --accent:#e63950; --accent2:#ff5c6c;
  --text:#ffe6e9; --text2:#d6a0a6; --dim:#a05c63; --dim2:#5e3236; --border:#330c10;
  --bg5:#421015;
}
:root[data-theme="teal"] {
  --bg:#04181a; --bg2:#051e20; --bg3:#082a2d; --bg4:#0c373b;
  --accent:#14e0d4; --accent2:#0bb8c9;
  --text:#dffcfb; --text2:#97d4d2; --dim:#5a9c9b; --dim2:#356160; --border:#0c373b;
  --bg5:#10474c;
}
:root[data-theme="gold"] {
  --bg:#0a0a08; --bg2:#101010; --bg3:#191814; --bg4:#23211a;
  --accent:#e6c34a; --accent2:#ffd966;
  --text:#f7f1da; --text2:#c9bf95; --dim:#8a8158; --dim2:#544f36; --border:#23211a;
  --bg5:#2e2b20;
}
:root[data-theme="mono"] {
  --bg:#0c0c0c; --bg2:#121212; --bg3:#1c1c1c; --bg4:#262626;
  --accent:#e8e8e8; --accent2:#ffffff;
  --text:#f0f0f0; --text2:#a8a8a8; --dim:#6e6e6e; --dim2:#404040; --border:#2a2a2a;
  --bg5:#333333;
}
:root[data-theme="cream"] {
  --bg:#f7f1e6; --bg2:#fffaf2; --bg3:#efe6d5; --bg4:#e2d4bd;
  --accent:#d2691e; --accent2:#e8833a;
  --text:#3a2e1f; --text2:#6b5a44; --dim:#a08c70; --dim2:#cbb89c; --border:#e2d4bd;
  --bg5:#d8c6a8; --green:#3a7d44; --red:#c0392b; --yellow:#e0a000;
}
:root[data-theme="cyberpunk"] {
  --bg:#0d0221; --bg2:#120630; --bg3:#1c0c44; --bg4:#27135c;
  --accent:#f9f002; --accent2:#ff003c;
  --text:#e8f7ff; --text2:#08f7fe; --dim:#7a6fd0; --dim2:#463c80; --border:#27135c;
  --bg5:#341a70;
}
:root[data-theme="coffee"] {
  --bg:#1c130d; --bg2:#241810; --bg3:#322114; --bg4:#412c1b;
  --accent:#c8915c; --accent2:#e0b483;
  --text:#f0e0cc; --text2:#c9ad8e; --dim:#8f7458; --dim2:#574635; --border:#412c1b;
  --bg5:#523823;
}
:root[data-theme="mint"] {
  --bg:#071512; --bg2:#091c18; --bg3:#0d2823; --bg4:#12352f;
  --accent:#3ddc97; --accent2:#7ef0c9;
  --text:#e0fff5; --text2:#9fd8c6; --dim:#5d9e8a; --dim2:#356155; --border:#12352f;
  --bg5:#16473e;
}
:root[data-theme="rose"] {
  --bg:#1a0d12; --bg2:#221017; --bg3:#311721; --bg4:#421e2c;
  --accent:#ff5d8f; --accent2:#ff9bb8;
  --text:#ffe0ea; --text2:#d6a0b3; --dim:#a05c73; --dim2:#5e3242; --border:#421e2c;
  --bg5:#542637;
}
:root[data-theme="slate"] {
  --bg:#0f141a; --bg2:#141b23; --bg3:#1d2731; --bg4:#27343f;
  --accent:#5e9eff; --accent2:#8fc0ff;
  --text:#e6eef7; --text2:#a8b6c4; --dim:#6b7886; --dim2:#3e4954; --border:#27343f;
  --bg5:#324250;
}
:root[data-theme="grape"] {
  --bg:#140b1f; --bg2:#1a0f29; --bg3:#26153c; --bg4:#341d50;
  --accent:#9d4edd; --accent2:#c77dff;
  --text:#f0e6ff; --text2:#c8a5e0; --dim:#8a6ab0; --dim2:#503568; --border:#341d50;
  --bg5:#43266a;
}

/* Text color on accent surfaces for dark-accent themes */
:root[data-theme="blood"],
:root[data-theme="coffee"],
:root[data-theme="copper"],
:root[data-theme="cream"],
:root[data-theme="grape"],
:root[data-theme="gruvbox"],
:root[data-theme="lavender"],
:root[data-theme="midnight"],
:root[data-theme="monokai"],
:root[data-theme="neon"],
:root[data-theme="ocean"],
:root[data-theme="red"],
:root[data-theme="rose"],
:root[data-theme="sakura"],
:root[data-theme="slate"],
:root[data-theme="snow"],
:root[data-theme="sunset"] { --on-accent: #fff; }

[data-theme="cream"] ::-webkit-scrollbar-thumb { background: #c9b48f; }
[data-theme="cream"] ::-webkit-scrollbar-thumb:hover { background: #b09a72; }
[data-theme="cream"] #settings-panel,
[data-theme="cream"] .sidebar { box-shadow: 1px 0 8px rgba(0,0,0,0.06); }

/* ══════════════════════════════════════════
   ARTIST / ALBUM PAGE  (.ap-*)
   ══════════════════════════════════════════ */

.ap-header {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  --ap-bg: none;
}
.ap-bg {
  position: absolute;
  inset: 0;
  background: var(--ap-bg, var(--bg3)) center/cover no-repeat;
  filter: blur(32px) brightness(0.35) saturate(1.4);
  transform: scale(1.08);
  z-index: 0;
}
.ap-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
  z-index: 1;
}
.ap-header-body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 28px;
  padding: 32px 32px 28px;
  width: 100%;
}
.ap-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.ap-avatar.ap-avatar-sq { border-radius: 12px; }
.ap-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ap-avatar-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; color: var(--dim);
}
.ap-info { flex: 1; min-width: 0; }
.ap-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.ap-name {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 8px;
}
.ap-listeners {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 16px;
}
.ap-meta {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 16px;
}
.ap-back-btn {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.5); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
  backdrop-filter: blur(4px);
}
.ap-back-btn:hover { background: rgba(255,255,255,0.15); }
.ap-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ap-btn-play {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 24px; border-radius: 24px;
  background: var(--accent); color: var(--on-accent); border: none;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.ap-btn-play:hover { background: var(--accent2); transform: scale(1.03); }
.ap-btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: none; border: 1px solid rgba(255,255,255,0.25); color: var(--text2);
  cursor: pointer; transition: all .15s;
}
.ap-btn-icon:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-play-all {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 50px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.btn-play-all:hover { background: var(--accent2); transform: scale(1.04); }
.btn-shuffle-all {
  background: transparent;
  border: 1.5px solid var(--dim);
  color: var(--text);
  border-radius: 50%;
  width: 40px; height: 40px;
  font-size: 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.btn-shuffle-all:hover { border-color: var(--text); background: var(--bg3); }
.ap-like-btn {
  background: transparent;
  border: none;
  color: var(--dim);
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, transform .15s;
}
.ap-like-btn:hover { color: var(--text); }
.ap-like-btn.liked { color: #f44336; }
.ap-like-btn.liked:hover { transform: scale(1.15); }

/* sections */
.ap-section { padding: 24px 32px; }
.ap-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

/* track list */
.ap-track-list { display: flex; flex-direction: column; gap: 2px; }

.ap-track-row {
  display: grid;
  grid-template-columns: 40px 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}
.ap-track-row:hover { background: rgba(255,255,255,0.06); }
.ap-track-row:hover .ap-tr-actions { opacity: 1; }

/* num / bars */
.ap-tr-num {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ap-tr-index {
  font-size: 13px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.ap-tr-bars {
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 16px;
}
.ap-tr-bars span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  animation: bars-bounce 0.8s ease-in-out infinite;
}
.ap-tr-bars span:nth-child(1) { height: 40%; animation-delay: 0s; }
.ap-tr-bars span:nth-child(2) { height: 80%; animation-delay: 0.15s; }
.ap-tr-bars span:nth-child(3) { height: 55%; animation-delay: 0.3s; }
@keyframes bars-bounce {
  0%, 100% { transform: scaleY(0.4); }
  50%       { transform: scaleY(1); }
}
.ap-track-row.playing .ap-tr-index { display: none; }
.ap-track-row.playing .ap-tr-bars  { display: flex; }
.ap-track-row.playing .ap-tr-title { color: var(--accent); }

/* cover */
.ap-tr-cover {
  width: 40px; height: 40px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.ap-tr-cover-ph {
  width: 40px; height: 40px;
  border-radius: 4px;
  background: var(--bg4);
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); font-size: 16px;
}

/* info */
.ap-tr-info { min-width: 0; }
.ap-tr-title {
  font-size: 14px; font-weight: 500;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-tr-artist {
  font-size: 12px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}

/* actions */
.ap-tr-actions {
  display: flex; align-items: center; gap: 6px;
  opacity: 0;
  transition: opacity .12s;
}
.ap-track-row:hover .ap-tr-actions,
.ap-track-row.playing .ap-tr-actions { opacity: 1; }
.ap-tr-dur {
  font-size: 12px; color: var(--dim);
  font-variant-numeric: tabular-nums;
  min-width: 36px; text-align: right;
}
.ap-tr-like, .ap-tr-dl {
  background: transparent; border: none;
  color: var(--dim); cursor: pointer;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: color .12s, transform .12s;
}
.ap-tr-like:hover { color: var(--text); }
.ap-tr-like.liked { color: #f44336; animation: heart-pop 0.35s ease; }
.ap-tr-like.liked:hover { transform: scale(1.2); }
.ap-tr-dl:hover { color: var(--text); }
@keyframes heart-pop { 0%{transform:scale(1)} 30%{transform:scale(1.4)} 60%{transform:scale(0.9)} 100%{transform:scale(1)} }

/* albums grid — wrap grid like YM */
.ap-albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding-bottom: 8px;
}
.ap-albums-grid .card {
  width: 100%;
}
.ap-albums-grid .card-cover-wrap {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
}
.ap-albums-grid .card-cover,
.ap-albums-grid .card-cover-placeholder {
  width: 100%;
  height: 100%;
}
@media (max-width: 640px) {
  .ap-albums-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
}

/* ══════════════════════════════════════════
   MOBILE  (≤ 640px)
   ══════════════════════════════════════════ */
@media (max-width: 640px) {

  :root { --player-h: 64px; --nav-h: 56px; }

  /* ── Layout ── */
  #app {
    flex-direction: column;
    height: calc(100vh - var(--player-h) - var(--nav-h));
  }

  /* ── Sidebar → bottom tab bar ── */
  #sidebar {
    width: 100%; height: var(--nav-h);
    flex-direction: row;
    position: fixed; bottom: var(--player-h); left: 0; right: 0;
    z-index: 90;
    border-right: none; border-top: 1px solid var(--border);
    padding: 0; justify-content: space-around; align-items: center;
    order: 10;
  }
  #sidebar-logo { display: none; }
  #sidebar-liked { display: none; }
  #sidebar-playlists { display: none; }
  #profile-bar { display: none; }
  #px-nav {
    flex-direction: row; width: 100%; gap: 0;
    justify-content: space-around; flex: 1;
  }
  .nav-btn {
    flex-direction: column; gap: 2px;
    width: auto; height: auto; padding: 6px 12px;
    border-radius: 0; justify-content: center;
  }
  .nav-btn svg { width: 22px; height: 22px; }
  .nav-label { display: block; font-size: 10px; color: var(--dim); }
  .nav-btn.active .nav-label { color: var(--text); }
  .nav-btn::after { display: none !important; }

  /* ── Main content ── */
  #content {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    height: calc(100vh - var(--player-h) - var(--nav-h));
    -webkit-overflow-scrolling: touch;
  }

  /* ── Player bar ── */
  #player-bar { padding: 0 10px; gap: 8px; }

  #player-left { width: auto; flex: 1; gap: 8px; min-width: 0; }
  #player-cover-wrap { width: 44px; height: 44px; flex-shrink: 0; }
  #player-title { font-size: 13px; }
  #player-artist { font-size: 11px; }
  #btn-like { display: none; }

  /* compact controls: only prev+play+next visible */
  #player-center {
    flex: none; flex-direction: row; gap: 0; width: auto; flex-shrink: 0;
  }
  #player-progress-wrap { display: none; }
  #btn-shuffle, #btn-repeat { display: none; }
  #btn-prev, #btn-play, #btn-next { display: flex !important; }
  #btn-prev { width: 28px; height: 28px; font-size: 12px; }
  #btn-next { width: 28px; height: 28px; font-size: 12px; }
  #btn-play { width: 36px !important; height: 36px !important; font-size: 13px !important; }

  #player-right { display: none; }

  /* ── Expanded player ── */
  #exp-player { flex-direction: column; overflow: hidden; }
  #exp-left {
    width: 100%; padding: 16px; flex-shrink: 0;
    align-items: center;
  }
  #exp-cover-wrap { width: min(60vw, 240px); height: min(60vw, 240px); margin: 0 auto; }
  #exp-right {
    width: 100%; border-left: none; border-top: 1px solid var(--border);
    flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  }
  #exp-lyrics-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #exp-lyrics-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #exp-close { top: 12px; left: 12px; }

  /* ── Lyrics mobile fix ── */
  [data-ly-anim="classic"] #exp-lyrics-lines,
  [data-ly-anim="kinetic"] #exp-lyrics-lines,
  [data-ly-anim="focus"] #exp-lyrics-lines,
  [data-ly-anim="wave"] #exp-lyrics-lines { padding: 30vh 16px; gap: 14px; }
  [data-ly-anim="single"] #exp-lyrics-lines,
  [data-ly-anim="typewriter"] #exp-lyrics-lines { padding: 16px; }
  .lyric-line { font-size: 17px; line-height: 1.4; }
  .lyric-line.active { font-size: 20px; transform: scale(1.02); line-height: 1.3; }
  .lyric-line.static { font-size: 15px; line-height: 1.6; }

  /* ── Lyrics fullscreen ── */
  #exp-player.lyrics-fs #exp-left { display: none !important; }
  #exp-player.lyrics-fs #exp-tabs { display: none !important; }
  #exp-player.lyrics-fs #exp-right { border-top: none; }
  #exp-player.lyrics-fs #exp-lyrics-content { display: flex !important; flex: 1; }
  #exp-player.lyrics-fs #lyrics-sync-status { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  #exp-player.lyrics-fs [data-ly-anim="classic"] #exp-lyrics-lines,
  #exp-player.lyrics-fs [data-ly-anim="kinetic"] #exp-lyrics-lines,
  #exp-player.lyrics-fs [data-ly-anim="focus"] #exp-lyrics-lines,
  #exp-player.lyrics-fs [data-ly-anim="wave"] #exp-lyrics-lines { padding: 35vh 20px; gap: 18px; }
  #exp-player.lyrics-fs [data-ly-anim="single"] #exp-lyrics-lines,
  #exp-player.lyrics-fs [data-ly-anim="typewriter"] #exp-lyrics-lines { padding: 20px; }
  #exp-player.lyrics-fs .lyric-line { font-size: 22px; }
  #exp-player.lyrics-fs .lyric-line.active { font-size: 28px; transform: scale(1.04); }
  #exp-player.lyrics-fs #exp-close { display: none; }

  /* ── Settings panel ── */
  #settings-panel {
    width: 100%; left: 0;
    bottom: calc(var(--player-h) + var(--nav-h));
  }

  /* ── Auth ── */
  #auth-box { width: calc(100vw - 32px); padding: 24px 16px; }

  /* ── Home cards ── */
  .home-section { padding: 0 12px 16px; }
  .home-section-title { padding: 14px 0 8px; font-size: 15px; }
  .home-scroll-row { gap: 10px; }
  .home-recent-card { width: 130px; min-width: 130px; }
  .home-recent-card .home-card-img { height: 130px; }
  .home-artist-card { width: 110px; min-width: 110px; }
  .home-artist-card .home-card-img { height: 110px; border-radius: 50%; }
  .home-card-title { font-size: 12px; }
  .home-card-sub { font-size: 11px; }

  #main-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    padding: 12px !important; gap: 10px !important;
  }

  /* ── Collection mobile ── */
  .collection-tabs { padding: 12px 12px 0; }
  .coll-tab { padding: 10px 14px; font-size: 13px; }
  #collection-content { padding: 12px; }
  .coll-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
  .coll-card { padding: 8px; }

  /* ── Search ── */
  #search-ym-wrap { flex-direction: column; gap: 8px; padding: 12px 12px 8px; }
  #search-ym-input { font-size: 15px; }
  #search-source-toggle { width: 100%; justify-content: center; }
  .search-src-btn { flex: 1; justify-content: center; padding: 8px 10px; font-size: 12px; }

  /* ── Artist page ── */
  .ap-header { min-height: 200px; }
  .ap-header-body {
    flex-direction: column; align-items: flex-start;
    padding: 20px 16px; gap: 12px;
  }
  .ap-avatar { width: 96px; height: 96px; }
  .ap-rating-side { align-self: flex-start; align-items: flex-start; flex-direction: row; margin-left: 0; }
  .ap-rating-side .rb { font-size: 14px; padding: 7px 14px; }
  .ap-name { font-size: clamp(22px, 7vw, 36px); }
  .ap-section { padding: 16px 12px; }
  .ap-section-title { font-size: 16px; }
  .ap-albums-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }

  .ap-track-row {
    grid-template-columns: 28px 36px 1fr auto;
    gap: 8px; padding: 5px 4px;
  }
  .ap-tr-cover, .ap-tr-cover-ph { width: 36px; height: 36px; }
  .ap-tr-actions { opacity: 1; }
  .ap-tr-title { font-size: 13px; }

  /* ── Album header ── */
  .album-header {
    flex-direction: column; align-items: flex-start;
    gap: 12px; padding: 16px;
  }
  .album-header-cover, .album-header-cover-ph { width: 130px; height: 130px; }

  /* ── Track list ── */
  .track-item { grid-template-columns: 28px 1fr auto auto; padding: 8px 4px; }

  /* ── Queue / likes ── */
  .view-header { padding: 12px 16px; }
  #queue-list, #likes-list { padding: 0 4px; }

  /* ── Breadcrumb ── */
  #breadcrumb { padding: 8px 12px; font-size: 12px; }

  /* ── Playlists ── */
  #view-playlists { padding: 12px; }
}

/* ═══════════════════════════════════════════
   TRACK CONTEXT MENU (3-dot)
   ═══════════════════════════════════════════ */
.track-dots-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: none; border: none; color: var(--dim);
  cursor: pointer; transition: all .15s; opacity: 0;
  flex-shrink: 0;
}
.ap-track-row:hover .track-dots-btn,
.ym-result:hover .track-dots-btn,
.home-chart-row:hover .track-dots-btn { opacity: 1; }
.track-dots-btn:hover { color: var(--text); background: var(--bg4); }

.track-ctx-menu {
  position: fixed; z-index: 10000;
  width: 240px; background: #282828;
  border-radius: 8px; padding: 6px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  animation: ctxFadeIn .12s ease;
}
@keyframes ctxFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.ctx-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer;
  color: var(--text); font-size: 13px; font-family: var(--font);
  transition: background .1s;
}
.ctx-item:hover { background: rgba(255,255,255,0.08); }
.ctx-item svg { flex-shrink: 0; }
.ctx-item.ctx-liked { color: var(--accent); }
.ctx-item.ctx-liked svg { fill: var(--accent); }

/* ================================================================
   UI STYLES — full visual redesigns
   ================================================================ */

/* ── Style selector ── */
#style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.style-tile {
  padding: 14px 10px; cursor: pointer;
  border: 2px solid var(--border); border-radius: 12px;
  text-align: center; transition: all 0.2s;
  background: var(--bg3); position: relative; overflow: hidden;
}
.style-tile:hover { border-color: var(--dim); background: var(--bg4); transform: scale(1.02); }
.style-tile.active { border-color: var(--accent); box-shadow: 0 0 12px rgba(255,219,77,0.15); }
.style-tile-preview {
  height: 48px; border-radius: 6px; margin-bottom: 8px;
  display: flex; gap: 2px; overflow: hidden;
}
.style-tile-name { font-size: 12px; color: var(--text); font-weight: 600; }
.style-tile-desc { font-size: 10px; color: var(--dim); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════════
   STYLE: AURORA — градиентный фон, свечение, стеклянные панели
   ════════════════════════════════════════════════════════════════════ */
[data-style="aurora"] {
  /* Aurora forces a dark gradient shell: pin neutral vars for light themes */
  --text:#f0f0ff; --text2:#b8b8d0; --dim:#8888a8; --dim2:#555577;
  --bg3:#1c1936; --bg4:#262148; --bg5:#302a5a; --border:#2a2450;
  --aurora-g1: #0f0c29;
  --aurora-g2: #302b63;
  --aurora-g3: #24243e;
}
[data-style="aurora"] body {
  background: linear-gradient(135deg, var(--aurora-g1), var(--aurora-g2), var(--aurora-g3));
}
[data-style="aurora"] #content {
  background: transparent;
}
[data-style="aurora"] #sidebar {
  background: rgba(15,12,41,0.65);
  backdrop-filter: blur(24px) saturate(1.4);
  border-right: 1px solid rgba(255,255,255,0.06);
}
[data-style="aurora"] #player-bar {
  background: rgba(15,12,41,0.75);
  backdrop-filter: blur(28px) saturate(1.5);
  border-top: 1px solid rgba(255,255,255,0.06);
}
[data-style="aurora"] #settings-panel {
  background: rgba(15,12,41,0.8);
  backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255,255,255,0.06);
}
[data-style="aurora"] .card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  transition: all 0.25s;
}
[data-style="aurora"] .card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
[data-style="aurora"] .card-cover, [data-style="aurora"] .card-cover-wrap { border-radius: 12px; }
[data-style="aurora"] .card-cover-placeholder { border-radius: 12px; }
[data-style="aurora"] .card-play-overlay { border-radius: 12px; }
[data-style="aurora"] .card-play-icon {
  background: var(--accent);
  box-shadow: 0 4px 20px rgba(var(--accent), 0.4);
}
[data-style="aurora"] .coll-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
}
[data-style="aurora"] .coll-card:hover {
  background: rgba(255,255,255,0.07);
  transform: translateY(-3px);
}
[data-style="aurora"] .coll-card-img { border-radius: 12px; }
[data-style="aurora"] .track-item { border-radius: 10px; }
[data-style="aurora"] .track-item:hover { background: rgba(255,255,255,0.05); }
[data-style="aurora"] .track-item.playing { background: rgba(255,255,255,0.08); }
[data-style="aurora"] .ym-result { border-radius: 10px; }
[data-style="aurora"] .ym-result:hover { background: rgba(255,255,255,0.05); }
[data-style="aurora"] .ym-cover { border-radius: 10px; }
[data-style="aurora"] .queue-item { border-radius: 10px; }
[data-style="aurora"] .queue-item:hover { background: rgba(255,255,255,0.05); }
[data-style="aurora"] .nav-btn:hover, [data-style="aurora"] .nav-btn.active { background: rgba(255,255,255,0.08); }
[data-style="aurora"] .px-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
[data-style="aurora"] .px-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
}
[data-style="aurora"] .search-big {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 24px !important;
}
[data-style="aurora"] .search-big:focus { box-shadow: 0 0 0 2px var(--accent), 0 0 20px rgba(var(--accent),0.15) !important; }
[data-style="aurora"] .search-suggest { background: rgba(15,12,41,0.9); backdrop-filter: blur(20px); border-radius: 16px; }
[data-style="aurora"] .px-play-btn {
  box-shadow: 0 4px 20px rgba(255,255,255,0.15) !important;
}
[data-style="aurora"] .btn-play-all {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  border-radius: 24px;
}
[data-style="aurora"] .album-header-cover { border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
[data-style="aurora"] #player-cover-wrap { border-radius: 10px; }
[data-style="aurora"] #profile-avatar { background: rgba(255,255,255,0.08); }
[data-style="aurora"] .sidebar-liked-icon { border-radius: 10px; }
[data-style="aurora"] .theme-tile, [data-style="aurora"] .style-tile {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
[data-style="aurora"] #exp-player { background: rgba(10,8,30,0.92); backdrop-filter: blur(30px); }
[data-style="aurora"] .collection-tabs { background: transparent; }
[data-style="aurora"] #search-source-toggle { background: rgba(255,255,255,0.06); }
[data-style="aurora"] .search-src-btn.active { box-shadow: 0 2px 10px rgba(0,0,0,0.3); }

/* ════════════════════════════════════════════════════════════════════
   STYLE: BRUTALISM — грубый промышленный дизайн, моноширинный шрифт
   ════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

[data-style="brutal"] *:not(.lyric-line):not(.ly-word):not(.ly-grad):not(.lyset-preview):not(.lyf-btn):not(#lyset-preview):not(#karaoke-lyrics-lines *):not(#exp-lyrics-lines *) { font-family: 'JetBrains Mono', 'Consolas', monospace !important; }
[data-style="brutal"] #sidebar {
  background: var(--bg);
  border-right: 4px solid var(--accent);
}
[data-style="brutal"] #player-bar {
  background: var(--bg);
  border-top: 4px solid var(--accent);
}
[data-style="brutal"] #settings-panel {
  border-left: 4px solid var(--accent);
}
[data-style="brutal"] .card {
  border: 2px solid var(--border);
  border-radius: 0;
  padding: 6px;
  transition: all 0.1s;
}
[data-style="brutal"] .card:hover {
  border-color: var(--accent);
  background: var(--bg3);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--accent);
}
[data-style="brutal"] .card-cover, [data-style="brutal"] .card-cover-wrap,
[data-style="brutal"] .card-cover-placeholder, [data-style="brutal"] .card-play-overlay { border-radius: 0 !important; }
[data-style="brutal"] .coll-card { border-radius: 0; border: 2px solid var(--border); }
[data-style="brutal"] .coll-card:hover {
  border-color: var(--accent);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--accent);
}
[data-style="brutal"] .coll-card-img { border-radius: 0; }
[data-style="brutal"] .ym-cover, [data-style="brutal"] .qi-cover,
[data-style="brutal"] #player-cover-wrap { border-radius: 0; }
[data-style="brutal"] .album-header-cover, [data-style="brutal"] .album-header-cover-ph { border-radius: 0; }
[data-style="brutal"] .px-btn {
  border-radius: 0;
  border: 2px solid var(--text2);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700 !important;
  font-size: 11px;
  transition: all 0.1s;
}
[data-style="brutal"] .px-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--text2);
}
[data-style="brutal"] .accent-btn {
  border: 3px solid var(--accent) !important;
  box-shadow: none !important;
}
[data-style="brutal"] .accent-btn:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 3px 3px 0 var(--accent) !important;
}
[data-style="brutal"] .nav-btn { border-radius: 0; }
[data-style="brutal"] .nav-btn.active {
  border-left: 4px solid var(--accent);
  background: var(--bg3);
}
[data-style="brutal"] .px-input {
  border-radius: 0;
  border: 2px solid var(--border);
}
[data-style="brutal"] .search-big { border-radius: 0 !important; border: 3px solid var(--border) !important; }
[data-style="brutal"] .search-big:focus { border-color: var(--accent) !important; box-shadow: none !important; }
[data-style="brutal"] .search-suggest { border-radius: 0; border: 2px solid var(--border); }
[data-style="brutal"] .px-play-btn { border-radius: 4px !important; }
[data-style="brutal"] .btn-play-all { border-radius: 0; text-transform: uppercase; letter-spacing: 2px; }
[data-style="brutal"] .btn-shuffle-all { border-radius: 0; }
[data-style="brutal"] .track-item { border-radius: 0; border-bottom: 1px solid var(--border); }
[data-style="brutal"] .track-item:last-child { border-bottom: none; }
[data-style="brutal"] .ym-result { border-radius: 0; border-bottom: 1px solid var(--border); }
[data-style="brutal"] .queue-item { border-radius: 0; }
[data-style="brutal"] .theme-tile, [data-style="brutal"] .style-tile {
  border-radius: 0;
  border: 2px solid var(--border);
}
[data-style="brutal"] .theme-tile.active, [data-style="brutal"] .style-tile.active {
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
}
[data-style="brutal"] .sidebar-liked-icon { border-radius: 0; }
[data-style="brutal"] #sidebar-liked { border-radius: 0; }
[data-style="brutal"] #profile-avatar { border-radius: 0; border: 2px solid var(--dim); }
[data-style="brutal"] .px-section-title { text-transform: uppercase; letter-spacing: 3px; font-size: 18px; }
[data-style="brutal"] .card-play-icon { border-radius: 0; }
[data-style="brutal"] .coll-tab {
  text-transform: uppercase; letter-spacing: 2px; font-size: 12px;
  border-bottom: 3px solid transparent;
}
[data-style="brutal"] .coll-tab.active { border-bottom-color: var(--accent); }
[data-style="brutal"] #exp-player { border: 4px solid var(--accent); }
[data-style="brutal"] .search-src-btn { border-radius: 0; }
[data-style="brutal"] #search-source-toggle { border-radius: 0; }
[data-style="brutal"] .px-toggle-track { border-radius: 2px !important; }
[data-style="brutal"] .px-toggle-track::before { border-radius: 2px !important; }
[data-style="brutal"] #progress-bar { border-radius: 0; }
[data-style="brutal"] #progress-fill { border-radius: 0; }
[data-style="brutal"] #progress-thumb { border-radius: 2px; }
[data-style="brutal"] .view-header { border-bottom: 2px solid var(--border); padding-bottom: 16px; }

/* ════════════════════════════════════════════════════════════════════
   STYLE: SOFT — мягкий, пастельный, Apple-like с большими скруглениями
   ════════════════════════════════════════════════════════════════════ */
[data-style="soft"] {
  --r: 18px;
}
[data-style="soft"] #sidebar {
  background: var(--bg2);
  border-right: none;
  margin: 10px 0 10px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}
[data-style="soft"] #player-bar {
  background: var(--bg2);
  border-top: none;
  margin: 0 10px 10px;
  border-radius: 20px;
  box-shadow: 0 -2px 20px rgba(0,0,0,0.15);
  position: fixed; bottom: 0; left: 0; right: 0;
}
[data-style="soft"] #app { height: calc(100vh - var(--player-h) - 20px); }
[data-style="soft"] #settings-panel { border-radius: 20px 0 0 0; border-left: none; box-shadow: -4px 0 30px rgba(0,0,0,0.15); }
[data-style="soft"] .card {
  border-radius: 18px;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}
[data-style="soft"] .card:hover {
  background: var(--bg3);
  transform: scale(1.03);
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
}
[data-style="soft"] .card-cover, [data-style="soft"] .card-cover-wrap { border-radius: 14px; }
[data-style="soft"] .card-cover-placeholder { border-radius: 14px; }
[data-style="soft"] .card-play-overlay { border-radius: 14px; }
[data-style="soft"] .card-play-icon { box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
[data-style="soft"] .coll-card { border-radius: 18px; transition: all 0.3s; }
[data-style="soft"] .coll-card:hover { transform: scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
[data-style="soft"] .coll-card-img { border-radius: 14px; }
[data-style="soft"] .album-header-cover { border-radius: 22px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); }
[data-style="soft"] .album-header-cover-ph { border-radius: 22px; }
[data-style="soft"] .ym-cover { border-radius: 12px; }
[data-style="soft"] .qi-cover { border-radius: 12px; }
[data-style="soft"] .qi-cover img { border-radius: 12px; }
[data-style="soft"] #player-cover-wrap { border-radius: 14px; box-shadow: 0 3px 12px rgba(0,0,0,0.2); }
[data-style="soft"] .track-item { border-radius: 14px; transition: all 0.2s; }
[data-style="soft"] .track-item:hover { transform: translateX(4px); }
[data-style="soft"] .ym-result { border-radius: 14px; transition: all 0.2s; }
[data-style="soft"] .ym-result:hover { transform: translateX(4px); }
[data-style="soft"] .queue-item { border-radius: 14px; }
[data-style="soft"] .nav-btn { border-radius: 14px; transition: all 0.2s; }
[data-style="soft"] .nav-btn:hover { transform: translateX(3px); }
[data-style="soft"] .nav-btn.active { box-shadow: inset 3px 0 0 var(--accent); }
[data-style="soft"] .px-input { border-radius: 14px; }
[data-style="soft"] .px-btn { border-radius: 14px; }
[data-style="soft"] .search-big { border-radius: 28px !important; }
[data-style="soft"] .search-suggest { border-radius: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.25); }
[data-style="soft"] .btn-play-all {
  border-radius: 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  padding: 12px 28px;
}
[data-style="soft"] .btn-shuffle-all { border-radius: 28px; }
[data-style="soft"] .px-play-btn {
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
  transition: all 0.2s !important;
}
[data-style="soft"] .px-play-btn:hover { transform: scale(1.1) !important; }
[data-style="soft"] #sidebar-liked { border-radius: 16px; }
[data-style="soft"] .sidebar-liked-icon { border-radius: 12px; }
[data-style="soft"] #profile-avatar { border-radius: 14px; }
[data-style="soft"] .theme-tile, [data-style="soft"] .style-tile { border-radius: 16px; }
[data-style="soft"] .coll-tab {
  border-radius: 10px 10px 0 0;
  border-bottom-width: 2px;
}
[data-style="soft"] .search-src-btn { border-radius: 16px; }
[data-style="soft"] #search-source-toggle { border-radius: 20px; }
[data-style="soft"] #exp-player { border-radius: 0; }
[data-style="soft"] #progress-bar { border-radius: 4px; }
[data-style="soft"] #progress-bar:hover { height: 8px; }
[data-style="soft"] .px-toggle-track { border-radius: 20px !important; }

/* ════════════════════════════════════════════════════════════════════
   STYLE: NEON — светящиеся неоновые контуры и текст
   ════════════════════════════════════════════════════════════════════ */
[data-style="neon"] .card,
[data-style="neon"] .coll-card,
[data-style="neon"] .track-item,
[data-style="neon"] .ym-result {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
[data-style="neon"] .card:hover,
[data-style="neon"] .coll-card:hover,
[data-style="neon"] .ym-result:hover,
[data-style="neon"] .track-item:hover {
  border-color: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent);
}
[data-style="neon"] .px-section-title,
[data-style="neon"] .view-header h1,
[data-style="neon"] .view-header h2 {
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}
[data-style="neon"] .accent-btn,
[data-style="neon"] .btn-play-all,
[data-style="neon"] .px-play-btn {
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent) !important;
}
[data-style="neon"] .nav-btn.active {
  box-shadow: inset 3px 0 0 var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
}
[data-style="neon"] .search-big:focus {
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent) !important;
  border-color: var(--accent) !important;
}
[data-style="neon"] #player-bar,
[data-style="neon"] #sidebar { border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
[data-style="neon"] #progress-fill { box-shadow: 0 0 10px var(--accent); }
[data-style="neon"] .theme-tile.active,
[data-style="neon"] .style-tile.active {
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent);
  border-color: var(--accent);
}
[data-style="neon"] #profile-avatar { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent); }

/* ════════════════════════════════════════════════════════════════════
   STYLE: MINIMAL — плоский, чистый, без рамок, много воздуха
   ════════════════════════════════════════════════════════════════════ */
[data-style="minimal"] { --r: 6px; }
[data-style="minimal"] #sidebar { border-right: none; background: var(--bg); }
[data-style="minimal"] #player-bar { border-top: 1px solid var(--border); background: var(--bg); }
[data-style="minimal"] .card,
[data-style="minimal"] .coll-card { background: transparent; box-shadow: none; }
[data-style="minimal"] .card:hover,
[data-style="minimal"] .coll-card:hover { background: var(--bg2); transform: none; box-shadow: none; }
[data-style="minimal"] .track-item,
[data-style="minimal"] .ym-result { border-radius: 6px; }
[data-style="minimal"] .track-item:hover,
[data-style="minimal"] .ym-result:hover { background: var(--bg2); }
[data-style="minimal"] .btn-play-all,
[data-style="minimal"] .search-src-btn,
[data-style="minimal"] .px-btn { border-radius: 6px; box-shadow: none !important; }
[data-style="minimal"] .accent-btn { box-shadow: none !important; }
[data-style="minimal"] .nav-btn { border-radius: 6px; }
[data-style="minimal"] .nav-btn.active { background: var(--bg2); box-shadow: inset 2px 0 0 var(--accent); }
[data-style="minimal"] .theme-tile,
[data-style="minimal"] .style-tile { box-shadow: none; border: 1px solid var(--border); }
[data-style="minimal"] .view-header { border-bottom: none; }
[data-style="minimal"] .search-big { border-radius: 8px !important; }
[data-style="minimal"] .coll-tab.active { border-bottom-color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════
   STYLE: SPOTIFY — 1:1 Spotify look (green accent, pill buttons, round)
   ════════════════════════════════════════════════════════════════════ */
[data-style="spotify"] {
  --accent: #1db954;
  --accent2: #1ed760;
  --bg: #000000;
  --bg2: #121212;
  --dim: #b3b3b3;
  --dim2: #a7a7a7;
  --r: 8px;
  --font: 'Circular', 'Helvetica Neue', 'Inter', system-ui, -apple-system, sans-serif;
}
[data-style="spotify"] body, [data-style="spotify"] #content { background: #000; }
[data-style="spotify"] #sidebar {
  background: #000; border-right: none; padding: 8px;
}
[data-style="spotify"] #sidebar-liked, [data-style="spotify"] #sidebar-playlists {
  background: #121212; border-radius: 8px;
}
[data-style="spotify"] .nav-btn {
  border-radius: 6px; color: var(--dim); font-weight: 700; letter-spacing: .2px;
}
[data-style="spotify"] .nav-btn svg { stroke-width: 2.2; }
[data-style="spotify"] .nav-btn:hover { color: var(--text); background: transparent; }
[data-style="spotify"] .nav-btn.active { color: var(--text); background: transparent; }
[data-style="spotify"] .nav-btn::after { display: none !important; }

[data-style="spotify"] #player-bar {
  background: #000; border-top: none; padding: 0 16px;
}
[data-style="spotify"] #player-cover-wrap { border-radius: 4px; }
[data-style="spotify"] .px-ctrl-btn { color: var(--dim); }
[data-style="spotify"] .px-ctrl-btn:hover { color: var(--text); }
[data-style="spotify"] .px-play-btn {
  background: #fff !important; color: #000 !important; box-shadow: none;
}
[data-style="spotify"] .px-play-btn:hover { transform: scale(1.06); }
[data-style="spotify"] #player-progress-fill, [data-style="spotify"] #seek-fill { background: var(--dim); }
[data-style="spotify"] #player-progress-wrap:hover #player-progress-fill,
[data-style="spotify"] #seek-wrap:hover #seek-fill { background: var(--accent); }

/* Cards — Spotify rounded album tiles on dark hover plates */
[data-style="spotify"] .card, [data-style="spotify"] .coll-card,
[data-style="spotify"] .home-recent-card {
  background: transparent; border: none; box-shadow: none; border-radius: 8px;
  transition: background .25s;
}
[data-style="spotify"] .card:hover, [data-style="spotify"] .coll-card:hover,
[data-style="spotify"] .home-recent-card:hover {
  background: #1a1a1a; transform: none; box-shadow: none;
}
[data-style="spotify"] .card-cover, [data-style="spotify"] .card-cover-wrap,
[data-style="spotify"] .card-cover-placeholder, [data-style="spotify"] .card-play-overlay,
[data-style="spotify"] .coll-card-img, [data-style="spotify"] .home-card-img {
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
[data-style="spotify"] .home-artist-card .home-card-img,
[data-style="spotify"] .home-artist-card .card-cover { border-radius: 50%; }
[data-style="spotify"] .card-play-icon, [data-style="spotify"] .coll-card .card-play-overlay {
  background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 16px rgba(0,0,0,.4);
}

/* Pill buttons everywhere */
[data-style="spotify"] .btn-play-all, [data-style="spotify"] .accent-btn,
[data-style="spotify"] .rb, [data-style="spotify"] .px-btn {
  border-radius: 500px; font-weight: 700; letter-spacing: .3px;
}
[data-style="spotify"] .btn-play-all, [data-style="spotify"] .accent-btn {
  background: var(--accent); color: var(--on-accent) !important; box-shadow: none;
}
[data-style="spotify"] .btn-play-all:hover, [data-style="spotify"] .accent-btn:hover {
  background: var(--accent2); transform: scale(1.04);
}
[data-style="spotify"] .px-btn {
  background: transparent; border: 1px solid #727272; color: var(--text);
}
[data-style="spotify"] .px-btn:hover { border-color: var(--text); background: transparent; transform: scale(1.04); }

[data-style="spotify"] .track-item, [data-style="spotify"] .ym-result,
[data-style="spotify"] .queue-item, [data-style="spotify"] .ap-track-row,
[data-style="spotify"] .likes-row { border-radius: 4px; }
[data-style="spotify"] .track-item:hover, [data-style="spotify"] .ym-result:hover,
[data-style="spotify"] .queue-item:hover, [data-style="spotify"] .ap-track-row:hover,
[data-style="spotify"] .likes-row:hover { background: rgba(255,255,255,.07); }
[data-style="spotify"] .track-item.playing { color: var(--accent); }
[data-style="spotify"] .track-item.playing .track-title { color: var(--accent); }

[data-style="spotify"] .ym-cover, [data-style="spotify"] .qi-cover,
[data-style="spotify"] .home-card-img { border-radius: 4px; }
[data-style="spotify"] .album-header-cover, [data-style="spotify"] .album-header-cover-ph,
[data-style="spotify"] .ap-avatar { box-shadow: 0 16px 48px rgba(0,0,0,.6); }
[data-style="spotify"] .ap-avatar { border-radius: 50%; }

[data-style="spotify"] .search-big {
  background: #fff !important; color: #000 !important; border-radius: 500px !important;
  border: none !important; font-weight: 500;
}
[data-style="spotify"] .search-big::placeholder { color: #757575; }
[data-style="spotify"] .px-input { border-radius: 4px; background: #2a2a2a; border-color: transparent; }

[data-style="spotify"] .coll-tab.active { border-bottom-color: var(--accent); }
[data-style="spotify"] .theme-tile, [data-style="spotify"] .style-tile {
  border-radius: 8px; box-shadow: none; border: 1px solid #2a2a2a;
}
[data-style="spotify"] #settings-panel { background: #121212; border-left: 1px solid #282828; }
[data-style="spotify"] #exp-player { background: linear-gradient(180deg, #1f1f1f 0%, #000 60%); }
[data-style="spotify"] #exp-cover-wrap { border-radius: 8px; box-shadow: 0 24px 64px rgba(0,0,0,.7); }
[data-style="spotify"] #btn-like.liked svg, [data-style="spotify"] .liked svg { fill: var(--accent); color: var(--accent); }

/* Mobile bottom nav for spotify style — green active labels */
[data-style="spotify"] .mob-nav-btn.active { color: var(--text); }

/* ════════════════════════════════════════════════════════════════════
   STYLE: LIQUID GLASS — iOS 26 liquid glass morphism
   ════════════════════════════════════════════════════════════════════ */
[data-style="liquid"] {
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
  --glass-hover: rgba(255,255,255,0.1);
  --glass-blur: 28px;
  --glass-shine: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.06) 100%);
  --glass-r: 22px;
  --glass-r-sm: 16px;
  --glass-r-xs: 12px;
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
  --glass-shadow-sm: 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
[data-style="liquid"] body {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(120,80,255,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(0,200,255,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(255,100,200,0.06) 0%, transparent 50%),
    var(--bg);
}
[data-style="liquid"] #content { background: transparent; }

/* Sidebar */
[data-style="liquid"] #sidebar {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border-right: 1px solid var(--glass-border);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.04);
}

/* Player bar */
[data-style="liquid"] #player-bar {
  background: var(--glass-bg);
  backdrop-filter: blur(calc(var(--glass-blur) + 8px)) saturate(1.8);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 8px)) saturate(1.8);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -4px 30px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Settings */
[data-style="liquid"] #settings-panel {
  background: rgba(20,20,30,0.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border-left: 1px solid var(--glass-border);
  border-radius: var(--glass-r) 0 0 0;
}
[data-style="liquid"] #settings-overlay { backdrop-filter: blur(8px); }

/* Wave section — frosted glass under the liquid style */
[data-style="liquid"] .wave-ym { background: transparent; }
[data-style="liquid"] .wave-ym-left {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border-right: 1px solid var(--glass-border);
}
/* Let the app's aurora background glow through the animated canvas */
[data-style="liquid"] #wave-canvas { opacity: 0.5; }
[data-style="liquid"] .wave-st-item.active {
  background: var(--glass-hover); border-radius: var(--glass-r-xs);
}
[data-style="liquid"] .wave-ym-track-bar .wave-ym-bar-inner,
[data-style="liquid"] .wave-src-btn {
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}

/* Cards — liquid glass panels */
[data-style="liquid"] .card {
  background: var(--glass-shine), var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r);
  backdrop-filter: blur(12px);
  transition: all 0.35s cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
}
[data-style="liquid"] .card:hover {
  background: var(--glass-shine), var(--glass-hover);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--glass-shadow);
}
[data-style="liquid"] .card-cover, [data-style="liquid"] .card-cover-wrap {
  border-radius: var(--glass-r-sm);
}
[data-style="liquid"] .card-cover-placeholder {
  border-radius: var(--glass-r-sm);
  background: rgba(255,255,255,0.04);
}
[data-style="liquid"] .card-play-overlay { border-radius: var(--glass-r-sm); }
[data-style="liquid"] .card-play-icon {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* Collection cards */
[data-style="liquid"] .coll-card {
  background: var(--glass-shine), var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r);
  backdrop-filter: blur(12px);
  transition: all 0.35s cubic-bezier(0.2, 0, 0, 1);
}
[data-style="liquid"] .coll-card:hover {
  background: var(--glass-shine), var(--glass-hover);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--glass-shadow-sm);
}
[data-style="liquid"] .coll-card-img { border-radius: var(--glass-r-sm); }

/* Album header */
[data-style="liquid"] .album-header-cover {
  border-radius: var(--glass-r);
  box-shadow: 0 12px 48px rgba(0,0,0,0.35);
}
[data-style="liquid"] .album-header-cover-ph { border-radius: var(--glass-r); }
[data-style="liquid"] .album-header {
  border-bottom-color: var(--glass-border);
}

/* Covers */
[data-style="liquid"] .ym-cover { border-radius: var(--glass-r-xs); }
[data-style="liquid"] .qi-cover { border-radius: var(--glass-r-xs); }
[data-style="liquid"] .qi-cover img { border-radius: var(--glass-r-xs); }
[data-style="liquid"] #player-cover-wrap {
  border-radius: var(--glass-r-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* Track items — glass rows */
[data-style="liquid"] .track-item {
  border-radius: var(--glass-r-xs);
  transition: all 0.2s;
}
[data-style="liquid"] .track-item:hover {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
}
[data-style="liquid"] .track-item.playing {
  background: var(--glass-shine), rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
}

/* Search results */
[data-style="liquid"] .ym-result {
  border-radius: var(--glass-r-xs);
  transition: all 0.2s;
}
[data-style="liquid"] .ym-result:hover {
  background: var(--glass-bg);
}

/* Queue */
[data-style="liquid"] .queue-item { border-radius: var(--glass-r-xs); }
[data-style="liquid"] .queue-item:hover { background: var(--glass-bg); }
[data-style="liquid"] .queue-item.playing {
  background: var(--glass-shine), rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Nav buttons */
[data-style="liquid"] .nav-btn {
  border-radius: var(--glass-r-xs);
  transition: all 0.2s;
}
[data-style="liquid"] .nav-btn:hover {
  background: var(--glass-bg);
}
[data-style="liquid"] .nav-btn.active {
  background: var(--glass-shine), var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-sm);
}

/* Inputs */
[data-style="liquid"] .px-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r-sm);
  backdrop-filter: blur(8px);
}
[data-style="liquid"] .px-input:focus {
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

/* Buttons */
[data-style="liquid"] .px-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r-sm);
  backdrop-filter: blur(12px);
  transition: all 0.2s;
}
[data-style="liquid"] .px-btn:hover {
  background: var(--glass-hover);
  border-color: rgba(255,255,255,0.2);
  box-shadow: var(--glass-shadow-sm);
}
[data-style="liquid"] .accent-btn {
  background: var(--glass-shine), var(--accent) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}
[data-style="liquid"] .accent-btn:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.3) !important;
  transform: translateY(-1px) !important;
}

/* Play button */
[data-style="liquid"] .px-play-btn {
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
[data-style="liquid"] .px-play-btn:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.35) !important;
  transform: scale(1.08) !important;
}

/* Big play/shuffle */
[data-style="liquid"] .btn-play-all {
  border-radius: 26px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.15);
  background: var(--glass-shine), var(--accent);
}
[data-style="liquid"] .btn-shuffle-all {
  border-radius: 26px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
}

/* Search bar */
[data-style="liquid"] .search-big {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 26px !important;
  backdrop-filter: blur(12px) !important;
}
[data-style="liquid"] .search-big:focus {
  border-color: rgba(255,255,255,0.25) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06), 0 4px 20px rgba(0,0,0,0.15) !important;
}
[data-style="liquid"] .search-suggest {
  background: rgba(20,20,35,0.7);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r);
  box-shadow: var(--glass-shadow);
}
[data-style="liquid"] .search-suggest-item:hover { background: var(--glass-bg); }

/* Source toggle */
[data-style="liquid"] #search-source-toggle {
  background: var(--glass-bg);
  border-radius: var(--glass-r);
  border: 1px solid rgba(255,255,255,0.06);
}
[data-style="liquid"] .search-src-btn {
  border-radius: var(--glass-r-sm);
}
[data-style="liquid"] .search-src-btn.active {
  background: var(--glass-shine), rgba(255,255,255,0.1);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-sm);
}

/* Sidebar elements */
[data-style="liquid"] #sidebar-liked {
  border-radius: var(--glass-r-sm);
  transition: all 0.2s;
}
[data-style="liquid"] #sidebar-liked:hover {
  background: var(--glass-bg);
}
[data-style="liquid"] .sidebar-liked-icon {
  border-radius: var(--glass-r-xs);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
[data-style="liquid"] #profile-avatar {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r-xs);
}
[data-style="liquid"] #sidebar-playlists { border-top-color: var(--glass-border); }

/* Tiles */
[data-style="liquid"] .theme-tile, [data-style="liquid"] .style-tile {
  background: var(--glass-shine), var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r-sm);
}
[data-style="liquid"] .theme-tile.active, [data-style="liquid"] .style-tile.active {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(var(--accent), 0.15), var(--glass-shadow-sm);
}
[data-style="liquid"] .theme-tile:hover, [data-style="liquid"] .style-tile:hover {
  background: var(--glass-shine), var(--glass-hover);
  border-color: rgba(255,255,255,0.2);
}

/* Progress bar */
[data-style="liquid"] #progress-bar {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
}
[data-style="liquid"] #progress-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent2, var(--accent)));
  border-radius: 4px;
}
[data-style="liquid"] #progress-thumb {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Tabs */
[data-style="liquid"] .collection-tabs { background: transparent; border-bottom-color: var(--glass-border); }
[data-style="liquid"] .coll-tab { border-bottom-width: 2px; }
[data-style="liquid"] .settings-section { border-bottom-color: var(--glass-border); }

/* Expanded player */
[data-style="liquid"] #exp-player {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(120,80,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(0,200,255,0.05) 0%, transparent 50%),
    rgba(10,10,18,0.92);
  backdrop-filter: blur(30px);
}

/* Toggle */
[data-style="liquid"] .px-toggle-track {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px !important;
}

/* Volume */
[data-style="liquid"] .px-range { accent-color: var(--accent); }

/* Scrollbar */
[data-style="liquid"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
}
[data-style="liquid"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.18);
}


/* ═══════════════════════════════════════════
   KARAOKE CALL BANNER (Telegram-style)
   ═══════════════════════════════════════════ */
#karaoke-call-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(135deg, #7c4dff, #651fff);
  color: #fff;
  cursor: pointer;
  user-select: none;
  border-radius: 12px;
  margin: 8px 16px 0;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(124, 77, 255, 0.35);
  transition: all 0.2s;
  z-index: 50;
  animation: kcb-pulse 2s ease-in-out infinite;
}
#karaoke-call-bar:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124, 77, 255, 0.45);
}
@keyframes kcb-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(124, 77, 255, 0.35); }
  50% { box-shadow: 0 4px 24px rgba(124, 77, 255, 0.55); }
}
.kcb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.kcb-left svg { flex-shrink: 0; }
.kcb-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.kcb-code {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  opacity: 0.85;
  background: rgba(255,255,255,0.15);
  padding: 2px 8px;
  border-radius: 6px;
}
.kcb-members {
  font-size: 11px;
  opacity: 0.7;
  white-space: nowrap;
}
.kcb-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.kcb-timer {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  font-weight: 600;
}
.kcb-return {
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.2);
  padding: 4px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

/* Karaoke standalone view */
#view-karaoke {
  flex-direction: column;
  height: 100%;
}
#karaoke-standalone {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* Override karaoke body to use full height in standalone */
#view-karaoke #karaoke-room { min-height: 0; flex: 1; }
#view-karaoke #karaoke-body { flex: 1; min-height: 0; }
#view-karaoke #karaoke-lyrics-area { flex: 1; min-height: 200px; }

/* Cover-blur background that changes with the playing track (like the expanded player) */
#karaoke-standalone { position: relative; }
#karaoke-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: blur(48px) saturate(1.3) brightness(0.45);
  transform: scale(1.2); opacity: 0; transition: opacity .6s ease;
}
#karaoke-bg.on { opacity: 1; }
#karaoke-standalone > #karaoke-room,
#karaoke-standalone > #karaoke-lobby,
#karaoke-standalone > #karaoke-back-btn,
#karaoke-standalone > #karaoke-room-settings { position: relative; z-index: 1; }

/* Typewriter ("Печать") in karaoke: center the single line in the middle of the area */
[data-ly-anim="typewriter"] #karaoke-lyrics-area { justify-content: center; padding: 16px; overflow: hidden; }
[data-ly-anim="typewriter"] #karaoke-lyrics-lines { flex: 1; padding: 0 16px; }

/* Instrumental gaps (intro / between lines / outro): smoothly crossfade the
   sung line into ♪ notes (and back) instead of an abrupt swap. */
[data-ly-anim="typewriter"] #karaoke-lyrics-lines,
[data-ly-anim="typewriter"] #exp-lyrics-lines { position: relative; }

[data-ly-anim="typewriter"] #karaoke-lyrics-lines .lyric-line.active:not(.ly-leaving),
[data-ly-anim="typewriter"] #exp-lyrics-lines .lyric-line.active:not(.ly-leaving) {
  transition: opacity .5s ease, transform .5s ease;
}
[data-ly-anim="typewriter"] #karaoke-lyrics-lines.ly-instrumental .lyric-line.active:not(.ly-leaving),
[data-ly-anim="typewriter"] #exp-lyrics-lines.ly-instrumental .lyric-line.active:not(.ly-leaving) {
  /* kill the entrance animation's forwards-fill so the fade actually applies,
     otherwise the text stays at opacity:1 and the notes overlap it */
  animation: none !important;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
}

.ly-notes {
  position: absolute; left: 0; right: 0; top: 50%;
  display: flex; gap: 0.35em; justify-content: center; align-items: center;
  font-size: clamp(30px, 5vw, 56px);
  color: var(--accent);
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: 0; transform: translateY(-50%) scale(.8);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
[data-ly-anim="typewriter"] #karaoke-lyrics-lines.ly-instrumental .ly-notes,
[data-ly-anim="typewriter"] #exp-lyrics-lines.ly-instrumental .ly-notes {
  opacity: 1; transform: translateY(-50%) scale(1);
  transition-delay: .18s;
}
.ly-notes span {
  display: inline-block;
  animation: ly-notes-bounce 0.9s ease-in-out infinite;
}
/* each note lags the previous → wave that travels along the row */
.ly-notes span:nth-child(1) { animation-delay: 0s; }
.ly-notes span:nth-child(2) { animation-delay: 0.15s; }
.ly-notes span:nth-child(3) { animation-delay: 0.30s; }
.ly-notes span:nth-child(4) { animation-delay: 0.45s; }
@keyframes ly-notes-bounce {
  0%, 100% { transform: translateY(0);     opacity: 0.45; }
  50%      { transform: translateY(-16px); opacity: 1; }
}

/* Mic permission bar */
#karaoke-mic-permission-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  max-width: 240px;
  margin-bottom: 12px;
}
#karaoke-mic-permission-bar svg { flex-shrink: 0; width: 16px; height: 16px; }
#karaoke-mic-permission-bar span {
  font-size: 11px;
  color: var(--text2);
  flex: 1;
  line-height: 1.3;
}

/* ═══ Full Lyrics Settings ═══ */
.lyset-sub { font-size:11px; color:var(--dim); font-weight:600; margin:8px 0 4px; letter-spacing:0.5px; text-transform:uppercase; }
.lyset-mini { font-size:10px; color:var(--dim); white-space:nowrap; min-width:80px; }
.lyset-val { font-size:11px; color:var(--text2); font-weight:600; min-width:24px; text-align:right; }
.lyset-row { display:flex; align-items:center; gap:8px; margin:4px 0; }

/* Font grid — scrollable, each font shown in its own typeface */
.lyset-font-grid {
  display:flex; flex-wrap:wrap; gap:4px; max-height:180px; overflow-y:auto;
  padding:4px 0;
}
.lyf-btn {
  padding:5px 10px; border-radius:8px; cursor:pointer;
  background:var(--bg3); border:1.5px solid var(--border);
  color:var(--text2); font-size:13px; font-weight:700;
  transition:all .12s; white-space:nowrap; line-height:1.2;
}
.lyf-btn:hover { border-color:var(--dim); color:var(--text); background:var(--bg4); }
.lyf-btn.active { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--bg3)); }

/* Color dots */
.lyset-color-row { display:flex; flex-wrap:wrap; gap:5px; margin:4px 0; }
.lyset-color-sm .lc-dot { width:18px; height:18px; }
.lc-dot {
  width:22px; height:22px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:all .12s;
  box-shadow:0 1px 4px rgba(0,0,0,0.4);
}
.lc-dot:hover { transform:scale(1.2); }
.lc-dot.active { border-color:#fff; box-shadow:0 0 0 2px var(--accent); transform:scale(1.1); }

/* Effects toggles */
.lyset-fx-grid { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; }
.lyset-fx {
  display:flex; align-items:center; gap:5px; cursor:pointer;
  padding:4px 10px; border-radius:8px; background:var(--bg3);
  border:1.5px solid var(--border); font-size:11px; color:var(--text2);
  font-weight:600; transition:all .12s; user-select:none;
}
.lyset-fx:hover { border-color:var(--dim); }
.lyset-fx input { display:none; }
.lyset-fx:has(input:checked) { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--bg3)); }

/* Color input (RGB wheel) */
.lyset-color-input {
  -webkit-appearance:none; appearance:none;
  width:32px; height:32px; border:2px solid var(--border); border-radius:50%;
  background:none; cursor:pointer; padding:0; overflow:hidden;
}
.lyset-color-input::-webkit-color-swatch-wrapper { padding:0; }
.lyset-color-input::-webkit-color-swatch { border:none; border-radius:50%; }
.lyset-color-input::-moz-color-swatch { border:none; border-radius:50%; }
.lyset-color-input:hover { border-color:var(--accent); transform:scale(1.1); }

/* Sub options */
.lyset-sub-opts { padding:6px 0 2px 8px; border-left:2px solid var(--border); margin:4px 0 4px 6px; }

/* Gradient text inner span — inherits all text props from parent */
.ly-grad {
  font:inherit !important;
  letter-spacing:inherit;
  -webkit-text-stroke:inherit;
}

/* Preview */
.lyset-preview {
  margin-top:12px; padding:20px; border-radius:12px; text-align:center;
  background:var(--bg2); border:1px solid var(--border);
  min-height:70px; display:grid; place-items:center;
  overflow:hidden; font-size:28px; font-weight:700; color:var(--text);
  word-break:break-word;
}

/* ═══════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════ */
#toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--bg3);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font);
  font-weight: 500;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  border-left: 3px solid var(--accent);
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: auto;
  max-width: 340px;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.hide { opacity: 0; transform: translateX(30px); }
.toast-error { border-left-color: var(--red); }
.toast-success { border-left-color: var(--green); }
.toast-info { border-left-color: var(--accent); }

/* ═══════════════════════════════════════════════
   ADMIN PANEL
   ═══════════════════════════════════════════════ */

.admin-tabs {
  display: flex; gap: 4px; padding: 0 20px 16px; flex-wrap: wrap;
}
.admin-tab {
  background: var(--bg3); color: var(--dim); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.admin-tab.active, .admin-tab:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.admin-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; padding: 0 20px;
}
.admin-stat {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; text-align: center;
}
.admin-stat-val { font-size: 32px; font-weight: 900; color: var(--text); }
.admin-stat-lbl { font-size: 11px; color: var(--dim); text-transform: uppercase; margin-top: 4px; letter-spacing: 1px; }

.admin-table {
  width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 20px; max-width: calc(100% - 40px);
}
.admin-table th {
  text-align: left; padding: 10px 12px; color: var(--dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border);
}
.admin-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.admin-table tr:hover td { background: rgba(255,255,255,0.03); }
.admin-table .banned-row td { opacity: 0.5; }

.adm-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px;
  font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.adm-badge.green { background: rgba(0,200,80,0.15); color: #0c6; }
.adm-badge.red   { background: rgba(255,50,50,0.15); color: #f44; }
.adm-badge.accent { background: rgba(var(--cover-rgb, 100,100,255),0.15); color: var(--accent); }
.adm-badge.dim   { background: rgba(255,255,255,0.06); color: var(--dim); }

.adm-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.adm-btn {
  padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700;
  background: var(--bg4); color: var(--text); border: 1px solid var(--border);
  cursor: pointer; transition: all .15s;
}
.adm-btn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.adm-btn.red:hover { background: var(--red); border-color: var(--red); }
.adm-btn.green:hover { background: #0c6; border-color: #0c6; }

.admin-log { padding: 0 20px; max-height: 600px; overflow-y: auto; }
.admin-log-entry {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px;
}
.admin-log-icon { font-size: 16px; }
.admin-log-time { color: var(--dim); font-size: 11px; min-width: 120px; }
.admin-log-type { color: var(--accent); font-weight: 700; font-size: 11px; text-transform: uppercase; min-width: 100px; }
.admin-log-detail { color: var(--text); }

/* Blocklist */
.bl-section { margin-bottom: 24px; }
.bl-section-title { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.bl-add-row { display: flex; gap: 8px; margin-bottom: 12px; }
.bl-add-row input { flex: 1; }
.bl-list { display: flex; flex-direction: column; gap: 4px; }
.bl-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}
.bl-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-item .adm-btn { flex-shrink: 0; margin-left: 8px; }

/* multicolour lyrics text (cover palette mode) — gradient clipped to the text */
.ly-multicolor .lyric-line { opacity: .5; transition: opacity .4s ease; }
.ly-multicolor .lyric-line.active { opacity: 1; }
.ly-multicolor .lyric-line {
  background-image: var(--ly-grad);
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
/* let the line's clipped gradient show through each word glyph */
.ly-multicolor .lyric-line .ly-word,
.ly-multicolor .lyric-line .ly-word.lit {
  background: none !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
/* visualizer colour segmented control sizing */
.viz-cmode-seg .cc-mode-btn { padding: 5px 10px; font-size: 11px; }

/* blocked track rows/cards — greyed out + reason, not playable */
.track-blocked { opacity: .5; filter: grayscale(.85); cursor: not-allowed; }
.track-blocked .ap-tr-cover, .track-blocked .ym-cover, .track-blocked .home-card-img { filter: grayscale(1); }
.track-blocked:hover { opacity: .62; }
.ap-tr-blocked { font-size: 11px; font-weight: 700; color: #ff5a86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* blocked-artist plate on the artist page */
.artist-blocked-plate {
  margin-top: 14px; max-width: 460px;
  background: rgba(255,42,109,.12); border: 1px solid rgba(255,42,109,.5);
  border-left: 4px solid #ff2a6d; border-radius: 10px; padding: 12px 16px;
}
.artist-blocked-plate .abp-title {
  font-size: 13px; font-weight: 800; color: #ff5a86; text-transform: uppercase; letter-spacing: .5px;
}
.artist-blocked-plate .abp-reason { font-size: 13px; color: var(--text, #fff); margin-top: 5px; line-height: 1.4; }

/* Yandex import button — clearly a secondary action (not disabled-gray) */
.btn-import-ym {
  background: linear-gradient(135deg, #ff4d4d, #ff2a6d) !important; color: #fff !important;
}
.btn-import-ym:hover { filter: brightness(1.08); }

/* admin blocklist: cross-platform search results + per-user targeting */
.bl-res { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.bl-res img { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; background: var(--bg3, #222); flex: 0 0 auto; }
.bl-user-chk { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 0; cursor: pointer; }
.bl-user-chk input { width: 14px; height: 14px; }

/* visualizer mode preview grid */
.viz-preset-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 12px;
}
.viz-preset-card {
  background: var(--bg3, #15151c); border: 1.5px solid transparent; border-radius: 9px;
  padding: 4px 4px 5px; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 3px; transition: border-color .15s, background .15s, transform .1s;
}
.viz-preset-card:hover { background: var(--bg2, #1a1a1a); transform: translateY(-1px); }
.viz-preset-card.active { border-color: var(--accent, #00e8ff); background: rgba(0,232,255,.08); }
.viz-preset-card canvas {
  width: 100%; height: 40px; display: block; border-radius: 5px;
  background: rgba(0,0,0,.28);
}
.viz-preset-card span {
  font-size: 9px; color: var(--dim, #999); text-transform: uppercase;
  letter-spacing: .3px; font-weight: 700; text-align: center; line-height: 1;
}
.viz-preset-card.active span { color: var(--accent, #00e8ff); }
@media (max-width: 520px) { .viz-preset-grid { grid-template-columns: repeat(2, 1fr); } }

/* cover-colour mode / scope segmented control */
.cc-mode-seg,
.cc-scope-seg { display: inline-flex; gap: 4px; background: var(--bg2, #1a1a1a); border: 1px solid var(--border, #333); border-radius: 20px; padding: 3px; }
.cc-mode-btn,
.cc-scope-btn {
  border: none; background: transparent; color: var(--dim, #999);
  font-size: 12px; font-weight: 700; font-family: system-ui;
  padding: 5px 10px; border-radius: 16px; cursor: pointer; transition: all .15s;
}
.cc-mode-btn:hover,
.cc-scope-btn:hover { color: var(--text, #fff); }
.cc-mode-btn.active,
.cc-scope-btn.active { background: var(--accent, #ffdb4d); color: var(--on-accent); }

/* ═══════════════════════════════════════════════
   RATINGS & REVIEWS
   ═══════════════════════════════════════════════ */
.ap-rating-badges { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* ratings moved to the right side of the artist header */
.ap-rating-side {
  margin-left: auto;
  align-self: center;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin-top: 0;
  flex-shrink: 0;
}
.ap-rating-side .rb { font-size: 18px; padding: 10px 20px; border-radius: 26px; gap: 6px; }
.ap-rating-side .rb small { font-size: 11px; }
.rb {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 700; font-family: system-ui;
  padding: 3px 10px; border-radius: 20px; color: var(--on-accent, #000);
}
.rb-admin { color: #000; }
.rb small { font-size: 9px; font-weight: 600; opacity: .7; text-transform: uppercase; letter-spacing: .5px; }
.rb-users { background: var(--accent, #ffdb4d); }
.rb-admin { background: linear-gradient(135deg, #ec40aa, #ffdb4d); }
.rb-none { color: var(--dim); font-size: 12px; font-family: system-ui; }
.rb-empty { background: var(--bg3, #2a2a2a); color: var(--dim, #999); }

/* per-track rating pill */
.ap-tr-rate, .ym-result .ap-tr-rate {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--bg3, #2a2a2a); border: 1px solid var(--border, #333);
  color: var(--dim, #999); border-radius: 14px; padding: 2px 8px;
  font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0;
  font-family: system-ui; transition: all .15s;
}
.ap-tr-rate:hover { color: var(--accent, #ffdb4d); border-color: var(--accent, #ffdb4d); }
.ap-tr-rate.has-rating { border-color: var(--accent, #ffdb4d); }
.ap-tr-rate .rv-users { color: var(--accent, #ffdb4d); }
.ap-tr-rate .rv-admin { color: #ec40aa; padding-left: 6px; margin-left: 4px; border-left: 1px solid var(--border, #444); }

/* rating picker (1–10, one decimal) */
.rate-picker { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.rate-range { flex: 1; min-width: 120px; accent-color: var(--accent, #ffdb4d); cursor: pointer; }
.rate-num {
  width: 70px; text-align: center; font-weight: 700; font-size: 16px;
  font-family: system-ui; flex-shrink: 0;
}
.rate-num-suffix { color: var(--dim, #999); font-size: 13px; font-family: system-ui; flex-shrink: 0; }
.rate-label { font-size: 12px; color: var(--dim, #999); margin-top: 12px; text-transform: uppercase; letter-spacing: .5px; font-family: system-ui; }
.rate-text { width: 100%; margin-top: 8px; resize: vertical; }
.rate-submit { margin-top: 10px; }
.rate-submit-admin { margin-top: 10px; }
.rate-admin-box { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border, #333); }
.rate-avg-row { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }

.rating-section { margin-top: 24px; }
.review-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.review-item { background: var(--bg2, #1a1a1a); border: 1px solid var(--border, #333); border-radius: 10px; padding: 10px 14px; }
.review-head { display: flex; justify-content: space-between; align-items: center; }
.review-user { font-weight: 700; font-size: 13px; color: var(--text, #fff); font-family: system-ui; }
.review-score { font-weight: 700; font-size: 13px; color: var(--accent, #ffdb4d); }
.review-text { font-size: 13px; color: var(--dim, #bbb); margin-top: 6px; line-height: 1.4; font-family: system-ui; }
.rev-empty { font-size: 13px; color: var(--dim, #999); padding: 8px 0; font-family: system-ui; }

/* rating modal (tracks) */
#rating-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9998; }
#rating-modal {
  display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 9999; width: min(460px, 92vw); max-height: 88vh; overflow: auto;
  background: var(--panel, #1c1c1c); border: 1px solid var(--border, #333);
  border-radius: 14px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.rate-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.rate-modal-title { font-weight: 700; font-size: 16px; color: var(--text, #fff); }
.rate-modal-sub { font-size: 13px; color: var(--dim, #999); margin-top: 2px; }

/* ═══════════════════════════════════════════════
   MOBILE RESPONSIVE — base (sidebar hide, nav show)
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --sidebar: 0px; }
  #sidebar { display: none; }
  #content { width: 100vw; }
  #player-right { display: none; }
  #volume-wrap { display: none; }
}

/* Mobile bottom navigation */
#mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  justify-content: space-around;
  align-items: center;
}
@media (max-width: 768px) {
  #mobile-nav { display: flex; }
}
.mob-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-family: var(--font);
}

/* Wave view — YM style */
#view-wave { height: 100%; }
#wave-container { height: 100%; }
.wave-ym {
  display: flex; width: 100%; height: 100%; min-height: calc(100vh - 80px);
  user-select: none; background: var(--bg);
}
.wave-ym-left {
  width: 340px; min-width: 280px; flex-shrink: 0; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg2) 70%, transparent); border-right: 1px solid var(--border);
  overflow: hidden;
}
.wave-ym-left-title { padding: 16px 16px 0; }
.wave-src-btn {
  padding: 6px 16px; border-radius: 16px; border: 1px solid var(--border);
  background: transparent; color: var(--text2); font-size: 12px; cursor: pointer;
  transition: all .2s;
}
.wave-src-btn.active { background: var(--bg4); color: var(--text); border-color: var(--dim); }
.wave-src-btn:hover { background: var(--bg3); }
.wave-ym-stations { flex: 1; overflow-y: auto; padding: 8px 0; }
.wave-ym-stations::-webkit-scrollbar { width: 4px; }
.wave-ym-stations::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }
.wave-st-item {
  display: flex; align-items: center; gap: 14px; padding: 10px 20px; cursor: pointer;
  transition: background .15s;
}
.wave-st-item:hover { background: var(--bg3); }
.wave-st-item.active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.wave-st-icon {
  width: 56px; height: 56px; border-radius: 14px; object-fit: cover;
  background: #1a1a1a; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.wave-st-icon-placeholder {
  width: 56px; height: 56px; border-radius: 14px; background: #1a1a1a; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.wave-st-name { font-size: 15px; color: var(--text); font-weight: 500; }
/* Station rows are text-only: tighten the padding a bit */
.wave-st-item { padding: 12px 20px; border-radius: 10px; }
.wave-st-item.active .wave-st-name { color: var(--accent); font-weight: 700; }
.wave-ym-right {
  flex: 1; position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden;
}
#wave-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
}
.wave-ym-center {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 24px; text-align: center;
}
.wave-ym-title {
  font-size: 72px; font-weight: 900; letter-spacing: -2px;
  background: linear-gradient(90deg, var(--accent), #fff, var(--accent2, var(--accent)), var(--accent));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wave-title-shift 8s linear infinite;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.35));
}
@keyframes wave-title-shift {
  0% { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}
.wave-ym-controls {
  display: flex; align-items: center; gap: 28px;
}
.wave-ym-ctrl-btn {
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--bg4); color: var(--text2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s; backdrop-filter: blur(8px);
}
.wave-ym-ctrl-btn:hover { background: var(--bg5); color: var(--text); }
.wave-ym-play {
  width: 100px; height: 100px; border-radius: 50%; border: none;
  background: var(--accent); color: var(--on-accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 40px rgba(var(--accent-rgb, 245,197,24), .5); transition: transform .15s, background .3s;
}
.wave-ym-play:hover { transform: scale(1.06); }
.wave-ym-play:active { transform: scale(0.97); }
.wave-ym-track-bar {
  margin-top: 12px; width: 100%; max-width: 480px;
}
.wave-ym-bar-inner {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: color-mix(in srgb, var(--bg3) 80%, transparent); border-radius: 40px; backdrop-filter: blur(12px);
}
.wave-ym-bar-cover {
  width: 36px; height: 36px; border-radius: 6px; object-fit: cover;
  background: var(--bg4); flex-shrink: 0;
}
.wave-ym-bar-info {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
}
.wave-ym-bar-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.wave-ym-bar-artist {
  font-size: 11px; color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.wave-ym-bar-like {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: transparent; color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: color .2s;
}
.wave-ym-bar-like:hover { color: #ff2a6d; }
.wave-seed-badge {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,42,109,.15); border: 1px solid rgba(255,42,109,.4);
  border-radius: 20px; padding: 5px 8px 5px 14px; font-size: 11px; color: var(--text);
}
.wave-seed-close {
  border: none; background: var(--bg4); color: var(--text);
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 12px;
}
.wave-ym-upcoming {
  position: absolute; bottom: 20px; right: 20px; z-index: 1;
  display: flex; flex-direction: column; gap: 6px; max-width: 280px;
}
.wave-up-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  background: rgba(0,0,0,.3); border-radius: 8px; cursor: pointer;
  backdrop-filter: blur(8px); transition: background .15s;
}
.wave-up-item:hover { background: var(--bg3); }
.wave-up-cover { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; background: var(--bg4); }
.wave-up-info { flex: 1; min-width: 0; }
.wave-up-title { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wave-up-artist { font-size: 10px; color: var(--text2); }
.wave-ym-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 2; background: rgba(10,0,16,.8);
}
@media (max-width: 768px) {
  .wave-ym { flex-direction: column; }
  .wave-ym-left { display: none; }
  .wave-ym-title { font-size: 36px; }
  .wave-ym-play { width: 72px; height: 72px; }
  .wave-ym-play svg { width: 32px; height: 32px; }
  .wave-ym-ctrl-btn { width: 40px; height: 40px; }
  .wave-ym-upcoming { position: static; margin-top: 16px; max-width: 100%; padding: 0 16px; }
}

/* Explore page */
.track-row:hover { background: var(--bg3) !important; }
.explore-card:active { transform: scale(0.97); }
@keyframes slideDown { from { transform: translateX(-50%) translateY(-20px); opacity:0; } to { transform: translateX(-50%) translateY(0); opacity:1; } }

/* ── UI Constructor: compact mode ────────── */
body.gui-compact #sidebar { padding: 8px 6px 6px; }
body.gui-compact #sidebar-logo { gap: 6px; }
body.gui-compact #sidebar-nav { gap: 1px; }
body.gui-compact .sidebar-nav-btn { padding: 6px 10px; font-size: 12px; }
body.gui-compact #content { font-size: 13px; }
body.gui-compact #player { padding: 4px 12px; }
body.gui-compact #player-cover-wrap { width: 36px; height: 36px; }
body.gui-compact .ym-cover { width: 36px; height: 36px; }
body.gui-compact .ym-result { padding: 4px 6px; gap: 8px; }

/* UI Constructor: 3D text */
body.text3d h1, body.text3d h2, body.text3d h3,
body.text3d .coll-title, body.text3d .section-title,
body.text3d .nav-label, body.text3d #sidebar-logo-text,
body.text3d #player-title, body.text3d #player-artist,
body.text3d .ym-title, body.text3d .settings-label,
body.text3d .lyset-sub, body.text3d .card-title {
  text-shadow: var(--text3d-shadow, none);
}

/* UI Constructor: cover shape applied to all covers */
.ym-cover { border-radius: var(--cover-r, 6px); }
.ym-cover img { border-radius: var(--cover-r, 6px); }

/* UI Constructor: cover shape on shape btns */
.gui-cover-shape-btn { min-width: 32px; font-size: 16px; }
.gui-cover-shape-btn.active, .gui-player-pos-btn.active, .gui-sidebar-pos-btn.active { background: var(--accent) !important; color: var(--on-accent) !important; }

/* Sidebar resize handle */
#sidebar-resize-handle {
  position: absolute; top: 0; right: 0; width: 4px; height: 100%;
  cursor: col-resize; z-index: 50; background: transparent;
  transition: background 0.15s;
}
#sidebar-resize-handle:hover, body.gui-edit-mode #sidebar-resize-handle {
  background: var(--accent); opacity: 0.5;
}
#sidebar { position: relative; }

/* Edit mode highlights */
body.gui-edit-mode #sidebar,
body.gui-edit-mode #player-bar,
body.gui-edit-mode #content {
  outline: 1px dashed var(--accent);
  outline-offset: -1px;
}
body.gui-edit-mode #sidebar-resize-handle { width: 6px; opacity: 0.7; }

/* Nav reorder items */
.gui-nav-order-item {
  padding: 6px 10px; background: var(--bg3); border-radius: var(--r);
  font-size: 12px; color: var(--text2); cursor: grab; user-select: none;
  display: flex; align-items: center; transition: background 0.15s;
}
.gui-nav-order-item:hover { background: var(--bg4); }
.gui-nav-order-item.dragging { opacity: 0.4; }
.gui-nav-order-item.drag-over { background: var(--accent); color: var(--on-accent); }

/* body flex for player position */
body { display: flex; flex-direction: column; height: 100vh; }

/* Auto-sync button active state */
#lyrics-autosync-btn.on { background: var(--accent) !important; color: var(--on-accent) !important; }
#lyrics-offset-bar button:hover, #tw-sync-bar button:hover { filter: brightness(1.2); }

/* Typewriter sync bar — only visible in "Печать" (typewriter) mode */
#tw-sync-bar { display: none !important; }
#exp-lyrics-content[data-ly-anim="typewriter"] #tw-sync-bar { display: flex !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FULL REDESIGN v2 — Yandex Music style: clean, spacious, polished
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --mob-nav-h: 58px;
  --mob-top-h: 52px;
  --mob-player-h: 64px;
}

#mobile-topbar { display: none; }

@media (max-width: 768px) {
  :root { --player-h: 64px; }

  /* ═══ GLOBAL MOBILE RESET ═══ */
  * { -webkit-tap-highlight-color: transparent; }
  html, body {
    overscroll-behavior: none;
    overflow-x: hidden !important;
    background: #000 !important;
    touch-action: pan-y;
  }
  #content { background: #000 !important; overflow-x: hidden !important; }
  body.particles-on.pt-browse:not(.exp-open) #content { background: transparent !important; }
  #main-grid { overflow-x: hidden !important; max-width: 100vw; }
  body.particles-on.pt-browse:not(.exp-open) #main-grid { background: transparent !important; }
  .home-scroll-row { max-width: 100vw; }

  /* ═══ BOTTOM NAV — YM style with pill highlight ═══ */
  #mobile-nav {
    height: calc(var(--mob-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #0d0d0d !important;
    border-top: 1px solid rgba(255,255,255,0.06);
    transition: background 0.5s ease;
  }
  .mob-nav-btn {
    position: relative;
    padding: 6px 0 4px;
    gap: 3px;
    flex: 1;
    min-width: 0;
    transition: color 0.2s ease;
  }
  .mob-nav-btn svg { width: 24px; height: 24px; transition: transform 0.2s ease; }
  .mob-nav-btn span {
    font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
    white-space: nowrap; opacity: 0.7; transition: opacity 0.2s ease;
  }
  .mob-nav-btn.active { color: var(--text); }
  .mob-nav-btn.active span { opacity: 1; font-weight: 700; }
  .mob-nav-btn.active svg { transform: scale(1.08); }
  .mob-nav-btn.active::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%; transform: translateX(-50%);
    width: 48px; height: 28px;
    background: var(--accent);
    border-radius: 14px;
    opacity: 0.18;
    z-index: -1;
    animation: mobNavPill 0.25s cubic-bezier(.16,1,.3,1);
  }
  @keyframes mobNavPill { from { transform: translateX(-50%) scale(0.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 0.18; } }

  /* ═══ MINI PLAYER — full-width bar above nav (YM style) ═══ */
  #player-bar {
    left: 0; right: 0; width: 100%;
    bottom: calc(var(--mob-nav-h) + env(safe-area-inset-bottom, 0px));
    height: var(--mob-player-h);
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: #111 !important;
    box-shadow: none;
    overflow: hidden;
    padding: 0 12px;
    transition: background 0.5s ease;
  }
  #player-progress-wrap {
    position: absolute; left: 0; right: 0; top: 0; bottom: auto; padding: 0;
    gap: 0; height: 2px;
  }
  #time-current, #time-total { display: none; }
  #progress-bar { border-radius: 0; background: var(--bg3); height: 2px; }
  #progress-fill { border-radius: 0; background: var(--accent); }
  #progress-thumb { display: none; }
  #player-left { max-width: 65%; gap: 12px; }
  #player-cover-wrap {
    width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  #player-info { max-width: none; min-width: 0; overflow: hidden; }
  #player-title {
    font-size: 14px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
  }
  #player-artist {
    font-size: 12px; color: var(--text2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
  }
  #player-center { flex: 0 0 auto; }
  #player-controls { gap: 4px; }
  #btn-prev, #btn-next { display: none; }
  #btn-shuffle, #btn-repeat { display: none; }
  .px-play-btn {
    width: 40px; height: 40px;
    background: #fff !important; color: #000 !important;
    border-radius: 50%;
    transition: transform 0.15s ease;
  }
  .px-play-btn:active { transform: scale(0.92); }
  #btn-like { opacity: 1; }
  #btn-like svg { width: 22px; height: 22px; }

  /* ═══ SCROLL / CONTENT AREA ═══ */
  #app { height: 100dvh; }
  #content {
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding-bottom: calc(var(--mob-nav-h) + var(--mob-player-h) + env(safe-area-inset-bottom, 0px) + 24px);
    padding-top: calc(var(--mob-top-h) + env(safe-area-inset-top, 0px));
  }
  #exp-player, #view-karaoke { padding-top: 0; padding-bottom: 0; }

  /* ═══ TOP BAR — clean, minimal ═══ */
  #mobile-topbar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 95;
    height: calc(var(--mob-top-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 16px 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-bottom: none;
    transition: background 0.3s ease;
  }
  #mtop-title {
    flex: 1; font-size: 18px; font-weight: 800; letter-spacing: -0.3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text);
  }
  .mtop-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent); color: var(--on-accent); border: none; cursor: pointer;
    font-weight: 800; font-size: 14px; overflow: hidden; padding: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .mtop-btn:active { transform: scale(0.9); }
  .mtop-btn.mtop-icon { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
  .mtop-btn.mtop-icon:active { background: rgba(255,255,255,0.15); }
  .mtop-btn img.pf-av-img { width: 100%; height: 100%; object-fit: cover; }
  #mtop-offline, #mtop-settings { width: 34px; height: 34px; }
  #mtop-offline svg, #mtop-settings svg { width: 18px; height: 18px; }

  /* ═══ EXPANDED PLAYER — YM style: big art, yellow play ═══ */
  #exp-player {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(180deg, var(--cover-rgb-grad, #222) 0%, #000 60%) !important;
  }
  #exp-close { top: calc(14px + env(safe-area-inset-top, 0px)) !important; }
  #exp-left { padding: 16px 24px 10px; }
  #exp-cover-wrap {
    width: min(82vw, 360px); height: min(82vw, 360px);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    margin: 24px auto;
  }
  #exp-player .px-play-btn {
    width: 64px !important; height: 64px !important;
    background: var(--accent) !important; color: var(--on-accent) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 20px rgba(255,219,77,0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  #exp-player .px-play-btn:active { transform: scale(0.93); box-shadow: 0 2px 10px rgba(255,219,77,0.2); }
  #exp-player .px-ctrl-btn { color: rgba(255,255,255,0.75); transition: color 0.15s; }
  #exp-player .px-ctrl-btn:active { color: #fff; }
  #exp-player #exp-title { font-size: 20px; font-weight: 800; margin-top: 20px; }
  #exp-player #exp-artist { font-size: 14px; color: rgba(255,255,255,0.55); margin-top: 4px; }

  #karaoke-back-btn { top: calc(12px + env(safe-area-inset-top, 0px)); }

  /* ═══ HOME VIEW — clean sections ═══ */
  #view-library { background: transparent; }
  .home-section-title {
    font-size: 22px; font-weight: 800; letter-spacing: -0.5px;
    padding: 20px 16px 12px;
    color: var(--text);
  }
  .home-recent-card { width: 152px; min-width: 152px; }
  .home-recent-card .home-card-img { height: 152px; border-radius: 10px; }
  .home-artist-card { width: 130px; min-width: 130px; }
  .home-artist-card .home-card-img { height: 130px; border-radius: 50%; }
  .home-artist-card .home-card-name { text-align: center; margin-top: 8px; font-weight: 600; }

  /* ═══ TRACK ROWS — spacious, clean, YM style ═══ */
  .ym-result, .track-item, .track-row {
    padding: 8px 16px;
    border-radius: 0;
    min-height: 64px;
    transition: background 0.15s ease;
  }
  .ym-result:active, .track-item:active, .track-row:active {
    background: var(--bg3);
  }
  .ym-cover, .qi-cover, .tr-cover {
    width: 56px !important; height: 56px !important;
    border-radius: 8px !important; flex-shrink: 0;
  }
  .ym-info, .tr-info { min-width: 0; flex: 1; overflow: hidden; }
  .ym-title, .tr-title, .track-name {
    font-size: 15px; font-weight: 500; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.35;
  }
  .ym-artist, .tr-artist, .track-artist {
    font-size: 13px; color: var(--text2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
  }
  /* Hide ratings & duration on mobile track rows — keep it clean like YM */
  .ym-result .ym-rating,
  .ym-result .ym-dur,
  .track-row .track-duration,
  .likes-row .like-dur,
  .likes-row .like-rating { display: none !important; }

  /* chart items: rank + cover + info + "..." */
  .chart-item, .explore-track {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 16px; min-height: 64px;
  }
  .chart-rank {
    font-size: 14px; color: var(--dim);
    min-width: 24px; text-align: center; font-weight: 700;
  }
  .chart-info { flex: 1; min-width: 0; overflow: hidden; }
  .chart-info .chart-title {
    font-size: 15px; font-weight: 500; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .chart-info .chart-artist {
    font-size: 13px; color: var(--text2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
  }
  .chart-dur { display: none; }
  .chart-cover, .chart-item .ym-cover {
    width: 52px !important; height: 52px !important;
    border-radius: 8px !important;
  }

  /* queue items */
  .queue-item { padding: 8px 16px; border-radius: 0; min-height: 60px; }
  .likes-row { padding: 8px 16px; border-radius: 0; min-height: 60px; }
  .likes-row .ym-cover { width: 52px !important; height: 52px !important; border-radius: 8px !important; }

  /* ═══ SEARCH VIEW — clean input, pill sources ═══ */
  #search-ym-wrap { flex-direction: column; gap: 10px; padding: 12px 16px 8px; }
  #search-ym-input, .search-big {
    border-radius: 12px !important;
    background: var(--bg3) !important;
    color: var(--text) !important;
    border: none !important;
    font-weight: 500; height: 48px; font-size: 16px !important;
    padding-left: 16px;
    transition: background 0.2s ease;
  }
  #search-ym-input:focus, .search-big:focus {
    background: var(--bg4) !important;
    outline: none;
  }
  #search-ym-input::placeholder, .search-big::placeholder { color: var(--dim); }
  #search-source-toggle {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    gap: 8px; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0 0 4px; scrollbar-width: none;
  }
  #search-source-toggle::-webkit-scrollbar { display: none; }
  .search-src-btn {
    flex: 0 0 auto; padding: 9px 18px; font-size: 13px; border-radius: 500px;
    white-space: nowrap; background: rgba(255,255,255,0.07); border: none;
    font-weight: 600; color: rgba(255,255,255,0.7);
    transition: all 0.2s ease;
  }
  .search-src-btn.active {
    background: var(--accent); color: var(--on-accent);
    font-weight: 700;
  }
  .search-src-btn:active { transform: scale(0.95); }
  #view-search { padding-top: 8px; }

  /* ═══ COLLECTION / MY VIEW — section-based like YM ═══ */
  .collection-tabs {
    display: flex; overflow-x: auto; gap: 8px; padding: 14px 16px 12px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    border-bottom: none;
    background: transparent;
    position: sticky; top: 0; z-index: 10;
  }
  .collection-tabs::-webkit-scrollbar { display: none; }
  .coll-tab {
    flex: 0 0 auto; padding: 9px 18px; border-radius: 500px; font-size: 13px;
    font-weight: 600; white-space: nowrap;
    background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7);
    border: none;
    transition: all 0.2s ease;
  }
  .coll-tab.active { background: #fff; color: #000; }
  .coll-tab:active { transform: scale(0.95); }
  .coll-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; padding: 14px 16px; }
  .coll-card-img { border-radius: 10px; }
  #main-grid { grid-template-columns: 1fr !important; gap: 0 !important; padding: 0 !important; }

  /* ═══ SETTINGS PANEL — bottom sheet ═══ */
  #settings-panel {
    top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: 100% !important;
    height: 90dvh !important;
    border-radius: 20px 20px 0 0 !important;
    border: none !important;
    background: #111 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -16px 80px rgba(0,0,0,0.8) !important;
    overflow-y: auto !important;
    animation: settingsSheetUp 0.35s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes settingsSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  #settings-header {
    padding: 26px 16px 12px;
    position: sticky; top: 0; background: #111; z-index: 5;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  /* Drag handle: absolutely positioned so it can't consume the flex row and
     push the close (×) button off the right edge. */
  #settings-header::before {
    content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.2); border-radius: 2px;
  }
  #settings-header .px-icon-btn {
    flex-shrink: 0; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08); border-radius: 50%;
  }
  #settings-tabs {
    display: flex; overflow-x: auto; gap: 6px; padding: 12px 14px;
    scrollbar-width: none; background: #111;
    position: sticky; top: 62px; z-index: 5;
  }
  #settings-tabs::-webkit-scrollbar { display: none; }
  .settings-tab {
    flex: 0 0 auto; padding: 8px 16px; font-size: 13px; border-radius: 500px;
    white-space: nowrap; font-weight: 600;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);
    border: none; transition: all 0.2s ease;
  }
  .settings-tab.active { background: var(--accent); color: var(--on-accent); font-weight: 700; }
  .settings-section { padding: 14px 16px; }

  /* ═══ CONTEXT MENU → BOTTOM SHEET ═══ */
  .track-ctx-menu {
    position: fixed !important;
    top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    background: #1a1a1a !important;
    padding: 8px 8px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -12px 60px rgba(0,0,0,0.8) !important;
    animation: ctxSheetUp 0.25s cubic-bezier(.16,1,.3,1) both;
    z-index: 6000 !important;
  }
  @keyframes ctxSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .track-ctx-menu::before {
    content: ''; display: block; width: 40px; height: 4px;
    background: rgba(255,255,255,0.2); border-radius: 2px; margin: 4px auto 12px;
  }
  .track-ctx-menu .ctx-item {
    padding: 16px 16px; font-size: 16px; border-radius: 12px;
    transition: background 0.15s ease;
  }
  .track-ctx-menu .ctx-item:active { background: rgba(255,255,255,0.06); }
  .track-ctx-menu .ctx-item svg { width: 22px; height: 22px; }

  /* ═══ EXPLORE / ADMIN TABS — scrollable ═══ */
  .admin-tabs, #explore-tabs {
    display: flex; overflow-x: auto; gap: 8px; padding: 10px 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; flex-wrap: nowrap;
  }
  .admin-tabs::-webkit-scrollbar, #explore-tabs::-webkit-scrollbar { display: none; }
  .admin-tab {
    flex: 0 0 auto; padding: 9px 18px; border-radius: 500px;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    background: rgba(255,255,255,0.07); border: none;
    color: rgba(255,255,255,0.7); transition: all 0.2s ease;
  }
  .admin-tab.active { background: var(--accent); color: var(--on-accent); }
  .admin-tab:active { transform: scale(0.95); }

  /* ═══ KARAOKE — mobile layout ═══ */
  #karaoke-body { flex-direction: column; }
  #kr-sidebar { display: none; }
  #kr-right-panel { max-height: 260px; }
  #kr-center { flex: 1; min-height: 200px; }

  /* ═══ BUTTONS — consistent feel ═══ */
  .px-btn { transition: transform 0.12s ease, opacity 0.12s ease; }
  .px-btn:active { transform: scale(0.96); }
  .accent-btn { border-radius: 12px; font-weight: 700; }

  /* ═══ MISC ═══ */
  .view-header { padding: 16px 16px 12px; }
  .px-section-title { font-size: 22px; font-weight: 800; color: var(--text); }

  /* "Слушать все" button — YM style yellow pill */
  .btn-play-all, .play-all-btn {
    background: var(--accent) !important; color: var(--on-accent) !important;
    border-radius: 500px !important; font-weight: 700 !important;
    padding: 10px 24px !important; font-size: 14px !important;
    border: none !important;
    transition: transform 0.15s ease;
  }
  .btn-play-all:active, .play-all-btn:active { transform: scale(0.95); }

  /* ═══ SCROLLBAR — hide on mobile ═══ */
  #content::-webkit-scrollbar { display: none; }
  #content { scrollbar-width: none; }

  /* ═══ KARAOKE VIEW ═══ */
  #view-karaoke #karaoke-standalone { padding-top: env(safe-area-inset-top, 0px); }

  /* ═══ HOME CHART — actual classes used by app.js ═══ */
  .home-chart-row {
    padding: 10px 16px; gap: 14px; border-radius: 0;
    min-height: 64px;
  }
  .home-chart-row:active { background: rgba(255,255,255,0.04); }
  .home-chart-pos {
    font-size: 15px; color: rgba(255,255,255,0.35);
    width: 24px; font-weight: 700;
  }
  .home-chart-cover {
    width: 52px !important; height: 52px !important;
    border-radius: 8px !important;
  }
  .home-chart-info { flex: 1; min-width: 0; }
  .home-chart-title {
    font-size: 15px !important; font-weight: 500 !important;
    color: var(--text) !important; line-height: 1.3;
  }
  .home-chart-artist {
    font-size: 13px !important; color: var(--text2) !important;
    margin-top: 2px;
  }
  .home-chart-dur { display: none !important; }
  .home-chart-dl { display: none !important; }

  /* ═══ HOME SECTIONS — bigger, bolder ═══ */
  .home-section-title {
    font-size: 22px !important; font-weight: 800 !important;
    color: var(--text) !important; padding: 20px 16px 12px !important;
    letter-spacing: -0.3px;
  }
  .home-search { padding: 12px 16px !important; }
  .home-search-input {
    background: var(--bg3) !important;
    border: none !important; border-radius: 12px !important;
    height: 48px !important; font-size: 16px !important;
    color: var(--text) !important; padding: 0 16px !important;
  }
  .home-search-input:focus { background: var(--bg4) !important; outline: none; }
  .home-search-input::placeholder { color: var(--dim) !important; }

  .home-scroll-row { gap: 12px !important; padding: 0 16px !important; }
  .home-recent-card { width: 148px !important; min-width: 148px !important; }
  .home-recent-card .home-card-img { height: 148px !important; border-radius: 10px !important; }
  .home-card-title {
    font-size: 13px !important; font-weight: 600 !important;
    color: var(--text) !important; margin-top: 8px !important;
  }
  .home-card-sub { font-size: 11px !important; color: var(--dim) !important; }

  .home-artist-card { width: 130px !important; min-width: 130px !important; }
  .home-artist-card .home-card-img { height: 130px !important; border-radius: 50% !important; }

  /* ═══ YM RESULTS (search, album page) — actual classes ═══ */
  .ym-result {
    padding: 10px 16px !important; border-radius: 0 !important;
    min-height: 64px !important; gap: 14px !important;
  }
  .ym-result:active { background: var(--bg3) !important; }
  .ym-cover {
    width: 52px !important; height: 52px !important;
    border-radius: 8px !important;
  }
  .ym-title {
    font-size: 15px !important; font-weight: 500 !important;
    color: var(--text) !important; line-height: 1.3 !important;
  }
  .ym-artist {
    font-size: 13px !important; color: var(--text2) !important;
    margin-top: 2px !important;
  }
  .ym-rating, .ym-dur { display: none !important; }
  .ym-result .ym-dl { display: none !important; }
  .ym-result .ym-heart { display: none !important; }

  /* ═══ LIKES ROWS — actual classes ═══ */
  .likes-row {
    padding: 10px 16px !important; border-radius: 0 !important;
    min-height: 64px !important;
  }
  .likes-row:active { background: var(--bg3) !important; }
  .likes-row .like-cover, .likes-row .ym-cover {
    width: 52px !important; height: 52px !important;
    border-radius: 8px !important;
  }
  .likes-row .like-title, .likes-row .ym-title {
    font-size: 15px !important; font-weight: 500 !important; color: var(--text) !important;
  }
  .likes-row .like-artist, .likes-row .ym-artist {
    font-size: 13px !important; color: var(--text2) !important;
  }
  .likes-row .like-dur, .likes-row .like-rating { display: none !important; }

  /* ═══ COLLECTION — "Слушать все" button like YM ═══ */
  .collection-header .btn-play-all,
  .coll-play-all {
    background: var(--accent) !important; color: var(--on-accent) !important;
    border-radius: 500px !important; font-weight: 700 !important;
    padding: 10px 24px !important; font-size: 14px !important;
    border: none !important;
  }

  /* ═══ QUEUE ITEM — match track row style ═══ */
  .queue-item {
    padding: 10px 16px !important; border-radius: 0 !important;
    min-height: 64px !important;
  }
  .queue-item .qi-cover {
    width: 52px !important; height: 52px !important; border-radius: 8px !important;
  }

  /* ═══ SMOOTH PAGE TRANSITIONS ═══ */
  .view { animation: mobViewFadeIn 0.2s ease; }
  @keyframes mobViewFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

  /* ═══ YM HOME — Category chips ═══ */
  .ym-home-chips {
    display: flex; gap: 12px; padding: 8px 16px 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ym-home-chips::-webkit-scrollbar { display: none; }
  .ym-chip {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex: 0 0 auto; min-width: 72px; cursor: pointer;
  }
  .ym-chip-icon {
    width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
  }
  .ym-chip:active .ym-chip-icon { transform: scale(0.92); }
  .ym-chip span { font-size: 12px; color: var(--text2); font-weight: 500; }

  /* ═══ YM HOME — Liked card row ═══ */
  .ym-home-liked {
    display: flex; gap: 10px; padding: 0 16px 20px;
    overflow-x: auto; scrollbar-width: none;
  }
  .ym-home-liked::-webkit-scrollbar { display: none; }
  .ym-liked-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg3); border-radius: 12px;
    padding: 12px; min-width: 180px; flex: 1;
    cursor: pointer; transition: background 0.15s;
  }
  .ym-liked-card:active { background: var(--bg4); }
  .ym-liked-cover { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
  .ym-liked-cover img { width: 100%; height: 100%; object-fit: cover; }
  .ym-liked-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ym-liked-count { font-size: 11px; color: var(--text2); margin-top: 2px; }

  /* ═══ YM HOME — Моя волна main banner (dynamic cover colors) ═══ */
  .ym-home-wave {
    margin: 0 16px 20px; padding: 24px 20px; border-radius: 18px;
    background: #0d0d12; /* canvas paints on top; dark base = no colored edges */
    position: relative; overflow: hidden; cursor: pointer;
    transition: transform 0.15s;
    min-height: 100px;
  }
  /* (старый cover-rgb оверлей удалён — цвета баннера рисует canvas от --accent) */
  .ym-home-wave:active { transform: scale(0.97); }
  .ym-home-wave-bg {
    position: absolute; inset: 0; overflow: hidden;
  }
  .ym-home-wave-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  .ym-home-wave-play {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,0.15); backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
    transition: transform 0.15s;
    z-index: 2;
  }
  .ym-home-wave:active .ym-home-wave-play { transform: translateY(-50%) scale(0.92); }
  .ym-home-wave-label {
    font-size: 28px; font-weight: 900; color: #fff; position: relative; z-index: 1;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
  }
  .ym-home-wave-sub {
    font-size: 14px; color: rgba(255,255,255,0.8); position: relative; z-index: 1; margin-top: 4px;
    font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,0.2);
  }

  /* ═══ YM HOME — Wave banners (horizontal scroll) ═══ */
  .ym-wave-banners {
    display: flex; gap: 12px; padding: 0 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .ym-wave-banners::-webkit-scrollbar { display: none; }
  .ym-wave-banner {
    flex: 0 0 auto; min-width: 260px; padding: 16px 20px;
    border-radius: 14px; cursor: pointer;
    transition: transform 0.15s;
  }
  .ym-wave-banner:active { transform: scale(0.97); }
  .ym-wave-label { font-size: 12px; color: rgba(255,255,255,0.8); }
  .ym-wave-sub { font-size: 16px; font-weight: 700; color: #fff; margin-top: 4px; }

  /* ═══ MUZLO BANNER CAROUSEL ═══ */
  .mz-carousel {
    position: relative; margin: 0 16px 20px; border-radius: 20px;
    overflow: hidden; height: 140px; background: var(--bg3);
  }
  .mz-carousel-track {
    display: flex !important; flex-direction: row !important; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .mz-carousel-slide {
    flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center;
    padding: 0 24px; position: relative; overflow: hidden; flex-shrink: 0;
  }
  .mz-carousel-slide::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.4), transparent 70%);
  }
  .mz-slide-cover {
    width: 100px; height: 100px; border-radius: 16px; object-fit: cover;
    margin-right: 20px; flex-shrink: 0; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  }
  .mz-slide-content { position: relative; z-index: 1; flex: 1; min-width: 0; }
  .mz-slide-label {
    font-size: 12px; color: rgba(255,255,255,.7); text-transform: uppercase;
    letter-spacing: 1px; font-weight: 600;
  }
  .mz-slide-title {
    font-size: 22px; font-weight: 800; color: #fff; margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mz-slide-sub {
    font-size: 14px; color: rgba(255,255,255,.8); margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mz-slide-btn {
    position: relative; z-index: 1; padding: 10px 20px; border-radius: 24px;
    background: rgba(255,255,255,.15); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 14px;
    font-weight: 600; cursor: pointer; transition: .15s; flex-shrink: 0;
  }
  .mz-slide-btn:hover { background: rgba(255,255,255,.25); }
  .mz-carousel-dots {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px; z-index: 2;
  }
  .mz-carousel-dot {
    width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3);
    transition: .2s;
  }
  .mz-carousel-dot.on { background: #fff; width: 18px; border-radius: 3px; }

  /* ═══ YM HOME — Hero (new releases) ═══ */
  .ym-home-hero {
    margin: 0 16px 12px; border-radius: 16px; overflow: hidden;
    position: relative; cursor: pointer; aspect-ratio: 1/1;
    max-height: 380px; background: #1a1a1a;
  }
  .ym-home-hero:active { opacity: 0.9; }
  .ym-hero-img { width: 100%; height: 100%; }
  .ym-hero-img img { width: 100%; height: 100%; object-fit: cover; }
  .ym-hero-name {
    position: absolute; bottom: 60px; left: 20px; right: 20px;
    font-size: 28px; font-weight: 900; color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,0.7);
  }
  .ym-hero-sub {
    position: absolute; bottom: 36px; left: 20px;
    font-size: 13px; color: rgba(255,255,255,0.7);
  }

  /* ═══ YM HOME & COLLECTION — Artist circles ═══ */
  .ym-artists-row {
    display: flex; gap: 16px; padding: 0 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 8px;
  }
  .ym-artists-row::-webkit-scrollbar { display: none; }
  .ym-artist-circle {
    flex: 0 0 auto; width: 130px; text-align: center;
    cursor: pointer;
  }
  .ym-artist-circle:active { opacity: 0.8; }
  .ym-artist-photo {
    width: 130px; height: 130px; border-radius: 50%; overflow: hidden;
    background: #222; margin-bottom: 8px;
  }
  .ym-artist-photo img { width: 100%; height: 100%; object-fit: cover; }
  .ym-artist-ph {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: var(--dim);
  }
  .ym-artist-rank { font-size: 14px; font-weight: 700; color: var(--text2); }
  .ym-artist-name { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ym-artist-hours { font-size: 11px; color: var(--dim); margin-top: 1px; }

  /* ═══ YM COLLECTION — Wave banner (dynamic) ═══ */
  .ym-coll-wave {
    margin: 0 16px 8px; padding: 16px 20px;
    background: linear-gradient(135deg,
      rgba(var(--cover-rgb, 255,215,0), 0.95),
      rgba(var(--cover-rgb, 255,160,0), 0.7));
    border-radius: 14px; cursor: pointer;
    transition: transform 0.15s, background 1s ease;
    position: relative; overflow: hidden;
  }
  .ym-coll-wave::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 70% at 80% 30%, rgba(255,255,255,0.2), transparent 50%);
  }
  .ym-coll-wave:active { transform: scale(0.97); }
  .ym-coll-wave-text { font-size: 12px; color: rgba(255,255,255,0.7); position: relative; z-index: 1; }
  .ym-coll-wave-title { font-size: 18px; font-weight: 800; color: #fff; position: relative; z-index: 1; text-shadow: 0 1px 8px rgba(0,0,0,0.2); }

  /* ═══ YM COLLECTION — Sub line ═══ */
  .ym-coll-sub {
    padding: 4px 16px 16px; font-size: 13px; color: rgba(255,255,255,0.4);
    text-align: center;
  }

  /* ═══ YM COLLECTION — Liked section ═══ */
  .ym-coll-liked { padding: 0 16px 20px; }
  .ym-coll-liked-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px; cursor: pointer;
  }
  .ym-coll-heart { font-size: 40px; flex-shrink: 0; }
  .ym-coll-liked-title { font-size: 22px; font-weight: 800; color: var(--text); }
  .ym-coll-liked-count { font-size: 14px; color: var(--text2); margin-top: 2px; }
  .ym-coll-liked-tracks { display: flex; flex-direction: column; gap: 2px; }
  .ym-coll-track {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0; cursor: pointer;
    transition: background 0.15s;
  }
  .ym-coll-track:active { background: var(--bg3); }
  .ym-coll-track-cover { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--bg4); }
  .ym-coll-track-cover img { width: 100%; height: 100%; object-fit: cover; }
  .ym-coll-track-info { flex: 1; min-width: 0; }
  .ym-coll-track-title { font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ym-coll-track-artist { font-size: 13px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ym-coll-track-actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
  .ym-coll-dl, .ym-coll-more { cursor: pointer; transition: opacity 0.15s; }
  .ym-coll-dl:active, .ym-coll-more:active { opacity: 0.5; }

  /* ═══ YM COLLECTION — Section titles ═══ */
  .ym-coll-section { padding: 0 0 20px; }
  .ym-coll-section-title {
    font-size: 22px; font-weight: 800; color: var(--text);
    padding: 20px 16px 12px; letter-spacing: -0.3px;
  }

  /* ═══ YM COLLECTION — 2-column grid ═══ */
  .ym-coll-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; padding: 0 16px;
  }
  .ym-coll-grid-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; background: var(--bg3);
    border-radius: 12px; cursor: pointer;
    transition: background 0.15s;
  }
  .ym-coll-grid-item:active { background: var(--bg3); }
  .ym-coll-grid-icon {
    width: 48px; height: 48px; border-radius: 10px; overflow: hidden;
    background: var(--bg4); display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
  }
  .ym-coll-grid-icon img { width: 100%; height: 100%; object-fit: cover; }
  .ym-coll-grid-title { font-size: 14px; font-weight: 600; color: var(--text); }
  .ym-coll-grid-sub { font-size: 11px; color: var(--dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OFFLINE MODE — indicators, download queue, storage, network banner
   ═══════════════════════════════════════════════════════════════════════════ */

/* Offline badge on track rows */
.off-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--green, #4caf50);
  transition: color 0.2s;
}
.off-badge.downloading { color: var(--accent); }
.off-badge.downloaded { color: var(--green, #4caf50); }

/* Download All button */
.btn-dl-all {
  background: rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid rgba(255,255,255,0.1);
}
.btn-dl-all:hover { background: rgba(255,255,255,0.14) !important; }
.btn-dl-all svg { flex-shrink: 0; }

/* Offline filter bar */
#offline-filter-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.offline-filter-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; color: var(--text2); user-select: none;
}
.offline-filter-toggle input { display: none; }
.offline-filter-track {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--bg5); position: relative; transition: background 0.2s;
}
.offline-filter-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text2); transition: transform 0.2s, background 0.2s;
}
.offline-filter-toggle input:checked + .offline-filter-track {
  background: var(--green, #4caf50);
}
.offline-filter-toggle input:checked + .offline-filter-track::after {
  transform: translateX(16px); background: #fff;
}
.offline-filter-count {
  font-size: 12px; color: var(--dim); margin-left: auto;
}

/* Network offline banner */
#offline-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  animation: bannerSlide 0.3s ease-out;
}
@keyframes bannerSlide { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Download queue floating pill */
#dl-queue-pill {
  position: fixed; bottom: 140px; left: 50%; transform: translateX(-50%);
  z-index: 8500;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 500px; padding: 8px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  font-size: 12px; color: var(--text2); white-space: nowrap;
  overflow: hidden; min-width: 200px;
}
#dl-queue-pill-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(76, 175, 80, 0.15);
  border-radius: 500px;
  transition: width 0.3s;
}
#dl-queue-pill-text { position: relative; z-index: 1; }
#dl-queue-pill-close {
  position: relative; z-index: 1;
  background: none; border: none; color: var(--dim); cursor: pointer;
  font-size: 16px; padding: 0 0 0 4px; line-height: 1;
}

/* Downloads tab in Collection */
.dl-tab-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--border);
}
.dl-tab-stats { display: flex; align-items: baseline; gap: 8px; }
.dl-stat-big { font-size: 28px; font-weight: 800; color: var(--text); }
.dl-stat-label { font-size: 13px; color: var(--dim); }
.dl-tab-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.dl-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center;
}
.dl-empty-title { font-size: 18px; font-weight: 700; color: var(--text); margin-top: 16px; }
.dl-empty-sub { font-size: 13px; color: var(--dim); margin-top: 8px; line-height: 1.5; }

.dl-active-section { padding: 12px 16px; background: var(--bg3); }
.dl-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 10px;
}
.dl-active-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
.dl-active-cover {
  width: 36px; height: 36px; border-radius: 5px; overflow: hidden;
  background: var(--bg4); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); font-size: 14px;
}
.dl-active-cover img { width: 100%; height: 100%; object-fit: cover; }
.dl-active-info { flex: 1; min-width: 0; }
.dl-active-title {
  font-size: 12px; color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.dl-active-bar {
  height: 3px; background: var(--bg5); border-radius: 2px; overflow: hidden;
}
.dl-active-fill {
  height: 100%; background: var(--green, #4caf50); border-radius: 2px;
  transition: width 0.3s;
}
.dl-active-pct { font-size: 11px; color: var(--dim); flex-shrink: 0; min-width: 30px; text-align: right; }

.dl-remove-btn {
  background: none; border: none; color: var(--dim); cursor: pointer;
  padding: 4px; border-radius: 4px; transition: color 0.15s;
  display: flex; align-items: center;
}
.dl-remove-btn:hover { color: var(--red); }

/* Storage management in Settings */
#offline-storage-info { padding: 8px 0; }
.off-storage-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--text2); padding: 3px 0;
}
.off-storage-row span:last-child { color: var(--text); font-weight: 600; }
#off-storage-bar-wrap {
  height: 6px; background: var(--bg5); border-radius: 3px;
  overflow: hidden; margin-top: 8px;
}
#off-storage-bar {
  height: 100%; width: 0%; border-radius: 3px;
  background: var(--accent); transition: width 0.5s, background 0.3s;
}

/* Mobile adjustments for offline elements */
@media (max-width: 768px) {
  #dl-queue-pill {
    bottom: calc(var(--mob-nav-h) + var(--mob-player-h) + env(safe-area-inset-bottom, 0px) + 12px);
    left: 16px; right: 16px; transform: none;
    min-width: 0; width: auto;
    border-radius: 14px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.08);
  }
  #offline-banner {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
  .dl-tab-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ════════════════════════════════════════════════════════════════════
   STYLE: RECODE BETA — YM Recode-style: icon sidebar, yellow accent
   ════════════════════════════════════════════════════════════════════ */
[data-style="recode"] {
  --bg: #000; --bg2: #000; --bg3: #1a1a1a; --bg4: #282828;
  --accent: #ffdb4d; --accent2: #ffe680;
  --text: #fff; --text2: #999; --dim: #666; --border: #1a1a1a;
  --sidebar: 320px; --r: 12px; --player-h: 88px;
}

/* ─── Body / Content ─── */
[data-style="recode"] body,
[data-style="recode"] #content { background: #000; }

/* ─── Sidebar: YM-style wide ─── */
[data-style="recode"] #sidebar {
  width: var(--sidebar); min-width: var(--sidebar);
  background: #000;
  border-right: none;
  border-radius: 0 24px 24px 0;
  padding: 24px 20px 20px;
  margin: 12px 0 12px 12px;
  box-shadow: 4px 0 32px rgba(0,0,0,.3);
  align-items: stretch;
  gap: 0;
}
[data-style="recode"] #sidebar-logo { margin-bottom: 20px; padding: 0 4px; justify-content: flex-start; }
[data-style="recode"] #sidebar-logo-text { display: inline; font-size: 16px; font-weight: 700; letter-spacing: 1px; }
[data-style="recode"] #cat-wrap { width: 24px; height: 24px; }
[data-style="recode"] #cat-canvas { width: 24px; height: 24px; }
[data-style="recode"] #px-nav { align-items: stretch; gap: 0; }
[data-style="recode"] .nav-btn {
  width: auto; height: auto;
  padding: 12px 16px;
  justify-content: flex-start;
  border-radius: 12px;
  color: #999;
  gap: 16px;
}
[data-style="recode"] .nav-btn svg { width: 24px; height: 24px; }
[data-style="recode"] .nav-label { display: inline; font-size: 15px; }
[data-style="recode"] .nav-btn:hover { background: transparent; color: var(--text); }
[data-style="recode"] .nav-btn.active { background: transparent; color: var(--text); font-weight: 600; }
[data-style="recode"] .nav-btn.active[data-view="likes"] { color: #ff5c5c; }
[data-style="recode"] #sidebar-footer { display: none; }
[data-style="recode"] #sidebar-liked {
  padding: 8px; margin: 8px 0; border-radius: 10px; gap: 10px; overflow: hidden;
  background: linear-gradient(135deg, #d4145a, #fbb03b);
}
[data-style="recode"] .sidebar-liked-icon { width: 32px; height: 32px; min-width: 32px; border-radius: 8px; background: transparent; }
[data-style="recode"] .sidebar-liked-icon svg { width: 18px; height: 18px; fill: #fff; }
[data-style="recode"] .sidebar-liked-text { display: inline; font-size: 13px; font-weight: 600; color: var(--text); }
[data-style="recode"] .sidebar-liked-count { display: inline; color: rgba(255,255,255,.7); font-size: 11px; }
[data-style="recode"] #sidebar-playlists { padding: 0 4px; margin-top: 4px; overflow: hidden; }
[data-style="recode"] #sidebar-pl-header { font-size: 11px; padding: 6px 4px; text-transform: uppercase; letter-spacing: 1px; color: #666; }
[data-style="recode"] .sidebar-pl-item { font-size: 13px; padding: 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #999; }
[data-style="recode"] .sidebar-pl-item:hover { color: var(--text); background: transparent; }

/* ─── Main grid / content area ─── */
[data-style="recode"] #main-grid {
  padding: 24px 32px 32px;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
}

/* ─── Cards ─── */
[data-style="recode"] .card {
  background: transparent;
  border-radius: 12px;
  padding: 8px;
}
[data-style="recode"] .card:hover { background: #1a1a1a; }
[data-style="recode"] .card-cover,
[data-style="recode"] .card-cover-wrap,
[data-style="recode"] .card-cover-placeholder { border-radius: 12px; }
[data-style="recode"] .card-play-icon {
  background: var(--accent); color: var(--on-accent);
  border-radius: 50%; width: 44px; height: 44px;
}
[data-style="recode"] .card-play-icon:hover { transform: scale(1.08); }

/* Artist cards circular */
[data-style="recode"] .home-artist-card .home-card-img,
[data-style="recode"] .home-artist-card .card-cover,
[data-style="recode"] .home-artist-card .card-cover-wrap { border-radius: 50%; }

/* ─── Player bar ─── */
[data-style="recode"] #player-bar {
  background: #000;
  border-top: 1px solid #1a1a1a;
  height: 72px;
}
[data-style="recode"] .px-play-btn {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-radius: 50%;
  width: 40px; height: 40px;
}
[data-style="recode"] .px-play-btn:hover { transform: scale(1.06); background: var(--accent2) !important; }
[data-style="recode"] .px-ctrl-btn { color: #999; }
[data-style="recode"] .px-ctrl-btn:hover { color: var(--text); }
[data-style="recode"] #player-progress-fill,
[data-style="recode"] #seek-fill { background: #fff; }
[data-style="recode"] #player-progress-wrap:hover #player-progress-fill,
[data-style="recode"] #seek-wrap:hover #seek-fill { background: var(--accent); }
[data-style="recode"] #player-cover-wrap { border-radius: 8px; }

/* ─── Expanded player ─── */
[data-style="recode"] #exp-player {
  background: linear-gradient(180deg, #181818 0%, #000 60%);
}
[data-style="recode"] #exp-cover-wrap {
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.7);
}
[data-style="recode"] .exp-play-btn {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  width: 64px; height: 64px;
  border-radius: 50%;
}
[data-style="recode"] .exp-ctrl-btn { color: #999; }
[data-style="recode"] .exp-ctrl-btn:hover { color: var(--text); }

/* ─── Buttons ─── */
[data-style="recode"] .btn-play-all,
[data-style="recode"] .accent-btn {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: none !important;
  border-radius: 20px;
  font-weight: 700;
}
[data-style="recode"] .btn-play-all:hover,
[data-style="recode"] .accent-btn:hover {
  background: var(--accent2) !important;
  transform: scale(1.03);
}
[data-style="recode"] .px-btn {
  border-radius: 20px;
  border-color: #444;
}
[data-style="recode"] .px-btn:hover { border-color: var(--text); }

/* ─── Track rows ─── */
[data-style="recode"] .track-item,
[data-style="recode"] .ym-result,
[data-style="recode"] .queue-item,
[data-style="recode"] .ap-track-row,
[data-style="recode"] .likes-row { border-radius: 8px; }
[data-style="recode"] .track-item:hover,
[data-style="recode"] .ym-result:hover,
[data-style="recode"] .queue-item:hover,
[data-style="recode"] .ap-track-row:hover,
[data-style="recode"] .likes-row:hover { background: #1a1a1a; }
[data-style="recode"] .track-item.playing .track-title { color: var(--accent); }

/* ─── Search ─── */
[data-style="recode"] .search-big {
  border-radius: 24px;
  background: #1a1a1a;
  border: none;
  padding: 12px 20px;
}
[data-style="recode"] .search-big:focus { box-shadow: 0 0 0 2px var(--accent); }
[data-style="recode"] .px-input { border-radius: 8px; background: #1a1a1a; border-color: transparent; }

/* ─── Collection tabs ─── */
[data-style="recode"] .coll-tab { border-radius: 20px; }
[data-style="recode"] .coll-tab.active { background: #fff; color: #000; border-color: transparent; }

/* ─── Settings panel ─── */
[data-style="recode"] #settings-panel { background: #0a0a0a; border-left: 1px solid #1a1a1a; }

/* ─── Covers / images ─── */
[data-style="recode"] .ym-cover,
[data-style="recode"] .qi-cover,
[data-style="recode"] .home-card-img { border-radius: 8px; }
[data-style="recode"] .album-header-cover,
[data-style="recode"] .album-header-cover-ph { box-shadow: 0 16px 48px rgba(0,0,0,.6); border-radius: 12px; }
[data-style="recode"] .ap-avatar { border-radius: 50%; box-shadow: 0 16px 48px rgba(0,0,0,.6); }

/* ─── Like button ─── */
[data-style="recode"] #btn-like.liked svg,
[data-style="recode"] .liked svg { fill: #ff5c5c; color: #ff5c5c; }

/* ─── Home sections headers ─── */
[data-style="recode"] .home-section-title,
[data-style="recode"] .section-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

/* ─── Scrollbar ─── */
[data-style="recode"] ::-webkit-scrollbar { width: 6px; }
[data-style="recode"] ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
[data-style="recode"] ::-webkit-scrollbar-thumb:hover { background: #555; }
[data-style="recode"] ::-webkit-scrollbar-track { background: transparent; }

/* ─── Theme/style tiles ─── */
[data-style="recode"] .theme-tile,
[data-style="recode"] .style-tile { border-color: #333; background: #111; }

/* ─── Wave page ─── */
[data-style="recode"] .wave-ym-play {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}

/* ─── Home scroll row ─── */
[data-style="recode"] .home-scroll-row { gap: 16px; }
[data-style="recode"] .home-scroll-row .card { min-width: 170px; }

/* ─── Collection: artist cards ─── */
[data-style="recode"] .coll-card {
  border-radius: 12px;
}
[data-style="recode"] .coll-card:hover { background: #1a1a1a; }
[data-style="recode"] .coll-card-img { border-radius: 50%; }

/* PWA standalone (installed on home screen): use full viewport, hide any chrome */
@media (display-mode: standalone) {
  body { min-height: 100vh; }
}
#btn-video-export:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
#btn-video-export.recording { color: #ff4444 !important; border-color: #ff4444 !important; animation: vx-pulse 1s ease infinite; }
@keyframes vx-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* ═══ Desktop "Моя волна" banner ═══ */
.ym-home-wave-desktop {
  margin: 12px 0 20px; padding: 28px 24px; border-radius: 18px;
  background: #0d0d12; /* canvas paints on top; dark base = no colored edges */
  position: relative; overflow: hidden; cursor: pointer;
  transition: transform 0.15s;
  height: 140px; box-sizing: border-box;
}
.ym-home-wave-desktop:hover { transform: scale(0.99); }
.ym-home-wave-desktop:active { transform: scale(0.97); }
.ym-home-wave-desktop .ym-home-wave-bg { position: absolute; inset: 0; overflow: hidden; }
.ym-home-wave-desktop .ym-home-wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ym-home-wave-desktop .ym-home-wave-play {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: transform 0.15s;
  border: 1px solid rgba(255,255,255,0.2);
  z-index: 2;
}
.ym-home-wave-desktop:active .ym-home-wave-play { transform: translateY(-50%) scale(0.92); }
.ym-home-wave-np {
  position: relative; z-index: 1; margin-top: 8px; display: inline-block;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.35); backdrop-filter: blur(8px);
  padding: 4px 10px; border-radius: 12px; max-width: 70%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Quick-access mini-banner cards: smooth horizontal scroll with snap */
.ym-quick-row {
  display: flex; gap: 12px;
  margin: 14px 0 6px;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 4px;
}
.ym-quick-row::-webkit-scrollbar { display: none; }
.ym-quick-card {
  --qc: hsl(var(--qh, 45), 70%, 58%);
  position: relative; overflow: hidden; cursor: pointer;
  flex: 0 0 auto; width: 190px; height: 96px; box-sizing: border-box;
  scroll-snap-align: start;
  border-radius: 16px; padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background:
    radial-gradient(120% 90% at 100% 0%, hsla(var(--qh,45), 65%, 45%, 0.28), transparent 60%),
    linear-gradient(160deg, rgba(28,28,40,0.9), rgba(15,15,22,0.92));
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  transition: transform .28s cubic-bezier(.2,0,0,1), box-shadow .28s, border-color .28s;
}
/* Big ghosted watermark icon in the corner */
.ym-quick-wm {
  position: absolute; right: -14px; top: -12px; width: 78px; height: 78px;
  fill: var(--qc); opacity: 0.1; transition: opacity .28s, transform .28s;
  pointer-events: none;
}
/* Accent-tinted icon chip */
.ym-quick-chip {
  position: absolute; top: 13px; left: 16px;
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--qc);
  background: hsla(var(--qh,45), 60%, 50%, 0.14);
  box-shadow: inset 0 0 0 1px hsla(var(--qh,45), 60%, 55%, 0.25);
  transition: transform .28s;
}
.ym-quick-t { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.2px; }
.ym-quick-d { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 1px; }
.ym-quick-card:hover {
  transform: translateY(-4px);
  border-color: hsla(var(--qh,45), 60%, 55%, 0.4);
  box-shadow: 0 16px 40px -14px hsla(var(--qh,45), 70%, 45%, 0.5);
}
.ym-quick-card:hover .ym-quick-wm { opacity: 0.2; transform: scale(1.08) rotate(-6deg); }
.ym-quick-card:hover .ym-quick-chip { transform: scale(1.06); }
.ym-quick-card:active { transform: translateY(-1px) scale(0.98); }
@media (max-width: 768px) {
  .ym-quick-row { gap: 10px; margin: 12px 16px 4px; }
  .ym-quick-card { width: 160px; height: 88px; padding: 12px 14px; border-radius: 14px; }
  .ym-quick-t { font-size: 14px; }
}
.ym-home-wave-desktop .ym-home-wave-label {
  font-size: 32px; font-weight: 900; color: #fff; position: relative; z-index: 1;
  letter-spacing: -0.5px; text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.ym-home-wave-desktop .ym-home-wave-sub {
  font-size: 15px; color: rgba(255,255,255,0.85); position: relative; z-index: 1;
  margin-top: 6px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,0.2);
}

/* ═══ Telegram bot promo banner ═══ */
.ym-tg-bot-bg {
  background: linear-gradient(135deg, #24A1DE 0%, #0088cc 50%, #005f99 100%) !important;
}
.ym-tg-bot-orb {
  position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,0.12); pointer-events: none;
}
.ym-tg-bot-orb::after {
  content: ''; position: absolute; left: -60px; bottom: -60px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.ym-tg-bot-play {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.35) !important;
  backdrop-filter: blur(12px);
}
.ym-home-wave.ym-tg-bot-banner:active .ym-tg-bot-play,
.ym-home-wave-desktop.ym-tg-bot-banner-desktop:active .ym-tg-bot-play {
  transform: translateY(-50%) scale(0.92);
}
.ym-tg-bot-label,
.ym-tg-bot-sub { color: #fff !important; text-shadow: 0 2px 12px rgba(0,0,0,0.25); }
.ym-tg-bot-sub { color: rgba(255,255,255,0.9) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   RECODE — futuristic full-app interface mode (data-uimode="recode")
   Aurora/holographic glass. Accent stays var(--accent) so it follows theme &
   cover colour. Legacy mode = no [data-uimode="recode"] rules apply.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-uimode="recode"] {
  /* Recode 2.0 is theme-aware: every surface derives from the active theme's
     vars (bg/text/accent), so all themes — including light ones — render clean. */
  --rc-ac2: var(--accent2, var(--accent));
  --rc-glass: color-mix(in srgb, var(--text) 5%, transparent);
  --rc-border: color-mix(in srgb, var(--text) 11%, transparent);
  --rc-panel: color-mix(in srgb, var(--bg2) 78%, transparent);
  --rc-panel2: color-mix(in srgb, var(--bg) 66%, transparent);
  --rc-glow: color-mix(in srgb, var(--accent) 55%, transparent);
  --rc-glow-soft: color-mix(in srgb, var(--accent) 22%, transparent);
  --rc-radius: 18px;
  --rc-mono: 'SF Mono','JetBrains Mono',ui-monospace,'Cascadia Code',monospace;
}

/* Cleaner aurora background: fewer, softer blobs so the UI doesn't feel busy */
[data-uimode="recode"] body {
  background:
    radial-gradient(ellipse 80% 60% at 18% 12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 50% at 82% 85%, color-mix(in srgb, var(--rc-ac2) 9%, transparent), transparent 55%),
    linear-gradient(155deg, var(--bg) 0%, var(--bg2) 50%, color-mix(in srgb, var(--bg2) 95%, var(--accent)) 100%) !important;
  background-attachment: fixed !important;
  font-family: 'Inter', system-ui, sans-serif;
}
[data-uimode="recode"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 25% 35%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 45%),
    radial-gradient(circle at 75% 65%, color-mix(in srgb, var(--rc-ac2) 5%, transparent), transparent 45%);
  animation: rc-aurora 20s ease-in-out infinite alternate;
}
@keyframes rc-aurora {
  0%   { transform: translate3d(-4%,-2%,0) scale(1.05); opacity:.85; }
  100% { transform: translate3d(4%,3%,0) scale(1.12);  opacity:.55; }
}
@media (prefers-reduced-motion: reduce) {
  [data-uimode="recode"] body::before { animation: none; }
}

/* Sidebar — deep glass with edge glow and tidy spacing */
[data-uimode="recode"] #sidebar {
  background: linear-gradient(180deg, var(--rc-panel), var(--rc-panel2)) !important;
  backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4);
  border-right: 1px solid var(--rc-border);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--accent) 12%, transparent), 20px 0 60px -40px var(--rc-glow);
  padding: 22px 14px 16px !important;
}
[data-uimode="recode"] #sidebar-logo { margin-bottom: 28px; padding: 0 6px; }
[data-uimode="recode"] #sidebar-logo-text {
  background: linear-gradient(90deg, var(--accent), var(--text) 60%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 2px; font-weight: 800;
}
[data-uimode="recode"] #px-nav { gap: 5px; }
[data-uimode="recode"] .nav-btn, [data-uimode="recode"] .sidebar-nav-btn {
  border-radius: 13px; padding: 0 14px; margin: 0 2px;
  transition: background .2s, color .2s, box-shadow .2s, transform .15s;
  position: relative;
}
[data-uimode="recode"] .nav-btn.active, [data-uimode="recode"] .sidebar-nav-btn.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  color: var(--accent) !important;
  box-shadow: inset 3px 0 0 var(--accent),
              inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
              0 0 20px -6px var(--rc-glow);
}
[data-uimode="recode"] .nav-btn:hover, [data-uimode="recode"] .sidebar-nav-btn:hover {
  background: var(--rc-glass) !important;
  transform: translateX(2px);
}
[data-uimode="recode"] #sidebar-liked {
  background: var(--rc-glass); border: 1px solid var(--rc-border);
  border-radius: 14px; margin: 14px 4px 0; padding: 10px 12px;
}
[data-uimode="recode"] .sidebar-pl-item {
  border-radius: 10px; padding: 7px 12px; margin: 2px 4px;
  transition: background .15s, color .15s;
}
[data-uimode="recode"] .sidebar-pl-item:hover {
  background: var(--rc-glass); color: var(--text);
}

/* Section labels → mono tech captions with clear hierarchy */
[data-uimode="recode"] .home-section-title,
[data-uimode="recode"] .ym-home-section-title,
[data-uimode="recode"] .settings-label {
  font-family: var(--rc-mono); letter-spacing: 1.2px; text-transform: uppercase;
  font-size: 12px; font-weight: 700;
  color: color-mix(in srgb, var(--text) 70%, transparent);
  margin: 28px 0 14px; padding-left: 14px; position: relative;
}
[data-uimode="recode"] .home-section-title::before,
[data-uimode="recode"] .ym-home-section-title::before,
[data-uimode="recode"] .settings-label::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 16px; border-radius: 4px; background: var(--accent);
}

/* Cards — glass tiles that lift & glow on hover */
[data-uimode="recode"] .home-card,
[data-uimode="recode"] .album-card,
[data-uimode="recode"] .artist-card,
[data-uimode="recode"] .coll-card,
[data-uimode="recode"] .ym-home-card,
[data-uimode="recode"] .explore-card {
  background: var(--rc-glass) !important;
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .28s cubic-bezier(.2,0,0,1), box-shadow .28s, border-color .28s;
}
[data-uimode="recode"] .home-card:hover,
[data-uimode="recode"] .album-card:hover,
[data-uimode="recode"] .artist-card:hover,
[data-uimode="recode"] .coll-card:hover,
[data-uimode="recode"] .ym-home-card:hover,
[data-uimode="recode"] .explore-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 18px 50px -20px var(--rc-glow), 0 0 0 1px var(--rc-glow-soft);
}

/* Search input — glass field with neon focus ring */
[data-uimode="recode"] .search-big,
[data-uimode="recode"] .home-search-input,
[data-uimode="recode"] .px-input {
  background: var(--rc-glass) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color .2s, box-shadow .2s;
}
[data-uimode="recode"] .search-big:focus,
[data-uimode="recode"] .home-search-input:focus,
[data-uimode="recode"] .px-input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
  box-shadow: 0 0 0 3px var(--rc-glow-soft), 0 0 24px -8px var(--rc-glow) !important;
}

/* Player bar — floating glass with top accent line */
[data-uimode="recode"] #player-bar {
  background: linear-gradient(180deg, var(--rc-panel), color-mix(in srgb, var(--bg) 88%, transparent)) !important;
  backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border-top: 1px solid var(--rc-border) !important;
  box-shadow: 0 -1px 0 var(--rc-glow-soft), 0 -20px 60px -40px var(--rc-glow);
}
[data-uimode="recode"] #player-bar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
  opacity: .7;
}
[data-uimode="recode"] #player-controls { gap: 10px; }
[data-uimode="recode"] .px-ctrl-btn {
  width: 34px; height: 34px; color: var(--text2);
}
[data-uimode="recode"] .px-ctrl-btn:hover { color: var(--text); background: var(--rc-glass); }
[data-uimode="recode"] .px-play-btn {
  background: var(--accent) !important; color: var(--on-accent) !important;
  box-shadow: 0 0 28px -6px var(--rc-glow);
}
[data-uimode="recode"] #player-progress-wrap { max-width: 560px; }
[data-uimode="recode"] #progress-fill,
[data-uimode="recode"] #player-progress-fill,
[data-uimode="recode"] .ym-progress-fill,
[data-uimode="recode"] #exp-progress-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, var(--text)), var(--accent)) !important;
  box-shadow: 0 0 12px -2px var(--rc-glow);
}

/* Expanded player — deep glass */
[data-uimode="recode"] #exp-player {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 94%, transparent), color-mix(in srgb, var(--bg) 96%, transparent)) !important;
  backdrop-filter: blur(40px) saturate(1.5); -webkit-backdrop-filter: blur(40px) saturate(1.5);
}
[data-uimode="recode"] #exp-cover-wrap {
  border-radius: 20px;
  box-shadow: 0 30px 80px -30px var(--rc-glow), 0 0 0 1px var(--rc-border);
}

/* Wave section — transparent so the aurora shows through the canvas */
[data-uimode="recode"] .wave-ym { background: transparent !important; }
[data-uimode="recode"] .wave-ym-left {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 62%, transparent), color-mix(in srgb, var(--bg) 55%, transparent)) !important;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--rc-border);
}
[data-uimode="recode"] #wave-canvas { opacity: 0.7; }
[data-uimode="recode"] .wave-st-item.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 12px;
}

/* Home wave banner — glass frame + accent glow ring */
[data-uimode="recode"] .ym-home-wave,
[data-uimode="recode"] .ym-home-wave-desktop {
  border: 1px solid var(--rc-border);
  box-shadow: 0 20px 60px -30px var(--rc-glow), inset 0 0 0 1px var(--rc-glow-soft);
}

/* Modals / settings — frosted glass panels */
[data-uimode="recode"] #settings-panel,
[data-uimode="recode"] .modal-box,
[data-uimode="recode"] .px-modal-inner {
  background: color-mix(in srgb, var(--bg2) 86%, transparent) !important;
  backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid var(--rc-border) !important;
}

/* Buttons — glass with accent hover glow */
[data-uimode="recode"] .px-btn,
[data-uimode="recode"] .btn-play-all,
[data-uimode="recode"] .accent-btn { border-radius: 12px; }
[data-uimode="recode"] .btn-play-all { box-shadow: 0 8px 30px -10px var(--rc-glow); }

/* Mobile nav — glass dock */
[data-uimode="recode"] #mobile-nav {
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-top: 1px solid var(--rc-border) !important;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
}
[data-uimode="recode"] .mob-nav-btn {
  border-radius: 14px; padding: 4px 10px; margin: 0 4px;
  transition: background .2s, color .2s, transform .15s;
}
[data-uimode="recode"] .mob-nav-btn.active {
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Scrollbar */
[data-uimode="recode"] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 30%, color-mix(in srgb, var(--text) 12%, transparent));
  border-radius: 8px;
}

/* Global recode chrome: transparent stage + comfortable top spacing */
[data-uimode="recode"] #content { background: transparent; }
[data-uimode="recode"] #main-grid { padding-top: 18px; }
[data-uimode="recode"] .view { padding-top: 8px; }

/* Settings interface-mode switch (Legacy / Recode) */
.uimode-switch { display: flex; gap: 10px; }
.uimode-opt {
  flex: 1; text-align: left; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; color: var(--text2);
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.uimode-opt:hover { border-color: var(--dim); }
.uimode-opt.active {
  border-color: var(--accent); color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg3));
  box-shadow: 0 0 0 1px var(--accent) inset, 0 6px 24px -12px var(--accent);
}
.uimode-opt-title { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.uimode-opt-desc { font-size: 11px; opacity: .7; }
.uimode-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .5px;
  background: var(--accent); color: var(--on-accent); padding: 1px 5px; border-radius: 6px;
}

/* ── Recode motion: scroll reveals (driven by 19-recode-motion.js) ── */
[data-uimode="recode"] .rc-reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.2,0,0,1), transform .6s cubic-bezier(.2,0,0,1);
  transition-delay: var(--rc-delay, 0ms);
  will-change: opacity, transform;
}
[data-uimode="recode"] .rc-reveal.rc-in { opacity: 1; transform: none; }
[data-uimode="recode"] .ym-home-wave-label,
[data-uimode="recode"] .ym-home-wave-sub { transition: transform .3s ease-out; }
@media (prefers-reduced-motion: reduce) {
  [data-uimode="recode"] .rc-reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Recode home: from-scratch cinematic layout ── */
[data-uimode="recode"] .rc-home { padding: 0 !important; }
[data-uimode="recode"] .rc-hidden { display: none !important; }
[data-uimode="recode"] .rc-hero {
  position: relative; width: 100%; min-height: 62vh;
  border-radius: 26px; overflow: hidden; cursor: pointer;
  margin-bottom: 28px;
  display: flex; align-items: flex-end;
  background: #0a0a12;
  box-shadow: 0 40px 100px -50px var(--rc-glow, rgba(0,0,0,.6)), inset 0 0 0 1px rgba(255,255,255,0.06);
}
[data-uimode="recode"] .rc-hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
}
[data-uimode="recode"] .rc-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 30%, rgba(6,6,12,0.4) 60%, rgba(6,6,12,0.85) 100%),
              radial-gradient(120% 80% at 100% 0%, transparent 50%, rgba(6,6,12,0.5));
}
[data-uimode="recode"] .rc-hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-uimode="recode"] .rc-hero-inner {
  position: relative; z-index: 2; padding: 44px 48px;
}
[data-uimode="recode"] .rc-hero-kicker {
  font-family: var(--rc-mono); font-size: 11px; letter-spacing: 3px;
  color: var(--accent); margin-bottom: 14px; opacity: .85;
}
[data-uimode="recode"] .rc-hero-greet {
  font-size: 15px; color: rgba(255,255,255,0.6); font-weight: 500; margin-bottom: 4px;
}
[data-uimode="recode"] .rc-hero-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(52px, 8vw, 104px); line-height: 0.9; font-weight: 800;
  letter-spacing: -3px; margin: 0 0 22px;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--accent) 70%, #fff));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
[data-uimode="recode"] .rc-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
[data-uimode="recode"] .rc-hero-play {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border: none; border-radius: 40px; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--on-accent, #08080f);
  background: var(--accent);
  box-shadow: 0 12px 40px -10px var(--rc-glow, rgba(255,255,255,.3));
  transition: transform .2s, box-shadow .2s;
}
[data-uimode="recode"] .rc-hero-play:hover { transform: translateY(-2px) scale(1.03); }
[data-uimode="recode"] .rc-hero-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-radius: 40px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .2s, transform .2s;
}
[data-uimode="recode"] .rc-hero-ghost:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }
/* Home content sections get horizontal breathing room in recode (grid has padding:0) */
[data-uimode="recode"] .rc-home > .home-section,
[data-uimode="recode"] .rc-home > .ym-quick-row,
[data-uimode="recode"] .rc-home > #home-ym-loading { padding-left: 20px; padding-right: 20px; }
@media (max-width: 700px) {
  [data-uimode="recode"] .rc-home > .home-section,
  [data-uimode="recode"] .rc-home > .ym-quick-row,
  [data-uimode="recode"] .rc-home > #home-ym-loading { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 768px) {
  [data-uimode="recode"] .rc-hero { min-height: 54vh; border-radius: 20px; }
  [data-uimode="recode"] .rc-hero-inner { padding: 28px 22px; }
  [data-uimode="recode"] .rc-hero-title { letter-spacing: -2px; }
}

/* ═══ A11Y: keyboard focus + reduced motion (UI/UX audit) ═══ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION 2.0 — unified smooth animation layer for the whole app.
   View switches, tab switches, list renders, hover/press feedback.
   Killed globally by the prefers-reduced-motion block above.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --mz-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --mz-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mzViewIn {
  from { opacity: 0; transform: translateY(14px) scale(0.995); }
  to   { opacity: 1; transform: none; }
}
@keyframes mzItemIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mzPop {
  0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); }
}

/* View switch: whole view glides in */
.mz-view-in { animation: mzViewIn 0.42s var(--mz-ease) both; }

/* Content containers: every (re)render animates items in with a soft stagger.
   Covers home, collection, explore, search results and the queue — so tab
   switches inside views are smooth too, with zero extra JS. */
#main-grid > *, #collection-content > *, #explore-content > *,
#search-ym-results > *, #queue-list > * {
  animation: mzItemIn 0.4s var(--mz-ease) backwards;
}
#main-grid > :nth-child(1), #collection-content > :nth-child(1), #explore-content > :nth-child(1), #search-ym-results > :nth-child(1), #queue-list > :nth-child(1) { animation-delay: 0.024s; }
#main-grid > :nth-child(2), #collection-content > :nth-child(2), #explore-content > :nth-child(2), #search-ym-results > :nth-child(2), #queue-list > :nth-child(2) { animation-delay: 0.048s; }
#main-grid > :nth-child(3), #collection-content > :nth-child(3), #explore-content > :nth-child(3), #search-ym-results > :nth-child(3), #queue-list > :nth-child(3) { animation-delay: 0.072s; }
#main-grid > :nth-child(4), #collection-content > :nth-child(4), #explore-content > :nth-child(4), #search-ym-results > :nth-child(4), #queue-list > :nth-child(4) { animation-delay: 0.096s; }
#main-grid > :nth-child(5), #collection-content > :nth-child(5), #explore-content > :nth-child(5), #search-ym-results > :nth-child(5), #queue-list > :nth-child(5) { animation-delay: 0.12s; }
#main-grid > :nth-child(6), #collection-content > :nth-child(6), #explore-content > :nth-child(6), #search-ym-results > :nth-child(6), #queue-list > :nth-child(6) { animation-delay: 0.144s; }
#main-grid > :nth-child(7), #collection-content > :nth-child(7), #explore-content > :nth-child(7), #search-ym-results > :nth-child(7), #queue-list > :nth-child(7) { animation-delay: 0.168s; }
#main-grid > :nth-child(8), #collection-content > :nth-child(8), #explore-content > :nth-child(8), #search-ym-results > :nth-child(8), #queue-list > :nth-child(8) { animation-delay: 0.192s; }
#main-grid > :nth-child(9), #collection-content > :nth-child(9), #explore-content > :nth-child(9), #search-ym-results > :nth-child(9), #queue-list > :nth-child(9) { animation-delay: 0.216s; }
#main-grid > :nth-child(10), #collection-content > :nth-child(10), #explore-content > :nth-child(10), #search-ym-results > :nth-child(10), #queue-list > :nth-child(10) { animation-delay: 0.24s; }
#main-grid > :nth-child(11), #collection-content > :nth-child(11), #explore-content > :nth-child(11), #search-ym-results > :nth-child(11), #queue-list > :nth-child(11) { animation-delay: 0.264s; }
#main-grid > :nth-child(12), #collection-content > :nth-child(12), #explore-content > :nth-child(12), #search-ym-results > :nth-child(12), #queue-list > :nth-child(12) { animation-delay: 0.288s; }

/* Nav: springy icons, pressed feedback */
.nav-btn, .mob-nav-btn {
  transition: color 0.22s var(--mz-ease), background 0.22s var(--mz-ease), transform 0.15s ease-out;
}
.nav-btn:active, .mob-nav-btn:active { transform: scale(0.93); }
.nav-btn svg, .mob-nav-btn svg { transition: transform 0.3s var(--mz-spring); }
.nav-btn.active svg, .mob-nav-btn.active svg { transform: translateY(-1px) scale(1.12); }

/* Tabs & pill buttons everywhere */
.admin-tab, .coll-tab, .wave-src-btn, .search-src-btn, .settings-tab {
  transition: color 0.22s var(--mz-ease), background 0.22s var(--mz-ease),
              border-color 0.22s var(--mz-ease), transform 0.15s ease-out;
}
.admin-tab:active, .coll-tab:active, .wave-src-btn:active, .search-src-btn:active, .settings-tab:active { transform: scale(0.95); }

/* Cards: soft spring lift on hover, settle on press */
.home-card, .album-card, .artist-card, .coll-card, .ym-home-card, .explore-card, .ym-quick-card {
  transition: transform 0.3s var(--mz-spring), box-shadow 0.3s var(--mz-ease),
              background 0.25s var(--mz-ease), border-color 0.25s var(--mz-ease);
}
.home-card:active, .album-card:active, .artist-card:active, .coll-card:active,
.ym-home-card:active, .explore-card:active, .ym-quick-card:active { transform: scale(0.97); }

/* Track rows: gentle slide on hover, press feedback */
.track-item { transition: background 0.18s var(--mz-ease), transform 0.18s var(--mz-ease); }
.track-item:hover { transform: translateX(3px); }
.track-item:active { transform: translateX(3px) scale(0.99); }

/* Player controls */
.px-icon-btn, .wave-ym-ctrl-btn, .wave-ym-bar-like { transition: transform 0.25s var(--mz-spring), color 0.2s, background 0.2s; }
.px-icon-btn:hover, .wave-ym-ctrl-btn:hover { transform: scale(1.1); }
.px-icon-btn:active, .wave-ym-ctrl-btn:active, .wave-ym-bar-like:active { transform: scale(0.88); }
.wave-ym-play { transition: transform 0.25s var(--mz-spring), box-shadow 0.3s var(--mz-ease); }
.wave-ym-play:hover { transform: scale(1.06); }
.wave-ym-play:active { transform: scale(0.94); }
.wave-ym-bar-like:hover { animation: mzPop 0.4s var(--mz-ease); }

/* Buttons */
.px-btn, .accent-btn, .btn-play-all {
  transition: transform 0.18s var(--mz-spring), background 0.22s var(--mz-ease),
              box-shadow 0.25s var(--mz-ease), border-color 0.22s var(--mz-ease), color 0.22s var(--mz-ease);
}
.px-btn:active, .accent-btn:active, .btn-play-all:active { transform: scale(0.96); }

/* ─── "Моя волна | Обзор" mode tabs (Explore lives inside the Wave view) ─── */
#view-wave { position: relative; }
#view-wave .wave-mode-tabs {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 5; padding: 6px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
}
.wave-mode-tabs { display: flex; gap: 6px; }
.wave-mode-tab {
  padding: 9px 22px; border-radius: 999px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--text2); background: var(--bg3); border: 1px solid var(--border);
  transition: color 0.22s var(--mz-ease), background 0.22s var(--mz-ease),
              border-color 0.22s var(--mz-ease), transform 0.2s var(--mz-spring), box-shadow 0.25s;
}
.wave-mode-tab:hover { color: var(--text); border-color: var(--dim); transform: translateY(-1px); }
.wave-mode-tab:active { transform: scale(0.95); }
.wave-mode-tab.active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  box-shadow: 0 6px 20px -8px var(--accent);
}
#view-explore .wave-mode-tabs { background: none; border-radius: 0; padding: 16px 20px 4px; }
@media (max-width: 720px) {
  #view-wave .wave-mode-tabs { top: 10px; }
  .wave-mode-tab { padding: 8px 18px; font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RECODE 2.0 — usability layer over the holographic base above.
   Same legacy DOM and functionality; fixes the classic UI's weak points:
   flat nav active state, rectangular tabs, flat track rows, harsh edges.
   ═══════════════════════════════════════════════════════════════════════════ */

/* rc-reveal owns list animation in recode — turn off the Motion 2.0 stagger
   so items don't animate twice. */
[data-uimode="recode"] #main-grid > *,
[data-uimode="recode"] #collection-content > *,
[data-uimode="recode"] #explore-content > *,
[data-uimode="recode"] #search-ym-results > *,
[data-uimode="recode"] #queue-list > * { animation: none; }

/* Nav: clear accent pill for the active item (legacy's gray bg4 was too subtle) */
[data-uimode="recode"] .nav-btn { border-radius: 13px; }
[data-uimode="recode"] .nav-btn.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
              0 6px 24px -14px var(--rc-glow);
}
[data-uimode="recode"] .nav-btn.active svg { filter: drop-shadow(0 0 8px var(--rc-glow-soft)); }

/* Tabs: segmented pills instead of admin-style rectangles */
[data-uimode="recode"] .admin-tabs, [data-uimode="recode"] .collection-tabs { gap: 6px; border-bottom: none !important; }
[data-uimode="recode"] .admin-tab, [data-uimode="recode"] .coll-tab, [data-uimode="recode"] .settings-tab {
  border-radius: 999px !important; border: 1px solid var(--rc-border) !important;
  background: var(--rc-glass) !important; padding: 8px 18px;
}
[data-uimode="recode"] .admin-tab.active, [data-uimode="recode"] .coll-tab.active, [data-uimode="recode"] .settings-tab.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
  color: var(--accent) !important;
  box-shadow: 0 6px 20px -10px var(--rc-glow);
}

/* Track rows: rounded glass rows with visible hover */
[data-uimode="recode"] .track-item { border-radius: 12px; }
[data-uimode="recode"] .track-item:hover {
  background: var(--rc-glass);
  box-shadow: inset 0 0 0 1px var(--rc-border);
}

/* Cards: deeper glass + lift with glow */
[data-uimode="recode"] .home-card:hover, [data-uimode="recode"] .album-card:hover,
[data-uimode="recode"] .artist-card:hover, [data-uimode="recode"] .coll-card:hover,
[data-uimode="recode"] .ym-home-card:hover, [data-uimode="recode"] .explore-card:hover,
[data-uimode="recode"] .ym-quick-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,0.75), 0 8px 30px -16px var(--rc-glow);
}

/* Wave/Обзор mode tabs — glass dock with accent active */
[data-uimode="recode"] #view-wave .wave-mode-tabs {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  border: 1px solid var(--rc-border);
}
[data-uimode="recode"] .wave-mode-tab { background: transparent; border-color: transparent; }
[data-uimode="recode"] .wave-mode-tab.active {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 6px 24px -8px var(--rc-glow);
}

/* Inputs: pill search */
[data-uimode="recode"] .search-big, [data-uimode="recode"] .home-search-input { border-radius: 999px !important; }

/* Player bar: hover lifts the glow */
[data-uimode="recode"] #player-bar:hover {
  box-shadow: 0 -1px 0 var(--rc-glow-soft), 0 -24px 70px -40px var(--rc-glow);
}

/* Settings sections breathe a bit more */
[data-uimode="recode"] .settings-section { border-radius: var(--rc-radius); }

/* ─── Brand: W mark + МУЗЛО wordmark (top-left) ──────────────────────────── */
#sidebar-logo-text {
  background: linear-gradient(100deg,
    var(--text2) 0%, var(--text2) 38%,
    var(--accent) 50%,
    var(--text2) 62%, var(--text2) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: mzLogoSheen 5.5s linear infinite;
}
#sidebar-logo:hover #sidebar-logo-text { -webkit-text-fill-color: transparent; }
@keyframes mzLogoSheen {
  0% { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

/* Settings tabs: wrap onto a new line instead of hidden horizontal scroll —
   with a mouse the overflowed last tab (Аккаунт) was unreachable on desktop. */
#settings-tabs { flex-wrap: wrap; }

/* Lyrics fullscreen on desktop — the rules above only lived inside the
   max-width:640px media query, so the ⛶ button did nothing on PC. */
#exp-player.lyrics-fs #exp-left { display: none !important; }
#exp-player.lyrics-fs #exp-tabs { display: none !important; }
#exp-player.lyrics-fs #exp-right { border-top: none; flex: 1 !important; width: 100% !important; max-width: none !important; }
#exp-player.lyrics-fs #exp-lyrics-content { display: flex !important; flex: 1; }

/* ─── Сообщения (DM) ─────────────────────────────────────────────────────── */
#view-messages { height: 100%; }
.dm-layout {
  display: flex; height: 100%; min-height: 0;
  border-top: 1px solid var(--border);
}
#dm-sidebar {
  width: 300px; min-width: 240px; flex-shrink: 0;
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg2) 70%, transparent);
}
.dm-side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.dm-side-title { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: 0.3px; }
#dm-convos { flex: 1; overflow-y: auto; padding: 6px; }
.dm-convo {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  transition: background 0.18s var(--mz-ease), transform 0.18s var(--mz-ease);
}
.dm-convo:hover { background: var(--bg3); transform: translateX(2px); }
.dm-convo.active { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.dm-ava {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 22%, var(--bg4));
  color: var(--text); font-weight: 800; font-size: 16px;
}
.dm-convo-info { flex: 1; min-width: 0; }
.dm-convo-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-convo-prev { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.dm-unread {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.dm-hint { padding: 18px 14px; color: var(--dim); font-size: 13px; line-height: 1.5; text-align: center; }

#dm-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; position: relative; }
#dm-thread-empty {
  margin: auto; color: var(--dim); font-size: 14px; line-height: 1.7; text-align: center; padding: 20px;
}
#dm-thread-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#dm-peer-name { font-size: 15px; font-weight: 800; color: var(--text); }
.dm-back {
  display: none; width: 34px; height: 34px; border-radius: 10px; border: none;
  background: var(--bg3); color: var(--text); font-size: 20px; cursor: pointer; line-height: 1;
}
#dm-thread-body {
  flex: 1; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
}
.dm-msg {
  max-width: min(78%, 460px);
  align-self: flex-start;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 16px 16px 16px 5px;
  padding: 9px 12px 6px;
  animation: mzItemIn 0.3s var(--mz-ease) backwards;
}
.dm-msg.mine {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg3));
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 16px 16px 5px 16px;
}
.dm-text { font-size: 14px; color: var(--text); line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.dm-time { font-size: 10px; color: var(--dim); text-align: right; margin-top: 3px; }
.dm-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; margin: 2px 0 6px; border-radius: 12px; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid var(--border);
  transition: border-color 0.2s, transform 0.2s var(--mz-spring);
  min-width: 220px;
}
.dm-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.dm-card-cover {
  width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg4); color: var(--dim); font-size: 18px;
}
.dm-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.dm-card-meta { flex: 1; min-width: 0; }
.dm-card-t { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-card-a { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.dm-card-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
  background: var(--accent); color: var(--on-accent); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s var(--mz-spring);
}
.dm-card-btn:hover { transform: scale(1.1); }
.dm-card-btn:active { transform: scale(0.9); }
#dm-thread-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border); flex-shrink: 0;
}
#dm-input {
  flex: 1; min-width: 0; height: 42px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg3); color: var(--text); font-size: 14px; outline: none;
  transition: border-color 0.2s;
}
#dm-input:focus { border-color: var(--accent); }
.dm-attach, .dm-send {
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  transition: transform 0.2s var(--mz-spring), background 0.2s;
}
.dm-attach { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); }
.dm-attach:hover { color: var(--accent); border-color: var(--accent); }
.dm-send { background: var(--accent); color: var(--on-accent); }
.dm-send:hover { transform: scale(1.08); }
.dm-send:active, .dm-attach:active { transform: scale(0.9); }
.dm-nav-badge {
  position: absolute; top: 4px; right: 8px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--accent); color: var(--on-accent);
  font-size: 9.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* Mobile: single pane, slide between list and thread */
@media (max-width: 720px) {
  #dm-sidebar { width: 100%; min-width: 0; border-right: none; }
  #dm-pane {
    position: absolute; inset: 0; z-index: 3; background: var(--bg);
    transform: translateX(100%); transition: transform 0.3s var(--mz-ease);
  }
  #dm-pane.open { transform: none; }
  .dm-back { display: flex; align-items: center; justify-content: center; }
  #dm-thread-body { padding-bottom: 90px; }
  #dm-thread-foot { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* DM: TG-style search + result sections + date separators */
.dm-search {
  margin: 10px 12px 4px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 38px; flex-shrink: 0;
  border-radius: 999px; background: var(--bg3); border: 1px solid var(--border);
  color: var(--dim);
  transition: border-color 0.25s var(--mz-ease), box-shadow 0.25s var(--mz-ease), color 0.25s;
}
.dm-search:focus-within {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.dm-search input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: none; outline: none;
  color: var(--text); font-size: 13.5px;
}
#dm-search-clear {
  display: none; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: none; background: none; color: var(--dim); cursor: pointer; font-size: 12px;
  align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.15s var(--mz-spring);
}
.dm-search.has #dm-search-clear { display: flex; }
#dm-search-clear:hover { background: var(--bg4); color: var(--text); transform: scale(1.1); }
.dm-sec {
  padding: 14px 14px 6px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim);
}
.dm-hl { color: var(--accent); font-weight: 800; }
.dm-convo-top { display: flex; align-items: baseline; gap: 8px; }
.dm-convo-top .dm-convo-name { flex: 1; min-width: 0; }
.dm-convo-time { font-size: 10.5px; color: var(--dim); flex-shrink: 0; }
#dm-convos > * { animation: mzItemIn 0.32s var(--mz-ease) backwards; }
#dm-convos > :nth-child(1) { animation-delay: 0.02s; }
#dm-convos > :nth-child(2) { animation-delay: 0.05s; }
#dm-convos > :nth-child(3) { animation-delay: 0.08s; }
#dm-convos > :nth-child(4) { animation-delay: 0.11s; }
#dm-convos > :nth-child(5) { animation-delay: 0.14s; }
#dm-convos > :nth-child(6) { animation-delay: 0.17s; }
.dm-date {
  align-self: center; margin: 8px 0 2px;
  font-size: 11px; font-weight: 700; color: var(--dim);
  background: var(--bg3); border: 1px solid var(--border);
  padding: 3px 12px; border-radius: 999px;
  animation: mzItemIn 0.3s var(--mz-ease) backwards;
}
.dm-msg.dm-flash {
  animation: dmFlash 1.5s var(--mz-ease);
}
@keyframes dmFlash {
  0%, 35% {
    box-shadow: 0 0 0 2px var(--accent);
    background: color-mix(in srgb, var(--accent) 24%, var(--bg3));
  }
  100% { box-shadow: none; }
}

/* ════════════════════════════════════════════════════════════════════
   COVER COLORING + GLASSY SECTION BANNERS  (23-cover-color.js sets vars)
   ──────────────────────────────────────────────────────────────────── */
:root {
  --cover-rgb: 40,40,48;
  --cover-accent-rgb: 120,120,140;
  --cover-tint: rgba(40,40,48,0.5);
  --cover-grad: linear-gradient(135deg, rgba(90,90,120,0.7), rgba(40,40,60,0.6));
}

/* When cover coloring is on, tint the selected UI parts under the current cover. */
html[data-cover-scope~="bg"] body {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(var(--cover-accent-rgb),0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(var(--cover-rgb),0.28) 0%, transparent 55%),
    var(--bg);
  transition: background 0.8s ease;
}
html[data-cover-scope~="ui"] #sidebar,
html[data-cover-scope~="ui"] #player-bar {
  background:
    linear-gradient(rgba(var(--cover-rgb),0.35), rgba(var(--cover-rgb),0.35)),
    var(--bg2, var(--bg));
}
html[data-cover-scope~="bg"] #content { background: transparent; }
html[data-cover-scope~="accent"] #progress-fill,
html[data-cover-scope~="accent"] .ym-progress-fill { background: rgb(var(--cover-accent-rgb)) !important; }

/* Section banners (Моя волна / караоке / поиск / home hero) — glassy + cover-tinted
   instead of a flat black block. Applies only when banner scope is active. */
html[data-cover-scope~="banners"] .karaoke-hero,
html[data-cover-scope~="banners"] .ym-home-wave,
html[data-cover-scope~="banners"] .ym-wave-banner,
html[data-cover-scope~="banners"] .ym-home-hero,
html[data-cover-scope~="banners"] .wave-ym-left,
html[data-cover-scope~="banners"] .view-header {
  background: var(--cover-grad) !important;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
html[data-cover-scope~="banners"] .view-header {
  border-radius: 16px; margin: 12px 16px 18px; padding: 18px 20px;
}
html[data-cover-scope~="banners"] .karaoke-hero { border-radius: 18px; padding: 22px; }

/* Liquid-glass style: the banners must be dark frosted glass, never a
   solid black box (user report). */
[data-style="liquid"] .karaoke-hero,
[data-style="liquid"] .ym-home-wave,
[data-style="liquid"] .ym-home-wave-desktop,
[data-style="liquid"] .ym-wave-banner,
[data-style="liquid"] .ym-home-hero,
[data-style="liquid"] .view-header,
[data-style="liquid"] .wave-ym-left,
[data-style="liquid"] .rc-hero {
  background: rgba(0,0,0,0.48) !important;
  background-image: none !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--glass-r, 22px);
  box-shadow: none !important;
}
/* Hide the animated canvas background so the banner stays frosted glass
   instead of painting an opaque dark layer on top of the CSS tint. */
[data-style="liquid"] .ym-home-wave-canvas,
[data-style="liquid"] .rc-hero-canvas {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   GLOBAL SMOOTH MOTION LAYER  (added 2026-07-07)
   Subtle, consistent easing across interactive UI. Honors reduced-motion.
   ──────────────────────────────────────────────────────────────────── */
:root { --mz-ease: cubic-bezier(.22,.61,.36,1); --mz-spring: cubic-bezier(.34,1.56,.64,1); }

/* Cover-color / theme changes glide instead of snapping. */
html[data-cover] body, html[data-cover] #sidebar, html[data-cover] #player-bar,
html[data-cover] #content, .view-header, .karaoke-hero, .ym-home-wave,
.ym-wave-banner, .ym-home-hero, .wave-ym-left {
  transition: background .55s var(--mz-ease), color .35s var(--mz-ease),
              border-color .45s var(--mz-ease), box-shadow .45s var(--mz-ease);
}

/* Buttons / interactive controls: gentle hover + press feedback. */
button, .px-btn, .mini-btn, .card, .coll-card, .track-item, .queue-item,
.ym-quick-card, .album-card, .artist-card, .theme-tile, .settings-tab,
.nav-item, .side-link, .chip, .gui-color-row button {
  transition: transform .16s var(--mz-ease), background .2s var(--mz-ease),
              color .2s var(--mz-ease), border-color .2s var(--mz-ease),
              box-shadow .2s var(--mz-ease), opacity .2s var(--mz-ease), filter .18s var(--mz-ease);
}
button:active, .px-btn:active, .mini-btn:active, .nav-item:active,
.track-item:active, .coll-card:active { transform: scale(.96); }

/* Track/list rows: soft lift on hover (only where a background hover exists). */
.track-item:hover, .queue-item:hover { transform: translateY(-1px); }

/* View switching fades in. */
.view, #content > section, [data-view-panel] { animation: mzViewIn .32s var(--mz-ease); }
@keyframes mzViewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Cards stagger-in when a grid renders. */
.card, .coll-card, .ym-quick-card { animation: mzCardIn .34s var(--mz-ease) both; }
@keyframes mzCardIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Now-playing cover swaps with a soft cross-fade. */
#player-cover, #exp-cover-img { transition: opacity .3s var(--mz-ease), filter .3s var(--mz-ease); }

/* Modals / panels ease open. */
.modal-box, .px-modal-inner, #settings-panel { transition: transform .3s var(--mz-spring), opacity .25s var(--mz-ease); }

/* Progress + volume fills track smoothly. */
#progress-fill, .ym-progress-fill, #volume-fill { transition: width .12s linear, background .4s var(--mz-ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Wave controls: keep the prev/next icons centered & unclipped (right btn fix). */
.wave-ym-controls { justify-content: center; flex-wrap: nowrap; }
.wave-ym-ctrl-btn { flex: none; overflow: visible; padding: 0; }
.wave-ym-ctrl-btn svg, .wave-ym-play svg { display: block; margin: auto; }

/* Home "Моя волна" hero must not touch the sidebar — give it side gaps. */
[data-uimode="recode"] .rc-hero, .rc-hero {
  width: auto;
  margin-left: 20px;
  margin-right: 20px;
}
@media (max-width: 700px) {
  [data-uimode="recode"] .rc-hero, .rc-hero { margin-left: 12px; margin-right: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   ALL STYLES → CLEAN RECODE (2026-07-07)
   In recode uimode, neutralize every data-style's loud overrides (blur walls,
   white borders, bright gradients, neon glow) so liquid/aurora/brutal/neon/soft/
   minimal/spotify all look like tidy recode. Styles may still tint the accent.
   Appended last on purpose: equal specificity to [data-style=…] rules but later
   in source, so these win. Only affects recode — legacy styles are untouched.
   ──────────────────────────────────────────────────────────────────── */
[data-uimode="recode"] body {
  background:
    radial-gradient(1100px 560px at 12% -12%, rgba(var(--accent-rgb, 73,132,162), 0.10), transparent 60%),
    var(--bg) !important;
}
[data-uimode="recode"] #content { background: transparent; }

/* Main content surfaces = one consistent recode glass. */
/* Card-like surfaces — consistent glass tiles. */
[data-uimode="recode"] .card,
[data-uimode="recode"] .coll-card,
[data-uimode="recode"] .ym-quick-card,
[data-uimode="recode"] .album-card,
[data-uimode="recode"] .artist-card,
[data-uimode="recode"] .ym-home-card,
[data-uimode="recode"] .explore-card {
  background: rgba(255,255,255,0.04) !important;
  background-image: none !important;         /* kill white-shine / bright gradients */
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* Quick cards keep a hint of their category colour so the row isn't one flat strip. */
[data-uimode="recode"] .ym-quick-card {
  background: linear-gradient(160deg, color-mix(in srgb, var(--qc, var(--accent)) 10%, rgba(255,255,255,0.035)), rgba(255,255,255,0.02)) !important;
  border-color: color-mix(in srgb, var(--qc, var(--accent)) 28%, rgba(255,255,255,0.08)) !important;
}
/* Row-like surfaces (tracks, queue) — smaller, less rounded, denser. */
[data-uimode="recode"] .track-item,
[data-uimode="recode"] .queue-item,
[data-uimode="recode"] .wave-st-item {
  background: rgba(255,255,255,0.025) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
[data-uimode="recode"] .card:hover,
[data-uimode="recode"] .coll-card:hover,
[data-uimode="recode"] .ym-quick-card:hover,
[data-uimode="recode"] .album-card:hover,
[data-uimode="recode"] .artist-card:hover,
[data-uimode="recode"] .ym-home-card:hover,
[data-uimode="recode"] .explore-card:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  transform: translateY(-3px) !important;    /* uniform lift, not the loud scale */
  box-shadow: 0 14px 34px -14px rgba(0,0,0,0.55) !important;
}
[data-uimode="recode"] .ym-quick-card:hover {
  background: linear-gradient(160deg, color-mix(in srgb, var(--qc, var(--accent)) 14%, rgba(255,255,255,0.05)), rgba(255,255,255,0.03)) !important;
}
[data-uimode="recode"] .track-item:hover,
[data-uimode="recode"] .queue-item:hover,
[data-uimode="recode"] .wave-st-item:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
  transform: translateX(2px) !important;
}

/* App chrome. */
[data-uimode="recode"] #sidebar,
[data-uimode="recode"] #player-bar,
[data-uimode="recode"] #mobile-nav {
  background: rgba(10,10,16,0.72) !important;
  background-image: none !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}

/* Section banners — dark frosted glass in recode too. */
[data-uimode="recode"] .view-header,
[data-uimode="recode"] .karaoke-hero,
[data-uimode="recode"] .ym-home-wave,
[data-uimode="recode"] .ym-home-wave-desktop,
[data-uimode="recode"] .ym-wave-banner,
[data-uimode="recode"] .wave-ym-left {
  background: rgba(0,0,0,0.42) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
[data-uimode="recode"] .rc-hero {
  background: rgba(0,0,0,0.42) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
/* Hide the animated canvas so recode banners use the dark glass tint. */
[data-uimode="recode"] .rc-hero-canvas,
[data-uimode="recode"] .ym-home-wave-canvas {
  display: none !important;
}

/* Buttons / inputs / suggest — neutral glass, no neon or thick white borders. */
[data-uimode="recode"] .px-btn,
[data-uimode="recode"] .btn-play-all,
[data-uimode="recode"] .px-input,
[data-uimode="recode"] .search-suggest,
[data-uimode="recode"] .wave-src-btn,
[data-uimode="recode"] .settings-tab,
[data-uimode="recode"] textarea {
  background: rgba(255,255,255,0.05) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
[data-uimode="recode"] .search-suggest { border-radius: 14px !important; overflow: hidden; }
/* Accent-filled primary buttons keep the accent (just no glow). */
[data-uimode="recode"] .btn-play-all,
[data-uimode="recode"] .accent-btn,
[data-uimode="recode"] .rc-hero-play {
  background: var(--accent) !important; color: var(--on-accent) !important;
  border-color: transparent !important;
}

/* Kill garish neon text-glow / heavy shadows on headings. */
[data-uimode="recode"] .view-header h1,
[data-uimode="recode"] .view-header h2,
[data-uimode="recode"] .px-section-title,
[data-uimode="recode"] .coll-card-title,
[data-uimode="recode"] .card-title {
  text-shadow: none !important;
}

/* Fix "классик сломаный": a Recode hero left in the DOM after switching to a
   non-recode interface renders unstyled. Hide it — legacy home renders normally. */
:root:not([data-uimode="recode"]) .rc-hero { display: none !important; }

/* LIQUID banners are ALWAYS dark glass — must win even under recode/cover. */
[data-style="liquid"] .karaoke-hero,
[data-style="liquid"] .ym-home-wave,
[data-style="liquid"] .ym-home-wave-desktop,
[data-style="liquid"] .ym-wave-banner,
[data-style="liquid"] .ym-home-hero,
[data-style="liquid"] .view-header,
[data-style="liquid"] .wave-ym-left,
[data-style="liquid"] .rc-hero {
  background: rgba(0,0,0,0.48) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ─── Recode cards & home polish (b4-css-cards) ─── */
[data-uimode="recode"] .view-header { margin: 12px 20px 20px; padding: 18px 22px; }
[data-uimode="recode"] .home-section { margin-bottom: 28px; padding-top: 8px; }
[data-uimode="recode"] .ym-quick-row { margin-top: 6px; margin-bottom: 18px; }
[data-uimode="recode"] .home-section-title,
[data-uimode="recode"] .ym-home-section-title {
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--text2); margin-bottom: 18px;
}
[data-uimode="recode"] .card-title,
[data-uimode="recode"] .home-card-title,
[data-uimode="recode"] .coll-card-title { font-weight: 700; letter-spacing: -0.2px; color: var(--text) !important; }
[data-uimode="recode"] .card-sub,
[data-uimode="recode"] .home-card-sub,
[data-uimode="recode"] .coll-card-sub { color: var(--text2) !important; }
[data-uimode="recode"] .ym-quick-chip {
  background: color-mix(in srgb, var(--qc, var(--accent)) 18%, rgba(255,255,255,0.05)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc, var(--accent)) 35%, rgba(255,255,255,0.10)) !important;
}
[data-uimode="recode"] .ym-quick-t { color: var(--text) !important; }
[data-uimode="recode"] .ym-quick-d { color: var(--text2) !important; }

/* ═══ MUZLO FIRM STYLE — buttons, banners, cards ═══ */

/* Buttons */
.px-btn, .mini-btn, .karaoke-btn, .search-src-btn, .auth-tab {
  border-radius: 14px !important;
  font-weight: 600 !important;
  transition: all .18s cubic-bezier(.2,.7,.2,1) !important;
}
.px-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: var(--on-accent) !important;
  border: none !important;
  padding: 12px 24px !important;
  box-shadow: none !important;
}
.px-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}
.px-btn:active { transform: translateY(0) scale(.97) !important; }

/* Cards */
.coll-card, .ym-result, .track-item, .home-recent-card {
  border-radius: 16px !important;
  transition: all .2s cubic-bezier(.2,.7,.2,1) !important;
}
.coll-card:hover, .ym-result:hover, .track-item:hover, .home-recent-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.2) !important;
}

/* Banner cards */
.ym-wave-banner, .mz-carousel-slide {
  border-radius: 20px !important;
  overflow: hidden;
}

/* Section headers */
.home-section-title, .ym-home-section-title {
  font-size: 14px !important; font-weight: 800 !important;
  letter-spacing: 1px !important; text-transform: uppercase !important;
  color: var(--text2) !important; margin-bottom: 16px !important;
}

/* Scrollbars */
::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
::-webkit-scrollbar-thumb { background: var(--bg5) !important; border-radius: 4px !important; }
::-webkit-scrollbar-thumb:hover { background: var(--dim2) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 1 — САЙДБАР по макету Claude Design (секция 2A)
   244px · #070B0F · строки 42px/r10 · активная с полоской 3px слева
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --dz-rail:  #070B0F;
  --dz-line:  rgba(255, 255, 255, .055);
  --dz-tx:    #E8F1F5;
  --dz-tx2:   rgba(232, 241, 245, .6);
  --dz-cy2:   #7FE3F5;
  --dz-ui:    'Onest', system-ui, -apple-system, sans-serif;
  --dz-dis:   'Unbounded', 'Onest', sans-serif;
  --sidebar:  244px;
}

#sidebar {
  width: 244px !important;
  min-width: 244px !important;
  max-width: 244px !important;
  background: var(--dz-rail) !important;
  border-right: 1px solid var(--dz-line) !important;
  border-radius: 0 !important;
  padding: 22px 14px !important;
  margin: 0 !important;
  box-shadow: none !important;
  gap: 26px;
  font-family: var(--dz-ui);
}

/* логотип */
#sidebar-logo {
  display: flex; align-items: center; gap: 11px;
  padding: 0 8px !important;
  margin: 0 !important;
}
#cat-wrap {
  width: 26px !important; height: 26px !important;
  min-width: 26px; flex: none;
  background: none !important;
  overflow: visible !important;
}
#cat-wrap canvas { width: 100% !important; height: 100% !important; display: block; }
#sidebar-logo-text {
  font-family: var(--dz-dis) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: .14em !important;
  color: var(--dz-tx) !important;
  text-shadow: none !important;
}

/* навигация */
#px-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-btn {
  position: relative;
  width: 100%;
  height: 42px !important;
  padding: 0 14px !important;
  gap: 12px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--dz-tx2) !important;
  font-family: var(--dz-ui);
  border: none;
  justify-content: flex-start;
  transition: background .16s ease, color .16s ease !important;
}
.nav-btn::before {
  content: '';
  position: absolute; left: 0; top: 11px; bottom: 11px;
  width: 3px; border-radius: 2px;
  background: transparent;
}
.nav-btn::after { display: none !important; }
.nav-btn svg { width: 18px !important; height: 18px !important; flex: none; }
.nav-label { font-size: 15px !important; font-weight: 500 !important; white-space: nowrap; }

.nav-btn:hover { background: rgba(255, 255, 255, .045) !important; color: var(--dz-tx) !important; }
.nav-btn:active { transform: none !important; }
.nav-btn.active {
  background: rgba(111, 216, 236, .10) !important;
  color: #EAF7FB !important;
}
.nav-btn.active .nav-label { font-weight: 600 !important; }
.nav-btn.active::before { background: var(--dz-cy2); }

/* избранное */
#sidebar-liked {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  box-shadow: none !important;
  gap: 11px;
}
#sidebar-liked:hover { background: rgba(255, 255, 255, .07) !important; }
.sidebar-liked-icon {
  width: 22px !important; height: 22px !important;
  flex: none;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #F0839C, #B23F63) !important;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none !important;
}
.sidebar-liked-icon svg { width: 13px !important; height: 13px !important; color: #fff; }
.sidebar-liked-text {
  flex: 1;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--dz-tx) !important;
}
.sidebar-liked-count {
  font-size: 13px !important;
  color: #7E909C !important;
  background: none !important;
  padding: 0 !important;
}

/* плейлисты */
#sidebar-playlists { display: flex; flex-direction: column; gap: 2px; }
#sidebar-pl-header {
  font-size: 11px !important;
  letter-spacing: .2em !important;
  color: #4F6270 !important;
  font-weight: 600 !important;
  padding: 0 14px 8px !important;
}
.sidebar-pl-item {
  padding: 8px 14px !important;
  font-size: 14.5px !important;
  color: rgba(232, 241, 245, .55) !important;
  border-radius: 9px !important;
  background: transparent !important;
}
.sidebar-pl-item:hover { background: rgba(255, 255, 255, .05) !important; color: var(--dz-tx) !important; }

/* нижний блок профиля не должен ломать колонку */
#sidebar-footer, #sidebar-bottom { margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 2 — ГЛАВНАЯ (3A). Ключевые кадры скопированы из макета как есть.
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes glowPulse { 0%,100% { opacity:.5; } 50% { opacity:.85; } }
@keyframes waveDrift {
  0%   { transform: translate3d(-6%,42%,0) rotate(-6deg) scaleX(1);    border-radius:46% 54% 58% 42%/60% 62% 38% 40%; opacity:.55; }
  25%  { transform: translate3d(-1%,8%,0)  rotate(3deg)  scaleX(1.1);  border-radius:58% 42% 45% 55%/40% 45% 55% 60%; opacity:.85; }
  50%  { transform: translate3d(6%,-38%,0) rotate(6deg)  scaleX(1.18); border-radius:40% 60% 55% 45%/55% 40% 60% 45%; opacity:1; }
  75%  { transform: translate3d(2%,6%,0)   rotate(-2deg) scaleX(1.08); border-radius:55% 45% 42% 58%/45% 58% 42% 55%; opacity:.85; }
  100% { transform: translate3d(-6%,42%,0) rotate(-6deg) scaleX(1);    border-radius:46% 54% 58% 42%/60% 62% 38% 40%; opacity:.55; }
}
@keyframes waveDrift2 {
  0%   { transform: translate3d(5%,38%,0)  rotate(5deg)  scaleX(1.12); border-radius:55% 45% 42% 58%/45% 55% 45% 55%; opacity:.6; }
  33%  { transform: translate3d(-2%,2%,0)  rotate(-4deg) scaleX(1);    border-radius:42% 58% 55% 45%/58% 42% 55% 45%; opacity:.9; }
  66%  { transform: translate3d(-5%,-32%,0) rotate(4deg) scaleX(1.14); border-radius:58% 42% 45% 55%/42% 58% 40% 60%; opacity:1; }
  100% { transform: translate3d(5%,38%,0)  rotate(5deg)  scaleX(1.12); border-radius:55% 45% 42% 58%/45% 55% 45% 55%; opacity:.6; }
}
@keyframes waveHue { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes heroDrift { from { transform: translateX(3%); } to { transform: translateX(-3%); } }
@keyframes lightGlow { 0%,100% { opacity:.25; transform:scale(1); } 50% { opacity:.6; transform:scale(1.15); } }
@keyframes softFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes auroraFlow { from { background-position: 0% 50%; } to { background-position: -220% 50%; } }

/* Экран главной из макета занимает всю область контента. */
#main-grid:has(#mz-home) {
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
  background: #04060A;
}
#mz-home { font-family: 'Onest', system-ui, sans-serif; color: #E8F1F5; }
#mz-home * { box-sizing: border-box; }
#mz-home button { font-family: 'Onest', sans-serif; }

/* Прежние блоки главной не дублируются. */
#main-grid:has(#mz-home) .rc-hero,
#main-grid:has(#mz-home) .ym-home-wave-desktop,
#main-grid:has(#mz-home) .ym-quick-row,
#main-grid:has(#mz-home) .rc-quick-section,
#main-grid:has(#mz-home) .home-search { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 3 — ОКНО ЦЕЛИКОМ (2A): плеер, табы, шапка раздела, строки треков.
   Значения скопированы из макета Claude Design дословно.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ПЛЕЕР (высота 76, фон #080C11) ── */
#player-bar {
  height: 76px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  background: #080C11 !important;
  display: flex; align-items: center;
  padding: 0 26px !important;
  gap: 22px;
  box-shadow: none !important;
}
#player-cover-wrap {
  width: 46px !important; height: 46px !important;
  border-radius: 9px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: none !important;
}
#player-cover-wrap:hover { transform: none !important; }
#player-cover, #player-cover-ph { border-radius: 9px !important; }
.px-track-title { font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: .02em !important; }
.px-track-artist { font-size: 12.5px !important; color: #6E8090 !important; }

.px-ctrl-btn {
  color: #C6D7E0 !important;
  background: none !important; border: none !important; box-shadow: none !important;
}
.px-ctrl-btn:hover { color: #fff !important; }
.px-play-btn {
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 68%, #fff), var(--mz-ui-accent, #4FC4DE)) !important;
  color: #04141B !important;
  border: none !important;
  box-shadow: none !important;
}
#progress-bar, .ym-progress {
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,.10) !important;
}
#progress-fill, .ym-progress-fill {
  border-radius: 2px !important;
  background: linear-gradient(90deg,#2C7E9C,#8FE7F8) !important;
  box-shadow: none !important;
}
.px-time, #cur-time, #dur-time {
  font-size: 11.5px !important;
  color: #5E7180 !important;
  font-variant-numeric: tabular-nums;
}

/* ── ТАБЫ (сегмент-контрол) ── */
.coll-tabs, .admin-tabs, .settings-tabs, #search-source-toggle, .kr-tabs {
  display: flex; align-items: center;
  gap: 6px !important;
  padding: 5px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  width: fit-content;
}
.coll-tab, .admin-tab, .settings-tab, .search-src-btn, .wave-src-btn, .kr-tab {
  display: flex; align-items: center; gap: 8px;
  height: 38px !important;
  padding: 0 15px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer;
  font-family: 'Onest', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(232,241,245,.62) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background .18s ease, color .18s ease !important;
}
.coll-tab:hover, .admin-tab:hover, .settings-tab:hover,
.search-src-btn:hover, .wave-src-btn:hover, .kr-tab:hover {
  background: rgba(255,255,255,.05) !important;
  color: #E8F1F5 !important;
  filter: none !important;
}
.coll-tab.active, .admin-tab.active, .settings-tab.active,
.search-src-btn.active, .wave-src-btn.active, .kr-tab.active {
  font-weight: 600 !important;
  color: #EAF3F7 !important;
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.8) !important;
  border-bottom-color: transparent !important;
}
/* счётчик внутри таба */
.coll-tab .tab-count, .coll-tab .count, .coll-tab span.badge {
  font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255,255,255,.07);
  color: rgba(232,241,245,.5);
}
.coll-tab.active .tab-count, .coll-tab.active .count, .coll-tab.active span.badge {
  background: rgba(6,18,26,.14);
  color: rgba(6,18,26,.72);
}

/* ── ШАПКА РАЗДЕЛА ── */
.view-header h1, .view-header h2, .coll-title, .album-header-title, .ap-name {
  font-family: 'Unbounded', sans-serif !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  text-shadow: none !important;
}
.view-header .meta, .coll-meta, .view-sub {
  font-size: 14px !important;
  color: #6E8090 !important;
}
.btn-play-all {
  display: flex; align-items: center; gap: 9px;
  height: 40px !important;
  padding: 0 19px 0 15px !important;
  border: none !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 68%, #fff) 0%, var(--mz-ui-accent, #4FC4DE) 100%) !important;
  color: #04141B !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.btn-shuffle-all, .btn-download-all {
  display: flex; align-items: center; gap: 9px;
  height: 40px !important;
  padding: 0 17px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.04) !important;
  color: #C6D7E0 !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.btn-shuffle-all:hover, .btn-download-all:hover { background: rgba(255,255,255,.09) !important; }

/* ── СТРОКИ ТРЕКОВ ── */
.track-item, .ym-result, .queue-item {
  display: flex; align-items: center;
  gap: 16px !important;
  height: 56px !important;
  padding: 0 14px !important;
  border-radius: 11px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: background .16s ease !important;
}
.track-item:hover, .ym-result:hover, .queue-item:hover {
  background: rgba(255,255,255,.055) !important;
  transform: none !important;
}
.track-item.playing, .queue-item.playing { background: rgba(255,255,255,.045) !important; }
.track-index, .ym-index, .qi-index {
  width: 20px; font-size: 13px; color: #5E7180; text-align: right;
}
.ym-cover, .qi-cover, .qi-cover img, .track-cover, .track-item img {
  width: 40px !important; height: 40px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.05);
  object-fit: cover;
}
.track-title, .ym-title, .qi-title { font-size: 15px !important; font-weight: 500 !important; color: #E8F1F5 !important; }
.track-artist, .ym-artist, .qi-artist { font-size: 13px !important; color: #6E8090 !important; }
.track-time, .ym-dur, .qi-time { font-size: 13px !important; color: #5E7180 !important; font-variant-numeric: tabular-nums; }

/* ── Общий фон приложения ── */
body, #content { background: #04060A; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 7 — САЙДБАР ИЗ МАКЕТА (2A). Значения перенесены дословно.
   ═══════════════════════════════════════════════════════════════════════ */
#sidebar { gap: 26px; }
#sidebar-logo { display: flex; align-items: center; gap: 11px; padding: 0 8px !important; margin: 0 !important; cursor: pointer; }
#px-nav { display: flex; flex-direction: column; gap: 3px; }
#sidebar-liked { display: flex; align-items: center; justify-content: space-between; gap: 11px; }
.sidebar-liked-main { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 500; color: #E8F1F5; }
.sidebar-liked-icon {
  width: 22px !important; height: 22px !important; flex: none;
  border-radius: 7px !important;
  background: linear-gradient(180deg,#F0839C,#B23F63) !important;
  display: flex; align-items: center; justify-content: center;
  color: #2A0E12 !important;
  box-shadow: none !important;
}
.sidebar-liked-text { font-size: 15px !important; font-weight: 500 !important; color: #E8F1F5 !important; }
.sidebar-liked-count { font-size: 13px !important; color: #7E909C !important; background: none !important; padding: 0 !important; }
#sidebar-playlists { display: flex; flex-direction: column; gap: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 8 — МЕНЮ НАСТРОЕК по макету (3B).
   Геометрию панели и вертикальную структуру карточек НЕ меняем — только
   цвета, радиусы, шрифты и элементы управления.
   ═══════════════════════════════════════════════════════════════════════ */
#settings-panel {
  background: #04070B !important;
  border-left: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: -8px 0 40px rgba(0,0,0,.55) !important;
  font-family: 'Onest', system-ui, sans-serif;
}
#settings-header {
  background: #04070B !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
  padding: 20px 20px 16px !important;
}
#settings-header .px-section-title {
  font-family: 'Unbounded', sans-serif !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  letter-spacing: -.01em !important;
  color: #E8F1F5 !important;
  text-transform: none !important;
}
#settings-header .px-icon-btn {
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(232,241,245,.5);
  background: none;
}
#settings-header .px-icon-btn:hover { background: rgba(255,255,255,.06); color: #E8F1F5; }

/* табы настроек — сегмент-контрол из макета */
#settings-tabs {
  gap: 6px !important;
  padding: 5px !important;
  margin: 10px 14px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  width: fit-content;
  position: static !important;
}
.settings-tab {
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 9px !important;
  border: none !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(232,241,245,.62) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.settings-tab:hover { background: rgba(255,255,255,.05) !important; color: #E8F1F5 !important; filter: none !important; }
.settings-tab.active {
  font-weight: 600 !important;
  color: #EAF3F7 !important;
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.8) !important;
}

/* заголовки групп: // ИНТЕРФЕЙС // */
.settings-group-title, .set-group-title, .settings-section-title, .settings-section > .px-section-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: .05em !important;
  color: #6FD8EC !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

/* плитки тем и стилей — цвета и радиусы, вертикальная структура сохранена */
.style-tile, .theme-tile {
  border-radius: 14px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
.style-tile:hover, .theme-tile:hover {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.16) !important;
  transform: none !important;
}
.style-tile.active, .theme-tile.active {
  background: linear-gradient(160deg,rgba(79,196,222,.14),rgba(79,196,222,.03)) !important;
  border: 1.5px solid rgba(111,216,236,.5) !important;
  box-shadow: none !important;
}
.style-tile-name { font-family: 'Unbounded', sans-serif !important; font-weight: 500 !important; color: #E8F1F5 !important; }
.style-tile-desc { color: rgba(232,241,245,.5) !important; }
.theme-name { color: rgba(232,241,245,.6) !important; }

/* строки-переключатели */
.toggle-row { height: 44px; font-size: 15px !important; color: #E8F1F5 !important; }
.px-toggle-track {
  width: 46px !important; height: 26px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.12) !important;
}
.px-toggle-track::after {
  left: 3px !important; top: 3px !important;
  width: 20px !important; height: 20px !important;
  background: #fff !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.4) !important;
}
.px-toggle input:checked + .px-toggle-track { background: #4FC4DE !important; }
.px-toggle input:checked + .px-toggle-track::after { left: 23px !important; }

/* поля и кнопки внутри настроек */
#settings-panel .px-input {
  border-radius: 11px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #E8F1F5 !important;
}
#settings-panel .px-btn, #settings-panel .accent-btn {
  border-radius: 24px !important;
  border: none !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mz-ui-accent, var(--accent)) 86%, #fff) 0%,
    var(--mz-ui-accent, var(--accent)) 100%) !important;
  color: var(--mz-ui-on, #06121A) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* ── Коллекция (из этапа 9) ── */
/* ── Коллекция ── */
.coll-tabs {
  display: flex; align-items: center; gap: 6px !important;
  padding: 5px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  width: fit-content;
}
.coll-tab {
  display: flex; align-items: center; gap: 8px;
  height: 38px !important;
  padding: 0 15px !important;
  border-radius: 10px !important;
  border: none !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(232,241,245,.62) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.coll-tab:hover { background: rgba(255,255,255,.05) !important; color: #E8F1F5 !important; }
.coll-tab.active {
  font-weight: 600 !important;
  color: #EAF3F7 !important;
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.8) !important;
  border-bottom-color: transparent !important;
}
.coll-card {
  border-radius: 14px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
.coll-card:hover {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.16) !important;
  filter: none !important;
  transform: none !important;
}
.coll-card-img { border-radius: 12px !important; }
.coll-card-title { font-size: 14px !important; font-weight: 600 !important; color: #E8F1F5 !important; }
.coll-card-sub { font-size: 12.5px !important; color: rgba(232,241,245,.45) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 10 — ВСЁ ОСТАВШЕЕСЯ: Волна, Настройки, Плеер, MUZLO AI.
   Специфичность поднята через #id — иначе правила [data-uimode="recode"]
   и cover-color перебивают перенос макета.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ВОЛНА (3C) ─────────────────────────────────────────────────────── */
#wave-screen { background: transparent !important; }

#wave-screen .wave-ym-left {
  width: 300px !important;
  flex: none !important;
  background: #070B0F !important;
  background-image: none !important;
  border-right: 1px solid rgba(255,255,255,.055) !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 22px 16px !important;
  gap: 16px !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

#wave-screen .wave-ym-left-title > div {
  display: flex; gap: 6px;
  padding: 5px !important;
  margin: 0 0 4px !important;
  background: rgba(255,255,255,.035) !important;
  border: none !important;
  border-radius: 12px !important;
  width: fit-content;
}
#wave-screen .wave-src-btn {
  height: 32px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  border: none !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(232,241,245,.6) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}
#wave-screen .wave-src-btn:hover { background: rgba(255,255,255,.05) !important; color: #E8F1F5 !important; }
#wave-screen .wave-src-btn.active {
  font-weight: 600 !important;
  color: #EAF3F7 !important;
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  border-color: transparent !important;
}

#wave-screen .wave-ym-stations { display: flex; flex-direction: column; gap: 2px; padding: 0 !important; }
#wave-screen .wave-st-item {
  position: relative;
  height: 44px !important;
  min-height: 44px;
  display: flex; align-items: center;
  padding: 0 16px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  border: none !important;
  outline: none !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: rgba(232,241,245,.6) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#wave-screen .wave-st-item::before {
  content: '';
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 2px; background: transparent;
}
#wave-screen .wave-st-item::after { display: none !important; }
#wave-screen .wave-st-item:hover {
  background: rgba(255,255,255,.045) !important;
  color: #E8F1F5 !important;
}
#wave-screen .wave-st-item.active {
  background: rgba(111,216,236,.10) !important;
  color: #EAF7FB !important;
  font-weight: 600 !important;
  border: none !important;
}
#wave-screen .wave-st-item.active::before { background: #7FE3F5 !important; }
#wave-screen .wave-st-name {
  color: inherit !important;
  font-weight: inherit !important;
  text-shadow: none !important;
}

#wave-screen .wave-ym-right {
  background: linear-gradient(160deg,#0A1620 0%,#05090E 100%) !important;
}
#wave-screen .wave-ym-title {
  font-family: 'Unbounded', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(44px, 5.4vw, 74px) !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  background: linear-gradient(180deg,#FFFFFF,#9FD9E8) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
}
#wave-screen .wave-ym-ctrl-btn {
  width: 52px !important; height: 52px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.06) !important;
  border: none !important;
  color: #CFE4EC !important;
  box-shadow: none !important;
}
#wave-screen .wave-ym-ctrl-btn:hover { background: rgba(255,255,255,.12) !important; }
#wave-screen .wave-ym-play {
  width: 88px !important; height: 88px !important;
  border-radius: 50% !important;
  border: none !important;
  background: radial-gradient(circle at 50% 42%,
    color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 55%, #fff) 0%,
    color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 85%, #fff) 40%,
    var(--mz-ui-accent, #4FC4DE) 100%) !important;
  color: #04141B !important;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.6) !important;
}
#wave-screen .wave-ym-play svg { fill: #04141B !important; }
#wave-screen .wave-ym-bar-inner {
  width: 400px; max-width: 82vw;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
  gap: 14px;
}
#wave-screen .wave-ym-bar-cover { width: 40px !important; height: 40px !important; border-radius: 8px !important; }
#wave-screen .wave-ym-bar-title { font-size: 15px !important; font-weight: 600 !important; color: #E8F1F5 !important; }
#wave-screen .wave-ym-bar-artist { font-size: 13px !important; color: rgba(232,241,245,.5) !important; }
#wave-screen .wave-ym-bar-like { color: #7FE3F5 !important; background: none !important; border: none !important; }
#wave-screen .wave-ym-upcoming .wave-up-item {
  border-radius: 11px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}

/* ── НАСТРОЙКИ: все табы (3B, 3B2) ──────────────────────────────────── */
#settings-panel .settings-section { padding: 16px 18px !important; }
#settings-panel .toggle-row {
  height: 44px !important;
  font-size: 15px !important;
  color: #E8F1F5 !important;
  border-bottom: none !important;
}
/* ползунки: дорожка 4px, заливка #4FC4DE, ручка 12px */
#settings-panel input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,.1) !important;
  outline: none;
}
#settings-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #9BE8F8;
  box-shadow: none;
  border: none; cursor: pointer;
}
#settings-panel input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border: none; border-radius: 50%;
  background: #9BE8F8; box-shadow: none; cursor: pointer;
}
#settings-panel .set-val, #settings-panel .slider-val {
  font-family: 'JetBrains Mono', monospace !important;
  color: #7FE3F5 !important;
  font-size: 13px !important;
}
#settings-panel select, #settings-panel .px-select {
  border-radius: 11px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #E8F1F5 !important;
  font-family: 'Onest', sans-serif !important;
}
/* маленькие сегмент-группы внутри настроек */
#settings-panel .seg, #settings-panel .btn-group {
  display: flex; gap: 4px;
  padding: 3px !important;
  background: rgba(255,255,255,.05) !important;
  border-radius: 9px !important;
  width: fit-content;
}
#settings-panel .seg > *, #settings-panel .btn-group > * {
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border: none !important;
  background: transparent !important;
  color: rgba(232,241,245,.62) !important;
}
#settings-panel .seg > .active, #settings-panel .btn-group > .active {
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  color: #EAF3F7 !important;
}

/* ── ПЛЕЕР: очередь и табы (3E, 3F) ─────────────────────────────────── */
#exp-player { background: #04070B !important; }
#exp-player .exp-left, #exp-cover-wrap {
  background: #070B0F !important;
}
#exp-cover-img, #exp-cover-wrap img {
  border-radius: 16px !important;
  box-shadow: 0 24px 50px -24px #000 !important;
}
#exp-player .exp-title, #exp-track-title {
  font-family: 'Unbounded', sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
}
#exp-player .exp-artist, #exp-track-artist {
  font-size: 14px !important;
  color: rgba(232,241,245,.5) !important;
}
#exp-player .exp-tabs, #exp-tabs {
  display: flex; gap: 6px !important;
  padding: 5px !important;
  background: rgba(255,255,255,.035) !important;
  border: none !important;
  border-radius: 12px !important;
  width: fit-content;
}
#exp-player .exp-tab {
  height: 34px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  border: none !important;
  border-bottom: none !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: rgba(232,241,245,.62) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#exp-player .exp-tab:hover { background: rgba(255,255,255,.05) !important; color: #E8F1F5 !important; }
#exp-player .exp-tab.active {
  font-weight: 600 !important;
  color: #EAF3F7 !important;
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  border-bottom-color: transparent !important;
}
#exp-player .exp-queue-item {
  height: 60px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  gap: 16px !important;
  background: transparent !important;
  border: none !important;
}
#exp-player .exp-queue-item:hover { background: rgba(255,255,255,.05) !important; }
#exp-player .exp-queue-item.playing { background: rgba(255,255,255,.06) !important; }
#exp-player .exp-queue-item img, #exp-player .qi-cover {
  width: 44px !important; height: 44px !important;
  border-radius: 9px !important;
}
#exp-player .exp-qi-title { font-size: 15px !important; font-weight: 600 !important; }
#exp-player .exp-qi-artist { font-size: 13px !important; color: rgba(232,241,245,.5) !important; }
#exp-player .exp-qi-time {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  color: rgba(232,241,245,.4) !important;
}
/* стемы */
#exp-player .stems-box, #stems-panel {
  padding: 16px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}
#exp-player .stems-bar, #stems-progress {
  height: 6px !important;
  border-radius: 3px !important;
  background: rgba(255,255,255,.1) !important;
}
#exp-player .stems-bar > *, #stems-progress > * {
  border-radius: 3px !important;
  background: var(--mz-ui-accent, #4FC4DE) !important;
}
#exp-player .stems-status {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: #7FE3F5 !important;
}
/* табы инструментов */
#exp-player .tab-open-big {
  padding: 18px 22px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(111,216,236,.22) !important;
}
#exp-player .tab-inst-row {
  height: 56px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.025) !important;
  gap: 16px !important;
}
#exp-player .tab-inst-row:hover { background: rgba(255,255,255,.05) !important; }

/* ── MUZLO AI (3G) ──────────────────────────────────────────────────── */
#mzai-panel, .mzai-panel {
  background: #04070B !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 16px !important;
  box-shadow: 0 40px 100px -50px #000 !important;
  font-family: 'Onest', system-ui, sans-serif !important;
}
#mzai-panel .mzai-title, .mzai-panel .mzai-title {
  font-family: 'Unbounded', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
}
#mzai-panel .mzai-msg, .mzai-panel .mzai-msg {
  border-radius: 14px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}
#mzai-panel .mzai-msg.me, .mzai-panel .mzai-msg.me {
  background: linear-gradient(160deg,rgba(124,108,231,.18),rgba(124,108,231,.06)) !important;
  border-color: rgba(124,108,231,.28) !important;
}
#mzai-panel input, #mzai-panel textarea,
.mzai-panel input, .mzai-panel textarea {
  border-radius: 13px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(159,217,232,.3) !important;
  color: #E8F1F5 !important;
  font-family: 'Onest', sans-serif !important;
}
#mzai-panel .mzai-send, .mzai-panel .mzai-send {
  border-radius: 12px !important;
  border: none !important;
  background: linear-gradient(180deg,#C6B9FF,#8A79F0) !important;
  color: #150F30 !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 11 — ВЕСЬ ИНТЕРФЕЙС ПО МАКЕТУ, С ПОБЕДОЙ НАД ТЕМАМИ.
   Правила вида [data-style="X"] #sidebar имеют вес (1,1,0) и перебивают
   обычный #sidebar (1,0,0). Поэтому идентификатор продублирован:
   #sidebar#sidebar = (2,0,0) — выигрывает у любой темы.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── САЙДБАР ── */
#sidebar#sidebar {
  width: 244px !important;
  min-width: 244px !important;
  max-width: 244px !important;
  background: #070B0F !important;
  background-image: none !important;
  border-right: 1px solid rgba(255,255,255,.055) !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 22px 14px !important;
  margin: 0 !important;
  box-shadow: none !important;
  gap: 26px;
  font-family: 'Onest', system-ui, sans-serif !important;
  backdrop-filter: none !important;
}
#sidebar #sidebar-logo { display: flex; align-items: center; gap: 11px; padding: 0 8px !important; margin: 0 !important; }
#sidebar #cat-wrap {
  width: 26px !important; height: 26px !important;
  min-width: 26px; flex: none;
  background: none !important; border-radius: 0 !important; overflow: visible !important;
}
#sidebar #cat-wrap canvas { width: 26px !important; height: 26px !important; display: block; }
#sidebar #sidebar-logo-text {
  font-family: 'Unbounded', sans-serif !important;
  font-weight: 700 !important; font-size: 16px !important;
  letter-spacing: .14em !important; color: #E8F1F5 !important;
  text-shadow: none !important;
}
#sidebar #px-nav { display: flex; flex-direction: column; gap: 3px; }
#sidebar .nav-btn {
  position: relative;
  width: 100%; height: 42px !important;
  padding: 0 14px !important; gap: 12px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important; background-image: none !important;
  color: rgba(232,241,245,.6) !important;
  justify-content: flex-start;
  box-shadow: none !important; text-shadow: none !important;
  transform: none !important;
  transition: background .16s ease, color .16s ease !important;
}
#sidebar .nav-btn::before {
  content: ''; position: absolute; left: 0; top: 11px; bottom: 11px;
  width: 3px; border-radius: 2px; background: transparent;
}
#sidebar .nav-btn::after { display: none !important; }
#sidebar .nav-btn svg { width: 18px !important; height: 18px !important; flex: none; }
#sidebar .nav-label { font-size: 15px !important; font-weight: 500 !important; white-space: nowrap; }
#sidebar .nav-btn:hover { background: rgba(255,255,255,.045) !important; color: #E8F1F5 !important; transform: none !important; }
#sidebar .nav-btn.active { background: rgba(111,216,236,.10) !important; color: #EAF7FB !important; }
#sidebar .nav-btn.active .nav-label { font-weight: 600 !important; }
#sidebar .nav-btn.active::before { background: #7FE3F5 !important; }

#sidebar #sidebar-liked {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px !important; padding: 0 14px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: none !important; gap: 11px;
}
#sidebar #sidebar-liked:hover { background: rgba(255,255,255,.07) !important; }
#sidebar .sidebar-liked-main { display: flex; align-items: center; gap: 11px; }
#sidebar .sidebar-liked-icon {
  width: 22px !important; height: 22px !important; flex: none;
  border-radius: 7px !important;
  background: linear-gradient(180deg,#F0839C,#B23F63) !important;
  display: flex; align-items: center; justify-content: center;
  color: #2A0E12 !important; box-shadow: none !important;
}
#sidebar .sidebar-liked-text { font-size: 15px !important; font-weight: 500 !important; color: #E8F1F5 !important; }
#sidebar .sidebar-liked-count { font-size: 13px !important; color: #7E909C !important; background: none !important; padding: 0 !important; }
#sidebar #sidebar-pl-header {
  font-size: 11px !important; letter-spacing: .2em !important;
  color: #4F6270 !important; font-weight: 600 !important;
  padding: 0 14px 8px !important;
}
#sidebar .sidebar-pl-item {
  padding: 8px 14px !important; font-size: 14.5px !important;
  color: rgba(232,241,245,.55) !important;
  border-radius: 9px !important; background: transparent !important;
}
#sidebar .sidebar-pl-item:hover { background: rgba(255,255,255,.05) !important; color: #E8F1F5 !important; }

/* ── ПЛЕЕР ── */
#player-bar#player-bar {
  height: 76px !important;
  background: #080C11 !important; background-image: none !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 26px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#player-bar #player-cover-wrap {
  width: 46px !important; height: 46px !important;
  border-radius: 9px !important; overflow: hidden;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: none !important;
}
#player-bar #player-cover-wrap:hover { transform: none !important; }
#player-bar #player-cover, #player-bar #player-cover-ph { border-radius: 9px !important; }
#player-bar .px-track-title { font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: .02em !important; }
#player-bar .px-track-artist { font-size: 12.5px !important; color: #6E8090 !important; }
#player-bar .px-ctrl-btn { color: #C6D7E0 !important; background: none !important; border: none !important; box-shadow: none !important; }
#player-bar .px-ctrl-btn:hover { color: #fff !important; }
#player-bar .px-play-btn {
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 68%, #fff), var(--mz-ui-accent, #4FC4DE)) !important;
  color: #04141B !important; border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
#player-bar #progress-bar, #player-bar .ym-progress {
  height: 4px !important; border-radius: 2px !important;
  background: rgba(255,255,255,.10) !important;
}
#player-bar #progress-fill, #player-bar .ym-progress-fill {
  border-radius: 2px !important;
  background: var(--mz-ui-accent, #4FC4DE) !important;
  box-shadow: none !important;
}
#player-bar .px-time, #player-bar #cur-time, #player-bar #dur-time {
  font-size: 11.5px !important; color: #5E7180 !important;
  font-variant-numeric: tabular-nums;
}

/* ── РАЗВЁРНУТЫЙ ПЛЕЕР ── */
#exp-player#exp-player { background: #04070B !important; background-image: none !important; }
#exp-player #exp-cover-img, #exp-player .exp-cover img {
  border-radius: 16px !important;
  box-shadow: 0 24px 50px -24px #000 !important;
}
#exp-player .exp-tab {
  height: 34px !important; padding: 0 16px !important;
  border-radius: 8px !important;
  border: none !important; border-bottom: none !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  color: rgba(232,241,245,.62) !important;
  background: transparent !important;
  text-transform: none !important; letter-spacing: 0 !important;
  transform: none !important;
}
#exp-player .exp-tab:hover { background: rgba(255,255,255,.05) !important; color: #E8F1F5 !important; }
#exp-player .exp-tab.active {
  font-weight: 600 !important; color: #EAF3F7 !important;
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  border-bottom-color: transparent !important;
}
#exp-player .exp-queue-item {
  height: 60px !important; padding: 0 14px !important;
  border-radius: 12px !important; gap: 16px !important;
  background: transparent !important; border: none !important;
}
#exp-player .exp-queue-item:hover { background: rgba(255,255,255,.05) !important; }
#exp-player .exp-queue-item img { width: 44px !important; height: 44px !important; border-radius: 9px !important; }

/* ── НАСТРОЙКИ ── */
#settings-panel#settings-panel {
  background: #04070B !important; background-image: none !important;
  border-left: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: -8px 0 40px rgba(0,0,0,.55) !important;
  font-family: 'Onest', system-ui, sans-serif !important;
  backdrop-filter: none !important;
}
#settings-panel #settings-header {
  background: #04070B !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
}
#settings-panel #settings-header .px-section-title {
  font-family: 'Unbounded', sans-serif !important;
  font-weight: 500 !important; font-size: 20px !important;
  letter-spacing: -.01em !important; color: #E8F1F5 !important;
  text-transform: none !important;
}
#settings-panel #settings-tabs {
  gap: 6px !important; padding: 5px !important; margin: 10px 14px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  width: fit-content; position: static !important;
}
#settings-panel .settings-tab {
  height: 38px !important; padding: 0 18px !important;
  border-radius: 9px !important; border: none !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 14px !important; font-weight: 500 !important;
  color: rgba(232,241,245,.62) !important;
  background: transparent !important; box-shadow: none !important;
  filter: none !important; transform: none !important;
}
#settings-panel .settings-tab:hover { background: rgba(255,255,255,.05) !important; color: #E8F1F5 !important; filter: none !important; }
#settings-panel .settings-tab.active {
  font-weight: 600 !important; color: #EAF3F7 !important;
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.8) !important;
}
#settings-panel .px-section-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important; letter-spacing: .05em !important;
  color: #6FD8EC !important; font-weight: 400 !important;
  text-transform: none !important;
}
#settings-panel .style-tile, #settings-panel .theme-tile {
  border-radius: 14px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
#settings-panel .style-tile:hover, #settings-panel .theme-tile:hover {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.16) !important;
  transform: none !important;
}
#settings-panel .style-tile.active, #settings-panel .theme-tile.active {
  background: linear-gradient(160deg,rgba(79,196,222,.14),rgba(79,196,222,.03)) !important;
  border: 1.5px solid rgba(111,216,236,.5) !important;
  box-shadow: none !important;
}
#settings-panel .style-tile-name { font-family: 'Unbounded', sans-serif !important; font-weight: 500 !important; color: #E8F1F5 !important; }
#settings-panel .style-tile-desc { color: rgba(232,241,245,.5) !important; }
#settings-panel .toggle-row { height: 44px !important; font-size: 15px !important; color: #E8F1F5 !important; }
#settings-panel .px-toggle-track {
  width: 46px !important; height: 26px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.12) !important;
}
#settings-panel .px-toggle-track::after {
  left: 3px !important; top: 3px !important;
  width: 20px !important; height: 20px !important;
  background: #fff !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.4) !important;
}
#settings-panel .px-toggle input:checked + .px-toggle-track { background: #4FC4DE !important; }
#settings-panel .px-toggle input:checked + .px-toggle-track::after { left: 23px !important; }

/* ── СПИСКИ И КАРТОЧКИ В КОНТЕНТЕ ── */
#content .track-item, #content .ym-result, #content .queue-item {
  height: 56px !important; padding: 0 14px !important;
  border-radius: 11px !important; gap: 16px !important;
  background: transparent !important; border: none !important;
  box-shadow: none !important; transform: none !important;
}
#content .track-item:hover, #content .ym-result:hover, #content .queue-item:hover {
  background: rgba(255,255,255,.055) !important; transform: none !important;
}
#content .card, #content .coll-card {
  border-radius: 14px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important; transform: none !important;
}
#content .card:hover, #content .coll-card:hover {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.16) !important;
  transform: none !important; filter: none !important;
}
#content .coll-tab, #content .admin-tab, #content .search-src-btn {
  height: 38px !important; padding: 0 15px !important;
  border-radius: 10px !important; border: none !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 14px !important; font-weight: 500 !important;
  color: rgba(232,241,245,.62) !important;
  background: transparent !important; box-shadow: none !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
#content .coll-tab.active, #content .admin-tab.active, #content .search-src-btn.active {
  font-weight: 600 !important; color: #EAF3F7 !important;
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.8) !important;
  border-bottom-color: transparent !important;
}
#content .btn-play-all {
  height: 40px !important; padding: 0 19px 0 15px !important;
  border: none !important; border-radius: 12px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 68%, #fff), var(--mz-ui-accent, #4FC4DE)) !important;
  color: #04141B !important; font-weight: 600 !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 12 — ПО РЕЗУЛЬТАТУ ОСМОТРА В БРАУЗЕРЕ
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Плеер не заезжает под сайдбар (в макете он внутри правой колонки) ── */
@media (min-width: 901px) {
  #player-bar#player-bar { left: 244px !important; right: 0 !important; width: auto !important; }
}

/* ── Порядок пунктов: MUZLO AI первым, «Ещё» последним ── */
#sidebar #px-nav > * { order: 9; }
#sidebar #px-nav > #mzai-btn { order: 1; }
#sidebar #px-nav > [data-view="library"]    { order: 2; }
#sidebar #px-nav > [data-view="search"]     { order: 3; }
#sidebar #px-nav > [data-view="collection"] { order: 4; }
#sidebar #px-nav > [data-view="wave"]       { order: 5; }
#sidebar #px-nav > [data-view="karaoke"]    { order: 6; }
#sidebar #px-nav > [data-view="messages"]   { order: 7; }
#sidebar #px-nav > #nav-admin               { order: 8; }
/* кнопка AI живёт вне общей вёрстки — приводим её к виду остальных */
#sidebar #px-nav > #mzai-btn {
  position: relative; width: 100%;
  height: 42px !important; padding: 0 14px !important;
  display: flex; align-items: center; gap: 12px !important;
  border-radius: 10px !important; border: none !important;
  background: transparent !important;
  color: #9FD9E8 !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 15px !important; font-weight: 500 !important;
  cursor: pointer; box-shadow: none !important;
}
#sidebar #px-nav > #mzai-btn:hover { background: rgba(255,255,255,.045) !important; }
#sidebar #px-nav > #mzai-btn svg { width: 18px !important; height: 18px !important; flex: none; }
#sidebar #px-nav { flex: none !important; }

/* ── Плейлисты: цветные плашки как в макете ── */
#sidebar .sidebar-pl-item {
  display: flex !important; align-items: center; gap: 11px;
  padding: 7px 14px !important;
}
#sidebar .sidebar-pl-item::before {
  content: '';
  width: 22px; height: 22px; flex: none;
  border-radius: 7px;
  background: linear-gradient(145deg,#c0392b,#5A1D14);
}
#sidebar .sidebar-pl-item:nth-child(3n+2)::before { background: linear-gradient(145deg,#e67e22,#7A3D0C); }
#sidebar .sidebar-pl-item:nth-child(3n+3)::before { background: linear-gradient(145deg,#6C5CE7,#2E2560); }

/* ── Волна: лента света вместо буквы «W» ── */
#wave-screen .wave-ym-right::before,
#wave-screen .wave-ym-right::after {
  content: '';
  position: absolute; left: -30%; width: 160%;
  border-radius: 50%;
  pointer-events: none;
  background-size: 200% 100%;
  z-index: 0;
}
#wave-screen .wave-ym-right::before {
  top: 52%; height: 130px;
  filter: blur(64px); opacity: .6;
  background-image: linear-gradient(90deg,
    rgba(64,110,220,0) 0%, rgba(64,110,220,.6) 22%,
    rgba(90,200,240,.85) 50%, rgba(168,130,252,.7) 78%, rgba(168,130,252,0) 100%);
  animation: waveDrift 20s ease-in-out infinite, waveHue 7s linear infinite;
}
#wave-screen .wave-ym-right::after {
  top: 60%; height: 60px;
  filter: blur(24px);
  background-image: linear-gradient(90deg,
    rgba(64,110,220,0) 0%, rgba(90,160,240,.75) 20%,
    rgba(150,236,252,1) 50%, rgba(180,142,253,.8) 80%, rgba(180,142,253,0) 100%);
  animation: waveDrift2 24s ease-in-out infinite, waveHue 7s linear infinite;
}
/* сетка точек поверх ленты — рисуем на пустом canvas */
#wave-screen #wave-canvas {
  z-index: 1;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 60%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 100% at 50% 60%, #000 0%, transparent 72%);
  opacity: .5;
  pointer-events: none;
}
#wave-screen .wave-ym-center { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 13 — ПО ОСМОТРУ В БРАУЗЕРЕ
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes eqBar { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

/* Старый «Быстрый доступ» дублировал новый — прячем именно его. */
#main-grid:has(#mz-home) .home-section:has(> .ym-quick-row),
#main-grid:has(#mz-home) .rc-quick-section { display: none !important; }

/* Карточки без данных (пустое название) не показываем. */
#main-grid .home-recent-card:has(.home-card-title:empty) { display: none !important; }
#main-grid .home-section:not(:has(.home-recent-card:not(:has(.home-card-title:empty)))):has(.home-card-img-round) { display: none !important; }

/* Заголовки секций — как в макете: Unbounded 12px, трекинг .18em, без полоски. */
#main-grid .home-section-title,
#content .home-section-title {
  font-family: 'Unbounded', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  color: #5C6E7C !important;
  text-transform: uppercase !important;
  padding-left: 0 !important;
  border-left: none !important;
}
#main-grid .home-section-title::before,
#content .home-section-title::before { display: none !important; }

/* ── РАЗВЁРНУТЫЙ ПЛЕЕР (3E): левая колонка 340px ── */
#exp-player#exp-player .exp-left,
#exp-player#exp-player .exp-cover-col {
  width: 340px !important; flex: none !important;
  background: #070B0F !important;
  border-right: 1px solid rgba(255,255,255,.055) !important;
  padding: 32px 28px !important;
  gap: 22px;
}
#exp-player #exp-cover-img, #exp-player .exp-cover img {
  width: 100% !important; aspect-ratio: 1 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 50px -24px #000 !important;
  object-fit: cover;
}
#exp-player .exp-play-btn, #exp-player #exp-play {
  width: 60px !important; height: 60px !important;
  border-radius: 50% !important; border: none !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 68%, #fff), var(--mz-ui-accent, #4FC4DE)) !important;
  color: #04141B !important;
  box-shadow: 0 14px 30px -16px rgba(0,0,0,.7) !important;
}
#exp-player .exp-progress, #exp-player #exp-progress-bar {
  height: 4px !important; border-radius: 2px !important;
  background: rgba(255,255,255,.1) !important;
}
#exp-player .exp-progress > *, #exp-player #exp-progress-fill {
  border-radius: 2px !important; background: var(--mz-ui-accent, #4FC4DE) !important;
}
#exp-player .exp-time {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important; color: rgba(232,241,245,.45) !important;
}

/* ── MUZLO AI (3G) ── */
#mzai-panel, .mzai-panel, #mzai-root {
  background: radial-gradient(120% 80% at 70% 0%, #1A1636 0%, #0A0912 55%, #05060B 100%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 16px !important;
  font-family: 'Onest', system-ui, sans-serif !important;
}
.mzai-head, #mzai-head {
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  gap: 10px;
}
.mzai-title { font-family: 'Unbounded', sans-serif !important; font-size: 15px !important; font-weight: 500 !important; }
.mzai-track, .mzai-song {
  height: 54px !important; padding: 0 14px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  gap: 12px;
}
.mzai-track:hover { background: rgba(255,255,255,.06) !important; }
.mzai-msg.me, .mzai-user {
  border-radius: 14px 14px 4px 14px !important;
  background: linear-gradient(180deg,#C6B9FF,#8A79F0) !important;
  color: #150F30 !important;
  font-size: 14px !important; font-weight: 500 !important;
  padding: 11px 16px !important;
}
.mzai-input, #mzai-input {
  height: 44px !important; padding: 0 16px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #E8F1F5 !important; font-size: 14px !important;
}
.mzai-send, #mzai-send {
  width: 44px !important; height: 44px !important;
  border-radius: 12px !important; border: none !important;
  background: linear-gradient(180deg,#C6B9FF,#8A79F0) !important;
  color: #150F30 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 14 — ОСТАВШИЕСЯ ЭКРАНЫ МАКЕТА (3D, 3F) + чипы плейлистов
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Чип плейлиста: 22x22 r6 с нотой внутри (2A) ── */
#sidebar .sidebar-pl-item::before {
  border-radius: 6px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,.9)'%3E%3Cpath d='M9 18V6l10-2v12'/%3E%3Ccircle cx='6.5' cy='18' r='2.4'/%3E%3Ccircle cx='16.5' cy='16' r='2.4'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── 3D ПОИСК — РЕЗУЛЬТАТЫ ── */
#view-search .search-input-wrap { display: flex; justify-content: center; }
#view-search #search-ym-input {
  width: 420px !important; max-width: 100%;
  height: 46px !important;
  padding: 0 18px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(159,217,232,.32) !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 15px !important;
  color: #E8F1F5 !important;
  box-shadow: none !important;
}
#view-search #search-source-toggle {
  display: flex; gap: 5px !important;
  padding: 4px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 13px !important;
  width: fit-content;
}
#view-search .search-src-btn {
  height: 38px !important; padding: 0 16px !important;
  border-radius: 9px !important; gap: 8px;
  font-size: 14px !important;
}
#content .ap-header { gap: 26px !important; padding: 34px 44px !important; }
#content .ap-avatar, #content .ap-cover {
  width: 132px !important; height: 132px !important;
  border-radius: 50% !important; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 20px 46px -22px #000 !important;
}
#content .ap-name {
  font-family: 'Unbounded', sans-serif !important;
  font-weight: 700 !important; font-size: 44px !important;
  line-height: 1 !important; letter-spacing: -.03em !important;
}
#content .ap-btn-play {
  display: flex; align-items: center; gap: 9px;
  height: 46px !important; padding: 0 24px 0 19px !important;
  border: none !important; border-radius: 13px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 68%, #fff), var(--mz-ui-accent, #4FC4DE)) !important;
  color: #04141B !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 15px !important; font-weight: 600 !important;
  box-shadow: 0 12px 26px -16px rgba(0,0,0,.7) !important;
}

/* ── 3F ПЛЕЕР — ТАБЫ И СТЕМЫ ── */
#exp-player#exp-player .tab-open-big {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(111,216,236,.22) !important;
}
#exp-player .tab-open-big .tab-panel-open,
#exp-player .tab-open-big > span:first-child {
  width: 40px !important; height: 40px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg,#9BE8F8,#3B93AE) !important;
  color: #04141B !important;
  display: flex; align-items: center; justify-content: center;
}
#exp-player .tab-inst-row, #exp-player .tab-song-row {
  display: flex; align-items: center; gap: 16px;
  height: 56px !important; padding: 0 16px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.025) !important;
  border: none !important;
}
#exp-player .tab-inst-row:hover, #exp-player .tab-song-row:hover { background: rgba(255,255,255,.05) !important; }
#exp-player .tab-tuning, #exp-player .tab-views {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12.5px !important;
  color: rgba(232,241,245,.5) !important;
}
#exp-player .tab-stars { font-size: 13px !important; color: #D9A441 !important; }
#exp-player .stems-box, #exp-player #stems-panel, #exp-player .stems-card {
  margin-top: auto;
  padding: 16px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  display: flex; flex-direction: column; gap: 10px;
}
#exp-player .stems-bar, #exp-player #stems-progress {
  height: 6px !important; border-radius: 3px !important;
  background: rgba(255,255,255,.1) !important;
}
#exp-player .stems-bar > *, #exp-player #stems-progress > * {
  border-radius: 3px !important;
  background: var(--mz-ui-accent, #4FC4DE) !important;
}
#exp-player .stems-status, #exp-player #stems-status {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important; color: #7FE3F5 !important;
}
#content .section-label, #exp-player .section-label {
  font-size: 12px !important; letter-spacing: .16em !important;
  color: #5C6E7C !important; font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 16 — СТРУКТУРА САЙДБАРА И ЕДИНЫЙ ШРИФТ
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Сайдбар: колонка с прокруткой только у плейлистов ── */
#sidebar#sidebar {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
}
#sidebar #sidebar-logo,
#sidebar #px-nav,
#sidebar #sidebar-liked { flex: none !important; }

#sidebar #sidebar-playlists {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
}
#sidebar #sidebar-playlists::-webkit-scrollbar { width: 4px; }
#sidebar #sidebar-playlists::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12); border-radius: 2px;
}
#sidebar #sidebar-pl-header { position: sticky; top: 0; background: #070B0F; z-index: 1; }

/* Профиль прижат к низу и не перекрывается списком */
#sidebar #profile-bar {
  flex: none !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,.055) !important;
  background: #070B0F !important;
}

/* ── Единый шрифт: Onest в интерфейсе, Unbounded в заголовках ── */
html body,
html body button, html body input, html body select, html body textarea,
html body .nav-btn, html body .nav-label,
html body .sidebar-pl-item, html body .sidebar-liked-text,
html body .track-item, html body .ym-result, html body .queue-item,
html body .card, html body .coll-card,
html body .px-btn, html body .accent-btn, html body .btn-play-all,
html body .coll-tab, html body .settings-tab, html body .search-src-btn,
html body .wave-src-btn, html body .wave-st-item, html body .exp-tab,
html body .toggle-row, html body .px-track-title, html body .px-track-artist {
  font-family: 'Onest', system-ui, -apple-system, sans-serif !important;
}
html body h1, html body h2, html body h3,
html body .view-header h1, html body .view-header h2,
html body #sidebar-logo-text,
html body .home-section-title, html body .mzs-h,
html body .album-header-title, html body .ap-name,
html body .wave-ym-title, html body .style-tile-name,
html body #settings-header .px-section-title {
  font-family: 'Unbounded', 'Onest', sans-serif !important;
}
html body .px-time, html body #cur-time, html body #dur-time,
html body .track-time, html body .ym-dur, html body .qi-time,
html body .settings-group-title, html body .set-group-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 18 — ЧИПЫ ПЛЕЙЛИСТОВ, ТОЧКИ КАРУСЕЛИ, ШРИФТ ВЕЗДЕ
   ═══════════════════════════════════════════════════════════════════════ */

/* Чип: нота ПОВЕРХ градиента (раньше нота затирала градиент) */
#sidebar .sidebar-pl-item::before {
  width: 22px; height: 22px; flex: none;
  border-radius: 6px !important;
  background-size: 12px 12px, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,.9)'%3E%3Cpath d='M9 18V6l10-2v12'/%3E%3Ccircle cx='6.5' cy='18' r='2.4'/%3E%3Ccircle cx='16.5' cy='16' r='2.4'/%3E%3C/svg%3E"), linear-gradient(145deg,#c0392b,#5A1D14) !important;
}
#sidebar .sidebar-pl-item:nth-child(3n+2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,.9)'%3E%3Cpath d='M9 18V6l10-2v12'/%3E%3Ccircle cx='6.5' cy='18' r='2.4'/%3E%3Ccircle cx='16.5' cy='16' r='2.4'/%3E%3C/svg%3E"), linear-gradient(145deg,#e67e22,#7A3D0C) !important;
}
#sidebar .sidebar-pl-item:nth-child(3n+3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,.9)'%3E%3Cpath d='M9 18V6l10-2v12'/%3E%3Ccircle cx='6.5' cy='18' r='2.4'/%3E%3Ccircle cx='16.5' cy='16' r='2.4'/%3E%3C/svg%3E"), linear-gradient(145deg,#6C5CE7,#2E2560) !important;
}

/* Точки карусели больше не налезают на кнопку:
   у слайда AI заголовок влезает в две строки, как в макете. */
#mz-home [data-track] > div:nth-child(2) > div:last-child { max-width: 680px !important; }
#mz-home [data-track] > div > div:last-child { padding-bottom: 46px !important; }
#mz-home [data-dots] { z-index: 4; }

/* ── Шрифт: перебиваем правила тем, которые ставят свой --font ── */
html body#body, html body {
  --font: 'Onest', system-ui, -apple-system, sans-serif !important;
}
html body *:not(svg):not(path):not(circle):not(.lyric-line):not(.ly-word):not(.ly-grad):not(.lyset-preview):not(.lyf-btn):not(#lyset-preview):not(#karaoke-lyrics-lines *):not(#exp-lyrics-lines *) {
  font-family: 'Onest', system-ui, -apple-system, sans-serif;
}
html body h1, html body h2, html body h3,
html body .view-header h1, html body .view-header h2,
html body #sidebar-logo-text,
html body .home-section-title, html body .mzs-h,
html body .album-header-title, html body .ap-name,
html body .wave-ym-title, html body .style-tile-name,
html body #settings-header .px-section-title,
html body #mz-home [style*="Unbounded"] {
  font-family: 'Unbounded', 'Onest', sans-serif !important;
}
html body .px-time, html body #cur-time, html body #dur-time,
html body .track-time, html body .ym-dur, html body .qi-time,
html body .settings-group-title, html body .set-group-title,
html body .settings-section > .px-section-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 19 — САЙДБАР ДО НИЗА, ПЛЕЕР ТОЛЬКО В ПРАВОЙ КОЛОНКЕ (макет 2A)
   Раньше сайдбар кончался на высоте «окно минус плеер», и после сдвига
   плеера вправо в левом нижнем углу оставался чёрный прямоугольник.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  html body #app {
    height: 100vh !important;
    max-height: 100vh !important;
    padding-bottom: 0 !important;
    align-items: stretch !important;
  }
  html body #sidebar#sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
    align-self: stretch !important;
  }
  /* контент не должен уезжать под плеер */
  html body #content {
    height: 100vh !important;
    max-height: 100vh !important;
    padding-bottom: 76px !important;
    box-sizing: border-box !important;
  }
  /* плеер прижат к низу правой колонки */
  html body #player-bar#player-bar {
    left: 244px !important; right: 0 !important;
    bottom: 0 !important; width: auto !important;
  }
  /* панель настроек тоже до низа правой колонки */
  html body #settings-panel#settings-panel { bottom: 76px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 20 — САЙДБАР: ПРОКРУТКА И ЛОГОТИП (макет 2A)
   ═══════════════════════════════════════════════════════════════════════ */

/* В макете полосы прокрутки не видно — прячем, оставляя саму прокрутку. */
html body #sidebar #sidebar-playlists {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html body #sidebar #sidebar-playlists::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
html body #sidebar #sidebar-playlists::-webkit-scrollbar-thumb { background: transparent !important; }
html body #sidebar #sidebar-playlists::-webkit-scrollbar-track { background: transparent !important; }

/* Логотип: строка ровно как в макете — чип 26px + надпись Unbounded 16/700/.14em */
html body #sidebar #sidebar-logo {
  display: flex !important; align-items: center !important;
  gap: 11px !important; padding: 0 8px !important; margin: 0 !important;
  cursor: pointer;
}
html body #sidebar #cat-wrap {
  width: 26px !important; height: 26px !important;
  min-width: 26px !important; flex: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: none !important; border-radius: 0 !important; overflow: visible !important;
}
html body #sidebar #cat-wrap canvas {
  width: 26px !important; height: 26px !important;
  display: block !important; object-fit: contain;
}
html body #sidebar #sidebar-logo-text {
  font-family: 'Unbounded', sans-serif !important;
  font-weight: 700 !important; font-size: 16px !important;
  letter-spacing: .14em !important; color: #E8F1F5 !important;
  text-shadow: none !important; line-height: 1 !important;
}

/* Строки плейлистов не должны обрезаться по половине */
html body #sidebar .sidebar-pl-item {
  min-height: 36px;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 21 — НАСТРОЙКИ ПО ПОЛНОМУ МАКЕТУ (3B, 3B2)
   Карточка-секция, заголовки // ГРУППА //, чипы, кружки цветов,
   вертикальные полосы эквалайзера, сегменты.
   ═══════════════════════════════════════════════════════════════════════ */

/* Секция-карточка */
html body #settings-panel .settings-section {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: #04070B !important;
  box-shadow: 0 40px 100px -50px #000 !important;
  padding: 20px !important;
  margin: 0 14px 14px !important;
  display: flex; flex-direction: column; gap: 22px;
}

/* Заголовок группы: // НАЗВАНИЕ // */
html body #settings-panel .px-section-title,
html body #settings-panel .settings-group-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11.5px !important;
  letter-spacing: .05em !important;
  color: #6FD8EC !important;
  font-weight: 400 !important;
  text-transform: none !important;
  margin: 0 0 4px !important;
}

/* Чипы: шрифты текста, эффекты, анимации, пресеты эквалайзера, скорости, таймер */
html body #settings-panel .chip,
html body #settings-panel .ly-font-btn,
html body #settings-panel .ly-fx-btn,
html body #settings-panel .ly-anim-btn,
html body #settings-panel .eq-preset,
html body #settings-panel .speed-btn,
html body #settings-panel .timer-btn,
html body #settings-panel .px-chip {
  padding: 7px 13px !important;
  border-radius: 9px !important;
  border: none !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(232,241,245,.6) !important;
  box-shadow: none !important;
  cursor: pointer;
}
html body #settings-panel .chip.active,
html body #settings-panel .ly-font-btn.active,
html body #settings-panel .ly-fx-btn.active,
html body #settings-panel .ly-anim-btn.active,
html body #settings-panel .eq-preset.active,
html body #settings-panel .speed-btn.active,
html body #settings-panel .timer-btn.active,
html body #settings-panel .px-chip.active {
  font-weight: 600 !important;
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  color: #EAF3F7 !important;
}
/* чипы скорости — моноширинные (макет) */
html body #settings-panel .speed-btn { font-family: 'JetBrains Mono', monospace !important; }

/* Кружки цвета текста — 24px */
html body #settings-panel .color-dot,
html body #settings-panel .ly-color-btn,
html body #settings-panel .swatch {
  width: 24px !important; height: 24px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  cursor: pointer;
}
html body #settings-panel .color-dot.active,
html body #settings-panel .ly-color-btn.active,
html body #settings-panel .swatch.active {
  border: 2px solid #fff !important;
}

/* Эквалайзер: вертикальная полоса 4px/96px, ручка 14px */
html body #settings-panel .eq-band input[type="range"],
html body #settings-panel .eq-slider {
  -webkit-appearance: none; appearance: none;
  width: 96px !important; height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,.1) !important;
}
html body #settings-panel .eq-band input[type="range"]::-webkit-slider-thumb,
html body #settings-panel .eq-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border: none; border-radius: 50%;
  background: #9BE8F8; box-shadow: none; cursor: pointer;
}
html body #settings-panel .eq-db, html body #settings-panel .eq-hz {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11.5px !important;
}
html body #settings-panel .eq-db { color: #7FE3F5 !important; }
html body #settings-panel .eq-hz { color: rgba(232,241,245,.4) !important; }

/* Кнопка ВКЛ / ИМПОРТ — заливная, буквы вразрядку */
html body #settings-panel .accent-btn,
html body #settings-panel .px-btn.accent-btn,
html body #settings-panel .eq-toggle-btn {
  height: 40px !important;
  padding: 0 20px !important;
  border-radius: 24px !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mz-ui-accent, var(--accent)) 86%, #fff) 0%,
    var(--mz-ui-accent, var(--accent)) 100%) !important;
  color: var(--mz-ui-on, #06121A) !important;
  box-shadow: none !important;
}

/* Поле токена — моноширинное */
html body #settings-panel input[type="text"],
html body #settings-panel input[type="password"],
html body #settings-panel .px-input {
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12.5px !important;
  color: #E8F1F5 !important;
}

/* Язык — сегмент на всю ширину */
html body #settings-panel .lang-row { display: flex; gap: 8px; }
html body #settings-panel #lang-btn-en,
html body #settings-panel #lang-btn-ru {
  flex: 1; height: 40px !important;
  border-radius: 10px !important; border: none !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(232,241,245,.6) !important;
  font-size: 13.5px !important; font-weight: 500 !important;
}
html body #settings-panel #lang-btn-en.active,
html body #settings-panel #lang-btn-ru.active {
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  color: #EAF3F7 !important; font-weight: 600 !important;
}

/* Строки порядка меню — с «ручкой» для перетаскивания */
html body #settings-panel .nav-order-row {
  height: 38px !important; padding: 0 12px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  font-size: 13.5px !important;
  color: rgba(232,241,245,.75) !important;
  cursor: grab;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 22 — СОСТОЯНИЯ САЙДБАРА (базовый вид задан инлайном из макета)
   ═══════════════════════════════════════════════════════════════════════ */
html body #sidebar .nav-btn:hover { background: rgba(255,255,255,.045) !important; color: #E8F1F5 !important; }
html body #sidebar .nav-btn.active { background: rgba(111,216,236,.10) !important; color: #EAF7FB !important; }
html body #sidebar .nav-btn.active .nav-label { font-weight: 600 !important; }
html body #sidebar .nav-btn.active .nav-mark { background: #7FE3F5 !important; }
html body #sidebar .nav-btn::before, html body #sidebar .nav-btn::after { display: none !important; }
html body #sidebar #sidebar-liked:hover { background: rgba(255,255,255,.07) !important; }
html body #sidebar #sidebar-playlists { scrollbar-width: none !important; }
html body #sidebar #sidebar-playlists::-webkit-scrollbar { width: 0 !important; display: none !important; }
html body #sidebar .sidebar-pl-item:hover { background: rgba(255,255,255,.05) !important; color: #E8F1F5 !important; }
html body #sidebar #profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 24 — НАСТРОЙКИ ШИРОКИМ ОКНОМ (макет 3B: 840px, карточки-секции)
   Была узкая панель 340px справа — в неё не помещались чипы шрифтов,
   кружки цветов и вертикальные полосы эквалайзера из макета.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  html body #settings-panel#settings-panel {
    position: fixed !important;
    top: 50% !important; left: 50% !important;
    right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(840px, calc(100vw - 80px)) !important;
    max-height: min(86vh, 900px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-left: 1px solid rgba(255,255,255,.09) !important;
    background: #04070B !important;
    box-shadow: 0 40px 100px -50px #000 !important;
    padding: 0 0 24px !important;
    overflow-y: auto !important;
    z-index: 1201 !important;
  }
  /* затемнение позади окна */
  html body #settings-panel#settings-panel::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(2,4,8,.62);
    backdrop-filter: blur(3px);
    z-index: -1;
  }
  html body #settings-panel #settings-header {
    padding: 26px 32px 18px !important;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    position: sticky; top: 0; z-index: 3;
    background: #04070B !important;
  }
  html body #settings-panel #settings-header .px-section-title {
    font-size: 24px !important;
  }
  html body #settings-panel #settings-tabs {
    margin: 18px 32px !important;
    position: sticky; top: 74px; z-index: 2;
  }
  /* секции — сеткой в две колонки, как карточки в 3B2 */
  html body #settings-panel .settings-section {
    margin: 0 !important;
    padding: 24px !important;
    gap: 22px !important;
  }
  html body #settings-panel > .settings-section { break-inside: avoid; }
  html body #settings-panel {
    --set-cols: 2;
  }
  html body #settings-panel .settings-section[data-stab] {
    display: none;
  }
  html body #settings-panel .settings-section[data-stab].active,
  html body #settings-panel .settings-section[data-stab]:not([hidden]) {
    display: flex;
  }
  /* контейнер секций — сетка */
  html body #settings-panel .settings-body,
  html body #settings-panel > div:not(#settings-header):not(#settings-tabs) {
    margin: 0 32px !important;
  }
  /* плитки тем/стилей внутри широкого окна — по 2 в ряд */
  html body #settings-panel #style-grid,
  html body #settings-panel #theme-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }
  html body #settings-panel .style-tile-preview { height: 48px !important; }
  /* чипы в ряд с переносом */
  html body #settings-panel .chips-row,
  html body #settings-panel .ly-fonts,
  html body #settings-panel .ly-fx,
  html body #settings-panel .ly-anims,
  html body #settings-panel .eq-presets {
    display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 25 — ПАЛИТРА ЧАТА MUZLO AI (макет 3G)
   Градиент раньше ложился на обёртку .mzai-user, а сам пузырь .mzai-body
   оставался тёмным — получался тёмный прямоугольник внутри сиреневого.
   ═══════════════════════════════════════════════════════════════════════ */

/* обёртка — только выравнивание, без фона */
html body .mzai-turn.mzai-user {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}

/* сам пузырь пользователя */
html body .mzai-turn.mzai-user .mzai-body {
  max-width: 75% !important;
  padding: 11px 16px !important;
  border-radius: 14px 14px 4px 14px !important;
  background: linear-gradient(180deg,#C6B9FF,#8A79F0) !important;
  color: #150F30 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ответ агента — без плашки, подпись сверху */
html body .mzai-turn:not(.mzai-user) {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
html body .mzai-turn:not(.mzai-user) .mzai-body {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #E8F1F5 !important;
  font-size: 15px !important;
}
html body .mzai-turn:not(.mzai-user) .mzai-who,
html body .mzai-turn:not(.mzai-user) .mzai-role {
  font-size: 11px !important;
  letter-spacing: .2em !important;
  font-weight: 600 !important;
  color: #B0A6D6 !important;
  text-transform: uppercase;
}

/* карточка трека в ответе агента */
html body .mzai-track, html body .mzai-song, html body .mzai-result {
  height: 54px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  gap: 12px !important;
  background: rgba(198,185,255,.1) !important;
  border: 1px solid rgba(198,185,255,.22) !important;
}
html body .mzai-track:hover { background: rgba(198,185,255,.16) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 26 — ПАНЕЛЬ ТЕКСТА (кнопки налезали друг на друга)
   ═══════════════════════════════════════════════════════════════════════ */
html body #lyrics-sync-status {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  min-height: 44px;
  position: relative; z-index: 4;
}
html body #lyrics-sync-status > * { flex: none !important; position: static !important; }
html body #lyrics-sync-status .ly-tool-btn,
html body #lyrics-sync-status button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 6px !important;
  height: 32px !important; padding: 0 12px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.05) !important;
  color: #E8F1F5 !important;
  font-family: 'Onest', sans-serif !important;
  font-size: 12.5px !important; font-weight: 500 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
html body #lyrics-sync-status button:hover { background: rgba(255,255,255,.10) !important; }
html body #lyrics-sync-status svg { width: 15px !important; height: 15px !important; display: block; }
html body #lyrics-sync-status .ly-tool-icon,
html body #lyrics-sync-status button:not(:has(span)) { width: 32px !important; padding: 0 !important; }
html body #lyrics-sync-label { font-size: 12.5px !important; color: rgba(232,241,245,.6) !important; white-space: nowrap; }
html body #lyrics-sync-dot {
  width: 7px !important; height: 7px !important; border-radius: 50% !important;
  background: #7FE3F5 !important; box-shadow: 0 0 8px rgba(127,227,245,.7) !important;
}
html body #ly-delay-ctrl {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  padding: 3px !important; border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
html body #ly-delay-val {
  min-width: 42px; text-align: center;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important; color: #E8F1F5 !important; font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 27 — СРЕЗАННЫЕ УГЛЫ, ПЕРЕЛИВ, ЧИПЫ ПЛЕЙЛИСТОВ
   ═══════════════════════════════════════════════════════════════════════ */

/* карточка-квадрат со срезанными углами */
.mz-cut {
  border-radius: 0 !important;
  clip-path: polygon(
    16px 0, calc(100% - 16px) 0, 100% 16px,
    100% calc(100% - 16px), calc(100% - 16px) 100%,
    16px 100%, 0 calc(100% - 16px), 0 16px);
}
/* перелив как у «Моей волны» */
.mz-cut-sheen {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  mix-blend-mode: screen; opacity: .5;
  background: linear-gradient(115deg,
    rgba(64,110,220,0) 26%, rgba(90,200,240,.55) 42%,
    rgba(220,235,255,.85) 50%, rgba(168,130,252,.55) 58%,
    rgba(168,130,252,0) 74%);
  background-size: 260% 100%;
  animation: mzSheen 6.5s ease-in-out infinite, waveHue 7s linear infinite;
}
@keyframes mzSheen {
  0%   { background-position: 150% 0; }
  55%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-cut-sheen { animation: none; opacity: .28; }
}

/* чипы плейлистов в сайдбаре — крупная обложка первого трека */
html body #sidebar-pl-list .sidebar-pl-item {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  height: 48px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  cursor: pointer;
  color: rgba(232,241,245,.72);
  font-size: 14px;
  transition: background .18s ease, color .18s ease;
}
html body #sidebar-pl-list .sidebar-pl-item:hover {
  background: rgba(255,255,255,.06) !important;
  color: #E8F1F5;
}
html body .sidebar-pl-art {
  flex: none; width: 36px; height: 36px;
  border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(155,232,248,.18), rgba(79,196,222,.06));
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(232,241,245,.45);
}
html body .sidebar-pl-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .sidebar-pl-art svg { width: 17px; height: 17px; }
html body .sidebar-pl-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 29 — ФОРМА КАРТОЧЕК, ПЛАВНЫЙ ПЕРЕЛИВ, ЧИСТЫЕ ЧИПЫ
   ═══════════════════════════════════════════════════════════════════════ */

/* форма вернулась к прежней — срез углов больше не применяем */
.mz-cut { border-radius: 14px !important; clip-path: none !important; }

/* перелив мягче: шире растяжка, ниже контраст, медленнее ход */
.mz-cut-sheen {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  mix-blend-mode: screen; opacity: .34;
  background: linear-gradient(112deg,
    rgba(90,200,240,0)    12%,
    rgba(90,200,240,.16)  30%,
    rgba(190,220,255,.34) 44%,
    rgba(225,238,255,.44) 50%,
    rgba(190,220,255,.34) 56%,
    rgba(168,130,252,.16) 70%,
    rgba(168,130,252,0)   88%);
  background-size: 320% 100%;
  filter: blur(6px);
  animation: mzSheen 11s cubic-bezier(.45,0,.3,1) infinite, waveHue 9s linear infinite;
}
@keyframes mzSheen {
  0%   { background-position: 165% 0; }
  62%  { background-position: -65% 0; }
  100% { background-position: -65% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-cut-sheen { animation: none; opacity: .2; }
}

/* чипы плейлистов: цветная плашка-квадрат больше не нужна — есть обложка */
html body #sidebar .sidebar-pl-item::before { display: none !important; content: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 31 — ОТСТУПЫ САЙДБАРА И ГРАДИЕНТЫ ИКОНОК
   ═══════════════════════════════════════════════════════════════════════ */

/* между «Ещё» и «Избранное» было 26px — слишком просторно */
html body #sidebar#sidebar { gap: 14px !important; }
html body #sidebar#sidebar #px-nav { margin-bottom: 2px !important; }
html body #sidebar#sidebar #sidebar-playlists { margin-top: 6px !important; }

/* «Избранное» — объёмная плашка сердца */
html body .sidebar-liked-icon {
  background-image:
    radial-gradient(120% 110% at 28% 18%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 44%, rgba(255,255,255,0) 72%),
    linear-gradient(160deg, #FF9DB1 0%, #E4577A 48%, #A82848 100%) !important;
  box-shadow:
    0 6px 14px -6px rgba(228,87,122,.75),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -4px 8px -6px rgba(0,0,0,.6) !important;
  border-radius: 8px !important;
}

/* обложки плейлистов в сайдбаре — та же огранка */
html body .sidebar-pl-art {
  background-image:
    radial-gradient(120% 110% at 28% 18%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(160deg, rgba(155,232,248,.30), rgba(79,196,222,.08)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28) !important;
}
html body .sidebar-pl-art img { box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }



/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 39 — ПЕРЕЛИВ ОРАНЖЕВО-РОЗОВОГО
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes mzFlow {
  0%   { background-position: 0 0, 0% 50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}
.mz-flow { animation: mzFlow 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mz-flow { animation: none; } }


/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 42 — КНОПКИ-ВОЛНА
   Классы собраны разбором index.html, а не по памяти: переключатели ловим
   в состоянии .active, главные действия — всегда.
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes mzWaveRun {
  0%   { transform: translate3d(-14%, 0, 0) scaleX(1.05); opacity: .9; }
  50%  { transform: translate3d(14%, 0, 0)  scaleX(1.22); opacity: 1; }
  100% { transform: translate3d(-14%, 0, 0) scaleX(1.05); opacity: .9; }
}

html body #settings-panel .settings-tab.active,
html body .settings-tab.active,
html body #settings-panel .coll-tab.active,
html body .coll-tab.active,
html body #settings-panel .admin-tab.active,
html body .admin-tab.active,
html body #settings-panel .kr-tab.active,
html body .kr-tab.active,
html body #settings-panel .ap-tab.active,
html body .ap-tab.active,
html body #settings-panel .px-tab.active,
html body .px-tab.active,
html body #settings-panel .stab.active,
html body .stab.active,
html body #settings-panel .exp-tab.active,
html body .exp-tab.active,
html body #settings-panel .auth-tab.active,
html body .auth-tab.active,
html body #settings-panel .wave-mode-tab.active,
html body .wave-mode-tab.active,
html body #settings-panel .mzai-tab.active,
html body .mzai-tab.active,
html body #settings-panel .mzai-mo.active,
html body .mzai-mo.active,
html body #settings-panel .search-src-btn.active,
html body .search-src-btn.active,
html body #settings-panel .wave-src-btn.active,
html body .wave-src-btn.active,
html body #settings-panel .cc-mode-btn.active,
html body .cc-mode-btn.active,
html body #settings-panel .cc-scope-btn.active,
html body .cc-scope-btn.active,
html body #settings-panel .uimode-opt.active,
html body .uimode-opt.active,
html body #settings-panel .pt-dir-btn.active,
html body .pt-dir-btn.active,
html body #settings-panel .pt-cmode-btn.active,
html body .pt-cmode-btn.active,
html body #settings-panel .pt-mouse-btn.active,
html body .pt-mouse-btn.active,
html body #settings-panel .pt-where-btn.active,
html body .pt-where-btn.active,
html body #settings-panel .viz-cmode-btn.active,
html body .viz-cmode-btn.active,
html body #settings-panel .gui-cover-shape-btn.active,
html body .gui-cover-shape-btn.active,
html body #settings-panel .gui-player-pos-btn.active,
html body .gui-player-pos-btn.active,
html body #settings-panel .gui-sidebar-pos-btn.active,
html body .gui-sidebar-pos-btn.active,
html body #settings-panel .text3d-color-btn.active,
html body .text3d-color-btn.active,
html body #settings-panel .mob-nav-btn.active,
html body .mob-nav-btn.active,
html body #settings-panel .mtop-btn.active,
html body .mtop-btn.active,
html body #content .px-btn,
html body .px-btn,
html body #content .accent-btn,
html body .accent-btn,
html body #content .btn-play-all,
html body .btn-play-all,
html body #content .ap-btn-play,
html body .ap-btn-play,
html body #content .px-play-btn,
html body .px-play-btn,
html body #content .auth-submit,
html body .auth-submit,
html body #content .karaoke-btn,
html body .karaoke-btn,
html body #content .karaoke-btn-create,
html body .karaoke-btn-create,
html body #content .karaoke-btn-join,
html body .karaoke-btn-join,
html body #content .kr-search-btn,
html body .kr-search-btn,
html body #content .dm-send,
html body .dm-send,
html body #content .mz-wavebtn,
html body .mz-wavebtn,
html body #btn-play#btn-play,
html body #exp-play#exp-play,
html body #wave-play-btn#wave-play-btn {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: radial-gradient(120% 130% at 50% 55%, rgba(6,11,16,.5) 0%, rgba(6,11,16,.82) 62%, #050A0F 100%) !important;
  background-image: radial-gradient(120% 130% at 50% 55%, rgba(6,11,16,.5) 0%, rgba(6,11,16,.82) 62%, #050A0F 100%) !important;
  border: 1px solid rgba(var(--cover-accent-rgb,143,231,248),.28) !important;
  box-shadow: none !important;
  color: #EAF6FB !important;
  text-shadow: none !important;
  filter: none !important;
}

html body #settings-panel .settings-tab.active::before,
html body .settings-tab.active::before,
html body #settings-panel .coll-tab.active::before,
html body .coll-tab.active::before,
html body #settings-panel .admin-tab.active::before,
html body .admin-tab.active::before,
html body #settings-panel .kr-tab.active::before,
html body .kr-tab.active::before,
html body #settings-panel .ap-tab.active::before,
html body .ap-tab.active::before,
html body #settings-panel .px-tab.active::before,
html body .px-tab.active::before,
html body #settings-panel .stab.active::before,
html body .stab.active::before,
html body #settings-panel .exp-tab.active::before,
html body .exp-tab.active::before,
html body #settings-panel .auth-tab.active::before,
html body .auth-tab.active::before,
html body #settings-panel .wave-mode-tab.active::before,
html body .wave-mode-tab.active::before,
html body #settings-panel .mzai-tab.active::before,
html body .mzai-tab.active::before,
html body #settings-panel .mzai-mo.active::before,
html body .mzai-mo.active::before,
html body #settings-panel .search-src-btn.active::before,
html body .search-src-btn.active::before,
html body #settings-panel .wave-src-btn.active::before,
html body .wave-src-btn.active::before,
html body #settings-panel .cc-mode-btn.active::before,
html body .cc-mode-btn.active::before,
html body #settings-panel .cc-scope-btn.active::before,
html body .cc-scope-btn.active::before,
html body #settings-panel .uimode-opt.active::before,
html body .uimode-opt.active::before,
html body #settings-panel .pt-dir-btn.active::before,
html body .pt-dir-btn.active::before,
html body #settings-panel .pt-cmode-btn.active::before,
html body .pt-cmode-btn.active::before,
html body #settings-panel .pt-mouse-btn.active::before,
html body .pt-mouse-btn.active::before,
html body #settings-panel .pt-where-btn.active::before,
html body .pt-where-btn.active::before,
html body #settings-panel .viz-cmode-btn.active::before,
html body .viz-cmode-btn.active::before,
html body #settings-panel .gui-cover-shape-btn.active::before,
html body .gui-cover-shape-btn.active::before,
html body #settings-panel .gui-player-pos-btn.active::before,
html body .gui-player-pos-btn.active::before,
html body #settings-panel .gui-sidebar-pos-btn.active::before,
html body .gui-sidebar-pos-btn.active::before,
html body #settings-panel .text3d-color-btn.active::before,
html body .text3d-color-btn.active::before,
html body #settings-panel .mob-nav-btn.active::before,
html body .mob-nav-btn.active::before,
html body #settings-panel .mtop-btn.active::before,
html body .mtop-btn.active::before,
html body #content .px-btn::before,
html body .px-btn::before,
html body #content .accent-btn::before,
html body .accent-btn::before,
html body #content .btn-play-all::before,
html body .btn-play-all::before,
html body #content .ap-btn-play::before,
html body .ap-btn-play::before,
html body #content .px-play-btn::before,
html body .px-play-btn::before,
html body #content .auth-submit::before,
html body .auth-submit::before,
html body #content .karaoke-btn::before,
html body .karaoke-btn::before,
html body #content .karaoke-btn-create::before,
html body .karaoke-btn-create::before,
html body #content .karaoke-btn-join::before,
html body .karaoke-btn-join::before,
html body #content .kr-search-btn::before,
html body .kr-search-btn::before,
html body #content .dm-send::before,
html body .dm-send::before,
html body #content .mz-wavebtn::before,
html body .mz-wavebtn::before,
html body #btn-play#btn-play::before,
html body #exp-play#exp-play::before,
html body #wave-play-btn#wave-play-btn::before {
  content: '';
  position: absolute; left: -45%; right: -45%; top: -18%; height: 150%;
  border-radius: 46% 54% 52% 48% / 58% 55% 45% 42%;
  filter: blur(19px);
  opacity: .85;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(var(--cover-rgb,44,126,156),.35) 0%,
    rgba(var(--cover-rgb,44,126,156),.9) 18%,
    rgba(var(--cover-accent-rgb,143,231,248),1) 42%,
    rgba(var(--cover-accent-rgb,143,231,248),1) 58%,
    rgba(var(--cover-rgb,44,126,156),.9) 82%,
    rgba(var(--cover-rgb,44,126,156),.35) 100%);
  animation: mzWaveRun 7s ease-in-out infinite;
}

html body #settings-panel .settings-tab.active::after,
html body .settings-tab.active::after,
html body #settings-panel .coll-tab.active::after,
html body .coll-tab.active::after,
html body #settings-panel .admin-tab.active::after,
html body .admin-tab.active::after,
html body #settings-panel .kr-tab.active::after,
html body .kr-tab.active::after,
html body #settings-panel .ap-tab.active::after,
html body .ap-tab.active::after,
html body #settings-panel .px-tab.active::after,
html body .px-tab.active::after,
html body #settings-panel .stab.active::after,
html body .stab.active::after,
html body #settings-panel .exp-tab.active::after,
html body .exp-tab.active::after,
html body #settings-panel .auth-tab.active::after,
html body .auth-tab.active::after,
html body #settings-panel .wave-mode-tab.active::after,
html body .wave-mode-tab.active::after,
html body #settings-panel .mzai-tab.active::after,
html body .mzai-tab.active::after,
html body #settings-panel .mzai-mo.active::after,
html body .mzai-mo.active::after,
html body #settings-panel .search-src-btn.active::after,
html body .search-src-btn.active::after,
html body #settings-panel .wave-src-btn.active::after,
html body .wave-src-btn.active::after,
html body #settings-panel .cc-mode-btn.active::after,
html body .cc-mode-btn.active::after,
html body #settings-panel .cc-scope-btn.active::after,
html body .cc-scope-btn.active::after,
html body #settings-panel .uimode-opt.active::after,
html body .uimode-opt.active::after,
html body #settings-panel .pt-dir-btn.active::after,
html body .pt-dir-btn.active::after,
html body #settings-panel .pt-cmode-btn.active::after,
html body .pt-cmode-btn.active::after,
html body #settings-panel .pt-mouse-btn.active::after,
html body .pt-mouse-btn.active::after,
html body #settings-panel .pt-where-btn.active::after,
html body .pt-where-btn.active::after,
html body #settings-panel .viz-cmode-btn.active::after,
html body .viz-cmode-btn.active::after,
html body #settings-panel .gui-cover-shape-btn.active::after,
html body .gui-cover-shape-btn.active::after,
html body #settings-panel .gui-player-pos-btn.active::after,
html body .gui-player-pos-btn.active::after,
html body #settings-panel .gui-sidebar-pos-btn.active::after,
html body .gui-sidebar-pos-btn.active::after,
html body #settings-panel .text3d-color-btn.active::after,
html body .text3d-color-btn.active::after,
html body #settings-panel .mob-nav-btn.active::after,
html body .mob-nav-btn.active::after,
html body #settings-panel .mtop-btn.active::after,
html body .mtop-btn.active::after,
html body #content .px-btn::after,
html body .px-btn::after,
html body #content .accent-btn::after,
html body .accent-btn::after,
html body #content .btn-play-all::after,
html body .btn-play-all::after,
html body #content .ap-btn-play::after,
html body .ap-btn-play::after,
html body #content .px-play-btn::after,
html body .px-play-btn::after,
html body #content .auth-submit::after,
html body .auth-submit::after,
html body #content .karaoke-btn::after,
html body .karaoke-btn::after,
html body #content .karaoke-btn-create::after,
html body .karaoke-btn-create::after,
html body #content .karaoke-btn-join::after,
html body .karaoke-btn-join::after,
html body #content .kr-search-btn::after,
html body .kr-search-btn::after,
html body #content .dm-send::after,
html body .dm-send::after,
html body #content .mz-wavebtn::after,
html body .mz-wavebtn::after,
html body #btn-play#btn-play::after,
html body #exp-play#exp-play::after,
html body #wave-play-btn#wave-play-btn::after {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.10) .75px, transparent .75px);
  background-size: 3.5px 3.5px;
  -webkit-mask-image: radial-gradient(120% 110% at 50% 100%, #000 0%, transparent 78%);
  mask-image: radial-gradient(120% 110% at 50% 100%, #000 0%, transparent 78%);
}

html body #settings-panel .settings-tab.active svg,
html body .settings-tab.active svg,
html body #settings-panel .coll-tab.active svg,
html body .coll-tab.active svg,
html body #settings-panel .admin-tab.active svg,
html body .admin-tab.active svg,
html body #settings-panel .kr-tab.active svg,
html body .kr-tab.active svg,
html body #settings-panel .ap-tab.active svg,
html body .ap-tab.active svg,
html body #settings-panel .px-tab.active svg,
html body .px-tab.active svg,
html body #settings-panel .stab.active svg,
html body .stab.active svg,
html body #settings-panel .exp-tab.active svg,
html body .exp-tab.active svg,
html body #settings-panel .auth-tab.active svg,
html body .auth-tab.active svg,
html body #settings-panel .wave-mode-tab.active svg,
html body .wave-mode-tab.active svg,
html body #settings-panel .mzai-tab.active svg,
html body .mzai-tab.active svg,
html body #settings-panel .mzai-mo.active svg,
html body .mzai-mo.active svg,
html body #settings-panel .search-src-btn.active svg,
html body .search-src-btn.active svg,
html body #settings-panel .wave-src-btn.active svg,
html body .wave-src-btn.active svg,
html body #settings-panel .cc-mode-btn.active svg,
html body .cc-mode-btn.active svg,
html body #settings-panel .cc-scope-btn.active svg,
html body .cc-scope-btn.active svg,
html body #settings-panel .uimode-opt.active svg,
html body .uimode-opt.active svg,
html body #settings-panel .pt-dir-btn.active svg,
html body .pt-dir-btn.active svg,
html body #settings-panel .pt-cmode-btn.active svg,
html body .pt-cmode-btn.active svg,
html body #settings-panel .pt-mouse-btn.active svg,
html body .pt-mouse-btn.active svg,
html body #settings-panel .pt-where-btn.active svg,
html body .pt-where-btn.active svg,
html body #settings-panel .viz-cmode-btn.active svg,
html body .viz-cmode-btn.active svg,
html body #settings-panel .gui-cover-shape-btn.active svg,
html body .gui-cover-shape-btn.active svg,
html body #settings-panel .gui-player-pos-btn.active svg,
html body .gui-player-pos-btn.active svg,
html body #settings-panel .gui-sidebar-pos-btn.active svg,
html body .gui-sidebar-pos-btn.active svg,
html body #settings-panel .text3d-color-btn.active svg,
html body .text3d-color-btn.active svg,
html body #settings-panel .mob-nav-btn.active svg,
html body .mob-nav-btn.active svg,
html body #settings-panel .mtop-btn.active svg,
html body .mtop-btn.active svg,
html body #content .px-btn svg,
html body .px-btn svg,
html body #content .accent-btn svg,
html body .accent-btn svg,
html body #content .btn-play-all svg,
html body .btn-play-all svg,
html body #content .ap-btn-play svg,
html body .ap-btn-play svg,
html body #content .px-play-btn svg,
html body .px-play-btn svg,
html body #content .auth-submit svg,
html body .auth-submit svg,
html body #content .karaoke-btn svg,
html body .karaoke-btn svg,
html body #content .karaoke-btn-create svg,
html body .karaoke-btn-create svg,
html body #content .karaoke-btn-join svg,
html body .karaoke-btn-join svg,
html body #content .kr-search-btn svg,
html body .kr-search-btn svg,
html body #content .dm-send svg,
html body .dm-send svg,
html body #content .mz-wavebtn svg,
html body .mz-wavebtn svg,
html body #btn-play#btn-play svg,
html body #exp-play#exp-play svg,
html body #wave-play-btn#wave-play-btn svg {
  position: relative; z-index: 2;
  fill: #EAF6FB !important;
}

/* подписи внутри кнопок должны лежать поверх волны */
html body #settings-panel .settings-tab.active > *,
html body .settings-tab.active > *,
html body #settings-panel .coll-tab.active > *,
html body .coll-tab.active > *,
html body #settings-panel .admin-tab.active > *,
html body .admin-tab.active > *,
html body #settings-panel .kr-tab.active > *,
html body .kr-tab.active > *,
html body #settings-panel .ap-tab.active > *,
html body .ap-tab.active > *,
html body #settings-panel .px-tab.active > *,
html body .px-tab.active > *,
html body #settings-panel .stab.active > *,
html body .stab.active > *,
html body #settings-panel .exp-tab.active > *,
html body .exp-tab.active > *,
html body #settings-panel .auth-tab.active > *,
html body .auth-tab.active > *,
html body #settings-panel .wave-mode-tab.active > *,
html body .wave-mode-tab.active > *,
html body #settings-panel .mzai-tab.active > *,
html body .mzai-tab.active > *,
html body #settings-panel .mzai-mo.active > *,
html body .mzai-mo.active > *,
html body #settings-panel .search-src-btn.active > *,
html body .search-src-btn.active > *,
html body #settings-panel .wave-src-btn.active > *,
html body .wave-src-btn.active > *,
html body #settings-panel .cc-mode-btn.active > *,
html body .cc-mode-btn.active > *,
html body #settings-panel .cc-scope-btn.active > *,
html body .cc-scope-btn.active > *,
html body #settings-panel .uimode-opt.active > *,
html body .uimode-opt.active > *,
html body #settings-panel .pt-dir-btn.active > *,
html body .pt-dir-btn.active > *,
html body #settings-panel .pt-cmode-btn.active > *,
html body .pt-cmode-btn.active > *,
html body #settings-panel .pt-mouse-btn.active > *,
html body .pt-mouse-btn.active > *,
html body #settings-panel .pt-where-btn.active > *,
html body .pt-where-btn.active > *,
html body #settings-panel .viz-cmode-btn.active > *,
html body .viz-cmode-btn.active > *,
html body #settings-panel .gui-cover-shape-btn.active > *,
html body .gui-cover-shape-btn.active > *,
html body #settings-panel .gui-player-pos-btn.active > *,
html body .gui-player-pos-btn.active > *,
html body #settings-panel .gui-sidebar-pos-btn.active > *,
html body .gui-sidebar-pos-btn.active > *,
html body #settings-panel .text3d-color-btn.active > *,
html body .text3d-color-btn.active > *,
html body #settings-panel .mob-nav-btn.active > *,
html body .mob-nav-btn.active > *,
html body #settings-panel .mtop-btn.active > *,
html body .mtop-btn.active > *,
html body #content .px-btn > *,
html body .px-btn > *,
html body #content .accent-btn > *,
html body .accent-btn > *,
html body #content .btn-play-all > *,
html body .btn-play-all > *,
html body #content .ap-btn-play > *,
html body .ap-btn-play > *,
html body #content .px-play-btn > *,
html body .px-play-btn > *,
html body #content .auth-submit > *,
html body .auth-submit > *,
html body #content .karaoke-btn > *,
html body .karaoke-btn > *,
html body #content .karaoke-btn-create > *,
html body .karaoke-btn-create > *,
html body #content .karaoke-btn-join > *,
html body .karaoke-btn-join > *,
html body #content .kr-search-btn > *,
html body .kr-search-btn > *,
html body #content .dm-send > *,
html body .dm-send > *,
html body #content .mz-wavebtn > *,
html body .mz-wavebtn > *,
html body #btn-play#btn-play > *,
html body #exp-play#exp-play > *,
html body #wave-play-btn#wave-play-btn > * { position: relative; z-index: 2; }

html body #btn-play#btn-play svg,
html body #btn-play#btn-play svg * { fill: #EAF6FB !important; stroke: none !important; }

@media (prefers-reduced-motion: reduce) {
html body #settings-panel .settings-tab.active::before,
html body .settings-tab.active::before,
html body #settings-panel .coll-tab.active::before,
html body .coll-tab.active::before,
html body #settings-panel .admin-tab.active::before,
html body .admin-tab.active::before,
html body #settings-panel .kr-tab.active::before,
html body .kr-tab.active::before,
html body #settings-panel .ap-tab.active::before,
html body .ap-tab.active::before,
html body #settings-panel .px-tab.active::before,
html body .px-tab.active::before,
html body #settings-panel .stab.active::before,
html body .stab.active::before,
html body #settings-panel .exp-tab.active::before,
html body .exp-tab.active::before,
html body #settings-panel .auth-tab.active::before,
html body .auth-tab.active::before,
html body #settings-panel .wave-mode-tab.active::before,
html body .wave-mode-tab.active::before,
html body #settings-panel .mzai-tab.active::before,
html body .mzai-tab.active::before,
html body #settings-panel .mzai-mo.active::before,
html body .mzai-mo.active::before,
html body #settings-panel .search-src-btn.active::before,
html body .search-src-btn.active::before,
html body #settings-panel .wave-src-btn.active::before,
html body .wave-src-btn.active::before,
html body #settings-panel .cc-mode-btn.active::before,
html body .cc-mode-btn.active::before,
html body #settings-panel .cc-scope-btn.active::before,
html body .cc-scope-btn.active::before,
html body #settings-panel .uimode-opt.active::before,
html body .uimode-opt.active::before,
html body #settings-panel .pt-dir-btn.active::before,
html body .pt-dir-btn.active::before,
html body #settings-panel .pt-cmode-btn.active::before,
html body .pt-cmode-btn.active::before,
html body #settings-panel .pt-mouse-btn.active::before,
html body .pt-mouse-btn.active::before,
html body #settings-panel .pt-where-btn.active::before,
html body .pt-where-btn.active::before,
html body #settings-panel .viz-cmode-btn.active::before,
html body .viz-cmode-btn.active::before,
html body #settings-panel .gui-cover-shape-btn.active::before,
html body .gui-cover-shape-btn.active::before,
html body #settings-panel .gui-player-pos-btn.active::before,
html body .gui-player-pos-btn.active::before,
html body #settings-panel .gui-sidebar-pos-btn.active::before,
html body .gui-sidebar-pos-btn.active::before,
html body #settings-panel .text3d-color-btn.active::before,
html body .text3d-color-btn.active::before,
html body #settings-panel .mob-nav-btn.active::before,
html body .mob-nav-btn.active::before,
html body #settings-panel .mtop-btn.active::before,
html body .mtop-btn.active::before,
html body #content .px-btn::before,
html body .px-btn::before,
html body #content .accent-btn::before,
html body .accent-btn::before,
html body #content .btn-play-all::before,
html body .btn-play-all::before,
html body #content .ap-btn-play::before,
html body .ap-btn-play::before,
html body #content .px-play-btn::before,
html body .px-play-btn::before,
html body #content .auth-submit::before,
html body .auth-submit::before,
html body #content .karaoke-btn::before,
html body .karaoke-btn::before,
html body #content .karaoke-btn-create::before,
html body .karaoke-btn-create::before,
html body #content .karaoke-btn-join::before,
html body .karaoke-btn-join::before,
html body #content .kr-search-btn::before,
html body .kr-search-btn::before,
html body #content .dm-send::before,
html body .dm-send::before,
html body #content .mz-wavebtn::before,
html body .mz-wavebtn::before,
html body #btn-play#btn-play::before,
html body #exp-play#exp-play::before,
html body #wave-play-btn#wave-play-btn::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 43 — СЛОЙ ТОНИРОВКИ БАННЕРОВ
   Цвета слайдов заданы макетом и не трогаются. Тон обложки кладётся сверху
   одним слоем в режиме color: меняется только оттенок, светлота остаётся
   макетной — поэтому баннер не может стать чёрным.
   ═══════════════════════════════════════════════════════════════════════ */
.mz-tint {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  mix-blend-mode: color;
  background: rgb(var(--mz-tint-rgb, 0 0 0));
  opacity: var(--mz-tint-a, 0);
  transition: opacity .5s ease, background-color .5s ease;
}
/* подписи и кнопки слайда лежат выше тонировки */
[data-track] > div > div:last-of-type { position: relative; z-index: 5; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 44 — ЗНАЧКИ БЕЗ FILL
   У части значков в разметке нет атрибута fill, а значение по умолчанию —
   чёрный. Цвет текста кнопки на них не распространяется, поэтому глаз,
   разворот, видео и плюс-минус рисовались чёрными. Наследуем currentColor.
   ═══════════════════════════════════════════════════════════════════════ */
html body button svg:not([fill]),
html body a svg:not([fill]),
html body [role="button"] svg:not([fill]),
html body [onclick] svg:not([fill]) { fill: currentColor; }

html body #lyrics-sync-status svg { fill: currentColor; }
html body #lyrics-sync-status .ly-tool-btn,
html body #lyrics-sync-status .ly-tool-icon,
html body #lyrics-sync-status button { color: #E8F1F5 !important; }
html body #ly-delay-ctrl button { color: #E8F1F5 !important; }
html body #ly-delay-ctrl svg { fill: currentColor; }

/* значок ни при каких темах не должен уходить в чёрный */
html body button svg[fill="#000"],
html body button svg[fill="#000000"],
html body button svg[fill="black"] { fill: currentColor !important; }

/* Табы развёрнутого плеера (Винил / Стемы / Табы) — подписи были чёрными
   в любом состоянии, а не только у выбранного. */
html body #exp-player .exp-tab,
html body .exp-tab,
html body .exp-tab.active,
html body #exp-player .exp-tab.active {
  color: #EAF6FB !important;
  text-shadow: none !important;
}
html body .exp-tab svg,
html body .exp-tab.active svg { fill: #EAF6FB !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 45 — СЕРДЦЕ И ОТСТУПЫ САЙДБАРА
   ═══════════════════════════════════════════════════════════════════════ */

/* Между «Ещё» и «Избранное» зазор складывался из трёх мест: gap самого
   сайдбара, нижнего отступа списка навигации и верхнего у плашки. */
html body #sidebar#sidebar { gap: 8px !important; }
html body #sidebar#sidebar #px-nav {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
html body #sidebar#sidebar #sidebar-liked {
  margin-top: 0 !important;
}
html body #sidebar#sidebar #sidebar-playlists { margin-top: 10px !important; }

/* Сердце: крупнее, ровно по центру, фон — лента «Моей волны» */
html body .sidebar-liked-icon {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  isolation: isolate;
  background: #0A1620 !important;
  background-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #EAF6FB !important;
}
html body .sidebar-liked-icon::before {
  content: '';
  position: absolute; left: -45%; right: -45%; top: -20%; height: 150%;
  border-radius: 46% 54% 52% 48% / 58% 55% 45% 42%;
  filter: blur(9px);
  z-index: 0;
  background: linear-gradient(90deg,
    rgba(64,110,220,.35) 0%,
    rgba(64,110,220,.9) 18%,
    rgba(150,236,252,1) 42%,
    rgba(150,236,252,1) 58%,
    rgba(168,130,252,.9) 82%,
    rgba(168,130,252,.35) 100%);
  animation: mzWaveRun 7s ease-in-out infinite;
}
html body .sidebar-liked-icon::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 5px 5px;
  -webkit-mask-image: radial-gradient(120% 110% at 50% 100%, #000 0%, transparent 78%);
  mask-image: radial-gradient(120% 110% at 50% 100%, #000 0%, transparent 78%);
}
html body .sidebar-liked-icon svg {
  position: relative; z-index: 2;
  width: 17px !important; height: 17px !important;
  display: block;
  fill: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 47 — ЧИТАЕМОСТЬ ПОДПИСЕЙ НА КНОПКАХ
   Размытая лента подсвечивала буквы снизу и подпись выглядела мыльной.
   Под текстом добавлена плотная подложка, сам текст — чуть жирнее.
   ═══════════════════════════════════════════════════════════════════════ */
html body .coll-tab.active,
html body .settings-tab.active,
html body .exp-tab.active,
html body .admin-tab.active,
html body .kr-tab.active,
html body .ap-tab.active,
html body .px-tab.active,
html body .cc-mode-btn.active,
html body .cc-scope-btn.active,
html body .px-btn,
html body .accent-btn,
html body .mz-wavebtn {
  font-weight: 600 !important;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 48 — ЕДИНАЯ ПОДСТРОЙКА ПОД ОБЛОЖКУ
   Значение по умолчанию живёт здесь, поэтому rgba(var(--mz-tint-rgb),…)
   валиден всегда. Модуль 33-tint.js переопределяет его на :root, а когда
   трека нет — снимает, и всё возвращается к этому запасному цвету.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --mz-tint-rgb: 79,196,222; }

@keyframes lightGlow { 0%,100% { opacity:.5; } 50% { opacity:.95; } }

html body .mz-quick {
  background: rgba(var(--mz-tint-rgb),.06) !important;
  border: 1px solid rgba(var(--mz-tint-rgb),.16) !important;
  transition: background .5s ease, border-color .5s ease;
}
html body .mz-quick:hover { background: rgba(var(--mz-tint-rgb),.11) !important; }

html body .mz-quick-glow {
  position: absolute; right: -30px; top: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(var(--mz-tint-rgb),.5);
  filter: blur(30px);
  animation-name: lightGlow;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transition: background .5s ease;
  pointer-events: none;
}

html body .mz-quick-ico {
  position: relative; overflow: hidden;
  width: 46px; height: 46px; flex: none;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background-image:
    radial-gradient(120% 110% at 28% 18%, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(150deg, rgba(var(--mz-tint-rgb),.95) 0%, rgba(var(--mz-tint-rgb),.42) 55%, rgba(6,12,18,.92) 100%);
  box-shadow: 0 10px 24px -12px rgba(var(--mz-tint-rgb),.6), inset 0 1px 0 rgba(255,255,255,.24);
  transition: background-image .5s ease, box-shadow .5s ease;
}

/* плейлисты дня и плитки — тот же источник цвета */
html body .mz-cut-sheen {
  background: linear-gradient(115deg,
    rgba(var(--mz-tint-rgb),0)   26%,
    rgba(var(--mz-tint-rgb),.4)  44%,
    rgba(235,245,255,.5)         50%,
    rgba(var(--mz-tint-rgb),.4)  56%,
    rgba(var(--mz-tint-rgb),0)   74%) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .mz-quick-glow { animation: none; opacity: .7; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 50 — КЛИП-ФОН ПОДЛОЖКОЙ
   26-clips.js кладёт <video> первым ребёнком контейнера текста, но своих
   стилей у него не было ни одного — обычный блок в потоке раздвигал плеер
   и уводил текст вниз. Ставим его подложкой, содержимое поднимаем над ним.
   ═══════════════════════════════════════════════════════════════════════ */
/* #exp-player трогать нельзя: он position:fixed; inset:0, и любой relative
   поверх него схлопывает развёрнутый плеер. Как содержащий блок для
   подложки fixed работает точно так же. */
html body #exp-lyrics-content { position: relative; }

html body #mzclip-bgv {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* затемнение поверх кадра, иначе строчки теряются на светлых планах */
html body #exp-lyrics-content:has(#mzclip-bgv)::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%,
    rgba(4,8,13,.35) 0%, rgba(4,8,13,.62) 62%, rgba(4,8,13,.82) 100%);
}

html body #exp-lyrics-content > *:not(#mzclip-bgv) { position: relative; z-index: 2; }

html body #mzclip-bg-badge {
  position: absolute !important;
  top: 12px; right: 14px; z-index: 6;
  display: flex; align-items: center; gap: 9px;
  height: 28px; padding: 0 11px;
  border-radius: 9px;
  background: rgba(6,12,18,.72);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  font-size: 12.5px;
  color: rgba(232,241,245,.85);
  cursor: pointer;
  user-select: none;
}
html body #mzclip-bg-badge:hover { background: rgba(6,12,18,.9); color: #EAF6FB; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 53 — КЛИПЫ НА СТРАНИЦЕ АРТИСТА
   Блок собирался в 26-clips.js, но ни одного правила под .ap-clip* в
   таблице не было: кадры выводились в натуральную величину столбиком.
   ═══════════════════════════════════════════════════════════════════════ */
html body #ap-clips {
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 44px 6px;
}
html body #ap-clips .ap-clips-h {
  font-family: 'Unbounded', sans-serif !important;
  font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: #5C6E7C;
}
html body #ap-clips .ap-clips-row {
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
html body #ap-clips .ap-clips-row::-webkit-scrollbar { height: 6px; }
html body #ap-clips .ap-clips-row::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14); border-radius: 3px;
}
html body #ap-clips .ap-clip-card {
  flex: 0 0 auto;
  width: 248px;
  display: flex; flex-direction: column; gap: 9px;
  cursor: pointer;
}
html body #ap-clips .ap-clip-thumb {
  position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(150deg,#101A22,#070B0F);
  border: 1px solid rgba(255,255,255,.07);
  transition: border-color .2s ease, transform .2s ease;
}
html body #ap-clips .ap-clip-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
html body #ap-clips .ap-clip-card:hover .ap-clip-thumb {
  border-color: rgba(var(--mz-tint-rgb),.45);
  transform: translateY(-2px);
}
html body #ap-clips .ap-clip-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,12,17,.62);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  color: #fff;
  opacity: 0; transition: opacity .2s ease;
}
html body #ap-clips .ap-clip-card:hover .ap-clip-play { opacity: 1; }
html body #ap-clips .ap-clip-dur {
  position: absolute; right: 8px; bottom: 8px;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(0,0,0,.68);
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11.5px; color: #fff;
}
html body #ap-clips .ap-clip-t {
  font-size: 13.5px; line-height: 1.35;
  color: rgba(232,241,245,.72);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
html body #ap-clips .ap-clip-card:hover .ap-clip-t { color: #E8F1F5; }

@media (max-width: 900px) {
  html body #ap-clips { padding: 20px 16px 4px; }
  html body #ap-clips .ap-clip-card { width: 200px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 54 — ЛОГОТИП ВХОДА И ГОСТЕВОЙ РЕЖИМ
   ═══════════════════════════════════════════════════════════════════════ */
html body #auth-logo {
  width: 92px; height: 92px;
  display: block; flex: none;
  filter: drop-shadow(0 16px 34px rgba(79,196,222,.28));
  animation: mzLogoFloat 7s ease-in-out infinite;
}
@keyframes mzLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  html body #auth-logo { animation: none; }
}

/* Гость: окно входа — накладка поверх сайта, а не глухая стена */
html body.is-guest #auth-screen {
  background: rgba(4, 8, 13, .72);
  backdrop-filter: blur(14px) saturate(120%);
}
html body #auth-close { display: none; }
html body.is-guest #auth-close {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 22px; right: 24px;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(232,241,245,.7);
  font-size: 15px; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
html body.is-guest #auth-close:hover {
  background: rgba(255,255,255,.12); color: #E8F1F5;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 56 — МОБИЛЬНЫЙ ИНТЕРФЕЙС ПО МАКЕТУ (M1–M4)
   Перенос «Мобильный дизайн.dc.html»: экраны Главная / Плеер / Коллекция /
   Настройки. Часть разметки главной собирается в 29-hero.js инлайновыми
   стилями из макета — их можно перебить только !important, отсюда он здесь.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --mzm-bg: #04070B;
    --mzm-txt: #E8F1F5;
    --mzm-dim: rgba(232,241,245,.42);
    --mzm-dim2: rgba(232,241,245,.6);
    --mzm-cy: #4FC4DE;
    --mzm-cy-lt: #7FE3F5;
    --mzm-cy-hi: #9BE8F8;
    --mzm-card: rgba(255,255,255,.05);
    --mzm-line: rgba(255,255,255,.07);
  }

  html body, html body #content, html body #main-grid { background: var(--mzm-bg) !important; }
  html body { color: var(--mzm-txt); }

  /* ── ВЕРХНЯЯ ПАНЕЛЬ ─────────────────────────────────────────────── */
  html body #mobile-topbar {
    background: rgba(4,7,11,.86);
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  html body #mtop-title {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  }
  html body #mtop-avatar {
    background: linear-gradient(145deg, var(--mzm-cy), #2C6E8A);
    color: #04141B; font-weight: 700;
  }
  html body .mtop-btn.mtop-icon {
    background: var(--mzm-card); border: 1px solid var(--mzm-line);
    color: rgba(232,241,245,.7); border-radius: 12px;
  }

  /* ── НИЖНЯЯ НАВИГАЦИЯ ───────────────────────────────────────────── */
  html body #mobile-nav {
    background: rgba(4,7,11,.94) !important;
    border-top: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
  }
  html body .mob-nav-btn { color: var(--mzm-dim); gap: 5px; padding: 8px 0 4px; }
  html body .mob-nav-btn span {
    font-size: 10.5px; font-weight: 500; opacity: 1; letter-spacing: 0;
  }
  html body .mob-nav-btn.active,
  html body .mob-nav-btn.active span { color: var(--mzm-cy-lt); }
  html body .mob-nav-btn.active span { font-weight: 600; }
  /* Макет обходится без подложки-таблетки — цвета достаточно. */
  html body .mob-nav-btn.active::before { display: none; }
  html body .mob-nav-btn.active svg { transform: none; }

  /* ── МИНИ-ПЛЕЕР ─────────────────────────────────────────────────── */
  html body #player-bar {
    left: 12px; right: 12px; width: auto;
    bottom: calc(var(--mob-nav-h) + env(safe-area-inset-bottom, 0px) + 8px);
    height: 60px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(12,26,34,.92) !important;
    backdrop-filter: blur(20px);
    padding: 0 12px;
    overflow: hidden;
  }
  html body #player-cover-wrap { width: 40px; height: 40px; border-radius: 10px; }
  html body #player-title { font-size: 13.5px; font-weight: 500; }
  html body #player-artist { font-size: 11.5px; color: var(--mzm-dim); }
  html body #player-bar .px-play-btn {
    width: 34px; height: 34px;
    background: transparent !important; color: var(--mzm-txt) !important;
    border: none;
  }
  html body #player-bar .px-play-btn svg { width: 22px; height: 22px; }
  html body #progress-fill { background: var(--mzm-cy); }

  /* ── M2 · РАЗВЁРНУТЫЙ ПЛЕЕР ─────────────────────────────────────── */
  html body #exp-cover-wrap {
    width: min(84vw, 342px); height: min(74vw, 300px);
    border-radius: 24px;
    box-shadow: 0 40px 70px -34px rgba(108,92,231,.6);
    margin: 18px auto;
  }
  html body #exp-title {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 22px; font-weight: 600; letter-spacing: -.01em;
  }
  html body #exp-artist { font-size: 14px; color: rgba(232,241,245,.5); }
  html body #exp-progress-wrap #progress-bar,
  html body #exp-player #progress-bar { height: 4px; border-radius: 2px; }
  html body #exp-player #progress-fill {
    border-radius: 2px;
    background: linear-gradient(90deg, var(--mzm-cy), var(--mzm-cy-hi));
  }
  html body #exp-player #progress-thumb {
    display: block; width: 12px; height: 12px; border-radius: 50%;
    background: #EAF7FB; box-shadow: 0 0 12px -2px var(--mzm-cy);
  }
  html body #exp-player #time-current,
  html body #exp-player #time-total {
    display: block;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11.5px; color: rgba(232,241,245,.45);
  }
  html body #exp-play {
    width: 70px; height: 70px; border-radius: 50%;
    background: linear-gradient(180deg,#EAF7FB,var(--mzm-cy-hi)) !important;
    color: #04141B !important;
    box-shadow: 0 16px 34px -18px rgba(0,0,0,.7);
  }
  html body #exp-play svg { width: 30px; height: 30px; }

  /* ── M3 · КОЛЛЕКЦИЯ ─────────────────────────────────────────────── */
  html body #view-collection .view-header,
  html body .coll-header h1,
  html body .coll-title {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 26px; font-weight: 700; letter-spacing: -.01em;
  }
  html body .collection-tabs, html body .coll-tabs {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
  }
  html body .collection-tabs::-webkit-scrollbar,
  html body .coll-tabs::-webkit-scrollbar { display: none; }
  html body .coll-tab {
    flex: 0 0 auto;
    padding: 8px 15px; border-radius: 11px;
    font-size: 13.5px; font-weight: 500;
    background: var(--mzm-card); color: var(--mzm-dim2); border: none;
  }
  html body .coll-tab.active {
    background: linear-gradient(180deg,#333A42,#1E242A);
    color: #EAF3F7; font-weight: 600;
  }
  html body .track-row, html body .ap-track-list > * { min-height: 62px; }
  html body .track-row .tr-cover,
  html body .track-row img.ym-cover {
    width: 44px; height: 44px; border-radius: 11px;
  }
  html body .track-row .tr-dur, html body .track-row .ym-dur {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px; color: rgba(232,241,245,.35);
  }

  /* ── M4 · НАСТРОЙКИ ─────────────────────────────────────────────── */
  html body #settings-panel { border-radius: 0; }
  html body #settings-panel .settings-label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11.5px; letter-spacing: .1em; color: var(--mzm-cy-lt);
  }
  html body #settings-panel .cc-mode-seg,
  html body #settings-panel .cc-scope-seg {
    display: flex; gap: 7px; padding: 4px;
    border-radius: 13px; background: var(--mzm-card);
    overflow-x: auto; scrollbar-width: none;
  }
  html body #settings-panel .cc-mode-btn,
  html body #settings-panel .cc-scope-btn {
    flex: 1 0 auto; text-align: center;
    padding: 8px 12px; border-radius: 10px;
    font-size: 12.5px; font-weight: 500;
    background: transparent; color: var(--mzm-dim2); border: none;
  }
  html body #settings-panel .cc-mode-btn.active,
  html body #settings-panel .cc-scope-btn.active {
    background: linear-gradient(180deg,#333A42,#1E242A);
    color: #EAF3F7; font-weight: 600;
  }
  /* Переключатели: один размер и один цвет по всему экрану (46×27, ход 22px) */
  html body .px-toggle-track {
    width: 46px !important; height: 27px !important; border-radius: 14px !important;
    background: rgba(255,255,255,.13) !important;
    transition: background .2s ease;
  }
  html body .px-toggle-track::after {
    width: 21px !important; height: 21px !important;
    top: 3px !important; left: 3px !important;
    border-radius: 50% !important; background: #fff !important;
    transition: left .2s ease;
  }
  html body .px-toggle input:checked + .px-toggle-track {
    background: var(--mz-ui-accent, var(--mzm-cy)) !important;
  }
  html body .px-toggle input:checked + .px-toggle-track::after { left: 22px !important; }
  html body .toggle-row { min-height: 46px; font-size: 14px; }

  /* ── M1 · ГЛАВНАЯ (баннер и полки из 29-hero.js) ────────────────── */
  html body #mz-home { padding: 14px 20px 24px !important; gap: 22px !important; }
  /* Баннер: одна карточка 312px вместо десктопных 380px.
     Только для десктопной карусели — на мобильной главной первый ребёнок
     это строка приветствия, и она растягивалась на всю высоту баннера. */
  html body #mz-home > div:first-child:has([data-track]) { height: 312px !important; border-radius: 24px !important; }
  html body #mz-home [data-track] > div > div:last-of-type {
    padding: 0 22px !important; max-width: none !important;
    align-items: center !important; text-align: center !important; gap: 12px !important;
  }
  /* Заголовок слайда — 66px из макета для десктопа, здесь 30px */
  html body #mz-home [data-track] > div > div:last-of-type > span:nth-of-type(2) {
    font-size: 30px !important; line-height: 1.1 !important;
  }
  html body #mz-home [data-track] > div > div:last-of-type > span:nth-of-type(3) {
    font-size: 13.5px !important; max-width: none !important;
  }
  html body #mz-home [data-track] > div > div:last-of-type > button {
    margin: 4px auto 0 !important; height: 48px !important;
  }
  /* Стрелки листания пальцем не нужны, точки оставляем и центрируем */
  html body #mz-home [data-nav] { display: none !important; }
  html body #mz-home [data-dots] {
    left: 0 !important; right: 0 !important;
    justify-content: center !important; bottom: 14px !important;
  }
  /* Полки: 4 и 5 колонок из макета не влезают в 390px */
  html body #mz-home div[style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  html body #mz-home div[style*="repeat(5,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  html body #mz-home div[style*="repeat(6,1fr)"] { grid-template-columns: 1fr 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .mob-nav-btn.active svg { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 57 — ЕДИНЫЙ АКЦЕНТ И ТОН «МОЕЙ ВОЛНЫ»
   Тумблеры и полоса прослушивания были прибиты к #4FC4DE в трёх разных
   местах, поэтому не слушались обложки и отличались друг от друга.
   Теперь у всех один источник — --mz-ui-accent.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --mz-ui-accent: var(--accent, #4FC4DE); }
/* Когда раскраска по обложке включена, берём тот же разобранный цвет, что и
   звуковая волна под текстом (--cover-rgb), а не тему. Выключена — тема. */
/* значение ставит 23-cover-color.js; здесь только запасной цвет темы */

/* ── ТУМБЛЕРЫ ───────────────────────────────────────────────────────── */
html body .px-toggle input:checked + .px-toggle-track,
html body #settings-panel .px-toggle input:checked + .px-toggle-track,
html body .offline-filter-toggle input:checked + .offline-filter-track {
  background: var(--mz-ui-accent) !important;
}

/* ── ПОЛОСА ПРОСЛУШИВАНИЯ ───────────────────────────────────────────── */
html body #progress-fill,
html body #exp-progress-fill,
html body #player-progress-fill,
html body .ym-progress-fill,
html body #seek-fill {
  background: var(--mz-ui-accent) !important;
}
html body #progress-thumb,
html body #exp-progress-thumb {
  background: var(--mz-ui-accent) !important;
  box-shadow: 0 0 12px -2px var(--mz-ui-accent) !important;
}

/* ── «МОЯ ВОЛНА»: БАННЕР ПОД ОБЛОЖКУ ────────────────────────────────
   Слайд собирается в 29-hero.js инлайновыми стилями из макета, слой
   .mz-tint в режиме color менял только оттенок и на почти чёрном фоне
   был не виден. Красим сам слайд от --mz-tint-rgb.                    */
html body #mz-home [data-track] > div:nth-of-type(1) {
  background: radial-gradient(120% 120% at 75% 40%,
    rgba(var(--mz-tint-rgb),.34) 0%,
    rgba(var(--mz-tint-rgb),.10) 45%,
    #05090E 100%) !important;
}
html body #mz-home [data-track] > div:nth-of-type(1) > div:first-of-type > div {
  background: linear-gradient(90deg,
    rgba(var(--mz-tint-rgb),0)   0%,
    rgba(var(--mz-tint-rgb),.72) 22%,
    rgba(var(--mz-tint-rgb),1)   50%,
    rgba(var(--mz-tint-rgb),.72) 78%,
    rgba(var(--mz-tint-rgb),0)   100%) !important;
  background-size: 200% 100% !important;
}
/* ВАЖНО: только background-image. Шорткат background сбрасывает
   background-clip в border-box, и заголовок превращался в цветной прямоугольник. */
html body #mz-home [data-track] > div:nth-of-type(1) > div:last-of-type > span:nth-of-type(2) {
  background-image: linear-gradient(180deg, #FFFFFF, rgb(var(--mz-tint-rgb))) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
/* Свечение кнопок баннера было синим при любой обложке */
html body #mz-home [data-track] > div:nth-of-type(1) button[data-act] {
  background: linear-gradient(180deg,
    rgba(var(--mz-tint-rgb),.92), rgb(var(--mz-tint-rgb))) !important;
  box-shadow: 0 14px 34px -12px rgba(var(--mz-tint-rgb),.75) !important;
}

/* ── ОБРЕЗАННЫЕ ХВОСТЫ БУКВ В ЗАГОЛОВКЕ БАННЕРА ─────────────────────
   line-height .92 + background-clip:text срезает нижний выносной
   элемент («у», «y», «р»). Добавляем воздух, не трогая макетный кегль. */
html body #mz-home [data-track] > div > div:last-of-type > span:nth-of-type(2) {
  line-height: 1.04 !important;
  padding-bottom: .1em !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 60 — БЕЗ ОБВОДКИ НА ПЛИТКАХ
   Кольцо вокруг обложки артиста — глобальный фокус-ринг
   (:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }).
   Плитка — это div с обработчиком клика, поэтому после нажатия она получала
   фокус и оставалась обведённой. Снимаем его с карточек, оставляя настоящим
   органам управления: клавиатурная навигация не должна ослепнуть.
   ═══════════════════════════════════════════════════════════════════════ */
html body #mz-home [data-artist],
html body #mz-home [data-artist]:focus,
html body #mz-home [data-artist]:focus-visible,
html body #mz-home [data-artist] *,
html body #mz-home [data-artist] *:focus,
html body #mz-home [data-artist] *:focus-visible,
html body #mz-home [data-view]:focus,
html body #mz-home [data-view]:focus-visible,
html body #mz-home [data-pl]:focus,
html body #mz-home [data-pl]:focus-visible,
html body .ap-avatar:focus,
html body .ap-avatar:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Фокус-ринг — только настоящим элементам управления, не карточкам-дивам */
html body div:focus-visible,
html body span:focus-visible,
html body li:focus-visible { outline: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 61 — МОБИЛЬНАЯ ВЁРСТКА ПО МАКЕТУ «Мобильный дизайн» (M1/M5)
   Корень поломки: #sidebar объявлен как
       width: var(--sidebar) !important; min-width: var(--sidebar) !important;
   и старые мобильные правила (без !important) его не пересиливали. Боковая
   панель держала колонку в 320px внутри flex-строки, страница становилась
   шире экрана, Safari её ужимал — отсюда и шов посередине, и логотип в
   пустоте, и «десктопный» плеер. Гасим ширину, а не только видимость.
   Порог поднят до 900px: между 641 и 768 была мёртвая зона, где мобильная
   обвязка уже включалась, а боковая панель ещё жила.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html, body { max-width: 100vw; overflow-x: hidden; }

  html body #sidebar {
    display: none !important;
    width: 0 !important; min-width: 0 !important; max-width: 0 !important;
    margin: 0 !important; padding: 0 !important; border: none !important;
  }
  html body #sidebar-logo,
  html body #sidebar-liked,
  html body #sidebar-playlists,
  html body #sidebar-footer,
  html body #px-nav,
  html body #profile-bar,
  html body #sidebar-resize-handle { display: none !important; }

  html body #app {
    flex-direction: column !important;
    width: 100% !important; max-width: 100vw !important;
  }
  html body #main-grid,
  html body #content {
    width: 100% !important; max-width: 100vw !important; min-width: 0 !important;
  }

  /* Отладочная кнопка визуализатора */
  html body #mzd-toggle { display: none !important; }

  /* ── МИНИ-ПЛЕЕР (макет: 40px обложка, скругление 16, тонкий прогресс) ── */
  html body #player-bar {
    left: 12px; right: 12px; width: auto;
    bottom: calc(var(--mob-nav-h, 58px) + env(safe-area-inset-bottom, 0px) + 8px);
    height: 56px;
    padding: 8px 12px; gap: 11px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(12,26,34,.92) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 18px 40px -22px #000;
    overflow: hidden;
  }
  html body #player-left {
    flex: 1; width: auto; min-width: 0; max-width: none; gap: 11px;
  }
  html body #player-cover-wrap {
    width: 40px; height: 40px; border-radius: 10px; flex: none;
  }
  html body #player-info { min-width: 0; flex: 1; }
  html body #player-title { font-size: 13.5px; font-weight: 500; }
  html body #player-artist { font-size: 11.5px; color: rgba(232,241,245,.42); }

  /* В макете рядом с названием только сердце и play/pause */
  html body #player-right { display: none !important; }
  /* перемотку оставляем: без «дальше» и «назад» плеером неудобно пользоваться */
  html body #btn-shuffle,
  html body #btn-repeat { display: none !important; }
  html body #time-current,
  html body #time-total { display: none !important; }

  html body #player-center { flex: none; }
  html body #player-controls { gap: 0; }
  html body #btn-play.px-play-btn {
    width: 30px; height: 30px; flex: none;
    background: transparent !important;
    color: #E8F1F5 !important;
    box-shadow: none !important;
    border: none !important;
  }
  html body #btn-play.px-play-btn svg { width: 22px; height: 22px; }
  html body #btn-like { flex: none; color: #FF6B8A; }
  html body #btn-like svg { width: 21px; height: 21px; }

  /* Прогресс — волоском по верхней кромке карточки */
  html body #player-progress-wrap {
    position: absolute; left: 0; right: 0; top: 0; bottom: auto;
    height: 2px; padding: 0; gap: 0;
  }
  html body #player-bar #progress-bar {
    height: 2px; border-radius: 0; background: rgba(255,255,255,.12);
  }
  html body #player-bar #progress-fill { border-radius: 0; }
  html body #player-bar #progress-thumb { display: none !important; }

  /* Нижние вкладки: без рамки фокуса после тапа */
  html body .mob-nav-btn:focus,
  html body .mob-nav-btn:focus-visible { outline: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 62 — БЕЗ СВЕЧЕНИЯ НА КНОПКАХ ПЛЕЕРА
   ЭТАП 42 вешал на кнопки два псевдоэлемента: ::before — размытое цветное
   пятно, ::after — точечная сетка. На маленькой кнопке в мини-плеере это
   читается как грязь и подсветка вокруг круга.
   Селекторы там с удвоенным идентификатором (#btn-play#btn-play = 2,0,0),
   поэтому обычные мобильные правила их не пересиливали — повторяем приём.
   ═══════════════════════════════════════════════════════════════════════ */
html body #btn-play#btn-play::before,
html body #btn-play#btn-play::after { display: none !important; content: none !important; }

@media (max-width: 900px) {
  html body #btn-play#btn-play::before,
  html body #btn-play#btn-play::after,
  html body #exp-play#exp-play::before,
  html body #exp-play#exp-play::after,
  html body #wave-play-btn#wave-play-btn::before,
  html body #wave-play-btn#wave-play-btn::after,
  html body .mz-wavebtn::before,
  html body .mz-wavebtn::after { display: none !important; content: none !important; }

  /* Мини-плеер: перебиваем ЭТАП 42 тем же удвоенным идентификатором */
  html body #player-bar #btn-play#btn-play {
    width: 30px !important; height: 30px !important;
    min-width: 0 !important; min-height: 0 !important;
    padding: 0 !important; flex: none !important;
    background: transparent !important;
    background-image: none !important;
    color: #E8F1F5 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
  html body #player-bar #btn-play#btn-play svg { width: 22px !important; height: 22px !important; }
  html body #player-bar #btn-play#btn-play svg * { fill: #E8F1F5 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 64 — НИКАКИХ ОБВОДОК
   Кольцо вокруг обложек убирается везде и во всех состояниях. Точечные
   правила (ЭТАП 60) не помогли, поэтому глушим сам механизм: outline на
   любом элементе в любом состоянии фокуса. Клавиатурная подсветка при этом
   пропадает — так и просили.
   ═══════════════════════════════════════════════════════════════════════ */
html body *,
html body *::before,
html body *::after,
html body *:focus,
html body *:focus-within,
html body *:focus-visible,
html body *:active,
html body *:hover {
  outline: none !important;
  outline-offset: 0 !important;
  outline-width: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* На случай, если кольцо рисовалось тенью, а не outline: возвращаем плитке
   артиста ровно ту тень, что задана макетом, и ничего сверх. */
html body #mz-home [data-artist] > div:first-child {
  box-shadow: 0 18px 38px -20px #000, inset 0 1px 0 rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
html body #mz-home [data-artist]:hover > div:first-child,
html body #mz-home [data-artist]:focus > div:first-child,
html body #mz-home [data-artist]:active > div:first-child {
  box-shadow: 0 18px 38px -20px #000, inset 0 1px 0 rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.08) !important;
  filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 65 — АНИМАЦИИ ЭКРАНА M1 (перенесены из макета как есть)
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes mWaveA {
  0%   { transform: translate3d(-6%,30%,0) rotate(-6deg) scaleX(1);    border-radius:46% 54% 58% 42%/60% 62% 38% 40%; opacity:.55; }
  25%  { transform: translate3d(-1%,6%,0)  rotate(3deg)  scaleX(1.1);  border-radius:58% 42% 45% 55%/40% 45% 55% 60%; opacity:.85; }
  50%  { transform: translate3d(6%,-26%,0) rotate(6deg)  scaleX(1.18); border-radius:40% 60% 55% 45%/55% 40% 60% 45%; opacity:1; }
  75%  { transform: translate3d(2%,5%,0)   rotate(-2deg) scaleX(1.08); border-radius:55% 45% 42% 58%/45% 58% 42% 55%; opacity:.85; }
  100% { transform: translate3d(-6%,30%,0) rotate(-6deg) scaleX(1);    border-radius:46% 54% 58% 42%/60% 62% 38% 40%; opacity:.55; }
}
@keyframes mWaveB {
  0%   { transform: translate3d(5%,26%,0)   rotate(5deg)  scaleX(1.12); border-radius:55% 45% 42% 58%/45% 55% 45% 55%; opacity:.6; }
  33%  { transform: translate3d(-2%,2%,0)   rotate(-4deg) scaleX(1);    border-radius:42% 58% 55% 45%/58% 42% 55% 45%; opacity:.9; }
  66%  { transform: translate3d(-5%,-22%,0) rotate(4deg)  scaleX(1.14); border-radius:58% 42% 45% 55%/42% 58% 40% 60%; opacity:1; }
  100% { transform: translate3d(5%,26%,0)   rotate(5deg)  scaleX(1.12); border-radius:55% 45% 42% 58%/45% 55% 45% 55%; opacity:.6; }
}
@keyframes mHue  { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes mFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@media (max-width: 900px) {
  html body #mz-home > div { flex: none; }
  html body #mz-home [style*="overflow-x:auto"]::-webkit-scrollbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body #mz-home [style*="mWaveA"],
  html body #mz-home [style*="mWaveB"],
  html body #mz-home [style*="mFloat"] { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 66 — РАМКА ПЛИТОК И ЦЕНТР КНОПКИ
   «Обводка» вокруг обложек оказалась не outline и не тенью: у плитки в
   разметке есть border 1px rgba(255,255,255,.08), а фон под ним — синий
   градиент AG. Фон по умолчанию доходит до border-box, поэтому сквозь
   полупрозрачную рамку просвечивал синий: замер дал ровно #204057.
   Поэтому все попытки убрать outline и тень ничего не меняли.
   ═══════════════════════════════════════════════════════════════════════ */
html body #mz-home [data-artist] > div:first-child,
html body #mz-home [data-artist]:hover > div:first-child,
html body #mz-home [data-artist]:focus > div:first-child,
html body #mz-home [data-artist]:active > div:first-child {
  border: 0 !important;
  background-clip: padding-box !important;
  box-shadow: 0 18px 38px -20px #000 !important;
}

/* Кнопка воспроизведения: значок стоял выше и левее центра — спаны с
   иконками остаются строчными, и их тянет базовая линия текста. */
html body #btn-play#btn-play,
html body #exp-play#exp-play {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
}
/* display у спанов не трогаем: скрытые значки паузы и загрузки помечены
   инлайновым display:none, и !important показывал сразу все три. */
html body #btn-play#btn-play > span,
html body #exp-play#exp-play > span { line-height: 0 !important; }
html body #btn-play#btn-play svg,
html body #exp-play#exp-play svg { display: block !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 67 — ПОСЛЕ ПРОВЕРКИ НА ТЕЛЕФОНЕ
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Мини-плеер стал плавающей карточкой на 56px с отступом 8px — контент
     должен заканчиваться выше него, иначе последний блок уезжает под неё. */
  html body #content {
    padding-bottom: calc(var(--mob-nav-h, 58px) + 56px + 8px + 20px
                         + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Активная вкладка: ЭТАП 42 раздаёт всем кнопкам подложку, рамку и
     свечение, а .mob-nav-btn.active попала в тот же список — под подписью
     появлялась плашка, которой в макете нет. */
  html body .mob-nav-btn,
  html body .mob-nav-btn.active,
  html body #settings-panel .mob-nav-btn.active {
    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    isolation: auto !important;
  }
  html body .mob-nav-btn::before,
  html body .mob-nav-btn::after,
  html body .mob-nav-btn.active::before,
  html body .mob-nav-btn.active::after { display: none !important; content: none !important; }

  /* Главная: между блоками ровно тот шаг, что в макете */
  html body #mz-home > * { flex: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 68 — АКЦЕНТ ОБЛОЖКИ НА МЕЛКИХ ЭЛЕМЕНТАХ
   --mz-ui-accent теперь ставит сам парсер обложки (23-cover-color.js),
   поэтому привязка к атрибуту data-cover больше не нужна: она не работала,
   когда раскраска по обложке выключена в настройках, и полоса оставалась
   бирюзовой из темы (замер дал ровно #4FC4DE).
   ═══════════════════════════════════════════════════════════════════════ */
html body .ly-notes,
html body .ly-notes span {
  color: var(--mz-ui-accent, #4FC4DE) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 69 — КОМПАКТНЕЕ СВЕРХУ И СТРОКИ ЧАРТА
   ═══════════════════════════════════════════════════════════════════════ */
/* Плитка «Мне нравится» — как карточка быстрого доступа, а не большое сердце */
/* фон и градиент лежат в самой разметке — как у карточки быстрого доступа */
html body .ym-coll-heart.mz-liked-tile {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; box-shadow: none;
}

@media (max-width: 900px) {
  /* Верх был слишком просторным: поле поиска, лента источников и заголовок
     секции складывали отступы друг к другу. */
  html body #content { padding-top: calc(var(--mob-top-h, 52px) + env(safe-area-inset-top, 0px)) !important; }
  html body #search-ym-wrap { padding: 8px 16px 6px !important; gap: 8px !important; }
  html body #search-ym-input, html body .search-big {
    height: 44px !important; border-radius: 14px !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    font-size: 14.5px !important;
  }
  html body #search-results:empty { display: none !important; }
  html body #content > div > div[style*="font-weight:800"] { margin: 8px 0 10px !important; }

  /* Строки чарта: были в полтора раза выше макетных */
  html body .home-chart-row {
    padding: 6px 4px !important; gap: 12px !important; border-radius: 12px !important;
  }
  html body .home-chart-cover {
    width: 46px !important; height: 46px !important;
    border-radius: 11px !important; overflow: hidden !important;
  }
  html body .home-chart-cover img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }
  html body .home-chart-pos {
    width: 18px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important; color: rgba(232,241,245,.35) !important;
  }
  html body .home-chart-title { font-size: 14px !important; font-weight: 500 !important; }
  html body .home-chart-artist { font-size: 12.5px !important; color: rgba(232,241,245,.42) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 70 — ОДИН СКРОЛЛЕР И ЭКРАН M2 «ПЛЕЕР»
   Экран открывался уже прокрученным и не возвращался наверх: прокручивалась
   и сама страница, и #content. Скрытая прокрутка страницы уводила шапку и
   верх списка за край, а вернуть её пальцем было нельзя — жест попадал во
   вложенный скроллер. Фиксируем страницу: скроллер на телефоне ровно один.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html, body {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100%; width: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  html body #app { height: 100% !important; }
  html body #content {
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: auto;          /* smooth мешал вернуться пальцем наверх */
  }

  /* ── M2 · ПЛЕЕР ─────────────────────────────────────────────────────
     Раскладка макета: шапка с кнопкой назад и подписью, обложка 24px,
     название/артист, полоса, крупная круглая кнопка, ряд действий.       */
  html body #exp-player { padding: 0 !important; }
  html body #exp-left { padding: 8px 24px 0 !important; }
  html body #exp-cover-wrap {
    width: min(84vw, 342px) !important; height: min(84vw, 342px) !important;
    border-radius: 24px !important;
    box-shadow: 0 40px 70px -34px rgba(var(--mz-tint-rgb),.6) !important;
    margin: 14px auto 18px !important;
  }
  html body #exp-title {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 22px !important; font-weight: 600 !important;
  }
  html body #exp-artist { font-size: 14px !important; color: rgba(232,241,245,.5) !important; }
  html body #exp-progress-bar { height: 4px !important; border-radius: 2px !important; }
  html body #exp-progress-thumb {
    width: 12px !important; height: 12px !important; border-radius: 50% !important;
    background: #EAF7FB !important;
    box-shadow: 0 0 12px -2px var(--mz-ui-accent, #4FC4DE) !important;
  }
  html body #exp-player #time-current,
  html body #exp-player #time-total,
  html body #exp-time-current, html body #exp-time-total {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11.5px !important; color: rgba(232,241,245,.45) !important;
  }
  html body #exp-play {
    width: 70px !important; height: 70px !important; border-radius: 50% !important;
    background: linear-gradient(180deg,#EAF7FB,#9BE8F8) !important;
    color: #04141B !important;
    box-shadow: 0 18px 40px -16px rgba(var(--mz-tint-rgb),.95) !important;
  }
  html body #exp-play svg { width: 30px !important; height: 30px !important; }
  html body #exp-play svg * { fill: #04141B !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 72 — API-ТОКЕНЫ И СКРЫТЫЕ СТЕМЫ
   ═══════════════════════════════════════════════════════════════════════ */
/* вкладку показываем только создателям; сам раздел переключает settingsTab,
   а доступ всё равно проверяет сервер */
html body #stab-api { display: none; }
html body.is-creator #stab-api { display: inline-flex; }

html body .api-hint {
  font-size: 12.5px; color: rgba(232,241,245,.5);
  line-height: 1.5; margin-bottom: 12px;
}
html body .api-create-row { display: flex; gap: 8px; margin-bottom: 12px; }
html body .api-create-row .px-input { flex: 1; }
html body #api-key-new {
  padding: 12px; border-radius: 12px; margin-bottom: 12px;
  background: rgba(var(--mz-tint-rgb),.10);
  border: 1px solid rgba(var(--mz-tint-rgb),.34);
}
html body .api-new-t { font-size: 12px; color: rgba(232,241,245,.7); margin-bottom: 8px; }
html body .api-new-key { display: flex; gap: 8px; align-items: center; }
html body .api-new-key code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #E8F1F5;
}
html body .api-new-copy {
  flex: none; padding: 6px 12px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  color: #E8F1F5; font-size: 12px;
}
html body .api-key-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}
html body .api-key-main { flex: 1; min-width: 0; }
html body .api-key-name { font-size: 14px; font-weight: 500; }
html body .api-key-prefix {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; color: rgba(232,241,245,.42);
}
html body .api-key-meta { width: 140px; flex: none; }
html body .api-key-usage {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(255,255,255,.10);
}
html body .api-key-usage span {
  display: block; height: 100%;
  background: var(--mz-ui-accent, #4FC4DE);
}
html body .api-key-sub { font-size: 11px; color: rgba(232,241,245,.42); margin-top: 4px; }
html body .api-key-del {
  flex: none; width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: rgba(232,241,245,.6);
}
html body .api-empty { font-size: 13px; color: rgba(232,241,245,.42); padding: 8px 0; }
html body .api-doc {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.07);
}
html body .api-doc-t {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: .1em; color: rgba(var(--mz-tint-rgb),1); margin-bottom: 10px;
}
html body .api-doc code {
  display: block; overflow-x: auto; white-space: nowrap;
  padding: 10px; border-radius: 10px; margin-bottom: 10px;
  background: rgba(0,0,0,.35);
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  color: rgba(232,241,245,.75);
}
html body .api-doc-list { display: flex; flex-direction: column; gap: 5px; }
html body .api-doc-list span { font-size: 12.5px; color: rgba(232,241,245,.6); }
html body .api-doc-list b { color: #E8F1F5; font-weight: 500; }
html body .api-doc-note { margin-top: 10px; font-size: 11.5px; color: rgba(232,241,245,.42); }


/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 86 — ПРЕСЕТЫ ОФОРМЛЕНИЯ
   Классы mztp-* использовались в разметке окна, но в таблице их не было —
   окно выглядело как неоформленный html.
   ═══════════════════════════════════════════════════════════════════════ */
html body #mztp-modal .mztp-ovl {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(4,7,11,.72);
  backdrop-filter: blur(14px) saturate(120%);
  animation: mztpIn .18s ease;
}
@keyframes mztpIn { from { opacity: 0 } to { opacity: 1 } }

html body #mztp-modal .mztp-box {
  width: 100%; max-width: 520px; max-height: 86vh;
  display: flex; flex-direction: column;
  border-radius: 20px;
  background: #080D13;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 40px 90px -30px #000;
  overflow: hidden;
}
html body #mztp-modal .mztp-h {
  flex: none; display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
html body #mztp-modal .mztp-title {
  font-family: 'Unbounded', sans-serif !important;
  font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: #E8F1F5;
}
html body #mztp-modal .mztp-sub {
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px; letter-spacing: .12em; color: var(--mz-ui-accent, #7FE3F5);
}
html body #mztp-modal .mztp-x {
  flex: none; width: 32px; height: 32px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(232,241,245,.6); font-size: 13px;
}
html body #mztp-modal .mztp-x:hover { color: #E8F1F5; background: rgba(255,255,255,.12); }

html body #mztp-modal .mztp-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
}

/* текущий трек */
html body #mztp-modal .mztp-now {
  padding: 13px 15px; border-radius: 14px;
  background: rgba(var(--mz-tint-rgb, 79,196,222), .08);
  border: 1px solid rgba(var(--mz-tint-rgb, 79,196,222), .22);
}
html body #mztp-modal .mztp-now-t { font-size: 15px; font-weight: 600; color: #E8F1F5; }
html body #mztp-modal .mztp-now-a { font-size: 12.5px; color: rgba(232,241,245,.5); margin-top: 2px; }
html body #mztp-modal .mztp-now-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
html body #mztp-modal .mztp-tag {
  padding: 3px 9px; border-radius: 7px; font-size: 11.5px;
  background: rgba(var(--mz-tint-rgb, 79,196,222), .18);
  color: var(--mz-ui-accent, #9BE8F8);
}
html body #mztp-modal .mztp-tag.alt { background: rgba(167,150,255,.18); color: #C6B9FF; }

/* строки и поля */
html body #mztp-modal .mztp-row { display: flex; gap: 8px; align-items: center; }
html body #mztp-modal .mztp-inp {
  flex: 1; min-width: 0; height: 40px; padding: 0 13px;
  border-radius: 12px; outline: none;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  color: #E8F1F5; font-family: 'Onest', sans-serif; font-size: 14px;
}
html body #mztp-modal .mztp-inp:focus { border-color: rgba(var(--mz-tint-rgb, 79,196,222), .55); }
html body #mztp-modal .mztp-btn {
  flex: none; height: 40px; padding: 0 15px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(232,241,245,.8); font-family: 'Onest', sans-serif; font-size: 13.5px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
html body #mztp-modal .mztp-btn:hover { background: rgba(255,255,255,.12); color: #E8F1F5; }
html body #mztp-modal .mztp-btn.accent {
  background: linear-gradient(180deg,#EAF7FB,#9BE8F8);
  border: none; color: #04141B; font-weight: 600;
}
html body #mztp-modal .mztp-btn.ghost { background: transparent; }
html body #mztp-modal .mztp-btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }

html body #mztp-modal .mztp-hint { font-size: 11.5px; color: rgba(232,241,245,.4); line-height: 1.45; }
html body #mztp-modal .mztp-lbl {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(232,241,245,.38);
}
html body #mztp-modal .mztp-dim { color: rgba(232,241,245,.42); font-size: 12.5px; }

/* список пресетов */
html body #mztp-modal .mztp-list { display: flex; flex-direction: column; gap: 6px; }
html body #mztp-modal .mztp-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 13px; cursor: pointer;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  transition: border-color .15s ease, background .15s ease;
}
html body #mztp-modal .mztp-item:hover { background: rgba(255,255,255,.06); }
html body #mztp-modal .mztp-item.on {
  border-color: rgba(var(--mz-tint-rgb, 79,196,222), .5);
  background: rgba(var(--mz-tint-rgb, 79,196,222), .09);
}
html body #mztp-modal .mztp-sw {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
html body #mztp-modal .mztp-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: #E8F1F5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #mztp-modal .mztp-meta { display: none; }
html body #mztp-modal .mztp-use { flex: none; font-size: 11px; color: rgba(232,241,245,.4); }
html body #mztp-modal .mztp-acts { flex: none; display: flex; gap: 4px; }
html body #mztp-modal .mztp-mini {
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: rgba(232,241,245,.65); font-size: 12px;
}
html body #mztp-modal .mztp-mini:hover { background: rgba(255,255,255,.14); color: #E8F1F5; }
html body #mztp-modal .mztp-mini.red:hover { background: rgba(255,107,138,.22); color: #FF9DB0; }
html body #mztp-modal .mztp-empty {
  padding: 18px; border-radius: 13px; text-align: center;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.1);
  font-size: 12.5px; color: rgba(232,241,245,.42);
}
html body #mztp-modal .mztp-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 8px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}

@media (max-width: 900px) {
  html body #mztp-modal .mztp-ovl { padding: 0; align-items: flex-end; }
  html body #mztp-modal .mztp-box { max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0; }
  html body #mztp-modal .mztp-row { flex-wrap: wrap; }
  html body #mztp-modal .mztp-btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 87 — ТЕЛЕФОН: СДВИГ, ПЕРЕМОТКА, ПОДБОРКИ
   Экран ездил вбок: внутренние блоки поиска и караоке шире окна, а flex
   по умолчанию не даёт им сжаться (min-width: auto). Отсюда и поле поиска,
   уезжающее за правый край.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html body #content > *,
  html body #main-grid > * { max-width: 100%; }

  html body #view-search,
  html body #view-karaoke,
  html body #search-ym-wrap,
  html body .search-input-wrap,
  html body #karaoke-lobby,
  html body #mz-home { min-width: 0 !important; max-width: 100% !important; }

  html body #search-ym-wrap > *,
  html body .search-input-wrap > * { min-width: 0 !important; max-width: 100% !important; }

  html body #search-ym-input,
  html body .search-big { width: 100% !important; box-sizing: border-box !important; }

  /* ленты источников и полок прокручиваются внутри себя, а не тянут страницу */
  html body #search-source-toggle,
  html body .home-scroll-row,
  html body #mz-home [style*="overflow-x:auto"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  /* кнопки перемотки в мини-плеере */
  html body #player-bar #btn-prev,
  html body #player-bar #btn-next {
    display: flex !important; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none;
    background: transparent !important; border: none !important;
    color: rgba(232,241,245,.75) !important;
  }
  html body #player-bar #btn-prev svg,
  html body #player-bar #btn-next svg { width: 19px; height: 19px; }
  html body #player-bar #player-controls { gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 88 — БАЗОВЫЕ И РАСШИРЕННЫЕ НАСТРОЙКИ
   Сложные разделы скрыты, пока не включён переключатель. Скрываем через
   класс на body, а не inline-стилями: переключением вкладок занимается
   settingsTab, и он выставляет display сам.
   ═══════════════════════════════════════════════════════════════════════ */
html body:not(.mz-adv-on) #settings-panel .settings-section.mz-adv { display: none !important; }

html body #mz-adv-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  margin: 4px 0 14px;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
html body #mz-adv-row .mz-adv-t {
  grid-column: 1; font-size: 14px; font-weight: 600; color: var(--text, #E8F1F5);
}
html body #mz-adv-row .mz-adv-s {
  grid-column: 1; font-size: 11.5px; line-height: 1.4; color: rgba(232,241,245,.45);
}
html body #mz-adv-row .mz-adv-sw { grid-column: 2; grid-row: 1 / span 2; }
html body.mz-adv-on #mz-adv-row {
  border-color: rgba(var(--mz-tint-rgb, 79,196,222), .38);
  background: rgba(var(--mz-tint-rgb, 79,196,222), .08);
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 91 — БЕЗ СВЕЧЕНИЯ ВОКРУГ КНОПОК
   ::before из ЭТАПа 42 — размытое пятно шире самой кнопки. На красной
   кнопке оно вдобавок оставалось бирюзовым и подсвечивало фон вокруг.
   Заливку и текстуру кнопок не трогаем, убираем только ореол.
   ═══════════════════════════════════════════════════════════════════════ */
html body .px-btn::before,
html body .accent-btn::before,
html body .btn-play-all::before,
html body .ap-btn-play::before,
html body .auth-submit::before,
html body .karaoke-btn::before,
html body .karaoke-btn-create::before,
html body .karaoke-btn-join::before,
html body .kr-search-btn::before,
html body .dm-send::before,
html body .mz-wavebtn::before,
html body #content .px-btn::before,
html body #content .accent-btn::before,
html body #content .btn-play-all::before,
html body #content .ap-btn-play::before,
html body #settings-panel .px-btn::before,
html body #settings-panel .accent-btn::before {
  display: none !important;
  content: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 93 — ЛОГОТИП КРУПНЕЕ
   Размеры заданы инлайном в разметке боковой панели, поэтому !important.
   ═══════════════════════════════════════════════════════════════════════ */
html body #sidebar-logo { gap: 13px !important; padding: 2px 8px 6px !important; }
html body #sidebar-logo #cat-wrap,
html body #sidebar-logo #cat-canvas {
  width: 36px !important; height: 36px !important;
}
html body #sidebar-logo-text {
  font-size: 21px !important;
  letter-spacing: .16em !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 96 — БЕЗ ЧАТА И БЕЗ ГРАДИЕНТА НА АКТИВНОЙ СТРОКЕ
   Активная строка получала заливку var(--ly-grad) с обрезкой по буквам —
   отсюда «случайный» градиент, чаще всего белый, когда палитра обложки не
   собралась. Соседние строки красятся обычным цветом, поэтому расхождение
   бросалось в глаза. Градиент оставляем только режиму «Печать».
   ═══════════════════════════════════════════════════════════════════════ */
html body #global-chat,
html body #gc-toggle-btn,
html body #view-messages,
html body [data-view="messages"] { display: none !important; }

html body :not([data-ly-anim="typewriter"]) .lyric-line.active[data-ly-grad] .ly-word,
html body :not([data-ly-anim="typewriter"]) .lyric-line.active[data-ly-grad] .ly-word.lit,
html body :not([data-ly-anim="typewriter"]) .lyric-line.active .ly-word,
html body :not([data-ly-anim="typewriter"]) .lyric-line.active .ly-word.lit {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ly-color, var(--accent)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 101 — ЦВЕТ КНОПОК ИЗ ПАЛИТРЫ И МЕНЬШЕ ЧАСТОКОЛА
   Форму, текстуру и градиент кнопок не трогаем — меняется только источник
   цвета: вместо зашитого #9BE8F8 → #4FC4DE берётся акцент интерфейса.
   В настройках одиночные кнопки перестают тянуться во всю ширину.
   ═══════════════════════════════════════════════════════════════════════ */
html body #settings-panel .settings-section > .px-btn,
html body #settings-panel .settings-section > .accent-btn {
  width: auto;
  min-width: 200px;
  max-width: 100%;
  align-self: flex-start;
}
html body #settings-panel .settings-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 102 — МЕНЮ «ЕЩЁ» НА СТРАНИЦЕ АРТИСТА
   ═══════════════════════════════════════════════════════════════════════ */
html body #ap-more-menu {
  position: fixed; z-index: 9500;
  width: 210px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: 13px;
  background: #0A1016;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 60px -20px #000;
}
html body #ap-more-menu button {
  width: 100%; height: 36px; padding: 0 12px;
  display: flex; align-items: center;
  border: none; border-radius: 9px; cursor: pointer;
  background: transparent;
  color: rgba(232,241,245,.82);
  font-family: 'Onest', sans-serif; font-size: 13.5px; text-align: left;
}
html body #ap-more-menu button:hover { background: rgba(255,255,255,.08); color: #E8F1F5; }
html body .ap-btn-like.liked { color: #FF6B8A !important; border-color: #FF6B8A !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 103 — ЕДИНЫЙ ПОИСК БЕЗ НАЗВАНИЙ СЕРВИСОВ
   Яндекс выведен из пула, выбор поставщика убран из интерфейса.
   ═══════════════════════════════════════════════════════════════════════ */
html body #search-source-toggle,
html body .ap-source-toggle,
html body .search-src-btn,
html body [data-src="ym"],
html body #ym-token-banner,
html body #token-banner { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 105 — ВЫБОР АРТИСТОВ ПОСЛЕ РЕГИСТРАЦИИ
   ═══════════════════════════════════════════════════════════════════════ */
html body #onb-modal .onb-ovl {
  position: fixed; inset: 0; z-index: 9200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,7,11,.86); backdrop-filter: blur(16px);
}
html body #onb-modal .onb-box {
  width: 100%; max-width: 720px; max-height: 88vh;
  display: flex; flex-direction: column;
  border-radius: 20px; background: #080D13;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 40px 90px -30px #000; overflow: hidden;
}
html body #onb-modal .onb-h { flex: none; padding: 22px 24px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
html body #onb-modal .onb-title {
  font-family: 'Unbounded', sans-serif !important;
  font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: #E8F1F5;
}
html body #onb-modal .onb-sub { margin-top: 6px; font-size: 13px; color: rgba(232,241,245,.5); }
html body #onb-modal .onb-progress {
  margin-top: 13px; height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(255,255,255,.1);
}
html body #onb-modal .onb-fill {
  display: block; height: 100%; width: 0;
  background: var(--mz-ui-accent, #4FC4DE); transition: width .2s ease;
}
html body #onb-modal .onb-grid {
  flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 14px;
}
html body #onb-modal .onb-load { grid-column: 1 / -1; padding: 30px; text-align: center; color: rgba(232,241,245,.45); }
html body #onb-modal .onb-card { cursor: pointer; text-align: center; }
html body #onb-modal .onb-pic {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; background: linear-gradient(150deg,#16323F,#0A1620);
  border: 2px solid transparent; transition: border-color .15s ease;
}
html body #onb-modal .onb-pic img { width: 100%; height: 100%; object-fit: cover; }
html body #onb-modal .onb-check {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(4,10,14,.6); color: #fff; font-size: 26px; opacity: 0; transition: opacity .15s ease;
}
html body #onb-modal .onb-card.on .onb-pic { border-color: var(--mz-ui-accent, #4FC4DE); }
html body #onb-modal .onb-card.on .onb-check { opacity: 1; }
html body #onb-modal .onb-name {
  margin-top: 8px; font-size: 12.5px; color: rgba(232,241,245,.75);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body #onb-modal .onb-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px 18px; border-top: 1px solid rgba(255,255,255,.07);
}
html body #onb-modal .onb-count { font-size: 13px; color: rgba(232,241,245,.5); }
html body #onb-modal .px-btn[disabled] { opacity: .45; cursor: default; }
@media (max-width: 900px) {
  html body #onb-modal .onb-ovl { padding: 0; align-items: flex-end; }
  html body #onb-modal .onb-box { max-height: 94vh; border-radius: 20px 20px 0 0; }
  html body #onb-modal .onb-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 106 — БЕЗ ВЫБОРА ИНТЕРФЕЙСА
   Классика убрана, режим всегда Recode — переключатель в настройках лишний.
   ═══════════════════════════════════════════════════════════════════════ */
html body #uimode-switch,
html body #uimode-switch ~ .settings-label,
html body .settings-section:has(#uimode-switch) { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 107 — ОДИН ЦВЕТ ТЕКСТА И КВАДРАТНАЯ ОБЛОЖКА АРТИСТА

   Вот он, тот самый «непонятный градиент»: класс .ly-multicolor вешается на
   контейнер строк в режиме «все цвета обложки» и заливает СТРОКУ целиком
   градиентом --ly-grad с обрезкой по буквам. Прошлые правки чинили .ly-word,
   а заливка сидела на .lyric-line — потому и не помогали. Оставляем этот
   приём только «Печати», всё остальное красится одним цветом, как она.
   ═══════════════════════════════════════════════════════════════════════ */
html body :not([data-ly-anim="typewriter"]) .ly-multicolor .lyric-line,
html body :not([data-ly-anim="typewriter"]) .ly-multicolor .lyric-line .ly-word,
html body :not([data-ly-anim="typewriter"]) .ly-multicolor .lyric-line .ly-word.lit {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ly-color, var(--accent)) !important;
}

/* ── обложка артиста: квадрат со скруглением, крупнее ── */
html body .ap-avatar,
html body [data-style] .ap-avatar,
html body [data-uimode] .ap-avatar {
  width: 190px !important;
  height: 190px !important;
  border-radius: 22px !important;
  box-shadow: 0 22px 54px -22px #000 !important;
}
@media (max-width: 900px) {
  html body .ap-avatar { width: 132px !important; height: 132px !important; border-radius: 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 109 — СВОРАЧИВАЕМАЯ ПАНЕЛЬ И ЦВЕТ КЛИПА НА ТЕКСТ
   ═══════════════════════════════════════════════════════════════════════ */
html body #lyrics-sync-status { position: relative; transition: transform .2s ease, opacity .2s ease; }
html body #lyrics-sync-status .sync-collapse {
  width: 26px; height: 26px; margin-left: 8px; flex: none;
  border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: rgba(232,241,245,.7); font-size: 13px; line-height: 1;
}
html body #lyrics-sync-status .sync-collapse:hover { color: #E8F1F5; background: rgba(255,255,255,.16); }
html body.sync-collapsed #lyrics-sync-status > *:not(.sync-collapse) { display: none !important; }
html body.sync-collapsed #lyrics-sync-status {
  padding: 4px !important; background: rgba(10,16,22,.6) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html body.sync-collapsed #lyrics-sync-status .sync-collapse { margin: 0; transform: rotate(180deg); }

/* цвет клипа только на текст: акцент берётся от клипа, фон не трогаем */
html body.clip-color-text #exp-lyrics-lines,
html body.clip-color-text #karaoke-lyrics-lines {
  --ly-color: var(--cover-accent, var(--accent));
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 110 — ВОЛНА ВНУТРИ КНОПОК
   Раньше волна жила в ::before, который был шире кнопки и размыт — это и
   давало тот ореол снаружи. Убрав ореол, я убрал и движение внутри.
   Теперь волна прижата к границам кнопки и обрезается по её скруглению:
   внутри видно движение, наружу не выходит ничего.
   ═══════════════════════════════════════════════════════════════════════ */
html body .px-btn,
html body .accent-btn,
html body #content .accent-btn,
html body #settings-panel .accent-btn,
html body .btn-play-all,
html body .ap-btn-play,
html body .auth-submit,
html body .karaoke-btn,
html body .karaoke-btn-create,
html body .karaoke-btn-join,
html body .kr-search-btn,
html body .dm-send,
html body .mzai-turn.mzai-user .mzai-body {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
html body .px-btn::before,
html body .accent-btn::before,
html body #content .accent-btn::before,
html body #settings-panel .accent-btn::before,
html body .btn-play-all::before,
html body .ap-btn-play::before,
html body .auth-submit::before,
html body .karaoke-btn::before,
html body .karaoke-btn-create::before,
html body .karaoke-btn-join::before,
html body .kr-search-btn::before,
html body .dm-send::before,
html body .mzai-turn.mzai-user .mzai-body::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  left: -25%; right: -25%; top: -40%; height: 180%;
  border-radius: 42% 58% 55% 45% / 60% 55% 45% 40%;
  filter: blur(10px);
  opacity: .32;
  z-index: 0;
  pointer-events: none;
  /* серый блик: белый выбеливал заливку кнопки почти до неузнаваемости */
  background: linear-gradient(90deg,
    rgba(150,158,168,0) 0%,
    rgba(150,158,168,.20) 35%,
    rgba(160,168,178,.30) 50%,
    rgba(150,158,168,.20) 65%,
    rgba(150,158,168,0) 100%);
  animation: mzWaveRun 7s ease-in-out infinite;
}
/* точечная сетка поверх заливки — как на остальных кнопках */
html body .px-btn::after,
html body .accent-btn::after,
html body #content .accent-btn::after,
html body #settings-panel .accent-btn::after,
html body .btn-play-all::after,
html body .ap-btn-play::after,
html body .auth-submit::after,
html body .karaoke-btn::after,
html body .karaoke-btn-create::after,
html body .karaoke-btn-join::after,
html body .kr-search-btn::after,
html body .dm-send::after,
html body .mzai-turn.mzai-user .mzai-body::after {
  content: '' !important;
  display: block !important;
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.10) .75px, transparent .75px);
  background-size: 3.5px 3.5px;
  -webkit-mask-image: radial-gradient(120% 110% at 50% 100%, #000 0%, transparent 78%);
  mask-image: radial-gradient(120% 110% at 50% 100%, #000 0%, transparent 78%);
}
/* содержимое всегда над волной и сеткой */
html body .px-btn,
html body .accent-btn,
html body #content .accent-btn,
html body #settings-panel .accent-btn,
html body .btn-play-all,
html body .ap-btn-play,
html body .auth-submit,
html body .karaoke-btn,
html body .karaoke-btn-create,
html body .karaoke-btn-join,
html body .kr-search-btn,
html body .dm-send,
html body .mzai-turn.mzai-user .mzai-body > * { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  html body .px-btn::before,
html body .accent-btn::before,
html body #content .accent-btn::before,
html body #settings-panel .accent-btn::before,
html body .btn-play-all::before,
html body .ap-btn-play::before,
html body .auth-submit::before,
html body .karaoke-btn::before,
html body .karaoke-btn-create::before,
html body .karaoke-btn-join::before,
html body .kr-search-btn::before,
html body .dm-send::before,
html body .mzai-turn.mzai-user .mzai-body::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 112 — ЦВЕТ ОБЛОЖКИ НА ТЕКСТ ПЕСНИ
   Раньше строки красились через --ly-color и --accent вперемешку, поэтому
   выключить раскраску текста было нельзя, а «Печать» её вовсе не получала.
   Один источник на всё: --mz-ly-accent, который ставится, только когда
   область «Текст» включена в настройках «под обложку».
   ═══════════════════════════════════════════════════════════════════════ */
:root { --mz-ly-accent-fallback: var(--accent); }

html body #exp-lyrics-lines,
html body #karaoke-lyrics-lines {
  --ly-color: var(--mz-ly-accent, var(--accent));
}
html body :not([data-ly-anim="typewriter"]) .lyric-line.active .ly-word,
html body :not([data-ly-anim="typewriter"]) .lyric-line.active .ly-word.lit,
html body [data-ly-anim="typewriter"] .lyric-line.active .ly-word.lit {
  color: var(--ly-color, var(--mz-ly-accent, var(--accent))) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 113 — ФОТО АРТИСТОВ КВАДРАТНЫЕ ВЕЗДЕ
   Круглыми они назначались в шести местах: базовые правила, тема Recode,
   тема Spotify и три мобильных блока. Приводим к одному виду — квадрат со
   скруглением, как на странице артиста.
   ═══════════════════════════════════════════════════════════════════════ */
html body .coll-card-img,
html body .coll-card-img-round,
html body .coll-card-img-round img,
html body [data-style] .coll-card-img,
html body .home-artist-card .home-card-img,
html body .home-artist-card .card-cover,
html body .home-artist-card .card-cover-wrap,
html body [data-style] .home-artist-card .home-card-img,
html body [data-style] .home-artist-card .card-cover,
html body [data-style] .home-artist-card .card-cover-wrap {
  border-radius: 16px !important;
}
html body .home-artist-card .home-card-img img,
html body .home-artist-card .card-cover img { border-radius: 16px !important; }

/* маленькие фото в списках — скругление помягче */
html body .ym-coll-artist-img,
html body .likes-row .ym-cover,
html body .artist-mini img { border-radius: 10px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 115 — КНОПКИ ВОЛНЫ: БЕЗ ОРЕОЛА, ЗНАЧОК ПО ЦЕНТРУ
   В прошлый раз я снял с кнопки обрезку, чтобы значок не резался, — и тем
   самым выпустил наружу и размытое пятно, и точечную сетку. Отсюда синее
   зарево и квадрат из точек под кнопкой. Обрезку возвращаем, а значок
   центрируем и поднимаем над обоими слоями.
   ═══════════════════════════════════════════════════════════════════════ */
html body #wave-play-btn#wave-play-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100px !important; height: 100px !important;
  min-width: 100px !important; min-height: 100px !important;
  padding: 0 !important;
  line-height: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  isolation: isolate !important;
  box-shadow: none !important;
  filter: none !important;
}
/* волна внутри круга, не шире его */
html body #wave-play-btn#wave-play-btn::before {
  content: '' !important;
  position: absolute !important;
  left: -20% !important; right: -20% !important; top: -30% !important;
  height: 160% !important;
  border-radius: 44% 56% 52% 48% / 58% 54% 46% 42% !important;
  filter: blur(12px) !important;
  opacity: .45 !important;
  z-index: 0 !important;
  background: linear-gradient(90deg,
    rgba(150,158,168,0) 0%,
    rgba(150,158,168,.22) 35%,
    rgba(160,168,178,.32) 50%,
    rgba(150,158,168,.22) 65%,
    rgba(150,158,168,0) 100%) !important;
}
html body #wave-play-btn#wave-play-btn::after {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  z-index: 1 !important;
  background-image: radial-gradient(rgba(255,255,255,.15) .75px, transparent .75px) !important;
  background-size: 3.5px 3.5px !important;
  -webkit-mask-image: radial-gradient(120% 110% at 50% 100%, #000 0%, transparent 78%) !important;
  mask-image: radial-gradient(120% 110% at 50% 100%, #000 0%, transparent 78%) !important;
}
html body #wave-play-btn#wave-play-btn svg {
  position: relative !important; z-index: 2 !important;
  width: 44px !important; height: 44px !important;
  display: block !important; flex: none !important; margin: 0 !important;
}

/* соседние кнопки волны — тоже без зарева наружу */
html body .wave-ym-ctrl-btn {
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: none !important; filter: none !important;
}
html body .wave-ym-ctrl-btn svg { position: relative; z-index: 2; }

@media (max-width: 900px) {
  html body #wave-play-btn#wave-play-btn {
    width: 76px !important; height: 76px !important;
    min-width: 76px !important; min-height: 76px !important;
  }
  html body #wave-play-btn#wave-play-btn svg { width: 34px !important; height: 34px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 118 — ОБЛОЖКА НЕ СЛИВАЕТСЯ С ФОНОМ
   При раскраске фона под обложку область вокруг самой обложки красилась
   тем же цветом, и картинка тонула. Держим за ней тёмную подложку и
   отделяем рамкой с тенью — цвет обложки остаётся на фоне страницы.
   ═══════════════════════════════════════════════════════════════════════ */
/* background-color, а НЕ background: сокращённое свойство сбрасывало
   background-image, а в нём живут бороздки виниловой пластинки. */
html body #exp-player:not(.vinyl-on) #exp-cover-wrap,
html body .exp-cover-wrap,
html body #player-cover-wrap {
  background-color: #0A0F14 !important;
  box-shadow: 0 26px 60px -26px #000, 0 0 0 1px rgba(255,255,255,.07) !important;
}
html body #exp-left {
  background-image: radial-gradient(120% 90% at 50% 40%,
    rgba(0,0,0,.35) 0%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.78) 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 120 — ВЫБРАННАЯ ВКЛАДКА СЕРАЯ, А НЕ БЕЛАЯ
   #exp-player .exp-tab.active весит (1,2,0) и перебивал общее правило
   этапа 42 (0,2,2) — оттого «ТЕКСТ» оставался белым, сколько бы я ни правил
   кнопки. Здесь тот же селектор с удвоенным идентификатором: спорить больше
   нечему.
   ═══════════════════════════════════════════════════════════════════════ */
html body #exp-player#exp-player .exp-tab.active,
html body #exp-player#exp-player .exp-tab[aria-selected="true"] {
  color: #EAF3F7 !important;
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.8) !important;
  text-shadow: none !important;
}
html body #exp-player#exp-player .exp-tab.active::after {
  background-image: radial-gradient(rgba(255,255,255,.10) .75px, transparent .75px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 121 — РЕЖИМЫ РАЗДЕЛЕНИЯ НА ДОРОЖКИ
   ═══════════════════════════════════════════════════════════════════════ */
html body .sm-modes { display: flex; gap: 8px; flex-wrap: wrap; }
html body .sm-mode-note {
  margin-top: 6px; font-size: 12px; line-height: 1.45;
  color: var(--dim, rgba(232,241,245,.62)); max-width: 520px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 126 — ВСЕ КНОПКИ ОДНОГО ТИПА
   За образец взята кнопка на экране регистрации: сплошная заливка,
   скруглённая пилюля, точечная сетка и волна внутри (они уже заданы
   этапом 110). Здесь задаётся только источник цвета: заливка идёт из
   разбора обложки, подпись — светлая или тёмная по яркости заливки.
   ═══════════════════════════════════════════════════════════════════════ */
html body .px-btn,
html body .accent-btn,
html body #content .accent-btn,
html body #settings-panel .accent-btn,
html body #settings-panel .px-btn,
html body .btn-play-all,
html body .ap-btn-play,
html body .auth-submit,
html body .karaoke-btn,
html body .karaoke-btn-create,
html body .karaoke-btn-join,
html body .kr-search-btn,
html body .dm-send {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mz-ui-accent, var(--accent)) 86%, #fff) 0%,
    var(--mz-ui-accent, var(--accent)) 100%) !important;
  color: var(--mz-ui-on, var(--on-accent, #06121A)) !important;
  border: none !important;
  border-radius: 24px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 10px 24px -16px rgba(0,0,0,.75) !important;
}
html body .px-btn:hover,
html body .accent-btn:hover,
html body #content .accent-btn:hover,
html body #settings-panel .accent-btn:hover,
html body #settings-panel .px-btn:hover,
html body .btn-play-all:hover,
html body .ap-btn-play:hover,
html body .auth-submit:hover,
html body .karaoke-btn:hover,
html body .karaoke-btn-create:hover,
html body .karaoke-btn-join:hover,
html body .kr-search-btn:hover,
html body .dm-send:hover {
  filter: brightness(1.06);
}
html body .px-btn svg,
html body .accent-btn svg,
html body #content .accent-btn svg,
html body #settings-panel .accent-btn svg,
html body #settings-panel .px-btn svg,
html body .btn-play-all svg,
html body .ap-btn-play svg,
html body .auth-submit svg,
html body .karaoke-btn svg,
html body .karaoke-btn-create svg,
html body .karaoke-btn-join svg,
html body .kr-search-btn svg,
html body .dm-send svg {
  fill: var(--mz-ui-on, var(--on-accent, #06121A)) !important;
  stroke: none;
}

/* Вкладки кнопками не становятся: у них своя, тёмная роль. */
html body .auth-tab {
  background: transparent !important;
  color: var(--dim, rgba(232,241,245,.6)) !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
}
html body .auth-tab.active {
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  color: #EAF3F7 !important;
  box-shadow: 0 6px 16px -12px rgba(0,0,0,.9) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 128 — РАЗРУШИТЕЛЬНАЯ КНОПКА ОСТАЁТСЯ КРАСНОЙ
   Форма, размер и текстура у всех кнопок теперь одни. Цветом отличается
   единственная — «Сбросить всё»: она стирает настройки безвозвратно, и
   выглядеть точь-в-точь как «Экспорт» рядом ей нельзя.
   ═══════════════════════════════════════════════════════════════════════ */
html body .px-btn.danger-btn,
html body #settings-panel .px-btn.danger-btn,
html body .danger-btn {
  background: linear-gradient(180deg,#C4515F 0%,#8E3541 100%) !important;
  color: #FFF1F2 !important;
}
html body .px-btn.danger-btn svg, html body .danger-btn svg { fill: #FFF1F2 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 129 — ЗАГОЛОВКИ И ПОЯСНЕНИЯ В НАСТРОЙКАХ
   ═══════════════════════════════════════════════════════════════════════ */
html body #settings-panel .settings-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  color: #EAF3F7 !important;
  opacity: 1 !important;
}
html body #settings-panel .settings-note {
  margin: 4px 0 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dim, rgba(232,241,245,.55));
  max-width: 560px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 131 — ВСЕ КНОПКИ ВОСПРОИЗВЕДЕНИЯ ОДИНАКОВЫЕ
   Одна форма (круг), один источник цвета (разбор обложки), одна текстура.
   Серо-белый остаётся запасным значением переменной — его видно только
   пока цвет с обложки ещё не взят или раскраска выключена.
   ═══════════════════════════════════════════════════════════════════════ */
html body #btn-play#btn-play,
html body #player-bar #btn-play#btn-play,
html body #exp-player #btn-play#btn-play,
html body .px-play-btn,
html body #exp-play#exp-play,
html body #exp-player .exp-play-btn,
html body .home-card-play,
html body .card-play-icon,
html body #wave-screen .wave-ym-play,
html body .ym-home-wave-play,
html body .rc-hero-play,
html body .sm-play,
html body .kr-sr-play,
html body .kr-q-play {
  border-radius: 50% !important;
  border: none !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mz-ui-accent, #D9E0E6) 86%, #fff) 0%,
    var(--mz-ui-accent, #C2CAD1) 100%) !important;
  color: var(--mz-ui-on, #06121A) !important;
  box-shadow: 0 12px 26px -18px rgba(0,0,0,.8) !important;
  text-shadow: none !important;
}
html body #btn-play#btn-play svg, html body #btn-play#btn-play svg *,
html body #player-bar #btn-play#btn-play svg, html body #player-bar #btn-play#btn-play svg *,
html body #exp-player #btn-play#btn-play svg, html body #exp-player #btn-play#btn-play svg *,
html body .px-play-btn svg, html body .px-play-btn svg *,
html body #exp-play#exp-play svg, html body #exp-play#exp-play svg *,
html body #exp-player .exp-play-btn svg, html body #exp-player .exp-play-btn svg *,
html body .home-card-play svg, html body .home-card-play svg *,
html body .card-play-icon svg, html body .card-play-icon svg *,
html body #wave-screen .wave-ym-play svg, html body #wave-screen .wave-ym-play svg *,
html body .ym-home-wave-play svg, html body .ym-home-wave-play svg *,
html body .rc-hero-play svg, html body .rc-hero-play svg *,
html body .sm-play svg, html body .sm-play svg *,
html body .kr-sr-play svg, html body .kr-sr-play svg *,
html body .kr-q-play svg, html body .kr-q-play svg * {
  fill: var(--mz-ui-on, #06121A) !important;
  stroke: none !important;
  color: var(--mz-ui-on, #06121A) !important;
}
html body #btn-play#btn-play:hover,
html body #player-bar #btn-play#btn-play:hover,
html body #exp-player #btn-play#btn-play:hover,
html body .px-play-btn:hover,
html body #exp-play#exp-play:hover,
html body #exp-player .exp-play-btn:hover,
html body .home-card-play:hover,
html body .card-play-icon:hover,
html body #wave-screen .wave-ym-play:hover,
html body .ym-home-wave-play:hover,
html body .rc-hero-play:hover,
html body .sm-play:hover,
html body .kr-sr-play:hover,
html body .kr-q-play:hover {
  filter: brightness(1.07);
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 139 — МОЯ ВОЛНА: КНОПКИ, ЖАНРЫ
   Кнопки волны — тот же вид, что у остальных: заливка цветом обложки и
   перелив внутри, но без точечной сетки. Включается в настройках.
   Вес селекторов выше старых правил #wave-play-btn#wave-play-btn (2,0,2),
   иначе они перебили бы и заливку, и отключение точек.
   ═══════════════════════════════════════════════════════════════════════ */
html body.mz-wave-btn-cover #wave-screen .wave-ym-ctrl-btn,
html body.mz-wave-btn-cover #wave-screen #wave-play-btn#wave-play-btn {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: none !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mz-ui-accent, #D9E0E6) 86%, #fff) 0%,
    var(--mz-ui-accent, #C2CAD1) 100%) !important;
  color: var(--mz-ui-on, #06121A) !important;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.8) !important;
}
/* перелив — мягкое светлое пятно ходит внутри кнопки */
html body.mz-wave-btn-cover #wave-screen .wave-ym-ctrl-btn::before,
html body.mz-wave-btn-cover #wave-screen #wave-play-btn#wave-play-btn::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: -25% !important; right: -25% !important; top: -40% !important;
  width: auto !important; height: 180% !important;
  border-radius: 42% 58% 55% 45% / 60% 55% 45% 40% !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 35%,
    rgba(255,255,255,.34) 50%, rgba(255,255,255,.22) 65%,
    rgba(255,255,255,0) 100%) !important;
  filter: blur(9px) !important;
  opacity: .6 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: mzWaveRun 3.2s ease-in-out infinite !important;
}
html body.mz-wave-btn-cover #wave-screen .wave-ym-ctrl-btn:last-child::before { animation-delay: -1.1s !important; }
html body.mz-wave-btn-cover #wave-screen #wave-play-btn#wave-play-btn::before { animation-delay: -2.2s !important; }
/* без точек */
html body.mz-wave-btn-cover #wave-screen .wave-ym-ctrl-btn::after,
html body.mz-wave-btn-cover #wave-screen #wave-play-btn#wave-play-btn::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
}
html body.mz-wave-btn-cover #wave-screen .wave-ym-ctrl-btn svg,
html body.mz-wave-btn-cover #wave-screen #wave-play-btn#wave-play-btn svg {
  position: relative !important;
  z-index: 2 !important;
  fill: var(--mz-ui-on, #06121A) !important;
  color: var(--mz-ui-on, #06121A) !important;
}
html body.mz-wave-btn-cover #wave-screen .wave-ym-ctrl-btn svg *,
html body.mz-wave-btn-cover #wave-screen #wave-play-btn#wave-play-btn svg * { fill: var(--mz-ui-on, #06121A) !important; }
@media (prefers-reduced-motion: reduce) {
  html body.mz-wave-btn-cover #wave-screen .wave-ym-ctrl-btn::before,
html body.mz-wave-btn-cover #wave-screen #wave-play-btn#wave-play-btn::before { animation: none !important; }
}

/* ── список жанров сворачивается ── */
html body #wave-screen .wave-ym-left { transition: width .25s ease, min-width .25s ease, padding .25s ease; }
html body #wave-screen .wave-ym-left-title > .wave-left-head {
  display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 !important; margin: 0 0 10px !important;
  background: none !important; border: none !important;
}
html body #wave-screen .wave-left-cap {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(232,241,245,.5); white-space: nowrap;
}
html body #wave-screen .wave-left-toggle {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: #E8F1F5;
  transition: background .2s;
}
html body #wave-screen .wave-left-toggle:hover { background: rgba(255,255,255,.12); }
html body #wave-screen .wave-left-toggle svg { transition: transform .25s ease; }
html body #wave-screen.wave-left-collapsed .wave-ym-left {
  width: 54px !important; min-width: 54px !important;
  padding-left: 12px !important; padding-right: 12px !important;
  overflow: hidden !important;
}
html body #wave-screen.wave-left-collapsed .wave-ym-stations,
html body #wave-screen.wave-left-collapsed .wave-left-cap { display: none !important; }
html body #wave-screen.wave-left-collapsed .wave-left-toggle svg { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 140 — КНОПКИ ОДНОГО ТИПА: ОСТАТКИ
   Проход по всем экранам показал, почему этап 126 работал не везде:
   — правила Recode ([data-uimode="recode"] .px-btn, вес 0,2,0) и
     «#content .ap-btn-play» (1,1,0) перебивали его «html body .px-btn»
     (0,1,2): «Слушать», «Refresh», «+ Новый плейлист», кнопки караоке и
     «Очистить» оставались тёмными, со своим скруглением;
   — в раскрытом плеере заливка шла из --accent, а подпись оставалась
     белой: «Разделить трек (AI)» и «4 дорожки» были белым по белому;
   — поверх активных вкладок лежал старый размытый блик цвета обложки с
     непрозрачностью .85, он и делал их белёсыми.
   :not(#mzx) ничего не отсекает (такого id нет), но добавляет вес
   идентификатора. Так правило выигрывает у любого старого и не зависит от
   того, в каком контейнере стоит кнопка.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── кнопки действий: как «Войти» на экране входа ── */
html body .px-btn:not(#mzx):not(#mzx),
html body .accent-btn:not(#mzx):not(#mzx),
html body .btn-play-all:not(#mzx):not(#mzx),
html body .ap-btn-play:not(#mzx):not(#mzx),
html body .auth-submit:not(#mzx):not(#mzx),
html body .karaoke-btn:not(#mzx):not(#mzx),
html body .karaoke-btn-create:not(#mzx):not(#mzx),
html body .karaoke-btn-join:not(#mzx):not(#mzx),
html body .kr-search-btn:not(#mzx):not(#mzx),
html body .dm-send:not(#mzx):not(#mzx),
html body #karaoke-back-btn:not(#mzx),
html body button[data-act]:not(#mzx):not(#mzx) {
  overflow: hidden;
  isolation: isolate !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mz-ui-accent, var(--accent)) 86%, #fff) 0%,
    var(--mz-ui-accent, var(--accent)) 100%) !important;
  color: var(--mz-ui-on, #06121A) !important;
  border: none !important;
  border-radius: 24px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 10px 24px -16px rgba(0,0,0,.75) !important;
  opacity: 1 !important;
}
html body .px-btn:not(#mzx):not(#mzx):hover,
html body .accent-btn:not(#mzx):not(#mzx):hover,
html body .btn-play-all:not(#mzx):not(#mzx):hover,
html body .ap-btn-play:not(#mzx):not(#mzx):hover,
html body .auth-submit:not(#mzx):not(#mzx):hover,
html body .karaoke-btn:not(#mzx):not(#mzx):hover,
html body .karaoke-btn-create:not(#mzx):not(#mzx):hover,
html body .karaoke-btn-join:not(#mzx):not(#mzx):hover,
html body .kr-search-btn:not(#mzx):not(#mzx):hover,
html body .dm-send:not(#mzx):not(#mzx):hover,
html body #karaoke-back-btn:not(#mzx):hover,
html body button[data-act]:not(#mzx):not(#mzx):hover { filter: brightness(1.06); }

html body .px-btn:not(#mzx):not(#mzx):is(:disabled, .disabled, [aria-disabled="true"]),
html body .accent-btn:not(#mzx):not(#mzx):is(:disabled, .disabled, [aria-disabled="true"]),
html body .btn-play-all:not(#mzx):not(#mzx):is(:disabled, .disabled, [aria-disabled="true"]),
html body .karaoke-btn:not(#mzx):not(#mzx):is(:disabled, .disabled, [aria-disabled="true"]),
html body .auth-submit:not(#mzx):not(#mzx):is(:disabled, .disabled, [aria-disabled="true"]),
html body .dm-send:not(#mzx):not(#mzx):is(:disabled, .disabled, [aria-disabled="true"]) {
  opacity: .5 !important;
  filter: saturate(.6);
  cursor: default;
}

html body .px-btn:not(#mzx):not(#mzx) svg,
html body .accent-btn:not(#mzx):not(#mzx) svg,
html body .btn-play-all:not(#mzx):not(#mzx) svg,
html body .ap-btn-play:not(#mzx):not(#mzx) svg,
html body .auth-submit:not(#mzx):not(#mzx) svg,
html body .karaoke-btn:not(#mzx):not(#mzx) svg,
html body .karaoke-btn-create:not(#mzx):not(#mzx) svg,
html body .karaoke-btn-join:not(#mzx):not(#mzx) svg,
html body .kr-search-btn:not(#mzx):not(#mzx) svg,
html body .dm-send:not(#mzx):not(#mzx) svg,
html body #karaoke-back-btn:not(#mzx) svg,
html body button[data-act]:not(#mzx):not(#mzx) svg {
  fill: var(--mz-ui-on, #06121A) !important;
  color: var(--mz-ui-on, #06121A) !important;
}

/* перелив — тот же серый блик, что у «Войти»; под подписью, а не поверх */
html body .px-btn:not(#mzx):not(#mzx)::before,
html body .accent-btn:not(#mzx):not(#mzx)::before,
html body .btn-play-all:not(#mzx):not(#mzx)::before,
html body .ap-btn-play:not(#mzx):not(#mzx)::before,
html body .auth-submit:not(#mzx):not(#mzx)::before,
html body .karaoke-btn:not(#mzx):not(#mzx)::before,
html body .karaoke-btn-create:not(#mzx):not(#mzx)::before,
html body .karaoke-btn-join:not(#mzx):not(#mzx)::before,
html body .kr-search-btn:not(#mzx):not(#mzx)::before,
html body .dm-send:not(#mzx):not(#mzx)::before,
html body #karaoke-back-btn:not(#mzx)::before,
html body button[data-act]:not(#mzx):not(#mzx)::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: -25% !important; right: -25% !important; top: -40% !important; bottom: auto !important;
  width: auto !important; height: 180% !important;
  border-radius: 42% 58% 55% 45% / 60% 55% 45% 40% !important;
  filter: blur(10px) !important;
  opacity: .32 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg,
    rgba(150,158,168,0) 0%,
    rgba(150,158,168,.20) 35%,
    rgba(160,168,178,.30) 50%,
    rgba(150,158,168,.20) 65%,
    rgba(150,158,168,0) 100%) !important;
  animation: mzWaveRun 7s ease-in-out infinite !important;
}
/* точечная сетка */
html body .px-btn:not(#mzx):not(#mzx)::after,
html body .accent-btn:not(#mzx):not(#mzx)::after,
html body .btn-play-all:not(#mzx):not(#mzx)::after,
html body .ap-btn-play:not(#mzx):not(#mzx)::after,
html body .auth-submit:not(#mzx):not(#mzx)::after,
html body .karaoke-btn:not(#mzx):not(#mzx)::after,
html body .karaoke-btn-create:not(#mzx):not(#mzx)::after,
html body .karaoke-btn-join:not(#mzx):not(#mzx)::after,
html body .kr-search-btn:not(#mzx):not(#mzx)::after,
html body .dm-send:not(#mzx):not(#mzx)::after,
html body #karaoke-back-btn:not(#mzx)::after,
html body button[data-act]:not(#mzx):not(#mzx)::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important; height: auto !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  border-radius: inherit !important;
  background: radial-gradient(rgba(255,255,255,.10) .75px, transparent .75px) !important;
  background-size: 3.5px 3.5px !important;
  -webkit-mask-image: radial-gradient(120% 110% at 50% 100%, #000 0%, transparent 78%) !important;
  mask-image: radial-gradient(120% 110% at 50% 100%, #000 0%, transparent 78%) !important;
}

/* единственная кнопка другого цвета — «Сбросить всё» / «Очистить» */
html body .danger-btn.danger-btn:not(#mzx):not(#mzx) {
  background: linear-gradient(180deg,#C4515F 0%,#8E3541 100%) !important;
  color: #FFF1F2 !important;
}
html body .danger-btn.danger-btn:not(#mzx):not(#mzx) svg { fill: #FFF1F2 !important; color: #FFF1F2 !important; }

/* ── выбранная вкладка / вариант: серая, без белёсого блика ── */
html body .settings-tab.active:not(#mzx):not(#mzx):not(#mzx),
html body .coll-tab.active:not(#mzx):not(#mzx):not(#mzx),
html body .admin-tab.active:not(#mzx):not(#mzx):not(#mzx),
html body .kr-tab.active:not(#mzx):not(#mzx):not(#mzx),
html body .ap-tab.active:not(#mzx):not(#mzx):not(#mzx),
html body .px-tab.active:not(#mzx):not(#mzx):not(#mzx),
html body .stab.active:not(#mzx):not(#mzx):not(#mzx),
html body .exp-tab.active:not(#mzx):not(#mzx):not(#mzx),
html body .exp-tab[aria-selected="true"]:not(#mzx):not(#mzx):not(#mzx),
html body .auth-tab.active:not(#mzx):not(#mzx):not(#mzx),
html body .wave-mode-tab.active:not(#mzx):not(#mzx):not(#mzx),
html body .mzai-tab.active:not(#mzx):not(#mzx):not(#mzx),
html body .mzai-mo.active:not(#mzx):not(#mzx):not(#mzx),
html body .search-src-btn.active:not(#mzx):not(#mzx):not(#mzx),
html body .wave-src-btn.active:not(#mzx):not(#mzx):not(#mzx),
html body .cc-mode-btn.active:not(#mzx):not(#mzx):not(#mzx),
html body .cc-scope-btn.active:not(#mzx):not(#mzx):not(#mzx),
html body .pt-dir-btn.active:not(#mzx):not(#mzx):not(#mzx),
html body .pt-cmode-btn.active:not(#mzx):not(#mzx):not(#mzx),
html body .pt-mouse-btn.active:not(#mzx):not(#mzx):not(#mzx),
html body .pt-where-btn.active:not(#mzx):not(#mzx):not(#mzx),
html body .viz-cmode-btn.active:not(#mzx):not(#mzx):not(#mzx),
html body .gui-cover-shape-btn.active:not(#mzx):not(#mzx):not(#mzx),
html body .gui-player-pos-btn.active:not(#mzx):not(#mzx):not(#mzx),
html body .gui-sidebar-pos-btn.active:not(#mzx):not(#mzx):not(#mzx),
html body .text3d-color-btn.active:not(#mzx):not(#mzx):not(#mzx),
html body .sleep-btn.active:not(#mzx):not(#mzx):not(#mzx) {
  isolation: isolate !important;
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  color: #EAF3F7 !important;
  border-color: rgba(255,255,255,.10) !important;
  text-shadow: none !important;
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.8) !important;
}
/* перелив остаётся, но это светлая полоса внутри вкладки, а не пятно поверх */
html body .settings-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .coll-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .admin-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .kr-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .ap-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .px-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .stab.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .exp-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .exp-tab[aria-selected="true"]:not(#mzx):not(#mzx):not(#mzx)::before,
html body .auth-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .wave-mode-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .mzai-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .mzai-mo.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .search-src-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .wave-src-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .cc-mode-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .cc-scope-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .pt-dir-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .pt-cmode-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .pt-mouse-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .pt-where-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .viz-cmode-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .gui-cover-shape-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .gui-player-pos-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .gui-sidebar-pos-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .text3d-color-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
html body .sleep-btn.active:not(#mzx):not(#mzx):not(#mzx)::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important;
  border-radius: inherit !important;
  filter: none !important;
  opacity: 1 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 40%,
    rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 60%,
    rgba(255,255,255,0) 100%) no-repeat !important;
  background-size: 55% 100% !important;
  animation: mzTabGlint 6s ease-in-out infinite !important;
}
@keyframes mzTabGlint {
  0%        { background-position: -120% 0; }
  60%, 100% { background-position: 220% 0; }
}

/* варианты «4 дорожки / 6 дорожек / максимум» и таймер сна — пилюли, как вкладки */
html body .sleep-btn:not(#mzx):not(#mzx) {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(232,241,245,.75) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
html body .sleep-btn:not(#mzx):not(#mzx):hover { background: rgba(255,255,255,.10) !important; }

/* оценка зрителей — заливка из обложки, подпись по яркости заливки */
html body .rb.rb-users:not(#mzx) {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mz-ui-accent, var(--accent)) 86%, #fff) 0%,
    var(--mz-ui-accent, var(--accent)) 100%) !important;
  color: var(--mz-ui-on, #06121A) !important;
}
html body .rb.rb-users:not(#mzx) small { color: inherit !important; opacity: .72; }

@media (prefers-reduced-motion: reduce) {
  html body .exp-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
  html body .coll-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
  html body .admin-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
  html body .wave-mode-tab.active:not(#mzx):not(#mzx):not(#mzx)::before,
  html body .sleep-btn.active:not(#mzx):not(#mzx):not(#mzx)::before,
  html body .px-btn:not(#mzx):not(#mzx)::before,
  html body .ap-btn-play:not(#mzx):not(#mzx)::before,
  html body button[data-act]:not(#mzx):not(#mzx)::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 140б — ДОБОР ПОСЛЕ ПОВТОРНОГО ПРОХОДА
   position в этапе 140 больше не навязывается: у «Вернуться» в караоке
   своё позиционирование, и с relative она растянулась на всю ширину.
   :where() даёт relative только тем, кому позицию никто не задал, —
   иначе блик и сетка встали бы относительно чужого контейнера.
   ═══════════════════════════════════════════════════════════════════════ */
:where(html body) :where(.px-btn, .accent-btn, .btn-play-all, .ap-btn-play, .auth-submit,
  .karaoke-btn, .karaoke-btn-create, .karaoke-btn-join, .kr-search-btn, .dm-send,
  #karaoke-back-btn, button[data-act], #mz-prompt-ok, #mz-prompt-cancel,
  .settings-tab, .coll-tab, .admin-tab, .kr-tab, .ap-tab, .px-tab, .stab, .exp-tab, .auth-tab,
  .wave-mode-tab, .mzai-tab, .mzai-mo, .search-src-btn, .wave-src-btn, .cc-mode-btn,
  .cc-scope-btn, .pt-dir-btn, .pt-cmode-btn, .pt-mouse-btn, .pt-where-btn, .viz-cmode-btn,
  .gui-cover-shape-btn, .gui-player-pos-btn, .gui-sidebar-pos-btn, .text3d-color-btn,
  .sleep-btn, .eq-preset-btn, .speed-btn) {
  position: relative;
}

/* ── окно ввода (новый плейлист и т.п.): «OK» и «Отмена» как все кнопки ── */
html body #mz-prompt-ok:not(#mzx),
html body #mz-prompt-cancel:not(#mzx) {
  overflow: hidden;
  isolation: isolate !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mz-ui-accent, var(--accent)) 86%, #fff) 0%,
    var(--mz-ui-accent, var(--accent)) 100%) !important;
  color: var(--mz-ui-on, #06121A) !important;
  border: none !important;
  border-radius: 24px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 10px 24px -16px rgba(0,0,0,.75) !important;
}
html body #mz-prompt-ok:not(#mzx):hover,
html body #mz-prompt-cancel:not(#mzx):hover { filter: brightness(1.06); }
html body #mz-prompt-ok:not(#mzx)::before,
html body #mz-prompt-cancel:not(#mzx)::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: -25% !important; right: -25% !important; top: -40% !important;
  height: 180% !important;
  border-radius: 42% 58% 55% 45% / 60% 55% 45% 40% !important;
  filter: blur(10px) !important;
  opacity: .32 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg,
    rgba(150,158,168,0) 0%, rgba(150,158,168,.20) 35%, rgba(160,168,178,.30) 50%,
    rgba(150,158,168,.20) 65%, rgba(150,158,168,0) 100%) !important;
  animation: mzWaveRun 7s ease-in-out infinite !important;
}
html body #mz-prompt-ok:not(#mzx)::after,
html body #mz-prompt-cancel:not(#mzx)::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: radial-gradient(rgba(255,255,255,.10) .75px, transparent .75px) !important;
  background-size: 3.5px 3.5px !important;
  -webkit-mask-image: radial-gradient(120% 110% at 50% 100%, #000 0%, transparent 78%) !important;
  mask-image: radial-gradient(120% 110% at 50% 100%, #000 0%, transparent 78%) !important;
}

/* ── все вкладки и переключатели вариантов — одна форма, пилюля ── */
html body :is(.settings-tab, .coll-tab, .admin-tab, .kr-tab, .ap-tab, .px-tab, .stab, .exp-tab,
  .auth-tab, .wave-mode-tab, .mzai-tab, .mzai-mo, .search-src-btn, .wave-src-btn, .cc-mode-btn,
  .cc-scope-btn, .pt-dir-btn, .pt-cmode-btn, .pt-mouse-btn, .pt-where-btn, .viz-cmode-btn,
  .gui-cover-shape-btn, .gui-player-pos-btn, .gui-sidebar-pos-btn, .text3d-color-btn,
  .sleep-btn, .eq-preset-btn, .speed-btn):not(#mzx):not(#mzx):not(#mzx) {
  border-radius: 999px !important;
}

/* пресеты эквалайзера и скорость — как «4 дорожки / 6 дорожек» */
html body :is(.eq-preset-btn, .speed-btn):not(#mzx):not(#mzx) {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(232,241,245,.75) !important;
  font-weight: 600 !important;
}
html body :is(.eq-preset-btn, .speed-btn):not(#mzx):not(#mzx):hover { background: rgba(255,255,255,.10) !important; }

/* выбранный вариант — серый, как выбранная вкладка (у панели ИИ это .on) */
html body :is(.eq-preset-btn.active, .speed-btn.active, .mzai-tab.on, .mzai-mo.on):not(#mzx):not(#mzx):not(#mzx) {
  isolation: isolate !important;
  background: linear-gradient(180deg,#333A42,#1E242A) !important;
  color: #EAF3F7 !important;
  border-color: rgba(255,255,255,.10) !important;
  text-shadow: none !important;
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.8) !important;
}
html body :is(.eq-preset-btn.active, .speed-btn.active, .mzai-tab.on, .mzai-mo.on):not(#mzx):not(#mzx):not(#mzx)::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  filter: none !important;
  opacity: 1 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 40%,
    rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 60%,
    rgba(255,255,255,0) 100%) no-repeat !important;
  background-size: 55% 100% !important;
  animation: mzTabGlint 6s ease-in-out infinite !important;
}

/* баннер «Караоке с друзьями» в цвет обложки: подпись по яркости заливки,
   а не белая/серая — на светлой обложке её не было видно */
html[data-cover-scope~="banners"] body .karaoke-hero:not(#mzx) h2 { color: var(--mz-ui-on, #F2FAFD) !important; }
html[data-cover-scope~="banners"] body .karaoke-hero:not(#mzx) p { color: var(--mz-ui-on, #F2FAFD) !important; opacity: .74; }
html[data-cover-scope~="banners"] body .karaoke-hero:not(#mzx) svg { fill: var(--mz-ui-on, #F2FAFD) !important; color: var(--mz-ui-on, #F2FAFD) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 141 — ВКЛАДКА VALETON STUDIO (БЕТА)
   Редактор прошивки GP-150 во фрейме. Фон у фрейма прозрачный — сквозь него
   виден фон MUZLO; color-scheme совпадает со страницей Studio, иначе браузер
   подложил бы сплошную заливку.
   ═══════════════════════════════════════════════════════════════════════ */
html body #view-valeton { padding: 0 !important; }
html body #valeton-frame {
  display: block; width: 100%; height: calc(100vh - 110px);
  border: 0; background: transparent; color-scheme: dark;
}
html body .mz-beta {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1.4;
  color: #1A1305; background: linear-gradient(180deg, #F6DA86, #E2AE45); vertical-align: middle;
}

/* ═══ ЭТАП 142: табы Songsterr в плеере — табулатура с курсором ═══ */
html body #exp-tabs-content { display: flex; flex-direction: column; min-height: 0; }
html body #exp-tabs-content[style*="none"] { display: none !important; }
html body #tabs-results { display: flex; flex-direction: column; flex: 1; min-height: 0; }
html body .mzt-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px 0; flex-wrap: wrap; }
html body .mzt-bar2 { padding-bottom: 6px; }
html body .mzt-title { font-weight: 700; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .mzt-sel {
  flex: 1 1 140px; min-width: 0; max-width: 100%; height: 30px; padding: 0 28px 0 12px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background-color: rgba(255,255,255,.06);
  color: var(--text, #EAF3F7); font: 600 12px/1 inherit; font-family: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 13px, calc(100% - 10px) 13px; background-size: 5px 5px; background-repeat: no-repeat;
}
html body .mzt-sel option { background: #1E242A; color: #EAF3F7; }
html body .mzt-sync { flex: 0 1 120px; }
html body .mzt-tun { font-size: 11px; color: var(--dim, #8A96A0); letter-spacing: .06em; white-space: nowrap; }
html body .mzt-sp { flex: 1; }
html body .mzt-ib {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
  color: var(--text, #EAF3F7); font: 700 15px/1 inherit; cursor: pointer; text-decoration: none; flex: none;
}
html body .mzt-ib:hover { background: rgba(255,255,255,.12); }
html body .mzt-off { font-size: 11px; min-width: 50px; text-align: center; font-variant-numeric: tabular-nums; color: var(--dim, #8A96A0); cursor: default; user-select: none; }
html body .mzt-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 8px 40px; }
html body .mzt-sheet { position: relative; }
html body .mzt-row { position: relative; cursor: pointer; }
html body .mzt-row svg { display: block; overflow: visible; }
html body .mzt-row .st line { stroke: rgba(255,255,255,.17); stroke-width: 1; }
html body .mzt-row line.bar { stroke: rgba(255,255,255,.34); stroke-width: 1; }
html body .mzt-row text {
  font: 700 11px/1 "Onest", system-ui, sans-serif; fill: #EAF3F7; text-anchor: middle;
  paint-order: stroke; stroke: #12161B; stroke-width: 4px; stroke-linejoin: round;
}
html body .mzt-row text.tie { fill: rgba(234,243,247,.45); }
html body .mzt-row text.gr { font-size: 9px; }
html body .mzt-row text.mn { font-size: 9px; font-weight: 500; fill: rgba(234,243,247,.38); text-anchor: start; stroke: none; }
html body .mzt-row text.mk { font-size: 10px; font-weight: 800; fill: var(--mz-ui-accent, var(--accent, #4FC3F7)); text-anchor: start; stroke: none; letter-spacing: .04em; }
html body .mzt-row text.ch { font-size: 10px; font-weight: 700; fill: rgba(234,243,247,.72); stroke: none; }
html body .mzt-row g.on text:not(.ch) { fill: var(--mz-ui-accent, var(--accent, #4FC3F7)); }
html body .mzt-cur, html body .mzt-mhl { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
html body .mzt-cur { width: 2px; margin-left: -1px; border-radius: 2px; background: var(--mz-ui-accent, var(--accent, #4FC3F7)); box-shadow: 0 0 10px var(--mz-ui-accent, var(--accent, #4FC3F7)); z-index: 2; }
html body .mzt-mhl { background: rgba(255,255,255,.05); border-radius: 6px; z-index: 0; }
html body #exp-tabs-content.mzt-full {
  position: fixed !important; inset: 0 !important; z-index: 10050 !important;
  background: var(--bg, #0E1216) !important; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) !important;
}
html body #exp-tabs-content.mzt-full .mzt-scroll { padding: 8px 24px 60px; }
html body #exp-tabs-content.mzt-full .mzt-row text { font-size: 12px; }

/* ═══ ЭТАП 142б: табы на телефоне — своя прокрутка, чтобы курсор держался в кадре ═══ */
@media (max-width: 700px) {
  html body .mzt-tun { display: none; }
  html body .mzt-scroll { flex: none; height: 64vh; min-height: 280px; }
  html body #exp-tabs-content.mzt-full .mzt-scroll { flex: 1; height: auto; padding: 8px 10px 60px; }
}

/* ═══ ЭТАП 144: одни и те же три вида кнопок везде ═══
   1) переключатель-сегмент (Вход/Регистрация, вкладки плеера, коллекции,
      настроек, «Моя волна/Обзор», 4/6 дорожек, эквалайзер, скорость, ИИ…):
      общая подложка, пункт 34 px, выбранный — серая пилюля;
   2) кнопка действия: заливка цветом обложки, 40 px, 13.5 px жирный;
   3) кнопка-инструмент (панель текста, табы, стрелки): серая пилюля 32 px,
      у одиночной иконки — круг. */

/* 1. подложка сегментов */
html body :is(#auth-tabs, #exp-tabs, .wave-mode-tabs, .collection-tabs, .admin-tabs, #settings-tabs, .kr-tabs,
  .speed-btns, .sleep-btns, .mz-seg, div:has(> .eq-preset-btn), div:has(> .sleep-btn), div:has(> .mzai-tab), div:has(> .mzai-mo)):not(#mzx):not(#mzx) {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 22px !important;
  padding: 4px !important;
  gap: 2px !important;
  box-shadow: none !important;
}
html body :is(.speed-btns, .sleep-btns, .mz-seg, div:has(> .eq-preset-btn), div:has(> .sleep-btn)):not(#mzx):not(#mzx) {
  display: inline-flex; flex-wrap: wrap; width: auto !important; max-width: 100%;
}

/* 1. пункт сегмента — обычный */
html body :is(.auth-tab, .exp-tab, .wave-mode-tab, .coll-tab, .admin-tab, .settings-tab, .kr-tab, .mzai-tab, .mzai-mo,
  .speed-btn, .sleep-btn, .eq-preset-btn, .mz-seg-btn):not(#mzx):not(#mzx):not(#mzx) {
  min-height: 34px !important; height: 34px !important;
  padding: 0 16px !important; margin: 0 !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgba(232,241,245,.62) !important;
  font-family: "Onest", system-ui, sans-serif !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  box-shadow: none !important; line-height: 1 !important;
  white-space: nowrap;
}
html body :is(.auth-tab, .exp-tab, .wave-mode-tab, .coll-tab, .admin-tab, .settings-tab, .kr-tab, .mzai-tab, .mzai-mo,
  .speed-btn, .sleep-btn, .eq-preset-btn, .mz-seg-btn):not(#mzx):not(#mzx):not(#mzx):hover {
  color: #EAF3F7 !important; background: rgba(255,255,255,.05) !important;
}
html body :is(.auth-tab, .exp-tab, .wave-mode-tab, .coll-tab, .admin-tab, .settings-tab, .kr-tab, .mzai-tab, .mzai-mo,
  .speed-btn, .sleep-btn, .eq-preset-btn, .mz-seg-btn):is(.active, .on):not(#mzx):not(#mzx):not(#mzx):not(#mzx) {
  background: linear-gradient(180deg, #333A42, #1E242A) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #EAF3F7 !important;
}
html body :is(.exp-tab, .settings-tab, .coll-tab) svg { width: 14px; height: 14px; margin: 0 !important; }
html body .exp-tab span { text-transform: none !important; }

/* подсказка при наведении (режимы стемов и всё с data-tip) */
html body .mz-seg-btn[data-tip] { position: relative; }
html body .mz-seg-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
  width: 250px; padding: 9px 12px; border-radius: 12px;
  background: #1B2127; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  color: #EAF3F7; font-size: 12.5px; font-weight: 500; line-height: 1.45; white-space: normal; text-align: left;
  pointer-events: none;
}
html body .mz-stem-scope-wrap { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; }
html body .mz-stem-scope-cap { font-size: 12px; color: var(--dim, #8A96A0); }
html body .mz-stem-scope .mz-seg-btn { min-width: 38px; padding: 0 12px !important; }

/* 2. кнопки действий — один размер и шрифт */
html body :is(.px-btn, .accent-btn, .btn-play-all, .ap-btn-play, .auth-submit, .karaoke-btn, .karaoke-btn-create, .karaoke-btn-join,
  .kr-search-btn, .dm-send, #karaoke-back-btn, #mz-prompt-ok, #mz-prompt-cancel, button[data-act]):not(.sleep-btn):not(.speed-btn):not(.eq-preset-btn):not(#mzx):not(#mzx):not(#mzx) {
  min-height: 40px !important; height: auto !important;
  padding: 0 20px !important;
  font-size: 13.5px !important; font-weight: 700 !important;
  letter-spacing: .01em !important; text-transform: none !important;
  line-height: 1.1 !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
html body .px-btn.mini-btn:not(#mzx):not(#mzx):not(#mzx) { min-height: 34px !important; padding: 0 16px !important; font-size: 12.5px !important; }
html body #mzw-go:not(#mzx):not(#mzx) { border-radius: 999px !important; }

/* 3. инструменты: панель текста, табы, стрелки */
html body :is(.ly-tool-btn, .mzt-ib, .sync-collapse, .wave-left-toggle, .karaoke-btn-small):not(#mzx):not(#mzx):not(#mzx) {
  height: 32px !important; min-height: 32px !important; min-width: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: #EAF3F7 !important;
  font-size: 12.5px !important; font-weight: 600 !important; text-transform: none !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: none !important;
}
html body :is(.ly-tool-icon, .mzt-ib, .sync-collapse, .wave-left-toggle, .karaoke-btn-small):not(#mzx):not(#mzx):not(#mzx) { width: 32px !important; padding: 0 !important; }
html body :is(.ly-tool-btn, .mzt-ib, .sync-collapse, .wave-left-toggle, .karaoke-btn-small):not(#mzx):not(#mzx):not(#mzx):hover { background: rgba(255,255,255,.12) !important; }
/* стрелка свёртки жанров заметнее */
html body #wave-screen .wave-left-toggle:not(#mzx):not(#mzx):not(#mzx) { width: 34px !important; height: 34px !important; }
html body #wave-screen .wave-left-cap { font-size: 12px; }
html body .mzc-hidden:not(#mzx):not(#mzx):not(#mzx):not(#mzx) { display: none !important; }

/* ═══ ЭТАП 145: клип на весь экран ═══ */
html body #mzc-cinema-btn { margin-top: 4px; }
html body #exp-player#exp-player.clip-cinema { background: #000 !important; background-image: none !important; }
html body #exp-player.clip-cinema::before, html body #exp-player.clip-cinema::after { display: none !important; }
html body #exp-player.clip-cinema > #mzclip-bgv {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; z-index: 0 !important; border-radius: 0 !important; max-width: none !important; max-height: none !important; filter: brightness(.62) saturate(1.05);
}
html body #mzc-edge {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(26px) saturate(1.1); backdrop-filter: blur(26px) saturate(1.1);
  -webkit-mask-image: radial-gradient(ellipse 70% 68% at 55% 50%, transparent 58%, #000 100%);
  mask-image: radial-gradient(ellipse 70% 68% at 55% 50%, transparent 58%, #000 100%);
  background: radial-gradient(ellipse 80% 75% at 55% 50%, rgba(0,0,0,.30) 40%, rgba(0,0,0,.62) 100%);
}
html body #exp-player.clip-cinema > :is(#exp-left, #exp-right) {
  position: relative; z-index: 2;
  background: transparent !important; background-image: none !important;
  border: none !important; box-shadow: none !important;
}
html body #exp-player.clip-cinema > #exp-left {
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,0)) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
html body #exp-player.clip-cinema :is(#exp-tabs, #exp-close, #lyrics-sync-status, #mzclip-bg-badge, #mzc-cinema-btn, #lyrics-visualizer) { display: none !important; }
html body #exp-player.clip-cinema :is(#exp-queue-content, #exp-stems-content, #exp-tabs-content) { display: none !important; }
html body #exp-player.clip-cinema #exp-lyrics-content { display: flex !important; flex: 1; background: transparent !important; }
html body #exp-player.clip-cinema #exp-lyrics-content::after { display: none !important; }
html body #exp-player.clip-cinema .lyric-line { text-shadow: 0 2px 18px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6); }
html body #mzc-exit {
  position: absolute; top: 18px; left: 18px; z-index: 6;
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18); background: rgba(8,12,16,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; cursor: pointer;
}
html body #mzc-exit:hover { background: rgba(8,12,16,.7); }
html body #exp-player.clip-cinema > #exp-left { padding-top: 76px; }
@media (max-width: 768px) {
  html body #exp-player.clip-cinema #exp-cover-wrap { display: none !important; }
  html body #exp-player.clip-cinema > #exp-left { padding-top: 72px !important; gap: 14px !important; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)) !important; }
}

/* ═══ ЭТАП 146: лента «Моей волны» пляшет под ритм (js/46-wave-beat.js) ═══ */
html body #wave-screen .wave-ym-right::before {
  translate: var(--wa-tx, 0px) var(--wa-ty, 0px);
  scale: var(--wa-sx, 1) var(--wa-sy, 1);
  rotate: var(--wa-r, 0deg);
}
html body #wave-screen .wave-ym-right::after {
  translate: var(--wb-tx, 0px) var(--wb-ty, 0px);
  scale: var(--wb-sx, 1) var(--wb-sy, 1);
  rotate: var(--wb-r, 0deg);
}

/* ═══ ЭТАП 147: табы — ровные неподвижные линии ═══ */
html body .mzt-scroll { scrollbar-gutter: stable; }
html body .mzt-row svg { width: 100%; }
html body .mzt-cur { transition: none !important; }

/* ═══ ЭТАП 148: цвета кнопок баннеров, винил, свечение обложки ═══ */

/* Кнопки баннеров главной снова своего баннера (ЭТАП 140 красил их общим
   акцентом): волна — цветом обложки, ИИ — фиолетовая, «Топ месяца» — золотая. */
html body #mz-home button[data-act="wave"]:not(#mzx):not(#mzx) {
  background: linear-gradient(180deg, rgba(var(--mz-tint-rgb, 155,232,248),.92), rgb(var(--mz-tint-rgb, 79,196,222))) !important;
  color: #04141B !important;
  box-shadow: 0 14px 34px -12px rgba(var(--mz-tint-rgb, 79,196,222),.75) !important;
}
html body #mz-home button[data-act="ai"]:not(#mzx):not(#mzx) {
  background: linear-gradient(180deg, #C6B9FF, #8A79F0) !important;
  color: #150F30 !important;
  box-shadow: 0 14px 34px -12px rgba(124,108,231,.75) !important;
}
html body #mz-home button[data-act="artist"]:not(#mzx):not(#mzx) {
  background: linear-gradient(180deg, #FFE1A0, #E8B44A) !important;
  color: #2A1D07 !important;
  box-shadow: 0 14px 34px -12px rgba(232,180,74,.6) !important;
}
html body #mz-home button[data-act]:not(#mzx):not(#mzx) svg { fill: currentColor; }

/* Свечение цветом обложки вокруг неё и в левой панели плеера */
html body #exp-player#exp-player:not(.vinyl-on) #exp-cover-wrap {
  box-shadow: 0 26px 60px -26px #000, 0 0 0 1px rgba(255,255,255,.07),
              0 0 140px -4px rgba(var(--cover-accent-rgb, 79,196,222), .85) !important;
}
html body #exp-player#exp-player #exp-left {
  background-image:
    radial-gradient(75% 55% at 50% 36%, rgba(var(--cover-accent-rgb, 79,196,222), .42) 0%, rgba(var(--cover-accent-rgb, 79,196,222), 0) 72%),
    radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.78) 100%) !important;
}

/* Винил: пластинка с бороздками и бликом, круглая наклейка из обложки,
   ореол цвета обложки */
html body #exp-player#exp-player.vinyl-on #exp-cover-wrap {
  position: relative;
  border-radius: 50% !important;
  overflow: visible !important;
  background-color: #070707 !important;
  background-image:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 0 1px, rgba(0,0,0,0) 1px 3.5px),
    conic-gradient(from 20deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.13) 35deg, rgba(255,255,255,0) 75deg,
      rgba(255,255,255,0) 180deg, rgba(255,255,255,.09) 215deg, rgba(255,255,255,0) 255deg, rgba(255,255,255,0) 360deg),
    radial-gradient(circle at 50% 50%, rgba(var(--vinyl-rgb, var(--cover-accent-rgb, 40,40,40)), .35) 0%, rgba(0,0,0,.92) 76%) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.7),
              0 0 130px -4px rgba(var(--cover-accent-rgb, 79,196,222), .75),
              inset 0 0 0 2px rgba(255,255,255,.05) !important;
  animation: vinyl-spin 4.2s linear infinite !important;
  animation-play-state: paused !important;
}
html body.audio-playing #exp-player#exp-player.vinyl-on #exp-cover-wrap { animation-play-state: running !important; }
html body #exp-player#exp-player.vinyl-on :is(#exp-cover, #exp-cover-ph) {
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 40% !important; height: 40% !important;
  border-radius: 50% !important; object-fit: cover !important;
  box-shadow: 0 0 0 4px rgba(0,0,0,.65), 0 0 0 6px rgba(255,255,255,.10), inset 0 0 18px rgba(0,0,0,.5) !important;
}

/* ═══ ЭТАП 150: выбор значения — цветом обложки; «Все цвета» в интерфейсе ═══
   Вкладки-навигация (настройки, плеер, коллекция) остаются серыми пилюлями,
   а выбранное ЗНАЧЕНИЕ в переключателе («Один цвет / Все цвета», области
   обложки, режимы частиц, позиции панелей, эквалайзер, скорость, 4/6
   дорожек, режимы стемов) — заливкой цветом обложки, как кнопки действий. */

/* подложка переключателей значений в настройках */
html body :is(.cc-scope-seg, div:has(> .cc-mode-btn), div:has(> .gui-cover-shape-btn), div:has(> .gui-sidebar-pos-btn),
  div:has(> .gui-player-pos-btn), div:has(> .text3d-color-btn)):not(#mzx):not(#mzx) {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 22px !important;
  padding: 4px !important; gap: 2px !important;
  box-shadow: none !important;
}

/* пункты — как все сегменты */
html body :is(.cc-scope-btn, .cc-mode-btn, .gui-cover-shape-btn, .gui-sidebar-pos-btn, .gui-player-pos-btn, .text3d-color-btn):not(#mzx):not(#mzx):not(#mzx) {
  min-height: 32px !important; height: 32px !important;
  padding: 0 14px !important; margin: 0 !important;
  align-items: center; justify-content: center;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgba(232,241,245,.62) !important;
  font-family: "Onest", system-ui, sans-serif !important;
  font-size: 13px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  box-shadow: none !important; filter: none !important;
}
html body :is(.cc-scope-btn, .cc-mode-btn, .gui-cover-shape-btn, .gui-sidebar-pos-btn, .gui-player-pos-btn, .text3d-color-btn):not(#mzx):not(#mzx):not(#mzx)::before,
html body :is(.cc-scope-btn, .cc-mode-btn, .gui-cover-shape-btn, .gui-sidebar-pos-btn, .gui-player-pos-btn, .text3d-color-btn):not(#mzx):not(#mzx):not(#mzx)::after { display: none !important; }
html body :is(.cc-scope-btn, .cc-mode-btn, .gui-cover-shape-btn, .gui-sidebar-pos-btn, .gui-player-pos-btn, .text3d-color-btn):not(#mzx):not(#mzx):not(#mzx):hover {
  color: #EAF3F7 !important; background: rgba(255,255,255,.05) !important;
}

/* выбранное значение — цветом обложки (и в старых, и в новых переключателях) */
html body :is(.cc-scope-btn, .cc-mode-btn, .gui-cover-shape-btn, .gui-sidebar-pos-btn, .gui-player-pos-btn, .text3d-color-btn,
  .speed-btn, .sleep-btn, .eq-preset-btn, .mz-seg-btn):is(.active, .on):not(#mzx):not(#mzx):not(#mzx):not(#mzx):not(#mzx) {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mz-ui-accent, var(--accent)) 86%, #fff) 0%,
    var(--mz-ui-accent, var(--accent)) 100%) !important;
  color: var(--mz-ui-on, #06121A) !important;
  border-color: transparent !important;
}

/* «Все цвета»: второй и третий цвет палитры в градиентах (js/47-cover-palette.js) */
html.mz-palette body :is(.px-btn, .accent-btn, .btn-play-all, .ap-btn-play, .auth-submit, .karaoke-btn, .karaoke-btn-create,
  .karaoke-btn-join, .kr-search-btn, .dm-send, #karaoke-back-btn, #mz-prompt-ok, #mz-prompt-cancel):not(.danger-btn):not(.sleep-btn):not(.speed-btn):not(.eq-preset-btn):not(.cc-scope-btn):not(.cc-mode-btn):not(.gui-cover-shape-btn):not(.gui-sidebar-pos-btn):not(.gui-player-pos-btn):not(.text3d-color-btn):not(#mzx):not(#mzx):not(#mzx),
html.mz-palette body :is(.cc-scope-btn, .cc-mode-btn, .gui-cover-shape-btn, .gui-sidebar-pos-btn, .gui-player-pos-btn, .text3d-color-btn,
  .speed-btn, .sleep-btn, .eq-preset-btn, .mz-seg-btn):is(.active, .on):not(#mzx):not(#mzx):not(#mzx):not(#mzx):not(#mzx):not(#mzx) {
  background: linear-gradient(120deg, var(--mz-ui-accent, var(--accent)) 0%, var(--mz-ui-accent2, var(--accent)) 100%) !important;
}
html.mz-palette body :is(#progress-fill, #exp-progress-fill):not(#mzx) {
  background: linear-gradient(90deg, var(--mz-ui-accent, var(--accent)), var(--mz-ui-accent2, var(--accent)), var(--mz-ui-accent3, var(--accent))) !important;
}
html.mz-palette body :is(#btn-play, .px-play-btn, #wave-play-btn):not(#mzx):not(#mzx):not(#mzx) {
  background: linear-gradient(135deg, var(--mz-ui-accent, var(--accent)), var(--mz-ui-accent2, var(--accent))) !important;
}
html.mz-palette body #exp-player#exp-player:not(.vinyl-on) #exp-cover-wrap {
  box-shadow: 0 26px 60px -26px #000, 0 0 0 1px rgba(255,255,255,.07),
              -40px -30px 140px -20px var(--mz-ui-accent, rgba(79,196,222,.8)),
              40px 40px 140px -20px var(--mz-ui-accent2, rgba(79,196,222,.8)) !important;
}
html.mz-palette body #exp-player#exp-player #exp-left {
  background-image:
    radial-gradient(55% 40% at 32% 30%, color-mix(in srgb, var(--mz-ui-accent) 40%, transparent) 0%, transparent 72%),
    radial-gradient(55% 40% at 70% 46%, color-mix(in srgb, var(--mz-ui-accent2) 36%, transparent) 0%, transparent 72%),
    radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.78) 100%) !important;
}

/* ═══ ЭТАП 151: ровное свечение обложки ═══
   Пятно на фоне левой панели (ЭТАП 148/150) висело на 36% высоты — выше
   обложки — и обрезалось краями панели. Фон панели — снова тёмный, светится
   только сама обложка: ровный ореол со всех сторон, по её цвету. */
html body #exp-player#exp-player #exp-left,
html.mz-palette body #exp-player#exp-player #exp-left {
  background-image: radial-gradient(120% 90% at 50% 40%,
    rgba(0,0,0,.35) 0%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.78) 100%) !important;
}
html body #exp-player#exp-player:not(.vinyl-on) #exp-cover-wrap {
  box-shadow: 0 18px 40px -22px #000, 0 0 0 1px rgba(255,255,255,.07),
              0 0 60px 4px rgba(var(--cover-accent-rgb, 79,196,222), .38),
              0 0 110px 18px rgba(var(--cover-accent-rgb, 79,196,222), .16) !important;
}
html.mz-palette body #exp-player#exp-player:not(.vinyl-on) #exp-cover-wrap {
  box-shadow: 0 18px 40px -22px #000, 0 0 0 1px rgba(255,255,255,.07),
              -12px -10px 60px 2px color-mix(in srgb, var(--mz-ui-accent) 42%, transparent),
              12px 10px 60px 2px color-mix(in srgb, var(--mz-ui-accent2) 42%, transparent),
              0 0 110px 18px rgba(var(--cover-accent-rgb, 79,196,222), .14) !important;
}
html body #exp-player#exp-player.vinyl-on #exp-cover-wrap {
  box-shadow: 0 22px 60px rgba(0,0,0,.7),
              0 0 60px 4px rgba(var(--cover-accent-rgb, 79,196,222), .36),
              0 0 110px 18px rgba(var(--cover-accent-rgb, 79,196,222), .14),
              inset 0 0 0 2px rgba(255,255,255,.05) !important;
}

/* ═══ ЭТАП 152: «Моя волна» со свёрнутым списком жанров ═══
   Свёрнутый список оставлял тёмную колонку 54px, о её край обрывалась
   лента, а сетка точек не растягивалась на освободившееся место. Теперь
   свёрнутый список — только плавающая кнопка поверх экрана, а лента и
   сетка занимают всю ширину. */
html body #wave-screen:not(#mzx) { position: relative; }
html body #wave-screen.wave-left-collapsed .wave-ym-left:not(#mzx) {
  position: absolute !important; top: 0; left: 0; bottom: 0; z-index: 5;
  width: 58px !important; min-width: 58px !important;
  background: transparent !important; border-right: none !important;
  pointer-events: none;
}
html body #wave-screen.wave-left-collapsed .wave-ym-left:not(#mzx) .wave-left-toggle { pointer-events: auto; }

/* ═══ ЭТАП 153: клип через встроенный плеер YouTube (js/26-clips.js) ═══
   Когда сервер не может скачать клип (YouTube требует «подтвердить, что не
   бот» от IP сервера), клип показывает плеер YouTube прямо в браузере.
   Это iframe, а не <video>, поэтому «cover» делается вручную: кадр 16:9
   растягивается до большей из сторон контейнера и центрируется. */
html body #mzclip-bgv.mzclip-embed {
  overflow: hidden !important;
  pointer-events: none !important;
  container-type: size;
  background: #000;
}
html body #mzclip-bgv.mzclip-embed > div,
html body #mzclip-bgv.mzclip-embed iframe {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  width: max(100cqw, 177.78cqh) !important;
  height: max(100cqh, 56.25cqw) !important;
  max-width: none !important; max-height: none !important;
  /* чуть крупнее — чтобы подпись YouTube по краям не попадала в кадр */
  transform: translate(-50%, -50%) scale(1.06) !important;
  border: 0 !important; margin: 0 !important;
  pointer-events: none !important;
}


/* ═══ ЭТАП 154: настройка волны — шаг жанров и поиск артистов (js/38-onboarding.js) ═══
   Окно из ЭТАПА 105 стало двухшаговым: сначала жанры плитками, потом
   артисты с поиском. Выбранные артисты — лентой над сеткой, чтобы они не
   терялись при смене запроса. */
html body #onb-modal .onb-steps:not(#mzx) { display: flex; gap: 6px; margin-bottom: 12px; }
html body #onb-modal .onb-dot:not(#mzx) {
  width: 22px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14);
  transition: background .2s ease;
}
html body #onb-modal .onb-dot.on:not(#mzx) { background: var(--mz-ui-accent, #4FC4DE); }

/* шаг 1: поиск, выбранные и прогресс не нужны */
html body #onb-modal:not(.onb-step2) .onb-search-row:not(#mzx),
html body #onb-modal:not(.onb-step2) .onb-picked:not(#mzx),
html body #onb-modal:not(.onb-step2) .onb-progress:not(#mzx) { visibility: hidden; height: 0; margin: 0; overflow: hidden; }

html body #onb-modal .onb-grid.onb-genres:not(#mzx) {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start;
}
html body #onb-modal .onb-genre:not(#mzx) {
  position: relative; height: 76px; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: linear-gradient(150deg,#16323F,#0A1620);
  border: 2px solid transparent; transition: border-color .15s ease, transform .15s ease;
}
html body #onb-modal .onb-genre:not(#mzx):hover { transform: translateY(-1px); }
html body #onb-modal .onb-gpic:not(#mzx) { position: absolute; inset: 0; }
html body #onb-modal .onb-gpic img:not(#mzx) { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
html body #onb-modal .onb-gname:not(#mzx) {
  position: absolute; left: 12px; right: 30px; bottom: 10px;
  font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
html body #onb-modal .onb-genre .onb-check:not(#mzx) {
  inset: auto; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  font-size: 13px; background: var(--mz-ui-accent, #4FC4DE); color: #041018;
}
html body #onb-modal .onb-genre.on:not(#mzx) { border-color: var(--mz-ui-accent, #4FC4DE); }
html body #onb-modal .onb-genre.on .onb-check:not(#mzx) { opacity: 1; }

/* шаг 2: поиск и выбранные */
html body #onb-modal .onb-search-row:not(#mzx) { margin-top: 14px; }
html body #onb-modal .onb-search:not(#mzx) {
  width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: #E8F1F5; font-size: 14px; outline: none;
}
html body #onb-modal .onb-search:not(#mzx):focus { border-color: var(--mz-ui-accent, #4FC4DE); }
html body #onb-modal .onb-picked:not(#mzx) {
  display: flex; margin-top: 10px; gap: 6px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
}
html body #onb-modal .onb-picked:not(#mzx)::-webkit-scrollbar { display: none; }
html body #onb-modal .onb-chip:not(#mzx) {
  flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 3px 9px 3px 3px; border-radius: 16px; font-size: 12px; color: #E8F1F5;
  background: rgba(79,196,222,.14); border: 1px solid rgba(79,196,222,.3);
}
html body #onb-modal .onb-chip img:not(#mzx) { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
html body #onb-modal .onb-chip b:not(#mzx) { font-weight: 500; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #onb-modal .onb-chip i:not(#mzx) { font-style: normal; opacity: .55; }
html body #onb-modal .onb-chip:not(#mzx):hover i { opacity: 1; }

html body #onb-modal .onb-back:not(#mzx) {
  background: none; border: none; color: rgba(232,241,245,.55); font-size: 13px; cursor: pointer; padding: 6px 2px;
}
html body #onb-modal .onb-back:not(#mzx):hover { color: #E8F1F5; }
html body #onb-modal .onb-count:not(#mzx) { flex: 1; text-align: right; }
@media (max-width: 900px) {
  html body #onb-modal .onb-grid.onb-genres:not(#mzx) { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  html body #onb-modal .onb-genre:not(#mzx) { height: 64px; }
}

/* ═══ ЭТАП 155: панель MUZLO AI ═══
   Шапка в одну строку, треки из ответа — одной карточкой-списком (номер,
   обложка, название, длительность, «Слушать все»), пока трек ищется —
   мерцающая заглушка, строки без трека в каталоге гаснут. Поле ввода и
   служебные карточки в том же тёмном стекле. Цвет — акцент обложки. */
html body #mzai-panel:not(#mzx) {
  width: 400px !important; max-width: 100vw !important;
  background: #0A0F15 !important;
  border-left: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: -30px 0 80px -40px rgba(0,0,0,.8) !important;
}

/* шапка */
html body #mzai-panel #mzai-head:not(#mzx) {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 10px; padding: 14px 14px 10px 16px !important; margin: 0 !important;
  background: none !important; border: 0 !important;
}
html body #mzai-panel .mzai-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
html body #mzai-panel .mzai-logo {
  width: 30px; height: 30px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--mz-ui-on, #06121A);
  background: linear-gradient(145deg, color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 80%, #fff), var(--mz-ui-accent, #4FC4DE));
  box-shadow: 0 6px 18px -8px var(--mz-ui-accent, #4FC4DE);
}
html body #mzai-panel .mzai-name {
  font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .01em;
  color: #E8F1F5; white-space: nowrap;
}
html body #mzai-panel .mzai-badge {
  height: 20px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--mz-ui-accent, #4FC4DE);
  background: color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 14%, transparent);
}
html body #mzai-panel #mzai-close:not(#mzx) {
  width: 34px !important; height: 34px !important; padding: 0 !important; flex: none;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important; border: 0 !important;
  background: rgba(255,255,255,.05) !important; color: rgba(232,241,245,.7) !important;
}
html body #mzai-panel #mzai-close:not(#mzx):hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }
html body #mzai-panel #mzai-close svg { width: 17px; height: 17px; }
html body #mzai-panel #mzai-bar:not(#mzx) {
  padding: 0 14px 12px !important; gap: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important; background: none !important;
}
html body #mzai-panel #mzai-models[hidden] { display: none !important; }
html body #mzai-panel #mzai-tabs:not(#mzx) { width: 100%; }
html body #mzai-panel #mzai-tabs:not(#mzx) .mzai-tab { flex: 1 1 0; }

/* сообщения */
html body #mzai-panel #mzai-msgs:not(#mzx) { padding: 18px 16px 22px !important; gap: 18px !important; }
html body #mzai-panel .mzai-turn:not(.mzai-user) .mzai-role:not(#mzx) {
  font-size: 10.5px !important; letter-spacing: .08em !important;
  color: rgba(232,241,245,.38) !important;
}
html body #mzai-panel .mzai-turn:not(.mzai-user) .mzai-body:not(#mzx) {
  font-size: 14px !important; line-height: 1.6 !important; color: rgba(232,241,245,.88) !important;
}

/* список треков */
html body #mzai-panel .mzai-list {
  margin: 6px 0 2px; padding: 6px;
  border-radius: 16px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.07);
}
html body #mzai-panel .mzai-list-h {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 8px 8px;
  font-size: 12.5px; font-weight: 600; color: rgba(232,241,245,.55);
}
html body #mzai-panel .mzai-list-h .ic { display: flex; color: var(--mz-ui-accent, #4FC4DE); }
html body #mzai-panel .mzai-list-h .ic svg { width: 15px; height: 15px; }
html body #mzai-panel .mzai-list-h .n { flex: 1; }
html body #mzai-panel .mzai-list-all {
  height: 30px; padding: 0 13px 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--mz-ui-on, #06121A);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 86%, #fff), var(--mz-ui-accent, #4FC4DE));
}
html body #mzai-panel .mzai-list-all:hover { filter: brightness(1.08); }
html body #mzai-panel .mzai-list-all svg { width: 14px; height: 14px; }
html body #mzai-panel .mzai-list-rows { display: flex; flex-direction: column; gap: 1px; }
html body #mzai-panel .mzai-list-more {
  width: 100%; margin-top: 4px; padding: 9px 0 5px; border: 0; background: none; cursor: pointer;
  border-top: 1px solid rgba(255,255,255,.06);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 80%, #fff);
}
html body #mzai-panel .mzai-list-more:hover { color: #fff; }

/* строка трека */
html body #mzai-panel .mzai-song:not(#mzx) {
  position: relative;
  display: grid !important; grid-template-columns: 22px 42px minmax(0, 1fr) auto !important;
  align-items: center !important; gap: 11px !important;
  margin: 0 !important; padding: 6px 10px 6px 6px !important;
  border: 0 !important; border-radius: 11px !important;
  background: transparent !important; box-shadow: none !important;
  cursor: pointer; transition: background .15s ease;
}
html body #mzai-panel .mzai-song:not(#mzx):hover { background: rgba(255,255,255,.05) !important; }
html body #mzai-panel .mzai-song .no {
  grid-column: 1; grid-row: 1; text-align: center;
  font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(232,241,245,.4);
}
html body #mzai-panel .mzai-song .pl:not(#mzx) {
  grid-column: 1; grid-row: 1; justify-self: center;
  width: 22px !important; height: 22px !important;
  display: flex !important; align-items: center; justify-content: center;
  background: none !important; color: #fff !important; opacity: 0; transition: opacity .12s ease;
}
html body #mzai-panel .mzai-song .pl svg { width: 16px !important; height: 16px !important; }
html body #mzai-panel .mzai-song:hover .no { opacity: 0; }
html body #mzai-panel .mzai-song:hover .pl:not(#mzx) { opacity: 1; }
html body #mzai-panel .mzai-song .cvw {
  grid-column: 2; width: 42px; height: 42px; border-radius: 9px; overflow: hidden;
  background: rgba(255,255,255,.06);
}
html body #mzai-panel .mzai-song .cvw img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .2s ease; }
html body #mzai-panel .mzai-song .cvw img.in { opacity: 1; }
html body #mzai-panel .mzai-song .tt:not(#mzx) { grid-column: 3; min-width: 0; line-height: 1.3 !important; }
html body #mzai-panel .mzai-song .tt b:not(#mzx) {
  display: block; font-size: 13.5px !important; font-weight: 600 !important; color: #E8F1F5 !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body #mzai-panel .mzai-song .tt span:not(#mzx) {
  display: block; margin-top: 2px; font-size: 12px !important; color: rgba(232,241,245,.5) !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body #mzai-panel .mzai-song .du {
  grid-column: 4; font-size: 11.5px; font-variant-numeric: tabular-nums; color: rgba(232,241,245,.4);
}
/* ищется */
html body #mzai-panel .mzai-song.checking:not(#mzx) { cursor: default; }
html body #mzai-panel .mzai-song.checking:not(#mzx):hover { background: transparent !important; }
html body #mzai-panel .mzai-song.checking .pl { display: none !important; }
html body #mzai-panel .mzai-song.checking:hover .no { opacity: 1; }
html body #mzai-panel .mzai-song.checking .cvw {
  background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 70%);
  background-size: 250% 100%; animation: mzaiShimmer 1.3s linear infinite;
}
html body #mzai-panel .mzai-song.checking .tt { opacity: .55; }
@keyframes mzaiShimmer { from { background-position: 120% 0; } to { background-position: -130% 0; } }
/* нет в каталоге */
html body #mzai-panel .mzai-song.miss:not(#mzx) { cursor: default; opacity: .42; }
html body #mzai-panel .mzai-song.miss:not(#mzx):hover { background: transparent !important; }
html body #mzai-panel .mzai-song.miss .pl { display: none !important; }
html body #mzai-panel .mzai-song.miss:hover .no { opacity: 1; }
/* играет */
html body #mzai-panel .mzai-song.now .tt b:not(#mzx),
html body #mzai-panel .mzai-song.now .no { color: var(--mz-ui-accent, #4FC4DE) !important; }

/* служебные карточки: «ищу…», «включаю…», «думаю…» */
html body #mzai-panel :is(.mzai-work, .mzai-think, .mzai-qv, .mzai-report, .mzai-edit):not(#mzx) {
  background: rgba(255,255,255,.028) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 14px !important;
}
html body #mzai-panel .mzai-work.done:not(#mzx) { border-color: color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 35%, transparent) !important; }
html body #mzai-panel :is(.mzai-spin, .mzai-dot):not(#mzx) { border-top-color: var(--mz-ui-accent, #4FC4DE) !important; }
html body #mzai-panel .mzai-think .mzai-dot:not(#mzx),
html body #mzai-panel .mzai-think .mzai-ric:not(#mzx),
html body #mzai-panel .mzai-work.done .mzai-spin svg:not(#mzx) { color: var(--mz-ui-accent, #4FC4DE) !important; }
html body #mzai-panel .mzai-think .mzai-dot:not(#mzx) { background: var(--mz-ui-accent, #4FC4DE) !important; }

/* очередь и списки Deep Research — строки как в чате */
html body #mzai-panel .mzw-list:not(#mzx) { gap: 1px !important; }
html body #mzai-panel .mzw-track:not(#mzx) {
  background: transparent !important; border: 0 !important; border-radius: 11px !important;
  padding: 6px 8px !important; gap: 11px !important;
}
html body #mzai-panel .mzw-track:not(#mzx):hover { background: rgba(255,255,255,.05) !important; }
html body #mzai-panel .mzw-track :is(img, .ph):not(#mzx) { border-radius: 9px !important; }
html body #mzai-panel .mzw-track .pl:not(#mzx) {
  background: none !important; color: rgba(232,241,245,.55) !important;
}

/* поле ввода */
html body #mzai-panel #mzai-form:not(#mzx) {
  gap: 8px !important; padding: 12px 14px 14px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important; background: none !important;
  align-items: flex-end !important;
}
html body #mzai-panel #mzai-in:not(#mzx) {
  min-height: 46px !important; padding: 12px 15px !important;
  border-radius: 16px !important; font-size: 14px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.08) !important; color: #E8F1F5 !important;
  box-shadow: none !important;
}
html body #mzai-panel #mzai-in:not(#mzx):focus { border-color: color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 55%, transparent) !important; }
html body #mzai-panel #mzai-in::placeholder { color: rgba(232,241,245,.35); }
html body #mzai-panel #mzai-form button:not(#mzx) {
  width: 46px !important; height: 46px !important; border-radius: 16px !important; flex: none;
  color: var(--mz-ui-on, #06121A) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 86%, #fff), var(--mz-ui-accent, #4FC4DE)) !important;
  box-shadow: 0 10px 24px -12px var(--mz-ui-accent, #4FC4DE) !important;
}
html body #mzai-panel #mzai-form button svg { width: 19px !important; height: 19px !important; }

@media (max-width: 700px) {
  html body #mzai-panel:not(#mzx) { width: 100vw !important; }
}

/* ═══ ЭТАП 155b: панель MUZLO AI — свёрнутые строки и четыре вкладки ═══ */
html body #mzai-panel .mzai-song.mzai-off:not(#mzx):not(#mzx) { display: none !important; }
html body #mzai-panel #mzai-tabs:not(#mzx) .mzai-tab:not(#mzx):not(#mzx):not(#mzx):not(#mzx) {
  flex: 1 1 auto !important; min-width: 0 !important;
  padding: 0 8px !important; font-size: 12.5px !important;
  overflow: hidden; text-overflow: ellipsis;
}

/* ═══ ЭТАП 156: MUZLO AI — одна палитра и один шрифт ═══
   Пузырь пользователя был сиреневым (макет 3G, ЭТАП 25) с бегущим бликом
   от кнопок (ЭТАП 110), подписи — сиреневые, шрифты — вперемешку. Теперь
   вся панель на Onest, пузырь — тёмное стекло, как карточки списка, а цвет
   даёт только акцент обложки: значок, кнопки, играющий трек. */
html body #mzai-panel:not(#mzx),
html body #mzai-panel :is(button, input, textarea, .mzai-body, .mzai-role, .mzai-tab, .mzai-song, .mzai-list):not(#mzx) {
  font-family: 'Onest', system-ui, sans-serif !important;
}
html body #mzai-panel :is(.mzai-logo, .mzai-name):not(#mzx) { font-family: 'Unbounded', sans-serif !important; }

/* сообщение пользователя */
html body #mzai-panel .mzai-turn.mzai-user .mzai-body:not(#mzx):not(#mzx) {
  max-width: 82% !important;
  padding: 10px 14px !important;
  border-radius: 18px 18px 6px 18px !important;
  background: rgba(255,255,255,.075) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #E8F1F5 !important;
  font-size: 14px !important; font-weight: 500 !important; line-height: 1.45 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body #mzai-panel .mzai-turn.mzai-user .mzai-body:not(#mzx)::before,
html body #mzai-panel .mzai-turn.mzai-user .mzai-body:not(#mzx)::after { content: none !important; display: none !important; }

/* ответ: подпись со значком, как в шапке */
html body #mzai-panel .mzai-turn:not(.mzai-user) .mzai-role:not(#mzx):not(#mzx) {
  display: flex !important; align-items: center; gap: 7px;
  font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: rgba(232,241,245,.6) !important;
}
html body #mzai-panel .mzai-turn:not(.mzai-user) .mzai-role:not(#mzx)::before {
  content: 'M';
  width: 18px; height: 18px; flex: none; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Unbounded', sans-serif; font-size: 9px; font-weight: 700;
  color: var(--mz-ui-on, #06121A);
  background: linear-gradient(145deg, color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 80%, #fff), var(--mz-ui-accent, #4FC4DE));
}
html body #mzai-panel .mzai-turn:not(.mzai-user) .mzai-body:not(#mzx):not(#mzx) {
  font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.6 !important;
  color: rgba(232,241,245,.9) !important;
}
html body #mzai-panel .mzai-turn:not(.mzai-user) .mzai-body b:not(#mzx) { color: #fff !important; font-weight: 600 !important; }
html body #mzai-panel .mzai-turn { gap: 7px !important; }

/* служебные карточки — тем же шрифтом и цветом */
html body #mzai-panel :is(.mzai-work, .mzai-think):not(#mzx) {
  font-size: 13px !important; color: rgba(232,241,245,.7) !important;
  padding: 11px 13px !important;
}
html body #mzai-panel .mzai-think .mzai-steps b:not(#mzx),
html body #mzai-panel .mzai-work.done:not(#mzx) { color: #E8F1F5 !important; }

/* ═══ ЭТАП 157: вкладка «Поиск» (js/48-search-home.js) ═══
   Строка поиска — главная: крупная, по центру, под ней переключатель
   «Треки / По строчке / По описанию». Ниже, пока строка пуста, — короткий
   обзор: недавние запросы, недавно игравшее, артисты, жанры; каждый ряд
   в одну строку со стрелками. (Первая версия с большими карточками,
   12 плитками и чартом забивала экран — строку было почти не видно.) */
html body #view-search .search-input-wrap:not(#mzx) { display: flex; justify-content: center; position: relative; }
html body #view-search #search-ym-input:not(#mzx) {
  width: 680px !important; max-width: 100% !important; height: 54px !important;
  padding: 0 20px 0 52px !important; border-radius: 16px !important;
  font-size: 16px !important; font-weight: 500 !important;
  background: rgba(255,255,255,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(232,241,245,.55)'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14'/%3E%3C/svg%3E") no-repeat 18px 50% / 22px 22px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  transition: border-color .15s, background-color .15s, box-shadow .15s !important;
}
html body #view-search #search-ym-input:not(#mzx):focus {
  background-color: rgba(255,255,255,.09) !important;
  border-color: color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 70%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 16%, transparent) !important;
}
html body #view-search:is(.msh-m-lyrics, .msh-m-ai) #search-suggest { display: none !important; }

/* переключатель режима */
#msh-modes { display: flex; justify-content: center; gap: 6px; margin: 12px 0 4px; flex-wrap: wrap; }
#msh-modes button {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 17px;
  border: 1px solid transparent; background: none; cursor: pointer;
  font: 500 13.5px 'Onest', system-ui, sans-serif; color: rgba(232,241,245,.6);
  transition: background .15s, color .15s, border-color .15s;
}
#msh-modes button[hidden] { display: none; }
#msh-modes button svg { width: 16px; height: 16px; opacity: .8; }
#msh-modes button:hover { color: #fff; background: rgba(255,255,255,.06); }
#msh-modes button.on {
  color: #fff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.1);
}
#msh-modes button.on svg { opacity: 1; color: var(--mz-ui-accent, #4FC4DE); }

html body #mz-search-home:not(#mzx) {
  --msh-ac: var(--mz-ui-accent, #4FC4DE);
  padding: 14px 0 40px; font-family: 'Onest', system-ui, sans-serif; color: #E8F1F5;
  display: flex; flex-direction: column; gap: 30px;
  width: 100%; max-width: 1100px; margin: 0 auto; box-sizing: border-box;
}
#mz-search-home button { font-family: inherit; }
#mz-search-home.is-mode .msh-browse { display: none; }
#mz-search-home .msh-mode:empty { display: none; }
#mz-search-home .msh-browse { display: flex; flex-direction: column; gap: 30px; }

/* недавние запросы — просто строка чипов */
#mz-search-home .msh-recents { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: -12px; }
#mz-search-home .msh-recents:empty { display: none; }
#mz-search-home .msh-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 240px;
  padding: 0 3px 0 11px; height: 32px; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,.05); font-size: 13px; color: rgba(232,241,245,.8);
  transition: background .15s, color .15s;
}
#mz-search-home .msh-chip:hover { background: rgba(255,255,255,.1); color: #fff; }
#mz-search-home .msh-chip > svg { width: 14px; height: 14px; flex: none; opacity: .5; }
#mz-search-home .msh-chip .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mz-search-home .msh-chip .x {
  width: 24px; height: 24px; flex: none; border: 0; border-radius: 50%; background: none; cursor: pointer;
  color: rgba(232,241,245,.35); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s;
}
#mz-search-home .msh-chip:hover .x { opacity: 1; }
#mz-search-home .msh-chip .x:hover { color: #fff; background: rgba(255,255,255,.1); }
#mz-search-home .msh-chip .x svg { width: 13px; height: 13px; }

/* режимы «по строчке» / «по описанию» */
#mz-search-home .msh-mode { width: 100%; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
#mz-search-home .msh-hint { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: rgba(232,241,245,.6); }
#mz-search-home .msh-hint svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--msh-ac); }
#mz-search-home .msh-moods { display: flex; flex-wrap: wrap; gap: 8px; }
#mz-search-home .msh-mood {
  height: 34px; padding: 0 14px; border-radius: 17px; cursor: pointer; font-size: 13px; font-weight: 500;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: rgba(232,241,245,.85);
  transition: background .15s, border-color .15s, color .15s;
}
#mz-search-home .msh-mood:hover { background: color-mix(in srgb, var(--msh-ac) 20%, transparent); border-color: color-mix(in srgb, var(--msh-ac) 50%, transparent); color: #fff; }
#mz-search-home .msh-out { display: flex; flex-direction: column; gap: 4px; }
#mz-search-home .msh-out:empty { display: none; }
#mz-search-home .msh-note { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(232,241,245,.6); padding: 4px 2px; }
#mz-search-home .msh-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--msh-ac); animation: msh-spin .8s linear infinite; }
#mz-search-home .msh-lyr {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; border-radius: 12px; cursor: pointer; background: none; color: inherit; transition: background .15s;
}
#mz-search-home .msh-lyr:hover { background: rgba(255,255,255,.06); }
#mz-search-home .msh-lyr .ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); color: rgba(232,241,245,.6); }
#mz-search-home .msh-lyr .ic svg { width: 18px; height: 18px; }
#mz-search-home .msh-lyr .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#mz-search-home .msh-lyr-t { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#mz-search-home .msh-lyr-t b { font-size: 14.5px; font-weight: 600; color: #fff; }
#mz-search-home .msh-lyr-t > span { font-size: 13px; color: rgba(232,241,245,.6); }
#mz-search-home .msh-lyr-t .ok { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 8px; background: rgba(90,210,140,.14); color: #7FE0A6; }
#mz-search-home .msh-lyr-l { font-size: 12.5px; color: rgba(232,241,245,.5); font-style: italic; }

/* ряды */
#mz-search-home .msh-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#mz-search-home h3 { margin: 0; font: 600 17px/1.2 'Onest', system-ui, sans-serif; color: #fff; letter-spacing: -.01em; }
#mz-search-home .msh-nav { display: none; gap: 6px; }
#mz-search-home .msh-nav.on { display: flex; }
#mz-search-home .msh-nav button {
  width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); color: #fff; transition: background .15s, opacity .15s;
}
#mz-search-home .msh-nav button:hover:not(:disabled) { background: rgba(255,255,255,.14); }
#mz-search-home .msh-nav button:disabled { opacity: .3; cursor: default; }
#mz-search-home .msh-nav svg { width: 18px; height: 18px; }
#mz-search-home .msh-sec { position: relative; min-width: 0; }
#mz-search-home .msh-row {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
}
#mz-search-home .msh-row::-webkit-scrollbar { display: none; }
/* затухание справа, пока есть что листать */
#mz-search-home .msh-sec.more .msh-row { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }

#mz-search-home .msh-rec, #mz-search-home .msh-art {
  flex: none; border: 0; background: none; color: inherit; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; gap: 5px; text-align: left; scroll-snap-align: start;
}
#mz-search-home .msh-rec { width: 124px; }
#mz-search-home .msh-art { width: 100px; align-items: center; text-align: center; }
#mz-search-home .msh-rec .p, #mz-search-home .msh-art .p { position: relative; overflow: hidden; background: rgba(255,255,255,.06); flex: none; }
#mz-search-home .msh-rec .p { width: 124px; height: 124px; border-radius: 10px; }
#mz-search-home .msh-art .p { width: 100px; height: 100px; border-radius: 50%; }
#mz-search-home .msh-rec img, #mz-search-home .msh-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
#mz-search-home .msh-rec:hover img, #mz-search-home .msh-art:hover img { transform: scale(1.05); }
#mz-search-home .msh-rec .n, #mz-search-home .msh-art .n { font-size: 13px; font-weight: 500; color: #fff; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
#mz-search-home .msh-rec .s { font-size: 12px; color: rgba(232,241,245,.5); margin-top: -3px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mz-search-home .msh-rec .pl {
  position: absolute; right: 7px; bottom: 7px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--msh-ac); color: var(--mz-ui-on, #06121A);
  opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
#mz-search-home .msh-rec .pl svg { width: 19px; height: 19px; }
#mz-search-home .msh-rec:hover .pl { opacity: 1; transform: none; }

#mz-search-home .msh-tile {
  position: relative; overflow: hidden; flex: none; width: 164px; height: 72px; border: 0; border-radius: 12px; cursor: pointer; text-align: left;
  background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; padding: 11px 13px; scroll-snap-align: start;
  transition: transform .18s, filter .18s;
}
#mz-search-home .msh-tile:hover { transform: translateY(-2px); filter: brightness(1.08); }
#mz-search-home .msh-tile .t { position: relative; z-index: 2; font-size: 14.5px; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
#mz-search-home .msh-tile img {
  position: absolute; right: -10px; bottom: -8px; width: 58px; height: 58px; object-fit: cover; border-radius: 8px;
  transform: rotate(22deg); box-shadow: 0 6px 16px rgba(0,0,0,.4); opacity: 0; transition: opacity .3s;
}
#mz-search-home .msh-tile img.in { opacity: .9; }
#mz-search-home .msh-tile .pl {
  position: absolute; z-index: 3; left: 11px; bottom: 9px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.95); color: #111;
  opacity: 0; transition: opacity .18s;
}
#mz-search-home .msh-tile .pl svg { width: 14px; height: 14px; }
#mz-search-home .msh-tile:hover .pl, #mz-search-home .msh-tile.busy .pl { opacity: 1; }
#mz-search-home .msh-tile.busy .pl svg { animation: msh-spin 1s linear infinite; }
@keyframes msh-spin { to { transform: rotate(360deg); } }

/* телефон */
@media (max-width: 760px) {
  html body #view-search #search-ym-input:not(#mzx) { height: 48px !important; font-size: 15px !important; padding-left: 46px !important; background-position: 15px 50% !important; }
  #msh-modes { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 0 16px; margin-top: 8px; scrollbar-width: none; }
  #msh-modes::-webkit-scrollbar { display: none; }
  #msh-modes button { flex: none; }
  html body #mz-search-home:not(#mzx) { gap: 24px; padding: 10px 16px 110px; }
  #mz-search-home .msh-browse { gap: 24px; }
  #mz-search-home .msh-recents { justify-content: flex-start; margin-top: -6px; }
  #mz-search-home .msh-chip .x { opacity: 1; }
  #mz-search-home .msh-nav { display: none !important; }
  #mz-search-home .msh-sec.more .msh-row { -webkit-mask-image: none; mask-image: none; }
  #mz-search-home .msh-rec { width: 108px; }
  #mz-search-home .msh-rec .p { width: 108px; height: 108px; }
  #mz-search-home .msh-art { width: 86px; }
  #mz-search-home .msh-art .p { width: 86px; height: 86px; }
  #mz-search-home .msh-rec .pl { opacity: 1; transform: none; width: 28px; height: 28px; }
  #mz-search-home .msh-tile { width: 140px; height: 64px; }
  #mz-search-home .msh-tile .pl { display: none; }
}

/* ═══ ЭТАП 158: живые обои (js/49-live-wall.js, /?wall=1) ═══
   На экране только раскрытый плеер с текстом во весь экран и визуализатором;
   всё остальное приложение работает, но не видно и не мешает. */
html.mz-wall, html.mz-wall body { overflow: hidden !important; cursor: none !important; }
html.mz-wall body #exp-player:not(#mzx) {
  position: fixed !important; inset: 0 !important; z-index: 2147483000 !important;
  width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important;
  border-radius: 0 !important; margin: 0 !important;
}
html.mz-wall body :is(#exp-close, #lyrics-sync-status, #mzd-toggle, #mzd-badge, #toast-container, #mzclip-bg-badge, #mzc-cinema-btn, #mzclip-loading):not(#mzx) { display: none !important; }
html.mz-wall body #exp-player * { pointer-events: none !important; }
/* Видно только раскрытый плеер. Пока он не открыт (загрузка, перезагрузка
   после смены темы) экран просто тёмный — раньше здесь мелькала главная. */
html.mz-wall, html.mz-wall body { background: #000 !important; }
html.mz-wall body :not(#exp-player, #exp-player *) { visibility: hidden !important; }
html.mz-wall body #exp-player { visibility: visible !important; }
/* частицы (настройка «Частицы на фоне»): как в приложении при открытом треке -
   поверх плеера, мышью не ловятся */
html.mz-wall body #particles-canvas { visibility: visible !important; z-index: 2147483001 !important; pointer-events: none !important; position: fixed !important; inset: 0 !important; }
/* обои: свои слои раскладки (обложка, название, исполнитель, фон, затемнение) */
html.mz-wall #mzw-bg { position: fixed; inset: -40px; z-index: 0; background-size: cover; background-position: center; filter: blur(38px) brightness(.55) saturate(1.2); display: none; }
html.mz-wall #mzw-dim { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
html.mz-wall #mzw-layer { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
html.mz-wall #mzw-cover { object-fit: cover; box-shadow: 0 18px 60px rgba(0,0,0,.55); background: rgba(255,255,255,.04); }
html.mz-wall #mzw-cover:not([src]) { visibility: hidden; }
html.mz-wall :is(#mzw-title, #mzw-artist) { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
html.mz-wall #mzw-title { font-family: 'Unbounded', 'Onest', sans-serif; font-weight: 700; }
html.mz-wall #mzw-artist { font-family: 'Onest', sans-serif; font-weight: 500; color: rgba(255,255,255,.72); }
/* листается сам (_lyCenterLine ищет контейнер с overflow auto), полосы прокрутки не видно */
html.mz-wall body #exp-player #exp-lyrics-scroll { overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: none !important; }
html.mz-wall body #exp-player #exp-lyrics-scroll::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* редактор обоев (в приложении) */
#mzw-editor { position: fixed; inset: 0; z-index: 2147483100; display: flex; background: rgba(5,7,10,.96); font-family: 'Onest', system-ui, sans-serif; color: #E8F1F5; }
#mzw-editor .mzwe-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
#mzw-editor .mzwe-hint { font-size: 13px; color: rgba(232,241,245,.5); }
#mzw-editor .mzwe-stage { position: relative; overflow: hidden; border-radius: 10px; background: #05070a; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 80px rgba(0,0,0,.6); user-select: none; touch-action: none; }
#mzw-editor .mzwe-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
#mzw-editor .mzwe-bg.blur { inset: -30px; filter: blur(26px) brightness(.55) saturate(1.2); }
#mzw-editor .mzwe-bg.clip { filter: brightness(.8); }
#mzw-editor .mzwe-dim { position: absolute; inset: 0; pointer-events: none; }
#mzw-editor .mzwe-item { position: absolute; box-sizing: border-box; cursor: move; border: 1px dashed rgba(255,255,255,.18); border-radius: 6px; }
#mzw-editor .mzwe-item.sel { border: 1.5px solid var(--mz-ui-accent, #4FC4DE); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-ui-accent, #4FC4DE) 25%, transparent); z-index: 3; }
#mzw-editor .mzwe-item.off { opacity: .28; border-style: dotted; }
#mzw-editor .mzwe-tag { position: absolute; left: 0; top: -20px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.6); color: rgba(255,255,255,.8); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
#mzw-editor .mzwe-item:hover .mzwe-tag, #mzw-editor .mzwe-item.sel .mzwe-tag { opacity: 1; }
#mzw-editor .mzwe-h-rs { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 4px; background: var(--mz-ui-accent, #4FC4DE); border: 2px solid #05070a; cursor: nwse-resize; display: none; }
#mzw-editor .mzwe-item.sel .mzwe-h-rs { display: block; }
#mzw-editor .mzwe-ly { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: .35em; overflow: hidden; color: rgba(255,255,255,.35); font-weight: 700; pointer-events: none; }
#mzw-editor .mzwe-ly .on { color: #fff; }
#mzw-editor .mzwe-viz canvas { width: 100%; height: 100%; display: block; pointer-events: none; }
#mzw-editor .mzwe-cover img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#mzw-editor .mzwe-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; color: #fff; pointer-events: none; }
#mzw-editor .mzwe-title .mzwe-tx { font-family: 'Unbounded', 'Onest', sans-serif; font-weight: 700; }
#mzw-editor .mzwe-artist .mzwe-tx { font-weight: 500; color: rgba(255,255,255,.72); }
#mzw-editor .mzwe-side { width: 300px; flex: none; overflow-y: auto; padding: 22px 18px; box-sizing: border-box; border-left: 1px solid rgba(255,255,255,.07); background: #0b0e12; display: flex; flex-direction: column; gap: 18px; }
#mzw-editor .mzwe-h { font: 700 17px 'Unbounded', 'Onest', sans-serif; }
#mzw-editor .mzwe-cap { font-size: 12px; font-weight: 600; color: rgba(232,241,245,.5); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
#mzw-editor .mzwe-li { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 7px 12px; border-radius: 9px; cursor: pointer; font-size: 14px; }
#mzw-editor .mzwe-li:hover { background: rgba(255,255,255,.05); }
#mzw-editor .mzwe-li.sel { background: rgba(255,255,255,.09); }
#mzw-editor .mzwe-eye { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: rgba(232,241,245,.35); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#mzw-editor .mzwe-eye.on { color: #fff; }
#mzw-editor .mzwe-eye svg { width: 18px; height: 18px; fill: currentColor; }
#mzw-editor .mzwe-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding: 6px 0; }
#mzw-editor .mzwe-col { flex-direction: column; align-items: stretch; }
#mzw-editor .mzwe-row b { font-weight: 600; color: rgba(232,241,245,.6); }
#mzw-editor .mzwe-row input[type=range] { width: 100%; accent-color: var(--mz-ui-accent, #4FC4DE); }
#mzw-editor .mzwe-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--mz-ui-accent, #4FC4DE); }
#mzw-editor .mzwe-seg { display: inline-flex; background: rgba(255,255,255,.06); border-radius: 8px; padding: 2px; }
#mzw-editor .mzwe-seg button { border: 0; background: none; color: rgba(232,241,245,.6); font: 500 12px 'Onest', sans-serif; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
#mzw-editor .mzwe-seg button.on { background: rgba(255,255,255,.14); color: #fff; }
#mzw-editor .mzwe-col .mzwe-seg { display: flex; }
#mzw-editor .mzwe-col .mzwe-seg button { flex: 1; padding: 6px 4px; }
#mzw-editor .mzwe-presets { display: flex; flex-wrap: wrap; gap: 6px; }
#mzw-editor .mzwe-presets button { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #E8F1F5; font: 500 13px 'Onest', sans-serif; padding: 7px 11px; border-radius: 9px; cursor: pointer; }
#mzw-editor .mzwe-presets button:hover { background: rgba(255,255,255,.11); }
#mzw-editor .mzwe-item.docked { border-style: dotted; }
#mzw-editor .mzwe-item.docked .mzwe-h-rs { cursor: ns-resize; }
#mzw-editor .mzwe-guide { position: absolute; display: none; z-index: 6; pointer-events: none; background: var(--mz-ui-accent, #4FC4DE); }
#mzw-editor .mzwe-guide.gx { top: 0; bottom: 0; width: 1px; }
#mzw-editor .mzwe-guide.gy { left: 0; right: 0; height: 1px; }
#mzw-editor .mzwe-note { font-size: 12.5px; color: rgba(232,241,245,.5); line-height: 1.4; }
#mzw-editor .mzwe-btns { display: flex; gap: 8px; margin-top: auto; }
#mzw-editor .mzwe-btns button { flex: 1; height: 40px; border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff; font: 600 14px 'Onest', sans-serif; cursor: pointer; }
#mzw-editor .mzwe-btns .mzwe-done { background: var(--mz-ui-accent, #4FC4DE); color: var(--mz-ui-on, #06121A); border: 0; }
@media (max-width: 760px) {
  #mzw-editor { flex-direction: column; }
  #mzw-editor .mzwe-side { width: auto; max-height: 45vh; border-left: 0; border-top: 1px solid rgba(255,255,255,.07); }
}

/* ═══ ЭТАП 160: «Все цвета» обложки на тексте песни во всех режимах ═══
   Раньше палитру получала только «Печать»; остальные режимы брали один цвет,
   разобранный отдельно, — часто почти белый. Теперь у слов активной строки
   цвета той же палитры, что у визуализатора (--mzpc ставит lyApplyAll). */
html body #exp-lyrics-lines .lyric-line.active .ly-word[style*="--mzpc"],
html body #karaoke-lyrics-lines .lyric-line.active .ly-word[style*="--mzpc"] {
  color: var(--mzpc) !important;
  -webkit-text-fill-color: var(--mzpc) !important;
}

/* заставка «музыка не играет»: логотип под водой (js/50-wall-idle.js) */
html.mz-wall body #mzw-idle { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important;
  z-index: 2147483050 !important; visibility: visible !important; pointer-events: none !important;
  opacity: 0; transition: opacity 1.1s ease; display: block; background: #04121a; }
html.mz-wall body #mzw-idle.on { opacity: 1; }


/* ═══ ЭТАП 175 — под обложку перекрашивается только «Моя волна» ═══
   В этапе 172 цвет обложки получали все слайды, мини-баннеры и кнопки
   главной. Пользователь хочет иначе: цвет обложки — только у баннера
   «Моя волна» (слайд 1 на ПК, карточка data-act="wave" на телефоне).
   33-tint.js публикует --mz-wave-rgb/--mz-wave-a, и лишь внутри этого
   баннера они становятся --mz-tint-rgb/--mz-tint-a. У остальных — цвета
   темы, как задумано макетом. */
html body #mz-home [data-track] > div:nth-of-type(1),
html body #mz-home [data-act="wave"]:not(button) {
  --mz-tint-rgb: var(--mz-wave-rgb, 79,196,222);
  --mz-tint-a: var(--mz-wave-a, 0);
}
html.mz-tone body #mz-home [data-track] > div:nth-of-type(1) > div:last-of-type > span:first-of-type { color: rgb(var(--mz-tint-rgb)) !important; }
html.mz-tone body #mz-home [data-track] > div:nth-of-type(1) button[data-act]:not(#mzx):not(#mzx):not(#mzx) {
  background: linear-gradient(180deg, rgba(var(--mz-tint-rgb),.92), rgb(var(--mz-tint-rgb))) !important;
  color: var(--mz-ui-on, #06121A) !important;
  box-shadow: 0 14px 34px -12px rgba(var(--mz-tint-rgb),.75) !important;
}

/* ═══ ЭТАП 172 — 51-extras.js: плашка «Продолжить»/«Трек по ссылке», подсказка клавиш ═══ */
#mzx-chip {
  position: fixed; left: 50%; bottom: 104px; z-index: 9000;
  transform: translate(-50%, 16px); opacity: 0; transition: opacity .25s, transform .25s;
  display: flex; align-items: center; gap: 16px; max-width: min(560px, calc(100vw - 32px));
  padding: 12px 12px 12px 18px; border-radius: 16px;
  background: rgba(14,20,28,.94); border: 1px solid rgba(var(--mz-tint-rgb, 79,196,222), .35);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-family: 'Onest', sans-serif; color: #E8F1F5;
}
#mzx-chip.mzx-in { opacity: 1; transform: translate(-50%, 0); }
#mzx-chip .mzx-chip-t { display: flex; flex-direction: column; min-width: 0; }
#mzx-chip .mzx-chip-t b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--mz-tint-rgb, 79,196,222)); }
#mzx-chip .mzx-chip-t span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mzx-chip .mzx-chip-acts { display: flex; gap: 8px; flex: none; }
#mzx-chip button { height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: #E8F1F5; font: 600 13px 'Onest', sans-serif; cursor: pointer; }
#mzx-chip button.mzx-primary { border: none; background: rgb(var(--mz-tint-rgb, 79,196,222)); color: var(--mz-ui-on, #06121A); }
@media (max-width: 768px) { #mzx-chip { bottom: 150px; } }
#mzx-keys { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center;
  background: rgba(3,6,10,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#mzx-keys .mzx-keys-box { width: min(440px, calc(100vw - 32px)); padding: 22px 24px; border-radius: 18px;
  background: rgba(14,20,28,.97); border: 1px solid rgba(255,255,255,.08); font-family: 'Onest', sans-serif; color: #E8F1F5; }
#mzx-keys .mzx-keys-h { font: 700 16px 'Unbounded', sans-serif; margin-bottom: 14px; }
#mzx-keys .mzx-key { display: flex; align-items: center; gap: 14px; padding: 6px 0; font-size: 14px; color: rgba(232,241,245,.8); }
#mzx-keys kbd { min-width: 64px; text-align: center; padding: 3px 8px; border-radius: 7px; font: 600 12px 'Onest', sans-serif;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; }

/* ═══ ЭТАП 173 — клип на весь экран в узком / вертикальном окне ═══
   Левая панель плеера держала свои 420 px и закрывала пол-клипа, тексту
   оставалась узкая полоса, и длинные строки уходили за край окна. В узком
   или вертикальном окне панель становится компактной полосой сверху,
   обложка прячется, текст — во всю ширину и переносится. */
html body #exp-player.clip-cinema .lyric-line:not(#mzx) {
  white-space: normal !important; overflow-wrap: anywhere; max-width: 100% !important;
}
html body #exp-player.clip-cinema #exp-lyrics-lines { max-width: 100% !important; overflow-x: hidden !important; }
@media (max-width: 1100px), (orientation: portrait) {
  html body #exp-player#exp-player.clip-cinema { flex-direction: column !important; }
  html body #exp-player.clip-cinema #exp-cover-wrap { display: none !important; }
  html body #exp-player#exp-player.clip-cinema > #exp-left {
    width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important;
    height: auto !important; padding: 70px 20px 14px !important; gap: 12px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,0)) !important;
  }
  html body #exp-player#exp-player.clip-cinema > #exp-right {
    width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 auto !important; min-height: 0 !important;
  }
}

/* ═══ ЭТАП 174: клип-фон на всю правую часть ═══
   Видео клипа лежало внутри #exp-lyrics-content и начиналось под полосой
   вкладок и панелью синхронизации: когда левая панель скрыта (текст во весь
   экран), сверху оставалась тёмная полоса во всю ширину, а свёрнутая панель
   синхронизации тянулась тёмной лентой через всё окно. Теперь клип
   накрывает всю правую часть, вкладки и панель лежат поверх кадра. */
html body #exp-player:not(.clip-cinema) #exp-right:has(> #exp-lyrics-content > #mzclip-bgv) { position: relative; }
html body #exp-player:not(.clip-cinema) #exp-right:has(> #exp-lyrics-content > #mzclip-bgv) > #exp-lyrics-content { position: static !important; }
html body #exp-player:not(.clip-cinema) #exp-right:has(> #exp-lyrics-content > #mzclip-bgv) > :not(#exp-lyrics-content) { position: relative; z-index: 3; }
html body #exp-player:not(.clip-cinema) #exp-right:has(> #exp-lyrics-content > #mzclip-bgv) #lyrics-sync-status { background: transparent !important; }
/* свёрнутая панель синхронизации — только кнопка, без ленты через всё окно */
html body.sync-collapsed #lyrics-sync-status:not(#mzx) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  backdrop-filter: none !important;
}
/* текст во весь экран: вкладки прячутся при любой теме */
html body #exp-player#exp-player.lyrics-fs #exp-tabs { display: none !important; }

/* ═══ ЭТАП 176: клип на весь экран без затемнения и без резкой границы ═══
   Левая панель плеера получала тёмный фон от правил с тремя id
   (ЭТАП 148/151) — прозрачность режима клипа их не перебивала, и по краю
   панели шла резкая чёрная граница. Само видео было притушено
   brightness(.62), а края — тёмной виньеткой #mzc-edge. Теперь клип идёт
   в полную яркость, у панели — только мягкая тень под текстом. */
html body #exp-player#exp-player.clip-cinema > #exp-left {
  background: none !important;
  background-image: linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.14) 70%, rgba(0,0,0,0) 100%) !important;
  border: none !important; box-shadow: none !important;
}
html body #exp-player#exp-player.clip-cinema > #mzclip-bgv { filter: none !important; }
html body #exp-player.clip-cinema > #mzc-edge { display: none !important; }
@media (max-width: 1100px), (orientation: portrait) {
  html body #exp-player#exp-player.clip-cinema > #exp-left {
    background-image: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 177 — ПЛАВНОСТЬ И НЕМНОГО СТИЛЯ macOS (js/52-macos.js)
   Кривые Apple вместо линейных, окна открываются и закрываются, меню и
   уведомления — «стекло» с размытием, тонкие скроллбары, мягкое кольцо
   фокуса. Раскладка, цвета тем и шрифты не меняются. Нажатия и закрытие
   окон анимирует 52-macos.js. «Уменьшить движение» в системе всё гасит.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --mac-ease: cubic-bezier(.32,.72,0,1);
  --mac-spring: cubic-bezier(.34,1.56,.64,1);
  --mac-out: cubic-bezier(.4,0,1,1);
  --mz-ease: var(--mac-ease);
  --mac-glass: rgba(30,32,36,.72);
  --mac-hair: rgba(255,255,255,.12);
}
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: color-mix(in srgb, var(--accent, #4FC4DE) 38%, transparent); }

/* окна и разделы */
@keyframes macViewIn  { from { opacity: 0; transform: translateY(10px) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes macFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes macFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes macWinIn   { from { opacity: 0; transform: translateY(36px) scale(.965); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes macWinOut  { from { opacity: 1; transform: none; filter: none; } to { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(6px); } }
@keyframes macSheetIn { from { opacity: .4; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes macSheetOut{ from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(60px); } }
@keyframes macPopIn   { from { opacity: 0; transform: scale(.94) translateY(-4px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes macPopOut  { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.97); } }
@keyframes macModalIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes macTabIn   { from { opacity: 0; } to { opacity: 1; } }   /* без transform: иначе клип-фон на миг цепляется к этому блоку */

html.mac-motion .mz-view-in { animation: macViewIn .5s var(--mac-ease) both; }
html.mac-motion .view, html.mac-motion #content > section { animation-timing-function: var(--mac-ease); }

/* раскрытый плеер: выезжает снизу, как окно из Dock */
html.mac-motion body #exp-player { animation: macWinIn .52s var(--mac-ease); transform-origin: 50% 100%; }
html.mac-motion body #exp-player.mac-out { animation: macWinOut .3s var(--mac-out) forwards; pointer-events: none; }
/* вкладки плеера сменяются мягко */
html.mac-motion body :is(#exp-queue-content, #exp-lyrics-content, #exp-stems-content, #exp-tabs-content) { animation: macTabIn .38s var(--mac-ease); }

/* настройки — боковая панель */
html.mac-motion body #settings-panel { animation: macSheetIn .46s var(--mac-ease); }
html.mac-motion body #settings-panel.mac-out { animation: macSheetOut .26s var(--mac-out) forwards; pointer-events: none; }
html.mac-motion body #settings-overlay { animation: macFade .3s var(--mac-ease); }
html.mac-motion body #settings-overlay.mac-out { animation: macFadeOut .26s var(--mac-out) forwards; }

/* модальные окна и подложки */
html.mac-motion body :is([id$="-modal"], .add-to-pl-popup) { animation: macModalIn .36s var(--mac-ease); }
html.mac-motion body [id$="-overlay"]:not(#settings-overlay) { animation: macFade .3s var(--mac-ease); }

/* меню трека: «стекло», выпадает от кнопки */
html.mac-motion body .track-ctx-menu {
  animation: macPopIn .2s var(--mac-ease); transform-origin: 85% 0;
  background: var(--mac-glass);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border-radius: 12px; padding: 5px;
  box-shadow: 0 0 0 .5px var(--mac-hair), 0 18px 50px -12px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.3);
}
html.mac-motion body .track-ctx-menu.mac-out { animation: macPopOut .14s var(--mac-out) forwards; pointer-events: none; }
html.mac-motion body .track-ctx-menu .ctx-item { border-radius: 7px; padding: 8px 12px; transition: background .12s var(--mac-ease), color .12s; }
html.mac-motion body .track-ctx-menu .ctx-item:hover { background: color-mix(in srgb, var(--accent, #4FC4DE) 26%, transparent); }
html.mac-motion body .add-to-pl-popup {
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border-radius: 12px; box-shadow: 0 0 0 .5px var(--mac-hair), 0 18px 50px -12px rgba(0,0,0,.65);
}

/* уведомления — как в macOS: стекло, справа сверху, с отскоком */
html.mac-motion body .toast {
  background: var(--mac-glass);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border-radius: 14px; padding: 12px 16px; border-left: none !important;
  box-shadow: 0 0 0 .5px var(--mac-hair), 0 14px 40px -10px rgba(0,0,0,.6);
  transform: translateX(calc(100% + 24px));
  transition: opacity .3s var(--mac-ease), transform .55s var(--mac-spring);
}
html.mac-motion body .toast.show { transform: none; }
html.mac-motion body .toast.hide { opacity: 0; transform: translateX(calc(100% + 24px)); transition: opacity .25s var(--mac-out), transform .35s var(--mac-out); }

/* кнопки, вкладки, карточки: цвета и тени переходят по одной кривой */
html.mac-motion body :is(.nav-btn, .mob-nav-btn, .exp-tab, .settings-tab, .coll-tab, .ly-tool-btn) {
  transition-timing-function: var(--mac-ease) !important; transition-duration: .28s !important;
}
html.mac-motion body :is(.home-card, .album-card, .artist-card, .coll-card, .ym-home-card, .explore-card, .ym-quick-card) {
  transition-timing-function: var(--mac-ease) !important; transition-duration: .35s !important;
}

/* тонкие скроллбары macOS: появляются ярче при наведении */
html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-track { background: transparent; }
html body ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16); border-radius: 10px;
  border: 3px solid transparent; background-clip: padding-box;
}
html body ::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.32); }
html body ::-webkit-scrollbar-corner { background: transparent; }

/* кольцо фокуса с клавиатуры — мягкое, цвета акцента */
html body :focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4FC4DE) 45%, transparent) !important;
  border-radius: 8px;
  transition: box-shadow .2s var(--mac-ease);
}

@media (prefers-reduced-motion: reduce) {
  html.mac-motion body *, html.mac-motion body *::before, html.mac-motion body *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ═══ ЭТАП 178: плитки «Быстрого доступа» снова под цвет трека ═══
   В этапе 175 цвет обложки оставили только «Моей волне», и плитки
   «Любимое / Волна / Караоке / Поиск» перестали его брать даже при
   включённой функции. Им — тот же цвет обложки, что у волны. */
html body .mz-quick { --mz-tint-rgb: var(--mz-wave-rgb, 79,196,222); }
html.mz-tone-hue .ym-quick-card { --qh: var(--mz-cover-hue) !important; }


/* ═══ ЭТАП 179: скругления и страница артиста ═══
   - баннер артиста — скруглённая карточка с отступом от краёв, а не
     полоса от края до края;
   - «Слушать» была градиентом от осветлённого акцента к акценту: под
     сероватой обложкой выходило грязное бело-розовое пятно. Теперь чистая
     белая «пилюля», цвет обложки — только в мягком свечении;
   - полосы прокрутки со scrollbar-width (ряд клипов) Chrome рисовал
     системными — белая дорожка со стрелками. Задаём им цвет;
   - строки треков, обложки и плитки чуть скруглены. */
:root { scrollbar-color: rgba(255,255,255,.2) transparent; }
html body #content .ap-header {
  margin: 14px 18px 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  isolation: isolate;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.07), 0 24px 60px -30px rgba(0,0,0,.8);
}
html body #content .ap-header .ap-bg { border-radius: inherit; }
html body #content .ap-header .ap-btn-play.ap-btn-play:not(#mzx):not(#mzx):not(#mzx) {
  background: #F4F7F9 !important;
  background-image: linear-gradient(180deg, #FFFFFF, #E9EEF2) !important;
  color: #0A1016 !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.6) inset, 0 10px 28px -10px rgba(var(--cover-accent-rgb, 79,196,222), .55), 0 2px 6px rgba(0,0,0,.25) !important;
  transition: box-shadow .3s var(--mac-ease, ease), filter .2s;
}
html body #content .ap-header .ap-btn-play.ap-btn-play:not(#mzx):not(#mzx):not(#mzx):hover { filter: brightness(1.04); box-shadow: 0 0 0 .5px rgba(255,255,255,.6) inset, 0 14px 34px -10px rgba(var(--cover-accent-rgb, 79,196,222), .75), 0 2px 6px rgba(0,0,0,.25) !important; }
html body #content .ap-header .ap-btn-play.ap-btn-play:not(#mzx):not(#mzx):not(#mzx)::before,
html body #content .ap-header .ap-btn-play.ap-btn-play:not(#mzx):not(#mzx):not(#mzx)::after { display: none !important; }
html body #content .ap-header .ap-btn-play.ap-btn-play:not(#mzx):not(#mzx):not(#mzx) svg { fill: #0A1016 !important; color: #0A1016 !important; }

html body #content :is(.track-item, .ym-result, .ap-tr, .exp-queue-item) { border-radius: 12px; }
html body #content :is(.ap-tr-cover, .track-cover, .ym-result img) { border-radius: 9px; }
html body :is(.ap-clip-thumb, .home-card, .album-card, .coll-card, .ym-home-card, .explore-card) { border-radius: 16px; }
html body #content .view-header { border-radius: 24px; }

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 180 — КАРАОКЕ: новый интерфейс (js/11-karaoke.js рисует разметку)
   Лобби: карточка «создать / войти по коду», состояние микрофона.
   Комната: верхняя панель (код, люди, микрофон, инструменты), сцена с
   обложкой и текстом, полоса времени; справа — очередь с голосами, поиск,
   чат, люди, стемы. Стекло и кривые — как в остальном интерфейсе (этап 177).
   ═══════════════════════════════════════════════════════════════════════ */
#view-karaoke { --kx-a: var(--accent, #4FC4DE); --kx-glass: rgba(18,22,28,.62); --kx-line: rgba(255,255,255,.08); --kx-ease: var(--mac-ease, cubic-bezier(.32,.72,0,1)); }
html body #karaoke-standalone { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0 !important; }
html body #karaoke-standalone > :not(#karaoke-bg) { position: relative; z-index: 1; }
html body #karaoke-bg { filter: blur(60px) saturate(1.4) brightness(.42); transform: scale(1.25); transition: opacity .8s var(--kx-ease), background-image .8s; }

/* общие элементы */
#view-karaoke .kx-input, #view-karaoke .kx-select, #view-karaoke .kx-search input, #view-karaoke .kx-chat-input input {
  width: 100%; box-sizing: border-box; height: 46px; padding: 0 16px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
  color: var(--text, #EAF3F7); font: inherit; font-size: 15px; outline: none;
  transition: border-color .2s var(--kx-ease), background .2s var(--kx-ease), box-shadow .2s var(--kx-ease);
}
#view-karaoke .kx-select { height: 40px; font-size: 13px; padding: 0 12px; appearance: auto; }
#view-karaoke .kx-input:focus, #view-karaoke .kx-search input:focus, #view-karaoke .kx-chat-input input:focus {
  border-color: color-mix(in srgb, var(--kx-a) 60%, transparent); background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kx-a) 18%, transparent);
}
#view-karaoke .kx-primary, #view-karaoke .kx-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; font: inherit; font-weight: 650; white-space: nowrap;
  transition: background .2s var(--kx-ease), filter .2s, opacity .2s, box-shadow .25s var(--kx-ease);
}
#view-karaoke .kx-primary {
  width: 100%; height: 50px; border-radius: 999px; font-size: 15.5px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--kx-a) 82%, #fff), var(--kx-a)); color: #071017;
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--kx-a) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
}
#view-karaoke .kx-primary:hover { filter: brightness(1.06); }
#view-karaoke .kx-secondary {
  height: 46px; padding: 0 20px; border-radius: 999px; font-size: 14px;
  background: rgba(255,255,255,.09); color: var(--text, #EAF3F7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
#view-karaoke .kx-secondary:hover { background: rgba(255,255,255,.15); }
#view-karaoke .kx-secondary.kx-sm { height: 34px; padding: 0 14px; font-size: 13px; }
#view-karaoke .kx-secondary.kx-xs { height: 30px; padding: 0 11px; font-size: 12px; gap: 5px; }
#view-karaoke .kx-secondary.done { background: color-mix(in srgb, var(--kx-a) 22%, transparent); color: var(--kx-a); }
#view-karaoke .kx-icon-btn {
  width: 40px; height: 40px; flex: none; border-radius: 12px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  background: rgba(255,255,255,.06); color: rgba(234,243,247,.82);
  transition: background .2s var(--kx-ease), color .2s;
}
#view-karaoke .kx-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
#view-karaoke .kx-icon-btn.active, #view-karaoke .kx-icon-btn.fx-on { background: color-mix(in srgb, var(--kx-a) 24%, transparent); color: var(--kx-a); }
#view-karaoke .kx-icon-btn.kx-danger:hover { background: rgba(255,80,80,.18); color: #ff8a8a; }
#view-karaoke .kx-icon-btn.rec-on { background: rgba(255,59,48,.2); color: #ff5b52; }
#view-karaoke .kx-icon-btn.rec-on::after { content: attr(data-time); position: absolute; top: calc(100% + 4px); left: 50%; translate: -50% 0; font-size: 10.5px; font-variant-numeric: tabular-nums; color: #ff6b62; white-space: nowrap; }
#view-karaoke .kx-icon-btn.rec-on svg { animation: kxRecPulse 1.2s ease-in-out infinite; }
@keyframes kxRecPulse { 50% { opacity: .35; } }
#view-karaoke .kx-xs-btn { width: 30px; height: 30px; border-radius: 9px; }
#view-karaoke .kx-round {
  width: 48px; height: 48px; flex: none; border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F2F6F8; color: #071017; box-shadow: 0 8px 22px -10px rgba(0,0,0,.7);
  transition: transform .2s var(--kx-ease), opacity .2s, filter .2s;
}
#view-karaoke .kx-round:hover { filter: brightness(1.05); }
#view-karaoke .kx-round:disabled { opacity: .35; cursor: default; }
#view-karaoke .kx-round-sm { width: 38px; height: 38px; background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
#view-karaoke .kx-round-xs { width: 30px; height: 30px; background: var(--kx-a); color: #071017; box-shadow: none; }
#view-karaoke .kx-meter { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
#view-karaoke .kx-meter > div { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #4cd964, #ffcc00 70%, #ff3b30); transition: width .08s linear; }
#view-karaoke input[type="range"] { width: 100%; accent-color: var(--kx-a); }

/* ── ЛОББИ ── */
#view-karaoke .kx-lobby { flex: 1; min-height: 0; overflow-y: auto; display: flex; justify-content: center; padding: 72px 20px 40px; }
#view-karaoke .kx-back {
  position: absolute; top: 18px; left: 18px; z-index: 3; height: 38px; padding: 0 16px 0 12px;
  display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--text, #EAF3F7); font: inherit; font-size: 13.5px; font-weight: 600;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
#view-karaoke .kx-back:hover { background: rgba(255,255,255,.14); }
#view-karaoke .kx-lobby-inner { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 16px; }
#view-karaoke .kx-hero { text-align: center; padding: 8px 0 10px; animation: macViewIn .6s var(--kx-ease) both; }
#view-karaoke .kx-hero-orb {
  width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 28px;
  display: flex; align-items: center; justify-content: center; color: #071017;
  background: radial-gradient(120% 120% at 30% 20%, #fff 0%, color-mix(in srgb, var(--kx-a) 85%, #fff) 35%, var(--kx-a) 100%);
  box-shadow: 0 22px 50px -16px color-mix(in srgb, var(--kx-a) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.6);
  animation: kxFloat 5s ease-in-out infinite;
}
@keyframes kxFloat { 50% { translate: 0 -6px; } }
#view-karaoke .kx-hero h1 { margin: 0 0 8px; font-family: 'Unbounded', sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
#view-karaoke .kx-hero p { margin: 0 auto; max-width: 380px; font-size: 14.5px; line-height: 1.5; color: rgba(234,243,247,.62); }
#view-karaoke .kx-card {
  display: flex; flex-direction: column; gap: 12px; padding: 22px;
  background: var(--kx-glass); border-radius: 24px;
  -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.1), 0 24px 60px -30px rgba(0,0,0,.8);
  animation: macViewIn .6s var(--kx-ease) both;
}
#view-karaoke .kx-card + .kx-card { animation-delay: .06s; }
#view-karaoke .kx-label { font-size: 12.5px; font-weight: 600; color: rgba(234,243,247,.55); letter-spacing: .02em; margin-bottom: -4px; }
#view-karaoke .kx-or { display: flex; align-items: center; gap: 12px; color: rgba(234,243,247,.4); font-size: 12.5px; margin: 4px 0; }
#view-karaoke .kx-or::before, #view-karaoke .kx-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
#view-karaoke .kx-join { display: flex; gap: 10px; }
#view-karaoke .kx-code-input { text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 20px !important; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; padding-left: calc(16px + .4em) !important; }
#view-karaoke .kx-code-input::placeholder { color: rgba(234,243,247,.18); }
#view-karaoke .kx-error { min-height: 18px; color: #ff7b72; font-size: 13px; text-align: center; }
#view-karaoke .kx-error:empty { min-height: 0; margin-top: -12px; }
#view-karaoke .kx-mic-card { padding: 16px 18px; gap: 12px; }
#view-karaoke .kx-mic-row { display: flex; align-items: center; gap: 12px; }
#view-karaoke .kx-mic-ico { width: 38px; height: 38px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: rgba(234,243,247,.8); }
#view-karaoke .kx-mic-card.ok .kx-mic-ico { background: rgba(76,217,100,.16); color: #5be37a; }
#view-karaoke .kx-mic-card.bad .kx-mic-ico { background: rgba(255,90,80,.16); color: #ff7b72; }
#view-karaoke .kx-mic-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#view-karaoke .kx-mic-text b { font-size: 14px; color: #fff; }
#view-karaoke .kx-mic-text span { font-size: 12.5px; line-height: 1.35; color: rgba(234,243,247,.55); }
#view-karaoke .kx-mic-dev { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
#view-karaoke .kx-mic-dev .kx-meter { grid-column: 1 / -1; }
#view-karaoke .kx-feats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 4px; animation: macViewIn .6s .12s var(--kx-ease) both; }
#view-karaoke .kx-feats > div { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.05); color: rgba(234,243,247,.6); font-size: 12px; }
#view-karaoke .kx-feats svg { color: var(--kx-a); }

/* ── КОМНАТА ── */
#view-karaoke .kx-room { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: macViewIn .5s var(--kx-ease) both; }
#view-karaoke .kx-top {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 12px 12px 0;
  background: var(--kx-glass); border-radius: 20px;
  -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.09), 0 16px 40px -24px rgba(0,0,0,.8);
}
#view-karaoke .kx-code-pill { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 6px 0 14px; border-radius: 999px; background: rgba(255,255,255,.06); }
#view-karaoke .kx-code-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(234,243,247,.45); margin-right: 4px; }
#view-karaoke .kx-code-pill b { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 17px; letter-spacing: .18em; color: #fff; margin-right: 4px; }
#view-karaoke .kx-pill-btn { width: 30px; height: 30px; border: none; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: rgba(234,243,247,.7); transition: background .2s, color .2s; }
#view-karaoke .kx-pill-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
#view-karaoke .kx-avatars { display: flex; padding-left: 8px; }
#view-karaoke .kx-av {
  --h: 200; width: 32px; height: 32px; flex: none; border-radius: 50%; margin-left: -8px;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .02em;
  background: linear-gradient(140deg, hsl(var(--h) 70% 62%), hsl(calc(var(--h) + 40) 65% 42%));
  box-shadow: 0 0 0 2px rgba(12,16,20,.9);
  transition: box-shadow .15s ease, opacity .3s, transform .2s var(--kx-ease);
}
#view-karaoke .kx-av.more { background: rgba(255,255,255,.14); }
#view-karaoke .kx-av.off { opacity: .4; }
#view-karaoke .kx-av.host::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #ffcc00; box-shadow: 0 0 0 2px rgba(12,16,20,.9); }
#view-karaoke .kx-av.speaking { box-shadow: 0 0 0 2px rgba(12,16,20,.9), 0 0 0 4px #4cd964, 0 0 16px 2px rgba(76,217,100,.55); transform: scale(1.06); z-index: 2; }
#view-karaoke .kx-av.lg { width: 42px; height: 42px; margin: 0; font-size: 14px; }
#view-karaoke .kx-av.sm { width: 26px; height: 26px; margin: 0; font-size: 10px; box-shadow: none; }
#view-karaoke .kx-timer { font-size: 12.5px; font-variant-numeric: tabular-nums; color: rgba(234,243,247,.45); }
#view-karaoke .kx-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#view-karaoke .kx-mic-btn {
  height: 44px; padding: 0 18px; border: none; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; color: #fff; font: inherit; font-weight: 650;
  background: rgba(255,255,255,.1); transition: background .25s var(--kx-ease), box-shadow .15s ease;
}
#view-karaoke .kx-mic-btn .kx-mic-on { display: none; }
#view-karaoke .kx-mic-btn.muted { background: rgba(255,69,58,.2); color: #ff7b72; }
#view-karaoke .kx-mic-btn.active { background: linear-gradient(180deg, #5be37a, #34c759); color: #04170b; }
#view-karaoke .kx-mic-btn.active .kx-mic-on { display: inline-flex; }
#view-karaoke .kx-mic-btn.active .kx-mic-off { display: none; }
#view-karaoke .kx-mic-btn.speaking { box-shadow: 0 0 0 4px rgba(76,217,100,.3), 0 0 24px rgba(76,217,100,.5); }
#view-karaoke .kx-status {
  position: absolute; left: 50%; top: calc(100% + 8px); translate: -50% 0; z-index: 5;
  padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: rgba(255,159,10,.92); color: #1d1200; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
  animation: macPopIn .3s var(--kx-ease);
}

#view-karaoke .kx-body { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 12px; }
#view-karaoke .kx-stage {
  flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; position: relative;
  background: rgba(8,12,16,.38); border-radius: 26px; box-shadow: 0 0 0 .5px rgba(255,255,255,.07);
}
#view-karaoke .kx-now { display: flex; align-items: center; gap: 16px; padding: 18px 20px 6px; }
#view-karaoke .kx-cover-wrap { position: relative; width: 64px; height: 64px; flex: none; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.07); box-shadow: 0 12px 30px -14px rgba(0,0,0,.8); }
#view-karaoke .kx-cover-wrap img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
#view-karaoke .kx-cover-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(234,243,247,.35); }
#view-karaoke .kx-now-text { flex: 1; min-width: 0; }
#view-karaoke .kx-title { font-size: 19px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-karaoke .kx-artist { font-size: 14px; color: rgba(234,243,247,.55); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-karaoke .kx-score { display: grid; grid-template-columns: auto auto auto; align-items: baseline; column-gap: 3px; padding: 8px 14px; border-radius: 16px; background: rgba(255,255,255,.06); min-width: 92px; }
#view-karaoke .kx-score-lbl { grid-column: 1 / -1; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: rgba(234,243,247,.45); }
#view-karaoke .kx-score b { font-size: 26px; font-weight: 800; color: var(--kx-a); font-variant-numeric: tabular-nums; }
#view-karaoke .kx-score-pct { font-size: 13px; color: rgba(234,243,247,.55); }
#view-karaoke .kx-score-bar { grid-column: 1 / -1; height: 4px; margin-top: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
#view-karaoke .kx-score-bar > div { height: 100%; width: 0; background: var(--kx-a); border-radius: 2px; transition: width .5s var(--kx-ease); }

html body #view-karaoke #karaoke-lyrics-area {
  flex: 1; min-height: 0; position: relative; overflow-y: auto; overflow-x: hidden; padding: 0 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
  scrollbar-width: none;
}
html body #view-karaoke #karaoke-lyrics-area::-webkit-scrollbar { display: none; }
html body #view-karaoke #karaoke-lyrics-lines { padding: 32vh 0 40vh; }
html body #view-karaoke #karaoke-lyrics-lines .kx-dim { opacity: .5 !important; font-size: 18px !important; font-weight: 500 !important; transform: none !important; }
#view-karaoke .kx-waiting {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 20px; -webkit-mask-image: none; mask-image: none;
}
#view-karaoke .kx-waiting-orb { width: 72px; height: 72px; border-radius: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; background: rgba(255,255,255,.07); color: var(--kx-a); animation: kxFloat 5s ease-in-out infinite; }
#view-karaoke .kx-waiting b { font-size: 20px; color: #fff; }
#view-karaoke .kx-waiting span { font-size: 14px; color: rgba(234,243,247,.55); max-width: 340px; line-height: 1.45; }
#view-karaoke .kx-reaction { position: absolute; bottom: 8%; z-index: 20; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; animation: kxReact 2.6s var(--kx-ease) forwards; }
#view-karaoke .kx-reaction span { font-size: 40px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
#view-karaoke .kx-reaction i { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; }
@keyframes kxReact { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 15% { opacity: 1; transform: translateY(0) scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-260px) scale(.9); } }

#view-karaoke .kx-transport { display: flex; align-items: center; gap: 12px; padding: 12px 20px 18px; }
#view-karaoke .kx-time { font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(234,243,247,.55); min-width: 34px; text-align: center; }
#view-karaoke .kx-progress { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
#view-karaoke .kx-progress > div { height: 100%; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--kx-a) 70%, #fff), var(--kx-a)); border-radius: 3px; }
#view-karaoke .kx-is-host .kx-progress { cursor: pointer; }
#view-karaoke .kx-host-note { font-size: 12px; color: rgba(234,243,247,.45); white-space: nowrap; }
#view-karaoke .kx-room:not(.kx-is-host) #kx-play, #view-karaoke .kx-room:not(.kx-is-host) #kx-next,
#view-karaoke .kx-room:not(.kx-is-host) .kx-host-only { display: none; }

#view-karaoke .kx-side {
  width: 380px; flex: none; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--kx-glass); border-radius: 26px;
  -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.09);
}
#view-karaoke .kx-tabs { display: flex; gap: 4px; padding: 8px; margin: 10px 10px 4px; border-radius: 16px; background: rgba(255,255,255,.04); overflow-x: auto; scrollbar-width: none; }
#view-karaoke .kx-tabs::-webkit-scrollbar { display: none; }
#view-karaoke .kr-tab {
  flex: 1 0 auto; height: 34px; padding: 0 10px; border: none; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: rgba(234,243,247,.55); font: inherit; font-size: 12.5px; font-weight: 600;
  transition: background .2s var(--kx-ease), color .2s;
}
#view-karaoke .kr-tab:hover { color: #fff; }
#view-karaoke .kr-tab.active { background: rgba(255,255,255,.11); color: #fff; box-shadow: 0 4px 12px -6px rgba(0,0,0,.6); }
#view-karaoke .kr-tab i { font-style: normal; font-size: 10.5px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--kx-a); color: #071017; font-weight: 800; }
#view-karaoke .kr-tab i:empty { display: none; }
#view-karaoke .kx-bump { animation: kxBump .5s var(--mac-spring, ease); }
@keyframes kxBump { 40% { transform: scale(1.5); } }
#view-karaoke .kx-pane { flex: 1; min-height: 0; flex-direction: column; overflow: hidden; animation: macTabIn .3s var(--kx-ease); }
#view-karaoke .kx-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 12px; display: flex; flex-direction: column; gap: 2px; }
#view-karaoke .kx-row { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 14px; transition: background .2s var(--kx-ease); animation: macTabIn .3s var(--kx-ease); }
#view-karaoke .kx-row:hover { background: rgba(255,255,255,.06); }
#view-karaoke .kx-row-next { background: color-mix(in srgb, var(--kx-a) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kx-a) 25%, transparent); }
#view-karaoke .kx-row-num { width: 30px; flex: none; text-align: center; font-size: 11px; font-weight: 700; color: rgba(234,243,247,.4); text-transform: uppercase; letter-spacing: .04em; }
#view-karaoke .kx-row-next .kx-row-num { color: var(--kx-a); }
#view-karaoke .kx-row-cover { width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: cover; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; color: rgba(234,243,247,.35); }
#view-karaoke .kx-row-info { flex: 1; min-width: 0; }
#view-karaoke .kx-row-title { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-karaoke .kx-row-sub { font-size: 12px; color: rgba(234,243,247,.5); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-karaoke .kx-row-act { display: flex; align-items: center; gap: 6px; flex: none; }
#view-karaoke .kx-vote {
  height: 30px; padding: 0 10px; border: none; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px;
  background: rgba(255,255,255,.07); color: rgba(234,243,247,.6); transition: background .2s, color .2s;
}
#view-karaoke .kx-vote:hover { background: rgba(255,55,95,.16); color: #ff6b8b; }
#view-karaoke .kx-vote.on { background: rgba(255,55,95,.2); color: #ff4f78; }
#view-karaoke .kx-vote b { font-variant-numeric: tabular-nums; }
#view-karaoke .kx-empty { margin: auto; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: rgba(234,243,247,.45); font-size: 13px; line-height: 1.45; }
#view-karaoke .kx-empty svg { color: rgba(234,243,247,.25); margin-bottom: 4px; }
#view-karaoke .kx-empty b { color: rgba(234,243,247,.85); font-size: 15px; }
#view-karaoke .kx-empty .kx-secondary { margin-top: 6px; }
#view-karaoke .kx-loading { flex-direction: row; }
#view-karaoke .kx-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--kx-a); animation: kxSpin .8s linear infinite; }
@keyframes kxSpin { to { transform: rotate(360deg); } }
#view-karaoke .kx-search { display: flex; align-items: center; gap: 8px; margin: 6px 10px 6px; padding-left: 12px; border-radius: 14px; background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: rgba(234,243,247,.45); }
#view-karaoke .kx-search input { height: 42px; padding: 0 4px; background: transparent !important; border: none !important; box-shadow: none !important; }
#view-karaoke .kx-search .kx-secondary { margin-right: 4px; }
#view-karaoke .kx-chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
#view-karaoke .kx-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; animation: macTabIn .25s var(--kx-ease); }
#view-karaoke .kx-msg.me { align-self: flex-end; }
#view-karaoke .kx-bubble { padding: 8px 12px; border-radius: 16px 16px 16px 6px; background: rgba(255,255,255,.08); font-size: 13.5px; line-height: 1.4; color: #EAF3F7; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 2px; }
#view-karaoke .kx-bubble b { font-size: 11.5px; color: var(--kx-a); }
#view-karaoke .kx-msg.me .kx-bubble { border-radius: 16px 16px 6px 16px; background: color-mix(in srgb, var(--kx-a) 78%, #000); color: #fff; }
#view-karaoke .kx-msg-sys { align-self: center; font-size: 11.5px; color: rgba(234,243,247,.4); padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.04); }
#view-karaoke .kx-chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--kx-line); }
#view-karaoke .kx-chat-input input { height: 40px; border-radius: 999px; }
#view-karaoke .kx-chat-input .kx-icon-btn { border-radius: 50%; background: var(--kx-a); color: #071017; }
#view-karaoke .kx-member { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; }
#view-karaoke .kx-member:hover { background: rgba(255,255,255,.05); }
#view-karaoke .kx-member.off { opacity: .5; }
#view-karaoke .kx-member-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#view-karaoke .kx-member-name { font-size: 14px; font-weight: 650; color: #fff; display: flex; align-items: center; gap: 6px; }
#view-karaoke .kx-member-name i { font-style: normal; font-size: 11px; font-weight: 500; color: rgba(234,243,247,.45); }
#view-karaoke .kx-crown { color: #ffcc00; display: inline-flex; }
#view-karaoke .kx-member-sub { font-size: 12px; color: rgba(234,243,247,.45); }
#view-karaoke .kx-member-vol { margin-top: 4px; height: 16px; }
#view-karaoke #kr-stems-tab { overflow-y: auto; padding: 4px 10px 12px; }

/* всплывающие панели */
#view-karaoke .kx-pop {
  position: absolute; z-index: 30; top: 72px; right: 24px; width: 300px;
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  background: rgba(24,28,34,.82); border-radius: 20px;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.12), 0 30px 70px -20px rgba(0,0,0,.8);
  animation: macPopIn .22s var(--kx-ease); transform-origin: 90% 0;
}
#view-karaoke .kx-pop-title { font-size: 13px; font-weight: 700; color: #fff; }
#view-karaoke .kx-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: rgba(234,243,247,.6); }
#view-karaoke .kx-field i { font-style: normal; color: var(--kx-a); font-weight: 700; }
#view-karaoke .kx-link { align-self: flex-start; border: none; background: none; padding: 0; color: var(--kx-a); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
#view-karaoke .kx-hint { font-size: 11.5px; line-height: 1.4; color: rgba(234,243,247,.4); }
#view-karaoke .kx-presets { display: flex; flex-wrap: wrap; gap: 6px; }
#view-karaoke .kx-presets button { height: 30px; padding: 0 12px; border: none; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.08); color: #EAF3F7; font: inherit; font-size: 12px; font-weight: 600; }
#view-karaoke .kx-presets button:hover { background: color-mix(in srgb, var(--kx-a) 25%, transparent); }
#view-karaoke .kx-react { width: auto; display: grid; grid-template-columns: repeat(6, 44px); gap: 4px; padding: 10px; }
#view-karaoke .kx-react button { width: 44px; height: 44px; border: none; border-radius: 12px; background: transparent; font-size: 24px; cursor: pointer; transition: background .15s; }
#view-karaoke .kx-react button:hover { background: rgba(255,255,255,.1); }

/* узкие окна и телефоны */
@media (max-width: 1100px) {
  #view-karaoke .kx-side { width: 330px; }
  #view-karaoke .kx-timer, #view-karaoke .kx-host-note { display: none; }
}
@media (max-width: 860px) {
  #view-karaoke .kx-top { flex-wrap: wrap; margin: 8px 8px 0; padding: 10px; gap: 8px; }
  #view-karaoke .kx-tools { margin-left: 0; width: 100%; justify-content: space-between; }
  #view-karaoke .kx-mic-btn { padding: 0 14px; }
  #view-karaoke .kx-body { flex-direction: column; padding: 8px; gap: 8px; overflow-y: auto; }
  #view-karaoke .kx-stage { flex: none; height: 58vh; min-height: 360px; }
  #view-karaoke .kx-side { width: auto; flex: none; height: 70vh; }
  #view-karaoke .kx-now { padding: 14px 14px 4px; }
  #view-karaoke .kx-score { min-width: 0; padding: 6px 10px; }
  #view-karaoke .kx-score b { font-size: 20px; }
  #view-karaoke .kx-pop { left: 12px; right: 12px; width: auto; top: 120px; }
  #view-karaoke .kx-react { grid-template-columns: repeat(6, 1fr); }
  #view-karaoke .kx-lobby { padding-top: 64px; }
  #view-karaoke .kx-hero h1 { font-size: 28px; }
}

/* ЭТАП 180b: вкладки комнаты — сегменты: у неактивных только значок */
html body #view-karaoke .kx-tabs .kr-tab { flex: 0 0 auto; min-width: 44px; height: 36px; padding: 0 12px; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; border: none !important; }
html body #view-karaoke .kx-tabs .kr-tab span { display: none; }
html body #view-karaoke .kx-tabs .kr-tab.active { flex: 1 1 auto; }
html body #view-karaoke .kx-tabs .kr-tab.active span { display: inline; }
html body #view-karaoke .kx-tabs { justify-content: space-between; }

html body #view-karaoke .kx-tabs .kr-tab span { font-size: 13px !important; opacity: 1 !important; }
html body #view-karaoke .kx-tabs .kr-tab.active { color: #fff !important; border-bottom-color: transparent !important; }

/* ═══ ЭТАП 181: «Клип на весь экран» как живые обои ═══
   Текст слева (по левому краю), обложка с названием и исполнителем справа,
   визуализатор снизу на всю ширину, клип приглушён. Кнопки и крестик видны,
   пока двигается мышь (.mzc-ui из 45-clip-cinema.js), курсор прячется. */
html body #exp-player#exp-player.clip-cinema > #mzclip-bgv { filter: brightness(.5) saturate(1.05) !important; }
html body #exp-player#exp-player.clip-cinema:not(.mzc-ui), html body #exp-player#exp-player.clip-cinema:not(.mzc-ui) * { cursor: none !important; }
html body #exp-player#exp-player.clip-cinema #mzc-exit { opacity: 0; transition: opacity .35s var(--mac-ease, ease); }
html body #exp-player#exp-player.clip-cinema.mzc-ui #mzc-exit { opacity: 1; }
html body #exp-player#exp-player.clip-cinema #lyrics-visualizer {
  display: block !important; position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: 100vw !important; z-index: 2 !important; pointer-events: none !important; margin: 0 !important;
}
@media (min-width: 861px) and (orientation: landscape) {
  html body #exp-player#exp-player.clip-cinema.clip-cinema { flex-direction: row !important; }
  html body #exp-player#exp-player.clip-cinema.clip-cinema > #exp-right {
    position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; right: auto !important;
    width: 68vw !important; min-width: 0 !important; max-width: none !important; height: auto !important; flex: none !important;
    background: none !important; z-index: 3 !important;
  }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-lyrics-lines { text-align: left !important; padding-left: 3.4vw !important; padding-right: 1.5vw !important; }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-lyrics-lines .lyric-line { text-align: left !important; transform-origin: left center !important; margin-left: 0 !important; margin-right: 0 !important; }
  html body #exp-player#exp-player.clip-cinema.clip-cinema > #exp-left {
    position: absolute !important; left: auto !important; right: 3vw !important; top: 50% !important; bottom: auto !important;
    transform: translateY(-50%) !important; width: min(27vw, 56vh) !important; min-width: 0 !important; max-width: none !important;
    height: auto !important; padding: 0 !important; gap: 1.8vh !important; flex: none !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    background: none !important; background-image: none !important; border: none !important; z-index: 4 !important;
    text-shadow: 0 2px 18px rgba(0,0,0,.6);
  }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-cover-wrap {
    display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; margin: 0 !important;
    border-radius: 22px !important; overflow: hidden !important; box-shadow: 0 18px 60px rgba(0,0,0,.55) !important;
  }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-cover-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-track-info { width: 100%; text-align: center !important; }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-title {
    font-family: 'Unbounded', 'Onest', sans-serif !important; font-weight: 700 !important; font-size: clamp(20px, 2.3vw, 46px) !important;
    line-height: 1.2 !important; color: #fff !important; text-transform: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-artist {
    font-family: 'Onest', sans-serif !important; font-weight: 500 !important; font-size: clamp(14px, 1.45vw, 28px) !important;
    color: rgba(255,255,255,.72) !important; margin-top: .4vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html body #exp-player#exp-player.clip-cinema.clip-cinema :is(#exp-controls, #exp-progress-wrap) {
    width: 100%; opacity: 0; translate: 0 8px; pointer-events: none;
    transition: opacity .35s var(--mac-ease, ease), translate .35s var(--mac-ease, ease);
  }
  html body #exp-player#exp-player.clip-cinema.clip-cinema.mzc-ui :is(#exp-controls, #exp-progress-wrap) { opacity: 1; translate: 0 0; pointer-events: auto; }
}

/* шторка встроенного YouTube: кадр клипа, пока ролик не играет (26-clips.js) */
html body #mzclip-bgv.mzclip-embed > .mzclip-shield {
  position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important; transform: scale(1.04) !important; max-width: none !important;
  z-index: 2; background-size: cover; background-position: center; background-color: #000;
  opacity: 0; transition: opacity .7s var(--mac-ease, ease); pointer-events: none;
}
html body #mzclip-bgv.mzclip-embed > .mzclip-shield.on { opacity: 1; }

/* уведомления не закрывают кнопку «Клип-фон» и стрелку раскрытого плеера */
html body.exp-open #toast-container { top: 64px !important; }

/* «Размытие»: плавно меняются прозрачность и размытие, размер шрифта — сразу
   (иначе строки «плывут» во время прокрутки к активной) */
[data-ly-anim="focus"] .lyric-line { transition: opacity .5s var(--mac-ease, ease), filter .5s var(--mac-ease, ease), color .4s ease, text-shadow .4s ease !important; }

/* ЭТАП 181c: подпись под обложкой — как на обоях: обычный регистр, до двух
   строк, без альбома; текст песни крупнее */
@media (min-width: 861px) and (orientation: landscape) {
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-title#exp-title {
    text-transform: none !important; letter-spacing: -.01em !important; white-space: normal !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important;
    font-size: clamp(20px, 2.1vw, 42px) !important;
  }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-artist > span[style*="dim2"] { display: none !important; }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-lyrics-lines { zoom: 1.32; }
}

/* ═══ ЭТАП 182 ═══
   Шторка встроенного YouTube закрывает ролик сразу (без затухания) — пока
   она проявлялась, успевали мелькнуть кнопка паузы и плашка подгрузки.
   Снимается по-прежнему плавно. */
html body #mzclip-bgv.mzclip-embed > .mzclip-shield.on { transition: none !important; }

/* Узкое или вертикальное окно: обложка поменьше, подпись как на обоях,
   кнопки и полоса времени — только пока двигается мышь (как в широком окне) */
@media (max-width: 860px), (orientation: portrait) {
  html body #exp-player#exp-player.clip-cinema.clip-cinema > #exp-left { background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0)) !important; padding-top: 64px !important; gap: 10px !important; align-items: center !important; }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-cover-wrap {
    display: block !important; width: min(38vw, 26vh) !important; height: auto !important; aspect-ratio: 1 / 1;
    border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 14px 40px rgba(0,0,0,.55) !important; margin: 0 auto !important;
  }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-cover-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-track-info { text-align: center !important; width: 100%; }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-title#exp-title {
    font-family: 'Unbounded', 'Onest', sans-serif !important; font-size: clamp(18px, 5.2vw, 30px) !important; line-height: 1.2 !important;
    text-transform: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff !important;
  }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-artist { font-size: clamp(13px, 3.6vw, 18px) !important; color: rgba(255,255,255,.72) !important; }
  html body #exp-player#exp-player.clip-cinema.clip-cinema #exp-artist > span[style*="dim2"] { display: none !important; }
  html body #exp-player#exp-player.clip-cinema.clip-cinema :is(#exp-controls, #exp-progress-wrap) {
    opacity: 0; max-height: 0; overflow: hidden; pointer-events: none; margin: 0 !important;
    transition: opacity .35s var(--mac-ease, ease), max-height .35s var(--mac-ease, ease);
  }
  html body #exp-player#exp-player.clip-cinema.clip-cinema.mzc-ui :is(#exp-controls, #exp-progress-wrap) { opacity: 1; max-height: 90px; pointer-events: auto; }
}


/* ЭТАП 182b: строки переносятся только между словами — «anywhere» рвал слова пополам */
/* каждая буква — свой span, пробелы — &nbsp;: переносить было негде, и слово рвалось.
   Пробел-«кирпичик» (inline-block) даёт место переноса, внутри слова переноса нет */
html body .lyric-line .ly-word.ly-space:not(#mzx) { display: inline-block !important; }
html body .lyric-line:not(#mzx):not(#mzx) { word-break: normal !important; overflow-wrap: break-word !important; }

/* ═══ ЭТАП 183: «Продолжить» / «Трек по ссылке» — уведомление в духе macOS ═══ */
html body #mzx-chip.mzx-n {
  left: 50%; bottom: 108px; z-index: 9000;
  display: flex; align-items: center; gap: 14px;
  width: min(420px, calc(100vw - 32px)); max-width: none; box-sizing: border-box;
  padding: 12px 12px 12px 12px; border-radius: 22px; border: none;
  background: rgba(28,32,38,.72);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.14), 0 24px 60px -18px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.25);
  font-family: 'Onest', -apple-system, system-ui, sans-serif; color: #F2F6F8;
  opacity: 0; transform: translate(-50%, 24px) scale(.96);
  transition: opacity .35s var(--mac-ease, ease), transform .55s var(--mac-spring, cubic-bezier(.34,1.56,.64,1));
}
html body #mzx-chip.mzx-n.mzx-in { opacity: 1; transform: translate(-50%, 0) scale(1); }
html body #mzx-chip.mzx-n.mzx-out { opacity: 0; transform: translate(-50%, 14px) scale(.97); transition: opacity .22s ease, transform .25s ease; }
#mzx-chip.mzx-n .mzx-n-cover {
  position: relative; width: 56px; height: 56px; flex: none; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); font-size: 22px;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.6);
}
#mzx-chip.mzx-n .mzx-n-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
#mzx-chip.mzx-n .mzx-n-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#mzx-chip.mzx-n .mzx-n-eyebrow { font-size: 11.5px; font-weight: 600; color: rgba(242,246,248,.5); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
#mzx-chip.mzx-n .mzx-n-title { font-size: 15px; font-weight: 650; line-height: 1.25; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mzx-chip.mzx-n .mzx-n-sub { font-size: 13px; color: rgba(242,246,248,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mzx-chip.mzx-n .mzx-n-bar { height: 3px; margin-top: 6px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
#mzx-chip.mzx-n .mzx-n-bar i { display: block; height: 100%; border-radius: 2px; background: rgb(var(--mz-tint-rgb, 79,196,222)); }
#mzx-chip.mzx-n .mzx-n-go {
  width: 46px; height: 46px; flex: none; border: none; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 0 0 2px;
  background: #F4F7F9; color: #0A1016;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.6);
  transition: transform .2s var(--mac-ease, ease), filter .2s;
}
#mzx-chip.mzx-n .mzx-n-go:hover { filter: brightness(1.05); transform: scale(1.05); }
#mzx-chip.mzx-n .mzx-n-x {
  position: absolute; top: -7px; left: -7px; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(60,64,70,.92); color: rgba(255,255,255,.85);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.4);
  opacity: 0; transform: scale(.8); transition: opacity .2s ease, transform .2s ease;
}
#mzx-chip.mzx-n:hover .mzx-n-x, #mzx-chip.mzx-n:focus-within .mzx-n-x { opacity: 1; transform: scale(1); }
@media (hover: none) { #mzx-chip.mzx-n .mzx-n-x { opacity: 1; transform: none; } }
@media (max-width: 768px) { html body #mzx-chip.mzx-n { bottom: 150px; } }

/* ═══ ЭТАП 184 ═══
   «Клип-фон ✕» сдвинут левее стрелки ▼ закрытия плеера — она на него наезжала. */
html body #exp-player #mzclip-bg-badge:not(#mzx) { right: 66px !important; top: 14px !important; }
/* кнопка паузы в «Клипе на весь экран» — белый круг, как на обоях и в macOS,
   а не цвет обложки (под серой обложкой выходило розово-серое пятно) */
html body #exp-player#exp-player.clip-cinema #exp-controls button:has(#exp-icon-play):not(#mzx):not(#mzx) {
  background: #F4F7F9 !important; background-image: none !important; border: none !important;
  color: #0A1016 !important; box-shadow: 0 10px 26px -10px rgba(0,0,0,.7) !important;
}
html body #exp-player#exp-player.clip-cinema #exp-controls button:has(#exp-icon-play):not(#mzx):not(#mzx)::before,
html body #exp-player#exp-player.clip-cinema #exp-controls button:has(#exp-icon-play):not(#mzx):not(#mzx)::after { display: none !important; }
html body #exp-player#exp-player.clip-cinema #exp-controls button:has(#exp-icon-play):not(#mzx):not(#mzx) svg { fill: #0A1016 !important; color: #0A1016 !important; }
html body #exp-player#exp-player.clip-cinema #exp-progress-fill:not(#mzx) { background: #F4F7F9 !important; }

/* ═══ ЭТАП 185: клип на весь экран — без переноса рамки ═══
   Раньше клип переносился прямым потомком плеера, а перенос iframe браузер
   делает перезагрузкой: серый экран и плашка подгрузки YouTube при каждом
   входе/выходе. Теперь он остаётся на месте и растягивается на окно. */
html body #exp-player#exp-player.clip-cinema #mzclip-bgv:not(#mzx) {
  position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important;
  z-index: 0 !important; border-radius: 0 !important; margin: 0 !important;
  filter: brightness(.5) saturate(1.05) !important;
}
html body #exp-player#exp-player.clip-cinema video#mzclip-bgv:not(#mzx):not([style*="object-fit"]) { object-fit: cover !important; }
/* видео с подгонкой под вшитые рамки (26-clips.js fitVideo) — геометрию задаёт сам скрипт */
html body #exp-player#exp-player.clip-cinema video#mzclip-bgv[style*="object-fit"]:not(#mzx) { inset: auto !important; width: auto !important; height: auto !important; }
html body #exp-player#exp-player.clip-cinema #exp-right, html body #exp-player#exp-player.clip-cinema #exp-lyrics-content { transform: none !important; filter: none !important; contain: none !important; will-change: auto !important; }


/* ЭТАП 186: в «Клипе на весь экран» ряд кнопок — по центру под обложкой и по её
   ширине (был прижат к левому краю: 328 px из 518) */
html body #exp-player#exp-player.clip-cinema #exp-controls:not(#mzx) {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important;
  padding: 0 4px !important; box-sizing: border-box !important; gap: 0 !important;
}
html body #exp-player#exp-player.clip-cinema #exp-progress-wrap:not(#mzx) { width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; }


/* ЭТАП 186b: клип (position: fixed) лежит внутри #exp-right; в вертикальной
   раскладке у панелей был одинаковый z-index, и клип рисовался поверх обложки
   и кнопок. Левая панель — всегда выше правой. */
html body #exp-player#exp-player.clip-cinema > #exp-left:not(#mzx) { position: relative; z-index: 4 !important; }
html body #exp-player#exp-player.clip-cinema > #exp-right:not(#mzx) { z-index: 3 !important; }
@media (min-width: 861px) and (orientation: landscape) {
  html body #exp-player#exp-player.clip-cinema > #exp-left:not(#mzx) { position: absolute !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЭТАП 188 — караоке: цвет обложки, аватарки, свои реакции; кнопка жанров волны
   ═══════════════════════════════════════════════════════════════════════ */
/* Главная круглая кнопка комнаты (плей) была залита белым и не брала цвет обложки.
   --kx-a в комнате = цвет обложки трека комнаты (js/11-karaoke.js kxApplyCoverTone),
   без настройки — цвет темы. */
#view-karaoke .kx-round:not(.kx-round-sm):not(.kx-round-xs):not(#mzx) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--kx-a) 84%, #fff), var(--kx-a));
  color: var(--kx-on, #071017);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--kx-a) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
}
#view-karaoke .kx-primary:not(#mzx), #view-karaoke .kx-round-xs:not(#mzx) { color: var(--kx-on, #071017); }

/* Аватарки: фото профиля, без него — первая буква на чёрном */
#view-karaoke .kx-av:not(#mzx) { background: #000 !important; color: #F2F6F8; position: relative; }
#view-karaoke .kx-av > b { font-weight: 700; line-height: 1; }
#view-karaoke .kx-av > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}

/* Реакции: свои иконки на глянцевом чипе, как в плитках «Быстрого доступа» */
#view-karaoke .kx-rchip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 11px; color: #fff;
  background: radial-gradient(120% 120% at 28% 16%, hsl(var(--rh) 92% 80%) 0%, hsl(var(--rh) 72% 55%) 42%, hsl(var(--rh) 68% 32%) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 8px rgba(0,0,0,.22), 0 8px 16px -8px hsl(var(--rh) 70% 40% / .9);
  transition: transform .2s var(--kx-ease);
}
#view-karaoke .kx-rchip svg { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.32)); }
#view-karaoke .kx-react button:not(#mzx) { display: flex; align-items: center; justify-content: center; font-size: 0; }
#view-karaoke .kx-react button:hover .kx-rchip { transform: scale(1.1) translateY(-1px); }
#view-karaoke .kx-react button:active .kx-rchip { transform: scale(.94); }
#view-karaoke .kx-reaction .kx-rchip { width: 56px; height: 56px; border-radius: 18px; }

/* «Моя волна»: кнопка свернуть/развернуть жанры стояла не по центру полосы и обрезалась */
html body #wave-screen .wave-ym-left-title > .wave-left-head:not(#mzx) { width: 100%; box-sizing: border-box; }
html body #wave-screen.wave-left-collapsed .wave-ym-left:not(#mzx),
html body #wave-screen.wave-left-collapsed .wave-ym-left-title:not(#mzx) { padding-left: 0 !important; padding-right: 0 !important; }
html body #wave-screen.wave-left-collapsed .wave-left-head:not(#mzx) { justify-content: center !important; }
/* ЭТАП 188b: реакции в цветах темы MUZLO — один чёрно-синий перелив вместо разноцветных */
@keyframes kxChipFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
#view-karaoke .kx-rchip:not(#mzx) {
  color: #DDF1FA;
  background: linear-gradient(120deg, #05080b 0%, #0f2a3b 22%, #2f7aa3 42%, #5fa3c4 50%, #2f7aa3 58%, #0f2a3b 78%, #05080b 100%);
  background-size: 200% 100%;
  animation: kxChipFlow 3.2s linear infinite;
  box-shadow: inset 0 1px 0 rgba(160,215,240,.35), inset 0 0 0 1px rgba(95,163,196,.28), 0 8px 18px -8px rgba(47,122,163,.75);
}
#view-karaoke .kx-rchip:not(#mzx) svg { filter: drop-shadow(0 0 6px rgba(95,163,196,.55)); }
@media (prefers-reduced-motion: reduce) { #view-karaoke .kx-rchip:not(#mzx) { animation: none; } }

/* ═══ ЭТАП 191 — караоке по макету Claude Design: лобби (создать / код / открытые комнаты) и комната (сцена + колонка) ═══ */
#view-karaoke {
  --kx-surf: #131a20; --kx-surf2: #1a232b; --kx-line2: rgba(190,220,235,.07);
  --kx-t2: #9db0bb; --kx-dim: #64757f; --kx-r: 14px;
  --kx-spring: linear(0, .0193, .069, .1391, .2213, .3092, .3981, .4845, .5658, .6406, .7078, .7672, .8186, .8625, .8993, .9296, .9541, .9735, .9886, .9999, 1.008, 1.0137, 1.0172, 1.0192, 1.0199, 1.0197, 1.0188, 1.0175, 1.0159, 1.0142, 1.0124, 1.0107, 1.009, 1.0075, 1.0061, 1.0049, 1.0038, 1.0029, 1.0022, 1.0015, 1);
  --kx-pop: linear(0, .0295, .1052, .2104, .3311, .4564, .578, .6901, .7891, .8729, .941, .9938, 1.0326, 1.0591, 1.075, 1.0824, 1.0832, 1.0791, 1.0717, 1.0623, 1.0519, 1.0415, 1.0316, 1.0226, 1.0148, 1.0083, 1.0031, .9992, .9963, .9945, .9934, .993, .9931, .9936, .9943, .9951, .996, .9968, .9977, .9984, 1);
}
#view-karaoke .kx-eyebrow { font-family: 'Unbounded', 'Onest', sans-serif; font-weight: 500; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--kx-dim); }
#view-karaoke .kx-title-xl { font-family: 'Unbounded', 'Onest', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -.01em; margin: 4px 0 6px; color: #e8f1f5; text-wrap: balance; }
#view-karaoke .kx-cap { color: var(--kx-dim); font-size: 12.5px; }
#view-karaoke .kx-primary { height: 40px; padding: 0 18px; border-radius: 999px; gap: 8px; font-size: 14px; }
#view-karaoke .kx-primary:disabled { opacity: .4; cursor: default; filter: none; }
#view-karaoke .kx-create-row .kx-primary { width: auto; }

/* ── лобби ── */
#view-karaoke .kx-lobby { display: block; padding: 64px 32px 48px; }
#view-karaoke .kx-lobby-inner { max-width: 1240px; margin: 0 auto; display: block; }
#view-karaoke .kx-lead { color: var(--kx-t2); font-size: 14px; margin: 0 0 20px; }
#view-karaoke .kx-hero2 { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 18px; }
#view-karaoke .kx-create {
  position: relative; overflow: hidden; padding: 30px; border-radius: calc(var(--kx-r) * 1.4);
  background: linear-gradient(135deg, color-mix(in oklab, var(--kx-a) 34%, #11161b), #11161b 70%);
  box-shadow: 0 0 0 1px var(--kx-line2) inset; animation: kxRise .6s var(--kx-spring) both;
}
#view-karaoke .kx-create h2 { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.1; margin: 8px 0; color: #e8f1f5; }
#view-karaoke .kx-create p { color: var(--kx-t2); margin: 0 0 20px; max-width: 360px; font-size: 14px; line-height: 1.45; }
#view-karaoke .kx-create-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#view-karaoke .kx-create-mic { position: absolute; right: 28px; top: 50%; margin-top: -60px; width: 120px; height: 120px; color: color-mix(in oklab, var(--kx-a) 60%, white); opacity: .9; animation: kxFloat 5s ease-in-out infinite; pointer-events: none; }
#view-karaoke .kx-joincard {
  padding: 24px; border-radius: calc(var(--kx-r) * 1.4); background: var(--kx-surf); box-shadow: 0 0 0 1px var(--kx-line2) inset;
  display: flex; flex-direction: column; gap: 12px; justify-content: center; animation: kxRise .6s var(--kx-spring) .05s both;
}
#view-karaoke .kx-joincard > b { font-size: 16px; font-weight: 600; color: #e8f1f5; }
#view-karaoke .kx-codein { display: flex; gap: 8px; }
#view-karaoke .kx-cbox {
  width: 48px; height: 56px; border-radius: 12px; border: 0; background: var(--kx-surf2); box-shadow: 0 0 0 1px var(--kx-line2) inset;
  text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 22px; font-weight: 500; text-transform: uppercase; color: #e8f1f5;
  outline: none; transition: box-shadow .3s, transform .45s var(--kx-pop); padding: 0;
}
#view-karaoke .kx-cbox:focus { box-shadow: 0 0 0 2px var(--kx-a) inset; transform: translateY(-2px); }
#view-karaoke .kx-cbox.filled { color: color-mix(in oklab, var(--kx-a) 55%, white); }
#view-karaoke .kx-join-go { width: 100%; border-radius: 10px; height: 38px; }
#view-karaoke .kx-error:empty { display: none; }
/* переключатель «Открытая» */
#view-karaoke .kx-pub { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--kx-t2); user-select: none; }
#view-karaoke .kx-pub input { position: absolute; opacity: 0; pointer-events: none; }
#view-karaoke .kx-pub i { position: relative; width: 34px; height: 20px; border-radius: 10px; background: rgba(190,220,235,.14); transition: background-color .35s; flex: none; }
#view-karaoke .kx-pub i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.35); transition: transform .5s var(--kx-spring); }
#view-karaoke .kx-pub input:checked + i { background: var(--kx-a); }
#view-karaoke .kx-pub input:checked + i::after { transform: translateX(14px); }
#view-karaoke .kx-pub input:focus-visible + i { outline: 2px solid var(--kx-a); outline-offset: 2px; }
/* открытые комнаты */
#view-karaoke .kx-sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 34px 0 14px; }
#view-karaoke .kx-sec-h h2 { margin: 0; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--kx-t2); }
#view-karaoke .kx-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #ff6b6b; }
#view-karaoke .kx-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff6b6b; animation: kxPulse 1.6s ease-in-out infinite; }
#view-karaoke .kx-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
#view-karaoke .kx-roomcard {
  display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 0; border-radius: var(--kx-r); background: var(--kx-surf); color: #e8f1f5;
  box-shadow: 0 0 0 1px var(--kx-line2) inset; text-align: left; cursor: pointer; font: inherit;
  transition: background .3s, transform .5s var(--kx-pop); animation: kxRise .6s var(--kx-spring) both; animation-delay: calc(var(--i, 0) * 45ms);
}
#view-karaoke .kx-roomcard:hover { background: var(--kx-surf2); transform: translateY(-2px); }
#view-karaoke .kx-roomcard:active { transform: scale(.97); }
#view-karaoke .kx-room-h { display: flex; align-items: center; gap: 8px; }
#view-karaoke .kx-room-h b { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-karaoke .kx-room-now { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--kx-t2); min-width: 0; }
#view-karaoke .kx-room-now img, #view-karaoke .kx-room-ph { width: 36px; height: 36px; border-radius: 7px; object-fit: cover; flex: none; background: rgba(255,255,255,.06); display: grid; place-items: center; color: var(--kx-dim); }
#view-karaoke .kx-room-now > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-karaoke .kx-room-faces { display: flex; align-items: center; }
#view-karaoke .kx-room-faces .kx-av { margin-left: -6px; box-shadow: 0 0 0 2px var(--kx-surf); }
#view-karaoke .kx-room-faces .kx-av:first-child { margin-left: 0; }
#view-karaoke .kx-room-faces em { font-style: normal; color: var(--kx-dim); font-size: 12px; margin-left: 10px; }
#view-karaoke .kx-rooms-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: var(--kx-r); background: var(--kx-surf); box-shadow: 0 0 0 1px var(--kx-line2) inset; color: var(--kx-dim); font-size: 13px; }
#view-karaoke .kx-rooms-empty svg { flex: none; color: color-mix(in oklab, var(--kx-a) 60%, white); }

/* ── комната ── */
#view-karaoke .kx-room { padding: 22px 32px 24px; gap: 18px; }
#view-karaoke .kx-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
#view-karaoke .kx-head-t { flex: 1; min-width: 0; }
#view-karaoke .kx-head .kx-title-xl { margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-karaoke .kx-head .kx-title-xl.kx-editable { cursor: text; }
#view-karaoke .kx-head .kx-title-xl.kx-editable:hover { color: color-mix(in oklab, var(--kx-a) 45%, white); }
#view-karaoke .kx-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#view-karaoke .kx-ghost-btn { height: 34px; padding: 0 14px; border-radius: 9px; border: 0; background: rgba(190,220,235,.08); color: #e8f1f5; font: 600 13px 'Onest', sans-serif; cursor: pointer; transition: background .2s, transform .45s var(--kx-pop); }
#view-karaoke .kx-ghost-btn:hover { background: rgba(255,90,90,.16); color: #ff9b9b; }
#view-karaoke .kx-ghost-btn:active { transform: scale(.95); }
#view-karaoke .kx-status { position: absolute; left: 50%; top: 100%; translate: -50% 6px; z-index: 5; }
#view-karaoke .kx-head { position: relative; }
#view-karaoke .kx-body { padding: 0; gap: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
#view-karaoke .kx-stage {
  border-radius: calc(var(--kx-r) * 1.4); min-height: 420px;
  background: radial-gradient(120% 120% at 0 0, color-mix(in oklab, var(--kx-a) 24%, #090d10), #07090b 60%);
  box-shadow: 0 0 0 1px var(--kx-line2) inset;
}
#view-karaoke .kx-now { padding: 16px 18px 4px; gap: 12px; }
#view-karaoke .kx-cover-wrap { width: 44px; height: 44px; border-radius: 9px; }
#view-karaoke .kx-title { font-size: 15px !important; }
html body #view-karaoke #karaoke-lyrics-area { -webkit-mask-image: linear-gradient(transparent 0, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent 0, #000 22%, #000 78%, transparent); }
#view-karaoke .kx-side {
  width: auto; background: none; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  display: flex; flex-direction: column; gap: 12px; overflow-y: auto; scrollbar-width: none; padding-bottom: 2px;
}
#view-karaoke .kx-side::-webkit-scrollbar { display: none; }
#view-karaoke .kx-card2 { flex: none; padding: 14px; border-radius: var(--kx-r); background: var(--kx-surf); box-shadow: 0 0 0 1px var(--kx-line2) inset; animation: kxRise .5s var(--kx-spring) both; }
#view-karaoke .kx-codecard { text-align: center; padding: 18px 14px 14px; }
#view-karaoke .kx-digits { display: flex; gap: 6px; justify-content: center; padding: 10px 0 6px; cursor: pointer; }
#view-karaoke .kx-digits span {
  width: 36px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: var(--kx-surf2); box-shadow: 0 0 0 1px var(--kx-line2) inset;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 21px; color: color-mix(in oklab, var(--kx-a) 55%, white); animation: kxDigit .6s var(--kx-pop) both;
}
#view-karaoke .kx-code-acts { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#view-karaoke .kx-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--kx-surf2); box-shadow: 0 0 0 1px var(--kx-line2) inset; color: var(--kx-t2); font: 500 12.5px 'Onest', sans-serif; cursor: pointer; transition: color .2s, transform .45s var(--kx-pop); }
#view-karaoke .kx-chip:hover { color: #e8f1f5; }
#view-karaoke .kx-chip:active { transform: scale(.94); }
#view-karaoke .kx-code-acts .kx-pub { font-size: 12.5px; }
#view-karaoke .kx-code-acts .kx-timer { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--kx-dim); }
#view-karaoke .kx-metercard .kx-eyebrow { margin-bottom: 10px; }
#view-karaoke .kx-bars { display: flex; gap: 3px; height: 40px; align-items: flex-end; padding: 0 2px; }
#view-karaoke .kx-bars i { flex: 1; height: 8%; border-radius: 2px; background: color-mix(in oklab, var(--kx-a) 70%, #1a232b); transition: height .08s linear, background-color .5s; }
#view-karaoke .kx-bars.live i { background: var(--kx-a); }
#view-karaoke .kx-peoplecard { padding: 10px 8px 6px; }
#view-karaoke .kx-peoplecard > .kx-eyebrow { margin: 4px 6px 6px; }
#view-karaoke .kx-mlist { display: flex; flex-direction: column; }
#view-karaoke .kx-member { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; background: none; box-shadow: none; animation: kxRise .45s var(--kx-spring) both; transition: background .2s; }
#view-karaoke .kx-member:hover { background: rgba(190,220,235,.04); }
#view-karaoke .kx-member .kx-av { width: 32px; height: 32px; margin: 0; font-size: 11px; flex: none; }
#view-karaoke .kx-member-main { flex: 1; min-width: 0; }
#view-karaoke .kx-member-name { font-size: 13.5px; color: #e8f1f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-karaoke .kx-member-name i { font-style: normal; color: var(--kx-dim); font-size: 11.5px; }
#view-karaoke .kx-crown { color: #ffcc00; vertical-align: -1px; }
#view-karaoke .kx-member-vol { display: none; width: 100%; margin: 4px 0 0; height: 16px; }
#view-karaoke .kx-member:hover .kx-member-vol, #view-karaoke .kx-member-vol:focus { display: block; }
#view-karaoke .kx-mstate { font-style: normal; font-size: 11.5px; color: var(--kx-dim); white-space: nowrap; }
#view-karaoke .kx-member.mic .kx-mstate { color: color-mix(in oklab, var(--kx-a) 55%, white); }
#view-karaoke .kx-mstate .kx-st-sing { display: none; color: #3ecf8e; }
#view-karaoke .kx-member.speaking .kx-st-sing { display: inline; }
#view-karaoke .kx-member.speaking .kx-st-idle { display: none; }
#view-karaoke .kx-member.off { opacity: .5; }
#view-karaoke .kx-member .kx-xs-btn { width: 26px; height: 26px; opacity: 0; transition: opacity .2s; }
#view-karaoke .kx-member:hover .kx-xs-btn { opacity: 1; }
#view-karaoke .kx-panel { padding: 6px; min-height: 300px; display: flex; flex-direction: column; }
#view-karaoke .kx-panel .kx-tabs { margin: 0 0 4px; padding: 3px; border-radius: 10px; background: rgba(190,220,235,.06); }
#view-karaoke .kx-panel .kr-tab span { display: none; }
#view-karaoke .kx-panel .kr-tab.active span { display: inline; }
#view-karaoke .kx-room:not(.kx-is-host) .kx-host-only { display: none !important; }

@keyframes kxRise { from { opacity: 0; transform: translateY(8px); } }
@keyframes kxDigit { from { opacity: 0; transform: translateY(14px) scale(.8); filter: blur(3px); } }
@keyframes kxFloat { 50% { translate: 0 -10px; } }
@keyframes kxPulse { 50% { opacity: .35; } }

@media (max-width: 900px) {
  #view-karaoke .kx-lobby { padding: 24px 16px 40px; }
  #view-karaoke .kx-hero2, #view-karaoke .kx-body { grid-template-columns: minmax(0, 1fr); }
  #view-karaoke .kx-create { padding: 22px; }
  #view-karaoke .kx-create h2 { font-size: 24px; }
  #view-karaoke .kx-create-mic { display: none; }
  #view-karaoke .kx-codein { gap: 6px; }
  #view-karaoke .kx-cbox { width: calc((100% - 24px) / 5); height: 50px; }
  #view-karaoke .kx-rooms { grid-template-columns: minmax(0, 1fr); }
  #view-karaoke .kx-room { padding: 14px 14px 18px; }
  #view-karaoke .kx-stage { min-height: 320px; }
  #view-karaoke .kx-tools { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  #view-karaoke .kx-create-mic, #view-karaoke .kx-live i { animation: none; }
}

/* ═══ ЭТАП 191 — каркас по макету Claude Design: фон с подсветкой, сайдбар, верхняя панель, плеер во всю ширину ═══ */
:root { --bg: #0c1115; --mz-a: var(--mz-ui-accent, var(--accent, #4984a2)); --mz-line: rgba(190,220,235,.07); --mz-dim: #64757f; --mz-t2: #9db0bb; }
@media (min-width: 901px) {
  html body { background: var(--bg) !important; }
  /* мягкая подсветка цветом акцента (и обложки, когда включён «цвет по обложке») */
  html body::before, html body::after {
    content: ''; position: fixed; z-index: 0; width: 60vw; aspect-ratio: 1; border-radius: 50%;
    filter: blur(90px); opacity: .26; pointer-events: none; transition: background-color 1s;
  }
  html body::before { left: -10vw; top: -22vw; background: var(--mz-a); animation: mzDrift1 26s ease-in-out infinite alternate; }
  html body::after { right: -15vw; bottom: -28vw; background: color-mix(in oklab, var(--mz-a) 40%, #6d5bd0); animation: mzDrift2 32s ease-in-out infinite alternate; }
  html body #main-grid { background: transparent !important; }

  /* сайдбар — стекло над подсветкой; плеер теперь во всю ширину, сайдбар заканчивается над ним */
  html body #sidebar {
    background: var(--sb-bg, rgba(8,12,15,.5)) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
    border-right: 1px solid var(--mz-line) !important;
    height: calc(100vh - var(--player-h, 76px)) !important; align-self: flex-start;
    padding: 22px 12px 0 !important; gap: 18px !important;
  }
  html body #px-nav { gap: 2px !important; }
  html body #sidebar .nav-btn { height: 40px !important; padding: 0 12px !important; gap: 13px !important; border-radius: 10px !important; font-size: 15px !important; color: rgba(232,241,245,.6) !important; transition: color .25s, background-color .3s, box-shadow .3s !important; }
  html body #sidebar .nav-btn:hover { color: #e8f1f5 !important; background: transparent !important; }
  html body #sidebar .nav-btn.active {
    color: #e8f1f5 !important;
    background: color-mix(in oklab, var(--mz-a) 16%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--mz-a) 22%, transparent) inset !important;
  }
  html body #sidebar .nav-btn.active .nav-label { font-weight: 500 !important; }
  html body #sidebar .nav-btn.active svg { color: var(--mz-a) !important; }
  html body #sidebar .nav-btn.active .nav-mark { background: var(--mz-a) !important; }
  html body #sidebar-liked { height: 50px !important; border-radius: 12px !important; background: rgba(255,255,255,.035) !important; border: 0 !important; box-shadow: 0 0 0 1px rgba(255,255,255,.055) inset !important; padding: 0 12px !important; transition: background .2s, transform .5s var(--mac-ease, ease) !important; }
  html body #sidebar-liked:hover { background: rgba(255,255,255,.06) !important; }
  html body #sidebar-liked:active { transform: scale(.97); }
  html body #sidebar-liked-count { font-variant-numeric: tabular-nums; color: var(--mz-dim) !important; font-size: 12.5px !important; }
  html body #sidebar-pl-header { font-family: 'Unbounded', sans-serif !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: .2em !important; color: #4f6270 !important; padding: 6px 12px 8px !important; }
  html body #profile-bar { border-top: 1px solid var(--mz-line) !important; padding: 12px 8px !important; margin: 0 -12px; padding-left: 20px !important; padding-right: 14px !important; }
  html body #profile-avatar { width: 30px !important; height: 30px !important; }

  /* плеер */
  html body #player-bar {
    left: 0 !important; right: 0 !important; width: 100% !important; z-index: 120 !important;
    background: color-mix(in oklab, var(--bg) 94%, black) !important;
    border-top: 1px solid var(--mz-line) !important;
  }
  html body #btn-play { background: var(--mz-a) !important; box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--mz-a) 80%, transparent) !important; }

  /* верхняя панель: назад/вперёд и поиск, как в macOS-приложении */
  html body #mz-topbar {
    position: sticky; top: 0; z-index: 30; height: 56px; margin-bottom: -56px;
    display: flex; align-items: center; gap: 6px; padding: 0 22px;
    border-bottom: 1px solid transparent; pointer-events: none;
    transition: background .3s, border-color .3s;
  }
  html body #mz-topbar > * { pointer-events: auto; }
  html body #mz-topbar.scrolled { background: color-mix(in oklab, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); border-color: var(--mz-line); }
  html body #mz-topbar .mzt-h { width: 34px; height: 34px; border: 0; border-radius: 10px; display: grid; place-items: center; background: none; color: var(--mz-t2); cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
  html body #mz-topbar .mzt-h:hover:not(:disabled) { background: rgba(190,220,235,.07); color: #e8f1f5; }
  html body #mz-topbar .mzt-h:disabled { opacity: .3; cursor: default; }
  html body #mz-topbar .mzt-ttl { font-weight: 600; font-size: 15px; margin-left: 8px; color: #e8f1f5; opacity: 0; transform: translateY(5px); transition: opacity .25s, transform .45s cubic-bezier(.32,.72,0,1); pointer-events: none; }
  html body #mz-topbar.scrolled .mzt-ttl { opacity: 1; transform: none; }
  html body #mz-topbar .mzt-sp { flex: 1; pointer-events: none; }
  html body #mz-topbar .mzt-search { display: flex; align-items: center; gap: 8px; height: 34px; min-width: 200px; padding: 0 10px 0 12px; border: 0; border-radius: 10px; background: rgba(190,220,235,.06); color: var(--mz-dim); font: 13px 'Onest', sans-serif; cursor: pointer; transition: background .2s, color .2s; }
  html body #mz-topbar .mzt-search:hover { background: rgba(190,220,235,.09); color: var(--mz-t2); }
  html body #mz-topbar .mzt-search kbd { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; padding: 2px 6px; border-radius: 5px; background: rgba(190,220,235,.08); }
  html body.mz-view-wave #mz-topbar, html body.mz-view-search #mz-topbar .mzt-search { display: none; }
}
@keyframes mzDrift1 { to { transform: translate(20%, 25%) scale(1.15); } }
@keyframes mzDrift2 { to { transform: translate(-25%, -15%) scale(.9); } }
@media (prefers-reduced-motion: reduce) { html body::before, html body::after { animation: none !important; } }

/* ═══ ЭТАП 191 — поиск по макету Claude Design: заголовок, широкая строка, сегменты, сетка жанров ═══ */
@media (min-width: 901px) {
  html body #view-search { padding: 64px 32px 48px !important; max-width: 1304px; margin: 0 auto; }
  html body #view-search .mz-title-xl { font-family: 'Unbounded', 'Onest', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -.01em; margin: 4px 0 18px; color: #e8f1f5; }
  html body #view-search .search-input-wrap:not(#mzx) { justify-content: flex-start; max-width: 720px; }
  html body #view-search #search-ym-wrap:not(#mzx) { margin: 0 !important; padding: 0 !important; max-width: 720px; width: 100%; align-items: stretch !important; }
  html body #view-search #mz-search-home:not(#mzx) { margin: 0 !important; padding-top: 0 !important; }
  html body #view-search #search-ym-status:not(#mzx) { padding: 12px 0 0 !important; }
  html body #view-search #search-ym-input:not(#mzx) {
    width: 100% !important; height: 56px !important; border-radius: 16px !important; font-size: 17px !important; font-weight: 400 !important;
    background-color: rgba(190,220,235,.07) !important; border: 0 !important; box-shadow: 0 0 0 1px var(--mz-line) inset !important;
  }
  html body #view-search #search-ym-input:not(#mzx):focus {
    background-color: rgba(190,220,235,.09) !important;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--mz-a) 60%, transparent) inset, 0 0 0 5px color-mix(in oklab, var(--mz-a) 22%, transparent) !important;
  }
  html body #msh-modes {
    display: inline-flex; justify-content: flex-start; gap: 0; margin: 14px 0 4px; padding: 2px; border-radius: 9px;
    background: rgba(190,220,235,.08); box-shadow: 0 0 0 .5px var(--mz-line) inset;
  }
  html body #msh-modes button { height: auto; padding: 6px 13px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--mz-t2); background: none; border: 0; gap: 6px; transition: color .25s, background-color .3s, box-shadow .3s; }
  html body #msh-modes button svg { width: 14px; height: 14px; }
  html body #msh-modes button:hover { background: none; color: #e8f1f5; }
  html body #msh-modes button.on { color: #e8f1f5; background: #1a232b; box-shadow: 0 0 0 .5px rgba(255,255,255,.08) inset, 0 2px 6px rgba(0,0,0,.35); }
  html body #msh-modes button.on svg { color: var(--mz-a); }
  #mz-search-home h3 { font: 700 11.5px/1.2 'Unbounded', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--mz-t2); }
  #mz-search-home .msh-sec { margin-top: 34px; }
  #mz-search-home .msh-h { margin-bottom: 14px; }
  #mz-search-home .msh-recents:not(:empty) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
  #mz-search-home .msh-recents:not(:empty)::before { content: 'Недавние запросы'; flex-basis: 100%; margin-bottom: 6px; font: 700 11.5px/1.2 'Unbounded', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--mz-t2); }
  #mz-search-home .msh-chip { height: 32px; padding: 0 13px; border-radius: 999px; background: #1a232b; box-shadow: 0 0 0 1px var(--mz-line) inset; color: var(--mz-t2); font-size: 13px; }
  /* жанры — сетка плиток вместо ленты со стрелками */
  #mz-search-home .msh-sec:has(.msh-tiles) .msh-nav { display: none !important; }
  #mz-search-home .msh-sec:has(.msh-tiles).more .msh-row { -webkit-mask-image: none; mask-image: none; }
  #mz-search-home .msh-row.msh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; overflow: visible; }
  #mz-search-home .msh-tile { width: auto; height: 104px; padding: 16px; border-radius: 14px; transition: transform .5s cubic-bezier(.34,1.56,.64,1), filter .2s; }
  #mz-search-home .msh-tile:hover { transform: translateY(-3px); }
  #mz-search-home .msh-tile:active { transform: scale(.96); }
  #mz-search-home .msh-tile .t { font-family: 'Unbounded', sans-serif; font-size: 16px; font-weight: 700; }
  #mz-search-home .msh-tile img { width: 78px; height: 78px; right: -14px; bottom: -12px; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.45); transition: opacity .3s, transform .6s cubic-bezier(.34,1.56,.64,1); }
  #mz-search-home .msh-tile:hover img { transform: rotate(14deg) translate(-4px, -4px); }
}

/* ═══ ЭТАП 191 — сегменты, коллекция и отступы под верхней панелью (макет Claude Design) ═══ */
/* сегментный переключатель: подложка 9 px, выбранный — плашка #1a232b с тенью */
html body :is(#auth-tabs, #exp-tabs, .wave-mode-tabs, .collection-tabs, .admin-tabs, #settings-tabs, .kr-tabs,
  .speed-btns, .sleep-btns, .mz-seg, div:has(> .eq-preset-btn), div:has(> .sleep-btn), div:has(> .mzai-tab), div:has(> .mzai-mo)):not(#mzx):not(#mzx):not(#mzx) {
  background: rgba(190,220,235,.08) !important; border: 0 !important; box-shadow: 0 0 0 .5px var(--mz-line) inset !important;
  border-radius: 9px !important; padding: 2px !important; gap: 0 !important;
}
html body :is(.auth-tab, .exp-tab, .wave-mode-tab, .coll-tab, .admin-tab, .settings-tab, .kr-tab, .mzai-tab, .mzai-mo,
  .speed-btn, .sleep-btn, .eq-preset-btn, .mz-seg-btn):not(#mzx):not(#mzx):not(#mzx):not(#mzx) {
  min-height: 28px !important; height: 28px !important; padding: 0 12px !important; border-radius: 7px !important; border: 0 !important;
  font-size: 12.5px !important; font-weight: 500 !important; color: var(--mz-t2) !important;
  transition: color .25s, background-color .3s, box-shadow .3s !important;
}
html body :is(.auth-tab, .exp-tab, .wave-mode-tab, .coll-tab, .admin-tab, .settings-tab, .kr-tab, .mzai-tab, .mzai-mo,
  .speed-btn, .sleep-btn, .eq-preset-btn, .mz-seg-btn):not(#mzx):not(#mzx):not(#mzx):not(#mzx):hover { background: transparent !important; color: #e8f1f5 !important; }
html body :is(.auth-tab, .exp-tab, .wave-mode-tab, .coll-tab, .admin-tab, .settings-tab, .kr-tab, .mzai-tab, .mzai-mo,
  .speed-btn, .sleep-btn, .eq-preset-btn, .mz-seg-btn):is(.active, .on):not(#mzx):not(#mzx):not(#mzx):not(#mzx):not(#mzx) {
  background: #1a232b !important; color: #e8f1f5 !important;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.08) inset, 0 2px 6px rgba(0,0,0,.35) !important;
}

@media (min-width: 901px) {
  /* место под верхнюю панель */
  html body #view-library #main-grid { padding-top: 48px; }
  html body #view-collection, html body #view-queue, html body #view-explore { padding: 64px 32px 48px !important; max-width: 1304px; margin: 0 auto; }
  html body #view-karaoke .kx-room { padding-top: 64px; }

  /* шапка «Мне нравится» */
  html body #mz-coll-head {
    position: relative; display: flex; align-items: center; gap: 26px; padding: 26px; margin-bottom: 22px; overflow: hidden;
    border-radius: 20px; background: linear-gradient(120deg, color-mix(in oklab, var(--mz-a) 26%, #10161b), #0f151a 70%);
    box-shadow: 0 0 0 1px var(--mz-line) inset; animation: mzRise .6s cubic-bezier(.32,.72,0,1) both;
  }
  html body #mz-coll-head .ch-big {
    flex: none; width: 150px; height: 150px; border-radius: 16px; display: grid; place-items: center;
    background: linear-gradient(160deg, color-mix(in oklab, var(--mz-a) 70%, white 8%), color-mix(in oklab, var(--mz-a) 45%, #0b1014));
    box-shadow: 0 24px 50px -22px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12) inset;
  }
  html body #mz-coll-head .ch-big svg { width: 64px; height: 64px; color: #fff; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
  html body #mz-coll-head .ch-eb { font: 500 10.5px 'Unbounded', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--mz-dim); }
  html body #mz-coll-head h1 { margin: 6px 0 6px; font: 700 34px/1.05 'Unbounded', sans-serif; letter-spacing: -.01em; color: #e8f1f5; }
  html body #mz-coll-head p { margin: 0 0 18px; color: var(--mz-t2); font-size: 14px; }
  html body #mz-coll-head .ch-acts { display: flex; gap: 10px; }
  html body #mz-coll-head .ch-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
    font: 600 14px 'Onest', sans-serif; background: var(--mz-a); color: #fff; transition: transform .45s cubic-bezier(.34,1.56,.64,1), background-color .7s;
  }
  html body #mz-coll-head .ch-btn.ghost { background: rgba(190,220,235,.08); color: #e8f1f5; }
  html body #mz-coll-head .ch-btn:active { transform: scale(.95); }
  html body #mz-coll-head .ch-btn svg { width: 16px; height: 16px; }
  html body #view-collection .collection-tabs { display: inline-flex !important; margin-bottom: 18px; }
  html body #view-collection.mz-ch-tracks .coll-header .coll-count,
  html body #view-collection.mz-ch-tracks .coll-header .btn-play-all:not(.btn-dl-all) { display: none !important; }
}
@keyframes mzRise { from { opacity: 0; transform: translateY(8px); } }

/* ═══ ЭТАП 192 — телефон: верхняя панель только на компьютере; шапка «Мне нравится» в мобильном виде ═══ */
@media (max-width: 900px) {
  html body #mz-topbar { display: none !important; }
  html body #view-search .mz-title-xl { font: 700 26px 'Unbounded', sans-serif; margin: 8px 16px 12px; color: #e8f1f5; }
  html body #mz-coll-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 8px 16px 16px; padding: 18px; border-radius: 18px;
    background: linear-gradient(140deg, color-mix(in oklab, var(--mz-a) 26%, #10161b), #0f151a 70%); box-shadow: 0 0 0 1px var(--mz-line) inset; }
  html body #mz-coll-head .ch-big { width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(160deg, color-mix(in oklab, var(--mz-a) 70%, white 8%), color-mix(in oklab, var(--mz-a) 45%, #0b1014)); }
  html body #mz-coll-head .ch-big svg { width: 34px; height: 34px; color: #fff; }
  html body #mz-coll-head .ch-eb { font: 500 10px 'Unbounded', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--mz-dim); }
  html body #mz-coll-head h1 { margin: 4px 0; font: 700 24px/1.1 'Unbounded', sans-serif; color: #e8f1f5; }
  html body #mz-coll-head p { margin: 0 0 12px; color: var(--mz-t2); font-size: 13px; }
  html body #mz-coll-head .ch-acts { display: flex; gap: 8px; }
  html body #mz-coll-head .ch-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; font: 600 13.5px 'Onest', sans-serif; background: var(--mz-a); color: #fff; }
  html body #mz-coll-head .ch-btn.ghost { background: rgba(190,220,235,.08); color: #e8f1f5; }
  html body #mz-coll-head .ch-btn svg { width: 15px; height: 15px; }
}

/* ═══ ЭТАП 192 — окно настроек по макету Claude Design (две колонки; на телефоне — список и въезжающий раздел) ═══ */
html body #settings-panel#settings-panel.mzs {
  flex-direction: row !important; padding: 0 !important; width: min(960px, calc(100vw - 48px)) !important; height: min(680px, calc(100vh - 64px)) !important; max-height: none !important; overflow: hidden !important; gap: 0 !important;
  background: rgba(12,17,21,.86) !important; -webkit-backdrop-filter: blur(40px) saturate(1.6); backdrop-filter: blur(40px) saturate(1.6);
  border: 0 !important; box-shadow: 0 0 0 .5px rgba(255,255,255,.14) inset, 0 40px 100px -30px rgba(0,0,0,.9) !important;
  font-family: 'Onest', system-ui, sans-serif; color: #e8f1f5;
}
html body #settings-panel.mzs #settings-header { display: none !important; }
html body #settings-panel.mzs #mzs-side {
  position: relative; flex: 0 0 238px; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: none;
  padding: 0 10px 14px; background: rgba(8,12,15,.55); border-right: 1px solid var(--mz-line);
}
html body #settings-panel.mzs #mzs-side::-webkit-scrollbar { display: none; }
html body #settings-panel.mzs .mzs-lights { display: flex; gap: 8px; padding: 16px 6px 12px; }
html body #settings-panel.mzs .mzs-lights > * { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; box-shadow: 0 0 0 .5px rgba(0,0,0,.35) inset; }
html body #settings-panel.mzs .mzs-lights .l-r { background: #ff5f57; cursor: pointer; }
html body #settings-panel.mzs .mzs-lights .l-y { background: #febc2e; }
html body #settings-panel.mzs .mzs-lights .l-g { background: #28c840; }
html body #settings-panel.mzs .mzs-root-h { display: none; }
html body #settings-panel.mzs .mzs-search { position: relative; display: block; margin: 4px 2px 12px; }
html body #settings-panel.mzs .mzs-search svg { position: absolute; left: 9px; top: 50%; translate: 0 -50%; width: 14px; height: 14px; color: var(--mz-dim); }
html body #settings-panel.mzs .mzs-search input { width: 100%; height: 30px; border-radius: 8px; border: 0; background: rgba(190,220,235,.07); padding: 0 10px 0 29px; color: #e8f1f5; font: 13px 'Onest', sans-serif; outline: none; transition: background .2s, box-shadow .3s; }
html body #settings-panel.mzs .mzs-search input:focus { background: rgba(190,220,235,.1); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mz-a) 45%, transparent); }
html body #settings-panel.mzs .mzs-me { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; margin-bottom: 10px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; cursor: pointer; transition: background .2s; }
html body #settings-panel.mzs .mzs-me:hover { background: rgba(190,220,235,.05); }
html body #settings-panel.mzs .mzs-ava { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff;
  background: radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--mz-a) 80%, white), var(--mz-a) 55%, color-mix(in oklab, var(--mz-a) 50%, black)); }
html body #settings-panel.mzs .mzs-ava img { width: 100%; height: 100%; object-fit: cover; }
html body #settings-panel.mzs .mzs-me-t { flex: 1; min-width: 0; }
html body #settings-panel.mzs .mzs-me-t b { display: block; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #settings-panel.mzs .mzs-me-t span { display: block; color: var(--mz-dim); font-size: 12px; margin-top: 1px; }
html body #settings-panel.mzs .mzs-chev { display: none; width: 16px; height: 16px; color: var(--mz-dim); flex: none; margin-left: auto; }
/* разделы */
html body #settings-panel.mzs #settings-tabs:not(#mzx):not(#mzx):not(#mzx) {
  position: static !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important;
  background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
}
html body #settings-panel.mzs .settings-tab:not(#mzx):not(#mzx):not(#mzx):not(#mzx):not(#mzx) {
  height: 34px !important; min-height: 34px !important; justify-content: flex-start !important; gap: 10px !important; padding: 0 8px !important;
  border-radius: 8px !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--mz-t2) !important; background: none !important; box-shadow: none !important; width: 100%;
}
html body #settings-panel.mzs .settings-tab:not(#mzx):not(#mzx):not(#mzx):not(#mzx):not(#mzx):hover { color: #e8f1f5 !important; }
html body #settings-panel.mzs .settings-tab.active:not(#mzx):not(#mzx):not(#mzx):not(#mzx):not(#mzx) { background: var(--mz-a) !important; color: #fff !important; box-shadow: none !important; }
html body #settings-panel.mzs .mzs-tile { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset; }
html body #settings-panel.mzs .settings-tab.active .mzs-tile { box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
html body #settings-panel.mzs .mzs-tile svg { width: 13px !important; height: 13px !important; }
html body #settings-panel.mzs .mzs-foot { margin-top: 18px; padding: 0 8px; color: var(--mz-dim); font-size: 11.5px; line-height: 1.5; }
/* правая колонка */
html body #settings-panel.mzs #mzs-main { position: relative; flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px 40px; }
html body #settings-panel.mzs #mzs-main > * { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
html body #settings-panel.mzs .mzs-bar { height: 22px; }
html body #settings-panel.mzs .mzs-back { display: none; }
html body #settings-panel.mzs #mzs-h1 { font: 700 26px/1.15 'Unbounded', sans-serif; letter-spacing: -.01em; margin: 6px 0 4px; color: #e8f1f5; }
html body #settings-panel.mzs #mzs-lead { color: var(--mz-t2); margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; }
html body #settings-panel.mzs #mz-adv-row { margin-top: 18px !important; border-radius: 14px !important; background: #131a20 !important; box-shadow: 0 0 0 1px var(--mz-line) inset !important; border: 0 !important; }
/* группы */
html body #settings-panel.mzs .settings-section:not(#mzx) {
  position: relative; margin-top: 40px !important; padding: 6px 14px !important; gap: 0 !important;
  background: #131a20 !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 0 0 1px var(--mz-line) inset !important;
}
html body #settings-panel.mzs .settings-section .settings-label:not(#mzx) {
  position: absolute; top: -26px; left: 4px; margin: 0 !important;
  font: 500 10.5px 'Unbounded', sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--mz-dim) !important;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
html body #settings-panel.mzs .settings-section .settings-label:not(#mzx)::before { content: '// ' !important; opacity: .55; position: static !important; display: inline !important; width: auto !important; height: auto !important; background: none !important; margin: 0 !important; }
html body #settings-panel.mzs .settings-section .settings-note { margin: 8px 0 6px; font-size: 12px; color: var(--mz-dim); }
html body #settings-panel.mzs .settings-section .toggle-row:not(#mzx) { position: relative; min-height: 46px; height: auto !important; padding: 10px 0; font-size: 14px !important; color: #e8f1f5 !important; border: 0 !important; background: none !important; }
html body #settings-panel.mzs .settings-section .toggle-row + .toggle-row::before { content: ''; position: absolute; top: 0; left: 0; right: -14px; height: 1px; background: var(--mz-line); }

/* ── телефон: корневой список и раздел поверх ── */
@media (max-width: 900px) {
  html body #settings-panel#settings-panel.mzs { inset: 0 !important; top: 0 !important; left: 0 !important; transform: none !important; width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; background: #0c1115 !important; }
  html body #settings-panel.mzs #mzs-side { position: absolute; inset: 0; flex: none; width: 100%; border: 0; background: #0c1115; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px calc(24px + env(safe-area-inset-bottom, 0px)); transition: transform .5s cubic-bezier(.32,.72,0,1), filter .5s; }
  html body #settings-panel.mzs .mzs-lights { display: none; }
  html body #settings-panel.mzs .mzs-root-h { display: flex; align-items: center; justify-content: space-between; margin: 10px 4px 12px; }
  html body #settings-panel.mzs .mzs-root-h b { font: 700 30px 'Unbounded', sans-serif; }
  html body #settings-panel.mzs .mzs-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(190,220,235,.08); color: #e8f1f5; display: grid; place-items: center; }
  html body #settings-panel.mzs .mzs-x svg { width: 16px; height: 16px; }
  html body #settings-panel.mzs .mzs-search input { height: 38px; border-radius: 11px; font-size: 15px; padding-left: 34px; }
  html body #settings-panel.mzs .mzs-search svg { left: 12px; width: 16px; height: 16px; }
  html body #settings-panel.mzs .mzs-me { background: #131a20; border-radius: 14px; padding: 12px 14px; box-shadow: 0 0 0 1px var(--mz-line) inset; margin-bottom: 22px; }
  html body #settings-panel.mzs .mzs-me .mzs-ava { width: 50px; height: 50px; font-size: 16px; }
  html body #settings-panel.mzs .mzs-me-t b { font-size: 16px; }
  html body #settings-panel.mzs .mzs-chev { display: block; }
  html body #settings-panel.mzs #settings-tabs:not(#mzx):not(#mzx):not(#mzx) { gap: 0 !important; background: #131a20 !important; border-radius: 14px !important; box-shadow: 0 0 0 1px var(--mz-line) inset !important; overflow: hidden; }
  html body #settings-panel.mzs .settings-tab:not(#mzx):not(#mzx):not(#mzx):not(#mzx):not(#mzx) { position: relative; height: 50px !important; min-height: 50px !important; padding: 0 14px !important; gap: 13px !important; border-radius: 0 !important; font-size: 16px !important; color: #e8f1f5 !important; }
  html body #settings-panel.mzs .settings-tab.active:not(#mzx):not(#mzx):not(#mzx):not(#mzx):not(#mzx) { background: none !important; color: #e8f1f5 !important; }
  html body #settings-panel.mzs .settings-tab + .settings-tab::before { content: ''; position: absolute; top: 0; left: 51px; right: 0; height: 1px; background: var(--mz-line); }
  html body #settings-panel.mzs .mzs-tile { width: 29px; height: 29px; border-radius: 8px; }
  html body #settings-panel.mzs .mzs-tile svg { width: 16px !important; height: 16px !important; }
  html body #settings-panel.mzs #mzs-main { position: absolute; inset: 0; z-index: 3; padding: calc(env(safe-area-inset-top, 0px) + 4px) 16px calc(36px + env(safe-area-inset-bottom, 0px)); background: #0c1115;
    transform: translateX(102%); box-shadow: -20px 0 40px rgba(0,0,0,0); transition: transform .5s cubic-bezier(.32,.72,0,1), box-shadow .5s; }
  html body #settings-panel.mzs.mzs-pushed #mzs-main { transform: none; box-shadow: -20px 0 40px rgba(0,0,0,.45); }
  html body #settings-panel.mzs.mzs-pushed #mzs-side { transform: translateX(-28%); filter: brightness(.55); }
  html body #settings-panel.mzs .mzs-bar { height: 44px; display: flex; align-items: center; }
  html body #settings-panel.mzs .mzs-back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--mz-a); font: 500 16px 'Onest', sans-serif; padding: 0; }
  html body #settings-panel.mzs .mzs-back svg { width: 22px; height: 22px; }
  html body #settings-panel.mzs #mzs-h1 { font-size: 28px; }
}

/* ═══ ЭТАП 192 — полный плеер по макету Claude Design ═══ */
html body #exp-player { background-color: #07090b; isolation: isolate; }
html body #exp-player::before {
  content: ''; position: absolute; inset: -40px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 20% 40%, color-mix(in oklab, var(--mz-a) 70%, transparent), transparent 70%),
              radial-gradient(50% 60% at 80% 70%, color-mix(in oklab, var(--mz-a) 35%, #6d5bd0 20%), transparent 70%);
  filter: blur(40px) saturate(1.2); opacity: .5; transition: background 1s;
}
html body #exp-close:not(#mzx) {
  position: absolute; z-index: 6; top: 14px; right: 16px; width: 34px; height: 34px; border: 0; border-radius: 10px;
  display: grid; place-items: center; background: none; color: var(--mz-t2); font-size: 0; cursor: pointer; transition: background .2s, color .2s;
}
html body #exp-close:not(#mzx):hover { background: rgba(190,220,235,.07); color: #e8f1f5; }
html body #exp-close svg { transition: transform .5s cubic-bezier(.32,.72,0,1); }
html body #exp-close:hover svg { transform: translateY(2px); }
html body #exp-title:not(#mzx) { font: 700 20px/1.2 'Unbounded', sans-serif !important; letter-spacing: .02em !important; text-transform: none !important; color: #e8f1f5 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #exp-artist:not(#mzx) { color: var(--mz-t2) !important; margin-top: 6px; font-size: 14px !important; }
html body #exp-artist a { color: inherit !important; }
html body #exp-controls .px-play-btn:not(#mzx) { width: 56px !important; height: 56px !important; border-radius: 50% !important; background: #fff !important; color: #0b0f12 !important; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6) !important; border: 0 !important; }
html body #exp-controls .px-play-btn svg { width: 24px; height: 24px; }
html body #exp-btn-like.liked { color: #f0839c !important; }
html body #exp-btn-like svg { transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
html body #exp-btn-like.liked svg { animation: mzHeart .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes mzHeart { 0% { transform: scale(.6); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }

@media (min-width: 901px) {
  html body #exp-left:not(#mzx) {
    flex: 0 0 clamp(300px, 30vw, 420px) !important; width: auto !important; display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important; gap: 16px !important; padding: 40px 34px 90px !important; background: none !important; border: 0 !important;
  }
  html body #exp-cover-wrap:not(#mzx) { width: min(300px, 100%) !important; height: auto !important; aspect-ratio: 1; border-radius: 17px !important; box-shadow: 0 30px 70px -24px rgba(0,0,0,.9), 0 0 90px -20px color-mix(in oklab, var(--mz-a) 60%, transparent) !important; }
  html body #exp-cover-wrap img { border-radius: inherit; }
  html body #exp-track-info:not(#mzx) { text-align: center; max-width: 100%; margin: 6px 0 0 !important; }
  html body #exp-progress-wrap:not(#mzx) { order: 3; width: 100%; max-width: 340px; display: grid !important; grid-template-columns: 40px minmax(0,1fr) 40px; gap: 10px; align-items: center; font-size: 11.5px; color: var(--mz-dim); margin: 0 !important; }
  html body #exp-progress-wrap #exp-time-total { text-align: right; }
  html body #exp-controls:not(#mzx) { order: 4; gap: 14px !important; justify-content: center; }
  /* скорость, таймер сна и повтор — в нижнем плеере и меню звука */
  html body #exp-controls #btn-pb-speed, html body #exp-controls #btn-sleep-timer, html body #exp-controls #exp-btn-repeat { display: none !important; }
  html body #exp-right:not(#mzx) { padding: 16px 26px 0 10px !important; background: none !important; border: 0 !important; }
  html body #exp-tabs:not(#mzx):not(#mzx):not(#mzx) { background: rgba(0,0,0,.35) !important; align-self: flex-start; }
  html body #exp-tabs .exp-tab:not(#mzx):not(#mzx):not(#mzx):not(#mzx) { height: 31px !important; padding: 0 14px !important; font-size: 13px !important; }
  html body #exp-tabs .exp-tab svg { display: none; }
}
@media (max-width: 900px) {
  html body #exp-cover-wrap:not(#mzx) { border-radius: 18px !important; box-shadow: 0 30px 60px -24px rgba(0,0,0,.9), 0 0 80px -20px color-mix(in oklab, var(--mz-a) 60%, transparent) !important; }
  html body #exp-title:not(#mzx) { font-size: 19px !important; text-align: center; }
  html body #exp-track-info:not(#mzx) { text-align: center; }
  html body #exp-controls .px-play-btn:not(#mzx) { width: 62px !important; height: 62px !important; }
}

/* ═══ ЭТАП 192 — телефон по макету: плавающий док (мини-плеер + вкладки), стеклянные карточки ═══ */
@media (max-width: 900px) {
  html body { background: #0c1115 !important; }
  html body #mobile-nav:not(#mzx) {
    left: 10px !important; right: 10px !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important;
    border-radius: 22px !important; border: 0 !important; padding: 4px !important;
    background: rgba(14,19,24,.78) !important; -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
    box-shadow: 0 0 0 .5px rgba(255,255,255,.12) inset, 0 14px 36px -12px rgba(0,0,0,.7) !important;
  }
  html body #mobile-nav .mob-nav-btn { border-radius: 16px; transition: color .25s, background-color .3s; }
  html body #mobile-nav .mob-nav-btn.active { background: color-mix(in oklab, var(--mz-a) 18%, transparent); color: color-mix(in oklab, var(--mz-a) 55%, white) !important; }
  html body #mobile-nav .mob-nav-btn.active span { color: inherit !important; }
  html body #player-bar:not(#mzx) {
    left: 10px !important; right: 10px !important;
    bottom: calc(var(--mob-nav-h, 58px) + 16px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 18px !important; border: 0 !important;
    background: rgba(20,27,33,.82) !important; -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
    box-shadow: 0 0 0 .5px rgba(255,255,255,.12) inset, 0 14px 36px -12px rgba(0,0,0,.7) !important;
  }
  html body #player-bar #btn-play { background: var(--mz-a) !important; }
  html body #mobile-topbar:not(#mzx) { background: transparent !important; border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html body #content { padding-bottom: calc(var(--mob-nav-h, 58px) + 96px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ЭТАП 192b — текст на заливке акцентом читается и на светлых обложках (--mz-ui-on ставит 23-cover-color.js) */
html body #settings-panel.mzs .settings-tab.active:not(#mzx):not(#mzx):not(#mzx):not(#mzx):not(#mzx) { color: var(--mz-ui-on, #fff) !important; }
html body #mz-coll-head .ch-btn:not(.ghost), html body #btn-play, html body #view-karaoke .kx-primary { color: var(--mz-ui-on, #fff) !important; }
html body #settings-panel.mzs #settings-tabs:not(#mzx):not(#mzx):not(#mzx) { width: 100% !important; align-self: stretch; }

@media (min-width: 901px) { html body #exp-player #exp-left#exp-left:not(#mzx) { background: none !important; background-image: none !important; box-shadow: none !important; } }

/* ЭТАП 192e — название трека обычным регистром; жанры на телефоне сеткой в две колонки */
html body #player-title:not(#mzx) { text-transform: none !important; letter-spacing: 0 !important; }
@media (max-width: 900px) {
  #mz-search-home h3 { font: 700 11px/1.2 'Unbounded', sans-serif !important; letter-spacing: .2em; text-transform: uppercase; color: var(--mz-t2) !important; }
  #mz-search-home .msh-sec:has(.msh-tiles) .msh-nav { display: none !important; }
  #mz-search-home .msh-sec:has(.msh-tiles).more .msh-row { -webkit-mask-image: none; mask-image: none; }
  #mz-search-home .msh-row.msh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; padding: 0; }
  #mz-search-home .msh-tile { width: auto !important; height: 92px !important; border-radius: 14px; padding: 14px; }
  #mz-search-home .msh-tile .t { font: 700 15px 'Unbounded', sans-serif; }
  #mz-search-home .msh-tile img { width: 64px; height: 64px; right: -10px; bottom: -10px; }
}

/* ═══ ЭТАП 193 — главная по макету: «Недавно слушали», круглые артисты; на телефоне та же главная с баннерами ═══ */
#mz-home .mzh-rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
#mz-home .mzh-tr { display: grid; grid-template-columns: 44px minmax(0,1fr) 24px 44px; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 10px; cursor: pointer; transition: background .2s; }
#mz-home .mzh-tr:hover { background: rgba(190,220,235,.05); }
#mz-home .mzh-tr-c { position: relative; width: 44px; height: 44px; border-radius: 7px; overflow: hidden; background: #1a222a; }
#mz-home .mzh-tr-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
#mz-home .mzh-tr-t { min-width: 0; }
#mz-home .mzh-tr-t b { display: block; font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mz-home .mzh-tr-t span { display: block; color: var(--mz-dim, #64757f); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mz-home .mzh-tr-l { color: #f0839c; display: grid; place-items: center; }
#mz-home .mzh-tr-d { color: var(--mz-dim, #64757f); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
#mz-home .mzh-arts > div > div:first-child { border-radius: 50% !important; }
#mz-home .mzh-arts > div > span:last-child:empty { display: none; }

@media (max-width: 900px) {
  #mz-home.mz-m .mzh-hero { height: 340px !important; border-radius: 20px !important; }
  #mz-home.mz-m .mzh-tx { padding: 26px 22px 54px !important; justify-content: flex-start !important; gap: 10px !important; max-width: none !important; }
  #mz-home.mz-m .mzh-tx > span:first-child { font-size: 10.5px !important; }
  #mz-home.mz-m .mzh-tx > span:nth-child(2) { font-size: 34px !important; line-height: 1 !important; }
  #mz-home.mz-m .mzh-tx > span:nth-child(3) { font-size: 13.5px !important; max-width: 260px !important; }
  #mz-home.mz-m .mzh-tx > button { height: 44px !important; font-size: 14px !important; padding: 0 18px !important; border-radius: 12px !important; }
  #mz-home.mz-m .mzh-art { width: 112px !important; height: 112px !important; border-radius: 26px !important; right: 18px !important; top: auto !important; bottom: 22px !important; transform: none !important; }
  #mz-home.mz-m .mzh-art svg { width: 58px !important; height: 58px !important; }
  #mz-home.mz-m .mzh-moneta { width: 62% !important; opacity: .85; }
  #mz-home.mz-m .mzh-nav { display: none !important; }
  #mz-home.mz-m .mzh-dots { left: 22px !important; bottom: 18px !important; }
  #mz-home.mz-m .mzh-qgrid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #mz-home.mz-m .mzh-qgrid .mz-quick { padding: 12px !important; gap: 10px !important; }
  #mz-home.mz-m .mzh-qgrid .mz-quick > div > span:last-child { display: none; }
  #mz-home.mz-m .mzh-plgrid { display: flex !important; gap: 12px !important; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; scroll-snap-type: x mandatory; }
  #mz-home.mz-m .mzh-plgrid::-webkit-scrollbar { display: none; }
  #mz-home.mz-m .mzh-plgrid > div { flex: 0 0 132px; scroll-snap-align: start; }
  #mz-home.mz-m .mzh-rgrid { grid-template-columns: minmax(0,1fr); }
  #mz-home.mz-m .mzh-tr { grid-template-columns: 44px minmax(0,1fr) 24px; padding: 6px 0; }
  #mz-home.mz-m .mzh-tr-d { display: none; }
  #mz-home.mz-m .mzh-arts { gap: 16px !important; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  #mz-home.mz-m .mzh-arts::-webkit-scrollbar { display: none; }
  #mz-home.mz-m .mzh-arts > div { flex: none; }
  #mz-home.mz-m .mzh-arts > div > div:first-child { width: 112px !important; height: 112px !important; }
}

/* ═══ ЭТАП 194 — содержимое вкладок настроек по макету Claude Design ═══ */
/* плитки тем и стилей: полоски цветов сверху, подпись снизу, выбранная — рамка акцента и галочка */
html body #settings-panel.mzs :is(#theme-grid, #style-grid):not(#mzx) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important; gap: 10px !important; padding: 8px 0 !important; }
html body #settings-panel.mzs :is(.theme-tile, .style-tile):not(#mzx) {
  position: relative; padding: 6px !important; border-radius: 11px !important; border: 0 !important; background: #1a232b !important;
  box-shadow: 0 0 0 1px var(--mz-line) inset !important; cursor: pointer; text-align: left !important; min-height: 0 !important; height: auto !important;
  transition: box-shadow .3s, transform .5s cubic-bezier(.34,1.56,.64,1) !important; display: block !important;
}
html body #settings-panel.mzs :is(.theme-tile, .style-tile):not(#mzx):hover { transform: translateY(-2px); }
html body #settings-panel.mzs :is(.theme-tile, .style-tile):not(#mzx):active { transform: scale(.96); }
html body #settings-panel.mzs :is(.theme-tile, .style-tile).active:not(#mzx) { box-shadow: 0 0 0 2px var(--mz-a) inset !important; background: #1a232b !important; }
html body #settings-panel.mzs :is(.theme-tile, .style-tile).active::after {
  content: '✓'; position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #000;
  font: 700 10px/16px 'Onest', sans-serif; text-align: center; animation: mzPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mzPop { from { transform: scale(0); } }
html body #settings-panel.mzs :is(.theme-swatches, .style-tile-preview):not(#mzx) { display: flex !important; height: 38px !important; border-radius: 7px !important; overflow: hidden !important; gap: 0 !important; margin: 0 !important; width: auto !important; }
html body #settings-panel.mzs .theme-swatch:not(#mzx) { flex: 1 !important; width: auto !important; height: 100% !important; border-radius: 0 !important; border: 0 !important; margin: 0 !important; }
html body #settings-panel.mzs .theme-swatch:first-child:not(#mzx), html body #settings-panel.mzs .style-tile-preview > div:first-child { flex: 2 !important; }
html body #settings-panel.mzs :is(.theme-name, .style-tile-name):not(#mzx) {
  display: block; margin: 7px 3px 2px !important; font: 500 10.5px 'Unbounded', sans-serif !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: #e8f1f5 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left !important;
}
html body #settings-panel.mzs .style-tile-desc:not(#mzx) { margin: 0 3px 2px !important; font-size: 11px !important; color: var(--mz-dim) !important; text-align: left !important; }

/* кнопки: как .btn макета — 32 px, скругление 9, без капса */
html body #settings-panel.mzs .px-btn:not(#mzx):not(#mzx) {
  height: 32px !important; min-height: 32px !important; padding: 0 14px !important; border-radius: 9px !important; border: 0 !important;
  font: 600 13px 'Onest', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
  background: rgba(190,220,235,.08) !important; color: #e8f1f5 !important; box-shadow: none !important;
  transition: background-color .3s, transform .45s cubic-bezier(.34,1.56,.64,1) !important;
}
html body #settings-panel.mzs .px-btn:not(#mzx):not(#mzx):hover { background: rgba(190,220,235,.13) !important; }
html body #settings-panel.mzs .px-btn:not(#mzx):not(#mzx):active { transform: scale(.95); }
html body #settings-panel.mzs :is(.px-btn.accent-btn, .px-btn.active):not(#mzx):not(#mzx) { background: var(--mz-a) !important; color: var(--mz-ui-on, #fff) !important; }
html body #settings-panel.mzs .px-btn.danger-btn:not(#mzx):not(#mzx) { background: rgba(229,72,77,.14) !important; color: #ff8a8d !important; }
/* язык — сегменты */
html body #settings-panel.mzs div:has(> #lang-btn-ru) { display: inline-flex !important; gap: 0 !important; padding: 2px; border-radius: 9px; background: rgba(190,220,235,.08); box-shadow: 0 0 0 .5px var(--mz-line) inset; margin: 8px 0 !important; }
html body #settings-panel.mzs div:has(> #lang-btn-ru) .px-btn:not(#mzx):not(#mzx) { flex: none !important; height: 28px !important; min-height: 28px !important; padding: 0 14px !important; border-radius: 7px !important; background: none !important; color: var(--mz-t2) !important; }
html body #settings-panel.mzs div:has(> #lang-btn-ru) .px-btn.active:not(#mzx):not(#mzx) { background: #1a232b !important; color: #e8f1f5 !important; box-shadow: 0 0 0 .5px rgba(255,255,255,.08) inset, 0 2px 6px rgba(0,0,0,.35) !important; }

/* ползунки: дорожка 4 px с заливкой до значения (--p ставит 55-settings-shell.js), белый бегунок */
html body #settings-panel.mzs input[type=range]:not(#mzx) {
  -webkit-appearance: none; appearance: none; width: 180px !important; max-width: 46vw; height: 22px; margin: 0; padding: 0; background: transparent !important; border: 0 !important; cursor: pointer; --p: 50%;
}
html body #settings-panel.mzs input[type=range]:not(#mzx)::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; border: 0; background: linear-gradient(90deg, var(--mz-a) var(--p), rgba(190,220,235,.14) var(--p)); }
html body #settings-panel.mzs input[type=range]:not(#mzx)::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(190,220,235,.14); }
html body #settings-panel.mzs input[type=range]:not(#mzx)::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--mz-a); }
html body #settings-panel.mzs input[type=range]:not(#mzx)::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45), 0 0 0 .5px rgba(0,0,0,.2); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
html body #settings-panel.mzs input[type=range]:not(#mzx)::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
html body #settings-panel.mzs input[type=range]:not(#mzx):active::-webkit-slider-thumb { transform: scale(1.18); }
html body #settings-panel.mzs .lyset-val:not(#mzx), html body #settings-panel.mzs [id$="-val"]:not(#mzx) { font: 500 12px 'JetBrains Mono', monospace !important; color: var(--mz-t2) !important; min-width: 40px; text-align: right; }

/* переключатели — как iOS: 42×25 */
html body #settings-panel.mzs .px-toggle-track:not(#mzx) { width: 42px !important; height: 25px !important; border-radius: 13px !important; border: 0 !important; background: rgba(190,220,235,.14) !important; transition: background-color .35s !important; }
html body #settings-panel.mzs .px-toggle-track:not(#mzx)::after { top: 2px !important; left: 2px !important; width: 21px !important; height: 21px !important; border-radius: 11px !important; background: #fff !important; box-shadow: 0 2px 5px rgba(0,0,0,.35) !important; transition: transform .5s cubic-bezier(.34,1.56,.64,1) !important; }
html body #settings-panel.mzs .px-toggle input:checked + .px-toggle-track:not(#mzx) { background: var(--mz-a) !important; }
html body #settings-panel.mzs .px-toggle input:checked + .px-toggle-track:not(#mzx)::after { left: 2px !important; transform: translateX(17px); }

/* шрифты, эффекты, анимации — чипы */
html body #settings-panel.mzs :is(.lyset-font-btn, .lyf-btn, .lya-btn, .lyset-fx-btn, .lyset-anim-btn, .gui-font-btn):not(#mzx):not(#mzx) {
  height: auto !important; min-height: 32px !important; padding: 7px 13px !important; border-radius: 999px !important; border: 0 !important;
  background: #1a232b !important; box-shadow: 0 0 0 1px var(--mz-line) inset !important; color: var(--mz-t2) !important; text-transform: none !important;
}
html body #settings-panel.mzs :is(.lyset-font-btn, .lyf-btn, .lya-btn, .lyset-fx-btn, .lyset-anim-btn, .gui-font-btn).active:not(#mzx):not(#mzx) {
  background: color-mix(in oklab, var(--mz-a) 22%, #1a232b) !important; box-shadow: 0 0 0 1.5px var(--mz-a) inset !important; color: #e8f1f5 !important;
}
html body #settings-panel.mzs .lyset-font-grid:not(#mzx) { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 8px 0 !important; }
html body #settings-panel.mzs .lyset-sub:not(#mzx) { font: 500 10px 'Unbounded', sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--mz-dim) !important; margin: 14px 0 6px !important; }
/* поле цвета — круглый образец */
html body #settings-panel.mzs .gui-color-row:not(#mzx) { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
html body #settings-panel.mzs input[type=color]:not(#mzx) { width: 26px !important; height: 26px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; overflow: hidden; background: none !important; box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset; cursor: pointer; }
html body #settings-panel.mzs input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
html body #settings-panel.mzs input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
html body #settings-panel.mzs .gui-color-hex:not(#mzx) { flex: 1; font: 500 12px 'JetBrains Mono', monospace !important; color: var(--mz-t2) !important; }
/* поля ввода */
html body #settings-panel.mzs :is(input[type=text], input[type=password], input:not([type]), textarea, select).px-input:not(#mzx),
html body #settings-panel.mzs :is(input[type=text], input[type=password], textarea):not(#mzq):not(#mzx) {
  min-height: 34px; border-radius: 9px !important; border: 0 !important; background: rgba(190,220,235,.07) !important; color: #e8f1f5 !important;
  padding: 0 11px !important; font: 12.5px 'JetBrains Mono', monospace !important; outline: none; box-shadow: none !important;
}
html body #settings-panel.mzs textarea:not(#mzx) { padding: 10px 11px !important; }
html body #settings-panel.mzs :is(input[type=text], input[type=password], textarea):not(#mzx):focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--mz-a) 45%, transparent) !important; }

/* превью текста — карточка-сцена наверху «Текста» */
html body #settings-panel.mzs #lyset-preview:not(#mzx) {
  min-height: 150px; display: flex; align-items: center; padding: 26px 20px !important; margin: 8px 0 14px !important; border-radius: 14px !important; border: 0 !important;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--mz-a) 22%, #0b0f12), #080b0d 60%) !important; box-shadow: 0 0 0 1px var(--mz-line) inset !important;
}

/* профиль в «Аккаунте» */
html body #settings-panel.mzs .mzs-profile .settings-avatar-row:not(#mzx) { display: flex !important; align-items: center !important; gap: 16px !important; padding: 10px 0 14px !important; }
html body #settings-panel.mzs .mzs-profile .settings-avatar:not(#mzx) { width: 62px !important; height: 62px !important; border-radius: 50% !important; font-size: 20px !important;
  background: radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--mz-a) 80%, white), var(--mz-a) 55%, color-mix(in oklab, var(--mz-a) 50%, black)) !important; color: #fff !important; }
html body #settings-panel.mzs .mzs-profile #settings-username:not(#mzx) { flex: 1; min-width: 0; margin: 0 !important; font: 600 17px 'Onest', sans-serif !important; color: #e8f1f5 !important; letter-spacing: 0 !important; }
html body #settings-panel.mzs .mzs-profile .settings-avatar-actions:not(#mzx) { display: flex; gap: 8px; margin-left: auto; }

/* ЭТАП 194b — второй и следующие заголовки внутри одной группы — подзаголовки, а не наложение над карточкой */
html body #settings-panel.mzs .settings-section .settings-label ~ .settings-label:not(#mzx) {
  position: static !important; display: block; margin: 18px 0 6px !important; white-space: normal;
}
html body #settings-panel.mzs .settings-section .settings-label ~ .settings-label:not(#mzx)::before { content: none !important; }
html body #settings-panel.mzs button:not(.settings-tab):not(.mzs-me):not(#mzx) { text-transform: none !important; letter-spacing: 0 !important; }
html body #settings-panel.mzs .settings-section button:is(.kr-btn, .tg-link-btn, .key-btn, [class*="btn"]):not(.px-btn):not(.theme-tile):not(.style-tile):not(#mzx) { border-radius: 9px !important; }

/* ═══ ЭТАП 195 — экран MUZLO AI по макету: приветствие, подсказки, широкая строка ввода ═══ */
html body #mzai-panel #mzai-hello { display: none; }
html body #mzai-panel.mzai-empty #mzai-hello {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 9vh 20px 20px;
  animation: mzRise .6s cubic-bezier(.32,.72,0,1) both;
}
html body #mzai-hello .mzh-spark { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 8px;
  background: radial-gradient(circle at 40% 35%, #b7a6ff, #6c5ce7 60%, #3a2e8a); box-shadow: 0 0 50px -6px rgba(124,108,231,.75); animation: kxFloat 6s ease-in-out infinite; }
html body #mzai-hello h1 { margin: 0; font: 700 34px 'Unbounded', sans-serif; letter-spacing: -.01em; color: #e8f1f5; }
html body #mzai-hello p { margin: 0 0 12px; color: var(--mz-t2); font-size: 14px; }
html body #mzai-hello .mzh-sugs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 620px; }
html body #mzai-hello .mzh-sugs button { padding: 8px 14px; border: 0; border-radius: 999px; background: #1a232b; box-shadow: 0 0 0 1px var(--mz-line) inset;
  color: var(--mz-t2); font: 13px 'Onest', sans-serif; cursor: pointer; transition: color .2s, background-color .3s, transform .45s cubic-bezier(.34,1.56,.64,1); }
html body #mzai-hello .mzh-sugs button:hover { color: #e8f1f5; background: color-mix(in oklab, var(--mz-a) 18%, #1a232b); }
html body #mzai-hello .mzh-sugs button:active { transform: scale(.94); }
html body #mzai-panel #mzai-form { border-top: 0 !important; }
html body #mzai-panel #mzai-form textarea { border-radius: 16px !important; min-height: 52px; padding: 15px 18px !important; font-size: 15px !important;
  background: rgba(190,220,235,.07) !important; border: 0 !important; box-shadow: 0 0 0 1px var(--mz-line) inset !important; color: #e8f1f5 !important; }
html body #mzai-panel #mzai-form textarea:focus { box-shadow: 0 0 0 1px color-mix(in oklab, var(--mz-a) 60%, transparent) inset, 0 0 0 5px color-mix(in oklab, var(--mz-a) 22%, transparent) !important; }
html body #mzai-panel #mzai-form button { width: 44px !important; height: 44px !important; border-radius: 12px !important; background: var(--mz-a) !important; color: var(--mz-ui-on, #fff) !important; align-self: center; }
html body #mzai-btn.active { color: #e8f1f5 !important; background: color-mix(in oklab, var(--mz-a) 16%, transparent) !important; box-shadow: 0 0 0 1px color-mix(in oklab, var(--mz-a) 22%, transparent) inset; }
html body #mzai-btn.active svg { color: var(--mz-a); }

@media (min-width: 901px) {
  html body #mzai-panel:not(#mzx) {
    left: var(--mzai-left, 244px) !important; right: 0 !important; top: 0 !important; width: auto !important; max-width: none !important;
    height: calc(100% - var(--player-h, 76px)) !important; z-index: 110 !important;
    background: rgba(12,17,21,.9) !important; -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
    border: 0 !important; box-shadow: none !important;
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(.995);
    transition: opacity .25s ease, transform .5s cubic-bezier(.32,.72,0,1), visibility 0s linear .3s !important;
  }
  html body #mzai-panel.open:not(#mzx) { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .55s cubic-bezier(.32,.72,0,1), visibility 0s !important; }
  html body #mzai-panel #mzai-head { padding: 14px 22px 4px !important; justify-content: center !important; position: relative; }
  html body #mzai-panel #mzai-close { position: absolute; right: 18px; top: 12px; }
  html body #mzai-panel :is(#mzai-msgs, #mzai-form, .mzai-view > :not(#mzai-msgs):not(#mzai-hello)) { width: 100%; max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
  html body #mzai-panel #mzai-form { padding: 10px 0 22px !important; }
}

@media (min-width: 901px) {
  html body #mzai-panel #mzai-tabs:not(#mzx):not(#mzx):not(#mzx) { display: inline-flex !important; width: auto !important; align-self: center; margin: 6px auto 0 !important; }
  html body #mzai-panel .mzai-tab:not(#mzx):not(#mzx):not(#mzx):not(#mzx) { flex: none !important; }
  html body #mzai-panel #mzai-bar { border: 0 !important; display: flex; justify-content: center; }
  html body.mzai-on #sidebar .nav-btn.active:not(#mzx) { background: transparent !important; box-shadow: none !important; color: rgba(232,241,245,.6) !important; }
  html body.mzai-on #sidebar .nav-btn.active svg { color: inherit !important; }
  html body.mzai-on #sidebar .nav-btn.active .nav-mark { background: transparent !important; }
}

/* ═══ ЭТАП 196 — уведомления как в макете: стеклянная «пилюля» над плеером, значок слева ═══ */
html body #toast-container:not(#mzx) {
  position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; transform: translateX(-50%) !important;
  bottom: calc(var(--player-h, 76px) + 16px) !important; z-index: 100000 !important;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
}
html body #toast-container .toast:not(#mzx) {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 15px 9px 11px !important; margin: 0 !important;
  border-radius: 999px !important; border: 0 !important; background: rgba(30,38,45,.86) !important; color: #e8f1f5 !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 0 0 .5px rgba(255,255,255,.14) inset, 0 10px 30px rgba(0,0,0,.45) !important;
  font: 500 12.5px 'Onest', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
  opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .25s, transform .5s cubic-bezier(.34,1.56,.64,1) !important;
}
html body #toast-container .toast.show:not(#mzx) { opacity: 1; transform: none; }
html body #toast-container .toast.hide:not(#mzx) { opacity: 0; transform: translateY(8px) scale(.96); }
html body #toast-container .toast::before {
  content: '✓'; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: #3ecf8e; color: #04130b; font: 700 10px/18px 'Onest', sans-serif; text-align: center;
}
html body #toast-container .toast-error::before { content: '!'; background: #e5484d; color: #fff; }
html body #toast-container .toast-info::before { content: 'i'; background: var(--mz-a); color: var(--mz-ui-on, #fff); font-style: italic; }
@media (max-width: 900px) {
  html body #toast-container:not(#mzx) { bottom: calc(var(--mob-nav-h, 58px) + 96px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ЭТАП 196b — подписи кнопок «Аккаунта» были капсом в самом тексте; на телефоне окно настроек выше дока */
html body #settings-panel.mzs .settings-section[data-stab="account"] button:not(.theme-tile):not(#mzx) { text-transform: lowercase !important; }
html body #settings-panel.mzs .settings-section[data-stab="account"] button:not(.theme-tile)::first-letter { text-transform: uppercase; }
html body #settings-panel.mzs .mzs-profile #settings-username:not(#mzx) { text-transform: none !important; }
@media (max-width: 900px) { html body #settings-panel#settings-panel.mzs { z-index: 100002 !important; } }

/* ═══ ЭТАП 197 — баннеры главной из макета Claude Design (классы .h-*, вода — 56-water.js) ═══ */
:root{--spring:linear(0,.0193,.069,.1391,.2213,.3092,.3981,.4845,.5658,.6406,.7078,.7672,.8186,.8625,.8993,.9296,.9541,.9735,.9886,.9999,1.008,1.0137,1.0172,1.0192,1.0199,1.0197,1.0188,1.0175,1.0159,1.0142,1.0124,1.0107,1.009,1.0075,1.0061,1.0049,1.0038,1.0029,1.0022,1.0015,1);--spring-soft:linear(0,.0193,.0682,.1356,.2133,.2952,.377,.4558,.5296,.5974,.6585,.7129,.7606,.8021,.8377,.8681,.8937,.9151,.9329,.9476,.9595,.9692,.977,.9831,.988,.9917,.9946,.9968,.9984,.9996,1.0004,1.0009,1.0013,1.0014,1.0015,1.0015,1.0015,1.0014,1.0013,1.0011,1);--spring-pop:linear(0,.0295,.1052,.2104,.3311,.4564,.578,.6901,.7891,.8729,.941,.9938,1.0326,1.0591,1.075,1.0824,1.0832,1.0791,1.0717,1.0623,1.0519,1.0415,1.0316,1.0226,1.0148,1.0083,1.0031,.9992,.9963,.9945,.9934,.993,.9931,.9936,.9943,.9951,.996,.9968,.9977,.9984,1);--f-display:"Unbounded","Onest",system-ui,sans-serif}
#mz-home .hero{position:relative;overflow:hidden}
#mz-home .hero button{border:0;cursor:pointer;font-family:"Onest",sans-serif}
#mz-home .ava{display:grid;place-items:center;border-radius:50%;font-weight:700;color:#fff;background:radial-gradient(circle at 30% 25%,color-mix(in oklab,var(--mz-a) 80%,white),var(--mz-a) 55%,color-mix(in oklab,var(--mz-a) 50%,black))}
#mz-home .faces{display:flex;align-items:center}
#mz-home .live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.08em;color:#ff6b6b}
#mz-home .live i{width:7px;height:7px;border-radius:50%;background:#ff6b6b;animation:pulse 1.6s ease-in-out infinite}
#mz-home .hero{height:380px;border-radius:22px;background:#05090e;box-shadow:0 0 0 1px rgba(255,255,255,.07) inset}
#mz-home .h-track{display:flex;width:300%;height:100%;transition:transform .95s var(--spring-soft)}
#mz-home .h-slide{position:relative;width:33.3333%;height:100%;overflow:hidden;isolation:isolate}
#mz-home .h-slide canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#mz-home .h-wave{background:#05121a}
#mz-home .h-water{cursor:crosshair}
#mz-home .h-shade{position:absolute;left:0;top:0;bottom:0;width:62%;pointer-events:none;background:linear-gradient(90deg,var(--sh,rgba(5,9,14,.86)) 22%,color-mix(in srgb,var(--sh,rgba(5,9,14,.86)) 55%,transparent) 58%,transparent 92%);z-index:2}
#mz-home .h-tx{position:relative;z-index:4;height:100%;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 52px;max-width:600px;pointer-events:none}
#mz-home .h-tx > *{opacity:0;transform:translateX(-26px);transition:opacity .35s,transform .5s}
#mz-home .h-slide.on .h-tx > *{opacity:1;transform:none;transition:opacity .7s ease,transform 1s var(--spring-soft)}
#mz-home .h-slide.on .h-tx > *:nth-child(2){transition-delay:.07s}.h-slide.on .h-tx > *:nth-child(3){transition-delay:.14s}.h-slide.on .h-tx > *:nth-child(4){transition-delay:.21s}
#mz-home .h-eb{font-size:12px;letter-spacing:.24em;font-weight:600}
#mz-home .h-t{font-family:var(--f-display);font-weight:700;font-size:var(--ht1,64px);line-height:.94;letter-spacing:-.03em;--ht2:50px}
#mz-home .h-t-wave{background:linear-gradient(180deg,#fff,#9FD9E8);-webkit-background-clip:text;background-clip:text;color:transparent;animation:heroDrift 9s ease-in-out infinite alternate}
#mz-home .h-t-top{background:linear-gradient(180deg,#FFF6E0,#E8B44A);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes heroDrift{to{transform:translateY(-4px);letter-spacing:-.02em}}
#mz-home .h-s{font-size:16px;color:#93A7B4;max-width:360px;line-height:1.45}
#mz-home .h-s2{font-family:var(--f-display);font-weight:600;font-size:22px;color:#F2E4C9}
#mz-home .h-btn{pointer-events:auto;margin-top:6px;display:flex;align-items:center;gap:10px;width:fit-content;height:50px;padding:0 24px 0 20px;border-radius:14px;font-weight:600;font-size:15.5px;color:var(--bc);background:linear-gradient(180deg,var(--b1),var(--b2));box-shadow:0 14px 34px -12px var(--b2);transition:transform .5s var(--spring-pop),box-shadow .3s}
#mz-home .h-btn:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px var(--b2)}
#mz-home .h-btn:active{transform:scale(.95)}
#mz-home .h-ai{background:#0b0820}
#mz-home .h-art{position:absolute;z-index:3;right:9%;top:50%;width:210px;height:210px;margin-top:-105px;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 24px 40px rgba(20,10,60,.6))}
#mz-home .h-art .art{width:100%;height:100%}
#mz-home .h-slide:not(.on) .h-art{opacity:0;transform:scale(.8) rotate(-8deg)}
#mz-home .h-art{transition:opacity .6s,transform 1s var(--spring-pop)}
#mz-home .h-rain{z-index:3;pointer-events:none}
#mz-home .h-top{background:radial-gradient(120% 120% at 78% 46%,#3A2A12 0%,#221709 46%,#0B0703 100%)}
#mz-home .h-rays{position:absolute;inset:-20%;z-index:0;background:conic-gradient(from 200deg at 78% 10%,transparent 0deg,rgba(255,214,140,.16) 12deg,transparent 22deg,rgba(255,214,140,.1) 34deg,transparent 46deg,rgba(255,214,140,.12) 60deg,transparent 75deg);filter:blur(6px);animation:rays 14s ease-in-out infinite alternate}
@keyframes rays{to{transform:rotate(6deg) translateX(2%)}}
#mz-home .h-embers{z-index:3;pointer-events:none}
#mz-home .h-cut{position:absolute;right:0;top:0;bottom:0;width:46%;z-index:1}
#mz-home .h-cut img{position:absolute;right:4%;bottom:0;height:100%;max-width:94%;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 26px 46px rgba(0,0,0,.7));opacity:0;transform:scale(1.04);transition:opacity 1.6s ease,transform 6s ease}
#mz-home .h-cut img.on{opacity:1;transform:none}
#mz-home .h-slide.h-top::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(60% 80% at 80% 100%,rgba(255,170,60,.18),transparent 70%)}
#mz-home .h-dots{position:absolute;z-index:6;left:52px;bottom:22px;display:flex;gap:10px}
#mz-home .h-dots button{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.3);transition:width .5s var(--spring),background .3s}
#mz-home .h-dots button.on{width:26px;background:#fff}
#mz-home .h-nav{position:absolute;z-index:6;right:24px;bottom:20px;display:flex;gap:8px}
#mz-home .h-nav button{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;color:#fff;font-size:20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,transform .45s var(--spring-pop)}
#mz-home .h-nav button:hover{background:rgba(255,255,255,.16)}
#mz-home .h-nav button:active{transform:scale(.9)}
#mz-home .hero::after{z-index:5}
@keyframes mzSheen{0%{background-position:165% 0}62%{background-position:-65% 0}100%{background-position:-65% 0}}
@keyframes lightGlowQ{0%,100%{opacity:.5}50%{opacity:.95}}
#mz-home .h-ai{background:radial-gradient(120% 120% at 78% 45%,#241A4A 0%,#14112E 46%,#070611 100%)}
#mz-home .h-kar{background:radial-gradient(120% 120% at 75% 40%,#103247 0%,#0A1B28 45%,#05090E 100%)}
#mz-home .h-bands{position:absolute;left:0;right:0;bottom:0;height:200px;pointer-events:none;z-index:1}
#mz-home .h-bands i{position:absolute;left:-30%;width:160%;border-radius:50%;background:linear-gradient(90deg,transparent 0%,var(--b1) 22%,var(--b2) 50%,var(--b1) 78%,transparent 100%);background-size:200% 100%}
#mz-home .h-bands i:first-child{top:20%;height:120px;filter:blur(66px);opacity:.3;animation:waveDrift 20s ease-in-out infinite,waveHue 7s linear infinite}
#mz-home .h-bands i:last-child{top:34%;height:58px;filter:blur(28px);opacity:.42;background:linear-gradient(90deg,transparent 0%,var(--b2) 20%,var(--b3) 50%,var(--b2) 80%,transparent 100%);background-size:200% 100%;animation:waveDrift2 24s ease-in-out infinite,waveHue 7s linear infinite}
#mz-home .h-tile{position:absolute;z-index:3;right:10%;top:50%;width:190px;height:190px;margin-top:-95px;border-radius:34px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 35%,var(--t1),var(--t2) 55%,var(--t3));box-shadow:0 0 70px -8px var(--tg),inset 0 1px 0 rgba(255,255,255,.3);animation:softFloat 6s ease-in-out infinite;transition:opacity .6s,transform 1s var(--spring-pop)}
#mz-home .h-tile svg{width:104px;height:104px;position:relative;z-index:3;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
#mz-home .h-slide:not(.on) .h-tile{opacity:0}
#mz-home .mz-sheen{position:absolute;inset:0;pointer-events:none;z-index:2;mix-blend-mode:screen;opacity:.34;background:linear-gradient(112deg,rgba(90,200,240,0) 12%,rgba(90,200,240,.16) 30%,rgba(190,220,255,.34) 44%,rgba(225,238,255,.44) 50%,rgba(190,220,255,.34) 56%,rgba(168,130,252,.16) 70%,rgba(168,130,252,0) 88%);background-size:320% 100%;filter:blur(6px);animation:mzSheen 11s cubic-bezier(.45,0,.3,1) infinite,waveHue 9s linear infinite}
#mz-home .h-karv{position:absolute;z-index:3;right:6%;top:50%;transform:translateY(-50%);width:min(44%,440px);height:250px}
#mz-home .kv-mic{width:104px;height:104px;margin:0;right:auto;left:-2%;top:auto;bottom:-54px;border-radius:26px}
#mz-home .kv-mic svg{width:62px;height:62px}
#mz-home .kv-card{position:absolute;right:0;top:0;width:88%;padding:18px 20px;border-radius:20px;background:rgba(10,24,36,.55);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 30px 60px -20px rgba(0,0,0,.7);animation:softFloat 7s ease-in-out infinite reverse}
#mz-home .kv-top{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#93A7B4;margin-bottom:12px}
#mz-home .kv-lines{display:flex;flex-direction:column;gap:8px;font-family:var(--f-display);font-weight:700}
#mz-home .kv-l{font-size:13px;color:rgba(232,241,245,.28);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mz-home .kv-l.past{color:rgba(232,241,245,.45)}
#mz-home .kv-l.now{font-size:16px;color:transparent}
#mz-home .kv-l.now b{background:linear-gradient(90deg,#9BE8F8 50%,rgba(232,241,245,.35) 50%) 100% 0/200% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;animation:kvfill 4s linear infinite}
@keyframes kvfill{to{background-position:0 0}}
#mz-home .kv-foot{display:flex;align-items:center;gap:10px;margin-top:14px}
#mz-home .kv-foot .ava{width:24px;height:24px;font-size:9px;margin-left:-6px;box-shadow:0 0 0 2px #0a1824}
#mz-home .kv-foot .ava:first-child{margin-left:0}
#mz-home .kv-foot em{font-style:normal;font-size:12px;color:#93A7B4}
@keyframes eqb{to{height:100%}}
@keyframes float{50%{translate:0 -10px}}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
@keyframes heroDrift{to{transform:translateY(-4px);letter-spacing:-.02em}}
@keyframes waveDrift{0%{transform:translate3d(-6%,42%,0) rotate(-6deg) scaleX(1);border-radius:46% 54% 58% 42%/60% 62% 38% 40%;opacity:.55}25%{transform:translate3d(-1%,8%,0) rotate(3deg) scaleX(1.1);opacity:.85}50%{transform:translate3d(6%,-38%,0) rotate(6deg) scaleX(1.18);border-radius:40% 60% 55% 45%/55% 40% 60% 45%;opacity:1}75%{transform:translate3d(2%,6%,0) rotate(-2deg) scaleX(1.08);opacity:.85}100%{transform:translate3d(-6%,42%,0) rotate(-6deg) scaleX(1);opacity:.55}}
@keyframes waveDrift2{0%{transform:translate3d(5%,38%,0) rotate(5deg) scaleX(1.12);opacity:.6}33%{transform:translate3d(-2%,2%,0) rotate(-4deg) scaleX(1);opacity:.9}66%{transform:translate3d(-5%,-32%,0) rotate(4deg) scaleX(1.14);opacity:1}100%{transform:translate3d(5%,38%,0) rotate(5deg) scaleX(1.12);opacity:.6}}
@keyframes waveHue{from{background-position:0% 50%}to{background-position:200% 50%}}
@keyframes softFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes mzSheen{0%{background-position:165% 0}62%{background-position:-65% 0}100%{background-position:-65% 0}}
@media (max-width:900px){
#mz-home .hero{height:420px;border-radius:20px}
#mz-home .h-tx{padding:28px 22px 70px;justify-content:flex-start;max-width:none}
#mz-home .h-t{font-size:40px;--ht2:32px}
#mz-home .h-s{font-size:14px}
#mz-home .h-shade{width:100%;background:linear-gradient(180deg,var(--sh,rgba(5,9,14,.86)) 30%,transparent 75%)}
#mz-home .h-dots{left:22px}
#mz-home .h-nav{display:none}
#mz-home .h-tx > *{transform:none}
#mz-home .h-tile{width:110px;height:110px;margin:0;top:auto;bottom:22px;right:18px;border-radius:26px}
#mz-home .h-tile svg{width:60px;height:60px}
#mz-home .h-karv{width:auto;left:18px;right:18px;top:auto;bottom:56px;height:150px;transform:none}
#mz-home .kv-card{width:100%;padding:12px 14px}
#mz-home .kv-mic{display:none}
#mz-home .kv-l{font-size:11.5px}.kv-l.now{font-size:13.5px}
#mz-home .h-kar .h-s{display:none}
#mz-home.mz-m .mzh-hero{height:420px !important}
}

/* ═══ ЭТАП 197 — вода на экране «Моя волна» ═══ */
html body #view-wave .wave-ym-right { background: #05121a; }
html body #view-wave .wvs-water { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; cursor: crosshair; }
html body #view-wave .wvs-vig { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(46% 52% at 50% 46%, rgba(3,8,12,.55), rgba(3,8,12,0) 70%), linear-gradient(180deg, rgba(3,8,12,.35), transparent 30%, transparent 75%, rgba(3,8,12,.5)); }
html body #view-wave #wave-canvas { display: none !important; }
html body #view-wave .wave-ym-center { position: relative; z-index: 2; }
html body #view-wave .wave-ym-upcoming, html body #view-wave .wave-ym-loading { z-index: 3; }
html body #view-wave .wave-ym-center { pointer-events: none; }
html body #view-wave .wave-ym-center > * { pointer-events: auto; }

html body #view-wave .wave-ym-right::before, html body #view-wave .wave-ym-right::after { display: none !important; }

/* ═══════════ ЭТАП 198 — разделы настроек 1 в 1 по макету (57-settings-pages.js) ═══════════ */
#settings-panel.mzp-on #mzs-main > .settings-section:not(#mzx),
#settings-panel.mzp-on #mzs-main > .mzp-hide,
#settings-panel.mzp-on #mz-adv-row { display: none !important; }
body:not(.mz-adv-on) #settings-tabs .settings-tab[data-adv-tab] { display: none !important; }
#mzp-pages {
  --surf: rgba(190,220,235,.04); --surf2: rgba(190,220,235,.075); --line: var(--mz-line); --line2: rgba(190,220,235,.14);
  --dim: var(--mz-dim); --text2: var(--mz-t2); --accent: var(--mz-a); --danger: #e5484d; --r: 14px; --row-py: 12px;
  max-width: 640px; font-size: 14px; color: var(--text, #e6eef2);
}
#mzp-pages .mzp-page[hidden], #mzp-pages [hidden], #mzp-pages .mzp-empty, #mzp-pages .mzp-miss { display: none !important; }
body.mz-adv-on #mzp-pages [data-basic], body:not(.mz-adv-on) #mzp-pages [data-adv] { display: none !important; }
#settings-panel.mzs-searching #mzp-pages .mzp-more { display: none !important; }
#mzp-pages .grp-t { font-family: var(--f-display, inherit); font-weight: 500; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin: 22px 4px 8px; }
#mzp-pages .grp-t::before { content: "// "; opacity: .55; }
#mzp-pages .mzp-page > .mzp-g:first-child > .grp-t { margin-top: 4px; }
#mzp-pages .grp { background: var(--surf); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line) inset; overflow: hidden; }
#mzp-pages .grp-note { color: var(--dim); font-size: 12px; line-height: 1.5; margin: 8px 6px 0; }
#mzp-pages .row { position: relative; display: flex; align-items: center; gap: 12px; padding: var(--row-py) 14px; min-height: 46px; box-sizing: border-box; }
#mzp-pages .grp > * { position: relative; }
#mzp-pages .grp > * + *::before, #mzp-pages .grp > div > .row + .row::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--line); pointer-events: none; }
#mzp-pages .row.col { flex-direction: column; align-items: stretch; gap: 10px; }
#mzp-pages .row.wrap { flex-wrap: wrap; }
#mzp-pages .row.wrap .tx { min-width: 150px; }
#mzp-pages .row .tx { flex: 1; min-width: 0; }
#mzp-pages .row.col .tx { flex: none; }
#mzp-pages .tx b { display: block; font-weight: 500; font-size: 1em; color: var(--text, #e6eef2); }
#mzp-pages .tx > span { display: block; color: var(--dim); font-size: .86em; margin-top: 2px; line-height: 1.4; }
#mzp-pages .mono { font-family: var(--f-mono, ui-monospace, monospace); font-size: 11.5px; letter-spacing: .02em; }
#mzp-pages .row.btnrow, #mzp-pages .mzp-more { width: 100%; text-align: left; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transition: background .2s; }
#mzp-pages .row.btnrow:hover, #mzp-pages .mzp-more:hover { background: rgba(190,220,235,.04); }
#mzp-pages .row.btnrow:active { background: rgba(190,220,235,.07); }
#mzp-pages .go { color: var(--dim); width: 16px; height: 16px; flex: 0 0 auto; }
#mzp-pages .row.danger .tx b { color: var(--danger); }
#mzp-pages .val { font-family: var(--f-mono, ui-monospace, monospace); font-size: 12px; color: var(--text2); min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
#mzp-pages .beta { display: inline-block; font-size: 8.5px; letter-spacing: .12em; padding: 3px 6px 2px; border-radius: 5px; margin-left: 6px; vertical-align: 2px; font-weight: 600;
  background: color-mix(in oklab, var(--accent) 25%, transparent); color: color-mix(in oklab, var(--accent) 60%, white); }
/* переключатель */
#mzp-pages .tg { position: relative; flex: 0 0 auto; width: 42px; height: 25px; border: 0; padding: 0; border-radius: 13px; background: rgba(190,220,235,.14); cursor: pointer; transition: background-color .35s ease; }
#mzp-pages .tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 11px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.35); transition: transform .5s var(--spring, cubic-bezier(.34,1.56,.64,1)), width .25s; }
#mzp-pages .tg:active::after { width: 26px; }
#mzp-pages .tg[aria-checked="true"] { background: var(--accent); }
#mzp-pages .tg[aria-checked="true"]::after { transform: translateX(17px); }
#mzp-pages .tg[aria-checked="true"]:active::after { transform: translateX(12px); }
#mzp-pages .tg:disabled { opacity: .35; cursor: default; }
/* сегменты */
#mzp-pages .seg { position: relative; display: inline-flex; flex-wrap: wrap; padding: 2px; border-radius: 9px; background: rgba(190,220,235,.08); box-shadow: 0 0 0 .5px var(--line) inset; flex: 0 1 auto; max-width: 100%; }
#mzp-pages .seg button { position: relative; padding: 5px 11px; font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--text2); border: 0; background: none; border-radius: 7px; white-space: nowrap; cursor: pointer; transition: color .25s, background .3s, box-shadow .3s; }
#mzp-pages .seg button[aria-pressed="true"] { color: var(--text, #fff); background: rgba(190,220,235,.13); box-shadow: 0 0 0 .5px rgba(255,255,255,.08) inset, 0 2px 6px rgba(0,0,0,.35); }
/* чипы */
#mzp-pages .chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; border-radius: 0; background: none; box-shadow: none; }
#mzp-pages .chips button { flex: 0 0 auto; padding: 7px 13px; border: 0; border-radius: 999px; background: var(--surf2); box-shadow: 0 0 0 1px var(--line) inset; font-family: inherit; font-size: 13px; color: var(--text2); cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; }
#mzp-pages .chips button[aria-pressed="true"] { background: color-mix(in oklab, var(--accent) 22%, transparent); box-shadow: 0 0 0 1.5px var(--accent) inset; color: var(--text, #fff); }
/* ползунок */
#mzp-pages .rng { display: flex; align-items: center; gap: 10px; flex: 0 1 240px; min-width: 120px; }
#mzp-pages .rng input[type=range] { flex: 1; min-width: 0; margin: 0; }
/* цвета */
#mzp-pages .sws { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
#mzp-pages .swb { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; transition: transform .45s var(--spring-pop, ease), box-shadow .25s; }
#mzp-pages .swb:hover, #mzp-pages .pick:hover { transform: scale(1.12); }
#mzp-pages .swb[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg, #0c1115), 0 0 0 4px var(--c); }
#mzp-pages .pick { position: relative; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; cursor: pointer; background: conic-gradient(red, #ff0, lime, cyan, blue, #f0f, red); transition: transform .45s var(--spring-pop, ease); }
#settings-panel.mzs #mzp-pages .pick input[type=color]:not(#mzx):not(#mzx) { position: absolute; inset: -8px; width: auto; height: auto; opacity: 0; cursor: pointer; border: 0; padding: 0; }
#mzp-pages .acc-row { flex-wrap: wrap; }
/* кнопки */
#mzp-pages .acts { display: flex; gap: 8px; flex-wrap: wrap; }
#mzp-pages .btn { height: 32px; padding: 0 14px; border: 0; border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; background: var(--accent); color: var(--mz-ui-on, #fff); }
#mzp-pages .btn.ghost { background: rgba(190,220,235,.08); color: var(--text, #e6eef2); box-shadow: 0 0 0 1px var(--line) inset; }
#mzp-pages .btn.danger { color: var(--danger); }
/* режимы интерфейса */
#mzp-pages .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#mzp-pages .mode { position: relative; text-align: left; border: 0; border-radius: var(--r); padding: 10px; background: var(--surf); color: inherit; font: inherit; cursor: pointer; box-shadow: 0 0 0 1px var(--line) inset; transition: box-shadow .3s, transform .5s var(--spring-pop, ease); }
#mzp-pages .mode:active { transform: scale(.97); }
#mzp-pages .mode[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent) inset; }
#mzp-pages .mode b { display: block; font-weight: 600; margin: 10px 4px 2px; }
#mzp-pages .mode .d { display: block; color: var(--dim); font-size: 12px; margin: 0 4px 4px; line-height: 1.4; }
#mzp-pages .mini { position: relative; height: 84px; border-radius: 9px; overflow: hidden; display: flex; background: #0d1216; }
#mzp-pages .mini i { display: block; }
#mzp-pages .mini .ms { width: 26%; background: #090c0f; padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; box-sizing: border-box; }
#mzp-pages .mini .ms i { height: 4px; border-radius: 2px; background: #263039; }
#mzp-pages .mini .ms i:first-child { background: var(--accent); width: 70%; }
#mzp-pages .mini .mm { flex: 1; padding: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; align-content: start; }
#mzp-pages .mini .mm i { height: 22px; border-radius: 4px; background: #1a232b; }
#mzp-pages .mini.glass { background: linear-gradient(135deg, #1b2a36, #2a1f3d 60%, #12202a); }
#mzp-pages .mini.glass .ms { background: rgba(255,255,255,.05); }
#mzp-pages .mini.glass .mm i { background: rgba(255,255,255,.08); box-shadow: 0 0 0 .5px rgba(255,255,255,.12) inset; border-radius: 7px; }
#mzp-pages .mode .ck { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--mz-ui-on, #fff); font-size: 11px; display: grid; place-items: center; transform: scale(0); transition: transform .5s var(--spring-pop, ease); }
#mzp-pages .mode[aria-pressed="true"] .ck { transform: scale(1); }
/* «Больше настроек» */
#mzp-pages .mzp-more { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px 14px; border-radius: var(--r); background: var(--surf); box-shadow: 0 0 0 1px var(--line) inset; }
#mzp-pages .mzp-more .tx { flex: 1; }
#mzp-pages .mzp-more .mzs-tile { flex: 0 0 auto; }
/* перенесённые блоки */
#mzp-pages .mzp-move.pad, #mzp-pages .mzp-raw.pad { padding: 12px 14px; }
#mzp-pages .mzp-move > .settings-section:not(#mzx) { display: block !important; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
#mzp-pages .mzp-move > .settings-section > .settings-label:first-child { display: none; }
#mzp-pages .mzp-raw > .settings-label, #mzp-pages .mzp-move .settings-label { display: block; position: static; margin: 14px 0 8px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
#mzp-pages .mzp-raw > .settings-label:first-child { margin-top: 0; }
#mzp-pages .mzp-raw > .settings-note:first-child, #mzp-pages .mzp-raw > .api-hint { color: var(--dim); font-size: 12.5px; line-height: 1.5; margin: 0 0 10px; }
#mzp-pages #theme-grid, #mzp-pages #style-grid, #mzp-pages .viz-preset-grid { margin: 0; }
#mzp-pages .mzp-move.code textarea { width: 100%; min-height: 110px; box-sizing: border-box; font-family: var(--f-mono, ui-monospace, monospace); font-size: 12px; }
#mzp-pages .mzp-profile { padding: 14px; }
#mzp-pages .mzp-profile .settings-avatar-row { margin: 0; }
#mzp-pages .lyprev #lyset-preview { margin: 0 0 4px; border-radius: var(--r); }
#mzp-pages .row > .mzp-move { flex: 1; }
@media (max-width: 760px) {
  #mzp-pages { max-width: none; }
  #mzp-pages .modes { gap: 10px; }
  #mzp-pages .mini { height: 70px; }
  #mzp-pages .row:has(> .rng), #mzp-pages .row:has(> .seg) { flex-wrap: wrap; }
  #mzp-pages .row:has(> .rng) .tx { flex: 1 1 100%; }
  #mzp-pages .rng { flex: 1 1 100%; }
}
html body #settings-panel #mzp-pages .seg > button:not(#mzx):not(#mzx) { padding: 5px 11px !important; min-height: 0 !important; height: auto !important; font-size: 12.5px !important; }
html body #settings-panel #mzp-pages .chips > button:not(#mzx):not(#mzx) { font-size: 13px !important; }
html body #settings-panel #mzp-pages :is(.px-btn, .accent-btn, .danger-btn, .mini-btn):not(#mzx):not(#mzx):not(#mzx) {
  min-height: 32px !important; height: 32px !important; padding: 0 14px !important; border-radius: 9px !important;
  font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; }
html body #settings-panel #mzp-pages .mini-btn:not(#mzx):not(#mzx):not(#mzx) { background: rgba(190,220,235,.08) !important; color: var(--text, #e6eef2) !important; }
html body #settings-panel #mzp-pages .danger-btn:not(#mzx):not(#mzx):not(#mzx) { background: rgba(229,72,77,.12) !important; color: #e5484d !important; }
#mzp-pages .mzp-page > .mzp-g:first-child > .grp-t, #mzp-pages .mzp-page > .mzp-g:first-child > .grp { margin-top: 18px; }
#mzp-pages .mzp-page > .mzp-g:first-child > .grp-t + .grp, #mzp-pages .mzp-page > .mzp-g:first-child > .modes { margin-top: 0; }
#mzp-pages .mzp-profile .settings-avatar-row { display: flex; align-items: center; gap: 14px; }
html body #settings-panel #mzp-pages #settings-username:not(#mzx) { flex: 1; font-size: 16px !important; font-weight: 600; color: var(--text, #e6eef2) !important; margin: 0 !important; letter-spacing: 0 !important; text-transform: none !important; }
#mzp-pages .mzp-profile .settings-avatar-actions { display: flex; gap: 8px; }
#mzp-pages .mzp-raw .settings-label + * { margin-top: 0; }
html body #settings-panel #mzp-pages .pshapes .viz-preset-grid:not(#mzx) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)) !important; gap: 8px !important; }
html body #settings-panel #mzp-pages .pt-shape-card:not(#mzx) { aspect-ratio: auto !important; height: 66px !important; min-height: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 18px; border-radius: 11px !important; }
html body #settings-panel #mzp-pages .pt-shape-card span { font-size: 11px; }
#mzp-pages .mzp-move:has(> #stem-ui[style*="none"]) { display: none; }
html body #settings-panel.mzs #settings-tabs .settings-tab .mzs-chev:not(#mzx) { margin-left: auto !important; }
html body #settings-panel.mzs #mzp-pages .rng:not(#mzx) { flex-basis: 240px; }
@media (max-width: 760px) { html body #settings-panel.mzs #mzp-pages .rng:not(#mzx) { flex: 1 1 100% !important; } }

/* ═══ ЭТАП 199 — баннер «Моя волна» целиком в цвет обложки (вода, W, фон, текст, кнопка); поиск из верхней панели убран.
   Цвет — тот же, что публикует 33-tint.js для этого баннера (--mz-tint-rgb внутри слайда), без него — акцент темы. ═══ */
html body #mz-topbar .mzt-search { display: none !important; }
#mz-home .h-wave { --mzw: var(--mz-a); background: color-mix(in oklab, var(--mzw) 12%, #03080c); }
html.mz-tone #mz-home .h-wave { --mzw: rgb(var(--mz-tint-rgb)); }
#mz-home .h-wave .h-eb { color: color-mix(in oklab, var(--mzw) 70%, white) !important; }
#mz-home .h-wave .h-t-wave { background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--mzw) 50%, white)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
#mz-home .h-wave .h-s { color: color-mix(in oklab, var(--mzw) 22%, #b8c6cd) !important; }
#mz-home .h-wave .h-btn { --b1: color-mix(in oklab, var(--mzw) 60%, white) !important; --b2: var(--mzw) !important; --bc: color-mix(in oklab, var(--mzw) 15%, #04080b) !important; }
#mz-home .h-wave .h-shade { background: linear-gradient(90deg, color-mix(in oklab, var(--mzw) 10%, rgba(3,8,12,.82)) 0%, rgba(3,8,12,.35) 45%, transparent 75%) !important; }
/* шапка таблицы треков в «Коллекции» (54-shell.js) */
html body #view-collection .mz-th-row { position: relative; height: 26px; margin: 4px 0 6px; border-bottom: 1px solid var(--mz-line); color: var(--mz-dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
html body #view-collection .mz-th-row span { position: absolute; top: 4px; white-space: nowrap; }
html body #view-collection .mz-th-row .n, html body #view-collection .mz-th-row .d { text-align: center; }
html body #view-collection .mz-th-row svg { vertical-align: -2px; }
@media (max-width: 760px) { html body #view-collection .mz-th-row { display: none; } }
/* как в макете: длительность видна всегда, остальные кнопки строки — по наведению */
@media (min-width: 761px) {
  html body .ap-track-row .ap-tr-actions { opacity: 1 !important; }
  html body .ap-track-row .ap-tr-actions > :not(.ap-tr-dur):not(.liked) { opacity: 0; transition: opacity .2s; }
  html body .ap-track-row:hover .ap-tr-actions > *, html body .ap-track-row.playing .ap-tr-actions > * { opacity: 1; }
  html body .ap-track-row .ap-tr-dur { color: var(--mz-dim); font-variant-numeric: tabular-nums; }
}
/* ЭТАП 200c — у строк треков колонки действий фиксированные: без кнопки «скачать» строка не съезжает; три точки видны всегда */
@media (min-width: 761px) {
  html body .ap-track-row .ap-tr-actions { display: grid !important; grid-template-columns: 54px 32px 46px 32px 32px; align-items: center; justify-items: center; gap: 2px; flex: 0 0 auto; }
  html body .ap-track-row .ap-tr-actions > .ap-tr-rate { grid-column: 1; }
  html body .ap-track-row .ap-tr-actions > .ap-tr-like { grid-column: 2; }
  html body .ap-track-row .ap-tr-actions > .ap-tr-dur { grid-column: 3; justify-self: end; }
  html body .ap-track-row .ap-tr-actions > .ap-tr-dl { grid-column: 4; }
  html body .ap-track-row .ap-tr-actions > .track-dots-btn { grid-column: 5; opacity: 1 !important; }
  html body .ap-track-row .ap-tr-actions > :not(.ap-tr-dur):not(.liked):not(.track-dots-btn) { opacity: 0; }
  html body .ap-track-row:hover .ap-tr-actions > *, html body .ap-track-row.playing .ap-tr-actions > * { opacity: 1; }
}

/* ═══ ЭТАП 202 — сверка с макетом ═══ */
/* заголовки баннеров — дисплейный шрифт макета */
html body #mz-home .h-t { font-family: 'Unbounded', var(--f-display, sans-serif) !important; }
/* «Мне нравится»: «Скачать» переехало в шапку, старая плашка над треками не нужна */
@media (min-width: 761px) { html body #view-collection.mz-ch-tracks .coll-header { display: none !important; } }
/* поиск — поле во всю ширину с подсветкой акцентом, как в макете */
html body #view-search #search-ym-wrap, html body #view-search .search-input-wrap { max-width: none !important; width: 100% !important; }
html body #view-search #search-ym-input:focus { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--mz-a) 70%, transparent), 0 0 26px -6px var(--mz-a) !important; }
/* волна: «Дальше» — список под карточкой трека по центру */
@media (min-width: 761px) {
  html body #view-wave .wave-ym-upcoming { position: absolute !important; right: auto !important; top: auto !important; left: 50% !important; bottom: 22px !important; transform: translateX(-50%); width: min(480px, 86%) !important; max-width: none !important; display: flex; flex-direction: column; gap: 2px; }
  html body #view-wave .wave-ym-upcoming:not(:empty)::before { content: "Дальше"; font: 500 10.5px 'Unbounded', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--mz-dim); margin: 0 6px 6px; }
  html body #view-wave .wave-ym-upcoming .wave-up-item { width: 100% !important; box-sizing: border-box; background: rgba(190,220,235,.04) !important; border-radius: 10px !important; }
}

/* ═══ ЭТАП 205 — MUZLO AI на компьютере — полноценная вкладка: до плеера без щели, непрозрачная, без крестика; AI убран с экрана волны ═══ */
@media (min-width: 901px) {
  html body #mzai-panel:not(#mzx):not(#mzx) { height: auto !important; bottom: var(--mzai-bottom, var(--player-h, 76px)) !important; background: var(--bg, #0c1115) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html body #mzai-panel #mzai-close { display: none !important; }
  html body.mzai-on #mzai-btn:not(#mzx) { background: color-mix(in oklab, var(--mz-a) 14%, transparent) !important; color: #e8f1f5 !important; }
}
html body #view-wave #mzai-wave { display: none !important; }

@media (min-width: 901px) {
  html body.mzai-on #sidebar #px-nav #mzai-btn:not(#mzx):not(#mzx) { background: color-mix(in oklab, var(--mz-a) 14%, transparent) !important; color: #e8f1f5 !important; box-shadow: 0 0 0 1px color-mix(in oklab, var(--mz-a) 30%, transparent) inset !important; }
}

/* ЭТАП 207 — логотип на экране входа: холст 128x128 под координаты drawBurningW, показываем целиком */
html body #auth-canvas { width: 64px !important; height: 64px !important; border-radius: 0 !important; }

/* ═══ ЭТАП 213: понятные состояния кнопок, эквалайзер, плагины, поддержка ═══ */
html body #settings-panel #mzp-pages .chips > button[aria-pressed]:not(#mzx):not(#mzx) { transition: background .15s, color .15s, box-shadow .15s; }
html body #settings-panel #mzp-pages .chips > button[aria-pressed="false"]:not(#mzx):not(#mzx) { background: transparent !important; color: var(--text2, #9aa7ae) !important; box-shadow: 0 0 0 1px var(--line, rgba(255,255,255,.12)) inset !important; }
html body #settings-panel #mzp-pages .chips > button[aria-pressed="true"]:not(#mzx):not(#mzx) { background: var(--accent) !important; color: var(--on-accent, #111) !important; box-shadow: none !important; font-weight: 600 !important; }
html body #settings-panel #mzp-pages .chips > button[aria-pressed="true"]:not(#mzx):not(#mzx)::before { content: "✓"; margin-right: 6px; font-weight: 800; }
html body #settings-panel #mzp-pages .seg > button[aria-pressed="true"]:not(#mzx):not(#mzx) { background: var(--accent) !important; color: var(--on-accent, #111) !important; font-weight: 600 !important; box-shadow: none !important; }
html body #settings-panel #mzp-pages .seg > button[aria-pressed="false"]:not(#mzx):not(#mzx) { color: var(--text2, #9aa7ae) !important; }

/* эквалайзер */
#mzp-pages .eqbox { padding: 0 !important; }
.mzeq { display: grid; gap: 14px; padding: 14px 16px 16px; }
.mzeq-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mzeq-t b { display: block; font-size: 14px; font-weight: 600; }
.mzeq-t span { font-size: 12px; color: var(--text2, #9aa7ae); }
.mzeq-presets { display: flex; flex-wrap: wrap; gap: 6px; }
html body #settings-panel .mzeq-p:not(#mzx):not(#mzx) { height: 28px; padding: 0 12px; border: 0; border-radius: 99px; font: 500 12.5px/28px inherit; font-family: inherit; cursor: pointer; background: transparent; color: var(--text2, #9aa7ae); box-shadow: 0 0 0 1px var(--line, rgba(255,255,255,.12)) inset; }
html body #settings-panel .mzeq-p:not(#mzx):not(#mzx):hover { color: var(--text, #fff); }
html body #settings-panel .mzeq-p[aria-pressed="true"]:not(#mzx):not(#mzx) { background: var(--accent); color: var(--on-accent, #111); box-shadow: none; font-weight: 600; }
.mzeq-bands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 10px 0 2px; border-radius: 12px; background: rgba(255,255,255,.025); }
.mzeq-band { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mzeq-val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text, #e6eef2); min-height: 16px; }
.mzeq-hz { font-size: 11px; color: var(--text2, #9aa7ae); font-variant-numeric: tabular-nums; }
.mzeq-track { position: relative; height: 132px; width: 28px; display: flex; justify-content: center; }
.mzeq-track i { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 2px; background: rgba(255,255,255,.08); }
.mzeq-track i::after { content: ""; position: absolute; left: -5px; right: -5px; top: 50%; height: 1px; background: rgba(255,255,255,.22); }
html body #settings-panel .mzeq-track input[type=range]:not(#mzx):not(#mzx):not(#mzx) { position: relative; writing-mode: vertical-lr !important; direction: rtl !important; width: 28px !important; height: 132px !important; min-height: 132px !important; max-height: none !important; flex: none !important; margin: 0; padding: 0; background: transparent !important; -webkit-appearance: none; appearance: none; cursor: pointer; box-shadow: none !important; border: 0 !important; }
.mzeq-track input[type=range]::-webkit-slider-runnable-track { width: 4px; background: transparent; border: 0; }
.mzeq-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg2, #14161a); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.mzeq-track input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg2, #14161a); }
.mzeq-track input[type=range]::-moz-range-track { background: transparent; }
.mzeq.off .mzeq-bands { opacity: .45; }
.mzeq.off .mzeq-track input[type=range] { cursor: default; }

/* плагины */
.mzpl-list { padding: 0 !important; }
.mzpl { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; }
.mzpl-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--c); }
.mzpl-ic svg { width: 24px; height: 24px; }
.mzpl-tx b { display: block; font-size: 14px; font-weight: 600; }
.mzpl-tx > span { display: block; font-size: 12.5px; color: var(--text2, #9aa7ae); line-height: 1.45; margin-top: 2px; }
.mzpl-meta { font-size: 11px; color: var(--text3, #6f7c84); margin-top: 6px; }
.mzpl-act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
@media (max-width: 560px) { .mzpl { grid-template-columns: 44px minmax(0, 1fr); } .mzpl-act { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; } }

/* поддержка */
.mzsup-mail { color: var(--accent); text-decoration: none; }
.mzsup-frame-wrap { padding: 0 !important; overflow: hidden; }
.mzsup-frame { display: block; width: 100%; height: 760px; border: 0; background: transparent; color-scheme: dark; }
html body .mzpro li i:not(#mzx) { background: var(--accent); color: var(--on-accent, #111); }

/* ═══ ЭТАП 218: полосы баннера без живого blur — мягкий градиент + сдвиг transform ═══ */
#mz-home .h-bands i:first-child, #mz-home .h-bands i:last-child { filter: none !important; background-size: 100% 100% !important; animation: mzBandDrift 18s ease-in-out infinite alternate !important; }
#mz-home .h-bands i:first-child { top: 4% !important; height: 190px !important; background: radial-gradient(50% 50% at 50% 50%, var(--b2) 0%, var(--b1) 38%, transparent 72%) !important; }
#mz-home .h-bands i:last-child { top: 26% !important; height: 100px !important; background: radial-gradient(50% 50% at 50% 50%, var(--b3) 0%, var(--b2) 34%, transparent 70%) !important; animation-duration: 13s !important; animation-direction: alternate-reverse !important; }
@keyframes mzBandDrift { from { transform: translate3d(-7%, 0, 0) scaleX(1); } to { transform: translate3d(7%, 0, 0) scaleX(1.08); } }
@media (prefers-reduced-motion: reduce) { #mz-home .h-bands i { animation: none !important; } }