/* Svitanok Player — «світанок»: обкладинка світиться власним кольором, як сонце над обрієм.
   Телефон: обкладинка на всю ширину, під нею трек і керування. Комп'ютер: велика обкладинка зліва. */

.svp {
	--svp-ink: #1c2541;        /* нічне небо перед світанком */
	--svp-muted: #5d6680;
	--svp-line: #e2e5ee;
	--svp-surface: #ffffff;
	--svp-sunk: #f3f5f9;
	--svp-gold: #e8a33d;       /* перший промінь */
	--svp-rose: #f2b8a2;
	--svp-on-gold: #1c2541;
	--svp-focus: #c9821c;
	--svp-ok: #2f7a4f;
	--svp-err: #b3402a;
	--svp-radius: 18px;
	--svp-tint: 232 163 61;    /* колір обкладинки (задає скрипт) */
	--svp-wash: .16;

	container-type: inline-size;
	box-sizing: border-box;
	position: relative;
	width: 100%;              /* інакше у flex-контейнерах (Elementor) плеєр може стиснутися до нуля */
	max-width: none;          /* на всю ширину блоку сайту */
	margin: 0 auto;
	padding: 0;
	background:
		linear-gradient(180deg, rgb(var(--svp-tint) / var(--svp-wash)) 0, transparent 560px)
		var(--svp-surface);
	color: var(--svp-ink);
	border: 1px solid var(--svp-line);
	border-radius: var(--svp-radius);
	overflow: hidden;
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
}

.svp--dark {
	--svp-ink: #eef1f8;
	--svp-muted: #a7b0c8;
	--svp-line: #2c3758;
	--svp-surface: #18213a;
	--svp-sunk: #1f2a48;
	--svp-on-gold: #18213a;
	--svp-focus: #f0b860;
	--svp-ok: #7fd1a0;
	--svp-err: #ff9b85;
	--svp-wash: .26;
}

@media (prefers-color-scheme: dark) {
	.svp--auto {
		--svp-ink: #eef1f8;
		--svp-muted: #a7b0c8;
		--svp-line: #2c3758;
		--svp-surface: #18213a;
		--svp-sunk: #1f2a48;
		--svp-on-gold: #18213a;
		--svp-focus: #f0b860;
		--svp-ok: #7fd1a0;
		--svp-err: #ff9b85;
		--svp-wash: .26;
	}
}

/* Сторінка застосунку: плеєр без рамки, на всю ширину екрана */
.svp--app {
	max-width: none;
	border: 0;
	border-radius: 0;
	min-height: 100%;
}
@container (max-width: 599px) {
	/*
	 * Застосунок на телефоні: усе на одному екрані, без гортання, і рівновага на будь-якій висоті.
	 * Три групи: обкладинка · плеєр (назва, прогрес, кнопка) · допоміжне (Далі в ефірі, кнопки).
	 * Вільне місце розподіляється між групами, а допоміжне опускається ближче до пальця.
	 */
	.svp--app .svp-stage {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: clamp(12px, 2.5vh, 24px) 20px clamp(12px, 2vh, 20px);
	}
	.svp--app .svp-art { max-width: min(250px, 30vh); flex: none; align-self: center; }
	.svp--app .svp-meta {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.svp--app .svp-track { margin-top: clamp(14px, 3.2vh, 32px); }
	.svp--app .svp-progress { margin-top: clamp(12px, 2.2vh, 20px); }
	.svp--app .svp-controls { margin-top: clamp(10px, 2vh, 18px); }
	.svp.svp--app .svp-play { width: clamp(60px, 8.5vh, 72px); height: clamp(60px, 8.5vh, 72px); }
	.svp--app .svp-next { margin-top: auto; }
	.svp--app .svp-next { margin-bottom: 12px; }
	.svp--app .svp-next[hidden] + .svp-toggles { margin-top: auto; }
	.svp--app .svp-controls { margin-bottom: clamp(20px, 3.5vh, 36px); }

	/* Низький екран (невеликі телефони) — компактніше, щоб нічого не ховалося під нижньою смугою */
	@media (max-height: 680px) {
		.svp--app .svp-art { max-width: 160px; }
		.svp--app .svp-track { margin-top: 10px; }
		.svp--app .svp-progress { margin-top: 8px; }
		.svp--app .svp-controls { margin-top: 6px; margin-bottom: 14px; }
		.svp--app .svp-next { margin-bottom: 10px; }
	}
}

.svp *,
.svp *::before,
.svp *::after { box-sizing: border-box; }

.svp p,
.svp ol,
.svp ul { margin: 0; padding: 0; }
.svp ol,
.svp ul { list-style: none; }
.svp [hidden] { display: none !important; }

.svp .svp-sr,
.svp .svp-hp {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Скидання стилів теми для кнопок і полів усередині плеєра */
.svp button,
.svp input,
.svp textarea {
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	margin: 0;
	min-height: 0;
	line-height: 1.3;
}
.svp button {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	width: auto;
}
.svp button:focus:not(:focus-visible),
.svp input:focus:not(:focus-visible) { outline: none; }
.svp :focus-visible {
	outline: 2px solid var(--svp-focus);
	outline-offset: 3px;
}

/* ---------- Сцена ---------- */

.svp-stage {
	position: relative;
	isolation: isolate;
	display: grid;
	gap: 20px;
	padding: 20px 20px 18px;
}

.svp-art {
	position: relative;
	width: 100%;
	max-width: min(300px, 36vh); /* телефон: щоб «Далі в ефірі» вміщалося на екрані */
	justify-self: center;
}
/* сяйво за обкладинкою */
.svp-art::before {
	content: "";
	position: absolute;
	inset: 10% 8% -4%;
	z-index: -1;
	border-radius: 40%;
	background: rgb(var(--svp-tint));
	filter: blur(34px);
	opacity: .28;
	transition: opacity 1.6s ease, background-color 1.2s ease;
	pointer-events: none;
}
.svp[data-state="playing"] .svp-art::before { opacity: .55; }
.svp.is-offline .svp-art::before { opacity: .08; }

.svp-cover {
	position: relative;
	aspect-ratio: 1;
	border-radius: 14px;
	overflow: hidden;
	background: var(--svp-sunk);
	box-shadow: 0 22px 44px -24px rgba(28, 37, 65, .6);
}
.svp-cover img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: opacity .18s ease;
}
/* Немає обкладинки — показуємо логотип-сонце без рамки й фону, майже на всю площу */
.svp:not(.has-art) .svp-cover {
	/* золоте небо, як у логотипі (поки малюється сцена або без JS) */
	background:
		radial-gradient(120% 90% at 40% 65%, #fffbe9 0%, #fde27a 25%, #f9bf1c 62%, #f0a800 100%);
}
.svp.is-swapping .svp-cover img { opacity: 0; transform: scale(.97); }
.svp-cover img { transition: opacity .3s ease, transform .3s ease; }

/* «Сонце, що сходить» замість логотипу, коли в треку немає обкладинки */
.svp-viz { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.svp:not(.has-art) .svp-viz { display: block; }
.svp:not(.has-art) .svp-cover img { opacity: 0; }

/* Плавна зміна треку */
.svp-track,
.svp-next-text,
.svp-next-cover { transition: opacity .26s ease, transform .26s ease; }
.svp.is-trk-out .svp-track { opacity: 0; transform: translateY(6px); }
.svp-next.is-out .svp-next-text,
.svp-next.is-out .svp-next-cover { opacity: 0; transform: translateY(4px); }

.svp-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--svp-gold);
	display: inline-block;
	flex: none;
}
.svp.is-offline .svp-dot { background: #a7b0c8; }

@keyframes svp-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(232, 163, 61, .7); }
	50%      { box-shadow: 0 0 0 5px rgba(232, 163, 61, 0); }
}

.svp-meta {
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* довгі вкладки й назви не розпирають колонку */
	gap: 16px;
	align-content: center;
}

.svp .svp-title {
	font-size: clamp(1.3rem, 6.2cqi, 1.8rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--svp-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.svp .svp-artist {
	margin-top: 4px;
	font-size: 16px;
	color: var(--svp-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Прогрес треку ---------- */

.svp-bar {
	position: relative;
	height: 4px;
	border-radius: 4px;
	background: rgb(var(--svp-tint) / .22);
	background: color-mix(in srgb, var(--svp-ink) 14%, transparent);
	overflow: hidden;
}
.svp-bar-fill {
	position: absolute;
	inset: 0;
	background: var(--svp-ink);
	border-radius: inherit;
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 1s linear;
}
.svp-times {
	display: flex;
	justify-content: space-between;
	margin-top: 7px;
	font-size: 12.5px;
	color: var(--svp-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------- Керування: слухачі · кнопка · гучність ---------- */

.svp-controls {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "lis play vol";
	align-items: center;
	gap: 12px;
}

.svp .svp-play {
	grid-area: play;
	position: relative;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	border: 0;
	background: var(--svp-gold);
	color: var(--svp-on-gold);
	display: grid;
	place-items: center;
	box-shadow: 0 10px 22px -10px rgba(201, 130, 28, .8);
	transition: transform .15s ease, background-color .15s ease;
}
.svp .svp-play:hover { background: #f0b252; transform: scale(1.05); }
/* Стан ефіру — на самій кнопці: коли грає, всередині пульсує тонкий білий контур */
.svp .svp-play::after {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .95);
	opacity: 0;
	pointer-events: none;
}
.svp[data-state="playing"] .svp-play::after { animation: svp-ring 1.8s ease-in-out infinite; }
@keyframes svp-ring {
	0%, 100% { opacity: .95; transform: scale(1); }
	50%      { opacity: .25; transform: scale(.86); }
}
/* Ефір недоступний — кнопка сіра */
.svp.is-offline .svp-play { background: var(--svp-line); color: var(--svp-muted); box-shadow: none; }
.svp .svp-play:active { transform: scale(.96); }
.svp .svp-play svg { width: 30px; height: 30px; fill: currentColor; stroke: currentColor; grid-area: 1 / 1; }
.svp .svp-play .svp-i-play { stroke: none; } /* трикутник оптично по центру кола: рамка трохи правіше центру, центр ваги трохи лівіше */
.svp .svp-play .svp-i-pause { stroke: none; }
.svp .svp-play .svp-i-load { fill: none; animation: svp-spin 1s linear infinite; }
.svp .svp-i-pause,
.svp .svp-i-load { display: none; }
.svp[data-state="playing"] .svp-i-play,
.svp[data-state="loading"] .svp-i-play,
.svp[data-state="retry"] .svp-i-play { display: none; }
.svp[data-state="playing"] .svp-i-pause { display: block; }
.svp[data-state="loading"] .svp-i-load,
.svp[data-state="retry"] .svp-i-load { display: block; }

@keyframes svp-spin { to { transform: rotate(360deg); } }

.svp .svp-listeners {
	grid-area: lis;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	font-size: 14px;
	color: var(--svp-muted);
	white-space: nowrap;
}
.svp-listeners-n { overflow: hidden; text-overflow: ellipsis; }
.svp-listeners svg { width: 18px; height: 18px; flex: none; fill: currentColor; stroke: currentColor; }

.svp-vol {
	grid-area: vol;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--svp-muted);
}
.svp .svp-mute {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--svp-muted);
	transition: background-color .15s ease, color .15s ease;
}
.svp .svp-mute:hover { background: var(--svp-sunk); color: var(--svp-ink); }
.svp-mute svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; }
.svp-mute .svp-wave,
.svp-mute .svp-x { fill: none; }
.svp-mute .svp-x,
.svp.is-muted .svp-mute .svp-wave { display: none; }
.svp.is-muted .svp-mute .svp-x { display: block; }

.svp .svp-vol-range {
	-webkit-appearance: none;
	appearance: none;
	width: 96px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--svp-ink) var(--svp-fill, 80%), var(--svp-line) var(--svp-fill, 80%));
	cursor: pointer;
}
.svp .svp-vol-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--svp-surface);
	border: 2px solid var(--svp-ink);
}
.svp .svp-vol-range::-moz-range-thumb {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--svp-surface);
	border: 2px solid var(--svp-ink);
}
/* На телефонах гучність — кнопками телефону, тож лишаємо тільки «без звуку».
   Повзунок — лише з мишкою і коли є місце. */
.svp .svp-vol-range { display: none; }
@container (min-width: 760px) {
	.svp .svp-vol-range { display: block; }
}
@media (pointer: coarse) {
	.svp .svp-vol-range { display: none !important; }
}

/* ---------- Далі в ефірі ---------- */

.svp-next {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 12px;
	align-items: center;
	padding: 9px 12px 9px 9px;
	border-radius: 12px;
	background: var(--svp-sunk);
	background: color-mix(in srgb, var(--svp-surface) 70%, var(--svp-sunk));
	border: 1px solid var(--svp-line);
}
.svp .svp-next-cover {
	width: 44px;
	height: 44px;
	border-radius: 7px;
	object-fit: cover;
	background: var(--svp-sunk);
	display: block;
	margin: 0;
	max-width: none;
}
.svp .svp-next-cover.is-logo { object-fit: contain; padding: 5px; }
.svp-next-text { min-width: 0; display: flex; flex-direction: column; }
.svp-next-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--svp-muted);
}
.svp-next-song {
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.svp-next-title { font-weight: 600; }
.svp-next-artist { color: var(--svp-muted); }

/* ---------- Кнопки: Щойно звучало · Розклад · Замовити пісню ---------- */

.svp-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.svp .svp-chip {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	padding: 8px 14px;
	border: 1px solid var(--svp-line);
	border-radius: 999px;
	background: var(--svp-surface);
	color: var(--svp-ink);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(28, 37, 65, .06);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.svp .svp-chip:hover {
	border-color: var(--svp-gold);
	background: var(--svp-sunk);
	color: var(--svp-ink);
	text-decoration: none;
}
.svp .svp-chip svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; }
.svp .svp-chip .svp-chev { width: 15px; height: 15px; margin-left: -2px; opacity: .7; transition: transform .2s ease; }
.svp .svp-toggle[aria-expanded="true"] {
	background: var(--svp-ink);
	border-color: var(--svp-ink);
	color: var(--svp-surface);
}
.svp .svp-toggle[aria-expanded="true"] .svp-chev { transform: rotate(180deg); }

.svp-panel { padding: 2px 0 0; min-width: 0; }

/* ---------- Спливні вікна ---------- */

html.svp-noscroll { overflow: hidden; }

.svp .svp-dialog {
	box-sizing: border-box;
	position: fixed;
	width: min(560px, calc(100vw - 32px));
	max-width: none;
	max-height: min(82vh, 760px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var(--svp-surface);
	color: var(--svp-ink);
	box-shadow: 0 30px 70px -20px rgba(10, 14, 28, .55);
	overflow: hidden;
	flex-direction: column;
}
.svp .svp-dialog[open] { display: flex; animation: svp-pop .22s cubic-bezier(.2, .8, .2, 1); }
.svp .svp-dialog::backdrop { background: rgba(10, 14, 28, .55); }
@keyframes svp-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.svp-dlg-head {
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 12px 12px 20px;
	border-bottom: 1px solid var(--svp-line);
}
.svp .svp-dlg-title {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--svp-ink);
}
.svp .svp-dlg-title svg { width: 22px; height: 22px; stroke: var(--svp-gold); fill: none; flex: none; }
.svp .svp-dlg-close {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--svp-muted);
}
.svp .svp-dlg-close:hover { background: var(--svp-sunk); color: var(--svp-ink); }
.svp .svp-dlg-close svg { width: 22px; height: 22px; stroke: currentColor; }
.svp-dlg-body {
	flex: 1 1 auto;  /* не «flex: 1»: старіший Safari на iPhone стискає таке тіло вікна до нуля */
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 20px 20px;
}
.svp-dialog .svp-sched-list { max-height: none; overflow: visible; }

/* Телефон: вікно виїжджає знизу */
@media (max-width: 600px) {
	.svp .svp-dialog {
		width: 100%;
		max-height: 88vh;
		margin: auto 0 0;
		border-radius: 22px 22px 0 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.svp .svp-dialog[open] { animation: svp-up .26s cubic-bezier(.2, .8, .2, 1); }
	.svp-dlg-body { padding: 4px 16px 18px; }
	.svp-dialog .svp-week { margin: 0 -16px; padding: 10px 16px 10px; }
}
@keyframes svp-up { from { transform: translateY(100%); } }

/* Без підтримки вікон — вміст під кнопками */
.svp .svp-dialog.is-inline { position: static; display: block; width: auto; max-height: none; box-shadow: none; border-radius: 0; background: none; }
.svp .svp-dialog.is-inline .svp-dlg-head { display: none; }
.svp .svp-dialog.is-inline .svp-dlg-body { padding: 4px 0 0; }

/* ---------- Розклад ---------- */

/* Стрічка днів тижня */
.svp-week {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding: 4px 1px 10px;
	scrollbar-width: none;
}
.svp-week::-webkit-scrollbar { display: none; }
.svp .svp-wday {
	flex: none;
	min-width: 58px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 7px 12px 8px;
	border-radius: 14px;
	border: 1px solid var(--svp-line);
	background: var(--svp-surface);
	color: var(--svp-muted);
	line-height: 1.15;
}
.svp-wday-n { font-size: 12.5px; font-weight: 600; }
.svp-wday-d { font-size: 19px; font-weight: 700; color: var(--svp-ink); font-variant-numeric: tabular-nums; }
.svp .svp-wday:hover { border-color: var(--svp-gold); background: var(--svp-sunk); }
.svp .svp-wday[aria-selected="true"] { background: var(--svp-ink); border-color: var(--svp-ink); color: var(--svp-surface); }
.svp .svp-wday[aria-selected="true"] .svp-wday-d { color: var(--svp-surface); }
.svp .svp-wday.is-today:not([aria-selected="true"]) { border-color: var(--svp-gold); }

.svp .svp-day-label { margin: 6px 0 8px; font-size: 13px; font-weight: 700; color: var(--svp-muted); text-transform: uppercase; letter-spacing: .05em; }

/* Частини доби */
.svp-part { margin-bottom: 10px; border: 1px solid var(--svp-line); border-radius: 14px; background: var(--svp-surface); overflow: hidden; }
.svp .svp-part-h {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	background: var(--svp-sunk);
	color: var(--svp-ink);
	text-align: left;
}
.svp .svp-part-h:hover { background: var(--svp-sunk); }
.svp-part-name { font-weight: 700; font-size: 15.5px; }
.svp-part-range { color: var(--svp-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.svp-part-count { margin-left: auto; color: var(--svp-muted); font-size: 13px; }
.svp .svp-part-h .svp-chev { width: 16px; height: 16px; stroke: currentColor; color: var(--svp-muted); transition: transform .2s ease; flex: none; }
.svp .svp-part-h[aria-expanded="true"] .svp-chev { transform: rotate(180deg); }
.svp-part.is-past .svp-part-name { color: var(--svp-muted); }

.svp-sched-list { padding: 4px 6px 6px !important; }
.svp-s-item {
	display: grid;
	grid-template-columns: 3.3em 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 9px 8px;
	border-radius: 10px;
}
.svp-s-item + .svp-s-item { border-top: 1px solid var(--svp-line); }
.svp-s-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.svp-s-title { min-width: 0; overflow-wrap: anywhere; }
.svp-s-item.is-bold .svp-s-title { font-weight: 700; }
.svp-s-item.is-bold .svp-s-time { color: #b7791f; }
.svp--dark .svp-s-item.is-bold .svp-s-time { color: var(--svp-gold); }
.svp-s-item.is-past { opacity: .45; }
.svp-s-item.is-next {
	background: rgb(232 163 61 / .14);
	box-shadow: inset 3px 0 0 var(--svp-gold);
	border-top-color: transparent;
}
.svp-s-item.is-next .svp-s-title { font-weight: 700; }
/* Лінія «зараз» між минулим і наступним */
.svp-now-line {
	position: relative;
	height: 22px;
	margin: 2px 0;
	list-style: none;
}
.svp-now-line::before {
	content: "";
	position: absolute;
	left: 8px; right: 8px; top: 50%;
	height: 2px;
	border-radius: 2px;
	background: var(--svp-gold);
}
.svp-now-line span {
	position: absolute;
	left: 8px; top: 50%;
	transform: translateY(-50%);
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--svp-gold);
	color: var(--svp-on-gold);
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.svp-now-line + .svp-s-item { border-top-color: transparent; }
.svp-s-badge {
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.svp-s-item.is-next .svp-s-badge { background: var(--svp-gold); color: var(--svp-on-gold); }

/* Картка «Зараз в ефірі» (сторінка розкладу) */
.svp-now-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin-bottom: 16px;
	padding: 18px 20px;
	border-radius: 16px;
	background:
		radial-gradient(120% 140% at 0% 0%, rgb(232 163 61 / .28), transparent 60%),
		var(--svp-ink);
	color: #fff;
}
.svp-now-main { min-width: 0; flex: 1 1 260px; }
.svp .svp-now-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffd28c; }
.svp-now-card .svp-dot { animation: svp-pulse 2s ease-in-out infinite; }
.svp .svp-now-title { margin-top: 4px; font-size: clamp(1.2rem, 3.4cqi, 1.55rem); font-weight: 700; line-height: 1.25; color: #fff; }
.svp .svp-now-since { margin-top: 2px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.svp-now-side { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.svp .svp-now-next { display: flex; flex-direction: column; font-size: 14px; color: rgba(255, 255, 255, .8); max-width: 260px; }
.svp-now-next-l { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.svp-now-next-t { font-weight: 600; color: #fff; }
.svp .svp-now-listen {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px 11px 14px;
	border-radius: 999px;
	background: var(--svp-gold);
	color: #1c2541;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.svp .svp-now-listen:hover { background: #f0b252; color: #1c2541; text-decoration: none; }
.svp-now-listen svg { width: 18px; height: 18px; fill: currentColor; }

/* У спливному вікні стрічка днів лишається вгорі */
.svp-dialog .svp-week { position: sticky; top: -6px; z-index: 1; margin: 0 -20px; padding: 10px 20px 10px; background: var(--svp-surface); box-shadow: 0 1px 0 var(--svp-line); }

/* Окрема сторінка розкладу (шорткод) */
.svp-sched-page { padding: 18px 20px 20px; }
@container (max-width: 480px) {
	.svp-sched-page { padding: 14px; }
	.svp-s-item { grid-template-columns: 3.1em 1fr; gap: 4px 10px; }
	.svp-s-badge { grid-column: 2; justify-self: start; }
}

/* ---------- Історія ---------- */

.svp-h-item {
	display: grid;
	grid-template-columns: 3.1em 44px 1fr;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--svp-line);
}
.svp-h-item:last-child { border-bottom: 0; }
.svp-h-time {
	font-size: 14px;
	color: var(--svp-muted);
	font-variant-numeric: tabular-nums;
}
.svp .svp-h-cover {
	width: 44px;
	height: 44px;
	border-radius: 7px;
	object-fit: cover;
	background: var(--svp-sunk);
	display: block;
	margin: 0;
}
.svp .svp-h-cover.is-logo { object-fit: contain; padding: 6px; }
.svp-h-text { min-width: 0; display: flex; flex-direction: column; }
.svp-h-title,
.svp-h-artist {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.svp-h-title { font-weight: 600; font-size: 15px; }
.svp-h-artist { font-size: 14px; color: var(--svp-muted); }

.svp .svp-empty {
	padding: 14px 0 4px;
	color: var(--svp-muted);
	font-size: 15px;
}

/* ---------- Форма замовлення ---------- */

.svp-form { padding-top: 12px; display: grid; gap: 14px; max-width: 520px; }
.svp-field { display: grid; gap: 6px; position: relative; }
.svp-field > label { font-size: 14px; font-weight: 600; }
.svp-opt { font-weight: 400; color: var(--svp-muted); margin-left: 4px; }

.svp .svp-field input,
.svp .svp-field textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--svp-line);
	border-radius: 10px;
	background: var(--svp-surface);
	color: var(--svp-ink);
	font-size: 16px; /* без автозбільшення на iPhone */
	outline: none;
}
.svp .svp-field textarea { resize: vertical; min-height: 84px; }
.svp .svp-field input:focus,
.svp .svp-field textarea:focus { border-color: var(--svp-focus); box-shadow: 0 0 0 3px rgba(232, 163, 61, .25); }
.svp .svp-field input::placeholder,
.svp .svp-field textarea::placeholder { color: var(--svp-muted); opacity: .8; }

.svp-results {
	position: absolute;
	top: 100%;
	left: 0; right: 0;
	z-index: 5;
	margin-top: 4px !important;
	max-height: 280px;
	overflow-y: auto;
	background: var(--svp-surface);
	border: 1px solid var(--svp-line);
	border-radius: 10px;
	box-shadow: 0 14px 30px -14px rgba(28, 37, 65, .35);
}
.svp-results:empty { display: none; }
.svp-r-item,
.svp-r-empty { padding: 10px 13px; display: flex; flex-direction: column; }
.svp-r-item { cursor: pointer; border-bottom: 1px solid var(--svp-line); }
.svp-r-item:last-child { border-bottom: 0; }
.svp-r-item:hover,
.svp-r-item[aria-selected="true"] { background: var(--svp-sunk); }
.svp-r-title { font-weight: 600; }
.svp-r-artist,
.svp-r-empty { font-size: 14px; color: var(--svp-muted); }

.svp-picked {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 13px;
	border-radius: 10px;
	background: var(--svp-sunk);
	border: 1px solid var(--svp-line);
}
.svp-picked-text { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.svp .svp-unpick { font-size: 14px; color: var(--svp-muted); text-decoration: underline; text-underline-offset: 3px; }
.svp .svp-unpick:hover { color: var(--svp-ink); background: none; }

.svp .svp-submit {
	justify-self: start;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--svp-ink);
	color: var(--svp-surface);
	font-weight: 600;
	font-size: 15px;
	transition: opacity .15s ease;
}
.svp .svp-submit:hover { background: var(--svp-ink); color: var(--svp-surface); opacity: .88; }
.svp .svp-submit:disabled { opacity: .55; cursor: progress; }

.svp-note { font-size: 15px; min-height: 1.4em; }
.svp-note.is-ok { color: var(--svp-ok); }
.svp-note.is-error { color: var(--svp-err); }

/* ---------- Ширина контейнера ---------- */

/* Комп'ютер і планшет: велика обкладинка зліва */
@container (min-width: 600px) {
	.svp-stage {
		grid-template-columns: minmax(240px, 40%) 1fr;
		gap: 32px;
		align-items: center;
		padding: 28px;
	}
	.svp-art { max-width: 340px; }
	.svp-meta { gap: 18px; }
	.svp .svp-title { font-size: clamp(1.4rem, 3.6cqi, 2rem); }
	.svp-controls {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "play lis vol";
		gap: 18px;
	}
	.svp-toggles { justify-content: flex-start; }
	.svp .svp-chip { flex: 0 1 auto; }
}

@container (min-width: 820px) {
	.svp-stage { grid-template-columns: 340px 1fr; gap: 40px; padding: 32px; }
}
@container (min-width: 1000px) {
	.svp-stage { grid-template-columns: 380px 1fr; gap: 48px; padding: 36px; }
	.svp-art { max-width: 380px; }
}

/* Вузький телефон */
@container (max-width: 360px) {
	.svp-stage { padding: 14px 14px 16px; gap: 16px; }
	.svp .svp-play { width: 62px; height: 62px; }
	.svp .svp-vol-range { display: none; }
	.svp .svp-chip { padding: 8px 11px; font-size: 14px; }
	.svp-h-item { grid-template-columns: 2.9em 40px 1fr; gap: 10px; }
	.svp .svp-h-cover { width: 40px; height: 40px; }
}

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