html {
	margin: 0;
	padding: 0;
	background: 
		radial-gradient(ellipse at top left, rgba(255,77,210,0.15) 0%, transparent 50%),
		radial-gradient(ellipse at top right, rgba(0,212,255,0.12) 0%, transparent 50%),
		radial-gradient(ellipse at bottom center, rgba(178,102,255,0.1) 0%, transparent 60%),
		linear-gradient(135deg, #0a0a0c 0%, #1a1a2e 25%, #16213e 50%, #0e3460 100%);
	height: 100vh;
	position: relative;
	overflow: hidden;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* Internet Explorer 10+ */
}

html::-webkit-scrollbar {
	display: none; /* WebKit browsers (Chrome, Safari, Edge) */
}


body {
	padding: 0 25px 0 50px;
	background: transparent;
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
	position: relative;
	height: 100vh;
	margin: 0;
}


a {
	color: #f8ef64;
	text-decoration: none;
	border-bottom: 1px dotted #f8ef64;
}

a:hover {
	color: #f8ef64;
	text-decoration: none;
	border-bottom: 1px solid #f8ef64;
}

h1 {
	font-family: Verdana, sans-serif;
	text-decoration: none;
	font-weight: bold;
    font-size: 3em;
	color: #fff;
	margin-top: 3px;
}

h3 {
	margin: 0px;
    padding: 0px;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 110%;
	color: #f8ef64;
}

h1#header{
	padding: 10px 0px 10px 80px;
	background: transparent url(/icecast.png) no-repeat scroll left center;
}

h3 small {
	color: #fff;
	font-size: 70%;
	padding-left: 15px;
}

form.alignedform label {
	text-align: right;
	display: inline-block;
	vertical-align: middle;
	width: 10em;
	margin: 0 1em 0 0;
}

form.alignedform input {
	display: inline-block;
	vertical-align: middle;
	border: 1px solid #f8ef64;
	background-color: #333;
	color: #f8ef64;
	padding: 5px;
}

#menu {
	border-top: 3px solid #7B96C6;
	border-bottom: 3px solid #7B96C6;
	text-align: center;
	margin-bottom: 35px;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	vertical-align: middle;
}

#menu ul li {
	float: left;
	padding-left: 25px;
	padding-right: 25px;
}

#menu ul li a {
	font-family: Verdana, sans-serif;
	text-decoration: none;
	color: #fff;
	font-size: 18px;
	border: none;
}

#menu ul li a:hover {
	color: #f8ef64;
}

.roundbox {
	width: 90%;
	background-color: #656565;
	border-radius: 10px;
	padding: 15px 20px;
	margin-bottom: 35px;
}

.roundbox h3 {
	margin-bottom: 10px;
	border-bottom: 1px groove #ACACAC;
}

.roundbox table.yellowkeys tr td:last-child {
	color: #f8ef64;
}

table.colortable {
	border-collapse: collapse;
	padding: 20px 0 20px 0;
	margin: 0 auto;
}

table.colortable td {
	border: 1px solid #000;
	text-align: center;
	padding: 5px;
}

table.colortable thead tr td {
	color: #656565;
	background: #f8ef64;
	border-color: white;
}

.roundbox table.yellowkeys tr td {
	padding: 5px 5px 0 0;
	word-wrap: break-word;
	word-break: break-all;
}

.right {
	float: right;
}

.mounthead h3 {
	float: left;
	margin-bottom: 0px;
	border-bottom: none;
}

.mountcont {
	border-top: 1px groove #ACACAC;
	clear: both;
}

ul.mountlist {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.mountlist li {
	display: inline;
}

a.play {
	padding-left: 22px;
	margin-left: 25px;
	border: none;
	background: transparent url(/tunein.png) no-repeat scroll left center;
	background-size: auto 100%;
}

a.auth {
	padding-left: 22px;
	margin-left: 25px;
	border: none;
	background: transparent url(/key.png) no-repeat scroll left top;
	background-size: auto 100%;
}

/* Admin navigation */

ul.nav {
	margin: 0;
	padding: 5px 0 10px 0;
	clear: both;
	list-style: none;
	text-align: center;
}

ul.nav li {
	display: inline;
}

ul.nav li a {
	border: none;
	display: inline-block;
	padding: .2em .7em;
	margin-top: .2em;
	background-color: #333;
	white-space: nowrap;
}

ul.nav li a:hover {
	color: #fff;
}

/* Footer */

#footer {
	border-top: 1px groove #ACACAC;
	margin-top: 20px;
	font-size: 80%;
}

@media (max-width: 800px) {

	body {
		padding: 0;
	}

	.roundbox {
		width: auto;
		border-radius: 0;
	}

	.roundbox table.yellowkeys tr td {
		display: block;
		padding: 5px 5px 0 0;
	}

	.roundbox table.yellowkeys tr td:last-child {
		margin-bottom: 5px;
		margin-left: 5px;
	}

	.scrolltable {
		overflow: auto;
	}

}

@media (max-width: 320px) {

	ul.nav, #menu ul {
		display: block;
	}

	ul.nav li, #menu ul li {
		float: none;
	}

	ul.nav li a, #menu ul li a {
		display: block;
	}

	ul.nav li + li, #menu ul li + li {
		border-top: 1px solid #ACACAC;
	}

	a.play {
		margin-left: 15px;
	}

}

/* Modern homepage styles (scoped to the new landing components) */

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 32px 20px 60px 20px;
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.logo i {
	font-size: 28px;
	color: #f8ef64;
}

.logo h1 {
	margin: 0;
	font-size: 22px;
	letter-spacing: 0.3px;
}

.status-indicator {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.08);
	padding: 6px 12px;
	border-radius: 999px;
	backdrop-filter: blur(6px);
}

.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c23e3e;
}

.status-dot.live {
	background: #21d07a;
	box-shadow: 0 0 0 0 rgba(33,208,122,0.7);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(33,208,122,0.7); }
	70% { box-shadow: 0 0 0 10px rgba(33,208,122,0); }
	100% { box-shadow: 0 0 0 0 rgba(33,208,122,0); }
}

.security-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #cfead9;
	font-size: 12px;
}

.main-content {
	display: grid;
	gap: 28px;
}

.player-section {
	background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 16px;
	padding: 24px;
}

.player-container {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 22px;
	align-items: center;
}

.album-art {
	width: 140px;
	height: 140px;
	display: grid;
	place-items: center;
}

.vinyl {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, #2b2b2b 0%, #1a1a1a 60%, #0f0f0f 100%);
	position: relative;
	border: 1px solid rgba(255,255,255,0.06);
	animation: spin 14s linear infinite;
}

.vinyl-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f8ef64;
	color: #000;
	display: grid;
	place-items: center;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.player-info .station-name {
	margin: 0 0 4px 0;
	font-size: 20px;
}

.player-info .station-description {
	margin: 0 0 12px 0;
	color: #c7c7c7;
	font-size: 14px;
}

.now-playing {
	background: rgba(0,0,0,0.35);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	padding: 10px 12px;
}

.track-info {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.track-info .artist {
	color: #ffffff;
	font-weight: 600;
}

.track-info .track {
	color: #e5e5e5;
}

.audio-controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

.control-btn {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.12);
	background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: transform 0.1s ease, background 0.2s ease, border-color 0.2s ease;
}

.control-btn:hover { transform: translateY(-1px); }
.control-btn:active { transform: translateY(0); }

.volume-slider {
	position: relative;
	display: none;
}

.volume-slider.open { display: block; }

.volume-range {
	width: 140px;
}

.visualizer {
	display: grid;
	grid-auto-flow: column;
	align-items: end;
	gap: 3px;
	height: 32px;
	padding: 8px 12px;
	background: 
		linear-gradient(145deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2)),
		rgba(255,77,210,0.05);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 18px;
	backdrop-filter: blur(15px) saturate(1.3);
	margin: 0 8px;
	box-shadow: 
		inset 0 1px 0 rgba(255,255,255,0.08),
		0 4px 12px rgba(0,0,0,0.2);
	position: relative;
	overflow: hidden;
}

.visualizer::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(255,77,210,0.1) 25%, 
		rgba(0,212,255,0.08) 75%, 
		transparent 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.mini-player.playing .visualizer::before {
	opacity: 1;
	animation: visualizer-glow 4s ease-in-out infinite;
}

@keyframes visualizer-glow {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 0.7; }
}

.eq-bar {
	width: 6px;
	height: 4px;
	background: linear-gradient(180deg, 
		#ff4dd2 0%, 
		#b266ff 30%, 
		#00d4ff 70%,
		#ffd166 100%);
	border-radius: 3px;
	transition: height 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.08s ease-out, transform 0.08s ease-out;
	box-shadow: 
		0 0 10px rgba(255,77,210,0.4),
		0 0 6px rgba(178,102,255,0.6),
		inset 0 1px 0 rgba(255,255,255,0.2);
	animation: eq-idle 3s ease-in-out infinite;
	transform-origin: bottom;
	position: relative;
}

.eq-bar::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(180deg, 
		rgba(255,255,255,0.3) 0%, 
		transparent 50%);
	border-radius: 3px;
	opacity: 0.6;
}

/* Bass frequencies (left bars) - deeper, slower movement */
.eq-bar:nth-child(1) { 
	animation-delay: 0s; 
	background: linear-gradient(180deg, #ff4dd2 0%, #b266ff 100%);
}
.eq-bar:nth-child(2) { 
	animation-delay: 0.2s; 
	background: linear-gradient(180deg, #ff4dd2 0%, #b266ff 100%);
}

/* Mid frequencies (center bars) - balanced movement */
.eq-bar:nth-child(3) { 
	animation-delay: 0.4s; 
	background: linear-gradient(180deg, #b266ff 0%, #00d4ff 50%, #ffd166 100%);
}
.eq-bar:nth-child(4) { 
	animation-delay: 0.6s; 
	background: linear-gradient(180deg, #b266ff 0%, #00d4ff 50%, #ffd166 100%);
}
.eq-bar:nth-child(5) { 
	animation-delay: 0.8s; 
	background: linear-gradient(180deg, #b266ff 0%, #00d4ff 50%, #ffd166 100%);
}

/* High frequencies (right bars) - faster, more responsive */
.eq-bar:nth-child(6) { 
	animation-delay: 1s; 
	background: linear-gradient(180deg, #00d4ff 0%, #ffd166 100%);
}
.eq-bar:nth-child(7) { 
	animation-delay: 1.2s; 
	background: linear-gradient(180deg, #00d4ff 0%, #ffd166 100%);
}
.eq-bar:nth-child(8) { 
	animation-delay: 1.4s; 
	background: linear-gradient(180deg, #00d4ff 0%, #ffd166 100%);
}

@keyframes eq-idle {
	0%, 100% { 
		height: 4px; 
		opacity: 0.4;
		transform: scaleY(1);
		box-shadow: 
			0 0 4px rgba(255,77,210,0.2),
			0 0 2px rgba(178,102,255,0.3);
	}
	25% { 
		height: 8px; 
		opacity: 0.6;
		transform: scaleY(1.1);
		box-shadow: 
			0 0 6px rgba(255,77,210,0.4),
			0 0 3px rgba(178,102,255,0.5);
	}
	50% { 
		height: 12px; 
		opacity: 0.8;
		transform: scaleY(1.2);
		box-shadow: 
			0 0 8px rgba(255,77,210,0.5),
			0 0 4px rgba(178,102,255,0.6);
	}
	75% { 
		height: 6px; 
		opacity: 0.5;
		transform: scaleY(1.05);
		box-shadow: 
			0 0 5px rgba(255,77,210,0.3),
			0 0 2px rgba(178,102,255,0.4);
	}
}

/* Enhanced playing state with beat-synchronized animations */
.mini-player.playing .eq-bar {
	animation: none;
	transition: height 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.08s ease-out, transform 0.08s ease-out;
}

/* Bass bars - slower, deeper beats */
.mini-player.playing .eq-bar:nth-child(1) { 
	animation: bass-beat 1.2s ease-in-out infinite;
}
.mini-player.playing .eq-bar:nth-child(2) { 
	animation: bass-beat 1.2s ease-in-out infinite 0.3s;
}

/* Mid bars - medium tempo */
.mini-player.playing .eq-bar:nth-child(3) { 
	animation: mid-beat 0.8s ease-in-out infinite 0.1s;
}
.mini-player.playing .eq-bar:nth-child(4) { 
	animation: mid-beat 0.8s ease-in-out infinite 0.2s;
}
.mini-player.playing .eq-bar:nth-child(5) { 
	animation: mid-beat 0.8s ease-in-out infinite 0.4s;
}

/* High bars - fast, responsive */
.mini-player.playing .eq-bar:nth-child(6) { 
	animation: high-beat 0.4s ease-in-out infinite 0.05s;
}
.mini-player.playing .eq-bar:nth-child(7) { 
	animation: high-beat 0.4s ease-in-out infinite 0.15s;
}
.mini-player.playing .eq-bar:nth-child(8) { 
	animation: high-beat 0.4s ease-in-out infinite 0.25s;
}

@keyframes bass-beat {
	0%, 100% { 
		height: 4px; 
		opacity: 0.6;
		transform: scaleY(1);
		box-shadow: 
			0 0 6px rgba(255,77,210,0.4),
			0 0 3px rgba(178,102,255,0.5);
	}
	20% { 
		height: 16px; 
		opacity: 1;
		transform: scaleY(1.3);
		box-shadow: 
			0 0 12px rgba(255,77,210,0.8),
			0 0 6px rgba(178,102,255,0.9);
	}
	40% { 
		height: 8px; 
		opacity: 0.8;
		transform: scaleY(1.1);
		box-shadow: 
			0 0 8px rgba(255,77,210,0.6),
			0 0 4px rgba(178,102,255,0.7);
	}
	60% { 
		height: 20px; 
		opacity: 1;
		transform: scaleY(1.4);
		box-shadow: 
			0 0 15px rgba(255,77,210,0.9),
			0 0 8px rgba(178,102,255,1);
	}
	80% { 
		height: 6px; 
		opacity: 0.7;
		transform: scaleY(1.05);
		box-shadow: 
			0 0 7px rgba(255,77,210,0.5),
			0 0 3px rgba(178,102,255,0.6);
	}
}

@keyframes mid-beat {
	0%, 100% { 
		height: 4px; 
		opacity: 0.5;
		transform: scaleY(1);
		box-shadow: 
			0 0 5px rgba(178,102,255,0.3),
			0 0 2px rgba(0,212,255,0.4);
	}
	25% { 
		height: 12px; 
		opacity: 0.9;
		transform: scaleY(1.2);
		box-shadow: 
			0 0 10px rgba(178,102,255,0.7),
			0 0 5px rgba(0,212,255,0.8);
	}
	50% { 
		height: 6px; 
		opacity: 0.6;
		transform: scaleY(1.05);
		box-shadow: 
			0 0 6px rgba(178,102,255,0.4),
			0 0 3px rgba(0,212,255,0.5);
	}
	75% { 
		height: 14px; 
		opacity: 1;
		transform: scaleY(1.25);
		box-shadow: 
			0 0 11px rgba(178,102,255,0.8),
			0 0 6px rgba(0,212,255,0.9);
	}
}

@keyframes high-beat {
	0%, 100% { 
		height: 4px; 
		opacity: 0.4;
		transform: scaleY(1);
		box-shadow: 
			0 0 4px rgba(0,212,255,0.2),
			0 0 2px rgba(255,209,102,0.3);
	}
	30% { 
		height: 10px; 
		opacity: 0.8;
		transform: scaleY(1.15);
		box-shadow: 
			0 0 8px rgba(0,212,255,0.6),
			0 0 4px rgba(255,209,102,0.7);
	}
	60% { 
		height: 6px; 
		opacity: 0.5;
		transform: scaleY(1.05);
		box-shadow: 
			0 0 5px rgba(0,212,255,0.3),
			0 0 2px rgba(255,209,102,0.4);
	}
	90% { 
		height: 8px; 
		opacity: 0.7;
		transform: scaleY(1.1);
		box-shadow: 
			0 0 7px rgba(0,212,255,0.5),
			0 0 3px rgba(255,209,102,0.6);
	}
}

.stream-info .info-grid,
.security-info .security-grid,
.stream-links .links-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.info-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	padding: 14px;
}

.info-icon i { color: #f8ef64; font-size: 18px; }
.info-content h3 { margin: 0 0 4px 0; font-size: 13px; color: #c7c7c7; }
.info-content .info-value { margin: 0; font-size: 16px; }

.stream-links h3,
.security-info h3 { margin: 6px 0 10px 0; }

.stream-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	color: #fff;
}

.stream-link.admin-link i.fa-lock { margin-left: auto; color: #d7d7d7; }

.security-grid .security-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
}

@media (max-width: 900px) {
	.player-container { grid-template-columns: 1fr; }
	.stream-info .info-grid,
	.security-info .security-grid,
	.stream-links .links-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Minimal player overrides */
.stage {
	min-height: 100vh;
	display: grid;
	place-items: center;
	position: relative;
	overflow: hidden;
}

/* Enhanced magical floating particles with aurora effect */
.stage::before,
.stage::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,209,102,0.6), transparent);
	border-radius: 50%;
	animation: sparkle 4s ease-in-out infinite;
	box-shadow: 0 0 20px rgba(255,209,102,0.4);
}

.stage::before {
	top: 20%;
	left: 10%;
	animation-delay: 0s;
}

.stage::after {
	top: 70%;
	right: 15%;
	animation-delay: 2s;
}

/* Aurora-like background animation */
.stage {
	position: relative;
}

.stage::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		radial-gradient(600px circle at var(--x, 50%) var(--y, 50%), 
			rgba(255,77,210,0.08) 0%, 
			rgba(178,102,255,0.05) 25%, 
			rgba(0,212,255,0.03) 50%, 
			transparent 70%);
	opacity: 0.7;
	animation: aurora 20s ease-in-out infinite;
	pointer-events: none;
}

@keyframes sparkle {
	0%, 100% { 
		opacity: 0; 
		transform: scale(0) translateY(0px) rotate(0deg);
		box-shadow: 0 0 10px rgba(255,209,102,0.2);
	}
	50% { 
		opacity: 1; 
		transform: scale(1.2) translateY(-20px) rotate(180deg);
		box-shadow: 0 0 30px rgba(255,209,102,0.6);
	}
}

@keyframes aurora {
	0%, 100% { 
		--x: 20%; --y: 30%; 
		opacity: 0.4;
		transform: rotate(0deg) scale(1);
	}
	25% { 
		--x: 80%; --y: 20%; 
		opacity: 0.7;
		transform: rotate(90deg) scale(1.1);
	}
	50% { 
		--x: 70%; --y: 80%; 
		opacity: 0.5;
		transform: rotate(180deg) scale(0.9);
	}
	75% { 
		--x: 30%; --y: 70%; 
		opacity: 0.8;
		transform: rotate(270deg) scale(1.05);
	}
}

/* Enhanced floating particle system */
.floating-star {
	position: absolute;
	border-radius: 50%;
	animation: float-star 8s ease-in-out infinite;
}

.floating-star:nth-child(1) { 
	width: 3px; height: 3px;
	top: 15%; left: 20%; 
	animation-delay: 1s;
	background: radial-gradient(circle, rgba(255,209,102,0.9), transparent);
	box-shadow: 0 0 10px rgba(255,209,102,0.5);
}
.floating-star:nth-child(2) { 
	width: 2px; height: 2px;
	top: 80%; left: 80%; 
	animation-delay: 3s;
	background: radial-gradient(circle, rgba(255,77,210,0.8), transparent);
	box-shadow: 0 0 8px rgba(255,77,210,0.4);
}
.floating-star:nth-child(3) { 
	width: 4px; height: 4px;
	top: 40%; right: 10%; 
	animation-delay: 0.5s;
	background: radial-gradient(circle, rgba(0,212,255,0.9), transparent);
	box-shadow: 0 0 12px rgba(0,212,255,0.6);
}
.floating-star:nth-child(4) { 
	width: 2px; height: 2px;
	bottom: 20%; left: 30%; 
	animation-delay: 2.5s;
	background: radial-gradient(circle, rgba(178,102,255,0.8), transparent);
	box-shadow: 0 0 8px rgba(178,102,255,0.4);
}
.floating-star:nth-child(5) { 
	width: 3px; height: 3px;
	top: 60%; left: 5%; 
	animation-delay: 4s;
	background: radial-gradient(circle, rgba(255,255,255,0.9), transparent);
	box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
.floating-star:nth-child(6) { 
	width: 2px; height: 2px;
	top: 30%; right: 25%; 
	animation-delay: 1.8s;
	background: radial-gradient(circle, rgba(255,209,102,0.8), transparent);
	box-shadow: 0 0 8px rgba(255,209,102,0.4);
}
.floating-star:nth-child(7) { 
	width: 4px; height: 4px;
	bottom: 40%; right: 5%; 
	animation-delay: 3.2s;
	background: radial-gradient(circle, rgba(255,77,210,0.9), transparent);
	box-shadow: 0 0 12px rgba(255,77,210,0.6);
}
.floating-star:nth-child(8) { 
	width: 2px; height: 2px;
	top: 10%; left: 60%; 
	animation-delay: 0.8s;
	background: radial-gradient(circle, rgba(0,212,255,0.8), transparent);
	box-shadow: 0 0 8px rgba(0,212,255,0.4);
}

@keyframes float-star {
	0%, 100% { 
		opacity: 0.3; 
		transform: translateY(0px) scale(0.8);
	}
	50% { 
		opacity: 0.9; 
		transform: translateY(-15px) scale(1.2);
	}
}


.mini-player {
	width: 440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 16px;
	padding: 22px 24px;
	border-radius: 32px;
	background: 
		linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.03)),
		linear-gradient(225deg, rgba(255,77,210,0.08), transparent 40%),
		linear-gradient(315deg, rgba(0,212,255,0.06), transparent 40%),
		rgba(10,10,12,0.92);
	border: 1px solid rgba(255,255,255,0.18);
	box-shadow: 
		0 32px 64px rgba(0,0,0,0.9),
		0 0 140px rgba(255,77,210,0.3),
		0 0 240px rgba(0,212,255,0.15),
		0 0 120px rgba(178,102,255,0.1),
		inset 0 1px 0 rgba(255,255,255,0.25),
		inset 0 -1px 0 rgba(0,0,0,0.4);
	backdrop-filter: blur(25px) saturate(2.0) contrast(1.1);
	position: relative;
	isolation: isolate;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	animation: float 6s ease-in-out infinite, fadeInUp 1.2s ease-out;
}


.mini-player:hover {
	transform: translateY(-3px) scale(1.025);
	border-color: rgba(255,255,255,0.25);
	box-shadow: 
		0 35px 70px rgba(0,0,0,0.8),
		0 0 160px rgba(255,77,210,0.4),
		0 0 280px rgba(0,212,255,0.2),
		0 0 140px rgba(178,102,255,0.15),
		inset 0 1px 0 rgba(255,255,255,0.3),
		inset 0 -1px 0 rgba(0,0,0,0.2);
}

@keyframes float {
	0%, 100% { transform: translateY(0px) scale(1); }
	50% { transform: translateY(-3px) scale(1.01); }
}

@keyframes fadeInUp {
	0% { 
		opacity: 0; 
		transform: translateY(40px) scale(0.9);
		filter: blur(10px);
	}
	100% { 
		opacity: 1; 
		transform: translateY(0px) scale(1);
		filter: blur(0px);
	}
}

/* Enhanced flowing light orbs around the player */
.mini-player .orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
	opacity: 0.6;
	pointer-events: none;
	background: radial-gradient(circle at 45% 45%, rgba(255,77,210,0.95), rgba(178,102,255,0.4), rgba(0,212,255,0.2), transparent);
	animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.mini-player .orb.one { 
	width: 180px; height: 180px; 
	top: -70px; left: -90px; 
	animation: drift1 14s ease-in-out infinite, pulse1 8s ease-in-out infinite;
}
.mini-player .orb.two { 
	width: 220px; height: 220px; 
	bottom: -90px; right: -110px; 
	animation: drift2 16s ease-in-out infinite, pulse2 10s ease-in-out infinite;
}
.mini-player .orb.three { 
	width: 140px; height: 140px; 
	top: -50px; right: 15%; 
	animation: drift3 12s ease-in-out infinite, pulse3 6s ease-in-out infinite; 
	opacity: .5;
}

@keyframes drift1 {
	0% { transform: translate(0,0) scale(1); }
	33% { transform: translate(20px, -15px) scale(1.1); }
	66% { transform: translate(-10px, 25px) scale(0.9); }
	100% { transform: translate(0,0) scale(1); }
}
@keyframes drift2 {
	0% { transform: translate(0,0) scale(1); }
	25% { transform: translate(-20px, -20px) scale(1.05); }
	75% { transform: translate(15px, -30px) scale(0.95); }
	100% { transform: translate(0,0) scale(1); }
}
@keyframes drift3 {
	0% { transform: translate(0,0) scale(1); }
	40% { transform: translate(-15px, 20px) scale(1.08); }
	80% { transform: translate(10px, -10px) scale(0.92); }
	100% { transform: translate(0,0) scale(1); }
}

@keyframes pulse1 {
	0%, 100% { opacity: 0.6; filter: blur(40px); }
	50% { opacity: 0.8; filter: blur(35px); }
}
@keyframes pulse2 {
	0%, 100% { opacity: 0.6; filter: blur(40px); }
	50% { opacity: 0.75; filter: blur(45px); }
}
@keyframes pulse3 {
	0%, 100% { opacity: 0.5; filter: blur(40px); }
	50% { opacity: 0.7; filter: blur(30px); }
}


.avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 
		0 12px 25px rgba(0,0,0,0.5),
		0 0 25px rgba(255,77,210,0.3),
		inset 0 1px 0 rgba(255,255,255,0.15);
	border: 3px solid rgba(255,255,255,0.15);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.avatar::before {
	content: '';
	position: absolute;
	top: -3px; left: -3px; right: -3px; bottom: -3px;
	background: linear-gradient(45deg, #ff4dd2, #b266ff, #00d4ff, #ffd166);
	border-radius: 50%;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.avatar:hover {
	transform: scale(1.08);
	box-shadow: 
		0 16px 35px rgba(0,0,0,0.6),
		0 0 40px rgba(255,77,210,0.4),
		inset 0 1px 0 rgba(255,255,255,0.2);
}

.avatar:hover::before {
	opacity: 0.8;
}

.details { 
	min-width: 0; 
	padding-left: 4px;
}
.details .station-name { 
	margin: 0 0 8px 0; 
	font-size: 20px; 
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis;
	background: linear-gradient(135deg, #fff 0%, #ffd166 50%, #ff4dd2 85%, #b266ff 100%);
	background-size: 300% 300%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: gradient-shift 10s ease-in-out infinite;
	position: relative;
	filter: drop-shadow(0 0 20px rgba(255,209,102,0.4));
}

.details .station-name::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(255,209,102,0.8), rgba(255,77,210,0.6), transparent);
	border-radius: 1px;
	filter: blur(1px);
	animation: underline-glow 4s ease-in-out infinite;
}

@keyframes gradient-shift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes underline-glow {
	0%, 100% { opacity: 0.6; transform: scaleX(0.8); }
	50% { opacity: 1; transform: scaleX(1); }
}
.now-title { 
	margin: 0 0 12px 0; 
	color: #e8e8e8; 
	font-size: 14px; 
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.4;
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis;
	transition: all 0.3s ease;
}
.now-title:hover {
	color: #fff;
	transform: translateX(2px);
}
.now-title .sep { 
	opacity: .7; 
	padding: 0 8px; 
	color: #ff4dd2;
	font-weight: 300;
}
.now-title .artist { 
	font-weight: 700; 
	color: #fff;
	text-shadow: 0 0 15px rgba(255,255,255,0.4);
}
.now-title .track {
	color: #e0e0e0;
	font-weight: 400;
}

.controls { 
	display: flex; 
	align-items: center; 
	gap: 12px;
	position: relative;
}

.controls::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(255,77,210,0.6), rgba(0,212,255,0.6), transparent);
	border-radius: 1px;
	filter: blur(1px);
	animation: control-glow 6s ease-in-out infinite;
}

@keyframes control-glow {
	0%, 100% { opacity: 0.4; transform: translateX(-50%) scaleX(0.7); }
	50% { opacity: 0.8; transform: translateX(-50%) scaleX(1); }
}
.controls .control-btn {
	width: 44px; height: 44px; border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.25);
	background: 
		linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)),
		linear-gradient(225deg, rgba(255,77,210,0.1), transparent),
		rgba(255,255,255,0.02);
	color: #fff; display: grid; place-items: center; cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 
		0 6px 16px rgba(0,0,0,0.3),
		0 0 20px rgba(255,77,210,0.1),
		inset 0 1px 0 rgba(255,255,255,0.15),
		inset 0 -1px 0 rgba(0,0,0,0.1);
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(10px);
}

.controls .control-btn::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
}

.controls .control-btn:hover {
	transform: translateY(-2px) scale(1.05);
	border-color: rgba(255,255,255,0.35);
	background: 
		linear-gradient(145deg, rgba(255,255,255,0.25), rgba(255,255,255,0.1)),
		linear-gradient(225deg, rgba(255,77,210,0.15), transparent),
		rgba(255,255,255,0.05);
	box-shadow: 
		0 8px 20px rgba(0,0,0,0.4),
		0 0 30px rgba(255,77,210,0.2),
		0 0 15px rgba(0,212,255,0.1),
		inset 0 1px 0 rgba(255,255,255,0.2),
		inset 0 -1px 0 rgba(0,0,0,0.05);
}

.controls .control-btn:hover::before {
	transform: translateX(100%);
}

.controls .control-btn:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 
		0 2px 8px rgba(0,0,0,0.4),
		inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Visualizer button special styling */
.controls .visualizer-btn {
	background: 
		linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08)),
		linear-gradient(225deg, rgba(255,77,210,0.2), rgba(0,212,255,0.15)),
		rgba(255,255,255,0.03);
	border-color: rgba(255,77,210,0.3);
	box-shadow: 
		0 6px 16px rgba(0,0,0,0.3),
		0 0 25px rgba(255,77,210,0.15),
		0 0 15px rgba(0,212,255,0.1),
		inset 0 1px 0 rgba(255,255,255,0.15);
}

.controls .visualizer-btn:hover {
	background: 
		linear-gradient(145deg, rgba(255,255,255,0.3), rgba(255,255,255,0.15)),
		linear-gradient(225deg, rgba(255,77,210,0.25), rgba(0,212,255,0.2)),
		rgba(255,255,255,0.08);
	border-color: rgba(255,77,210,0.5);
	box-shadow: 
		0 8px 20px rgba(0,0,0,0.4),
		0 0 35px rgba(255,77,210,0.25),
		0 0 20px rgba(0,212,255,0.15),
		inset 0 1px 0 rgba(255,255,255,0.2);
}

.controls .visualizer-btn i {
	color: #ff4dd2;
	text-shadow: 0 0 10px rgba(255,77,210,0.5);
}

/* Loading state for play button */
.controls .control-btn.loading {
	animation: pulse-loading 1.5s ease-in-out infinite;
}

.controls .control-btn.loading i {
	animation: spin 1s linear infinite;
}

@keyframes pulse-loading {
	0%, 100% { 
		box-shadow: 
			0 6px 16px rgba(0,0,0,0.3),
			0 0 20px rgba(255,77,210,0.1),
			inset 0 1px 0 rgba(255,255,255,0.15);
	}
	50% { 
		box-shadow: 
			0 8px 20px rgba(0,0,0,0.4),
			0 0 30px rgba(255,77,210,0.3),
			inset 0 1px 0 rgba(255,255,255,0.2);
	}
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.volume { display: flex; align-items: center; gap: 10px; }
.vol-icon { 
	color: #ffd166; 
	transition: all 0.2s ease;
	filter: drop-shadow(0 0 8px rgba(255,209,102,0.3));
}
.vol-icon:hover {
	color: #ffdd80;
	filter: drop-shadow(0 0 12px rgba(255,209,102,0.5));
}
.volume-range { 
	width: 170px; 
	accent-color: #ffd166;
	background: rgba(255,255,255,0.1);
	border-radius: 10px;
	height: 6px;
	outline: none;
	transition: all 0.2s ease;
}
.volume-range:hover {
	background: rgba(255,255,255,0.15);
}
.volume-range::-webkit-slider-thumb {
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: linear-gradient(145deg, #ffd166, #ffb84d);
	border: 2px solid rgba(255,255,255,0.2);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	transition: all 0.2s ease;
}
.volume-range::-webkit-slider-thumb:hover {
	transform: scale(1.1);
	box-shadow: 0 3px 12px rgba(0,0,0,0.4), 0 0 16px rgba(255,209,102,0.4);
}

/* Playing state enhancements */
.mini-player.playing {
	animation: float 6s ease-in-out infinite, glow 4s ease-in-out infinite, breathe 3s ease-in-out infinite;
}

@keyframes breathe {
	0%, 100% { 
		transform: scale(1) translateY(0px);
		filter: brightness(1) saturate(1);
	}
	50% { 
		transform: scale(1.01) translateY(-1px);
		filter: brightness(1.05) saturate(1.1);
	}
}

.mini-player.playing .avatar {
	animation: rotate 20s linear infinite;
	box-shadow: 
		0 8px 20px rgba(0,0,0,0.4),
		0 0 30px rgba(255,77,210,0.4),
		inset 0 1px 0 rgba(255,255,255,0.1);
}

.mini-player.playing .orb {
	animation-duration: 8s, 4s;
}

@keyframes glow {
	0%, 100% { 
		border-color: rgba(255,255,255,0.15);
	}
	50% { 
		border-color: rgba(255,255,255,0.25);
	}
}

@keyframes rotate {
	from { transform: rotate(0deg) scale(1); }
	to { transform: rotate(360deg) scale(1); }
}

@media (max-width: 560px) {
	.mini-player { 
		width: 95%; 
		grid-template-columns: 48px 1fr; 
		padding: 16px 18px;
		border-radius: 26px;
		backdrop-filter: blur(20px) saturate(1.8);
	}
	.avatar { width: 44px; height: 44px; }
	.volume-range { width: 130px; }
	.controls .control-btn { width: 42px; height: 42px; }
	.details .station-name { font-size: 17px; }
	.now-title { font-size: 13px; }
	.controls { gap: 10px; }
	.visualizer { height: 28px; padding: 6px 10px; }
	.eq-bar { width: 5px; }
}

@media (max-width: 520px) {
	.stream-info .info-grid,
	.security-info .security-grid,
	.stream-links .links-grid { grid-template-columns: 1fr; }
	
	body { padding: 0 15px; }
	
	.floating-star { display: none; } /* Hide decorative elements on small screens */
	
	.stage::before,
	.stage::after { display: none; }
	
	.social-footer {
		bottom: 10px;
		gap: 12px;
	}
	
	.social-footer .social {
		padding: 8px 12px;
		gap: 8px;
	}
	
	.social-footer .social img { width: 20px; height: 20px; }
	.social-footer .social span { font-size: 13px; }
}

@media (max-width: 400px) {
	.mini-player {
		width: 96%;
		padding: 12px;
		grid-template-columns: 40px 1fr;
		gap: 10px;
	}
	
	.avatar { width: 36px; height: 36px; }
	.controls .control-btn { width: 36px; height: 36px; }
	.details .station-name { font-size: 15px; }
	.now-title { font-size: 13px; }
	.volume-range { width: 100px; }
	
	.mini-player .orb.one { width: 120px; height: 120px; top: -50px; left: -60px; }
	.mini-player .orb.two { width: 150px; height: 150px; bottom: -60px; right: -75px; }
	.mini-player .orb.three { width: 100px; height: 100px; top: -30px; right: 10%; }
}

.social-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 20px;
	display: flex;
	justify-content: center;
	gap: 20px;
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	z-index: 100;
}

.social-footer .social {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border-radius: 999px;
	background: 
		linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
		linear-gradient(225deg, rgba(255,77,210,0.06), transparent 50%),
		rgba(10,10,12,0.6);
	border: 1px solid rgba(255,255,255,0.15);
	color: #fff;
	text-decoration: none;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	backdrop-filter: blur(15px) saturate(1.5);
	position: relative;
	overflow: hidden;
	box-shadow: 
		0 8px 25px rgba(0,0,0,0.3),
		inset 0 1px 0 rgba(255,255,255,0.1);
}

.social-footer .social::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(45deg, transparent, rgba(255,255,255,0.08), transparent);
	transform: translateX(-100%);
	transition: transform 0.4s ease;
}

.social-footer .social:hover {
	transform: translateY(-3px) scale(1.02);
	background: 
		linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)),
		linear-gradient(225deg, rgba(255,77,210,0.1), transparent 50%),
		rgba(10,10,12,0.7);
	border-color: rgba(255,255,255,0.25);
	box-shadow: 
		0 12px 35px rgba(0,0,0,0.4),
		0 0 30px rgba(255,77,210,0.15),
		0 0 15px rgba(0,212,255,0.08),
		inset 0 1px 0 rgba(255,255,255,0.15);
}

.social-footer .social:hover::before {
	transform: translateX(100%);
}

.social-footer .social img { 
	width: 24px; height: 24px; 
	border-radius: 6px; 
	display: block; 
	transition: all 0.2s ease;
}
.social-footer .social:hover img {
	transform: scale(1.05);
	filter: brightness(1.1);
}
.social-footer .social span { 
	font-size: 14px; 
	opacity: 0.9; 
	font-weight: 500;
	transition: opacity 0.2s ease;
}
.social-footer .social:hover span {
	opacity: 1;
}

.social-footer .is-disabled { 
	opacity: 0.6; 
	cursor: default; 
	pointer-events: none;
}

/* Full-Screen Visualizer */
.fullscreen-visualizer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #000;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.fullscreen-visualizer.active {
	opacity: 1;
	visibility: visible;
}

.fullscreen-visualizer canvas {
	width: 100%;
	height: 100%;
	display: block;
}

.visualizer-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.2);
	background: 
		linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)),
		rgba(10,10,12,0.8);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	z-index: 1000;
}

.visualizer-toggle:hover {
	transform: translateY(-2px) scale(1.05);
	border-color: rgba(255,255,255,0.3);
	background: 
		linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08)),
		rgba(10,10,12,0.9);
	box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.visualizer-mode,
.visualizer-close {
	position: absolute;
	top: 20px;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.2);
	background: 
		linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)),
		rgba(10,10,12,0.8);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	opacity: 0;
	transform: translateY(-10px);
}

.visualizer-mode {
	right: 80px;
}

.visualizer-close {
	right: 20px;
}

.fullscreen-visualizer.active .visualizer-mode,
.fullscreen-visualizer.active .visualizer-close {
	opacity: 1;
	transform: translateY(0);
}

.visualizer-mode:hover,
.visualizer-close:hover {
	transform: translateY(-2px) scale(1.05);
	border-color: rgba(255,255,255,0.3);
	box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

/* Album Art Container */
.avatar-container {
	position: relative;
	width: 52px;
	height: 52px;
}

.album-art-loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.album-art-loading.active {
	opacity: 1;
	visibility: visible;
}

.avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 
		0 12px 25px rgba(0,0,0,0.5),
		0 0 25px rgba(255,77,210,0.3),
		inset 0 1px 0 rgba(255,255,255,0.15);
	border: 3px solid rgba(255,255,255,0.15);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

/* Enhanced avatar effects for album art changes */
.avatar.updating {
	animation: albumArtUpdate 0.6s ease-in-out;
}

@keyframes albumArtUpdate {
	0% { 
		transform: scale(1) rotate(0deg);
		filter: brightness(1) saturate(1);
	}
	50% { 
		transform: scale(0.9) rotate(5deg);
		filter: brightness(1.2) saturate(1.3);
	}
	100% { 
		transform: scale(1) rotate(0deg);
		filter: brightness(1) saturate(1);
	}
}