/* ===== Черешня FM — «Студия»: тёмная музыкальная комната, стеклянные панели, неон ===== */
:root:not([data-theme="light"]) {
  --bg: #070B10; --bg2: #0b1118; --panel: #101820; --panel2: #16212b; --line: #232f3b; --text: #ffffff;
  --muted: #9BA3AE; --neon: #FF1457; --neon2: #ff5c8a; --cherry: #D90046; --cherry2: #FF1457; --glow: rgba(255, 20, 87, .42);
  --glass: linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035));
  --glass-line: rgba(255, 255, 255, .15);
  --neon-k: .7; --side-w: 0px;
}
:root[data-theme="light"] { --neon: #c4143f; --neon2: #a30f33; --glass: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6)); --glass-line: rgba(196, 20, 63, .18); --neon-k: .3; --side-w: 0px; }
.glass { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); }
:root:not([data-theme="light"]) body { background: radial-gradient(1200px 600px at 78% -10%, rgba(255, 20, 87, .08), transparent 60%), var(--bg); }

/* ---- боковое меню ---- */
.sidenav { display: none; }
@media (min-width: 1100px) {
  body.has-side { --side-w: 232px; }
  body.has-side.side-collapsed { --side-w: 96px; }
  body.has-side main, body.has-side .footer { padding-left: var(--side-w); transition: padding-left .25s ease; }
  body.has-side .playerbar { padding-left: var(--side-w); }
  .sidenav { display: flex; flex-direction: column; position: fixed; z-index: 55; left: 22px; top: 108px; width: 188px; max-height: calc(100vh - 230px); padding: 12px; gap: 2px; transition: width .25s ease; overflow: hidden auto; }
  body.side-collapsed .sidenav { width: 62px; }
  .sn-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--text); font-size: 15px; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s, transform .2s; }
  .sn-item svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
  .sn-item:hover { background: rgba(255, 255, 255, .08); text-decoration: none; transform: translateX(2px); }
  .sn-item[aria-current="page"] { background: linear-gradient(135deg, var(--neon), #b0123a); color: #fff; box-shadow: 0 0 calc(22px * var(--neon-k) + 6px) var(--glow); }
  .sn-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  body.side-collapsed .sn-label { display: none; }
  .sn-sep { height: 1px; background: var(--glass-line); margin: 8px 6px; }
  .sn-social { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 8px; }
  .sn-social a { color: var(--text); opacity: .85; display: inline-grid; } .sn-social a:hover { opacity: 1; color: var(--neon2); }
  .sn-social svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
  body.side-collapsed .sn-social { flex-direction: column; align-items: center; }
  .sn-toggle { align-self: flex-end; background: none; border: 0; color: var(--muted); cursor: pointer; width: 34px; height: 30px; border-radius: 10px; }
  .sn-toggle:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
  .sn-toggle svg { width: 18px; height: 18px; transition: transform .25s; } body.side-collapsed .sn-toggle svg { transform: rotate(180deg); }
}

/* ---- шапка поверх студии ---- */
body.page-home .topbar { position: absolute; left: 0; right: 0; top: 0; background: linear-gradient(rgba(5, 2, 8, .88), rgba(5, 2, 8, 0)); border-bottom: 0; backdrop-filter: none; }
:root:not([data-theme="light"]) .topbar { background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.listen-btn { background: linear-gradient(135deg, #e0224e, #8e0f33); box-shadow: 0 0 calc(18px * var(--neon-k) + 6px) var(--glow), inset 0 1px 0 rgba(255, 255, 255, .25); }

/* ---- студия (главный экран) ---- */
.studio { position: relative; overflow: hidden; background: #06030a; isolation: isolate; }
body.has-side .studio { margin-left: calc(-1 * var(--side-w)); }
.st-stage { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; aspect-ratio: 1600 / 640; min-height: 560px; }
.st-stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(5, 2, 9, calc(.86 * var(--scrim, 1))) 0, rgba(5, 2, 9, calc(.62 * var(--scrim, 1))) 26%, rgba(5, 2, 9, 0) 50%), linear-gradient(0deg, rgba(5, 2, 9, .7) 0, rgba(5, 2, 9, 0) 22%); }
.st-scene { position: absolute; inset: 0; z-index: 0; }
.st-scene .st-svg { width: 100%; height: 100%; display: block; }
.st-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.st-fx canvas { width: 100%; height: 100%; display: block; }
.st-custom-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.t1 { animation: tw 5s ease-in-out infinite; } .t2 { animation: tw 7s ease-in-out -2s infinite; } .t3 { animation: tw 9s ease-in-out -4s infinite; } .t4 { animation: tw 6s ease-in-out -1s infinite; }
@keyframes tw { 0%, 100% { opacity: var(--lit, 1); } 45% { opacity: calc(var(--lit, 1) * .22); } 60% { opacity: calc(var(--lit, 1) * .9); } }
.st-svg .win { opacity: var(--lit, 1); } .st-stars { opacity: var(--stars, 1); } .st-daylight { mix-blend-mode: soft-light; opacity: var(--dl, 0); pointer-events: none; } .st-cars { opacity: calc(.3 + .7 * var(--night, 1)); }
.studio-page { --neon-k: calc(var(--neon-b, .7) * var(--neon-f, 1)); }
.st-custom-bg video, video.st-custom-bg { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-beacon { animation: beacon 2.4s ease-in-out infinite; } @keyframes beacon { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.car.cf { animation: carf var(--t) linear var(--d) infinite; } .car.cb { animation: carb var(--t) linear var(--d) infinite; }
@keyframes carf { from { transform: translateX(548px); } to { transform: translateX(1620px); } }
@keyframes carb { from { transform: translateX(1620px); } to { transform: translateX(548px); } }
.studio.no-cars .st-cars { display: none; } .studio.no-lights .t1, .studio.no-lights .t2, .studio.no-lights .t3, .studio.no-lights .t4, .studio.no-lights .st-beacon { animation: none; }
.studio.fx-off .t1, .studio.fx-off .t2, .studio.fx-off .t3, .studio.fx-off .t4, .studio.fx-off .st-beacon, .studio.fx-off .car { animation: none; } .studio.fx-off .st-cars { display: none; }
.st-sign, .st-script { position: absolute; z-index: 3; font-weight: 900; text-align: center; pointer-events: none; }
.st-sign { left: 32.2%; top: 8%; width: 6.4%; padding: .5% .4%; border: 2px solid #ff3d78; border-radius: 6px; color: #ff4d86; font: 900 clamp(14px, 1.9vw, 30px)/1.05 "Arial Black", Impact, sans-serif; letter-spacing: .02em; text-shadow: 0 0 calc(12px * var(--neon-k)) #ff2d6f, 0 0 calc(30px * var(--neon-k)) #ff2d6f; box-shadow: 0 0 calc(14px * var(--neon-k)) rgba(255, 45, 111, .75), inset 0 0 calc(10px * var(--neon-k)) rgba(255, 45, 111, .5); animation: flick 7s infinite; }
.st-script { left: 52%; top: 44%; transform: rotate(-7deg); color: #ff5b95; font: italic 400 clamp(20px, 2.6vw, 44px)/1.1 "Segoe Script", "Brush Script MT", "Bradley Hand", cursive; text-shadow: 0 0 calc(10px * var(--neon-k)) #ff2d6f, 0 0 calc(26px * var(--neon-k)) #ff2d6f; white-space: nowrap; }
@keyframes flick { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } }
.studio.fx-off .st-sign { animation: none; }

/* ---- «сейчас в эфире» ---- */
.st-now { position: absolute; z-index: 5; left: max(14.2%, calc(var(--side-w) + 14px)); top: 16%; width: 28%; color: #fff; }
.st-live { display: flex; align-items: center; gap: 10px; font-size: clamp(11px, .95vw, 14px); letter-spacing: .14em; text-transform: uppercase; color: #ffd9e6; font-weight: 600; }
.st-live i { width: 9px; height: 9px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); animation: pulse 1.6s infinite; }
.st-live.off i { background: #8a6a78; box-shadow: none; animation: none; }
.st-artist { font-size: clamp(30px, 3.4vw, 58px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; margin: .2em 0 0; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-title { font-size: clamp(26px, 3vw, 50px); line-height: 1.02; font-weight: 800; letter-spacing: -.02em; color: var(--neon); text-shadow: 0 0 calc(24px * var(--neon-k)) var(--glow); margin: .05em 0 .35em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-wave { display: flex; align-items: center; gap: 3px; height: 34px; margin: 6px 0; max-width: 100%; }
.st-wave b { flex: 1 1 0; min-width: 2px; max-width: 5px; height: 100%; background: linear-gradient(to top, var(--neon), #ffb3cd); border-radius: 3px; transform: scaleY(.18); transform-origin: center; opacity: .6; }
.st-playing .st-wave b { animation: wave 1s ease-in-out infinite; opacity: 1; }
@keyframes wave { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(var(--h, .8)); } }
.st-time { display: flex; justify-content: space-between; max-width: 100%; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.st-ctrls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.st-play { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--neon); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), rgba(255, 45, 111, .35)); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 calc(26px * var(--neon-k) + 8px) var(--glow), inset 0 0 14px rgba(255, 45, 111, .5); transition: transform .15s, box-shadow .2s; }
.st-play:hover { transform: scale(1.06); } .st-play:active { transform: scale(.96); }
.st-play svg { width: 28px; height: 28px; fill: currentColor; stroke: none; } .st-play:disabled { cursor: progress; }
.st-round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .06); color: #fff; display: inline-grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.st-round:hover { background: rgba(255, 255, 255, .14); border-color: var(--neon2); } .st-round svg { width: 20px; height: 20px; }
.st-round.like-btn[aria-pressed="true"] { color: var(--neon); } .st-round.like-btn[aria-pressed="true"] svg { fill: var(--neon); }
.st-vol { display: flex; align-items: center; gap: 8px; color: #fff; } .st-vol input { width: 96px; accent-color: var(--neon); }
.st-vol svg { width: 20px; height: 20px; }
.st-plbtn { margin-top: 14px; display: inline-flex; gap: 10px; align-items: center; padding: 11px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); color: #fff; background: rgba(8, 3, 12, .35); font-weight: 600; transition: background .2s, border-color .2s, transform .2s; }
.st-plbtn:hover { background: rgba(255, 255, 255, .12); border-color: var(--neon2); text-decoration: none; transform: translateY(-1px); }
.st-state { margin-top: 8px; font-size: 14px; color: var(--muted); min-height: 1.3em; }

/* ---- стол: проигрыватель, обложка, маскот ---- */
.st-desk { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.st-tt { position: absolute; left: 43%; top: 78%; width: 27%; aspect-ratio: 1.4 / 1; transform: translate(0, -50%); }
.tt-plinth { position: absolute; left: 0; right: 0; top: 14%; bottom: 0; border-radius: 12px; background: linear-gradient(180deg, #2a1424, #120811); box-shadow: 0 0 calc(30px * var(--neon-k) + 6px) rgba(255, 45, 111, .55), 0 18px 28px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 150, 190, .35); border: 1px solid rgba(255, 90, 140, .5); transform: perspective(900px) rotateX(48deg); transform-origin: 50% 100%; }
.tt-plat { position: absolute; left: 14%; top: 0; width: 58%; aspect-ratio: 1; transform: perspective(900px) rotateX(58deg); transform-origin: 50% 62%; }
.tt-record { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at center, #0b090d 0 2px, #17121a 2px 3px), #0b090d; box-shadow: 0 0 0 5px #0a070c, 0 0 0 6px rgba(255, 255, 255, .06), 0 0 28px rgba(255, 45, 111, .4); animation: spin 1.9s linear infinite; animation-play-state: paused; }
.st-playing .tt-record { animation-play-state: running; }
.tt-record::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 18%, rgba(255, 255, 255, .10) 22%, transparent 28% 68%, rgba(255, 255, 255, .08) 72%, transparent 78%); }
.tt-label { position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff6a98, #b0123a 70%); background-size: cover; background-position: center; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); display: grid; place-items: center; }
.tt-label i { width: 9%; aspect-ratio: 1; border-radius: 50%; background: #0b090d; }
@keyframes spin { to { transform: rotate(360deg); } }
.tt-arm { position: absolute; right: 9%; top: 3%; width: 6%; height: 60%; transform-origin: 50% 8%; transform: rotate(-24deg); transition: transform .9s cubic-bezier(.3, .8, .3, 1); }
.tt-arm::before { content: ""; position: absolute; left: 40%; top: 0; width: 22%; height: 88%; border-radius: 6px; background: linear-gradient(90deg, #ddd, #8a7f88); box-shadow: 0 0 6px rgba(255, 255, 255, .25); }
.tt-arm::after { content: ""; position: absolute; left: 12%; bottom: 8%; width: 78%; height: 13%; border-radius: 3px; background: #222; border: 1px solid #ff4d8d; }
.st-playing .tt-arm { transform: rotate(4deg); }
.tt-ghost { position: absolute; border-radius: 50%; background: repeating-radial-gradient(circle at center, #0b090d 0 2px, #17121a 2px 3px); box-shadow: 0 0 20px rgba(255, 45, 111, .6); opacity: 0; pointer-events: none; z-index: 6; }
.st-cover { position: absolute; left: 67.5%; top: 55%; width: 10.5%; aspect-ratio: 1; transform: rotate(-4deg); border-radius: 6px; background: #1a0b1b center/cover; box-shadow: 0 0 calc(22px * var(--neon-k) + 4px) rgba(255, 45, 111, .55), 0 10px 24px rgba(0, 0, 0, .6); border: 3px solid #120712; outline: 1px solid rgba(255, 120, 170, .5); overflow: hidden; }
.st-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .5s; }
.st-cover .ph { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #7a1236, #1a0b11); }
.st-cover .ph img { width: 70%; height: auto; border-radius: 12px; }
.st-mug { position: absolute; left: 79%; top: 75%; width: 4.4%; aspect-ratio: .86; border-radius: 6px 6px 14px 14px; background: linear-gradient(135deg, #251225, #0d060e); border: 1px solid rgba(255, 120, 170, .4); box-shadow: 0 0 14px rgba(255, 45, 111, .35); display: grid; place-items: center; color: #ff6a9a; font: 700 clamp(5px, .62vw, 10px)/1.1 sans-serif; text-align: center; }
.st-mug::after { content: ""; position: absolute; right: -28%; top: 20%; width: 34%; height: 46%; border: 3px solid #251225; border-left: 0; border-radius: 0 14px 14px 0; }
.st-mascot { position: absolute; left: 34.5%; top: 47%; width: 13.5%; aspect-ratio: 1 / 1.1; z-index: 5; pointer-events: none; }
.st-mascot iframe { width: 100%; height: 100%; border: 0; background: transparent; pointer-events: none; color-scheme: normal; }

/* ---- виджеты справа ---- */
.st-widgets { position: absolute; z-index: 6; right: 2.2%; top: 14%; width: 26%; max-width: 380px; display: grid; gap: 16px; }
.st-clock { padding: 16px 20px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; }
.st-clock .tm { font-size: clamp(30px, 3.6vw, 56px); font-weight: 300; letter-spacing: .01em; line-height: 1; font-variant-numeric: tabular-nums; }
.st-clock .dt { grid-column: 1; font-size: clamp(11px, .95vw, 14px); color: var(--muted); }
.st-wx { grid-row: 1 / span 2; grid-column: 2; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; padding-left: 18px; border-left: 1px solid var(--glass-line); }
.st-wx .wxi { grid-row: 1 / span 2; display: grid; }
.st-wx svg { width: clamp(34px, 3.2vw, 52px); height: clamp(34px, 3.2vw, 52px); grid-row: 1 / span 2; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .35)); }
.st-wx .tmp { font-size: clamp(24px, 2.5vw, 40px); font-weight: 300; line-height: 1; } .st-wx .cond { font-size: 13px; color: var(--muted); }
.st-city { grid-column: 1 / -1; margin-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: #e8d0dc; background: none; border: 0; cursor: pointer; padding: 6px 0 0; border-top: 1px solid var(--glass-line); width: 100%; text-align: left; color: inherit; font: inherit; font-size: 13px; }
.st-city svg { width: 16px; height: 16px; fill: none; stroke: var(--neon2); }
.st-city:hover { color: #fff; }
.st-next { padding: 16px 18px; } .st-next h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fff; font-weight: 700; }
.st-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-next li { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; }
.st-next .ic { width: 48px; height: 48px; border-radius: 10px; background: linear-gradient(135deg, #7a1236, #1a0b11) center/cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); display: grid; place-items: center; font-weight: 700; color: #ffd0e0; }
.st-next .nm { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; } .st-next .nm small { display: block; color: var(--muted); font-size: 12px; } .st-next time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- попап города ---- */
.city-pop { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); }
.city-box { width: min(420px, calc(100vw - 24px)); padding: 20px; background: #15091a; }
.city-box h2 { margin: 0 0 10px; font-size: 20px; } .city-box input[type=search] { width: 100%; box-sizing: border-box; }
.city-res { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; max-height: 240px; overflow: auto; }
.city-res button { width: 100%; text-align: left; background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-line); color: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; } .city-res button:hover { border-color: var(--neon2); }

/* ---- переключатель эффектов ---- */
.st-fxbtn { position: absolute; z-index: 7; right: 2.2%; bottom: 15%; font-size: 12px; color: #e7cbd8; background: rgba(8, 3, 12, .5); border: 1px solid var(--glass-line); border-radius: 999px; padding: 6px 12px; cursor: pointer; backdrop-filter: blur(8px); }
.st-fxbtn:hover { color: #fff; border-color: var(--neon2); }

/* ---- подборки (горизонтальная прокрутка) ---- */
.shelf-wrap { position: relative; margin-top: -76px; z-index: 8; padding: 0 0 8px; }
.shelf { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: 6px 8px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.shelf::-webkit-scrollbar { display: none; }
.shelf-card { flex: 0 0 clamp(210px, 21vw, 300px); height: clamp(112px, 12vw, 150px); position: relative; scroll-snap-align: start; border-radius: 18px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; padding: 14px 16px; background: linear-gradient(135deg, var(--c1, #7a1236), var(--c2, #14060f)) center/cover; border: 1px solid rgba(255, 255, 255, .13); transition: transform .25s ease, box-shadow .25s ease, border-color .25s; isolation: isolate; }
.shelf-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 2, 8, 0) 20%, rgba(5, 2, 8, .82)); }
.shelf-card:hover { transform: translateY(-4px) scale(1.015); border-color: var(--neon2); box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 calc(26px * var(--neon-k)) var(--glow); text-decoration: none; }
.shelf-card b { font-size: clamp(17px, 1.6vw, 23px); line-height: 1.12; font-weight: 700; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); max-width: 80%; overflow-wrap: anywhere; }
.shelf-card .go { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); display: grid; place-items: center; background: rgba(0, 0, 0, .25); transition: background .2s, transform .2s; }
.shelf-card:hover .go { background: var(--neon); transform: translateX(3px); } .shelf-card .go svg { width: 16px; height: 16px; }
.shelf-nav { position: absolute; top: 40%; z-index: 9; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: rgba(8, 3, 12, .6); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); }
.shelf-nav:hover { border-color: var(--neon2); background: rgba(255, 45, 111, .3); } .shelf-nav.prev { left: -4px; } .shelf-nav.next { right: -4px; } .shelf-nav svg { width: 18px; height: 18px; }

/* ---- сетка ниже: новости, чарты, приложение ---- */
.st-grid { display: grid; grid-template-columns: 1.55fr 1.1fr 1.05fr; gap: 22px; margin-top: 18px; align-items: start; }
.st-grid h2 { font-size: 20px; margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-grid h2 a { color: var(--text); } .st-grid h2 a:hover { color: var(--neon2); text-decoration: none; }
.nw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nw-card { display: block; color: var(--text); border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .035); border: 1px solid var(--glass-line); transition: transform .25s, border-color .25s, box-shadow .25s; }
.nw-card:hover { transform: translateY(-4px); border-color: var(--neon2); box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 calc(20px * var(--neon-k)) var(--glow); text-decoration: none; }
.nw-img { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #7a1236, #14060f) center/cover; position: relative; }
.nw-img .tg { position: absolute; left: 10px; bottom: 10px; background: var(--neon); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; letter-spacing: .04em; text-transform: uppercase; }
.nw-body { padding: 12px 14px 14px; } .nw-body b { display: block; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; } .nw-body span { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.tabs-mini { display: flex; gap: 14px; font-size: 13px; } .tabs-mini button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 0; border-bottom: 2px solid transparent; font: inherit; font-size: 13px; }
.tabs-mini button[aria-selected="true"] { color: #fff; border-color: var(--neon); } .tabs-mini button:hover { color: #fff; }
.chart { list-style: none; margin: 0; padding: 0; } .chart li { display: grid; grid-template-columns: 22px 46px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--glass-line); }
.chart .n { color: var(--muted); font-size: 13px; text-align: center; } .chart .cv { width: 46px; height: 46px; border-radius: 8px; background: linear-gradient(135deg, #7a1236, #14060f) center/cover; }
.chart .tt { min-width: 0; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; } .chart .tt small { display: block; color: var(--muted); font-size: 12px; }
.chart .vt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.app-card { padding: 20px; background: linear-gradient(135deg, rgba(255, 45, 111, .22), rgba(60, 10, 70, .35)); border-radius: 22px; border: 1px solid rgba(255, 120, 170, .3); display: grid; gap: 12px; position: relative; overflow: hidden; }
.app-card h3 { margin: 0; font-size: 20px; line-height: 1.2; } .app-card p { margin: 0; color: var(--muted); }
.app-phone { position: absolute; right: -18px; bottom: -40px; width: 130px; height: 240px; border-radius: 26px; border: 3px solid #2a1630; background: linear-gradient(180deg, #2a0f38, #0d0510); transform: rotate(8deg); display: grid; place-items: center; box-shadow: 0 0 30px rgba(255, 45, 111, .4); }
.app-phone img { width: 64px; background: #fff; border-radius: 14px; padding: 4px; }
.mini-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.mini-tile { display: flex; align-items: flex-end; min-height: 92px; padding: 12px; border-radius: 16px; color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--c1), var(--c2)); border: 1px solid rgba(255, 255, 255, .13); transition: transform .2s, border-color .2s; }
.mini-tile:hover { transform: translateY(-3px); border-color: var(--neon2); text-decoration: none; }

/* ---- нижняя панель плеера (компьютер) в стеклянном стиле ---- */
@media (min-width: 901px) {
  .playerbar { background: linear-gradient(180deg, rgba(14, 6, 18, .78), rgba(8, 3, 11, .94)); backdrop-filter: blur(18px) saturate(140%); border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); }
  .pb-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #fff; padding: 5px 11px; border-radius: 999px; background: rgba(255, 45, 111, .22); border: 1px solid rgba(255, 45, 111, .6); text-transform: uppercase; }
  .pb-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: pulse 1.6s infinite; }
  .pb-live.off { opacity: .55; } .pb-live.off i { background: #8a6a78; box-shadow: none; animation: none; }
}
.pb-live, #pb-expand-d { display: none; }
@media (min-width: 901px) { .pb-live { display: inline-flex; } #pb-expand-d { display: inline-grid; } }

.st-grid.no-news { grid-template-columns: 1fr 1fr; }
@media (max-width: 1400px) and (min-width: 1100px) { .st-grid { grid-template-columns: 1fr 1fr; } .st-grid > :first-child { grid-column: 1 / -1; } }
/* ---- внутренние страницы в стиле студии ---- */
:root:not([data-theme="light"]) body:not(.page-home) .page-title { position: relative; margin: 18px 0 18px; padding: 30px 28px 24px; border-radius: 22px; overflow: hidden; border: 1px solid var(--glass-line);
  background: radial-gradient(500px 220px at 88% 20%, rgba(255, 45, 111, .30), transparent 70%), radial-gradient(420px 200px at 70% 100%, rgba(120, 40, 180, .28), transparent 70%), linear-gradient(135deg, #1b0a1f, #0b0510); box-shadow: 0 10px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08); }
:root:not([data-theme="light"]) body:not(.page-home) .page-title::after { content: ""; position: absolute; right: 0; bottom: 0; width: min(46%, 420px); height: 100%; pointer-events: none; opacity: .55;
  background: linear-gradient(0deg, #0b0510 0, transparent 40%), repeating-linear-gradient(90deg, rgba(255, 120, 170, .22) 0 2px, transparent 2px 9px) bottom/100% 58% no-repeat; mask-image: linear-gradient(90deg, transparent, #000 40%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); }
.page-title h1 { text-shadow: 0 0 calc(24px * var(--neon-k)) var(--glow); position: relative; z-index: 1; } .page-title > * { position: relative; z-index: 1; }
:root:not([data-theme="light"]) .card { background: rgba(255, 255, 255, .04); backdrop-filter: blur(8px); transition: transform .25s, border-color .25s, box-shadow .25s; }
:root:not([data-theme="light"]) .card:hover { transform: translateY(-4px); border-color: var(--neon2); box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 calc(20px * var(--neon-k)) var(--glow); }
.chip:hover { border-color: var(--neon2); } .chip.on { background: linear-gradient(135deg, var(--neon), #b0123a); box-shadow: 0 0 calc(16px * var(--neon-k)) var(--glow); }
.panel { border-radius: 18px; }
/* чарт на странице «Топ» */
.chart-page { margin: 0 0 22px; } .chart-page .tabs-mini { margin-bottom: 10px; font-size: 14px; }
.chart-page .chart li { grid-template-columns: 26px 52px minmax(0, 1fr) auto; padding: 10px 6px; }
.chart-page .chart .cv { width: 52px; height: 52px; }
.chart-page .chart .vt { color: var(--neon2); font-weight: 700; }
/* ---- сообщество, профили, кабинет ---- */
.avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--ah, 340) 70% 45%), hsl(calc(var(--ah, 340) + 40) 60% 22%)); box-shadow: 0 0 calc(12px * var(--neon-k)) var(--glow), inset 0 0 0 2px rgba(255, 255, 255, .15); }
.avatar.sm { width: 30px; height: 30px; font-size: 13px; } .avatar.xl { width: 92px; height: 92px; font-size: 38px; }
.cm-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; } .cm-aside { display: grid; gap: 16px; position: sticky; top: 84px; }
.cm-tabs { margin: 0 0 16px; } .cm-side { padding: 16px 18px; margin-bottom: 14px; } .cm-side h2 { margin: 0 0 10px; font-size: 17px; }
.cm-compose { padding: 16px 18px; margin-bottom: 16px; } .cm-compose textarea { width: 100%; box-sizing: border-box; margin: 10px 0; resize: vertical; }
.cm-cwho { display: flex; gap: 10px; align-items: center; } .cm-cbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cm-posts { display: grid; gap: 14px; } .cm-post { padding: 16px 18px; } .cm-post header { display: flex; gap: 12px; align-items: center; }
.cm-name { font-weight: 700; color: var(--text); } .cm-time { font-size: 12px; } .cm-body { margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.cm-track { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-line); margin-bottom: 8px; } .cm-track .cv { width: 48px; height: 48px; border-radius: 8px; background: linear-gradient(135deg, #7a1236, #14060f) center/cover; flex: none; }
.cm-acts { display: flex; gap: 6px; flex-wrap: wrap; } .cm-act { display: inline-flex; gap: 6px; align-items: center; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px 10px; border-radius: 999px; font: inherit; }
.cm-act svg { width: 19px; height: 19px; } .cm-act:hover { background: rgba(255, 255, 255, .08); color: #fff; } .cm-act[aria-pressed="true"] { color: var(--neon); } .cm-act[aria-pressed="true"] svg { fill: var(--neon); }
.cm-comments { margin-top: 10px; border-top: 1px solid var(--glass-line); padding-top: 10px; } .cm-c { display: flex; gap: 10px; margin-bottom: 10px; } .cm-text { overflow-wrap: anywhere; }
.cm-cform { display: flex; gap: 8px; } .cm-cform input { flex: 1; min-width: 0; }
.cm-person { display: flex; gap: 12px; align-items: center; padding: 8px 0; } .cm-pinfo { flex: 1; min-width: 0; } .cm-pinfo a { color: var(--text); } .cm-pinfo .muted { font-size: 12px; overflow-wrap: anywhere; }
.cm-mutual { font-size: 12px; color: var(--neon2); margin: -4px 0 6px 54px; }
.cm-prof { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .cm-stats { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); margin-top: 8px; } .cm-stats b { color: #fff; }
.cm-likes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cm-cab { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.cm-side-nav { display: grid; gap: 4px; padding: 10px; position: sticky; top: 84px; }
.cm-sn { text-align: left; background: none; border: 0; color: var(--text); padding: 11px 14px; border-radius: 12px; cursor: pointer; font: inherit; }
.cm-sn:hover { background: rgba(255, 255, 255, .08); } .cm-sn[aria-selected="true"] { background: linear-gradient(135deg, var(--neon), #b0123a); color: #fff; box-shadow: 0 0 calc(18px * var(--neon-k)) var(--glow); }
.cm-profcard { display: flex; gap: 20px; align-items: center; padding: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.cm-panel[hidden] { display: none; } .cm-panel .section { margin-top: 0; }
.list-filter { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; margin: 0 0 16px; } .list-filter input { flex: 1 1 240px; min-width: 0; }
@media (max-width: 900px) { .cm-cols, .cm-cab { grid-template-columns: 1fr; } .cm-aside, .cm-side-nav { position: static; } .cm-side-nav { display: flex; overflow-x: auto; } .cm-sn { white-space: nowrap; } }
/* ---- блоки главной под сценой ---- */
.hm-sec { margin-top: 38px; } .sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .sec-h h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); } .sec-h p { margin: 4px 0 0; }
.pr-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; } .pr-row.pod { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.pr-card { display: block; color: var(--text); border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-line); transition: transform .25s, border-color .25s, box-shadow .25s; }
.pr-card:hover { transform: translateY(-4px); border-color: var(--neon2); box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 calc(20px * var(--neon-k)) var(--glow); text-decoration: none; }
.pr-img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; } .pr-body { padding: 12px 14px 14px; display: grid; gap: 4px; } .pr-body b { overflow-wrap: anywhere; } .pr-body span { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pr-body em { font-style: normal; font-size: 12px; color: var(--neon2); }
.nw-feat { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; } .nw-big { position: relative; min-height: 300px; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 22px; color: #fff; background-size: cover; background-position: center; border: 1px solid var(--glass-line); isolation: isolate; transition: transform .25s, box-shadow .25s; }
.nw-big::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, rgba(5, 2, 8, .88)); } .nw-big:hover { transform: translateY(-3px); text-decoration: none; box-shadow: 0 0 calc(24px * var(--neon-k)) var(--glow); }
.nw-big b { font-size: clamp(20px, 2.2vw, 30px); line-height: 1.15; overflow-wrap: anywhere; } .nw-big span:not(.tg) { color: #e8d0dc; font-size: 13px; }
.tg { align-self: flex-start; background: var(--neon); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; letter-spacing: .04em; text-transform: uppercase; }
.nw-list { display: grid; gap: 12px; align-content: start; } .nw-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; color: var(--text); padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--glass-line); transition: border-color .2s, transform .2s; }
.nw-row:hover { border-color: var(--neon2); transform: translateX(3px); text-decoration: none; } .nw-th { aspect-ratio: 4 / 3; border-radius: 10px; background-size: cover; background-position: center; } .nw-row b { display: block; margin-top: 6px; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; } .nw-row time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ch-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; margin-top: 12px; align-items: stretch; } .ch-list { padding: 8px 16px; } .ch-list .chart li { grid-template-columns: 22px 46px minmax(0, 1fr) auto auto; }
.vote-card { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 22px; min-height: 220px; border-radius: 20px; color: #fff; border: 1px solid rgba(255, 120, 170, .35); background: radial-gradient(240px 200px at 80% 30%, rgba(255, 45, 111, .55), transparent 70%), linear-gradient(135deg, #5a0f2e, #14060f); transition: transform .25s, box-shadow .25s; }
.vote-card:hover { transform: translateY(-3px); text-decoration: none; box-shadow: 0 0 calc(30px * var(--neon-k)) var(--glow); } .vote-card small { font-size: 18px; opacity: .9; } .vote-card b { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; margin-bottom: 10px; }
.ch-picks h3 { margin: 0 0 10px; } .pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mini-tile { background-size: cover; background-position: center; }
.pod-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; } .pod-grid:empty { display: none; }
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; align-items: stretch; } .about-grid .mini-tile.big { min-height: 150px; font-size: 20px; border-radius: 18px; align-items: flex-end; }
.about-facts { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0 18px; color: var(--muted); } .about-facts b { display: block; font-size: 24px; color: var(--neon2); }
@media (max-width: 1100px) { .nw-feat, .ch-grid, .about-grid, .pod-grid { grid-template-columns: 1fr; } .nw-row { grid-template-columns: 90px 1fr; } .nw-row time { display: none; } }
.about-extra { margin: 22px 0; } .about-grid.two { grid-template-columns: repeat(3, 1fr); } .pop-music .chart li { grid-template-columns: 24px 52px minmax(0, 1fr) auto; } .pop-music .ch-list { padding: 8px 16px; }
@media (max-width: 700px) { .about-grid.two { grid-template-columns: 1fr; } }
/* ---- мобильная версия ---- */
@media (max-width: 900px) {
  .st-stage { aspect-ratio: auto; min-height: 0; height: clamp(300px, 84vw, 470px); }
  .st-scene .st-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .st-stage::after { background: linear-gradient(180deg, rgba(5, 2, 9, .45) 0, rgba(5, 2, 9, 0) 38%, rgba(5, 2, 9, .85) 100%); }
  .st-sign, .st-script, .st-cover, .st-mug { display: none; }
  .st-now { position: static; width: auto; padding: 4px 18px 0; } .st-meta { display: flex; gap: 14px; align-items: center; margin-top: 10px; } .st-thumb { display: block; width: 64px; height: 64px; border-radius: 14px; flex: none; background: #2a0f2a center/cover; box-shadow: 0 0 calc(18px * var(--neon-k)) var(--glow); } .st-mt { min-width: 0; text-align: left; }
  .st-wave { margin: 12px 0 2px; } .st-ctrls { justify-content: center; gap: 20px; } .st-plbtn { display: flex; justify-content: center; width: fit-content; margin: 14px auto 0; padding: 10px 26px; } .st-plbtn.ls-open { display: none; } .st-state { text-align: center; }
  .st-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 14px 0; } .st-q { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 10px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-line); color: #fff; font-size: 11px; text-align: center; line-height: 1.15; } .st-q:hover { text-decoration: none; } .st-q svg { width: 26px; height: 26px; } .st-q.hot { background: linear-gradient(135deg, #e0224e, #8e0f33); box-shadow: 0 0 calc(18px * var(--neon-k)) var(--glow); }
  .st-artist { font-size: 22px; margin: 0; -webkit-line-clamp: 1; } .st-title { font-size: clamp(28px, 8.4vw, 38px); margin: 0; -webkit-line-clamp: 1; }
  .st-tt { left: 6%; top: auto; bottom: 3%; width: 72%; transform: none; }
  .st-mascot { left: auto; right: 3%; top: auto; bottom: 14%; width: 36%; }
  .st-widgets { position: static; width: auto; max-width: none; padding: 14px 14px 0; grid-template-columns: 1fr; } .st-clock { grid-template-columns: 1fr auto; padding: 12px 16px; } .st-clock .tm { font-size: 34px; } .st-next { display: none; }
  .studio { overflow: visible; } .st-stage { overflow: hidden; }
  .st-fxbtn { left: 5%; right: auto; bottom: 2%; }
  .shelf-wrap { margin-top: 8px; } .shelf-nav { display: none; }
  .st-grid { grid-template-columns: 1fr; } .nw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-vol { display: none; }
}
@media (max-width: 560px) { .nw-grid { grid-template-columns: 1fr; } .chart li { grid-template-columns: 20px 42px minmax(0, 1fr) auto auto; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .studio * { animation: none !important; } }
.studio.lite .st-svg .t1, .studio.lite .st-svg .t2, .studio.lite .st-svg .t3, .studio.lite .st-svg .t4 { animation: none; } .studio.lite .st-cars { display: none; }

.st-widgets .glass { background-color: rgba(12, 5, 20, .5); }
.st-custom-bg { z-index: 0; }

/* ---- телефон: списки как на макете ---- */
@media (max-width: 700px) {
  body[data-page="programs"] .grid, body[data-page="news"] .grid { grid-template-columns: 1fr; gap: 12px; }
  body[data-page="programs"] .prog-card { flex-direction: row; align-items: center; } body[data-page="programs"] .prog-card .cover { width: 104px; flex: none; aspect-ratio: 1; border-radius: 12px; margin: 10px 0 10px 10px; }
  body[data-page="programs"] .prog-card .card-body { flex: 1; min-width: 0; }
  body[data-page="news"] .card a.stretch { flex-direction: row; align-items: center; } body[data-page="news"] .card .cover { width: 116px; flex: none; aspect-ratio: 4 / 3; border-radius: 12px; margin: 10px 0 10px 10px; }
  body[data-page="news"] .card .card-body { flex: 1; min-width: 0; }
  body[data-page="news"] .grid > .card:first-child a.stretch { flex-direction: column; align-items: stretch; } body[data-page="news"] .grid > .card:first-child .cover { width: auto; margin: 0; border-radius: 0; aspect-ratio: 16 / 9; }
  body[data-page="podcasts"] .grid, body[data-page="playlists"] .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  body:not(.page-home) .page-title { padding: 20px 18px 16px; margin: 10px 0 12px; border-radius: 18px; } .page-title h1 { font-size: 26px; }
  .list-filter { padding: 10px 12px; } .chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { white-space: nowrap; }
  .tabbar a span { font-size: 10.5px; }
}

/* ---- «Слушать онлайн»: пластинка-фон ---- */
.listen { position: relative; min-height: calc(100vh - 70px); overflow: hidden; isolation: isolate; padding: 0 20px 40px; }
.ls-bg { position: absolute; inset: -40px; z-index: -3; background: radial-gradient(500px 360px at 50% 18%, rgba(255, 45, 111, .35), transparent 70%), linear-gradient(180deg, #1b0a2a, #07030a 70%) center/cover; filter: blur(34px) saturate(1.3); transform: scale(1.15); transition: background-image .6s; opacity: .85; }
.ls-rec { position: absolute; z-index: -2; left: 50%; top: calc(8px + 4vh); width: min(132vw, 118vh, 980px); aspect-ratio: 1; margin-left: calc(min(132vw, 118vh, 980px) / -2); border-radius: 50%;
  background: repeating-radial-gradient(circle at center, #0b090d 0 2px, #181219 2px 3px), #0b090d; box-shadow: 0 0 0 8px #0a070c, 0 0 80px rgba(255, 45, 111, calc(.55 * var(--neon-k, .7))), 0 30px 80px rgba(0, 0, 0, .7); animation: spin 5s linear infinite; animation-play-state: paused; }
.ls-rec::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 16%, rgba(255, 255, 255, .11) 21%, transparent 28% 66%, rgba(255, 255, 255, .09) 72%, transparent 78%); }
.st-playing .ls-rec { animation-play-state: running; }
.ls-label { position: absolute; left: 27%; top: 27%; width: 46%; height: 46%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff6a98, #b0123a 70%) center/cover; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .2), 0 0 40px rgba(255, 45, 111, .5); display: grid; place-items: center; transition: background-image .5s; } .ls-label i { width: 6%; aspect-ratio: 1; border-radius: 50%; background: #0b090d; box-shadow: 0 0 0 4px rgba(0, 0, 0, .35); }
.listen::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 2, 9, .35) 0, rgba(5, 2, 9, 0) 22%, rgba(5, 2, 9, .72) 58%, rgba(5, 2, 9, .94) 82%); }
.ls-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; font-weight: 700; } .ls-back svg { transform: none; }
.ls-info { display: grid; justify-items: center; text-align: center; gap: 6px; margin: min(54vw, 46vh) auto 0; max-width: 560px; }
.ls-artist { margin: 6px 0 0; font-size: clamp(28px, 7vw, 44px); line-height: 1.05; overflow-wrap: anywhere; text-shadow: 0 4px 30px rgba(0, 0, 0, .7); } .ls-title { font-size: clamp(26px, 6.5vw, 40px); font-weight: 800; line-height: 1.05; color: var(--neon); text-shadow: 0 0 calc(24px * var(--neon-k, .7)) var(--glow); overflow-wrap: anywhere; }
.ls-info .st-wave { width: 100%; } .ls-info .st-time { width: 100%; } .ls-ctrls { display: flex; align-items: center; gap: 22px; margin: 6px 0; } .ls-play { width: 76px; height: 76px; } .ls-play svg { width: 34px; height: 34px; }
.ls-vol { display: flex; align-items: center; gap: 10px; color: #fff; width: min(320px, 80%); } .ls-vol input { flex: 1; accent-color: var(--neon); } .ls-vol svg { width: 22px; height: 22px; }
.ls-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.ls-hist { width: 100%; margin-top: 18px; text-align: left; } .ls-hist h2 { font-size: 16px; margin: 0 0 8px; } .ls-h { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--glass-line); } .ls-h b { display: block; overflow-wrap: anywhere; } .ls-h .muted { font-size: 12px; } .ls-h time { color: var(--muted); font-size: 13px; white-space: nowrap; }
@media (max-width: 900px) { body.page-listen .topbar { display: none; } .listen { min-height: 100vh; margin-top: -1px; } }
.st-plbtn.ls-open { margin-right: 8px; }
@media (min-width: 901px) { .ls-rec { width: min(62vh, 560px); margin-left: calc(min(62vh, 560px) / -2); top: 70px; } .ls-info { margin-top: calc(min(62vh, 560px) - 10px); } .listen { min-height: calc(100vh - 70px); } }

.st-thumb, .st-quick { display: none; } .st-meta { display: block; }
@media (max-width: 900px) { .st-thumb { display: block; } .st-meta { display: flex; } .st-quick { display: grid; } }
/* ---- телефон: страницы как на макете ---- */
@media (max-width: 700px) {
  body:not(.page-home) .page-title { background: none; border: 0; box-shadow: none; padding: 8px 2px 4px; margin: 6px 0 4px; border-radius: 0; backdrop-filter: none; }
  body:not(.page-home) .page-title::after { display: none; } .page-title h1 { font-size: 26px; text-shadow: none; } .page-title .lead { font-size: 14px; margin: 4px 0 0; }
  .list-filter { background: none; border: 0; box-shadow: none; padding: 0 0 8px; backdrop-filter: none; } .list-filter input { border-radius: 14px; }
  body[data-page="programs"] .prog-card { position: relative; padding-right: 58px; background: transparent; border-color: var(--glass-line); border-radius: 16px; }
  body[data-page="programs"] .prog-card::after { content: ""; position: absolute; right: 12px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; border: 1.5px solid #fff; background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
  body[data-page="programs"] .card-title { color: #fff; font-size: 15px; } body[data-page="programs"] .prog-next { color: var(--neon2); font-size: 12px; font-weight: 600; }
  .prog-desc { color: var(--muted); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .nw-big { min-height: 220px; }
}
.prog-desc { display: none; } @media (max-width: 700px) { .prog-desc { display: -webkit-box; } }@media (max-width: 700px) { :root:not([data-theme="light"]) body:not(.page-home) .page-title { background: none; border: 0; box-shadow: none; padding: 8px 2px 4px; margin: 6px 0 4px; border-radius: 0; } :root:not([data-theme="light"]) body:not(.page-home) .page-title::after { display: none; } }

/* ---- профиль: меню-список на телефоне ---- */
.cm-sn { display: flex; justify-content: space-between; align-items: center; } .cm-sn i { font-style: normal; color: var(--muted); display: none; } .cm-back { display: none; margin-bottom: 10px; } .cm-out { color: var(--neon2); }
@media (max-width: 900px) {
  .cm-cab[data-open="0"] .cm-pw { display: none; } .cm-cab[data-open="1"] .cm-side-nav { display: none; } .cm-cab[data-open="1"] .cm-back { display: inline-flex; }
  .cm-side-nav { display: grid; overflow: visible; padding: 4px 14px; } .cm-sn { padding: 16px 4px; border-radius: 0; border-bottom: 1px solid var(--glass-line); white-space: normal; font-size: 15px; } .cm-sn:last-child { border-bottom: 0; } .cm-sn i { display: inline; font-size: 22px; }
  .cm-sn[aria-selected="true"] { background: none; box-shadow: none; color: var(--text); } .cm-profcard { flex-direction: row; gap: 14px; padding: 16px; } .cm-profcard .avatar.xl { width: 68px; height: 68px; font-size: 28px; }
}

/* ---- плейлист эфира ---- */
.pl-tabs { margin: 6px 0 14px; } .pl-list { display: grid; gap: 8px; }
.pl-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--glass-line); }
.pl-row.cur { border-color: var(--neon); background: linear-gradient(90deg, rgba(255, 45, 111, .22), rgba(255, 45, 111, .05)); box-shadow: 0 0 calc(18px * var(--neon-k, .7)) var(--glow); }
.pl-cv { width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(135deg, #7a1236, #14060f) center/cover; display: grid; place-items: center; font-weight: 800; color: #ffd0e0; }
.pl-main { min-width: 0; display: grid; } .pl-main b { overflow-wrap: anywhere; line-height: 1.2; } .pl-main .muted { font-size: 12px; } .pl-time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pl-act { display: flex; gap: 6px; align-items: center; } .pl-act .prev-t { display: none; }
.pl-eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 22px; } .pl-eq i { width: 4px; height: 100%; background: var(--neon); border-radius: 2px; transform-origin: bottom; animation: wave .9s ease-in-out infinite; } .pl-eq i:nth-child(2) { animation-delay: -.3s; } .pl-eq i:nth-child(3) { animation-delay: -.6s; } .pl-eq i:nth-child(4) { animation-delay: -.15s; }
@media (max-width: 560px) { .pl-row { grid-template-columns: 48px minmax(0, 1fr) auto; } .pl-time { display: none; } .pl-act .prev-btn { display: none; } }

/* ---- кнопки в строках чарта + колокольчик ---- */
.chart li { grid-template-columns: 22px 46px minmax(0, 1fr) auto auto; } .ch-act { display: inline-flex; gap: 6px; align-items: center; } .ch-act .prev-t { display: none; } .ch-act .btn-sm { padding: 6px 9px; }
.chart-page .chart li, .pop-music .chart li { grid-template-columns: 26px 52px minmax(0, 1fr) auto auto; }
.bell { display: none; } @media (max-width: 700px) { body.page-home .bell { display: inline-grid; } body.page-home #search-toggle { display: none; } }

.ls-rec.ls-hold { animation-play-state: paused !important; } .ls-station { font-size: 13px; color: var(--muted); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .ls-rec, .st-wave b, .tt-record, .pl-eq i { animation: none !important; } }

/* ---- каталог «Музыка» ---- */
.mu-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px, 150px); gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .mu-row::-webkit-scrollbar { display: none; } .mu-row .empty { grid-column: 1 / -1; }
.mu-card { display: grid; gap: 3px; align-content: start; } .mu-card b { overflow-wrap: anywhere; font-size: 14px; } .mu-card .muted { font-size: 12px; overflow-wrap: anywhere; } .mu-card .fav-btn, .mu-card .vote-btn { justify-self: start; }
.mu-cv { position: relative; aspect-ratio: 1; border-radius: 14px; background: linear-gradient(135deg, #7a1236, #14060f) center/cover; border: 1px solid var(--glass-line); margin-bottom: 6px; }
.mu-play { position: absolute; right: 8px; bottom: 8px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--neon); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 calc(14px * var(--neon-k, .7)) var(--glow); } .mu-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }

.chart .n { display: grid; justify-items: center; gap: 1px; line-height: 1.1; } .dl { font-size: 10px; font-weight: 700; min-height: 12px; color: var(--muted); } .dl.up { color: #3ddc84; } .dl.down { color: #ff6b6b; } .dl.new { color: var(--neon2); }

/* ---- планшет (901–1099 px): узкая боковая панель с иконками ---- */
@media (min-width: 901px) and (max-width: 1099px) {
  body.has-side { --side-w: 84px; }
  body.has-side main, body.has-side .footer { padding-left: var(--side-w); }
  body.has-side .playerbar { padding-left: var(--side-w); }
  body.has-side .studio { margin-left: calc(-1 * var(--side-w)); }
  .sidenav { display: flex; flex-direction: column; position: fixed; z-index: 55; left: 12px; top: 96px; width: 58px; max-height: calc(100vh - 220px); padding: 10px 8px; gap: 4px; overflow: hidden auto; }
  .sn-item { display: flex; align-items: center; justify-content: center; padding: 11px 0; border-radius: 14px; color: var(--text); } .sn-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .sn-item[aria-current="page"] { background: linear-gradient(135deg, var(--neon), #b0123a); color: #fff; box-shadow: 0 0 calc(22px * var(--neon-k)) var(--glow); } .sn-item:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
  .sn-label, .sn-toggle, .sn-sep, .sn-social { display: none; }
}

@media (min-width: 901px) and (max-width: 1300px) { .st-plbtn.ls-open { display: none; } .st-artist { font-size: clamp(26px, 3.2vw, 44px); } .st-title { font-size: clamp(22px, 2.8vw, 38px); } }

/* ---- виниловый плеер (пластинка + конверт) ---- */
.ls-stage { display: grid; place-items: center; padding: 6px 0 2px; }
.ls-info { margin-top: 10px !important; }
.vp { --s: min(48vw, 310px); position: relative; width: calc(var(--s) * 1.76); height: var(--s); margin: 0 auto; }
.vp-rec { position: absolute; left: calc(var(--s) * .8); top: 2%; width: calc(var(--s) * .96); aspect-ratio: 1; z-index: 1; will-change: transform; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55)); }
.vp-spin { position: absolute; inset: 0; will-change: transform; }
.vp-disc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.vp-label { position: absolute; left: 25.2%; top: 25.2%; width: 49.6%; height: 49.6%; border-radius: 50%; background: #1a0b12 center / cover no-repeat; box-shadow: 0 0 0 2px rgba(255, 20, 87, .9), 0 0 22px rgba(255, 20, 87, .5), inset 0 0 16px rgba(0, 0, 0, .35); }
.vp-label.logo { background-color: #f8eef0; }
.vp-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5%; aspect-ratio: 1; margin: -2.5% 0 0 -2.5%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8d8dc, #55555c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.vp-sleeve { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); z-index: 2; border-radius: 3px; overflow: hidden; background: #150a12; box-shadow: 0 16px 36px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .16), 0 0 calc(26px * var(--neon-k, .7)) rgba(255, 20, 87, .35); }
.vp-cov, .vp-brand { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.vp-wrap { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .10) 100%), repeating-linear-gradient(62deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.vp[data-cover="0"] .vp-sleeve { background: none; box-shadow: none; overflow: visible; border-radius: 0; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .6)); } .vp[data-cover="0"] .vp-wrap { display: none; }
.vp-brand[hidden], .vp-cov[hidden] { display: none; }
@media (max-width: 360px) { .vp { --s: min(46vw, 310px); } }
/* на столе главной — та же пластинка */
.tt-record { background: url(/assets/vinyl/vinyl.webp) center / 100% 100% no-repeat !important; box-shadow: none !important; animation-duration: 1.8s !important; } .tt-record::before { display: none; }
.tt-label { left: 25.2% !important; top: 25.2% !important; width: 49.6% !important; height: 49.6% !important; box-shadow: 0 0 0 2px rgba(255, 20, 87, .9), 0 0 14px rgba(255, 20, 87, .5) !important; }

/* ---- главная: виниловый плеер в шапке на телефоне и планшете ---- */
.st-vp { display: none; }
@media (max-width: 900px) {
  .st-tt, .st-cover, .st-mug { display: none; }
  .st-vp { display: block; position: absolute; left: 4%; bottom: 12px; z-index: 4; pointer-events: none; } .st-vp .vp { --s: min(35vw, 220px); margin: 0; }
  .st-mascot { right: 2%; bottom: 8px; width: 40%; }
  .st-stage { height: clamp(300px, 86vw, 480px); }
  .st-stage::after { background: linear-gradient(180deg, rgba(5, 2, 9, .5) 0, rgba(5, 2, 9, .1) 36%, rgba(5, 2, 9, .78) 100%); }
}

/* ---- мини-плеер: LIVE, крупнее обложка, стекло, тонкая вишнёвая подсветка ---- */
.st-time.one { justify-content: center; } .st-time.one span { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--neon2); }
.pb-livebadge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: #fff; padding: 2px 8px; border-radius: 999px; background: rgba(255, 20, 87, .2); border: 1px solid rgba(255, 20, 87, .55); margin-bottom: 2px; }
.pb-livebadge[hidden] { display: none; } .pb-livebadge i { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: pulse 1.6s infinite; } .pb-livebadge.wait i { animation-duration: .6s; }
.playerbar { backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
@media (max-width: 900px) {
  .dock { background: linear-gradient(180deg, rgba(16, 24, 32, .82), rgba(7, 11, 16, .96)); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-top: 1px solid rgba(255, 20, 87, .45); box-shadow: 0 -8px 30px rgba(0, 0, 0, .55), 0 -1px 18px rgba(255, 20, 87, .2); }
  .dock .pb-cover { width: 54px; height: 54px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 14px rgba(0, 0, 0, .5); }
  .dock .pb-title { font-size: 16px; font-weight: 700; } .dock .pb-line2 { font-size: 13px; color: var(--muted); }
  .dock .pb-in { min-height: 72px; } .dock #pb-play { width: 52px; height: 52px; min-width: 52px; box-shadow: 0 0 16px rgba(255, 20, 87, .45); }
  .tabbar a { min-height: 60px; font-size: 11.5px; } .tabbar svg { width: 25px; height: 25px; }
}

/* ---- меню «Ещё» ---- */
.sheet.more { padding: 6px 8px 10px; max-height: min(72vh, 620px); border-color: rgba(255, 20, 87, .45); background: rgba(16, 24, 32, .96); backdrop-filter: blur(18px); }
.sheet.more .mg { padding: 4px 4px 2px; } .sheet.more h2 { margin: 8px 8px 4px; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.mg-l { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
.sheet.more a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 12px; font-size: 14.5px; line-height: 1.2; }
.sheet.more a svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--neon2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sheet.more a span { display: block; color: var(--text); font-size: 14.5px; }
.sheet.more a:hover, .sheet.more a:focus-visible { background: rgba(255, 255, 255, .06); }
@media (max-width: 340px) { .mg-l { grid-template-columns: 1fr; } }

/* ---- единый стиль карточек: радиус 16, спокойные подсветки, без лишней высоты ---- */
.mini-tile, .vote-card, .nw-big, .shelf-card, .pr-card, .nw-row, .app-card, .st-q { border-radius: 16px; }
.about-grid .mini-tile.big { min-height: 96px; font-size: 17px; align-items: flex-end; } .about-grid.two .mini-tile.big { min-height: 84px; }
.vote-card { min-height: 150px; } .mini-tile { min-height: 78px; }
.shelf-card { box-shadow: none; } .shelf-card:hover, .pr-card:hover, .nw-row:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.pr-body em.on, .prog-next.on { display: inline-flex; width: fit-content; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; padding: 2px 9px; border-radius: 999px; background: rgba(255, 20, 87, .22); border: 1px solid rgba(255, 20, 87, .55); }
.pr-body em.on::before, .prog-next.on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px var(--neon); animation: pulse 1.6s infinite; }
@media (max-width: 700px) {
  .pr-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(168px, 62vw); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 10px; scrollbar-width: none; margin-right: -16px; padding-right: 16px; } .pr-row::-webkit-scrollbar { display: none; } .pr-row .pr-card { scroll-snap-align: start; }
  .pr-row.pod { grid-auto-columns: minmax(150px, 46vw); }
  .vote-card { min-height: 130px; }
}
html, body { overflow-x: clip; }

.sec-more { white-space: nowrap; flex: none; }

@media (max-width: 900px) { .st-fxbtn { top: 76px; bottom: auto; left: auto; right: 12px; } }

/* ---- редакционная шапка страниц вместо одинаковых баннеров ---- */
:root:not([data-theme="light"]) body:not(.page-home) .page-title, body:not(.page-home) .page-title { background: none; border: 0; box-shadow: none; border-radius: 0; backdrop-filter: none; padding: 26px 2px 14px; margin: 0 0 6px; overflow: visible; border-bottom: 1px solid var(--line); }
:root:not([data-theme="light"]) body:not(.page-home) .page-title::after { display: none; }
body:not(.page-home) .page-title::before { content: attr(data-eyebrow); display: block; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--neon); margin-bottom: 8px; }
.page-title h1 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.02em; text-shadow: none; } .page-title .lead { max-width: 62ch; color: var(--muted); }
body[data-page="news"] { --eb: 'Новости'; }
/* пустые обложки: спокойный градиент с небольшой меткой вместо текста по центру */
.cover .ph { position: absolute; left: 12px; top: 12px; right: auto; bottom: auto; inset: 12px auto auto 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .28); padding: 3px 8px; border-radius: 6px; display: block; }
/* новости: первая карточка крупнее */
@media (min-width: 901px) { body[data-page="news"] .grid { grid-template-columns: repeat(4, 1fr); } body[data-page="news"] .grid > .card:first-child { grid-column: span 2; } body[data-page="news"] .grid > .card:first-child .cover { aspect-ratio: 16 / 9; } body[data-page="news"] .grid > .card:first-child .card-title { font-size: 22px; line-height: 1.2; } }

/* ---- главная на компьютере: тот же виниловый плеер (пластинка + конверт) ---- */
@media (min-width: 901px) {
  .st-tt, .st-cover, .st-mug { display: none; }
  .st-vp { display: block; position: absolute; left: 49%; top: 40%; z-index: 4; pointer-events: none; } .st-vp .vp { --s: min(15.5vw, 240px); margin: 0; }
  .st-mascot { left: 36%; top: 50%; width: 12.5%; }
  .st-script { left: 54%; top: 30%; }
}
@media (min-width: 901px) and (max-width: 1300px) { .st-vp .vp { --s: min(14vw, 200px); } .st-mascot { left: 37%; } }
/* ---- состояния: отклик на нажатие и видимый фокус ---- */
.btn:active, .st-q:active, .shelf-card:active, .pr-card:active, .nw-row:active, .mini-tile:active, .chip:active, .st-play:active, .tabbar a:active { transform: scale(.97); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--neon2); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { html:not(.fx-force) *, html:not(.fx-force) *::before, html:not(.fx-force) *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .vp-spin { animation: none !important; } }
@media (min-width: 901px) { .st-vp { left: 40.5%; top: 41%; } .st-mascot { left: 73%; top: 47%; width: 13%; } }
@media (min-width: 901px) and (max-width: 1300px) { .st-mascot { left: 70%; } }

@media (min-width: 901px) { .st-vp { left: 43%; } .st-mascot { left: 75%; } }
@media (min-width: 901px) and (max-width: 1300px) { .st-vp { left: 44%; } .st-mascot { left: 73%; } }

/* ---- фон-видео только в главной секции: тёмный градиент для читаемости ---- */
.studio.has-bg .st-stage::after { background: linear-gradient(90deg, rgba(5, 2, 9, .88) 0, rgba(5, 2, 9, .62) 34%, rgba(5, 2, 9, .28) 70%, rgba(5, 2, 9, .5) 100%), linear-gradient(0deg, rgba(7, 11, 16, .95) 0, rgba(7, 11, 16, 0) 30%), linear-gradient(180deg, rgba(5, 2, 9, .55) 0, rgba(5, 2, 9, 0) 22%); }
.studio.has-bg .st-sign, .studio.has-bg .st-script { display: none; }
@media (max-width: 900px) { .studio.has-bg .st-stage::after { background: linear-gradient(180deg, rgba(5, 2, 9, .6) 0, rgba(5, 2, 9, .3) 40%, rgba(7, 11, 16, .92) 100%); } }

/* =====================================================================
   Фирменный фон: премиальный тёмный, вишнёвое свечение, виньетка, зерно.
   Строится кодом: градиенты и один маленький SVG-шум, без фотографий.
   Палитра: #070B10 основа, #0E141B поверхность, #7A1028 тёмная вишня, #C51F4A акцент.
   ===================================================================== */
:root { --bg: #070B10; --surface: #0E141B; --cherry-deep: #7A1028; --cherry-acc: #C51F4A; --cherry-glow: rgba(197, 31, 74, .18);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* внутренние страницы: спокойный вариант — один мягкий вишнёвый свет сверху, виньетка и едва заметное зерно */
:root:not([data-theme="light"]) body { background: var(--bg); }
:root:not([data-theme="light"]) body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(900px 520px at 78% -8%, rgba(122, 16, 40, .34), transparent 70%), radial-gradient(700px 480px at 6% 18%, rgba(197, 31, 74, .08), transparent 70%), linear-gradient(180deg, #070B10 0, #070B10 100%); }
:root:not([data-theme="light"]) body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; background-image: var(--grain); mix-blend-mode: soft-light;
 }
:root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .card { background-color: var(--surface); }

/* главный экран: «минимальный» фон с чуть более заметным свечением вокруг плеера */
.st-minbg { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #0A0E14 0, #070B10 100%); transition: opacity .4s; }
.st-minbg i { position: absolute; border-radius: 50%; will-change: opacity; }
.st-minbg .g1 { left: 24%; top: 8%; width: 58%; height: 130%; background: radial-gradient(closest-side, rgba(197, 31, 74, .26), rgba(122, 16, 40, .14) 45%, transparent 72%); filter: blur(30px); animation: glowbreath 9s ease-in-out infinite; }
.st-minbg .g2 { left: -12%; top: -30%; width: 55%; height: 90%; background: radial-gradient(closest-side, rgba(122, 16, 40, .38), transparent 72%); filter: blur(40px); }
.st-minbg .g3 { right: -10%; bottom: -35%; width: 52%; height: 85%; background: radial-gradient(closest-side, rgba(197, 31, 74, .13), transparent 70%); filter: blur(46px); }
.st-minbg::after { content: ""; position: absolute; inset: 0; opacity: .06; background-image: var(--grain); mix-blend-mode: soft-light; }
@keyframes glowbreath { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
.studio.minimal .st-sign, .studio.minimal .st-script, .studio.minimal .st-fx { display: none; }
.studio.minimal .st-stage::after { background: linear-gradient(0deg, rgba(7, 11, 16, .45) 0, rgba(7, 11, 16, 0) 22%); }
.studio.minimal.fx-off .g1 { animation: none; }
/* пластинке и логотипу — чуть больше света вокруг */
.studio.minimal .st-vp .vp { filter: drop-shadow(0 0 40px rgba(197, 31, 74, .22)); }
@media (max-width: 900px) {
  .st-minbg .g1 { left: 0; top: 20%; width: 100%; height: 100%; } .st-minbg .g2 { width: 80%; } .studio.minimal .st-stage::after { background: linear-gradient(0deg, rgba(7, 11, 16, .4) 0, rgba(7, 11, 16, 0) 20%); }

}
@media (prefers-reduced-motion: reduce) { .st-minbg .g1 { animation: none; } }

@media (min-width: 901px) { .studio.minimal .st-vp { left: 47%; } .studio.minimal .st-mascot { left: 78%; } }
@media (min-width: 901px) and (max-width: 1300px) { .studio.minimal .st-vp { left: 47%; } .studio.minimal .st-mascot { left: 77%; } }

/* ===== Живой фон главной: исходная картинка неподвижна, огни и свет — отдельные слои поверх ===== */
.st-minbg { background: #070B10; }
.mb-art { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); --px: 0; --py: 0; }
.mb-art picture, .mb-art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.mb-art .gl { position: absolute; left: 22%; top: 12%; width: 50%; height: 78%; border-radius: 50%; mix-blend-mode: screen; pointer-events: none; filter: blur(28px);
  background: radial-gradient(closest-side, rgba(197, 31, 74, .30), rgba(122, 16, 40, .16) 50%, transparent 74%); opacity: .55; animation: mbglow 13s ease-in-out infinite; }
@keyframes mbglow { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
.mb-art .lts { position: absolute; inset: 0; pointer-events: none; transform: translate3d(calc(var(--px) * -7px), calc(var(--py) * -5px), 0); transition: transform .6s ease-out; }
.mb-art .lt { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; mix-blend-mode: screen; filter: blur(3px);
  background: radial-gradient(circle, rgba(255, 70, 100, .6) 0, rgba(210, 30, 70, .32) 38%, transparent 68%); opacity: .2; animation: mbtw var(--d) ease-in-out var(--o) infinite; }
@keyframes mbtw { 0%, 100% { opacity: .08; transform: scale(.94); } 50% { opacity: .62; transform: scale(1.04); } }
/* слабое движение отражений на столе: широкие мягкие блики медленно смещаются */
.mb-art .rf { position: absolute; left: -10%; width: 120%; height: 15%; mix-blend-mode: screen; pointer-events: none; filter: blur(14px); opacity: .5; }
.mb-art .rf1 { top: 60%; background: linear-gradient(90deg, transparent 0, rgba(197, 31, 74, .20) 22%, transparent 40%, rgba(255, 90, 110, .14) 62%, transparent 82%); animation: mbrf 14s ease-in-out infinite alternate; }
.mb-art .rf2 { top: 70%; height: 12%; background: linear-gradient(90deg, transparent 8%, rgba(255, 80, 100, .12) 30%, transparent 50%, rgba(197, 31, 74, .16) 74%, transparent 94%); animation: mbrf 11s ease-in-out -4s infinite alternate-reverse; }
@keyframes mbrf { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
/* затемнение для читаемости текста, пластинки и обложек */
.st-minbg .mb-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7, 11, 16, .4) 0, rgba(7, 11, 16, .12) 42%, rgba(7, 11, 16, 0) 100%); }
.st-minbg::after { display: none; }
.studio.minimal .st-stage::after { background: none; }
@media (max-width: 900px) {
  .mb-art .lt:nth-child(n+8), .mb-art .rf2 { display: none; } .mb-art .lt { animation-duration: calc(var(--d) * 1.3); } .mb-art .gl { filter: blur(20px); opacity: .5; animation-duration: 16s; } .mb-art .lts { transform: none; transition: none; }
  .st-minbg .mb-shade { background: linear-gradient(180deg, rgba(7, 11, 16, .1) 0, rgba(7, 11, 16, 0) 40%, rgba(7, 11, 16, .55) 100%); }
}
.st-paused .mb-art .lt, .st-paused .mb-art .gl, .st-paused .mb-art .rf { animation-play-state: paused; }
.studio.fx-off .mb-art .lt, .studio.fx-off .mb-art .gl, .studio.fx-off .mb-art .rf { animation: none; } .studio.fx-off .mb-art .lt { opacity: .22; } .studio.fx-off .mb-art .lts { transform: none; }


/* статичный вариант (экономия): картинка остаётся яркой и читаемой, огни слегка заметны */
.studio.fx-off .mb-art .lt { opacity: .3; } .studio.fx-off .mb-art .gl { opacity: .5; }
@media (max-width: 900px) { .st-minbg .mb-shade { background: linear-gradient(180deg, rgba(7, 11, 16, .1) 0, rgba(7, 11, 16, 0) 40%, rgba(7, 11, 16, .55) 100%); } }
.fx-force .mb-art .lt, .fx-force .mb-art .gl, .fx-force .mb-art .rf { animation-play-state: running; }

/* по умолчанию фон — спокойная картинка без анимации; слои огней включаются в админке */
.studio.minimal:not(.bg-anim) .mb-art .lts, .studio.minimal:not(.bg-anim) .mb-art .gl, .studio.minimal:not(.bg-anim) .mb-art .rf { display: none; }


/* ===== мобильная доводка по результатам проверки 320–768 px и горизонтальной ориентации ===== */
@media (max-width: 900px) { .st-mascot { width: min(34%, 190px); right: 3%; bottom: 8px; } }
@media (max-width: 480px) {
  .st-vp .vp { --s: min(30vw, 150px); } .st-vp { left: 3%; bottom: 10px; } .st-mascot { width: 30%; right: 1%; }
  .ls-station, .ls-info .st-time.one { display: none; } .ls-info { gap: 4px; margin-top: 4px !important; } .ls-artist { font-size: 25px; } .ls-title { font-size: 23px; } .ls-info .st-wave { height: 26px; margin: 4px 0; }
  .vp { --s: min(42vw, 180px); } .ls-ctrls { margin: 2px 0; } .ls-play { width: 68px; height: 68px; } .ls-top { padding: 8px 0; }
}
/* горизонтальный телефон: низкий экран — компактные панели, меньше шапка главной, без маскота */
@media (max-height: 520px) and (max-width: 950px) {
  :root { --tab-h: calc(46px + env(safe-area-inset-bottom)); }
  .tabbar a { min-height: 46px; flex-direction: row; gap: 6px; font-size: 11px; } .tabbar a svg { width: 20px; height: 20px; }
  .dock .pb-in { min-height: 52px; padding: 4px 14px; } .dock .pb-cover { width: 42px; height: 42px; } .dock #pb-play { width: 42px; height: 42px; min-width: 42px; } .dock .pb-expand { width: 36px; height: 36px; }
  .st-stage { height: 230px; } .st-mascot { display: none; } .st-vp .vp { --s: 120px; } .st-fxbtn { top: 8px; }
  .listen .ls-rec, .ls-stage .vp { --s: 120px; } .ls-info { margin-top: 0 !important; } .ls-artist { font-size: 22px; } .ls-title { font-size: 20px; }
}

@media (max-height: 520px) and (max-width: 950px) { .st-fxbtn { top: auto; bottom: 8px; right: 12px; left: auto; } .dock .pb-livebadge { display: none; } }

@media (max-width: 700px) { body[data-page="programs"] .prog-card .cover .ph { display: none; } }

/* ===== фон главной: картинка светлее целиком, одинаково на телефоне и компьютере (без градиентов по краям) ===== */
.st-minbg .mb-art picture, .st-minbg .mb-art img { filter: brightness(1.16) saturate(1.04); }
.st-minbg .mb-shade { background: rgba(7, 11, 16, .08) !important; }
.studio.minimal .st-stage::after { background: none !important; }
@media (max-width: 900px) { .st-minbg .mb-shade { background: rgba(7, 11, 16, .08) !important; } }

/* Рекламные места (public/ads.js): появляются только у включённых мест; место резервируется по пропорциям баннера */
.ad-sec { margin-top: 28px; }
.ad { max-width: 100%; margin: 0 auto; }
.ad-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; min-height: 16px; }
.ad-tag { font-size: 11px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.ad-demo { font-size: 11px; color: var(--cherry2); }
.ad-link { display: block; position: relative; width: 100%; max-width: var(--w, 100%); margin: 0 auto; aspect-ratio: var(--ar, 4 / 1); overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.ad-link:hover { border-color: var(--cherry2); text-decoration: none; }
.ad-link picture, .ad-link img { display: block; width: 100%; height: 100%; }
.ad-link img { object-fit: contain; }
.ad-demo-img { display: grid; place-content: center; text-align: center; gap: 4px; padding: 12px; color: var(--text); background: repeating-linear-gradient(135deg, var(--panel) 0 14px, var(--panel2) 14px 28px); cursor: default; }
.ad-demo-img span { color: var(--muted); font-size: 13px; }
.ad-meta { max-width: var(--w, 100%); margin: 6px auto 0; font-size: 11px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .ad-link { aspect-ratio: var(--arm, var(--ar, 4 / 1)); max-width: var(--wm, var(--w, 100%)); }
  .ad-meta { max-width: var(--wm, var(--w, 100%)); }
}
.ad-ya { width: 100%; max-width: 100%; min-height: var(--h, 250px); overflow: hidden; border-radius: var(--radius); }
@media (max-width: 700px) { .ad-ya { min-height: var(--hm, 300px); } }

/* Страницы «О радиостанции» и «Основатель» (public/profile.js) */
.pf-crumbs { padding: 18px 0 0; font-size: 13px; color: var(--muted); }
.pf-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pf-crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.pf-crumbs a { color: var(--muted); } .pf-crumbs a:hover { color: var(--cherry2); text-decoration: none; }
.pf-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 56px); align-items: center; margin: 18px 0 8px; padding: clamp(22px, 4vw, 48px); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, rgba(224, 34, 78, .22), transparent 55%), linear-gradient(160deg, var(--panel2), var(--bg2)); }
.pf-hero-person { grid-template-columns: clamp(250px, 34vw, 440px) minmax(0, 1fr); align-items: center; }
.pf-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cherry2); font-weight: 700; margin-bottom: 10px; }
.pf-hero h1 { margin: 0 0 12px; font-size: clamp(30px, 5.2vw, 56px); line-height: 1.05; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pf-hero h1 span { color: var(--cherry2); }
.pf-hero .lead { margin: 0 0 14px; max-width: 54ch; }
.pf-role { margin: 0 0 12px; color: var(--cherry2); font-weight: 600; font-size: clamp(16px, 2vw, 20px); }
.pf-slogan { display: inline-block; font-style: italic; font-weight: 700; color: var(--cherry2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px; background: rgba(224, 34, 78, .08); }
.pf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-logo { width: clamp(120px, 20vw, 240px); aspect-ratio: 1; display: grid; place-items: center; padding: 6%; border-radius: 26%; background: #fff; box-shadow: 0 0 40px var(--glow); }
.pf-logo img { width: 100%; height: 100%; object-fit: contain; }
.pf-photo { width: 100%; aspect-ratio: var(--pf-ar, 3 / 4); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 0 36px var(--glow); background: var(--panel); }
.pf-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 18px; }
.pf-facts div { min-width: 0; } .pf-facts dt { font-size: 12px; color: var(--muted); } .pf-facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.pf-sec { margin-top: 40px; max-width: 920px; }
.pf-sec h2 { margin: 0 0 14px; font-size: clamp(22px, 2.6vw, 30px); }
.pf-sec p { font-size: 17px; line-height: 1.7; margin: 0 0 12px; overflow-wrap: anywhere; }
.pf-body { max-width: 70ch; font-size: 16px; }
.pf-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pf-list li { position: relative; padding: 12px 14px 12px 38px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow-wrap: anywhere; }
.pf-list li::before { content: ""; position: absolute; left: 15px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--cherry); box-shadow: 0 0 10px var(--glow); }
.pf-time { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); display: grid; gap: 16px; }
.pf-time li { position: relative; display: grid; gap: 2px; }
.pf-time li::before { content: ""; position: absolute; left: -25px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--cherry); box-shadow: 0 0 10px var(--glow); }
.pf-time time { font-weight: 700; color: var(--cherry2); }
.pf-sec .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-sec a.chip { text-decoration: none; } .pf-sec a.chip:hover { border-color: var(--cherry2); }
.pf-link { color: var(--cherry2); }
.pf-person { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg, var(--panel2), var(--panel)); color: var(--text); flex-wrap: wrap; }
.pf-person:hover { border-color: var(--cherry2); text-decoration: none; box-shadow: 0 0 22px var(--glow); }
.pf-person img { width: 72px; height: 90px; object-fit: cover; border-radius: 12px; flex: none; }
.pf-person > span:first-of-type, .pf-person > span:nth-of-type(1) { flex: 1 1 220px; min-width: 0; display: grid; gap: 3px; }
.pf-person em { font-style: normal; color: var(--cherry2); font-weight: 600; } .pf-person small { color: var(--muted); font-size: 14px; }
.pf-note { max-width: 70ch; margin-top: 36px; }
@media (max-width: 700px) {
  .pf-hero, .pf-hero-person { grid-template-columns: 1fr; padding: 20px 16px; border-radius: 18px; }
  .pf-logo { order: -1; width: 112px; justify-self: start; }
  .pf-photo { width: 100%; max-width: 440px; justify-self: center; }
  .pf-sec { margin-top: 30px; }
  .pf-sec p { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) { .pf-hero { animation: pf-in .5s ease both; } @keyframes pf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* Страница основателя: информационные карточки и хронология */
.pf-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.pf-cards li { position: relative; padding: 14px 14px 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, var(--panel2), var(--panel)); line-height: 1.45; overflow-wrap: anywhere; }
.pf-cards li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--cherry); box-shadow: 0 0 10px var(--glow); }
.pf-fact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; max-width: 560px; }
.pf-fact-cards div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .03); }
.pf-fact-cards dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--cherry); text-underline-offset: 3px; }
@media (max-width: 700px) { .pf-fact-cards { grid-template-columns: 1fr 1fr; } }

.pf-alt { margin: -6px 0 14px; font-size: 14px; max-width: 54ch; }

.pf-fact-cards.pf-wide { max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.pf-fact-cards dd { overflow-wrap: anywhere; }

.air-hint { margin-top: 4px; font-size: 14px; line-height: 1.4; max-width: 52ch; }

.pf-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.pf-sw { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); font-size: 13px; line-height: 1.35; }
.pf-sw i { display: block; height: 54px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .15); }
.pf-sw span { color: var(--muted); }

/* Подписка на новости (public/newsletter.js) */
.news-wrap { margin: 28px auto 8px; }
.news-box { position: relative; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(120% 140% at 100% 0%, rgba(224, 34, 78, .18), transparent 60%), linear-gradient(160deg, var(--panel2), var(--bg2)); overflow: hidden; max-width: 760px; }
.news-box h2 { margin: 0 0 6px; font-size: clamp(20px, 2.6vw, 26px); }
.news-box p { margin: 0 0 14px; }
.news-row { display: flex; gap: 10px; flex-wrap: wrap; }
.news-row input[type=email] { flex: 1 1 240px; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
.news-row input[type=email]:focus-visible { outline: 3px solid var(--cherry2); outline-offset: 2px; }
.news-consent { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.news-consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--cherry); }
.news-msg { margin-top: 10px; min-height: 1.2em; font-size: 14px; }
.news-msg.ok { color: var(--ok); } .news-msg.err { color: var(--err); }

body[data-page="subscribe"] .news-wrap, body[data-page="unsubscribe"] .news-wrap { display: none; }

/* Каверы */
.cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; margin: 14px 0; }
.cv-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, var(--panel2), var(--panel)); overflow-wrap: anywhere; }
.cv-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.cv-plat { align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--cherry); }
.cv-about { margin: 4px 0 0; line-height: 1.5; }
.cv-foot { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.cv-form { display: grid; gap: 12px; margin-top: 12px; }
.cv-form .fgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cv-formbox { max-width: 760px; margin-top: 18px; }

/* Лёгкий режим (public/perf.js): без размытия подложек, наложений и декоративных анимаций; плеер и пластинка работают как обычно */
html.perf-lite *, html.perf-lite *::before, html.perf-lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.perf-lite .dock, html.perf-lite .playerbar, html.perf-lite .tabbar, html.perf-lite .topbar, html.perf-lite .sheet.more, html.perf-lite .dock .pb-panel { background-color: #0d0710; }
html.perf-lite .st-minbg .g1, html.perf-lite .st-minbg .g2, html.perf-lite .st-minbg .g3, html.perf-lite .st-minbg::after, html.perf-lite .st-daylight, html.perf-lite .ls-bg,
html.perf-lite .mb-art .gl, html.perf-lite .mb-art .lt, html.perf-lite .mb-art .rf, html.perf-lite .mb-art .rf2, html.perf-lite body::after { display: none !important; }
html.perf-lite .st-beacon, html.perf-lite .st-sign, html.perf-lite .car.cf, html.perf-lite .st-svg .t1, html.perf-lite .st-svg .t2, html.perf-lite .st-svg .t3, html.perf-lite .st-svg .t4, html.perf-lite .st-minbg .g1, html.perf-lite .pf-hero { animation: none !important; }
html.perf-lite .card, html.perf-lite .cv-card { box-shadow: none !important; }
.perf-btn { margin: 10px 0 0; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.perf-btn:hover, .perf-btn:focus-visible { color: var(--text); border-color: var(--cherry); }
.cv-media { display: block; width: 100%; margin-top: 8px; border-radius: 12px; background: #000; max-height: 60vh; }
audio.cv-media { height: 44px; background: transparent; }