:root {
	color-scheme: light dark;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ink: #f7f8ff;
	--muted: #aab3d1;
	--panel: #11172b;
	--panel-2: #171f38;
	--line: rgba(255, 255, 255, .12);
	--accent: #6c8cff;
	--accent-2: #8e6bff;
	--live: #ff5470;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	min-width: 260px;
	background: transparent;
}

body { padding: 8px; }

button, select, input { font: inherit; }

.radio-card {
	width: 100%;
	max-width: 520px;
	min-height: 294px;
	padding: 18px;
	color: var(--ink);
	background:
		radial-gradient(circle at 95% 0%, rgba(108, 140, 255, .25), transparent 38%),
		linear-gradient(145deg, #0d1222, var(--panel));
	border: 1px solid var(--line);
	border-radius: 22px;
	box-shadow: 0 18px 45px rgba(7, 11, 25, .26);
	overflow: hidden;
}

.radio-header,
.radio-controls {
	display: flex;
	align-items: center;
}

.radio-header { justify-content: space-between; gap: 16px; }

.radio-brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--ink);
	font-size: .92rem;
	font-weight: 750;
	text-decoration: none;
}

.radio-brand-mark {
	display: grid;
	place-items: center;
	width: 29px;
	height: 29px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	border-radius: 9px;
	box-shadow: 0 7px 18px rgba(108, 140, 255, .35);
}

.radio-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #ffdbe2;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.radio-live span {
	width: 8px;
	height: 8px;
	background: var(--live);
	border-radius: 50%;
	box-shadow: 0 0 0 5px rgba(255, 84, 112, .13);
}

.radio-field { margin-top: 17px; }
.radio-field label,
.radio-now-label {
	display: block;
	margin-bottom: 6px;
	color: var(--muted);
	font-size: .72rem;
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.radio-select-wrap { position: relative; }
.radio-select-wrap::after {
	content: "⌄";
	position: absolute;
	top: 50%;
	right: 14px;
	color: var(--muted);
	pointer-events: none;
	transform: translateY(-58%);
}

.radio-field select {
	width: 100%;
	height: 42px;
	padding: 0 42px 0 13px;
	color: var(--ink);
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: 12px;
	outline: none;
	appearance: none;
}

.radio-field select:focus-visible {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(108, 140, 255, .22);
}

.radio-now {
	min-height: 76px;
	padding: 14px 2px 10px;
}

.radio-now strong,
.radio-now > span:last-child {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.radio-now strong { font-size: 1.08rem; line-height: 1.35; }
.radio-now > span:last-child { margin-top: 3px; color: var(--muted); font-size: .78rem; }

.radio-controls {
	gap: 12px;
	padding-top: 13px;
	border-top: 1px solid var(--line);
}

.radio-play {
	display: grid;
	place-items: center;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	padding: 0;
	color: white;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	border: 0;
	border-radius: 50%;
	box-shadow: 0 8px 22px rgba(108, 140, 255, .32);
	cursor: pointer;
}

.radio-play:hover { filter: brightness(1.08); }
.radio-play:focus-visible { outline: 3px solid rgba(255, 255, 255, .78); outline-offset: 3px; }
.radio-play svg { width: 23px; height: 23px; fill: currentColor; }
.radio-play .icon-pause { display: none; }
.radio-play.is-playing .icon-play { display: none; }
.radio-play.is-playing .icon-pause { display: block; }

.radio-state { min-width: 0; flex: 1; }
.radio-state strong,
.radio-state span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-state strong { font-size: .9rem; }
.radio-state span { margin-top: 2px; color: var(--muted); font-size: .75rem; }

.radio-volume {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 102px;
}

.radio-volume svg { width: 18px; height: 18px; fill: var(--muted); }
.radio-volume input { width: 76px; accent-color: var(--accent); cursor: pointer; }

.radio-empty {
	display: grid;
	gap: 8px;
	place-content: center;
	min-height: 220px;
	text-align: center;
}
.radio-empty span { color: var(--muted); font-size: .9rem; }
.radio-revoked { min-height: 218px; }
.radio-revoked strong { color: #ffdbe2; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Soukromá varianta pro přehrávač se všemi stanicemi. */
.private-all-embed {
	--ink: #251d0d;
	--muted: #705f3d;
	--panel: #fff8e8;
	--panel-2: #fffdf7;
	--line: rgba(93, 65, 15, .18);
	--accent: #bd7a12;
	--accent-2: #7e4f08;
	--live: #bd7a12;
}

.radio-card-private {
	background:
		linear-gradient(90deg, rgba(189, 122, 18, .1) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(0deg, rgba(189, 122, 18, .1) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(145deg, #fffdf7, var(--panel));
	border: 1px solid rgba(126, 79, 8, .28);
	border-radius: 10px;
	box-shadow: 8px 8px 0 rgba(126, 79, 8, .16);
}

.radio-card-private .radio-brand-mark {
	background: var(--ink);
	border-radius: 50%;
	box-shadow: none;
}

.radio-card-private .radio-live { color: var(--accent-2); }
.radio-card-private .radio-live span { box-shadow: 0 0 0 5px rgba(189, 122, 18, .14); }
.radio-card-private .radio-play { box-shadow: 0 7px 0 rgba(70, 42, 4, .18); }

@media (max-width: 380px) {
	body { padding: 4px; }
	.radio-card { padding: 15px; border-radius: 17px; }
	.radio-volume { flex-basis: 72px; }
	.radio-volume input { width: 48px; }
}

@media (prefers-reduced-motion: no-preference) {
	.radio-live span { animation: radio-pulse 2s infinite; }
	@keyframes radio-pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 84, 112, 0); } }
}