:root {
  --bg: #07070c;
  --bg2: #0c0c14;
  --surface: rgba(255, 255, 255, 0.035);
  --surface2: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border2: rgba(255, 255, 255, 0.16);
  --text: #f4f4f8;
  --muted: #8f8fa3;
  --pink: #ffd400;   /* жовтий акцент з логотипу */
  --violet: #2b7fff; /* синій з логотипу */
  --cyan: #4cc9ff;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #fb7185;
  --grad: linear-gradient(120deg, #2b7fff, #00c2ff);
  --grad-gold: linear-gradient(120deg, #fff3a0, #ffd400 45%, #ffb300);
  --radius: 20px;
  --font-display: 'Unbounded', 'Manrope', sans-serif;
  --font-body: 'Manrope', -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before, body::after {
  content: '';
  position: fixed;
  z-index: -1;
  width: 60vw; height: 60vw;
  max-width: 800px; max-height: 800px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  pointer-events: none;
  animation: drift 24s ease-in-out infinite alternate;
}
body::before { top: -25vw; left: -20vw; background: radial-gradient(circle, var(--violet), transparent 65%); }
body::after { bottom: -30vw; right: -20vw; background: radial-gradient(circle, var(--pink), transparent 65%); animation-delay: -12s; }

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(6vw, 4vw) scale(1.15); }
}

a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 700; }
h2 { font-size: 15px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; margin: 34px 0 14px; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px 80px; }
.wrap.narrow { max-width: 560px; }

/* ---------- Nav ---------- */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0;
}
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-decoration: none;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.logo .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 18px var(--pink);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1);} 50% { opacity: .55; transform: scale(.8);} }

.nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-links a, .nav-links button {
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: none; cursor: pointer;
  transition: 0.2s;
}
.nav-links a:hover, .nav-links button:hover { color: var(--text); background: var(--surface2); }
.nav-links a.active { color: var(--text); border-color: var(--border2); background: var(--surface); }
.nav-links .accent { color: var(--text); background: var(--grad); }
.nav-links .accent:hover { filter: brightness(1.1); }

.logo-img { height: 84px; width: auto; display: block; filter: drop-shadow(0 6px 18px rgba(43,127,255,.5)); transition: .25s; }
.logo:hover .logo-img { transform: scale(1.06) rotate(-3deg); }
.nav { padding: 10px 0; }

.hero-logo-wrap { position: relative; width: min(380px, 70vw); aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 auto; margin: 0 auto; }
.hero-logo { position: relative; z-index: 2; width: 82%; height: auto; filter: drop-shadow(0 24px 60px rgba(43,127,255,.6)); animation: float 6s ease-in-out infinite; }
.ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.ring-1 { background: conic-gradient(from 0deg, transparent 0 60%, rgba(255,212,0,.9) 75%, transparent 90%); mask: radial-gradient(circle, transparent 66%, #000 67%, #000 70%, transparent 71%); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 70%, transparent 71%); animation: spin 7s linear infinite; }
.ring-2 { inset: 6%; background: conic-gradient(from 180deg, transparent 0 55%, rgba(43,127,255,.9) 72%, transparent 88%); mask: radial-gradient(circle, transparent 64%, #000 65%, #000 67%, transparent 68%); -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 67%, transparent 68%); animation: spin 11s linear infinite reverse; }
.hero-logo-wrap::before { content: ''; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(43,127,255,.45), transparent 70%); filter: blur(24px); animation: pulse 3s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }

.avatar-pick { position: relative; cursor: pointer; display: inline-block; margin: 0; }
.avatar-pick .avatar { display: grid; place-items: center; }
.avatar-pick [hidden] { display: none !important; }
.avatar-pick-hint { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--violet); color: #fff; white-space: nowrap; }
.hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.hero-inner > div:first-child { flex: 1 1 380px; }

/* ---------- Founder ---------- */
.founder {
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(43,127,255,.14), rgba(255,212,0,.08) 60%, transparent);
}
.founder-img { width: 168px; height: 168px; border-radius: 32px; object-fit: cover; object-position: top; background: radial-gradient(circle at 50% 30%, #2b7fff, #0a1633 75%); border: 2px solid rgba(255,212,0,.5); box-shadow: 0 20px 50px -20px rgba(43,127,255,.9), 0 0 0 6px rgba(255,212,0,.08); }
span.founder-img { display: grid; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(3,3,8,.88); backdrop-filter: blur(8px); cursor: zoom-out; padding: 24px; }
.lightbox img { max-width: min(90vw, 720px); max-height: 85vh; border-radius: 24px; box-shadow: 0 40px 100px -20px rgba(43,127,255,.6); animation: modal-in .25s ease; }
img.avatar, img.founder-img { cursor: zoom-in; }
[hidden] { display: none !important; }
/* ---------- Channel badges ---------- */
.channels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chan { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 12px; font-size: 13px; font-weight: 700; text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,.12); transition: .2s; }
.chan svg { width: 18px; height: 18px; fill: #fff; }
.chan:hover { transform: translateY(-2px); filter: brightness(1.12); }
.chan-youtube { background: #e62117; }
.chan-telegram { background: #229ed9; }
.chan-spotify { background: #1db954; color: #04210f; } .chan-spotify svg { fill: #04210f; }
.chan-apple { background: linear-gradient(135deg, #fa2d48, #fb5c74); }
.chan-tiktok { background: #111; border-color: #fe2c55; box-shadow: inset 0 0 0 1px #25f4ee; }
.chan-ytmusic { background: #ff0033; }
.chan-soundcloud { background: #ff5500; }
.chan-website { background: var(--grad); }
.chan-instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }

/* ---------- Promo ---------- */
.promo { position: relative; display: block; margin: 34px 0 10px; padding: 26px 28px; border-radius: 24px; text-decoration: none; overflow: hidden; border: 1px dashed rgba(255,212,0,.5); background: linear-gradient(120deg, rgba(43,127,255,.18), rgba(255,212,0,.14)); transition: .25s; }
.promo:hover { border-style: solid; transform: translateY(-2px); box-shadow: 0 30px 60px -30px rgba(255,212,0,.6); }
.promo b { display: block; font-family: var(--font-display); font-size: 24px; margin: 6px 0 8px; }
.promo > span { display: block; color: var(--muted); max-width: 640px; }
.promo .cta { margin-top: 12px; font-weight: 800; color: var(--pink); }
.promo-tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Admin stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 8px 0 18px; }
.stat-card { padding: 16px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
.stat-card b { display: block; font-family: var(--font-display); font-size: 28px; line-height: 1; }
.stat-card span { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.stat-card small { display: block; font-size: 12px; color: var(--cyan); margin-top: 4px; }

@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
/* ---------- Ads ---------- */
.ads { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 10px 0 26px; }
.ad {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  overflow: hidden;
  transition: 0.25s;
}
.ad:hover { border-color: var(--border2); transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(43,127,255,.7); }
.ad-art { display: block; height: 84px; padding: 14px 40px 0; }
.ad-art svg { width: 100%; height: 100%; display: block; }
.ad-master { background: linear-gradient(160deg, rgba(255,212,0,.16), var(--surface) 55%); }
.ad-site { background: linear-gradient(160deg, rgba(43,127,255,.2), var(--surface) 55%); }
.ad-video { background: linear-gradient(160deg, rgba(0,194,255,.18), var(--surface) 55%); }
.ad-body { display: block; padding: 4px 18px 16px; }
.ad-body b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.15; margin-bottom: 4px; }
.ad-body > span { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }
.ad-body .cta { margin-top: 12px; font-size: 13px; font-weight: 800; color: var(--pink); letter-spacing: .02em; }
.ad-tag { position: absolute; top: 12px; right: 14px; z-index: 1; font-size: 9px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); background: rgba(0,0,0,.35); }

.ad-master .bars rect { fill: var(--pink); transform-origin: center; animation: eq-bar 1.1s ease-in-out infinite alternate; }
@keyframes eq-bar { from { transform: scaleY(.35); } to { transform: scaleY(1.15); } }
.ad-site .win { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.25); stroke-width: 1.5; }
.ad-site .dot1 { fill: #ff5f57; } .ad-site .dot2 { fill: #febc2e; } .ad-site .dot3 { fill: #28c840; }
.ad-site .ln { fill: rgba(255,255,255,.5); } .ad-site .ln2 { fill: rgba(255,255,255,.22); }
.ad-site .btn { fill: var(--violet); animation: pulse 2.2s ease-in-out infinite; }
.ad-video .film { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.25); stroke-width: 1.5; }
.ad-video .hole { fill: rgba(255,255,255,.4); }
.ad-video .play { fill: var(--cyan); filter: drop-shadow(0 0 8px var(--cyan)); animation: pulse 1.8s ease-in-out infinite; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 44px 36px;
  border-radius: 28px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  overflow: hidden;
  margin-bottom: 26px;
}
.hero::after {
  content: ''; position: absolute; inset: -1px;
  background: radial-gradient(700px 240px at 15% 0%, rgba(43,127,255,.35), transparent 60%),
              radial-gradient(500px 220px at 90% 100%, rgba(255,212,0,.3), transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 84px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(255,212,0,.25));
}
.hero-sub { font-size: 17px; color: var(--muted); max-width: 560px; margin: 14px 0 22px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px; }
.stat b { font-family: var(--font-display); font-size: 26px; display: block; line-height: 1; }
.stat span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

.live {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pink);
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255,212,0,.35); background: rgba(255,212,0,.08);
  margin-bottom: 18px;
}
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px var(--pink); animation: pulse 1.6s infinite; }
.live-off { color: var(--muted); border-color: var(--border2); background: var(--surface); }
.live-off i { background: var(--muted); box-shadow: none; animation: none; }
.nav-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #fff; padding: 6px 12px; border-radius: 999px; background: #e0173f; box-shadow: 0 0 18px rgba(224,23,63,.6); }
.nav-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 15px; font-weight: 700;
  padding: 13px 22px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: 0.2s;
  white-space: nowrap;
}
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 30px -10px rgba(255,212,0,.6); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(43,127,255,.7); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border2); }
.btn-ghost:hover { background: var(--surface2); }
.btn-ok { background: rgba(52,211,153,.15); color: var(--ok); border-color: rgba(52,211,153,.35); }
.btn-warn { background: rgba(251,191,36,.15); color: var(--warn); border-color: rgba(251,191,36,.35); }
.btn-danger { background: rgba(251,113,133,.12); color: var(--danger); border-color: rgba(251,113,133,.35); }
.btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Cards & forms ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
  backdrop-filter: blur(12px);
}
.card.tight { padding: 16px 18px; }

label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 16px 0 7px; }
label:first-child { margin-top: 0; }
input[type="text"], input[type="password"], input[type="url"], textarea, select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.35);
  color: var(--text);
  font: inherit; font-size: 15px;
  transition: .2s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43,127,255,.2); }
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #12121a inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); transition: background-color 9999s; }
textarea { min-height: 96px; resize: vertical; }
input[type="file"] { width: 100%; color: var(--muted); font-size: 14px; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: 13px;
  padding: 9px 14px; margin-right: 12px;
  border-radius: 10px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text); cursor: pointer;
}

.dropzone {
  border: 1px dashed var(--border2);
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  background: rgba(0,0,0,.25);
  transition: .2s;
}
.dropzone:hover { border-color: var(--violet); background: rgba(43,127,255,.06); }
.dropzone .big { font-size: 30px; margin-bottom: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.3);
  font-size: 13px; font-weight: 500; color: var(--text);
  cursor: pointer; transition: .15s;
}
.chips label:hover { border-color: var(--border2); }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label:has(input:checked) { background: var(--grad); border-color: transparent; color: #fff; }

.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }

.alert { padding: 12px 16px; border-radius: 12px; font-size: 14px; margin-bottom: 16px; border: 1px solid; }
.alert-error { background: rgba(251,113,133,.1); border-color: rgba(251,113,133,.4); color: #ffc2cb; }
.alert-info { background: rgba(34,211,238,.08); border-color: rgba(34,211,238,.35); color: #bdf3fb; }
.alert-ok { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.4); color: #c4f5df; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.badge-pending { background: rgba(34,211,238,.12); color: var(--cyan); }
.badge-locked { background: rgba(251,191,36,.15); color: var(--warn); }
.badge-played { background: rgba(52,211,153,.14); color: var(--ok); }
.badge-cancelled { background: rgba(255,255,255,.08); color: var(--muted); }
.badge-featured { background: rgba(255,212,0,.16); color: var(--pink); }
.avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover;
  background: var(--grad);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff;
  border: 2px solid rgba(255,255,255,.1);
}
.avatar.lg { width: 96px; height: 96px; font-size: 34px; }
.avatar.xl { width: 128px; height: 128px; font-size: 44px; }
.empty { padding: 34px; text-align: center; color: var(--muted); border: 1px dashed var(--border2); border-radius: 18px; }

/* ---------- Profile ---------- */
.profile-head { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); }
.links-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.links-row a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  padding: 8px 14px; border-radius: 12px;
  border: 1px solid var(--border2); background: var(--surface);
  transition: .2s;
}
.links-row a:hover { background: var(--surface2); border-color: var(--cyan); }

/* ---------- Tables (admin) ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
tr:last-child td { border-bottom: none; }
tr.featured td { background: rgba(255,212,0,.05); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.actions form { margin: 0; }
audio { height: 34px; max-width: 200px; filter: invert(1) hue-rotate(180deg) brightness(.9); }
.table-wrap { overflow-x: auto; }

.footer { margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--text); }

.auth-hero { text-align: center; margin: 30px 0 22px; }
.auth-hero .logo { justify-content: center; font-size: 34px; margin-bottom: 8px; }
.inline-form { display: flex; gap: 10px; }
.inline-form input { flex: 1; }


/* ================= Арена артистів (v2) ================= */
.avatar.xs { width: 24px; height: 24px; font-size: 11px; border-width: 1px; }
.avatar.sm { width: 34px; height: 34px; font-size: 13px; }
.badge-gold { background: rgba(255,212,0,.16); color: var(--pink); font-size: 11px; padding: 3px 9px; vertical-align: middle; }
.page-title { margin: 10px 0 18px; }
.bio { margin: 18px 0 0; max-width: 720px; white-space: pre-line; }
.push-right { margin-left: auto; }
code.pwd { font-size: 18px; font-weight: 800; letter-spacing: .08em; padding: 2px 10px; border-radius: 8px; background: rgba(0,0,0,.4); color: var(--pink); }
.dim-row { opacity: .5; }

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sec-head a { font-size: 13px; font-weight: 700; color: var(--cyan); text-decoration: none; white-space: nowrap; }
.sec-head a:hover { text-decoration: underline; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }

/* Пігулки-фільтри / вкладки */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pill { font-size: 13px; font-weight: 700; text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: .15s; }
.pill:hover { color: var(--text); border-color: var(--border2); }
.pill.on { background: var(--grad); color: #fff; border-color: transparent; }
.pager { justify-content: center; margin-top: 24px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.filters input { flex: 1 1 220px; width: auto; }
.filters select { flex: 0 1 200px; width: auto; }

/* Платформа */
.plat { position: absolute; left: 10px; top: 10px; z-index: 2; font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 4px 9px; border-radius: 999px; color: #fff; background: #333; }
.plat.static { position: static; display: inline-block; }
.plat-youtube { background: #e62117; }
.plat-ytmusic { background: #ff0033; }
.plat-spotify { background: #1db954; color: #04210f; }
.plat-apple { background: linear-gradient(135deg, #fa2d48, #fb5c74); }
.plat-soundcloud { background: #ff5500; }
.plat-tiktok { background: #111; box-shadow: inset 0 0 0 1px #fe2c55; }
.plat-deezer { background: #a238ff; }
.plat-audiomack { background: #ffa200; color: #2a1a00; }
.plat-hint { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.plat-hint .plat { transition: .2s; }
.plat-hint .plat.dim { opacity: .2; }

/* Картка треку */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.tgrid.one { grid-template-columns: 1fr; }
.tcard { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; transition: .2s; min-width: 0; }
.tcard:hover { border-color: var(--border2); transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(43,127,255,.8); }
.tcard-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--pc), #0b0b14 75%); }
.tcard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: .4s; }
.tcard-cover img.blurred { filter: blur(14px) brightness(.6) saturate(1.3); transform: scale(1.2); }
.tcard:hover .tcard-cover img { transform: scale(1.05); }
.tcard:hover .tcard-cover img.blurred { transform: scale(1.25); }
.tcard-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(6px); transition: .2s; }
.tcard-play svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
.tcard:hover .tcard-play { background: var(--violet); transform: scale(1.08); }
.tcard-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tcard-title { font-weight: 700; font-size: 15px; text-decoration: none; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard-title:hover { color: var(--cyan); }
.tcard-artist { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); text-decoration: none; min-width: 0; }
.tcard-artist:hover { color: var(--text); }
.tcard-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.meta-pill { font-size: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.3); border: 1px solid var(--border); color: var(--muted); text-decoration: none; }
a.meta-pill:hover { color: var(--text); }
.like-btn { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(0,0,0,.3); color: var(--muted); transition: .15s; }
.like-btn:hover { color: #ff6b8b; border-color: rgba(255,107,139,.5); }
.like-btn.on { color: #fff; background: linear-gradient(120deg, #ff3d6e, #ff7a59); border-color: transparent; }
.like-btn.big { font-size: 15px; padding: 9px 18px; }

/* Картка артиста */
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.acard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); text-decoration: none; transition: .2s; min-width: 0; }
.acard:hover { border-color: var(--border2); background: var(--surface2); transform: translateY(-3px); }
.acard .avatar { margin-bottom: 6px; }
.acard b { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard small { font-size: 12px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard-stats { font-size: 12px; color: var(--cyan); font-weight: 700; }

/* Рейтинг */
.rank-list { padding: 6px 10px; }
.rank { display: grid; grid-template-columns: 30px 44px 1fr auto; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--border); text-decoration: none; border-radius: 12px; transition: .15s; }
.rank:last-child { border-bottom: none; }
.rank:hover { background: var(--surface2); }
.rank-n { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--muted); text-align: center; }
.rank-n.n1 { color: #ffd400; text-shadow: 0 0 14px rgba(255,212,0,.6); }
.rank-n.n2 { color: #d7dde8; }
.rank-n.n3 { color: #e09a5a; }
.rank-name { min-width: 0; }
.rank-name b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-name small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-score { text-align: right; font-size: 13px; white-space: nowrap; }
.rank-score b { font-family: var(--font-display); font-size: 16px; }
.rank-score small { color: var(--muted); font-size: 11px; }

/* Сторінка треку */
.track-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.aside-h { margin-top: 0; }
.embed { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: #000; aspect-ratio: 16 / 9; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-spotify { aspect-ratio: auto; height: 352px; background: transparent; }
.embed-apple { aspect-ratio: auto; height: 450px; background: transparent; }
.embed-soundcloud { aspect-ratio: auto; height: 300px; }
.embed-deezer { aspect-ratio: auto; height: 300px; }
.embed-tiktok { aspect-ratio: auto; height: 740px; max-width: 340px; margin: 0 auto; background: transparent; border: none; }
.embed-fallback { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: var(--grad); text-decoration: none; }
.embed-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(.5); transform: scale(1.2); }
.embed-fallback span { position: relative; font-family: var(--font-display); font-size: 20px; font-weight: 700; padding: 14px 24px; border-radius: 16px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.25); }
.embed-fallback:hover span { background: var(--violet); }

/* Коментарі */
.comments { display: flex; flex-direction: column; }
.comment { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.comment:last-child { border-bottom: none; }
.comment a { text-decoration: none; }
.comment-body { min-width: 0; }
.comment-body > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.comment-body p { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.x-btn { font: inherit; font-size: 18px; line-height: 1; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--muted); cursor: pointer; }
.x-btn:hover { color: var(--danger); border-color: var(--danger); }
.comment-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.comment-form textarea { min-height: 52px; flex: 1; }

/* Кабінет */
.my-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 10px 0 20px; }
.my-head a.muted { text-decoration: none; }
.my-head a.muted:hover { color: var(--cyan); }
.my-track { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.my-track:last-child { border-bottom: none; }
.my-track-cover { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--grad); }
.my-track-cover img { width: 100%; height: 100%; object-fit: cover; }
.my-track-cover .plat { left: 5px; top: 5px; font-size: 9px; padding: 2px 6px; }
.my-track-info { min-width: 0; }
.my-track-info a { text-decoration: none; }
.my-track-info b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Mobile (тримати В КІНЦІ файлу) ---------- */
@media (max-width: 900px) {
  .track-page { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px 60px; }
  .nav { flex-wrap: wrap; gap: 8px; }
  .logo-img { height: 56px; }
  .nav-links { width: 100%; justify-content: flex-start; gap: 2px; }
  .nav-links a, .nav-links button { padding: 8px 9px; font-size: 13px; }
  .ads { grid-template-columns: 1fr; gap: 8px; margin: 6px 0 16px; }
  .ad { flex-direction: row; align-items: center; border-radius: 14px; }
  .ad-art { flex: 0 0 64px; width: 64px; height: 44px; padding: 0 0 0 12px; }
  .ad-body { padding: 10px 12px; flex: 1; min-width: 0; }
  .ad-body b { font-size: 14px; margin-bottom: 1px; }
  .ad-body > span { display: none; }
  .ad-body .cta { display: block; margin-top: 0; font-size: 12px; }
  .ad-tag { display: none; }
  .hero { padding: 28px 20px; }
  .hero-inner { flex-direction: column-reverse; }
  .hero-logo-wrap { width: 56vw; }
  .hero-sub { font-size: 15px; }
  .stats { gap: 16px; }
  .btn { padding: 12px 16px; font-size: 14px; }
  .two-col { grid-template-columns: 1fr; }
  .tgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tcard-body { padding: 10px; }
  .tcard-title { font-size: 13px; }
  .tcard-play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .tcard-meta .tag, .tcard-meta .meta-pill[title="Переглядів"] { display: none; }
  .agrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rank { grid-template-columns: 24px 40px 1fr; }
  .rank-score { grid-column: 3; text-align: left; }
  .founder { padding: 18px; }
  .founder-img { width: 120px; height: 120px; }
  .promo { padding: 20px; }
  .promo b { font-size: 20px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .profile-head { flex-direction: column; align-items: flex-start; }
  .profile-head .stats { flex-direction: row !important; }
  .my-track { grid-template-columns: 96px 1fr; }
  .my-track .actions { grid-column: 1 / -1; }
  .comment-form { flex-direction: column; align-items: stretch; }
  .filters select, .filters .btn { flex: 1 1 140px; }
  .embed-spotify { height: 232px; }
  h1 { font-size: 24px; }
}
@media (max-width: 380px) {
  .tgrid { grid-template-columns: 1fr; }
}

/* ================= v3: кабінет, головний трек, трек тижня ================= */
html { scroll-padding-top: 70px; }
.btn-gold { background: var(--grad-gold); color: #2a1f00; border-color: transparent; }

/* Трек тижня / місяця */
.spot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 8px; }
.spot { display: grid; grid-template-columns: 46% 1fr; border-radius: 22px; overflow: hidden; text-decoration: none; border: 1px solid rgba(255,212,0,.35); background: linear-gradient(135deg, rgba(255,212,0,.12), rgba(43,127,255,.1) 60%, var(--surface)); transition: .25s; min-width: 0; }
.spot:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -30px rgba(255,212,0,.6); border-color: rgba(255,212,0,.7); }
.spot-month { border-color: rgba(43,127,255,.45); background: linear-gradient(135deg, rgba(43,127,255,.16), rgba(0,194,255,.08) 60%, var(--surface)); }
.spot-month:hover { box-shadow: 0 30px 60px -30px rgba(43,127,255,.8); border-color: rgba(43,127,255,.8); }
.spot-cover { position: relative; display: block; min-height: 150px; overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--pc), #0b0b14 75%); }
.spot-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spot-cover img.blurred { filter: blur(14px) brightness(.6); transform: scale(1.2); }
.spot:hover .tcard-play { background: var(--violet); }
.spot-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-width: 0; }
.spot-badge { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pink); }
.spot-month .spot-badge { color: var(--cyan); }
.spot-body b { font-family: var(--font-display); font-size: 18px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spot-artist { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.spot-stats { margin-top: auto; font-size: 13px; color: var(--muted); }

/* Сторінка артиста */
.artist-hero { padding: 34px; }
.artist-stats { margin: 0; flex-direction: column; gap: 12px; }
.pinned { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr; gap: 20px; align-items: center; padding: 16px; border-color: rgba(255,212,0,.35); background: linear-gradient(135deg, rgba(255,212,0,.08), var(--surface) 60%); }
.pinned .embed { border-radius: 14px; }
.pinned-info a { text-decoration: none; }
.pinned-info h3 { font-size: 22px; margin-bottom: 8px; }
.pinned-info h3:hover { color: var(--cyan); }
.pinned-info p { white-space: pre-line; font-size: 14px; }

/* Кабінет */
.cab-head { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 10px 0 18px; padding: 24px; border-radius: 24px; border: 1px solid var(--border); background: linear-gradient(135deg, rgba(43,127,255,.14), rgba(255,212,0,.06) 70%, var(--surface)); }
.cab-avatar { position: relative; margin: 0; cursor: pointer; flex: 0 0 auto; border-radius: 50%; }
.cab-avatar .avatar.xl { width: 120px; height: 120px; font-size: 44px; transition: .2s; }
.cab-avatar:hover .avatar { filter: brightness(.8); }
.cab-cam { position: absolute; right: 2px; bottom: 2px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--grad); border: 3px solid var(--bg); box-shadow: 0 6px 16px rgba(43,127,255,.6); }
.cab-avatar.busy { pointer-events: none; }
.cab-avatar.busy .avatar { filter: brightness(.4); }
.cab-avatar.busy::after { content: ''; position: absolute; inset: 40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin .8s linear infinite; }
.cab-info { flex: 1; min-width: 220px; }
.cab-info h1 { margin-bottom: 2px; }
.cab-info p { margin: 0 0 12px; }
.cab-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.steps b { font-size: 14px; }
.steps-bar { height: 6px; border-radius: 3px; background: var(--surface2); margin: 10px 0 12px; overflow: hidden; }
.steps-bar i { display: block; height: 100%; background: var(--grad-gold); border-radius: 3px; }
.steps-list { display: flex; flex-wrap: wrap; gap: 8px; }
.step { font-size: 13px; font-weight: 700; text-decoration: none; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--border2); color: var(--muted); }
.step:hover { color: var(--text); border-color: var(--cyan); }
.step.done { border-style: solid; border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.1); color: var(--ok); }

.cab-nav { position: sticky; top: 0; z-index: 30; display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; margin-bottom: 6px; background: linear-gradient(var(--bg) 75%, transparent); scrollbar-width: none; }
.cab-nav::-webkit-scrollbar { display: none; }
.cab-nav a { flex: 0 0 auto; font-size: 13px; font-weight: 700; text-decoration: none; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border2); background: var(--surface); }
.cab-nav a:hover { border-color: var(--cyan); }
.cab-sec h2 { margin: 0 0 8px; color: var(--text); font-size: 16px; letter-spacing: .04em; }
.cab-sec > p.muted { margin-bottom: 14px; }
details.cab-sec summary { cursor: pointer; list-style: none; }
details.cab-sec summary::-webkit-details-marker { display: none; }

.quick-add { padding: 14px; border-radius: 16px; border: 1px dashed rgba(43,127,255,.5); background: rgba(43,127,255,.06); margin-bottom: 14px; }
.qa-row { display: flex; gap: 10px; }
.qa-row input { flex: 1; min-width: 0; }
.qa-hint { min-height: 18px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.qa-hint.ok { color: var(--ok); }
.qa-hint.bad { color: var(--danger); }
.qa-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--cyan); margin-top: 4px; }
.qa-more[open] summary { margin-bottom: 4px; }

.my-list { display: flex; flex-direction: column; }
.my-track.is-pinned { margin: 0 -10px; padding: 10px; border-radius: 14px; background: rgba(255,212,0,.07); border-bottom-color: transparent; }
.pin-badge { display: inline-block; font-size: 11px; font-weight: 800; color: var(--pink); margin-bottom: 2px; }
.my-track .actions { flex-wrap: nowrap; }

.link-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.link-field { display: flex; align-items: center; gap: 10px; margin: 0; }
.link-field .chan { flex: 0 0 42px; width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 12px; }
.link-field input { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .pinned { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .spot-grid { grid-template-columns: 1fr; gap: 10px; }
  .spot { grid-template-columns: 120px 1fr; border-radius: 16px; }
  .spot-cover { min-height: 110px; }
  .spot-body { padding: 12px; gap: 4px; }
  .spot-body b { font-size: 15px; }
  .spot-artist { font-size: 13px; }
  .artist-hero { padding: 22px 18px; }
  .artist-stats { flex-direction: row; gap: 22px; }
  .cab-head { padding: 18px; gap: 16px; flex-direction: column; text-align: center; }
  .cab-info { min-width: 0; width: 100%; }
  .cab-actions { justify-content: center; }
  .cab-avatar .avatar.xl { width: 110px; height: 110px; }
  .qa-row { flex-direction: column; }
  .qa-row .btn { width: 100%; }
  .link-fields { grid-template-columns: 1fr; }
  .my-track { grid-template-columns: 96px 1fr; }
  .my-track .actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .my-track .actions form:first-child { flex: 1; }
  .my-track .actions form:first-child .btn { width: 100%; }
  .card { padding: 18px; }
}
@media (max-width: 720px) { .hero-logo-wrap { width: 40vw; } .hero-title { font-size: 44px; } }

/* ================= v4: порядок, публікація на Арену, власні посилання ================= */
.kind-switch { display: flex; gap: 8px; margin-bottom: 10px; }
.kind-switch label { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border2); background: rgba(0,0,0,.3); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; }
.kind-switch input { position: absolute; opacity: 0; pointer-events: none; }
.kind-switch label:has(input:checked) { background: var(--grad); border-color: transparent; }

.my-track { grid-template-columns: 34px 120px 1fr auto; }
.mover { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mv { font: inherit; font-size: 11px; line-height: 1; width: 30px; height: 26px; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); cursor: pointer; }
.mv:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.mv:disabled { opacity: .25; cursor: default; }
.pos { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--muted); }
.my-track.is-first .pos { color: var(--pink); }
.my-track.is-first { margin: 0 -10px; padding: 10px; border-radius: 14px; background: rgba(43,127,255,.08); border-bottom-color: transparent; }
.my-track.moved { animation: moved .6s ease; }
@keyframes moved { from { background: rgba(0,194,255,.25); } }
.post-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #ff7aa2; margin-bottom: 2px; }
.btn-post { background: linear-gradient(120deg, #ff3d6e, #ff7a59); color: #fff; border-color: transparent; }
.btn-post:disabled { opacity: .35; }
.ok-text { color: var(--ok); }
.post-flag { position: absolute; right: 10px; top: 10px; z-index: 2; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; color: #fff; background: linear-gradient(120deg, #ff3d6e, #ff7a59); }

.post-now { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255,61,110,.45); background: linear-gradient(120deg, rgba(255,61,110,.12), rgba(255,122,89,.05) 60%, transparent); }
.post-now.empty-post { flex-direction: column; align-items: flex-start; gap: 4px; border-style: dashed; }
.post-cover { flex: 0 0 160px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--pc), #0b0b14 75%); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.post-info b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.xl-title { font-size: 14px; margin: 22px 0 10px; color: var(--muted); }
#xlinks { display: flex; flex-direction: column; gap: 8px; }
.xlink { display: grid; grid-template-columns: 30px 1fr 1.4fr 28px; gap: 8px; align-items: center; }
.xlink input { min-width: 0; }
.xbuttons { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; max-width: 520px; }
.xbutton { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-radius: 14px; font-weight: 700; text-decoration: none; border: 1px solid var(--border2); background: var(--surface2); transition: .2s; }
.xbutton:hover { border-color: var(--cyan); transform: translateX(3px); }
.xbutton span { color: var(--cyan); }

@media (max-width: 720px) {
  .my-track { grid-template-columns: 34px 96px 1fr; }
  .my-track .actions { grid-column: 2 / -1; }
  .post-now { flex-direction: column; align-items: stretch; }
  .post-cover { flex-basis: auto; width: 100%; }
  .post-info b { white-space: normal; }
  .xlink { grid-template-columns: 30px 1fr 28px; }
  .xlink input[type=url] { grid-column: 2 / 3; }
  .xbuttons { max-width: none; }
}

/* ================= v5: тип за посиланням, необов'язкові поля ================= */
.opt { font-weight: 500; font-size: 11px; color: var(--muted); opacity: .7; margin-left: 4px; }
.kind-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.kind-guide > div { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--border); }
.kind-guide b { font-size: 13px; }
.kind-guide span { display: flex; flex-wrap: wrap; gap: 5px; }
.kind-guide .plat { font-size: 10px; padding: 3px 8px; }
.type-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 14px; border: 1px solid var(--border2); background: var(--surface); }
.type-tabs a { font-size: 14px; font-weight: 700; text-decoration: none; padding: 9px 18px; border-radius: 10px; color: var(--muted); }
.type-tabs a.on { background: var(--grad); color: #fff; }
input[type="number"] { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(0,0,0,.35); color: var(--text); font: inherit; font-size: 15px; }
@media (max-width: 720px) {
  .kind-guide { grid-template-columns: 1fr; }
}

.bio-help { margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(255,212,0,.45); background: rgba(255,212,0,.05); }
.bio-help summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--pink); }
.bio-help[open] summary { margin-bottom: 6px; }

/* ================= v6: YouTube пісня/кліп, «Нове» ================= */
.new-flag { background: linear-gradient(120deg, #22c55e, #10b981); }
.yt-choice { margin: 4px 0 10px; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,212,0,.45); background: rgba(255,212,0,.06); }
.yt-choice b { display: block; font-size: 13px; margin-bottom: 8px; }
.yt-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.yt-btns button { font: inherit; font-size: 14px; font-weight: 700; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border2); background: rgba(0,0,0,.3); color: var(--text); cursor: pointer; transition: .15s; }
.yt-btns button small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.yt-btns button:hover { border-color: var(--cyan); }
.yt-btns button.on { background: var(--grad); border-color: transparent; }
.yt-btns button.on small { color: rgba(255,255,255,.85); }
@media (max-width: 720px) { .yt-btns { grid-template-columns: 1fr; } }

/* ================= v7: де слухати, кліпи/шортси ================= */
.ldots { display: inline-flex; gap: 4px; margin-left: auto; }
.ld { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
.ld-ytmusic { background: #ff0033; }
.ld-spotify { background: #1db954; }
.ld-apple { background: #fa2d48; }
.ld-soundcloud { background: #ff5500; }
.listen-on { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.listen-on b { font-size: 13px; color: var(--muted); }
.listen-btn { font-size: 13px; font-weight: 800; text-decoration: none; padding: 8px 14px; border-radius: 12px; color: #fff; transition: .2s; }
.listen-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.listen-btn.plat-ytmusic { background: #ff0033; }
.listen-btn.plat-spotify { background: #1db954; color: #04210f; }
.listen-btn.plat-apple { background: linear-gradient(135deg, #fa2d48, #fb5c74); }
.listen-btn.plat-soundcloud { background: #ff5500; }
.lf-tag { flex: 0 0 116px; text-align: center; font-size: 11px; }
@media (max-width: 720px) {
  .lf-tag { flex-basis: 96px; }
  .type-tabs { display: flex; width: 100%; }
  .type-tabs a { flex: 1; text-align: center; padding: 9px 6px; font-size: 13px; }
}

/* ================= v8: покрокова форма публікації ================= */
.add-box > summary { list-style: none; cursor: pointer; margin-bottom: 14px; }
.add-box > summary::-webkit-details-marker { display: none; }
.add-box[open] > summary { background: var(--surface2); box-shadow: none; color: var(--muted); }
.add-box[open] > summary::after { content: ' — згорнути'; }
.step { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 14px; }
.item-form > .step:first-child, .quick-add > .step:first-child { margin-top: 0; }
.step-n { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--grad); color: #fff; }
.req { font-size: 11px; font-weight: 700; color: var(--pink); }
.what-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.what-card { position: relative; margin: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; border: 1px solid var(--border2); background: rgba(0,0,0,.3); color: var(--text); cursor: pointer; transition: .15s; }
.what-card input { position: absolute; opacity: 0; pointer-events: none; }
.what-card:hover { border-color: var(--cyan); }
.what-card:has(input:checked) { background: var(--grad); border-color: transparent; box-shadow: 0 10px 30px -12px rgba(43,127,255,.9); }
.what-ic { font-size: 22px; }
.what-card b { font-size: 14px; }
.what-card small { font-size: 11px; color: var(--muted); font-weight: 500; }
.what-card:has(input:checked) small { color: rgba(255,255,255,.85); }
.chips.pick label { padding: 7px 12px; }
.tag-mood { background: rgba(255,122,162,.12); border-color: rgba(255,122,162,.35); color: #ffb3c9; }
a.tag { text-decoration: none; }
a.tag:hover { border-color: var(--cyan); }
@media (max-width: 720px) {
  .what-pick { grid-template-columns: 1fr; }
  .what-card { flex-direction: row; align-items: center; gap: 10px; }
  .what-card small { margin-left: auto; text-align: right; }
}

/* ================= v9: фільтри-панелі, стрічка шортсів ================= */
.dd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--border2); background: var(--surface); font-size: 14px; font-weight: 700; user-select: none; transition: .15s; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary:hover { border-color: var(--cyan); }
.dd.has > summary { background: var(--grad); border-color: transparent; }
.dd-arrow { font-size: 11px; opacity: .7; transition: .2s; }
.dd[open] .dd-arrow { transform: rotate(180deg); }
.dd-panel { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: min(520px, 92vw); max-height: 60vh; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; border-radius: 18px; border: 1px solid var(--border2); background: #11111b; box-shadow: 0 30px 70px -20px rgba(0,0,0,.9); animation: modal-in .18s ease; }
.dd-chip { font-size: 13px; font-weight: 600; text-decoration: none; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.04); transition: .12s; }
.dd-chip:hover { border-color: var(--cyan); }
.dd-chip.on { background: var(--grad); border-color: transparent; }
.dd-reset { font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; padding: 8px 6px; }
.dd-reset:hover { color: var(--danger); }
.dd-watch { margin-left: auto; }

/* Стрічка шортсів */
.shorts-body { height: 100dvh; overflow: hidden; background: #000; }
.shorts-body::before, .shorts-body::after { display: none; }
.sh-top { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(rgba(0,0,0,.75), transparent); }
.sh-back, .sh-sound { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: #fff; text-decoration: none; border: none; cursor: pointer; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); }
.sh-moods { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 90%, transparent); }
.sh-moods::-webkit-scrollbar { display: none; }
.sh-mood { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.75); text-decoration: none; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.1); }
.sh-mood.on { color: #fff; background: var(--grad); }
.sh-genre { position: fixed; z-index: 20; top: 60px; left: 12px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(43,127,255,.85); color: #fff; text-decoration: none; }
.feed { height: 100dvh; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.slide { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; }
.sh-video { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100vw; background: #0b0b12; }
.sh-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sh-open { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: #fff; text-decoration: none; }
.sh-side { position: absolute; z-index: 5; right: max(12px, calc(50% - 28.125dvh - 76px)); bottom: 120px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sh-ava .avatar { width: 50px; height: 50px; border: 2px solid #fff; }
.sh-btn { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 52px; padding: 8px 0; border-radius: 16px; border: none; cursor: pointer; font-size: 24px; line-height: 1; color: #fff; text-decoration: none; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.sh-btn span { font-size: 11px; font-weight: 700; }
.sh-btn.like-btn.on { color: #ff3d6e; background: rgba(0,0,0,.35); }
.sh-btn.pop { animation: pop .4s ease; }
@keyframes pop { 50% { transform: scale(1.35); } }
.sh-info { position: absolute; z-index: 5; left: max(14px, calc(50% - 28.125dvh + 14px)); right: 90px; bottom: 28px; text-shadow: 0 1px 6px rgba(0,0,0,.8); pointer-events: none; }
.sh-info a { pointer-events: auto; }
.sh-artist { font-weight: 800; font-size: 16px; color: #fff; text-decoration: none; }
.sh-title { font-size: 14px; margin: 4px 0 6px; color: rgba(255,255,255,.92); }
.sh-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-tags a { font-size: 13px; font-weight: 700; color: #9fd8ff; text-decoration: none; }
.slide-end { background: radial-gradient(circle at 50% 40%, rgba(43,127,255,.3), #000 70%); }
.sh-end { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 20px; }
.sh-end b { font-family: var(--font-display); font-size: 22px; }
@media (max-width: 720px) {
  .sh-video { width: 100vw; height: 100%; aspect-ratio: auto; }
  .sh-side { right: 10px; bottom: 110px; }
  .sh-info { left: 14px; bottom: 22px; }
  .dd-watch { margin-left: 0; width: 100%; }
}

/* v10: Telegram */
.btn-follow { background: #229ed9; color: #fff; }
.btn-follow:hover { filter: brightness(1.1); }
.btn-live { background: linear-gradient(120deg, #e0173f, #ff5a3d); color: #fff; box-shadow: 0 10px 30px -10px rgba(224,23,63,.8); }
.live-sec { border-color: rgba(224,23,63,.35); background: linear-gradient(135deg, rgba(224,23,63,.08), var(--surface) 60%); }

/* v11: мат, шортси без власних кнопок */
.x18 { display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: #e0173f; color: #fff; vertical-align: middle; }
.x18-card { position: absolute; z-index: 2; left: 10px; bottom: 10px; }
.dd-clean { font-size: 13px; font-weight: 700; text-decoration: none; padding: 9px 14px; border-radius: 14px; border: 1px solid var(--border2); background: var(--surface); }
.dd-clean:hover { border-color: var(--cyan); }
.dd-clean.on { background: linear-gradient(120deg, #22c55e, #10b981); border-color: transparent; }
.sh-mood.sh-clean.on { background: linear-gradient(120deg, #22c55e, #10b981); }
.sh-sound.on { background: var(--grad); box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.sh-info { bottom: 92px; }
.sh-side { bottom: 170px; }
@media (max-width: 720px) { .sh-info { bottom: 84px; } .sh-side { bottom: 160px; } }

/* v12: заставка шортсів */
.gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 35%, rgba(43,127,255,.35), rgba(0,0,0,.92) 70%); backdrop-filter: blur(6px); transition: opacity .3s; }
.gate.gone { opacity: 0; pointer-events: none; }
.gate-box { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.gate-logo { width: 96px; height: 96px; filter: drop-shadow(0 10px 30px rgba(43,127,255,.7)); }
.gate-box > b { font-family: var(--font-display); font-size: 22px; }
.gate-check { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border2); background: rgba(255,255,255,.06); color: var(--text); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; width: 100%; }
.gate-check input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: #2b7fff; }
.gate-go { font-size: 17px; padding: 16px; }
.gate-mute { font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: none; border: none; cursor: pointer; padding: 8px; }
.gate-mute:hover { color: var(--text); }

/* v13: шортси без накладок, фільтри на заставці */
.gate-moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0 6px; }
.gate-label { width: 100%; font-size: 12px; color: var(--muted); }
.gate .sh-mood { font-size: 12px; padding: 6px 11px; }
.gate-box { max-width: 420px; max-height: 100dvh; overflow-y: auto; }
.gate-mute { text-decoration: none; }

/* v14: шортси на весь екран без розмитих смуг і шапки TikTok */
html:has(body.shorts-body) { background: #000; }
.shorts-body { height: 100dvh; background: #000; }
.sh-video { position: relative; height: 100dvh; width: min(100vw, calc(100dvh * 9 / 16)); aspect-ratio: auto; max-width: 100vw; overflow: hidden; background: #000; }
.sh-video iframe { inset: auto; top: 0; left: 50%; height: 100%; width: calc(100dvh * 9 / 16); min-width: 100%; transform: translateX(-50%); }
/* TikTok: шапку плеєра (автор) лишаємо — власник так хоче */
@media (max-width: 720px) { .sh-video { width: 100vw; } }

/* ================= v15: преміальна картка (чиста обкладинка, підпис над назвою) ================= */
.tcard { border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); }
.tcard-cover { background: radial-gradient(circle at 30% 20%, var(--pc), #0b0b14 75%); }
.tcard-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,7,12,.55)); pointer-events: none; }
.tcard-play { opacity: 0; transform: scale(.85); }
.tcard:hover .tcard-play { opacity: 1; transform: scale(1); }
.tcard-pi { position: absolute; z-index: 2; left: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(10,10,16,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.14); }
.tcard-pi svg { width: 15px; height: 15px; fill: var(--pc); }
.tcard-pi.pi-tiktok svg { fill: #fff; }
.tcard-18 { position: absolute; z-index: 2; right: 10px; bottom: 10px; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 4px 7px; border-radius: 8px; color: #fff; background: rgba(224,23,63,.85); }
.tcard-body { gap: 7px; padding: 12px 14px 14px; }
.tcard-kicker { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; }
.tcard-kicker span { overflow: hidden; text-overflow: ellipsis; }
.kdot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 10px var(--pc); }
.k-new { color: #34d399; font-weight: 800; }
.k-post { color: #ff7aa2; font-weight: 800; }
.tcard-title { font-size: 15px; line-height: 1.28; letter-spacing: -.01em; }
.tcard-artist span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard-meta { gap: 5px; }
.tcard-meta .like-btn, .tcard-meta .meta-pill { background: rgba(255,255,255,.05); border-color: transparent; }
.tcard-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tcard-tags span { font-size: 11px; font-weight: 600; color: var(--muted); }
.tcard-tags span + span::before { content: '· '; }
.tcard-tags .m { color: #ffb3c9; }

@media (max-width: 720px) {
  .tgrid { gap: 12px; }
  .tcard { border-radius: 16px; }
  .tcard-cover { aspect-ratio: 1 / 1; }
  .tcard-body { padding: 10px 11px 12px; gap: 5px; }
  .tcard-kicker { font-size: 9.5px; letter-spacing: .06em; }
  .tcard-title { font-size: 13.5px; }
  .tcard-artist { font-size: 12px; }
  .tcard-meta .m-views, .tcard-meta .ldots { display: none; }
  .tcard-meta .like-btn, .tcard-meta .meta-pill { font-size: 11px; padding: 4px 8px; }
  .tcard-tags { display: none; }
  .tcard-play { display: none; }
  .tcard-pi { width: 24px; height: 24px; border-radius: 8px; left: 8px; bottom: 8px; }
  .tcard-pi svg { width: 13px; height: 13px; }
}

/* v16: шортси — відео цілком (видно лайки/коменти/лого TikTok), компактна плашка */
.slide { place-items: center; background: #000; }
.sh-video { width: min(100vw, calc(100dvh * 9 / 16)); height: auto; aspect-ratio: 9 / 16; max-height: 100dvh; overflow: hidden; }
.sh-video iframe { inset: 0; top: 0; left: 0; width: 100%; height: 100%; min-width: 0; transform: none; }
@media (max-width: 720px) { .sh-video { width: min(100vw, calc(100dvh * 9 / 16)); height: auto; } }
.gate { place-items: end center; padding: 0 12px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent 40%, rgba(0,0,0,.75)); backdrop-filter: none; }
.gate-sheet { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 22px; background: rgba(18,18,28,.92); border: 1px solid var(--border2); box-shadow: 0 20px 60px rgba(0,0,0,.7); backdrop-filter: blur(14px); animation: modal-in .3s ease; }
.gate-sheet p { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.06); }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 9px 6px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--muted); transition: .15s; }
.seg input:checked + span { background: rgba(255,255,255,.14); color: #fff; }
.gate-btns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.gate-btns .btn { padding: 13px 10px; font-size: 15px; }

/* v17: плашка шортсів — по центру */
.gate { place-items: center; padding: 16px; background: rgba(0,0,0,.55); }

/* v18: аналітика, заявки, запрошення */
.a-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.a-box h3 { font-size: 14px; margin: 0 0 10px; }
.a-table { width: 100%; font-size: 13px; }
.a-table td { padding: 7px 6px; }
.a-table .num { text-align: right; font-weight: 800; white-space: nowrap; }
.a-path { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abar { display: block; width: 100%; min-width: 60px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.abar i { display: block; height: 100%; border-radius: 4px; background: var(--grad); }
.a-days { display: flex; align-items: flex-end; gap: 6px; height: 130px; padding-top: 6px; }
.a-day { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.a-day i { display: block; width: 100%; max-width: 34px; border-radius: 6px 6px 2px 2px; background: var(--grad); }
.a-day span { font-size: 10px; color: var(--muted); }
.inv-code { display: inline-block; max-width: 100%; font-size: 12px; padding: 4px 8px; border-radius: 8px; background: rgba(0,0,0,.35); word-break: break-all; }
.inv-alert { line-height: 1.6; }
.inv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.done-ic { font-size: 54px; margin-bottom: 6px; }
@media (max-width: 720px) { .a-grid { grid-template-columns: 1fr; } }

/* v19: стрічка шортсів на головній */
.srow { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; margin: 0 -2px 8px; scrollbar-width: none; }
.srow::-webkit-scrollbar { display: none; }
.scard { position: relative; flex: 0 0 170px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; scroll-snap-align: start; background: #0b0b14; border: 1px solid var(--border); text-decoration: none; transition: .2s; }
.scard:hover { transform: translateY(-3px); border-color: var(--border2); }
.scard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scard img.blurred { filter: blur(14px) brightness(.6); transform: scale(1.2); }
.scard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.85)); }
.scard-play { position: absolute; z-index: 2; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.3); }
.scard-play svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.scard-new { position: absolute; z-index: 2; top: 10px; left: 10px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 8px; background: #10b981; color: #fff; }
.scard-info { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.scard-info b { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scard-info small { font-size: 11px; color: rgba(255,255,255,.75); }
@media (max-width: 720px) { .scard { flex-basis: 132px; border-radius: 14px; } }

/* v20: правила, згода, стрілка в шортсах */
.agree-box { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,212,0,.35); background: rgba(255,212,0,.05); }
.agree { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--text); cursor: pointer; }
.agree input { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; accent-color: #2b7fff; }
.agree a { color: var(--cyan); }
select { appearance: auto; }
.rules h2 { display: flex; align-items: center; gap: 10px; margin: 28px 0 10px; color: var(--text); font-size: 17px; letter-spacing: 0; text-transform: none; }
.rules h2 span { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--grad); }
.rules p, .rules li { font-size: 15px; line-height: 1.65; color: #d9d9e6; }
.rules ul, .rules ol { padding-left: 22px; margin: 6px 0 10px; }
.rules li { margin-bottom: 6px; }
.rules-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 6px; }
.rules-toc a { font-size: 12px; font-weight: 700; text-decoration: none; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border2); background: var(--surface); }
.rules-toc a:hover { border-color: var(--cyan); }
.rules-sec { scroll-margin-top: 20px; }
.sh-back2 { position: fixed; z-index: 20; top: 14px; left: max(12px, calc(50% - min(50vw, 28.125dvh) - 64px)); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff; text-decoration: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); transition: .2s; }
.sh-back2:hover { background: var(--grad); }
@media (max-width: 720px) { .sh-back2 { top: max(8px, calc((100dvh - 100vw * 16 / 9) / 2 - 44px)); left: 8px; width: 34px; height: 34px; font-size: 16px; background: rgba(0,0,0,.5); } }
input[type="tel"] { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(0,0,0,.35); color: var(--text); font: inherit; font-size: 15px; }
input[type="tel"]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43,127,255,.2); }

/* v21: Telegram артиста в кабінеті */
.tg-on, .tg-off { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
.tg-on { border: 1px solid rgba(52,211,153,.4); background: rgba(52,211,153,.08); color: #c4f5df; }
.tg-off { border: 1px solid rgba(34,158,217,.45); background: rgba(34,158,217,.08); }
.link-btn { font: inherit; font-size: 12px; background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0; }

/* v22: форма сповіщень */
.seg-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.notify-form .seg { margin-bottom: 4px; }
.banner-prev { margin: 12px 0 4px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border2); max-width: 520px; }
.banner-prev img { display: block; width: 100%; }

/* v23: обкладинка */
.cover-edit { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cover-prev { flex: 0 0 160px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px dashed var(--border2); color: var(--muted); font-size: 12px; text-align: center; }
.cover-prev.vert { flex-basis: 96px; aspect-ratio: 9 / 16; }
.cover-prev img { width: 100%; height: 100%; object-fit: cover; }
.cover-block.need .cover-prev { border-color: #ffb300; }
.cover-block.need .cover-need { color: #ffcf4d; opacity: 1; font-weight: 700; }

/* v24: кабінет вкладками */
.cab-nav a.on { background: var(--grad); border-color: transparent; color: #fff; }
.cab-nav { margin-bottom: 14px; }

/* v25: підвкладки «Моя сторінка» */
.my-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 10px; scrollbar-width: none; }
.my-tabs::-webkit-scrollbar { display: none; }
.my-tab { flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border2); background: var(--surface); cursor: pointer; }
.my-tab i { font-style: normal; opacity: .55; margin-left: 2px; }
.my-tab.on { border-color: transparent; background: var(--grad); color: #fff; }
.my-tab.on i { opacity: .85; }
.my-track[hidden] { display: none; }
.no-arena { white-space: nowrap; align-self: center; }

/* v26: форма публікації — кожен пункт окремим блоком */
.item-form .fsec { display: block; margin: 0 0 14px; padding: 16px 16px 18px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,.025); }
.item-form .fsec[hidden] { display: none; }
.fsec-h, .fsec.qa-more > summary { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.fsec.qa-more > summary { margin: 0; cursor: pointer; list-style: none; }
.fsec.qa-more > summary::-webkit-details-marker { display: none; }
.fsec.qa-more[open] > summary { margin-bottom: 14px; }
.fsec .step-n { flex: 0 0 30px; width: 30px; height: 30px; font-size: 14px; }
.fsec-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fsec-t b { font-family: 'Unbounded', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.fsec-t small { font-size: 12.5px; color: var(--muted); font-weight: 500; line-height: 1.35; }
.fsec-tag { flex: 0 0 auto; align-self: flex-start; margin: 2px 0 0; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.fsec-tag.req { color: var(--pink); background: rgba(255, 212, 0, .08); border: 1px solid rgba(255, 212, 0, .35); }
.fsec-tag.opt { color: var(--muted); opacity: 1; background: rgba(255,255,255,.04); border: 1px solid var(--border2); }
.fsec-note { margin: 12px 0 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.fsec-note b { color: var(--text); }
.fsec .qa-hint:empty { display: none; }
.fsec .qa-hint { margin-top: 10px; }
.cover-edit { align-items: flex-start; gap: 18px; }
.cover-side { flex: 1; min-width: 200px; }
.cover-side .ct-hint { margin: 10px 0 0; }
.cover-need { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ok); }
.cover-need:empty { display: none; }
.cover-block.need .cover-need { color: #ffcf4d; }
.cover-btn { cursor: pointer; }
@media (max-width: 640px) {
  .item-form .fsec { padding: 14px 12px 16px; }
  .fsec-h { flex-wrap: wrap; }
  .fsec-t b { font-size: 14px; }
}

/* v27: довідка у формі, галочки «взяти з посилання» */
.fhelp { margin: 0 0 14px; border-radius: 16px; border: 1px solid rgba(0, 200, 255, .35); background: linear-gradient(135deg, rgba(0, 170, 255, .1), rgba(0, 170, 255, .03)); }
.fhelp > summary { cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 800; font-size: 15px; }
.fhelp > summary::-webkit-details-marker { display: none; }
.fhelp > summary span { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fhelp > summary::after { content: '▾'; float: right; margin-top: -30px; color: var(--cyan); transition: .2s; }
.fhelp[open] > summary::after { transform: rotate(180deg); }
.fhelp-body { padding: 0 16px 14px; font-size: 13.5px; line-height: 1.55; }
.fhelp-body p { margin: 0 0 10px; color: var(--muted); }
.fhelp-body ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.auto-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--border); cursor: pointer; font-size: 14px; font-weight: 600; }
.auto-check[hidden] { display: none; }
.auto-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--cyan); }
.auto-check small { font-weight: 500; color: var(--muted); }
.item-form input[readonly] { opacity: .75; cursor: default; }
.desc-sec textarea[hidden] { display: none; }

/* v28: Shorts у кабінеті — вертикальні обкладинки 9:16 */
.my-track[data-kind="short"] { grid-template-columns: 34px 120px 1fr auto; }
.my-track[data-kind="short"] .my-track-cover { aspect-ratio: 9 / 16; width: 76px; justify-self: center; }
.my-track[data-kind="short"] .my-track-cover .plat { left: 4px; right: 4px; top: 4px; font-size: 8px; padding: 2px 4px; text-align: center; }
@media (max-width: 640px) {
  .my-track[data-kind="short"] { grid-template-columns: 34px 96px 1fr; }
  .my-track[data-kind="short"] .my-track-cover { width: 64px; }
}

/* v29: техпідтримка */
.add-style { display: inline-flex; gap: 6px; align-items: center; margin-top: 14px; padding: 9px 14px; border-radius: 12px; border: 1px dashed var(--border2); font-size: 13px; color: var(--muted); text-decoration: none; }
.add-style b { color: var(--cyan); }
.add-style:hover { border-color: var(--cyan); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* v30: вкладення в техпідтримці */
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 14px; border-radius: 14px; border: 2px dashed var(--border2); background: rgba(255,255,255,.02); cursor: pointer; text-align: center; transition: .2s; }
.drop:hover, .drop.over { border-color: var(--cyan); background: rgba(76, 201, 255, .06); }
.drop-ic { font-size: 26px; }
.drop small { color: var(--muted); font-size: 12px; }
.drop-list { display: grid; gap: 6px; margin-top: 10px; }
.drop-list:empty { display: none; }
.drop-item { font-size: 13px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v31: вхід слухач/артист, кабінет слухача, відповіді в коментарях */
.nav-join { font-weight: 700; }
.role-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.role-tab { font: inherit; font-weight: 800; font-size: 15px; padding: 14px; border-radius: 14px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); cursor: pointer; }
.role-tab.on { background: var(--grad); border-color: transparent; color: #fff; }
.role-form[hidden] { display: none; }
.g-wrap { display: grid; justify-items: center; gap: 14px; margin: 4px 0 8px; }
.or { width: 100%; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.lav-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lav-prev { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--grad); font-size: 34px; }
.lav-prev img { width: 100%; height: 100%; object-fit: cover; }
.my-artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.my-artist { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,.02); text-decoration: none; text-align: center; }
.my-artist:hover { border-color: var(--cyan); }
.my-artist .avatar { width: 72px; height: 72px; }
.my-artist small { color: var(--muted); font-size: 12px; }
.my-comment { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--border); text-decoration: none; }
.my-comment span { overflow-wrap: anywhere; }
.site-follow { border: 1px solid var(--cyan); color: var(--cyan); background: transparent; }
.site-follow.on { background: var(--cyan); color: #04121a; }
.replies { margin-left: 46px; border-left: 2px solid var(--border); padding-left: 12px; }
.comment.is-reply { grid-template-columns: 28px 1fr auto; padding: 10px 0; border-bottom: none; }
.comment.is-reply .avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.c-reply { margin-top: 4px; padding: 0; border: none; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.c-reply:hover { color: var(--cyan); }
.c-mention { color: var(--cyan); font-weight: 700; }
.more-replies > summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 700; padding: 6px 0; list-style: none; }
.more-replies > summary::before { content: '— '; }
.comment-form { display: block; }
.c-row { display: flex; gap: 10px; align-items: flex-end; }
.c-row textarea { min-height: 52px; flex: 1; }
.c-replying { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.comment:target { background: rgba(76, 201, 255, .07); border-radius: 12px; }
@media (max-width: 640px) {
  .c-row { flex-direction: column; align-items: stretch; }
  .replies { margin-left: 18px; }
}

/* v32: скарги, техпідтримка й слухачі в адмінці, Telegram слухача */
.c-acts { display: flex; gap: 14px; align-items: center; }
.c-report { margin-top: 4px; padding: 0; border: none; background: none; color: var(--muted); opacity: .55; font: inherit; font-size: 12.5px; cursor: pointer; }
.c-report:hover { opacity: 1; color: #ff8a8a; }
.c-report.done { opacity: 1; color: var(--ok); }
.tg-box { margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(76, 201, 255, .35); background: rgba(76, 201, 255, .06); font-size: 14px; line-height: 1.5; }
.tg-box.on { border-color: rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .07); }
.admin-search { display: flex; gap: 8px; margin: 0 0 12px; }
.admin-search input { flex: 1; }
.who-cell { display: flex; gap: 10px; align-items: center; }
.sup-head { display: flex; gap: 12px; align-items: center; margin: 0 0 12px; flex-wrap: wrap; }
.sup-list { display: grid; gap: 10px; }
.sup-item.done { opacity: .6; }
.sup-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.sup-text { margin: 10px 0; white-space: pre-line; overflow-wrap: anywhere; }
.sup-answer { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--cyan); color: var(--muted); font-size: 14px; }
.sup-reply { display: flex; gap: 8px; flex: 1; min-width: 260px; }
.sup-reply input { flex: 1; }
.badge-ok { background: rgba(52, 211, 153, .15); color: var(--ok); }
.badge-warn { background: rgba(255, 120, 80, .15); color: #ff9a76; }

/* v33: партія 2 — нижнє меню, поділитися, голосування, стріми, лайки коментарів, статистика, пошук, обрізка, PWA */
.nav-search { font-size: 16px; }
.bnav { display: none; }
@media (max-width: 720px) {
  body.has-bnav { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .bnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(7, 7, 12, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); }
  .bnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; }
  .bnav a i { font-style: normal; font-size: 20px; line-height: 1.1; filter: grayscale(.6); }
  .bnav a.on { color: var(--text); }
  .bnav a.on i { filter: none; }
  .pwa-btn { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
.pwa-btn { position: fixed; right: 16px; bottom: 16px; z-index: 61; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--border2); background: var(--grad); color: #fff; font: 700 14px var(--font-body); box-shadow: 0 8px 28px rgba(43, 127, 255, .4); cursor: pointer; }
.pwa-btn[hidden] { display: none; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.share b { font-size: 13px; color: var(--muted); margin-right: 2px; }
.sh { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); font: 600 13px var(--font-body); text-decoration: none; cursor: pointer; }
.sh:hover { background: var(--surface2); }
.sh[hidden] { display: none; }
.sh-tg { border-color: rgba(42, 171, 238, .5); }
.sh-vb { border-color: rgba(115, 96, 242, .55); }
.sh-fb { border-color: rgba(24, 119, 242, .55); }

.vote-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 16px 0 6px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(255, 212, 0, .35); background: linear-gradient(120deg, rgba(255, 212, 0, .10), rgba(43, 127, 255, .08)); color: var(--text); text-decoration: none; }
.vote-cta span { color: var(--muted); font-size: 14px; }
.vote-cta:hover { border-color: var(--pink); }
.spot-vote .spot-badge { background: var(--grad-gold); color: #111; }
.vote-hero { text-align: center; max-width: 680px; margin: 10px auto 18px; }
.vote-hero h1 { margin-bottom: 8px; }
.vote-last { display: block; text-align: center; margin: 0 auto 16px; max-width: 680px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 212, 0, .08); border: 1px solid rgba(255, 212, 0, .3); color: var(--text); text-decoration: none; }
.vote-list { display: grid; gap: 10px; max-width: 780px; margin: 0 auto; }
.vote-row { display: grid; grid-template-columns: 26px 86px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.vote-row.mine { border-color: var(--pink); background: rgba(255, 212, 0, .06); }
.vote-n { font: 800 16px var(--font-display); color: var(--muted); text-align: center; }
.vote-cover { display: block; width: 86px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: var(--bg2); }
.vote-cover img { width: 100%; height: 100%; object-fit: cover; }
.vote-info { min-width: 0; display: grid; gap: 2px; }
.vote-info a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vote-info small { color: var(--muted); }
.vote-bar { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 4px; }
.vote-bar i { display: block; height: 100%; background: var(--grad-gold); }
.vote-count { font: 800 18px var(--font-display); min-width: 28px; text-align: right; }
.vote-row form { margin: 0; }
@media (max-width: 560px) {
  .vote-row { grid-template-columns: 64px 1fr auto; }
  .vote-n { display: none; }
  .vote-cover { width: 64px; }
  .vote-row form { grid-column: 1 / -1; }
  .vote-row form .btn { width: 100%; }
}

.streams { display: grid; gap: 10px; }
.stream-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 8px; }
.stream-card.is-live { border-color: rgba(251, 113, 133, .5); }
.stream-when { display: grid; text-align: center; min-width: 68px; padding: 8px 6px; border-radius: 12px; background: rgba(43, 127, 255, .12); }
.stream-when b { font: 800 13px var(--font-display); }
.stream-when span { font-size: 20px; font-weight: 800; }
.stream-info { display: grid; gap: 4px; min-width: 0; }
.stream-adm { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.stream-adm form { margin: 0; }
.stream-new { display: grid; grid-template-columns: 210px 1fr 1fr auto; gap: 8px; margin-top: 12px; }
@media (max-width: 760px) { .stream-new { grid-template-columns: 1fr; } .stream-card { grid-template-columns: auto 1fr; } .stream-card .btn { grid-column: 1 / -1; } }

.c-like { background: none; border: 0; color: var(--muted); font: 600 13px var(--font-body); cursor: pointer; padding: 2px 6px 2px 0; }
.c-like.on { color: #ff4d6d; }
.c-like:hover { color: var(--text); }
.c-pinbtn { background: none; border: 0; color: var(--muted); font: 600 12px var(--font-body); cursor: pointer; }
.c-pinbtn:hover { color: var(--pink); }
.comment.is-pinned { background: rgba(255, 212, 0, .05); border-radius: 12px; }
.c-pin { font-size: 12px; font-weight: 700; color: var(--pink); margin-bottom: 2px; }

#stats h3 { font-size: 15px; margin: 18px 0 10px; }
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.st-kpis div { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--border); display: grid; gap: 2px; }
.st-kpis b { font: 800 24px var(--font-display); }
.st-kpis span { color: var(--muted); font-size: 12px; }
.st-kpis em.up { color: var(--ok); font-style: normal; font-weight: 700; }
.st-days { display: flex; align-items: flex-end; gap: 4px; height: 110px; padding-top: 6px; }
.st-days span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.st-days i { display: block; width: 100%; max-width: 26px; border-radius: 6px 6px 2px 2px; background: var(--grad); }
.st-days small { font-size: 10px; color: var(--muted); }
.st-row { display: grid; grid-template-columns: minmax(90px, 140px) 1fr 40px; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; }
.st-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.st-bar i { display: block; height: 100%; background: var(--grad); }
.st-row b { text-align: right; }
.st-table { display: grid; gap: 2px; font-size: 13px; }
.st-th, .st-tr { display: grid; grid-template-columns: 1fr 52px 44px 44px; gap: 8px; padding: 8px 10px; border-radius: 10px; }
.st-th { color: var(--muted); font-weight: 700; }
.st-tr { color: var(--text); text-decoration: none; background: rgba(255,255,255,.025); }
.st-tr:hover { background: var(--surface2); }
.st-tr span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search-big { display: flex; gap: 10px; max-width: 720px; margin: 14px auto 22px; }
.search-big input { flex: 1; font-size: 17px; padding: 14px 16px; border-radius: 14px; }

.crop-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .82); }
.crop-modal[hidden] { display: none; }
.crop-card { width: min(560px, 100%); max-height: 100%; overflow: auto; padding: 18px; border-radius: 20px; background: var(--bg2); border: 1px solid var(--border2); display: grid; gap: 12px; }
.crop-card p { margin: 0; }
.crop-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; touch-action: none; cursor: grab; outline: 2px solid var(--cyan); }
.crop-frame.vert { aspect-ratio: 9 / 16; width: min(300px, 100%, calc((100vh - 260px) * 9 / 16)); justify-self: center; }
.crop-frame img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.crop-zoom { width: 100%; }

@media (max-width: 720px) { .nav-links .nl-main { display: none; } }

/* v34: кнопка видалення коментаря */
.c-del { background: none; border: 0; color: var(--muted); font: 600 12px var(--font-body); cursor: pointer; }
.c-del:hover { color: var(--danger); }

/* v35: блок Spotify на сторінці треку */
.sp-card { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid rgba(30, 215, 96, .25); background: #0b0f0c; padding: 22px; display: grid; gap: 18px; }
.sp-bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(40px) brightness(.45) saturate(1.3); }
.sp-top { position: relative; display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: end; }
.sp-cover { width: 180px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.sp-meta { display: grid; gap: 6px; min-width: 0; }
.sp-badge { justify-self: start; padding: 4px 10px; border-radius: 999px; background: #1ed760; color: #000; font: 800 12px var(--font-body); }
.sp-meta b { font: 800 clamp(24px, 4vw, 38px)/1.1 var(--font-display); overflow-wrap: anywhere; }
.sp-meta span:last-child { color: rgba(255, 255, 255, .8); font-weight: 600; }
.sp-frame { position: relative; width: 100%; height: 152px; border: 0; border-radius: 12px; display: block; }
@media (max-width: 560px) { .sp-top { grid-template-columns: 1fr; justify-items: center; text-align: center; } .sp-cover { width: 70%; } .sp-badge { justify-self: center; } .sp-card { padding: 16px; } }

/* v36: Shorts без заставки — кнопка звуку й підказка */
.sh-snd { position: fixed; z-index: 30; top: 14px; right: max(12px, calc(50% - min(50vw, 28.125dvh) - 64px)); width: 44px; height: 44px; font-size: 20px; border: 1px solid rgba(255,255,255,.18); }
@media (max-width: 720px) { .sh-snd { top: max(8px, calc((100dvh - 100vw * 16 / 9) / 2 - 44px)); right: 8px; width: 34px; height: 34px; font-size: 16px; background: rgba(0,0,0,.5); } }
.sh-tap { position: fixed; z-index: 30; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.25); color: #fff; font: 700 14px var(--font-body); white-space: nowrap; pointer-events: none; animation: shtap 1.6s ease-in-out infinite; }
.sh-tap[hidden] { display: none; }
@keyframes shtap { 50% { transform: translateX(-50%) scale(1.05); } }

/* v37: вітальне вікно 18+ (один раз) */
.consent { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at 50% 35%, rgba(43,127,255,.3), rgba(0,0,0,.9) 70%); backdrop-filter: blur(6px); transition: opacity .3s; }
.consent[hidden] { display: none; }
.consent.gone { opacity: 0; pointer-events: none; }
.consent-box { width: 100%; max-width: 380px; display: grid; gap: 12px; justify-items: center; text-align: center; padding: 24px 20px; border-radius: 22px; background: var(--bg2); border: 1px solid var(--border2); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.consent-logo { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 10px 30px rgba(43,127,255,.6)); }
.consent-box > b { font: 800 20px var(--font-display); }
.consent-box p { margin: 0; color: var(--muted); font-size: 14px; }
.consent-check { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border2); background: rgba(255,255,255,.05); font-size: 14px; cursor: pointer; }
.consent-check input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: #2b7fff; margin: 0; }
.consent-box .btn:disabled { opacity: .45; cursor: not-allowed; }

/* v38: Shorts на телефоні — без кнопок зверху, відео на весь екран */
@media (max-width: 720px) {
  .sh-back2, .sh-snd { display: none; }
  .slide { height: 100dvh; }
  /* ролик цілий (лайки, коменти, кнопки не обрізаються): по ширині екрана, 9:16 */
  .sh-video { width: min(100vw, calc(100dvh * 9 / 16)); height: auto; aspect-ratio: 9 / 16; max-height: 100dvh; }
  .sh-video iframe { inset: 0; width: 100%; height: 100%; min-width: 0; transform: none; }
}

/* v39: обов'язкове підключення Telegram */
.tgc { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 26px 20px; margin: 20px auto; max-width: 520px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border2); }
.tgc-step { padding: 8px 14px; border-radius: 999px; background: rgba(255, 212, 0, .1); border: 1px solid rgba(255, 212, 0, .35); font-size: 14px; }
.tgc-ic { font-size: 54px; line-height: 1; }
.tgc h1 { margin: 0; }
.tgc p { margin: 0; }
.tgc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; text-align: left; width: 100%; }
.tgc-list li { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border); font-size: 14px; }
.tgc-go { width: 100%; font-size: 17px; padding: 16px; background: linear-gradient(120deg, #229ed9, #2aabee); }
.tgc-how { text-align: left; margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; display: grid; gap: 4px; width: 100%; }
.tgc-wait { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; }
.tgc-wait[hidden], .tgc-ok[hidden] { display: none; }
.tgc-ok { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 12px 16px; border-radius: 14px; background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .4); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border2); border-top-color: var(--cyan); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* v40: ім'я артиста помітніше, більші сердечка й плашки, анімація лайка */
.tcard-artist { color: var(--pink); }
.tcard-artist span { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.tcard-artist:hover { color: #fff3a0; }
.tcard-artist .avatar { width: 26px; height: 26px; }
.tcard-meta { gap: 7px; }
.tcard-meta .like-btn, .tcard-meta .meta-pill { font-size: 14px; padding: 6px 12px; }
.like-btn { display: inline-flex; align-items: center; gap: 6px; }
.like-btn .hrt, .c-like .hrt { font-style: normal; color: #ff3d6e; font-size: 1.35em; line-height: 1; display: inline-block; transition: transform .15s; }
.like-btn.on .hrt { color: #fff; }
.c-like.on .hrt { color: #ff3d6e; }
.like-btn:hover .hrt { transform: scale(1.15); }
.like-btn.pop .hrt { animation: hrtpop .45s ease-out; }
@keyframes hrtpop { 0% { transform: scale(1); } 35% { transform: scale(1.7); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
.hrt-fly { position: fixed; z-index: 300; pointer-events: none; color: #ff3d6e; font-style: normal; line-height: 1; text-shadow: 0 2px 8px rgba(255, 61, 110, .5); animation: hrtfly .75s ease-out forwards; }
@keyframes hrtfly { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; } }
@media (max-width: 720px) {
  .tcard-artist span { font-size: 13.5px; }
  .tcard-meta .like-btn, .tcard-meta .meta-pill { font-size: 13px; padding: 5px 10px; }
}
.tcard-meta .like-btn.on, .like-btn.on { color: #fff; background: linear-gradient(120deg, #ff3d6e, #ff7a59); border-color: transparent; }

/* v41: велике серце при лайку (як в Instagram) */
.hrt-big { position: fixed; z-index: 301; pointer-events: none; font-style: normal; line-height: 1; color: #ff3d6e; transform: translate(-50%, -50%) scale(0); filter: drop-shadow(0 8px 30px rgba(255, 61, 110, .65)); animation: hrtbig 1s cubic-bezier(.17, .89, .32, 1.28) forwards; }
@keyframes hrtbig {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-12deg); opacity: 0; }
  15% { transform: translate(-50%, -50%) scale(1.2) rotate(6deg); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(.95) rotate(0); }
  45% { transform: translate(-50%, -50%) scale(1.05); }
  75% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(1.25); opacity: 0; }
}

/* v42: вкладки кабінету переносяться (нічого не обрізається) + галочки сповіщень */
.cab-nav { flex-wrap: wrap; overflow: visible; }
@media (max-width: 720px) { .cab-nav { position: static; } .cab-nav a { font-size: 12.5px; padding: 8px 12px; } }
.nf { display: grid; gap: 8px; text-align: left; }
.nf-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.03); cursor: pointer; }
.nf-row:hover { border-color: var(--border2); }
.nf-row input { width: 22px; height: 22px; flex: 0 0 22px; margin: 1px 0 0; accent-color: #2b7fff; }
.nf-row span { display: grid; gap: 3px; }
.nf-row small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.nf .btn { justify-self: start; }
.tgc-prefs { width: 100%; display: grid; gap: 10px; text-align: left; }

/* v43: SVG-серце й акуратна плашка лайка */
.hrt { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; font-size: inherit; }
.hrt svg { width: 100%; height: 100%; display: block; fill: #ff3d6e; overflow: visible; }
.like-btn:not(.on) .hrt svg, .c-like:not(.on) .hrt svg { fill: none; stroke: #ff3d6e; stroke-width: 2.2; stroke-linejoin: round; }
.like-btn .hrt, .c-like .hrt { font-size: 1em; color: inherit; }
.tcard-meta .like-btn, .like-btn { gap: 7px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); color: var(--text); }
.tcard-meta .like-btn:hover, .like-btn:hover { background: rgba(255, 61, 110, .1); border-color: rgba(255, 61, 110, .35); color: #fff; }
.tcard-meta .like-btn.on, .like-btn.on { background: rgba(255, 61, 110, .16); border-color: rgba(255, 61, 110, .55); color: #fff; }
.like-btn.on .hrt svg { fill: #ff3d6e; filter: drop-shadow(0 0 6px rgba(255, 61, 110, .55)); }
.c-like .hrt { width: 1.1em; height: 1.1em; vertical-align: -2px; }
.hrt-big, .hrt-fly { display: block; width: 1em; height: 1em; }
.hrt-big svg, .hrt-fly svg { width: 100%; height: 100%; display: block; fill: #ff3d6e; }
.hrt-big svg { filter: drop-shadow(0 6px 24px rgba(255, 61, 110, .7)); }

/* v44: значок NZ на треках з Арени, фільтр «На Арені», блок «Як рахуємо» */
.tcard-nz { position: absolute; z-index: 2; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,10,16,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 212, 0, .55); box-shadow: 0 0 14px rgba(255, 212, 0, .35); }
.tcard-nz img { width: 26px; height: 26px; object-fit: contain; }
.dd-arena { display: inline-flex; align-items: center; gap: 6px; }
.dd-arena img { width: 18px; height: 18px; object-fit: contain; }
.how { margin-top: 26px; }
.how h2 { margin-bottom: 14px; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.how-item { display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.how-item b { font-size: 15px; }
.how-item span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.how-item span b { color: var(--text); font-size: inherit; }
.how-nz { width: 18px; height: 18px; vertical-align: -4px; }
.how { margin: 6px 0 16px; padding: 0; border-color: rgba(255, 212, 0, .35); background: linear-gradient(120deg, rgba(255, 212, 0, .07), rgba(43, 127, 255, .06)); }
.how > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; font-size: 15px; }
.how > summary::-webkit-details-marker { display: none; }
.how-arrow { font-style: normal; transition: .2s; opacity: .7; }
.how[open] .how-arrow { transform: rotate(180deg); }
.how .how-grid { padding: 0 16px 16px; }

/* v45: вибір «Я слухач / Я артист» (головна + /signup) */
.hero-right { display: flex; flex-direction: column; align-items: center; gap: 14px; flex: 0 0 auto; }
.join-choice { display: grid; gap: 10px; width: 100%; max-width: 380px; }
.join-choice.big { max-width: 460px; margin: 0 auto; gap: 14px; }
.jc { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; text-decoration: none; color: var(--text); border: 1px solid var(--border2); background: rgba(255,255,255,.04); transition: .2s; }
.jc i { font-style: normal; font-size: 26px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.06); }
.jc span { display: grid; gap: 2px; text-align: left; }
.jc b { font: 800 17px var(--font-display); }
.jc small { color: var(--muted); font-size: 13px; }
.jc em { font-style: normal; font-size: 20px; opacity: .6; transition: .2s; }
.jc:hover em { transform: translateX(4px); opacity: 1; }
.jc-listener:hover { border-color: var(--cyan); background: rgba(76, 201, 255, .08); }
.jc-artist { border-color: rgba(255, 212, 0, .45); background: linear-gradient(120deg, rgba(255, 212, 0, .12), rgba(43, 127, 255, .10)); }
.jc-artist i { background: rgba(255, 212, 0, .18); }
.jc-artist:hover { border-color: var(--pink); }
.big .jc { padding: 20px; }
.jc-mobile { display: none; margin-top: 20px; }
@media (max-width: 860px) { .jc-desktop { display: none; } .jc-mobile { display: grid; } }

/* v46: вікно «Стань слухачем» */
.nz-auth { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: nzfade .18s ease; }
.nz-auth.gone { opacity: 0; transition: opacity .2s; }
@keyframes nzfade { from { opacity: 0; } }
.nz-auth-card { position: relative; width: min(400px, 100%); display: grid; gap: 10px; justify-items: center; text-align: center; padding: 26px 20px 18px; border-radius: 24px; background: radial-gradient(circle at 50% 0, rgba(43,127,255,.25), transparent 60%), var(--bg2); border: 1px solid var(--border2); box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: nzpop .25s cubic-bezier(.2,.9,.3,1.2); }
@keyframes nzpop { from { transform: translateY(12px) scale(.96); opacity: 0; } }
.nz-auth-x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); color: var(--muted); font-size: 20px; cursor: pointer; }
.nz-auth-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 34px; background: var(--grad); box-shadow: 0 10px 30px rgba(43,127,255,.45); }
.nz-auth-t { font: 800 20px var(--font-display); }
.nz-auth-why { margin: 0; color: var(--muted); font-size: 14px; }
.nz-auth-list { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 6px; width: 100%; text-align: left; }
.nz-auth-list li { padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border); font-size: 13.5px; }
.nz-auth-card .btn-block { width: 100%; }
.nz-auth-later { color: var(--muted); margin-top: 2px; }

/* v47: значок нових відповідей, відповіді слухачу */
.nbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ff3d6e; color: #fff; font: 800 11px/1 var(--font-body); font-style: normal; box-shadow: 0 0 0 2px var(--bg); vertical-align: 1px; }
.bnav a i { position: relative; }
.bnav a i .nbadge { position: absolute; top: -4px; right: -10px; font-size: 10px; min-width: 16px; height: 16px; }
.sub-h { font-size: 14px; margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; }
.reply-in { display: flex; gap: 10px; align-items: flex-start; }
.reply-in.fresh { border-color: rgba(255, 61, 110, .5); background: rgba(255, 61, 110, .06); }

/* v48: банер голосування на головній */
.vote-hero-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 0 6px; padding: 22px 24px; border-radius: 24px; text-decoration: none; color: var(--text); border: 1px solid rgba(255, 212, 0, .45); background: linear-gradient(115deg, #1b1606 0%, #12162a 55%, #0b1430 100%); box-shadow: 0 20px 60px -25px rgba(255, 212, 0, .45); transition: transform .2s, box-shadow .2s; }
.vote-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 26px 70px -22px rgba(255, 212, 0, .6); }
.vh-glow { position: absolute; inset: -40% auto auto -10%; width: 60%; height: 180%; background: radial-gradient(closest-side, rgba(255, 212, 0, .22), transparent); filter: blur(10px); animation: vhglow 6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes vhglow { to { transform: translateX(70%); } }
.vh-left { position: relative; display: grid; gap: 8px; min-width: 0; }
.vh-kicker { justify-self: start; padding: 5px 12px; border-radius: 999px; background: rgba(255, 212, 0, .14); border: 1px solid rgba(255, 212, 0, .4); color: #ffe066; font: 800 12px var(--font-body); letter-spacing: .02em; }
.vh-title { font: 800 clamp(22px, 3.2vw, 32px)/1.15 var(--font-display); }
.vh-title em { font-style: normal; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vh-sub { color: rgba(255,255,255,.72); font-size: 14.5px; max-width: 560px; }
.vh-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.vh-btn { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 14px; background: var(--grad-gold); color: #111; font: 800 15px var(--font-body); box-shadow: 0 10px 30px -8px rgba(255, 212, 0, .7); animation: vhpulse 2.2s ease-in-out infinite; }
@keyframes vhpulse { 50% { box-shadow: 0 10px 40px -4px rgba(255, 212, 0, .95); transform: scale(1.03); } }
.vh-count { color: var(--muted); font-size: 13.5px; }
.vh-count b { color: #fff; }
.vh-covers { position: relative; flex: 0 0 230px; height: 150px; }
.vh-cv { position: absolute; top: 50%; width: 96px; height: 96px; object-fit: cover; border-radius: 16px; border: 2px solid rgba(255,255,255,.18); box-shadow: 0 12px 30px rgba(0,0,0,.55); transition: transform .3s; }
.vh-cv0 { left: 0; transform: translateY(-50%) rotate(-10deg); }
.vh-cv1 { left: 48px; transform: translateY(-58%) rotate(-3deg); z-index: 2; }
.vh-cv2 { left: 96px; transform: translateY(-46%) rotate(5deg); z-index: 3; }
.vh-cv3 { left: 134px; transform: translateY(-54%) rotate(12deg); z-index: 1; }
.vote-hero-cta:hover .vh-cv1 { transform: translateY(-64%) rotate(-5deg); }
.vote-hero-cta:hover .vh-cv2 { transform: translateY(-52%) rotate(8deg); }
.vh-trophy { position: absolute; right: -4px; top: -6px; z-index: 4; font-size: 40px; filter: drop-shadow(0 6px 14px rgba(255, 212, 0, .6)); animation: vhtrophy 3s ease-in-out infinite; }
@keyframes vhtrophy { 50% { transform: translateY(-6px) rotate(8deg); } }
@media (max-width: 720px) {
  .vote-hero-cta { flex-direction: column-reverse; align-items: stretch; padding: 18px; }
  .vh-covers { flex: none; height: 110px; width: 230px; align-self: center; }
  .vh-cv { width: 78px; height: 78px; }
  .vh-btn { flex: 1; justify-content: center; }
}

/* v49: картка «Тут може бути твій трек», значок «Новачок», підвантаження */
.cta-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 22px 16px; text-decoration: none; color: var(--text); border: 2px dashed rgba(255, 212, 0, .45); background: radial-gradient(circle at 50% 30%, rgba(255, 212, 0, .10), transparent 65%), var(--surface); min-height: 280px; }
.cta-card:hover { border-color: var(--pink); }
.cta-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: rgba(255, 212, 0, .15); }
.cta-card b { font: 800 17px var(--font-display); }
.k-rookie { color: #7cf29c; font-weight: 800; }
.more-loader { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 24px 0; color: var(--muted); font-size: 14px; }

/* ================= v50: світла тема + перемикач ☀️ / 🌙 / Авто ================= */
.theme-sw { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--border2); background: var(--surface); flex: 0 0 auto; }
.theme-sw button { font: inherit; font-size: 12px; font-weight: 700; line-height: 1; min-width: 32px; height: 28px; padding: 0 9px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; transition: .15s; }
.theme-sw button:hover { color: var(--text); background: var(--surface2); }
html:not([data-theme-pref]) .theme-sw [data-t="auto"],
html[data-theme-pref="auto"] .theme-sw [data-t="auto"],
html[data-theme-pref="light"] .theme-sw [data-t="light"],
html[data-theme-pref="dark"] .theme-sw [data-t="dark"] { background: var(--grad); color: #fff; }
.nav-links { margin-left: auto; }
.wrap.narrow .nav { flex-wrap: wrap; }
.wrap.narrow .theme-sw { order: 1; margin-left: auto; }
.wrap.narrow .nav-links { order: 2; width: 100%; margin-left: 0; justify-content: center; }
@media (max-width: 720px) {
  .wrap.narrow .nav-links { justify-content: flex-start; }
  .theme-sw { order: 1; margin-left: auto; }
  .nav-links { order: 2; margin-left: 0; }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f0e7;
  --bg2: #fffcf6;
  --surface: #fffcf6;
  --surface2: #efe8db;
  --border: rgba(80, 58, 20, .11);
  --border2: rgba(80, 58, 20, .2);
  --text: #1e1b16;
  --muted: #6b6356;
  --pink: #855400;   /* жовтий NZ для тексту — темніший, щоб читався */
  --cyan: #1a5fc8;
  --ok: #03694c;
  --warn: #a53a0a;
  --danger: #a3102f;
  --grad-gold: linear-gradient(120deg, #ffe45c, #ffd400 45%, #ffb300);
  --shadow: 0 1px 2px rgba(80, 58, 20, .06), 0 10px 30px -14px rgba(80, 58, 20, .22);
  --tint: rgba(80, 58, 20, .045);
  --tint2: rgba(80, 58, 20, .08);
}
html[data-theme="light"] body::before { opacity: .2; }
html[data-theme="light"] body::after { opacity: .35; background: radial-gradient(circle, #ffd400, transparent 65%); }

/* Мʼякі тіні замість темряви */
html[data-theme="light"] .card, html[data-theme="light"] .tcard, html[data-theme="light"] .acard, html[data-theme="light"] .stat-card,
html[data-theme="light"] .ad, html[data-theme="light"] .vote-row, html[data-theme="light"] .stream-card, html[data-theme="light"] .tgc,
html[data-theme="light"] .spot, html[data-theme="light"] .cab-head, html[data-theme="light"] .founder, html[data-theme="light"] .promo,
html[data-theme="light"] .cta-card, html[data-theme="light"] .jc, html[data-theme="light"] .hero { box-shadow: var(--shadow); }
html[data-theme="light"] .tcard { background: var(--surface); }
html[data-theme="light"] .tcard:hover, html[data-theme="light"] .acard:hover { box-shadow: 0 22px 44px -24px rgba(43, 127, 255, .45); }
html[data-theme="light"] .acard:hover { background: var(--surface); }

/* Герой і банери */
html[data-theme="light"] .hero { background: linear-gradient(135deg, #fff3cf 0%, #fffcf6 45%, #e9f0ff 100%); }
html[data-theme="light"] .hero::after { background: radial-gradient(700px 240px at 15% 0%, rgba(43,127,255,.16), transparent 60%), radial-gradient(500px 220px at 90% 100%, rgba(255,212,0,.22), transparent 60%); }
html[data-theme="light"] .hero-title { background: linear-gradient(120deg, #e0a800, #c88a00 45%, #a86a00); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 6px 18px rgba(255,180,0,.25)); }
html[data-theme="light"] .vh-title em { background: linear-gradient(120deg, #d99e00, #a86a00); -webkit-background-clip: text; background-clip: text; }
html[data-theme="light"] .vote-hero-cta { background: linear-gradient(115deg, #ffe9a3 0%, #fff6dc 45%, #e2ebff 100%); border-color: rgba(230, 180, 0, .5); box-shadow: 0 18px 50px -28px rgba(200, 150, 0, .55); }
html[data-theme="light"] .vh-glow { background: radial-gradient(closest-side, rgba(255, 212, 0, .35), transparent); }
html[data-theme="light"] .vh-kicker { color: #7a4f00; background: rgba(255, 212, 0, .28); border-color: rgba(220, 170, 0, .5); }
html[data-theme="light"] .vh-sub { color: var(--muted); }
html[data-theme="light"] .vh-count b { color: var(--text); }
html[data-theme="light"] .vh-cv { border-color: #fffcf6; box-shadow: 0 12px 26px rgba(80, 58, 20, .22); }
html[data-theme="light"] .live { background: rgba(255,212,0,.18); border-color: rgba(220,170,0,.45); }
html[data-theme="light"] .live i, html[data-theme="light"] .logo .dot { background: #ffc400; box-shadow: 0 0 10px rgba(255,196,0,.8); }
html[data-theme="light"] .live-off { background: var(--surface); border-color: var(--border2); }
html[data-theme="light"] .live-off i { background: var(--muted); box-shadow: none; }
html[data-theme="light"] .ad-master .bars rect { fill: #ffc400; }
html[data-theme="light"] .cta-card:hover, html[data-theme="light"] .vote-row.mine, html[data-theme="light"] .jc-artist:hover, html[data-theme="light"] .vote-cta:hover { border-color: #e6b400; }
html[data-theme="light"] .cta-card { border-color: rgba(220, 170, 0, .55); }

/* Шапка й нижнє меню */
html[data-theme="light"] .nav-links .accent { color: #fff; }
html[data-theme="light"] .logo-img { filter: drop-shadow(0 6px 14px rgba(43,127,255,.3)); }
html[data-theme="light"] .bnav { background: rgba(255, 252, 246, .95); box-shadow: 0 -6px 20px -12px rgba(80, 58, 20, .25); }

/* Поля вводу та дрібні плашки */
html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="password"], html[data-theme="light"] input[type="url"],
html[data-theme="light"] input[type="number"], html[data-theme="light"] input[type="tel"], html[data-theme="light"] textarea, html[data-theme="light"] select { background: #fffdf9; border-color: var(--border2); }
html[data-theme="light"] input:-webkit-autofill, html[data-theme="light"] input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fffdf9 inset; }
html[data-theme="light"] .dropzone, html[data-theme="light"] .chips label, html[data-theme="light"] .kind-switch label, html[data-theme="light"] .what-card,
html[data-theme="light"] .yt-btns button, html[data-theme="light"] .kind-guide > div, html[data-theme="light"] .meta-pill,
html[data-theme="light"] .tcard-meta .meta-pill, html[data-theme="light"] .dd-chip, html[data-theme="light"] .item-form .fsec,
html[data-theme="light"] .fsec-tag.opt, html[data-theme="light"] .auto-check, html[data-theme="light"] .drop, html[data-theme="light"] .drop-item,
html[data-theme="light"] .my-artist, html[data-theme="light"] .nf-row, html[data-theme="light"] .tgc-list li, html[data-theme="light"] .jc i,
html[data-theme="light"] .nz-auth-list li, html[data-theme="light"] .nz-auth-x, html[data-theme="light"] .cover-prev, html[data-theme="light"] .st-kpis div,
html[data-theme="light"] .st-tr, html[data-theme="light"] .how-item, html[data-theme="light"] .gate-check, html[data-theme="light"] .consent-check,
html[data-theme="light"] .badge-cancelled, html[data-theme="light"] .seg { background: var(--tint); }
html[data-theme="light"] .dd-chip.on, html[data-theme="light"] .chips label:has(input:checked), html[data-theme="light"] .kind-switch label:has(input:checked),
html[data-theme="light"] .what-card:has(input:checked), html[data-theme="light"] .yt-btns button.on { background: var(--grad); }
html[data-theme="light"] .item-form .fsec { background: #fffdf9; }
html[data-theme="light"] .jc { background: var(--surface); }
html[data-theme="light"] .jc-listener:hover { background: rgba(10, 102, 194, .05); }
html[data-theme="light"] .jc-artist { background: linear-gradient(120deg, rgba(255, 212, 0, .2), rgba(43, 127, 255, .08)); }
html[data-theme="light"] .jc-artist i { background: rgba(255, 212, 0, .3); }
html[data-theme="light"] code.pwd, html[data-theme="light"] .inv-code { background: var(--tint2); }
html[data-theme="light"] .abar, html[data-theme="light"] .vote-bar, html[data-theme="light"] .st-bar { background: var(--tint2); }
html[data-theme="light"] .ad-tag { background: rgba(255, 252, 246, .9); }
html[data-theme="light"] .avatar { border-color: rgba(80, 58, 20, .08); }
html[data-theme="light"] .ad-site .win, html[data-theme="light"] .ad-video .film { fill: rgba(80,58,20,.04); stroke: rgba(80,58,20,.25); }
html[data-theme="light"] .ad-site .ln { fill: rgba(80,58,20,.45); }
html[data-theme="light"] .ad-site .ln2 { fill: rgba(80,58,20,.2); }
html[data-theme="light"] .ad-video .hole { fill: rgba(80,58,20,.35); }
html[data-theme="light"] .dd-panel { background: var(--surface); box-shadow: 0 24px 60px -20px rgba(80, 58, 20, .35); }
html[data-theme="light"] .seg input:checked + span { background: var(--violet); color: #fff; }
html[data-theme="light"] audio { filter: none; }

/* Білий текст на синьому градієнті (обрані фільтри, вкладки тощо) */
html[data-theme="light"] .kind-switch label:has(input:checked), html[data-theme="light"] .dd.has > summary, html[data-theme="light"] .dd-chip.on,
html[data-theme="light"] .yt-btns button.on, html[data-theme="light"] .what-card:has(input:checked), html[data-theme="light"] .dd-clean.on,
html[data-theme="light"] .rules h2 span, html[data-theme="light"] .site-follow.on { color: #fff; }
html[data-theme="light"] .what-card:has(input:checked) small, html[data-theme="light"] .yt-btns button.on small { color: rgba(255,255,255,.9); }

/* Лайки */
html[data-theme="light"] .tcard-meta .like-btn, html[data-theme="light"] .like-btn { background: var(--tint); border-color: var(--border); color: var(--text); }
html[data-theme="light"] .tcard-meta .like-btn:hover, html[data-theme="light"] .like-btn:hover { background: rgba(255, 61, 110, .08); border-color: rgba(225, 29, 72, .35); color: var(--text); }
html[data-theme="light"] .tcard-meta .like-btn.on, html[data-theme="light"] .like-btn.on { background: rgba(255, 61, 110, .12); border-color: rgba(225, 29, 72, .45); color: #881337; }
html[data-theme="light"] .c-like.on { color: #c0123c; }
html[data-theme="light"] .c-report:hover { color: #be123c; }

/* Кольоровий текст — темніші відтінки, щоб читалось */
html[data-theme="light"] .alert-error { background: rgba(225, 29, 72, .07); border-color: rgba(225, 29, 72, .3); color: #881337; }
html[data-theme="light"] .alert-info { background: rgba(10, 102, 194, .06); border-color: rgba(10, 102, 194, .28); color: #0a4a85; }
html[data-theme="light"] .alert-ok, html[data-theme="light"] .tg-on { background: rgba(4, 120, 87, .07); border-color: rgba(4, 120, 87, .3); color: #065f46; }
html[data-theme="light"] .tag-mood { background: rgba(190, 24, 93, .07); border-color: rgba(190, 24, 93, .25); color: #a8144f; }
html[data-theme="light"] .tcard-tags .m, html[data-theme="light"] .post-badge, html[data-theme="light"] .k-post { color: #a8144f; }
html[data-theme="light"] .k-new { color: #03694c; }
html[data-theme="light"] .k-rookie { color: #126b33; }
html[data-theme="light"] .badge-warn { color: #a53a0a; }
html[data-theme="light"] .tcard-artist:hover { color: #6b4500; }
html[data-theme="light"] .rank-n.n1 { color: #d9a400; text-shadow: 0 0 10px rgba(255, 196, 0, .45); }
html[data-theme="light"] .rank-n.n2 { color: #646c7a; }
html[data-theme="light"] .rank-n.n3 { color: #b8692a; }
html[data-theme="light"] .rules p, html[data-theme="light"] .rules li { color: #2a2a38; }
html[data-theme="light"] .cover-block.need .cover-need { color: #7a5000; }
html[data-theme="light"] .badge-gold, html[data-theme="light"] .badge-featured { background: rgba(255, 212, 0, .25); }

/* Те, що лежить на обкладинках/темних блоках — лишається білим */
html[data-theme="light"] .sp-card, html[data-theme="light"] .embed-fallback span, html[data-theme="light"] .scard-info b { color: #fff; }

/* Вікна */
html[data-theme="light"] .consent { background: radial-gradient(circle at 50% 35%, rgba(43,127,255,.22), rgba(80, 58, 20, .55) 75%); }
html[data-theme="light"] .nz-auth { background: rgba(80, 58, 20, .45); }
html[data-theme="light"] .nz-auth-card { background: radial-gradient(circle at 50% 0, rgba(43,127,255,.14), transparent 60%), var(--surface); }
html[data-theme="light"] .consent-box, html[data-theme="light"] .nz-auth-card, html[data-theme="light"] .crop-card { box-shadow: 0 30px 80px -20px rgba(80, 58, 20, .4); }

/* v51: Музика списком + «слухати підряд» (міні-плеєр унизу, черга, вибір галочками) */
.lbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.lbar-all { display: inline-flex; align-items: center; gap: 8px; }
.lbar-all svg { width: 18px; height: 18px; fill: currentColor; }
.lbar-hint { margin: -6px 0 12px; }
.artist-lbar { margin-top: 18px; }
.vsw { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.vsw button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.vsw button.on { background: var(--surface2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border2); }

.tlist { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
.trow { display: grid; grid-template-columns: 26px 56px minmax(0, 1fr) auto 40px; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 12px; transition: background .15s; }
.trow:hover { background: var(--surface2); }
.trow.sel { background: rgba(43, 127, 255, .12); }
.trow.now { background: rgba(255, 212, 0, .1); box-shadow: inset 3px 0 0 #ffd400; }
.trow-chk { position: relative; display: grid; place-items: center; width: 26px; height: 26px; cursor: pointer; }
.trow-chk input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.trow-chk i { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border2); transition: .15s; }
.trow-chk input:checked + i { background: var(--violet); border-color: var(--violet); box-shadow: inset 0 0 0 3px var(--bg2); }
.trow-chk input:focus-visible + i { outline: 2px solid var(--cyan); outline-offset: 2px; }
.trow-cover { position: relative; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--surface2); cursor: pointer; }
.trow-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trow-pl, .trow-eq { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); opacity: 0; transition: .15s; }
.trow-pl svg { width: 26px; height: 26px; fill: #fff; }
.trow-cover:hover .trow-pl { opacity: 1; }
.trow-eq { display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 16px; }
.trow-eq i { width: 4px; height: 8px; border-radius: 2px; background: #ffd400; }
.trow.now .trow-eq { opacity: 1; }
.trow.now .trow-cover:hover .trow-eq { opacity: 0; }
.nzp-on .trow.now .trow-eq i { animation: nzeq .9s ease-in-out infinite; }
.nzp-on .trow.now .trow-eq i:nth-child(2) { animation-delay: .2s; }
.nzp-on .trow.now .trow-eq i:nth-child(3) { animation-delay: .4s; }
@keyframes nzeq { 0%, 100% { height: 6px; } 50% { height: 22px; } }
.trow-main { min-width: 0; }
.trow-title { display: block; font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow-title:hover { text-decoration: underline; }
.trow.now .trow-title { color: var(--pink); }
.trow-18 { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--danger); color: var(--danger); vertical-align: 2px; }
.trow-sub { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.trow-sub a { color: var(--muted); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.trow-sub a:hover { color: var(--text); }
.trow-sub i { font-style: normal; opacity: .6; }
.trow-sub span { overflow: hidden; text-overflow: ellipsis; }
.trow-nz { font-size: 11px; color: var(--pink); font-weight: 800; }
.trow-like { white-space: nowrap; }
.trow-play { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--border2); background: var(--surface); color: var(--text); cursor: pointer; transition: .15s; }
.trow-play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 2px; }
.trow-play:hover, .trow.now .trow-play { background: #ffd400; border-color: #ffd400; color: #111; }

/* Міні-плеєр */
.nzp { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: rgba(12, 12, 20, .97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border2); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .6); }
.nzp[hidden] { display: none; }
body.has-nzp { padding-bottom: calc(var(--nzp-h, 90px) + 10px); }
.nzp-bar { display: flex; align-items: center; gap: 14px; max-width: 1180px; margin: 0 auto; padding: 8px 16px; }
.nzp-media { flex: none; border-radius: 10px; overflow: hidden; background: #000; }
.nzp-yt { width: 128px; height: 72px; }
.nzp-yt iframe, .nzp-fr { display: block; width: 100%; height: 100%; border: 0; }
.nzp-sp, .nzp-fr { display: none; }
.nzp[data-mode="sp"] .nzp-yt, .nzp[data-mode="fr"] .nzp-yt { display: none; }
.nzp[data-mode="sp"] .nzp-media, .nzp[data-mode="fr"] .nzp-media { width: 320px; height: 80px; background: transparent; }
.nzp[data-mode="sp"] .nzp-sp { display: block; }
.nzp[data-mode="fr"] .nzp-fr { display: block; }
.nzp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nzp-t { font-weight: 800; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nzp-a { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nzp-ctl { display: flex; align-items: center; gap: 4px; }
.nzp-ctl button { position: relative; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
.nzp-ctl button:hover { background: var(--surface2); }
.nzp-ctl svg { width: 24px; height: 24px; fill: currentColor; }
.nzp-ctl .nzp-pp { width: 50px; height: 50px; background: #ffd400; color: #111; }
.nzp-ctl .nzp-pp:hover { background: #ffe14d; }
.nzp-ctl .nzp-pp svg { width: 28px; height: 28px; }
.nzp-ctl .nzp-x svg { width: 18px; height: 18px; opacity: .7; }
.nzp-n { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; font-weight: 800; line-height: 16px; background: var(--violet); color: #fff; }
.nzp-q { max-width: 1180px; margin: 0 auto; padding: 12px 16px 4px; max-height: min(50vh, 420px); overflow: auto; border-bottom: 1px solid var(--border); }
.nzp-q[hidden] { display: none; }
.nzp-qh { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nzp-qh [hidden] { display: none; }
.nzp-qnote { margin: 6px 0 8px; }
.nzp-ql { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.nzp-ql li { counter-increment: q; }
.nzp-ql button { width: 100%; display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nzp-ql button::before { content: counter(q); min-width: 20px; color: var(--muted); font-size: 12px; }
.nzp-ql button:hover { background: var(--surface2); }
.nzp-ql li.on button { background: rgba(255, 212, 0, .12); }
.nzp-ql li.on span { color: var(--pink); font-weight: 800; }
.nzp-ql small { color: var(--muted); margin-left: auto; white-space: nowrap; }
html.nzp-loading .wrap { opacity: .55; transition: opacity .2s .1s; }

/* Панель «Вибрано: N» */
.nzsel { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 69; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; border: 1px solid var(--border2); background: rgba(12, 12, 20, .97); box-shadow: 0 12px 40px -10px rgba(0, 0, 0, .7); white-space: nowrap; }
.nzsel[hidden], .nzsel [hidden] { display: none; }
body.has-nzp .nzsel { bottom: calc(var(--nzp-h, 90px) + 14px); }
body.has-nzsel { padding-bottom: 80px; }
body.has-nzp.has-nzsel { padding-bottom: calc(var(--nzp-h, 90px) + 80px); }
.nzsel-c i { font-style: normal; }
.nzsel-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--surface2); color: var(--text); cursor: pointer; }

@media (max-width: 720px) {
  .trow { grid-template-columns: 24px 48px minmax(0, 1fr) 36px; gap: 10px; padding: 6px 4px; }
  .trow-cover { width: 48px; height: 48px; }
  .trow-like { display: none; }
  .trow-play { width: 36px; height: 36px; }
  .tlist { padding: 4px; }
  .lbar-all { flex: 1; justify-content: center; }
  .nzp { bottom: calc(62px + env(safe-area-inset-bottom)); }
  .nzp-bar { gap: 10px; padding: 6px 8px; flex-wrap: wrap; }
  .nzp-yt { width: 88px; height: 50px; }
  .nzp[data-mode="sp"] .nzp-media, .nzp[data-mode="fr"] .nzp-media { width: 100%; order: 3; }
  .nzp-ctl { gap: 0; }
  .nzp-ctl button { width: 38px; height: 38px; }
  .nzp-ctl .nzp-pp { width: 44px; height: 44px; }
  .nzp-q { max-height: 45vh; }
  body.has-bnav.has-nzp { padding-bottom: calc(var(--nzp-h, 70px) + 72px + env(safe-area-inset-bottom)); }
  .nzsel { bottom: calc(72px + env(safe-area-inset-bottom)); left: 8px; right: 8px; transform: none; justify-content: space-between; gap: 6px; padding: 6px 6px 6px 14px; }
  .nzsel .btn { padding: 8px 11px; font-size: 13px; }
  .nzsel-x { flex: none; }
  .nzsel-c i { display: none; }
  .nzsel-c b { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 13px; background: var(--violet); color: #fff; font-size: 13px; }
  body.has-nzp .nzsel { bottom: calc(var(--nzp-h, 70px) + 72px + env(safe-area-inset-bottom)); }
  body.has-bnav.has-nzsel { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
  body.has-bnav.has-nzp.has-nzsel { padding-bottom: calc(var(--nzp-h, 70px) + 136px + env(safe-area-inset-bottom)); }
}

html[data-theme="light"] .nzp, html[data-theme="light"] .nzsel { background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 26px -14px rgba(80, 58, 20, .35); }
html[data-theme="light"] .nzsel { box-shadow: 0 12px 36px -12px rgba(80, 58, 20, .45); }
html[data-theme="light"] .trow.now { background: rgba(255, 212, 0, .16); box-shadow: inset 3px 0 0 #e6b800; }
html[data-theme="light"] .trow.sel { background: rgba(43, 127, 255, .09); }
html[data-theme="light"] .tlist { box-shadow: var(--shadow); }

/* v52: кабінет — платформа під назвою; телефон не «перефарбовує» темну тему */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
.mt-plat { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.mt-dot { width: 8px; height: 8px; border-radius: 50%; background: #888; flex: none; }
.mt-dot.plat-youtube, .mt-dot.plat-ytmusic { background: #ff2d2d; }
.mt-dot.plat-spotify { background: #1ed760; }
.mt-dot.plat-tiktok { background: #25f4ee; }
.mt-dot.plat-apple { background: #fa57c1; }
.mt-dot.plat-soundcloud { background: #ff7700; }

/* v53: кабінет — квадратні обкладинки (стандарт релізу 1:1) */
.my-track:not([data-kind="short"]) .my-track-cover { aspect-ratio: 1 / 1; width: 100%; max-width: 104px; justify-self: center; }
.mt-plat { display: flex; }

/* v54: плейлист — видно, що грає і що це (кліп/трек), відео більшим; квадратні релізи в картках з розмитими боками */
.trow-kind { flex: none; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; letter-spacing: .02em; }
.trow-kind.k-clip { background: rgba(230, 33, 23, .14); color: #ff6b63; }
.trow-kind.k-track { background: rgba(43, 127, 255, .14); color: #6aa8ff; }
html[data-theme="light"] .trow-kind.k-clip { background: rgba(230, 33, 23, .1); color: #b3170f; }
html[data-theme="light"] .trow-kind.k-track { background: rgba(43, 127, 255, .1); color: #1a5fc8; }
.trow-now { display: none; flex: none; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: #ffd400; color: #111; }
.trow.now .trow-now { display: inline-block; }
.trow-now::before { content: '⏸ Пауза'; }
.nzp-on .trow-now::before { content: '▶ Зараз грає'; }
.nzp-k { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--pink); }
.nzp.is-playing .nzp-k::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #34d399; vertical-align: 1px; animation: nzblink 1.2s ease-in-out infinite; }
@keyframes nzblink { 50% { opacity: .25; } }
/* Кнопка «розгорнути відео» — лише коли грає YouTube */
.nzp:not([data-mode="yt"]) .nzp-big { display: none; }
.nzp.big .nzp-big { background: var(--surface2); color: var(--pink); }
.nzp.big[data-mode="yt"] .nzp-media { position: absolute; right: 16px; bottom: calc(100% + 10px); width: min(560px, calc(100vw - 32px)); height: auto; aspect-ratio: 16 / 9; border-radius: 14px; box-shadow: 0 20px 60px -10px rgba(0, 0, 0, .7); border: 1px solid var(--border2); }
.nzp.big[data-mode="yt"] .nzp-yt { width: 100%; height: 100%; }
@media (max-width: 720px) {
  .nzp.big[data-mode="yt"] .nzp-media { right: 8px; left: 8px; width: auto; }
  .trow-sub a { max-width: 40%; }
}

/* Картки: трек/реліз — квадрат цілим по центру, боки — розмита збільшена копія; кліп — на всю ширину */
.tcard-cover .tc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) brightness(.75) saturate(1.25); transform: scale(1.9); }
.tcard-cover .tc-art { position: absolute; top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 1 / 1; object-fit: cover; transform: translateX(-50%); box-shadow: 0 0 30px rgba(0, 0, 0, .45); }
.tcard:hover .tcard-cover .tc-bg { transform: scale(1.95); }
.tcard:hover .tcard-cover .tc-art { transform: translateX(-50%) scale(1.03); }
.nzp.needtap .nzp-pp { animation: nztap 1s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(255, 212, 0, .6); }
@keyframes nztap { 50% { box-shadow: 0 0 0 10px rgba(255, 212, 0, 0); transform: scale(1.08); } }
/* v55: форма — обкладинка треку квадратна (превʼю і кроп 1:1) */
.cover-prev.sq { flex-basis: 110px; aspect-ratio: 1 / 1; }
.crop-frame.sq { aspect-ratio: 1 / 1; width: min(360px, 100%, calc(100vh - 260px)); justify-self: center; }
.url-note { margin: 6px 0 0; }

/* v56: плеєр — смуга прогресу з часом і перемоткою, еквалайзер біля назви, помітні ✕; «Мій плейлист» */
.nzp-prog { position: absolute; left: 0; right: 0; top: -7px; height: 14px; cursor: pointer; touch-action: none; z-index: 2; }
.nzp-track { position: absolute; left: 0; right: 0; top: 5px; height: 4px; background: var(--border2); transition: height .15s, top .15s; }
.nzp-prog:hover .nzp-track, .nzp-prog:focus-visible .nzp-track { top: 4px; height: 6px; }
.nzp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #ffd400; }
.nzp-fill::after { content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #ffd400; box-shadow: 0 0 0 3px rgba(255, 212, 0, .25); opacity: 0; transition: opacity .15s; }
.nzp-prog:hover .nzp-fill::after, .nzp.is-playing .nzp-fill::after { opacity: 1; }
.nzp-prog:focus-visible { outline: none; }
.nzp-tl { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nzp-eq { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.nzp-eq i { width: 3px; height: 4px; border-radius: 1px; background: #ffd400; }
.nzp.is-playing .nzp-eq i { animation: nzeq2 .9s ease-in-out infinite; }
.nzp.is-playing .nzp-eq i:nth-child(2) { animation-delay: .25s; }
.nzp.is-playing .nzp-eq i:nth-child(3) { animation-delay: .5s; }
@keyframes nzeq2 { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.nzp-a2 { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.nzp-time { flex: none; font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* Закрити плеєр — з підписом */
.nzp-ctl .nzp-x { width: auto; height: 38px; gap: 6px; padding: 0 12px 0 9px; margin-left: 6px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--border2); font: inherit; font-size: 13px; font-weight: 700; }
.nzp-ctl .nzp-x svg { width: 18px; height: 18px; opacity: 1; }
.nzp-ctl .nzp-x:hover { border-color: var(--danger); color: var(--danger); background: transparent; }
/* Велике відео — великий ✕ поверх */
.nzp-bigx { display: none; }
.nzp.big[data-mode="yt"] .nzp-bigx { display: grid; place-items: center; position: absolute; top: 8px; right: 8px; z-index: 3; width: 44px; height: 44px; padding: 0; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; background: rgba(0, 0, 0, .72); color: #fff; font-size: 22px; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
.nzp.big[data-mode="yt"] .nzp-bigx:hover { background: #e62117; border-color: #e62117; }

/* Кнопка «＋ В плейлист / ✓ У плейлисті» */
.pl-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--border2); background: var(--surface); color: var(--text); font: inherit; font-weight: 800; cursor: pointer; transition: .15s; }
.pl-btn i { font-style: normal; font-size: 18px; line-height: 1; }
.pl-btn:hover { border-color: var(--violet); color: var(--violet); }
.pl-btn.on { background: rgba(52, 211, 153, .14); border-color: rgba(52, 211, 153, .6); color: #34d399; }
html[data-theme="light"] .pl-btn.on { background: rgba(4, 120, 87, .1); border-color: rgba(4, 120, 87, .5); color: #047857; }
.pl-btn.pop { animation: plpop .35s ease; }
@keyframes plpop { 50% { transform: scale(1.25); } }
.pl-btn.pl-txt { width: auto; height: auto; padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.pl-btn.pl-txt i { font-size: 16px; }
.tcard-meta .pl-btn:not(.pl-txt) { width: 32px; height: 32px; }
.trow { grid-template-columns: 26px 56px minmax(0, 1fr) auto 36px 40px; }
.trow.plr { grid-template-columns: 26px 56px minmax(0, 1fr) auto auto 32px 40px; }
.nzp-ql li { display: flex; align-items: center; gap: 6px; }
.nzp-ql li > button:first-child { flex: 1; min-width: 0; }
.nzp-ql .pl-btn { width: 32px; height: 32px; }

/* Сторінка «Мій плейлист» */
.pl-guest { margin: -4px 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--border2); background: var(--surface); font-size: 14px; }
.pl-bar { justify-content: flex-start; }
.pl-move { display: flex; flex-direction: column; gap: 2px; }
.pl-move button { width: 30px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 10px; cursor: pointer; }
.pl-move button:hover { color: var(--text); border-color: var(--border2); }
.pl-rm { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--muted); font-size: 15px; cursor: pointer; }
.pl-rm:hover { color: var(--danger); border-color: var(--danger); }
.trow.moved { animation: plmoved .5s ease; }
@keyframes plmoved { 0% { background: rgba(43, 127, 255, .22); } }
.pl-empty .btn { display: inline-flex; }

@media (max-width: 720px) {
  .trow { grid-template-columns: 24px 48px minmax(0, 1fr) 34px 36px; }
  .trow.plr { grid-template-columns: 22px 44px minmax(0, 1fr) auto 30px 34px; gap: 8px; }
  .trow .pl-btn { width: 34px; height: 34px; }
  .nzp-ctl .nzp-x { width: 38px; padding: 0; margin-left: 2px; justify-content: center; border-color: var(--border2); }
  .nzp-ctl .nzp-x span { display: none; }
  .nzp-ctl .nzp-big { display: none; }
  .nzp[data-mode="yt"] .nzp-ctl .nzp-big { display: grid; }
  .nzp-a2 { gap: 6px; }
  .nzp-a { overflow: hidden; text-overflow: ellipsis; }
  .nzp.big[data-mode="yt"] .nzp-bigx { width: 40px; height: 40px; }
  .pl-bar .btn { flex: 1; justify-content: center; }
}
@media (max-width: 720px) {
  .nzp-bar { row-gap: 4px; }
  .nzp-info { flex: 1 1 0; }
  .nzp-ctl { order: 4; width: 100%; justify-content: space-between; padding: 0 2px; }
  .nzp-k { font-size: 10px; }
}
@media (max-width: 720px) { .trow.now .trow-sub > span, .trow.now .trow-sub > i { display: none; } }
@media (max-width: 720px) { .trow.plr .trow-sub > span, .trow.plr .trow-sub > i, .trow.plr .trow-nz { display: none; } }
@media (max-width: 720px) { .trow .trow-sub > span, .trow .trow-sub > i { display: none; } .trow-sub a { max-width: none; } }
.follow-note { margin: 8px 0 0; }
.follow-note:empty { display: none; }
.follow-note a { font-weight: 700; }


/* v57: пошук (/tracks, /artists, /search) — поле в стилі сайту, іконка зліва, мʼяке світіння при фокусі */
.search-big { align-items: stretch; gap: 8px; }
.search-big input[type="search"] { flex: 1; min-width: 0; width: auto; height: 52px; padding: 0 16px 0 48px; border-radius: 16px; border: 1px solid var(--border2); color: var(--text); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .2s, box-shadow .2s, background-color .2s;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8fa3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") no-repeat 17px center / 20px 20px; }
.search-big input[type="search"]::placeholder { color: var(--muted); opacity: .85; }
.search-big input[type="search"]:hover { border-color: rgba(43, 127, 255, .45); }
.search-big input[type="search"]:focus { outline: none; border-color: var(--violet); background-color: var(--surface2); box-shadow: 0 0 0 4px rgba(43, 127, 255, .16), 0 10px 30px -12px rgba(43, 127, 255, .6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234cc9ff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E"); }
.search-big input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; width: 18px; height: 18px; cursor: pointer; opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8fa3' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / 18px no-repeat; }
.search-big .btn { height: 52px; padding: 0 24px; border-radius: 16px; font-size: 15px; flex: 0 0 auto; }
html[data-theme="light"] .search-big input[type="search"] { background-color: #fffdf9; box-shadow: var(--shadow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6356' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E"); }
html[data-theme="light"] .search-big input[type="search"]:focus { background-color: #fff; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(43, 127, 255, .14), 0 10px 26px -14px rgba(43, 127, 255, .5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a5fc8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E"); }
.admin-search input[type="search"] { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); font: inherit; }
.dd-clean { white-space: nowrap; }
@media (max-width: 720px) {
  .search-big input[type="search"], .search-big .btn { height: 48px; }
  .search-big .btn { padding: 0 18px; }
  .search-big input[type="search"] { font-size: 15px; padding-left: 40px; background-position: 13px center; background-size: 18px 18px; }
  .dd-row { gap: 6px; }
  .dd-row .dd > summary, .dd-row .dd-clean { padding: 9px 12px; font-size: 13px; }
}

/* v58: 🔀 перемішати і 🔁 повтор у плеєрі; «Мої плейлисти» (меню вибору, сторінки); картка, що грає */
.nzp-ctl .nzp-shuf svg, .nzp-ctl .nzp-rep svg { width: 21px; height: 21px; }
.nzp-ctl .nzp-shuf, .nzp-ctl .nzp-rep { color: var(--muted); }
.nzp-ctl .nzp-shuf.on, .nzp-ctl .nzp-rep.on { color: #ffd400; }
html[data-theme="light"] .nzp-ctl .nzp-shuf.on, html[data-theme="light"] .nzp-ctl .nzp-rep.on { color: #b38600; }
.nzp-ctl .nzp-shuf.on::after, .nzp-ctl .nzp-rep.on::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.nzp-rep1 { display: none; position: absolute; top: 9px; right: 7px; font-size: 9px; font-weight: 800; line-height: 1; }
.nzp-rep.one .nzp-rep1 { display: block; }

/* Меню «Додати в плейлист» */
.plm { position: fixed; z-index: 130; width: 290px; max-height: min(70vh, 460px); display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--border2); background: var(--bg2); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .65); overflow: hidden; }
html[data-theme="light"] .plm { background: #fff; box-shadow: 0 20px 50px -14px rgba(30, 34, 60, .4); }
.plm.sheet { left: 8px; right: 8px; bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; }
.plm-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px 16px; }
.plm-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--surface2); color: var(--text); cursor: pointer; }
.plm-list { overflow: auto; padding: 0 8px; }
.plm-empty { margin: 4px 8px 8px; }
.plm-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.plm-item:hover { background: var(--surface2); }
.plm-item i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border2); font-style: normal; font-weight: 800; }
.plm-item.on i { background: rgba(52, 211, 153, .16); border-color: rgba(52, 211, 153, .6); color: #34d399; }
html[data-theme="light"] .plm-item.on i { color: #047857; border-color: rgba(4, 120, 87, .5); }
.plm-item span { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plm-item small { color: var(--muted); }
.plm-new { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.plm-new input { flex: 1; min-width: 0; }

/* «Мої плейлисти» */
.pl-new { display: flex; gap: 10px; margin: 0 0 18px; max-width: 560px; }
.pl-new input { flex: 1; min-width: 0; }
.pl-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pl-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; transition: .15s; }
.pl-card:hover { border-color: var(--border2); background: var(--surface2); transform: translateY(-2px); }
.pl-card-ic { font-size: 26px; }
.pl-card b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card small { color: var(--muted); }
.pl-back { display: inline-block; margin: 4px 0 6px; color: var(--muted); font-size: 14px; text-decoration: none; }
.pl-back:hover { color: var(--text); }
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pl-head .page-title { margin-bottom: 8px; min-width: 0; overflow-wrap: anywhere; }
.pl-tools { display: flex; gap: 8px; }
.pl-tools .pl-del:hover { color: var(--danger); border-color: var(--danger); }

/* Картка, що зараз грає в міні-плеєрі */
.tcard.now { border-color: #ffd400; box-shadow: 0 0 0 2px rgba(255, 212, 0, .55); }
.tcard.now .tcard-play { opacity: 1; background: #ffd400; color: #111; }

@media (max-width: 720px) {
  .nzp-ctl button { width: 34px; }
  .nzp-ctl .nzp-pp { width: 44px; }
  .nzp-ctl .nzp-x { width: 34px; }
  .pl-new { flex-direction: column; }
  .pl-index { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pl-card { padding: 14px; }
  .pl-tools .btn { padding: 6px 10px; }
}
.tcard.now .tcard-play svg { fill: #111; }
.pl-btn.pl-txt { white-space: nowrap; flex: none; }
.plm-new input { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; }
.plm-new input:focus { outline: none; border-color: var(--violet); }

/* v59: телефон першим — без дублів «Трек · Зараз грає», назва пісні читабельна, кнопки не зʼїдають текст */
.nzp-k { display: none; }
.nzp-ic { flex: none; font-size: 13px; line-height: 1; }
.nzp-tl { min-width: 0; }
.nzp-t { flex: 1 1 auto; min-width: 0; }
.nzp-a2 { min-width: 0; }
.nzp-a { min-width: 0; flex: 0 1 auto; }
.trow-now { display: none !important; }
.trow-sub > b, .trow-sub > i { flex: none; }
.trow-sub > a { flex: 0 1 auto; min-width: 0; }
.trow-sub > span { flex: 0 1000 auto; min-width: 0; }
@media (max-width: 720px) {
  .trow-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
  .nzp-bar { padding: 8px 10px 6px; }
  .nzp-t { font-size: 15px; }
  .nzp-a { font-size: 12.5px; }
}
@media (max-width: 380px) {
  .nzp-yt { width: 72px; height: 41px; }
  .nzp-ctl button { width: 32px; }
  .nzp-ctl .nzp-pp { width: 42px; height: 42px; }
  .nzp-ctl .nzp-x { width: 32px; }
}
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pl-grid .pl-index { display: contents; }
.pl-liked { border-color: rgba(255, 64, 129, .45); background: linear-gradient(140deg, rgba(255, 64, 129, .16), var(--surface) 70%); }
.pl-liked .pl-card-ic { color: #ff4081; }
.pl-index-empty { margin: 14px 0 0; }
.liked-bar { margin: 0 0 14px; justify-content: flex-start; }
@media (max-width: 720px) { .pl-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .pl-liked-list .trow-like { display: inline-flex; } .pl-liked-list .trow { grid-template-columns: 24px 48px minmax(0, 1fr) auto 34px 36px; gap: 8px; } }
@media (max-width: 720px) { .trow-nz { display: none; } }
@media (max-width: 720px) { .nzp-tl { align-items: flex-start; } .nzp-tl .nzp-eq, .nzp-tl .nzp-ic { margin-top: 3px; } .nzp-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; } }
.nzp-on .trow.now .trow-play svg { display: none; }
.nzp-on .trow.now .trow-play::before { content: ""; width: 14px; height: 16px; box-sizing: border-box; border-left: 5px solid currentColor; border-right: 5px solid currentColor; }

/* v60: як у YouTube Music — рядки з ⋮, чипи, полиці, міні-плеєр + повноекранний «Зараз грає», «Бібліотека» */
/* Рядок треку: тап = грає, ⋮ = меню */
.tlist { padding: 0; border: 0; background: none; box-shadow: none; gap: 0; }
html[data-theme="light"] .tlist { box-shadow: none; }
.trow { display: flex; align-items: center; gap: 12px; padding: 7px 4px 7px 8px; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.trow:hover { background: var(--surface2); }
.trow:active { background: var(--surface2); }
.trow.now { background: rgba(255, 212, 0, .1); box-shadow: inset 3px 0 0 #ffd400; }
.trow-chk { display: none; flex: none; }
body.selecting .trow-chk { display: grid; }
.trow-cover { position: relative; flex: none; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--surface2); }
.trow-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trow-cover .trow-eq { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 12px; background: rgba(0, 0, 0, .45); opacity: 0; }
.trow.now .trow-cover .trow-eq { opacity: 1; }
.trow-main { flex: 1 1 auto; min-width: 0; }
.trow-title { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--text); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trow.now .trow-title { color: var(--pink); }
.trow-sub { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 13px; color: var(--muted); min-width: 0; }
.trow-ic { flex: none; font-size: 11px; }
.trow-by { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow-more { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.trow-more svg { width: 22px; height: 22px; fill: currentColor; }
.trow-more:hover { background: var(--surface2); color: var(--text); }
.trow .trow-like { flex: none; display: inline-flex; }
.trow .pl-move, .trow .pl-rm { flex: none; }

/* Чипи-фільтри одним рядком зі скролом */
.chips-row { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 16px; padding: 2px 16px 6px; scrollbar-width: none; scroll-behavior: smooth; }
.chips-row::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.chip img { width: 16px; height: 16px; }
.chip:hover { border-color: var(--border2); }
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
html[data-theme="light"] .chip.on { background: #1e1b16; color: #fff; border-color: #1e1b16; }

/* Полиці */
.shelf { margin: 6px 0 22px; }
.shelf-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.shelf-h h2 { margin: 0; font-size: 20px; }
.shelf-h small { color: var(--muted); }
.shelf-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
.shelf-row::-webkit-scrollbar { display: none; }
.ycard { flex: none; width: 148px; scroll-snap-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ycard.wide { width: 240px; }
.ycard-cover { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--surface2); }
.ycard.wide .ycard-cover { aspect-ratio: 16 / 9; }
.ycard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.ycard:hover .ycard-cover img { transform: scale(1.04); }
.ycard-pl { position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .6); opacity: 0; transition: .2s; }
.ycard-pl svg { width: 20px; height: 20px; fill: #fff; margin-left: 2px; }
.ycard:hover .ycard-pl { opacity: 1; }
.ycard .trow-eq { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; background: rgba(0, 0, 0, .45); opacity: 0; }
.ycard .trow-eq i { width: 5px; }
.ycard.now .trow-eq { opacity: 1; }
.ycard-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-size: 14px; line-height: 1.25; }
.ycard.now .ycard-t { color: var(--pink); }
.ycard-a { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: min(88%, 420px); column-gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
.qp-grid::-webkit-scrollbar { display: none; }
.qp-grid .trow { scroll-snap-align: start; }
.all-h { margin: 6px 0 10px; font-size: 20px; }
.ybar { justify-content: flex-start; margin: 0 0 8px; }
.ybar .btn { display: inline-flex; align-items: center; gap: 6px; }
.ybar svg { width: 18px; height: 18px; fill: currentColor; }
.ybar-sel.on { border-color: var(--violet); color: var(--violet); }

/* Сторінка артиста */
.hero-actions svg { width: 16px; height: 16px; fill: currentColor; vertical-align: -3px; }
.art-sec { margin: 22px 0 8px; }
.art-sec h2 { margin: 0 0 8px; font-size: 20px; }
.art-all { margin: 6px 0 0 8px; }

/* Бібліотека */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 0 0 22px; }
.pl-add { border-style: dashed; }
.lib-guest { margin: 0 0 18px; }
.lib-guest p { margin: 0 0 14px; }
.lib-guest .btn + .btn { margin-top: 8px; }
.lib-artists { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.lib-artist { flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-size: 13px; text-align: center; }
.lib-artist .avatar { width: 72px; height: 72px; }
.lib-artist span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Плеєр ---------- */
.nzp { z-index: 70; }
.nzp-top, .nzp-full, .nzp-sv { display: none; }
.nzp .nzp-mprog { position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; }
.nzp .nzp-mprog .nzp-track { top: 0; height: 2px; }
.nzp .nzp-mprog .nzp-fill::after { display: none; }
.nzp-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; max-width: 1180px; margin: 0 auto; flex-wrap: nowrap; }
.nzp .nzp-media { position: relative; flex: none; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: #000; aspect-ratio: auto; box-shadow: none; border: 0; right: auto; bottom: auto; cursor: pointer; }
.nzp .nzp-yt { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); }
.nzp .nzp-sp, .nzp .nzp-fr { position: absolute; left: 0; top: 0; width: 300px; height: 80px; display: block; }
.nzp .nzp-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.nzp .nzp-art[hidden] { display: none; }
.nzp .nzp-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.nzp .nzp-tl { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.nzp .nzp-tl .nzp-eq, .nzp .nzp-tl .nzp-ic { margin-top: 3px; }
.nzp .nzp-t { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.nzp .nzp-a { font-size: 13px; color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nzp .nzp-a:hover { color: var(--text); text-decoration: underline; }
.nzp-mini { flex: none; display: flex; align-items: center; gap: 2px; }
.nzp-mini button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
.nzp-mini button:hover { background: var(--surface2); }
.nzp-mini svg { width: 28px; height: 28px; fill: currentColor; }
.nzp-mtime { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.nzp.needtap .nzp-mini .nzp-pp { animation: nztap 1s ease-in-out infinite; background: #ffd400; color: #111; }
@media (max-width: 720px) {
  .nzp-mprev, .nzp-mtime { display: none; }
  .nzp-bar { padding: 8px 6px 8px 10px; gap: 10px; }
}

/* Повноекранний «Зараз грає» */
html.nzp-full-open, html.nzp-full-open body { overflow: hidden; }
.nzp.full { top: 0; bottom: 0; z-index: 150; overflow-y: auto; overscroll-behavior: contain; padding: calc(8px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); background: radial-gradient(120% 60% at 50% 0, rgba(43, 127, 255, .22), transparent 70%), var(--bg); border-top: 0; box-shadow: none; animation: nzup .22s ease-out; }
@keyframes nzup { from { transform: translateY(30px); opacity: .4; } }
.nzp.full .nzp-mprog, .nzp.full .nzp-mini { display: none; }
.nzp.full .nzp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 520px; margin: 0 auto 8px; }
.nzp-ib { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
.nzp-ib svg { width: 28px; height: 28px; fill: currentColor; }
.nzp-ib:hover { background: var(--surface2); }
.nzp.full[data-mode="yt"] .nzp-sv { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface2); }
.nzp-sv button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; padding: 6px 16px; border-radius: 999px; cursor: pointer; }
.nzp-sv button.on { background: var(--bg2); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
html[data-theme="light"] .nzp-sv button.on { background: #fff; }
.nzp.full .nzp-bar { flex-direction: column; align-items: stretch; gap: 18px; padding: 0; max-width: 520px; width: 100%; }
.nzp.full .nzp-media { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; box-shadow: 0 18px 50px -14px rgba(0, 0, 0, .7); cursor: default; }
.nzp.full.song .nzp-media { aspect-ratio: 1 / 1; max-width: min(100%, 52vh); margin: 0 auto; }
.nzp.full .nzp-yt { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
.nzp.full:not(.song) .nzp-art { display: none; }
.nzp.full[data-mode="sp"] .nzp-media, .nzp.full[data-mode="fr"] .nzp-media { aspect-ratio: auto; background: none; box-shadow: none; overflow: visible; }
.nzp.full[data-mode="sp"] .nzp-art, .nzp.full[data-mode="fr"] .nzp-art { position: relative; display: block; aspect-ratio: 1 / 1; height: auto; border-radius: 10px; }
.nzp.full[data-mode="sp"] .nzp-sp { position: static; width: 100%; height: 80px; margin-top: 12px; }
.nzp.full[data-mode="fr"] .nzp-fr { position: static; width: 100%; height: 166px; margin-top: 12px; }
.nzp.full .nzp-info { cursor: default; }
.nzp.full .nzp-t { font-size: 22px; -webkit-line-clamp: 3; }
.nzp.full .nzp-tl .nzp-eq, .nzp.full .nzp-tl .nzp-ic { margin-top: 7px; }
.nzp.full .nzp-a { font-size: 16px; margin-top: 4px; }
.nzp.full .nzp-full { display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin: 14px auto 0; }
.nzp-acts { display: flex; gap: 10px; }
.nzp-acts .like-btn { padding: 8px 14px; }
.nzp-seek .nzp-prog { position: relative; top: auto; left: auto; right: auto; height: 20px; cursor: pointer; touch-action: none; }
.nzp-seek .nzp-track { top: 8px; height: 4px; border-radius: 2px; }
.nzp-seek .nzp-fill { border-radius: 2px; }
.nzp-seek .nzp-fill::after { opacity: 1; }
.nzp-times { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.nzp.full .nzp-ctl { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 4px; }
.nzp.full .nzp-ctl button { width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; position: relative; }
.nzp.full .nzp-ctl svg { width: 32px; height: 32px; fill: currentColor; }
.nzp.full .nzp-ctl .nzp-shuf svg, .nzp.full .nzp-ctl .nzp-rep svg { width: 26px; height: 26px; }
.nzp.full .nzp-ctl .nzp-bigpp { width: 72px; height: 72px; background: var(--text); color: var(--bg); }
.nzp.full .nzp-ctl .nzp-bigpp svg { width: 40px; height: 40px; }
html[data-theme="light"] .nzp.full .nzp-ctl .nzp-bigpp { background: #1e1b16; color: #fff; }
.nzp.full .nzp-ctl .nzp-shuf, .nzp.full .nzp-ctl .nzp-rep { color: var(--muted); }
.nzp.full .nzp-ctl .on { color: #ffd400; }
html[data-theme="light"] .nzp.full .nzp-ctl .on { color: #b38600; }
.nzp.needtap .nzp-bigpp { animation: nztap 1s ease-in-out infinite; }
.nzp-tabs { display: flex; border-bottom: 1px solid var(--border); margin-top: 6px; }
.nzp-tabs button { flex: 1; padding: 12px 6px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.nzp-tabs button.on { color: var(--text); border-bottom-color: var(--text); }
.nzp-ql, .nzp-sl { list-style: none; margin: 8px 0; padding: 0; }
.nzp-ql li, .nzp-sl li { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
.nzp-ql li.on { background: rgba(255, 212, 0, .1); }
.nzp-ql li.dragging { background: var(--surface2); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.nzp-qi { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 7px 8px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nzp-qi img { flex: none; width: 44px; height: 44px; border-radius: 5px; object-fit: cover; background: var(--surface2); }
.nzp-qi span { min-width: 0; display: flex; flex-direction: column; }
.nzp-qi b { font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nzp-qi small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nzp-ql li.on b { color: var(--pink); }
.nzp-drag { flex: none; width: 40px; height: 44px; display: grid; place-items: center; color: var(--muted); font-size: 20px; cursor: grab; touch-action: none; user-select: none; }
.nzp-pq .nzp-more { margin-top: 4px; }
.nzp.radio-busy .nzp-more { opacity: .6; pointer-events: none; }
.nzp-sload { margin: 12px 4px; }
@media (min-width: 900px) {
  .nzp.full { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto auto auto auto 1fr; column-gap: 48px; align-content: start; padding: 20px 40px 30px; }
  .nzp.full .nzp-top { grid-column: 1 / -1; max-width: none; width: 100%; }
  .nzp.full .nzp-full { display: contents; }
  .nzp.full .nzp-bar, .nzp.full .nzp-acts, .nzp.full .nzp-seek, .nzp.full .nzp-ctl { grid-column: 1; width: 100%; max-width: 560px; justify-self: center; }
  .nzp.full .nzp-acts, .nzp.full .nzp-seek, .nzp.full .nzp-ctl { margin-top: 14px; }
  .nzp.full .nzp-side { grid-column: 2; grid-row: 2 / span 4; align-self: stretch; max-height: calc(100vh - 110px); overflow-y: auto; }
  .nzp.full .nzp-tabs { margin-top: 0; position: sticky; top: 0; background: var(--bg); z-index: 1; }
}

/* Меню ⋮ */
.nzm-wrap { position: fixed; inset: 0; z-index: 170; }
.nzm-wrap[hidden] { display: none; }
.nzm-wrap.sheet { background: rgba(0, 0, 0, .5); }
.nzm { position: fixed; width: 290px; max-height: 80vh; overflow-y: auto; padding: 6px 0; border-radius: 12px; border: 1px solid var(--border2); background: var(--bg2); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .7); }
html[data-theme="light"] .nzm { background: #fff; box-shadow: 0 20px 50px -14px rgba(30, 34, 60, .4); }
.nzm-wrap.sheet .nzm { left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: 16px 16px 0 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); animation: nzup .2s ease-out; }
.nzm-h { display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.nzm-h img { flex: none; width: 44px; height: 44px; border-radius: 5px; object-fit: cover; background: var(--surface2); }
.nzm-h span { min-width: 0; display: flex; flex-direction: column; }
.nzm-h b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.nzm-h small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nzm-i { width: 100%; display: block; padding: 12px 18px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.nzm-i:hover { background: var(--surface2); }
.nz-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nzp-h, 0px) + 84px + env(safe-area-inset-bottom)); z-index: 180; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px; background: #2b2b33; color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.nz-toast[hidden] { display: none; }
@media (min-width: 721px) { .nz-toast { bottom: calc(var(--nzp-h, 0px) + 20px); } }
.shelf-h h2, .all-h, .art-sec h2 { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 800; }
.shelf-row, .qp-grid { scroll-padding-left: 16px; }
.trow .trow-sub > .trow-ic, .trow .trow-sub > .trow-by { display: inline !important; }
.ybar { flex-wrap: nowrap; }
@media (max-width: 420px) { .ybar-tx { display: none; } .ybar .btn { padding-left: 14px; padding-right: 14px; } .ybar .lbar-all { flex: 1; justify-content: center; } }
@media (max-width: 720px) { .nzp-mini .nzp-mprev { display: none; } }
.nzp:not(.full) .nzp-a { pointer-events: none; }
.nzp-ql .nzp-qi::before, .nzp-sl .nzp-qi::before { content: none; }
.nzp-ql, .nzp-sl { counter-reset: none; }
.nzp-ql .nzp-qi, .nzp-sl .nzp-qi { width: auto; align-items: center; border-radius: 8px; }
.nzp.full { background: var(--bg); background-image: radial-gradient(120% 60% at 50% 0, rgba(43, 127, 255, .22), transparent 70%); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nzp.full .nzp-ctl { order: 0; flex-wrap: nowrap; }
.nzp-qi small { margin-left: 0; }
.nzp-ql li.on .nzp-qi, .nzp-ql .nzp-qi:hover { background: none; }
.nzp-ql li.on { background: rgba(255, 212, 0, .12); }
.art-play { display: flex; gap: 10px; margin: 14px 0 4px; }
.art-play .btn { display: inline-flex; align-items: center; gap: 6px; }
.art-play svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 720px) { .artist-hero .avatar.xl { width: 112px; height: 112px; font-size: 44px; } .art-play .btn { flex: 1; justify-content: center; } .lib-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* v61: аналітика артиста (/my/analytics) — телефон першим, обидві теми */
.an-go { margin: 0 0 14px; white-space: normal; text-align: left; }
.cab-nav a.cab-an { border-color: rgba(43, 127, 255, .5); }
.an-head { margin: 6px 0 12px; }
.an-head h1 { margin: 4px 0 4px; }
.an-back { text-decoration: none; }
.an-h { margin: 0 0 12px; color: var(--text); font-size: 15px; letter-spacing: .04em; }
.an-metrics { padding: 16px; }
.an-r { position: absolute; opacity: 0; pointer-events: none; }
.an-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.an-kpi { margin: 0; display: grid; gap: 2px; align-content: start; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: .15s; color: var(--text); }
.an-kpi:hover { border-color: var(--border2); }
.an-kl { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.an-kpi b { font: 800 26px/1.1 var(--font-display); }
.an-d { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.an-d.up { color: var(--ok); }
.an-d.dn { color: var(--danger); }
.an-ch { display: none; margin-top: 14px; }
.an-ch h3, .an-trb h3 { font-size: 13.5px; margin: 0 0 8px; }
#anm-0:checked ~ .an-charts .an-ch-0, #anm-1:checked ~ .an-charts .an-ch-1, #anm-2:checked ~ .an-charts .an-ch-2,
#anm-3:checked ~ .an-charts .an-ch-3, #anm-4:checked ~ .an-charts .an-ch-4, #anm-5:checked ~ .an-charts .an-ch-5 { display: block; }
#anm-0:checked ~ .an-kpis [for="anm-0"], #anm-1:checked ~ .an-kpis [for="anm-1"], #anm-2:checked ~ .an-kpis [for="anm-2"],
#anm-3:checked ~ .an-kpis [for="anm-3"], #anm-4:checked ~ .an-kpis [for="anm-4"], #anm-5:checked ~ .an-kpis [for="anm-5"] { border-color: var(--violet); background: rgba(43, 127, 255, .1); box-shadow: inset 0 0 0 1px var(--violet); }
.an-r:focus-visible ~ .an-kpis { outline: none; }
.an-chart { position: relative; padding: 18px 0 0; }
.an-chart svg { display: block; width: 100%; height: 130px; }
.an-chart rect { fill: var(--violet); }
.an-chart rect.z { fill: var(--border2); }
.an-chart rect:hover { fill: var(--cyan); }
.an-max { position: absolute; top: 0; left: 0; font-size: 11px; font-weight: 700; color: var(--muted); }
.an-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--muted); }
.an-total { margin: 12px 0 0; }

.an-tracks { display: grid; gap: 6px; }
.an-tr { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.an-tr[open] { border-color: var(--border2); }
.an-tr > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 22px 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; }
.an-tr > summary::-webkit-details-marker { display: none; }
.an-trn { font: 800 14px var(--font-display); color: var(--muted); text-align: center; }
.an-trc { width: 56px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--grad); }
.an-trc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-trt { min-width: 0; display: grid; }
.an-trt b { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.an-trt small { font-size: 12px; color: var(--muted); }
.an-trs { display: flex; gap: 12px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.an-trb { padding: 4px 12px 14px; display: grid; gap: 10px; }
.an-trb .btn { justify-self: start; }
.an-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.an-cols { gap: 0 16px; align-items: start; }
.an-likers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.an-likers li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--tint, rgba(255,255,255,.04)); font-size: 13px; font-weight: 600; }
.an-likers .avatar.sm { width: 24px; height: 24px; font-size: 11px; }
.an-likers .an-lmore { padding: 4px 10px; color: var(--muted); }

.an-feed { list-style: none; margin: 0; padding: 0; display: grid; }
.an-ev, .an-fol { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--border); }
.an-ev:last-child, .an-fol:last-child { border-bottom: none; }
.an-ev a, .an-fol a { text-decoration: none; }
.an-evt { min-width: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.an-evt small { display: block; font-size: 12px; color: var(--muted); }
.an-evt q { color: var(--muted); }
.an-tgic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(34, 158, 217, .15); font-size: 16px; }
.an-new { align-self: center; font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(52, 211, 153, .15); color: var(--ok); }
.an-more > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--cyan); padding: 8px 0; }

.an-arena { padding: 12px 0; border-bottom: 1px solid var(--border); }
.an-arena:first-of-type { padding-top: 0; }
.an-arena p { margin: 0 0 10px; }
.an-arena a { text-decoration: none; }
.an-cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.an-cmp > div { display: grid; gap: 1px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.an-cmp b { font: 800 20px var(--font-display); }
.an-cmp span { font-size: 12.5px; font-weight: 600; }
.an-cmp small { font-size: 11.5px; color: var(--muted); }

@media (max-width: 720px) {
  .an-metrics { padding: 12px; }
  .an-kpis { grid-template-columns: 1fr 1fr; gap: 6px; }
  .an-kpi { padding: 10px; }
  .an-kpi b { font-size: 22px; }
  .an-chart svg { height: 110px; }
  .an-two, .an-cols { grid-template-columns: 1fr; }
  .an-tr > summary { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: 'c t' 'c s'; gap: 2px 10px; padding: 8px; }
  .an-trn { display: none; }
  .an-trc { grid-area: c; width: 44px; }
  .an-trt { grid-area: t; }
  .an-trs { grid-area: s; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
  .an-cmp { gap: 6px; }
  .an-cmp > div { padding: 8px; }
  .an-cmp b { font-size: 17px; }
  .an-cmp span { font-size: 11.5px; }
  .pills { flex-wrap: wrap; }
}
html[data-theme="light"] .an-kpi, html[data-theme="light"] .an-tr, html[data-theme="light"] .an-cmp > div { background: #fffdf9; }
html[data-theme="light"] .an-chart rect.z { fill: rgba(80, 58, 20, .14); }
html[data-theme="light"] .an-likers li { background: rgba(80, 58, 20, .04); }

/* v62: виправлення після перегляду власника (плеєр, фільтри, «＋ В плейлист») */
/* 6) меню «＋ В плейлист» і вікна — над повноекранним плеєром */
.plm { z-index: 200; }
.nzm-wrap { z-index: 190; }
.nz-toast { z-index: 210; }

/* 1) фільтри: Усі / Кліпи / Треки, «Стиль ▾», «Настрій ▾», На Арені, Без нецензурної лексики */
.chip-dd { position: relative; flex: none; }
.chip-dd > summary.chip { list-style: none; cursor: pointer; padding: 7px 12px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); font-size: 14px; font-weight: 600; gap: 6px; }
.chip-dd > summary.chip::-webkit-details-marker { display: none; }
.chip-dd.has > summary.chip { background: var(--text); color: var(--bg); border-color: var(--text); }
html[data-theme="light"] .chip-dd.has > summary.chip { background: #1e1b16; color: #fff; border-color: #1e1b16; }
.chip-dd .dd-panel { z-index: 60; }
.dd-title { display: none; width: 100%; margin: 0 0 4px; font-size: 15px; }
@media (min-width: 721px) {
  .chips-row { flex-wrap: wrap; overflow: visible; margin: 0 0 16px; padding: 0; }
}
@media (max-width: 720px) {
  /* у ряду зі скролом випадне вікно — панелькою знизу, щоб його не обрізало */
  .chip-dd .dd-panel { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); width: auto; max-height: 60vh; z-index: 120; }
  .dd-title { display: block; }
}

/* 3) міні-плеєр: смуга прогресу — перемотка тапом і перетягуванням (зона дотику 16px) */
.nzp .nzp-mprog { top: -8px; height: 16px; pointer-events: auto; cursor: pointer; touch-action: none; z-index: 3; }
.nzp .nzp-mprog .nzp-track { top: 7px; height: 3px; }
.nzp .nzp-mprog:hover .nzp-track, .nzp .nzp-mprog.seeking .nzp-track { top: 6px; height: 5px; }
.nzp .nzp-mprog .nzp-fill::after { display: block; opacity: 0; }
.nzp .nzp-mprog:hover .nzp-fill::after, .nzp .nzp-mprog.seeking .nzp-fill::after { opacity: 1; }
/* міні на ПК: обкладинка + назва зліва, кнопки праворуч — завжди видно */
.nzp:not(.full) .nzp-acts { display: none; }
.nzp:not(.full) .nzp-bar { display: flex; flex-direction: row; }
.nzp:not(.full) .nzp-mini { display: flex; }
@media (min-width: 721px) {
  .nzp:not(.full) .nzp-info { flex: 0 1 420px; }
  .nzp:not(.full) .nzp-mini { margin-left: auto; }
  .nzp-mini .nzp-mprev { display: grid; }
}

/* 5) повноекранний — компактно згори вниз: Пісня/Відео, обкладинка, назва+артист | ♥ ＋, повзунок, кнопки, вкладки */
.nzp .nzp-eq, .nzp .nzp-ic { display: none !important; }
.nzp.full .nzp-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "media media" "info acts"; gap: 18px 12px; align-items: center; }
.nzp.full .nzp-media { grid-area: media; justify-self: center; }
.nzp.full .nzp-info { grid-area: info; min-width: 0; }
.nzp.full .nzp-bar .nzp-acts { grid-area: acts; display: flex; gap: 8px; grid-column: auto; margin: 0; width: auto; max-width: none; justify-self: end; }
.nzp-acts .like-btn, .nzp-acts .pl-btn { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.nzp-acts .like-btn .hrt svg { width: 22px; height: 22px; }
.nzp-acts .pl-btn i { font-size: 22px; }
.nzp.full .nzp-full { gap: 6px; margin-top: 10px; }
.nzp.full .nzp-seek { margin: 0; }
.nzp.full .nzp-ctl { margin: 2px 0 0; }
.nzp.full .nzp-side { margin-top: 10px; }
.nzp.full .nzp-tabs { margin-top: 0; }
/* 4) кліп у режимі «Пісня» — картинка 16:9 цілком, без обрізання */
.nzp.full.song.clip .nzp-media { aspect-ratio: 16 / 9; max-width: 100%; }
@media (min-width: 900px) {
  .nzp.full .nzp-bar, .nzp.full .nzp-seek, .nzp.full .nzp-ctl { grid-column: 1; }
  .nzp.full .nzp-seek, .nzp.full .nzp-ctl { margin-top: 8px; }
  .nzp.full .nzp-side { grid-row: 2 / span 3; margin-top: 0; }
}
.nzp.full .nzp-t { -webkit-line-clamp: 4; }
.nzp-qpl { flex: none; width: 34px; height: 34px; }
.nzp-qpl i { font-size: 18px; }
html .nzp.full, html[data-theme="light"] .nzp.full { background-color: var(--bg); background-image: radial-gradient(120% 60% at 50% 0, rgba(43, 127, 255, .18), transparent 70%); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.nzp-ql .nzp-qpl, .nzp-sl .nzp-qpl { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; flex: none; }
.nzp-ql .nzp-qpl::before, .nzp-sl .nzp-qpl::before { content: none; }
.nzp-ql .nzp-qpl.on, .nzp-sl .nzp-qpl.on { background: rgba(52, 211, 153, .14); }
.trow .trow-like { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.lib-grid ~ h2 { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 800; font-size: 20px; }

/* v63: вигляд «▦ Плитки | ☰ Список» (обирає слухач), чипи — неактивні однакові */
.chips-row .chip:not(.on), .chips-row .chip-dd:not(.has) > summary.chip { background: var(--surface2); color: var(--text); border-color: var(--border); }
.chips-row a.chip:visited:not(.on) { color: var(--text); }

/* Перемикач — помітний сегментований, праворуч у рядку «Слухати все» */
.ybar { align-items: center; }
.vsw2 { display: inline-flex; flex: none; margin-left: auto; padding: 3px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border2); }
.vsw2 button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 800; padding: 8px 14px; border-radius: 9px; cursor: pointer; }
.vsw2 button span { font-size: 17px; line-height: 1; }
.vsw2 button:hover { color: var(--text); }
html:not([data-view="tiles"]) .vsw2 [data-vmode="list"], html[data-view="tiles"] .vsw2 [data-vmode="tiles"] { background: var(--violet); color: #fff; box-shadow: 0 2px 10px -2px rgba(43, 127, 255, .6); }
.art-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.art-h h2 { margin: 0; }
.art-h .vsw2 { margin-left: auto; }
.trow .trow-add { display: none; }

/* Режим «Плитки» — великі картки з обкладинкою; тап = грає, ⋮, «＋», галочки, еквалайзер — ті самі */
html[data-view="tiles"] .tlist.vlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
html[data-view="tiles"] .vlist .trow { position: relative; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
html[data-view="tiles"] .vlist .trow:hover { border-color: var(--border2); background: var(--surface2); }
html[data-view="tiles"] .vlist .trow.now { box-shadow: 0 0 0 2px #ffd400; background: var(--surface); }
html[data-view="tiles"] .vlist .trow-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
html[data-view="tiles"] .vlist .trow-cover .trow-eq { padding-bottom: 0; align-items: center; gap: 5px; }
html[data-view="tiles"] .vlist .trow-cover .trow-eq i { width: 6px; }
html[data-view="tiles"] .vlist .trow-main { padding: 10px 12px 0; }
html[data-view="tiles"] .vlist .trow-title { font-size: 15px; }
html[data-view="tiles"] .vlist .trow-add, html[data-view="tiles"] .vlist .trow-more { position: absolute; top: 8px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; }
html[data-view="tiles"] .vlist .trow-more { right: 8px; }
html[data-view="tiles"] .vlist .trow-add { right: 50px; }
html[data-view="tiles"] .vlist .trow-add.on { background: rgba(4, 120, 87, .85); color: #fff; }
html[data-view="tiles"] .vlist .trow-add i { font-size: 18px; }
html[data-view="tiles"] .vlist .trow-more svg { width: 20px; height: 20px; }
html[data-view="tiles"] body.selecting .vlist .trow-chk, body.selecting html[data-view="tiles"] .vlist .trow-chk { display: grid; }
html[data-view="tiles"] .vlist .trow-chk { position: absolute; top: 8px; left: 8px; width: 34px; height: 34px; border-radius: 8px; background: rgba(0, 0, 0, .55); z-index: 2; }
html[data-view="tiles"] .vlist .trow-chk i { border-color: #fff; }

@media (max-width: 720px) {
  html[data-view="tiles"] .tlist.vlist { grid-template-columns: 1fr 1fr; gap: 10px; }
  html[data-view="tiles"] .vlist .trow-main { padding: 8px 10px 0; }
  html[data-view="tiles"] .vlist .trow-title { font-size: 14px; }
  /* телефон: та сама лінія — значок і підпис під ним */
  .vsw2 button { flex-direction: column; gap: 1px; padding: 5px 10px; font-size: 10.5px; font-weight: 700; }
  .vsw2 button span { font-size: 18px; }
}
@media (max-width: 420px) {
  .ybar { gap: 6px; }
  .ybar .btn { padding-left: 12px; padding-right: 12px; }
  .ybar .lbar-all { flex: 1 1 auto; min-width: 0; }
  .vsw2 button { padding: 5px 8px; }
}
html[data-view="tiles"] .vlist .trow .trow-add { display: grid; }
.nzp:not(.full) .nzp-media, .nzp:not(.full)[data-mode="sp"] .nzp-media, .nzp:not(.full)[data-mode="fr"] .nzp-media { width: 48px; height: 48px; flex: none; background: #000; }
html[data-view="tiles"] .art-pop .art-more[hidden] { display: contents; }
html[data-view="tiles"] .art-all { display: none; }
.art-sec .ybar { margin: 0 0 12px; }
.art-pop .art-more { display: contents; }
html:not([data-view="tiles"]) .art-pop .art-more.collapsed { display: none; }

/* v64: «Новачки Арени» — сітка до 3 рядів; обкладинки однакові квадратні (кліп — цілий, боки розмиті) */
.ycard .ycard-cover, .ycard.clip .ycard-cover { aspect-ratio: 1 / 1; }
.ycard.clip { width: 148px; }
.ycard .yc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(.75) saturate(1.2); transform: scale(1.4); }
.ycard .yc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ycard:hover .yc-art { transform: none; }
.shelf-more { margin-left: auto; font-size: 14px; font-weight: 800; color: var(--cyan); text-decoration: none; white-space: nowrap; }
.shelf-more:hover { text-decoration: underline; }
/* ПК: 3 ряди × скільки влазить; зайві картки — у «Усі новачки →» */
.rk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-rows: 0; column-gap: 16px; row-gap: 0; overflow: hidden; }
.rk-grid .ycard { width: auto; padding-bottom: 18px; overflow: hidden; }
/* телефон: 3 ряди зі скролом убік (як «Швидкий вибір» у YouTube Music) */
@media (max-width: 720px) {
  .rk-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 40%; grid-auto-rows: auto; overflow-x: auto; overflow-y: hidden; column-gap: 12px; margin: 0 -16px; padding: 0 16px; scroll-padding-left: 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .rk-grid::-webkit-scrollbar { display: none; }
  .rk-grid .ycard { scroll-snap-align: start; padding-bottom: 14px; }
  .rookies .shelf-h small { display: none; }
}

/* v65: панель керування над списком — «Слухати все» головна, «Перемішати» / «Вибрати» контурні пігулки з підписами, сегмент «Плитки | Список» */
.ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ctl .ctl-play { flex: none; height: 46px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 800; box-shadow: 0 10px 26px -12px rgba(43, 127, 255, .8); }
.ctl .ctl-play svg { width: 20px; height: 20px; }
.ctl-row { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ctl-pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--border2); background: transparent; color: var(--text); font: 700 14px var(--font-body); white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.ctl-pill svg { width: 19px; height: 19px; fill: currentColor; flex: none; opacity: .9; }
.ctl-pill:hover { border-color: rgba(43, 127, 255, .6); background: rgba(43, 127, 255, .08); }
.ctl-pill:active { transform: scale(.97); }
.ctl-pill.ybar-sel.on { border-color: transparent; background: var(--violet); color: #fff; box-shadow: 0 6px 18px -8px rgba(43, 127, 255, .9); }
.ctl .vsw2 { margin-left: auto; padding: 3px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--border2); }
.ctl .vsw2 button { flex-direction: row; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.ctl .vsw2 button svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.ctl .vsw2 button span { font-size: inherit; }
html:not([data-view="tiles"]) .ctl .vsw2 [data-vmode="list"], html[data-view="tiles"] .ctl .vsw2 [data-vmode="tiles"] { background: var(--text); color: var(--bg); box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .35); }
html[data-theme="light"] .ctl-pill { border-color: rgba(80, 58, 20, .22); background: rgba(255, 253, 249, .7); }
html[data-theme="light"] .ctl-pill:hover { border-color: rgba(26, 95, 200, .5); background: rgba(26, 95, 200, .06); }
html[data-theme="light"] .ctl .vsw2 { background: #fffdf9; }
/* телефон: «Слухати все» на всю ширину, нижче — Перемішати · Вибрати · [▦|☰] */
@media (max-width: 720px) {
  .ctl { gap: 8px; }
  .ctl .ctl-play { flex: 1 1 100%; height: 48px; justify-content: center; }
  .ctl-row { flex: 1 1 100%; gap: 6px; }
  .ctl-pill { flex: 1 1 auto; height: 40px; padding: 0 12px; font-size: 13.5px; gap: 6px; }
  .ctl .vsw2 button { flex-direction: row; height: 32px; padding: 0 10px; }
}
@media (max-width: 440px) { .ctl .vsw-tx { display: none; } .ctl .vsw2 button { padding: 0 11px; } }
@media (max-width: 400px) { .ctl-row { gap: 5px; } .ctl-pill { padding: 0 10px; gap: 5px; font-size: 13px; } .ctl-pill svg { width: 17px; height: 17px; } .ctl .vsw2 { padding: 2px; } .ctl .vsw2 button { padding: 0 9px; } }
@media (max-width: 359px) { .ctl-pill { padding: 0 9px; font-size: 13px; } .ctl-pill svg { width: 17px; height: 17px; } }

/* v66: полиці — рамка 16:9 (кліп на всю, квадрат по центру з розмитими боками); серце в плеєрі без кружка */
.ycard .ycard-cover, .ycard.clip .ycard-cover { aspect-ratio: 16 / 9; }
.ycard, .ycard.clip { width: 220px; }
.rk-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 720px) {
  .ycard, .ycard.clip { width: 64vw; max-width: 260px; }
  .rk-grid { grid-auto-columns: 64%; }
}
.nzp-like, .nzp-like:hover, .nzp-like.on { background: none !important; border: 0 !important; box-shadow: none !important; padding: 6px !important; width: auto !important; min-width: 0 !important; }
.nzp-like .hrt svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; color: var(--text); transition: transform .15s; }
.nzp-like.on .hrt svg { fill: #ff2d55; stroke: #ff2d55; }
.nzp-like:active .hrt svg { transform: scale(1.2); }
.rk-grid .ycard, .rk-grid .ycard.clip { width: auto; }

/* v67: галочки в режимі «Вибрати» — відмічено: синій квадрат з білою галочкою; ні — чіткий контур (обидві теми) */
.trow-chk { width: 32px; height: 32px; }
.trow-chk i { position: relative; width: 22px; height: 22px; border-radius: 7px; border: 2px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .05); box-shadow: none; transition: background .15s, border-color .15s, box-shadow .15s, transform .15s; }
.trow-chk:hover i { border-color: var(--violet); }
.trow-chk input:checked + i { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43, 127, 255, .28);
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
.trow-chk input:active + i { transform: scale(.9); }
html[data-theme="light"] .trow-chk i { border-color: rgba(30, 27, 22, .5); background-color: #fffdf9; }
html[data-theme="light"] .trow-chk input:checked + i { border-color: var(--violet); background-color: var(--violet); }
/* плитки: галочка на обкладинці */
html[data-view="tiles"] .vlist .trow-chk i, html[data-theme="light"][data-view="tiles"] .vlist .trow-chk i { border-color: #fff; background-color: rgba(0, 0, 0, .25); }
html[data-view="tiles"] .vlist .trow-chk input:checked + i { border-color: var(--violet); background-color: var(--violet); }
.trow.sel { box-shadow: inset 3px 0 0 var(--violet); }

/* v68: обкладинки — ТРЕК квадрат, КЛІП 16:9. У сітках зона обкладинки однакової висоти (ПК 16:9, телефон — квадрат):
   трек — квадрат цілим, кліп — на всю ширину; порожнє місце — розмита копія тієї ж обкладинки. Полиці — одна висота, кліп ширший */

/* Арена (картки) */
.tcard-cover .tc-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.tcard:hover .tcard-cover .tc-clip { transform: scale(1.03); }
@media (max-width: 720px) {
  .tcard-cover { aspect-ratio: 1 / 1; }
  .tcard-cover .tc-art { left: 0; width: 100%; transform: none; }
  .tcard:hover .tcard-cover .tc-art { transform: scale(1.03); }
}

/* «Музика» і артист — плитки */
.trow-cover .tr-bg { display: none; }
html[data-view="tiles"] .vlist .trow-cover { aspect-ratio: 16 / 9; }
html[data-view="tiles"] .vlist .trow-cover .tr-bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) brightness(.75) saturate(1.25); transform: scale(1.6); }
html[data-view="tiles"] .vlist .trow-cover .tr-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
html[data-view="tiles"] .vlist .trow-cover.is-track .tr-art { left: 50%; width: auto; aspect-ratio: 1 / 1; object-fit: cover; transform: translateX(-50%); }
@media (max-width: 720px) {
  html[data-view="tiles"] .vlist .trow-cover { aspect-ratio: 1 / 1; }
  html[data-view="tiles"] .vlist .trow-cover.is-track .tr-art { left: 0; width: 100%; transform: none; }
}

/* Полиці з прокруткою вбік: однакова висота, трек — квадрат, кліп — 16:9 (ширший) */
.shelf-row .ycard { width: 150px; }
.shelf-row .ycard.clip { width: 267px; }
.shelf-row .ycard .ycard-cover { aspect-ratio: auto; height: 150px; }
.shelf-row .ycard .yc-sq, .shelf-row .ycard .yc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shelf-row .ycard .yc-bg { display: none; }
@media (max-width: 720px) {
  .shelf-row .ycard { width: 132px; }
  .shelf-row .ycard.clip { width: 235px; }
  .shelf-row .ycard .ycard-cover { height: 132px; }
}

/* «Новачки Арени» (сітка 3 ряди): рамка 16:9, трек — квадрат по центру з розмитими боками, кліп — на всю */
.rk-grid .ycard .ycard-cover { aspect-ratio: 16 / 9; }
.rk-grid .ycard .yc-sq { position: absolute; top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 1 / 1; object-fit: cover; transform: translateX(-50%); }
.rk-grid .ycard .yc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rk-grid .ycard .yc-bg { display: block; }

/* 2) «＋» поруч із ♥ на картках телефону — в один рядок, без переносу */
@media (max-width: 720px) {
  .tcard-meta { flex-wrap: nowrap; gap: 5px; }
  .tcard-meta .like-btn, .tcard-meta .meta-pill { font-size: 12px; padding: 4px 8px; gap: 4px; }
  .tcard-meta .like-btn .hrt svg { width: 15px; height: 15px; }
  .tcard-meta .pl-btn:not(.pl-txt) { width: 28px; height: 28px; }
  .tcard-meta .pl-btn i { font-size: 15px; }
}

/* v69: нагороди — головна (один ряд карток) і /top (усі категорії з топ-5) */
.aw-home { margin: 6px 0 18px; }
.aw-home .shelf-h { display: flex; align-items: baseline; gap: 10px; }
.aw-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.awc { position: relative; display: grid; gap: 3px; align-content: start; min-width: 0; cursor: pointer; }
.awc-cover, .aw-wcover { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--pc, var(--violet)), #0b0b14 75%); }
.aw-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) brightness(.7) saturate(1.25); transform: scale(1.5); }
.aw-art { position: absolute; top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 1 / 1; object-fit: cover; transform: translateX(-50%); }
.aw-art.clip { left: 0; width: 100%; aspect-ratio: auto; object-fit: cover; transform: none; }
.awc-badge { position: absolute; z-index: 2; left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .01em; color: #111; background: var(--grad-gold); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-clip .awc-badge, .aw-rise .awc-badge { color: #fff; background: linear-gradient(120deg, #2b7fff, #00c2ff); }
.aw-talk .awc-badge { color: #fff; background: linear-gradient(120deg, #ff3d6e, #ff7a59); }
.aw-play .awc-badge { color: #fff; background: linear-gradient(120deg, #8b5cf6, #2b7fff); }
.aw-rookie .awc-badge { color: #04210f; background: linear-gradient(120deg, #34d399, #a3e635); }
.aw-vote .awc-badge { color: #111; background: #fff; }
.awc-pl { position: absolute; z-index: 2; right: 8px; bottom: 8px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); transition: .2s; }
.awc-pl svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.awc:hover .awc-pl, .aw-wrow:hover .awc-pl { background: var(--violet); transform: scale(1.06); }
.awc .trow-eq, .aw-wrow .trow-eq { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 14px; background: rgba(0, 0, 0, .35); opacity: 0; }
.awc.now .trow-eq, .aw-wrow.now .trow-eq { opacity: 1; }
.awc-t { margin-top: 6px; font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.awc.now .awc-t { color: var(--pink); }
.awc-a { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awc-v { font-size: 12px; color: var(--muted); }
@media (max-width: 720px) {
  .aw-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -16px; padding: 0 16px 4px; scroll-padding-left: 16px; scrollbar-width: none; }
  .aw-row::-webkit-scrollbar { display: none; }
  .awc { flex: 0 0 66%; max-width: 280px; scroll-snap-align: start; }
  .aw-home .shelf-h h2 { font-size: 14px; }
}

/* /top */
.aw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin: 6px 0 22px; }
.aw-cat { margin: 0; padding: 16px; display: grid; gap: 12px; align-content: start; }
.aw-cat-h { display: flex; gap: 12px; align-items: center; }
.aw-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: rgba(255, 212, 0, .14); }
.aw-clip .aw-ic, .aw-rise .aw-ic { background: rgba(43, 127, 255, .16); }
.aw-talk .aw-ic { background: rgba(255, 61, 110, .14); }
.aw-play .aw-ic { background: rgba(139, 92, 246, .16); }
.aw-rookie .aw-ic { background: rgba(52, 211, 153, .16); }
.aw-cat-h b { display: block; font: 800 16px/1.25 var(--font-display); }
.aw-cat-h small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.aw-wrow { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 16px; background: linear-gradient(120deg, rgba(255, 212, 0, .12), rgba(43, 127, 255, .08)); border: 1px solid rgba(255, 212, 0, .35); cursor: pointer; }
.aw-wcover { border-radius: 11px; }
.aw-wcover .awc-pl { width: 34px; height: 34px; right: 6px; bottom: 6px; }
.aw-wtx { min-width: 0; display: grid; gap: 1px; }
.aw-wtx em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pink); }
.aw-wtx b { font-size: 15.5px; line-height: 1.25; overflow-wrap: anywhere; }
.aw-wtx a { font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; }
.aw-wtx a:hover { color: var(--text); }
.aw-wtx small { font-size: 12.5px; font-weight: 700; }
.aw-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.aw-trow { display: grid; grid-template-columns: 18px 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 6px; border-radius: 10px; cursor: pointer; }
.aw-trow:hover { background: var(--surface2); }
.aw-trow.win { display: none; }
.aw-n { font: 800 13px var(--font-display); color: var(--muted); text-align: center; }
.aw-tcover { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--grad); }
.aw-tcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-ttx { min-width: 0; display: grid; }
.aw-ttx b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-ttx small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-tv { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.aw-trow.now .aw-ttx b { color: var(--pink); }
@media (max-width: 720px) {
  .aw-grid { grid-template-columns: 1fr; gap: 10px; }
  .aw-cat { padding: 14px 12px; }
  .aw-wrow { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; }
}
html[data-theme="light"] .aw-wrow { background: linear-gradient(120deg, rgba(255, 212, 0, .2), rgba(43, 127, 255, .07)); border-color: rgba(220, 170, 0, .45); }
html[data-theme="light"] .aw-vote .awc-badge { background: #1e1b16; color: #fff; }

/* v70: аналітика — «📅 Свої дати», підпис періоду, графік без «порожніх смужок», рівномірні дати */
.an-per { margin-bottom: 10px; }
.an-dbtn { margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; border-style: dashed; }
.an-dbtn.on { border-style: solid; }
#an-dt:checked ~ .an-per .an-dbtn:not(.on) { border-color: var(--violet); color: var(--text); }
.an-dform { display: none; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; padding: 14px; margin: 0 0 12px; }
#an-dt:checked ~ .an-dform { display: grid; }
.an-dform label { margin: 0; display: grid; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.an-dform input[type="date"] { width: 100%; min-width: 0; height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); font: 600 15px var(--font-body); color-scheme: dark; }
.an-dform input[type="date"]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43, 127, 255, .18); }
.an-dform .btn { height: 46px; }
.an-derr { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 700; color: var(--danger); }
html[data-theme="light"] .an-dform input[type="date"] { background: #fffdf9; color-scheme: light; }
.an-range { margin: 0 0 12px; }
.an-range b { color: var(--text); }
.an-chart svg .hit { fill: transparent; }
.an-chart svg .base { fill: var(--border2); }
.an-chart svg g:hover .hit { fill: rgba(43, 127, 255, .08); }
.an-chart svg g:hover rect:not(.hit) { fill: var(--cyan); }
.an-chart rect.z { display: none; }
.an-axis { display: grid; justify-content: stretch; margin-top: 5px; font-size: 10.5px; color: var(--muted); }
.an-axis span { justify-self: center; white-space: nowrap; }
.an-axis span:first-child { justify-self: start; }
@media (max-width: 720px) {
  .an-dform { grid-template-columns: 1fr 1fr; padding: 12px; gap: 8px; }
  .an-dform .btn { grid-column: 1 / -1; width: 100%; }
  .an-dform input[type="date"] { font-size: 14px; padding: 0 8px; }
  .an-axis .alt { visibility: hidden; }
}
@media (max-width: 400px) { .an-kl { font-size: 11.5px; letter-spacing: -.01em; white-space: nowrap; } .an-kpi { padding: 10px 9px; } }

/* v71: «Швидкий вибір» — кожен ряд гортається окремо; «🎤 Тут може бути твій трек» у неповному ряду плиток */
.qp-rows { display: flex; flex-direction: column; gap: 2px; }
.qp-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -16px; padding: 0 16px; scroll-padding-left: 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.qp-row::-webkit-scrollbar { display: none; }
.qp-row .trow { flex: none; width: min(31%, 400px); scroll-snap-align: start; }
@media (max-width: 720px) {
  .qp-row { gap: 10px; }
  .qp-row .trow { width: 86%; }
}
.fill-cta { display: none; }
html[data-view="tiles"] .vlist .fill-cta:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 12px; text-align: center; text-decoration: none; color: var(--text); border: 2px dashed var(--border2); border-radius: 14px; background: linear-gradient(160deg, rgba(43, 127, 255, .12), rgba(255, 212, 0, .08) 70%, var(--surface)); min-height: 100%; }
html[data-view="tiles"] .vlist .fill-cta:hover { border-color: var(--violet); }
.fill-cta .fc-ic { font-size: 34px; line-height: 1; }
.fill-cta b { font-size: 15px; line-height: 1.25; }
.fill-cta small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.fill-cta .btn { margin-top: 4px; }

/* v72: нагороди v2 — окрема «сцена», чисті обкладинки, стрічка-медаль у кольорі нагороди, рамка зі світінням */
.aw-track { --aw: #ffc400; --aw-ink: #8a5a00; --aw-on: #1a1200; }
.aw-clip { --aw: #2b7fff; --aw-ink: #1a5fc8; --aw-on: #fff; }
.aw-talk { --aw: #ff3d6e; --aw-ink: #c0123c; --aw-on: #fff; }
.aw-play { --aw: #8b5cf6; --aw-ink: #6d28d9; --aw-on: #fff; }
.aw-rise { --aw: #ff8a00; --aw-ink: #b45309; --aw-on: #1f1000; }
.aw-rookie { --aw: #22c55e; --aw-ink: #15803d; --aw-on: #04210f; }
.aw-vote { --aw: #22d3ee; --aw-ink: #0e7490; --aw-on: #032a33; }

/* сцена */
.aw-home { position: relative; margin: 10px 0 22px; padding: 16px 16px 18px; border-radius: 26px; border: 1px solid rgba(255, 212, 0, .28); overflow: hidden;
  background: radial-gradient(520px 200px at 0% 0%, rgba(255, 212, 0, .14), transparent 65%), radial-gradient(520px 220px at 100% 100%, rgba(43, 127, 255, .14), transparent 65%), linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
  box-shadow: 0 24px 60px -34px rgba(255, 196, 0, .45); }
.aw-home::before { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 224, 102, .9), transparent); }
.aw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.aw-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; font: 800 20px/1.2 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text); }
.aw-hm { font-size: 26px; filter: drop-shadow(0 4px 10px rgba(255, 196, 0, .55)); }
.aw-ht { background: linear-gradient(90deg, #fff3a0, #ffd400 45%, #ffb300); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aw-head .shelf-more { margin-left: 0; }

/* картка */
.aw-row .awc { padding: 10px 10px 12px; border-radius: 20px; border: 1.5px solid color-mix(in srgb, var(--aw) 55%, transparent);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--aw) 20%, transparent), transparent 70%), var(--surface);
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--aw) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .2s, box-shadow .2s; }
.awc-rib { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 9px; }
.awc-med { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; overflow: hidden;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7), transparent 42%), var(--aw); border: 2px solid rgba(255, 255, 255, .55);
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--aw) 85%, transparent); }
.awc-med::after { content: ''; position: absolute; top: -20%; left: -80%; width: 50%; height: 140%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: rotate(20deg); opacity: 0; }
.awc-name { min-width: 0; padding: 5px 11px 5px 10px; border-radius: 6px 999px 999px 6px; font: 800 12.5px/1.2 var(--font-body); letter-spacing: .01em; color: var(--aw-on);
  background: linear-gradient(100deg, var(--aw), color-mix(in srgb, var(--aw) 70%, #fff)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--aw) 90%, transparent); }
.aw-row .awc-cover { border-radius: 13px; }
.aw-row .awc-t { margin-top: 9px; }
.awc-v { justify-self: start; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--text);
  background: color-mix(in srgb, var(--aw) 16%, transparent); border: 1px solid color-mix(in srgb, var(--aw) 40%, transparent); }
@media (hover: hover) {
  .aw-row .awc:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -18px color-mix(in srgb, var(--aw) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .awc:hover .awc-med::after, .aw-cat:hover .aw-ic::after { animation: awshine .9s ease; }
}
@keyframes awshine { 0% { left: -80%; opacity: 0; } 20% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
html[data-theme="light"] .aw-home { border-color: rgba(220, 170, 0, .35);
  background: radial-gradient(520px 200px at 0% 0%, rgba(255, 212, 0, .2), transparent 65%), radial-gradient(520px 220px at 100% 100%, rgba(43, 127, 255, .1), transparent 65%), #fffaf0; }
html[data-theme="light"] .aw-ht { background-image: linear-gradient(90deg, #d99e00, #a86a00); }
html[data-theme="light"] .aw-row .awc { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--aw) 16%, transparent), transparent 70%), #fffdf9; }
html[data-theme="light"] .awc-v { color: var(--aw-ink); }
@media (max-width: 720px) {
  .aw-home { padding: 14px 12px 14px; border-radius: 22px; }
  .aw-head h2 { font-size: 16px; white-space: nowrap; }
  .aw-head .shelf-more { font-size: 13px; flex: none; }
}
@media (max-width: 400px) {
  .aw-hide-sm { display: none; }
  .aw-hm { font-size: 22px; }
  .aw-row { margin: 0 -12px; padding: 2px 12px 8px; scroll-padding-left: 12px; }
  .aw-row .awc { flex: 0 0 72%; max-width: 270px; }
}

/* /top — картки категорій у тих самих кольорах */
.aw-cat { border-color: color-mix(in srgb, var(--aw) 35%, var(--border)); background: radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--aw) 12%, transparent), transparent 70%), var(--surface); }
.aw-cat .aw-ic { position: relative; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7), transparent 42%), var(--aw); border: 2px solid rgba(255, 255, 255, .55); box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--aw) 85%, transparent); }
.aw-cat .aw-ic::after { content: ''; position: absolute; top: -20%; left: -80%; width: 50%; height: 140%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: rotate(20deg); opacity: 0; }
.aw-cat .aw-wrow { border: 1.5px solid color-mix(in srgb, var(--aw) 55%, transparent); background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--aw) 20%, transparent), transparent 75%); box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--aw) 80%, transparent); }
.aw-cat .aw-wtx em { display: inline-block; justify-self: start; padding: 2px 9px; border-radius: 6px 999px 999px 6px; color: var(--aw-on); background: var(--aw); letter-spacing: .06em; }
html[data-theme="light"] .aw-cat { background: radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--aw) 12%, transparent), transparent 70%), #fffdf9; }
html[data-theme="light"] .aw-cat .aw-wrow { border-color: color-mix(in srgb, var(--aw) 55%, transparent); background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--aw) 16%, transparent), transparent 75%), #fff; }
html[data-theme="light"] .aw-cat .aw-wtx small { color: var(--aw-ink); }

/* v73: головна на телефоні — шапка в один рядок (лого · тема · профіль), компактний hero, нагороди списком */
.nav-me { display: none; position: relative; }
@media (max-width: 720px) {
  /* шапка: посилання є в нижньому меню й у меню профілю */
  .nav { flex-wrap: nowrap; gap: 8px; padding: 8px 0; }
  .nav .nav-links { display: none; }
  .logo-img { height: 44px; }
  .theme-sw { margin-left: auto; }
  .theme-sw button { min-width: 30px; height: 28px; padding: 0 8px; }
  .nav-me { display: block; flex: none; order: 3; }
  .nav-me > summary { list-style: none; cursor: pointer; position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border2); background: var(--surface); }
  .nav-me > summary::-webkit-details-marker { display: none; }
  .nav-me > summary .avatar { width: 34px; height: 34px; font-size: 13px; border: 0; }
  .nav-me-ic { font-size: 18px; line-height: 1; }
  .nav-me > summary .nbadge { position: absolute; top: -4px; right: -4px; }
  .nav-me[open] > summary { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43, 127, 255, .2); }
  .nav-me-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; width: 230px; display: grid; gap: 2px; padding: 8px; border-radius: 18px; border: 1px solid var(--border2); background: var(--bg2); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .7); animation: modal-in .16s ease; }
  .nav-me-h { padding: 6px 10px 8px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-me-panel a, .nav-me-panel button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 10px; border-radius: 12px; border: 0; background: none; color: var(--text); font: 700 14.5px var(--font-body); text-decoration: none; text-align: left; cursor: pointer; }
  .nav-me-panel a:hover, .nav-me-panel button:hover { background: var(--surface2); }
  .nav-me-panel form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--border); }
  .nav-me-panel button { color: var(--danger); }
  .nav-me-panel .nav-me-acc { background: var(--grad); color: #fff; justify-content: center; }
  html[data-theme="light"] .nav-me-panel { box-shadow: 0 24px 60px -20px rgba(80, 58, 20, .35); }

  /* hero: без порожнечі під цифрами, менший логотип і відступи */
  .hero { padding: 18px 16px 20px; margin-bottom: 18px; border-radius: 22px; }
  .hero-inner { gap: 10px; }
  .hero-inner > div:first-child { flex: 0 0 auto; }
  .hero-right { gap: 0; }
  .hero-logo-wrap { width: 30vw; max-width: 132px; }
  .hero .live { margin-bottom: 10px; font-size: 10.5px; padding: 5px 10px; }
  .hero-title { font-size: 38px; }
  .hero-sub { font-size: 14px; margin: 8px 0 12px; }
  .hero .stats { gap: 14px; margin-top: 12px; }
  .hero .stat b { font-size: 22px; }
  .hero .stat span { font-size: 10.5px; }
  .jc-mobile { margin-top: 14px; }

  /* нагороди: компактний список рядків — усе видно без гортання, тап = грає */
  .aw-home { padding: 12px 10px 12px; margin: 6px 0 18px; }
  .aw-head { margin-bottom: 10px; }
  .aw-row { display: grid; grid-template-columns: 1fr; gap: 8px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .aw-row .awc { flex: none; max-width: none; display: grid; grid-template-columns: 32px 54px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 1px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 16px; }
  .aw-row .awc-rib { display: contents; }
  .aw-row .awc-med { grid-column: 1; grid-row: 1 / 4; width: 32px; height: 32px; font-size: 16px; border-width: 1.5px; }
  .aw-row .awc-cover { grid-column: 2; grid-row: 1 / 4; width: 54px; aspect-ratio: 1 / 1; border-radius: 10px; }
  .aw-row .awc-cover .aw-art:not(.clip) { left: 0; width: 100%; transform: none; }
  .aw-row .awc-pl { width: 26px; height: 26px; right: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .aw-row .awc-pl svg { width: 13px; height: 13px; }
  .aw-row .awc-name { grid-column: 3; grid-row: 1; justify-self: start; max-width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--aw); font-size: 11px; letter-spacing: .02em; text-transform: uppercase; }
  .aw-row .awc-t { grid-column: 3; grid-row: 2; margin: 0; font-size: 14px; line-height: 1.25; -webkit-line-clamp: 1; }
  .aw-row .awc-a { grid-column: 3; grid-row: 3; font-size: 12px; }
  .aw-row .awc-v { grid-column: 4; grid-row: 1 / 4; margin: 0; align-self: center; padding: 4px 8px; font-size: 11.5px; white-space: nowrap; }
  html[data-theme="light"] .aw-row .awc-name { color: var(--aw-ink); }
  .aw-row .aw-u { display: none; }
  .aw-row .awc-name { overflow: visible; white-space: normal; line-height: 1.15; text-transform: none; letter-spacing: 0; font-size: 11.5px; }
}

/* v74: картки треків (tcard) і плитки «Музики» — рівні ряди: значки — 1 рядок, назва — завжди місце на 2 рядки,
   кнопки + крапки платформ — один рядок, притиснутий донизу, жанр/настрій — останній рядок на одному рівні */
.tgrid { align-items: stretch; }
.tcard { container-type: inline-size; }
.tcard-body { min-width: 0; }
.tcard-kicker { flex: none; min-height: 1.5em; }
.tcard-kicker > * { flex: none; }
.tcard-kicker > span { flex: 0 1 auto; min-width: 0; }
.tcard-title { flex: none; min-height: 2.56em; }
.tcard-artist { flex: none; max-width: 100%; }
.tcard-meta { flex-wrap: nowrap; margin-top: auto; min-width: 0; }
.tcard-meta > * { flex: none; }
.tcard-meta .ldots { margin-left: auto; padding-left: 2px; }
.tcard-tags { flex: none; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; min-height: 1.4em; line-height: 1.4; }
.tcard-tags span { overflow: hidden; text-overflow: ellipsis; }
.tcard-tags .m { flex: 0 1 auto; min-width: 0; }
@container (max-width: 260px) {
  .tcard-meta { gap: 4px; }
  .tcard-meta .like-btn, .tcard-meta .meta-pill { font-size: 12px; padding: 4px 7px; gap: 4px; }
  .tcard-meta .like-btn .hrt svg { width: 14px; height: 14px; }
  .tcard-meta .pl-btn:not(.pl-txt) { width: 27px; height: 27px; }
}
html[data-view="tiles"] .vlist .trow-title { min-height: 2.5em; }
@media (max-width: 380px) { .tcard-title { min-height: 0; } }
/* v74 (дод.): картка-заклик на головній — завжди остання; гість/слухач — «Стань артистом», артист — «Додай новий трек» */
.tgrid .cta-card { position: relative; overflow: hidden; gap: 12px; padding: 26px 18px; min-height: 0; border: 2px dashed rgba(255, 212, 0, .5);
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 212, 0, .16), transparent 60%), radial-gradient(90% 60% at 50% 100%, rgba(43, 127, 255, .18), transparent 70%), var(--surface); }
.tgrid .cta-card:hover { border-color: #ffd400; transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(255, 212, 0, .7); }
.tgrid .cta-card .cta-ic { width: 76px; height: 76px; font-size: 36px; background: linear-gradient(140deg, rgba(255, 212, 0, .28), rgba(43, 127, 255, .22)); box-shadow: 0 0 0 6px rgba(255, 212, 0, .08), 0 12px 30px -10px rgba(255, 212, 0, .55); }
.tgrid .cta-card.cta-me .cta-ic { font-weight: 800; color: #fff; background: linear-gradient(140deg, #2b7fff, #00c2ff); box-shadow: 0 0 0 6px rgba(43, 127, 255, .12), 0 12px 30px -10px rgba(43, 127, 255, .7); }
.tgrid .cta-card b { font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.tgrid .cta-card .cta-s { color: var(--muted); font-size: 13.5px; line-height: 1.4; max-width: 230px; }
.tgrid .cta-card .btn { margin-top: 4px; }
html[data-theme="light"] .tgrid .cta-card { border-color: rgba(200, 150, 0, .55); background: radial-gradient(120% 70% at 50% 0%, rgba(255, 212, 0, .22), transparent 60%), radial-gradient(90% 60% at 50% 100%, rgba(43, 127, 255, .12), transparent 70%), var(--surface); }
html[data-theme="light"] .tgrid .cta-card:hover { border-color: #e6b400; }
@media (max-width: 720px) {
  .tgrid .cta-card { padding: 18px 10px; gap: 8px; }
  .tgrid .cta-card .cta-ic { width: 56px; height: 56px; font-size: 26px; }
  .tgrid .cta-card b { font-size: 15px; }
  .tgrid .cta-card .cta-s { font-size: 12px; }
  .tgrid .cta-card .btn { font-size: 12.5px; padding: 8px 12px; }
}

/* v75: плитки — маленька аватарка артиста замість 🎵/🎬, дрібний тип праворуч; назва — рівно 2 рядки, ім'я «під лінійку».
   Телефон (2 колонки): кліп — на всю ширину 16:9 без смуг, треки — парами (порядок без дірок ставить nzArrange) */
.trow-av, .trow-k { display: none; }
html[data-view="tiles"] .vlist .trow .trow-sub > .trow-ic { display: none !important; }
html[data-view="tiles"] .vlist .trow-sub { gap: 6px; margin-top: 6px; }
html[data-view="tiles"] .vlist .trow-sub > .trow-av { display: inline-flex !important; flex: none; }
html[data-view="tiles"] .vlist .trow-av .avatar { width: 20px; height: 20px; font-size: 10px; border-width: 1px; }
html[data-view="tiles"] .vlist .trow-sub > .trow-by { flex: 0 1 auto; min-width: 0; }
html[data-view="tiles"] .vlist .trow-sub > .trow-k { display: inline !important; flex: none; margin-left: auto; padding-left: 4px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
html[data-view="tiles"] .vlist .trow-title { line-height: 1.22; min-height: 2.44em; }
.tgrid .tcard.cta-wide { grid-column: 1 / -1; }
@media (max-width: 720px) {
  html[data-view="tiles"] .vlist .trow.tr-clip { grid-column: 1 / -1; }
  html[data-view="tiles"] .vlist .trow.tr-clip .trow-cover { aspect-ratio: 16 / 9; }
  html[data-view="tiles"] .vlist .trow.tr-clip .trow-cover .tr-art { object-fit: cover; }
  html[data-view="tiles"] .vlist .trow.tr-clip .trow-title { min-height: 0; }
  .tgrid { grid-auto-flow: row; }
  .tgrid .tcard.is-clipcard { grid-column: 1 / -1; }
  .tgrid .tcard.is-clipcard .tcard-cover { aspect-ratio: 16 / 9; }
  .tgrid .tcard.is-clipcard .tcard-cover .tc-clip { object-fit: cover; }
  .tgrid .tcard.is-clipcard .tcard-title { min-height: 0; }
}
html[data-view="tiles"] .vlist .trow:not(.tr-clip) .trow-sub > .trow-k { display: none !important; }

/* v77 (Чат 1): ревізія — сторінка треку: кнопки й теги переносяться в межах картки */
.tcard-meta.tp-meta { flex-wrap: wrap; row-gap: 8px; }
.tp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-width: 0; }
.tp-tags .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-page > div, .track-page > aside { min-width: 0; }

/* v78 (Чат 2): ревізія — світла тема, вхід/реєстрація, кабінет */
/* вузькі сторінки (вхід, реєстрація, заявка) на ПК: шапка на всю ширину, як на інших сторінках — в один рядок */
@media (min-width: 721px) {
  .wrap.narrow > .nav { width: min(1060px, calc(100vw - 40px)); margin-left: 50%; transform: translateX(-50%); flex-wrap: nowrap; }
  .wrap.narrow .theme-sw { order: 0; margin-left: 0; }
  .wrap.narrow .nav-links { order: 0; width: auto; margin-left: auto; justify-content: flex-end; }
}
/* світла тема: «1 місце» в рейтингу — темніше золото, щоб читалось */
html[data-theme="light"] .rank-n.n1 { color: #a87400; text-shadow: 0 0 10px rgba(255, 196, 0, .35); }

/* v79 (Чат 2): теми сторінки артиста [data-ptheme] + банер 3:1 + вибір у кабінеті */
.ap { --pa: #2b7fff; --pa2: #00c2ff; --pa-on: #fff; --pa-ink: #1a5fc8; --pt-dk: #10121c; --pt-lt: #fffdf9; --pt-pat: none;
  --pt-base: var(--pt-dk);
  --pt-hero-bg: radial-gradient(700px 260px at 0% 0%, color-mix(in srgb, var(--pa) 30%, transparent), transparent 65%), radial-gradient(600px 260px at 100% 100%, color-mix(in srgb, var(--pa2) 26%, transparent), transparent 65%), var(--pt-pat), linear-gradient(var(--pt-base), var(--pt-base)); }
html[data-theme="light"] .ap { --pt-base: var(--pt-lt); }
.ap[data-ptheme="classic"] { --pa2: #ffd400; }
.ap[data-ptheme="ocean"] { --pa: #1e90ff; --pa2: #00d4ff; --pa-on: #fff; --pa-ink: #0b5cad; --pt-dk: #071a2e; --pt-lt: #eaf4fb;
  --pt-pat: repeating-radial-gradient(circle at 50% 140%, rgba(120, 200, 255, .07) 0 2px, transparent 2px 26px); }
.ap[data-ptheme="street"] { --pa: #39ff88; --pa2: #b6ff3b; --pa-on: #04210f; --pa-ink: #0f7a3a; --pt-dk: #1b1d21; --pt-lt: #ecedee;
  --pt-pat: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.6px) 0 0 / 7px 7px; }
.ap[data-ptheme="drill"] { --pa: #ff2a3d; --pa2: #ff6a3d; --pa-on: #fff; --pa-ink: #c0101f; --pt-dk: #0b0708; --pt-lt: #f7eeee;
  --pt-pat: repeating-linear-gradient(135deg, rgba(255, 42, 61, .08) 0 2px, transparent 2px 16px); }
.ap[data-ptheme="rose"] { --pa: #e8a598; --pa2: #f7c6c7; --pa-on: #3a1a17; --pa-ink: #a3503f; --pt-dk: #241719; --pt-lt: #fcf0f0;
  --pt-pat: radial-gradient(rgba(232, 165, 152, .18) 1.5px, transparent 2px) 0 0 / 18px 18px; }
.ap[data-ptheme="aurora"] { --pa: #8b5cf6; --pa2: #14d8c4; --pa-on: #fff; --pa-ink: #6d28d9; --pt-dk: #120f24; --pt-lt: #f2eefc;
  --pt-pat: linear-gradient(115deg, transparent 25%, rgba(20, 216, 196, .14) 45%, rgba(139, 92, 246, .14) 60%, transparent 80%); }
.ap[data-ptheme="pearl"] { --pa: #b8a6e6; --pa2: #9fd6e0; --pa-on: #231b3a; --pa-ink: #5f4bb0; --pt-dk: #1c1b22; --pt-lt: #f8f5f0;
  --pt-pat: conic-gradient(from 210deg at 75% 25%, rgba(255, 255, 255, .1), rgba(184, 166, 230, .16), rgba(159, 214, 224, .16), rgba(255, 228, 225, .12), rgba(255, 255, 255, .1)); }
.ap[data-ptheme="ethno"] { --pa: #d4202a; --pa2: #8b0f16; --pa-on: #fff; --pa-ink: #b0141d; --pt-dk: #140a0a; --pt-lt: #faf3ea;
  --pt-pat: repeating-conic-gradient(from 45deg, rgba(212, 32, 42, .13) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }

/* шапка сторінки в темі (класика — як було) */
.ap:not([data-ptheme="classic"]) .artist-hero { background: var(--pt-hero-bg); border-color: color-mix(in srgb, var(--pa) 40%, var(--border)); }
.ap:not([data-ptheme="classic"]) .artist-hero::after { display: none; }
.ap[data-ptheme="ethno"] .artist-hero::before, .pt-mini[data-ptheme="ethno"] .pt-m-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; z-index: 1;
  background: repeating-conic-gradient(from 45deg, #c8102e 0 25%, #111 0 50%) 0 0 / 12px 12px; opacity: .9; }
/* акценти: рамка фото, цифри, кнопки, теги */
.ap:not([data-ptheme="classic"]) .artist-hero .avatar.xl { border: 3px solid var(--pa); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pa) 22%, transparent), 0 16px 40px -14px color-mix(in srgb, var(--pa) 75%, transparent); }
.ap:not([data-ptheme="classic"]) .artist-stats .stat b { color: var(--pa); }
.ap:not([data-ptheme="classic"]) .btn-primary { background: linear-gradient(120deg, var(--pa), var(--pa2)); color: var(--pa-on); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--pa) 85%, transparent); }
.ap:not([data-ptheme="classic"]) .artist-hero .tag { border-color: color-mix(in srgb, var(--pa) 45%, transparent); background: color-mix(in srgb, var(--pa) 12%, transparent); }
.ap:not([data-ptheme="classic"]) .site-follow { border-color: var(--pa); color: var(--pa); }
.ap:not([data-ptheme="classic"]) .site-follow.on { background: var(--pa); color: var(--pa-on); }
.ap:not([data-ptheme="classic"]) .xbutton span { color: var(--pa); }
.ap:not([data-ptheme="classic"]) .art-sec > h2 { color: var(--text); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--pa) 60%, transparent); display: inline-block; padding-bottom: 2px; }
html[data-theme="light"] .ap:not([data-ptheme="classic"]) .artist-stats .stat b,
html[data-theme="light"] .ap:not([data-ptheme="classic"]) .site-follow,
html[data-theme="light"] .ap:not([data-ptheme="classic"]) .xbutton span { color: var(--pa-ink); }
html[data-theme="light"] .ap:not([data-ptheme="classic"]) .site-follow { border-color: var(--pa-ink); }
html[data-theme="light"] .ap:not([data-ptheme="classic"]) .site-follow.on { background: var(--pa-ink); color: #fff; }

/* банер: ПК — 3:1, телефон — середина ~16:9; аватарка «наїжджає» на край банера */
.ap-banner { position: relative; margin: -34px -34px 0; aspect-ratio: 3 / 1; overflow: hidden; border-radius: 27px 27px 0 0; background: var(--surface2); }
.ap-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ap-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .35)); pointer-events: none; }
.artist-hero.has-banner .profile-head { align-items: flex-start; margin-top: 14px; }
.artist-hero.has-banner .profile-head > .avatar { align-self: flex-start; margin-top: -78px; position: relative; z-index: 2; border: 4px solid var(--bg2); }
.ap:not([data-ptheme="classic"]) .artist-hero.has-banner .profile-head > .avatar { border-color: var(--pa); }
@media (max-width: 720px) {
  .ap-banner { margin: -22px -18px 0; aspect-ratio: 16 / 9; border-radius: 21px 21px 0 0; }
  .artist-hero.has-banner .profile-head { align-items: flex-start; }
  .artist-hero.has-banner .profile-head > .avatar { margin-top: -56px; }
}

/* кабінет: вибір теми */
.pt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.pt-opt { margin: 0; display: grid; gap: 3px; padding: 8px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.pt-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pt-opt:hover { border-color: var(--border2); }
.pt-opt.on, .pt-opt:has(input:checked) { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43, 127, 255, .22); }
.pt-opt b { font-size: 14px; margin-top: 5px; }
.pt-opt small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.pt-mini { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 11px; overflow: hidden; border: 1px solid var(--border); }
.pt-m-hero { position: absolute; inset: 0; background: var(--pt-hero-bg); }
.pt-m-ban { position: absolute; left: 0; right: 0; top: 0; height: 34%; background: linear-gradient(120deg, color-mix(in srgb, var(--pa) 70%, transparent), color-mix(in srgb, var(--pa2) 60%, transparent)); }
.pt-m-ava { position: absolute; left: 9%; top: 22%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #8a8fa3, #4b5060); border: 2px solid var(--pa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa) 25%, transparent); }
.pt-m-l1, .pt-m-l2 { position: absolute; left: 38%; height: 7%; border-radius: 4px; background: var(--text); opacity: .75; }
.pt-m-l1 { top: 42%; width: 42%; } .pt-m-l2 { top: 54%; width: 28%; opacity: .35; }
.pt-m-btn { position: absolute; left: 9%; bottom: 12%; width: 34%; height: 13%; border-radius: 999px; background: linear-gradient(120deg, var(--pa), var(--pa2)); }
.pt-m-num { position: absolute; right: 8%; bottom: 14%; display: flex; gap: 4px; }
.pt-m-num i { width: 9px; height: 9px; border-radius: 3px; background: var(--pa); }
.pt-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.pt-h3 { margin: 22px 0 6px; font-size: 15px; }
/* банер у кабінеті й у вікні обрізки: «що видно на телефоні» */
.pt-ban { position: relative; aspect-ratio: 3 / 1; border-radius: 14px; overflow: hidden; margin: 10px 0 12px; background: var(--surface2); border: 1px dashed var(--border2); display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 13px; }
.pt-ban img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pt-ban.empty .pt-safe { opacity: .55; }
.pt-safe { position: absolute; top: 0; bottom: 0; left: 20.4%; right: 20.4%; border: 2px dashed rgba(255, 255, 255, .95); border-top: 0; border-bottom: 0; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .38); pointer-events: none; z-index: 2; }
.pt-safe em { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .55); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.crop-frame.ban { aspect-ratio: 3 / 1; }
@media (max-width: 720px) {
  .pt-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pt-opt { padding: 6px; }
  .pt-opt b { font-size: 13px; }
  .pt-opt small { font-size: 11px; }
  .pt-actions .btn { flex: 1 1 auto; }
}
/* v77: картки артистів — ім'я не обрізаємо (до 2 рядків), підписи в ряду на одному рівні */
.acard b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
.acard small { white-space: normal; line-height: 1.3; min-height: 2.6em; }
.acard .acard-stats { margin-top: auto; }
/* v77: «Голосування» для артиста — пояснення замість «Зареєструватись / Увійти» */
.vote-note { margin: 8px auto 0; max-width: 560px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; line-height: 1.45; }
/* v80 (Чат 2): кабінет — назви публікацій не обрізаємо, переносимо */
.my-track-info b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
/* v81 (Чат 2): фон УСІЄЇ сторінки артиста за темою + «Свій фон» + превʼю з фоном у кабінеті */
.ap { --pg1: 44%; --pg2: 34%; --pt-xtra: linear-gradient(transparent, transparent); --pt-ppat: var(--pt-pat);
  --pt-page: radial-gradient(75% 60% at 0% 0%, color-mix(in srgb, var(--pa) var(--pg1), transparent), transparent 72%),
    radial-gradient(70% 60% at 100% 100%, color-mix(in srgb, var(--pa2) var(--pg2), transparent), transparent 72%),
    var(--pt-xtra), var(--pt-ppat), linear-gradient(var(--pt-base), var(--pt-base)); }
html[data-theme="light"] .ap { --pg1: 30%; --pg2: 26%; }
.ap[data-ptheme="ocean"] { --pt-xtra: linear-gradient(180deg, transparent 35%, color-mix(in srgb, #0060c0 22%, transparent)); }
.ap[data-ptheme="street"] { --pt-xtra: linear-gradient(160deg, transparent 48%, color-mix(in srgb, var(--pa) 16%, transparent) 49.5%, transparent 51%); }
.ap[data-ptheme="drill"] { --pg1: 30%; --pt-xtra: radial-gradient(60% 50% at 100% 0%, rgba(255, 42, 61, .18), transparent 70%); }
.ap[data-ptheme="rose"] { --pt-xtra: radial-gradient(50% 40% at 85% 15%, rgba(247, 198, 199, .16), transparent 70%); }
.ap[data-ptheme="aurora"] { --pg1: 40%; --pg2: 34%;
  --pt-xtra: radial-gradient(55% 22% at 30% 18%, rgba(20, 216, 196, .22), transparent 70%), radial-gradient(50% 26% at 72% 34%, rgba(139, 92, 246, .26), transparent 70%), radial-gradient(45% 20% at 45% 62%, rgba(80, 160, 255, .14), transparent 70%); }
html[data-theme="light"] .ap[data-ptheme="aurora"] { --pg1: 28%; --pg2: 24%; }
.ap[data-ptheme="pearl"] { --pt-xtra: radial-gradient(40% 35% at 20% 70%, rgba(255, 228, 225, .14), transparent 70%); }
.ap[data-ptheme="ethno"] { --pg1: 26%; --pg2: 20%; --pt-ppat: radial-gradient(rgba(212, 32, 42, .12) 1.5px, transparent 2px) 0 0 / 22px 22px; }

/* шар фону: на весь екран, під усім контентом (класика без свого фону — фон сайту як був) */
.ap-pagebg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: none; }
.ap:not([data-ptheme="classic"]) > .ap-pagebg, .ap-pagebg.has-img { display: block; background: var(--pt-page); }
body:has(.ap:not([data-ptheme="classic"]) > .ap-pagebg)::before, body:has(.ap:not([data-ptheme="classic"]) > .ap-pagebg)::after,
body:has(.ap-pagebg.has-img)::before, body:has(.ap-pagebg.has-img)::after { display: none; }
/* Етно: орнаментальні смуги по краях екрана */
.ap[data-ptheme="ethno"] > .ap-pagebg:not(.has-img)::before, .ap[data-ptheme="ethno"] > .ap-pagebg:not(.has-img)::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 28px; opacity: .55;
  background: repeating-conic-gradient(from 45deg, #c8102e 0 25%, transparent 0 50%) 0 0 / 14px 14px; }
.ap[data-ptheme="ethno"] > .ap-pagebg:not(.has-img)::before { left: 0; }
.ap[data-ptheme="ethno"] > .ap-pagebg:not(.has-img)::after { right: 0; }
html[data-theme="light"] .ap[data-ptheme="ethno"] > .ap-pagebg:not(.has-img)::before, html[data-theme="light"] .ap[data-ptheme="ethno"] > .ap-pagebg:not(.has-img)::after { opacity: .4; }
@media (max-width: 720px) { .ap[data-ptheme="ethno"] > .ap-pagebg:not(.has-img)::before, .ap[data-ptheme="ethno"] > .ap-pagebg:not(.has-img)::after { width: 7px; background-size: 7px 7px; } }

/* свій фон: картинка cover, розмита, поверх — пелена кольору теми (по центру щільніша — там текст) */
.ap-pagebg.has-img img { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(9px) saturate(1.1); }
.ap-pagebg.has-img::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pt-base) 50%, transparent), color-mix(in srgb, var(--pt-base) 80%, transparent) 22%, color-mix(in srgb, var(--pt-base) 80%, transparent) 78%, color-mix(in srgb, var(--pt-base) 50%, transparent)); }
.ap[data-ptheme="classic"] > .ap-pagebg.has-img { --pt-base: var(--bg); }
html[data-theme="light"] .ap-pagebg.has-img::after { background: linear-gradient(90deg, color-mix(in srgb, var(--pt-base) 55%, transparent), color-mix(in srgb, var(--pt-base) 85%, transparent) 22%, color-mix(in srgb, var(--pt-base) 85%, transparent) 78%, color-mix(in srgb, var(--pt-base) 55%, transparent)); }
@media (max-width: 720px) {
  .ap-pagebg.has-img img { filter: blur(7px) saturate(1.1); }
  .ap-pagebg.has-img::after { background: color-mix(in srgb, var(--pt-base) 78%, transparent); }
  html[data-theme="light"] .ap-pagebg.has-img::after { background: color-mix(in srgb, var(--pt-base) 84%, transparent); }
}

/* кабінет: міні-превʼю — фон сторінки + шапка-картка + полиця */
.pt-mini .pt-m-page { position: absolute; inset: 0; background: var(--pt-page); }
.pt-mini[data-ptheme="classic"] .pt-m-page { background: radial-gradient(70% 60% at 0 0, rgba(43, 127, 255, .3), transparent 70%), radial-gradient(70% 60% at 100% 100%, rgba(255, 61, 168, .2), transparent 70%), var(--bg); }
.pt-mini[data-ptheme="ethno"] .pt-m-page::before, .pt-mini[data-ptheme="ethno"] .pt-m-page::after { content: ''; position: absolute; top: 0; bottom: 0; width: 5px; opacity: .6; background: repeating-conic-gradient(from 45deg, #c8102e 0 25%, transparent 0 50%) 0 0 / 5px 5px; }
.pt-mini[data-ptheme="ethno"] .pt-m-page::before { left: 0; } .pt-mini[data-ptheme="ethno"] .pt-m-page::after { right: 0; }
.pt-mini .pt-m-hero { inset: 9% 11% 33% 11%; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--pa) 45%, transparent); overflow: hidden; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6); }
.pt-mini .pt-m-shelf { position: absolute; left: 11%; right: 11%; bottom: 8%; height: 18%; display: flex; gap: 6%; }
.pt-mini .pt-m-shelf i { flex: 1; border-radius: 4px; background: color-mix(in srgb, var(--text) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pa) 30%, transparent); }
.pt-mini[data-ptheme="ethno"] .pt-m-hero::after { height: 7%; background-size: 6px 6px; }

/* кабінет: превʼю свого фону */
.pt-bg { position: relative; aspect-ratio: 16 / 9; max-width: 520px; border-radius: 14px; overflow: hidden; margin: 10px 0 12px; background: var(--surface2); border: 1px dashed var(--border2); display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 13px; }
.pt-bg img { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; filter: blur(5px); }
.pt-bg:not(.empty)::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 62%, transparent); }
.pt-bg-card { position: relative; z-index: 1; display: grid; gap: 2px; padding: 12px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); backdrop-filter: blur(6px); }
.pt-bg-card small { color: var(--muted); }

/* v82 (Чат 1): назви треків не обрізаємо в 1 рядок — до 2 рядків (головна «Нагороди тижня», /top, /vote) */
.awc-t, .aw-row .awc-t { -webkit-line-clamp: 2 !important; line-clamp: 2; overflow-wrap: anywhere; }
.aw-ttx b, .vote-info a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
/* v82 (Чат 2): готові фони сторінки — плитки, превʼю з рамкою «видно на телефоні», інструкція */
.bg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.bg-opt { position: relative; margin: 0; display: grid; gap: 5px; padding: 6px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.bg-opt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.bg-opt:hover { border-color: var(--border2); }
.bg-opt.on { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(43, 127, 255, .22); }
.bg-opt.on::after { content: '✓'; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; font-size: 13px; font-weight: 800; }
.bg-th { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: var(--surface2); }
.bg-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-th i { font-style: normal; font-size: 12px; color: var(--muted); }
.bg-opt.none .bg-th { background: radial-gradient(70% 70% at 0 0, rgba(43, 127, 255, .35), transparent 70%), radial-gradient(70% 70% at 100% 100%, rgba(255, 61, 168, .25), transparent 70%), var(--bg2); }
.bg-up .bg-th { border: 1.5px dashed var(--border2); background: transparent; }
.bg-up .bg-th i { font-size: 28px; color: var(--violet); }
.bg-opt b { font-size: 13px; line-height: 1.25; padding: 0 2px 2px; }
#bg-prev img[hidden] { display: none; }
#bg-prev.empty { background: radial-gradient(70% 70% at 0 0, rgba(43, 127, 255, .3), transparent 70%), radial-gradient(70% 70% at 100% 100%, rgba(255, 61, 168, .22), transparent 70%), var(--bg2); }
#bg-prev.empty::after { display: none; }
.bg-safe { position: absolute; top: 0; bottom: 0; left: 34.2%; right: 34.2%; z-index: 2; border: 2px dashed rgba(255, 255, 255, .9); border-top: 0; border-bottom: 0; pointer-events: none; }
.bg-safe em { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .55); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
#bg-prev .pt-bg-card { z-index: 3; }
.bg-help { margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; line-height: 1.5; }
.bg-help p { margin: 6px 0 0; color: var(--muted); }
.bg-help p b { color: var(--text); }
@media (max-width: 720px) {
  .bg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bg-opt b { font-size: 12.5px; }
  #bg-save { flex: 1 1 auto; }
}
/* v82: картинка-фон — по краях видно більше, у світлій темі яскравіша (без «сірої каші») */
.ap-pagebg.has-img img { filter: blur(7px) saturate(1.15); }
.ap-pagebg.has-img::after { background: linear-gradient(90deg, color-mix(in srgb, var(--pt-base) 38%, transparent), color-mix(in srgb, var(--pt-base) 74%, transparent) 20%, color-mix(in srgb, var(--pt-base) 74%, transparent) 80%, color-mix(in srgb, var(--pt-base) 38%, transparent)); }
html[data-theme="light"] .ap-pagebg.has-img img { filter: blur(7px) saturate(1.4) brightness(1.18); }
html[data-theme="light"] .ap-pagebg.has-img::after { background: linear-gradient(90deg, color-mix(in srgb, var(--pt-base) 34%, transparent), color-mix(in srgb, var(--pt-base) 82%, transparent) 20%, color-mix(in srgb, var(--pt-base) 82%, transparent) 80%, color-mix(in srgb, var(--pt-base) 34%, transparent)); }
@media (max-width: 720px) {
  .ap-pagebg.has-img img { filter: blur(6px) saturate(1.15); }
  .ap-pagebg.has-img::after { background: color-mix(in srgb, var(--pt-base) 72%, transparent); }
  html[data-theme="light"] .ap-pagebg.has-img img { filter: blur(6px) saturate(1.4) brightness(1.18); }
  html[data-theme="light"] .ap-pagebg.has-img::after { background: color-mix(in srgb, var(--pt-base) 80%, transparent); }
}
.pt-bg img { filter: blur(3px); }
html[data-theme="light"] .pt-bg img { filter: blur(3px) saturate(1.4) brightness(1.18); }

/* v83 (Чат 1): полиці — заглушка для треку без обкладинки: градієнт NZ + 🎵/🎬 + аватар артиста */
.yc-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 90% at 20% 10%, rgba(255, 212, 0, .55), transparent 55%), linear-gradient(135deg, #1e6bff 0%, #6a3cff 55%, #ff3d6e 100%); }
.yc-ph.is-clip { background: radial-gradient(120% 90% at 80% 10%, rgba(255, 212, 0, .5), transparent 55%), linear-gradient(135deg, #ff3d6e 0%, #6a3cff 60%, #1e6bff 100%); }
.yc-ph i { font-style: normal; font-size: clamp(34px, 32%, 56px); line-height: 1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.yc-ph-av { position: absolute; left: 8px; bottom: 8px; display: flex; }
.yc-ph-av .avatar { width: 30px; height: 30px; font-size: 13px; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
/* v83 (Чат 2): фон-картинка соковита в обох темах — без суцільної пелени; підкладка лише під колонкою контенту + легка віньєтка */
.ap-pagebg.has-img img { filter: blur(5px) saturate(1.12); }
html[data-theme="light"] .ap-pagebg.has-img img { filter: blur(5px) saturate(1.12); }
.ap-pagebg.has-img::after {
  background:
    linear-gradient(90deg, transparent calc(50% - 720px), color-mix(in srgb, var(--pt-base) 72%, transparent) calc(50% - 560px), color-mix(in srgb, var(--pt-base) 72%, transparent) calc(50% + 560px), transparent calc(50% + 720px)),
    radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, .28)); }
html[data-theme="light"] .ap-pagebg.has-img::after {
  background:
    linear-gradient(90deg, transparent calc(50% - 720px), color-mix(in srgb, var(--pt-base) 80%, transparent) calc(50% - 560px), color-mix(in srgb, var(--pt-base) 80%, transparent) calc(50% + 560px), transparent calc(50% + 720px)),
    radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, .18)); }
html[data-theme="light"] .ap:has(> .ap-pagebg.has-img) h2 { text-shadow: 0 0 10px color-mix(in srgb, var(--pt-base) 90%, transparent); }
@media (max-width: 720px) {
  .ap-pagebg.has-img img, html[data-theme="light"] .ap-pagebg.has-img img { filter: blur(5px) saturate(1.12); }
  .ap-pagebg.has-img::after { background: color-mix(in srgb, var(--pt-base) 66%, transparent); }
  html[data-theme="light"] .ap-pagebg.has-img::after { background: color-mix(in srgb, var(--pt-base) 64%, transparent); }
}
html[data-theme="light"] .pt-bg img { filter: blur(3px) saturate(1.12); }

/* v84 (Чат 1): альбоми й плейлисти артиста — полиця, сторінка добірки, кабінет */
.al-cover { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--surface2); }
.al-cover > img, .al-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-collage { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.al-collage img { min-height: 0; }
.al-card { flex: none; width: 150px; scroll-snap-align: start; color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.al-card .al-cover { box-shadow: 0 6px 18px rgba(0, 0, 0, .28); transition: transform .2s; }
.al-card:hover .al-cover { transform: translateY(-2px); }
.al-t { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin-top: 8px; font-size: 14px; line-height: 1.25; min-height: 2.5em; }
.al-s { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
/* сторінка добірки */
.al-back { display: inline-block; margin: 4px 0 12px; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 14px; position: relative; }
.al-back:hover { color: var(--text); }
.al-head { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: end; margin-bottom: 18px; }
.al-head > .al-cover { box-shadow: 0 14px 40px rgba(0, 0, 0, .4); }
.al-info { min-width: 0; }
.al-kicker { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.al-hid { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--pink); }
.al-info h1 { margin: 6px 0 10px; font-size: clamp(24px, 4vw, 40px); line-height: 1.1; overflow-wrap: anywhere; }
.al-by { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; text-decoration: none; }
.al-by:hover span { text-decoration: underline; }
.al-n { margin: 6px 0 0; }
.al-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.al-acts form { margin: 0; }
.al-save.on { border-color: var(--cyan); color: var(--cyan); }
.al-upl { cursor: pointer; }
.al-tracks { position: relative; }
@media (max-width: 720px) {
  .al-head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .al-head > .al-cover { width: min(64vw, 240px); }
  .al-acts { justify-content: center; }
  .al-by { justify-content: center; }
}
/* кабінет: вкладка */
.al-new { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; margin: 12px 0 16px; }
.al-new input[name="name"] { min-width: 0; }
.al-kind { display: flex; gap: 6px; flex-wrap: wrap; }
.al-kind label { cursor: pointer; }
.al-kind input { position: absolute; opacity: 0; pointer-events: none; }
.al-kind span { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border2); background: var(--surface2); font-size: 14px; font-weight: 700; white-space: nowrap; }
.al-kind input:checked + span { border-color: var(--cyan); color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.al-kind input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 720px) { .al-new { grid-template-columns: 1fr; } .al-new .btn { width: 100%; } }
.al-cab { display: grid; gap: 10px; }
.al-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface2); }
.al-item.is-hidden { opacity: .7; }
.al-item-c { display: block; width: 64px; }
.al-item-t { min-width: 0; }
.al-item-t a { color: var(--text); text-decoration: none; }
.al-item-t b { display: block; overflow-wrap: anywhere; line-height: 1.25; }
.al-item-t small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.al-item-a { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.al-item-a form { margin: 0; display: flex; gap: 4px; }
@media (max-width: 720px) {
  .al-item { grid-template-columns: 56px minmax(0, 1fr); }
  .al-item-c { width: 56px; }
  .al-item-a { grid-column: 1 / -1; justify-content: flex-start; }
}
/* сторінка редагування */
.al-edit-head { grid-template-columns: 160px minmax(0, 1fr); }
@media (max-width: 720px) { .al-edit-head > .al-cover { width: min(48vw, 180px); } }
.al-form { display: grid; gap: 12px; }
.al-form h3 { margin: 6px 0 0; }
.al-form h3 small { font-weight: 600; font-size: 13px; }
.al-form > p { margin: 0; }
.al-lbl { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.al-tlist { display: grid; gap: 6px; }
.ale-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); transition: border-color .2s, background .2s; }
.ale-row.on { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, var(--surface2)); }
.ale-row.moved { animation: ale-pop .35s; }
@keyframes ale-pop { from { transform: scale(.98); } to { transform: none; } }
.ale-chk { display: grid; grid-template-columns: 22px 48px minmax(0, 1fr); gap: 10px; align-items: center; cursor: pointer; min-width: 0; }
.ale-chk input { width: 20px; height: 20px; accent-color: var(--cyan); margin: 0; }
.ale-c { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--surface); display: grid; place-items: center; }
.ale-c img { width: 100%; height: 100%; object-fit: cover; }
.ale-t { min-width: 0; }
.ale-t b { display: block; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.ale-t small { color: var(--muted); font-size: 12px; }
.ale-mv { display: flex; flex-direction: column; gap: 4px; }
.ale-mv .mv { width: 34px; height: 30px; font-size: 12px; }
.al-save-bar { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 3; display: flex; justify-content: flex-end; padding-top: 4px; }
.al-save-bar .btn { box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
@media (min-width: 721px) { .al-save-bar { bottom: 12px; } }
.al-danger { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin: 16px 0 8px; }
.al-danger form { margin: 0; }
/* v85 (Чат 2): 📢 «Оновлення» — дзвіночок у шапці кабінету, стрічка /updates, форма в адмінці */
.cab-bell { align-self: center; margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.cab-bell:hover { border-color: var(--border2); transform: translateY(-1px); }
.cab-bell-ic { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface2); font-size: 21px; line-height: 1; }
.cab-bell-ic .nbadge { position: absolute; top: -4px; right: -6px; }
.cab-bell-tx { display: grid; line-height: 1.2; text-align: left; }
.cab-bell-tx b { font-size: 15px; }
.cab-bell-tx small { font-size: 12px; color: var(--muted); }
.cab-bell.has-new { border-color: rgba(255, 61, 110, .55); box-shadow: 0 0 0 3px rgba(255, 61, 110, .12); }
.cab-bell.has-new .cab-bell-tx small { color: #ff3d6e; font-weight: 700; }
.cab-bell.has-new .cab-bell-ic { animation: bell-ring 2.6s ease-in-out 1s 2; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } 50% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .cab-bell.has-new .cab-bell-ic { animation: none; } }
html[data-theme="light"] .cab-bell.has-new .cab-bell-tx small { color: #c8143f; }
@media (max-width: 720px) {
  .cab-head { position: relative; }
  .cab-bell { position: absolute; top: 12px; right: 12px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  .cab-bell.has-new { box-shadow: none; }
  .cab-bell-tx { display: none; }
  .cab-bell-ic { width: 44px; height: 44px; border: 1px solid var(--border); background: var(--surface); }
  .cab-bell.has-new .cab-bell-ic { border-color: rgba(255, 61, 110, .6); box-shadow: 0 0 0 3px rgba(255, 61, 110, .14); }
}

/* стрічка оновлень */
.upd-head { margin: 14px 0 18px; }
.upd-head h1 { margin-bottom: 4px; }
.upd-head p { margin: 0; }
.ann-list { display: grid; gap: 14px; }
.ann { padding: 18px 20px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); }
.ann.is-new { border-color: rgba(255, 61, 110, .5); background: linear-gradient(135deg, rgba(255, 61, 110, .09), transparent 60%), var(--surface); }
.ann.is-pin { border-color: color-mix(in srgb, var(--violet) 55%, var(--border)); }
.ann-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.ann-new { padding: 2px 9px; border-radius: 999px; background: #ff3d6e; color: #fff; font-weight: 800; font-size: 11.5px; }
.ann-pin { font-weight: 700; color: var(--text); }
.ann-aud { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); }
.ann-h { margin: 0 0 10px; font-size: 20px; line-height: 1.25; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 700; }
.ann-img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 14px; margin: 4px 0 12px; }
.ann-body { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.ann-body p { margin: 0 0 10px; }
.ann-body p:last-child { margin-bottom: 0; }
.ann-body a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
.ann-video { position: relative; display: block; margin: 12px 0 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.ann-video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.ann-video span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .65); color: #fff; font-size: 26px; padding-left: 4px; }
.ann-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 720px) {
  .ann { padding: 14px 14px; border-radius: 18px; }
  .ann-h { font-size: 18px; }
  .ann-btns .btn { flex: 1 1 auto; }
}

/* адмінка: форма й список */
.ann-form textarea { min-height: 140px; }
.ann-imgbox img { display: block; max-width: 100%; max-height: 220px; border-radius: 12px; margin: 6px 0 8px; }
.ann-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.ann-seg { grid-template-columns: 1fr 1fr; }
.ann-chk { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-weight: 600; cursor: pointer; }
.ann-chk input { width: auto; margin-top: 3px; }
.ann-chk small { display: block; font-weight: 500; margin-top: 2px; }
.ann-admin { display: grid; gap: 8px; margin-bottom: 18px; }
.ann-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.ann-row.is-pin { border-color: color-mix(in srgb, var(--violet) 55%, var(--border)); }
.ann-row > img, .ann-row-ic { flex: 0 0 auto; width: 56px; height: 40px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: var(--surface2); font-size: 20px; }
.ann-row-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ann-row-tx b { overflow-wrap: anywhere; }
.ann-row .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
  .ann-2 { grid-template-columns: 1fr; gap: 0; }
  .ann-seg { grid-template-columns: 1fr; }
  .ann-row { flex-wrap: wrap; }
  .ann-row .actions { width: 100%; justify-content: flex-start; }
}
/* v84 (дод.): мітки без загальних відступів label, шапка редактора на телефоні — в колонку, «Зберегти» — суцільна смуга */
.al-kind label, .ale-chk, .al-upl { margin: 0; font-size: inherit; color: inherit; }
.al-kind label { display: inline-flex; }
.al-kind { align-items: center; }
.al-lbl { margin: 0; color: var(--text); }
@media (max-width: 720px) { .al-edit-head { grid-template-columns: 1fr; } }
.al-save-bar { margin: 4px -20px -20px; padding: 12px 20px; background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 18px 18px; }
.al-save-bar .btn { box-shadow: none; }
@media (max-width: 720px) { .al-save-bar .btn { width: 100%; } }
.al-form .al-save-bar { margin: 4px -24px -24px; padding: 12px 24px; border-radius: 0 0 var(--radius) var(--radius); }
@media (max-width: 720px) { .al-form .al-save-bar { margin: 4px -18px -18px; padding: 12px 18px; } }
.al-form .al-save-bar { position: static; }

/* v86 (Чат 1): редактор плейлиста артиста — під 100–1000 треків: пошук, сортування, фільтри, порції, порядок перетягуванням */
.al-new { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 720px) { .al-new { grid-template-columns: 1fr; } }
.al-cover-box { display: block; width: 100%; }
.al-cover-hint { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.al-cover-hint b { color: var(--text); }
.al-cover-st { margin: 8px 0 0; font-size: 13.5px; font-weight: 700; color: var(--cyan); }
.al-cover-st.bad { color: var(--danger, #ff4d6d); }
@media (max-width: 720px) { .al-cover-hint { text-align: left; } .al-edit-head .al-cover-box { width: min(48vw, 180px); } }
.alp-h { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0; }
.alp-n { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--cyan); color: #04121a; font-size: 13px; font-weight: 800; }
.alp-tip { margin: 0; }
.alp-sel { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.alp-row { display: grid; grid-template-columns: 30px 24px 44px minmax(0, 1fr) auto 34px; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--border)); background: color-mix(in srgb, var(--cyan) 7%, var(--surface2)); }
.alp-row.dragging { opacity: .85; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); transform: scale(1.01); position: relative; z-index: 2; }
.alp-row.moved { animation: ale-pop .35s; }
.alp-drag { touch-action: none; cursor: grab; width: 30px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; }
.alp-drag:active { cursor: grabbing; background: var(--surface); }
.alp-num { font-size: 13px; font-weight: 800; color: var(--muted); text-align: center; }
.alp-c { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--surface); display: grid; place-items: center; }
.alp-c img { width: 100%; height: 100%; object-fit: cover; }
.alp-c i { font-style: normal; }
.alp-t { min-width: 0; }
.alp-t b { display: block; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.alp-t small { color: var(--muted); font-size: 12px; }
.alp-mv { display: flex; gap: 4px; }
.alp-mv .mv { width: 32px; height: 32px; }
.alp-x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border2); background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }
.alp-x:hover { color: var(--danger, #ff4d6d); border-color: var(--danger, #ff4d6d); }
.alp-empty { margin: 0; }
@media (max-width: 420px) {
  .alp-row { grid-template-columns: 28px 40px minmax(0, 1fr) 34px; grid-template-areas: 'd c t x' 'd c m x'; row-gap: 4px; }
  .alp-row .alp-drag { grid-area: d; } .alp-row .alp-c { grid-area: c; width: 40px; height: 40px; } .alp-row .alp-t { grid-area: t; }
  .alp-row .alp-mv { grid-area: m; } .alp-row .alp-x { grid-area: x; } .alp-row .alp-num { display: none; }
}
.alp-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.alp-tools input, .alp-tools select { margin: 0; min-width: 0; font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); }
@media (max-width: 720px) { .alp-tools { grid-template-columns: 1fr 1fr; } .alp-tools input { grid-column: 1 / -1; font-size: 16px; } }
.alp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.alp-chip { font: inherit; font-size: 13.5px; font-weight: 700; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); cursor: pointer; }
.alp-chip.on { border-color: var(--cyan); color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
label.alp-only { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--text); cursor: pointer; }
label.alp-only input { width: 18px; height: 18px; accent-color: var(--cyan); margin: 0; }
@media (max-width: 720px) { label.alp-only { margin-left: 0; } }
.alp-bulk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.alp-found { margin-right: auto; font-size: 13px; color: var(--muted); font-weight: 700; }
.alp-list { display: grid; gap: 6px; }
label.alp-item { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: inherit; font-weight: inherit; cursor: pointer; }
label.alp-item.on { border-color: color-mix(in srgb, var(--cyan) 55%, var(--border)); }
label.alp-item input { width: 20px; height: 20px; accent-color: var(--cyan); margin: 0; }
.alp-none { margin: 4px 0; }
.alp-more { margin-top: 4px; }
.alp-save { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px -24px -24px; padding: 12px 24px; background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.alp-cnt { font-size: 14px; } .alp-cnt em { font-style: normal; color: var(--pink); font-weight: 700; }
@media (max-width: 720px) {
  .alp-save { position: fixed; left: 0; right: 0; bottom: var(--alp-bnav, 0px); margin: 0; padding: 10px 16px; border-radius: 0; z-index: 59; box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
  .alp-save .btn { flex: 1; max-width: 220px; }
  body:has(#alp-save) .al-danger { margin-bottom: 84px; }
}
@media (max-width: 720px) { html:has(#alp-save) { scroll-padding-bottom: calc(150px + var(--alp-bnav, 0px)); } }
/* v86 (дод.): смуга «Зберегти» поза карткою (у .card є backdrop-filter — fixed усередині «прилипав» до картки) */
.alp-save { margin: -8px 0 16px; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
@media (max-width: 720px) { .alp-save { margin: 0; border-width: 1px 0 0; border-radius: 0; } }
@media (max-width: 720px) { .alp-save { bottom: var(--alp-bnav, calc(62px + env(safe-area-inset-bottom))); } }
/* v86 (дод. 2): довгий список «У плейлисті» — згорнутий до 8; смуга «Зберегти» суцільна (крізь неї не видно рядків) */
.alp-sel.folded > .alp-row:nth-child(n + 9) { display: none; }
.alp-exp { justify-self: start; }
.alp-save { background: linear-gradient(var(--surface), var(--surface)), var(--bg); }
/* v86 (дод. 3): у редакторі плейлиста — той самий рядок фільтрів, що в «Музиці» */
.alp-tools { grid-template-columns: 1fr; }
.alp-chipwrap { min-width: 0; }
.alp-chipwrap .chips-row { margin-bottom: 0; }
label.alp-only { margin: 0; justify-self: start; }
/* v87 (Чат 2): перевірка посилань (не плейлист/альбом), приклади посилань у формі (Кліп / YouTube Music), плашка «Виправ посилання» */
.what-card .what-ex { display: block; margin-top: 4px; font: 600 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); background: none; padding: 0; overflow-wrap: anywhere; }
.what-card:has(input:checked) .what-ex { color: rgba(255, 255, 255, .9); }
html[data-theme="light"] .what-card:has(input:checked) .what-ex { color: rgba(255, 255, 255, .92); }
@media (max-width: 720px) {
  .what-card { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; row-gap: 1px; align-items: center; }
  .what-card .what-ic { grid-row: span 3; align-self: center; }
  .what-card small { margin: 0; text-align: left; }
  .what-card .what-ex { margin: 0; }
}
.qa-hint.bad { display: block; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); line-height: 1.45; font-weight: 600; }
.qa-hint .qa-note { display: block; margin-top: 6px; color: var(--text); font-weight: 600; line-height: 1.45; }
.qa-hint.warn .qa-note { padding: 8px 10px; border-radius: 10px; background: rgba(255, 196, 0, .12); border: 1px solid rgba(255, 196, 0, .35); }

/* кабінет: червона плашка зверху + позначка на треці */
.fix-box { margin: 0 0 16px; padding: 14px 16px; border-radius: 18px; border: 1.5px solid rgba(255, 61, 110, .65); background: linear-gradient(135deg, rgba(255, 61, 110, .16), rgba(255, 61, 110, .05)); display: grid; gap: 10px; }
.fix-box > b { font-size: 16px; color: #ff6b8e; }
html[data-theme="light"] .fix-box > b { color: #c8143f; }
.fix-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; font-size: 14px; line-height: 1.45; }
.fix-btn { flex: 0 0 auto; background: #ff3d6e; color: #fff; border: 0; font-weight: 800; }
.fix-btn:hover { background: #ff2459; color: #fff; }
.my-track.bad-link { border: 1.5px solid rgba(255, 61, 110, .55); border-radius: 14px; padding: 10px; margin: 6px 0; background: rgba(255, 61, 110, .06); }
.bad-badge { display: inline-block; margin: 2px 0 3px; padding: 2px 9px; border-radius: 999px; background: #ff3d6e; color: #fff !important; font-size: 12px; font-weight: 800; text-decoration: none; }
.cab-nav a .nbadge { margin-left: 2px; }
@media (max-width: 720px) {
  .fix-row { flex-direction: column; align-items: stretch; }
  .fix-btn { width: 100%; justify-content: center; }
}

/* адмінка → Публікації */
.fix-admin { border-color: rgba(255, 61, 110, .5); margin-bottom: 14px; }
.fix-admin h3 { margin-bottom: 4px; }
.fix-arow { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); }
.fix-arow-tx { display: grid; gap: 2px; min-width: 0; }
.fix-arow-tx b { overflow-wrap: anywhere; }
@media (max-width: 720px) { .fix-arow { flex-direction: column; align-items: stretch; } }

/* v88 (Чат 1): сторінка артиста — «🆕 Нове» першим; у «Плитках» — карусель з автогортанням, стрілками й точками */
.trow-new { flex: none; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); }
html[data-view="tiles"] .art-pop.art-car { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 0 6px; grid-template-columns: none; }
html[data-view="tiles"] .art-pop.art-car::-webkit-scrollbar { display: none; }
html[data-view="tiles"] .art-car > .art-more, html[data-view="tiles"] .art-car > .art-more.collapsed { display: contents; }
html[data-view="tiles"] .art-car .trow { flex: 0 0 calc((100% - 48px) / 5); min-width: 0; scroll-snap-align: start; order: 0 !important; }
@media (max-width: 1000px) { html[data-view="tiles"] .art-car .trow { flex-basis: calc((100% - 24px) / 3); } }
@media (max-width: 720px) {
  html[data-view="tiles"] .art-car .trow { flex-basis: calc((100% - 12px) / 2); grid-column: auto; }
  html[data-view="tiles"] .art-car .trow.tr-clip .trow-title { min-height: 2.44em; }
}
html[data-view="tiles"] .art-car .trow-cover, html[data-view="tiles"] .art-car .trow.tr-clip .trow-cover { aspect-ratio: 1 / 1; }
html[data-view="tiles"] .art-car .trow-cover .tr-art { object-fit: cover; }
html[data-view="tiles"] .art-sec .art-all { display: none; }
.car-nav { display: none; }
html[data-view="tiles"] .car-nav:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.car-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; }
.car-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.car-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.car-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--border2); cursor: pointer; transition: width .25s, background .25s; }
.car-dot.on { width: 22px; background: var(--cyan); }
@media (max-width: 720px) { .car-btn { display: none; } .car-dot { width: 7px; height: 7px; } .car-dot.on { width: 18px; } }
html[data-view="tiles"] .art-pop.art-car { flex-direction: row; flex-wrap: nowrap; align-items: stretch; }
.car-prog { display: block; width: min(220px, 50vw); height: 6px; border-radius: 999px; background: var(--border2); overflow: hidden; }
.car-prog i { display: block; height: 100%; width: 10%; border-radius: inherit; background: var(--cyan); transition: width .3s; }

/* v89 (Чат 1): колаж обкладинки плейлиста — лише з РІЗНИХ картинок: 2 — навпіл, 3 — велика + 2, 4 — 2×2; поки перевіряємо — прихований */
.al-collage.c2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.al-collage.c3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.al-collage.c3 img:first-child { grid-row: 1 / 3; }
.al-collage.c4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.al-collage img { gap: 0; }
.al-collage.al-pend img { opacity: 0; }
.al-collage img { transition: opacity .25s; }

/* v90 (Чат 1): нові релізи з каналу артиста — «⏳ Нові релізи — чекають підтвердження» + «📺 Мій канал» */
.rel-box { margin: 4px 0 16px; padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--cyan) 50%, var(--border)); background: color-mix(in srgb, var(--cyan) 7%, var(--surface2)); }
.rel-box h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 16px; }
.rel-box > p { margin: 0 0 10px; }
.rel-list { display: grid; gap: 8px; }
.rel-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.rel-c { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--surface2); }
.rel-c img { width: 100%; height: 100%; object-fit: cover; }
.rel-t { min-width: 0; }
.rel-t b { display: block; line-height: 1.25; overflow-wrap: anywhere; }
.rel-t small { color: var(--muted); font-size: 12.5px; }
.rel-a { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rel-a form { margin: 0; }
@media (max-width: 720px) { .rel-row { grid-template-columns: 56px minmax(0, 1fr); } .rel-c { width: 56px; height: 56px; } .rel-a { grid-column: 1 / -1; justify-content: flex-start; } }
.ch-box { margin: 14px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface2); }
.ch-box > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.ch-box > summary::-webkit-details-marker { display: none; }
.ch-box > summary::after { content: '▾'; margin-left: auto; color: var(--muted); }
.ch-box[open] > summary::after { content: '▴'; }
.ch-st { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ch-st.on { color: #22c55e; }
.ch-box > p { margin: 10px 0 0; }
.ch-cur { font-size: 14px; }
.ch-cur a { color: var(--text); }
.ch-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; margin-top: 10px; }
.ch-form input[type="text"] { margin: 0; min-width: 0; }
label.ch-auto { display: inline-flex; align-items: center; gap: 6px; margin: 0; grid-column: 1 / -1; grid-row: 2; font-size: 14px; color: var(--text); font-weight: 600; }
label.ch-auto input { width: 18px; height: 18px; margin: 0; accent-color: var(--cyan); }
.ch-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ch-acts form { margin: 0; }
@media (max-width: 720px) { .ch-form { grid-template-columns: 1fr; } .ch-form .btn { width: 100%; } label.ch-auto { grid-row: auto; } }
.upd-rel { margin-bottom: 18px; }

/* v92 (Чат 1): усі горизонтальні полиці — стрілки ‹ › на ПК (лише коли є що гортати) + м'яке затухання краю */
.hs-wrap { position: relative; }
.hs-btn { display: none; }
.hs-wrap.hs-r > :is(.shelf-row, .qp-row, .lib-artists) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
.hs-wrap.hs-l > :is(.shelf-row, .qp-row, .lib-artists) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.hs-wrap.hs-l.hs-r > :is(.shelf-row, .qp-row, .lib-artists) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 64px), transparent); }
@media (hover: hover) and (min-width: 721px) {
  .hs-btn { display: grid; place-items: center; position: absolute; top: 40%; z-index: 4; width: 42px; height: 42px; padding: 0 0 3px; transform: translateY(-50%); border-radius: 50%; border: 1px solid var(--border2); background: var(--surface); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity .2s, border-color .2s, color .2s; }
  .hs-btn:hover { border-color: var(--cyan); color: var(--cyan); }
  .hs-prev { left: 4px; } .hs-next { right: 4px; }
  .hs-wrap.hs-l > .hs-prev, .hs-wrap.hs-r > .hs-next { opacity: 1; pointer-events: auto; }
}

/* v93 (Чат 1): два канали для нових релізів — «з піснями» (YouTube Music) і «з кліпами» (YouTube), підказки й 3 останні відео */
.ch-form { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; }
.ch-slot { display: grid; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
label.ch-lbl { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--text); }
label.ch-lbl small { font-weight: 600; color: var(--muted); }
.ch-slot input[type="text"] { margin: 0; }
.ch-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ch-hint b { color: var(--text); }
.ch-hint code { font-size: 12px; padding: 1px 5px; border-radius: 6px; background: var(--surface2); color: var(--text); word-break: break-all; }
.ch-card { margin-top: 4px; padding: 10px; border-radius: 10px; background: color-mix(in srgb, #22c55e 8%, var(--surface2)); border: 1px solid color-mix(in srgb, #22c55e 40%, var(--border)); }
.ch-name { color: var(--text); text-decoration: none; font-size: 14px; }
.ch-name b { color: #16a34a; }
.ch-last { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.ch-v { min-width: 0; display: grid; gap: 4px; }
.ch-v img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; background: var(--surface2); }
.ch-v small { font-size: 11.5px; line-height: 1.25; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
label.ch-auto { grid-row: auto; grid-column: auto; }
.ch-clear { margin: -6px 0 0; }
.ch-form > .btn { justify-self: start; }
@media (max-width: 720px) { .ch-form > .btn { justify-self: stretch; } }
.ch-last { grid-template-columns: repeat(3, minmax(0, 140px)); }

/* v94 (Чат 1): канали — час «остання / наступна перевірка» + «Де взяти посилання?» з міні-схемами */
.ch-time { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; line-height: 1.45; color: var(--muted); }
.ch-time b { color: var(--text); }
.ch-how { border-radius: 10px; border: 1px dashed var(--border2); padding: 6px 10px; }
.ch-how > summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--cyan); list-style: none; }
.ch-how > summary::-webkit-details-marker { display: none; }
.ch-how-b { display: grid; gap: 8px; margin-top: 8px; }
.ch-how-or { margin: 0; font-size: 13px; line-height: 1.45; }
.ch-how-h { font-size: 13.5px; margin-top: 4px; }
.ch-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; counter-reset: st; }
.ch-steps li { counter-increment: st; display: grid; gap: 6px; align-content: start; }
.ch-steps li small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ch-steps li small::before { content: counter(st) '. '; font-weight: 800; color: var(--text); }
.ch-sk { position: relative; display: grid; gap: 5px; align-content: start; height: 104px; padding: 8px; border-radius: 12px; border: 2px solid var(--border2); background: var(--bg); font-size: 11px; overflow: hidden; }
.ch-sk.wide { height: 70px; }
.sk-bar { display: flex; justify-content: space-between; font-weight: 800; font-size: 10.5px; color: var(--muted); }
.sk-cover { width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; background: linear-gradient(135deg, #1e6bff, #ff3d6e); color: #fff; font-size: 16px; }
.sk-t { font-weight: 800; color: var(--text); }
.sk-a { justify-self: start; }
.sk-menu { display: grid; gap: 4px; margin-top: auto; padding: 6px; border-radius: 8px; background: var(--surface2); }
.sk-menu i { font-style: normal; }
.sk-url { padding: 4px 6px; border-radius: 6px; background: var(--surface2); font-family: ui-monospace, monospace; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-sk .hl { outline: 2px solid #ffd400; outline-offset: 2px; border-radius: 6px; padding: 0 3px; color: var(--text); font-weight: 800; font-style: normal; }
.ch-sk { height: auto; min-height: 96px; }
.ch-sk.wide { min-height: 60px; }
/* v94 (дод.): «🔄 Перевірити зараз» — крутилка під час перевірки, не частіше раз на 5 хв */
.ch-check { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ch-check small { font-size: 12px; }
.ch-check .btn.busy { opacity: .85; }
.ch-check .btn .spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ch-spin .8s linear infinite; vertical-align: -2px; }
@keyframes ch-spin { to { transform: rotate(360deg); } }
/* v95 (Чат 2): 🎓 Навчання — кнопка в шапці кабінету (стопкою з «Оновленням»), сторінка /learn з картками 9:16 і плеєром */
.cab-side { align-self: center; margin-left: auto; display: grid; gap: 8px; }
.cab-side .cab-bell { margin: 0; align-self: stretch; }
.cab-learn { border-color: rgba(255, 196, 0, .45); background: linear-gradient(135deg, rgba(255, 196, 0, .12), rgba(43, 127, 255, .1)), var(--surface); box-shadow: 0 0 0 3px rgba(255, 196, 0, .08), 0 8px 26px -12px rgba(255, 196, 0, .55); }
.cab-learn .cab-bell-ic { background: linear-gradient(135deg, rgba(255, 196, 0, .25), rgba(43, 127, 255, .2)); }
.cab-learn .cab-bell-ic .nbadge, .nav-me-panel .nbadge[data-learn-new] { background: #ffc400; color: #1a1300; font-size: 10px; }
.cab-learn.has-new { border-color: rgba(255, 196, 0, .8); box-shadow: 0 0 0 3px rgba(255, 196, 0, .16), 0 10px 30px -10px rgba(255, 196, 0, .7); }
.cab-learn .cab-bell-tx small { color: var(--muted); }
html[data-theme="light"] .cab-learn { border-color: rgba(200, 140, 0, .5); }
@media (max-width: 720px) {
  .cab-side { position: absolute; top: 12px; right: 12px; margin: 0; gap: 8px; }
  .cab-side .cab-bell { position: static; }
  .cab-learn { box-shadow: none; background: none; }
  .cab-learn .cab-bell-ic { border-color: rgba(255, 196, 0, .65); box-shadow: 0 0 0 3px rgba(255, 196, 0, .14), 0 0 18px rgba(255, 196, 0, .35); }
  .cab-learn .cab-bell-ic .nbadge { top: -6px; right: -12px; }
}

/* посилання на /learn у «Стати артистом» і «Правилах» */
.learn-link { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 196, 0, .5); background: rgba(255, 196, 0, .1); color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; }
.learn-link:hover { background: rgba(255, 196, 0, .18); }

/* сторінка /learn */
.learn-head { margin: 14px 0 6px; }
.learn-head h1 { margin-bottom: 4px; }
.learn-head p { margin: 0 0 10px; max-width: 640px; }
.learn-prog { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--surface2); font-size: 13px; font-weight: 700; }
.learn-prog span { color: var(--ok); }
.learn-sec { margin-top: 26px; }
.learn-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.learn-sec-h h2 { margin: 0; font-size: 20px; color: var(--text); text-transform: none; letter-spacing: 0; }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.lc { all: unset; box-sizing: border-box; display: grid; gap: 8px; cursor: pointer; color: var(--text); border-radius: 16px; }
.lc:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.lc-media { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #0b0b12; border: 1px solid var(--border); transition: transform .15s, box-shadow .15s; }
.lc:hover .lc-media { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(43, 127, 255, .7); }
.lc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-n { position: absolute; top: 8px; left: 8px; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: #ffc400; color: #1a1300; font-weight: 900; font-size: 14px; }
.lc-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; padding-left: 4px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 22px; backdrop-filter: blur(4px); }
.lc-dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; font-weight: 700; }
.lc-done { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(23, 160, 90, .92); color: #fff; font-size: 11px; font-weight: 800; }
.lc.is-seen .lc-media { opacity: .82; }
.lc-body { display: grid; gap: 3px; padding: 0 2px; }
.lc-body b { font-size: 14.5px; line-height: 1.3; }
.lc-body small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.lc-soon { cursor: default; display: grid; gap: 8px; }
.lc-soon .lc-media { border-style: dashed; border-color: var(--border2); background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 10px, var(--surface2) 10px, var(--surface2) 20px); }
.lc-soon-tx { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: var(--muted); }
@media (max-width: 720px) {
  .learn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .learn-sec-h h2 { font-size: 18px; }
  .lc-play { width: 46px; height: 46px; font-size: 19px; }
}

/* плеєр уроку поверх сторінки */
html.lp-open { overflow: hidden; }
.lp { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 12px; background: rgba(3, 3, 8, .88); backdrop-filter: blur(8px); }
.lp[hidden] { display: none; }
.lp-box { width: min(440px, 100%); display: grid; gap: 10px; }
.lp-top { display: flex; align-items: center; gap: 10px; color: #fff; }
.lp-top b { flex: 1; font-size: 15px; line-height: 1.3; }
.lp-x { all: unset; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; flex: 0 0 auto; }
.lp-box video { width: 100%; aspect-ratio: 9 / 16; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); background: #000; border-radius: 16px; display: block; margin: 0 auto; object-fit: contain; }
.lp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-bar .muted { color: rgba(255, 255, 255, .7); }
.lp-bar .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); }
#lp-next.pulse { animation: lp-pulse 1.4s ease-in-out infinite; }
@keyframes lp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(43, 127, 255, .7); } 50% { box-shadow: 0 0 0 8px rgba(43, 127, 255, 0); } }
.cab-learn.has-new .cab-bell-tx small { color: var(--muted); font-weight: 600; }
.cab-learn.has-new .cab-bell-ic { animation: none; }
.cab-learn .cab-bell-ic .nbadge { top: -8px; right: auto; left: 26px; }
.lc-n { font-size: 13px; }
html[data-theme="light"] .cab-learn.has-new .cab-bell-tx small { color: var(--muted); }
/* v96 (Чат 2): ▶ контекстні відео-кнопки (той самий плеєр уроку поверх сторінки) + /learn для слухача («Для артистів» згорнуто) */
.vrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.vbtn { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid rgba(255, 196, 0, .55); background: linear-gradient(135deg, rgba(255, 196, 0, .16), rgba(43, 127, 255, .12)); color: var(--text); font: 700 13px/1.2 var(--font-body); cursor: pointer; vertical-align: middle; white-space: nowrap; box-shadow: 0 0 0 3px rgba(255, 196, 0, .1), 0 6px 20px -8px rgba(255, 196, 0, .7); animation: vglow 2.4s ease-in-out infinite; transition: transform .15s; }
.vbtn:hover { transform: translateY(-1px); }
.vbtn i { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; padding-left: 2px; background: #ffc400; color: #1a1300; font-style: normal; font-size: 11px; }
.vbtn span { overflow: hidden; text-overflow: ellipsis; }
.vbtn small { font-weight: 600; color: var(--muted); }
.vbtn.seen { animation: none; border-color: var(--border2); background: var(--surface); box-shadow: none; }
.vbtn.seen i { background: var(--surface2); color: var(--text); }
@keyframes vglow { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 196, 0, .1), 0 6px 20px -8px rgba(255, 196, 0, .7); } 50% { box-shadow: 0 0 0 5px rgba(255, 196, 0, .18), 0 6px 24px -6px rgba(255, 196, 0, .9); } }
@media (prefers-reduced-motion: reduce) { .vbtn { animation: none; } }
html[data-theme="light"] .vbtn { border-color: rgba(200, 140, 0, .55); }
p > .vbtn { margin: 4px 0 0 4px; }
.hero-vrow { margin: 4px 0 14px; }
.an-head .vbtn { margin-top: 6px; }
.lp-bar a.btn { text-decoration: none; }
@media (max-width: 720px) {
  .vbtn { padding: 5px 10px 5px 5px; font-size: 12.5px; gap: 6px; }
  .vbtn i { width: 22px; height: 22px; }
  p > .vbtn { display: flex; width: fit-content; margin: 8px 0 0; }
}
/* /learn: «Для артистів» згорнуто для слухачів і гостей */
.learn-more { margin-top: 28px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); padding: 0 14px; }
.learn-more > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 0; }
.learn-more > summary::-webkit-details-marker { display: none; }
.learn-more > summary b { font-size: 18px; }
.learn-more > summary::after { content: '▾'; margin-left: auto; color: var(--muted); }
.learn-more[open] > summary::after { content: '▴'; }
.learn-more[open] { padding-bottom: 14px; }
.cab-learn .cab-bell-ic .nbadge { left: -10px; right: auto; top: -8px; }

/* v97 (Чат 1): дні народження — поле дати, вікно / «ворота», бейдж 🎂, банер і привітання, полиця на головній, адмінка */
.bday-f { display: grid; gap: 6px; }
.bday-f input[type="date"] { max-width: 240px; margin: 0; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); color-scheme: light dark; }
.bday-note { margin: 0; font-size: 12.5px; color: var(--muted); }
label.bday-show { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
label.bday-show input { width: 18px; height: 18px; margin: 0; accent-color: var(--cyan); }
.bday-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bday-modal[hidden] { display: none; }
.bday-card { width: min(420px, 100%); display: grid; gap: 12px; padding: 22px; border-radius: 20px; background: var(--bg); background: linear-gradient(var(--surface), var(--surface)), var(--bg); border: 1px solid var(--border2); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); text-align: left; }
.bday-card h1, .bday-card h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.bday-ic { font-size: 44px; line-height: 1; }
.bday-gate { display: grid; place-items: center; padding: 10px 0 30px; }
.bday-gate .bday-card { width: 100%; max-width: 480px; }
.bday-badge { display: inline-block; font-size: .9em; line-height: 1; margin-left: 4px; animation: bday-pop 2.4s ease-in-out infinite; }
@keyframes bday-pop { 0%, 80%, 100% { transform: none; } 88% { transform: rotate(-12deg) scale(1.15); } 94% { transform: rotate(10deg) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .bday-badge { animation: none; } }
.bday-banner { position: relative; display: grid; gap: 12px; margin: 0 0 22px; padding: 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, #ffd400 55%, var(--border)); background: radial-gradient(120% 140% at 0% 0%, rgba(255, 212, 0, .22), transparent 60%), radial-gradient(120% 140% at 100% 0%, rgba(255, 61, 110, .2), transparent 60%), var(--surface); }
.bday-b-h { display: flex; gap: 12px; align-items: center; }
.bday-b-ic { font-size: 36px; line-height: 1; }
.bday-b-h b { display: block; font-size: 18px; line-height: 1.25; }
.bday-b-h small { color: var(--muted); font-size: 13px; }
.bday-wish > summary { list-style: none; display: inline-flex; }
.bday-wish > summary::-webkit-details-marker { display: none; }
.bday-wish form { display: grid; gap: 8px; margin-top: 10px; }
.bday-wish textarea { margin: 0; min-height: 70px; }
.bday-wish form .btn { justify-self: start; }
.bday-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 340px; overflow-y: auto; }
.bday-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--surface2); font-size: 14px; line-height: 1.4; }
.bday-list li span { min-width: 0; overflow-wrap: anywhere; }
.bday-home { margin: 0 0 24px; padding: 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, #ffd400 50%, var(--border)); background: radial-gradient(120% 160% at 0% 0%, rgba(255, 212, 0, .18), transparent 60%), var(--surface); }
.bday-home .sec-head { margin-bottom: 12px; }
.bday-agrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.adm-bday h2 small { font-size: 12px; font-weight: 600; }
.adm-bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.adm-bd-g h3 { margin: 0 0 8px; font-size: 15px; }
.adm-bd-g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.adm-bd-g li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface2); }
.adm-bd-n { min-width: 0; overflow-wrap: anywhere; }
.adm-bd-d { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.adm-bd-g li .btn { grid-column: 2; grid-row: 1 / 3; }
.bday-card h1, .bday-card h2 { text-transform: none; letter-spacing: 0; font-family: var(--font-body, inherit); font-weight: 800; color: var(--text); }
/* v97 (дод.): дата народження без блокування — червона плашка в кабінеті, червона крапка в меню, крок у реєстрації, нагадування з адмінки */
.bday-box { display: grid; gap: 10px; margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; border: 2px solid #ef4444; background: color-mix(in srgb, #ef4444 12%, var(--surface)); box-shadow: 0 8px 24px rgba(239, 68, 68, .18); scroll-margin-top: 80px; }
.bday-box-h { display: flex; gap: 12px; align-items: center; }
.bday-box-ic { font-size: 34px; line-height: 1; flex: none; }
.bday-box-h b { display: block; font-size: 17px; color: var(--text); }
.bday-box-h small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.bday-box-f { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.bday-box-f .bday-f { flex: 1 1 240px; }
@media (max-width: 720px) { .bday-box-f .btn { width: 100%; } }
.bday-dot { position: absolute; top: -2px; left: -2px; width: 12px; height: 12px; border-radius: 50%; background: #ef4444; border: 2px solid var(--bg); box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: bday-dot 2s infinite; }
.bday-dot.in { position: static; display: inline-block; width: 9px; height: 9px; border-width: 0; vertical-align: 1px; animation: none; }
.nav-me > summary { position: relative; }
@keyframes bday-dot { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
@media (prefers-reduced-motion: reduce) { .bday-dot { animation: none; } }
.upd-bday { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; text-decoration: none; color: var(--text); border: 2px solid #ef4444; }
.upd-bday b { display: block; }
.upd-bday small { display: block; color: var(--muted); font-size: 13px; }
.bday-step { display: grid; gap: 6px; margin-top: 16px; padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, #ffd400 55%, var(--border)); background: radial-gradient(120% 140% at 0% 0%, rgba(255, 212, 0, .16), transparent 60%), var(--surface2); }
.bday-step > b { font-size: 16px; color: var(--text); }
.bday-step > small { font-size: 13px; line-height: 1.4; color: var(--muted); }
.adm-bd-rem { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.adm-bd-rem p { margin: 0; font-size: 14px; }
.adm-bd-rem form { margin: 0; }
.adm-bd-log { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); }

/* v98 (Чат 1): повноекранний плеєр на ПК — як на YouTube: велике відео / обкладинка, під ним — про трек і коментарі; праворуч — широка черга */
.nzp-topr { display: inline-flex; align-items: center; gap: 4px; }
.nzp-fs { display: none; font-size: 20px; line-height: 1; }
.nzp-det { display: none; }
.nzp-media:fullscreen { width: 100vw !important; height: 100vh !important; max-width: none !important; aspect-ratio: auto !important; border-radius: 0 !important; background: #000; }
.nzp-media:fullscreen .nzp-art { object-fit: contain; }
@media (min-width: 1000px) {
  .nzp.full { grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 440px); grid-template-rows: auto auto auto auto auto 1fr; column-gap: 32px; padding: 14px 32px 30px; }
  .nzp.full .nzp-fs { display: grid; place-items: center; }
  .nzp.full .nzp-bar, .nzp.full .nzp-seek, .nzp.full .nzp-ctl, .nzp.full .nzp-det { grid-column: 1; width: 100%; max-width: min(100%, 1180px); justify-self: center; }
  .nzp.full .nzp-bar { grid-row: 2; }
  .nzp.full .nzp-seek { grid-row: 3; margin-top: 4px; }
  .nzp.full .nzp-ctl { grid-row: 4; margin-top: 0; justify-content: center; gap: 22px; }
  .nzp.full .nzp-ctl button { width: 44px; height: 44px; }
  .nzp.full .nzp-ctl svg { width: 26px; height: 26px; }
  .nzp.full .nzp-ctl .nzp-bigpp { width: 58px; height: 58px; }
  .nzp.full .nzp-ctl .nzp-bigpp svg { width: 32px; height: 32px; }
  .nzp.full .nzp-side { grid-column: 2; grid-row: 2 / -1; position: sticky; top: 0; align-self: start; max-height: calc(100vh - 90px); margin-top: 0; }
  /* велике відео: на всю ширину колонки, але не вище ~72% екрана */
  .nzp.full .nzp-media, .nzp.full.song .nzp-media, .nzp.full.song.clip .nzp-media { width: 100%; max-width: min(100%, calc(72vh * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto; }
  /* «Пісня»: квадратна обкладинка по центру на розмитому фоні з неї ж */
  .nzp.full.song .nzp-media { position: relative; overflow: hidden; background: #0b0b12; }
  .nzp.full.song .nzp-media::before { content: ''; position: absolute; inset: -30px; background: var(--nzp-art, none) center / cover no-repeat; filter: blur(34px) brightness(.55) saturate(1.2); z-index: 1; }
  .nzp.full.song .nzp-art { object-fit: contain; }
  .nzp.full .nzp-t { font-size: 24px; -webkit-line-clamp: 2; }
  /* під відео — про трек і коментарі */
  .nzp.full .nzp-det:not([hidden]) { display: grid; gap: 14px; grid-row: 5; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
  .nzp-dmeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted); }
  .nzp-dbtns { display: inline-flex; gap: 8px; flex-wrap: wrap; }
  .nzp-dtags { display: flex; flex-wrap: wrap; gap: 6px; }
  .nzp-ddesc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); white-space: pre-line; max-height: 7.5em; overflow: hidden; }
  .nzp-dh { margin: 4px 0 0; font-size: 18px; }
  .nzp-cf { display: grid; gap: 8px; }
  .nzp-cf textarea { margin: 0; min-height: 64px; resize: vertical; }
  .nzp-cf-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .nzp-cf-e { color: var(--danger, #ef4444); font-weight: 600; }
  .nzp-cto { font-size: 13px; color: var(--muted); }
  .nzp-clist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .nzp-cm { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .nzp-cm.rep { margin-left: 52px; grid-template-columns: 32px minmax(0, 1fr); }
  .nzp-cav { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: linear-gradient(135deg, #1e6bff, #6a3cff); color: #fff; font-weight: 800; }
  .nzp-cm.rep .nzp-cav { width: 32px; height: 32px; font-size: 13px; }
  .nzp-cm-b { min-width: 0; }
  .nzp-cm-h { font-size: 13.5px; }
  .nzp-cm-h small { color: var(--muted); }
  .nzp-cm-b p { margin: 3px 0 4px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
  .nzp-cm-a { display: flex; gap: 12px; }
  .nzp-cm-a button { padding: 2px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
  .nzp-cm-a button:hover, .nzp-clk.on { color: #ff3d6e; }
}

/* v99 (Чат 1): YouTube без рідної панелі — клік по відео = пауза/грати, на паузі й у кінці — наша обкладинка з ▶; гучність (ПК); сторінка треку — наша обкладинка */
.nzp-hit { position: absolute; inset: 0; z-index: 3; cursor: pointer; }
.nzp-bigplay { display: none; position: absolute; left: 50%; top: 50%; z-index: 6; width: 78px; height: 78px; transform: translate(-50%, -50%); place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); pointer-events: none; }
.nzp-bigplay svg { width: 40px; height: 40px; fill: #fff; margin-left: 4px; }
.nzp.full.yt-cover .nzp-art { display: block !important; z-index: 4; }
.nzp.full.yt-cover .nzp-media::after { content: ''; position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, .35); pointer-events: none; }
.nzp.full.yt-cover .nzp-bigplay { display: grid; }
.nzp-media:fullscreen .nzp-bigplay { width: 110px; height: 110px; }
.nzp-vol { display: none; }
@media (min-width: 1000px) {
  .nzp.full .nzp-vol { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 6px; font-size: 16px; color: var(--muted); cursor: pointer; }
  .nzp.full .nzp-vol input { width: 96px; margin: 0; accent-color: #ffd400; cursor: pointer; }
}
.tp-poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #000; cursor: pointer; }
.tp-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.tp-poster:hover img { transform: scale(1.02); }
.tp-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .6); box-shadow: 0 12px 34px rgba(0, 0, 0, .5); transition: transform .2s, background .2s; }
.tp-play svg { width: 44px; height: 44px; fill: #fff; margin-left: 5px; }
.tp-poster:hover .tp-play { transform: translate(-50%, -50%) scale(1.08); background: #ff3d6e; }

/* v100 (Чат 1): ⛶ на весь екран — увесь плеєр (відео + наші кнопки поверх), на iPhone — «псевдо» на весь екран; ⚙ Якість відео */
.nzp-qw { display: none; position: relative; }
.nzp.full[data-mode="yt"]:not(.song) .nzp-qw { display: inline-flex; }
.nzp.full .nzp-fs { display: grid; place-items: center; }
.nzp-qb { font-size: 19px; line-height: 1; }
.nzp-qm { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; padding: 6px; display: flex; flex-direction: column; gap: 2px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--border2); box-shadow: 0 18px 50px -10px rgba(0, 0, 0, .55); }
.nzp-qm[hidden] { display: none; }
.nzp-qh { padding: 6px 10px 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.nzp-qh small { display: block; font-weight: 500; opacity: .8; }
.nzp-qm button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.nzp-qm button::before { content: ''; width: 16px; text-align: center; color: #ffd400; font-weight: 800; }
.nzp-qm button.on::before { content: '✓'; }
.nzp-qm button:hover { background: var(--surface2); }
.nzp-qn { padding: 4px 12px 6px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.nzp-rot { display: none; }
/* на весь екран */
.nzp.full.is-fs { position: fixed !important; inset: 0 !important; z-index: 2147483000; display: block !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #000 !important; border-radius: 0 !important; }
.nzp.full.is-fs:fullscreen { width: 100% !important; height: 100% !important; }
/* justify-self: center із сітки ПК у новому Chrome стискає absolute-елементи до 0 — розтягуємо */
.nzp.full.is-fs > *, .nzp.full.is-fs .nzp-media, .nzp.full.is-fs .nzp-seek, .nzp.full.is-fs .nzp-ctl { justify-self: stretch !important; align-self: auto !important; }
.nzp.full.is-fs .nzp-bar { position: absolute !important; inset: 0 !important; display: block !important; max-width: none !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; }
.nzp.full.is-fs .nzp-media { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.nzp.full.is-fs .nzp-art { object-fit: contain !important; }
.nzp.full.is-fs .nzp-info, .nzp.full.is-fs .nzp-acts, .nzp.full.is-fs .nzp-mini, .nzp.full.is-fs .nzp-mprog, .nzp.full.is-fs .nzp-side, .nzp.full.is-fs .nzp-det, .nzp.full.is-fs [data-a="collapse"], .nzp.full.is-fs [data-a="pmenu"] { display: none !important; }
.nzp.full.is-fs .nzp-top { position: absolute !important; left: 0; right: 0; top: 0; z-index: 10; margin: 0 !important; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left)) !important; max-width: none !important; background: linear-gradient(rgba(0, 0, 0, .7), transparent); transition: opacity .3s; }
.nzp.full.is-fs .nzp-top .nzp-ib { color: #fff; }
.nzp.full.is-fs .nzp-full { position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 10; display: flex !important; flex-direction: column; gap: 4px; max-width: none !important; width: auto !important; margin: 0 !important; padding: 34px max(20px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); transition: opacity .3s; }
.nzp.full.is-fs .nzp-seek, .nzp.full.is-fs .nzp-ctl { width: 100% !important; max-width: none !important; margin: 0 !important; grid-column: auto !important; grid-row: auto !important; }
.nzp.full.is-fs .nzp-ctl { justify-content: center; gap: 22px; }
.nzp.full.is-fs .nzp-ctl button, .nzp.full.is-fs .nzp-times, .nzp.full.is-fs .nzp-vol { color: #fff !important; }
.nzp.full.is-fs .nzp-ctl button:not(.nzp-bigpp) svg { fill: #fff; }
.nzp.full.is-fs .nzp-bigpp { background: #fff !important; }
.nzp.full.is-fs .nzp-bigpp svg { fill: #111 !important; }
.nzp.full.is-fs.fs-idle { cursor: none; }
.nzp.full.is-fs.fs-idle .nzp-top, .nzp.full.is-fs.fs-idle .nzp-full { opacity: 0; pointer-events: none; }
.nzp.full.is-fs .nzp-bigplay { width: 96px; height: 96px; }
.nzp.full.is-fs .nzp-rot:not([hidden]) { display: block; position: absolute; left: 50%; top: 22%; z-index: 12; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 14px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 15px; font-weight: 600; text-align: center; pointer-events: none; }
html.nzp-full-open:has(.nzp.is-fs) .bnav { display: none; }
/* v101 (Чат 2): «👁 Приміряти на моїй сторінці» — липка плашка попереднього перегляду оформлення */
.pv-bar { position: sticky; top: 8px; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; padding: 10px 12px 10px 16px; border-radius: 18px; border: 1.5px solid rgba(255, 196, 0, .7); background: rgba(16, 14, 6, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7); }
.pv-tx { flex: 1 1 260px; font-size: 14px; line-height: 1.35; }
.pv-tx b { color: #ffd54a; }
.pv-bar form { margin: 0; }
.pv-bar .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); }
html[data-theme="light"] .pv-bar { background: rgba(255, 250, 235, .94); color: var(--text); border-color: rgba(200, 140, 0, .7); }
html[data-theme="light"] .pv-tx b { color: #9a6a00; }
html[data-theme="light"] .pv-bar .btn-ghost { color: var(--text); border-color: var(--border2); background: var(--surface); }
@media (max-width: 720px) {
  .pv-bar { top: 6px; padding: 10px 12px; }
  .pv-tx { flex-basis: 100%; font-size: 13.5px; }
  .pv-bar form, .pv-bar > a { flex: 1 1 0; }
  .pv-bar .btn { width: 100%; justify-content: center; }
}

/* v102 (Чат 1): «📥 Додати мої пісні з каналу» — кнопка під каналом і сторінка вибору */
.ch-imp { margin-top: 10px; }
.ch-imp.busy { pointer-events: none; opacity: .75; }
.imp-head h1 { margin: 6px 0 6px; font-size: clamp(22px, 5vw, 30px); line-height: 1.2; }
.imp-head p { margin: 0 0 14px; }
.imp-empty { text-align: center; }
.imp-set h2 { margin: 0 0 4px; font-size: 18px; }
.imp-lbl { display: block; margin: 14px 0 8px; font-size: 14px; }
.imp-lbl small { font-weight: 500; color: var(--muted); }
.imp-tools { position: sticky; top: 8px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 8px; padding: 10px 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--border2); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .4); }
.imp-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.imp-all small { font-weight: 500; color: var(--muted); }
.imp-all input, .imp-it input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: #ffd400; cursor: pointer; }
.imp-cnt { color: var(--muted); font-size: 14px; white-space: nowrap; }
.imp-cnt b { color: var(--text); }
.imp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.imp-it label { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: background .15s, border-color .15s; }
.imp-it.on label { border-color: #ffd400; background: color-mix(in srgb, #ffd400 9%, var(--surface)); }
.imp-it img { width: 80px; height: 45px; flex: none; object-fit: cover; border-radius: 8px; background: #000; }
.imp-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.imp-t b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; font-size: 15px; overflow-wrap: anywhere; }
.imp-t small { color: var(--muted); font-size: 13px; }
.imp-it.have label { opacity: .5; cursor: default; filter: grayscale(.7); }
.imp-it.have .imp-t small { color: var(--text); font-weight: 600; }
.imp-ck { width: 20px; flex: none; text-align: center; font-weight: 800; color: var(--muted); }
.imp-notify { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--border2); font-size: 14px; line-height: 1.45; cursor: pointer; }
.imp-notify input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: #ffd400; }
.imp-bar { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 4; display: flex; justify-content: flex-end; padding: 12px 0 4px; }
.imp-bar[hidden] { display: none; }
.imp-bar .btn { min-width: 220px; box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .45); }
@media (min-width: 721px) { .imp-bar { bottom: 12px; } }
@media (max-width: 420px) {
  .imp-it img { width: 64px; height: 36px; }
  .imp-bar .btn { width: 100%; }
  .imp-tools { padding: 10px 12px; }
}
/* v103 (Чат 2): свій трек — ♥ не ставиться, підказка під кнопкою */
.like-btn.is-own { opacity: .55; }
.own-note { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.35; }
/* v104 (Чат 2): 💛 Донат артисту — картка на сторінці, плаваюча кнопка на телефоні, кнопка на сторінці треку, поле в кабінеті */
.donate-card { display: flex; align-items: center; gap: 14px; margin: 14px 0; padding: 14px 16px; border-radius: 20px; border: 1.5px solid rgba(255, 196, 0, .55); background: linear-gradient(135deg, rgba(255, 196, 0, .16), rgba(255, 120, 60, .08) 60%, var(--surface)); }
.dn-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: rgba(255, 196, 0, .2); }
.dn-tx { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dn-tx b { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.dn-tx small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.dn-btn, .dn-small { background: linear-gradient(120deg, #ffcc00, #ff9f1a); color: #2a1a00; border: 0; font-weight: 800; box-shadow: 0 8px 22px -10px rgba(255, 170, 0, .9); }
.dn-btn:hover, .dn-small:hover { color: #2a1a00; filter: brightness(1.05); }
.dn-btn { flex: 0 0 auto; }
.dn-fab { display: none; }
@media (max-width: 720px) {
  .donate-card { flex-wrap: wrap; padding: 14px; }
  .dn-btn { width: 100%; justify-content: center; }
  .dn-fab:not([hidden]) { display: block; position: fixed; right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 58; }
  body.has-nzp .dn-fab { bottom: calc(var(--nzp-h, 90px) + 14px); }
  .dn-fab > a { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 25px; text-decoration: none; background: linear-gradient(135deg, #ffd23f, #ff9f1a); box-shadow: 0 10px 26px -8px rgba(255, 160, 0, .9), 0 0 0 3px rgba(255, 210, 63, .25); }
  .dn-x { all: unset; cursor: pointer; position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; background: rgba(0, 0, 0, .75); color: #fff; }
}
.dn-field { margin: 4px 0 16px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255, 196, 0, .45); background: rgba(255, 196, 0, .07); }
.dn-field label { margin-top: 0; font-weight: 800; }
.dn-field p { margin: 8px 0 0; }
.dn-fab { transition: opacity .2s, transform .2s; }
.dn-fab.off { opacity: 0; transform: scale(.6); pointer-events: none; }

/* v105 (Чат 2): 🔎 підказки в рядку пошуку — артисти й треки з перших букв */
.sug-wrap { position: relative; }
.sug-box { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--bg2); border: 1px solid var(--border2); border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.35); padding: 6px; max-height: min(70vh, 520px); overflow-y: auto; }
.sug-box[hidden] { display: none; }
.sug-it { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: var(--text); text-decoration: none; min-height: 52px; }
.sug-it:hover, .sug-it.on { background: rgba(127,127,127,.14); }
.sug-im { width: 40px; height: 40px; flex: none; border-radius: 8px; object-fit: cover; background: rgba(127,127,127,.2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.sug-im.r { border-radius: 50%; }
.sug-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sug-tx b { font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sug-tx small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-all { display: block; width: 100%; margin-top: 4px; padding: 11px 10px; border: 0; border-top: 1px solid var(--border2); background: none; color: var(--cyan); font: inherit; font-weight: 600; text-align: left; cursor: pointer; border-radius: 0 0 10px 10px; }
html[data-theme="light"] .sug-box { background: var(--surface); box-shadow: var(--shadow), 0 14px 40px rgba(80,58,20,.18); }
html[data-theme="light"] .sug-all { color: var(--violet); }

/* v106 (Чат 1): імпорт з каналу — стиль і настрій обовʼязкові, «🎨 Змінити» для окремої пісні */
.imp-prof { margin: -4px 0 8px; }
.imp-own { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 0 32px; padding: 2px 4px 2px 0; font-size: 13px; color: var(--muted); }
.imp-it:not(.on) .imp-own { display: none; }
.imp-own-t { min-width: 0; overflow-wrap: anywhere; }
.imp-own .btn { flex: none; }
.imp-it.mine .imp-own-t { color: var(--text); font-weight: 600; }
.imp-dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 18px 16px 16px; border: 1px solid var(--border2); border-radius: 18px; background: var(--bg2); color: var(--text); }
.imp-dlg::backdrop { background: rgba(0, 0, 0, .55); }
.imp-dlg h3 { margin: 0 0 4px; font-size: 18px; }
.imp-dlg-t { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.imp-dlg-a { position: sticky; bottom: -16px; display: flex; justify-content: flex-end; gap: 10px; margin: 16px -16px -16px; padding: 12px 16px; background: var(--bg2); border-top: 1px solid var(--border2); }
@media (max-width: 420px) { .imp-own { margin-left: 0; } .imp-dlg-a .btn { flex: 1; } }

/* v107 (Чат 1): сторінка треку — своя обкладинка артиста замість картинки з YouTube; позначка 18+ */
.tp-poster.tp-own .tp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) brightness(.55) saturate(1.2); transform: scale(1.15); }
.tp-poster.tp-own .tp-sq { position: relative; width: auto; height: 100%; max-width: 100%; aspect-ratio: 1; margin: 0 auto; object-fit: cover; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.tp-poster.tp-own:hover .tp-bg { transform: scale(1.15); }
.tp-18 { margin-left: 6px; font-size: 12px; padding: 3px 7px; vertical-align: middle; }

/* v108 (Чат 1): редагування треку — «⬇️ Підставити опис з ролика» одразу в поле */
.desc-pull { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; }
.desc-pull[hidden] { display: none; }
.desc-pull small { font-size: 13px; }