/* /assets/style.css */

:root{
	--accent: 110,170,255;
	--accent_hot: 255,80,80;
	--accent_soft: 110,170,255,0.18;
	--bg: 9,10,12;
	--card: 22,24,28;
	--font: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Inter,Arial,sans-serif;
	--gap: 16px;
	--line: 255,255,255;
	--max: 1320px;
	--mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	--muted: 165,168,178;
	--panel: 15,16,19;
	--r: 14px;
	--r2: 22px;
	--shadow: 0,0,0;
	--text: 245,246,248;

	color-scheme: dark;
}

*{
	-webkit-font-smoothing:antialiased;
	box-sizing:border-box;
	margin:0;
	padding:0;
}

html,body{
	background:rgb(var(--bg));
	color:rgba(var(--text),0.92);
	font-family:var(--font);
	height:100%;
	line-height:1.45;
}

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

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

::selection{
	background:rgba(var(--accent),0.25);
}

:focus-visible{
	border-radius:14px;
	outline:2px solid rgba(var(--accent),0.55);
	outline-offset:3px;
}

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

.h2_icon{
	display:inline-block;
	fill:currentColor;
	flex:0 0 auto;
	height:20px;
	opacity:0.95;
	width:20px;
}

.h2_inline{
	align-items:center;
	display:flex;
	gap:12px;
	letter-spacing:0.08em;
	margin:0;
	text-transform:uppercase;
}

.page{
	min-height:100%;
	padding:28px 18px 56px 18px;
}

.container{
	margin:0 auto;
	max-width:var(--max);
}

.section{
	margin-top:36px;
}

.section_header{
	align-items:baseline;
	backdrop-filter: blur(14px);
	background:linear-gradient(180deg, rgba(var(--panel),0.92), rgba(var(--panel),0.70));
	border:1px solid rgba(var(--line),0.10);
	border-radius:18px;
	box-shadow:0 20px 50px rgba(var(--shadow),0.45);
	display:flex;
	gap:16px;
	justify-content:space-between;
	margin-bottom:16px;
	padding:12px 14px;
	position:sticky;
	top:12px;
	z-index:40;
}

.section_header::before{
	background:linear-gradient(90deg, rgba(var(--accent),0.95), rgba(var(--accent),0.0));
	border-radius:3px;
	bottom:-1px;
	content:"";
	height:3px;
	left:12px;
	position:absolute;
	width:56px;
}

.section_title{
	align-items:center;
	background:linear-gradient(90deg, rgba(var(--text),1), rgba(var(--accent),0.90));
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
	display:flex;
	gap:12px;
	font-size:22px;
	font-weight:950;
	letter-spacing:0.05em;
	margin:0;
	text-transform:uppercase;
}

.section_title span{
	color:inherit;
}

.section_count{
	color:rgba(var(--muted),0.90);
	font-family:var(--mono);
	font-size:12px;
}

.grid{
	display:grid;
	gap:var(--gap);
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.card{
	background:linear-gradient(180deg, rgba(var(--card),0.95), rgba(var(--panel),0.75));
	border:1px solid rgba(var(--line),0.10);
	border-radius:var(--r2);
	box-shadow:0 24px 60px rgba(var(--shadow),0.40);
	overflow:hidden;
	position:relative;
	transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.card:hover{
	border-color:rgba(var(--accent),0.35);
	box-shadow:0 32px 80px rgba(var(--shadow),0.55);
	transform:translateY(-4px) scale(1.015);
}

.cover{
	aspect-ratio:1/1;
	object-fit:cover;
	width:100%;
}

.card_meta{
	background:linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.20) 65%, rgba(0,0,0,0));
	inset:auto 0 0 0;
	padding:14px;
	position:absolute;
}

.card_artist{
	font-size:13px;
	font-weight:800;
	letter-spacing:0.02em;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.card_title{
	color:rgba(var(--muted),0.95);
	font-size:12px;
	margin-top:2px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.card.is-inactive{
	filter:saturate(0.60);
	opacity:0.45;
}

.card.is-inactive:hover{
	filter:saturate(1);
	opacity:0.90;
}

.detail_shell{
	margin:0 auto;
	max-width:var(--max);
	padding:22px 0 36px 0;
}

.detail_head{
	background:linear-gradient(180deg, rgba(var(--card),0.95), rgba(var(--panel),0.75));
	border:1px solid rgba(var(--line),0.10);
	border-radius:var(--r2);
	box-shadow:0 28px 80px rgba(var(--shadow),0.45);
	display:grid;
	gap:22px;
	grid-template-columns:260px 1fr;
	overflow:hidden;
	padding:20px;
	position:relative;
}

.detail_head::after{
	background:
		radial-gradient(40% 30% at 10% 10%, rgba(var(--accent),0.18), transparent 60%),
		radial-gradient(35% 30% at 85% 70%, rgba(var(--accent_hot),0.12), transparent 60%);
	content:"";
	inset:-20%;
	pointer-events:none;
	position:absolute;
}

.detail_cover{
	border:1px solid rgba(var(--line),0.10);
	border-radius:16px;
	box-shadow:0 20px 50px rgba(var(--shadow),0.45);
	overflow:hidden;
}

.detail_cover img{
	aspect-ratio:1/1;
	object-fit:cover;
	width:100%;
}

.detail_meta{
	position:relative;
}

.detail_artist{
	font-size:26px;
	font-weight:950;
	letter-spacing:0.01em;
}

.detail_title{
	color:rgba(var(--muted),0.95);
	font-size:16px;
	margin-top:6px;
}

.detail_identifier{
	color:rgba(var(--muted),0.80);
	font-family:var(--mono);
	font-size:12px;
	margin-top:10px;
}

.detail_actions{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-top:18px;
}

.btn{
	align-items:center;
	background:rgba(var(--card),0.60);
	border:1px solid rgba(var(--line),0.12);
	border-radius:999px;
	color:rgba(var(--text),0.95);
	display:inline-flex;
	font-size:13px;
	font-weight:800;
	justify-content:center;
	padding:10px 16px;
	transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.btn:hover{
	border-color:rgba(var(--accent),0.35);
	box-shadow:0 16px 40px rgba(var(--shadow),0.35);
	transform:translateY(-1px);
}

.btn.primary{
	background:rgba(var(--accent_soft));
	border-color:rgba(var(--accent),0.45);
}

.tracks{
	background:linear-gradient(180deg, rgba(var(--card),0.85), rgba(var(--panel),0.65));
	border:1px solid rgba(var(--line),0.10);
	border-radius:var(--r2);
	box-shadow:0 24px 70px rgba(var(--shadow),0.45);
	margin-top:18px;
	overflow:hidden;
}

.tracks_head{
	border-bottom:1px solid rgba(var(--line),0.06);
	padding:14px 14px;
}

.tracks table{
	border-collapse:collapse;
	width:100%;
}

.tracks td{
	border-bottom:1px solid rgba(var(--line),0.06);
	padding:14px 14px;
	vertical-align:middle;
}

.tracks tr:hover{
	background:rgba(var(--line),0.05);
}

.t_nr{
	color:rgba(var(--muted),0.85);
	font-family:var(--mono);
	text-align:right;
	width:56px;
}

.t_name{
	font-weight:800;
}

.t_dur{
	color:rgba(var(--muted),0.85);
	font-family:var(--mono);
	text-align:right;
	width:90px;
}

.player_shell{
	background:rgba(0,0,0,0.45);
	border:1px dashed rgba(var(--accent),0.45);
	border-radius:var(--r2);
	margin-top:18px;
	padding:14px;
}

.player_title{
	color:rgba(var(--muted),0.90);
	font-family:var(--mono);
	font-size:12px;
	margin-bottom:10px;
}

.player_box{
	aspect-ratio:16/9;
	background:rgba(0,0,0,0.60);
	border:1px solid rgba(var(--line),0.12);
	border-radius:16px;
}

.not_found{
	background:linear-gradient(180deg, rgba(var(--card),0.85), rgba(var(--panel),0.65));
	border:1px solid rgba(var(--line),0.10);
	border-radius:var(--r2);
	box-shadow:0 24px 70px rgba(var(--shadow),0.45);
	margin-top:18px;
	padding:18px;
}

.not_found_title{
	font-size:18px;
	font-weight:900;
	letter-spacing:0.02em;
}

.not_found_sub{
	color:rgba(var(--muted),0.90);
	margin-top:6px;
}

@media (prefers-reduced-motion: reduce){
	*{
		animation:none !important;
		scroll-behavior:auto !important;
		transition:none !important;
	}
}

@media (max-width: 720px){
	.detail_head{
		grid-template-columns:1fr;
	}
	.detail_cover{
		max-width:280px;
	}
}