/* zvuki staging — дизайн-система. Все классы с префиксом z-. */
:root {
	--c-bg: #101219;
	--c-bg-2: #151821;
	--c-surface: #1c202b;
	--c-surface-2: #252a37;
	--c-surface-3: #303646;
	--c-text: #eef1f6;
	--c-text-muted: #9ea7b8;
	--c-accent: #02b875;
	--c-accent-hover: #04cf85;
	--c-accent-text: #2fd394;
	--c-on-accent: #04130d;
	--c-danger: #ff4d7e;
	--c-on-danger: #1c0309;
	--c-warning: #fcc100;
	--c-focus: #7cf0bf;
	--c-border: rgba(255, 255, 255, .09);
	--c-overlay: rgba(5, 7, 12, .72);
	--shadow: 0 10px 30px rgba(0, 0, 0, .35);
	--radius: 14px;
	--radius-s: 8px;
	--side-w: 248px;
	--top-h: 64px;
	--player-h: 88px;
	--tabs-h: 0px;
	--banner-h: 30px;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "PT Sans", "Helvetica Neue", Arial, sans-serif;
	--t-fast: .15s;
	color-scheme: dark;
}
:root[data-theme="light"] {
	--c-bg: #f5f7f6;
	--c-bg-2: #eef1f0;
	--c-surface: #ffffff;
	--c-surface-2: #eef2f1;
	--c-surface-3: #e0e6e4;
	--c-text: #121614;
	--c-text-muted: #56605c;
	--c-accent: #02b875;
	--c-accent-hover: #01a167;
	--c-accent-text: #01764b;
	--c-on-accent: #04130d;
	--c-danger: #c8104a;
	--c-on-danger: #fff;
	--c-focus: #016b44;
	--c-border: rgba(0, 0, 0, .1);
	--c-overlay: rgba(20, 26, 24, .5);
	--shadow: 0 10px 28px rgba(16, 32, 24, .12);
	color-scheme: light;
}
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		--c-bg: #f5f7f6; --c-bg-2: #eef1f0; --c-surface: #ffffff; --c-surface-2: #eef2f1; --c-surface-3: #e0e6e4;
		--c-text: #121614; --c-text-muted: #56605c; --c-accent-hover: #01a167; --c-accent-text: #01764b;
		--c-danger: #c8104a; --c-on-danger: #fff; --c-focus: #016b44; --c-border: rgba(0, 0, 0, .1); --c-overlay: rgba(20, 26, 24, .5);
		--shadow: 0 10px 28px rgba(16, 32, 24, .12); color-scheme: light;
	}
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0; background: var(--c-bg); color: var(--c-text); font: 400 15px/1.5 var(--font);
	-webkit-font-smoothing: antialiased; overflow-wrap: anywhere;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-accent-text); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 6px; }
.z-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.z-skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--c-accent); color: var(--c-on-accent); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.z-skip:focus { top: 12px; color: var(--c-on-accent); }
.z-ico { width: 22px; height: 22px; fill: currentColor; flex: none; }
.z-ico--s { width: 18px; height: 18px; }
.z-ico--l { width: 28px; height: 28px; }

/* Тестовый баннер */
.z-banner {
	position: sticky; top: 0; z-index: 60; height: var(--banner-h); display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 0 12px; background: repeating-linear-gradient(135deg, #fcc100 0 14px, #f2b600 14px 28px); color: #1d1600;
	font-size: 12.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.z-banner span { overflow: hidden; text-overflow: ellipsis; }

/* Каркас */
.z-app {
	display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: var(--top-h) 1fr;
	grid-template-areas: "side top" "side main"; min-height: calc(100vh - var(--banner-h));
}
.z-side {
	grid-area: side; position: sticky; top: var(--banner-h); height: calc(100vh - var(--banner-h) - var(--player-h));
	display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; background: var(--c-bg-2); border-right: 1px solid var(--c-border); overflow-y: auto;
}
.z-logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.z-logo:hover { color: var(--c-text); }
.z-logo__mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #02b875, #0a7f8f); display: grid; place-items: center; color: #fff; }
.z-logo b { color: var(--c-accent-text); font-weight: 800; }
.z-nav { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.z-nav__h { margin: 18px 10px 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-muted); }
.z-nav a {
	display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--c-text-muted); font-weight: 600;
	transition: background var(--t-fast), color var(--t-fast);
}
.z-nav a:hover { background: var(--c-surface); color: var(--c-text); }
.z-nav a[aria-current="page"] { background: var(--c-surface-2); color: var(--c-text); }
.z-nav a[aria-current="page"] .z-ico { color: var(--c-accent); }
.z-side__pl { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.z-side__pl a { padding: 8px 12px; border-radius: 8px; color: var(--c-text-muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-side__pl a:hover { background: var(--c-surface); color: var(--c-text); }
.z-side__foot { margin-top: auto; padding: 12px 10px 0; font-size: 12px; color: var(--c-text-muted); }

.z-top {
	grid-area: top; position: sticky; top: var(--banner-h); z-index: 30; display: flex; align-items: center; gap: 12px; padding: 0 28px;
	background: var(--c-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--c-border);
}
.z-top__nav { display: flex; gap: 6px; }
.z-top .z-logo { display: none; padding: 0; }
.z-search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 560px; }
.z-search__box { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 14px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-border); }
.z-search__box:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-focus); outline: 2px solid var(--c-focus); outline-offset: 2px; }
.z-search__box .z-ico { color: var(--c-text-muted); }
.z-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-size: 15px; }
.z-search input::-webkit-search-cancel-button { display: none; }
.z-search__clear { width: 36px; height: 36px; }
.z-top__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.z-suggest {
	position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: min(70vh, 560px); overflow-y: auto; padding: 8px;
	background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 40;
}
.z-suggest__h { padding: 8px 10px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); }
.z-suggest__note { padding: 6px 10px; font-size: 13px; color: var(--c-text-muted); }
.z-suggest a { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 10px; min-height: 52px; }
.z-suggest a:hover, .z-suggest a[aria-selected="true"] { background: var(--c-surface-2); color: var(--c-text); }
.z-suggest .z-cv { width: 40px; flex: none; }
.z-suggest__t { min-width: 0; }
.z-suggest__t b, .z-suggest__t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-suggest__t small { color: var(--c-text-muted); font-size: 13px; }
.z-suggest__all { justify-content: center; font-weight: 700; color: var(--c-accent-text); }
.z-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); max-width: 560px; }
.z-resume .z-cv { width: 56px; flex: none; }
.z-resume__t { flex: 1 1 140px; min-width: 0; }
.z-resume__t b, .z-resume__t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-resume__t small { color: var(--c-text-muted); font-size: 13px; }
@media (max-width: 480px) { .z-resume { flex-wrap: wrap; } .z-resume__t { flex-basis: calc(100% - 80px); } .z-resume .z-btn { flex: 1 1 100%; } }
/* Каталог компонентов /design (views/design.pug): сетка ячеек «состояние»; .ds-focus повторяет :focus-visible, .ds-static снимает позиционирование */
.ds-sec { margin-bottom: 36px; }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ds-stack { display: grid; gap: 14px; max-width: 760px; }
.ds-cell { margin: 0; padding: 14px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); min-width: 0; }
.ds-cell__demo { display: flex; align-items: center; min-height: 56px; min-width: 0; }
.ds-cell__demo > * { max-width: 100%; }
.ds-cell figcaption { margin-top: 10px; font-size: 12px; color: var(--c-text-muted); }
.ds-focus { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.ds-cell__demo > [aria-busy="true"] { flex: 1; }
.ds-cell .z-skel { background: linear-gradient(90deg, var(--c-surface-2) 0 40%, var(--c-surface-3) 50%, var(--c-surface-2) 60%) 0 0 / 300% 100%; }   /* ячейка того же цвета, что и обычный фон скелетона */
.ds-cell:has(.z-tabs) { grid-column: 1 / -1; }
.ds-static { position: static; transform: none; width: auto; animation: none; }
.z-suggest__hrow { display: flex; align-items: center; justify-content: space-between; }
.z-suggest__x { min-height: 32px; padding: 0 8px; border: 0; background: transparent; border-radius: 8px; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--c-accent-text); }
.z-suggest__x:hover { background: var(--c-surface-2); }
.z-suggest__r { display: flex; align-items: center; gap: 4px; }
.z-suggest__r a { flex: 1; min-width: 0; }
.z-suggest__r .z-ico { color: var(--c-text-muted); flex: none; }
.z-suggest__del { width: 44px; height: 44px; flex: none; }

.z-main { grid-area: main; min-width: 0; padding: 28px 28px calc(var(--player-h) + 48px); }
.z-main:focus { outline: none; }
.z-wrap { max-width: 1440px; margin: 0 auto; }

/* Кнопки */
.z-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px;
	border: 1px solid var(--c-border); background: var(--c-surface-2); font-weight: 700; font-size: 14.5px; white-space: nowrap;
	transition: background var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.z-btn:hover { background: var(--c-surface-3); color: var(--c-text); }
.z-btn:active { transform: scale(.97); }
.z-btn--accent { background: var(--c-accent); border-color: transparent; color: var(--c-on-accent); }
.z-btn--accent:hover { background: var(--c-accent-hover); color: var(--c-on-accent); }
.z-btn--ghost { background: transparent; }
.z-btn--danger { background: var(--c-danger); color: var(--c-on-danger); border-color: transparent; }
.z-btn--danger:hover { background: var(--c-danger); filter: brightness(1.1); color: var(--c-on-danger); }
.z-btn--s { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
/* Сенсорные экраны: цель касания не меньше 44px (компактные кнопки, вкладки, логотип в шапке). */
@media (pointer: coarse) {
	.z-btn--s, html .z-tabs [role="tab"], .z-suggest__x { min-height: 44px; }
	.z-sheet .z-range { height: 44px; }
	.z-sheet .z-range::-webkit-slider-thumb { opacity: 1; width: 18px; height: 18px; margin-top: -7px; }
	/* < 16px — iOS Safari увеличивает страницу при фокусе в поле. */
	.z-input, .z-search input { font-size: 16px; }
	.z-search__box { height: 46px; }
	.z-top .z-logo { min-width: 44px; min-height: 44px; justify-content: center; }
}
.z-btn[disabled] { opacity: .5; cursor: not-allowed; }
.z-ib {
	display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: var(--c-text-muted); transition: background var(--t-fast), color var(--t-fast);
}
.z-ib:hover { background: var(--c-surface-2); color: var(--c-text); }
.z-ib[aria-pressed="true"], .z-ib.is-on { color: var(--c-accent-text); }
.z-ib--like[aria-pressed="true"] { color: var(--c-danger); }
.z-ib[disabled] { opacity: .4; cursor: default; }
.z-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #02b875, #2f6fdc); color: #fff; display: grid; place-items: center; font-weight: 800; }

/* Обложки (процедурные, CSS) */
.z-cv {
	--a: hsl(var(--h) 72% 48%); --b: hsl(var(--h2) 70% 20%); --c: hsl(calc(var(--h) + 180) 80% 70% / .55);
	position: relative; display: block; aspect-ratio: 1; width: 100%; border-radius: var(--radius-s); overflow: hidden;
	background: linear-gradient(140deg, var(--a), var(--b)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.z-cv::before, .z-cv::after { content: ""; position: absolute; inset: 0; }
.z-cv > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.z-cv--0::before { background: radial-gradient(circle at 70% 30%, var(--c) 0 18%, transparent 18.5%), radial-gradient(circle at 25% 78%, rgba(255,255,255,.18) 0 26%, transparent 26.5%); }
.z-cv--1::before { background: repeating-linear-gradient(115deg, rgba(255,255,255,.14) 0 6%, transparent 6% 14%); }
.z-cv--1::after { background: linear-gradient(0deg, var(--b), transparent 60%); }
.z-cv--2::before { background: repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.22) 0 2%, rgba(255,255,255,.08) 2% 4%); }
.z-cv--2::after { background: radial-gradient(circle at 50% 50%, var(--c) 0 13%, rgba(0,0,0,.6) 13.5% 15%, transparent 15.5%); }
.z-cv--3::before { background: conic-gradient(from calc(var(--h) * 1deg) at 30% 70%, var(--c), transparent 30%, rgba(255,255,255,.18) 55%, transparent 80%); }
.z-cv--4::before { background: radial-gradient(ellipse 60% 40% at 30% 30%, var(--c), transparent 70%), radial-gradient(ellipse 50% 60% at 80% 85%, rgba(255,255,255,.22), transparent 70%); filter: blur(2px); }
.z-cv--4::after { background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.25)); }
.z-cv--round { border-radius: 50%; }
.z-cv__l { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: rgba(255,255,255,.92); font-weight: 800; font-size: 2.2em; text-shadow: 0 2px 10px rgba(0,0,0,.35); }

/* Секции */
.z-sec { margin-top: 40px; }
.z-sec:first-child { margin-top: 0; }
.z-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.z-sec__head h2 { font-size: 22px; font-weight: 800; }
/* anywhere у body даёт заголовку нулевую min-content-ширину — во flex он рвался посреди слова ради кнопки рядом */
h1, h2 { overflow-wrap: break-word; }
.z-sec__sub { margin-top: 4px; font-size: 13px; color: var(--c-text-muted); }
.z-sec__more { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 700; font-size: 14px; color: var(--c-text-muted); }
/* поиск: в группе «Треки» сначала 5, остальные — по кнопке «Все треки» */
.z-sec--fold .z-tl > li:nth-child(n+6) { display: none; }
.z-sec__all { margin-top: 12px; }
.z-sec:not(.z-sec--fold) .z-sec__all { display: none; }
.z-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--c-surface-3); color: var(--c-accent-text); font-size: 12px; font-weight: 700; }
.z-tag--warn { background: var(--c-surface-3); color: var(--c-text); }

/* Hero */
.z-hero {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 36px 40px; overflow: hidden;
	border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, hsl(var(--h) 70% 34%), transparent 60%), linear-gradient(120deg, #0b3a2b, #10141f 70%);
	color: #fff; min-height: 260px; isolation: isolate;
}
.z-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-radial-gradient(circle at 92% 40%, rgba(255,255,255,.05) 0 2px, transparent 2px 22px); }
.z-hero__k { display: inline-block; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8ff0c7; }
.z-hero h1 { font-size: clamp(28px, 4vw, 46px); font-weight: 850; letter-spacing: -.025em; max-width: 16ch; }
.z-hero p { margin-top: 12px; max-width: 52ch; color: rgba(255,255,255,.78); }
.z-hero__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.z-hero .z-btn:not(.z-btn--accent) { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); }
.z-hero__art { position: relative; width: 220px; height: 220px; }
.z-hero__art .z-cv { position: absolute; width: 150px; box-shadow: var(--shadow); border-radius: 12px; }
.z-hero__art .z-cv:nth-child(1) { left: 0; top: 30px; transform: rotate(-8deg); }
.z-hero__art .z-cv:nth-child(2) { left: 70px; top: 0; z-index: 1; }
.z-hero__art .z-cv:nth-child(3) { left: 60px; top: 70px; z-index: 2; transform: rotate(6deg); }

/* Ряды карточек */
.z-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 184px); gap: 20px; overflow-x: auto; padding: 4px 4px 14px; margin: -4px -4px 0; scroll-snap-type: x proximity; scrollbar-width: thin; }
.z-row > * { scroll-snap-align: start; }
.z-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px; }
.z-card { position: relative; min-width: 0; }
.z-card .z-cv { transition: transform .25s, box-shadow .25s; }
.z-card:hover .z-cv { transform: translateY(-3px); box-shadow: var(--shadow); }
.z-card__t { display: block; margin-top: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-card__s { font-size: 13.5px; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-card__s a:hover { text-decoration: underline; }
.z-cardbox { position: relative; }
.z-card__play {
	position: absolute; right: 10px; bottom: 10px; width: 48px; height: 48px; border-radius: 50%; border: 0;
	display: grid; place-items: center; background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 8px 20px rgba(0,0,0,.35);
	opacity: 0; transform: translateY(8px); transition: opacity var(--t-fast), transform var(--t-fast);
}
.z-card:hover .z-card__play, .z-card__play:focus-visible, .z-card.is-current .z-card__play { opacity: 1; transform: none; }
.z-card--artist { text-align: center; }
.z-card--artist .z-card__t { margin-top: 12px; }
@media (hover: none) { .z-card__play { opacity: 1; transform: none; width: 44px; height: 44px; } }

/* Список треков */
.z-tl { list-style: none; margin: 0; padding: 0; }
.z-tl--cols { columns: 2 420px; column-gap: 28px; }
.z-tl--cols .z-tr { break-inside: avoid; }
.z-tr {
	display: grid; grid-template-columns: 44px 48px minmax(0, 1fr) minmax(0, .7fr) auto auto; align-items: center; gap: 12px;
	min-height: 64px; padding: 6px 8px; border-radius: 12px; transition: background var(--t-fast);
}
.z-tr:hover, .z-tr:focus-within { background: var(--c-surface); }
.z-tr--na { opacity: .6; }
.z-tr--na .z-tr__artist { font-style: italic; }
.z-tr.is-current { background: var(--c-surface-2); }
.z-tr.is-current .z-tr__title { color: var(--c-accent-text); }
.z-tr__n { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.z-tr__n span { transition: opacity var(--t-fast); }
.z-tr__n .z-tr__play { position: absolute; inset: 0; opacity: 0; color: var(--c-text); }
.z-tr:hover .z-tr__n span, .z-tr:focus-within .z-tr__n span, .z-tr.is-current .z-tr__n span { opacity: 0; }
.z-tr:hover .z-tr__play, .z-tr__play:focus-visible, .z-tr.is-current .z-tr__play { opacity: 1; }
.z-tr .z-cv { width: 48px; border-radius: 6px; }
.z-tr__main { min-width: 0; }
.z-tr__title, .z-tr__artist, .z-tr__album { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-tr__title { font-weight: 650; }
.z-tr__artist, .z-tr__album, .z-tr__dur { font-size: 13.5px; color: var(--c-text-muted); }
.z-tr__artist a { color: inherit; }
.z-tr__artist a:hover { text-decoration: underline; }
.z-tr__dur { font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.z-tr__act { display: flex; align-items: center; }
.z-tl--cols .z-tr { grid-template-columns: 44px 48px minmax(0, 1fr) auto auto; }
.z-tl--cols .z-tr__album { display: none; }
/* номер — позиция источника («№100»): шире 1…N, и на телефоне не прячется — без него порядок чарта не читается */
.z-tl--pos .z-tr__n { font-size: 13px; }
.z-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.z-eq i { width: 3px; background: var(--c-accent); animation: z-eq 1s infinite ease-in-out; }
.z-eq i:nth-child(2) { animation-delay: -.3s; } .z-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes z-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }

/* Шапки страниц (трек, альбом, артист, плейлист) */
.z-head { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 32px; align-items: end; padding: 28px; border-radius: 22px; background: linear-gradient(180deg, hsl(var(--h, 155) 45% 30% / .55), transparent); }
.z-head .z-cv { box-shadow: var(--shadow); border-radius: 14px; }
.z-head__k { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-text-muted); }
.z-head h1 { margin-top: 6px; font-size: clamp(26px, 4.4vw, 54px); font-weight: 850; letter-spacing: -.025em; }
/* h1 по legacy («артисты - трек», «Альбом: …») бывает длинным: на 54 px это 5–6 строк */
.z-head h1.z-h1--long { font-size: clamp(22px, 3vw, 38px); }
/* Ссылки артиста/альбома: цель нажатия 44 px при строке ~22 px — отрицательные поля не раздвигают раскладку,
   межстрочный зазор 22 px не даёт целям соседних строк перекрываться при переносе */
.z-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; color: var(--c-text-muted); font-size: 14.5px; }
.z-head__meta:has(a) { row-gap: 22px; }
.z-head__meta a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin: -11px 0; color: var(--c-text); font-weight: 700; }
.z-head__meta i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
.z-head__desc { margin-top: 10px; max-width: 70ch; color: var(--c-text-muted); }
.z-head__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.z-bigplay { width: 60px; height: 60px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); transition: transform var(--t-fast), background var(--t-fast); }
.z-bigplay:hover { background: var(--c-accent-hover); transform: scale(1.04); }
.z-btn--dl { min-height: 44px; padding: 0 22px; font-size: 14.5px; box-shadow: 0 6px 16px rgba(2, 184, 117, .28); }
.z-btn--dl:focus-visible { outline: 2px solid var(--c-text); outline-offset: 2px; }
.z-head--track { position: relative; }
.z-head__like { position: absolute; top: 8px; right: 8px; z-index: 1; color: var(--c-text-muted); background: transparent; }
.z-head__like:hover { background: rgba(127, 127, 127, .16); }
.z-head__like .z-ico { width: 20px; height: 20px; }
.z-head--track .z-head__k, .z-head--track h1 { margin-right: 44px; }
/* трек без звука (страница есть, как в production): вместо кнопок — плашка той же высоты, что ряд действий */
.z-head__off { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 20px; padding: 10px 18px; border-radius: 999px; border: 1px dashed var(--c-border); color: var(--c-text-muted); font-weight: 700; }

/* Вкладки, пустые/ошибки, загрузка */
.z-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 22px; }
.z-tabs [role="tab"] { flex: none; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); font-weight: 700; color: var(--c-text-muted); }
.z-tabs [role="tab"][aria-selected="true"] { background: var(--c-text); color: var(--c-bg); border-color: transparent; }
.z-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 20px; text-align: center; color: var(--c-text-muted); border: 1px dashed var(--c-border); border-radius: var(--radius); }
.z-empty .z-ico { width: 40px; height: 40px; color: var(--c-accent); }
.z-empty__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.z-empty b, .z-empty__h { color: var(--c-text); font-size: 17px; font-weight: 700; margin: 0; }
.z-more { display: flex; justify-content: center; margin: 16px 0 8px; }
.z-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--c-surface-2); color: var(--c-text); }
.z-skel { border-radius: 10px; background: linear-gradient(90deg, var(--c-surface) 0 40%, var(--c-surface-2) 50%, var(--c-surface) 60%) 0 0 / 300% 100%; animation: z-skel 1.3s infinite linear; }
@keyframes z-skel { to { background-position: -150% 0; } }
.z-skel--row { height: 60px; margin-bottom: 6px; }
.z-progress { position: fixed; left: 0; top: 0; z-index: 90; height: 3px; width: 0; background: var(--c-accent); transition: width .3s, opacity .3s; opacity: 0; }
.z-progress.is-on { opacity: 1; width: 70%; transition: width 4s cubic-bezier(.1, .7, .2, 1); }
.z-progress.is-done { opacity: 0; width: 100%; transition: width .2s, opacity .4s .2s; }

/* Формы */
.z-field { display: grid; gap: 6px; margin-bottom: 14px; }
.z-field label, .z-field > span { font-weight: 700; font-size: 13.5px; }
.z-input { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text); }
.z-input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-focus); }
textarea.z-input { min-height: 90px; resize: vertical; }
.z-hint { font-size: 13px; color: var(--c-text-muted); }
.z-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.z-plain { list-style: none; margin: 0; padding: 0; }
.z-plain > .z-switch:last-child { border-bottom: 0; }
.z-switch .z-btn { flex: none; }
.z-switch input { width: 46px; height: 26px; accent-color: var(--c-accent); flex: none; }
.z-card-box { padding: 22px; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-border); }
.z-stack > * + * { margin-top: 18px; }

/* Диалоги */
.z-dlg { width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--c-border); border-radius: 20px; background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow); }
.z-dlg::backdrop { background: var(--c-overlay); backdrop-filter: blur(3px); }
.z-dlg__in { padding: 24px; }
.z-dlg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.z-dlg__head h2 { font-size: 20px; }
.z-dlg__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.z-devbox { margin: 12px 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--c-warning); background: var(--c-surface-2); font-size: 13.5px; }
.z-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px clamp(14px, 3vw, 28px) 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--c-warning); background: var(--c-surface-2); font-size: 13.5px; }
.z-notice button { margin-left: auto; }
.z-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.z-devbox code { font-size: 20px; font-weight: 800; letter-spacing: .2em; }
.z-menu { position: fixed; z-index: 80; min-width: 230px; max-width: calc(100vw - 16px); padding: 6px; border-radius: 14px; background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow); }
.z-menu button, .z-menu a { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; text-align: left; font-size: 14.5px; }
.z-menu button:hover, .z-menu a:hover, .z-menu button:focus-visible { background: var(--c-surface-2); color: var(--c-text); outline: none; }
.z-menu hr { border: 0; border-top: 1px solid var(--c-border); margin: 6px 4px; }
.z-menu .z-menu__go { background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; }
.z-menu .z-menu__go:hover, .z-menu .z-menu__go:focus-visible { background: var(--c-accent-hover); color: var(--c-on-accent); }
.z-menu .z-menu__go:focus-visible { outline: 2px solid var(--c-text); outline-offset: -2px; }
.z-pick { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.z-pick button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; }
.z-pick button:hover { background: var(--c-surface-2); }
.z-pick .z-cv { width: 40px; }

.z-toasts { position: fixed; left: 50%; bottom: calc(var(--player-h) + var(--tabs-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.z-toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--c-text); color: var(--c-bg); font-weight: 600; box-shadow: var(--shadow); pointer-events: auto; animation: z-in .2s ease-out; }
.z-toast button { margin-left: auto; flex-shrink: 0; white-space: nowrap; border: 0; background: transparent; color: #01764b; font-weight: 800; min-height: 36px; }
:root[data-theme="light"] .z-toast button { color: #7cf0bf; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .z-toast button { color: #7cf0bf; } }
@keyframes z-in { from { opacity: 0; transform: translateY(8px); } }

/* Плеер */
.z-player {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(var(--player-h) + env(safe-area-inset-bottom)); padding: 0 20px env(safe-area-inset-bottom);
	display: grid; grid-template-columns: minmax(180px, 1fr) minmax(320px, 1.6fr) minmax(180px, 1fr); align-items: center; gap: 20px;
	background: var(--c-bg-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--c-border);
}
.z-player.is-empty .z-pl__ctrl, .z-player.is-empty .z-pl__side { opacity: .45; pointer-events: none; }
.z-pl__now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.z-pl__now .z-cv { width: 56px; flex: none; border-radius: 8px; }
.z-pl__meta { min-width: 0; }
.z-pl__title, .z-pl__artist { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-pl__title { font-weight: 700; }
.z-pl__artist { font-size: 13.5px; color: var(--c-text-muted); }
.z-pl__ctrl { display: grid; gap: 2px; justify-items: center; min-width: 0; }
.z-pl__btns { display: flex; align-items: center; gap: 6px; }
.z-pl__pp { width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--c-text); color: var(--c-bg); transition: transform var(--t-fast); }
.z-pl__pp:hover { transform: scale(1.06); }
.z-pl__pp.is-loading .z-ico { animation: z-spin 1s linear infinite; }
@keyframes z-spin { to { transform: rotate(360deg); } }
.z-pl__seek { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 12px; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.z-pl__seek span { min-width: 40px; text-align: center; }
.z-pl__side { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.z-vol { width: 110px; }
.z-pl__err { grid-column: 1 / -1; }
.z-pl__status { position: absolute; left: 50%; top: -38px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 999px; background: var(--c-danger); color: var(--c-on-danger); font-size: 13.5px; font-weight: 600; white-space: nowrap; max-width: calc(100vw - 24px); box-shadow: var(--shadow); }
.z-pl__status button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(255,255,255,.2); color: #fff; font-weight: 700; }
.z-pl__status.is-info { background: var(--c-surface-3); color: var(--c-text); }
.z-pl__status.is-info button { background: var(--c-surface-2); color: var(--c-text); }

/* range: слайдеры */
.z-range { --p: 0%; flex: 1; min-width: 0; height: 24px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.z-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--c-accent) var(--p), var(--c-surface-3) var(--p)); }
.z-range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--c-surface-3); }
.z-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--c-accent); }
.z-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--c-text); border: 0; opacity: 0; transition: opacity var(--t-fast); }
.z-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--c-text); border: 0; }
.z-range:hover::-webkit-slider-thumb, .z-range:focus-visible::-webkit-slider-thumb { opacity: 1; }
.z-range:focus-visible { outline-offset: 4px; }

/* Мини-плеер и полноэкранный лист (мобильный) */
.z-mini { display: none; }
.z-sheet { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0;
	background: linear-gradient(180deg, hsl(var(--h, 155) 45% 26%), var(--c-bg) 70%); }
.z-sheet__in { display: flex; flex-direction: column; gap: 18px; height: 100%; max-width: 520px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; }
.z-sheet__in > :not(.z-sheet__art) { flex: none; }
/* Верх листа всегда на тёмной части градиента (светлота 26 %) — белый текст и иконки читаются в обеих темах. */
.z-sheet__top { display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 13px; font-weight: 700; }
.z-sheet__top .z-ib { color: #fff; }
.z-sheet__top span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.z-sheet__art { flex: 1 1 auto; min-height: 96px; display: grid; place-items: center; container-type: size; }   /* обложка вписывается в оставшуюся высоту и не налезает на название; на очень низком экране лист прокручивается */
.z-sheet__art .z-cv { width: min(100%, 46vh); width: min(100%, 46dvh, 100cqh); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.z-sheet__meta { display: flex; align-items: center; gap: 10px; }
.z-sheet__meta div { flex: 1; min-width: 0; }
.z-sheet__meta b { display: block; font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-sheet__meta a { color: var(--c-text-muted); }
.z-sheet .z-pl__seek { font-size: 12.5px; }
.z-sheet__btns { display: flex; align-items: center; justify-content: space-between; }
.z-sheet__btns .z-pl__pp { width: 68px; height: 68px; }
.z-sheet__btns > :only-child { margin: 0 auto; }
.z-nobanner { --banner-h: 0px; }

/* Очередь */
.z-queue { width: min(440px, 100vw); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0; border-width: 0 0 0 1px; }
.z-queue .z-dlg__in { display: flex; flex-direction: column; height: 100%; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.z-queue .z-tl { flex: 1; overflow-y: auto; margin: 0 -8px; }
.z-queue .z-tr { grid-template-columns: 48px minmax(0, 1fr) auto; }
.z-q__h { margin: 14px 0 6px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-muted); }
.z-tr.is-drag { opacity: .4; }
.z-tr.is-over { box-shadow: inset 0 2px 0 var(--c-accent); }

/* Мобильные вкладки */
.z-tabbar { display: none; }

/* Трек-страница: блок «текст»/инфо */
.z-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.z-info div { padding: 14px 16px; border-radius: 12px; background: var(--c-surface); }
.z-info dt { font-size: 12.5px; color: var(--c-text-muted); }
.z-info dd { margin: 2px 0 0; font-weight: 700; }
/* ссылка занимает карточку по ширине и до нижнего края (цель ≥ 44 px), текст и раскладка те же */
.z-info dd a { display: block; padding: 11px 16px 14px; margin: -11px -16px -14px; border-radius: 0 0 12px 12px; }

/* Тексты страниц как в legacy: описание, #хештеги, текст песни, служебные страницы */
.z-desc { margin-top: 18px; max-width: 75ch; color: var(--c-text-muted); white-space: pre-line; }
.z-desc a { color: var(--c-text); font-weight: 700; overflow-wrap: anywhere; }
.z-desc a:hover { color: var(--c-accent-text); }
.z-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; color: var(--c-text-muted); }
.z-social a { color: var(--c-text); font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.z-social a:hover { color: var(--c-accent-text); }
.z-comment { max-width: 75ch; margin-top: 14px; }
.z-comment__head { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: var(--c-text-muted); }
.z-comment__name { color: var(--c-text); font-weight: 700; }
.z-comment__text { margin-top: 4px; white-space: pre-line; overflow-wrap: anywhere; }
.z-lyrics { max-width: 60ch; white-space: pre-line; line-height: 1.65; }
.z-prose { max-width: 78ch; }
.z-prose h1 { font-size: clamp(26px, 4vw, 40px); margin-bottom: 18px; }
.z-prose h2 { font-size: 18px; margin: 26px 0 8px; }
.z-prose p, .z-prose ol, .z-prose ul { margin: 0 0 12px; color: var(--c-text-muted); }
.z-prose strong { color: var(--c-text); }
/* Ссылки-«чипы»: жанры, буквы и страницы списка исполнителей, похожие исполнители и альбомы */
.z-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.z-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--c-surface); color: var(--c-text); font-size: 14px; font-weight: 600; }
a.z-chip:hover { background: var(--c-surface-2); color: var(--c-text); }
.z-chip[aria-current] { background: var(--c-accent); color: var(--c-on-accent); }
span.z-chip:not([aria-current]) { color: var(--c-text-muted); }
.z-chips--s .z-chip { min-height: 32px; padding: 0 12px; font-size: 13px; }
/* Все жанры (genres.pug): жанры с поджанрами — карточки в сетке, остальные — плитки */
.z-gsub { margin: 26px 0 12px; font-size: 14px; font-weight: 700; color: var(--c-text-muted); }
.z-sec__head + .z-gsub { margin-top: 0; }
.z-gtree, .z-gtiles { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.z-gtree { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.z-gcard { min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--c-border); border-radius: var(--radius); align-content: start; }
.z-gcard__t { margin-bottom: 10px; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.z-gtree__h { display: inline-block; font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.z-gtiles { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.z-gtile { display: flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: var(--radius-s); background: var(--c-surface); color: var(--c-text); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
a.z-gtile:hover { background: var(--c-surface-2); color: var(--c-text); }
span.z-gtile { color: var(--c-text-muted); }
/* Подвал */
.z-foot { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--c-border); color: var(--c-text-muted); font-size: 13.5px; }
.z-foot__h { margin-bottom: 10px; font-weight: 700; color: var(--c-text); }
.z-foot__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 18px; }
.z-foot__links a { display: inline-flex; align-items: center; min-height: 36px; }
.z-foot__links a:hover { text-decoration: underline; }
.z-foot__copy { margin-top: 6px; }
.z-foot__install { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; color: var(--c-accent-text); font: inherit; cursor: pointer; }
.z-foot__install:hover { text-decoration: underline; }
html[data-pwa="installed"] [data-app-install] { display: none; }
.z-install__steps { margin: 0 0 10px; padding-left: 20px; line-height: 1.5; }
.z-install__note { margin: 0; color: var(--c-text-muted); font-size: 13.5px; }
@media (max-width: 767px) {
	.z-chip, .z-chips--s .z-chip, .z-foot__links a, .z-foot__install, .z-gtree__h { min-height: 44px; }
	.z-chip { min-width: 44px; justify-content: center; }
	.z-gtree__h { display: inline-flex; align-items: center; min-width: 44px; }
	.z-gtiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
}

/* ===== Адаптив ===== */
@media (max-width: 1180px) {
	:root { --side-w: 84px; }
	.z-side { padding: 18px 10px; align-items: center; }
	.z-logo { padding: 4px 0 18px; }
	.z-logo span:not(.z-logo__mark), .z-nav__h, .z-side__pl, .z-side__foot { display: none; }
	.z-nav a { width: 56px; justify-content: center; padding: 0; }
	.z-nav a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.z-player { grid-template-columns: minmax(160px, 1fr) minmax(280px, 1.5fr) auto; }
	.z-vol { width: 84px; }
	.z-hero__art { width: 170px; height: 180px; }
	.z-hero__art .z-cv { width: 120px; }
	.z-tr { grid-template-columns: 44px 48px minmax(0, 1fr) auto auto; }
	.z-tr__album { display: none; }
}
@media (max-width: 900px) {
	.z-vol, .z-pl__side .z-ib--vol-hide { display: none; }
}
@media (max-width: 767px) {
	:root { --top-h: 58px; --player-h: 64px; --tabs-h: 60px; --banner-h: 26px; }
	body { font-size: 15px; }
	.z-banner { font-size: 11.5px; }
	.z-app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
	.z-side { display: none; }
	.z-top { padding: 0 12px; gap: 8px; }
	.z-top .z-logo { display: flex; }
	.z-top .z-logo span:not(.z-logo__mark) { display: none; }
	.z-search { max-width: none; }
	.z-search__box { height: 46px; }   /* рамка 1 px съедает 2 px — само поле 44 */
	.z-top__right .z-hide-m { display: none; }
	.z-main { padding: 18px 14px calc(var(--player-h) + var(--tabs-h) + 40px + env(safe-area-inset-bottom)); }
	.z-player { display: none; }
	.z-mini {
		position: fixed; left: 8px; right: 8px; bottom: calc(var(--tabs-h) + 6px + env(safe-area-inset-bottom)); z-index: 50; height: var(--player-h);
		display: flex; align-items: center; gap: 10px; padding: 0 4px 0 8px; border-radius: 14px; overflow: hidden;
		background: var(--c-surface-2); box-shadow: var(--shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	}
	.z-mini.is-empty { display: none; }
	.z-mini__open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 100%; border: 0; padding: 0; background: transparent; text-align: left; }
	.z-mini .z-cv { width: 46px; flex: none; border-radius: 8px; }
	.z-mini__bar { position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--c-surface-3); }
	.z-mini__bar i { display: block; height: 100%; width: 0; background: var(--c-accent); }
	.z-mini .z-pl__status { top: -44px; }
	.z-tabbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
		display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--c-bg-2); border-top: 1px solid var(--c-border);
	}
	.z-tabbar [data-slot] { display: contents; }   /* «Моя музыка» появляется после входа — вкладки делят ширину поровну */
	.z-tabbar a { display: grid; justify-items: center; align-content: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--c-text-muted); }
	.z-tabbar a[aria-current="page"] { color: var(--c-accent-text); }
	.z-hero { grid-template-columns: 1fr; padding: 24px 20px; min-height: 0; border-radius: 18px; }
	.z-hero__art { display: none; }
	.z-sec { margin-top: 30px; }
	.z-sec__head h2 { font-size: 19px; }
	.z-sec__head { flex-wrap: wrap; align-items: flex-start; }
	.z-sec__head > div { flex: 1 1 auto; min-width: 0; }
	.z-row { grid-auto-columns: minmax(132px, 42vw); gap: 14px; }
	.z-grid { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 16px; }
	.z-tl--cols { columns: 1; }
	.z-tr { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; padding: 4px; }
	.z-tl--cols .z-tr { grid-template-columns: 44px minmax(0, 1fr) auto; }
	.z-tr__n { display: none; }
	.z-tl--pos .z-tr__n { display: grid; }
	.z-tl--pos.z-tl--cols .z-tr, .z-tl--pos .z-tr { grid-template-columns: 44px 44px minmax(0, 1fr) auto; }
	.z-tr .z-cv { width: 44px; }
	.z-tr .z-tr__cvbtn { display: block; }
	.z-tr__dur, .z-tr__act .z-ib--like { display: none; }
	.z-head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; padding: 20px 14px; }
	.z-head .z-cv { width: min(220px, 62vw); }
	.z-head__meta, .z-head__act { justify-content: center; }
	.z-head--track .z-head__k, .z-head--track h1 { margin-right: 0; }
	.z-head__like { top: 4px; right: 4px; }
	.z-toasts { bottom: calc(var(--player-h) + var(--tabs-h) + 20px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
	.z-top .z-logo { display: none; }
	.z-main { padding-left: 10px; padding-right: 10px; }
	.z-row { grid-auto-columns: minmax(120px, 44vw); }
}
@media (max-width: 359px) {
	.z-mini .z-ib--like { display: none; }   /* ♥ есть в полноэкранном листе — ширина отдаётся названию */
}
@media (min-width: 1700px) {
	.z-main { padding-left: 48px; padding-right: 48px; }
	.z-row { grid-auto-columns: minmax(170px, 200px); }
}
.z-tr__cvbtn { position: relative; display: block; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; border-radius: 6px; }
@media (max-width: 767px) {
	.z-tr__cvbtn { display: block; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; border-radius: 6px; }
	.z-tr__cvbtn .z-cv { width: 44px; }
	.z-tr.is-current .z-tr__cvbtn::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302b875'%3E%3Cpath d='M4 14h3v6H4zm6-8h3v14h-3zm6 4h3v10h-3z'/%3E%3C/svg%3E") center / 22px no-repeat; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
	.z-range { appearance: auto; }
	.z-btn, .z-ib, .z-pl__pp, .z-bigplay { border: 1px solid ButtonText; }
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.z-top { background: color-mix(in srgb, var(--c-bg) 88%, transparent); }
	.z-search__box:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent); }
	.z-tag { background: color-mix(in srgb, var(--c-accent) 16%, transparent); }
	.z-tag--warn { background: color-mix(in srgb, var(--c-warning) 22%, transparent); }
	.z-tr.is-current { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
	.z-bigplay { box-shadow: 0 10px 24px color-mix(in srgb, var(--c-accent) 35%, transparent); }
	.z-error { background: color-mix(in srgb, var(--c-danger) 14%, transparent); }
	.z-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent); }
	.z-devbox, .z-notice { background: color-mix(in srgb, var(--c-warning) 10%, transparent); }
	.z-player { background: color-mix(in srgb, var(--c-bg-2) 94%, transparent); }
	@media (max-width: 767px) { .z-mini { background: color-mix(in srgb, var(--c-surface-2) 96%, transparent); } }
}
.z-intro { max-width: 78ch; margin: 0 0 20px; color: var(--c-text-muted); font-size: 15px; line-height: 1.55; }
.z-about p { max-width: 78ch; margin: 0 0 10px; color: var(--c-text-muted); line-height: 1.6; }
.z-foot-site { margin-top: 36px; }
.z-foot-site .z-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.7fr) minmax(0, .9fr) minmax(0, 1fr); gap: 14px 24px; margin-top: 0; padding: 20px 0 6px; border-top: 1px solid var(--c-border); font-size: 14px; }
.z-foot-site .z-foot__name { display: inline-flex; align-items: center; min-height: 36px; color: var(--c-text); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.z-foot-site .z-foot__tag { max-width: 28ch; margin: 0; line-height: 1.4; }
.z-foot-site .z-foot__h { margin: 0 0 4px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.z-foot-site .z-foot__list { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0; padding: 0; list-style: none; }
.z-foot-site .z-foot__list a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 8px 0 0; color: var(--c-text-muted); overflow-wrap: anywhere; }
.z-foot-site .z-foot__col:nth-of-type(1) .z-foot__list, .z-foot-site .z-foot__col:nth-of-type(3) .z-foot__list { flex-direction: column; flex-wrap: nowrap; }
.z-foot-site .z-foot__col:nth-of-type(2) .z-foot__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.z-foot-site .z-foot__list a:hover { color: var(--c-text); text-decoration: underline; }
.z-foot-site .z-foot__role { display: block; font-size: 12.5px; line-height: 1.35; }
.z-foot-site .z-foot__col:last-of-type .z-foot__list a { color: var(--c-accent-text); }
.z-foot-site .z-foot__rights { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; padding-top: 8px; border-top: 1px solid var(--c-border); }
.z-foot-site .z-foot__rights p { max-width: 82ch; margin: 0; line-height: 1.45; }
.z-foot-site .z-foot__rights a { display: inline-flex; align-items: center; min-height: 32px; color: var(--c-accent-text); font-weight: 600; }
.z-foot-site .z-foot__rights a:hover { text-decoration: underline; }
.z-foot-site .z-foot__copy { grid-column: 1 / -1; margin: -6px 0 0; font-size: 12.5px; }
@media (max-width: 1100px) {
	.z-foot-site .z-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.z-foot-site .z-foot__brand, .z-foot-site .z-foot__col:nth-of-type(2) { grid-column: 1 / -1; }
	.z-foot-site .z-foot__col:nth-of-type(2) .z-foot__list { display: flex; }
}
@media (max-width: 767px) {
	.z-foot-site .z-foot { gap: 10px 14px; padding-top: 16px; }
	.z-foot-site .z-foot__brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
	.z-foot-site .z-foot__name { min-height: 44px; }
	.z-foot-site .z-foot__tag { max-width: none; font-size: 13px; }
	.z-foot-site .z-foot__list a { min-height: 44px; padding-right: 10px; }
	.z-foot-site .z-foot__col:nth-of-type(1) .z-foot__list, .z-foot-site .z-foot__col:nth-of-type(3) .z-foot__list { flex-direction: row; flex-wrap: wrap; }
	.z-foot-site .z-foot__col:nth-of-type(1) { grid-column: 1 / -1; }
	.z-foot-site .z-foot__rights a { min-height: 44px; }
	.z-foot-site .z-foot__copy { margin-top: -10px; }
}
.z-ggroup + .z-ggroup { margin-top: 28px; }
.z-more { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 18px 0 4px; }
.z-more__btn { min-width: min(100%, 260px); min-height: 44px; }
.z-more__status { margin: 0; min-height: 1.4em; color: var(--c-text-muted); font-size: 13.5px; text-align: center; }
.z-gcard .z-gtree__h { overflow-wrap: anywhere; }