* {
	font-family: "Garet", sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #000;
	color: #fff;
	min-height: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow-x: hidden;
	/* Prevent horizontal scrollbar */
}

html {
	height: 100%;
}

/* TEMPORAL RADIO PROTOCOL LOADER */
.temporal-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #000;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

/* Hide scrollbar when loader is active */
body:has(.temporal-loader) {
	overflow: hidden;
}

/* Fallback for browsers that don't support :has() */
.temporal-loader-active {
	overflow: hidden !important;
}

.temporal-loader.fade-out {
	opacity: 0;
	visibility: hidden;
}

.loader-content {
	text-align: center;
	position: relative;
	z-index: 2;
	max-width: 90vw;
}

.protocol-status {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	margin-bottom: 3rem;
}



.protocol-text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.main-text {
	font-size: clamp(1.25rem, 4vw, 2.5rem);
	font-weight: bold;
	color: #2dd4bf;
	text-shadow: 0 0 20px rgba(45, 212, 191, 0.8);
	position: relative;
	margin-bottom: 1rem;
	animation: mainGlitch 3s linear infinite;
	letter-spacing: 0.1em;
}

.main-text::before,
.main-text::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
}

.main-text::before {
	color: #ff0040;
	animation: glitchBefore 3s linear infinite;
	z-index: -1;
}

.main-text::after {
	color: #00ffff;
	animation: glitchAfter 3s linear infinite;
	z-index: -2;
}

.sub-text {
	font-size: clamp(0.875rem, 2vw, 1.125rem);
	color: #9ca3af;
	letter-spacing: 0.05em;
}

.typing-text {
	display: inline-block;
	position: relative;
	animation: textFlicker 0.1s ease-in-out infinite alternate;
}

.typing-text::after {
	content: '_';
	color: #2dd4bf;
	animation: cursorFlash 1s step-end infinite;
	margin-left: 2px;
}

.loader-progress {
	width: clamp(250px, 50vw, 400px);
	height: 4px;
	background: rgba(45, 212, 191, 0.2);
	border-radius: 2px;
	margin: 0 auto 2rem;
	position: relative;
	overflow: hidden;
}

.progress-line {
	height: 100%;
	background: linear-gradient(90deg, 
		transparent 0%, 
		#2dd4bf 50%, 
		transparent 100%);
	width: 100%;
	border-radius: 2px;
	animation: progressScan 2s linear infinite;
	box-shadow: 0 0 10px rgba(45, 212, 191, 0.8);
}

.progress-glitch {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(255, 0, 64, 0.8) 49%, 
		rgba(0, 255, 255, 0.8) 51%, 
		transparent 100%);
	animation: progressGlitch 3s linear infinite;
	opacity: 0;
}

.loader-particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.particle {
	position: absolute;
	width: 2px;
	height: 2px;
	background: #2dd4bf;
	border-radius: 50%;
	opacity: 0;
	animation: particleFloat 4s linear infinite;
}

.particle:nth-child(1) {
	left: 20%;
	animation-delay: 0s;
}

.particle:nth-child(2) {
	left: 40%;
	animation-delay: 0.8s;
}

.particle:nth-child(3) {
	left: 60%;
	animation-delay: 1.6s;
}

.particle:nth-child(4) {
	left: 80%;
	animation-delay: 2.4s;
}

.particle:nth-child(5) {
	left: 30%;
	animation-delay: 3.2s;
}

.loader-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at center, 
		transparent 0%, 
		rgba(0, 0, 0, 0.3) 70%, 
		rgba(0, 0, 0, 0.8) 100%);
	z-index: 1;
	animation: overlayPulse 4s ease-in-out infinite;
}

/* LOADER ANIMATIONS */

@keyframes mainGlitch {
	0%, 90%, 100% {
		transform: translate3d(0, 0, 0);
	}
	10% {
		transform: translate3d(-2px, 0, 0);
	}
	20% {
		transform: translate3d(2px, 0, 0);
	}
	30% {
		transform: translate3d(-2px, 0, 0);
	}
	40% {
		transform: translate3d(2px, 0, 0);
	}
	50% {
		transform: translate3d(-2px, 0, 0);
	}
	60% {
		transform: translate3d(2px, 0, 0);
	}
	70% {
		transform: translate3d(-2px, 0, 0);
	}
	80% {
		transform: translate3d(2px, 0, 0);
	}
}

@keyframes glitchBefore {
	0%, 90%, 100% {
		transform: translate3d(0, 0, 0);
		opacity: 0;
	}
	10% {
		transform: translate3d(-2px, -1px, 0);
		opacity: 0.8;
	}
	20% {
		transform: translate3d(2px, 1px, 0);
		opacity: 0;
	}
	30% {
		transform: translate3d(-2px, -1px, 0);
		opacity: 0.8;
	}
	40% {
		transform: translate3d(2px, 1px, 0);
		opacity: 0;
	}
	50% {
		transform: translate3d(-2px, -1px, 0);
		opacity: 0.8;
	}
}

@keyframes glitchAfter {
	0%, 90%, 100% {
		transform: translate3d(0, 0, 0);
		opacity: 0;
	}
	15% {
		transform: translate3d(2px, 1px, 0);
		opacity: 0.6;
	}
	25% {
		transform: translate3d(-2px, -1px, 0);
		opacity: 0;
	}
	35% {
		transform: translate3d(2px, 1px, 0);
		opacity: 0.6;
	}
	45% {
		transform: translate3d(-2px, -1px, 0);
		opacity: 0;
	}
	55% {
		transform: translate3d(2px, 1px, 0);
		opacity: 0.6;
	}
}

@keyframes textFlicker {
	0% { opacity: 1; }
	50% { opacity: 0.8; }
	100% { opacity: 1; }
}

@keyframes cursorFlash {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}

@keyframes progressScan {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

@keyframes progressGlitch {
	0%, 90%, 100% {
		opacity: 0;
		transform: translateX(0);
	}
	5% {
		opacity: 1;
		transform: translateX(-10px);
	}
	10% {
		opacity: 0;
		transform: translateX(10px);
	}
	15% {
		opacity: 1;
		transform: translateX(-5px);
	}
	20% {
		opacity: 0;
		transform: translateX(5px);
	}
}

@keyframes particleFloat {
	0% {
		transform: translateY(100vh) scale(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
		transform: translateY(90vh) scale(1);
	}
	90% {
		opacity: 1;
		transform: translateY(-10vh) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(-20vh) scale(0);
	}
}

@keyframes overlayPulse {
	0%, 100% {
		background: radial-gradient(circle at center, 
			transparent 0%, 
			rgba(0, 0, 0, 0.3) 70%, 
			rgba(0, 0, 0, 0.8) 100%);
	}
	50% {
		background: radial-gradient(circle at center, 
			transparent 0%, 
			rgba(45, 212, 191, 0.05) 70%, 
			rgba(0, 0, 0, 0.9) 100%);
	}
}

/* Mobile responsiveness for loader */
@media (max-width: 640px) {
	.protocol-status {
		gap: 1.5rem;
		margin-bottom: 2rem;
	}
	

	
	.main-text {
		letter-spacing: 0.05em;
	}
	
	.loader-progress {
		width: clamp(200px, 80vw, 300px);
		margin-bottom: 1.5rem;
	}
}

@media (max-width: 480px) {
	.protocol-status {
		gap: 1rem;
		margin-bottom: 1.5rem;
	}
	

	
	.loader-progress {
		width: clamp(150px, 90vw, 250px);
		height: 3px;
	}
	
	.particle {
		width: 1px;
		height: 1px;
	}
}

#currentTime,
#remainingTime {
	font-variant-numeric: tabular-nums;
}

.live-indicator {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	font-weight: bold;
	font-size: 0.875rem;
	margin-bottom: 8px;
}

.live-dot {
	width: 8px;
	height: 8px;
	background-color: #ef4444;
	border-radius: 50%;
	animation: livePulse 2s ease-in-out infinite;
	box-shadow: 0 0 6px #ef4444;
}

.live-text {
	color: #ef4444;
	font-weight: bold;
	text-shadow: 0 0 8px #ef4444, 0 0 12px #ef4444, 0 0 16px #ef4444;
	animation: liveGlow 2s ease-in-out infinite alternate;
}

@keyframes livePulse {

	0%,
	100% {
		transform: scale(1);
		opacity: 1;
		box-shadow: 0 0 6px #ef4444;
	}

	50% {
		transform: scale(1.2);
		opacity: 0.8;
		box-shadow: 0 0 12px #ef4444, 0 0 20px #ef4444;
	}
}

@keyframes liveGlow {
	0% {
		text-shadow: 0 0 8px #ef4444, 0 0 12px #ef4444, 0 0 16px #ef4444;
	}

	100% {
		text-shadow: 0 0 12px #ef4444, 0 0 18px #ef4444, 0 0 24px #ef4444, 0 0 30px #ef4444;
	}
}

/* Explicit content indicator */
.explicit-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #2dd4bf;
	color: black;
	border-radius: 3px;
	font-weight: bold;
	vertical-align: middle;
	line-height: 1;
	width: 1em;
	height: 1em;
	font-size: inherit;
	margin-left: 0.3em;
	padding: 0.1em;
}

.app-header {
	padding: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.app-logo {
	font-size: 1.5rem;
	font-weight: bold;
	color: #2dd4bf;
}

.hamburger-menu {
	background: none;
	border: none;
	color: #fff;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 0.5rem;
	transition: color 0.3s ease, background-color 0.3s ease;
}

.hamburger-menu:hover {
	color: #2dd4bf;
	background-color: rgba(45, 212, 191, 0.1);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(10px);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
	opacity: 1;
	visibility: visible;
}

.mobile-menu {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 400px;
	height: 100%;
	background: linear-gradient(135deg, #111827, #1f2937, #111827);
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
}

.mobile-menu-overlay.active .mobile-menu {
	transform: translateX(0);
}

.mobile-menu-header {
	padding: 2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile-menu-header h3 {
	color: #2dd4bf;
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0;
}

.close-menu {
	background: none;
	border: none;
	color: #9ca3af;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 0.5rem;
	transition: color 0.3s ease, background-color 0.3s ease;
}

.close-menu:hover {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.1);
}

.mobile-menu-content {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.artist-cta {
	background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(6, 182, 212, 0.2));
	border: 1px solid rgba(45, 212, 191, 0.3);
	border-radius: 1rem;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.cta-icon {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, #2dd4bf, #0d9488);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cta-icon i {
	font-size: 1.5rem;
	color: #000;
}

.cta-content h4 {
	color: #2dd4bf;
	font-size: 1.125rem;
	font-weight: bold;
	margin: 0 0 0.5rem 0;
}

.cta-content p {
	color: #9ca3af;
	font-size: 0.875rem;
	margin: 0;
	line-height: 1.4;
}

.menu-items {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.menu-section {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.user-info {
	background: rgba(31, 41, 55, 0.8);
	border-radius: 1rem;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.user-avatar {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, #2dd4bf, #0d9488);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.user-avatar i {
	font-size: 1.5rem;
	color: #000;
}

.user-details .username {
	color: #fff;
	font-weight: bold;
	font-size: 1.125rem;
	margin-bottom: 0.25rem;
}

.user-details .artist-name {
	color: #9ca3af;
	font-size: 0.875rem;
}

.menu-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
	background: rgba(31, 41, 55, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
	text-decoration: none;
	color: #fff;
	font-weight: 500;
	transition: all 0.3s ease;
	cursor: pointer;
	width: 100%;
}

.menu-item:hover {
	background: rgba(45, 212, 191, 0.1);
	border-color: rgba(45, 212, 191, 0.3);
	color: #2dd4bf;
	transform: translateY(-2px);
}

.menu-item.primary {
	background: linear-gradient(135deg, #2dd4bf, #0d9488);
	border: none;
	color: #000;
}

.menu-item.primary:hover {
	background: linear-gradient(135deg, #14b8a6, #06b6d4);
	color: #000;
	transform: translateY(-2px);
}

.menu-item.logout {
	background: rgba(239, 68, 68, 0.1);
	border-color: rgba(239, 68, 68, 0.3);
	color: #ef4444;
}

.menu-item.logout:hover {
	background: rgba(239, 68, 68, 0.2);
	border-color: rgba(239, 68, 68, 0.5);
	color: #fee2e2;
}

.menu-item i {
	font-size: 1.25rem;
	width: 24px;
	text-align: center;
}

.menu-footer {
	text-align: center;
	margin-top: auto;
	padding-top: 2rem;
}

.menu-footer p {
	color: #6b7280;
	font-size: 0.875rem;
	margin: 0;
}

.main-content {
	flex: 1;
	padding: 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

.section-title {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 1.5rem;
	color: #2dd4bf;
}

.channels-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.channel-card {
	background: linear-gradient(135deg, #000000, #1f2937, #111827);
	border-radius: 1rem;
	padding: 1.5rem;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
	position: relative;
	overflow: hidden;
}

.channel-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

.channel-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(45, 212, 191, 0.1), transparent);
	opacity: 0;
	transition: opacity 0.3s;
	border-radius: 1rem;
}

.channel-card:hover::after {
	opacity: 1;
}

.channel-card.active {
	background: linear-gradient(135deg, #000000, #134e4a, #111827);
	border: 1px solid rgba(45, 212, 191, 0.3);
	box-shadow: 0 10px 25px -5px rgba(45, 212, 191, 0.2);
}

.channel-card.active::after {
	background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), transparent);
	opacity: 1;
}

.channel-card.active .channel-title {
	color: #2dd4bf;
}

.channel-title {
	font-size: 1.25rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
}

.channel-description {
	color: #9ca3af;
	font-size: 0.875rem;
}

.verified-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2em;
	height: 1.2em;
	background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
	border-radius: 50%;
	margin-left: 0.35rem;
	font-size: 0.8em;
	color: #000;
	font-weight: 900;
	box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.3);
	position: relative;
	vertical-align: middle;
	flex-shrink: 0;
}

.verified-badge::before {
	content: '';
	position: absolute;
	inset: -1px;
	background: linear-gradient(135deg, #2dd4bf, #0d9488);
	border-radius: 50%;
	z-index: -1;
}

.verified-badge i {
	font-size: 0.7em;
	color: #000;
	font-weight: 900;
}

/* Mini Player */
.mini-player {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(17, 24, 39, 0.95);
	backdrop-filter: blur(10px);
	border: none;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	z-index: 50;
	overflow-y: auto;
	overflow-x: hidden;
	max-width: 100vw;
	-webkit-overflow-scrolling: touch;
	transition: 
		background 0.8s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transform: translateY(100%);
	opacity: 0;
}

.mini-player.slide-in {
	transform: translateY(0);
	opacity: 1;
}

.mini-player.slide-out {
	transform: translateY(100%);
	opacity: 0;
}



/* Fix for body when player is active */
body.player-expanded {
	overflow: hidden;
}

.player-toggle {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	color: white;
	font-size: 1.25rem;
	cursor: pointer;
	z-index: 60;
	transition: color 0.3s ease;
}

.player-toggle:hover {
	color: #2dd4bf;
}

.song-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 2rem;
	margin-bottom: 2rem;
	width: 100%;
}

.song-title {
	font-weight: bold;
	color: #2dd4bf;
	font-size: 2rem;
	white-space: normal;
	text-align: center;
	margin-bottom: 0.5rem;
	max-width: 100%;
	word-wrap: break-word;
	line-height: 1.3;
}

.song-artist {
	font-size: 1.25rem;
	color: #9ca3af;
	white-space: normal;
	text-align: center;
	max-width: 100%;
	word-wrap: break-word;
	line-height: 1.3;
}

.player-controls {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
}

.progress-container {
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 2rem;
}

.progress-bar-container {
	flex: 1;
	height: 4px;
	background-color: #374151;
	border-radius: 2px;
	margin: 0 1rem;
	position: relative;
	cursor: pointer;
	transition: height 0.2s;
}

.progress-bar-container:hover {
	height: 6px;
}

.progress-bar {
	height: 100%;
	background-color: #2dd4bf;
	border-radius: 2px;
	width: 0%;
}

.time-display {
	font-size: 0.875rem;
	color: #9ca3af;
}

.upcoming-songs {
	display: block;
	width: 100%;
	margin-top: 2rem;
}

.song-list-title {
	font-size: 1.25rem;
	font-weight: bold;
	margin-bottom: 1rem;
	color: #9ca3af;
}

.song-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.song-item {
	display: flex;
	align-items: center;
	padding: 1rem;
	border-radius: 0.5rem;
	gap: 1rem;

	background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.song-item-artwork {
	flex-shrink: 0;
}

.song-item-album-art {
	width: 60px;
	height: 60px;
	border-radius: 0.5rem;
	overflow: hidden;
	position: relative;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.song-item-album-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.5rem;
}

.song-item-album-art .artwork-placeholder {
	width: 100%;
	height: 100%;
	border-radius: 0.5rem;
}

.song-item-album-art .artwork-placeholder::after {
	font-size: 1.5rem;
}

.song-item-info {
	flex: 1;
	min-width: 0;
}

.song-item-title {
	font-weight: bold;
	color: #2dd4bf;
}

.song-item-artist {
	font-size: 0.875rem;
	color: #9ca3af;
}

.message-card {
	display: block;
	padding: 1rem;
	border-radius: 0.5rem;
	margin-top: 1.5rem;
	text-align: center;
	width: 100%;
	box-sizing: border-box;

	background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.message-link {
	display: inline-block;
	background: linear-gradient(to right, #2dd4bf, #0d9488);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 0.25rem;
	text-decoration: none;
	font-weight: bold;
	transition: opacity 0.2s;
	margin-top: 1rem;
}

.message-link:hover {
	opacity: 0.9;
}

.loading-indicator {
	display: none;
	text-align: center;
	padding: 2rem;
}

.error-message {
	display: none;
	color: #ef4444;
	text-align: center;
	padding: 1rem;
	font-weight: bold;
}

/* Album Artwork - Vinyl Style */
.album-artwork {
	display: block;
	width: 200px;
	height: 200px;
	margin: 2rem auto 2rem auto;
	margin-bottom: 10px;
	position: relative;
	perspective: 1000px;
	transition: all 0.3s ease;
}

.artwork-wrapper {
	margin-bottom: 2rem;
}

/* Click interaction feedback */
.album-artwork.album-mode:hover {
	transform: scale(1.02);
	filter: brightness(1.1);
}

.album-artwork.vinyl-mode:hover {
	transform: scale(1.05);
	filter: brightness(1.1);
}

/* Disc.js vinyl mode styles */
.album-artwork.vinyl-mode {
	border-radius: 50%;
}

.album-artwork.vinyl-mode canvas {
	border-radius: 50%;
}

.album-artwork.album-mode {
	border-radius: 1rem;
}

.album-artwork.album-mode img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1rem;
	transition: transform 0.3s ease;
}

/* Navigation dots for artwork/vinyl toggle */
.artwork-nav-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	padding: 0;
}

.nav-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
}

.nav-dot:hover {
	background: rgba(255, 255, 255, 0.5);
	transform: scale(1.2);
}

.nav-dot.active {
	background: rgba(255, 255, 255, 0.9);
}

.nav-dot.active:hover {
	background: rgba(255, 255, 255, 1);
}

/* Vinyl Container for CSS Vinyl */
.vinyl-container {
	width: 100%;
	height: 100%;
	position: relative;
	filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.7));
	border-radius: 50%;
	overflow: hidden;
	/* Optimize for CSS animations */
	will-change: transform;
	backface-visibility: hidden;
	transform: translateZ(0);
	contain: layout style paint;
	isolation: isolate;
}

/* CSS-Only Vinyl Record - Optimized for Performance */
.css-vinyl-record {
	width: 100%;
	height: 100%;
	position: relative;
	border-radius: 50%;
	animation: vinylSpin 2s linear infinite;
	animation-play-state: running;
	/* Performance optimizations */
	will-change: transform;
	backface-visibility: hidden;
	transform: translateZ(0) rotate(0deg);
	contain: layout style paint;
	isolation: isolate;
	/* Force hardware acceleration */
	transform-style: preserve-3d;
}

.vinyl-disc {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	background: 
		/* Outer metallic edge */
		radial-gradient(circle at center,
			transparent 0%,
			transparent 88%,
			rgba(100, 100, 100, 0.3) 90%,
			rgba(150, 150, 150, 0.5) 92%,
			rgba(200, 200, 200, 0.4) 94%,
			rgba(100, 100, 100, 0.3) 96%,
			transparent 98%),
		/* Main vinyl surface */
		radial-gradient(circle at center,
			#1a1a1a 0%,
			#0f0f0f 85%,
			#2a2a2a 92%,
			#1a1a1a 100%);
	box-shadow: 
		/* Outer shadow for depth */
		0 0 30px rgba(0, 0, 0, 0.5),
		/* Inner subtle highlights */
		inset 0 0 50px rgba(255, 255, 255, 0.03),
		/* Edge definition */
		inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Vinyl Grooves */
.vinyl-grooves {
	position: absolute;
	inset: 5%;
	border-radius: 50%;
	background: 
		/* Fine concentric grooves - outer rings */
		repeating-radial-gradient(circle at center,
			transparent 0px,
			transparent 1px,
			rgba(0, 0, 0, 0.3) 1.5px,
			rgba(0, 0, 0, 0.15) 2px,
			transparent 2.5px,
			transparent 3.5px,
			rgba(0, 0, 0, 0.25) 4px,
			rgba(0, 0, 0, 0.1) 4.5px,
			transparent 5px,
			transparent 6px,
			rgba(0, 0, 0, 0.3) 6.5px,
			rgba(0, 0, 0, 0.15) 7px,
			transparent 7.5px,
			transparent 8.5px,
			rgba(0, 0, 0, 0.25) 9px,
			rgba(0, 0, 0, 0.1) 9.5px,
			transparent 10px,
			transparent 11px,
			rgba(0, 0, 0, 0.3) 11.5px,
			rgba(0, 0, 0, 0.15) 12px,
			transparent 12.5px,
			transparent 13.5px,
			rgba(0, 0, 0, 0.25) 14px,
			rgba(0, 0, 0, 0.1) 14.5px,
			transparent 15px,
			transparent 16px,
			rgba(0, 0, 0, 0.3) 16.5px,
			rgba(0, 0, 0, 0.15) 17px,
			transparent 17.5px),
		/* Medium spaced grooves */
		repeating-radial-gradient(circle at center,
			transparent 0px,
			transparent 18px,
			rgba(0, 0, 0, 0.4) 19px,
			rgba(0, 0, 0, 0.2) 20px,
			transparent 21px,
			transparent 36px,
			rgba(0, 0, 0, 0.35) 37px,
			rgba(0, 0, 0, 0.18) 38px,
			transparent 39px,
			transparent 54px,
			rgba(0, 0, 0, 0.4) 55px,
			rgba(0, 0, 0, 0.2) 56px,
			transparent 57px),
		/* Subtle light reflection on grooves */
		repeating-radial-gradient(circle at center,
			transparent 0px,
			transparent 0.5px,
			rgba(255, 255, 255, 0.08) 1px,
			transparent 1.5px,
			transparent 2.5px,
			rgba(255, 255, 255, 0.06) 3px,
			transparent 3.5px,
			transparent 4.5px,
			rgba(255, 255, 255, 0.08) 5px,
			transparent 5.5px,
			transparent 6.5px,
			rgba(255, 255, 255, 0.06) 7px,
			transparent 7.5px),
		/* Micro texture for realism */
		radial-gradient(circle at center,
			rgba(0, 0, 0, 0.05) 0%,
			rgba(0, 0, 0, 0.02) 30%,
			rgba(255, 255, 255, 0.01) 50%,
			rgba(0, 0, 0, 0.02) 70%,
			rgba(0, 0, 0, 0.05) 100%);
	opacity: 0.9;
	mix-blend-mode: multiply;
}

/* Additional groove depth layer */
.vinyl-grooves::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: 
		/* Deep groove shadows */
		repeating-radial-gradient(circle at center,
			transparent 0px,
			transparent 2px,
			rgba(0, 0, 0, 0.5) 2.2px,
			rgba(0, 0, 0, 0.3) 2.8px,
			transparent 3px,
			transparent 5px,
			rgba(0, 0, 0, 0.45) 5.2px,
			rgba(0, 0, 0, 0.25) 5.8px,
			transparent 6px,
			transparent 8px,
			rgba(0, 0, 0, 0.5) 8.2px,
			rgba(0, 0, 0, 0.3) 8.8px,
			transparent 9px,
			transparent 11px,
			rgba(0, 0, 0, 0.45) 11.2px,
			rgba(0, 0, 0, 0.25) 11.8px,
			transparent 12px);
	opacity: 0.6;
	mix-blend-mode: darken;
}

/* Groove highlights for realistic light catching */
.vinyl-grooves::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: 
		/* Highlight ridges between grooves */
		repeating-radial-gradient(circle at center,
			transparent 0px,
			rgba(255, 255, 255, 0.12) 1.5px,
			rgba(255, 255, 255, 0.08) 2px,
			transparent 2.5px,
			transparent 4.5px,
			rgba(255, 255, 255, 0.1) 5px,
			rgba(255, 255, 255, 0.06) 5.5px,
			transparent 6px,
			transparent 8px,
			rgba(255, 255, 255, 0.12) 8.5px,
			rgba(255, 255, 255, 0.08) 9px,
			transparent 9.5px,
			transparent 11.5px,
			rgba(255, 255, 255, 0.1) 12px,
			rgba(255, 255, 255, 0.06) 12.5px,
			transparent 13px);
	opacity: 0.4;
	mix-blend-mode: overlay;
}

/* Vinyl Center Label */
.vinyl-label {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;
	height: 60%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: linear-gradient(135deg, #f4e4bc 0%, #e6d4a8 50%, #d8c494 100%);
	box-shadow: 
		0 0 20px rgba(0, 0, 0, 0.4),
		inset 0 2px 4px rgba(255, 255, 255, 0.3),
		inset 0 -2px 4px rgba(0, 0, 0, 0.2);
	z-index: 3;
	overflow: visible;
	border: 14px solid rgba(200, 180, 140, 0.9);
}

/* SOULDISC Curved Text */
.souldisc-text {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 145%;
    height: 145%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 4;
}

.souldisc-text svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.souldisc-text text {
	fill: rgba(139, 69, 19, 0.9);
	font-family: 'Garet', sans-serif;
	font-weight: 700;
	font-size: 8px;
	letter-spacing: 1px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Vinyl Artwork */
.vinyl-artwork {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.vinyl-artwork-placeholder {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(45deg, #2dd4bf, #0d9488, #14b8a6, #2dd4bf, #06b6d4, #0891b2);
	background-size: 400% 400%;
	animation: meshGradient 6s ease infinite;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.vinyl-artwork-placeholder::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
	border-radius: 50%;
}

.vinyl-artwork-placeholder::after {
	content: '\f001';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.8);
	z-index: 2;
	position: relative;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Vinyl Spinning Animation - Hardware Accelerated */
@keyframes vinylSpin {
	0% { 
		transform: translate3d(0, 0, 0) rotate(0deg); 
	}
	100% { 
		transform: translate3d(0, 0, 0) rotate(360deg); 
	}
}

/* Pause animation when not playing - Performance Boost */
.vinyl-container.paused .css-vinyl-record {
	animation-play-state: paused;
}

/* Stop theme animations when paused for maximum performance */
.vinyl-container.paused.theme-neon .vinyl-disc {
	animation-play-state: paused;
}

.vinyl-container.paused.theme-oil-slick .vinyl-disc {
	animation-play-state: paused;
}

.vinyl-container.paused.theme-rainbow .vinyl-disc {
	animation-play-state: paused;
}

/* Reduced motion support - Performance First */
@media (prefers-reduced-motion: reduce) {
	.css-vinyl-record {
		animation-duration: 10s;
	}
	
	/* Disable complex theme animations for accessibility */
	.vinyl-container.theme-neon .vinyl-disc,
	.vinyl-container.theme-oil-slick .vinyl-disc,
	.vinyl-container.theme-rainbow .vinyl-disc {
		animation: none !important;
	}
}

/* Performance mode for lower-end devices */
@media (max-width: 480px), (max-height: 800px) {
	.css-vinyl-record {
		animation-duration: 3s;
	}
	
	/* Simplify complex themes on mobile */
	.vinyl-container.theme-neon .vinyl-disc {
		animation-duration: 6s;
	}
	
	.vinyl-container.theme-oil-slick .vinyl-disc {
		animation-duration: 10s;
	}
	
	.vinyl-container.theme-rainbow .vinyl-disc {
		animation-duration: 8s;
	}
}

/* VINYL THEMES */

/* 1. Marble Theme - Elegant marble stone vinyl */
.vinyl-container.theme-marble .vinyl-disc {
	background: 
		/* Marble veins - main structure */
		linear-gradient(135deg, 
			transparent 0%, 
			rgba(169, 169, 169, 0.6) 15%, 
			transparent 20%, 
			transparent 35%, 
			rgba(128, 128, 128, 0.4) 40%, 
			transparent 45%),
		linear-gradient(45deg, 
			transparent 0%, 
			rgba(105, 105, 105, 0.5) 25%, 
			transparent 30%, 
			transparent 60%, 
			rgba(169, 169, 169, 0.7) 65%, 
			transparent 70%),
		linear-gradient(200deg, 
			transparent 0%, 
			rgba(128, 128, 128, 0.3) 50%, 
			transparent 55%, 
			transparent 80%, 
			rgba(105, 105, 105, 0.5) 85%, 
			transparent 90%),
		/* Fine marble texture */
		radial-gradient(ellipse 30% 60% at 20% 30%, 
			rgba(211, 211, 211, 0.3) 0%, 
			transparent 60%),
		radial-gradient(ellipse 20% 40% at 80% 70%, 
			rgba(192, 192, 192, 0.4) 0%, 
			transparent 50%),
		radial-gradient(ellipse 25% 35% at 50% 80%, 
			rgba(169, 169, 169, 0.2) 0%, 
			transparent 70%),
		/* Marble base - creamy white */
		radial-gradient(circle at center,
			#f5f5f5 0%,
			#e8e8e8 70%,
			#dcdcdc 85%,
			#f0f0f0 100%);
	box-shadow: 
		0 0 30px rgba(0, 0, 0, 0.2),
		inset 0 0 50px rgba(255, 255, 255, 0.3);
}

.vinyl-container.theme-marble .vinyl-grooves {
	background: 
		repeating-radial-gradient(circle at center,
			transparent 0px,
			transparent 1px,
			rgba(105, 105, 105, 0.5) 1.5px,
			rgba(105, 105, 105, 0.2) 2px,
			transparent 2.5px);
	opacity: 0.6;
}

/* 2. Neon Cyberpunk Theme - Electric future vinyl */
.vinyl-container.theme-neon .vinyl-disc {
	background: 
		/* Simplified neon glow circles - fewer complex gradients */
		radial-gradient(circle at 25% 25%, 
			rgba(0, 255, 255, 0.6) 0%, 
			transparent 40%),
		radial-gradient(circle at 75% 75%, 
			rgba(255, 0, 255, 0.5) 0%, 
			transparent 50%),
		radial-gradient(circle at 20% 80%, 
			rgba(255, 20, 147, 0.4) 0%, 
			transparent 60%),
		/* Simple electric pulse effect */
		conic-gradient(from 0deg at 50% 50%,
			rgba(0, 255, 255, 0.3) 0deg,
			rgba(255, 0, 255, 0.2) 120deg,
			rgba(255, 20, 147, 0.3) 240deg,
			rgba(0, 255, 255, 0.3) 360deg),
		/* Dark cyber base */
		radial-gradient(circle at center,
			#0a0a0a 0%,
			#1a0a1a 50%,
			#0a1a1a 85%,
			#000000 100%);
	box-shadow: 
		0 0 30px rgba(0, 255, 255, 0.3),
		inset 0 0 20px rgba(255, 0, 255, 0.1);
	/* Performance: Reduce animation complexity */
	will-change: filter;
	animation: neonPulse 4s ease-in-out infinite;
}

/* Static grid overlay - doesn't rotate with disc */
.vinyl-container.theme-neon::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: 
		repeating-linear-gradient(0deg,
			transparent 0px,
			transparent 12px,
			rgba(0, 255, 255, 0.2) 13px,
			transparent 14px,
			transparent 26px),
		repeating-linear-gradient(90deg,
			transparent 0px,
			transparent 12px,
			rgba(255, 0, 255, 0.2) 13px,
			transparent 14px,
			transparent 26px);
	pointer-events: none;
	z-index: 1;
}

@keyframes neonPulse {
	0%, 100% { 
		filter: brightness(1) saturate(1.1); 
	}
	50% { 
		filter: brightness(1.2) saturate(1.3); 
	}
}

.vinyl-container.theme-neon .vinyl-grooves {
	background: 
		repeating-radial-gradient(circle at center,
			transparent 0px,
			transparent 1px,
			rgba(0, 255, 255, 0.6) 1.5px,
			rgba(0, 255, 255, 0.2) 2px,
			transparent 2.5px);
	mix-blend-mode: screen;
}

/* 3. Oil Slick Theme - Iridescent petroleum rainbow */
.vinyl-container.theme-oil-slick .vinyl-disc {
	background: 
		/* Simplified oil slick pattern - reduced complexity */
		conic-gradient(from 0deg at 40% 40%,
			rgba(255, 0, 128, 0.5) 0deg,
			rgba(0, 128, 255, 0.6) 60deg,
			rgba(255, 255, 0, 0.5) 120deg,
			rgba(255, 0, 0, 0.6) 180deg,
			rgba(128, 0, 255, 0.5) 240deg,
			rgba(0, 255, 128, 0.6) 300deg,
			rgba(255, 0, 128, 0.5) 360deg),
		/* Oil film thickness variations */
		radial-gradient(ellipse 35% 25% at 25% 25%, 
			rgba(255, 0, 255, 0.3) 0%, 
			transparent 70%),
		radial-gradient(ellipse 25% 40% at 75% 35%, 
			rgba(255, 215, 0, 0.3) 0%, 
			transparent 80%),
		radial-gradient(ellipse 20% 30% at 60% 75%, 
			rgba(0, 255, 255, 0.3) 0%, 
			transparent 60%),
		/* Dark petroleum base */
		radial-gradient(circle at center,
			#1a1a1a 0%,
			#0f0f0f 70%,
			#2a2a2a 85%,
			#1a1a1a 100%);
	/* Performance optimizations */
	will-change: filter;
	animation: oilShift 8s ease-in-out infinite;
}

@keyframes oilShift {
	0%, 100% { 
		filter: hue-rotate(0deg) saturate(1.1); 
	}
	50% { 
		filter: hue-rotate(45deg) saturate(1.3); 
	}
}

/* 4. Galaxy Theme - Cosmic deep space vinyl */
.vinyl-container.theme-galaxy .vinyl-disc {
	background: 
		/* Nebula clouds */
		radial-gradient(ellipse 40% 60% at 25% 30%, 
			rgba(138, 43, 226, 0.6) 0%, 
			rgba(75, 0, 130, 0.4) 30%, 
			rgba(25, 25, 112, 0.2) 60%, 
			transparent 80%),
		radial-gradient(ellipse 30% 50% at 70% 60%, 
			rgba(220, 20, 60, 0.5) 0%, 
			rgba(139, 0, 139, 0.3) 40%, 
			rgba(72, 61, 139, 0.2) 70%, 
			transparent 90%),
		radial-gradient(ellipse 25% 35% at 80% 20%, 
			rgba(0, 191, 255, 0.4) 0%, 
			rgba(65, 105, 225, 0.3) 50%, 
			transparent 80%),
		/* Stars */
		radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.8) 0%, transparent 1px),
		radial-gradient(circle at 85% 35%, rgba(255, 255, 255, 0.9) 0%, transparent 1px),
		radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.7) 0%, transparent 1px),
		radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.8) 0%, transparent 1px),
		radial-gradient(circle at 90% 70%, rgba(255, 255, 255, 0.6) 0%, transparent 1px),
		radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.9) 0%, transparent 1px),
		/* Galactic spiral */
		conic-gradient(from 45deg at 50% 50%,
			rgba(72, 61, 139, 0.8) 0deg,
			rgba(25, 25, 112, 0.9) 90deg,
			rgba(0, 0, 0, 1) 180deg,
			rgba(75, 0, 130, 0.8) 270deg,
			rgba(72, 61, 139, 0.8) 360deg),
		/* Deep space base */
		radial-gradient(circle at center,
			#000000 0%,
			#0a0a0a 85%,
			#1a1a2e 92%,
			#000000 100%);
}

/* 5. Gold Theme - Luxurious metallic gold vinyl */
.vinyl-container.theme-gold .vinyl-disc {
	background: 
		/* Gold reflections and highlights */
		conic-gradient(from 0deg at 50% 50%,
			rgba(255, 215, 0, 0.9) 0deg,
			rgba(255, 193, 37, 0.8) 45deg,
			rgba(255, 215, 0, 1) 90deg,
			rgba(218, 165, 32, 0.9) 135deg,
			rgba(255, 215, 0, 0.8) 180deg,
			rgba(255, 193, 37, 0.9) 225deg,
			rgba(255, 215, 0, 1) 270deg,
			rgba(218, 165, 32, 0.8) 315deg,
			rgba(255, 215, 0, 0.9) 360deg),
		radial-gradient(ellipse 30% 60% at 25% 25%,
			rgba(255, 255, 255, 0.4) 0%,
			rgba(255, 255, 255, 0.2) 30%,
			transparent 60%),
		radial-gradient(ellipse 40% 20% at 75% 70%,
			rgba(255, 255, 255, 0.3) 0%,
			rgba(255, 255, 255, 0.1) 50%,
			transparent 80%),
		/* Metallic base gradient */
		linear-gradient(135deg,
			rgba(255, 215, 0, 1) 0%,
			rgba(255, 193, 37, 0.9) 25%,
			rgba(218, 165, 32, 0.8) 50%,
			rgba(255, 215, 0, 0.9) 75%,
			rgba(255, 193, 37, 1) 100%),
		radial-gradient(circle at center,
			rgba(255, 215, 0, 0.9) 0%,
			rgba(218, 165, 32, 0.8) 85%,
			rgba(184, 134, 11, 0.9) 92%,
			rgba(255, 215, 0, 0.8) 100%);
	box-shadow: 
		0 0 30px rgba(255, 215, 0, 0.5),
		inset 0 0 50px rgba(255, 255, 255, 0.2),
		inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.vinyl-container.theme-gold .vinyl-grooves {
	background: 
		repeating-radial-gradient(circle at center,
			transparent 0px,
			transparent 1px,
			rgba(139, 69, 19, 0.6) 1.5px,
			rgba(139, 69, 19, 0.3) 2px,
			transparent 2.5px,
			transparent 3.5px,
			rgba(160, 82, 45, 0.5) 4px,
			rgba(160, 82, 45, 0.2) 4.5px,
			transparent 5px);
	mix-blend-mode: multiply;
}

/* 6. Rainbow Theme - Vibrant multicolor vinyl */
.vinyl-container.theme-rainbow .vinyl-disc {
	background: 
		/* Rainbow spiral effect - simplified */
		conic-gradient(from 0deg at 50% 50%,
			rgba(255, 0, 0, 0.7) 0deg,
			rgba(255, 127, 0, 0.7) 60deg,
			rgba(255, 255, 0, 0.7) 120deg,
			rgba(0, 255, 0, 0.7) 180deg,
			rgba(0, 0, 255, 0.7) 240deg,
			rgba(148, 0, 211, 0.7) 300deg,
			rgba(255, 0, 0, 0.7) 360deg),
		/* Prismatic highlights */
		radial-gradient(ellipse 18% 35% at 25% 30%,
			rgba(255, 255, 255, 0.3) 0%,
			transparent 70%),
		radial-gradient(ellipse 15% 25% at 75% 70%,
			rgba(255, 255, 255, 0.2) 0%,
			transparent 80%),
		/* Base holographic effect */
		radial-gradient(circle at center,
			rgba(255, 255, 255, 0.08) 0%,
			rgba(255, 255, 255, 0.04) 85%,
			rgba(255, 255, 255, 0.12) 92%,
			rgba(255, 255, 255, 0.08) 100%);
	/* Performance optimizations */
	will-change: filter;
	animation: rainbowShimmer 5s ease-in-out infinite;
}

@keyframes rainbowShimmer {
	0%, 100% { 
		filter: brightness(1) saturate(1.1); 
	}
	50% { 
		filter: brightness(1.15) saturate(1.25); 
	}
}

/* Artwork placeholder for songs without album art */
.artwork-placeholder {
	width: 100%;
	height: 100%;
	border-radius: inherit; /* Inherits from parent - can be 1rem or 50% */
	background: linear-gradient(45deg, #2dd4bf, #0d9488, #14b8a6, #2dd4bf, #06b6d4, #0891b2);
	background-size: 400% 400%;
	animation: meshGradient 6s ease infinite;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.artwork-placeholder::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
		radial-gradient(circle at 70% 70%, rgba(45, 212, 191, 0.4) 0%, transparent 50%),
		radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.2) 0%, transparent 50%);
	animation: floatingOrbs 8s ease-in-out infinite;
	border-radius: inherit;
}

.artwork-placeholder::after {
	content: '\f001';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 3rem;
	color: rgba(255, 255, 255, 0.7);
	z-index: 2;
	position: relative;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@keyframes meshGradient {

	0%,
	100% {
		background-position: 0% 50%;
	}

	25% {
		background-position: 100% 50%;
	}

	50% {
		background-position: 100% 100%;
	}

	75% {
		background-position: 0% 100%;
	}
}

@keyframes floatingOrbs {

	0%,
	100% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}

	33% {
		transform: translateY(-10px) rotate(120deg);
		opacity: 0.8;
	}

	66% {
		transform: translateY(5px) rotate(240deg);
		opacity: 0.9;
	}
}

/* Radio Station Homepage */
.radio-station {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}

.station-header {
	margin-bottom: 3rem;
}

.station-logo {
	margin-bottom: 1.5rem;
}

.logo-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #2dd4bf, #0d9488);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	box-shadow: 0 10px 30px rgba(45, 212, 191, 0.3);
}

.logo-icon i {
	font-size: 2rem;
	color: #000;
}

.station-title {
	font-size: 2.5rem;
	font-weight: bold;
	color: #2dd4bf;
	margin-bottom: 0.5rem;
}

.station-subtitle {
	font-size: 1.25rem;
	color: #9ca3af;
}

.now-playing-section {
	margin-bottom: 3rem;
}

.now-playing-card {
	background: rgba(31, 41, 55, 0.8);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1.5rem;
	padding: 2rem;
	margin-bottom: 2rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.preview-artwork {
	width: 80px;
	height: 80px;
	border-radius: 1rem;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.preview-artwork img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1rem;
}

.preview-artwork .artwork-placeholder {
	width: 100%;
	height: 100%;
	border-radius: 1rem;
}

.preview-artwork .artwork-placeholder::after {
	font-size: 2rem;
}

.track-info {
	flex: 1;
	text-align: left;
	min-width: 0;
	max-width: 100%;
}

.now-playing-label {
	font-size: 0.875rem;
	color: #2dd4bf;
	font-weight: 600;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.track-title {
	font-size: 1.25rem;
	font-weight: bold;
	color: #fff;
	margin-bottom: 0.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
	min-width: 0;
	line-height: 1.4;
}

.track-artist {
	font-size: 1rem;
	color: #9ca3af;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
	min-width: 0;
	line-height: 1.4;
}

.play-controls {
	display: flex;
	justify-content: center;
}

.main-play-btn {
	background: linear-gradient(135deg, #2dd4bf, #0d9488);
	border: none;
	border-radius: 1.5rem;
	padding: 1.5rem 3rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.25rem;
	font-weight: bold;
	color: #000;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 10px 25px rgba(45, 212, 191, 0.3);
}

.main-play-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 15px 35px rgba(45, 212, 191, 0.4);
}

.main-play-btn:active {
	transform: translateY(0);
}

.play-icon {
	width: 50px;
	height: 50px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.play-icon i {
	font-size: 1.5rem;
	margin-left: 3px;
	/* Optical alignment */
}

.play-text {
	font-size: 1.25rem;
}

.station-features {
	display: flex;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #9ca3af;
	font-size: 0.875rem;
}

.feature-item i {
	color: #2dd4bf;
	font-size: 1rem;
}

/* Player Actions */
.player-actions {
	display: flex;
	align-items: center;
	justify-content: center;
}

.actions-pill {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2rem;
	overflow: hidden;
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.action-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1.25rem 1.5rem;
	cursor: pointer;
	transition: all 0.3s ease;
	color: #9ca3af;
	min-width: 5rem;
	position: relative;
	background: transparent;
	border: none;
}

.action-button:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 20%;
	bottom: 20%;
	width: 1px;
	background: rgba(255, 255, 255, 0.1);
}

.action-button:hover {
	background: rgba(255, 255, 255, 0.1);
}

.action-icon {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	transition: all 0.3s ease;
	margin-bottom: 0.25rem;
}

.action-icon i {
	font-size: 1.125rem;
	transition: all 0.3s ease;
}

.action-count {
	font-size: 0.75rem;
	font-weight: 600;
	color: #d1d5db;
	line-height: 1;
}

/* Like Button */
.like-button:hover {
	color: #10b981;
	background: rgba(16, 185, 129, 0.1);
}

.like-button:hover .action-icon {
	background: rgba(16, 185, 129, 0.2);
	box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

.like-button.liked {
	color: #10b981;
	background: rgba(16, 185, 129, 0.15);
}

.like-button.liked .action-icon {
	background: rgba(16, 185, 129, 0.3);
	box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

/* Mute Button */
.mute-button:hover {
	color: #2dd4bf;
	background: rgba(45, 212, 191, 0.1);
}

.mute-button:hover .action-icon {
	background: rgba(45, 212, 191, 0.2);
	box-shadow: 0 0 15px rgba(45, 212, 191, 0.3);
}

/* Dislike Button */
.dislike-button:hover {
	color: #ef4444;
	background: rgba(239, 68, 68, 0.1);
}

.dislike-button:hover .action-icon {
	background: rgba(239, 68, 68, 0.2);
	box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

.dislike-button.disliked {
	color: #ef4444;
	background: rgba(239, 68, 68, 0.15);
}

.dislike-button.disliked .action-icon {
	background: rgba(239, 68, 68, 0.3);
	box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

/* Disabled state for non-logged-in users */
.action-button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.action-button.disabled:hover {
	background: transparent;
	color: #9ca3af;
}

.action-button.disabled:hover .action-icon {
	background: rgba(255, 255, 255, 0.05);
	box-shadow: none;
}

/* Loading state for vote buttons */
.action-button.loading {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

.action-button.loading .action-icon {
	background: rgba(255, 255, 255, 0.1);
	animation: pulse 1.5s ease-in-out infinite;
}

.action-button.loading .action-count {
	color: #9ca3af;
}

.action-button.loading .action-count i {
	animation: buttonSpin 1s linear infinite;
}

.action-button.loading .action-icon {
	background: rgba(255, 255, 255, 0.1);
	animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 0.6;
		transform: scale(1);
	}

	50% {
		opacity: 0.8;
		transform: scale(1.05);
	}
}

@keyframes buttonSpin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Mobile responsiveness */
@media (max-width: 640px) {
	.radio-station {
		padding: 0 1rem;
	}

	.action-button {
		min-width: 4rem;
		padding: 1rem 1.25rem;
	}

	.action-icon {
		width: 2rem;
		height: 2rem;
	}

	.action-icon i {
		font-size: 1rem;
	}

	.action-count {
		font-size: 0.65rem;
	}

	.station-title {
		font-size: 2rem;
	}

	.station-subtitle {
		font-size: 1rem;
	}

	.now-playing-card {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
		padding: 1.5rem;
	}

	.track-info {
		text-align: center;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.now-playing-label {
		justify-content: center;
	}

	.track-title {
		font-size: 1.125rem;
		max-width: 100%;
		min-width: 0;
	}

	.track-artist {
		font-size: 0.875rem;
		max-width: 100%;
		min-width: 0;
	}

	.preview-artwork {
		width: 60px;
		height: 60px;
	}

	.main-play-btn {
		padding: 1.25rem 2.5rem;
		font-size: 1.125rem;
	}

	.station-features {
		gap: 1rem;
		flex-direction: column;
		align-items: center;
	}

	/* Mobile menu adjustments */
	.mobile-menu {
		width: 100%;
		max-width: 100%;
	}

	.mobile-menu-header {
		padding: 1.5rem;
	}

	.mobile-menu-content {
		padding: 1.5rem;
	}

	.artist-cta {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}

	.menu-item {
		padding: 1rem;
		font-size: 0.9rem;
	}

	.user-info {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}
}

@media (max-width: 400px) {
	.app-header {
		padding: 1rem;
	}

	.mobile-menu-header {
		padding: 1rem;
	}

	.mobile-menu-content {
		padding: 1rem;
	}

	.artist-cta {
		padding: 1rem;
	}

	.menu-item {
		padding: 0.75rem 1rem;
	}

	.now-playing-card {
		padding: 1rem;
		margin-bottom: 1.5rem;
	}

	.track-title {
		font-size: 1rem;
		line-height: 1.3;
	}

	.track-artist {
		font-size: 0.8rem;
	}

	.preview-artwork {
		width: 50px;
		height: 50px;
	}

	.main-play-btn {
		padding: 1rem 2rem;
		font-size: 1rem;
	}

	.play-icon {
		width: 40px;
		height: 40px;
	}

	.play-icon i {
		font-size: 1.25rem;
	}
}

/* GARNET SOUL TRANSMISSION STYLES */
.transmission-card {
	background: linear-gradient(135deg,
			rgba(17, 24, 39, 0.8),
			rgba(31, 41, 55, 0.8));
	border: 1px solid rgba(45, 212, 191, 0.3);
	border-radius: 1rem;
	margin-bottom: 1.5rem;
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(10px);
	box-shadow:
		0 4px 20px rgba(45, 212, 191, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: center top;
}

.transmission-card.clickable {
	cursor: pointer;
	animation: cardPulse 4s ease-in-out infinite;
}

.transmission-card.clickable:hover {
	transform: translateY(-2px) scale(1.02);
	border-color: rgba(45, 212, 191, 0.5);
	box-shadow:
		0 8px 30px rgba(45, 212, 191, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}


.transmission-header {
	padding: 1rem 1.5rem;
	border-bottom: 1px solid rgba(45, 212, 191, 0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(90deg,
			rgba(45, 212, 191, 0.05) 0%,
			transparent 50%,
			rgba(45, 212, 191, 0.05) 100%);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.transmission-indicator {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.signal-dot {
	width: 8px;
	height: 8px;
	background: #ef4444;
	border-radius: 50%;
	animation: signalBlink 2s ease-in-out infinite;
	box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.signal-text {
	font-size: 0.75rem;
	color: #ef4444;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.transmission-timestamp {
	font-size: 0.75rem;
	color: #2dd4bf;
	font-weight: 600;
	text-shadow: 0 0 10px rgba(45, 212, 191, 0.5);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.transmission-body {
	padding: 1.5rem;
	position: relative;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* DECODING PHASE STYLES */
.decoding-phase {
	display: flex;
	align-items: center;
	gap: 1rem;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.decoding-icon {
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(6, 182, 212, 0.2));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	animation: iconPulse 2s ease-in-out infinite;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.decoding-icon i {
	font-size: 1.5rem;
	color: #2dd4bf;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.decoding-content {
	flex: 1;
}

.decoding-title {
	font-size: 0.875rem;
	color: #9ca3af;
	margin-bottom: 0.25rem;
	font-weight: 500;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.decoding-sender {
	font-size: 1.125rem;
	color: #2dd4bf;
	font-weight: bold;
	margin-bottom: 1rem;
	text-shadow: 0 0 10px rgba(45, 212, 191, 0.3);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.decoding-progress {
	display: flex;
	align-items: center;
	gap: 1rem;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#transmissionCard .progress-bar {
	background: rgba(45, 212, 191, 0.2);
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #2dd4bf, #06b6d4);
	border-radius: 2px;
	width: 0%;
	transition: width 0.3s ease;
	box-shadow: 0 0 10px rgba(45, 212, 191, 0.5);
}

.progress-text {
	font-size: 0.875rem;
	color: #2dd4bf;
	font-weight: 600;
	min-width: 3rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* READY PHASE STYLES */
.ready-phase {
	display: flex;
	align-items: center;
	gap: 1rem;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.message-icon {
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #2dd4bf, #0d9488);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	animation: messageGlow 3s ease-in-out infinite;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.message-icon i {
	font-size: 1.5rem;
	color: #000;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.message-content {
	flex: 1;
}

.message-title {
	font-size: 0.875rem;
	color: #9ca3af;
	margin-bottom: 0.25rem;
	font-weight: 500;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.message-sender {
	font-size: 1.125rem;
	color: #2dd4bf;
	font-weight: bold;
	margin-bottom: 0.5rem;
	text-shadow: 0 0 10px rgba(45, 212, 191, 0.3);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.message-subtitle {
	font-size: 0.8rem;
	color: #6b7280;
	font-weight: 500;
	font-style: italic;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.access-indicator {
	width: 40px;
	height: 40px;
	background: rgba(45, 212, 191, 0.1);
	border: 1px solid rgba(45, 212, 191, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	animation: accessPulse 2s ease-in-out infinite;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.access-indicator i {
	font-size: 1rem;
	color: #2dd4bf;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.transmission-glitch {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
			transparent 0%,
			rgba(45, 212, 191, 0.03) 50%,
			transparent 100%);
	animation: glitchSweep 8s linear infinite;
	pointer-events: none;
}

/* TRANSMISSION MODAL STYLES */
.transmission-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	animation: modalFadeIn 0.5s ease-out;
}

.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(20px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.modal-container {
	background: linear-gradient(135deg,
			rgba(17, 24, 39, 0.95),
			rgba(31, 41, 55, 0.95));
	border: 1px solid rgba(45, 212, 191, 0.3);
	border-radius: 1rem;
	max-width: 800px;
	width: 100%;
	height: 85vh;
	overflow: hidden;
	box-shadow:
		0 25px 50px rgba(0, 0, 0, 0.5),
		0 0 50px rgba(45, 212, 191, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	position: relative;
	animation: modalSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	display: flex;
	flex-direction: column;
}

.modal-header {
	padding: 1.5rem;
	border-bottom: 1px solid rgba(45, 212, 191, 0.2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(90deg,
			rgba(45, 212, 191, 0.05) 0%,
			transparent 50%,
			rgba(45, 212, 191, 0.05) 100%);
	flex-shrink: 0;
}

.modal-title {
	font-size: 1.25rem;
	font-weight: bold;
}

.modal-title-text {
	color: #2dd4bf;
	font-weight: bold;
}

.modal-close {
	background: none;
	border: none;
	color: #9ca3af;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
}

.modal-close:hover {
	color: #2dd4bf;
	background: rgba(45, 212, 191, 0.1);
}

.modal-body {
	padding: 2rem;
	padding-bottom: 2rem;
	flex: 1;
	overflow-y: auto;
	scroll-behavior: smooth;
	background: linear-gradient(45deg,
			rgba(45, 212, 191, 0.02) 0%,
			transparent 50%,
			rgba(6, 182, 212, 0.02) 100%);
	position: relative;
	min-height: 0;
}

.transmission-message {
	color: #2dd4bf;
	font-size: 0.9rem;
	line-height: 1.6;
	word-wrap: break-word;
	text-shadow: 0 0 10px rgba(45, 212, 191, 0.3);
}

.cursor-blink {
	display: inline-block;
	color: #2dd4bf;
	animation: cursorBlink 1s step-end infinite;
	font-weight: bold;
	margin-left: 2px;
	vertical-align: baseline;
}

/* MODAL FOOTER & SINGLE PROMOTION */
.modal-footer {
	border-top: 1px solid rgba(45, 212, 191, 0.2);
	background: linear-gradient(135deg,
			rgba(17, 24, 39, 0.9),
			rgba(31, 41, 55, 0.9));
	padding: 1.5rem;
	flex-shrink: 0;
}

.single-promotion {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: linear-gradient(135deg,
			rgba(45, 212, 191, 0.05),
			rgba(6, 182, 212, 0.05));
	border: 1px solid rgba(45, 212, 191, 0.2);
	border-radius: 0.75rem;
	padding: 1rem;
	transition: all 0.3s ease;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	position: relative;
}

.single-promotion:hover {
	border-color: rgba(45, 212, 191, 0.4);
	background: linear-gradient(135deg,
			rgba(45, 212, 191, 0.08),
			rgba(6, 182, 212, 0.08));
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(45, 212, 191, 0.15);
}

.single-promotion:active {
	transform: translateY(0);
}

.single-artwork {
	width: 60px;
	height: 60px;
	border-radius: 0.5rem;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.single-artwork img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-info {
	flex: 1;
	min-width: 0;
}

.single-label {
	font-size: 0.7rem;
	color: #2dd4bf;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.25rem;
}

.single-title {
	font-size: 1rem;
	color: #fff;
	font-weight: bold;
	margin-bottom: 0.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.single-artist {
	font-size: 0.875rem;
	color: #9ca3af;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 0.5rem;
}

.single-click-hint {
	font-size: 0.65rem;
	color: #2dd4bf;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.8;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	text-align: center;
}

.single-click-hint i {
	font-size: 0.6rem;
	animation: pulse 2s ease-in-out infinite;
}

.single-promotion:hover .single-click-hint {
	opacity: 1;
	color: #14b8a6;
}

/* ANIMATIONS */
@keyframes cardPulse {

	0%,
	100% {
		box-shadow:
			0 4px 20px rgba(45, 212, 191, 0.1),
			inset 0 1px 0 rgba(255, 255, 255, 0.05);
	}

	50% {
		box-shadow:
			0 4px 25px rgba(45, 212, 191, 0.15),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
	}
}

@keyframes signalBlink {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}
}

@keyframes iconPulse {

	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 0 20px rgba(45, 212, 191, 0.2);
	}

	50% {
		transform: scale(1.05);
		box-shadow: 0 0 25px rgba(45, 212, 191, 0.3);
	}
}

@keyframes messageGlow {

	0%,
	100% {
		box-shadow: 0 0 20px rgba(45, 212, 191, 0.3);
	}

	50% {
		box-shadow: 0 0 30px rgba(45, 212, 191, 0.5);
	}
}

@keyframes accessPulse {

	0%,
	100% {
		transform: scale(1);
		background: rgba(45, 212, 191, 0.1);
		border-color: rgba(45, 212, 191, 0.3);
	}

	50% {
		transform: scale(1.1);
		background: rgba(45, 212, 191, 0.2);
		border-color: rgba(45, 212, 191, 0.5);
	}
}

@keyframes glitchSweep {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(200%);
	}
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: translateY(-50px) scale(0.9);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}


@keyframes cursorBlink {

	0%,
	50% {
		opacity: 1;
	}

	51%,
	100% {
		opacity: 0;
	}
}

/* Mobile responsiveness for transmission elements */
@media (max-width: 640px) {
	.transmission-card {
		border-radius: 0.75rem;
	}

	.transmission-header {
		padding: 0.75rem 1rem;
		flex-direction: column;
		gap: 0.5rem;
		text-align: center;
	}

	.transmission-indicator {
		justify-content: center;
	}

	.transmission-timestamp {
		font-size: 0.65rem;
	}

	.transmission-body {
		padding: 1rem;
	}

	.decoding-phase {
		flex-direction: column;
		text-align: center;
		gap: 0.75rem;
	}

	.ready-phase {
		flex-direction: column;
		text-align: center;
		gap: 0.75rem;
	}

	.decoding-icon,
	.message-icon {
		width: 50px;
		height: 50px;
		margin: 0 auto;
	}

	.decoding-icon i,
	.message-icon i {
		font-size: 1.25rem;
	}

	.decoding-title,
	.message-title {
		font-size: 0.75rem;
		margin-bottom: 0.125rem;
	}

	.decoding-sender,
	.message-sender {
		font-size: 1rem;
		margin-bottom: 0.5rem;
	}

	.decoding-progress {
		gap: 0.5rem;
	}

	#transmissionCard.progress-bar {
		height: 3px;
	}

	#transmissionCard .progress-text {
		font-size: 0.75rem;
		min-width: 2rem;
	}

	.access-indicator {
		width: 32px;
		height: 32px;
		margin: 0 auto;
	}

	.access-indicator i {
		font-size: 0.875rem;
	}

	.message-subtitle {
		font-size: 0.7rem;
	}


	.modal-backdrop {
		padding: 0;
	}

	.modal-container {
		margin: 0;
		height: 100vh;
		width: 100vw;
		max-width: 100vw;
		border-radius: 0;
		border: none;
	}

	.modal-header {
		padding: 1rem;
		border-radius: 0;
	}

	.modal-title {
		font-size: 1.125rem;
	}

	.modal-body {
		padding: 1rem;
		min-height: 0;
	}

	.transmission-message {
		font-size: 0.8rem;
	}

	.modal-footer {
		padding: 1rem;
		border-radius: 0;
	}

	.single-promotion {
		gap: 0.75rem;
		padding: 0.75rem;
	}

	.single-artwork {
		width: 50px;
		height: 50px;
	}

	.single-title {
		font-size: 0.9rem;
	}

	.single-artist {
		font-size: 0.8rem;
		margin-bottom: 0.375rem;
	}

	.single-click-hint {
		font-size: 0.6rem;
	}

	.single-click-hint i {
		font-size: 0.55rem;
	}
}

/* Extra small screens - ensure full viewport coverage */
@media (max-width: 480px) {
	.modal-container {
		height: 100%;
		width: 100%;
		max-width: none;
		border-radius: 0 !important;
		border: none !important;
	}

	.modal-header,
	.modal-footer {
		border-radius: 0 !important;
	}

	/* Even more compact transmission card for very small screens */
	.transmission-card {
		border-radius: 0.5rem;
	}

	.transmission-header {
		padding: 0.5rem 0.75rem;
		gap: 0.375rem;
	}

	.transmission-body {
		padding: 0.75rem;
	}

	.signal-text {
		font-size: 0.625rem;
	}

	.transmission-timestamp {
		font-size: 0.6rem;
	}

	.decoding-phase,
	.ready-phase {
		gap: 0.5rem;
	}

	.decoding-icon,
	.message-icon {
		width: 40px;
		height: 40px;
	}

	.decoding-icon i,
	.message-icon i {
		font-size: 1rem;
	}

	.decoding-title,
	.message-title {
		font-size: 0.7rem;
	}

	.decoding-sender,
	.message-sender {
		font-size: 0.9rem;
		margin-bottom: 0.375rem;
	}

	.message-subtitle {
		font-size: 0.65rem;
	}

	.access-indicator {
		width: 28px;
		height: 28px;
	}

	.access-indicator i {
		font-size: 0.75rem;
	}

	#transmissionCard .progress-bar {
		height: 2px;
	}

	#transmissionCard .progress-text {
		font-size: 0.7rem;
		min-width: 1.75rem;
	}
}

/* FOOTER STYLES */
.app-footer {
	background: linear-gradient(135deg, #000000, #1f2937, #111827);
	border-top: 1px solid rgba(45, 212, 191, 0.2);
	position: relative;
}

.app-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(45, 212, 191, 0.5) 50%, 
		transparent 100%);
}

.footer-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 1.5rem 2rem;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 3rem;
	align-items: start;
}

.footer-section h4 {
	color: #2dd4bf;
	font-size: 1.125rem;
	font-weight: bold;
	margin-bottom: 1rem;
	position: relative;
}

.footer-section h4::after {
	content: '';
	position: absolute;
	bottom: -0.25rem;
	left: 0;
	width: 2rem;
	height: 2px;
	background: linear-gradient(90deg, #2dd4bf, #0d9488);
	border-radius: 1px;
}

.footer-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.footer-logo i {
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, #2dd4bf, #0d9488);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	color: #000;
	box-shadow: 0 4px 15px rgba(45, 212, 191, 0.3);
}

.footer-logo span {
	font-size: 1.5rem;
	font-weight: bold;
	color: #2dd4bf;
}

.footer-description {
	color: #9ca3af;
	line-height: 1.6;
	margin: 0;
}

.footer-links {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.footer-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: #9ca3af;
	text-decoration: none;
	padding: 0.5rem 0;
	transition: all 0.3s ease;
	position: relative;
	border-radius: 0.5rem;
}

.footer-link:hover {
	color: #2dd4bf;
	transform: translateX(4px);
}

.footer-link i {
	width: 20px;
	text-align: center;
	font-size: 1rem;
	transition: all 0.3s ease;
}

.footer-link:hover i {
	color: #2dd4bf;
	transform: scale(1.1);
}

.discord-link:hover {
	color: #5865f2;
}

.discord-link:hover i {
	color: #5865f2;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 1.5rem;
	text-align: center;
	background: rgba(0, 0, 0, 0.3);
}

.footer-bottom p {
	color: #6b7280;
	font-size: 0.875rem;
	margin: 0;
}

/* Footer responsive design */
@media (max-width: 768px) {
	.footer-content {
		grid-template-columns: 1fr;
		padding: 2rem 1rem 1.5rem;
		gap: 1.5rem;
		text-align: center;
	}
	
	.footer-logo {
		justify-content: center;
	}
	
	.footer-section h4::after {
		left: 50%;
		transform: translateX(-50%);
	}
	
	.footer-links {
		align-items: center;
	}
	
	.footer-link {
		justify-content: center;
		padding: 0.75rem 1rem;
		background: rgba(31, 41, 55, 0.3);
		border-radius: 0.75rem;
		border: 1px solid rgba(255, 255, 255, 0.1);
		max-width: 200px;
		width: 100%;
	}
	
	.footer-link:hover {
		transform: translateY(-2px);
		background: rgba(45, 212, 191, 0.1);
		border-color: rgba(45, 212, 191, 0.3);
	}
	
	.footer-bottom {
		padding: 1rem;
	}
}

@media (max-width: 480px) {
	.footer-content {
		padding: 1.5rem 1rem 1rem;
		gap: 1rem;
	}
	
	.footer-logo span {
		font-size: 1.25rem;
	}
	
	.footer-logo i {
		width: 35px;
		height: 35px;
		font-size: 1rem;
	}
	
	.footer-section h4 {
		font-size: 1rem;
		margin-bottom: 0.75rem;
	}
	
	.footer-description {
		font-size: 0.875rem;
	}
	
	.footer-link {
		font-size: 0.875rem;
		padding: 0.625rem 0.75rem;
	}
	
	.footer-bottom p {
		font-size: 0.75rem;
	}
}

/* ARTIST PROFILE STYLES */
.artist-profile {
	max-width: 600px;
	margin: 0 auto;
	padding: 0;
}

/* Featured Artist Spotlight - Premium Design */
.featured-spotlight {
	background: linear-gradient(135deg, 
		rgba(251, 191, 36, 0.12) 0%, 
		rgba(245, 158, 11, 0.08) 35%, 
		rgba(251, 191, 36, 0.1) 65%, 
		rgba(245, 158, 11, 0.06) 100%);
	border: 1px solid rgba(251, 191, 36, 0.5);
	border-radius: 20px;
	margin: 1.5rem;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	box-shadow: 
		0 8px 32px rgba(251, 191, 36, 0.15),
		0 2px 8px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.featured-spotlight::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		radial-gradient(circle at 30% 30%, rgba(251, 191, 36, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 70% 70%, rgba(245, 158, 11, 0.08) 0%, transparent 50%);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.featured-spotlight::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(251, 191, 36, 0.2) 30%, 
		rgba(255, 255, 255, 0.15) 50%, 
		rgba(245, 158, 11, 0.2) 70%, 
		transparent 100%);
	transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1);
	pointer-events: none;
	z-index: 1;
}

.featured-spotlight:hover::before {
	opacity: 1;
}

.featured-spotlight:hover::after {
	left: 100%;
}

.featured-spotlight:hover {
	border-color: rgba(251, 191, 36, 0.8);
	transform: translateY(-6px) scale(1.01);
	box-shadow: 
		0 20px 60px rgba(251, 191, 36, 0.3),
		0 8px 25px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.featured-spotlight:active {
	transform: translateY(-3px) scale(0.995);
	transition-duration: 0.15s;
}

.spotlight-header {
	padding: 2rem 2rem 1.5rem;
	text-align: center;
	position: relative;
	z-index: 2;
}

.spotlight-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: linear-gradient(135deg, 
		rgba(251, 191, 36, 0.95) 0%, 
		rgba(245, 158, 11, 0.95) 100%);
	color: #000;
	padding: 0.75rem 1.5rem;
	border-radius: 30px;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 1.25rem;
	box-shadow: 
		0 4px 15px rgba(251, 191, 36, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	position: relative;
	overflow: hidden;
}

.spotlight-badge::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(255, 255, 255, 0.4), 
		transparent);
	transition: left 0.6s ease;
}

.spotlight-badge:hover::before {
	left: 100%;
}

.spotlight-badge i {
	font-size: 0.875rem;
	animation: premiumPulse 3s ease-in-out infinite;
	filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.spotlight-title {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 800;
	margin: 0 0 0.75rem 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	letter-spacing: 0.5px;
	line-height: 1.3;
}

.spotlight-subtitle {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.95rem;
	margin: 0;
	font-weight: 500;
	line-height: 1.5;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.spotlight-premium-accent {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 8px;
	height: 8px;
	background: linear-gradient(45deg, #fbbf24, #f59e0b);
	border-radius: 50%;
	box-shadow: 
		0 0 12px rgba(251, 191, 36, 0.8),
		0 0 24px rgba(251, 191, 36, 0.4);
	animation: premiumGlow 2s ease-in-out infinite;
}

/* Premium Spotlight Modal */
.spotlight-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 
		radial-gradient(circle at 30% 30%, rgba(45, 212, 191, 0.08) 0%, transparent 40%),
		radial-gradient(circle at 70% 70%, rgba(16, 185, 129, 0.06) 0%, transparent 40%),
		rgba(0, 0, 0, 0.95);
	backdrop-filter: blur(15px);
	z-index: 9999;
	display: none;
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.spotlight-modal.show {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
}

.spotlight-modal-container {
	background: 
		linear-gradient(145deg, 
			rgba(10, 10, 10, 0.98) 0%, 
			rgba(20, 20, 20, 0.95) 25%, 
			rgba(15, 15, 15, 0.97) 75%, 
			rgba(5, 5, 5, 0.98) 100%),
		radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.03) 0%, transparent 50%);
	border: 1px solid rgba(45, 212, 191, 0.4);
	border-radius: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	transform: scale(0.3);
	opacity: 0;
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	transform-origin: center center;
	display: flex;
	flex-direction: column;
	box-shadow: 
		0 25px 80px rgba(45, 212, 191, 0.15),
		0 10px 40px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.spotlight-modal.show .spotlight-modal-container {
	transform: scale(1);
	opacity: 1;
}

.spotlight-modal-container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(45, 212, 191, 0.8) 20%, 
		rgba(16, 185, 129, 0.9) 50%, 
		rgba(45, 212, 191, 0.8) 80%, 
		transparent 100%);
	z-index: 10;
}

.spotlight-modal-header {
	padding: 2.5rem 3rem 1.5rem;
	text-align: center;
	border-bottom: 1px solid rgba(45, 212, 191, 0.15);
	position: relative;
	flex-shrink: 0;
	background: 
		linear-gradient(180deg, 
			rgba(45, 212, 191, 0.02) 0%, 
			transparent 100%);
}

.spotlight-modal-header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20%;
	right: 20%;
	height: 1px;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(45, 212, 191, 0.4) 20%, 
		rgba(16, 185, 129, 0.6) 50%, 
		rgba(45, 212, 191, 0.4) 80%, 
		transparent 100%);
}

.spotlight-modal-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: linear-gradient(135deg, 
		rgba(251, 191, 36, 0.15) 0%, 
		rgba(251, 191, 36, 0.05) 50%,
		rgba(45, 212, 191, 0.05) 100%);
	border: 1px solid rgba(251, 191, 36, 0.3);
	color: rgba(251, 191, 36, 0.95);
	padding: 0.6rem 1.2rem;
	border-radius: 50px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 1.5rem;
	box-shadow: 
		0 4px 20px rgba(251, 191, 36, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	position: relative;
	overflow: hidden;
}

.spotlight-modal-badge::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(251, 191, 36, 0.1), 
		transparent);
	transition: left 0.6s ease;
}

.spotlight-modal-badge:hover::before {
	left: 100%;
}

.spotlight-modal-badge i {
	font-size: 0.7rem;
	color: rgba(251, 191, 36, 1);
	text-shadow: 0 0 6px rgba(251, 191, 36, 0.3);
}

.spotlight-modal-title {
	font-size: 2.2rem;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 0.75rem 0;
	text-align: center;
	line-height: 1.1;
	background: linear-gradient(135deg, 
		#ffffff 0%, 
		rgba(45, 212, 191, 0.9) 50%, 
		#ffffff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: 0 2px 20px rgba(45, 212, 191, 0.2);
}

.spotlight-modal-subtitle {
	font-size: 1rem;
	color: rgba(156, 163, 175, 0.9);
	text-align: center;
	font-style: italic;
	font-weight: 400;
	margin: 0;
	letter-spacing: 0.02em;
}

.spotlight-modal-close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	background: linear-gradient(135deg, 
		rgba(45, 212, 191, 0.1) 0%, 
		rgba(16, 185, 129, 0.05) 100%);
	border: 1px solid rgba(45, 212, 191, 0.3);
	border-radius: 12px;
	width: 48px;
	height: 48px;
	color: rgba(45, 212, 191, 0.9);
	font-size: 1.3rem;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
	backdrop-filter: blur(10px);
	box-shadow: 
		0 4px 20px rgba(45, 212, 191, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.spotlight-modal-close:hover {
	background: linear-gradient(135deg, 
		rgba(45, 212, 191, 0.2) 0%, 
		rgba(16, 185, 129, 0.15) 100%);
	border-color: rgba(45, 212, 191, 0.6);
	color: #2dd4bf;
	transform: scale(1.05);
	box-shadow: 
		0 8px 30px rgba(45, 212, 191, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.spotlight-modal-close:active {
	transform: scale(0.95) rotate(90deg);
	transition-duration: 0.1s;
}

.spotlight-modal-body {
	padding: 2rem 3rem 3rem;
	overflow-y: auto;
	flex: 1;
	height: calc(100% - 140px);
	position: relative;
	scroll-padding-top: 20px;
}

.spotlight-modal-body::-webkit-scrollbar {
	width: 6px;
}

.spotlight-modal-body::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.1);
	border-radius: 3px;
}

.spotlight-modal-body::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, 
		rgba(45, 212, 191, 0.6) 0%, 
		rgba(16, 185, 129, 0.4) 100%);
	border-radius: 3px;
}

.spotlight-modal-body::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, 
		rgba(45, 212, 191, 0.8) 0%, 
		rgba(16, 185, 129, 0.6) 100%);
}

.spotlight-modal-body::before {
	content: '';
	position: absolute;
	top: 0;
	left: 3rem;
	right: 3rem;
	height: 20px;
	background: linear-gradient(180deg, 
		rgba(45, 212, 191, 0.02) 0%, 
		transparent 100%);
	pointer-events: none;
}

.spotlight-markdown {
	color: #e5e7eb;
	line-height: 1.7;
	font-size: 0.95rem;
}

.spotlight-markdown h1,
.spotlight-markdown h2,
.spotlight-markdown h3,
.spotlight-markdown h4,
.spotlight-markdown h5,
.spotlight-markdown h6 {
	color: #2dd4bf;
	margin: 1.5rem 0 1rem 0;
	font-weight: 600;
}

.spotlight-markdown h1 { font-size: 1.5rem; }
.spotlight-markdown h2 { font-size: 1.3rem; }
.spotlight-markdown h3 { font-size: 1.1rem; }

.spotlight-markdown p {
	margin: 1rem 0;
}

.spotlight-markdown ul,
.spotlight-markdown ol {
	margin: 1rem 0;
	padding-left: 1.5rem;
}

.spotlight-markdown li {
	margin: 0.5rem 0;
}

.spotlight-markdown a {
	color: #2dd4bf;
	text-decoration: underline;
	transition: color 0.3s ease;
}

.spotlight-markdown a:hover {
	color: #14b8a6;
}

.spotlight-markdown strong {
	color: #fff;
	font-weight: 600;
}

.spotlight-markdown em {
	color: #d1d5db;
	font-style: italic;
}

.spotlight-markdown code {
	background: rgba(45, 212, 191, 0.1);
	color: #2dd4bf;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	font-family: 'Courier New', monospace;
	font-size: 0.875rem;
}

.spotlight-markdown pre {
	background: rgba(0, 0, 0, 0.3);
	padding: 1rem;
	border-radius: 8px;
	overflow-x: auto;
	margin: 1rem 0;
}

.spotlight-markdown pre code {
	background: none;
	padding: 0;
}

.spotlight-markdown blockquote {
	border-left: 3px solid #2dd4bf;
	padding-left: 1rem;
	margin: 1rem 0;
	font-style: italic;
	color: #d1d5db;
}



@keyframes spotlightPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes premiumGlow {
	0%, 100% { 
		box-shadow: 
			0 0 12px rgba(251, 191, 36, 0.8),
			0 0 24px rgba(251, 191, 36, 0.4);
	}
	50% { 
		box-shadow: 
			0 0 20px rgba(251, 191, 36, 1),
			0 0 35px rgba(251, 191, 36, 0.6);
	}
}

@keyframes premiumPulse {
	0%, 100% { 
		opacity: 1; 
		transform: scale(1);
		filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
	}
	50% { 
		opacity: 0.8; 
		transform: scale(1.05);
		filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
	}
}

.profile-header {
	padding: 1rem 1.5rem;
	padding-top: 0px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.back-button {
	background: none;
	border: none;
	color: #9ca3af;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.3s ease;
	margin-bottom: 1rem;
	padding: 0.5rem 0;
}

.back-button:hover {
	color: #2dd4bf;
}

.back-button i {
	font-size: 0.875rem;
}

.artist-name {
	text-align: center;
}

.artist-name h1 {
	font-size: 2rem;
	font-weight: bold;
	color: #fff;
	margin: 0 0 0.5rem 0;
}

.artist-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 0.75rem;
}

.vip-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: linear-gradient(135deg, #2dd4bf, #0d9488);
	color: #000;
	padding: 0.375rem 0.75rem;
	border-radius: 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.vip-badge i {
	font-size: 0.7rem;
}

.top-artist-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: linear-gradient(135deg, #fbbf24, #f59e0b);
	color: #000;
	padding: 0.375rem 0.75rem;
	border-radius: 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.top-artist-badge i {
	font-size: 0.7rem;
}

/* Featured Release Section */
.featured-release {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem;
	background: rgba(31, 41, 55, 0.5);
	margin: 1rem 1.5rem;
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 0px;
}

.featured-artwork {
	width: 80px;
	height: 80px;
	border-radius: 0.75rem;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.featured-artwork img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.featured-artwork .artwork-placeholder {
	width: 100%;
	height: 100%;
	border-radius: 0.75rem;
}

.featured-artwork .artwork-placeholder::after {
	font-size: 2rem;
}

.featured-info {
	flex: 1;
	min-width: 0;
}

.release-date {
	font-size: 0.75rem;
	color: #9ca3af;
	font-weight: 500;
	margin-bottom: 0.25rem;
	letter-spacing: 0.05em;
}

.featured-title {
	font-size: 1.125rem;
	font-weight: bold;
	color: #fff;
	margin-bottom: 0.25rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.featured-subtitle {
	font-size: 0.875rem;
	color: #6b7280;
	margin-bottom: 0.75rem;
}

.featured-stats {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.featured-likes {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: #10b981;
	font-size: 0.875rem;
	font-weight: 500;
}

.featured-likes i {
	font-size: 0.75rem;
}

.featured-playtime .next-play,
.featured-playtime .no-playtime {
	font-size: 0.75rem;
	padding: 0.375rem 0.5rem;
}

/* Profile Stats */
.profile-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat {
	text-align: center;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
}

.stat-number {
	display: block;
	font-size: 1.5rem;
	font-weight: bold;
	color: #2dd4bf;
	margin-bottom: 0.25rem;
}

.stat-label {
	font-size: 0.75rem;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 500;
}

/* Top Songs Section */
.top-songs-section {
	padding: 1rem 1.5rem;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.section-header h2 {
	font-size: 1.5rem;
	font-weight: bold;
	color: #fff;
	margin: 0;
}

.section-header i {
	color: #9ca3af;
	font-size: 1rem;
}

/* Mobile Songs List */
.songs-list-mobile {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mobile-song-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 0.75rem;
	transition: all 0.3s ease;
}

.mobile-song-item:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(45, 212, 191, 0.2);
}

.mobile-song-item.song-pending {
	opacity: 0.7;
	border-color: rgba(255, 193, 7, 0.3);
}

.mobile-song-artwork {
	width: 50px;
	height: 50px;
	border-radius: 0.5rem;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mobile-song-artwork img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mobile-song-artwork .artwork-placeholder {
	width: 100%;
	height: 100%;
	border-radius: 0.5rem;
}

.mobile-song-artwork .artwork-placeholder::after {
	font-size: 1.25rem;
}

.mobile-song-info {
	flex: 1;
	min-width: 0;
}

.mobile-song-title {
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	line-height: 1.3;
}

.mobile-song-details {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.875rem;
	flex-wrap: wrap;
}

.mobile-song-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.mobile-song-likes {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: #10b981;
	font-weight: 500;
}

.mobile-song-likes i {
	font-size: 0.75rem;
}

.mobile-song-rank {
	color: #6b7280;
	font-weight: 500;
}

.mobile-song-playtime {
	flex-shrink: 0;
}

.mobile-song-playtime .next-play,
.mobile-song-playtime .no-playtime {
	font-size: 0.75rem;
	padding: 0.375rem 0.5rem;
	justify-content: center;
	min-width: 80px;
}

/* No Songs State */
.no-songs {
	text-align: center;
	padding: 3rem 2rem;
	color: #9ca3af;
}

.no-songs i {
	font-size: 2.5rem;
	color: #4b5563;
	margin-bottom: 1rem;
}

.no-songs h3 {
	font-size: 1.25rem;
	margin: 0 0 0.5rem 0;
	color: #6b7280;
}

.no-songs p {
	font-size: 0.875rem;
	margin: 0;
}

/* Loading and Error States */
.profile-loading,
.profile-error {
	text-align: center;
	padding: 4rem 2rem;
	max-width: 500px;
	margin: 0 auto;
}

.loading-spinner {
	width: 50px;
	height: 50px;
	border: 3px solid rgba(45, 212, 191, 0.3);
	border-top: 3px solid #2dd4bf;
	border-radius: 50%;
	animation: loadingSpin 1s linear infinite;
	margin: 0 auto 1.5rem;
}

.profile-error i {
	font-size: 3rem;
	color: #ef4444;
	margin-bottom: 1rem;
}

.profile-error h3 {
	font-size: 1.5rem;
	color: #ef4444;
	margin: 0 0 0.5rem 0;
}

.profile-error p {
	color: #9ca3af;
	margin: 0 0 2rem 0;
}

/* Status Badges */
.status-badge {
	font-size: 0.65rem;
	padding: 0.25rem 0.5rem;
	border-radius: 0.375rem;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.status-pending {
	background: rgba(255, 193, 7, 0.2);
	color: #fbbf24;
	border: 1px solid rgba(255, 193, 7, 0.3);
}

@keyframes loadingSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Responsive Design for Artist Profiles */
@media (max-width: 480px) {
	.artist-profile {
		max-width: 100%;
	}

	.profile-header {
		padding: 1rem;
		padding-top: 0px;
	}

	.artist-name h1 {
		font-size: 1.5rem;
	}

	.artist-badges {
		gap: 0.5rem;
		margin-top: 0.5rem;
	}

	.vip-badge,
	.top-artist-badge {
		font-size: 0.7rem;
		padding: 0.25rem 0.5rem;
	}

	.featured-release {
		margin: 1rem;
		padding: 1rem;
		gap: 0.75rem;
		margin-bottom: 0px;
	}

	.featured-artwork {
		width: 60px;
		height: 60px;
	}

	.featured-artwork .artwork-placeholder::after {
		font-size: 1.5rem;
	}

	.featured-title {
		font-size: 1rem;
	}

	.featured-stats {
		gap: 0.75rem;
	}

	.featured-spotlight {
		margin: 1rem;
	}

	.spotlight-header {
		padding: 1rem;
	}

	.spotlight-title {
		font-size: 1.1rem;
	}

	.spotlight-modal-container {
		border-radius: 0;
		border: none;
		border-top: 2px solid rgba(45, 212, 191, 0.3);
	}

	.spotlight-modal-header {
		padding: 1.5rem 1rem 1rem;
	}

	.spotlight-modal-body {
		padding: 1rem;
		height: calc(100% - 140px);
	}

	.spotlight-modal-close {
		top: 0.5rem;
		right: 0.5rem;
		width: 35px;
		height: 35px;
		font-size: 1.1rem;
	}

	.spotlight-modal-title {
		font-size: 1.4rem;
	}

	.spotlight-modal-subtitle {
		font-size: 0.85rem;
	}

	.spotlight-modal-badge {
		font-size: 0.65rem;
		padding: 0.5rem 1rem;
		margin-bottom: 1rem;
		gap: 0.4rem;
	}

	.spotlight-modal-badge i {
		font-size: 0.6rem;
	}

	.spotlight-markdown {
		font-size: 0.9rem;
	}

	.spotlight-markdown h1 { font-size: 1.3rem; }
	.spotlight-markdown h2 { font-size: 1.1rem; }
	.spotlight-markdown h3 { font-size: 1rem; }
	
	.spotlight-badge {
		font-size: 0.7rem;
		padding: 0.4rem 0.8rem;
	}
}

/* Extra small screens */
@media (max-width: 360px) {
	.spotlight-modal-header {
		padding: 0.75rem;
	}

	.spotlight-modal-body {
		padding: 0.75rem;
		height: calc(100% - 70px);
	}

	.spotlight-modal-close {
		top: 0.25rem;
		right: 0.25rem;
		width: 30px;
		height: 30px;
		font-size: 1rem;
	}

	.spotlight-modal-title {
		font-size: 1rem;
	}

	.spotlight-modal-subtitle {
		font-size: 0.75rem;
	}

	.spotlight-modal-badge {
		font-size: 0.6rem;
		padding: 0.4rem 0.8rem;
		margin-bottom: 0.75rem;
		gap: 0.3rem;
	}

	.spotlight-modal-badge i {
		font-size: 0.55rem;
	}

	.profile-stats {
		padding: 1rem;
		gap: 1rem;
	}

	.stat {
		padding: 0.5rem;
	}

	.stat-number {
		font-size: 1.25rem;
	}

	.stat-label {
		font-size: 0.7rem;
	}

	.top-songs-section {
		padding: 1rem;
	}

	.section-header h2 {
		font-size: 1.25rem;
	}

	.mobile-song-item {
		padding: 0.75rem;
		gap: 0.75rem;
	}

	.mobile-song-artwork {
		width: 45px;
		height: 45px;
	}

	.mobile-song-artwork .artwork-placeholder::after {
		font-size: 1rem;
	}

	.mobile-song-title {
		font-size: 0.9rem;
	}

	.mobile-song-details {
		font-size: 0.8rem;
		gap: 0.75rem;
		flex-direction: column;
		align-items: flex-start;
	}

	.mobile-song-meta {
		gap: 0.75rem;
	}

	.mobile-song-playtime {
		align-self: flex-end;
		margin-top: 0.25rem;
	}

	.mobile-song-playtime .next-play,
	.mobile-song-playtime .no-playtime {
		font-size: 0.7rem;
		padding: 0.25rem 0.375rem;
		min-width: 70px;
	}

	.no-songs {
		padding: 2rem 1rem;
	}

	.no-songs i {
		font-size: 2rem;
	}

	.no-songs h3 {
		font-size: 1.125rem;
	}

	.no-songs p {
		font-size: 0.8rem;
	}
}

/* Extra small screens - even more compact */
@media (max-width: 360px) {
	.mobile-song-details {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.mobile-song-playtime {
		align-self: stretch;
		margin-top: 0.25rem;
	}

	.mobile-song-playtime .next-play,
	.mobile-song-playtime .no-playtime {
		width: 100%;
		justify-content: center;
		min-width: auto;
	}
}

/* Clickable Artist Names */
.clickable-artist {
	cursor: pointer;
	transition: all 0.3s ease;
	border-radius: 0.25rem;
	padding: 0.125rem 0.25rem;
	margin: -0.125rem -0.25rem;
}

.clickable-artist:hover {
	color: #2dd4bf !important;
	background: rgba(45, 212, 191, 0.1);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.clickable-artist:active {
	transform: scale(0.98);
}

/* Play Time Displays */
.next-play,
.no-playtime {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	font-weight: 500;
	justify-content: flex-end;
}

.next-play {
	color: #2dd4bf;
	background: rgba(45, 212, 191, 0.1);
	padding: 0.5rem 0.75rem;
	border-radius: 0.75rem;
	border: 1px solid rgba(45, 212, 191, 0.2);
}

.next-play.playing-now {
	color: #10b981;
	background: rgba(16, 185, 129, 0.15);
	border-color: rgba(16, 185, 129, 0.3);
	animation: playingPulse 2s ease-in-out infinite;
}

@keyframes playingPulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
	}
	50% {
		box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
	}
}

.no-playtime {
	color: #6b7280;
	background: rgba(107, 114, 128, 0.1);
	padding: 0.5rem 0.75rem;
	border-radius: 0.75rem;
	border: 1px solid rgba(107, 114, 128, 0.2);
}

.next-play i,
.no-playtime i {
	font-size: 0.75rem;
}