/* MACEDONIA.FM — retro '80s disco theme
 * Deep indigo night, neon accents with glow, sunset-gradient logo, and a
 * synthwave horizon grid. Each station keeps a single neon hue (--hue) that
 * drives its accents and the visualizer bars. */

:root
{
	--hue: 320;
	--bg: #120d29;
	--bg-deep: #0b081c;
	--panel: #1b1340;
	--text: #f2ecff;
	--muted: #8f86b8;
	--accent: hsl(var(--hue), 100%, 62%);
	--neon-border: 1px solid hsl(var(--hue), 95%, 58%, .55);
	--glow: 0 0 14px hsl(var(--hue), 100%, 60%, .45);
	--glow-strong: 0 0 6px hsl(var(--hue), 100%, 65%, .9), 0 0 22px hsl(var(--hue), 100%, 58%, .55);
	--radius: 14px;
}

*
{
	box-sizing: border-box;
}

body
{
	margin: 0;
	background: linear-gradient( 180deg, var(--bg) 0%, var(--bg-deep) 100% ) no-repeat;
	background-color: var(--bg-deep);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	padding-bottom: 100px; /* room for the player bar */
}

a
{
	color: inherit;
	text-decoration: none;
}

button
{
	font-family: inherit;
}

.app
{
	max-width: 560px;
	margin: 0 auto;
}

header.site
{
	padding: 30px 20px 8px;
}

/* chrome-sunset logo */
header.site h1
{
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: 3px;
	text-transform: uppercase;
	background: linear-gradient( 180deg, #ff9a3d 0%, #ff2d95 55%, #b537f2 100% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow( 0 0 12px rgba(255, 45, 149, .45) );
}

.fm
{
	color: inherit;
}

header.site p
{
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 13px;
	letter-spacing: 1px;
}

main
{
	padding: 0 18px;
}

.group h2
{
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 4px;
	color: #00e5ff;
	text-shadow: 0 0 10px rgba(0, 229, 255, .5);
	margin: 30px 6px 14px;
}

/* ---- filter chips ---- */

.genres
{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 2px 14px;
}

.genre-chip,
.country-chip
{
	background: transparent;
	border: 1px solid #4a3f7e;
	color: var(--muted);
	border-radius: 999px;
	padding: 7px 15px;
	font-size: 13px;
	cursor: pointer;
	transition: all .15s ease;
}

.genre-chip.active,
.country-chip.active
{
	border-color: #ff2d95;
	color: #ff77c0;
	box-shadow: 0 0 12px rgba(255, 45, 149, .45), inset 0 0 8px rgba(255, 45, 149, .18);
	text-shadow: 0 0 8px rgba(255, 45, 149, .6);
}

.genres.countries
{
	margin-bottom: 12px;
}

/* ---- station cards ---- */

.panel
{
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}

.stations
{
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ---- the top deck: trending / now playing / charts tabs ---- */

#tab-bar,
#period-bar
{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 2px 14px;
}

.tab
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid #4a3f7e;
	color: var(--muted);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	cursor: pointer;
	transition: all .15s ease;
}

.tab svg
{
	flex: 0 0 auto;
}

.playlist-link svg,
#charts-page h2 svg
{
	vertical-align: -2px;
}

.tab.active
{
	border-color: #ff2d95;
	color: #ff77c0;
	box-shadow: 0 0 12px rgba(255, 45, 149, .45), inset 0 0 8px rgba(255, 45, 149, .18);
	text-shadow: 0 0 8px rgba(255, 45, 149, .6);
}

/* phones: the three tabs share one line — tighter chips, scroll as a
   last resort for extra-long locales */
@media (max-width: 480px)
{
	#tab-bar
	{
		flex-wrap: nowrap;
		gap: 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	#tab-bar::-webkit-scrollbar { display: none; }

	.tab
	{
		flex: 1 1 0;
		justify-content: center;
		gap: 4px;
		padding: 7px 8px;
		font-size: 12px;
		white-space: nowrap;
		text-align: center;
	}
}

/* „Сега свири“ — a window of 3 live songs: swipe to browse, tap to tune */
#now-list
{
	display: flex;
	flex-direction: column;
	gap: 12px;
	touch-action: pan-y;  /* horizontal swipes are ours, vertical scroll stays native */
	cursor: grab;
}

/* swipe affordance under the now-playing rows */
#now-dots
{
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

#now-dots span
{
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4a3f7e;
	transition: all .25s ease;
}

#now-dots span.active
{
	background: #ff2d95;
	box-shadow: 0 0 8px rgba(255, 45, 149, .7);
}

/* charts — today's top-3, each row jumps out to lucky.surf */
#charts-list
{
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.chart-row
{
	display: flex;
	align-items: center;
	gap: 15px;
	background: linear-gradient( 120deg, var(--panel), #170f35 );
	border: var(--neon-border);
	border-radius: var(--radius);
	padding: 14px 18px;
	min-height: 62px;
	color: var(--text);
	text-decoration: none;
	min-width: 0;
	transition: box-shadow .15s ease, transform .15s ease;
}

.chart-row:hover
{
	box-shadow: var(--glow);
	transform: translateY(-1px);
}

/* the rank medal: neon circle — gold / silver / bronze for the podium,
   the theme purple for everyone below it (charts page goes to Top 20) */
.chart-rank
{
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	border: 1px solid hsl( var(--rank-hue, 265), 60%, 62% );
	color: hsl( var(--rank-hue, 265), 80%, 78% );
	box-shadow: 0 0 10px hsla( var(--rank-hue, 265), 70%, 60%, .35 ), inset 0 0 8px hsla( var(--rank-hue, 265), 70%, 60%, .15 );
	text-shadow: 0 0 8px hsla( var(--rank-hue, 265), 85%, 70%, .6 );
}

.chart-rank.rank-1 { --rank-hue: 55; }
.chart-rank.rank-2 { --rank-hue: 200; }
.chart-rank.rank-3 { --rank-hue: 25; }

/* homepage → full charts */
.pane-more
{
	display: block;
	text-align: right;
	margin-top: 10px;
	color: var(--muted);
	font-size: 13px;
	text-decoration: none;
	transition: color .15s ease;
}

.pane-more:hover
{
	color: #ff77c0;
}

header.site h1 a
{
	color: inherit;
	text-decoration: none;
}

.chart-song
{
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.np-song
{
	position: relative;
	z-index: 1;
	width: 100%;
	background: linear-gradient( 120deg, var(--panel), #170f35 );
	border: var(--neon-border);
	border-radius: var(--radius);
	padding: 10px 18px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	min-height: 54px;
	justify-content: center;
	text-align: left;
	color: var(--text);
	transition: box-shadow .15s ease, transform .15s ease;
}

.np-song:hover
{
	box-shadow: var(--glow);
	transform: translateY(-1px);
}

.np-song .song
{
	color: hsl( var(--hue), 85%, 76% );
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.np-song .on
{
	color: var(--muted);
	font-size: 12px;
	letter-spacing: .5px;
}

#now-list.pulse .np-song
{
	animation: np-track-in .8s ease;
}

#now-list.slide-left .np-song
{
	animation: now-slide-left .35s ease;
}

#now-list.slide-right .np-song
{
	animation: now-slide-right .35s ease;
}

@keyframes now-slide-left
{
	from { opacity: 0; transform: translateX(30px); }
	to   { opacity: 1; transform: none; }
}

@keyframes now-slide-right
{
	from { opacity: 0; transform: translateX(-30px); }
	to   { opacity: 1; transform: none; }
}


.station
{
	background: linear-gradient( 120deg, var(--panel), #170f35 );
	border: var(--neon-border);
	border-radius: var(--radius);
	padding: 15px 18px;
	cursor: pointer;
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 62px;
	transition: box-shadow .15s ease, transform .15s ease;
}

.station:hover
{
	box-shadow: var(--glow);
	transform: translateY(-1px);
}

/* favorites float to the top of the list wearing a small heart — the same
   material shape as the ♥ button, masked so it wears the station accent */
.station.favorited h3::before
{
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 6px;
	background: var(--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.station .who
{
	min-width: 0;
	flex: 1;
}

.station h3
{
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.station .sub
{
	color: var(--muted);
	font-size: 12px;
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: none;
}

/* live now-playing line (Song Radar) — stays hidden until data arrives */
.station .track
{
	color: hsl( var(--hue), 85%, 76% );
	font-size: 12px;
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.station .freq
{
	color: var(--accent);
	text-shadow: 0 0 10px hsl(var(--hue), 100%, 60%, .6);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	flex-shrink: 0;
}

.station .bigfreq,
.station .stop
{
	display: none;
}

/* the playing row lights up and expands with the big neon frequency */
.station.playing
{
	box-shadow: var(--glow-strong);
	padding: 22px 18px;
}

.station.playing .bigfreq
{
	display: block;
	font-size: 40px;
	font-weight: 800;
	font-style: italic;
	line-height: 1.1;
	letter-spacing: 2px;
	margin-bottom: 4px;
	color: var(--accent);
	text-shadow: var(--glow-strong);
}

.station.playing .sub
{
	display: block;
}

.station.playing .freq
{
	display: none;
}

.station.playing .stop
{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 12px;
	right: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--bg-deep);
	border: var(--neon-border);
	color: var(--accent);
	text-shadow: 0 0 8px hsl(var(--hue), 100%, 60%, .8);
	box-shadow: var(--glow);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.station.inactive
{
	opacity: .45;
	cursor: default;
	border-color: #362d63;
}

.station.inactive h3,
.station.inactive .freq
{
	color: var(--muted);
	text-shadow: none;
}

.station.inactive:hover
{
	box-shadow: none;
	transform: none;
}

/* ---- full-screen now-playing (player screen) ---- */

#now-playing
{
	position: fixed;
	inset: 0;
	background: linear-gradient( 180deg, var(--bg) 0%, var(--bg-deep) 100% );
	z-index: 20;
	display: none;
	flex-direction: column;
}

/* synthwave horizon grid behind the visualizer */
#now-playing::before,
body.player-page::before
{
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 52%;
	background:
		repeating-linear-gradient( 0deg,   hsl(var(--hue), 90%, 60%, .14) 0 1px, transparent 1px 34px ),
		repeating-linear-gradient( 90deg,  hsl(var(--hue), 90%, 60%, .10) 0 1px, transparent 1px 44px );
	-webkit-mask-image: linear-gradient( 180deg, transparent, #000 70% );
	mask-image: linear-gradient( 180deg, transparent, #000 70% );
	pointer-events: none;
}

#now-playing.visible
{
	display: flex;
}

.np-bar
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc( 14px + env(safe-area-inset-top) ) 18px 8px;
	position: relative;
}

.np-bar button,
.np-roundbtn
{
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid #4a3f7e;
	background: rgba(27, 19, 64, .6);
	color: var(--text);
	font-size: 18px;
	cursor: pointer;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .15s ease;
}

.np-bar button:active,
.np-roundbtn:active
{
	border-color: var(--accent);
	box-shadow: var(--glow);
}

.np-title
{
	font-size: 15px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: 3px;
	text-transform: uppercase;
	background: linear-gradient( 180deg, #ff9a3d, #ff2d95 60%, #b537f2 );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.np-canvas-wrap
{
	position: relative;
	flex: 1;
	min-height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#audio-canvas
{
	display: block;
	max-width: 100%;
	max-height: 100%;
	/* one GPU-composited glow for the whole ring — NOT per-bar canvas shadows */
	filter: drop-shadow( 0 0 14px hsl(var(--hue), 100%, 60%, .45) );
}

/* prev · frequency · next, floating inside the visualizer ring */
.np-center
{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	pointer-events: none;
}

/* prev/next: same round-button language as the top bar and actions row */
.np-center button
{
	pointer-events: auto;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid #4a3f7e;
	background: rgba(27, 19, 64, .6);
	color: var(--text);
	font-size: 13px;
	letter-spacing: -1px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.np-center button:active
{
	color: var(--accent);
	border-color: var(--accent);
	text-shadow: var(--glow-strong);
	box-shadow: var(--glow);
}

#np-freq
{
	font-size: 48px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: 2px;
	line-height: 1;
	min-width: 130px;
	text-align: center;
	color: var(--accent);
	text-shadow: var(--glow-strong);
}

.np-info
{
	text-align: center;
	padding: 6px 20px 16px;
	position: relative;
}

#np-name
{
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text);
	text-shadow: 0 0 14px rgba(242, 236, 255, .25);
}

#np-state
{
	color: var(--muted);
	font-size: 13px;
	margin-top: 4px;
	min-height: 17px;
	letter-spacing: 1px;
}

/* live track under the station name (Song Radar); tap opens recent plays */
#np-track
{
	color: var(--accent);
	text-shadow: 0 0 12px hsl( var(--hue), 100%, 60%, .45 );
	font-size: 15px;
	margin-top: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

#np-track .np-yt
{
	color: inherit;
	margin-left: .45em;
	opacity: .65;
	display: inline-block;
	vertical-align: -.18em;
	transition: opacity .15s ease;
}

#np-track .np-yt:hover
{
	opacity: 1;
}

#np-track .np-yt svg
{
	width: 1.1em;
	height: 1.1em;
}

#np-track.pulse
{
	animation: np-track-in .8s ease;
}

@keyframes np-track-in
{
	from { opacity: 0; transform: translateY(5px); }
	to   { opacity: 1; transform: none; }
}

/* recent plays — small scrollable list between the info and the actions */
#np-recent
{
	max-height: 24vh;
	overflow-y: auto;
	padding: 0 30px 10px;
	font-size: 12.5px;
}

#np-recent .row
{
	display: flex;
	justify-content: center;
	gap: 10px;
	padding: 3px 0;
	color: var(--muted);
}

#np-recent .when
{
	flex-shrink: 0;
	min-width: 88px;
	text-align: right;
	opacity: .65;
}

#np-recent .what
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ✕ · ♥ · share — neon round buttons */
.np-actions
{
	display: flex;
	justify-content: center;
	align-items: center;
	/* five buttons must fit a phone: the gap gives way, the circles don't */
	gap: clamp(10px, 4.5vw, 34px);
	padding: 8px 16px 20px;
	position: relative;
}

.np-actions button
{
	flex-shrink: 0;  /* flex squeezing width but not height turns circles into eggs */
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 1px solid #4a3f7e;
	background: rgba(27, 19, 64, .6);
	color: var(--muted);
	font-size: 19px;
	cursor: pointer;
	transition: all .15s ease;
}

.np-actions button:active
{
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: var(--glow);
}

.np-actions button svg
{
	vertical-align: middle;
	pointer-events: none;
}

.np-actions #np-cast.on,
.np-actions #np-fav.on,
.np-actions #np-wake.on
{
	color: var(--accent);
	border-color: var(--accent);
	box-shadow: var(--glow);
	text-shadow: var(--glow-strong);
}

/* ---- FM tuner dial ---- */

#np-tuner
{
	position: relative;
	background: rgba(11, 8, 28, .85);
	border-top: 1px solid hsl(var(--hue), 95%, 58%, .45);
	box-shadow: 0 -4px 24px hsl(var(--hue), 100%, 58%, .18);
	padding: 20px 22px calc( 16px + env(safe-area-inset-bottom) );
	touch-action: none;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

#np-tuner .ticks
{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	height: 30px;
}

#np-tuner .tick
{
	width: 2px;
	height: 16px;
	background: #4a3f7e;
	border-radius: 1px;
}

#np-tuner .tick.major
{
	height: 28px;
	background: var(--accent);
	box-shadow: 0 0 8px hsl(var(--hue), 100%, 60%, .8);
}

#tuner-needle
{
	position: absolute;
	top: 12px;
	width: 2px;
	height: 44px;
	background: #00e5ff;
	box-shadow: 0 0 10px rgba(0, 229, 255, .9);
	transform: translateX(-50%);
	transition: left .15s ease, opacity .15s ease;
}

#tuner-needle::after
{
	content: '';
	position: absolute;
	bottom: -7px;
	left: 50%;
	transform: translateX(-50%);
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #00e5ff;
	box-shadow: 0 0 12px rgba(0, 229, 255, .9);
}

#np-tuner .scale
{
	display: flex;
	justify-content: space-between;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	margin-top: 12px;
	padding: 0 8%;
}

/* ---- station page (same player screen, inline) ---- */

body.player-page
{
	padding-bottom: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
}

body.player-page .np-canvas-wrap
{
	flex: 1;
}

.substreams
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0 16px 14px;
	position: relative;
}

.substreams button
{
	background: transparent;
	border: 1px solid #4a3f7e;
	color: var(--muted);
	border-radius: 999px;
	padding: 8px 17px;
	font-size: 13px;
	cursor: pointer;
	transition: all .15s ease;
}

.substreams button.active
{
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: var(--glow);
	text-shadow: 0 0 8px hsl(var(--hue), 100%, 60%, .6);
}

/* ---- persistent bottom player bar (collapsed state) ---- */

#player-bar
{
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: rgba(11, 8, 28, .92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid hsl(var(--hue), 95%, 58%, .5);
	box-shadow: 0 -4px 24px hsl(var(--hue), 100%, 58%, .2);
	display: none;
	align-items: center;
	gap: 14px;
	padding: 12px 20px calc( 12px + env(safe-area-inset-bottom) );
	z-index: 10;
}

#player-bar.visible
{
	display: flex;
}

#player-toggle
{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid var(--accent);
	background: hsl(var(--hue), 100%, 62%, .16);
	color: var(--accent);
	text-shadow: var(--glow-strong);
	font-size: 17px;
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: var(--glow);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

#player-toggle svg
{
	filter: drop-shadow( 0 0 6px hsl(var(--hue), 100%, 60%, .8) );
}

#player-bar .info
{
	min-width: 0;
	cursor: pointer;
}

#player-name
{
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 1px;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#player-meta
{
	color: var(--muted);
	font-size: 12px;
}

#player-link
{
	margin-left: auto;
	color: var(--muted);
	font-size: 13px;
	border: 1px solid #4a3f7e;
	border-radius: 999px;
	padding: 9px 15px;
	flex-shrink: 0;
}

footer.site
{
	margin: 40px 0 0;
	padding: 0 20px 20px;
	color: #4a3f7e;
	font-size: 12px;
}

footer.site .playlist-link
{
	display: inline-block;
	margin-top: 8px;
	color: var(--muted);
}

/* ---- language switcher (footer) ---- */

.lang-switch
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.lang-switch button
{
	background: transparent;
	border: 1px solid #4a3f7e;
	color: var(--muted);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12px;
	cursor: pointer;
	transition: all .15s ease;
}

.lang-switch button.active
{
	border-color: #ff2d95;
	color: #ff77c0;
	box-shadow: 0 0 12px rgba(255, 45, 149, .45), inset 0 0 8px rgba(255, 45, 149, .18);
	text-shadow: 0 0 8px rgba(255, 45, 149, .6);
}

/* ---- live listener count (relay Icecast) — hidden unless ≥1 ---- */

.station .listeners
{
	color: var(--muted);
	font-size: 11px;
	margin-top: 2px;
}

#np-listeners
{
	color: var(--muted);
	font-size: 13px;
	margin-top: 4px;
	letter-spacing: 1px;
}

.station .listeners svg,
#np-listeners svg
{
	vertical-align: -1px;
}

/* ---- collapsible filters (funnel button in the All Stations header) ---- */

.group-head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.group-head h2
{
	margin-right: 0;
}

.head-tools
{
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin: 30px 6px 14px 0;  /* aligns with the .group h2 baseline */
}

#filter-toggle,
#search-toggle
{
	background: transparent;
	border: 1px solid #4a3f7e;
	color: var(--muted);
	border-radius: 999px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: all .15s ease;
}

#filter-toggle.open,
#filter-toggle.filtering,
#search-toggle.open,
#search-toggle.filtering
{
	border-color: #ff2d95;
	color: #ff77c0;
	box-shadow: 0 0 12px rgba(255, 45, 149, .45), inset 0 0 8px rgba(255, 45, 149, .18);
}

/* ---- search (magnifier next to the funnel) ---- */

#search-bar
{
	margin: 0 2px 14px;
}

#search-bar input
{
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	border: 1px solid #4a3f7e;
	color: inherit;
	border-radius: 999px;
	padding: 10px 18px;
	font: inherit;
	font-size: 14px;
	outline: none;
	transition: all .15s ease;
}

#search-bar input:focus
{
	border-color: #ff2d95;
	box-shadow: 0 0 12px rgba(255, 45, 149, .45), inset 0 0 8px rgba(255, 45, 149, .18);
}

#search-bar input::placeholder
{
	color: var(--muted);
}

#no-results
{
	color: var(--muted);
	text-align: center;
	padding: 18px 0;
}

/* search results take the whole stage: the tab deck steps aside, and
   trending-hidden cards rejoin the list so nothing is missed */
body.searching #home-tabs
{
	display: none;
}

body.searching #all-stations .station.in-trending
{
	display: flex;
}

/* a station that appears in Trending is hidden from the All Stations list;
   the class beats the filter()-managed inline display since that inline
   value is empty for cards that pass the active filters */
#all-stations .station.in-trending
{
	display: none;
}