/* /assets/style/essential.css */
:root{
	--accent_a:144,152,162;
	--accent_a_soft:144,152,162,0.14;
	--accent_b:114,198,170;
	--accent_b_soft:114,198,170,0.12;
	--bg:12,11,10;
	--bg_grad_a:var(--accent_a_soft);
	--bg_grad_b:var(--accent_b_soft);
	--card:28,25,22;
	--focus:144,152,162,0.55;
	--font:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Inter,Arial,sans-serif;
	--gap:1rem;
	--header_h:4.25rem;
	--inactive:255,179,72;
	--inactive_soft:255,179,72,0.34;
	--inactive_soft_2:255,179,72,0.18;
	--line:255,255,255;
	--max:82.5rem;
	--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	--muted:186,176,166;
	--page_pad_x:1.125rem;
	--page_pad_x_sm:0.875rem;
	--panel:22,20,18;
	--paper:234,221,204;
	--pill_r:62.4375rem;
	--r:0.875rem;
	--r2:1.375rem;
	--shadow:0,0,0;
	--sticky_top:var(--header_h);
	--text:246,242,236;
	--text_shadow_edge:0 0 0.0625rem rgba(0,0,0,0.72),0 0.0625rem 0.1875rem rgba(0,0,0,0.72);
	--user_color:#72C6AA;
	--vinyl:16,15,14;
	color-scheme:dark;
	font-size:16px;
}

[hidden]{
	display:none !important;
}

*{
	-webkit-font-smoothing:antialiased;
	-webkit-tap-highlight-color:transparent;
	-webkit-user-select:none;
	box-sizing:border-box;
	margin:0;
	padding:0;
	user-select:none;
}

html{
	overflow-x:hidden;
	overflow-y:scroll;
	scrollbar-color:rgba(var(--accent_a),0.55) rgba(var(--panel),0.85);
	scrollbar-gutter:stable;
	scrollbar-width:thin;
}

:root.has_spotify_theme html{
	scrollbar-color:var(--spotify_theme_color) rgba(var(--panel),0.85);
}

html::-webkit-scrollbar{
	height:0.75rem;
	width:0.75rem;
}

html::-webkit-scrollbar-thumb{
	background:rgba(var(--accent_a),0.48);
	border:0.1875rem solid rgba(var(--panel),0.85);
	border-radius:62.4375rem;
}

:root.has_spotify_theme html::-webkit-scrollbar-thumb,
:root.has_spotify_theme html::-webkit-scrollbar-thumb:hover{
	background:var(--spotify_theme_color);
}

html::-webkit-scrollbar-thumb:hover{
	background:rgba(var(--accent_a),0.62);
}

html::-webkit-scrollbar-track{
	background:rgba(var(--panel),0.85);
}

:root.has_spotify_theme{
	--bg_grad_a:var(--spotify_theme_rgb),0.18;
}

:root.has_spotify_accent{
	--bg_grad_b:var(--spotify_accent_rgb),0.14;
}

html,body{
	background:
		radial-gradient(75rem 43.75rem at 14% 10%,rgba(var(--bg_grad_a)),transparent 55%),
		radial-gradient(56.25rem 37.5rem at 86% 18%,rgba(var(--bg_grad_b)),transparent 60%),
		rgb(var(--bg));
	background-attachment:fixed,fixed,fixed;
	background-repeat:no-repeat;
	color:rgba(var(--text),0.92);
	font-family:var(--font);
	height:100%;
	line-height:1.45;
}

body::before{
	animation:stage_lights 9.5s ease-in-out infinite;
	background:
		radial-gradient(40rem 22rem at 15% 10%,rgba(var(--accent_a),0.06),transparent 55%),
		radial-gradient(34rem 20rem at 85% 18%,rgba(var(--accent_b),0.05),transparent 58%),
		linear-gradient(115deg,rgba(255,255,255,0.00),rgba(255,255,255,0.03),rgba(255,255,255,0.00));
	content:"";
	inset:0;
	mix-blend-mode:screen;
	opacity:0.9;
	pointer-events:none;
	position:fixed;
	transform:translateZ(0);
	z-index:0;
}

@keyframes stage_lights{
	0%{
		filter:brightness(1) saturate(1);
		transform:translate3d(0,0,0);
	}
	50%{
		filter:brightness(1.03) saturate(1.06);
		transform:translate3d(0,-0.25rem,0);
	}
	100%{
		filter:brightness(1) saturate(1);
		transform:translate3d(0,0,0);
	}
}

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

img{
	display:block;
	max-width:100%;
}

::selection{
	background:rgba(var(--accent_a),0.22);
}

:focus-visible{
	border-radius:var(--r);
	outline:0.125rem solid rgba(var(--focus));
	outline-offset:0.1875rem;
}

.svg_sprite{
	height:0;
	overflow:hidden;
	position:absolute;
	width:0;
}

main{
	min-height:100%;
	padding:calc(var(--header_h) + 1.25rem) var(--page_pad_x) 3.5rem var(--page_pad_x);
	position:relative;
	z-index:1;
}

.page_container{
	margin:0 auto;
	max-width:var(--max);
	position:relative;
	z-index:1;
}

.page_header{
	backdrop-filter:blur(0.875rem);
	background:linear-gradient(180deg,rgba(var(--panel),0.92),rgba(var(--panel),0.62));
	border:0.0625rem solid rgba(var(--line),0.10);
	border-left:0;
	border-radius:0;
	border-right:0;
	box-shadow:0 1.25rem 3.125rem rgba(var(--shadow),0.42);
	left:0;
	position:fixed;
	right:0;
	top:0;
	transform:translateZ(0);
	width:100%;
	z-index:2147483640;
}

.page_header_inner{
	align-items:center;
	display:flex;
	gap:1rem;
	height:var(--header_h);
	justify-content:space-between;
	margin:0 auto;
	max-width:var(--max);
	padding:0.75rem var(--page_pad_x);
	position:relative;
	z-index:2147483641;
}

.page_header_left{
	flex:1 1 auto;
	min-width:0;
	transition:opacity 0.18s ease,transform 0.18s ease;
}

.page_header_right{
	align-items:center;
	display:flex;
	flex:0 0 auto;
	gap:0.625rem;
	justify-content:flex-end;
	min-width:6.125rem;
}

.page_header_left_wrap{
	align-items:center;
	display:flex;
	flex:1 1 auto;
	gap:0.625rem;
	min-width:0;
}

.page_header_logo{
	align-items:center;
	color:rgba(var(--text),0.92);
	display:inline-flex;
	flex:0 0 auto;
	height:2.75rem;
	justify-content:center;
	min-width:2.75rem;
	padding:0;
}

.page_header_logo:focus-visible{
	border-radius:var(--r);
}

.page_header_logo_icon{
	display:block;
	height:2rem;
	width:2rem;
}

.page_header_subtitle{
	color:rgba(var(--muted),0.90);
	font-family:var(--mono);
	font-size:0.75rem;
	letter-spacing:0.02em;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.page_header_title{
	font-size:1.25rem;
	font-weight:950;
	letter-spacing:0.01em;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.page_header_icon{
	display:block;
	height:1.25rem;
	width:1.25rem;
}

.page_header_icon_btn_icon{
	display:block;
	height:1.25rem;
	width:1.25rem;
}

.page_header_icon_btn{
	align-items:center;
	background:rgba(0,0,0,0.45);
	border:0.0625rem solid rgba(255,255,255,0.18);
	border-radius:var(--pill_r);
	color:inherit;
	cursor:pointer;
	display:inline-flex;
	flex:0 0 auto;
	height:2.75rem;
	justify-content:center;
	min-width:2.75rem;
	padding:0;
	transition:border-color 0.14s ease,box-shadow 0.14s ease,transform 0.14s ease;
	width:2.75rem;
}

.page_header_icon_btn:active{
	transform:translateY(0.0625rem) scale(0.98);
}

.page_header_icon_btn:focus-visible{
	border-radius:var(--pill_r);
}

.page_header_icon_btn:hover{
	border-color:rgba(var(--accent_a),0.42);
	box-shadow:0 0.75rem 2rem rgba(var(--shadow),0.35);
	transform:translateY(-0.0625rem);
}

.page_header_user_btn{
	position:relative;
}

.page_header_user_btn.is_logged_in{
	background:var(--user_color);
	border-color:rgba(255,255,255,0.22);
	color:rgba(0,0,0,0.92);
}

.page_header_user_btn.is_logged_in .page_header_user_icon{
	display:none;
}

.page_header_user_btn.is_logged_in .page_header_user_initial{
	display:inline-flex;
	font-size:1.25rem;
}

.page_header_user_icon{
	display:block;
	height:1.25rem;
	width:1.25rem;
}

.page_header_user_initial{
	align-items:center;
	display:none;
	font-family:var(--mono);
	font-size:0.875rem;
	font-weight:950;
	height:100%;
	justify-content:center;
	letter-spacing:0.02em;
	position:absolute;
	width:100%;
}

.auth_overlay{
	align-items:flex-start;
	display:flex;
	inset:0;
	justify-content:center;
	overflow-x:hidden;
	overflow-y:auto;
	padding:1rem;
	position:fixed;
	z-index:2147483647;
}

.auth_overlay[hidden]{
	display:none;
}

.auth_overlay [data-auth-login-verify-wrap] .action_btn.is_primary,
.auth_page_shell .auth_panel .action_btn.is_primary{
	margin-top:1.5rem;
}

.auth_page_shell{
	align-items:flex-start;
	display:flex;
	justify-content:center;
	min-height:100%;
	padding:calc(var(--header_h) + 1.25rem) var(--page_pad_x) 3.5rem var(--page_pad_x);
	position:relative;
	z-index:1;
}

.auth_page_shell .auth_panel{
	margin:0 auto;
	max-width:26rem;
	width:100%;
}

.auth_overlay_backdrop{
	backdrop-filter:blur(0.875rem) saturate(1.15);
	background:rgba(0,0,0,0.78);
	inset:0;
	position:fixed;
}

.auth_panel{
	background:linear-gradient(180deg,rgba(var(--panel),0.98),rgba(var(--card),0.92));
	border:0.0625rem solid rgba(255,255,255,0.14);
	border-radius:1rem;
	box-shadow:0 1.5rem 4rem rgba(0,0,0,0.55);
	max-height:calc(100vh - 2rem);
	max-width:26rem;
	overflow:auto;
	position:relative;
	width:calc(100% - 2rem);
	z-index:1;
}

.auth_panel.is_centered{
	margin:0 auto;
}

.auth_panel_header{
	align-items:center;
	border-bottom:0.0625rem solid rgba(255,255,255,0.10);
	display:flex;
	justify-content:space-between;
	padding:0.875rem 1rem;
}

.auth_panel_title{
	font-size:1.0625rem;
	font-weight:900;
	letter-spacing:0.01em;
}

.auth_close_btn{
	align-items:center;
	background:rgba(0,0,0,0.35);
	border:0.0625rem solid rgba(255,255,255,0.14);
	border-radius:var(--pill_r);
	color:inherit;
	cursor:pointer;
	display:inline-flex;
	height:2.25rem;
	justify-content:center;
	min-width:2.25rem;
	padding:0;
	width:2.25rem;
}

.auth_close_x{
	font-family:var(--mono);
	font-size:1.25rem;
	line-height:1;
	margin-top:-0.0625rem;
}

.auth_panel_body{
	padding:1rem;
}

.auth_form{
	display:flex;
	flex-direction:column;
	gap:0.625rem;
}

.auth_label{
	color:rgba(var(--muted),0.92);
	font-size:0.8125rem;
	font-weight:700;
	letter-spacing:0.02em;
}

.auth_input{
	background:rgba(0,0,0,0.35);
	border:0.0625rem solid rgba(255,255,255,0.14);
	border-radius:0.75rem;
	color:rgba(var(--text),0.92);
	font-family:var(--mono);
	font-size:0.875rem;
	padding:0.75rem 0.875rem;
}

.auth_input_color{
	height:3rem;
	padding:0.5rem 0.625rem;
}

.auth_error{
	background:rgba(255,60,60,0.10);
	border:0.0625rem solid rgba(255,60,60,0.35);
	border-radius:0.75rem;
	color:rgba(255,140,140,0.95);
	font-family:var(--mono);
	font-size:0.8125rem;
	padding:0.625rem 0.75rem;
}

.auth_link_row{
	display:flex;
	gap:0.5rem;
	justify-content:flex-start;
	margin-top:0.125rem;
}

.auth_link_row_duo{
	border-top:0.0625rem solid rgba(255,255,255,0.10);
	justify-content:space-between;
	margin-top:0.875rem;
	padding-top:0.75rem;
}

.auth_link_row_duo .auth_text_link.is_secondary{
	background:rgba(var(--card),0.52);
	border-color:rgba(var(--line),0.20);
	color:rgba(var(--text),0.90);
}

.auth_text_link{
	align-items:center;
	background:rgba(0,0,0,0.22);
	border:0.0625rem solid rgba(255,255,255,0.12);
	border-radius:var(--pill_r);
	color:rgba(var(--text),0.92);
	cursor:pointer;
	display:inline-flex;
	flex:1 1 auto;
	font-family:var(--mono);
	font-size:0.75rem;
	font-weight:800;
	gap:0.5rem;
	justify-content:center;
	letter-spacing:0.02em;
	min-height:2.375rem;
	padding:0.5rem 0.75rem;
	text-align:center;
	transition:border-color 0.14s ease,box-shadow 0.14s ease,transform 0.14s ease;
}

.auth_text_link:active{
	transform:translateY(0.0625rem) scale(0.99);
}

.auth_text_link:focus-visible{
	border-radius:var(--pill_r);
}

.auth_text_link:hover{
	border-color:rgba(var(--accent_a),0.42);
	box-shadow:0 0.75rem 2rem rgba(var(--shadow),0.30);
	transform:translateY(-0.0625rem);
}

.auth_text_link.is_secondary{
	background:rgba(var(--card),0.36);
	border-color:rgba(var(--line),0.14);
	color:rgba(var(--muted),0.95);
}

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

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

.auth_profile_edit[hidden]{
	display:none;
}

.auth_section_title{
	color:rgba(var(--muted),0.92);
	font-family:var(--mono);
	font-size:0.8125rem;
	font-weight:900;
	letter-spacing:0.08em;
	margin-top:0.25rem;
	text-transform:uppercase;
}

.auth_user_badge{
	--auth_user_color:var(--user_color);
	align-items:center;
	background:var(--auth_user_color);
	border:0.0625rem solid rgba(255,255,255,0.22);
	border-radius:62.4375rem;
	color:rgba(0,0,0,0.92);
	display:inline-flex;
	flex:0 0 auto;
	height:3rem;
	justify-content:center;
	width:3rem;
}

.auth_user_badge_initial{
	font-family:var(--mono);
	font-size:1.25rem;
	font-weight:950;
	letter-spacing:0.02em;
	line-height:1;
}

.auth_user_hint{
	color:rgba(var(--muted),0.90);
	font-family:var(--mono);
	font-size:0.75rem;
	letter-spacing:0.02em;
}

.auth_user_meta{
	flex:1 1 auto;
	min-width:0;
}

.auth_user_name{
	color:rgba(var(--text),0.92);
	font-family:var(--mono);
	font-size:0.9375rem;
	font-weight:900;
	letter-spacing:0.01em;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.auth_user_row{
	align-items:center;
	display:flex;
	gap:0.75rem;
}

.auth_user_edit_btn{
	align-items:center;
	background:rgba(0,0,0,0.35);
	border:0.0625rem solid rgba(255,255,255,0.14);
	border-radius:var(--pill_r);
	color:inherit;
	cursor:pointer;
	display:inline-flex;
	flex:0 0 auto;
	height:2.25rem;
	justify-content:center;
	min-width:2.25rem;
	padding:0;
	transition:border-color 0.14s ease,box-shadow 0.14s ease,transform 0.14s ease;
	width:2.25rem;
}

.auth_user_edit_btn:active{
	transform:translateY(0.0625rem) scale(0.99);
}

.auth_user_edit_btn:focus-visible{
	border-radius:var(--pill_r);
}

.auth_user_edit_btn:hover{
	border-color:rgba(var(--accent_a),0.42);
	box-shadow:0 0.75rem 2rem rgba(var(--shadow),0.35);
	transform:translateY(-0.0625rem);
}

.auth_user_edit_icon{
	display:block;
	height:1.125rem;
	width:1.125rem;
}

.auth_back_to_profile_btn{
	width:100%;
}

.auth_logout_btn{
	width:100%;
}

@media (min-width:45rem) and (min-height:40rem){
	.auth_overlay{
		align-items:center;
	}
}

@media (max-width:45rem){
	html,body{
		background-attachment:scroll,scroll,scroll;
	}

	main{
		padding:calc(var(--header_h) + 1.125rem) var(--page_pad_x_sm) 3.5rem var(--page_pad_x_sm);
	}

	.page_header_inner{
		padding:0.75rem var(--page_pad_x_sm);
	}

	.auth_page_shell{
		padding:calc(var(--header_h) + 1.125rem) var(--page_pad_x_sm) 3.5rem var(--page_pad_x_sm);
	}
}

@media (max-width:30rem){
	.page_header_inner{
		gap:0.75rem;
		padding:0.75rem 0.75rem;
	}

	.page_header_right{
		gap:0.5rem;
	}

	.page_header_subtitle{
		display:none;
	}

	.page_header_title{
		font-size:1.125rem;
	}
}

@media (prefers-reduced-motion:reduce){
	body::before{
		animation:none !important;
	}
}