._pageRoot_18qh8_1 {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	gap: var(--space-100);
}

@media (max-width: 600px) {
	._pageRoot_18qh8_1 {
		gap: 0;
		/* Default: maintain safe area for all pages */
		padding-top: env(safe-area-inset-top);
	}
}

/* Fix iOS WebView double-tap issue */
@media (hover: none) and (pointer: coarse) {
	/* Remove all hover states on touch devices */
	*:hover {
		/* Reset hover styles */
	}

	/* Apply touch-action to all interactive elements */
	button,
	a,
	[role='button'],
	[onclick],
	.clickable,
	[class*='track'],
	[class*='item'],
	[class*='card'] {
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		touch-action: manipulation;
		cursor: pointer;
	}

	/* Ensure click handlers work on first tap */
	div[onclick],
	div[onDoubleClick] {
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}
}
:root {
	--slider-hitbox-size: 28px;
}

._sliderContainer_1v61r_5 {
	width: 100%;
	cursor: pointer;
	height: var(--slider-hitbox-size);
	display: flex;
	align-items: center;
}

._sliderTrack_1v61r_13 {
	position: relative;
	width: 100%;
	height: 4.33px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 3px;
	overflow: visible; /* Allow thumb to show properly */
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

._sliderContainer_1v61r_5:hover ._sliderTrack_1v61r_13 {
	height: 5px; /* Slightly thicker but not too much */
}

._sliderCompletedTrack_1v61r_27 {
	position: absolute;
	height: 100%;
	background-color: white; /* Default, overridden by vibrant color */
	border-radius: 3px;
	transition: width 100ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: width;
	/* Ensure completed track doesn't overflow */
	overflow: hidden;
}

._sliderCompletedTrack_1v61r_27._dragging_1v61r_38 {
	transition: none;
}

._sliderContainer_1v61r_5:hover ._sliderCompletedTrack_1v61r_27 {
	/* Keep the vibrant album color on hover, just subtle brightness */
	filter: brightness(1.15);
}

._sliderContainerWithThumb_1v61r_47:hover ._sliderCompletedTrack_1v61r_27 {
	/* Keep using vibrant album color with subtle brightness */
	filter: brightness(1.15);
}

._sliderThumb_1v61r_52 {
	position: absolute;
	width: var(--slider-hitbox-size);
	height: var(--slider-hitbox-size);
	transform: translate(-50%, -50%) scale(0);
	top: 50%;
	opacity: 0;
	transition:
		transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform, opacity;
	pointer-events: none; /* Prevent thumb from blocking track interactions */
	z-index: 2; /* Ensure thumb appears above track */
}

._sliderThumbInner_1v61r_70 {
	width: 13px;
	height: 13px;
	background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 100%);
	border-radius: 50%;
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.3),
		0 1px 3px rgba(0, 0, 0, 0.4),
		inset 0 1px 2px rgba(255, 255, 255, 0.5);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

._sliderContainer_1v61r_5:hover ._sliderThumb_1v61r_52 {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	pointer-events: auto; /* Re-enable pointer events on hover */
}

._sliderContainer_1v61r_5:hover ._sliderThumbInner_1v61r_70 {
	width: 15px;
	height: 15px;
	box-shadow:
		0 3px 12px rgba(255, 255, 255, 0.3),
		0 2px 6px rgba(0, 0, 0, 0.3),
		inset 0 1px 2px rgba(255, 255, 255, 0.7);
}

._sliderThumb_1v61r_52._dragging_1v61r_38 {
	opacity: 1;
	cursor: pointer;
	will-change: transform;
	transform: translate(-50%, -50%) scale(1.1);
}

._sliderThumb_1v61r_52._dragging_1v61r_38 ._sliderThumbInner_1v61r_70 {
	width: 17px;
	height: 17px;
	/* Keep white/light color when dragging, not blue */
	background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 100%);
	box-shadow:
		0 4px 16px rgba(255, 255, 255, 0.4),
		0 2px 8px rgba(0, 0, 0, 0.3),
		inset 0 1px 3px rgba(255, 255, 255, 0.8);
}

._sliderContainerWithThumb_1v61r_47 ._sliderThumb_1v61r_52 {
	opacity: 0;
}

._sliderContainerWithThumb_1v61r_47:hover ._sliderThumb_1v61r_52 {
	opacity: 1;
}

._sliderContainerWithThumb_1v61r_47 ._sliderCompletedTrack_1v61r_27 {
	background-color: var(--vibrant-album-color, white);
}

._sliderContainerWithThumb_1v61r_47:not(:hover) ._sliderCompletedTrack_1v61r_27 {
	background-color: var(--vibrant-album-color, white);
}

/* Ensure normal slider also uses vibrant color when available */
._sliderContainer_1v61r_5 ._sliderCompletedTrack_1v61r_27 {
	background-color: var(--vibrant-album-color, white);
}

._sliderContainerDisabled_1v61r_136 {
	pointer-events: none;
	opacity: 0.5;
}

._sliderContainerDisabled_1v61r_136 ._sliderCompletedTrack_1v61r_27 {
	background-color: white;
}

._sliderContainerVertical_1v61r_145 {
	height: 100%;
	cursor: pointer;
	width: unset;
	padding: 20px;

	._sliderTrack_1v61r_13 {
		height: 100%;
		width: 12.98px;
	}

	._sliderCompletedTrack_1v61r_27 {
		width: 12.98px;
		bottom: 0;
		will-change: height;
	}

	._sliderThumb_1v61r_52 {
		top: unset;
		bottom: 0;
		transform: translate(-50%, 50%);
		width: 55px;
		height: 55px;
		opacity: 1; /* Always show thumb for vertical sliders (mobile) */
		will-change: transform;

		._sliderThumbInner_1v61r_70 {
			width: 35px;
			height: 35px;
		}
	}
}
._root_uleok_1 {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 565px;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: visible;
}

@media (max-width: 920px) {
	._root_uleok_1 {
		max-width: 471px;
	}
}

@media (max-width: 600px) {
	._root_uleok_1 {
		max-width: 353px;
	}
}

._Control_uleok_24 {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
}

._SliderContiner_uleok_32 {
	position: relative;
	flex: 1;
	height: 28px;
	display: flex;
	align-items: center;
	/* Allow overflow for animation to not get clipped */
	overflow: visible;
}

._ProgressBarBox_uleok_42 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

._ProgressBarBox_uleok_42 p {
	width: 44px;
	font-size: 0.85em;
}

._ProgressBarBox_uleok_42 p:last-child {
	text-align: right;
}

._loadingTrackIndicator_uleok_59 {
	height: 4px;
	width: 100%;
	background: linear-gradient(90deg, rgba(91, 41, 197, 0.15) 0%, rgba(71, 21, 177, 0.1) 100%);
	border-radius: 2px;
	position: relative;
	overflow: hidden;
	box-shadow:
		0 0 20px rgba(131, 81, 237, 0.3),
		inset 0 0 10px rgba(91, 41, 197, 0.15);
}

/* Reuse premium wave animation but slower for no track state */
._loadingTrackIndicator_uleok_59::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		transparent 10%,
		rgba(167, 71, 254, 0.6) 25%,
		rgba(188, 105, 255, 1) 50%,
		rgba(167, 71, 254, 0.6) 75%,
		transparent 90%,
		transparent 100%
	);
	animation: _smoothWaveSlower_uleok_1 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Secondary shimmer for no track state */
._loadingTrackIndicator_uleok_59::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0) 40%,
		rgba(255, 255, 255, 0.15) 50%,
		rgba(255, 255, 255, 0) 60%,
		transparent 100%
	);
	animation: _shimmerWaveSlower_uleok_1 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	animation-delay: 0.7s;
}

@keyframes _smoothWaveSlower_uleok_1 {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateX(100%);
		opacity: 0;
	}
}

@keyframes _shimmerWaveSlower_uleok_1 {
	0% {
		transform: translateX(-100%) skewX(-25deg);
	}
	100% {
		transform: translateX(100%) skewX(-25deg);
	}
}

/* Pulse animation for loading state with glow */
._pulse_uleok_139 {
	animation: _pulse_uleok_139 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes _pulse_uleok_139 {
	0%,
	100% {
		opacity: 0.6;
		filter: brightness(0.95);
		box-shadow:
			0 0 20px rgba(131, 81, 237, 0.3),
			inset 0 0 10px rgba(91, 41, 197, 0.15);
	}
	50% {
		opacity: 1;
		filter: brightness(1.05);
		box-shadow:
			0 0 30px rgba(147, 51, 234, 0.5),
			inset 0 0 15px rgba(111, 21, 204, 0.25);
	}
}

/* Loading state for progress bar */
._ProgressBarBox_uleok_42._loading_uleok_59 {
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

._loadingText_uleok_167 {
	opacity: 0.5;
	animation: _textPulse_uleok_1 1.5s ease-in-out infinite;
}

@keyframes _textPulse_uleok_1 {
	0%,
	100% {
		opacity: 0.3;
	}
	50% {
		opacity: 0.7;
	}
}

/* Buffering state container */
._SliderContiner_uleok_32._buffering_uleok_183 {
	position: relative;
	overflow: visible;
}

/* Premium buffering overlay - sleek and modern */
._bufferingOverlay_uleok_189 {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	transform: translateY(-50%);
	z-index: 10;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(91, 41, 197, 0.15) 0%, rgba(71, 21, 177, 0.1) 100%);
	overflow: hidden;
	box-shadow:
		0 0 20px rgba(131, 81, 237, 0.3),
		inset 0 0 10px rgba(91, 41, 197, 0.15);
	animation: _overlayGlow_uleok_1 1.2s ease-in-out infinite;
}

@keyframes _overlayGlow_uleok_1 {
	0%,
	100% {
		box-shadow:
			0 0 20px rgba(131, 81, 237, 0.3),
			inset 0 0 10px rgba(91, 41, 197, 0.15);
	}
	50% {
		box-shadow:
			0 0 30px rgba(147, 51, 234, 0.5),
			inset 0 0 15px rgba(111, 21, 204, 0.25);
	}
}

/* Premium wave animation */
._bufferingWave_uleok_221 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		transparent 10%,
		rgba(167, 71, 254, 0.6) 25%,
		rgba(188, 105, 255, 1) 50%,
		rgba(167, 71, 254, 0.6) 75%,
		transparent 90%,
		transparent 100%
	);
	animation: _smoothWave_uleok_1 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Secondary shimmer effect */
._bufferingWave_uleok_221::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0) 40%,
		rgba(255, 255, 255, 0.15) 50%,
		rgba(255, 255, 255, 0) 60%,
		transparent 100%
	);
	animation: _shimmerWave_uleok_1 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	animation-delay: 0.3s;
}

@keyframes _smoothWave_uleok_1 {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateX(100%);
		opacity: 0;
	}
}

@keyframes _shimmerWave_uleok_1 {
	0% {
		transform: translateX(-100%) skewX(-25deg);
	}
	100% {
		transform: translateX(100%) skewX(-25deg);
	}
}

/* Pulse effect underneath */
._bufferingPulse_uleok_287 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: linear-gradient(90deg, rgba(131, 81, 237, 0.2), rgba(147, 51, 234, 0.3), rgba(131, 81, 237, 0.2));
	border-radius: 2px;
	animation: _subtlePulse_uleok_1 1s ease-in-out infinite;
}

@keyframes _subtlePulse_uleok_1 {
	0%,
	100% {
		opacity: 0.3;
		transform: scaleY(1);
	}
	50% {
		opacity: 0.6;
		transform: scaleY(1.5);
	}
}

/* Premium glow effect during buffering */
._SliderContiner_uleok_32._buffering_uleok_183::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 30px;
	background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.4) 0%, rgba(147, 51, 234, 0.2) 30%, transparent 70%);
	animation: _premiumGlow_uleok_1 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	pointer-events: none;
	z-index: 9;
	filter: blur(8px);
}

@keyframes _premiumGlow_uleok_1 {
	0%,
	100% {
		opacity: 0.5;
		transform: translate(-50%, -50%) scaleX(0.8) scaleY(0.6);
	}
	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scaleX(1.2) scaleY(1);
	}
}

/* Premium dots loader */
._bufferingSpinner_uleok_339 {
	display: flex;
	gap: 3px;
	align-items: center;
}

._bufferingSpinner_uleok_339::before,
._bufferingSpinner_uleok_339::after,
._bufferingSpinner_uleok_339 span {
	content: '';
	display: block;
	width: 3px;
	height: 3px;
	background: linear-gradient(135deg, #8351ed, #a78bfa);
	border-radius: 50%;
	animation: _dotPulse_uleok_1 1.4s ease-in-out infinite;
}

._bufferingSpinner_uleok_339 span {
	animation-delay: 0.16s;
}

._bufferingSpinner_uleok_339::after {
	animation-delay: 0.32s;
}

@keyframes _dotPulse_uleok_1 {
	0%,
	80%,
	100% {
		transform: scale(0.8);
		opacity: 0.5;
	}
	40% {
		transform: scale(1.2);
		opacity: 1;
	}
}

._bufferingText_uleok_378 {
	font-size: 0.75em;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
	letter-spacing: 0.5px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	background: rgba(0, 0, 0, 0.3);
	padding: 2px 8px;
	border-radius: 4px;
	animation: _fadeInOut_uleok_1 2s ease-in-out infinite;
}

@keyframes _fadeInOut_uleok_1 {
	0%,
	100% {
		opacity: 0.4;
	}
	50% {
		opacity: 0.8;
	}
}

/* Host banner styles */
._hostBanner_uleok_401 {
	position: absolute;
	top: -48px;
	left: -10px;
	right: -10px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	backdrop-filter: blur(10px);
	animation: _slideDown_uleok_1 0.3s ease-out;
	z-index: 10;
}

._hostBannerContent_uleok_416 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
}

._hostMessage_uleok_423 {
	font-size: 13px;
	color: var(--text-secondary);
	opacity: 1;
	font-weight: 600;
	letter-spacing: 0.3px;
}

/* Follower banner styles */
._followerBanner_uleok_432 {
	position: absolute;
	top: -52px;
	left: 50%;
	transform: translateX(-50%);
	height: 34px;
	min-width: 340px;
	width: auto;
	background: rgba(10, 10, 10, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(20px) saturate(1.8);
	-webkit-backdrop-filter: blur(20px) saturate(1.8);
	animation: _slideDown_uleok_1 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 10;
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.3),
		0 1px 3px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	overflow: hidden;
}

._followerBanner_uleok_432::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(ellipse at center top, var(--vibrant-album-color, rgba(255, 255, 255, 0.05)) 0%, transparent 60%);
	opacity: 0.15;
	pointer-events: none;
}

._followerBanner_uleok_432::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--vibrant-album-color, rgba(255, 255, 255, 0.2)) 30%,
		var(--vibrant-album-color, rgba(255, 255, 255, 0.2)) 70%,
		transparent
	);
	opacity: 0.3;
}

@keyframes _slideDown_uleok_1 {
	from {
		transform: translateX(-50%) translateY(-20px);
		opacity: 0;
	}
	to {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}
}

._followerBannerContent_uleok_497 {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 20px;
}

._followerMessage_uleok_504 {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 500;
	letter-spacing: 0.2px;
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

._followerMessage_uleok_504::before {
	content: '📱';
	font-size: 15px;
	filter: grayscale(0.2) brightness(0.9);
}

._playOnThisDeviceBtn_uleok_521 {
	padding: 4px 8px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
	color: rgba(255, 255, 255, 0.9);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	letter-spacing: 0.1px;
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	position: relative;
	overflow: hidden;
}

._playOnThisDeviceBtn_uleok_521::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--vibrant-album-color, rgba(255, 255, 255, 0.1));
	opacity: 0;
	transition: opacity 0.2s ease;
}

._playOnThisDeviceBtn_uleok_521:hover {
	transform: scale(1.02);
	border-color: rgba(255, 255, 255, 0.15);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

._playOnThisDeviceBtn_uleok_521:hover::before {
	opacity: 0.08;
}

._playOnThisDeviceBtn_uleok_521:active {
	transform: scale(0.98);
}

/* Disable slider hover effects for followers */
._followerSlider_uleok_566 {
	pointer-events: none !important;
	cursor: default !important;
}

._followerSlider_uleok_566 * {
	cursor: default !important;
	pointer-events: none !important;
}

._followerSlider_uleok_566 .sliderContainer {
	cursor: default !important;
	pointer-events: none !important;
}

/* Disable all hover effects for follower sliders */
._followerSlider_uleok_566 .sliderContainer:hover .sliderTrack {
	height: 4.33px !important; /* Keep original height, no hover effect */
}

._followerSlider_uleok_566 .sliderContainer:hover .sliderCompletedTrack {
	filter: none !important; /* No brightness change on hover */
}

._followerSlider_uleok_566 .sliderContainer:hover .sliderThumb {
	opacity: 0 !important; /* Never show thumb on hover for followers */
	transform: translate(-50%, -50%) scale(0) !important;
}

/* Preserve vibrant color for follower sliders - override all disabled styles */
._followerSlider_uleok_566 .sliderContainer {
	opacity: 1 !important;
	cursor: default !important;
}

._followerSlider_uleok_566 .sliderTrack {
	opacity: 1 !important;
	filter: none !important;
	cursor: default !important;
}

._followerSlider_uleok_566 .sliderCompletedTrack {
	background-color: var(--vibrant-album-color, white) !important;
	opacity: 1 !important;
	filter: none !important;
	cursor: default !important;
}
._root_waln2_1 {
	width: 100vw;
	height: 100vh;
	display: flex;
	padding: var(--space-600);
	box-sizing: border-box;
	overflow: hidden;
}

._content_waln2_10 {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	background-color: var(--bg-depth-1);
	border-radius: var(--radius-200);
	position: relative;
	padding: var(--space-400);
	overflow: hidden;
}

._root_waln2_1 img {
	object-fit: contain;
	width: 90px;
	height: 90px;
	border-radius: var(--radius-200);
}

._trackInfo_waln2_31 {
	display: flex;
	align-items: center;
	gap: var(--space-600);
	width: 100%;
}

._trackInfoText_waln2_38 {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-100);
	height: 100%;
	overflow: hidden;
}
/* Navigation customization variables */
:root {
	/* Normal state */
	--nav-opacity-normal: 0.6;
	--nav-label-color-normal: inherit;

	/* Active/highlighted state */
	--nav-opacity-active: 1;
	--nav-label-color-active: #ffffff;
	--nav-label-weight-active: 500;

	/* Icon sizes - now consistent for all icons */
	--nav-icon-size: 22px;

	/* Layout variables */
	--nav-item-gap: 1px;
	--nav-label-size: 9px;
	--nav-label-margin-top: 1px;
}

._navigationSection_1t097_21 {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	padding: 6px var(--space-200) 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

._navItem_1t097_30 {
	opacity: var(--nav-opacity-normal);
	padding: 4px 8px;
	min-height: 32px;
	min-width: 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--nav-item-gap);
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	transition: opacity 0.2s ease;
}

._navItem_1t097_30:hover,
._navItem_1t097_30:active,
._navItem_1t097_30:focus,
._navItem_1t097_30:visited {
	text-decoration: none !important;
}

._navItem_1t097_30 img {
	width: var(--nav-icon-size);
	height: var(--nav-icon-size);
	display: block;
	transition: opacity 0.2s ease;
}

._navLabel_1t097_62 {
	font-size: var(--nav-label-size);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
	margin-top: 5px;
	text-decoration: none !important;
}

._navItem_1t097_30._active_1t097_73 {
	opacity: var(--nav-opacity-active);
}

._navItem_1t097_30._active_1t097_73 ._navLabel_1t097_62 {
	color: var(--nav-label-color-active);
	font-weight: var(--nav-label-weight-active);
	text-decoration: none;
}

._root_1t097_83 {
	z-index: 100000;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to bottom, rgba(var(--vibrant-album-color-rgb, 0, 0, 0), 0.15), rgba(0, 0, 0, 0.85));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) - 10px);
	padding-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - 10px)); /* Ensure it never goes negative */
}

@media (min-width: 769px) {
	._root_1t097_83 {
		display: none;
	}
}
._root_10vng_1 {
	width: 36px;
	height: 36px;
	padding: 8px;
	overflow: hidden;
	flex-shrink: 0;
}

._root_10vng_1 img,
._root_10vng_1 svg {
	width: 100%;
	height: 100%;
}

._active_10vng_15 {
	opacity: 1;
}
._banner_1wjpu_1 {
	background: linear-gradient(135deg, rgba(255, 149, 0, 0.15), rgba(255, 193, 7, 0.15));
	border: 1px solid rgba(255, 149, 0, 0.3);
	border-radius: var(--radius-300);
	padding: var(--space-250) var(--space-400);
	margin-bottom: var(--space-300);
}

._banner_1wjpu_1._compact_1wjpu_9 {
	display: inline-flex;
	align-items: center;
	padding: var(--space-100) var(--space-200);
	margin: 0;
	border-radius: var(--radius-200);
	background: rgba(255, 149, 0, 0.2);
}

._content_1wjpu_18 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-250);
}

._message_1wjpu_25 {
	font-size: 13px;
	color: var(--text-primary);
	font-weight: 500;
	flex: 1;
}

._compactText_1wjpu_32 {
	font-size: 11px;
	font-weight: 500;
	color: var(--text-secondary);
	white-space: nowrap;
}

._playOnThisDeviceBtn_1wjpu_39 {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-200);
	color: var(--text-primary);
	font-size: 12px;
	font-weight: 600;
	padding: var(--space-200) var(--space-300);
	cursor: pointer;
	transition:
		background 0.2s ease,
		transform 0.1s ease;
	white-space: nowrap;
	flex-shrink: 0;
}

._playOnThisDeviceBtn_1wjpu_39:hover {
	background: rgba(255, 255, 255, 0.15);
	transform: scale(1.02);
}

._playOnThisDeviceBtn_1wjpu_39:active {
	transform: scale(0.98);
}
._banner_kr7kk_1 {
	background: rgba(131, 81, 237, 0.15);
	border: 1px solid rgba(131, 81, 237, 0.3);
	border-radius: var(--radius-300);
	padding: var(--space-200) var(--space-300);
	margin-bottom: var(--space-300);
	cursor: pointer;
	transition: background 0.2s ease;
}

._banner_kr7kk_1:hover {
	background: rgba(131, 81, 237, 0.2);
}

._banner_kr7kk_1._compact_kr7kk_15 {
	display: inline-flex;
	align-items: center;
	gap: var(--space-100);
	padding: var(--space-100) var(--space-200);
	margin: 0;
	border-radius: var(--radius-200);
	background: rgba(131, 81, 237, 0.2);
}

._content_kr7kk_25 {
	display: flex;
	align-items: center;
	justify-content: center;
}

._hostInfo_kr7kk_31 {
	display: flex;
	align-items: center;
	gap: var(--space-200);
}

._avatar_kr7kk_37,
._avatarPlaceholder_kr7kk_38 {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

._avatarPlaceholder_kr7kk_38 {
	background: var(--accent-primary);
	color: var(--text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
}

._text_kr7kk_55 {
	font-size: 13px;
	color: var(--text-primary);
	display: flex;
	gap: var(--space-100);
}

._hostName_kr7kk_62 {
	font-weight: 600;
	color: var(--accent-primary);
}

._controlText_kr7kk_67 {
	color: var(--text-secondary);
}

._compactText_kr7kk_71 {
	font-size: 11px;
	font-weight: 500;
	color: var(--text-secondary);
}
._container_74c5z_1 {
	display: flex;
	align-items: center;
	gap: var(--space-200);
}

._container_74c5z_1._compact_74c5z_7 {
	gap: var(--space-100);
}

._avatarStack_74c5z_11 {
	display: flex;
	align-items: center;
}

._avatarWrapper_74c5z_16 {
	position: relative;
	margin-left: -8px;
	border: 2px solid rgba(0, 0, 0, 0.85);
	border-radius: 50%;
	background: var(--bg-depth-1);
}

._compact_74c5z_7 ._avatarWrapper_74c5z_16 {
	margin-left: -6px;
	border-width: 1.5px;
}

._avatarWrapper_74c5z_16:first-child {
	margin-left: 0;
}

._avatar_74c5z_11,
._avatarPlaceholder_74c5z_34 {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-primary);
	background: var(--accent-primary);
}

._compact_74c5z_7 ._avatar_74c5z_11,
._compact_74c5z_7 ._avatarPlaceholder_74c5z_34 {
	width: 24px;
	height: 24px;
	font-size: 10px;
}

._avatar_74c5z_11 {
	object-fit: cover;
}

._hostBadge_74c5z_58 {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 12px;
	height: 12px;
	background: var(--bg-depth-0);
	border-radius: 50%;
	padding: 1px;
}

._moreCount_74c5z_69 {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--bg-depth-2);
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
}

._compact_74c5z_7 ._moreCount_74c5z_69 {
	width: 24px;
	height: 24px;
	font-size: 10px;
}

._listenerCount_74c5z_88 {
	color: var(--text-secondary);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}
._nowPlayingSectionRoot_4w7bw_1 {
	position: fixed;
	bottom: 45px;
	bottom: calc(45px + env(safe-area-inset-bottom, 0px));
	left: 0;
	right: 0;
	padding: var(--space-200);
	padding-left: calc(var(--space-200) + env(safe-area-inset-left, 0px));
	padding-right: calc(var(--space-200) + env(safe-area-inset-right, 0px));
}

._panelOpen_4w7bw_12 ._smallNowPlaying_4w7bw_12 {
	display: none;
}

._panelOpen_4w7bw_12 ._largeNowPlaying_4w7bw_16 {
	display: flex;
}

._smallNowPlaying_4w7bw_12 {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-400);
	height: 61px;
	z-index: 100000;
	position: relative;
	overflow: hidden;
}

._largeNowPlaying_4w7bw_16 {
	display: none;
	flex-direction: column;
	padding: var(--space-400);
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-400);
	z-index: 100000;
	position: relative;
	overflow: hidden;
	gap: var(--space-400);
	justify-content: space-between;
}

._largeNowPlayingTrackDetailsImage_4w7bw_54 {
	width: 300px;
	height: 300px;
	margin: 0 auto;
}

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

._nowPlayingProgress_4w7bw_66 {
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	height: 4px;
	background-color: var(--bg-depth-2);
}

._nowPlayingTrackDetails_4w7bw_75 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: start;
	width: 100%;
	padding: var(--space-400);
}

._largeNowPlayingTrackDetailsText_4w7bw_84 {
	width: 100%;
	overflow: hidden;
	padding: var(--space-400);
}

._largeTitleAndLikeButton_4w7bw_90 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

._largeNowPlayingTrackDetailsControls_4w7bw_98 {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	padding: 0 var(--space-400);
}

._largeNowPlayingTrackDetailsControls_4w7bw_98 ._directionBtn_4w7bw_110 {
	padding: var(--space-500);
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
	min-width: 44px;
	min-height: 44px;
}

._largeNowPlayingTrackDetailsControls_4w7bw_98 ._directionBtn_4w7bw_110:hover {
	background-color: rgba(255, 255, 255, 0.1);
	transform: scale(1.05);
}

._largeNowPlayingTrackDetailsControls_4w7bw_98 ._directionBtn_4w7bw_110 img {
	width: 24px;
	height: 24px;
}

._largeNowPlayingTrackDetailsControls_4w7bw_98 ._playPauseBtn_4w7bw_136 {
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
	min-width: 56px;
	min-height: 56px;
	padding: var(--space-600);
}

._largeNowPlayingTrackDetailsControls_4w7bw_98 ._playPauseBtn_4w7bw_136:hover {
	background-color: rgba(255, 255, 255, 0.1);
	transform: scale(1.05);
}

._largeNowPlayingTrackDetailsControls_4w7bw_98 ._playPauseBtn_4w7bw_136 img {
	width: 32px;
	height: 32px;
}

._largeNowPlayingTrackDetailsControls_4w7bw_98 smallSkipBtn {
	padding: var(--space-800);
}

._largeNowPlayingTrackDetailsControls_4w7bw_98 smallSkipBtn img {
	width: 38px;
	height: 38px;
}

._largeNowPlayingTrackDetailsArtists_4w7bw_171 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: start;
	width: 100%;
	gap: var(--space-200);
	overflow: hidden;
}

._nowPlayingProgressDone_4w7bw_181 {
	background-color: var(--vibrant-album-color);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
}

._nowPlayingTrackDetailsText_4w7bw_190 {
	margin-left: var(--space-600);
	height: 45px;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: space-between;
	flex: 1;
	overflow: hidden;
}

._nowPlayingTrackDetailsArtists_4w7bw_201 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: start;
	width: 100%;
	gap: var(--space-200);
}

._nowPlayingTrackDetailsImage_4w7bw_210 {
	height: 44px;
	width: 44px;
	border-radius: var(--radius-200);
}

._nowPlayingTrackDetailsControls_4w7bw_216 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--space-200);
	overflow: hidden;
	flex-shrink: 0;
}

._smallSkipBtn_4w7bw_226,
._smallPlayPauseBtn_4w7bw_227 {
	background-color: var(--bg-depth-2);
	border-radius: var(--radius-full);
	padding: var(--space-200);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

._smallSkipBtn_4w7bw_226:hover,
._smallPlayPauseBtn_4w7bw_227:hover {
	background-color: var(--bg-depth-3);
	transform: scale(1.05);
}

._smallSkipBtn_4w7bw_226:active,
._smallPlayPauseBtn_4w7bw_227:active {
	transform: scale(0.95);
}

._smallSkipBtn_4w7bw_226 img,
._smallPlayPauseBtn_4w7bw_227 img {
	width: 20px;
	height: 20px;
}

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

._largeNowPlayingTrackDetailsControls_4w7bw_98 ._collapseButtonContainer_4w7bw_258 {
	width: unset;
	position: absolute;
	left: var(--space-400);
	top: 50%;
	transform: translateY(-50%);
}

._collapseButton_4w7bw_258 {
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
	min-width: 40px;
	min-height: 40px;
	padding: var(--space-300);
}

._collapseButton_4w7bw_258:hover {
	background-color: rgba(255, 255, 255, 0.1);
	transform: scale(1.05);
}

._collapseButton_4w7bw_258 img {
	width: 20px;
	height: 20px;
}

/* Participant indicators and disabled states */
._participantIndicator_4w7bw_300 {
	display: flex;
	align-items: center;
}

._participantIndicator_4w7bw_300:not(:empty) {
	margin-right: var(--space-100);
}

._participantsSection_4w7bw_309 {
	display: flex;
	justify-content: center;
	margin-top: var(--space-300);
	margin-bottom: var(--space-200);
}

._controlsDisabled_4w7bw_316 {
	position: relative;
}

._controlsDisabled_4w7bw_316::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
	border-radius: inherit;
	pointer-events: none;
}

._disabled_4w7bw_332 {
	opacity: 0.4;
	cursor: not-allowed !important;
	position: relative;
}

._disabled_4w7bw_332:hover {
	transform: none !important;
	background-color: var(--bg-depth-2) !important;
}

._disabled_4w7bw_332 img {
	opacity: 0.7;
}

button:disabled {
	cursor: not-allowed;
}
._menuBackdrop_1oruy_1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

._menuContainer_1oruy_9 {
	position: fixed;
	z-index: 9999999;
	border-radius: var(--radius-400);
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
}

._overlay_1oruy_16 {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

._modalContainer_1oruy_25 {
	max-width: 80vw;
	max-height: 1000px;
}

._tooltipContainer_1oruy_30 {
	position: fixed;
	z-index: 1000;
	background-color: var(--bg-depth-0);
	border-radius: var(--radius-300);
	padding: var(--spacing-200);
	border: 1px solid var(--border-300);
	box-shadow: 0px 0px 20px #1b1d1f;
	padding: 14px 16px;
}

._compact_1oruy_41._tooltipContainer_1oruy_30 {
	padding: 4px 8px;
	box-shadow: 0px 0px 0px #1b1d1f;
}

/* Frame 1321315371 

box-sizing: border-box;


display: flex;
flex-direction: row;
align-items: center;
padding: 14px 16px;
gap: 4px;

position: absolute;
width: 324px;
height: 86px;
left: 593px;
top: 907px;

background: #101010;
border: 1px solid rgba(255, 255, 255, 0.1);

border-radius: 10px;

/* Inside auto layout 
flex: none;
order: 8;
flex-grow: 0;
z-index: 8;

.*/
._nowPlayingTrackDetails_1yrl5_1 {
	display: flex;
	gap: var(--space-500);
	align-items: center;
	flex: 1;
	height: 58px;
	overflow: hidden;
	padding-left: 8px;
	padding-right: 30px;
}

@media (max-width: 1200px) {
	._nowPlayingTrackDetails_1yrl5_1 {
		padding-right: 5px;
	}
}

/* Skeleton loading states for track details */
._skeletonThumbnail_1yrl5_19 {
	width: 54px;
	height: 54px;
	border-radius: var(--radius-100);
	background: rgba(255, 255, 255, 0.06);
	position: relative;
	overflow: hidden;
}

._skeletonThumbnail_1yrl5_19::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
	animation: _shimmerSlide_1yrl5_1 2s infinite;
}

._skeletonDetails_1yrl5_39 {
	display: flex;
	flex-direction: column;
	gap: var(--space-200);
	justify-content: center;
	flex: 1;
	overflow: hidden;
}

._skeletonTitle_1yrl5_48 {
	height: 16px;
	width: 160px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.08);
	position: relative;
	overflow: hidden;
}

._skeletonTitle_1yrl5_48::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
	animation: _shimmerSlide_1yrl5_1 2s infinite;
	animation-delay: 0.15s;
}

._skeletonArtist_1yrl5_69 {
	height: 13px;
	width: 100px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.05);
	position: relative;
	overflow: hidden;
}

._skeletonArtist_1yrl5_69::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
	animation: _shimmerSlide_1yrl5_1 2s infinite;
	animation-delay: 0.3s;
}

._skeletonLikeButton_1yrl5_90 {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	position: relative;
	overflow: hidden;
}

._skeletonLikeButton_1yrl5_90::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
	animation: _shimmerSlide_1yrl5_1 2s infinite;
	animation-delay: 0.45s;
}

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

._root_1yrl5_120 {
	height: 72px;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	width: 100%;
	display: flex;
	gap: 18px;
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: visible;
	max-height: 72px;
	position: relative;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 100%);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	/* border-top: 1px solid rgba(255, 255, 255, 0.08); */
	/* box-shadow: 
    0 -2px 12px rgba(0, 0, 0, 0.15),
    0 -4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06); */
	animation: _slideUp_1yrl5_1 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	will-change: transform, opacity, max-height;
	transform: translateZ(0); /* GPU acceleration */
	-webkit-font-smoothing: antialiased;

	* {
		transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
}

@keyframes _slideUp_1yrl5_1 {
	from {
		transform: translateY(15px) scale(0.98);
		opacity: 0;
		filter: blur(2px);
	}
	to {
		transform: translateY(0) scale(1);
		opacity: 1;
		filter: blur(0);
	}
}

._nowPlayingControllers_1yrl5_164 {
	display: flex;
	gap: var(--space-300);
	justify-content: center;
	overflow: visible;
}

._rightpanelmenu_1yrl5_171 {
	padding-right: 8px;
	justify-content: flex-end;
	display: flex;
	width: 270px;
	flex: 1;
	align-items: center;
	height: 100%;
	gap: 16px;
}

._hostIndicatorWrapper_1yrl5_182 {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

@media (max-width: 768px) {
	._root_1yrl5_120 {
		display: none;
	}
}

._loading_1yrl5_194 {
	opacity: 0.6;
	pointer-events: none;
	filter: brightness(0.9);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

._hide_1yrl5_201 {
	max-height: 0px !important;
	padding: 0 !important;
	transform: translateY(20px);
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;

	* {
		opacity: 0 !important;
		transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	}
}

/* Waiting state - player visible but no track playing */
._waiting_1yrl5_216 {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.05) 100%);
	position: relative;

	._nowPlayingControllers_1yrl5_164 {
		opacity: 0.7;
		pointer-events: none;
		filter: grayscale(0.2);
		transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	}

	._nowPlayingTrackDetails_1yrl5_1 {
		opacity: 0.75;
		filter: grayscale(0.1);
		transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	}
}

/* Subtle pulse overlay for waiting state */
._waiting_1yrl5_216::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(131, 81, 237, 0.02) 50%, transparent 100%);
	animation: _waitingPulse_1yrl5_1 4s ease-in-out infinite;
	pointer-events: none;
}

@keyframes _waitingPulse_1yrl5_1 {
	0%,
	100% {
		opacity: 0;
		transform: scaleX(0.8);
	}
	50% {
		opacity: 0.5;
		transform: scaleX(1);
	}
}

._transitioning_1yrl5_259 {
	animation: _pulse_1yrl5_1 1.5s ease-in-out infinite;
}

@keyframes _pulse_1yrl5_1 {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
	100% {
		opacity: 1;
	}
}

._pendingAutoplay_1yrl5_275 {
	display: flex;
	align-items: center;
	gap: var(--space-300);
	width: 100%;
}

._autoplayBadge_1yrl5_282 {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	animation: _shimmer_1yrl5_1 2s ease-in-out infinite;
}

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

._autoplayLoading_1yrl5_304 {
	display: flex;
	align-items: center;
	gap: var(--space-400);
	width: 100%;
}

._loadingText_1yrl5_311 {
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 500;
	animation: _fade_1yrl5_1 1.5s ease-in-out infinite;
}

@keyframes _fade_1yrl5_1 {
	0%,
	100% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
}
._banner_yv813_1 {
	position: absolute;
	top: -52px;
	left: 50%;
	transform: translateX(-50%);
	height: 34px;
	min-width: 340px;
	width: auto;
	background: rgba(10, 10, 10, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(20px) saturate(1.8);
	-webkit-backdrop-filter: blur(20px) saturate(1.8);
	animation: _slideDown_yv813_1 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 10;
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.3),
		0 1px 3px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	overflow: hidden;
}

._banner_yv813_1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(ellipse at center top, var(--vibrant-album-color, rgba(255, 255, 255, 0.05)) 0%, transparent 60%);
	opacity: 0.15;
	pointer-events: none;
}

._banner_yv813_1::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--vibrant-album-color, rgba(255, 255, 255, 0.2)) 30%,
		var(--vibrant-album-color, rgba(255, 255, 255, 0.2)) 70%,
		transparent
	);
	opacity: 0.3;
}

@keyframes _slideDown_yv813_1 {
	from {
		transform: translateX(-50%) translateY(-20px);
		opacity: 0;
	}
	to {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}
}

._content_yv813_66 {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0 20px;
}

._hostInfo_yv813_73 {
	display: flex;
	align-items: center;
	gap: 10px;
}

._avatar_yv813_79 {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	background-color: rgba(255, 255, 255, 0.03);
	flex-shrink: 0;
}

._text_yv813_89 {
	font-size: 13px;
	font-weight: 450;
	letter-spacing: 0.2px;
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 4px;
}

._hostName_yv813_99 {
	color: rgba(255, 255, 255, 0.95);
	font-weight: 600;
	font-size: 13px;
}

._controlText_yv813_105 {
	color: rgba(255, 255, 255, 0.65);
	font-weight: 450;
	font-size: 13px;
}
._root_1dbyp_1 {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc(25% - var(--space-500));
	min-width: 177.5px;
	background-color: var(--bg-depth-1);
	border-radius: var(--radius-200);
	transition: background-color var(--animation-duration-fast) var(--animation-timing-function);
	margin-right: var(--space-500);
	margin-bottom: var(--space-500);
	background-color: var(--overlay-100);
	height: 250px;
	user-select: none;
	-webkit-user-drag: none;
}

@media (max-width: 1200px) {
	._root_1dbyp_1 {
		flex: 0 0 calc(33.33% - var(--space-500));
	}
}

@media (max-width: 900px) {
	._root_1dbyp_1 {
		flex: 0 0 calc(50% - var(--space-500));
	}
}

@media (max-width: 600px) {
	._root_1dbyp_1 {
		flex: 0 0 100%;
		margin-right: 0;
	}
}

._root_1dbyp_1:hover {
	background-color: var(--overlay-200);
}

._root_1dbyp_1 a {
	gap: var(--space-600);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
}
._root_105tx_1 {
	display: flex;
	align-items: center;
	width: 100%;
	gap: var(--space-200);
	cursor: pointer;
	background-color: var(--overlay-00);
	padding: var(--space-500) var(--space-500);
	border-radius: var(--radius-200);
	height: 70px;
	container-type: inline-size;
	transition: background-color var(--animation-duration-faster) var(--animation-timing-function);
	/* iOS WebView fix */
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

._root_105tx_1:hover {
	background-color: var(--overlay-100);
}

/* Remove hover on touch devices */
@media (hover: none) and (pointer: coarse) {
	._root_105tx_1:hover {
		background-color: var(--overlay-00);
	}

	._root_105tx_1:hover ._artworkOverlay_105tx_30 {
		opacity: 0;
	}

	/* Always show play button on touch devices */
	._artworkOverlay_105tx_30 {
		opacity: 1;
	}
}

._duration_105tx_40 {
	flex-shrink: 0;
	width: 40px;
	text-align: right;
}

@container (max-width: 400px) {
	._duration_105tx_40 {
		display: none;
	}
}

._unplayable_105tx_52 {
	opacity: 0.5;
}

._TrackNameExplicitAndArtistName_105tx_56 {
	overflow: hidden;
	flex: 1;
	gap: 5px;
	display: flex;
	flex-direction: column;
}

._explicitAndArtistName_105tx_64 {
	display: flex;
	align-items: center;
	gap: var(--space-100);
}

._artwork_105tx_30 {
	height: 45px;
	width: 45px;
	border-radius: var(--radius-50);
	cursor: pointer;
}

._unplayable_105tx_52 ._artworkContainer_105tx_77 {
	pointer-events: none;
	transition: 0.3s;
}

._artworkContainer_105tx_77 {
	position: relative;
	height: 45px;
	width: 45px;
	margin-right: var(--space-200);
}

._artworkOverlay_105tx_30 {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

._root_105tx_1:hover ._artworkOverlay_105tx_30 {
	opacity: 1;
}

._playIcon_105tx_108 {
	width: 18px;
	height: 18px;
}

._artist_105tx_113 {
	display: flex;
	gap: var(--space-100);
}

._artist_105tx_113 p:hover {
	text-decoration: underline;
}

._root_105tx_1 * {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

._selected_105tx_128 {
	background-color: var(--overlay-200);
}

._root_105tx_1._selected_105tx_128:hover {
	background-color: var(--overlay-300);
}

._menuButton_105tx_136 {
	opacity: 0.5;
}

._menuButton_105tx_136:hover {
	opacity: 1;
}
._loader_qatsc_1 {
	animation: _pulse_qatsc_1 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes _pulse_qatsc_1 {
	0%,
	100% {
		filter: brightness(1);
	}

	10% {
		filter: brightness(1.1);
	}

	20% {
		filter: brightness(1.2);
	}

	30% {
		filter: brightness(1.3);
	}

	40% {
		filter: brightness(1.35);
	}

	50% {
		filter: brightness(1.4);
	}

	60% {
		filter: brightness(1.35);
	}

	70% {
		filter: brightness(1.3);
	}

	80% {
		filter: brightness(1.2);
	}

	90% {
		filter: brightness(1.1);
	}
}
._root_1a5in_1 {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 300px;
	background-color: var(--bg-depth-1);
}

._root_1a5in_1 ._playlistItem_1a5in_9 {
	background-color: var(--surface-900);
	padding: 10px;
	height: 40px;
	width: 100%;
	min-width: 300px;
	opacity: 1;
	text-align: left;
	border-bottom: 1px dotted var(--bg-depth-2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-600);
	width: 100%;
}

._root_1a5in_1 ._playlistItem_1a5in_9 a {
	flex: 1;
	overflow: hidden;
}

._root_1a5in_1 button,
._loader_1a5in_31 {
	background-color: var(--surface-900);
	padding: 10px;
	height: 40px;
	width: 100%;
	min-width: 200px;
	opacity: 1;
	text-align: left;
}

._loader_1a5in_31 {
	width: 20px !important;
	padding: 0;
	height: 20px !important;
	min-width: 0 !important;
}

._root_1a5in_1 button:hover {
	background-color: var(--bg-depth-2);
}

._loader_1a5in_31 {
	background-color: var(--bg-depth-4);
	width: 100% !important;
	height: 40px !important;
}

._playlistIcon_1a5in_58 ._loader_1a5in_31 {
	border-radius: 50%;
}

._header_1a5in_62 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--surface-900);
	width: 100%;
	text-align: left;
	border-bottom: 2px solid var(--bg-depth-3);
}

._header_1a5in_62 button {
	min-width: 0px;
	width: 40px;
}

._header_1a5in_62 h5 {
	flex: 1;
	text-align: center;
	margin-right: 20px;
}

._playlistIcon_1a5in_58 {
	flex: 0;
	padding: 0;
	margin: 0;
	border: none;
	min-width: 40px !important;
	max-width: 40px !important;
}

._playlistIcon_1a5in_58 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0px;
	width: 40px;
}

._playlistIcon_1a5in_58 img {
	width: 24px;
	height: 24px;
}

._playlistItem_1a5in_9 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-600);
}

._playlistItem_1a5in_9 ._removeIcon_1a5in_113 {
	display: none;
}

._playlistItem_1a5in_9 ._checkIcon_1a5in_117 {
	display: block;
}

._playlistItem_1a5in_9:hover ._removeIcon_1a5in_113 {
	display: block;
}

._playlistItem_1a5in_9:hover ._checkIcon_1a5in_117 {
	display: none;
}
._toastContainer_v9s7m_1 {
	position: relative;
	transform: translateY(20px);
	opacity: 0;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	margin-bottom: 12px;
}

._toastContainer_v9s7m_1._visible_v9s7m_10 {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

._toastContent_v9s7m_16 {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 380px;
	max-width: 520px;
	min-height: 56px;
	padding: 12px 20px;
	background: rgba(10, 10, 10, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	backdrop-filter: blur(24px) saturate(1.8);
	-webkit-backdrop-filter: blur(24px) saturate(1.8);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.4),
		0 2px 8px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	position: relative;
	overflow: hidden;
}

/* Expanded variant for longer content */
._expanded_v9s7m_38 ._toastContent_v9s7m_16 {
	max-width: 580px;
	padding: 16px 20px;
	align-items: flex-start;
}

._expanded_v9s7m_38 ._title_v9s7m_44 {
	font-size: 16px;
	font-weight: 600;
}

._expanded_v9s7m_38 ._iconSection_v9s7m_49 {
	width: 40px;
	height: 40px;
}

._expanded_v9s7m_38 ._iconSection_v9s7m_49 svg {
	width: 24px;
	height: 24px;
}

/* Subtle gradient overlay - changes based on type */
._toastContent_v9s7m_16::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(ellipse at center top, var(--toast-color-overlay, rgba(255, 255, 255, 0.05)) 0%, transparent 70%);
	pointer-events: none;
}

/* Bottom highlight line */
._toastContent_v9s7m_16::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20%;
	right: 20%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--toast-color-highlight, rgba(255, 255, 255, 0.2)) 30%,
		var(--toast-color-highlight, rgba(255, 255, 255, 0.2)) 70%,
		transparent
	);
}

._iconSection_v9s7m_49 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--toast-color-bg, rgba(255, 255, 255, 0.08));
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

._iconSection_v9s7m_49 svg {
	width: 20px;
	height: 20px;
	color: var(--toast-color, rgba(255, 255, 255, 0.9));
}

/* Type-specific styles */
._info_v9s7m_108 {
	--toast-color: #3b82f6;
	--toast-color-bg: rgba(59, 130, 246, 0.12);
	--toast-color-overlay: rgba(59, 130, 246, 0.08);
	--toast-color-highlight: rgba(59, 130, 246, 0.3);
}

._success_v9s7m_115 {
	--toast-color: #10b981;
	--toast-color-bg: rgba(16, 185, 129, 0.12);
	--toast-color-overlay: rgba(16, 185, 129, 0.08);
	--toast-color-highlight: rgba(16, 185, 129, 0.3);
}

._warning_v9s7m_122 {
	--toast-color: #f59e0b;
	--toast-color-bg: rgba(245, 158, 11, 0.12);
	--toast-color-overlay: rgba(245, 158, 11, 0.08);
	--toast-color-highlight: rgba(245, 158, 11, 0.3);
}

._error_v9s7m_129 {
	--toast-color: #ef4444;
	--toast-color-bg: rgba(239, 68, 68, 0.12);
	--toast-color-overlay: rgba(239, 68, 68, 0.08);
	--toast-color-highlight: rgba(239, 68, 68, 0.3);
}

._restriction_v9s7m_136 {
	--toast-color: #ef4444;
	--toast-color-bg: rgba(239, 68, 68, 0.12);
	--toast-color-overlay: rgba(239, 68, 68, 0.08);
	--toast-color-highlight: rgba(239, 68, 68, 0.3);
}

._textSection_v9s7m_143 {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	position: relative;
	z-index: 1;
}

._title_v9s7m_44 {
	font-family: 'Saans', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.95);
	margin: 0;
	letter-spacing: 0.2px;
}

._message_v9s7m_163 {
	font-family: 'Saans', sans-serif;
	font-weight: 450;
	font-size: 12px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
	letter-spacing: 0.1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

._messageExpanded_v9s7m_176 {
	white-space: normal;
	line-height: 1.4;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
}

._actionButton_v9s7m_183 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background: rgba(99, 102, 241, 0.9);
	border: none;
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.95);
	font-family: 'Saans', sans-serif;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
	white-space: nowrap;
	margin-left: auto;
}

._actionButton_v9s7m_183:hover {
	background: rgba(99, 102, 241, 1);
	transform: translateY(-1px);
}

._actionButton_v9s7m_183:active {
	transform: translateY(0);
}

._closeButton_v9s7m_211 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

._closeButton_v9s7m_211:hover {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.8);
}

._closeButton_v9s7m_211:active {
	background: rgba(255, 255, 255, 0.12);
}

/* Mobile responsiveness */
@media (max-width: 520px) {
	._toastContent_v9s7m_16 {
		min-width: calc(100vw - 32px);
		max-width: calc(100vw - 32px);
	}
}

@media (max-width: 400px) {
	._toastContent_v9s7m_16 {
		height: 52px;
		padding: 0 16px;
		gap: 12px;
	}

	._iconSection_v9s7m_49 {
		width: 32px;
		height: 32px;
	}

	._iconSection_v9s7m_49 svg {
		width: 18px;
		height: 18px;
	}

	._title_v9s7m_44 {
		font-size: 13px;
	}

	._message_v9s7m_163 {
		font-size: 11px;
	}

	._closeButton_v9s7m_211 {
		width: 24px;
		height: 24px;
	}

	._closeButton_v9s7m_211 svg {
		width: 12px;
		height: 12px;
	}
}
._toastStack_1fr02_1 {
	position: fixed;
	bottom: 124px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1001;
	display: flex;
	flex-direction: column-reverse; /* Newest toasts appear at bottom */
	align-items: center; /* Center align all toasts */
	gap: 0; /* Gap handled by margin in Toast component */
	pointer-events: none; /* Allow clicking through the container */
}

._toastStack_1fr02_1 > * {
	pointer-events: auto; /* But allow clicking on individual toasts */
}

/* Adjust position on mobile */
@media (max-width: 520px) {
	._toastStack_1fr02_1 {
		width: calc(100% - 32px);
		max-width: 520px;
	}
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
	._toastStack_1fr02_1 {
		bottom: 110px;
	}
}
._root_qnx9a_1 {
	display: flex;
	gap: 10px;
	flex: 1;
	justify-content: center;
	width: 80%;
	transition: width var(--animation-duration);
}

@media (max-width: 600px) {
	._root_qnx9a_1 {
		width: 100%;
	}
}

._emojiList_qnx9a_16 {
	display: flex;
	gap: 4px;
	width: unset;
}

._emojiList_qnx9a_16 ._emoji_qnx9a_16 {
	width: unset;
	border: none;
}

._playerIconButtonsLeft_qnx9a_27 {
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

._playerIconButtonsCenter_qnx9a_34 {
	display: flex;
	flex: 1;
	gap: 14px;
	align-items: center;
	justify-content: center;
	width: unset;
}

._playerIconButtonsRight_qnx9a_43 {
	width: 120px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 5px;
}

._playerIconButtons_qnx9a_27._last_qnx9a_51 {
	width: 130px;
	justify-content: flex-end;
}

._playerIconButtons_qnx9a_27._first_qnx9a_56 {
	justify-content: flex-start;
}

._NoControlWrapper_qnx9a_60 {
	opacity: 0.5;
	pointer-events: none;
}

._controlBtn_qnx9a_65 {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	padding: 10px;
	opacity: 0.5;
	cursor: pointer;
	transition:
		opacity 0.3s ease,
		background-color 0.3s ease,
		transform 0.2s ease;
}

._loopBtn_qnx9a_79,
._reactionBtn_qnx9a_80 {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	padding: 8px;
	opacity: 0.5;
	cursor: pointer;
	transition:
		opacity 0.3s ease,
		background-color 0.3s ease,
		transform 0.2s ease;
}

._controlBtn_qnx9a_65:not([style*='cursor: default']):hover,
._loopBtn_qnx9a_79:not([style*='cursor: default']):hover,
._reactionBtn_qnx9a_80:not([style*='cursor: default']):hover {
	opacity: 1;
	background-color: var(--bg-depth-1);
	transform: scale(1.05);
}

._active_qnx9a_102 {
	opacity: 1;
	transform: scale(1.02);
}

._controlBtn_qnx9a_65 img,
._volumeBtn_qnx9a_108 img,
._loopBtn_qnx9a_79 img,
._reactionBtn_qnx9a_80 img {
	width: 100%;
	height: 100%;
	transition: all 0.3s ease;
}

._controlBtn_qnx9a_65._playPauseBtn_qnx9a_116 {
	background-color: var(--bg-depth-2);
}

._iconAnimation_qnx9a_120 {
	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		filter 0.3s ease;
}

._iconAnimation_qnx9a_120:hover {
	filter: brightness(1.2);
}

._autoPlayPopupActive_qnx9a_131 {
	border: 1px solid white;
}

._followerControls_qnx9a_135 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex: 1;
	padding: 0 20px;
}

._followerMessage_qnx9a_144 {
	color: var(--text-secondary);
	font-size: 14px;
	opacity: 0.8;
}

._playOnThisDeviceBtn_qnx9a_150 {
	padding: 8px 16px;
	border-radius: 20px;
	background-color: var(--bg-depth-2);
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid transparent;
}

._playOnThisDeviceBtn_qnx9a_150:hover {
	background-color: var(--bg-depth-3);
	transform: scale(1.02);
	border-color: var(--border-subtle);
}
._volumeBtn_1gbfx_1 {
	width: 32px;
	height: 32px;
	overflow: hidden;
	padding: 6px;
	cursor: pointer;
	position: relative;
}

._volumeBtn_1gbfx_1 img {
	width: 100%;
	height: 100%;
}

._root_1gbfx_15 {
	display: flex;
	align-items: center;
	opacity: 0.5;
	position: relative;
	transition: opacity 0.3s ease;
}

._root_1gbfx_15:hover {
	opacity: 1;
}

._Control_1gbfx_27 {
	width: 88.3px;
}

._sliderContainer_1gbfx_31 {
	width: 88.3px;
	position: relative;
}

/* Animation classes */
._animateAttention_1gbfx_37 {
	opacity: 1;
}

/* Sound wave animation */
._soundWave_1gbfx_42 {
	position: absolute;
	top: 50%;
	left: 16px; /* Center of volume button */
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-radius: 50%;
	background: transparent;
	border: 3px solid rgba(131, 81, 237, 0);
	opacity: 0;
	pointer-events: none;
	z-index: -1;
	will-change: transform, opacity, border-color;
}

._animateAttention_1gbfx_37 ._soundWave_1gbfx_42 {
	animation: _soundWavePulse_1gbfx_1 3s ease-out infinite; /* Longer duration and infinite loop */
}

._soundWave_1gbfx_42:nth-child(1) {
	animation-delay: 0s;
}

._soundWave_1gbfx_42:nth-child(2) {
	animation-delay: 1s;
}

._soundWave_1gbfx_42:nth-child(3) {
	animation-delay: 2s;
}

@keyframes _soundWavePulse_1gbfx_1 {
	0% {
		width: 0;
		height: 0;
		border-color: rgba(170, 120, 255, 0.9);
		opacity: 0.9;
		transform: scale(0);
	}
	70% {
		opacity: 0.7;
		border-color: rgba(170, 120, 255, 0.6);
		transform: scale(0.7);
	}
	100% {
		width: 80px;
		height: 80px;
		border-color: rgba(170, 120, 255, 0);
		opacity: 0;
		transform: scale(1);
	}
}

/* Slider track highlight animation */
._sliderHighlight_1gbfx_97 {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, rgba(131, 81, 237, 0) 0%, rgba(131, 81, 237, 0.6) 50%, rgba(131, 81, 237, 0) 100%);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}

._animateAttention_1gbfx_37 ._sliderHighlight_1gbfx_97 {
	animation: _sliderHighlightMove_1gbfx_1 2s ease-in-out;
}

@keyframes _sliderHighlightMove_1gbfx_1 {
	0% {
		width: 20px;
		left: 0;
		opacity: 0;
	}
	20% {
		opacity: 0.8;
	}
	80% {
		opacity: 0.8;
	}
	100% {
		width: 20px;
		left: calc(100% - 20px);
		opacity: 0;
	}
}

/* Volume icon pulse animation */
._animateAttention_1gbfx_37 ._volumeBtn_1gbfx_1 {
	animation: _volumeIconPulse_1gbfx_1 2s ease-in-out infinite;
	will-change: transform;
}

@keyframes _volumeIconPulse_1gbfx_1 {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.3);
	}
	100% {
		transform: scale(1);
	}
}
/* Main Modal Container */
._modal_1glgn_2 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: _fadeIn_1glgn_410 0.2s ease-out;
}

._modalContent_1glgn_15 {
	background-color: var(--gray-1000);
	border: 1px solid var(--border-300);
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	width: 370px;
	min-height: 380px;
	max-height: 550px;
	overflow: hidden;
	position: relative;
	animation: _slideIn_1glgn_1 0.3s ease-out;
	display: flex;
	flex-direction: column;
}

._artistInfo_1glgn_30 {
	display: flex;
	align-items: center;
	padding: 20px;
	background-color: var(--overlay-100);
	border-bottom: 1px solid var(--border-200);
}

._artistArtwork_1glgn_38 {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	margin-right: 16px;
	background-color: var(--bg-depth-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

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

._artistDetails_1glgn_56 {
	flex: 1;
	min-width: 0;
}

._artistName_1glgn_61 {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 4px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

._artistPageLink_1glgn_71 {
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0;
	text-decoration: none;
}

._likeButton_1glgn_78 {
	background: none;
	border: none;
	padding: 8px;
	margin-left: 12px;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

._likeButton_1glgn_78:hover {
	background-color: var(--bg-depth-2);
}

._likeButton_1glgn_78 img {
	width: 24px;
	height: 24px;
}

._likeButtonLoader_1glgn_100 {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	animation: _spin_1glgn_1 1s linear infinite;
}

@keyframes _spin_1glgn_1 {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

._contentArea_1glgn_119 {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

._contentArea_1glgn_119::-webkit-scrollbar {
	display: none;
}

._actionList_1glgn_131 {
	max-height: 60vh;
	overflow-y: auto;
}

._actionList_1glgn_131 a {
	text-decoration: none;
}

._actionList_1glgn_131 a:hover {
	text-decoration: none;
}

._artistList_1glgn_144 {
	border-top: 1px solid var(--bg-depth-2);
}

._artistList_1glgn_144 a {
	text-decoration: none;
}

._artistList_1glgn_144 a:hover {
	text-decoration: none;
}

._artistButton_1glgn_156 {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 16px 20px;
	background: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
	text-align: left;
}

._artistButton_1glgn_156:hover {
	background-color: var(--bg-depth-2);
}

._artistThumbnail_1glgn_172 {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 16px;
	background-color: var(--bg-depth-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

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

._albumThumbnail_1glgn_191 {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	margin-right: 16px;
	background-color: var(--bg-depth-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
}

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

._itemInfo_1glgn_211 {
	flex: 1;
	min-width: 0;
}

._itemType_1glgn_216 {
	font-size: 11px;
	font-weight: var(--regular);
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 3px;
	display: block;
}

._actionButton_1glgn_226 {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 16px 20px;
	background: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
	text-align: left;
	position: relative;
}

._actionButton_1glgn_226:hover {
	background-color: var(--bg-depth-2);
}

._actionButton_1glgn_226:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

._actionButton_1glgn_226:disabled:hover {
	background-color: transparent;
}

._actionIcon_1glgn_252 {
	width: 20px;
	height: 20px;
	margin-right: 16px;
	flex-shrink: 0;
}

._actionLabel_1glgn_259 {
	flex: 1;
	font-size: 15px;
	font-weight: 500;
	color: var(--text-primary);
	margin: 0;
}

._actionSubmenu_1glgn_267 {
	width: 16px;
	height: 16px;
	margin-left: 12px;
	opacity: 0.6;
}

._actionBadge_1glgn_274 {
	background-color: var(--accent-primary);
	color: white;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 10px;
	margin-left: 8px;
}

._loading_1glgn_284 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	color: var(--text-secondary);
}

._loadingSkeleton_1glgn_292 {
	background: linear-gradient(90deg, var(--bg-depth-2) 25%, var(--bg-depth-3) 50%, var(--bg-depth-2) 75%);
	background-size: 200% 100%;
	animation: _skeleton_1glgn_299 1.5s infinite;
	border-radius: 8px;
}

._skeletonAction_1glgn_299 {
	height: 52px;
	margin-bottom: 1px;
}

._error_1glgn_304 {
	padding: 20px;
	text-align: center;
}

._errorMessage_1glgn_309 {
	color: var(--text-secondary);
	margin-bottom: 16px;
}

._retryButton_1glgn_314 {
	background-color: var(--accent-primary);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
}

@keyframes _fadeIn_1glgn_410 {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes _slideIn_1glgn_1 {
	from {
		transform: translateY(-20px);
		opacity: 0;
	}

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

@keyframes _skeleton_1glgn_299 {
	0% {
		background-position: -200% 0;
	}

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

._releaseLoadingSkeleton_1glgn_355 {
	opacity: 0.7;
}

._skeletonItemButton_1glgn_359 {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 16px 20px;
	background: none;
	border: none;
}

._skeletonThumbnail_1glgn_368 {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	margin-right: 16px;
	background: linear-gradient(90deg, var(--bg-depth-2) 25%, var(--bg-depth-3) 50%, var(--bg-depth-2) 75%);
	background-size: 200% 100%;
	animation: _skeleton_1glgn_299 1.5s infinite;
	flex-shrink: 0;
}

._skeletonItemInfo_1glgn_379 {
	flex: 1;
	min-width: 0;
}

._skeletonItemType_1glgn_384 {
	width: 60px;
	height: 12px;
	margin-bottom: 6px;
	background: linear-gradient(90deg, var(--bg-depth-2) 25%, var(--bg-depth-3) 50%, var(--bg-depth-2) 75%);
	background-size: 200% 100%;
	animation: _skeleton_1glgn_299 1.5s infinite;
	border-radius: 4px;
}

._skeletonItemName_1glgn_394 {
	width: 120px;
	height: 16px;
	background: linear-gradient(90deg, var(--bg-depth-2) 25%, var(--bg-depth-3) 50%, var(--bg-depth-2) 75%);
	background-size: 200% 100%;
	animation: _skeleton_1glgn_299 1.5s infinite;
	border-radius: 4px;
}

/* Release and Artist Items */
._releaseItem_1glgn_404,
._artistItem_1glgn_405 {
	opacity: 1;
}

/* Fade-in animation for images */
._fadeInImage_1glgn_410 {
	transition: opacity 0.3s ease-out;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

@media (max-width: 480px) {
	._modalContent_1glgn_15 {
		width: 90vw;
		max-width: 340px;
	}

	._artistInfo_1glgn_30 {
		padding: 16px;
	}

	._actionButton_1glgn_226 {
		padding: 14px 16px;
	}
}

._modal_1glgn_2:focus {
	outline: none;
}

._actionButton_1glgn_226:focus,
._actionButton_1glgn_226:focus-visible,
._artistButton_1glgn_156:focus,
._artistButton_1glgn_156:focus-visible {
	background-color: var(--bg-depth-2);
	outline: 2px solid var(--accent-primary);
	outline-offset: -2px;
	box-shadow: 0 0 0 4px rgba(var(--accent-primary-rgb), 0.2);
}

._actionButton_1glgn_226:focus:not(:focus-visible),
._actionButton_1glgn_226:focus-visible:not(:focus-visible),
._artistButton_1glgn_156:focus:not(:focus-visible),
._artistButton_1glgn_156:focus-visible:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

._modal_1glgn_2::before {
	content: '';
	position: absolute;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	border: 2px solid transparent;
	border-radius: 16px;
	pointer-events: none;
	transition: border-color 0.2s ease;
}

._modal_1glgn_2:focus::before {
	border-color: var(--accent-primary);
}

._keyboardHelp_1glgn_471 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--gray-900);
	border: 1px solid var(--border-300);
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	z-index: 10;
	max-width: 320px;
	width: calc(100% - 40px);
}

._helpTitle_1glgn_486 {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 16px 0;
	text-align: center;
}

._helpGrid_1glgn_494 {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 16px;
	align-items: center;
}

._helpItem_1glgn_501 {
	display: contents;
}

._helpItem_1glgn_501 kbd {
	background-color: var(--bg-depth-2);
	border: 1px solid var(--border-200);
	border-radius: 4px;
	padding: 2px 6px;
	font-family: monospace;
	font-size: 12px;
	color: var(--text-primary);
	font-weight: 600;
	min-width: 24px;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

._helpItem_1glgn_501 span {
	font-size: 13px;
	color: var(--text-secondary);
}

@media (max-width: 480px) {
	._helpGrid_1glgn_494 {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	._keyboardHelp_1glgn_471 {
		max-width: calc(100% - 20px);
	}
}
._backdrop_vcgh6_1 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	animation: _fadeIn_vcgh6_1 0.2s ease-out;
	cursor: pointer;
}
._container_1dpfd_1 {
	max-height: 70vh;
	overflow-y: auto;
	padding: 0;
}

._suggestionsGrid_1dpfd_7 {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

._suggestionChip_1dpfd_13 {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	background-color: var(--overlay-100);
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	flex: 0 1 auto;
	min-width: 0;
	color: var(--text-secondary);
}

._suggestionChip_1dpfd_13:hover {
	background-color: var(--overlay-200);
	border-color: var(--accent-primary);
	color: var(--text-primary);
}

._suggestionChip_1dpfd_13._selected_1dpfd_32 {
	background-color: var(--overlay-300);
	border-color: var(--overlay-100);
	color: var(--text-primary);
}

._suggestionText_1dpfd_38 {
	font-size: var(--s);
	font-weight: var(--regular);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

._suggestionSkeleton_1dpfd_46 {
	height: 32px;
	width: 120px;
	border-radius: 20px;
}

/* Form Section */
._formSection_1dpfd_53 {
	padding: 20px;
}

._inputGroup_1dpfd_57 {
	margin-bottom: 20px;
}

._label_1dpfd_61 {
	display: block;
	font-size: var(--s);
	font-weight: var(--regular);
	color: var(--text-secondary);
	margin-bottom: 8px;
}

._textInput_1dpfd_69,
._textArea_1dpfd_70 {
	width: 100%;
	padding: 12px 16px;
	background-color: var(--bg-depth-2);
	border: 1px solid var(--bg-depth-3);
	border-radius: 8px;
	color: var(--text-primary);
	font-size: 14px;
	transition: border-color 0.2s ease;
	resize: none;
}

._textInput_1dpfd_69:focus,
._textArea_1dpfd_70:focus {
	outline: none;
	border-color: var(--accent-primary);
}

._textInput_1dpfd_69::placeholder,
._textArea_1dpfd_70::placeholder {
	color: var(--text-secondary);
}

._textArea_1dpfd_70 {
	min-height: 80px;
	line-height: 1.5;
}

/* Privacy Toggle */
._privacyToggle_1dpfd_99 {
	display: flex;
	background-color: var(--bg-depth-2);
	border-radius: 8px;
	padding: 4px;
	gap: 4px;
}

._privacyOption_1dpfd_107 {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	background: none;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
}

._privacyOption_1dpfd_107._active_1dpfd_123 {
	background-color: var(--overlay-300);
	color: var(--text-primary);
}

._privacyIcon_1dpfd_128 {
	width: 16px;
	height: 16px;
	margin-right: 6px;
}

._privacyOption_1dpfd_107._active_1dpfd_123 ._privacyIcon_1dpfd_128 {
	filter: brightness(0) invert(1);
}

/* Action Buttons */
._actionButtons_1dpfd_139 {
	display: flex;
	gap: 12px;
	padding: 20px;
	border-top: 1px solid var(--overlay-200);
}

._cancelButton_1dpfd_146,
._saveButton_1dpfd_147,
._createButton_1dpfd_148 {
	flex: 1;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

._cancelButton_1dpfd_146 {
	background: none;
	border: 1px solid var(--bg-depth-3);
	color: var(--text-secondary);
}

._cancelButton_1dpfd_146:hover {
	background-color: var(--bg-depth-2);
	color: var(--text-primary);
}

._saveButton_1dpfd_147,
._createButton_1dpfd_148 {
	background: var(--overlay-200);
	border: 1px solid var(--border-100);
	color: white;
}

._saveButton_1dpfd_147:hover:not(:disabled),
._createButton_1dpfd_148:hover:not(:disabled) {
	background-color: var(--overlay-300);
}

._saveButton_1dpfd_147:disabled,
._createButton_1dpfd_148:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

._buttonIcon_1dpfd_191 {
	width: 16px;
	height: 16px;
	filter: brightness(0) invert(1);
}

._buttonLoader_1dpfd_197 {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top: 2px solid white;
	border-radius: 50%;
	animation: _spin_1dpfd_1 1s linear infinite;
}

/* Loading Skeletons */
._loadingSkeleton_1dpfd_207 {
	background: linear-gradient(90deg, var(--bg-depth-2) 25%, var(--bg-depth-3) 50%, var(--bg-depth-2) 75%);
	background-size: 200% 100%;
	animation: _skeleton_1dpfd_1 1.5s infinite;
}

/* Animations */
@keyframes _spin_1dpfd_1 {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes _skeleton_1dpfd_1 {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* Responsive Design */
@media (max-width: 480px) {
	._formSection_1dpfd_53,
	._actionButtons_1dpfd_139 {
		padding: 16px;
	}

	._suggestionsGrid_1dpfd_7 {
		gap: 6px;
	}

	._suggestionChip_1dpfd_13 {
		padding: 6px 10px;
		font-size: 12px;
	}

	._actionButtons_1dpfd_139 {
		flex-direction: column;
		gap: 10px;
	}

	._cancelButton_1dpfd_146,
	._saveButton_1dpfd_147,
	._createButton_1dpfd_148 {
		padding: 14px 20px;
	}
}

/* Focus States for Accessibility */
._suggestionChip_1dpfd_13:focus,
._textInput_1dpfd_69:focus,
._textArea_1dpfd_70:focus,
._privacyOption_1dpfd_107:focus,
._cancelButton_1dpfd_146:focus,
._saveButton_1dpfd_147:focus,
._createButton_1dpfd_148:focus {
	outline: 2px solid var(--accent-primary);
	outline-offset: 2px;
}

/* Smooth transitions for better UX */
* {
	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease;
}
._container_zvriq_1 {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Create New Playlist Button */
._createNewButton_zvriq_8 {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: left;
}

._createNewButton_zvriq_8:hover {
	background-color: var(--overlay-100);
}

._createNewButton_zvriq_8:active {
	background-color: var(--overlay-300);
}

._createNewButton_zvriq_8._selected_zvriq_26 {
	background-color: var(--overlay-200);
	outline: 2px solid var(--accent-primary);
	outline-offset: 2px;
}

._createNewIcon_zvriq_32 {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background-color: var(--overlay-200);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16px;
	flex-shrink: 0;
	backdrop-filter: blur(10px);
}

._createNewIcon_zvriq_32 img {
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(1); /* Make icon white */
}

._createNewContent_zvriq_51 {
	flex: 1;
	min-width: 0;
}

._createNewTitle_zvriq_56 {
	font-size: 16px;
	font-weight: 600;
	color: white;
}

._createNewDescription_zvriq_62 {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

._playlistList_zvriq_71 {
	padding: 0;
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

._playlistList_zvriq_71::-webkit-scrollbar {
	display: none;
}

._playlistItem_zvriq_84 {
	display: flex;
	align-items: center;
	padding: 16px 10px 16px 20px;
	border-top: 1px solid var(--bg-depth-2);
	transition: background-color 0.2s ease;
}

._playlistItem_zvriq_84:hover {
	background-color: var(--bg-depth-2);
}

._playlistItem_zvriq_84._selected_zvriq_26 {
	background-color: var(--overlay-100);
	outline: 2px solid var(--accent-primary);
	outline-offset: -2px;
}

._playlistItem_zvriq_84:focus {
	outline: none;
}

._playlistInfo_zvriq_106 {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
}

._playlistArtwork_zvriq_113 {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	margin-right: 16px;
	background-color: var(--bg-depth-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

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

._playlistDetails_zvriq_132 {
	flex: 1;
	min-width: 0;
}

._playlistTitle_zvriq_137 {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 4px 0 6px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

._playlistDescription_zvriq_147 {
	font-size: 13px;
	color: var(--text-tertiary);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Button Container */
._buttonContainer_zvriq_157 {
	display: flex;
	align-items: center;
	margin-left: 12px;
}

/* Toggle Button */
._toggleButton_zvriq_164 {
	background: none;
	border: none;
	padding: 8px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}

._toggleButton_zvriq_164:hover {
	transform: scale(1.05);
}

._toggleButton_zvriq_164:active {
	transform: scale(0.95);
}

._toggleButton_zvriq_164:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

._toggleButton_zvriq_164:disabled:hover {
	background-color: transparent;
	transform: none;
}

/* Toggle Icon with smooth transitions */
._iconContainer_zvriq_201 {
	position: relative;
	width: 20px;
	height: 20px;
}

._toggleIcon_zvriq_207 {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: center;
}

._toggleIcon_zvriq_207._visible_zvriq_217 {
	opacity: 1;
	transform: scale(1);
}

._toggleIcon_zvriq_207._hidden_zvriq_222 {
	opacity: 0;
	transform: scale(0.8);
}

/* Specific icon animations */
._addIcon_zvriq_228._visible_zvriq_217 {
	animation: _iconFadeIn_zvriq_1 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

._checkIcon_zvriq_232._visible_zvriq_217 {
	animation: _iconSuccess_zvriq_1 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Not Added State (Plus Icon) */
._toggleButton_zvriq_164._notAdded_zvriq_237 {
	opacity: 0.7;
}

._toggleButton_zvriq_164._notAdded_zvriq_237:hover {
	opacity: 1;
}

/* Added State (Check Icon) */
._toggleButton_zvriq_164._added_zvriq_246 {
	opacity: 1;
}

._toggleButton_zvriq_164._added_zvriq_246:hover {
	transform: scale(1.05);
}

._toggleButton_zvriq_164._added_zvriq_246 ._checkIcon_zvriq_232._visible_zvriq_217 {
	transform: scale(1.1);
	filter: brightness(1.1);
}

._loader_zvriq_259 {
	width: 20px !important;
	height: 20px !important;
	border-radius: 50%;
}

/* Loading Skeletons */
._loadingContainer_zvriq_266 {
	padding: 0;
}

._playlistItemSkeleton_zvriq_270 {
	display: flex;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid var(--bg-depth-2);
}

._skeletonArtwork_zvriq_277 {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	margin-right: 16px;
	flex-shrink: 0;
}

._skeletonContent_zvriq_285 {
	flex: 1;
	min-width: 0;
}

._skeletonTitle_zvriq_290 {
	height: 16px;
	width: 60%;
	border-radius: 4px;
	margin-bottom: 6px;
}

._skeletonDescription_zvriq_297 {
	height: 14px;
	width: 80%;
	border-radius: 4px;
}

._skeletonButton_zvriq_303 {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-left: 12px;
	flex-shrink: 0;
}

/* Empty State */
._emptyState_zvriq_312 {
	padding: 40px 20px;
	text-align: center;
}

._emptyMessage_zvriq_317 {
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 480px) {
	._createNewButton_zvriq_8 {
		width: calc(100% - 32px);
		margin: 16px;
		padding: 14px 16px;
	}

	._playlistItem_zvriq_84 {
		padding: 14px 16px;
	}

	._createNewIcon_zvriq_32,
	._playlistArtwork_zvriq_113 {
		width: 36px;
		height: 36px;
	}

	._createNewIcon_zvriq_32 img {
		width: 18px;
		height: 18px;
	}

	._toggleButton_zvriq_164 {
		width: 36px;
		height: 36px;
	}

	._toggleIcon_zvriq_207 {
		width: 18px;
		height: 18px;
	}
}

/* Focus States for Accessibility */
._createNewButton_zvriq_8:focus,
._toggleButton_zvriq_164:focus {
	outline: 2px solid var(--accent-primary);
	outline-offset: 2px;
}

@keyframes _iconFadeIn_zvriq_1 {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes _iconSuccess_zvriq_1 {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	50% {
		transform: scale(1.2);
		opacity: 1;
	}
	100% {
		transform: scale(1.1);
		opacity: 1;
	}
}
/* Main Modal Container */
._modal_1t5hs_2 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: _fadeIn_1t5hs_1 0.2s ease-out;
}

._modalContent_1t5hs_15 {
	background-color: var(--gray-1000);
	border: 1px solid var(--border-300);
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	width: 370px;
	min-height: 380px;
	max-height: 550px;
	overflow: hidden;
	position: relative;
	animation: _slideIn_1t5hs_1 0.3s ease-out;
	display: flex;
	flex-direction: column;
	user-select: none; /* Prevent text selection */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

/* Header Section */
._header_1t5hs_35 {
	display: flex;
	align-items: center;
	padding: 16px 20px;
	background-color: var(--gray-1000);
	border-bottom: 1px solid var(--border-200);
	position: relative;
}

._backButton_1t5hs_44 {
	background: none;
	border: none;
	padding: 8px;
	margin-right: 12px;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
	position: relative;
	z-index: 10;
	/* Ensure it's above other elements */
	min-width: 36px;
	/* Larger click area */
	min-height: 36px;
}

._backButton_1t5hs_44:hover {
	background-color: var(--bg-depth-2);
}

._backButton_1t5hs_44:active {
	background-color: var(--bg-depth-3);
	transform: scale(0.95);
}

._backButton_1t5hs_44 img {
	width: 20px;
	height: 20px;
}

._headerTitle_1t5hs_77 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	width: calc(100% - 80px);
	text-align: center;
}

._closeButton_1t5hs_90 {
	background: none;
	border: none;
	padding: 8px;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
	position: absolute;
	right: 16px;
}

._closeButton_1t5hs_90:hover {
	background-color: var(--bg-depth-2);
}

/* Track Info Section */
._trackInfo_1t5hs_109 {
	display: flex;
	align-items: center;
	padding: 20px;
	background-color: var(--overlay-100);
	border-bottom: 1px solid var(--border-200);
}

._trackArtwork_1t5hs_117 {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	margin-right: 16px;
	background-color: var(--bg-depth-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

._trackArtwork_1t5hs_117 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none; /* Prevent dragging */
	-webkit-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
	draggable: false;
}

._trackDetails_1t5hs_140 {
	flex: 1;
	min-width: 0;
}

._trackTitle_1t5hs_145 {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 4px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

._trackArtists_1t5hs_155 {
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

._likeButton_1t5hs_164 {
	background: none;
	border: none;
	padding: 8px;
	margin-left: 12px;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

._likeButton_1t5hs_164:hover {
	background-color: var(--bg-depth-2);
}

._likeButton_1t5hs_164 img {
	width: 24px;
	height: 24px;
	pointer-events: none; /* Prevent dragging */
	-webkit-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
	draggable: false;
}

._likeButtonLoader_1t5hs_191 {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	animation: _spin_1t5hs_1 1s linear infinite;
}

@keyframes _spin_1t5hs_1 {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* Content Area - for scrollable content */
._contentArea_1t5hs_211 {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	/* Hide scrollbar */
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE and Edge */
}

._contentArea_1t5hs_211::-webkit-scrollbar {
	display: none;
	/* Chrome, Safari, Opera */
}

/* Action List */
._actionList_1t5hs_228 {
	max-height: 60vh;
	overflow-y: auto;
}

/* Remove underlines from Link components */
._actionList_1t5hs_228 a {
	text-decoration: none;
}

._actionList_1t5hs_228 a:hover {
	text-decoration: none;
}

._artistList_1t5hs_242 a {
	text-decoration: none;
}

._artistList_1t5hs_242 a:hover {
	text-decoration: none;
}

._actionButton_1t5hs_250 {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 16px 20px;
	background: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
	text-align: left;
	position: relative;
}

._actionButton_1t5hs_250:hover {
	background-color: var(--bg-depth-2);
}

._actionButton_1t5hs_250:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

._actionButton_1t5hs_250:disabled:hover {
	background-color: transparent;
}

._actionIcon_1t5hs_276 {
	width: 20px;
	height: 20px;
	margin-right: 16px;
	flex-shrink: 0;
	pointer-events: none; /* Prevent dragging */
	-webkit-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
	draggable: false;
}

._actionLabel_1t5hs_288 {
	flex: 1;
	font-size: 15px;
	font-weight: 500;
	color: var(--text-primary);
	margin: 0;
}

._actionSubmenu_1t5hs_296 {
	width: 16px;
	height: 16px;
	margin-left: 12px;
	opacity: 0.6;
	pointer-events: none; /* Prevent dragging */
	-webkit-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
	draggable: false;
}

._actionBadge_1t5hs_308 {
	background-color: var(--accent-primary);
	color: white;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 10px;
	margin-left: 8px;
}

/* Artist List */
._artistList_1t5hs_242 {
	border-top: 1px solid var(--bg-depth-2);
	user-select: none; /* Prevent text selection */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

/* Prevent dragging on all Link components */
._artistList_1t5hs_242 a {
	text-decoration: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
}

._artistButton_1t5hs_335 {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 16px 20px;
	background: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
	text-align: left;
	user-select: none; /* Prevent text selection */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
}

._artistButton_1t5hs_335:hover {
	background-color: var(--bg-depth-2);
}

._artistThumbnail_1t5hs_358 {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 16px;
	background-color: var(--bg-depth-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

._artistThumbnail_1t5hs_358 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none; /* Prevent dragging */
	-webkit-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
	draggable: false;
}

._albumThumbnail_1t5hs_382 {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	margin-right: 16px;
	background-color: var(--bg-depth-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

._albumThumbnail_1t5hs_382 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none; /* Prevent dragging */
	-webkit-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
	draggable: false;
}

._artistName_1t5hs_406 {
	font-size: 15px;
	font-weight: 500;
	color: var(--text-primary);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

._itemInfo_1t5hs_415 {
	flex: 1;
	min-width: 0;
}

._itemType_1t5hs_420 {
	font-size: 11px;
	font-weight: var(--regular);
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 3px;
	display: block;
}

/* Loading States */
._loading_1t5hs_431 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

._loadingSkeleton_1t5hs_438 {
	background: linear-gradient(90deg, var(--bg-depth-2) 25%, var(--bg-depth-3) 50%, var(--bg-depth-2) 75%);
	background-size: 200% 100%;
	animation: _skeleton_1t5hs_445 1.5s infinite;
	border-radius: 8px;
}

._skeletonAction_1t5hs_445 {
	height: 52px;
	margin-bottom: 1px;
}

._error_1t5hs_450 {
	padding: 20px;
	text-align: center;
	color: var(--text-error);
}

._errorMessage_1t5hs_456 {
	font-size: 14px;
	margin-bottom: 16px;
}

._retryButton_1t5hs_461 {
	background-color: var(--accent-primary);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
}

@keyframes _fadeIn_1t5hs_1 {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes _slideIn_1t5hs_1 {
	from {
		transform: translateY(-20px);
		opacity: 0;
	}

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

@keyframes _skeleton_1t5hs_445 {
	0% {
		background-position: -200% 0;
	}

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

@media (max-width: 480px) {
	._modalContent_1t5hs_15 {
		margin: 20px;
		max-width: none;
		width: calc(100vw - 40px);
	}

	._trackInfo_1t5hs_109 {
		padding: 16px;
	}

	._actionButton_1t5hs_250 {
		padding: 14px 16px;
	}

	._artistButton_1t5hs_335 {
		padding: 14px 16px;
	}
}

._primary_1t5hs_524 ._actionButton_1t5hs_250 {
	background-color: var(--accent-primary);
	color: white;
}

._primary_1t5hs_524 ._actionButton_1t5hs_250:hover {
	background-color: var(--accent-primary-hover);
}

._destructive_1t5hs_533 ._actionButton_1t5hs_250 {
	color: var(--text-error);
}

._destructive_1t5hs_533 ._actionButton_1t5hs_250:hover {
	background-color: var(--error-bg);
}

/* Keyboard Focus Styles */
._modal_1t5hs_2:focus {
	outline: none;
}

._actionButton_1t5hs_250:focus,
._backButton_1t5hs_44:focus,
._closeButton_1t5hs_90:focus,
._likeButton_1t5hs_164:focus,
._artistButton_1t5hs_335:focus,
._retryButton_1t5hs_461:focus {
	outline: 2px solid var(--accent-primary);
	outline-offset: 2px;
	background-color: var(--bg-depth-2);
}

._actionButton_1t5hs_250:focus-visible,
._backButton_1t5hs_44:focus-visible,
._closeButton_1t5hs_90:focus-visible,
._likeButton_1t5hs_164:focus-visible,
._artistButton_1t5hs_335:focus-visible,
._retryButton_1t5hs_461:focus-visible {
	outline: 2px solid var(--accent-primary);
	outline-offset: 2px;
	background-color: var(--bg-depth-2);
}

/* Remove focus outline when clicking */
._actionButton_1t5hs_250:focus:not(:focus-visible),
._backButton_1t5hs_44:focus:not(:focus-visible),
._closeButton_1t5hs_90:focus:not(:focus-visible),
._likeButton_1t5hs_164:focus:not(:focus-visible),
._artistButton_1t5hs_335:focus:not(:focus-visible),
._retryButton_1t5hs_461:focus:not(:focus-visible) {
	outline: none;
}

/* Keyboard navigation instructions */
._modal_1t5hs_2::before {
	content: 'Press ? or h for keyboard shortcuts';
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--gray-800);
	color: var(--text-secondary);
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	z-index: 1001;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

._modal_1t5hs_2:focus::before {
	opacity: 1;
}

/* Keyboard Help Styles */
._keyboardHelp_1t5hs_602 {
	border-top: 1px solid var(--border-200);
	padding: 16px 20px;
	background-color: var(--bg-depth-1);
	max-height: 300px;
	overflow-y: auto;
}

._helpTitle_1t5hs_610 {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 12px 0;
	text-align: center;
}

._helpGrid_1t5hs_618 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	font-size: 13px;
}

._helpItem_1t5hs_625 {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}

._helpItem_1t5hs_625 kbd {
	background-color: var(--bg-depth-3);
	border: 1px solid var(--border-300);
	border-radius: 4px;
	padding: 2px 6px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	color: var(--text-primary);
	min-width: 24px;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

._helpItem_1t5hs_625 span {
	color: var(--text-secondary);
	flex: 1;
}

@media (max-width: 480px) {
	._helpGrid_1t5hs_618 {
		grid-template-columns: 1fr;
	}

	._keyboardHelp_1t5hs_602 {
		padding: 12px 16px;
	}
}
._trackThumbnail_h89yf_1 {
	width: 54px;
	height: 54px;
	border-radius: var(--radius-100);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.2),
		0 1px 3px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	animation: _fadeInScale_h89yf_1 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes _fadeInScale_h89yf_1 {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

._trackThumbnail_h89yf_1:hover {
	transform: scale(1.05) translateY(-2px);
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.3),
		0 2px 6px rgba(0, 0, 0, 0.4),
		0 0 20px rgba(131, 81, 237, 0.2);
}

._trackDetails_h89yf_32 {
	display: flex;
	flex-direction: column;
	gap: var(--space-200);
	justify-content: center;
	overflow: hidden;
	animation: _fadeInSlide_h89yf_1 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes _fadeInSlide_h89yf_1 {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

._trackTitle_h89yf_52 {
	font-size: 0.95em;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

._trackTitle_h89yf_52:hover {
	color: rgba(255, 255, 255, 1);
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

._explicitAndArtistName_h89yf_68 {
	display: flex;
	gap: var(--space-100);
	align-items: center;
	overflow: hidden;
}

._artistName_h89yf_75 {
	font-size: 0.85em;
	color: rgba(255, 255, 255, 0.7);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

._artistName_h89yf_75:hover {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: underline;
}

._trackDetails_h89yf_32 a {
	text-decoration: none;
}
/* Container for the animation - centered on the icon */
._container_vvzlk_2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100px;
	height: 80px;
	pointer-events: none;
	z-index: 1000;
	overflow: visible !important;
}

/* Core fire effect container */
._fireCore_vvzlk_15 {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: visible !important;
}

/* SVG sparkle base styles */
._sparkle_vvzlk_23 {
	position: absolute;
	opacity: 0;
	animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	transform-origin: center;
	transform: translateX(-50%) translateY(50%);
	filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 8px rgba(255, 165, 0, 0.5));
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Small sparkle styles */
._smallSparkle_vvzlk_38 {
	position: absolute;
	opacity: 0;
	animation: _smallSparkleFloat_vvzlk_1 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	transform-origin: center;
	transform: translateX(-50%) translateY(50%);
	filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8));
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Cleaner sparkle animations with subtle movements */
@keyframes _sparkleRise1_vvzlk_1 {
	0% {
		transform: translateX(-50%) translateY(50%) scale(0) rotate(0deg);
		opacity: 0;
	}
	20% {
		transform: translateX(-50%) translateY(50%) scale(1.3) rotate(45deg);
		opacity: 1;
		filter: drop-shadow(0 0 6px rgba(255, 215, 0, 1)) drop-shadow(0 0 12px rgba(255, 165, 0, 0.6));
	}
	50% {
		transform: translateX(calc(-50% - 10px)) translateY(calc(50% - 20px)) scale(1) rotate(90deg);
		opacity: 0.8;
	}
	80% {
		transform: translateX(calc(-50% - 15px)) translateY(calc(50% - 30px)) scale(0.6) rotate(180deg);
		opacity: 0.3;
	}
	100% {
		transform: translateX(calc(-50% - 18px)) translateY(calc(50% - 35px)) scale(0.2) rotate(270deg);
		opacity: 0;
	}
}

@keyframes _sparkleRise2_vvzlk_1 {
	0% {
		transform: translateX(-50%) translateY(50%) scale(0) rotate(0deg);
		opacity: 0;
	}
	20% {
		transform: translateX(-50%) translateY(50%) scale(1.4) rotate(-30deg);
		opacity: 1;
		filter: drop-shadow(0 0 7px rgba(255, 195, 0, 1)) drop-shadow(0 0 14px rgba(255, 215, 0, 0.5));
	}
	50% {
		transform: translateX(calc(-50% + 12px)) translateY(calc(50% - 18px)) scale(0.95) rotate(-60deg);
		opacity: 0.75;
	}
	80% {
		transform: translateX(calc(-50% + 18px)) translateY(calc(50% - 28px)) scale(0.5) rotate(-120deg);
		opacity: 0.25;
	}
	100% {
		transform: translateX(calc(-50% + 22px)) translateY(calc(50% - 33px)) scale(0.15) rotate(-180deg);
		opacity: 0;
	}
}

@keyframes _sparkleRise3_vvzlk_1 {
	0% {
		transform: translateX(-50%) translateY(50%) scale(0) rotate(0deg);
		opacity: 0;
	}
	20% {
		transform: translateX(-50%) translateY(50%) scale(1.2) rotate(60deg);
		opacity: 1;
		filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.9));
	}
	50% {
		transform: translateX(calc(-50% - 8px)) translateY(calc(50% + 15px)) scale(0.9) rotate(120deg);
		opacity: 0.7;
	}
	80% {
		transform: translateX(calc(-50% - 12px)) translateY(calc(50% + 20px)) scale(0.45) rotate(180deg);
		opacity: 0.2;
	}
	100% {
		transform: translateX(calc(-50% - 15px)) translateY(calc(50% + 22px)) scale(0.1) rotate(240deg);
		opacity: 0;
	}
}

@keyframes _sparkleRise4_vvzlk_1 {
	0% {
		transform: translateX(-50%) translateY(50%) scale(0) rotate(0deg);
		opacity: 0;
	}
	20% {
		transform: translateX(-50%) translateY(50%) scale(1.35) rotate(-45deg);
		opacity: 1;
		filter: drop-shadow(0 0 6px rgba(255, 185, 0, 0.9));
	}
	50% {
		transform: translateX(calc(-50% + 10px)) translateY(calc(50% + 12px)) scale(0.85) rotate(-90deg);
		opacity: 0.65;
	}
	80% {
		transform: translateX(calc(-50% + 15px)) translateY(calc(50% + 18px)) scale(0.4) rotate(-135deg);
		opacity: 0.2;
	}
	100% {
		transform: translateX(calc(-50% + 18px)) translateY(calc(50% + 20px)) scale(0.08) rotate(-180deg);
		opacity: 0;
	}
}

@keyframes _sparkleRise5_vvzlk_1 {
	0% {
		transform: translateX(-50%) translateY(50%) scale(0) rotate(0deg);
		opacity: 0;
	}
	20% {
		transform: translateX(-50%) translateY(50%) scale(1.25) rotate(30deg);
		opacity: 1;
		filter: drop-shadow(0 0 5px rgba(255, 200, 0, 0.9));
	}
	50% {
		transform: translateX(-50%) translateY(calc(50% - 25px)) scale(0.95) rotate(75deg);
		opacity: 0.85;
	}
	80% {
		transform: translateX(-50%) translateY(calc(50% - 35px)) scale(0.5) rotate(120deg);
		opacity: 0.3;
	}
	100% {
		transform: translateX(-50%) translateY(calc(50% - 40px)) scale(0.15) rotate(180deg);
		opacity: 0;
	}
}

/* Apply animations to sparkles */
._sparkle1_vvzlk_172 {
	animation: _sparkleRise1_vvzlk_1 2s;
}
._sparkle2_vvzlk_175 {
	animation: _sparkleRise2_vvzlk_1 2.3s;
}
._sparkle3_vvzlk_178 {
	animation: _sparkleRise3_vvzlk_1 2s;
}
._sparkle4_vvzlk_181 {
	animation: _sparkleRise4_vvzlk_1 2.3s;
}
._sparkle5_vvzlk_184 {
	animation: _sparkleRise5_vvzlk_1 2s;
}

/* Small sparkle animation */
@keyframes _smallSparkleFloat_vvzlk_1 {
	0% {
		transform: translateX(-50%) translateY(50%) scale(0);
		opacity: 0;
	}
	30% {
		transform: translateX(-50%) translateY(calc(50% - 10px)) scale(1.2);
		opacity: 0.6;
		filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.9));
	}
	60% {
		transform: translateX(-50%) translateY(calc(50% - 20px)) scale(0.9);
		opacity: 0.4;
	}
	100% {
		transform: translateX(-50%) translateY(calc(50% - 30px)) scale(0.3);
		opacity: 0;
	}
}

/* Combined glow effect for better performance */
._combinedGlow_vvzlk_210 {
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, 50%);
	width: 60px;
	height: 45px;
	background: radial-gradient(
		ellipse,
		rgba(255, 215, 0, 0.5) 0%,
		rgba(255, 195, 0, 0.3) 20%,
		rgba(255, 165, 0, 0.15) 40%,
		rgba(255, 140, 0, 0.02) 60%,
		transparent 80%
	);
	border-radius: 50%;
	opacity: 0;
	animation: _combinedGlowPulse_vvzlk_1 2.2s cubic-bezier(0.4, 0, 0.6, 1) forwards;
	filter: blur(4px);
	mix-blend-mode: screen;
	pointer-events: none;
	will-change: transform, opacity;
}

@keyframes _combinedGlowPulse_vvzlk_1 {
	0% {
		transform: translate(-50%, 50%) scale(0.3);
		opacity: 0;
	}
	25% {
		transform: translate(-50%, 50%) scale(1.5, 1.2);
		opacity: 0.8;
	}
	50% {
		transform: translate(-50%, 50%) scale(1.3, 1);
		opacity: 0.5;
	}
	75% {
		transform: translate(-50%, 50%) scale(1.1, 0.9);
		opacity: 0.3;
	}
	100% {
		transform: translate(-50%, 50%) scale(0.9, 0.7);
		opacity: 0;
	}
}

/* Golden pulse for premium effect */
._goldenPulse_vvzlk_258 {
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, 50%);
	width: 90px;
	height: 60px;
	background: radial-gradient(
		ellipse,
		rgba(255, 223, 0, 0.25) 0%,
		rgba(255, 204, 0, 0.12) 30%,
		rgba(255, 178, 0, 0.06) 60%,
		transparent 85%
	);
	border-radius: 50%;
	opacity: 0;
	animation: _goldenPulseAnim_vvzlk_1 2.2s ease-out forwards;
	filter: blur(15px);
	mix-blend-mode: screen;
	pointer-events: none;
	will-change: transform, opacity;
}

@keyframes _goldenPulseAnim_vvzlk_1 {
	0% {
		transform: translate(-50%, 50%) scale(0.3, 0.3);
		opacity: 0;
	}
	30% {
		transform: translate(-50%, 50%) scale(1.4, 1.2);
		opacity: 0.5;
	}
	60% {
		transform: translate(-50%, 50%) scale(1.8, 1.5);
		opacity: 0.25;
	}
	100% {
		transform: translate(-50%, 50%) scale(2.5, 2);
		opacity: 0;
	}
}

/* Icon animation when autoplay triggers */
._iconAnimating_vvzlk_301 {
	animation: _iconPulse_vvzlk_1 2.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes _iconPulse_vvzlk_1 {
	0% {
		transform: scale(1) rotate(0deg);
		filter: brightness(1) drop-shadow(0 0 0px rgba(255, 215, 0, 0));
	}
	15% {
		transform: scale(1.15) rotate(5deg);
		filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
	}
	30% {
		transform: scale(1.1) rotate(-3deg);
		filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 195, 0, 0.6));
	}
	45% {
		transform: scale(1.12) rotate(2deg);
		filter: brightness(1.25) drop-shadow(0 0 5px rgba(255, 185, 0, 0.5));
	}
	60% {
		transform: scale(1.08) rotate(-1deg);
		filter: brightness(1.15) drop-shadow(0 0 4px rgba(255, 175, 0, 0.4));
	}
	75% {
		transform: scale(1.05) rotate(0.5deg);
		filter: brightness(1.1) drop-shadow(0 0 3px rgba(255, 165, 0, 0.3));
	}
	90% {
		transform: scale(1.02) rotate(0deg);
		filter: brightness(1.05) drop-shadow(0 0 2px rgba(255, 155, 0, 0.2));
	}
	100% {
		transform: scale(1) rotate(0deg);
		filter: brightness(1) drop-shadow(0 0 0px rgba(255, 215, 0, 0));
	}
}
._menuIconButton_3m2bm_1 img {
	width: 25px;
	height: 25px;
}

._menuIconButton_3m2bm_1 {
	cursor: pointer;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

._menuIconButton_3m2bm_1:hover {
	background-color: var(--bg-depth-1);
}
._container_o0o3t_1 {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 12px;
}

._avatarStack_o0o3t_8 {
	display: flex;
	align-items: center;
	position: relative;
}

._avatarWrapper_o0o3t_14 {
	position: relative;
	margin-left: -8px;
	transition: transform 0.2s ease;
	cursor: pointer;
}

._avatarWrapper_o0o3t_14:first-child {
	margin-left: 0;
}

._avatarWrapper_o0o3t_14:hover {
	transform: translateY(-2px);
	z-index: 10 !important;
}

._avatar_o0o3t_8 {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.8);
	background: #1a1a1a;
	display: block;
}

._avatarPlaceholder_o0o3t_39 {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.8);
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: white;
}

._hostBadge_o0o3t_53 {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 14px;
	height: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
	z-index: 1;
}

._moreCount_o0o3t_66 {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.8);
	background: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
}

._listenerCount_o0o3t_80 {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 500;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}
._root_81dpx_1 {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: var(--space-300);
	flex: 1;
	overflow: hidden;
	margin: 0 var(--space-300);
	overflow: hidden;
}

@media (max-width: 768px) {
	._root_81dpx_1 {
		gap: 0;
		margin: 0;
	}
}

._centerColumn_81dpx_19 {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
	width: 100%;
	position: relative;
	overflow: hidden;
}
._headerItemContainer_17j9x_1 {
	border-radius: var(--radius-400);
	display: flex;
	justify-content: center;
	transition: background-color 0.5s ease;
	color: var(--text-primary);
	overflow: hidden;
	margin-bottom: var(--space-300);
	width: 100%;
	container-type: inline-size;
}

._headerItemContentWrapper_17j9x_13 {
	display: flex;
	width: 100%;
	max-width: 900px;
	min-width: 20px;
	padding: 24px var(--space-600);
}

._headerItemContent_17j9x_13 {
	display: flex;
	align-items: center;
	gap: 32px;
	width: 100%;
}

._image_17j9x_28 {
	width: 180px;
	height: 180px;
	object-fit: cover;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	flex-shrink: 0;
}

._squareImage_17j9x_36 {
	border-radius: 8px;
}

._circleImage_17j9x_40 {
	border-radius: 50%;
}

._infoContainer_17j9x_44 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-grow: 1;
	min-width: 0;
}

._headerTypeLabel_17j9x_52 {
	font-size: var(--xxs);
	font-weight: bold;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin-bottom: 4px;
}

._title_17j9x_60 {
	font-size: 30px;
	font-weight: bold;
	margin: 0 0 8px 0;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

._subtitle1_17j9x_70,
._subtitle2_17j9x_71 {
	font-size: var(--m);
	margin: 0 0 4px 0;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

._subtitle2_17j9x_71 {
	color: var(--text-secondary);
}

._buttonGroup_17j9x_84 {
	margin-top: 16px;
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

@container (max-width: 920px) {
	._headerItemContentWrapper_17j9x_13 {
		max-width: 100%;
	}
}

@container (max-width: 733px) {
	._headerItemContentWrapper_17j9x_13 {
		padding: 16px;
		flex-direction: column;
		gap: 0;
	}

	._headerItemContent_17j9x_13 {
		gap: 16px;
		align-items: flex-start;
	}

	._image_17j9x_28 {
		width: 80px;
		height: 80px;
		flex-shrink: 0;
	}

	._infoContainer_17j9x_44 {
		flex: 1;
		min-width: 0;
	}

	._title_17j9x_60 {
		font-size: 20px;
		line-height: 1.2;
		margin-bottom: 4px;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	._subtitle1_17j9x_70,
	._subtitle2_17j9x_71 {
		font-size: 14px;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	._buttonGroup_17j9x_84 {
		display: none;
	}

	._mobileButtonGroup_17j9x_142 {
		display: flex;
		flex-direction: row;
		gap: 8px;
		align-self: flex-start;
		margin-top: 16px;
		flex-shrink: 0;
	}

	._mobileMoreButton_17j9x_151 {
		padding: 0px;
		background: none;
		border: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	._mobileMoreButtonIcon_17j9x_161 {
		width: 24px;
		height: 24px;
		fill: currentColor;
	}
}

@container (min-width: 734px) {
	._mobileButtonGroup_17j9x_142 {
		display: none;
	}
}

._mobileOptionsPanel_17j9x_174 {
	display: none;
	width: 100%;
	animation: _slideDown_17j9x_1 0.2s ease-out;
}

@container (max-width: 733px) {
	._mobileOptionsPanel_17j9x_174 {
		display: block;
		margin-top: 16px;
		width: 100%;
	}

	._mobileOptionsPanelContent_17j9x_187 {
		background-color: var(--overlay-100);
		border-radius: var(--radius-300);
		padding: 12px;
		display: flex;
		gap: 12px;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	._mobileButtonGroup_17j9x_142 {
		gap: 24px;
	}
}

@container (min-width: 734px) {
	._mobileOptionsPanel_17j9x_174 {
		display: none;
	}
}

@keyframes _slideDown_17j9x_1 {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@container (max-width: 450px) {
	._mobileButtonGroup_17j9x_142 {
		flex-direction: column-reverse;
		align-items: flex-end;
		margin-top: 0px;
	}
	._subtitle2_17j9x_71 {
		display: none;
	}
	._mobileButtonGroup_17j9x_142 {
		gap: 12px;
	}
	._mobileMoreButton_17j9x_151 {
		padding: 3px 15px;
	}
}

._spacer_17j9x_235 {
	flex-grow: 1;
}

._copyLinkButton_17j9x_239 {
	padding: 10px 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--radius-full);
	background-color: var(--overlay-200);
	color: var(--text-primary);
	border: none;
	font-weight: var(--semibold);
	font-size: 12px;
	transition: background-color 0.2s ease;

	img {
		width: 20px;
		height: 20px;
		fill: currentColor;

		:hover {
			background-color: transparent;
		}
	}
}

._copyLinkButton_17j9x_239:hover {
	background-color: var(--overlay-300);
}
._iconButtonWrapper_ne6yu_1 {
	position: relative;
	display: inline-block;
}

._iconButton_ne6yu_1 {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background-color: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	backdrop-filter: blur(10px);
}

._iconButton_ne6yu_1:hover {
	background-color: rgba(255, 255, 255, 0.2);
	transform: scale(1.05);
}

._iconButton_ne6yu_1:active {
	transform: scale(0.95);
}

._iconButton_ne6yu_1:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

._icon_ne6yu_1 {
	width: 24px;
	height: 24px;
	transition: all 0.2s ease;
}

/* Tooltip styles */
._tooltip_ne6yu_42 {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;
	padding: 6px 12px;
	background-color: rgba(0, 0, 0, 0.9);
	color: white;
	font-size: 12px;
	font-weight: 500;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
	pointer-events: none;
	z-index: 1000;
}

/* Tooltip arrow */
._tooltip_ne6yu_42::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: rgba(0, 0, 0, 0.9);
}

/* Show tooltip on hover */
._iconButtonWrapper_ne6yu_1:hover ._tooltip_ne6yu_42 {
	opacity: 1;
	visibility: visible;
}

/* Special styles for active states */
._iconButton_ne6yu_1._active_ne6yu_80 {
	background-color: rgba(255, 255, 255, 0.25);
}
._playButton_8r3ou_1 {
	background-color: #ffffff;
	color: inherit;
	border: none;
	border-radius: 32px;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.2s ease;
	min-height: 48px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

._playButton_8r3ou_1:hover {
	background-color: #f5f5f5;
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

._playButton_8r3ou_1:active {
	transform: scale(0.98);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

._playButton_8r3ou_1:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

._playIcon_8r3ou_36 {
}

._playText_8r3ou_39 {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
}
@container (max-width: 733px) {
	._playText_8r3ou_39 {
		display: none;
	}
	._playButton_8r3ou_1 {
		border-radius: var(--radius-full);
		padding: 12px 18px;
		min-height: 48px;
	}
}
._pageContainer_lb3vp_1 {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	container-type: inline-size;
}

._root_lb3vp_9 {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	overflow-x: hidden;
	flex: 1;
	width: 100%;
	background-color: var(--overlay-100);
	border-radius: var(--radius-400);
}

._center_lb3vp_21 {
	display: flex;
	flex-direction: column;
	gap: var(--space-400);
	width: 100%;
	max-width: 1100px;
	min-width: 20px;
	padding: 0 var(--space-600);
	transition: max-width 0.3s ease;
}

._externalHeader_lb3vp_32 {
	width: 100%;
	display: flex;
	justify-content: center;
}

._subHeader_lb3vp_38 {
	width: 100%;
	display: flex;
	justify-content: center;
}

._scrollContainer_lb3vp_44 {
	overflow-y: auto;
	overflow-x: hidden;
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	scroll-behavior: auto;
	overscroll-behavior: contain;
}

/* Initial responsiveness for pages using container queries to accomodate the variable width of the sidebars, will align values to work around the responsiveness of the grid elements */
@container (max-width: 920px) {
	._center_lb3vp_21 {
		max-width: 100%;
		transition: max-width 0.3s ease;
	}
}

@media (max-width: 768px) {
	._root_lb3vp_9 {
		background-color: transparent;
		border-radius: 0;
	}

	._scrollContainer_lb3vp_44 {
		padding-bottom: 100px;
		/* Safe area handled by pageRoot */
	}

	._center_lb3vp_21 {
		padding: 0 var(--space-300); /* Small side margins for mobile */
	}

	/* Add initial padding to homepage scroll container */
	.is-homepage ._scrollContainer_lb3vp_44 {
		/* Use env() for the notch area padding */
		padding-top: env(safe-area-inset-top);
		/* Fallback for older iOS versions */
		padding-top: constant(safe-area-inset-top);
	}
}
._container_567mu_1 {
	width: 100%;
}

._loadingHeader_567mu_5 {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--bg-depth-2);
	border-radius: var(--radius-400);
	margin-bottom: var(--space-300);
	width: 100%;
}

._loadingHeaderContent_567mu_15 {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--space-800);
	width: 100%;
	max-width: 900px;
	min-width: 20px;
}

._externalLinkButton_567mu_25 {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xsmall, 4px);
	padding: 12px 18px;
	background-color: var(--button-secondary-bg-color, rgba(255, 255, 255, 0.1));
	color: var(--button-secondary-text-color, #ffffff);
	border-radius: var(--border-radius-medium, 20px);
	text-decoration: none;
	font-size: var(--font-size-small, 0.9rem);
	font-weight: 500;
	transition: background-color 0.2s ease;
}

._externalLinkButton_567mu_25:hover {
	background-color: var(--button-secondary-bg-hover-color, rgba(255, 255, 255, 0.2));
}

._linkIcon_567mu_43 {
	width: var(--icon-size-medium, 16px);
	height: var(--icon-size-medium, 16px);
}

._playArtistButton_567mu_48 {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--radius-full);
	text-decoration: none;
	background-color: var(--overlay-200);
	color: var(--text-primary);
	border: none;
	padding: 10px 20px;
	font-weight: var(--semibold);
	font-size: 12px;
	transition: background-color 0.2s ease;
}

._playArtistButton_567mu_48:hover {
	background-color: var(--overlay-300);
}

._playArtistIcon_567mu_68 {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Match CommonPage responsive breakpoints for loading header */
@container (max-width: 920px) {
	._loadingHeaderContent_567mu_15 {
		max-width: 800px;
	}
}

@container (max-width: 820px) {
	._loadingHeaderContent_567mu_15 {
		max-width: 700px;
	}
}

@container (max-width: 720px) {
	._loadingHeaderContent_567mu_15 {
		max-width: 600px;
	}
}
._container_1dnw9_1 {
	position: relative;
	overflow: hidden;
}

/* Size variants */
._container_1dnw9_1._small_1dnw9_7 {
	width: 60px;
	height: 60px;
}

._container_1dnw9_1._medium_1dnw9_12 {
	width: 120px;
	height: 120px;
}

._container_1dnw9_1._large_1dnw9_17 {
	width: 140px;
	height: 140px;
}

/* Shape variants */
._container_1dnw9_1._circle_1dnw9_23 {
	border-radius: var(--radius-full);
}

._container_1dnw9_1._square_1dnw9_27 {
	border-radius: var(--radius-200);
}

._image_1dnw9_31 {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.25s ease;
	will-change: opacity;
}

._circle_1dnw9_23 ._image_1dnw9_31 {
	border-radius: var(--radius-full);
	border: 2.5px solid rgba(255, 255, 255, 0.2);
}

._square_1dnw9_27 ._image_1dnw9_31 {
	border-radius: var(--radius-200);
}

/* Shimmer loading effect */
._shimmerContainer_1dnw9_49 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bg-depth-2);
	overflow: hidden;
}

._circle_1dnw9_23 ._shimmerContainer_1dnw9_49 {
	border-radius: var(--radius-full);
}

._square_1dnw9_27 ._shimmerContainer_1dnw9_49 {
	border-radius: var(--radius-200);
}

._shimmer_1dnw9_49 {
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--bg-depth-2) 0%, var(--bg-depth-3) 50%, var(--bg-depth-2) 100%);
	background-size: 200% 100%;
	animation: _shimmerAnimation_1dnw9_1 1.5s infinite;
}

@keyframes _shimmerAnimation_1dnw9_1 {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}
._root_etsjl_1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* Container for the entire header */
._container_etsjl_9 {
	display: flex;
	justify-content: center;
	margin: var(--space-800) 0 var(--space-600) 0;
	padding: 0 var(--space-800);
}

/* Main navigation wrapper with background */
._navRoot_etsjl_17 {
	display: flex;
	align-items: center;
	gap: var(--space-50);
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-full);
	padding: var(--space-100);
	position: relative;
	overflow: hidden;
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.1),
		inset 0 1px 1px rgba(255, 255, 255, 0.05);

	/* CSS custom properties for glider positioning */
	--glider-left: 0px;
	--glider-width: 0px;
	--glider-opacity: 0;
	--glider-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Individual tab styling */
._tab_etsjl_41 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-200) var(--space-600);
	border-radius: var(--radius-full);
	text-decoration: none !important;
	position: relative;
	z-index: 2;
	transition: transform 0.2s ease-out;
	min-height: 34px;
	cursor: pointer;
	-webkit-user-drag: none;
	user-drag: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Ensure no underline on hover */
._tab_etsjl_41:hover {
	text-decoration: none !important;
}

/* Tab label text */
._label_etsjl_66 {
	font-size: var(--s);
	font-weight: var(--medium);
	color: rgba(255, 255, 255, 0.55);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	white-space: nowrap;
	user-select: none;
	letter-spacing: -0.01em;
}

/* Hover state for tabs */
._tab_etsjl_41:hover ._label_etsjl_66 {
	color: rgba(255, 255, 255, 0.8);
}

/* Active tab text */
._tab_etsjl_41._active_etsjl_82 ._label_etsjl_66 {
	color: rgba(255, 255, 255, 0.95);
	font-weight: var(--semibold);
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* The animated glider/pill background */
._glider_etsjl_89 {
	position: absolute;
	top: var(--space-100);
	bottom: var(--space-100);
	left: var(--glider-left);
	width: var(--glider-width);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.12) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 0.5px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-full);
	transition: var(--glider-transition);
	z-index: 1;
	opacity: var(--glider-opacity);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* Subtle inner glow for depth */
._glider_etsjl_89::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-full);
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

/* Active tab micro-interaction feedback */
._tab_etsjl_41:active {
	transform: scale(0.96);
}

/* Focus styles for accessibility */
._tab_etsjl_41:focus-visible {
	outline: 2px solid var(--brand-purple);
	outline-offset: 2px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
	._container_etsjl_9 {
		padding: 0 var(--space-400);
		margin: var(--space-600) 0 var(--space-400) 0;
	}

	._navRoot_etsjl_17 {
		gap: 0;
	}

	._tab_etsjl_41 {
		padding: var(--space-200) var(--space-500);
		min-height: 30px;
	}

	._label_etsjl_66 {
		font-size: var(--xs);
	}
}

._content_etsjl_151 {
	width: 100%;
}
._sectionLabelContainer_6gmg2_1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 10px 0;
	margin-top: var(--space-500);
}

._title_6gmg2_10 {
	font-size: var(--l);
	font-weight: bold;
	color: var(--text-primary);
	margin: 0;
}

._showAllLink_6gmg2_17 {
	font-size: var(--s);
	font-weight: var(--weight-300);
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.3s ease;
}

._showAllLink_6gmg2_17:hover {
	color: var(--text-primary);
	text-decoration: none;
	transition: color 0.3s ease;
}
._root_ibw24_1 {
	display: flex;
	align-items: center;
	width: 100%;
	gap: var(--space-200);
	cursor: pointer;
	background-color: var(--overlay-00);
	padding: var(--space-500) var(--space-500);
	border-radius: var(--radius-200);
	height: 70px;
	container-type: inline-size;
	transition: background-color var(--animation-duration-fast) var(--animation-timing-function);
	/* iOS WebView fix */
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

._trackNumber_ibw24_20 {
	width: 24px;
	text-align: center;
	font-size: 14px;
	color: var(--text-secondary);
	font-weight: 500;
	margin-right: var(--space-300);
	opacity: 0.8;
}

._root_ibw24_1:hover ._trackNumber_ibw24_20 {
	opacity: 1;
}

._root_ibw24_1._selected_ibw24_34 ._trackNumber_ibw24_20 {
	color: var(--text-primary);
}

._trackNumberContainer_ibw24_38 {
	width: 24px;
	margin-right: var(--space-300);
	display: flex;
	align-items: center;
	justify-content: center;
}

._visualizer_ibw24_46 {
	animation: _containerEnter_ibw24_1 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	transform-origin: center;
}

@keyframes _containerEnter_ibw24_1 {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

._bar_ibw24_62 {
	opacity: 0;
	animation:
		_barEnter_ibw24_1 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
		var(--bar-animation) 0.8s ease-in-out infinite var(--animation-delay);
}

._bar1_ibw24_69 {
	--bar-animation: _bar1_ibw24_69;
	--animation-delay: 0.1s;
	animation-delay: 0s, 0.1s;
}
._bar2_ibw24_74 {
	--bar-animation: _bar2_ibw24_74;
	--animation-delay: 0s;
	animation-delay: 0.05s, 0s;
}
._bar3_ibw24_79 {
	--bar-animation: _bar3_ibw24_79;
	--animation-delay: -0.1s;
	animation-delay:
		0.1s,
		-0.1s;
}
._bar4_ibw24_86 {
	--bar-animation: _bar1_ibw24_69;
	--animation-delay: -0.2s;
	animation-delay:
		0.15s,
		-0.2s;
}
._bar5_ibw24_93 {
	--bar-animation: _bar2_ibw24_74;
	--animation-delay: -0.3s;
	animation-delay:
		0.2s,
		-0.3s;
}

@keyframes _barEnter_ibw24_1 {
	0% {
		opacity: 0;
		transform: scaleY(0.5);
	}
	100% {
		opacity: 0.9;
		transform: scaleY(1);
	}
}

@keyframes _bar1_ibw24_69 {
	0%,
	100% {
		height: 6px;
		y: 9px;
	}
	50% {
		height: 10px;
		y: 7px;
	}
}

@keyframes _bar2_ibw24_74 {
	0%,
	100% {
		height: 10px;
		y: 7px;
	}
	50% {
		height: 6px;
		y: 9px;
	}
}

@keyframes _bar3_ibw24_79 {
	0%,
	100% {
		height: 8px;
		y: 8px;
	}
	50% {
		height: 12px;
		y: 6px;
	}
}

._playing_ibw24_148 {
	background-color: var(--overlay-200);
}

._playing_ibw24_148:hover {
	background-color: var(--overlay-300);
}

._root_ibw24_1:hover {
	background-color: var(--overlay-100);
}

/* Remove hover on touch devices */
@media (hover: none) and (pointer: coarse) {
	._root_ibw24_1:hover {
		background-color: var(--overlay-00);
	}

	._root_ibw24_1:hover ._trackNumber_ibw24_20 {
		opacity: 0.8;
	}

	._root_ibw24_1:hover ._artworkOverlay_ibw24_170 {
		opacity: 0;
	}

	/* Always show play button on touch devices */
	._artworkOverlay_ibw24_170 {
		opacity: 1;
	}
}

._duration_ibw24_180 {
	flex-shrink: 0;
	width: 40px;
	text-align: right;
}

@container (max-width: 400px) {
	._duration_ibw24_180 {
		display: none;
	}
}

._unplayable_ibw24_192 {
	opacity: 0.5;
}

._TrackNameExplicitAndArtistName_ibw24_196 {
	overflow: hidden;
	flex: 1;
	gap: 5px;
	display: flex;
	flex-direction: column;
}

._explicitAndArtistName_ibw24_204 {
	display: flex;
	align-items: center;
	gap: var(--space-100);
}

._artwork_ibw24_170 {
	height: 45px;
	width: 45px;
	border-radius: var(--radius-50);
	cursor: pointer;
}

._unplayable_ibw24_192 ._artworkContainer_ibw24_217 {
	pointer-events: none;
	transition: 0.3s;
}

._artworkContainer_ibw24_217 {
	position: relative;
	height: 45px;
	width: 45px;
	margin-right: var(--space-200);
}

._artworkOverlay_ibw24_170 {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

._root_ibw24_1:hover ._artworkOverlay_ibw24_170 {
	opacity: 1;
}

._playIcon_ibw24_248 {
	width: 18px;
	height: 18px;
}

._artist_ibw24_253 {
	display: flex;
	gap: var(--space-100);
}

._artist_ibw24_253 p:hover {
	text-decoration: underline;
}

._root_ibw24_1 * {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

._selected_ibw24_34 {
	background-color: var(--overlay-100);
}

._root_ibw24_1._selected_ibw24_34:hover {
	background-color: var(--overlay-300);
}

._menuButton_ibw24_276 {
	opacity: 0.5;
}

._menuButton_ibw24_276:hover {
	opacity: 1;
}
/* Main Modal Container */
._modal_14odd_2 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: _fadeIn_14odd_1 0.2s ease-out;
}

._modalContent_14odd_15 {
	background-color: var(--gray-1000);
	border: 1px solid var(--border-300);
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	width: 320px;
	min-height: 320px;
	max-height: 550px;
	overflow: hidden;
	position: absolute;
	animation: _slideIn_14odd_1 0.3s ease-out;
	display: flex;
	flex-direction: column;
}

._albumInfo_14odd_30 {
	display: flex;
	align-items: center;
	padding: 20px;
	background-color: var(--overlay-100);
	border-bottom: 1px solid var(--border-200);
}

._albumArtwork_14odd_38 {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-200);
	margin-right: 16px;
	background-color: var(--bg-depth-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

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

._fallbackArtwork_14odd_57 {
	color: var(--text-secondary);
	font-size: 20px;
	font-weight: 600;
}

._albumDetails_14odd_63 {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

._albumName_14odd_71 {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

._artistPageLink_14odd_81 {
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0;
	text-decoration: none;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

._artistPageLink_14odd_81:hover {
	color: var(--text-primary);
}

._releaseYear_14odd_96 {
	font-size: 12px;
	color: var(--text-tertiary);
	margin: 0;
	line-height: 1.2;
}

/* Album Actions (Heart Button) */
._albumActions_14odd_104 {
	display: flex;
	align-items: center;
	margin-left: 12px;
}

._heartButton_14odd_110 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: var(--ui-5);
	color: var(--ui-40);
	cursor: pointer;
	opacity: 0.8;
	transition: all 0.18s cubic-bezier(0.04, 0.91, 0.52, 1.5);
	border-radius: 0.375em;
	padding: 0;
}

._heartButton_14odd_110:hover {
	color: var(--ui-90);
	opacity: 1;
	transform: scale3d(1.15, 1.15, 1.15);
}

._heartButton_14odd_110:active {
	color: var(--ui-70);
	opacity: 1;
	transform: scale3d(0.95, 0.95, 0.95);
}

._heartButton_14odd_110:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	transform: none;
}

._heartButton_14odd_110._saved_14odd_144 {
	opacity: 1;
}

._heartButton_14odd_110._saved_14odd_144:hover {
	opacity: 0.8;
	transform: scale3d(1.1, 1.1, 1.1);
}

._heartButton_14odd_110._saved_14odd_144:active {
	opacity: 0.65;
	transform: scale3d(0.95, 0.95, 0.95);
}

._heartIcon_14odd_158 {
	width: 24px;
	height: 24px;
}

._heartLoading_14odd_163 {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	animation: _spin_14odd_1 1s linear infinite;
}

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

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

._keyboardHelp_14odd_182 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.95);
	backdrop-filter: blur(8px);
	padding: 20px;
	overflow-y: auto;
	z-index: 10;
}

._helpTitle_14odd_195 {
	font-size: 18px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 16px 0;
	text-align: center;
}

._helpGrid_14odd_203 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	max-width: 400px;
	margin: 0 auto;
}

._helpItem_14odd_211 {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}

._helpItem_14odd_211 kbd {
	background-color: var(--overlay-100);
	color: var(--text-primary);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
	min-width: 24px;
	text-align: center;
	border: 1px solid var(--border-200);
}

._helpItem_14odd_211 span {
	font-size: 12px;
	color: var(--text-secondary);
	flex: 1;
}

._contentArea_14odd_236 {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

._contentArea_14odd_236::-webkit-scrollbar {
	display: none;
}

._actionList_14odd_248 {
	max-height: 60vh;
	overflow-y: auto;
}

._actionList_14odd_248 a {
	text-decoration: none;
}

._actionList_14odd_248 a:hover {
	text-decoration: none;
}

._actionButton_14odd_261 {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 16px 20px;
	background: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
	text-align: left;
}

._actionButton_14odd_261:hover {
	background-color: var(--bg-depth-2);
}

._actionButton_14odd_261:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

._actionButton_14odd_261:disabled:hover {
	background-color: transparent;
}

._actionIcon_14odd_286 {
	width: 20px;
	height: 20px;
	margin-right: 12px;
	flex-shrink: 0;
}

._actionLabel_14odd_293 {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
	flex: 1;
}

._loading_14odd_300 {
	background: linear-gradient(90deg, var(--bg-depth-2) 0%, var(--bg-depth-3) 50%, var(--bg-depth-2) 100%);
	background-size: 200% 100%;
	animation: _skeleton_14odd_1 1.5s ease-in-out infinite;
	border-radius: 4px;
}

._loadingSkeleton_14odd_307 {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

._loadingSkeleton_14odd_307 ._loading_14odd_300 {
	height: 48px;
	border-radius: 8px;
}

._loadingSkeleton_14odd_307 ._loading_14odd_300:first-child {
	width: 70%;
}

._loadingSkeleton_14odd_307 ._loading_14odd_300:nth-child(2) {
	width: 85%;
}

._loadingSkeleton_14odd_307 ._loading_14odd_300:last-child {
	width: 60%;
}

@keyframes _fadeIn_14odd_1 {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

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

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

@keyframes _skeleton_14odd_1 {
	0% {
		background-position: 200% 0;
	}

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

@media (max-width: 480px) {
	._modalContent_14odd_15 {
		width: 280px;
		min-height: 280px;
	}

	._albumInfo_14odd_30 {
		padding: 16px;
	}

	._actionButton_14odd_261 {
		padding: 14px 16px;
	}
}

._modal_14odd_2:focus {
	outline: none;
}

._actionButton_14odd_261:focus,
._actionButton_14odd_261:focus-visible {
	background-color: var(--bg-depth-2);
	outline: 2px solid var(--accent-primary);
	outline-offset: -2px;
}

._actionButton_14odd_261:focus:not(:focus-visible),
._actionButton_14odd_261:focus:not(:focus-visible):hover {
	background-color: var(--bg-depth-2);
	outline: none;
}

._artistList_14odd_395 {
	border-top: 1px solid var(--bg-depth-2);
}

._artistList_14odd_395 a {
	text-decoration: none;
}

._artistList_14odd_395 a:hover {
	text-decoration: none;
}

._artistButton_14odd_407 {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 16px 20px;
	background: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
	text-align: left;
}

._artistButton_14odd_407:hover {
	background-color: var(--bg-depth-2);
}

._artistButton_14odd_407:focus,
._artistButton_14odd_407:focus-visible {
	background-color: var(--bg-depth-2);
	outline: 2px solid var(--accent-primary);
	outline-offset: -2px;
}

._artistButton_14odd_407:focus:not(:focus-visible) {
	background-color: var(--bg-depth-2);
	outline: none;
}

._artistThumbnail_14odd_435 {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 16px;
	background-color: var(--bg-depth-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

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

._albumThumbnail_14odd_454 {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	margin-right: 16px;
	background-color: var(--bg-depth-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

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

._artistName_14odd_473 {
	font-size: 15px;
	font-weight: 500;
	color: var(--text-primary);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

._itemInfo_14odd_483 {
	flex: 1;
	min-width: 0;
}

._itemType_14odd_488 {
	font-size: 11px;
	font-weight: var(--regular);
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 3px;
	display: block;
}

._artistNameContainer_14odd_498 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
}

._copyIcon_14odd_505 {
	width: 16px;
	height: 16px;
	opacity: 0.7;
	margin-left: 8px;
	flex-shrink: 0;
}
._card_55ynm_1 {
	display: block;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: transform var(--animation-duration-fast) var(--animation-timing-function);
	aspect-ratio: 1/1;
	width: 100%;
	background-color: var(--bg-depth-1);
}

/* Size variants - only used for non-grid contexts */
._small_55ynm_13 {
	max-width: 120px;
}

._medium_55ynm_17 {
	max-width: 100%;
}

._large_55ynm_21 {
	max-width: 240px;
}

._card_55ynm_1:hover {
	transform: scale(1);
	z-index: 2;
}

._card_55ynm_1:hover ._overlay_55ynm_30 {
	opacity: 1;
}

._card_55ynm_1:hover ._playButton_55ynm_34 {
	transform: translateY(0) scale(1);
}

._card_55ynm_1:hover ._releaseInfo_55ynm_38 {
	transform: translateY(0);
}

._latestRelease_55ynm_42 {
	box-shadow: 0 0 20px rgba(131, 56, 236, 0.3);
}

._latestRelease_55ynm_42:hover {
	box-shadow: 0 0 30px rgba(131, 56, 236, 0.4);
}

._imageContainer_55ynm_50 {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* border-radius: var(--radius-200); */
}

._artwork_55ynm_58 {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* border-radius: var(--radius-200); */
	transition: transform 0.3s ease;
}

._card_55ynm_1:hover ._artwork_55ynm_58 {
	transform: scale(1);
}

._overlay_55ynm_30 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-300);
	opacity: 0;
	transition: opacity 0.3s ease;
	/* border-radius: var(--radius-200); */
}

._playButton_55ynm_34 {
	width: 50px;
	height: 50px;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	margin-bottom: auto;
	transform: translateY(20px) scale(0.8);
	transition:
		transform 0.3s ease,
		background-color 0.2s ease;
}

._playButton_55ynm_34:hover {
	background-color: rgba(255, 255, 255, 0.3);
	transform: translateY(0) scale(1.1) !important;
}

._playIcon_55ynm_108 {
	width: 20px;
	height: 20px;
}

._releaseInfo_55ynm_38 {
	width: 100%;
	transform: translateY(20px);
	transition: transform 0.3s ease;
	text-align: center;
}

._title_55ynm_120 {
	color: white;
	margin: 0;
	font-size: var(--s);
	font-weight: var(--semibold);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: var(--space-100);
}

._meta_55ynm_131 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-200);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--xxs);
}

._type_55ynm_140 {
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: var(--medium);
}

._separator_55ynm_146 {
	font-size: 8px;
	opacity: 0.5;
}

._year_55ynm_151 {
	opacity: 0.8;
}

._latestBadge_55ynm_155 {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	font-size: var(--xxs);
	font-weight: var(--bold);
	padding: var(--space-100) var(--space-300);
	border-radius: var(--radius-full);
	z-index: 3;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
._albumsContainer_1bdki_1 {
	display: grid;
	grid-template-rows: repeat(2, auto);
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
	width: 100%;
	margin-top: 16px;
	margin-bottom: 100px;
}
._container_m0trr_1 {
	display: flex;
	flex-direction: column;
	gap: var(--space-600);
}

._sectionTitle_m0trr_7 {
	margin-bottom: var(--space-400);
}

._bioSection_m0trr_11 {
	display: flex;
	flex-direction: column;
}

._bioText_m0trr_16 {
	color: var(--text-secondary);
	line-height: 1.6;
	white-space: normal;
	text-wrap: wrap;
	overflow: visible;
}

._infoItem_m0trr_24 {
	display: flex;
	align-items: center;
	gap: var(--space-300);
	margin-top: var(--space-200);
}

._infoLabel_m0trr_31 {
	font-weight: var(--medium);
	color: var(--text-default);
	font-size: var(--s);
}

._infoValue_m0trr_37 {
	color: var(--text-secondary);
	font-size: var(--s);
}

._emptyState_m0trr_42 {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--space-800);
	color: var(--text-secondary);
	font-style: italic;
}
._container_1dy33_1 {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--space-400) 0;
	/* background-color: var(--bg-depth-2); */
	border-radius: var(--radius-300);
}

._releaseGrid_1dy33_10 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
	gap: 0.5px;
	padding: 0.5px;
	margin-bottom: 100px;
	overflow: hidden;
	background-color: var(--overlay-200);
}

._emptyState_1dy33_21 {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--space-800);
	color: var(--text-secondary);
	font-style: italic;
	min-height: 200px;
}
._container_il2t2_1 {
	display: flex;
	flex-direction: column;
	width: 100%;
}

._tracksList_il2t2_7 {
	display: flex;
	flex-direction: column;
	gap: var(--space-300);
	width: 100%;
}

._trackItem_il2t2_14 {
	display: flex;
	align-items: center;
	padding: var(--space-300) var(--space-400);
	border-radius: var(--radius-200);
	background-color: var(--bg-depth-3);
	cursor: pointer;
	transition: background-color var(--animation-duration-fast) var(--animation-timing-function);
	will-change: background-color;
	transform: translateZ(0);
}

._trackItem_il2t2_14:hover {
	background-color: var(--bg-depth-4);
}

._trackItem_il2t2_14._playing_il2t2_30 {
	background-color: var(--overlay-300);
}

._trackIndex_il2t2_34 {
	width: 30px;
	text-align: center;
	font-size: var(--s);
	color: var(--text-secondary);
}

._artworkContainer_il2t2_41 {
	position: relative;
	margin-right: var(--space-400);
	transform: translateZ(0);
}

._playOverlay_il2t2_47 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--animation-duration-fast) var(--animation-timing-function);
	will-change: opacity;
	transform: translateZ(0);
	pointer-events: none;
}

._trackItem_il2t2_14:hover ._playOverlay_il2t2_47,
._trackItem_il2t2_14._playing_il2t2_30 ._playOverlay_il2t2_47 {
	opacity: 1;
	pointer-events: auto;
}

._playIcon_il2t2_70 {
	width: 16px;
	height: 16px;
}

._trackInfo_il2t2_75 {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
}

._trackTitle_il2t2_83 {
	font-size: var(--s);
	font-weight: var(--medium);
	color: var(--text-default);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: var(--space-200);
}

._explicitIcon_il2t2_95 {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

._trackDuration_il2t2_101 {
	font-size: var(--xs);
	color: var(--text-secondary);
	margin-left: var(--space-400);
}

._emptyState_il2t2_107 {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--space-800);
	color: var(--text-secondary);
	font-style: italic;
}

/* Section headings styles */
._sectionHeading_il2t2_117 {
	font-size: var(--m);
	font-weight: var(--bold);
	margin: var(--space-600) 0 var(--space-400);
	padding-left: var(--space-500);
	color: #d0d0d0;
}

._albumSection_il2t2_125 {
	margin-top: var(--space-800);
	margin-bottom: 40px;
	width: 100%;
}

._albumHeading_il2t2_131 {
	display: flex;
	align-items: center;
	gap: var(--space-300);
	font-size: var(--m);
	font-weight: var(--bold);
	margin: var(--space-600) 0 var(--space-400);
	color: var(--text-default);
	opacity: 1;
	padding-left: var(--space-500);
}

._albumDate_il2t2_143 {
	font-size: var(--s);
	font-weight: var(--regular);
	color: var(--text-secondary);
	opacity: 0.8;
}

._discGroup_il2t2_150 {
	margin-bottom: var(--space-600);
	width: 100%;
}

._discGroup_il2t2_150:last-child {
	margin-bottom: 0;
}

._discHeading_il2t2_159 {
	margin-top: var(--space-500);
	margin-bottom: var(--space-300);
	padding-left: var(--space-500);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-secondary);
	opacity: 0.75;
	letter-spacing: 0.02em;
}

._discHeading_il2t2_159:first-child {
	margin-top: 0;
}

/* Performance optimizations for large lists */
@media (prefers-reduced-motion: reduce) {
	._trackItem_il2t2_14,
	._playOverlay_il2t2_47 {
		transition: none;
	}
}

/* Ensure proper spacing on larger screens */
@media (min-width: 768px) {
	._tracksList_il2t2_7 {
		gap: var(--space-400);
	}

	._container_il2t2_1 {
		max-width: 100%;
	}
}
._root_fcork_1 {
	min-width: 90px;
	height: 40px;
	border-radius: var(--radius-full);
	background-color: white;
	color: black;
	border: 1px solid transparent;
	cursor: pointer;
	font-weight: var(--medium);
	font-size: 12px;
	padding: 0 var(--space-500);
	transition: all 0.2s ease;
}

._root_fcork_1:hover {
	background-color: #f0f0f0;
}

._root_fcork_1:active {
	background-color: #e0e0e0;
}

._following_fcork_23 {
	background-color: var(--overlay-200);
	color: var(--text-primary);
	border: 1px solid rgba(255, 255, 255, 0);
}

._following_fcork_23:hover {
	transition-delay: 0.15s;
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.4);
}

._following_fcork_23:active {
	transition-delay: 0s;
	background-color: rgba(255, 255, 255, 0.15);
}
._gridItem_1el5z_1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-600);
	border-radius: var(--radius-300);
	cursor: pointer;
	text-align: center;
	position: relative;
	overflow: hidden;
	background-color: var(--overlay-100);
	border: 1px solid var(--border-100);
	z-index: 0;
	transition: background 0.3s;
}

._gridItem_1el5z_1 > * {
	position: relative;
	z-index: 2;
}

._gridItem_1el5z_1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: inherit;
	z-index: 0;
}

._gridItem_1el5z_1:hover::before {
	opacity: 1;
}

._gridItem_1el5z_1:hover {
	text-decoration: none;
	background: var(--hover-bg, rgba(0, 0, 0, 0.7));
}

._gridItemBgOverlay_1el5z_45 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
	z-index: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	border-radius: inherit;
}

._gridItem_1el5z_1:hover ._gridItemBgOverlay_1el5z_45 {
	opacity: 1;
}

._backgroundImageOverlay_1el5z_63 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0.15;
	filter: blur(10px);
	z-index: 1;
	border-radius: inherit;
}

._imageContainer_1el5z_77 {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	position: relative;
	padding: 8px;
}

._image_1el5z_77 {
	display: block;
	max-width: 100%;
	height: auto;
	position: relative;
	border-radius: var(--radius-200);
}

._imageSquare_1el5z_93 {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

._imageCircle_1el5z_99 {
	border-radius: 50%;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

._textContainer_1el5z_106 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-100);
	width: 100%;
	padding: var(--space-300);
	position: relative;
}

._title_1el5z_116 {
	font-size: var(--l);
	font-weight: var(--semibold);
	color: var(--text-100);
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
}

._subtitle_1el5z_127 {
	font-size: var(--m);
	color: var(--text-50);
	font-weight: var(--regular);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
._subtitleSmall_1el5z_136 {
	font-size: var(--s);
	color: var(--text-50);
	font-weight: var(--regular);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

._actionButtonContainer_1el5z_146 {
	position: relative;
	margin-top: var(--space-200);
}

@container (max-width: 415px) {
	._gridItem_1el5z_1 {
		flex-direction: row;
		align-items: center;
		max-width: none;
		padding: var(--space-200);
	}

	._gridItem_1el5z_1:hover {
		background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
	}

	._image_1el5z_77 {
		width: 50px;
		height: 50px;
		margin-bottom: 0;
		margin-right: var(--space-500);
		flex-shrink: 0;
	}

	._textContainer_1el5z_106 {
		align-items: flex-start;
		flex-grow: 1;
		gap: var(--space-50);
		overflow: hidden;
	}

	._title_1el5z_116 {
		text-align: left;
	}

	._subtitle_1el5z_127 {
		text-align: left;
	}

	._actionButtonContainer_1el5z_146 {
		display: none;
	}
}
._artistSelection_7ss93_1 {
	position: relative;
	width: 100%;
	height: 370px;
	background-color: var(--overlay-100);
	border-radius: var(--radius-500);
	border: 1px solid var(--overlay-200);
	box-sizing: border-box;
	overflow: hidden;
	font-family: var(--primary-font);
	margin-top: 30px;
	display: flex;
	flex-direction: column;
}

._artistItem_7ss93_16 {
	min-width: 200px;
	max-width: 200px;
	width: 200px;
	height: 100%;
}

._ellipse_7ss93_23 {
	position: absolute;
	border-radius: 50%;
	filter: blur(50px);
	z-index: 0;
}

._ellipse1_7ss93_30 {
	width: 200px;
	height: 200px;
	background-color: var(--overlay-300);
	opacity: 0.18;
	top: -60px;
	left: -40px;
}

._ellipse2_7ss93_39 {
	width: 280px;
	height: 280px;
	background-color: var(--overlay-300);
	opacity: 0.18;
	top: 30px;
	right: -100px;
}

._ellipse3_7ss93_48 {
	width: 180px;
	height: 180px;
	background-color: var(--overlay-300);
	opacity: 0.5;
	bottom: -50px;
	left: 25%;
}

._headerContent_7ss93_57 {
	position: relative;
	z-index: 1;
	margin: 25px 0px 20px 25px;
}

._artistList_7ss93_63 {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	gap: var(--space-400);
	overflow-x: auto;
	padding: 0px 30px 0px 25px;
	flex: 1;
	scrollbar-width: none;
}

._artistList_7ss93_63::-webkit-scrollbar {
	display: none;
}

._scrollControlsWrapper_7ss93_79 {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	flex: 1;
}

._scrollButton_7ss93_87 {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	background: var(--overlay-300);
	border: 1px solid var(--overlay-200);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

._scrollButton_7ss93_87:hover {
	background: var(--surface-800);
	border: 1px solid var(--overlay-300);
	transform: translateY(-50%) scale(1.05);
}

._scrollButton_7ss93_87:active {
	transform: translateY(-50%) scale(0.95);
}

._scrollButtonLeft_7ss93_116 {
	left: 8px;
}

._scrollButtonRight_7ss93_120 {
	right: 8px;
}

._scrollButton_7ss93_87 svg {
	width: 24px;
	height: 24px;
	opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	._scrollButton_7ss93_87 {
		width: 40px;
		height: 40px;
	}

	._scrollButton_7ss93_87 svg {
		width: 20px;
		height: 20px;
	}

	._scrollButtonLeft_7ss93_116 {
		left: 4px;
	}

	._scrollButtonRight_7ss93_120 {
		right: 4px;
	}
}

@container (max-width: 415px) {
	._artistSelection_7ss93_1 {
		background-color: var(--overlay-00);
		border: 1px solid var(--overlay-00);
		height: inherit;
	}
	._artistList_7ss93_63 {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		gap: var(--space-400);
		overflow-x: auto;
		padding-left: 0px;
		padding-right: 0px;

		width: 100%;
	}
	._artistItem_7ss93_16 {
		min-width: 100%;
		width: 100%;
	}
	._ellipse1_7ss93_30 {
		display: none;
	}
	._ellipse2_7ss93_39 {
		display: none;
	}
	._ellipse3_7ss93_48 {
		display: none;
	}
	._headerContent_7ss93_57 {
		margin: 25px 0px 20px 0px;
	}

	/* Hide scroll controls on mobile when vertical layout */
	._scrollButton_7ss93_87 {
		display: none;
	}
}

._artistLink_7ss93_192 {
	text-decoration: none;
}

a._artistLink_7ss93_192:hover {
	text-decoration: none;
}
@keyframes _shimmer_64x3f_1 {
	0% {
		background-position: -900px 0;
	}

	100% {
		background-position: 900px 0;
	}
}

._skeleton_64x3f_11 {
	background: linear-gradient(90deg, var(--bg-depth-2) 0%, var(--white-200) 50%, var(--bg-depth-2) 100%);
	background-size: 1000px 100%;
	animation: _shimmer_64x3f_1 2s linear infinite;
	border-radius: var(--radius-100);
}

._skeletonDark_64x3f_18 {
	background: linear-gradient(90deg, var(--bg-depth-1) 0%, var(--white-100) 50%, var(--bg-depth-1) 100%);
	background-size: 1000px 100%;
	animation: _shimmer_64x3f_1 3s linear infinite;
	border-radius: var(--radius-100);
}

._feedContainer_64x3f_25 {
	display: flex;
	flex-direction: column;
	gap: var(--space-600);
	min-height: 0;
	align-items: center;
}

._divider_64x3f_33 {
	width: 100%;
	height: 1px;
	background: var(--white-200);
	margin: var(--space-600) 0;
}

/* Story Skeletons */
._storyContainer_64x3f_41 {
	display: flex;
	gap: var(--space-800);
	padding: var(--space-200);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	border-radius: var(--radius-300);
	min-height: fit-content;
}

._storyContainer_64x3f_41::-webkit-scrollbar {
	display: none;
}

._storyItem_64x3f_56 {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

._storyAvatarWrapper_64x3f_63 {
	position: relative;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	padding: 3px;
}

._storyAvatar_64x3f_63 {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid var(--bg-depth-1);
}

._storyName_64x3f_79 {
	width: 60px;
	height: 8px;
	margin-top: var(--space-200);
}

/* Story ring colors */
/* .storyItem:nth-child(5n + 1) .storyAvatarWrapper {
  background: var(--brand-blue);
}

.storyItem:nth-child(5n + 2) .storyAvatarWrapper {
  background: var(--brand-purple);
}

.storyItem:nth-child(5n + 3) .storyAvatarWrapper {
  background: var(--brand-pink);
}

.storyItem:nth-child(5n + 4) .storyAvatarWrapper {
  background: var(--brand-green);
}

.storyItem:nth-child(5n + 5) .storyAvatarWrapper {
  background: var(--brand-yellow);
} */

/* Post Skeletons */
._postContainer_64x3f_108 {
	display: flex;
	flex-direction: column;
	gap: var(--space-400);
	min-height: 448px;
	height: 448px;
	min-width: 630px;
	max-width: 630px;
	width: 630px;
	padding: var(--space-600);
	padding-top: 0;
	padding-bottom: 0;
}

._postHeader_64x3f_122 {
	display: flex;
	align-items: center;
	gap: var(--space-400);
}

._postAvatar_64x3f_128 {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

._postInfo_64x3f_135 {
	display: flex;
	flex-direction: column;
	gap: var(--space-100);
}

._postName_64x3f_141 {
	width: 120px;
	height: 16px;
}

._postUsername_64x3f_147 {
	width: 80px;
	height: 12px;
}

._postContent_64x3f_153 {
	width: 60%;
	height: 16px;
	margin: var(--space-200) 0;
}

._postSongCard_64x3f_160 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-200);
	padding: var(--space-400);
	min-height: 280px;
	height: 280px;
	width: 100%;
	background: var(--bg-depth-2);
	border-radius: var(--radius-700);
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}

._postAlbumArt_64x3f_177 {
	width: 188px;
	height: 188px;
	border-radius: var(--radius-100);
}

._postSongInfo_64x3f_184 {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: var(--space-200);
	gap: var(--space-100);
}

._postSongTitle_64x3f_192 {
	width: 140px;
	height: 16px;
}

._postArtistName_64x3f_198 {
	width: 100px;
	height: 12px;
}

._postActions_64x3f_204 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-200) 0;
	height: 32px;
}

._postActionLeft_64x3f_212 {
	width: 80px;
	height: 24px;
	border-radius: var(--radius-full);
}

._postActionRight_64x3f_219 {
	width: 80px;
	height: 24px;
	border-radius: var(--radius-full);
}

/* Song Post Skeleton */
._songPostAlbumArt_64x3f_227 {
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--radius-200);
	max-height: 188px;
}

._songPostDetails_64x3f_235 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-400) var(--space-200);
}

._songPostInfo_64x3f_242 {
	display: flex;
	flex-direction: column;
	gap: var(--space-200);
}

._songPostTitle_64x3f_248 {
	width: 180px;
	height: 16px;
}

._songPostArtist_64x3f_254 {
	width: 120px;
	height: 12px;
}

._songPostPlayButton_64x3f_260 {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

._date_64x3f_267 {
	width: 80px;
	height: 12px;
	padding: var(--space-200);
	padding-top: 0;
	padding-bottom: 0;
}
._sectionHeader_1n119_1 {
	margin-bottom: 16px;
	margin-top: 34px;
}

._sectionHeader_1n119_1 h2 {
	margin: 0;
	margin-bottom: 8px;
	font-size: var(--xl);
}

._context_1n119_12 {
	font-size: 13px;
	margin: 0 0 12px 0;
	opacity: 0.9;
	font-weight: 400;
	line-height: 1.3;
}

._contextMessage_1n119_20 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	font-size: var(--s);
	color: var(--text-tertiary);
	line-height: 1.4;
}

._contextMessage_1n119_20 svg path {
	color: var(--text-primary);
}

._contextIcon_1n119_34 {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	opacity: 0.7;
}

._artistName_1n119_41 {
	font-weight: 600;
}

._artistLink_1n119_45 {
	color: var(--text-primary);
	font-weight: 600 !important;
	text-decoration: none;
	opacity: 0.9;
	transition: opacity 0.2s ease;
	display: flex;
	align-items: center;
	gap: 5px;
}

._artistLink_1n119_45:hover {
	opacity: 1;
	text-decoration: underline;
}

._artistImage_1n119_61 {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	border: 1px solid var(--overlay-400);
}

._artistName_1n119_41 {
	display: inline;
	line-height: 1.4;
}

._musicNote_1n119_77 {
	width: 13px;
	height: 13px;
	position: relative;
	top: -1px;
	opacity: 0.7;
}
._flowSongContainer_sw4mb_1 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;

	margin-top: 15px;
	container-type: inline-size;
}

._flowSongContainer_sw4mb_1 > div[class*='cardItem'] {
	min-width: 100px;
}

@container (max-width: 568px) {
	._flowSongContainer_sw4mb_1 {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	._flowSongContainer_sw4mb_1 > div[class*='cardItem'] {
		width: 100%;
		max-width: 100%;
	}
}
._cardItem_1ulff_1 {
	height: 300px;
	background-size: cover;
	background-position: center;
	border-radius: var(--radius-400);
	box-shadow: var(--shadow-md);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	overflow: hidden;
	font-family: var(--primary-font);
	position: relative;
	padding: 0;
	border: none;
	background-color: transparent;

	p {
		max-width: 100%;
	}
}

._albumArtOverlayContainer_1ulff_23 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.12s ease-in-out;
	pointer-events: none;
}

._playIcon_1ulff_39 {
	align-items: center;
	justify-content: center;
	margin-top: -50px;
	cursor: pointer;
	z-index: 1;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.3);
	padding: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.9;
	color: var(--text-secondary);
	transform: scale(0.9);
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

._cardItem_1ulff_1:hover ._playIcon_1ulff_39 {
	transform: scale(1);
	border: 2px solid rgba(255, 255, 255, 0.5);
}

._cardItem_1ulff_1:active ._playIcon_1ulff_39 {
	transform: scale(0.9);
}

._playIcon_1ulff_39 img {
	filter: brightness(0) invert(1);
}

._openMenuIcon_1ulff_72 {
	position: absolute;
	top: 10px;
	right: 10px;
}

._cardItem_1ulff_1:hover ._albumArtOverlayContainer_1ulff_23 {
	opacity: 1;
	pointer-events: auto;
}

._overlay_1ulff_83 {
	overflow: hidden;
	width: 100%;
	height: 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 10px;
	box-sizing: border-box;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-bottom-left-radius: var(--radius-400);
	border-bottom-right-radius: var(--radius-400);
}

._textInfo_1ulff_100 {
	max-width: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

._songName_1ulff_109 {
	font-weight: 600;
	font-size: var(--l);
	color: var(--text-default);
	text-align: center;
	margin: 0;
	white-space: normal;
	word-break: break-word;
}

._artistName_1ulff_119 {
	font-weight: 400;
	line-height: 1.2857;
	color: var(--text-secondary);
	text-align: center;
	margin: 0;
}

@container (max-width: 568px) {
	._cardItem_1ulff_1 {
		width: 100%;
		max-width: 100%;
		height: 100px;
		flex-basis: auto;
	}

	._overlay_1ulff_83 {
		border-top-left-radius: var(--radius-400);
		border-top-right-radius: var(--radius-400);
		opacity: 0.9;
	}
	._playIcon_1ulff_39 {
		margin-top: 0px;
	}
}

/* Touch device fixes for iOS */
@media (hover: none) and (pointer: coarse) {
	._cardItem_1ulff_1:hover ._albumArtOverlayContainer_1ulff_23 {
		opacity: 0;
	}

	/* Always show play button on touch devices */
	._albumArtOverlayContainer_1ulff_23 {
		opacity: 1 !important;
		pointer-events: auto !important;
	}
}
._container_wd8g8_1 {
	position: relative;
	width: 100%;
	height: 240px;
	/* background-color: var(--overlay-100); */
	border-radius: var(--radius-500);
	/* border: 1px solid var(--overlay-200); */
	box-sizing: border-box;
	font-family: var(--primary-font);
	margin-top: 0px;
	overflow: hidden;
}

._ellipse_wd8g8_14 {
	position: absolute;
	border-radius: 50%;
	filter: blur(50px);
	z-index: 0;
}

._ellipse1_wd8g8_21 {
	width: 200px;
	height: 200px;
	background-color: var(--overlay-300);
	opacity: 0.18;
	top: -60px;
	left: -40px;
}

._ellipse2_wd8g8_30 {
	width: 280px;
	height: 280px;
	background-color: var(--overlay-300);
	opacity: 0.18;
	top: 30px;
	right: -100px;
}

._ellipse3_wd8g8_39 {
	width: 180px;
	height: 180px;
	background-color: var(--overlay-300);
	opacity: 0.5;
	bottom: -50px;
	left: 25%;
}

._scrollControlsWrapper_wd8g8_48 {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 20px 0;
	padding-top: 0px;
}

._gridScroll_wd8g8_58 {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	gap: var(--space-400);
	overflow-x: auto;
	/* padding-left: 25px; */
	padding-right: 30px;
	scrollbar-width: none;
	height: 100%;
	align-items: center;
}

._gridScroll_wd8g8_58::-webkit-scrollbar {
	display: none;
}

._scrollButton_wd8g8_76 {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	background: var(--overlay-300);
	border: 1px solid var(--overlay-200);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

._scrollButton_wd8g8_76:hover {
	background: var(--surface-800);
	border: 1px solid var(--overlay-300);
	transform: translateY(-50%) scale(1.05);
}

._scrollButton_wd8g8_76:active {
	transform: translateY(-50%) scale(0.95);
}

._scrollButtonLeft_wd8g8_105 {
	left: 8px;
}

._scrollButtonRight_wd8g8_109 {
	right: 8px;
}

._scrollButton_wd8g8_76 svg {
	width: 24px;
	height: 24px;
	opacity: 0.9;
}

._trackCard_wd8g8_119 {
	background-color: var(--overlay-100);
	border: 1px solid var(--border-300);
	border-radius: var(--radius-400);
	width: 180px;
	padding: 12px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
	min-height: 200px;
	cursor: pointer;
}

._trackCard_wd8g8_119:hover {
	background-color: var(--hover-bg, var(--surface-400));
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

._trackCard_wd8g8_119 > * {
	position: relative;
	z-index: 2;
}

._backgroundImageOverlay_wd8g8_149 {
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	background-size: cover;
	background-position: center;
	opacity: 0.3;
	filter: blur(9.7px);
	z-index: 1;
}

._albumArtwork_wd8g8_162 {
	width: 140px;
	height: 140px;
	background-color: var(--surface-400);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid var(--border-300);
	border-radius: var(--radius-300);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

._albumImage_wd8g8_179 {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

._albumArtOverlay_wd8g8_185 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	border-radius: var(--radius-300);
	pointer-events: none;
}

._trackCard_wd8g8_119:hover ._albumArtOverlay_wd8g8_185 {
	opacity: 1;
	pointer-events: auto;
}

._playIcon_wd8g8_206 {
	width: 42px;
	height: 42px;
	padding: 10px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	filter: brightness(0) invert(1);
	transform: scale(0.9);
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	cursor: pointer;
}

._trackCard_wd8g8_119:hover ._playIcon_wd8g8_206 {
	transform: scale(1);
}

._trackCard_wd8g8_119:active ._playIcon_wd8g8_206 {
	transform: scale(0.9);
}

._artworkPlaceholder_wd8g8_226 {
	width: 50%;
	height: 50%;
	background-color: var(--surface-500);
	border-radius: var(--radius-200);
}

._trackInfo_wd8g8_233 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	text-align: center;
}

._trackTitle_wd8g8_242 {
	font-size: 13px;
	font-weight: var(--semibold);
	color: var(--text-100);
	line-height: 1.2em;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
	margin: 0;
}

._artistRow_wd8g8_255 {
	font-size: 12px;
	color: var(--text-50);
	line-height: 1.2em;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

._artistLink_wd8g8_265 {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

._artistLink_wd8g8_265:hover {
	color: var(--text-100);
	text-decoration: underline;
}

._trackMetadata_wd8g8_276 {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 3;
}

._trackNumber_wd8g8_286 {
	font-size: 11px;
	font-weight: var(--bold);
	color: var(--text-50);
	background: var(--overlay-200);
	padding: 2px 6px;
	border-radius: var(--radius-200);
}

._historyIcon_wd8g8_295 {
	color: var(--text-50);
	opacity: 0.9;
}

._lastPlayed_wd8g8_300 {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	font-weight: var(--medium);
	color: var(--text-50);
	background: var(--surface-900);
	padding: 4px 6px;
	border-radius: var(--radius-200);
}

._historyIcon_wd8g8_295 {
	width: 12px;
	height: 12px;
	opacity: 0.7;
}

/* Skeleton loading styles */
._skeleton_wd8g8_319 {
	background-color: var(--surface-300);
	animation: _pulse_wd8g8_1 1.5s ease-in-out infinite;
}

._skeletonText_wd8g8_324 {
	height: 12px;
	background-color: var(--surface-500);
	border-radius: var(--radius-200);
	margin: 4px 0;
}

@keyframes _pulse_wd8g8_1 {
	0%,
	100% {
		opacity: 0.5;
	}
	50% {
		opacity: 0.8;
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
	._container_wd8g8_1 {
		height: 240px;
	}

	._scrollButton_wd8g8_76 {
		width: 40px;
		height: 40px;
	}

	._scrollButton_wd8g8_76 svg {
		width: 20px;
		height: 20px;
	}

	._scrollButtonLeft_wd8g8_105 {
		left: 4px;
	}

	._scrollButtonRight_wd8g8_109 {
		right: 4px;
	}

	._trackCard_wd8g8_119 {
		width: 150px;
		min-height: 180px;
		padding: 10px;
	}

	._albumArtwork_wd8g8_162 {
		width: 120px;
		height: 120px;
	}

	._trackTitle_wd8g8_242 {
		font-size: 12px;
	}

	._artistRow_wd8g8_255 {
		font-size: 11px;
	}
}

/* Touch device fixes for iOS */
@media (hover: none) and (pointer: coarse) {
	._trackCard_wd8g8_119:hover {
		background-color: var(--overlay-100);
		transform: none;
		box-shadow: none;
	}

	/* Always show play button on touch devices */
	._albumArtOverlay_wd8g8_185 {
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	._trackCard_wd8g8_119:hover ._albumArtOverlay_wd8g8_185 {
		opacity: 1;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	._trackCard_wd8g8_119 {
		border: 2px solid var(--overlay-400);
	}

	._playIcon_wd8g8_206 {
		border: 2px solid currentColor;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	._trackCard_wd8g8_119,
	._playIcon_wd8g8_206,
	._scrollButton_wd8g8_76 {
		transition: none;
	}

	@keyframes _pulse_wd8g8_1 {
		0%,
		100% {
			opacity: 1;
		}
	}
}
._topAlbumsContainer_1ica8_1 {
	background-color: var(--overlay-100);
	border-radius: 12px;
	padding: 15px;
	margin: 15px 0 0 0;
	border: 1px solid var(--overlay-100);
}

._title_1ica8_9 {
	font-family: 'Saans', sans-serif;
	font-weight: 600;
	font-size: var(--l);
	color: var(--text-default);
	margin-bottom: 18px;
	padding-left: 12px;
}

._listContainer_1ica8_18 {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

._track_1ica8_24 {
	background-color: var(--overlay-100) !important;
}
._trendingTracksContainer_1fata_1 {
	background-color: var(--overlay-100);
	border-radius: 12px;
	padding: 15px;
	margin: 15px 0 0 0;
	border: 1px solid var(--overlay-100);
}

._title_1fata_9 {
	font-family: 'Saans', sans-serif;
	font-weight: 600;
	font-size: var(--l);
	color: var(--text-default);
	margin-bottom: 18px;
	padding-left: 12px;
}

._listContainer_1fata_18 {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

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

._trendIndicator_1fata_31 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

._track_1fata_24 {
	background-color: var(--overlay-100) !important;
	flex: 1;
}
._genreSelectionContainer_zeuqx_1 {
	position: relative;
	width: 100%;
	height: 280px;
	background-color: var(--overlay-100);
	border-radius: var(--radius-500);
	border: 1px solid var(--overlay-200);
	box-sizing: border-box;
	font-family: var(--primary-font);
	margin-top: 30px;
	overflow: hidden;
}

._ellipse_zeuqx_14 {
	position: absolute;
	border-radius: 50%;
	filter: blur(50px);
	z-index: 0;
}

._ellipse1_zeuqx_21 {
	width: 200px;
	height: 200px;
	background-color: var(--overlay-300);
	opacity: 0.18;
	top: -60px;
	left: -40px;
}

._ellipse2_zeuqx_30 {
	width: 280px;
	height: 280px;
	background-color: var(--overlay-300);
	opacity: 0.18;
	top: 30px;
	right: -100px;
}

._ellipse3_zeuqx_39 {
	width: 180px;
	height: 180px;
	background-color: var(--overlay-300);
	opacity: 0.5;
	bottom: -50px;
	left: 25%;
}

._decorativeEllipse1_zeuqx_48,
._decorativeEllipse2_zeuqx_49 {
	position: absolute;
	border-radius: 50%;
	filter: blur(190px);
	width: 308px;
	height: 284px;
	z-index: 0;
}

._decorativeEllipse1_zeuqx_48 {
	background-color: var(--blue-300);
	top: -217px;
	left: -49px;
}

._decorativeEllipse2_zeuqx_49 {
	background-color: var(--purple-300);
	top: 223px;
	left: 671px;
}

._headerContent_zeuqx_70 {
	position: relative;
	z-index: 1;
	margin: 25px 0px 16px 25px;
}

._title_zeuqx_76 {
	font-size: var(--xl);
	font-weight: var(--bold);
	color: var(--text-100);
	line-height: 0.875em;
	margin: 0 0 6px 0;
}

._subtitle_zeuqx_84 {
	font-size: var(--m);
	font-weight: var(--regular);
	color: var(--text-50);
	line-height: 1.4em;
	margin: 10px 0 0 0;
	max-width: 400px;
}

._gridScroll_zeuqx_93 {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	gap: var(--space-400);
	overflow-x: auto;
	padding-left: 25px;
	padding-right: 30px;

	scrollbar-width: none;
}

._gridScroll_zeuqx_93::-webkit-scrollbar {
	display: none;
}

._scrollControlsWrapper_zeuqx_110 {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
}

._scrollButton_zeuqx_117 {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	background: var(--overlay-300);
	border: 1px solid var(--overlay-200);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

._scrollButton_zeuqx_117:hover {
	background: var(--surface-800);
	border: 1px solid var(--overlay-300);
	transform: translateY(-50%) scale(1.05);
}

._scrollButton_zeuqx_117:active {
	transform: translateY(-50%) scale(0.95);
}

._scrollButtonLeft_zeuqx_146 {
	left: 8px;
}

._scrollButtonRight_zeuqx_150 {
	right: 8px;
}

._scrollButton_zeuqx_117 svg {
	width: 24px;
	height: 24px;
	opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	._scrollButton_zeuqx_117 {
		width: 40px;
		height: 40px;
	}

	._scrollButton_zeuqx_117 svg {
		width: 20px;
		height: 20px;
	}

	._scrollButtonLeft_zeuqx_146 {
		left: 4px;
	}

	._scrollButtonRight_zeuqx_150 {
		right: 4px;
	}
}

._genreItem_zeuqx_181 {
	background-color: var(--surface-200);
	border: 1px solid var(--border-300);
	border-radius: var(--radius-400);
	width: 140px;
	padding: 11px 12px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	transition: background-color 0.3s ease;
	min-height: 110px;
	cursor: pointer;
}

._genreItem_zeuqx_181:hover {
	background-color: var(--hover-bg, var(--surface-400));
}

._genreItem_zeuqx_181 > * {
	position: relative;
	z-index: 2;
}

._backgroundImageOverlay_zeuqx_209 {
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	background-size: cover;
	background-position: center;
	opacity: 0.3;
	filter: blur(3.7px);
	z-index: 1;
}

._albumArtwork_zeuqx_222 {
	width: 115px;
	height: 115px;
	background-color: var(--surface-400);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid var(--border-300);
	border-radius: var(--radius-300);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

._albumArtOverlay_zeuqx_238 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	border-radius: 5px;
	pointer-events: none;
}

._genreItem_zeuqx_181:hover ._albumArtOverlay_zeuqx_238 {
	opacity: 1;
	pointer-events: auto;
}

._playIcon_zeuqx_259 {
	width: 42px;
	height: 42px;
	padding: 10px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	filter: brightness(0) invert(1);
	transform: scale(0.9);
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

._genreItem_zeuqx_181:hover ._playIcon_zeuqx_259 {
	transform: scale(1);
}

._genreItem_zeuqx_181:active ._playIcon_zeuqx_259 {
	transform: scale(0.9);
}

._artworkPlaceholder_zeuqx_278 {
	width: 50%;
	height: 50%;
	background-color: var(--surface-500);
	border-radius: var(--radius-200);
}

._artworkLoading_zeuqx_285 {
	border: 4px solid var(--surface-300);
	border-top: 4px solid var(--brand-blue);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: _spin_zeuqx_1 1s linear infinite;
}

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

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

._artworkError_zeuqx_304 {
	font-size: var(--xs);
	color: var(--brand-red);
}

._genreName_zeuqx_309 {
	font-size: 13px;
	font-weight: var(--semibold);
	color: var(--text-100);
	line-height: 1em;
	text-align: center;
	width: 100%;
	height: 14px;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
	overflow: hidden;
}

._logoPlaceholder_zeuqx_323 {
	position: absolute;
	z-index: 1;
	top: 32.44px;
	right: 32.75px;
	width: 63.25px;
	height: 24.21px;
	color: var(--text-100);
	font-size: var(--s);
	display: flex;
	align-items: center;
	justify-content: center;
}

._ownerAvatar_zeuqx_337 {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--border-300);
	box-sizing: border-box;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 2px;
	right: 0px;
}

/* Touch device fixes for iOS */
@media (hover: none) and (pointer: coarse) {
	._genreItem_zeuqx_181:hover {
		background-color: var(--surface-300);
	}

	/* Always show play button on touch devices */
	._albumArtOverlay_zeuqx_238 {
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	._genreItem_zeuqx_181:hover ._albumArtOverlay_zeuqx_238 {
		opacity: 1;
	}
}
._topAlbumsContainer_15e9g_1 {
	background-color: var(--overlay-100);
	border-radius: 12px;
	padding: 15px;
	margin: 30px 0 0 0;
	border: 1px solid var(--overlay-100);
}

._title_15e9g_9 {
	font-family: 'Saans', sans-serif;
	font-weight: 600;
	font-size: var(--l);
	color: var(--text-default);
	margin-bottom: 18px;
	padding-left: 12px;
}

._listContainer_15e9g_18 {
	display: flex;
	flex-direction: column;
}
._topAlbumItem_h39b3_1 {
	display: flex;
	align-items: center;
	padding: 10px;
	background-color: var(--overlay-100);
	border-radius: 12px;
	margin-bottom: 10px;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	height: 70px;
}

._topAlbumItem_h39b3_1:hover {
	text-decoration: none;
	background-color: var(--overlay-200);
	transition: background-color 0.3s ease-in-out;
}

._rank_h39b3_20 {
	font-family: 'Saans', sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.3);
	width: 24px;
	text-align: center;
}

._albumArt_h39b3_29 {
	width: 54px;
	height: 54px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	object-fit: cover;
}

._albumInfo_h39b3_37 {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

._title_h39b3_44 {
	font-family: 'Saans', sans-serif;
	font-weight: 600;
	font-size: var(--m);
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 5px;
}

._artist_h39b3_52 {
	font-family: 'Saans', sans-serif;
	font-weight: 400;
	font-size: var(--s);
	color: rgba(255, 255, 255, 0.5);
}

._playButton_h39b3_59 {
	background-color: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;

	img {
		width: 100%;
		height: 100%;
	}
}

._playButton_h39b3_59:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

._spacer_h39b3_85 {
	flex-grow: 1;
}
@container (max-width: 400px) {
	._playButton_h39b3_59 {
		display: none;
	}
}
._bottomPadding_1bxgr_1 {
	height: 100px;
}

._feedContainer_1bxgr_5 {
	min-height: 300vh; /* Make the page appear 3x viewport height from the start */
	width: 100%;
}

._loadingContainer_1bxgr_10 {
	animation: _fadeInSmooth_1bxgr_1 0.3s ease-out;
}

@keyframes _fadeInSmooth_1bxgr_1 {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Export the class for use in the component */
._homeFeedPage_1bxgr_26 {
	/* This class is used to identify the home feed page */
}

/* Mobile-specific: Homepage scroll behavior */
@media (max-width: 768px) {
	/* Add initial padding at the top of homepage content */
	._feedContainer_1bxgr_5 {
		padding-top: var(--space-400);
	}
}
._emptyContainer_ctugm_1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-bottom: var(--space-800);
	color: var(--text-secondary);
	border-radius: var(--radius-300);
	background-color: var(--overlay-100);
	margin-top: 30px;
	min-height: 200px;
}

._emptyHeadline_ctugm_15 h2 {
	font-size: var(--xl);
	font-weight: var(--semibold);
	color: var(--text-primary);
	margin-bottom: var(--space-100);
}

._emptyMessage_ctugm_22 {
	font-size: var(--base);
	color: var(--text-secondary);
	max-width: 400px;
	word-break: break-word;
	white-space: normal;
}
/* Container for the entire header */
._container_1g318_2 {
	display: flex;
	justify-content: center;
	margin: var(--space-800) 0 var(--space-600) 0;
	padding: 0 var(--space-800);
}

/* Main navigation wrapper with background */
._root_1g318_10 {
	display: flex;
	align-items: center;
	gap: var(--space-50);
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-full);
	padding: var(--space-100);
	position: relative;
	overflow: hidden;
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.1),
		inset 0 1px 1px rgba(255, 255, 255, 0.05);

	/* CSS custom properties for glider positioning */
	--glider-left: 0px;
	--glider-width: 0px;
	--glider-opacity: 0;
	--glider-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Individual tab styling */
._tab_1g318_34 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-200) var(--space-600);
	border-radius: var(--radius-full);
	text-decoration: none !important;
	position: relative;
	z-index: 2;
	transition: transform 0.2s ease-out;
	min-height: 34px;
	cursor: pointer;
	-webkit-user-drag: none;
	user-drag: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Ensure no underline on hover */
._tab_1g318_34:hover {
	text-decoration: none !important;
}

/* Tab label text */
._label_1g318_59 {
	font-size: var(--s);
	font-weight: var(--medium);
	color: rgba(255, 255, 255, 0.55);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	white-space: nowrap;
	user-select: none;
	letter-spacing: -0.01em;
}

/* Hover state for tabs */
._tab_1g318_34:hover ._label_1g318_59 {
	color: rgba(255, 255, 255, 0.8);
}

/* Active tab text */
._tab_1g318_34._active_1g318_75 ._label_1g318_59 {
	color: rgba(255, 255, 255, 0.95);
	font-weight: var(--semibold);
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* The animated glider/pill background */
._glider_1g318_82 {
	position: absolute;
	top: var(--space-100);
	bottom: var(--space-100);
	left: var(--glider-left);
	width: var(--glider-width);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.12) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 0.5px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-full);
	transition: var(--glider-transition);
	z-index: 1;
	opacity: var(--glider-opacity);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* Subtle inner glow for depth */
._glider_1g318_82::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-full);
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

/* Active tab micro-interaction feedback */
._tab_1g318_34:active {
	transform: scale(0.96);
}

/* Focus styles for accessibility */
._tab_1g318_34:focus-visible {
	outline: 2px solid var(--brand-purple);
	outline-offset: 2px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
	._container_1g318_2 {
		padding: 0 var(--space-400);
		margin: var(--space-600) 0 var(--space-400) 0;
	}

	._root_1g318_10 {
		gap: 0;
	}

	._tab_1g318_34 {
		padding: var(--space-200) var(--space-500);
		min-height: 30px;
	}

	._label_1g318_59 {
		font-size: var(--xs);
	}
}
._root_1lm24_1 {
	min-width: 80px;
	height: 40px;
	border-radius: var(--radius-full);
	background-color: white;
	color: black;
	border: 1px solid transparent;
	cursor: pointer;
	font-weight: var(--medium);
	font-size: 12px;
	padding: 0 var(--space-600);
	transition: all 0.2s ease;
}

._root_1lm24_1:hover {
	background-color: #f0f0f0;
}

._root_1lm24_1:active {
	background-color: #e0e0e0;
}

._root_1lm24_1._saved_1lm24_23 {
	background-color: var(--overlay-200);
	color: var(--text-primary);
	border: 1px solid rgba(255, 255, 255, 0);
}

._root_1lm24_1._saved_1lm24_23:hover {
	transition-delay: 0.15s;
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.4);
}

._root_1lm24_1._saved_1lm24_23:active {
	transition-delay: 0s;
	background-color: rgba(255, 255, 255, 0.15);
}
._albumGridContainer_1u4nf_1 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
	gap: var(--space-600);
	width: 100%;
	container-type: inline-size;
}

@container (min-width: 773px) and (max-width: 973px) {
	._albumGridContainer_1u4nf_1 > *:nth-child(5) {
		display: none;
	}
}
@container (min-width: 576px) and (max-width: 774px) {
	._albumGridContainer_1u4nf_1 > *:nth-child(4),
	._albumGridContainer_1u4nf_1 > *:nth-child(5) {
		display: none;
	}
}
@container (min-width: 414px) and (max-width: 575px) {
	._albumGridContainer_1u4nf_1 > *:nth-child(5) {
		display: none;
	}
	._albumGridContainer_1u4nf_1 > *:nth-child(4) {
		display: block;
	}
}
@container (max-width: 413px) {
	._albumGridContainer_1u4nf_1 > *:nth-child(5) {
		display: none;
	}
}
/* Base Skeleton Animation */
@keyframes _shimmer_nvg2z_1 {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

._skeleton_nvg2z_11 {
	background: linear-gradient(90deg, var(--bg-depth-2) 0%, var(--white-200) 50%, var(--bg-depth-2) 100%);
	background-size: 1000px 100%;
	animation: _shimmer_nvg2z_1 2s linear infinite;
	border-radius: var(--radius-300);
}

/* Staggered Animation */
._staggered_nvg2z_19 {
	opacity: 0;
	transform: translateY(20px);
	animation: _slideInUp_nvg2z_1 0.6s ease-out forwards;
}

@keyframes _slideInUp_nvg2z_1 {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

._staggered_nvg2z_19:nth-child(1) {
	animation-delay: 0ms;
}
._staggered_nvg2z_19:nth-child(2) {
	animation-delay: 100ms;
}
._staggered_nvg2z_19:nth-child(3) {
	animation-delay: 200ms;
}
._staggered_nvg2z_19:nth-child(4) {
	animation-delay: 300ms;
}
._staggered_nvg2z_19:nth-child(5) {
	animation-delay: 400ms;
}
._staggered_nvg2z_19:nth-child(6) {
	animation-delay: 500ms;
}
._staggered_nvg2z_19:nth-child(7) {
	animation-delay: 600ms;
}
._staggered_nvg2z_19:nth-child(8) {
	animation-delay: 700ms;
}

/* Transition System */
._transitionWrapper_nvg2z_58 {
	position: relative;
}

._skeletonLayer_nvg2z_62 {
	transition: opacity 0.3s ease-out;
}

._contentLayer_nvg2z_66 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: opacity 0.3s ease-in;
}

._visible_nvg2z_75 {
	opacity: 1;
}

._hidden_nvg2z_79 {
	opacity: 0;
}

/* Grid Item Skeleton Specific */
._gridItemSkeleton_nvg2z_84 {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-600);
	border-radius: var(--radius-300);
	background-color: var(--overlay-100);
	border: 1px solid var(--border-100);
	min-height: 220px;
}

._gridImageSkeleton_nvg2z_95 {
	width: 120px;
	height: 120px;
	margin-bottom: var(--space-400);
	flex-shrink: 0;
}

._gridImageCircle_nvg2z_102 {
	border-radius: 50%;
}

._gridImageSquare_nvg2z_106 {
	border-radius: var(--radius-300);
}

._gridTextContainer_nvg2z_110 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-200);
	width: 100%;
}

._gridTitle_nvg2z_118 {
	width: 80%;
	height: 16px;
	max-width: 120px;
}

._gridSubtitle_nvg2z_124 {
	width: 60%;
	height: 14px;
	max-width: 90px;
}

._gridActionButton_nvg2z_130 {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-top: var(--space-200);
}

/* Section Title Skeleton */
._sectionTitleSkeleton_nvg2z_138 {
	width: 120px;
	height: 24px;
	margin-bottom: var(--space-500);
}

/* Liked List Skeleton */
._likedListSkeleton_nvg2z_145 {
	display: flex;
	flex-direction: column;
	gap: var(--space-300);
}

._likedTrackSkeleton_nvg2z_151 {
	display: flex;
	align-items: center;
	gap: var(--space-400);
	padding: var(--space-300);
	border-radius: var(--radius-300);
	background-color: var(--overlay-100);
	min-height: 64px;
}

._trackImageSkeleton_nvg2z_161 {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-200);
	flex-shrink: 0;
}

._trackInfoSkeleton_nvg2z_168 {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-200);
}

._trackTitleSkeleton_nvg2z_175 {
	width: 180px;
	height: 16px;
}

._trackArtistSkeleton_nvg2z_180 {
	width: 120px;
	height: 14px;
}

._trackDurationSkeleton_nvg2z_185 {
	width: 40px;
	height: 14px;
	flex-shrink: 0;
}

/* Grid Container Skeletons */
._gridContainer_nvg2z_192 {
	display: grid;
	gap: var(--space-600);
	width: 100%;
}

._artistGridSkeleton_nvg2z_198 {
	grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
}

._albumGridSkeleton_nvg2z_202 {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

._playlistGridSkeleton_nvg2z_206 {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Responsive Adjustments */
@container (min-width: 569px) and (max-width: 867px) {
	._gridContainer_nvg2z_192 > ._staggered_nvg2z_19:nth-child(4) {
		display: none;
	}
}

/* Error States */
._errorSkeleton_nvg2z_218 {
	background: var(--bg-depth-1);
	color: var(--text-tertiary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--xs);
	text-align: center;
	padding: var(--space-400);
}
._artistGridContainer_1b5pw_1 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
	gap: var(--space-600);
	width: 100%;
	container-type: inline-size;
}

._gridError_1b5pw_9,
._gridEmpty_1b5pw_10 {
	width: 100%;
	padding: var(--space-600);
	text-align: center;
	color: var(--text-secondary);
	border-radius: var(--radius-300);
	background-color: var(--bg-depth-1);
	min-height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@container (min-width: 773px) and (max-width: 973px) {
	._artistGridContainer_1b5pw_1 > *:nth-child(5) {
		display: none;
	}
}
@container (min-width: 576px) and (max-width: 774px) {
	._artistGridContainer_1b5pw_1 > *:nth-child(4),
	._artistGridContainer_1b5pw_1 > *:nth-child(5) {
		display: none;
	}
}
@container (min-width: 414px) and (max-width: 575px) {
	._artistGridContainer_1b5pw_1 > *:nth-child(5) {
		display: none;
	}
	._artistGridContainer_1b5pw_1 > *:nth-child(4) {
		display: block;
	}
}
@container (max-width: 413px) {
	._artistGridContainer_1b5pw_1 > *:nth-child(5) {
		display: none;
	}
}

._artistLink_1b5pw_48 {
	text-decoration: none;
	display: block;
}

a._artistLink_1b5pw_48:hover {
	text-decoration: none;
}

._gridItemBase_1b5pw_57 {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-300);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

._gridItemSkeleton_1b5pw_66 {
	background: linear-gradient(90deg, var(--bg-depth-2) 0%, var(--white-200) 50%, var(--bg-depth-2) 100%);
	background-size: 1000px 100%;
	animation: _shimmer_1b5pw_1 2s linear infinite;
}

._gridItemError_1b5pw_72 {
	background-color: var(--bg-depth-1);
	color: var(--text-tertiary);
	font-size: var(--xs);
	text-align: center;
	padding: var(--space-200);
}

@keyframes _shimmer_1b5pw_1 {
	0% {
		background-position: -900px 0;
	}
	100% {
		background-position: 900px 0;
	}
}
._pageContent_hmcjv_1 {
	display: flex;
	flex-direction: column;
	gap: var(--space-400);
	width: 100%;
	margin-bottom: 150px;
}

._librarySection_hmcjv_9:last-child {
	margin-bottom: var(--space-800);
}
._container_o2jyl_1 {
	padding: var(--space-600);
	display: flex;
	flex-direction: column;
	gap: var(--space-800);
}

._section_o2jyl_8 {
	display: flex;
	flex-direction: column;
	gap: var(--space-400);
}

._sectionTitle_o2jyl_14 {
	height: 24px;
	width: 150px;
	border-radius: var(--radius-100);
}

._trackList_o2jyl_20 {
	display: flex;
	flex-direction: column;
	gap: var(--space-300);
}

._trackItem_o2jyl_26 {
	height: 56px;
	width: 100%;
	border-radius: var(--radius-200);
}

._grid_o2jyl_32 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-600);
}

._gridItem_o2jyl_38 {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-300);
}
._likedList_1efxu_1 {
	padding-top: 10px;
}
._playlistGridContainer_t9pm6_1 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-600);
	width: 100%;
	container-type: inline-size;
}

@container (max-width: 419px) {
	._playlistGridContainer_t9pm6_1 {
		grid-template-columns: 1fr;
	}
}

._playlistLink_t9pm6_15 {
	display: block;
	width: 100%;
	text-decoration: none;
	overflow: hidden;
}

a._playlistLink_t9pm6_15:hover {
	text-decoration: none;
}
/* Main Modal Container */
._modal_a5k18_2 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	animation: _fadeIn_a5k18_1 0.2s ease-out;
}

._modalContent_a5k18_17 {
	background-color: var(--gray-1000);
	border: 1px solid var(--border-300);
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	width: 320px;
	min-height: 300px;
	max-height: 500px;
	overflow: hidden;
	position: absolute;
	animation: _slideIn_a5k18_1 0.3s ease-out;
	display: flex;
	flex-direction: column;
}

/* Playlist Info Section */
._playlistInfo_a5k18_33 {
	display: flex;
	align-items: center;
	padding: 20px;
	background-color: var(--overlay-100);
	border-bottom: 1px solid var(--border-200);
}

._playlistArtwork_a5k18_41 {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-200);
	margin-right: 16px;
	background-color: var(--bg-depth-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

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

._fallbackArtwork_a5k18_60 {
	color: var(--text-secondary);
	font-size: 20px;
	font-weight: 600;
}

._playlistDetails_a5k18_66 {
	flex: 1;
	min-width: 0;
}

._playlistName_a5k18_71 {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 4px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

._playlistPageLink_a5k18_81 {
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0;
	text-decoration: none;
}

._playlistPageLink_a5k18_81:hover {
	color: var(--text-primary);
}

/* Playlist Actions (Heart Button) */
._playlistActions_a5k18_93 {
	display: flex;
	align-items: center;
	margin-left: 12px;
}

._heartButton_a5k18_99 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: var(--ui-5);
	color: var(--ui-40);
	cursor: pointer;
	opacity: 0.8;
	transition: all 0.18s cubic-bezier(0.04, 0.91, 0.52, 1.5);
	border-radius: 0.375em;
	padding: 0;
}

._heartButton_a5k18_99:hover {
	color: var(--ui-90);
	opacity: 1;
	transform: scale3d(1.15, 1.15, 1.15);
}

._heartButton_a5k18_99:active {
	color: var(--ui-70);
	opacity: 1;
	transform: scale3d(0.95, 0.95, 0.95);
}

._heartButton_a5k18_99:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	transform: none;
}

._heartButton_a5k18_99._liked_a5k18_133 {
	opacity: 1;
}

._heartButton_a5k18_99._liked_a5k18_133:hover {
	opacity: 0.8;
	transform: scale3d(1.1, 1.1, 1.1);
}

._heartButton_a5k18_99._liked_a5k18_133:active {
	opacity: 0.65;
	transform: scale3d(0.95, 0.95, 0.95);
}

._heartIcon_a5k18_147 {
	width: 24px;
	height: 24px;
}

._heartLoading_a5k18_152 {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	animation: _spin_a5k18_1 1s linear infinite;
}

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

/* Keyboard Help */
._keyboardHelp_a5k18_171 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.95);
	backdrop-filter: blur(8px);
	padding: 20px;
	overflow-y: auto;
	z-index: 10;
}

._helpTitle_a5k18_184 {
	font-size: 18px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 16px 0;
	text-align: center;
}

._helpGrid_a5k18_192 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	max-width: 400px;
	margin: 0 auto;
}

._helpItem_a5k18_200 {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}

._helpItem_a5k18_200 kbd {
	background-color: var(--overlay-100);
	color: var(--text-primary);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
	min-width: 24px;
	text-align: center;
	border: 1px solid var(--border-200);
}

._helpItem_a5k18_200 span {
	font-size: 12px;
	color: var(--text-secondary);
	flex: 1;
}

/* Content Area - for scrollable content */
._contentArea_a5k18_226 {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	/* Hide scrollbar */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE and Edge */
}

._contentArea_a5k18_226::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

/* Action List */
._actionList_a5k18_240 {
	max-height: 60vh;
	overflow-y: auto;
}

/* Remove underlines from Link components */
._actionList_a5k18_240 a {
	text-decoration: none;
}

._actionList_a5k18_240 a:hover {
	text-decoration: none;
}

._actionButton_a5k18_254 {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 16px 20px;
	background: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
	text-align: left;
}

._actionButton_a5k18_254:hover {
	background-color: var(--bg-depth-2);
}

._actionButton_a5k18_254:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

._actionButton_a5k18_254:disabled:hover {
	background-color: transparent;
}

._actionIcon_a5k18_279 {
	width: 20px;
	height: 20px;
	margin-right: 12px;
	flex-shrink: 0;
}

._actionLabel_a5k18_286 {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
	flex: 1;
}

/* Loading States */
._loading_a5k18_294 {
	background: linear-gradient(90deg, var(--bg-depth-2) 0%, var(--bg-depth-3) 50%, var(--bg-depth-2) 100%);
	background-size: 200% 100%;
	animation: _skeleton_a5k18_1 1.5s ease-in-out infinite;
	border-radius: 4px;
}

._loadingSkeleton_a5k18_301 {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

._loadingSkeleton_a5k18_301 ._loading_a5k18_294 {
	height: 48px;
	border-radius: 8px;
}

._loadingSkeleton_a5k18_301 ._loading_a5k18_294:first-child {
	width: 70%;
}

._loadingSkeleton_a5k18_301 ._loading_a5k18_294:nth-child(2) {
	width: 85%;
}

._loadingSkeleton_a5k18_301 ._loading_a5k18_294:last-child {
	width: 60%;
}

/* Animations */
@keyframes _fadeIn_a5k18_1 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes _slideIn_a5k18_1 {
	from {
		transform: scale(0.9) translateY(-10px);
		opacity: 0;
	}
	to {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
}

@keyframes _skeleton_a5k18_1 {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* Responsive Design */
@media (max-width: 480px) {
	._modalContent_a5k18_17 {
		width: 280px;
		min-height: 250px;
	}

	._playlistInfo_a5k18_33 {
		padding: 16px;
	}

	._actionButton_a5k18_254 {
		padding: 14px 16px;
	}
}

/* Focus styles for accessibility */
._modal_a5k18_2:focus {
	outline: none;
}

._actionButton_a5k18_254:focus,
._actionButton_a5k18_254:focus-visible {
	background-color: var(--bg-depth-2);
	outline: 2px solid var(--accent-primary);
	outline-offset: -2px;
}

._actionButton_a5k18_254:focus:not(:focus-visible),
._actionButton_a5k18_254:focus:not(:focus-visible):hover {
	background-color: var(--bg-depth-2);
	outline: none;
}
._horizontalGridItem_v9vuy_1 {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: var(--space-200);
	border-radius: var(--radius-300);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	background-color: var(--overlay-100);
	border: 1px solid var(--border-100);
	gap: var(--space-600);
	transition: background 0.3s;
	width: 100%;
	box-sizing: border-box;
}

._gridItemBgOverlay_v9vuy_18 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	transition: opacity 0.3s;
	border-radius: inherit;
}

._horizontalGridItem_v9vuy_1:hover {
	background: var(--hover-bg, rgba(0, 0, 0, 0.7));
	text-decoration: none;
}

._horizontalGridItem_v9vuy_1:hover ._gridItemBgOverlay_v9vuy_18 {
	opacity: 1;
}

._imageContainer_v9vuy_41 {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	position: relative;
}

._image_v9vuy_41 {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-200);
}

._textContainer_v9vuy_56 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-100);
	flex-grow: 1;
	overflow: hidden;
	min-width: 0;
}

._title_v9vuy_66 {
	font-size: var(--font-size-200);
	font-weight: var(--semibold);
	color: var(--text-100);
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

._subtitle_v9vuy_77 {
	font-size: var(--font-size-100);
	color: var(--text-50);
	font-weight: var(--regular);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	line-height: 1.2;
}

._actionButtonContainer_v9vuy_88 {
	margin-left: var(--space-200);
	flex-shrink: 0;
}
._followedAlbums_1y0f5_1 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-600);
	width: 100%;
	margin-bottom: 100px;
}
._followedArtists_12225_1 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-600);
	width: 100%;
	margin-bottom: 100px;
}

._artistLink_12225_9,
._artistLink_12225_9:hover,
._artistLink_12225_9:visited,
._artistLink_12225_9:active {
	text-decoration: none;
	color: inherit; /* Optional: ensure link color doesn't change if not desired */
}
._likedTracks_oni2v_1 {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--space-50);
	margin-bottom: 100px;
}

._header_oni2v_9 {
	align-items: center;
	height: 230px;
	display: flex;
	gap: var(--space-1000);
	width: 100%;
	padding: var(--space-400);
	border-radius: var(--radius-300);
}

._avatar_oni2v_19 {
	border: 2px solid rgba(255, 255, 255, 0.2);
	height: 100px;
	width: 100px;
	border-radius: var(--radius-600);
	background-color: var(--bg-depth-1);
}

._headerRight_oni2v_27 {
	display: flex;
	flex-direction: column;
	gap: var(--space-400);
}
._virtualContainer_1lo7e_1 {
	/* Ensure the virtual container takes full height and handles scroll */
	height: 100%;
	overflow: auto;

	/* Smooth scrolling */
	scroll-behavior: smooth;

	/* Hardware acceleration for better performance */
	will-change: transform;

	/* Hide scrollbar for cleaner look (optional) */
	scrollbar-width: thin;
}

._virtualContainer_1lo7e_1::-webkit-scrollbar {
	width: 8px;
}

._virtualContainer_1lo7e_1::-webkit-scrollbar-track {
	background: transparent;
}

._virtualContainer_1lo7e_1::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
}

._virtualContainer_1lo7e_1::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.3);
}
._modalContainer_1wo9l_1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	backdrop-filter: blur(4px);
}

._modal_1wo9l_1 {
	background: #0a0a0a;
	padding: 32px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 34px;
	position: relative;
	width: 420px;
	max-width: 90vw;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

._modalContent_1wo9l_30 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

._title_1wo9l_37 {
	font-family: 'Saans', sans-serif;
	font-weight: 600;
	font-size: 28px;
	line-height: 1.2;
	text-align: center;
	color: #ffffff;
	margin: 0;
}

._message_1wo9l_47 {
	font-family: 'Saans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

._buttonContainer_1wo9l_57 {
	display: flex;
	gap: 12px;
	width: 100%;
	flex-direction: row;
}

._deleteButton_1wo9l_64 {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 14px 24px;
	border-radius: 8px;
	font-family: 'Saans', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.125;
	cursor: pointer;
	border: none;
	background: #dc2626;
	color: #ffffff;
	transition: all 0.2s ease;
}

._deleteButton_1wo9l_64:hover {
	background: #ef4444;
	transform: translateY(-1px);
}

._deleteButton_1wo9l_64:active {
	transform: translateY(0);
}

._deleteButton_1wo9l_64:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

._cancelButton_1wo9l_97 {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 14px 24px;
	border-radius: 8px;
	font-family: 'Saans', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.125;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	color: rgba(255, 255, 255, 0.9);
	transition: all 0.2s ease;
}

._cancelButton_1wo9l_97:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.3);
	color: #ffffff;
}

._cancelButton_1wo9l_97:active {
	background: rgba(255, 255, 255, 0.1);
}

._cancelButton_1wo9l_97:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

._closeButton_1wo9l_130 {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.5);
	font-size: 20px;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	border-radius: 4px;
	transition: all 0.2s ease;
}

._closeButton_1wo9l_130:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 480px) {
	._modal_1wo9l_1 {
		padding: 24px;
		width: 340px;
	}

	._buttonContainer_1wo9l_57 {
		flex-direction: column;
	}

	._title_1wo9l_37 {
		font-size: 20px;
	}

	._message_1wo9l_47 {
		font-size: 14px;
	}
}
._root_75w81_1 {
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

._root_75w81_1 button,
._loader_75w81_9 {
	background-color: var(--bg-depth-1);
	padding: 10px;
	height: 40px;
	width: 100px;
}
._likedTracks_jj1gr_1 {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--space-50);
	margin-top: var(--space-400);
}

._header_jj1gr_9 {
	align-items: center;
	height: 180px;
	display: flex;
	gap: var(--space-1000);
	width: 100%;
	padding: var(--space-400);
	border-radius: var(--radius-300);
}

._avatar_jj1gr_19 {
	border: 2px solid rgba(255, 255, 255, 0.2);
	height: 100px;
	width: 100px;
	border-radius: var(--radius-600);
	background-color: var(--bg-depth-1);
}

._headerRight_jj1gr_27 {
	display: flex;
	flex-direction: column;
	gap: var(--space-400);
	background-color: var(--bg-depth-1);
	flex: 1;
}

._titleInput_jj1gr_35 {
	background-color: transparent;
	border: none;
	font-size: 30px;
	font-weight: 600;
	color: var(--text-primary);
	outline: none;
	width: 100%;
	padding: 0;
	margin: 0;
	resize: none;
	text-align: left;
}

._titleInput_jj1gr_35:focus {
	outline: none;
}

._titleInput_jj1gr_35:focus-visible {
	outline: none;
}

@container (max-width: 700px) {
	._titleInput_jj1gr_35 {
		font-size: 30px;
	}
}

._descriptionInput_jj1gr_63 {
	background-color: transparent;
	border: none;
	font-size: 16px;
	font-weight: 400;
	color: var(--text-secondary);
	outline: none;
	width: 100%;
	padding: 0;
	margin: 0;
	resize: none;
	height: 50px;

	&::placeholder {
		color: white;
		opacity: 0.5;
	}
}

._actions_jj1gr_82 {
	display: flex;
	gap: var(--space-400);
	justify-content: flex-end;
}

._headerButtonBase_jj1gr_88 {
	padding: 8px 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	font-size: var(--m);
	gap: 8px;
	border-radius: var(--radius-full);
}

._headerPlayButtonAlbumStyle_jj1gr_98 {
	background-color: var(--overlay-200);
	color: var(--text-primary);
	border: none;
	padding: 10px 20px;
	font-weight: var(--semibold);
	transition: background-color 0.2s ease;
}
._headerPlayButtonAlbumStyle_jj1gr_98:hover {
	background-color: var(--overlay-300);
}

._headerOptionsIconButton_jj1gr_110 {
	padding: 8px;
	background-color: transparent;
	border: none;
}

._headerTextButton_jj1gr_116 {
	background-color: #007bff;
	color: white;
	border: none;
}

._headerTextButton_jj1gr_116:disabled {
	background-color: #aaa;
	cursor: not-allowed;
}

._playIconAlbumStyle_jj1gr_127 {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

._optionsIconInButton_jj1gr_133 {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
._playlistsContainer_1pqdb_1 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-600);
	width: 100%;
	margin-bottom: 100px;
}
/* Header */
._header_tu7m0_2 {
	padding: var(--space-400) var(--space-300);
	padding-bottom: 0;
}

._header_tu7m0_2 h2 {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
}

/* Current Track Info Section */
._currentTrackInfo_tu7m0_14 {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--space-500);
	gap: var(--space-200);
	background-color: var(--overlay-100);
	border-radius: var(--radius-300);
	min-height: 110px;
	overflow: hidden;
}

._trackContainer_tu7m0_26 {
	overflow: hidden;
	display: flex;
	gap: var(--space-600);
}

._trackThumbnail_tu7m0_32 {
	width: 85px;
	height: 85px;
	border-radius: var(--radius-200);
}

._trackDetails_tu7m0_38 {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-200);
}

._label_tu7m0_47 {
	font-size: var(--s);
	font-weight: var(--regular);
	color: var(--text-tertiary);
}

._trackDetails_tu7m0_38 h3 {
	margin: 0;
	font-size: var(--l);
	line-height: 20px;
	overflow: hidden;
}

._trackDetails_tu7m0_38 a {
	text-decoration: none;
}

._explicitAndArtistName_tu7m0_64 {
	display: flex;
	align-items: flex-start;
	gap: var(--space-200);
	flex: 1;
	max-height: 37px;
	overflow: hidden;
}

._explicitIcon_tu7m0_73 {
	width: 14px;
	height: 14px;
}

._artist_tu7m0_78 {
	color: var(--text-secondary);
	font-size: 0.8rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-100);
	overflow: hidden;
}

._artist_tu7m0_78 a {
	font-size: 0.8rem;
	color: var(--text-secondary);
}

._trackDetails_tu7m0_38 a:hover {
	text-decoration: underline;
}

._trackTitle_tu7m0_97 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Main container */
._root_8xafi_2 {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	overflow-y: auto;
	gap: var(--space-300);
	background-color: var(--overlay-00);
	/* Hide scrollbar but maintain scroll functionality */
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
._root_8xafi_2::-webkit-scrollbar {
	display: none;
}

/* Utility class to disable text selection */
._noSelect_8xafi_23 {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Current Track Info Section */
._currentTrackInfo_8xafi_30 {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--space-500);
	gap: var(--space-200);
	background-color: var(--bg-depth-1);
	border-radius: var(--radius-300);
}

._trackContainer_8xafi_40 {
	display: flex;
	gap: var(--space-600);
}

._trackThumbnail_8xafi_45 {
	width: 85px;
	height: 85px;
	border-radius: var(--radius-200);
}

._trackDetails_8xafi_51 {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-200);
}

._label_8xafi_61 {
	font-size: var(--s);
	font-weight: var(--regular);
	color: var(--text-tertiary);
}

._trackDetails_8xafi_51 h3 {
	margin: 0;
	font-size: var(--l);
	line-height: 20px;
}

._trackDetails_8xafi_51 a {
	text-decoration: none;
}

._explicitAndArtistName_8xafi_77 {
	display: flex;
	align-items: flex-start;
	gap: var(--space-200);
}

._explicitIcon_8xafi_83 {
	width: 14px;
	height: 14px;
}

._artist_8xafi_88 {
	color: var(--text-secondary);
	font-size: 0.8rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

._artist_8xafi_88 a {
	font-size: 0.8rem;
	color: var(--text-secondary);
}

/* Artist Section */
._artistSection_8xafi_102 {
	display: flex;
	flex-direction: column;
	gap: var(--space-300);
}

/* Artist Tabs */
._artistTabs_8xafi_109 {
	position: relative;
	display: flex;
	width: 100%;
	gap: var(--space-100);
	padding: var(--space-300) var(--space-300) var(--space-300);
	overflow-x: auto;
	background-color: var(--overlay-100);
	border-radius: var(--radius-200);
	border-bottom: 1px solid var(--transparent-100);
	padding-bottom: var(--space-200);
	overflow-x: auto;

	&::-webkit-scrollbar {
		display: none;
	}

	scrollbar-width: none;
	-ms-overflow-style: none;
}

._artistTab_8xafi_109 {
	padding: var(--space-200) var(--space-300);
	border-radius: var(--radius-full);
	background-color: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s ease;
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 0.75rem;
	position: relative;
	z-index: 2;
}

._artistTab_8xafi_109:hover {
	color: var(--text-primary);
}

._activeTab_8xafi_149 {
	background-color: var(--overlay-300);
	color: var(--text-primary);
}

/* No progress indicator styles */

/* Artist Content */
._artistContent_8xafi_157 {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-300);
	transition:
		opacity 0.5s ease-in-out,
		transform 0.4s ease-out;
	will-change: opacity, transform;
	opacity: 1;
	transform: translateY(0);
}

._artistContentFading_8xafi_171 {
	opacity: 0;
	transform: translateY(7px);
}

/* Artist Header Section */
._artistHeader_8xafi_177 {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background-color: var(--overlay-100);
	border-radius: var(--radius-300);
	padding: var(--space-600);
	min-height: 253px;
}

._artistImageContainer_8xafi_188 {
	position: relative;
	width: 180px;
	height: 180px;
	margin-bottom: var(--space-200);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-300);
	overflow: hidden;
}

._artistThumbnail_8xafi_198 {
	width: 100%;
	height: 100%;
	border-radius: var(--radius-full);
	object-fit: cover;
	border: 1px solid var(--overlay-300);
	transition: opacity 0.25s ease;
	will-change: opacity;
}

/* Shimmer loading effect */
._shimmerContainer_8xafi_209 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bg-depth-2);
	border-radius: var(--radius-full);
	overflow: hidden;
}

._shimmer_8xafi_209 {
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--bg-depth-2) 0%, var(--bg-depth-3) 50%, var(--bg-depth-2) 100%);
	background-size: 200% 100%;
	animation: _shimmerAnimation_8xafi_1 1.5s infinite;
}

@keyframes _shimmerAnimation_8xafi_1 {
	0% {
		background-position: -200% 0;
	}

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

._artistNameAndFollow_8xafi_238 {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-100) var(--space-200);
}

._artistNameAndFollow_8xafi_238 h3 {
	margin: 0;
	font-size: 1.05rem;
}

/* Artist Bio */
._artistBio_8xafi_252 {
	font-size: var(--s);
	color: var(--text-default);
	margin: 0;
	padding: 0;
	text-align: left;
	line-height: 1.4;
	max-height: 4.2em;
	/* Show about 3 lines of text */
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	margin-top: var(--space-100);
	text-wrap: auto;
	opacity: 0.5;
}

._artistNameContainer_8xafi_271 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	min-width: 0;
	/* Important for text wrapping */
	max-width: calc(100% - 88px);
	/* Reserve space for the follow button */
	margin-right: var(--space-300);
}

._popularSection_8xafi_283 {
	min-height: 300px;
	position: relative;
}

._albumsSection_8xafi_288 {
	position: relative;
	min-height: 500px;
}

/* Popular Tracks Section */
._popularSection_8xafi_283,
._loadingSection_8xafi_295 {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--space-200);
	padding: var(--space-600);
	background-color: var(--overlay-100);
	border-radius: var(--radius-300);
}

._popularSection_8xafi_283 h3,
._loadingSection_8xafi_295 h3,
._albumsSection_8xafi_288 h3 {
	margin: 0;
	font-size: 1rem;
	padding-bottom: var(--space-100);
}

._tracksContainer_8xafi_313 {
	display: flex;
	flex-direction: column;
	gap: var(--space-200);
}

/* Albums Section */
._albumsSection_8xafi_288 {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--space-200);
	padding: var(--space-200);
	background-color: var(--overlay-100);
	border-radius: var(--radius-300);
	padding: var(--space-600);
}

._albumsGrid_8xafi_331 {
	margin-top: 12px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: 7px;
	width: 100%;
}

._albumArtworkLink_8xafi_339 {
	display: block;
	aspect-ratio: 1;
	border-radius: var(--radius-200);
	overflow: hidden;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

._albumArtworkLink_8xafi_339:hover {
	transform: scale(1.02);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

._albumArtwork_8xafi_339 {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
._root_82w5u_1 {
	background-color: var(--overlay-100);
	border-radius: var(--radius-300);
	padding: var(--space-1000) var(--space-600);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-200);

	h4 {
		font-size: var(--l);
	}

	p {
		font-size: var(--s);
	}
}

._addMusicButton_82w5u_19 {
	margin-top: var(--space-800);
	background-color: var(--bg-depth-2);
	border-radius: var(--radius-300);
	padding: var(--space-200) var(--space-300);
	color: var(--text-primary);
	height: 40px;
}
._root_mk1kp_1 {
	display: flex;
	gap: 12px;
	height: 100%;
	overflow: hidden;
	flex-direction: column;
}

._content_mk1kp_9 {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0px;
	gap: 15px;
	width: 100%;
}

._contentQueue_mk1kp_20 {
	width: 100%;
}

._contentQueueHeader_mk1kp_24 {
	height: 41px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 10px;
}

._queueItem_mk1kp_32 {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 8px 14px;
	gap: 16px;
	width: 100%;
	height: 64px;
	cursor: pointer;
}

._queueItem_mk1kp_32:hover {
	background: var(--overlay-100);
}

._queueTrackThumbnail_mk1kp_47 {
	width: 100%;
	height: 100%;
}

._queueTrackInfo_mk1kp_52 {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

._footer_mk1kp_60 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	width: 100%;
}

._footer_mk1kp_60 a {
	width: 100%;
}

._footer_mk1kp_60 button {
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10px;
	height: 59px;
	background: var(--bg-depth-1);
	border-radius: 10px;
	flex: none;
	order: 0;
	align-self: stretch;
	flex-grow: 1;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	color: rgba(255, 255, 255, 0.3);
	opacity: 1;
}

/* Utility class to disable text selection */
._noSelect_mk1kp_95 {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

._menuButton_mk1kp_101 {
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
}

._queueItem_mk1kp_32:hover ._menuButton_mk1kp_101 {
	opacity: 1;
}

._queueItemContent_mk1kp_117 {
	position: relative;
	height: 48px;
	width: 48px;
	border-radius: 4px;
	overflow: hidden;
}

._menuButton_mk1kp_101 img {
	z-index: 9;
}

._menuButtonBackground_mk1kp_129 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-depth-1);
	opacity: 0.8;
}

._explicitAndArtistName_mk1kp_139 {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-200);
}
._root_ysdcd_1 {
	display: flex;
	flex-direction: column;
	gap: var(--space-400);
	padding: var(--space-800);
	width: 100%;
	height: 100%;
	background-color: var(--bg-depth-1);
	align-items: center;
}

._center_ysdcd_12 {
	display: flex;
	flex-direction: column;
	gap: var(--space-400);
	width: 100%;
	height: 100%;
	max-width: 800px;
}

._firstRow_ysdcd_21 {
	display: flex;
	gap: var(--space-400);
}

._releaseArtworkTitle_ysdcd_26 {
	border-radius: var(--radius-400);
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: var(--space-300);
}

._releaseArtworkTitleContent_ysdcd_34 {
	display: flex;
	width: 100%;
	max-width: 900px;
	min-width: 20px;
	padding: var(--space-800) var(--space-600);
	gap: var(--space-800);
}

/* Match CommonPage responsive breakpoints for loading header */
@container (max-width: 920px) {
	._releaseArtworkTitleContent_ysdcd_34 {
		max-width: 800px;
	}
}

@container (max-width: 820px) {
	._releaseArtworkTitleContent_ysdcd_34 {
		max-width: 700px;
	}
}

@container (max-width: 720px) {
	._releaseArtworkTitleContent_ysdcd_34 {
		max-width: 600px;
	}
}

@media (max-width: 768px) {
	._releaseArtworkTitleContent_ysdcd_34 {
		flex-direction: column;
	}

	._releaseArtworkTitleContent_ysdcd_34 img {
		margin: auto;
	}
}

._releaseArtwork_ysdcd_26 {
	width: 230px;
	height: 230px;
	object-fit: cover;
	border-radius: var(--radius-300);
	background-color: var(--bg-depth-1);
}

._tracksContainer_ysdcd_80 {
	padding-top: var(--space-400);
	height: 100%;
	overflow-y: auto;
	flex: 1;
	border-radius: var(--radius-300);
}

._releaseArtworkTitleDetails_ysdcd_88 {
	display: flex;
	flex-direction: column;
	gap: var(--space-400);
	justify-content: flex-end;
}

._releaseArtworkTitleDetails_ysdcd_88 h1 {
	text-wrap: balance;
}

._artistLinks_ysdcd_99 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-100);
	font-size: 1.1rem;
}

._artistLinks_ysdcd_99 span {
	font-size: 1.1rem !important;
	font-weight: 500 !important;
}

._artistLinks_ysdcd_99 a {
	color: var(--text-primary);
	opacity: 0.9;
	font-weight: 500;
	text-decoration: none;
	font-size: 1.1rem !important;
}

._artistLinks_ysdcd_99 a:hover {
	text-decoration: underline;
	opacity: 1;
}

._copyrightInfo_ysdcd_124 {
	display: flex;
	flex-direction: column;
	gap: var(--space-200);
	margin-top: var(--space-200);
	font-size: 0.8rem;
	opacity: 0.7;
}

._copyright_ysdcd_124 {
	margin: 0;
}

._playnowOrAddToQueue_ysdcd_137 {
	display: flex;
	gap: var(--space-200);
}

._playnowOrAddToQueue_ysdcd_137 button {
	display: flex;
	gap: var(--space-200);
	align-items: center;
	padding: var(--space-200);
	border-radius: var(--radius-300);
	background-color: var(--bg-depth-1);
}

._playnowOrAddToQueue_ysdcd_137 button:hover {
	background-color: var(--bg-depth-3);
}

._playnowOrAddToQueue_ysdcd_137 button img {
	width: 16px;
	height: 16px;
}

._trackRow_ysdcd_160 {
	position: relative;
	margin-bottom: var(--space-200);
}

._currentlyPlaying_ysdcd_165 {
	position: relative;
}

._currentlyPlaying_ysdcd_165::before {
	content: '';
	position: absolute;
	left: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 70%;
	background-color: var(--color-primary);
	border-radius: var(--radius-100);
}

._currentlyPlaying_ysdcd_165 > div {
	background-color: var(--overlay-300);
	border-left: 2px solid var(--color-primary);
}

._discHeading_ysdcd_186 {
	margin-top: var(--space-500);
	margin-bottom: var(--space-300);
	padding-left: var(--space-500);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-secondary);
	opacity: 0.75;
	letter-spacing: 0.02em;
}

._discHeading_ysdcd_186:first-child {
	margin-top: 0;
}

._discGroup_ysdcd_201 {
	margin-bottom: var(--space-600);
}

._discGroup_ysdcd_201:last-child {
	margin-bottom: 0;
}

._footerCopyrightInfo_ysdcd_209 {
	display: flex;
	flex-direction: column;
	gap: var(--space-200);
	margin-top: var(--space-600);
	padding: var(--space-500);
	font-size: 0.8rem;
	opacity: 0.7;
	text-align: left;
	width: 100%;
	max-width: 800px;
	border-top: 1px solid var(--border-100);
	padding-top: var(--space-600);
}

._footerCopyrightInfo_ysdcd_209 ._copyright_ysdcd_124 {
	margin: 0;
}

._headerButton_ysdcd_228 {
	background-color: transparent;
	border: none;
	color: var(--header-text-color, #ffffff);
	padding: var(--spacing-small, 8px) var(--spacing-medium, 12px);
	align-items: center;
	gap: var(--spacing-xsmall, 6px);
	font-size: var(--font-size-medium, 1rem);
	font-weight: 500;
	cursor: pointer;
	border-radius: var(--border-radius-medium, 20px);
	transition: background-color 0.2s ease;
}

._headerButton_ysdcd_228 img {
	width: var(--icon-size-large, 24px);
	height: var(--icon-size-large, 24px);
}

._headerButton_ysdcd_228:hover {
	background-color: var(--button-transparent-hover-bg, rgba(255, 255, 255, 0.1)); /* Subtle hover effect */
}

._albumHeaderButtonBase_ysdcd_251 {
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--radius-full);
	cursor: pointer;
	border: none;
	transition: background-color 0.2s ease;
}

._albumActionButton_ysdcd_261 {
	background-color: var(--overlay-200);
	color: var(--text-primary);
	padding: 10px 20px;
	font-weight: var(--semibold);
}

._albumActionButton_ysdcd_261:hover {
	background-color: var(--overlay-300);
}

._albumActionButtonIcon_ysdcd_272 {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

._releaseSaveButtonSaved_ysdcd_278 {
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

._releasePageActionButton_ysdcd_282 {
	padding: 10px 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--radius-full);
	background-color: var(--overlay-200);
	color: var(--text-primary);
	border: none;
	font-weight: var(--semibold);
	font-size: 12px;
	transition: background-color 0.2s ease;
}

._releasePageActionButton_ysdcd_282:hover {
	background-color: var(--overlay-300);
}

._releasePageActionIcon_ysdcd_301 {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
/* Container for the entire header */
._container_1g318_2 {
	display: flex;
	justify-content: center;
	margin: var(--space-800) 0 var(--space-600) 0;
	padding: 0 var(--space-800);
}

/* Main navigation wrapper with background */
._root_1g318_10 {
	display: flex;
	align-items: center;
	gap: var(--space-50);
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-full);
	padding: var(--space-100);
	position: relative;
	overflow: hidden;
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.1),
		inset 0 1px 1px rgba(255, 255, 255, 0.05);

	/* CSS custom properties for glider positioning */
	--glider-left: 0px;
	--glider-width: 0px;
	--glider-opacity: 0;
	--glider-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Individual tab styling */
._tab_1g318_34 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-200) var(--space-600);
	border-radius: var(--radius-full);
	text-decoration: none !important;
	position: relative;
	z-index: 2;
	transition: transform 0.2s ease-out;
	min-height: 34px;
	cursor: pointer;
	-webkit-user-drag: none;
	user-drag: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Ensure no underline on hover */
._tab_1g318_34:hover {
	text-decoration: none !important;
}

/* Tab label text */
._label_1g318_59 {
	font-size: var(--s);
	font-weight: var(--medium);
	color: rgba(255, 255, 255, 0.55);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	white-space: nowrap;
	user-select: none;
	letter-spacing: -0.01em;
}

/* Hover state for tabs */
._tab_1g318_34:hover ._label_1g318_59 {
	color: rgba(255, 255, 255, 0.8);
}

/* Active tab text */
._tab_1g318_34._active_1g318_75 ._label_1g318_59 {
	color: rgba(255, 255, 255, 0.95);
	font-weight: var(--semibold);
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* The animated glider/pill background */
._glider_1g318_82 {
	position: absolute;
	top: var(--space-100);
	bottom: var(--space-100);
	left: var(--glider-left);
	width: var(--glider-width);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.12) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 0.5px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-full);
	transition: var(--glider-transition);
	z-index: 1;
	opacity: var(--glider-opacity);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* Subtle inner glow for depth */
._glider_1g318_82::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-full);
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

/* Active tab micro-interaction feedback */
._tab_1g318_34:active {
	transform: scale(0.96);
}

/* Focus styles for accessibility */
._tab_1g318_34:focus-visible {
	outline: 2px solid var(--brand-purple);
	outline-offset: 2px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
	._container_1g318_2 {
		padding: 0 var(--space-400);
		margin: var(--space-600) 0 var(--space-400) 0;
	}

	._root_1g318_10 {
		gap: 0;
	}

	._tab_1g318_34 {
		padding: var(--space-200) var(--space-500);
		min-height: 30px;
	}

	._label_1g318_59 {
		font-size: var(--xs);
	}
}
._releaseArtwork_1jcot_1 {
	height: 158px;
	width: 158px;
	border-radius: var(--radius-100);
}

._releaseName_1jcot_7 {
	width: 100%;
	text-align: center;
}

._releaseArtist_1jcot_12 {
	display: block;
	width: 100%;
	text-align: center;
}

._releaseLink_1jcot_18 {
	padding: var(--space-600);
	height: 100%;
}

._noDrag_1jcot_23 {
	-webkit-user-drag: none;
	user-select: none;
}
._root_t03jj_1 {
	display: flex;
	width: 100%;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--space-400) var(--space-700);
}

._body_t03jj_11 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-400);
	width: 100%;
	margin: auto;
	border-radius: var(--radius-200);
	overflow: auto;
}

._body_t03jj_11 > * {
	width: 100%;
	margin-bottom: 0;
}

._header_t03jj_26 {
	margin-top: var(--space-500);
}
._artistName_c7kug_1 {
	text-align: center;
	width: 100%;
}

._artistImage_c7kug_6 {
	height: 135px;
	width: 135px;
	object-fit: cover;
	border-radius: var(--radius-full);
}

._artistLink_c7kug_13 {
	padding: var(--space-600);
	height: 100%;
}

._noDrag_c7kug_18 {
	-webkit-user-drag: none;
	user-select: none;
}
._playlistCard_186ml_1 {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc(25% - var(--space-500));
	min-width: 177.5px;
	background-color: var(--bg-depth-1);
	border-radius: var(--radius-200);
	transition: background-color var(--animation-duration-fast) var(--animation-timing-function);
	margin-right: var(--space-500);
	margin-bottom: var(--space-500);
	background-color: var(--overlay-100);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	user-select: none;
	-webkit-user-drag: none;
}

@media (max-width: 1200px) {
	._playlistCard_186ml_1 {
		flex: 0 0 calc(33.33% - var(--space-500));
	}
}

@media (max-width: 900px) {
	._playlistCard_186ml_1 {
		flex: 0 0 calc(50% - var(--space-500));
	}
}

@media (max-width: 600px) {
	._playlistCard_186ml_1 {
		flex: 0 0 100%;
		margin-right: 0;
	}
}

._playlistCard_186ml_1:hover {
	background-color: var(--overlay-200);
}

._playlistLink_186ml_41 {
	display: block;
	height: 100%;
	text-decoration: none;
}

._imageContainer_186ml_47 {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius-200);
}

._playlistImage_186ml_55 {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

._playlistLink_186ml_41:hover ._playlistImage_186ml_55 {
	transform: scale(1.05);
}

._overlay_186ml_66 {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	background:
		radial-gradient(
			ellipse at bottom left,
			rgba(20, 20, 20, 0.95) 0%,
			rgba(20, 20, 20, 0.85) 20%,
			rgba(20, 20, 20, 0.75) 35%,
			rgba(20, 20, 20, 0.45) 50%,
			rgba(20, 20, 20, 0.2) 65%,
			rgba(20, 20, 20, 0.1) 75%,
			transparent 80%
		),
		linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 30%, transparent 60%);
	pointer-events: none;
	transition: opacity 0.3s ease;
}

._playlistLink_186ml_41:hover ._overlay_186ml_66 {
	opacity: 0.9;
}

._playlistName_186ml_92 {
	position: absolute;
	bottom: var(--space-500);
	left: var(--space-400);
	right: var(--space-400);
	margin: 0;
	color: white;
	font-size: 26px;
	font-weight: var(--bold);
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.4),
		0 1px 3px rgba(0, 0, 0, 0.2);
	overflow: visible;
	text-overflow: ellipsis;
	text-wrap: wrap;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-height: 1.25;
	letter-spacing: -0.01em;
	word-break: break-word;
	hyphens: auto;
	transition: transform 0.3s ease;
}

._playlistLink_186ml_41:hover ._playlistName_186ml_92 {
	transform: translateY(-2px);
}

._noDrag_186ml_121 {
	-webkit-user-drag: none;
	user-select: none;
}
._row_1kp4c_1 {
	display: flex;
	flex-direction: row;
	gap: var(--space-400);
	width: 100%;
	overflow: hidden;
	flex-shrink: 0;
	margin-bottom: var(--space-500);
	margin-top: var(--space-500);
	container-type: inline-size;
	transition: flex-direction var(--animation-duration);
}

._container_1kp4c_14 {
	width: 100%;
}

._containerHeader_1kp4c_18 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 34px;
	width: 100%;
	overflow-x: hidden;
}

._containerBody_1kp4c_27 {
	display: flex;
	overflow: hidden;
	gap: var(--space-500);
	width: 100%;
	max-width: 100%;
}

._btnTextSecondary_1kp4c_35 {
	color: var(--text-tertiary);
	font-weight: var(--semibold);
	transition: color var(--animation-duration-fast) var(--animation-timing-function);
	user-select: none;
	-webkit-user-drag: none;
}

._btnTextSecondary_1kp4c_35:hover {
	color: var(--text-secondary);
}

._container_1kp4c_14._songContainer_1kp4c_47 ._containerBody_1kp4c_27 {
	flex-direction: column;
	gap: 0;
	border-radius: var(--radius-200);
}

._songContainer_1kp4c_47 {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 0;
}

._topResultContainer_1kp4c_59 {
	width: 250px;
	flex-shrink: 0;
	flex-grow: 0;
}

._albumContainer_1kp4c_65 {
	display: flex;
	flex-wrap: wrap;
}

._topResult_1kp4c_59 {
	border-radius: var(--radius-200);
	background-color: var(--overlay-100);
	padding: var(--space-800);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-400);
	transition: background-color var(--animation-duration);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	user-select: none;
	-webkit-user-drag: none;
}

._topResult_1kp4c_59:hover {
	background-color: var(--overlay-200);
	text-decoration: none;
}

._contentContainer_1kp4c_92 {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-200);
}

._title_1kp4c_99 {
	margin: 0;
	font-weight: var(--semibold);
	color: var(--text-default);
	font-size: var(--l);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Make artist title larger */
._artistImageContainer_1kp4c_110 + ._contentContainer_1kp4c_92 ._title_1kp4c_99 {
	font-size: var(--xl);
	font-weight: var(--bold);
}

._imageContainer_1kp4c_115 {
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
	overflow: hidden;
	border-radius: var(--radius-100);
	margin-bottom: var(--space-200);
}

/* Artist-specific styles */
._artistTopResult_1kp4c_125:hover ._image_1kp4c_115 {
	transform: scale(1);
}

._artistImageContainer_1kp4c_110,
._artistImage_1kp4c_110 {
	border-radius: 50% !important;
}

._image_1kp4c_115 {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-100);
	transition: transform 0.5s ease;
}

._topResult_1kp4c_59:hover ._image_1kp4c_115 {
	transform: scale(1);
}

/* Visualizer styles */
._visualizerContainer_1kp4c_147 {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 21px;
	height: 21px;
	min-width: 12px;
	min-height: 12px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	animation: _containerEnter_1kp4c_1 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	transform-origin: top right;
}

@keyframes _containerEnter_1kp4c_1 {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

._bar_1kp4c_176 {
	opacity: 0;
	animation:
		_barEnter_1kp4c_1 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
		var(--bar-animation) 0.8s ease-in-out infinite var(--animation-delay);
}

._bar1_1kp4c_183 {
	--bar-animation: _bar1_1kp4c_183;
	--animation-delay: 0.1s;
	animation-delay: 0s, 0.1s;
}
._bar2_1kp4c_188 {
	--bar-animation: _bar2_1kp4c_188;
	--animation-delay: 0s;
	animation-delay: 0.05s, 0s;
}
._bar3_1kp4c_193 {
	--bar-animation: _bar3_1kp4c_193;
	--animation-delay: -0.1s;
	animation-delay:
		0.1s,
		-0.1s;
}
._bar4_1kp4c_200 {
	--bar-animation: _bar1_1kp4c_183;
	--animation-delay: -0.2s;
	animation-delay:
		0.15s,
		-0.2s;
}
._bar5_1kp4c_207 {
	--bar-animation: _bar2_1kp4c_188;
	--animation-delay: -0.3s;
	animation-delay:
		0.2s,
		-0.3s;
}

@keyframes _barEnter_1kp4c_1 {
	0% {
		opacity: 0;
		transform: scaleY(0.5);
	}
	100% {
		opacity: 0.9;
		transform: scaleY(1);
	}
}

@keyframes _bar1_1kp4c_183 {
	0%,
	100% {
		height: 6px;
		y: 9px;
	}
	50% {
		height: 10px;
		y: 7px;
	}
}

@keyframes _bar2_1kp4c_188 {
	0%,
	100% {
		height: 10px;
		y: 7px;
	}
	50% {
		height: 6px;
		y: 9px;
	}
}

@keyframes _bar3_1kp4c_193 {
	0%,
	100% {
		height: 8px;
		y: 8px;
	}
	50% {
		height: 12px;
		y: 6px;
	}
}

._overlay_1kp4c_262 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: var(--space-300);
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: var(--radius-100);
}

._topResult_1kp4c_59:hover ._overlay_1kp4c_262 {
	opacity: 1;
}

._playButton_1kp4c_283 {
	width: 50px;
	height: 50px;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	margin-bottom: auto;
	transform: translateY(20px) scale(0.8);
	transition:
		transform 0.3s ease,
		background-color 0.2s ease;
}

._topResult_1kp4c_59:hover ._playButton_1kp4c_283 {
	transform: translateY(0) scale(1);
}

._playButton_1kp4c_283:hover {
	background-color: rgba(255, 255, 255, 0.3);
	transform: translateY(0) scale(1.1) !important;
}

._playIcon_1kp4c_308 {
	width: 20px;
	height: 20px;
}

._typeLabel_1kp4c_313 {
	color: var(--text-tertiary);
	font-size: var(--xxs);
	font-weight: var(--medium);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

._unplayable_1kp4c_321 {
	opacity: 0.5;
	pointer-events: none;
}

@container (max-width: 720px) {
	._row_1kp4c_1 {
		flex-direction: column;
	}
}

@container (max-width: 600px) {
	._topResult_1kp4c_59 {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: var(--space-800);
		width: 100%;
	}

	._topResultContainer_1kp4c_59 {
		width: 100%;
		margin-bottom: var(--space-800);
	}

	._imageContainer_1kp4c_115 {
		width: 120px;
		height: 120px;
		flex-shrink: 0;
		margin-bottom: 0;
	}

	._contentContainer_1kp4c_92 {
		flex: 1;
		min-width: 0;
	}

	/* Adjust artist image size in mobile view */
	._artistImageContainer_1kp4c_110 {
		width: 100px;
		height: 100px;
	}

	._playButton_1kp4c_283 {
		width: 40px;
		height: 40px;
		transform: translateY(0) scale(0.8);
	}

	._playIcon_1kp4c_308 {
		width: 18px;
		height: 18px;
	}
}

._noDrag_1kp4c_376 {
	-webkit-user-drag: none;
	user-select: none;
}
._topResult_15z15_1 {
	border-radius: var(--radius-200);
	background-color: var(--overlay-100);
	padding: var(--space-800);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-400);
	transition: background-color var(--animation-duration);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	user-select: none;
	-webkit-user-drag: none;
}

._imageContainer_15z15_18 {
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
	overflow: hidden;
	border-radius: var(--radius-100);
	margin-bottom: var(--space-200);
}

._contentContainer_15z15_27 {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-200);
}
._root_t03jj_1 {
	display: flex;
	width: 100%;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--space-400) var(--space-700);
}

._body_t03jj_11 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-400);
	width: 100%;
	margin: auto;
	border-radius: var(--radius-200);
	overflow: auto;
}

._body_t03jj_11 > * {
	width: 100%;
	margin-bottom: 0;
}

._header_t03jj_26 {
	margin-top: var(--space-500);
}
._header_m5zdm_1 {
	padding: 0 var(--page-padding);
	margin-bottom: var(--space-400);
}

._body_m5zdm_6 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
	padding: 0 var(--page-padding);
}
._root_a7ylu_1 {
	display: flex;
	width: 100%;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	gap: var(--space-400);
	padding: var(--space-400) var(--space-700);
}

._body_a7ylu_12 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex: 1;
	margin: auto;
	width: 100%;
	border-radius: var(--radius-200);
	overflow: auto;
}

._header_a7ylu_23 {
	margin-top: var(--space-500);
}
._root_yl5ni_1 {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Mobile search container */
._searchContainer_yl5ni_10 {
	display: none;
}

/* Copy exact styles from TopBar SearchInput */
._searchContainer_yl5ni_10 {
	display: none;
	padding: var(--space-400);
}

._searchInputContainer_yl5ni_20 {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: var(--space-200);
	gap: var(--space-400);
	width: 100%;
	height: 44px;
	background: var(--overlay-100);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 17px;
	position: relative;
	cursor: text;
	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease;
	overflow: visible;
}

._searchIcon_yl5ni_39 {
	width: 16px;
	height: 16px;
	margin: 10px;
	opacity: 1;
	color: #fff;
	flex-shrink: 0;
	position: absolute;
	pointer-events: none;
}

._searchInput_yl5ni_20 {
	background: transparent;
	border: none;
	outline: none;
	color: white;
	font-size: 13px;
	width: 100%;
	padding: 0 36px;
	min-width: 0;
}

._searchInput_yl5ni_20::placeholder {
	color: white;
	opacity: 0.5;
}

._clearButton_yl5ni_66 {
	position: absolute;
	right: 8px;
	top: 0;
	bottom: 0;
	width: 36px;
	background: transparent;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

._clearButton_yl5ni_66:hover {
	opacity: 1;
}

._clearButton_yl5ni_66 img {
	width: 16px;
	height: 16px;
}

@media (max-width: 768px) {
	._searchContainer_yl5ni_10 {
		display: block;
	}
}
._root_cj2jc_1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* Container for the entire header */
._container_cj2jc_9 {
	display: flex;
	justify-content: center;
	margin: var(--space-1000) 0 calc(var(--space-1000) * 1.5) 0;
	padding: 0 var(--space-1000);
}

/* Main navigation wrapper with background */
._navRoot_cj2jc_17 {
	display: flex;
	align-items: center;
	gap: var(--space-100);
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 6px;
	position: relative;
	overflow: hidden;
	box-shadow:
		0 2px 12px rgba(0, 0, 0, 0.08),
		0 1px 3px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);

	/* CSS custom properties for glider positioning */
	--glider-left: 0px;
	--glider-width: 0px;
	--glider-opacity: 0;
	--glider-transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Individual tab styling */
._tab_cj2jc_42 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-200);
	padding: 10px 20px;
	border-radius: 12px;
	text-decoration: none !important;
	position: relative;
	z-index: 2;
	transition: all 0.2s ease-out;
	min-height: 38px;
	cursor: pointer;
	-webkit-user-drag: none;
	user-drag: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Ensure no underline on hover */
._tab_cj2jc_42:hover {
	text-decoration: none !important;
}

/* Tab icon */
._icon_cj2jc_68 {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	color: rgba(255, 255, 255, 0.5);
}

/* Tab label text */
._label_cj2jc_77 {
	font-size: 13px;
	font-weight: var(--medium);
	color: rgba(255, 255, 255, 0.6);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	white-space: nowrap;
	user-select: none;
	letter-spacing: 0.01em;
}

/* Hover state for tabs */
._tab_cj2jc_42:hover ._label_cj2jc_77 {
	color: rgba(255, 255, 255, 0.75);
}

._tab_cj2jc_42:hover ._icon_cj2jc_68 {
	color: rgba(255, 255, 255, 0.7);
}

/* Active tab text */
._tab_cj2jc_42._active_cj2jc_97 ._label_cj2jc_77 {
	color: rgba(255, 255, 255, 0.95);
	font-weight: var(--semibold);
}

._tab_cj2jc_42._active_cj2jc_97 ._icon_cj2jc_68 {
	color: rgba(255, 255, 255, 0.9);
}

/* The animated glider/pill background */
._glider_cj2jc_107 {
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: var(--glider-left);
	width: var(--glider-width);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.04) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	transition: var(--glider-transition);
	z-index: 1;
	opacity: var(--glider-opacity);
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.05),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Subtle inner glow for depth */
._glider_cj2jc_107::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-full);
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

/* Active tab micro-interaction feedback */
._tab_cj2jc_42:active {
	transform: scale(0.96);
}

/* Focus styles for accessibility */
._tab_cj2jc_42:focus-visible {
	outline: 2px solid var(--brand-purple);
	outline-offset: 2px;
}

/* Content area */
._content_cj2jc_146 {
	width: 100%;
	animation: _fadeIn_cj2jc_1 0.3s ease-out;
}

@keyframes _fadeIn_cj2jc_1 {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive adjustments for tablets */
@media (max-width: 768px) {
	._container_cj2jc_9 {
		padding: 0 var(--space-600);
		margin: var(--space-800) 0 var(--space-800) 0;
	}

	._navRoot_cj2jc_17 {
		width: 100%;
		max-width: 100%;
		gap: 4px;
		padding: 5px;
		border-radius: 14px;
	}

	._tab_cj2jc_42 {
		padding: 8px 16px;
		min-height: 36px;
		gap: 8px;
		flex: 1;
		justify-content: center;
	}

	._label_cj2jc_77 {
		font-size: 12px;
	}

	._icon_cj2jc_68 svg {
		width: 16px;
		height: 16px;
	}

	._glider_cj2jc_107 {
		top: 5px;
		bottom: 5px;
		border-radius: 10px;
	}
}

/* Mobile - horizontal scroll if needed */
@media (max-width: 600px) {
	._container_cj2jc_9 {
		padding: 0 var(--space-400);
		margin: var(--space-600) 0 var(--space-600) 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	._navRoot_cj2jc_17 {
		min-width: max-content;
		gap: 3px;
		padding: 4px;
		border-radius: 12px;
	}

	._tab_cj2jc_42 {
		padding: 6px 12px;
		min-height: 32px;
		gap: 6px;
	}

	._icon_cj2jc_68 {
		display: flex;
		flex-shrink: 0;
	}

	._icon_cj2jc_68 svg {
		width: 15px;
		height: 15px;
	}

	._label_cj2jc_77 {
		font-size: 11px;
		letter-spacing: 0;
	}

	._glider_cj2jc_107 {
		top: 4px;
		bottom: 4px;
		border-radius: 8px;
	}
}

/* Very small screens - icon only mode */
@media (max-width: 400px) {
	._container_cj2jc_9 {
		padding: 0 var(--space-300);
	}

	._navRoot_cj2jc_17 {
		width: 100%;
		justify-content: space-between;
		gap: 2px;
		padding: 3px;
	}

	._tab_cj2jc_42 {
		padding: 8px;
		flex: 1;
		min-width: 0;
	}

	/* Hide labels on very small screens */
	._label_cj2jc_77 {
		display: none;
	}

	._icon_cj2jc_68 svg {
		width: 18px;
		height: 18px;
	}

	/* Tooltip on hover for small screens */
	._tab_cj2jc_42::after {
		content: attr(data-label);
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(0, 0, 0, 0.9);
		color: white;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 10px;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.2s;
		margin-bottom: 4px;
	}

	._tab_cj2jc_42:hover::after {
		opacity: 1;
	}
}
._header_16ii0_1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: calc(var(--space-800) * 1.5) var(--space-200) calc(var(--space-800) * 1.2);
	text-align: center;
	position: relative;
	min-height: 60px;
	margin-bottom: var(--space-300);
	width: 100%;
	background: linear-gradient(135deg, rgba(110, 65, 204, 0.03) 0%, rgba(131, 81, 237, 0.01) 100%);
	border-radius: var(--radius-400);
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.06),
		0 1px 3px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

._header_16ii0_1::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-400);
	padding: 1px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

._title_16ii0_35 {
	font-size: 26px;
	font-weight: var(--bold);
	margin: 0;
	letter-spacing: -0.02em;
	color: var(--text-primary);
	position: relative;
	z-index: 1;
}

._subtitle_16ii0_45 {
	font-size: var(--s);
	font-weight: var(--regular);
	color: var(--text-secondary);
	margin: var(--space-300) 0 0;
	position: relative;
	z-index: 1;
	opacity: 0.8;
}

._container_16ii0_55 {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 var(--space-1000);
}

@media (max-width: 768px) {
	._header_16ii0_1 {
		padding: var(--space-1000) var(--space-600) var(--space-800);
		min-height: 120px;
		max-width: 90%;
		border-radius: 16px;
	}

	._title_16ii0_35 {
		font-size: 26px;
	}

	._subtitle_16ii0_45 {
		font-size: 14px;
		margin: var(--space-200) 0 0;
	}

	._container_16ii0_55 {
		padding: 0 var(--space-400);
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	._header_16ii0_1 {
		padding: var(--space-800) var(--space-400) var(--space-600);
		min-height: 100px;
		max-width: 95%;
		border-radius: 14px;
	}

	._title_16ii0_35 {
		font-size: 22px;
	}

	._subtitle_16ii0_45 {
		font-size: 13px;
		opacity: 0.75;
	}

	._container_16ii0_55 {
		padding: 0 var(--space-300);
	}
}
._root_1q5dt_1 {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-1000) * 1.2);
	padding-bottom: calc(var(--space-1000) * 2);
	animation: _fadeIn_1q5dt_1 0.4s ease-out;
}

@keyframes _fadeIn_1q5dt_1 {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

._section_1q5dt_20 {
	display: flex;
	flex-direction: column;
	gap: var(--space-600);
}

._sectionHeader_1q5dt_26 {
	display: flex;
	flex-direction: column;
	gap: var(--space-200);
}

._sectionTitle_1q5dt_32 {
	font-size: 18px;
	font-weight: var(--semibold);
	color: var(--text-primary);
	margin: 0;
	letter-spacing: -0.01em;
	opacity: 0.9;
}

._sectionDescription_1q5dt_41 {
	font-size: 13px;
	color: var(--text-secondary);
	margin: 0;
	opacity: 0.7;
}

/* Settings List */
._settingsList_1q5dt_49 {
	display: flex;
	flex-direction: column;
	gap: var(--space-600);
}

._settingItem_1q5dt_55 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-800);
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

._settingItem_1q5dt_55::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

._settingItem_1q5dt_55:hover::before {
	opacity: 1;
}

._settingItem_1q5dt_55:hover {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.08);
}

._settingInfo_1q5dt_91 {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-100);
	margin-right: var(--space-400);
}

._settingLabel_1q5dt_99 {
	font-size: 14px;
	font-weight: var(--medium);
	color: var(--text-primary);
	margin: 0;
	opacity: 0.95;
}

._settingDescription_1q5dt_107 {
	font-size: 12px;
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.4;
	opacity: 0.7;
}

/* Toggle Switch */
._toggle_1q5dt_116 {
	position: relative;
	min-width: 44px;
	width: 44px;
	height: 24px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.25s ease;
}

._toggle_1q5dt_116:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.15);
}

._toggleActive_1q5dt_133 {
	background: rgba(110, 65, 204, 0.9);
	border-color: rgba(110, 65, 204, 1);
}

._toggleActive_1q5dt_133:hover {
	background: rgba(110, 65, 204, 1);
}

._toggleSwitch_1q5dt_142 {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: white;
	border-radius: 9px;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

._toggleActive_1q5dt_133 ._toggleSwitch_1q5dt_142 {
	transform: translateX(20px);
}

/* Dropdown */
._dropdown_1q5dt_159 {
	position: relative;
	min-width: 180px;
}

._select_1q5dt_164 {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	padding: 8px 36px 8px 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 13px;
	font-weight: var(--medium);
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.05),
		inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

._select_1q5dt_164:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
}

._select_1q5dt_164:focus {
	outline: none;
	border-color: rgba(110, 65, 204, 0.5);
	box-shadow: 0 0 0 3px rgba(110, 65, 204, 0.1);
}

._select_1q5dt_164 option {
	background: var(--background-primary);
	color: var(--text-primary);
}

._dropdownArrow_1q5dt_199 {
	position: absolute;
	right: var(--space-300);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--text-secondary);
}

/* Action Cards */
._actionGrid_1q5dt_209 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-600);
}

._actionCard_1q5dt_215 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-400);
	padding: calc(var(--space-800) * 1.2) var(--space-800);
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	text-align: center;
	position: relative;
	overflow: hidden;
}

._actionCard_1q5dt_215::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

._actionCard_1q5dt_215:hover::after {
	opacity: 1;
}

._actionCard_1q5dt_215:hover {
	background: rgba(255, 255, 255, 0.03);
	transform: translateY(-2px);
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}

._actionCard_1q5dt_215:active {
	transform: scale(0.98);
}

._actionCardDanger_1q5dt_263 {
	border-color: rgba(239, 68, 68, 0.2);
}

._actionCardDanger_1q5dt_263:hover {
	background: rgba(239, 68, 68, 0.05);
	border-color: rgba(239, 68, 68, 0.3);
	box-shadow:
		0 4px 16px rgba(239, 68, 68, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

._actionIcon_1q5dt_275 {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.6);
}

._actionInfo_1q5dt_282 {
	display: flex;
	flex-direction: column;
	gap: var(--space-100);
}

._actionTitle_1q5dt_288 {
	font-size: 14px;
	font-weight: var(--semibold);
	color: var(--text-primary);
	margin: 0;
	opacity: 0.95;
}

._actionDescription_1q5dt_296 {
	font-size: 12px;
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.4;
	opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
	._settingItem_1q5dt_55 {
		flex-direction: column;
		gap: var(--space-400);
		align-items: flex-start;
	}

	._settingInfo_1q5dt_91 {
		margin-right: 0;
	}

	._toggle_1q5dt_116,
	._dropdown_1q5dt_159 {
		align-self: flex-end;
	}

	._actionGrid_1q5dt_209 {
		grid-template-columns: 1fr;
	}
}

/* Badge Filter Styles */
._badgeFilterContainer_1q5dt_327 {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 400px;
}

._badgeInput_1q5dt_335 {
	display: flex;
	gap: 8px;
}

._textInput_1q5dt_340 {
	flex: 1;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	color: var(--text-primary);
	font-size: 14px;
	transition: all 0.2s ease;
}

._textInput_1q5dt_340:focus {
	outline: none;
	border-color: var(--text-secondary);
	background: rgba(255, 255, 255, 0.04);
}

._textInput_1q5dt_340::placeholder {
	color: var(--text-secondary);
	opacity: 0.5;
}

._addButton_1q5dt_362 {
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-primary);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

._addButton_1q5dt_362:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-1px);
}

._addButton_1q5dt_362:active {
	transform: translateY(0);
}

._badgeList_1q5dt_383 {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 32px;
	padding: 8px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
}

._badge_1q5dt_327 {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	font-size: 13px;
	color: var(--text-primary);
}

._badge_1q5dt_327 span {
	line-height: 1;
}

._removeBadge_1q5dt_410 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease;
	opacity: 0.6;
}

._removeBadge_1q5dt_410:hover {
	color: #ef4444;
	opacity: 1;
}

._noBadges_1q5dt_432 {
	color: var(--text-secondary);
	font-size: 13px;
	font-style: italic;
	opacity: 0.5;
}
._comingSoonBadge_fbyad_1 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 14px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 20px;
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._comingSoonBadge_fbyad_1:hover {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06));
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}

._comingSoonText_fbyad_23 {
	font-size: 11px;
	font-weight: var(--semibold);
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	z-index: 1;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

._comingSoonGlow_fbyad_33 {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

._comingSoonBadge_fbyad_1:hover ._comingSoonGlow_fbyad_33 {
	opacity: 1;
}

/* Pulse Animation */
._comingSoonPulse_fbyad_46::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15));
	opacity: 0;
	animation: _pulse_fbyad_1 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes _pulse_fbyad_1 {
	0%,
	100% {
		opacity: 0;
		transform: scale(1);
	}
	50% {
		opacity: 0.6;
		transform: scale(1.05);
	}
}

/* Shimmer Effect */
._comingSoonBadge_fbyad_1::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
	animation: _shimmer_fbyad_1 4s ease-in-out infinite;
}

@keyframes _shimmer_fbyad_1 {
	0% {
		transform: translateX(-100%) translateY(-100%) rotate(25deg);
	}
	100% {
		transform: translateX(100%) translateY(100%) rotate(25deg);
	}
}

/* Variants */

/* Small variant - for inline use in smaller components */
._variant-small_fbyad_92 {
	padding: 4px 10px;
	border-radius: 12px;
}

._variant-small_fbyad_92 ._comingSoonText_fbyad_23 {
	font-size: 10px;
	letter-spacing: 0.05em;
}

._variant-small_fbyad_92::before {
	border-radius: 12px;
}

/* Inline variant - sits nicely next to text */
._variant-inline_fbyad_107 {
	padding: 3px 8px;
	border-radius: 8px;
	margin-left: 8px;
	vertical-align: middle;
}

._variant-inline_fbyad_107 ._comingSoonText_fbyad_23 {
	font-size: 9px;
	letter-spacing: 0.04em;
}

._variant-inline_fbyad_107::before {
	display: none; /* No pulse for inline variant */
}

._variant-inline_fbyad_107::after {
	display: none; /* No shimmer for inline variant */
}

/* Section Header Integration */
._sectionHeaderTop_fbyad_128 {
	display: flex;
	align-items: center;
	gap: var(--space-400);
}

/* Responsive */
@media (max-width: 768px) {
	._comingSoonBadge_fbyad_1 {
		padding: 5px 12px;
	}

	._comingSoonText_fbyad_23 {
		font-size: 10px;
	}

	._variant-small_fbyad_92 {
		padding: 3px 8px;
	}

	._variant-small_fbyad_92 ._comingSoonText_fbyad_23 {
		font-size: 9px;
	}

	._variant-inline_fbyad_107 {
		padding: 2px 6px;
		margin-left: 6px;
	}

	._variant-inline_fbyad_107 ._comingSoonText_fbyad_23 {
		font-size: 8px;
	}
}

/* Coming Soon Section - Disables and greyscales entire sections */
._comingSoonSection_fbyad_163 {
	position: relative;
	filter: grayscale(0.8);
	opacity: 0.6;
	pointer-events: none;
	user-select: none;
	transition: all 0.3s ease;
}

/* Optional: Add a subtle overlay */
._comingSoonSection_fbyad_163::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), transparent);
	border-radius: inherit;
	pointer-events: none;
}

/* Allow the header to remain interactive if needed */
._comingSoonSection_fbyad_163 ._sectionHeader_fbyad_128 {
	pointer-events: auto;
	filter: grayscale(0);
	opacity: 1;
}

/* Ensure the badge remains visible */
._comingSoonSection_fbyad_163 ._comingSoonBadge_fbyad_1 {
	filter: grayscale(0);
	opacity: 1;
}

/* Optional hover state to show it's disabled */
._comingSoonSectionWrapper_fbyad_196 {
	position: relative;
}

._comingSoonSectionWrapper_fbyad_196:hover ._comingSoonSection_fbyad_163 {
	opacity: 0.65;
}

/* Tooltip on hover (optional) */
._comingSoonSectionWrapper_fbyad_196::before {
	content: 'Coming Soon';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 8px 16px;
	background: rgba(0, 0, 0, 0.8);
	color: rgba(255, 255, 255, 0.9);
	border-radius: 8px;
	font-size: 14px;
	font-weight: var(--semibold);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 10;
	white-space: nowrap;
}

._comingSoonSectionWrapper_fbyad_196:hover::before {
	opacity: 1;
}
._root_92meh_1 {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-1000) * 1.2);
	padding-bottom: calc(var(--space-1000) * 2);
	animation: _fadeIn_92meh_1 0.4s ease-out;
}

@keyframes _fadeIn_92meh_1 {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

._section_92meh_20 {
	display: flex;
	flex-direction: column;
	gap: var(--space-600);
}

._sectionHeader_92meh_26 {
	display: flex;
	flex-direction: column;
	gap: var(--space-200);
}

._sectionHeaderTop_92meh_32 {
	display: flex;
	align-items: center;
	gap: var(--space-400);
}

._sectionTitle_92meh_38 {
	font-size: 18px;
	font-weight: var(--semibold);
	color: var(--text-primary);
	margin: 0;
	letter-spacing: -0.01em;
	opacity: 0.9;
}

._sectionDescription_92meh_47 {
	font-size: 13px;
	color: var(--text-secondary);
	margin: 0;
	opacity: 0.7;
}

/* New Spectrum Quality Selector */
._qualitySelector_92meh_55 {
	display: flex;
	flex-direction: column;
	gap: var(--space-800);
}

._spectrumContainer_92meh_61 {
	position: relative;
	width: 100%;
	height: 280px;
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(110, 65, 204, 0.03) 0%, rgba(131, 81, 237, 0.01) 100%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
}

._spectrumBackground_92meh_73 {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}

/* Grid lines for visual depth */
._gridLines_92meh_83 {
	position: absolute;
	inset: 40px;
	display: flex;
	justify-content: space-between;
	opacity: 0.1;
}

._gridLine_92meh_83 {
	width: 1px;
	height: 100%;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.2) 80%, transparent);
}

/* Main spectrum track */
._spectrumTrack_92meh_98 {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 2;
}

/* Connection line between points */
._connectionLine_92meh_109 {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(110, 65, 204, 0.3) 10%, rgba(110, 65, 204, 0.3) 90%, transparent);
	transform: translateY(-50%);
	z-index: 1;
}

._connectionLine_92meh_109::before {
	content: '';
	position: absolute;
	top: -1px;
	left: calc(12.5% + var(--selected-index) * 25%);
	width: 25%;
	height: 4px;
	background: linear-gradient(90deg, transparent, rgba(110, 65, 204, 0.8), transparent);
	transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	animation: _connectionPulse_92meh_1 2s ease-in-out infinite;
}

@keyframes _connectionPulse_92meh_1 {
	0%,
	100% {
		opacity: 0.6;
	}
	50% {
		opacity: 1;
	}
}

/* Quality point container */
._qualityPoint_92meh_143 {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	z-index: 3;
	flex: 1;
}

/* Locked state for premium tiers */
._qualityPointLocked_92meh_154 {
	position: relative;
}

/* .qualityPointLocked::before {
	content: '';
	position: absolute;
	inset: -10px;
	background: linear-gradient(
		135deg,
		rgba(147, 51, 234, 0.08),
		rgba(168, 85, 247, 0.04)
	);
	border-radius: 20px;
	animation: shimmerPremium 3s ease-in-out infinite;
	pointer-events: none;
} */

@keyframes _shimmerPremium_92meh_1 {
	0%,
	100% {
		opacity: 0.5;
	}
	50% {
		opacity: 0.8;
	}
}

/* Lock overlay */
._lockOverlay_92meh_183 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	pointer-events: none;
}

._lockIcon_92meh_197 {
	width: 20px;
	height: 20px;
	color: rgba(168, 85, 247, 0.7);
	filter: drop-shadow(0 2px 8px rgba(147, 51, 234, 0.3));
	animation: _lockPulse_92meh_1 2s ease-in-out infinite;
}

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

/* Pulse rings for active state */
._pulseRing_92meh_218 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	border: 2px solid rgba(110, 65, 204, 0.4);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: _pulse_92meh_218 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

._pulseRing2_92meh_230 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	border: 1px solid rgba(110, 65, 204, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: _pulse_92meh_218 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
	animation-delay: 0.5s;
}

@keyframes _pulse_92meh_218 {
	0% {
		transform: translate(-50%, -50%) scale(0.8);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0;
	}
}

/* Interactive button */
._qualityButton_92meh_255 {
	position: relative;
	width: 48px;
	height: 48px;
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._qualityButton_92meh_255:hover {
	transform: scale(1.1);
}

._qualityButton_92meh_255:active {
	transform: scale(0.95);
}

/* Locked button state */
._qualityButtonLocked_92meh_277 {
	cursor: not-allowed;
	position: relative;
}

._qualityButtonLocked_92meh_277:hover {
	transform: scale(1.05);
}

._qualityButtonLocked_92meh_277:active {
	transform: scale(1);
}

/* Quality dot */
._qualityDot_92meh_291 {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgb(43, 43, 43);
	border: 2px solid rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._qualityPointActive_92meh_303 ._qualityDot_92meh_291 {
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, #6e41cc, #8351ed);
	border-color: rgba(110, 65, 204, 0.5);
	box-shadow:
		0 0 20px rgba(110, 65, 204, 0.6),
		0 0 40px rgba(110, 65, 204, 0.3),
		inset 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Locked dot style - purple glow */
._qualityPointLocked_92meh_154 ._qualityDot_92meh_291 {
	background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(168, 85, 247, 0.08));
	border: 2px solid rgba(147, 51, 234, 0.4);
	box-shadow:
		0 0 20px rgba(147, 51, 234, 0.3),
		inset 0 0 10px rgba(168, 85, 247, 0.15);
}

._qualityPointLocked_92meh_154:hover ._qualityDot_92meh_291 {
	border-color: rgba(168, 85, 247, 0.6);
	box-shadow:
		0 0 30px rgba(147, 51, 234, 0.5),
		inset 0 0 15px rgba(168, 85, 247, 0.25);
	transform: scale(1.1);
}

._dotCore_92meh_331 {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: white;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
	animation: _corePulse_92meh_1 2s ease-in-out infinite;
}

@keyframes _corePulse_92meh_1 {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
}

._qualityPoint_92meh_143._hovering_92meh_350 ._qualityDot_92meh_291 {
	transform: scale(1.2);
	border-color: rgba(255, 255, 255, 0.4);
	background: rgb(86, 86, 86);
}

/* Waveform bars */
._waveformBars_92meh_357 {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 3px;
	align-items: flex-end;
	height: 70px;
	margin-bottom: 15px;
}

._waveBar_92meh_369 {
	width: 4px;
	height: calc(var(--bar-height) * 70px);
	background: linear-gradient(to top, rgba(110, 65, 204, 0.15), rgba(131, 81, 237, 0.5));
	border-radius: 2px;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	opacity: 0.6;
}

/* Only animate when this quality is selected */
._waveBarAnimated_92meh_379 {
	animation: _waveAnimation_92meh_1 var(--animation-speed, 2s) ease-in-out infinite;
	animation-delay: calc(var(--bar-index) * 0.15s);
}

/* Static state for non-selected qualities */
._waveBarStatic_92meh_385 {
	animation: none;
	opacity: 0.4;
}

/* HD Quality - Premium, smooth waves with glow */
._waveBarHD_92meh_391 {
	background: linear-gradient(to top, rgba(147, 51, 234, 0.3), rgba(168, 85, 247, 0.9));
	filter: drop-shadow(0 0 3px rgba(168, 85, 247, 0.3));
}

._waveBarHD_92meh_391._waveBarAnimated_92meh_379 {
	animation-name: _waveAnimationHD_92meh_1;
}

/* Locked HD waves - purple shimmer */
._qualityPointLocked_92meh_154 ._waveBarHD_92meh_391 {
	background: linear-gradient(to top, rgba(147, 51, 234, 0.4), rgba(168, 85, 247, 0.9));
	filter: drop-shadow(0 0 6px rgba(147, 51, 234, 0.5));
}

@keyframes _waveAnimationHD_92meh_1 {
	0%,
	100% {
		transform: scaleY(1);
		opacity: 0.85;
	}
	50% {
		transform: scaleY(1.1);
		opacity: 1;
	}
}

/* High Quality - Vibrant, rhythmic waves */
._waveBarHigh_92meh_419 {
	background: linear-gradient(to top, rgba(110, 65, 204, 0.25), rgba(131, 81, 237, 0.75));
}

._waveBarHigh_92meh_419._waveBarAnimated_92meh_379 {
	animation-name: _waveAnimationHigh_92meh_1;
}

/* Locked High waves - purple shimmer */
._qualityPointLocked_92meh_154 ._waveBarHigh_92meh_419 {
	background: linear-gradient(to top, rgba(147, 51, 234, 0.35), rgba(168, 85, 247, 0.8));
	filter: drop-shadow(0 0 4px rgba(147, 51, 234, 0.4));
}

@keyframes _waveAnimationHigh_92meh_1 {
	0%,
	100% {
		transform: scaleY(1);
		opacity: 0.7;
	}
	50% {
		transform: scaleY(1.15);
		opacity: 0.9;
	}
}

/* Normal Quality - Blue-purple waves */
._waveBarNormal_92meh_446 {
	background: linear-gradient(to top, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.6));
}

._waveBarNormal_92meh_446._waveBarAnimated_92meh_379 {
	animation-name: _waveAnimationNormal_92meh_1;
}

@keyframes _waveAnimationNormal_92meh_1 {
	0%,
	100% {
		transform: scaleY(1);
		opacity: 0.6;
	}
	50% {
		transform: scaleY(1.12);
		opacity: 0.75;
	}
}

/* Low Quality - Blue-purple minimal waves */
._waveBarLow_92meh_467 {
	background: linear-gradient(to top, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.4));
	opacity: 0.5;
}

._waveBarLow_92meh_467._waveBarAnimated_92meh_379 {
	animation-name: _waveAnimationLow_92meh_1;
}

@keyframes _waveAnimationLow_92meh_1 {
	0%,
	100% {
		transform: scaleY(1);
		opacity: 0.5;
	}
	50% {
		transform: scaleY(1.08);
		opacity: 0.6;
	}
}

._qualityPointActive_92meh_303 ._waveBar_92meh_369 {
	filter: brightness(1.2);
	transform-origin: bottom;
}

._qualityPointActive_92meh_303 ._waveBarHD_92meh_391 {
	background: linear-gradient(to top, rgba(147, 51, 234, 0.5), rgba(168, 85, 247, 1));
	filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.5));
}

._qualityPointActive_92meh_303 ._waveBarHigh_92meh_419 {
	background: linear-gradient(to top, rgba(110, 65, 204, 0.4), rgba(131, 81, 237, 0.95));
	filter: drop-shadow(0 0 4px rgba(131, 81, 237, 0.4));
}

._qualityPointActive_92meh_303 ._waveBarNormal_92meh_446 {
	background: linear-gradient(to top, rgba(99, 102, 241, 0.35), rgba(139, 92, 246, 0.85));
}

._qualityPointActive_92meh_303 ._waveBarLow_92meh_467 {
	background: linear-gradient(to top, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.7));
}

._qualityPoint_92meh_143._hovering_92meh_350 ._waveBar_92meh_369 {
	transform: scaleY(1.15);
	filter: brightness(1.1);
	transition: all 0.2s ease-out;
}

/* Labels */
._qualityLabelContainer_92meh_518 {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 20px;
	text-align: center;
	white-space: nowrap;
}

._qualityBadge_92meh_528 {
	font-size: 11px;
	font-weight: var(--semibold);
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

._premiumBadge_92meh_540 {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 184, 0, 0.9));
	color: rgba(0, 0, 0, 0.85);
	padding: 3px 8px;
	border-radius: 6px;
	font-weight: var(--bold);
	font-size: 8px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow:
		0 2px 6px rgba(255, 184, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	border: 0.5px solid rgba(255, 184, 0, 0.3);
	transition: all 0.3s ease;
}

/* Locked premium badge - purple accent */
._premiumBadgeLocked_92meh_557 {
	background: linear-gradient(135deg, rgba(147, 51, 234, 0.95), rgba(168, 85, 247, 0.9));
	color: white;
	animation: _premiumPulse_92meh_1 3s ease-in-out infinite;
	box-shadow:
		0 4px 12px rgba(147, 51, 234, 0.4),
		0 0 20px rgba(168, 85, 247, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	border: 1px solid rgba(168, 85, 247, 0.5);
}

@keyframes _premiumPulse_92meh_1 {
	0%,
	100% {
		opacity: 0.9;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
}

._qualityTitle_92meh_580 {
	font-size: 13px;
	font-weight: var(--semibold);
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 2px 0;
	transition: all 0.3s ease;
}

._qualityPointActive_92meh_303 ._qualityTitle_92meh_580 {
	color: white;
	transform: scale(1.1);
}

/* Locked title style */
._qualityTitleLocked_92meh_594 {
	color: rgba(168, 85, 247, 0.95);
	text-shadow: 0 0 10px rgba(147, 51, 234, 0.2);
}

._qualityDesc_92meh_599 {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
	margin: 0;
	max-width: 120px;
	opacity: 0;
	transition: opacity 0.3s ease;
	margin-bottom: 4px;
}

._qualityPoint_92meh_143._hovering_92meh_350 ._qualityDesc_92meh_599,
._qualityPointActive_92meh_303 ._qualityDesc_92meh_599 {
	opacity: 1;
}

/* Locked description */
._qualityDescLocked_92meh_615 {
	color: rgba(168, 85, 247, 0.8);
	opacity: 1 !important;
	font-weight: var(--medium);
	animation: _fadeInOut_92meh_1 2s ease-in-out infinite;
}

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

/* Floating particles
.particlesContainer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.particle {
	position: absolute;
	width: 2px;
	height: 2px;
	background: rgba(110, 65, 204, 0.6);
	border-radius: 50%;
	animation: float 10s linear infinite;
	animation-delay: calc(var(--particle-index) * 1.25s);
	left: calc(var(--particle-index) * 12.5%);
} */

@keyframes _float_92meh_1 {
	0% {
		transform: translateY(280px) translateX(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateY(-20px) translateX(30px);
		opacity: 0;
	}
}

/* Selection display */
._selectionDisplay_92meh_669 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-600);
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
}

._selectionInfo_92meh_681 {
	display: flex;
	flex-direction: column;
	gap: var(--space-200);
}

._selectionLabel_92meh_687 {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

._selectionValue_92meh_694 {
	display: flex;
	align-items: center;
	gap: var(--space-300);
	font-size: 16px;
	font-weight: var(--semibold);
	color: white;
}

._selectionValue_92meh_694 svg {
	width: 20px;
	height: 20px;
}

._bitrateInfo_92meh_708 {
	display: flex;
	align-items: center;
}

._bitrateValue_92meh_713 {
	font-size: 14px;
	font-weight: var(--medium);
	color: rgba(110, 65, 204, 0.9);
	padding: 6px 12px;
	background: rgba(110, 65, 204, 0.1);
	border-radius: 8px;
	border: 1px solid rgba(110, 65, 204, 0.2);
}

/* Crossfade Slider */
._crossfadeContainer_92meh_724 {
	display: flex;
	flex-direction: column;
	gap: var(--space-800);
	padding: var(--space-800);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
	backdrop-filter: blur(40px) saturate(140%);
	-webkit-backdrop-filter: blur(40px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 24px;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	position: relative;
	overflow: hidden;
}

._sliderContainer_92meh_741 {
	display: flex;
	flex-direction: column;
	gap: var(--space-300);
}

._sliderLabels_92meh_747 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--s);
	color: var(--text-secondary);
}

._sliderValue_92meh_755 {
	font-size: var(--l);
	font-weight: var(--semibold);
	color: var(--text-primary);
}

._slider_92meh_741 {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.12));
	border-radius: 100px;
	outline: none;
	position: relative;
	box-shadow:
		inset 0 1px 3px rgba(0, 0, 0, 0.2),
		inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

._slider_92meh_741::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), var(--brand-purple));
	border-radius: 50%;
	cursor: pointer;
	box-shadow:
		0 4px 12px rgba(var(--brand-purple-rgb), 0.4),
		0 0 0 2px rgba(255, 255, 255, 0.1);
	transition: all 0.2s ease;
	border: 2px solid rgba(255, 255, 255, 0.2);
}

._slider_92meh_741::-webkit-slider-thumb:hover {
	transform: scale(1.2);
	box-shadow: 0 4px 16px rgba(var(--brand-purple-rgb), 0.6);
}

._slider_92meh_741::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: var(--brand-purple);
	border-radius: var(--radius-full);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(var(--brand-purple-rgb), 0.4);
	transition: all 0.2s ease;
	border: none;
}

._sliderTicks_92meh_806 {
	display: flex;
	justify-content: space-between;
	padding: 0 10px;
}

._tick_92meh_812 {
	width: 1px;
	height: 8px;
	background: rgba(255, 255, 255, 0.2);
}

/* Crossfade Preview */
._crossfadePreview_92meh_819 {
	display: flex;
	flex-direction: column;
	gap: var(--space-300);
}

._trackPreview_92meh_825 {
	display: flex;
	align-items: center;
	gap: var(--space-400);
}

._trackBar_92meh_831 {
	flex: 1;
	height: 4px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-full);
	position: relative;
	overflow: hidden;
}

._trackFade_92meh_840 {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(var(--brand-purple-rgb), 0.5));
	transition: width 0.3s ease;
}

._trackFadeNext_92meh_849 {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(90deg, rgba(var(--brand-purple-rgb), 0.5), transparent);
	transition: width 0.3s ease;
}

._trackLabel_92meh_858 {
	font-size: var(--xs);
	color: var(--text-secondary);
	min-width: 80px;
}

/* Toggle Items */
._toggleList_92meh_865 {
	display: flex;
	flex-direction: column;
	gap: var(--space-400);
}

._toggleItem_92meh_871 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-600);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
	backdrop-filter: blur(30px) saturate(120%);
	-webkit-backdrop-filter: blur(30px) saturate(120%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._toggleInfo_92meh_884 {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-100);
}

._toggleLabel_92meh_891 {
	font-size: var(--m);
	font-weight: var(--medium);
	color: var(--text-primary);
	margin: 0;
}

._toggleDescription_92meh_898 {
	font-size: var(--xs);
	color: var(--text-secondary);
	margin: 0;
}

._toggle_92meh_865 {
	position: relative;
	width: 48px;
	height: 24px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all 0.3s ease;
}

._toggleActive_92meh_915 {
	background: var(--brand-purple);
	border-color: var(--brand-purple);
}

._toggleSwitch_92meh_920 {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background: white;
	border-radius: var(--radius-full);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

._toggleActive_92meh_915 ._toggleSwitch_92meh_920 {
	transform: translateX(24px);
}

/* Placeholder Card */
._placeholderCard_92meh_937 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-400);
	padding: var(--space-1200);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%);
	backdrop-filter: blur(30px) saturate(110%);
	-webkit-backdrop-filter: blur(30px) saturate(110%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 24px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

._placeholderIcon_92meh_954 {
	font-size: 48px;
	opacity: 0.5;
}

._placeholderText_92meh_959 {
	font-size: var(--m);
	color: var(--text-secondary);
	margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
	._root_92meh_1 {
		gap: var(--space-800);
		padding-bottom: var(--space-1000);
	}

	._section_92meh_20 {
		gap: var(--space-400);
	}

	._sectionTitle_92meh_38 {
		font-size: 16px;
	}

	._sectionDescription_92meh_47 {
		font-size: 12px;
	}

	/* Spectrum Container Mobile */
	._spectrumContainer_92meh_61 {
		height: 200px;
		border-radius: 16px;
		padding: 20px 10px;
	}

	._spectrumBackground_92meh_73 {
		padding: 20px 15px;
	}

	._gridLines_92meh_83 {
		inset: 20px 15px;
	}

	/* Quality Points Mobile */
	._qualityPoint_92meh_143 {
		gap: 12px;
	}

	._qualityButton_92meh_255 {
		width: 36px;
		height: 36px;
	}

	._qualityDot_92meh_291 {
		width: 20px;
		height: 20px;
	}

	._qualityPointActive_92meh_303 ._qualityDot_92meh_291 {
		width: 26px;
		height: 26px;
	}

	._dotCore_92meh_331 {
		width: 10px;
		height: 10px;
	}

	/* Pulse rings smaller on mobile */
	._pulseRing_92meh_218 {
		width: 40px;
		height: 40px;
	}

	._pulseRing2_92meh_230 {
		width: 55px;
		height: 55px;
	}

	/* Waveform bars mobile */
	._waveformBars_92meh_357 {
		height: 50px;
		gap: 2px;
		margin-bottom: 10px;
	}

	._waveBar_92meh_369 {
		width: 3px;
		height: calc(var(--bar-height) * 50px);
	}

	/* Labels mobile */
	._qualityLabelContainer_92meh_518 {
		margin-top: 15px;
	}

	._qualityBadge_92meh_528 {
		font-size: 10px;
		margin-bottom: 4px;
		gap: 4px;
	}

	._premiumBadge_92meh_540 {
		font-size: 7px;
		padding: 2px 6px;
		border-radius: 4px;
	}

	._qualityTitle_92meh_580 {
		font-size: 12px;
	}

	._qualityDesc_92meh_599 {
		font-size: 10px;
		max-width: 80px;
	}

	/* Selection display mobile */
	._selectionDisplay_92meh_669 {
		padding: var(--space-400);
		border-radius: 10px;
		flex-direction: column;
		gap: var(--space-400);
	}

	._selectionInfo_92meh_681 {
		width: 100%;
	}

	._selectionLabel_92meh_687 {
		font-size: 10px;
	}

	._selectionValue_92meh_694 {
		font-size: 14px;
		gap: var(--space-200);
	}

	._selectionValue_92meh_694 svg {
		width: 18px;
		height: 18px;
	}

	._bitrateInfo_92meh_708 {
		width: 100%;
	}

	._bitrateValue_92meh_713 {
		font-size: 12px;
		padding: 4px 10px;
		width: 100%;
		text-align: center;
	}

	/* Crossfade mobile */
	._crossfadeContainer_92meh_724 {
		padding: var(--space-600);
		border-radius: 16px;
		gap: var(--space-600);
	}

	._sliderLabels_92meh_747 {
		font-size: 11px;
	}

	._sliderValue_92meh_755 {
		font-size: 14px;
	}

	._slider_92meh_741::-webkit-slider-thumb {
		width: 20px;
		height: 20px;
	}

	._trackLabel_92meh_858 {
		font-size: 10px;
		min-width: 65px;
	}

	/* Toggle items mobile */
	._toggleItem_92meh_871 {
		padding: var(--space-400);
		border-radius: 12px;
		flex-direction: row;
		gap: var(--space-400);
	}

	._toggleLabel_92meh_891 {
		font-size: 14px;
	}

	._toggleDescription_92meh_898 {
		font-size: 11px;
	}

	._toggle_92meh_865 {
		width: 44px;
		height: 22px;
		flex-shrink: 0;
	}

	._toggleSwitch_92meh_920 {
		width: 16px;
		height: 16px;
	}

	._toggleActive_92meh_915 ._toggleSwitch_92meh_920 {
		transform: translateX(22px);
	}

	/* Placeholder mobile */
	._placeholderCard_92meh_937 {
		padding: var(--space-800);
		border-radius: 16px;
	}

	._placeholderIcon_92meh_954 {
		font-size: 36px;
	}

	._placeholderText_92meh_959 {
		font-size: 13px;
	}
}

/* Small mobile */
@media (max-width: 480px) {
	/* Even more compact spectrum */
	._spectrumContainer_92meh_61 {
		height: 180px;
	}

	/* Hide descriptions on very small screens */
	._qualityDesc_92meh_599 {
		display: none;
	}

	/* Stack connection line adjustment */
	._connectionLine_92meh_109::before {
		left: calc(12.5% + var(--selected-index) * 25%);
	}

	/* Floating particles - reduce for performance */
	._particle_92meh_633:nth-child(n + 5) {
		display: none;
	}

	/* Simpler animations on small screens */
	._waveBar_92meh_369 {
		animation-duration: calc(var(--animation-speed) * 1.5);
	}
}

/* ==================== Equalizer Styles ==================== */

._equalizerContainer_92meh_1211 {
	display: flex;
	flex-direction: column;
	gap: var(--space-800);
	background: linear-gradient(135deg, rgba(110, 65, 204, 0.03) 0%, rgba(131, 81, 237, 0.01) 100%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 24px;
	padding: var(--space-800);
	backdrop-filter: blur(40px) saturate(140%);
	-webkit-backdrop-filter: blur(40px) saturate(140%);
	box-shadow:
		0 10px 40px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	position: relative;
	overflow: hidden;
}

/* Visualizer Header */
._eqVisualizerHeader_92meh_1229 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-600);
	background: rgba(0, 0, 0, 0.2);
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.04);
	position: relative;
	overflow: hidden;
}

._eqWaveform_92meh_1241 {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 60px;
	flex: 1;
	max-width: 200px;
}

._eqWaveformBar_92meh_1250 {
	flex: 1;
	background: linear-gradient(to top, rgba(110, 65, 204, 0.3), rgba(131, 81, 237, 0.8));
	border-radius: 2px 2px 0 0;
	animation: _waveAnimation_92meh_1 2s ease-in-out infinite;
	transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes _waveAnimation_92meh_1 {
	0%,
	100% {
		opacity: 0.6;
	}
	50% {
		opacity: 1;
	}
}

._eqHeaderInfo_92meh_1268 {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-100);
}

._currentPresetLabel_92meh_1275 {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

._currentPresetName_92meh_1282 {
	font-size: 18px;
	font-weight: var(--semibold);
	color: var(--text-primary);
	background: linear-gradient(135deg, #6e41cc, #8351ed);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Preset Grid */
._presetGrid_92meh_1293 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-400);
}

._presetCard_92meh_1299 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-300);
	padding: var(--space-500);
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

._presetCard_92meh_1299::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, rgba(110, 65, 204, 0.1), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

._presetCard_92meh_1299:hover {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

._presetCard_92meh_1299:hover::before {
	opacity: 1;
}

._presetCardActive_92meh_1334 {
	background: linear-gradient(135deg, rgba(110, 65, 204, 0.1), rgba(131, 81, 237, 0.05));
	border-color: rgba(110, 65, 204, 0.3);
	box-shadow:
		0 8px 24px rgba(110, 65, 204, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

._customPresetCard_92meh_1342 {
	background: linear-gradient(135deg, rgba(255, 184, 0, 0.1), rgba(255, 215, 0, 0.05));
	border-color: rgba(255, 184, 0, 0.3);
}

._presetIcon_92meh_1347 {
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	transition: all 0.3s ease;
}

._presetCardActive_92meh_1334 ._presetIcon_92meh_1347 {
	background: linear-gradient(135deg, rgba(110, 65, 204, 0.2), rgba(131, 81, 237, 0.1));
	transform: scale(1.1);
}

._presetInfo_92meh_1364 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-100);
	text-align: center;
}

._presetName_92meh_1372 {
	font-size: 13px;
	font-weight: var(--semibold);
	color: var(--text-primary);
}

._presetDescription_92meh_1378 {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.3;
}

._presetActiveIndicator_92meh_1384 {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 8px;
	height: 8px;
	background: linear-gradient(135deg, #6e41cc, #8351ed);
	border-radius: 50%;
	box-shadow: 0 0 12px rgba(110, 65, 204, 0.8);
}

._presetActiveRing_92meh_1395 {
	position: absolute;
	inset: -4px;
	border: 2px solid rgba(110, 65, 204, 0.4);
	border-radius: 50%;
	animation: _ringPulse_92meh_1 2s ease-in-out infinite;
}

@keyframes _ringPulse_92meh_1 {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.5);
		opacity: 0;
	}
}

/* EQ Controls Container */
._eqControlsContainer_92meh_1416 {
	display: flex;
	gap: var(--space-600);
	padding: calc(var(--space-800) * 1.5) var(--space-800) var(--space-800);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.04);
	position: relative;
	overflow: hidden;
}

._eqControlsContainer_92meh_1416::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent);
}

/* Scale Labels */
._eqScaleLabels_92meh_1438 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 12px 0;
	min-width: 50px;
}

._scaleLabel_92meh_1446 {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.3);
	font-weight: var(--medium);
	font-family: 'SF Mono', monospace;
}

._scaleLabelCenter_92meh_1453 {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
	font-weight: var(--semibold);
	font-family: 'SF Mono', monospace;
	position: relative;
}

._scaleLabelCenter_92meh_1453::before {
	content: '';
	position: absolute;
	left: -20px;
	right: -1000px;
	top: 50%;
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
}

/* EQ Bands Wrapper */
._eqBandsWrapper_92meh_1472 {
	flex: 1;
	position: relative;
	height: 260px;
}

/* Background Grid */
._eqBackgroundGrid_92meh_1479 {
	position: absolute;
	inset: 12px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	pointer-events: none;
}

._eqGridLine_92meh_1488 {
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02) 95%, transparent);
}

._eqGridLineCenter_92meh_1493 {
	background: linear-gradient(90deg, rgba(110, 65, 204, 0.15), rgba(110, 65, 204, 0.08) 95%, transparent);
	height: 2px;
	margin: -0.5px 0;
}

/* EQ Bands Track */
._eqBandsTrack_92meh_1500 {
	position: relative;
	height: 100%;
	display: flex;
	justify-content: space-between;
	padding: 12px var(--space-400);
}

/* EQ Band Column */
._eqBandColumn_92meh_1509 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-500);
	flex: 1;
	max-width: 80px;
	position: relative;
}

._eqBandColumn_92meh_1509:hover ._eqSliderTrack_92meh_1519 {
	background: rgba(255, 255, 255, 0.08);
	box-shadow:
		inset 0 0 8px rgba(0, 0, 0, 0.3),
		0 0 20px rgba(110, 65, 204, 0.1);
}

._eqBandColumn_92meh_1509:hover ._eqKnobInner_92meh_1526 {
	transform: scale(1.1);
}

/* EQ Band Control */
._eqBandControl_92meh_1531 {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Band Glow Effect */
._eqBandGlow_92meh_1540 {
	position: absolute;
	inset: -30px;
	pointer-events: none;
	transition: opacity 0.3s ease;
	filter: blur(20px);
}

/* Slider Track */
._eqSliderTrack_92meh_1519 {
	position: relative;
	width: 12px;
	height: 100%;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.03),
		rgba(255, 255, 255, 0.05) 48%,
		rgba(255, 255, 255, 0.02) 50%,
		rgba(255, 255, 255, 0.05) 52%,
		rgba(255, 255, 255, 0.03)
	);
	border-radius: 6px;
	overflow: visible;
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 0.3),
		inset 0 -1px 0 rgba(255, 255, 255, 0.05);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._eqSliderTrack_92meh_1519::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 2px;
	right: 2px;
	height: 1px;
	background: rgba(255, 255, 255, 0.15);
	transform: translateY(-50%);
	pointer-events: none;
}

/* Value Fill */
._eqValueFill_92meh_1582 {
	position: absolute;
	left: 2px;
	right: 2px;
	border-radius: 4px;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Vertical Slider - Completely invisible but functional */
._eqVerticalSlider_92meh_1591 {
	position: absolute;
	width: 236px;
	height: 60px;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
	z-index: 2;
	opacity: 0; /* Make completely invisible */
}

._eqVerticalSlider_92meh_1591::-webkit-slider-track {
	width: 100%;
	height: 60px;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
}

._eqVerticalSlider_92meh_1591::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 40px;
	height: 40px;
	background: transparent;
	cursor: grab;
	border: none;
	box-shadow: none;
}

._eqVerticalSlider_92meh_1591::-webkit-slider-thumb:active {
	cursor: grabbing;
}

._eqVerticalSlider_92meh_1591::-moz-range-track {
	width: 100%;
	height: 60px;
	background: transparent;
	cursor: pointer;
	border: none;
}

._eqVerticalSlider_92meh_1591::-moz-range-thumb {
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	cursor: grab;
	box-shadow: none;
}

/* EQ Knob */
._eqKnob_92meh_1526 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(50%);
	width: 32px;
	height: 32px;
	pointer-events: none;
	transition: bottom 0.15s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 3;
}

._eqKnobInner_92meh_1526 {
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, rgb(45, 45, 45), rgb(25, 25, 25));
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow:
		0 8px 16px rgba(0, 0, 0, 0.4),
		0 2px 4px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

._eqKnobInner_92meh_1526::before {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(110, 65, 204, 0.8), rgba(131, 81, 237, 0.6));
	opacity: 0;
	transition: opacity 0.3s ease;
}

._eqBandControl_92meh_1531:hover ._eqKnobInner_92meh_1526::before {
	opacity: 1;
}

._eqKnobInner_92meh_1526::after {
	content: '';
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 8px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 1px;
	box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

._eqKnobValue_92meh_1703 {
	font-size: 9px;
	font-weight: var(--bold);
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	z-index: 1;
	font-family: 'SF Mono', monospace;
}

/* Band Label */
._eqBandLabel_92meh_1713 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

._eqFrequency_92meh_1720 {
	font-size: 12px;
	font-weight: var(--semibold);
	color: var(--text-primary);
}

._eqFrequencyUnit_92meh_1726 {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
	margin-left: 1px;
}

._eqBandName_92meh_1732 {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* EQ Actions */
._eqActions_92meh_1740 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--space-400);
}

._eqResetButton_92meh_1747 {
	display: flex;
	align-items: center;
	gap: var(--space-200);
	padding: var(--space-300) var(--space-500);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	color: var(--text-secondary);
	font-size: 12px;
	font-weight: var(--medium);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

._eqResetButton_92meh_1747:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--text-primary);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

._eqResetButton_92meh_1747 svg {
	width: 14px;
	height: 14px;
}

._eqStatusText_92meh_1775 {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	font-weight: var(--medium);
}

/* Responsive Styles for Equalizer */
@media (max-width: 768px) {
	._equalizerContainer_92meh_1211 {
		padding: var(--space-600);
		gap: var(--space-600);
		border-radius: 20px;
	}

	._eqVisualizerHeader_92meh_1229 {
		padding: var(--space-400);
		border-radius: 12px;
	}

	._eqWaveform_92meh_1241 {
		height: 40px;
		max-width: 150px;
	}

	._currentPresetName_92meh_1282 {
		font-size: 16px;
	}

	._presetGrid_92meh_1293 {
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		gap: var(--space-300);
	}

	._presetCard_92meh_1299 {
		padding: var(--space-400);
		border-radius: 12px;
	}

	._presetIcon_92meh_1347 {
		font-size: 24px;
		width: 40px;
		height: 40px;
	}

	._presetName_92meh_1372 {
		font-size: 12px;
	}

	._presetDescription_92meh_1378 {
		font-size: 10px;
	}

	._eqControlsContainer_92meh_1416 {
		padding: var(--space-600);
		gap: var(--space-400);
		border-radius: 16px;
	}

	._eqBandsWrapper_92meh_1472 {
		height: 180px;
	}

	._eqBandsTrack_92meh_1500 {
		padding: 0 var(--space-200);
	}

	._eqBandColumn_92meh_1509 {
		max-width: 60px;
		gap: var(--space-300);
	}

	._eqSliderTrack_92meh_1519 {
		width: 6px;
	}

	._eqKnob_92meh_1526 {
		width: 24px;
		height: 24px;
	}

	._eqKnobValue_92meh_1703 {
		font-size: 9px;
	}

	._eqFrequency_92meh_1720 {
		font-size: 11px;
	}

	._eqFrequencyUnit_92meh_1726 {
		font-size: 9px;
	}

	._eqBandName_92meh_1732 {
		display: none;
	}

	._eqResetButton_92meh_1747 {
		padding: var(--space-200) var(--space-400);
		font-size: 11px;
	}

	._eqStatusText_92meh_1775 {
		font-size: 11px;
	}
}

@media (max-width: 480px) {
	._equalizerContainer_92meh_1211 {
		padding: var(--space-400);
		gap: var(--space-400);
		border-radius: 16px;
	}

	._eqVisualizerHeader_92meh_1229 {
		flex-direction: column;
		align-items: center;
		gap: var(--space-300);
		text-align: center;
	}

	._eqWaveform_92meh_1241 {
		width: 100%;
		max-width: none;
	}

	._eqHeaderInfo_92meh_1268 {
		align-items: center;
	}

	._presetGrid_92meh_1293 {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-200);
	}

	._presetCard_92meh_1299 {
		padding: var(--space-300);
	}

	._presetIcon_92meh_1347 {
		font-size: 20px;
		width: 36px;
		height: 36px;
		border-radius: 8px;
	}

	._presetDescription_92meh_1378 {
		display: none;
	}

	._eqControlsContainer_92meh_1416 {
		padding: var(--space-400);
		gap: var(--space-300);
		border-radius: 12px;
	}

	._eqScaleLabels_92meh_1438 {
		min-width: 40px;
	}

	._scaleLabel_92meh_1446,
	._scaleLabelCenter_92meh_1453 {
		font-size: 10px;
	}

	._eqBandsWrapper_92meh_1472 {
		height: 160px;
	}

	._eqBandsTrack_92meh_1500 {
		padding: 0 var(--space-100);
	}

	._eqBandColumn_92meh_1509 {
		max-width: 45px;
	}

	._eqSliderTrack_92meh_1519 {
		width: 4px;
	}

	._eqKnob_92meh_1526 {
		width: 20px;
		height: 20px;
	}

	._eqKnobInner_92meh_1526 {
		border-width: 1px;
	}

	._eqKnobValue_92meh_1703 {
		font-size: 8px;
	}

	._eqFrequency_92meh_1720 {
		font-size: 10px;
	}

	._eqFrequencyUnit_92meh_1726 {
		display: none;
	}

	._eqActions_92meh_1740 {
		flex-direction: column;
		gap: var(--space-300);
		align-items: stretch;
		padding: 0;
	}

	._eqResetButton_92meh_1747 {
		width: 100%;
		justify-content: center;
	}

	._eqStatusText_92meh_1775 {
		text-align: center;
	}
}
._root_1uu9t_1 {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-1000) * 1.2);
	padding-bottom: calc(var(--space-1000) * 2);
	animation: _fadeIn_1uu9t_1 0.4s ease-out;
}

@keyframes _fadeIn_1uu9t_1 {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

._section_1uu9t_20 {
	display: flex;
	flex-direction: column;
	gap: var(--space-600);
}

._sectionTitle_1uu9t_26 {
	font-size: 18px;
	font-weight: var(--semibold);
	color: var(--text-primary);
	margin: 0;
	letter-spacing: -0.01em;
	opacity: 0.9;
}

/* Profile Card */
._profileCard_1uu9t_36 {
	display: flex;
	align-items: center;
	gap: var(--space-1000);
	padding: calc(var(--space-800) * 1.2);
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.03);
	position: relative;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._profileCard_1uu9t_36::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

._profileCard_1uu9t_36:hover {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.08);
}

._avatarContainer_1uu9t_69 {
	position: relative;
}

._avatar_1uu9t_69 {
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(110, 65, 204, 0.2) 0%, rgba(131, 81, 237, 0.1) 100%);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow:
		0 4px 12px rgba(110, 65, 204, 0.15),
		inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

._avatarText_1uu9t_87 {
	font-size: 24px;
	font-weight: var(--semibold);
	color: var(--text-primary);
	letter-spacing: -0.02em;
}

._avatarImage_1uu9t_94 {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 0.3s ease-in-out;
}

._premiumBadge_1uu9t_105 {
	position: absolute;
	bottom: -4px;
	right: -4px;
	display: flex;
	align-items: center;
	gap: 4px;
	background: linear-gradient(135deg, #ffd700, #ffa500);
	color: #000;
	padding: 4px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: var(--semibold);
	box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
}

._profileInfo_1uu9t_121 {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-100);
}

._username_1uu9t_128 {
	font-size: var(--l);
	font-weight: var(--semibold);
	color: var(--text-primary);
	margin: 0;
}

._email_1uu9t_135 {
	font-size: var(--s);
	color: var(--text-secondary);
	margin: 0;
}

._joinDate_1uu9t_141 {
	font-size: var(--xs);
	color: var(--text-tertiary);
	margin: 0;
}

/* Stats Grid */
._statsGrid_1uu9t_148 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-600);
}

._statCard_1uu9t_154 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-400);
	padding: calc(var(--space-800) * 1.2) var(--space-600);
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
	cursor: default;
}

._statCard_1uu9t_154::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
}

._statCard_1uu9t_154:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

._statIcon_1uu9t_190 {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.6);
}

._statValue_1uu9t_197 {
	font-size: var(--xl);
	font-weight: var(--bold);
	color: var(--text-primary);
	letter-spacing: -0.02em;
}

._statLabel_1uu9t_204 {
	font-size: var(--xs);
	color: var(--text-secondary);
	text-align: center;
}

/* Info Card */
._infoCard_1uu9t_211 {
	display: flex;
	flex-direction: column;
	padding: var(--space-800);
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

._infoRow_1uu9t_225 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-300) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

._infoRow_1uu9t_225:last-child {
	border-bottom: none;
}

._infoLabel_1uu9t_237 {
	font-size: var(--s);
	color: var(--text-secondary);
}

._infoValue_1uu9t_242 {
	font-size: var(--s);
	color: var(--text-primary);
	font-weight: var(--medium);
}

._statusConnected_1uu9t_248 {
	display: flex;
	align-items: center;
	gap: var(--space-200);
	color: #4ade80;
	font-weight: var(--medium);
}

._statusDot_1uu9t_256 {
	width: 8px;
	height: 8px;
	background: #4ade80;
	border-radius: var(--radius-full);
	animation: _pulse_1uu9t_1 2s infinite;
}

@keyframes _pulse_1uu9t_1 {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

._statusIdle_1uu9t_274 {
	display: flex;
	align-items: center;
	gap: var(--space-200);
	color: rgba(255, 255, 255, 0.5);
	font-weight: var(--medium);
}

._statusDotIdle_1uu9t_282 {
	width: 8px;
	height: 8px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: var(--radius-full);
}

/* Action Buttons */
._actionButtons_1uu9t_290 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-600);
}

._actionButton_1uu9t_290 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-400);
	padding: var(--space-800) var(--space-600);
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	font-weight: var(--medium);
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

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

._actionButton_1uu9t_290:hover::before {
	left: 100%;
}

._actionButton_1uu9t_290:hover {
	background: rgba(255, 255, 255, 0.03);
	transform: translateY(-2px);
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}

._actionButton_1uu9t_290:active {
	transform: scale(0.98);
}

._actionIcon_1uu9t_344 {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.6);
}

/* Responsive */
@media (max-width: 768px) {
	._profileCard_1uu9t_36 {
		flex-direction: column;
		text-align: center;
	}

	._statsGrid_1uu9t_148 {
		grid-template-columns: repeat(2, 1fr);
	}

	._actionButtons_1uu9t_290 {
		grid-template-columns: repeat(2, 1fr);
	}
}
._artistShowcase_11rxc_1 {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

._sectionTitle_11rxc_7 {
	font-size: 20px;
	font-weight: 600;
	margin: 0;
	color: var(--text-primary);
	letter-spacing: -0.01em;
}

._artistGrid_11rxc_15 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

._artistCard_11rxc_21 {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-radius: 12px;
	background: var(--surface-secondary, rgba(255, 255, 255, 0.05));
	text-decoration: none !important;
	transition: all 0.2s ease;
	border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
	min-width: 0;
}

._artistCard_11rxc_21:hover {
	background: var(--surface-tertiary, rgba(255, 255, 255, 0.08));
	border-color: var(--border-hover, rgba(255, 255, 255, 0.2));
	transform: translateY(-2px);
	text-decoration: none !important;
}

._artistCard_11rxc_21:focus {
	text-decoration: none !important;
	outline: 2px solid var(--accent-color, #007bff);
	outline-offset: 2px;
}

._artistImageContainer_11rxc_47 {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--surface-tertiary, rgba(255, 255, 255, 0.1));
}

._artistImage_11rxc_47 {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

._artistInfo_11rxc_62 {
	min-width: 0;
	flex: 1;
}

._artistName_11rxc_67 {
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
}

._artistLabel_11rxc_78 {
	font-size: 13px;
	color: var(--text-secondary);
	margin: 4px 0 0 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 500;
}

@media (max-width: 768px) {
	._artistGrid_11rxc_15 {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	._artistCard_11rxc_21 {
		padding: 12px 16px;
		gap: 12px;
	}

	._artistImageContainer_11rxc_47 {
		width: 44px;
		height: 44px;
	}

	._artistName_11rxc_67 {
		font-size: 15px;
	}

	._artistLabel_11rxc_78 {
		font-size: 12px;
	}
}
._parentRelease_1rlrr_1 {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

._sectionTitle_1rlrr_7 {
	font-size: 20px;
	font-weight: 600;
	margin: 0;
	color: var(--text-primary);
	letter-spacing: -0.01em;
}

._releaseCard_1rlrr_15 {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-radius: 12px;
	background: var(--surface-secondary, rgba(255, 255, 255, 0.05));
	text-decoration: none !important;
	transition: all 0.2s ease;
	border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
	min-width: 0;
}

._releaseCard_1rlrr_15:hover {
	background: var(--surface-tertiary, rgba(255, 255, 255, 0.08));
	border-color: var(--border-hover, rgba(255, 255, 255, 0.2));
	transform: translateY(-2px);
	text-decoration: none !important;
}

._releaseCard_1rlrr_15:focus {
	text-decoration: none !important;
	outline: 2px solid var(--accent-color, #007bff);
	outline-offset: 2px;
}

._releaseImageContainer_1rlrr_41 {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--surface-tertiary, rgba(255, 255, 255, 0.1));
}

._releaseImage_1rlrr_41 {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

._releaseInfo_1rlrr_56 {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1;
}

._releaseTitle_1rlrr_64 {
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
}

._releaseMeta_1rlrr_75 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--text-secondary);
	margin-top: 2px;
}

._releaseType_1rlrr_84 {
	text-transform: capitalize;
	font-weight: 500;
}

._separator_1rlrr_89 {
	color: var(--text-tertiary, rgba(255, 255, 255, 0.3));
	font-size: 12px;
}

._releaseYear_1rlrr_94 {
	color: var(--text-secondary);
}

._releaseArtists_1rlrr_98 {
	font-size: 13px;
	color: var(--text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 4px;
	line-height: 1.3;
}

@media (max-width: 768px) {
	._releaseCard_1rlrr_15 {
		padding: 12px 16px;
		gap: 12px;
		max-width: 100%;
	}

	._releaseImageContainer_1rlrr_41 {
		width: 48px;
		height: 48px;
		border-radius: 6px;
	}

	._releaseTitle_1rlrr_64 {
		font-size: 15px;
	}

	._releaseMeta_1rlrr_75,
	._releaseArtists_1rlrr_98 {
		font-size: 12px;
	}
}
._container_197fv_1 {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

._firstRow_197fv_8 {
	padding: 24px;
}

._trackArtworkTitle_197fv_12 {
	display: flex;
	align-items: center;
	gap: 24px;
}

._trackArtworkTitleContent_197fv_18 {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
}

._trackArtwork_197fv_12 {
	width: 200px;
	height: 200px;
	border-radius: 8px;
	object-fit: cover;
}

._trackArtworkTitleDetails_197fv_32 {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

._explicit_197fv_38 {
	color: var(--text-secondary);
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 600;
}

._loadingContent_197fv_45 {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 200px;
	color: var(--text-secondary);
}

._errorContainer_197fv_53 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	text-align: center;
	gap: 16px;
}

._errorContainer_197fv_53 h2 {
	color: var(--text-primary);
	margin: 0;
	font-size: 24px;
	font-weight: 600;
}

._errorContainer_197fv_53 p {
	color: var(--text-secondary);
	margin: 0;
	font-size: 16px;
}

@media (max-width: 768px) {
	._container_197fv_1 {
		padding: 16px;
		gap: 32px;
	}

	._trackArtworkTitleContent_197fv_18 {
		flex-direction: column;
		text-align: center;
	}

	._trackArtwork_197fv_12 {
		width: 150px;
		height: 150px;
	}
}
._navIconWrapper_1s391_1 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	position: relative;
	padding: 5px;
	transition: margin 0.3s ease;
}

._navIconWrapper_1s391_1 img {
	width: 100%;
	height: 100%;
}

._navIconWrapperArtwork_1s391_17 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	position: relative;
	padding: 0;
	margin-right: 4px;
	border-radius: 4px;
	transition: margin 0.3s ease;
}

._navIconWrapperArtwork_1s391_17 img {
	width: 30px;
	height: 30px;
	object-fit: cover;
	border-radius: 4px;
}

._navSkeletonImage_1s391_37 {
	width: 30px;
	height: 30px;
	border-radius: 4px;
}

._playlistOverlay_1s391_43 {
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	z-index: 1;
}

._playlistOverlayIcon_1s391_54 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px !important;
	height: 20px !important;
	z-index: 2;
	filter: brightness(0) invert(1);
}

._navItemContent_1s391_65 {
	display: flex;
	align-items: center;
	gap: var(--space-300);
	width: 150px;
	position: relative;
	transition: all 0.3s ease;
}

._subItem_1s391_74 {
	width: 100%;
}

._subItems_1s391_78 {
	opacity: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-300);
	transition: all 0.3s ease;
}

._subItem_1s391_74 {
	min-height: 36px;
	padding: var(--space-200) var(--space-300);
	transition: all 0.3s ease;
}

._subItem_1s391_74 ._navText_1s391_92 {
	font-size: 14px;
	font-weight: 500;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

.nav-item {
	transition:
		background-color 0.3s ease,
		padding 0.3s ease;
}

.nav-item._libraryActive_1s391_106 {
	background-color: var(--overlay-100);
	box-shadow: none;
}

.nav-item._libraryActive_1s391_106:hover {
	background-color: var(--overlay-100);
	box-shadow: none;
}

.nav-item:not(._libraryActive_1s391_106)[href='/library']:hover {
	background-color: var(--overlay-100);
}

._downArrowWrapper_1s391_120 {
	position: absolute;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
	cursor: pointer;
}

._downArrowWrapper_1s391_120 img {
	width: 100%;
	height: 100%;
	opacity: 0.7;
	transition: transform 0.3s ease;
}

._downArrowWrapper_1s391_120._expanded_1s391_141 img {
	transform: rotate(180deg);
}

._navText_1s391_92 {
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
	/* Truncate text instead of wrapping */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

@container (max-width: 70px) {
	._navIconWrapper_1s391_1 {
		margin: 0 auto;
	}

	._navItemContent_1s391_65 {
		justify-content: center;
	}

	._subItems_1s391_78 {
		padding-left: 0;
		align-items: center;
	}
}
.become-supporter-prompt {
	display: none;
	width: 185px;
	height: 122px;
	overflow: hidden;
	background-color: var(--overlay-100);
	border-radius: var(--radius-400);
	transition: all var(--animation-duration) var(--animation-timing-function);
	flex-shrink: 0;
	overflow: hidden;
	margin: 9px auto 9px auto;
}

.sidenav-open .become-supporter-prompt {
	display: block;
}

.become-supporter-prompt .content {
	width: 185px;
	padding: var(--space-400);
}

.become-supporter-prompt button.cta {
	padding: var(--space-200) var(--space-400);
	border: none;
	border-radius: var(--radius-300);
	font-size: var(--s);
	font-family: 'Saans', sans-serif;
	font-weight: var(--bold);
	width: 100%;
	background: var(--white-1000);
	color: var(--black-900);
	margin-bottom: 10px;
	margin-top: 10px;
	transition: all var(--animation-duration) var(--animation-timing-function);
}

.become-supporter-prompt button.cta:hover {
	transform: translateY(-3px);
}

.become-supporter-prompt .title {
	font-size: var(--s);
	font-family: 'Saans', sans-serif;
	font-weight: var(--bold);
}

.become-supporter-prompt .subtitle {
	font-size: var(--xxs);
	font-family: 'Saans', sans-serif;
	font-weight: var(--medium);
	opacity: 0.5;
}

.nav-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-300);
	height: 100%;
}

.nav-item:hover,
.nav-item.active-nav {
	background-color: var(--overlay-200);
	color: var(--text-on-brand-hover);
	text-decoration: none;
}

.invites-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-300);
	overflow-y: auto;
	overflow-x: hidden;
	margin-top: 10px;
	flex: 1;
}

.invites-section .invite-item {
	width: 185px;
	overflow: hidden;
	background-color: var(--overlay-100);
	border-radius: var(--radius-400);
	gap: var(--space-300);
	padding: var(--space-400);
	transition: all var(--animation-duration) var(--animation-timing-function);
	flex-shrink: 0;
	overflow: hidden;
}

.invites-section .invite-item:hover {
	filter: brightness(1.1);
}

.invites-section .userSection {
	display: flex;
	gap: var(--space-300);
	width: 100%;
	overflow: hidden;
}

.invites-section .nameInfo {
	display: flex;
	flex-direction: column;
}

.invites-section .displayName {
	font-size: var(--m);
	font-weight: var(--bold);
}

.invites-section .trackInfo {
	display: flex;
	flex-direction: column;
	gap: var(--space-100);
	justify-content: center;
}

.invites-section .trackInfo .trackArtist {
	font-size: 10px;
}

.invites-section .trackInfo .trackTitle {
	font-size: 13px;
	font-weight: var(--semibold);
}

.invites-section .bottomSection {
	background-color: var(--overlay-100);
	display: flex;
	gap: var(--space-200);
	padding: 10px;
	border-radius: var(--radius-400);
	margin-bottom: 10px;
}

.invites-section .bottomSection img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.invites-section .invite-item button.joinButton {
	padding: var(--space-200) var(--space-400);
	border: none;
	border-radius: var(--radius-300);
	font-size: var(--s);
	font-family: 'Saans', sans-serif;
	font-weight: var(--bold);
	width: 100%;
	background: var(--white-1000);
	color: var(--black-900);
	margin-bottom: 10px;
}

.invites-section .invite-item button.dismissButton {
	padding: var(--space-200) var(--space-400);
	border: none;
	border-radius: var(--radius-300);
	font-size: var(--s);
	font-family: 'Saans', sans-serif;
	font-weight: var(--bold);
	width: 100%;
	margin-bottom: 10px;
	background-color: var(--overlay-100);
}

.invites-section .invite-item button {
	transition: all var(--animation-duration) var(--animation-timing-function);
}

.invites-section .invite-item button:disabled {
	opacity: 0.3;
	pointer-events: none;
}

.invites-section .invite-item button:hover {
	transform: translateY(-3px);
}

.left-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--overlay-100);
	border-radius: var(--radius-400);
	width: 185px;
	height: 100%;
	overflow: hidden;
	position: relative;
	container-type: inline-size;
	transition:
		width var(--animation-duration-fast) var(--animation-timing-function),
		border-width var(--animation-duration) var(--animation-timing-function);
}

.panel-content {
	flex: 1 1;
	padding: var(--space-200);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	/* Hide scrollbar */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* Internet Explorer 10+ */
}

.panel-content::-webkit-scrollbar {
	width: 0; /* Remove scrollbar space */
	background: transparent; /* Optional: just make scrollbar invisible */
}

.nav-item {
	display: flex;
	align-items: center;
	gap: var(--space-300);
	padding: var(--space-300);
	text-decoration: none;
	color: var(--text-primary);
	border-radius: var(--radius-200);
	transition: background-color 0.2s ease;
	font-weight: var(--semibold);
	min-height: 44px;
	overflow: hidden;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

.nav-item img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	pointer-events: none;
}

.nav-text {
	font-weight: 600;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.9);
	margin-left: 1px;
}

/* Desktop styles (> 500px) */
@media (min-width: 501px) {
	.left-panel:not(.sidenav-open .left-panel) {
		width: 60px;
	}

	.left-panel-padder:not(.sidenav-open .left-panel-padder) {
		width: 70px;
	}
}

/* Mobile styles (≤ 500px) */
@media (max-width: 500px) {
	.left-panel {
		position: fixed;
		top: 0;
		left: 0;
		transform: translateX(-100%);
		width: 100%;
		max-width: 300px;
		border-radius: 0;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		height: 100%;
		overflow-y: auto;
		/* Hide scrollbar */
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* Internet Explorer 10+ */
	}

	.left-panel::-webkit-scrollbar {
		width: 0; /* Remove scrollbar space */
		background: transparent; /* Optional: just make scrollbar invisible */
	}

	.sidenav-open .left-panel {
		transform: translateX(0);
	}

	/* Hide the padder on mobile as the panel is fixed */
	.left-panel-padder {
		display: none;
	}

	.nav-item {
		min-height: 48px;
		padding: var(--space-400);
		margin: 2px 0;
	}

	.nav-text {
		font-size: 16px;
	}

	.panel-content {
		padding: var(--space-400);
		padding-top: calc(65px + var(--space-400));
		/* Navigation bar height without safe area (handled by scroll behavior) */
	}
}

.left-panel-padder {
	width: 190px;
	height: 100%;
	background: #000000;
	transition: width var(--animation-duration) var(--animation-timing-function);
}

/* Mobile styles (≤ 300px) */
@media (max-width: 550px) {
	.left-panel {
		display: none;
	}
}

/* Mobile overlay */
.mobile-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	z-index: 100;
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	-webkit-tap-highlight-color: transparent;
	will-change: opacity;
}

@media (max-width: 500px) {
	.mobile-overlay {
		display: block;
	}

	.sidenav-open .mobile-overlay {
		opacity: 1;
		pointer-events: auto;
	}

	body:not(.sidenav-open) .mobile-overlay {
		pointer-events: none;
	}

	.collapse-button {
		display: none;
	}
}

/* PIP Mode */
.pip-mode-for-real .main-columns {
	margin: 0 !important;
	padding-left: 0px !important;
}

.collapse-section {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-left: 22px;
	height: 55px;
}

.collapse-button {
	opacity: 0.6;
}

.collapse-button:hover {
	opacity: 1;
	cursor: pointer;
}

.profile-avatar {
	width: var(--icon-500);
	height: var(--icon-500);
	border-radius: var(--radius-full);
	object-fit: cover;
	margin-right: var(--space-600);
	cursor: pointer;
}

.visualizer {
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
}

.bar {
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.bar1 {
	animation-name: bar1;
	animation-delay: 0s;
}

.bar2 {
	animation-name: bar2;
	animation-delay: 0.2s;
}

.bar3 {
	animation-name: bar3;
	animation-delay: 0.4s;
}

@keyframes bar1 {
	0%,
	100% {
		height: 8px;
		y: 4px;
	}

	50% {
		height: 12px;
		y: 2px;
	}
}

@keyframes bar2 {
	0%,
	100% {
		height: 12px;
		y: 2px;
	}

	50% {
		height: 8px;
		y: 4px;
	}
}

@keyframes bar3 {
	0%,
	100% {
		height: 8px;
		y: 4px;
	}

	50% {
		height: 12px;
		y: 2px;
	}
}

@keyframes bounceIn {
	0% {
		transform: scale(0);
		opacity: 0;
	}

	50% {
		transform: scale(1.2);
	}

	70% {
		transform: scale(0.9);
	}

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

.friend-icon-container {
	position: relative;
	display: inline-block;
	min-width: 20px;
	min-height: 20px;
}

.queue-icon-container {
	position: relative;
	display: inline-block;
	min-width: 20px;
	min-height: 20px;
}

.friend-counter {
	position: absolute;
	top: -6px;
	right: -6px;
	background-color: #ff4444;
	color: white;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	min-height: 14px;
	min-width: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: bold;
	animation: bounceIn 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

body:not(.sidenav-open) .invites-section {
	width: 0;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body:not(.sidenav-open) .become-supporter-prompt {
	width: 0;
	padding: 0;

	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 750px) {
	.left-panel {
		display: none;
	}
}
._container_1i340_1 {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: var(--space-500);
	gap: var(--space-500);
	background-color: var(--overlay-100);
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

._container_1i340_1::-webkit-scrollbar {
	display: none;
}

._header_1i340_18 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: var(--space-400);
	border-radius: var(--radius-300);
}

._titleSection_1i340_27 {
	display: flex;
	align-items: center;
	gap: var(--space-300);
}

._icon_1i340_33 {
	width: 20px;
	height: 20px;
}

._title_1i340_27 {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-100);
	margin: 0;
}

._toggleButton_1i340_45 {
	background: var(--surface-300);
	border: 1px solid var(--overlay-100);
	color: var(--text-200);
	padding: var(--space-200) var(--space-400);
	border-radius: var(--radius-300);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

._toggleButton_1i340_45:hover {
	background: var(--surface-300);
	border-color: var(--border-200);
}

._toggleButton_1i340_45._active_1i340_62 {
	background: var(--overlay-100);
	border-color: var(--overlay-200);
	color: white;
}

._toggleButton_1i340_45._active_1i340_62:hover {
	background: var(--overlay-200);
	border-color: var(--overlay-300);
}

._content_1i340_73 {
	display: flex;
	flex-direction: column;
	gap: var(--space-500);
	flex: 1;
}

._description_1i340_80 {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-200);
	margin: 0;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: break-word;
}

._seedTracks_1i340_90 {
	display: flex;
	flex-direction: column;
	gap: var(--space-400);
	background-color: var(--overlay-100);
	border-radius: var(--radius-300);
	padding: var(--space-400);
}

._sectionTitle_1i340_99 {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-100);
	margin: 0;
}

._trackList_1i340_106 {
	display: flex;
	flex-direction: column;
	gap: var(--space-300);
}
._root_m6cl6_1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-300);
	background: var(--overlay-200);
	border-radius: var(--radius-300);
	transition: background-color 0.2s ease;
	border: 1px solid var(--overlay-200);
	min-height: 60px;
}

._root_m6cl6_1:hover {
	background: var(--surface-300);
}

._trackInfo_m6cl6_17 {
	display: flex;
	align-items: center;
	gap: var(--space-300);
	flex: 1;
	min-width: 0;
}

._artwork_m6cl6_25 {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-200);
	object-fit: cover;
	flex-shrink: 0;
}

._details_m6cl6_33 {
	display: flex;
	flex-direction: column;
	gap: var(--space-100);
	min-width: 0;
	flex: 1;
}

._title_m6cl6_41 {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-100);
	text-decoration: none;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

._title_m6cl6_41:hover {
	text-decoration: none;
}

._artists_m6cl6_58 {
	font-size: 12px;
	color: var(--text-200);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

._artistLink_m6cl6_66 {
	color: var(--text-200);
	text-decoration: none;
}

._artistLink_m6cl6_66:hover {
	color: var(--text-100);
	text-decoration: underline;
}

._removeButton_m6cl6_76 {
	background: none;
	border: none;
	color: var(--text-300);
	font-size: 18px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

._removeButton_m6cl6_76:hover {
	background: var(--surface-200);
	color: var(--text-100);
}

._primeSeed_m6cl6_97 {
	border-color: var(--accent-primary);
}

._primeSeedIndicator_m6cl6_101 {
	color: var(--accent-primary);
	font-size: 16px;
	margin-left: var(--space-300);
	flex-shrink: 0;
}
._container_1mdk3_1 {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--overlay-100);
	padding: var(--space-400);
	overflow-y: auto;
}

._header_1mdk3_10 {
	display: flex;
	flex-direction: column;
	gap: var(--space-200);
	margin-bottom: var(--space-600);
	padding: var(--space-400);
}

._headerTop_1mdk3_18 {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

._headerActions_1mdk3_24 {
	display: flex;
	align-items: center;
	gap: var(--space-200);
}

._title_1mdk3_30 {
	margin: 0;
	color: var(--text-default);
	font-size: 20px;
	font-weight: var(--semibold);
	font-family: var(--font-family-sans);
}

._subtitle_1mdk3_38 {
	margin: 0;
	color: var(--text-secondary);
	font-size: 12px;
	font-weight: var(--regular);
	font-family: var(--font-family-sans);
}

._settingsButton_1mdk3_46,
._leaveSessionButton_1mdk3_47 {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: var(--space-200);
	border-radius: var(--radius-200);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--animation-duration-fast) var(--animation-timing-function);
}

._settingsButton_1mdk3_46:hover,
._leaveSessionButton_1mdk3_47:hover {
	background-color: var(--overlay-200);
}

._settingsIcon_1mdk3_64,
._actionIcon_1mdk3_65 {
	width: 24px;
	height: 24px;
	opacity: 0.9;
}

._settingsSection_1mdk3_71 {
	display: flex;
	flex-direction: column;
	gap: var(--space-700);
	background-color: var(--overlay-100);
	border-radius: var(--radius-300);
	padding: var(--space-600);
	margin-bottom: var(--space-600);
	border: 1px solid var(--border-200);
	animation: _slideDown_1mdk3_1 var(--animation-duration-fast) var(--animation-timing-function);
}

@keyframes _slideDown_1mdk3_1 {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

._settingItem_1mdk3_94 {
	display: flex;
	flex-direction: column;
	gap: var(--space-100);
}

._settingLabel_1mdk3_100 {
	color: var(--text-default);
	font-size: var(--scale-400);
	font-weight: var(--semibold);
	font-family: var(--font-family-sans);
}

._settingDescription_1mdk3_107 {
	color: var(--text-tertiary);
	font-size: var(--scale-300);
	font-weight: var(--regular);
	font-family: var(--font-family-sans);
}

/* Form Input Styles */
._inputGroup_1mdk3_115 {
	display: flex;
	flex-direction: column;
	gap: var(--space-500);
}

._label_1mdk3_121 {
	font-size: 13px;
	font-weight: var(--regular);
	color: var(--text-secondary);
}

._textInput_1mdk3_127,
._textArea_1mdk3_128 {
	width: 100%;
	padding: 12px 16px;
	background-color: var(--overlay-200);
	border: 1px solid var(--border-100);
	border-radius: 8px;
	color: var(--text-primary);
	font-size: 14px;
	font-family: var(--font-family-sans);
	outline: none;
	transition: border-color 0.2s ease;
}

._textInput_1mdk3_127:focus,
._textArea_1mdk3_128:focus {
	border-color: var(--accent-primary);
}

._textInput_1mdk3_127::placeholder,
._textArea_1mdk3_128::placeholder {
	color: var(--text-secondary);
}

._textArea_1mdk3_128 {
	min-height: 80px;
	line-height: 1.5;
	resize: vertical;
}

/* Privacy Toggle */
._privacyToggle_1mdk3_158 {
	display: flex;
	background-color: var(--overlay-200);
	border-radius: 8px;
	padding: 4px;
	gap: 4px;
}

._privacyOption_1mdk3_166 {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	background: none;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
}

._privacyOption_1mdk3_166._active_1mdk3_182 {
	background-color: var(--overlay-300);
	color: var(--text-primary);
}

._privacyIcon_1mdk3_187 {
	width: 16px;
	height: 16px;
	margin-right: 6px;
}

._privacyOption_1mdk3_166._active_1mdk3_182 ._privacyIcon_1mdk3_187 {
	filter: brightness(0) invert(1);
}

._participantsGrid_1mdk3_197 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	flex: 1;
	width: 100%;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
	._container_1mdk3_1 {
		padding: var(--space-300);
	}

	._header_1mdk3_10 {
		padding: var(--space-300);
	}

	._participantsGrid_1mdk3_197 {
		grid-template-columns: 1fr;
		gap: var(--space-400);
	}

	._settingsSection_1mdk3_71 {
		padding: var(--space-400);
	}
}

@media (max-width: 480px) {
	._participantsGrid_1mdk3_197 {
		gap: var(--space-300);
	}
}

/* Focus States for Accessibility */
._textInput_1mdk3_127:focus,
._textArea_1mdk3_128:focus,
._privacyOption_1mdk3_166:focus,
._settingsButton_1mdk3_46:focus,
._leaveSessionButton_1mdk3_47:focus {
	outline: 2px solid var(--accent-primary);
	outline-offset: 2px;
}
/* Main Modal Container */
._modal_6hr7a_2 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	animation: _fadeIn_6hr7a_1 0.2s ease-out;
}

._modalContent_6hr7a_17 {
	background-color: var(--gray-1000);
	border: 1px solid var(--border-300);
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	width: 280px;
	min-height: 140px;
	max-height: 400px;
	overflow: hidden;
	position: relative;
	animation: _slideIn_6hr7a_1 0.3s ease-out;
	display: flex;
	flex-direction: column;
	outline: none;
}

/* Header Section */
._participantInfo_6hr7a_34 {
	display: flex;
	align-items: center;
	padding: 20px;
	background-color: var(--overlay-100);
	border-bottom: 1px solid var(--border-200);
}

._participantAvatar_6hr7a_42 {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	margin-right: 16px;
	background-color: var(--bg-depth-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

._avatarImage_6hr7a_55 {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

._participantDetails_6hr7a_62 {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

._participantName_6hr7a_70 {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

._participantRole_6hr7a_80 {
	font-size: 12px;
	color: var(--text-tertiary);
	margin: 0;
	line-height: 1.2;
	text-transform: capitalize;
}

/* Action List */
._actionList_6hr7a_89 {
	flex: 1;
	overflow-y: auto;
}

._actionButton_6hr7a_94 {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 16px 20px;
	background: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
	text-align: left;
	position: relative;
}

._actionButton_6hr7a_94:hover {
	background-color: var(--bg-depth-2);
}

._actionButton_6hr7a_94:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

._actionButton_6hr7a_94:disabled:hover {
	background-color: transparent;
}

._actionButton_6hr7a_94._focused_6hr7a_120 {
	background-color: var(--bg-depth-2);
	outline: 2px solid var(--accent-primary);
	outline-offset: -2px;
}

._actionIcon_6hr7a_126 {
	width: 20px;
	height: 20px;
	margin-right: 16px;
	flex-shrink: 0;
}

._actionLabel_6hr7a_133 {
	flex: 1;
	font-size: 15px;
	font-weight: 500;
	color: var(--text-primary);
	margin: 0;
}

/* Animations */
@keyframes _fadeIn_6hr7a_1 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes _slideIn_6hr7a_1 {
	from {
		transform: translateY(-20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Mobile Responsive */
@media (max-width: 480px) {
	._modalContent_6hr7a_17 {
		margin: 20px;
		max-width: none;
		width: calc(100vw - 40px);
	}

	._participantInfo_6hr7a_34 {
		padding: 16px;
	}

	._actionButton_6hr7a_94 {
		padding: 14px 16px;
	}
}

/* Focus states */
._modal_6hr7a_2:focus {
	outline: none;
}

._actionButton_6hr7a_94:focus,
._actionButton_6hr7a_94:focus-visible {
	outline: 2px solid var(--accent-primary);
	outline-offset: -2px;
}

._actionButton_6hr7a_94:focus:not(:focus-visible) {
	outline: none;
}
._participantCard_m3d5w_1 {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 14px 5px;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	border: 1px solid var(--border-300);
	background-color: transparent;
	transition: all var(--animation-duration) var(--animation-timing-function);
	aspect-ratio: 1 / 1;
	z-index: 0;
}

._backgroundImageOverlay_m3d5w_18 {
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	background-size: cover;
	background-position: center;
	opacity: 0.2;
	filter: blur(7px);
	z-index: 1;
	border-radius: inherit;
}

._backgroundOverlay_m3d5w_32 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
	z-index: 2;
	border-radius: inherit;
	transition: opacity var(--animation-duration) var(--animation-timing-function);
}

._participantCard_m3d5w_1:hover {
	box-shadow: var(--shadow-300);
}

._participantCard_m3d5w_1:hover ._backgroundOverlay_m3d5w_32 {
	opacity: 0.4;
}

._avatarContainer_m3d5w_52,
._nameContainer_m3d5w_53 {
	position: relative;
	z-index: 3;
}

._topLeftIcon_m3d5w_58 {
	position: absolute !important;
	top: 12px;
	left: 12px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
}

._iconImage_m3d5w_70 {
	width: 18px;
	height: 18px;
	opacity: 0.9;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

._moreButton_m3d5w_77 {
	position: absolute !important;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateX(0px);
	transition: all var(--animation-duration-fast) var(--animation-timing-function);
	backdrop-filter: blur(4px);
	z-index: 4;
}

._participantCard_m3d5w_1:hover ._moreButton_m3d5w_77 {
	opacity: 1;
	transform: translateX(0);
}

._moreButton_m3d5w_77:hover {
	background-color: var(--overlay-200);
	border-color: rgba(255, 255, 255, 0.2);
	transform: scale(1.05);
}

._moreButton_m3d5w_77:active {
	transform: scale(0.98);
}

._moreIcon_m3d5w_110 {
	width: 14px;
	height: 14px;
	opacity: 0.9;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

._avatarContainer_m3d5w_52 {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}

._avatar_m3d5w_52 {
	width: 76px;
	height: 76px;
	border-radius: var(--radius-full);
	object-fit: cover;
	background-color: var(--overlay-200);
	border: 2px solid rgba(255, 255, 255, 0.15);
	transition: all var(--animation-duration-fast) var(--animation-timing-function);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

._participantCard_m3d5w_1:hover ._avatar_m3d5w_52 {
	border-color: rgba(255, 255, 255, 0.25);
	transform: scale(1.02);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

._nameContainer_m3d5w_53 {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

._participantName_m3d5w_148 {
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	line-height: 18px;
	font-weight: var(--semibold);
	font-family: var(--font-family-sans);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
	margin-top: 3px;
	transition: all var(--animation-duration-fast) var(--animation-timing-function);
}

._participantCard_m3d5w_1:hover ._participantName_m3d5w_148 {
	color: rgba(255, 255, 255, 1);
}

@media (max-width: 768px) {
	._participantCard_m3d5w_1 {
		padding: 10px 4px;
	}

	._backgroundImageOverlay_m3d5w_18 {
		opacity: 0.25;
	}

	._avatar_m3d5w_52 {
		width: 60px;
		height: 60px;
		border: 1.5px solid rgba(255, 255, 255, 0.15);
	}

	._participantCard_m3d5w_1:hover ._avatar_m3d5w_52 {
		border-color: rgba(255, 255, 255, 0.25);
	}

	._participantName_m3d5w_148 {
		font-size: 12px;
		line-height: 16px;
	}

	._topLeftIcon_m3d5w_58,
	._moreButton_m3d5w_77 {
		width: 16px;
		height: 16px;
		top: 8px;
	}

	._topLeftIcon_m3d5w_58 {
		left: 8px;
	}

	._moreButton_m3d5w_77 {
		right: 8px;
	}

	._iconImage_m3d5w_70 {
		width: 16px;
		height: 16px;
	}

	._moreIcon_m3d5w_110 {
		width: 12px;
		height: 12px;
	}

	._avatarContainer_m3d5w_52 {
		margin-bottom: 6px;
	}

	._backgroundOverlay_m3d5w_32 {
		background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
	}

	._participantCard_m3d5w_1:hover ._backgroundOverlay_m3d5w_32 {
		opacity: 0.3;
	}
}

@keyframes _shimmer_m3d5w_1 {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

._avatar_m3d5w_52._loading_m3d5w_237 {
	background: linear-gradient(90deg, var(--overlay-200) 0%, var(--overlay-300) 50%, var(--overlay-200) 100%);
	background-size: 200% 100%;
	animation: _shimmer_m3d5w_1 1.5s infinite;
}
._root_q4ej0_1 {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--radius-400);
	width: 310px;
	height: 100%;
	overflow: hidden;
	position: relative;
	transition:
		width 0.2s ease-in,
		border-width 0.2s ease-in;
}

._tabContent_q4ej0_15 {
	height: 100%;
	width: 100%;
}

._hide_q4ej0_20 {
	width: 0px !important;
}

._floatingRoot_q4ej0_24 {
	display: none;
	width: 100vw;
	height: 100%;
	position: absolute;
	transition:
		width 0.2s ease-in,
		border-width 0.2s ease-in;
	right: 0;
	border-radius: var(--radius-400);

	._tabContent_q4ej0_15 {
		position: absolute;
		z-index: 1;
		width: 310px;
		height: 100%;
		right: 0;
		transition:
			width 0.2s ease-in,
			border-width 0.2s ease-in;
		background-color: rgba(0, 0, 0, 0.85);
		padding: 10px;
		backdrop-filter: blur(10px);
		border-radius: var(--radius-400);
	}
}

@media (max-width: 768px) {
	._floatingRoot_q4ej0_24 {
		display: none !important;
	}
}

._tabContentHidden_q4ej0_57 {
	display: none;
}

._tabContentVisible_q4ej0_61 {
	display: block;
}

._floatingBackdrop_q4ej0_65 {
	backdrop-filter: none !important;
	background-color: transparent !important;
}

@media (max-width: 980px) {
	._root_q4ej0_1 {
		display: none;
	}

	._floatingRoot_q4ej0_24 {
		display: block;
	}
}
._container_v86ch_1 {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: var(--space-200);
	gap: var(--space-400);
	width: 440px;
	max-width: 90%;
	height: 44px;
	margin-top: 4px;
	background: var(--overlay-100);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 17px;
	position: relative;
	cursor: text;
	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease,
		transform 0.3s ease;
	overflow: visible;
	-webkit-app-region: no-drag;
}

._animateAttention_v86ch_24 {
	border-color: rgba(170, 120, 255, 0.8);
	box-shadow: 0 0 15px 5px rgba(170, 120, 255, 0.4);
	transform: scale(1.02);
	transition:
		border-color 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		box-shadow 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

._searchIcon_v86ch_34 {
	width: 16px;
	height: 16px;
	margin: 10px;
	opacity: 1;
	color: #fff;
	flex-shrink: 0;
	position: absolute;
	pointer-events: none;
	transition: all 0.3s ease;
}

._animateAttention_v86ch_24 ._searchIcon_v86ch_34 {
	animation: _searchIconPulse_v86ch_1 1.5s ease-in-out infinite;
}

@keyframes _searchIconPulse_v86ch_1 {
	0% {
		transform: scale(1);
		filter: drop-shadow(0 0 8px rgba(170, 120, 255, 0.7));
	}

	50% {
		transform: scale(1.5);
		filter: drop-shadow(0 0 15px rgba(170, 120, 255, 1));
	}

	100% {
		transform: scale(1);
		filter: drop-shadow(0 0 8px rgba(170, 120, 255, 0.7));
	}
}

._searchInput_v86ch_67 {
	background: transparent;
	border: none;
	outline: none;
	color: white;
	font-size: 13px;
	width: 100%;
	padding: 0 36px;
	min-width: 0;
	transition: all 0.3s ease;
}

._animateAttention_v86ch_24 ._searchInput_v86ch_67::placeholder {
	animation: _placeholderPulse_v86ch_1 2s ease-in-out infinite;
	opacity: 1 !important;
	/* Force high opacity during animation */
}

@keyframes _placeholderPulse_v86ch_1 {
	0% {
		opacity: 0.9;
		color: rgba(255, 255, 255, 0.9);
	}

	50% {
		opacity: 1;
		color: rgba(170, 120, 255, 1);
	}

	100% {
		opacity: 0.9;
		color: rgba(255, 255, 255, 0.9);
	}
}

/* Add a subtle background pulse to the search input */
._animateAttention_v86ch_24 ._searchInput_v86ch_67 {
	background: linear-gradient(90deg, rgba(170, 120, 255, 0.05) 0%, rgba(170, 120, 255, 0.1) 50%, rgba(170, 120, 255, 0.05) 100%);
	animation: _backgroundPulse_v86ch_1 3s ease-in-out infinite;
}

@keyframes _backgroundPulse_v86ch_1 {
	0% {
		background-position: 0% 50%;
	}

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

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

._searchInput_v86ch_67::placeholder {
	color: white;
	opacity: 0.5;
}

/* Let's not display this until we refactor to only show this 'x' when someone has entered a prompt. */

._clearButton_v86ch_129 {
	position: absolute;
	right: 8px;
	top: 0;
	bottom: 0;
	width: 36px;
	background: transparent;
	border: none;
	display: none;
}

@media (max-width: 750px) {
	._container_v86ch_1 {
		width: 100%;
		max-width: 100%;
	}
}

/* Musical Notes Animation */
._musicNote_v86ch_148 {
	position: absolute;
	width: 24px;
	height: 24px;
	opacity: 0;
	pointer-events: none;
	z-index: 101;
	filter: drop-shadow(0 0 8px rgba(170, 120, 255, 0.9));
}

._musicNote1_v86ch_158 {
	top: -10px;
	left: 5%;
}

._musicNote2_v86ch_163 {
	top: -10px;
	right: 5%;
}

._musicNote3_v86ch_168 {
	bottom: -10px;
	left: 10%;
}

._musicNote4_v86ch_173 {
	bottom: -10px;
	right: 10%;
}

._animateAttention_v86ch_24 ._musicNote1_v86ch_158 {
	animation: _noteAppear1_v86ch_1 4s ease-out forwards;
}

._animateAttention_v86ch_24 ._musicNote2_v86ch_163 {
	animation: _noteAppear2_v86ch_1 4s ease-out forwards;
	animation-delay: 0.3s;
}

._animateAttention_v86ch_24 ._musicNote3_v86ch_168 {
	animation: _noteAppear3_v86ch_1 4s ease-out forwards;
	animation-delay: 0.6s;
}

._animateAttention_v86ch_24 ._musicNote4_v86ch_173 {
	animation: _noteAppear4_v86ch_1 4s ease-out forwards;
	animation-delay: 0.9s;
}

@keyframes _noteAppear1_v86ch_1 {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(0);
	}

	20% {
		opacity: 1;
		transform: translate(0, 0) scale(1.2);
	}

	30% {
		transform: translate(0, 0) scale(1) rotate(5deg);
	}

	40% {
		transform: translate(0, 0) scale(1) rotate(-5deg);
	}

	50% {
		transform: translate(0, 0) scale(1) rotate(0);
	}

	80% {
		opacity: 1;
		transform: translate(20px, 10px) scale(0.8);
	}

	100% {
		opacity: 0;
		transform: translate(30px, 15px) scale(0.2);
	}
}

@keyframes _noteAppear2_v86ch_1 {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(0);
	}

	20% {
		opacity: 1;
		transform: translate(0, 0) scale(1.2);
	}

	30% {
		transform: translate(0, 0) scale(1) rotate(-5deg);
	}

	40% {
		transform: translate(0, 0) scale(1) rotate(5deg);
	}

	50% {
		transform: translate(0, 0) scale(1) rotate(0);
	}

	80% {
		opacity: 1;
		transform: translate(-20px, 10px) scale(0.8);
	}

	100% {
		opacity: 0;
		transform: translate(-30px, 15px) scale(0.2);
	}
}

@keyframes _noteAppear3_v86ch_1 {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(0);
	}

	20% {
		opacity: 1;
		transform: translate(0, 0) scale(1.2);
	}

	30% {
		transform: translate(0, 0) scale(1) rotate(5deg);
	}

	40% {
		transform: translate(0, 0) scale(1) rotate(-5deg);
	}

	50% {
		transform: translate(0, 0) scale(1) rotate(0);
	}

	80% {
		opacity: 1;
		transform: translate(20px, -10px) scale(0.8);
	}

	100% {
		opacity: 0;
		transform: translate(30px, -15px) scale(0.2);
	}
}

@keyframes _noteAppear4_v86ch_1 {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(0);
	}

	20% {
		opacity: 1;
		transform: translate(0, 0) scale(1.2);
	}

	30% {
		transform: translate(0, 0) scale(1) rotate(-5deg);
	}

	40% {
		transform: translate(0, 0) scale(1) rotate(5deg);
	}

	50% {
		transform: translate(0, 0) scale(1) rotate(0);
	}

	80% {
		opacity: 1;
		transform: translate(-20px, -10px) scale(0.8);
	}

	100% {
		opacity: 0;
		transform: translate(-30px, -15px) scale(0.2);
	}
}

/* Constellation Lines */
._constellationLine_v86ch_334 {
	position: absolute;
	background: linear-gradient(90deg, rgba(170, 120, 255, 0.9), rgba(75, 110, 255, 0.9));
	height: 2px;
	opacity: 0;
	pointer-events: none;
	z-index: 5;
	transform-origin: left center;
	box-shadow: 0 0 5px rgba(170, 120, 255, 0.6);
}

._line1_v86ch_345 {
	top: 4px;
	left: 5%;
	width: 60px;
}

._line2_v86ch_351 {
	top: 4px;
	right: 30%;
	width: 60px;
	transform: rotate(45deg);
}

._line3_v86ch_358 {
	bottom: 4px;
	left: 60%;
	width: 60px;
	transform: rotate(-30deg);
}

._animateAttention_v86ch_24 ._line1_v86ch_345 {
	animation: _lineAppear_v86ch_1 3s ease-out forwards;
	animation-delay: 0.4s;
}

._animateAttention_v86ch_24 ._line2_v86ch_351 {
	animation: _lineAppear_v86ch_1 3s ease-out forwards;
	animation-delay: 0.7s;
}

._animateAttention_v86ch_24 ._line3_v86ch_358 {
	animation: _lineAppear_v86ch_1 3s ease-out forwards;
	animation-delay: 1s;
}

@keyframes _lineAppear_v86ch_1 {
	0% {
		opacity: 0;
		transform: scaleX(0);
	}

	30% {
		opacity: 1;
		transform: scaleX(1);
	}

	60% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scaleX(1);
	}
}

/* Traveling light effect on constellation lines */
._travelingLight_v86ch_402 {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: white;
	box-shadow: 0 0 10px 5px rgba(170, 120, 255, 0.8);
	opacity: 0;
	pointer-events: none;
	z-index: 6;
}

._light1_v86ch_414 {
	top: 8px;
	left: 60%;
}

._light2_v86ch_419 {
	top: 8px;
	right: 20%;
}

._light3_v86ch_424 {
	bottom: 8px;
	left: 40%;
}

._animateAttention_v86ch_24 ._light1_v86ch_414 {
	animation: _lightTravel1_v86ch_1 2s ease-out forwards;
	animation-delay: 0.8s;
}

._animateAttention_v86ch_24 ._light2_v86ch_419 {
	animation: _lightTravel2_v86ch_1 2s ease-out forwards;
	animation-delay: 1.1s;
}

._animateAttention_v86ch_24 ._light3_v86ch_424 {
	animation: _lightTravel3_v86ch_1 2s ease-out forwards;
	animation-delay: 1.4s;
}

@keyframes _lightTravel1_v86ch_1 {
	0% {
		opacity: 1;
		transform: translateX(0);
	}

	100% {
		opacity: 0;
		transform: translateX(60px);
	}
}

@keyframes _lightTravel2_v86ch_1 {
	0% {
		opacity: 1;
		transform: translateX(0) rotate(45deg);
	}

	100% {
		opacity: 0;
		transform: translateX(-60px) rotate(45deg);
	}
}

@keyframes _lightTravel3_v86ch_1 {
	0% {
		opacity: 1;
		transform: translateX(0) rotate(-30deg);
	}

	100% {
		opacity: 0;
		transform: translateX(60px) rotate(-30deg);
	}
}
._container_1gu65_1 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	gap: 9px;
	width: 100%;
	max-width: 100%;
	height: 62px;
	-webkit-app-region: drag;

	button {
		-webkit-app-region: no-drag;
	}
}

.electron-app ._container_1gu65_1 {
	padding-left: 60px;

	._logoContainer_1gu65_21 {
		display: none;
	}
}

.electron-app-windows ._container_1gu65_1 {
	padding-left: 0;
	padding-right: 140px;
}

._leftSection_1gu65_31 {
	display: flex;
	align-items: center;
	gap: var(--space-800);
	margin-left: 12px;
	flex: 1;
	min-width: 0;
}

._centerSection_1gu65_40 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 2;
	min-width: 0;
}

._rightSection_1gu65_48 {
	display: flex;
	align-items: center;
	gap: var(--space-400);
	flex: 1;
	justify-content: flex-end;
	position: relative;
}

._statusIndicator_1gu65_57 {
	position: absolute;
	top: 28px;
	right: 20px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid var(--white-00);
}

._statusIndicator_1gu65_57._disconnected_1gu65_67 {
	background-color: var(--red-300);
}

._statusIndicator_1gu65_57._needsReconnect_1gu65_71 {
	background-color: var(--orange-300);
}

._statusIndicator_1gu65_57._connected_1gu65_75 {
	background-color: var(--blue-300);
}

._statusIndicator_1gu65_57._localPlayer_1gu65_79 {
	background-color: var(--green-300);
}

._logoContainer_1gu65_21 {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: var(--space-200);
	-webkit-app-region: no-drag;
}

._logo_1gu65_21 {
	cursor: pointer;
	-webkit-app-region: no-drag;
}

._logo_1gu65_21._disabled_1gu65_98 {
	cursor: not-allowed;
	opacity: 0.5;
}

._logo_1gu65_21 svg {
	width: 21px;
	height: 21px;
}

._navArrow_1gu65_108 {
	padding: 12px;
	/* Increased padding for bigger click target */
}

._navArrowGroup_1gu65_113 {
	display: flex;
	gap: var(--space-200);
}

._toggleNav_1gu65_118 {
	padding-left: 12px;
	/* Add left padding to the toggle navigation icon */
}

/* Loading state */
@keyframes _pulse_1gu65_1 {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}

._loading_1gu65_138 {
	animation: _pulse_1gu65_1 1.5s ease-in-out infinite;
	pointer-events: none;
}

/* Ensure navigation stays visible at all sizes */
@media (min-width: 600px) {
	._centerSection_1gu65_40 {
		justify-content: center;
	}
}

@media (max-width: 600px) {
	._toggleNav_1gu65_118 {
		display: none;
	}
}

@media (max-width: 840px) {
	._container_1gu65_1 {
		padding: 0;
		gap: var(--space-800);
	}

	._leftSection_1gu65_31 {
		gap: var(--space-200);
		flex: 0 1 auto;
	}

	._rightSection_1gu65_48 {
		gap: var(--space-200);
		flex: 0 1 auto;
	}
}

@media (max-width: 500px) {
	._hamburgerButton_1gu65_174 {
		display: flex;
	}

	._iconButton_1gu65_178 {
		width: 36px;
		height: 36px;
		min-width: 36px;
		min-height: 36px;
	}

	._leftSection_1gu65_31 {
		flex: 0 0 auto;
	}
	._centerSection_1gu65_40 {
		display: none;
	}
}

body.sidenav-open {
	overflow: hidden;
}

._profileAvatar_1gu65_197 {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: var(--space-600);
	cursor: pointer;
	background-color: var(--overlay-200);
}

._loginButton_1gu65_207 {
	opacity: 1;
	padding: 11px 15px;
	font-size: 13px;
	font-weight: var(--medium);
	color: var(--text-primary);
	white-space: nowrap;
	background-color: var(--overlay-00);
}
._loginButton_1gu65_207:hover {
	background-color: var(--overlay-100);
	transition: background-color 0.3s ease;
}

._authButtonsContainer_1gu65_221 {
	display: flex;
	align-items: center;
}

._authButton_1gu65_221 {
	border-radius: 100px;
	margin-left: 8px;
}

._createAccountButton_1gu65_231 {
	background-image: linear-gradient(to right, var(--purple-300), var(--blue-300), var(--blue-300), var(--purple-300));
	background-size: 260% auto;
	background-position: right center;
	color: var(--white-700);
	transition: background-position 0.5s ease;
}

._createAccountButton_1gu65_231:hover {
	background-position: left center;
	transition: background-position 0.5s ease;
	color: var(--white-1000);
}

._authButtonsContainer_1gu65_221 ._authButton_1gu65_221:first-child {
	margin-left: 0;
}

@media (max-width: 580px) {
	._signInButton_1gu65_250 {
		display: none !important;
	}
}
._root_jmzi6_1 {
	display: flex;
	flex-direction: column;
	min-width: 240px;
	background: rgba(10, 10, 10, 0.98);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-top: 0px;
	border-radius: var(--radius-400);
	backdrop-filter: blur(24px) saturate(1.8);
	-webkit-backdrop-filter: blur(24px) saturate(1.8);
	box-shadow:
		0 20px 25px -5px rgba(0, 0, 0, 0.3),
		0 10px 10px -5px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	overflow: hidden;
	animation: _dropdownSlide_jmzi6_1 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes _dropdownSlide_jmzi6_1 {
	from {
		opacity: 0;
		transform: translateY(-4px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* User Header Section */
._userHeader_jmzi6_31 {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.02);
	position: relative;
}

._userHeader_jmzi6_31::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03) 50%, transparent);
}

._userAvatar_jmzi6_50 {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

._userAvatar_jmzi6_50 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	animation: _fadeIn_jmzi6_1 0.2s ease-in-out;
}

@keyframes _fadeIn_jmzi6_1 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

._avatarPlaceholder_jmzi6_78 {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
}

._userInfo_jmzi6_84 {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

._greeting_jmzi6_90 {
	font-family:
		'Saans',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	font-size: 12px;
	font-weight: 450;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.2px;
}

._userName_jmzi6_103 {
	font-family:
		'Saans',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
	letter-spacing: 0.1px;
}

/* Menu Items */
._menuItems_jmzi6_117 {
	padding: 8px;
}

._menuItem_jmzi6_117 {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	background: transparent;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.1s ease;
	position: relative;
	overflow: hidden;
}

._menuItem_jmzi6_117::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.02) 50%, transparent);
	transform: translateX(-100%);
	transition: transform 0.25s ease;
}

._menuItem_jmzi6_117:hover::before {
	transform: translateX(100%);
}

._menuItem_jmzi6_117:hover {
	background: rgba(255, 255, 255, 0.04);
}

._menuItem_jmzi6_117:active {
	background: rgba(255, 255, 255, 0.06);
	transform: scale(0.99);
}

._menuIcon_jmzi6_161 {
	width: 20px;
	height: 20px;
	color: rgba(255, 255, 255, 0.7);
	flex-shrink: 0;
	transition: color 0.1s ease;
}

._menuItem_jmzi6_117:hover ._menuIcon_jmzi6_161 {
	color: rgba(255, 255, 255, 0.85);
}

._menuItem_jmzi6_117 span {
	font-family:
		'Saans',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
	letter-spacing: 0.2px;
}

._divider_jmzi6_186 {
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.08) 80%, transparent);
	margin: 0;
}

._footer_jmzi6_193 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: rgba(0, 0, 0, 0.2);
	position: relative;
}

._footer_jmzi6_193::before {
	content: '';
	position: absolute;
	top: 0;
	left: 20%;
	right: 20%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.04) 70%, transparent);
}

._footerItem_jmzi6_212 {
	display: flex;
	align-items: center;
	font-family:
		'Saans',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.3px;
}

._connected_jmzi6_226 {
	color: rgba(34, 197, 94, 0.9);
	position: relative;
	padding-left: 12px;
}

._connected_jmzi6_226::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	background: rgba(34, 197, 94, 0.9);
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
	animation: _pulse_jmzi6_1 2s infinite;
}

@keyframes _pulse_jmzi6_1 {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.6;
	}
}

._idle_jmzi6_256 {
	color: rgba(255, 255, 255, 0.5);
	position: relative;
	padding-left: 12px;
}

._idle_jmzi6_256::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 50%;
}

._buildHash_jmzi6_274 {
	color: rgba(255, 255, 255, 0.4);
	text-transform: lowercase;
}

/* Remove unused styles */
._section_jmzi6_280,
._sectionHeader_jmzi6_281,
._sectionTitle_jmzi6_282,
._arrowIcon_jmzi6_283,
._arrowUp_jmzi6_284,
._audioQualityButtons_jmzi6_285,
._activeQuality_jmzi6_286,
._restoreSessionButton_jmzi6_287,
._localPlaying_jmzi6_288,
._statusItem_jmzi6_289,
._disconnected_jmzi6_290 {
	/* These classes are no longer used */
	display: none;
}
._modalContainer_6szrw_1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

._modal_6szrw_1 {
	background: #080808;
	padding: 60px 90px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	position: relative;
	width: fit-content;
	overflow: hidden;
}

._header_6szrw_28 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	position: relative;
	z-index: 2;
}

._title_6szrw_37 {
	font-family: 'Saans', sans-serif;
	font-weight: 400;
	font-size: 19px;
	line-height: 0.947;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

._logo_6szrw_47 {
	width: 151.5px;
	height: 58px;
}

._icon_6szrw_52 {
	width: 20px;
	height: 20px;
	margin-right: 10px;
}

._discordButton_6szrw_58,
._emailButton_6szrw_59 {
	opacity: 0.85;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 18px 20px;
	gap: 13px;
	border-radius: 11px;
	font-family: 'Saans', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.125;
	cursor: pointer;
	border: none;
	width: 417px;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	transition: opacity 0.3s ease;
}

._discordButton_6szrw_58,
._emailButton_6szrw_59:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}

._discordButton_6szrw_58 {
	opacity: 0.85;
	background: #5965ea;
	color: #ffffff;
}

._emailButton_6szrw_59 {
	background: #ffffff;
	color: #1d1d1d;
}

._discordButton_6szrw_58:disabled,
._emailButton_6szrw_59:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

._orSeparator_6szrw_104 {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 417px;
	color: rgba(255, 255, 255, 0.5);
	font-family: 'Saans', sans-serif;
	font-size: 12px;
	position: relative;
	z-index: 2;
}

._line_6szrw_116 {
	flex-grow: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.1);
}

._orText_6szrw_122 {
	color: rgba(255, 255, 255, 0.5);
}

._form_6szrw_126 {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 417px;
	position: relative;
	z-index: 2;
}

._formField_6szrw_135 {
	display: flex;
	flex-direction: column;
}

._input_6szrw_140 {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 11px;
	padding: 18px 20px;
	font-family: 'Saans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.125;
	color: #ffffff;
	width: 100%;
	box-sizing: border-box;
}

._input_6szrw_140::placeholder {
	color: #727272;
	font-family: 'Saans', sans-serif;
	font-weight: 400;
	font-size: 16px;
}

._errorText_6szrw_161 {
	color: #ff4444;
	font-family: 'Saans', sans-serif;
	font-size: 12px;
	margin-top: -8px;
	margin-bottom: 8px;
}

._footer_6szrw_169 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 17px;
	width: 350px;
	position: relative;
	z-index: 2;
}

._footerText_6szrw_179 {
	font-family: 'Saans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.125;
	text-align: center;
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
}

._footerTextSmall_6szrw_189 {
	font-family: 'Saans', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

._linkButton_6szrw_199 {
	background: none;
	border: none;
	padding: 0;
	font-family: 'Saans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: underline;
	cursor: pointer;
}

._link_6szrw_199 {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: underline;
}

._linkButton_6szrw_199:hover,
._link_6szrw_199:hover {
	text-decoration: none;
}

._closeButton_6szrw_221 {
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.5);
	font-size: 24px;
	cursor: pointer;
	padding: 5px;
	line-height: 1;
	z-index: 3;
}

._closeButton_6szrw_221:hover {
	color: #ffffff;
}

._blueBlurryGradient_6szrw_239,
._purpleBlurryGradient_6szrw_240 {
	position: absolute;
	width: 157px;
	height: 155px;
	border-radius: 50%;
	filter: blur(100px);
	z-index: 1;
}

._blueBlurryGradient_6szrw_239 {
	background: #105fc5;
	top: -50px;
	left: 260px;
	opacity: 0.7;
}

._purpleBlurryGradient_6szrw_240 {
	background: #8351ed;
	bottom: -50px;
	left: 260px;
	opacity: 0.7;
}

._submitButton_6szrw_263 {
	background: #ffffff;
	color: #1d1d1d;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 18px 20px;
	gap: 13px;
	border-radius: 11px;
	font-family: 'Saans', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.125;
	cursor: pointer;
	border: none;
	width: 100%;
	box-sizing: border-box;
	margin-top: 10px;
}

._submitButton_6szrw_263:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

._modal_6szrw_1 p {
	text-wrap: pretty;
}

._spinner_6szrw_293 {
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top: 4px solid #fff;
	width: 20px;
	height: 20px;
	animation: _spin_6szrw_293 1s linear infinite;
	margin: 0 auto; /* Center spinner if button text is hidden */
}

@keyframes _spin_6szrw_293 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@media (max-width: 768px) {
	._modal_6szrw_1 {
		padding: 60px 60px;
	}
}
@media (max-width: 600px) {
	._modal_6szrw_1 {
		padding: 30px 40px;
	}
	._discordButton_6szrw_58,
	._emailButton_6szrw_59 {
		width: 100%;
		min-width: 250px;
	}
	._form_6szrw_126 {
		width: 100%;
		min-width: 250px;
	}
}
* {
	box-sizing: border-box;
	font-family: var(--font-family-sans);
	color: #ffffff;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}

/* iOS WebView touch fixes */
.touch-device * {
	-webkit-tap-highlight-color: transparent !important;
	-webkit-touch-callout: none !important;
}

.touch-device button,
.touch-device a,
.touch-device [role='button'],
.touch-device [onclick],
.touch-device div[class*='track'],
.touch-device div[class*='Track'],
.touch-device div[class*='item'],
.touch-device div[class*='Item'],
.touch-device div[class*='card'],
.touch-device div[class*='Card'] {
	touch-action: manipulation !important;
	-webkit-user-select: none !important;
	user-select: none !important;
}

::-webkit-scrollbar {
	width: 1px;
	background-color: transparent;
}

::-webkit-scrollbar-track {
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 1px;
}

* {
	scrollbar-width: thin;
	scrollbar-color: rgba(200, 200, 200, 0.1) transparent;
}

html {
	background-color: black;
	height: 100%;
	min-height: 100%;
	background: var(--surface-900);
	overflow: hidden;
	position: relative;
	z-index: 0;
}

html::before,
html::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: opacity 1.5s ease;
	z-index: -1;
}

html::before {
	background: var(--dynamic-gradient-before, transparent);
}

html::after {
	background: var(--dynamic-gradient-after, transparent);
}

html.gradient-before-active::before,
html.gradient-after-active::after {
	opacity: 1;
}

body {
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	z-index: -1;
	overflow: hidden;
	/* Safe area padding removed from top to allow content scrolling into status bar */
	/* padding-top is now handled in scroll containers */
	padding-bottom: env(safe-area-inset-bottom);
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

#root {
	width: 100%;
	height: 100%;
	min-height: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	overlay: hidden;
}

#pre-activity-loader-video {
	height: 100px;
	width: 100px;
}

#pre-activity-loader-text {
	color: #ffffffe5;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.005em;
	text-align: center;
}

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

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

/* Menu fix */

.chakra-button,
button {
	background: transparent;
	border: none;
	cursor: pointer;
}

button:disabled:hover {
	opacity: 0.3;
}

.chakra-button:hover,
button:hover {
	opacity: 1;
}

input[type='range'] {
	-webkit-appearance: none;
	cursor: pointer;
	background: var(--bg-depth-2);
	height: 6px;
	border-radius: 6px;
	overflow: hidden;
}

input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 6px;
	width: 6px;
	border-radius: 100%;
	background-color: white;
	border: 4px solid white;
	box-shadow: -407px 0 0 400px white;
}

input[type='range']:hover::-webkit-slider-thumb {
	background-color: #8351ed;
	box-shadow: -407px 0 0 400px #8351ed;
}

a {
	text-decoration: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

a:hover {
	text-decoration: underline;
}

/* Use visibility and opacity for smoother transitions */
.fullView {
	visibility: visible;
	opacity: 1;
	transition:
		opacity 150ms ease-out,
		visibility 0s 0s;
}

.pip-mode-for-real .fullView {
	visibility: hidden;
	opacity: 0;
	transition:
		opacity 150ms ease-out,
		visibility 0s 150ms;
	pointer-events: none;
}

.pipView {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	visibility: hidden;
	opacity: 0;
	transition:
		opacity 150ms ease-out,
		visibility 0s 150ms;
	pointer-events: none;
}

.pip-mode-for-real .pipView {
	visibility: visible;
	opacity: 1;
	transition:
		opacity 150ms ease-out,
		visibility 0s 0s;
	pointer-events: auto;
}

/* If the view is very small width < 400 and height < 400, show pip mode */
@media (max-width: 400px) and (max-height: 400px) {
	.pipView {
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	.fullView {
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	.activity-app {
		padding-top: 0 !important;
	}

	.now-playing-section-root {
		display: none !important;
	}

	* {
		transition: none !important;
	}
}

img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

@media (max-width: 768px) {
	/* Safe area handled by pageRoot */
	.activity-app {
		padding-top: 0;
	}

	.activity-app.pip-mode-for-real {
		padding-top: 0;
	}

	.activity-app .now-playing-section-root {
		bottom: 85px !important;
	}
}

:not(input) {
	-webkit-user-select: none;
	/* Safari */
	-ms-user-select: none;
	/* IE 10 and IE 11 */
	user-select: none;
	/* Standard syntax */
}

/* https://linear.app/rythminc/issue/REF-295 */
img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}
/* Saans Font Family */

/* Light */
@font-face {
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-Light-1.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-LightItalic-1.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

/* Regular */
@font-face {
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-Regular-1.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-RegularItalic-1.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* Medium */
@font-face {
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-Medium-1.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-MediumItalic-1.ttf') format('truetype');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

/* SemiBold */
@font-face {
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-SemiBold-1.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-SemiBoldItalic-1.ttf') format('truetype');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

/* Bold */
@font-face {
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-Bold-1.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-BoldItalic-1.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* Heavy */
@font-face {
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-Heavy-1.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-HeavyItalic-1.ttf') format('truetype');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

/* DM Sans Font Family (for fallback in pre-loader) */
@font-face {
	font-family: 'DM Sans';
	src: url('/fonts/dmsans/rP2Hp2ywxg089UriCZOIHQ.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('/fonts/dmsans/rP2Hp2ywxg089UriCZ2IHSeH.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
h1 {
	margin: 0;
}

h4 {
	font-style: normal;
	font-weight: 600;
	font-size: 17px;
	margin: 0;
	text-overflow: ellipsis;
	text-wrap: nowrap;
	overflow: hidden;
}

h5 {
	font-weight: 600;
	font-size: 15px;
	margin: 0;
	text-overflow: ellipsis;
	text-wrap: nowrap;
	overflow: hidden;
}

p {
	font-weight: 200;
	font-size: 14px;
	letter-spacing: 0.09px;
	color: #888888;
	text-overflow: ellipsis;
	text-wrap: nowrap;
	overflow: hidden;
	padding: 0;
	margin: 0;
	opacity: 1;
}

span {
	font-weight: 400;
	font-size: 10.5px;
}
:root {
	/* Color Primatives */

	/* black */
	--black-100: rgb(0 0 0 / 0.03);
	--black-200: rgb(0 0 0 / 0.06);
	--black-300: rgb(0 0 0 / 0.1);
	--black-400: rgb(0 0 0 / 0.2);
	--black-500: rgb(0 0 0 / 0.3);
	--black-600: rgb(0 0 0 / 0.6);
	--black-700: rgb(0 0 0 / 0.7);
	--black-800: rgb(0 0 0 / 0.75);
	--black-900: rgb(0 0 0 / 0.95);
	--black-1000: rgb(0 0 0);

	/* white */
	--white-00: rgb(255 255 255 / 0);
	--white-100: rgb(255 255 255 / 0.03);
	--white-200: rgb(255 255 255 / 0.06);
	--white-300: rgb(255 255 255 / 0.1);
	--white-400: rgb(255 255 255 / 0.2);
	--white-500: rgb(255 255 255 / 0.3);
	--white-600: rgb(255 255 255 / 0.5);
	--white-700: rgb(255 255 255 / 0.8);
	--white-800: rgb(255 255 255 / 0.9);
	--white-900: rgb(255 255 255 / 0.95);
	--white-1000: rgb(255 255 255);

	/* gray */
	--gray-100: rgb(245 245 245);
	--gray-200: rgb(225 225 225);
	--gray-300: rgb(205 205 205);
	--gray-400: rgb(172 172 172);
	--gray-500: rgb(152 152 152);
	--gray-600: rgb(98 98 98);
	--gray-700: rgb(72 72 72);
	--gray-800: rgb(50 50 50);
	--gray-900: rgb(35 35 35);
	--gray-1000: rgb(16 16 16);

	/* blue */
	--blue-100: rgb(137 189 255);
	--blue-200: rgb(99 167 255);
	--blue-300: rgb(20 122 254);
	--blue-400: rgb(16 95 197);
	--blue-500: rgb(7 72 154);

	/* dark purple */
	--dark-purple-100: rgb(87 87 172);
	--dark-purple-200: rgb(48 48 108);
	--dark-purple-300: rgb(20 20 44);
	--dark-purple-400: rgb(13 13 38);

	/* green */
	--green-100: rgb(186 255 232);
	--green-200: rgb(146 255 219);
	--green-300: rgb(72 241 185);
	--green-400: rgb(62 182 143);
	--green-500: rgb(43 150 113);

	/* pink */
	--pink-100: rgb(254 219 255);
	--pink-200: rgb(253 191 255);
	--pink-300: rgb(252 171 255);
	--pink-400: rgb(211 124 214);
	--pink-500: rgb(170 99 173);

	/* purple */
	--purple-100: rgb(194 165 255);
	--purple-200: rgb(131 81 237);
	--purple-300: rgb(110 65 204);
	--purple-400: rgb(91 56 166);
	--purple-500: rgb(79 45 152);

	/* red */
	--red-100: rgb(255 182 194);
	--red-200: rgb(255 114 137);
	--red-300: rgb(255 77 106);
	--red-400: rgb(209 72 94);
	--red-500: rgb(166 54 73);

	/* yellow */
	--yellow-100: rgb(255 243 196);
	--yellow-200: rgb(255 238 171);
	--yellow-300: rgb(244 220 121);
	--yellow-400: rgb(223 199 104);
	--yellow-500: rgb(199 177 91);

	/* orange */
	--orange-100: rgb(255 214 170);
	--orange-200: rgb(255 182 114);
	--orange-300: rgb(255 151 77);
	--orange-400: rgb(209 124 72);
	--orange-500: rgb(166 99 54);

	/* UI Color - Dark Default */

	/* Roee Background Colors */
	--bg-depth-0: #090909;
	--bg-depth-1: #141414;
	--bg-depth-2: #1d1d1d;
	--bg-depth-3: #202020;
	--bg-depth-4: #222222;
	--bg-depth-5: #2e2e2e;

	/* Text Color */
	--text-100: var(--white-900);
	--text-50: var(--white-600);
	--text-20: var(--white-400);

	/* Surface Colors*/
	--surface-100: var(--black-100);
	--surface-200: var(--black-200);
	--surface-300: var(--black-300);
	--surface-400: var(--black-400);
	--surface-500: var(--black-500);
	--surface-600: var(--black-600);
	--surface-700: var(--black-700);
	--surface-800: var(--black-800);
	--surface-900: var(--black-900);
	--surface-1000: var(--black-1000);

	/* Overlay Colors */
	--overlay-100: var(--white-00);
	--overlay-100: var(--white-100);
	--overlay-200: var(--white-200);
	--overlay-300: var(--white-300);
	--overlay-400: var(--white-400);
	--overlay-500: var(--white-500);
	--overlay-600: var(--white-600);
	--overlay-700: var(--white-700);
	--overlay-800: var(--white-800);
	--overlay-900: var(--white-900);
	--overlay-1000: var(--white-1000);

	/* Brand Colors */
	--brand-blue: var(--blue-300);
	--brand-blue-hover: var(--blue-400);
	--brand-glass: var(--white-200);
	--brand-green: var(--green-400);
	--brand-green-hover: var(--green-500);
	--brand-pink: var(--pink-400);
	--brand-pink-hover: var(--pink-300);
	--brand-purple: var(--purple-300);
	--brand-purple-hover: var(--purple-200);
	--brand-red: var(--red-300);
	--brand-red-hover: var(--red-400);
	--brand-tertiary: var(--white-500);
	--brand-yellow: var(--yellow-400);
	--brand-yellow-hover: var(--pink-300);

	/* Border Color*/
	--border-100: var(--white-100);
	--border-200: var(--white-200);
	--border-300: var(--white-300);
	--border-400: var(--white-400);

	/* Icon Color*/
	--icon-default: var(--white-800);
	--icon-disabled: var(--white-500);
	--icon-on-brand-color: var(--white-700);
	--icon-on-brand-glass: var(--white-700);
	--icon-on-brand-hover: var(--white-900);
	--icon-secondary: var(--white-700);
	--icon-tertiary: var(--white-500);

	/* Text Color*/
	--text-default: var(--white-800);
	--text-disabled: var(--white-500);
	--text-on-brand-color: var(--white-700);
	--text-on-brand-glass: var(--white-700);
	--text-on-brand-hover: var(--white-900);
	--text-secondary: var(--white-600);
	--text-tertiary: var(--white-500);

	/* Layout */
	/* Space */
	--space-0: 0px;
	--space-50: 1.75px;
	--space-100: 3.5px;
	--space-200: 7px;
	--space-300: 8.75px;
	--space-400: 10.5px;
	--space-500: 12.25px;
	--space-600: 16px;
	--space-700: 17.5px;
	--space-800: 21px;
	--space-900: 26px;
	--space-1000: 35px;

	/* Blur */
	--blur-100: 4px;
	--blur-200: 8px;
	--blur-300: 12px;
	--blur-400: 20px;
	--blur-500: 34px;

	/* Icon */
	--icon-100: 10.5px;
	--icon-200: 12px;
	--icon-300: 16px;
	--icon-400: 21px;
	--icon-500: 28px;
	--icon-600: 35px;
	--icon-700: 49px;

	/* Radius */
	--radius-0: 0px;
	--radius-50: 1.75px;
	--radius-100: 3.5px;
	--radius-200: 7px;
	--radius-300: 8.75px;
	--radius-400: 10.5px;
	--radius-500: 12.25px;
	--radius-600: 16px;
	--radius-700: 17.5px;
	--radius-full: 999px;

	/* Stroke */
	--stroke-100: 1px;
	--stroke-150: 1.5px;
	--stroke-200: 2px;

	/* Scale */
	--scale-100: 9.5px;
	--scale-200: 10.5px;
	--scale-300: 12px;
	--scale-400: 14px;
	--scale-500: 16px;
	--scale-600: 17.5px;
	--scale-700: 21px;
	--scale-800: 28px;
	--scale-900: 42px;
	--scale-1000: 56px;

	/* Typography Primitives */

	--font-family-sans: 'Saans', sans-serif;

	--weight-100: 300;
	--weight-200: 400;
	--weight-300: 500;
	--weight-400: 600;
	--weight-500: 700;
	--weight-600: 800;

	/* Typography */

	--primary-font: var(--font-family-sans);

	/* Font Size */
	--xxs: 10.5px;
	--xs: 11px;
	--s: 12px;
	--m: 14px;
	--l: 16px;
	--xl: 19px;
	--xxl: 21px;

	/* Font Weight */
	--heavy: var(--weight-600);
	--bold: var(--weight-500);
	--semibold: var(--weight-400);
	--medium: var(--weight-300);
	--regular: var(--weight-200);
	--light: var(--weight-100);

	/* Effects */
	/* Dark Shadows */
	--shadow-100: 3px 3px 4px rgba(0, 0, 0, 0.2);
	--shadow-200: 3px 3px 8px rgba(0, 0, 0, 0.2);
	--shadow-300: 0px 0px 20px rgba(0, 0, 0, 0.3);

	/* Light Shadows */
	--shadow-light-100: 3px 3px 4px rgba(255, 255, 255, 0.2);
	--shadow-light-200: 3px 3px 8px rgba(255, 255, 255, 0.2);
	--shadow-light-300: 0px 0px 20px rgba(255, 255, 255, 0.3);

	/* animation */
	--animation-duration-faster: 0.12s;
	--animation-duration-fast: 0.2s;
	--animation-duration: 0.4s;
	--animation-timing-function: ease;

	--sat: env(safe-area-inset-top);
	--sar: env(safe-area-inset-right);
	--sab: env(safe-area-inset-bottom);
	--sal: env(safe-area-inset-left);

	/* Mobile scroll behavior for safe area */
	--mobile-scroll-padding-top: env(safe-area-inset-top);
	--mobile-content-offset: calc(-1 * env(safe-area-inset-top));
}