/* Общие переменные темы; палитра и размеры утверждённого макета. */
:root {
	--radio-modal-backdrop: rgba(0, 0, 0, .72);
 --radio-vk: #0077ff;
 --radio-ok: #ee8208;
	--radio-cabinet-panel: rgba(10, 11, 22, .86);
	--radio-coin: #e2ac45;
	--radio-partner-logo-height: 36px;
	--radio-app-badge-height: 40px;
	--radio-white: #ffffff;
	--radio-favorite: #ffc93c;
	--radio-vinyl-cover-size: 200px;
	--radio-vinyl-shade: linear-gradient(90deg, rgba(6, 6, 14, .35), rgba(6, 6, 14, .85) 60%);
	--radio-vinyl-cover-shadow: 8px 0 24px rgba(0, 0, 0, .55), 0 24px 60px rgba(0, 0, 0, .5);
	--radio-vinyl-grooves: radial-gradient(circle, transparent 0 43.5%, rgba(0, 0, 0, .75) 44% 45%, transparent 45.5%), repeating-radial-gradient(circle, #111117 0 1.4px, #202028 1.4px 2.8px);
	--radio-vinyl-disc-shadow: 0 18px 40px rgba(0, 0, 0, .6), inset 0 0 0 2px #0a0a0e;
	--radio-vinyl-label-shadow: 0 0 0 2px #0c0c10, inset 0 0 22px rgba(0, 0, 0, .6);
	--radio-vinyl-turn-duration: 4s;
	--radio-neon-tube: #3cc8ff;
	--radio-neon-core: #d9f7ff;
	--radio-neon-glow: rgba(60, 200, 255, .8);
	--radio-neon-pulse-glow: #a8ecff;
	--radio-neon-hub: #4fb8e6;
	--radio-neon-label: radial-gradient(circle, #0d4f86 0%, #08335c 45%, #041a33 100%);
	--radio-vinyl-reflection: conic-gradient(from 30deg, transparent 0 10%, rgba(255, 255, 255, .14) 14%, transparent 20% 55%, rgba(255, 255, 255, .1) 60%, transparent 66%);
	--radio-chart-up: #3ddc84;
	--radio-chart-down: #ff5c6c;
	--radio-playback-glass: rgba(255, 255, 255, .18);
	--radio-playback-border: rgba(255, 255, 255, .28);
	--radio-panel-2: #0b0d1a;
	--radio-brand: #353d82;
	--radio-brand-2: #4b55c0;
	--radio-accent-light: #9aa1ff;
	--radio-text-subtle: #7c809c;
	--radio-line-strong: rgba(140, 150, 255, .28);
	--radio-radius: 14px;
	--radio-radius-sm: 10px;
	--radio-logo-width: 43px;
	--radio-sidebar-mobile-width: 260px;
	--radio-side-column: 298px;
	--radio-hover: rgba(111, 120, 240, .08);
	--radio-chart-hover: rgba(53, 61, 130, .3);
	--radio-stream-control: rgba(10, 12, 30, .75);
	--radio-stream-control-border: rgba(255, 255, 255, .35);
	--radio-nav-active: linear-gradient(90deg, rgba(53, 61, 130, .9), rgba(53, 61, 130, .45));
	--radio-nav-shadow: inset 0 0 0 1px rgba(154, 161, 255, .15);
	--radio-promo-gradient: linear-gradient(160deg, #0b0e22, #05060c 70%);
	--radio-scrim: rgba(0, 0, 0, .6);
	--radio-bg: #000000;
	--radio-panel: #06070d;
	--radio-border: rgba(120, 130, 230, .14);
	--radio-text: #f2f3fa;
	--radio-muted: #b9bdd6;
	--radio-accent: #6f78f0;
	--radio-bg-gradient: linear-gradient(to bottom, #000000 0%, #353d82 100%);
	--radio-player-panel-height: calc(70px + env(safe-area-inset-bottom, 0px));
	--radio-glass: rgba(20, 24, 33, .75);
	--radio-glass-shadow: 0 -2px 10px rgba(0, 0, 0, .2);
	--radio-play-shadow: 0 6px 22px rgba(90, 99, 214, .45);
	--radio-volume-track: rgba(255, 255, 255, .15);
	--radio-volume-thumb-shadow: 0 0 0 3px rgba(111, 120, 240, .25);
	--radio-cover-button-shade: rgba(0, 0, 0, .35);
	--radio-live-halo: rgba(111, 120, 240, .7);
	--radio-error: #e5484d;
	--radio-video-live: #ff4d6a;
	--radio-logo-height: 38px;
	--radio-sidebar-width: 228px;
	--radio-space: 16px;
	--radio-cover-blur: 8px;
	--radio-card-shadow: 0 12px 32px color-mix(in srgb, var(--radio-bg) 70%, transparent);
}

@media (max-width: 640px) {
 :root { --radio-player-panel-height: calc(90px + env(safe-area-inset-bottom, 0px)); }
}

@container radio-vinyl (560px <= width < 760px) {
	.radio-vinyl { --radio-vinyl-cover-size: 180px; }
}
@container radio-vinyl (width < 560px) {
	.radio-vinyl { --radio-vinyl-cover-size: 170px; }
}