:root {
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--accent-grad: linear-gradient(135deg, var(--trans), var(--color1));
	--trans: #f7dfff;
	--color1: #87efff41;
	/* ===== Text colors ===== */
	--ink: #d0d0d8;
	--ink-bright: #ffffff;
	--text-body: #e8e8e8;
	--text-white: #ffffff;
	--text-controls: #bbb;
	--text-muted: #888;
	--text-dim: #777;
	--text-mid: #999;
	--text-faint: #555;
	--text-disabled: #444;
	--text-dark: #000000;

	/* ===== Glass / surface backgrounds ===== */
	--glass-bg: rgba(13, 18, 32, 0.5);
	--glass-bg-focus: rgba(15, 22, 40, 0.62);
	--glass-bg-dark: rgba(18, 18, 18, 0.5);
	--glass-bg-strong: rgba(13, 18, 32, 0.8);

	/* ===== Accent / brand colors ===== */
	--line-cool: #4ab8cc;
	--line-soft: rgba(120, 170, 255, 0);
	--accent-green: rgba(29, 215, 96, 0.15);
	--accent-glow: rgba(200, 210, 255, 0.06);

	/* ===== White alpha overlays (borders, fills, shadows) ===== */
	--white-a00: rgba(255, 255, 255, 0);
	--white-a03: rgba(255, 255, 255, 0.03);
	--white-a04: rgba(255, 255, 255, 0.04);
	--white-a05: rgba(255, 255, 255, 0.05);
	--white-a06: rgba(255, 255, 255, 0.06);
	--white-a07: rgba(255, 255, 255, 0.07);
	--white-a10: rgba(255, 255, 255, 0.1);
	--white-a15: rgba(255, 255, 255, 0.15);
	--white-a22: rgba(255, 255, 255, 0.22);
	--white-a32: rgba(255, 255, 255, 0.32);

	/* ===== Black alpha overlays (shadows) ===== */
	--black-a00: rgba(0, 0, 0, 0);
	--black-a40: rgba(0, 0, 0, 0.4);

	/* ===== Mask fill (used in -webkit-mask gradients) ===== */
	--mask-fill: #000000;
}

html,
body {
	font-family: Geist, -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 200;
	font-style: normal;
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
	height: 100vh;
	color: var(--text-body);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-y: auto;
	background: transparent;
}

canvas {
	display: block;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	margin: 0;
	background-color: #090a0b;
	background-image: url('/css/bg.png');
}

#app{
	scrollbar-width: none;
	overflow-y: auto;
	width: 100%;
	position: absolute;
	left: 0;
	height: 100%;
	top: 0;
	scale: 0.9;
	margin: 0;
	padding: 0;
	transition: 0.2s ease-in-out;
}
#mainApp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(16px);
  z-index: 100000000000;
  transform: translateY(100%);
  transition: transform 0.4s ease;
  will-change: transform;
  overflow-y: scroll;
}

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

#settingsButton {

	z-index: 1000000;
}
.container {
	display: block;
	position: relative;
	padding-left: 38px;
	margin-bottom: 14px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 300;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.2s ease;
}

.container:hover {
	color: #fff;
}

.container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 22px;
	width: 22px;
	background-color: rgba(255, 255, 255, 0.04);
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	transition: all 0.3s var(--ease-out);
}

.container:hover input~.checkmark {
	background-color: rgba(255, 255, 255, 0.07);
	border-color: rgba(247, 223, 255, 0.25);
}

.container input:checked~.checkmark {
	background: #4ab8cc;
	border-color: transparent;
	box-shadow: var(--glow-pink), var(--glow-cyan);
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.container input:checked~.checkmark:after {
	display: block;
}

.container .checkmark:after {
	left: 7px;
	top: 3px;
	width: 5px;
	height: 11px;
	border: solid white;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
#backBTN {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(30px) brightness(2);
    -webkit-backdrop-filter: blur(30px) brightness(3);
    display: block;
    position: sticky;
    top: 10px;
    left: 10px;
    border-radius: 20px;
}
#settingsButton img {
	width: 40px;
	height: 40px;
	color: var(--text-white);
}

.header-center {
	align-items: center;
	flex-direction: column;
	margin-top: 10%;
}

.logo {
	width: 100%;
	margin-bottom: 4vh;
	max-width: 588px;
	position: relative;
	top: 40px;
}

.logo-wrapper .text {
	font-size: 75px;
	font-weight: 100;
	letter-spacing: -0.03em;
	background: var(--line-cool);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

#sj-form {
	position: relative;
	width: 1000%;
	max-width: 460px;
	scale: 1.1;
}

@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

#sj-form::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 64px;
	padding: 2px;
	background: conic-gradient(from var(--angle),
			var(--black-a00) 0deg,
			var(--black-a00) 300deg,
			var(--line-cool) 300deg,
			var(--line-cool) 360deg);
	-webkit-mask: linear-gradient(var(--mask-fill) 0 0) content-box, linear-gradient(var(--mask-fill) 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(var(--mask-fill) 0 0) content-box exclude, linear-gradient(var(--mask-fill) 0 0);
	opacity: 0.85;
	pointer-events: none;
	animation: sj-rotate 6s linear infinite;
}

@keyframes sj-rotate {
	from {
		--angle: 0deg;
	}

	to {
		--angle: 360deg;
	}
}

#sj-address {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 460px;
	padding: 16px 28px;
	background: var(--glass-bg);
	backdrop-filter: blur(28px) saturate(1.5);
	-webkit-backdrop-filter: blur(28px) saturate(1.5);
	border: 1.5px solid transparent;
	border-radius: 60px;
	color: var(--ink);
	font-size: 15px;
	letter-spacing: 0.01em;
	background-origin: border-box;
	background-clip: padding-box, border-box;
	transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out);
	outline: none;
	width: 87.5%;
}

#sj-address::placeholder {
	color: var(--white-a32);
	font-weight: 300;
}

#sj-address:focus {
	color: var(--ink-bright);
	background: var(--glass-bg-focus);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.logo-wrapper .text {
	font-size: 75px;
	font-weight: 100;
	letter-spacing: -0.03em;
	background: var(--line-cool);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.logo-wrapper h1 {
	font-weight: 200;
	background: var(--line-cool);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.miniplayer {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 480px;
	height: 72px;
	display: none;
	flex-direction: column;
	border-radius: 1rem;
	background: var(--glass-bg-dark);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	box-shadow: 0 10px 40px var(--black-a00), 0 0 0 1px var(--white-a00);
	color: var(--text-white);
	z-index: 99999999;
	overflow: hidden;
	transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	transition-delay: 0s;
}

#homepagefull {
	transition: 0.2s ease;
}

.miniplayer.expanded {
	height: min(450px, calc(100vh - 40px));
}

input {
	outline: none;
}

/* Search Top - Hidden by default */
.mp-top {
	display: none;
	flex-shrink: 0;
	padding: 10px 12px 0 12px;
	gap: 8px;
	align-items: center;
}

.miniplayer.expanded .mp-top {
	display: flex;
}

.category {
	flex: 1;
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid var(--white-a06);
	background: var(--white-a04);
	color: var(--text-white);
	font-family: inherit;
	font-size: 11px;
	transition: all 0.2s;
}

.category::placeholder {
	color: var(--text-faint);
}

.category:focus {
	border-color: var(--white-a15);
	background: var(--white-a07);
}

.collapse-btn {
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 16px;
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s;
}

.collapse-btn:hover {
	color: var(--text-white);
}

/* Results List - Hidden by default */
.mp-results {
	display: none;
	flex: 1;
	overflow-y: auto;
	padding: 6px 8px;
	border-bottom: 1px solid var(--white-a04);
}

.miniplayer.expanded .mp-results {
	display: block;
}

::-webkit-scrollbar {
	width: 3px;
	background: transparent;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--white-a10);
	border-radius: 3px;
}

.result {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px;
	border-radius: 6px;
	margin-bottom: 1px;
	transition: background 0.15s;
	cursor: pointer;
}

.result:hover {
	background: var(--white-a05);
}

.result img {
	border-radius: 4px;
	width: 32px;
	height: 32px;
	object-fit: cover;
	flex-shrink: 0;
}

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

.result .title {
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 4px;
}

.result .artist {
	font-size: 9px;
	color: var(--text-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.source-badge {
	display: inline-block;
	font-size: 6px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 1px 3px;
	border-radius: 2px;
	flex-shrink: 0;
}

.source-badge.full {
	background: var(--accent-green);
	color: var(--color1-dim);
}

.source-badge.preview {
	background: var(--white-a05);
	color: var(--text-dim);
}

.source-badge.radio {
	background: var(--white-a07);
	color: var(--text-mid);
}

.search-section-label {
	font-size: 7px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--text-disabled);
	font-weight: 700;
	padding: 4px 4px 2px;
	margin-top: 2px;
}

.search-section-label.green {
	color: var(--color1-dim);
}

.mp-bottom {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	height: 72px;
	margin-top: auto;
}

.player-art {
	width: 42px;
	height: 42px;
	border-radius: 6px;
	background: var(--white-a03);
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.player-art i {
	font-size: 18px;
	color: var(--text-white);
	opacity: 0.15;
}

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

.player-info .title {
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.player-info .artist {
	font-size: 10px;
	color: var(--text-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.player-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.player-controls button {
	background: none;
	border: none;
	color: var(--text-controls);
	cursor: pointer;
	font-size: 16px;
	padding: 2px;
	transition: all 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.player-controls button:hover {
	color: var(--text-white);
	transform: scale(1.05);
}

.play-btn {
	width: 32px;
	height: 32px;
	border-radius: 50% !important;
	background: var(--text-white) !important;
	color: var(--text-dark) !important;
	font-size: 14px !important;
}

.play-btn:hover {
	transform: scale(1.08) !important;
}

.time-display {
	font-size: 9px;
	color: var(--text-faint);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	min-width: 32px;
	text-align: right;
}

.search-toggle-btn {
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 16px;
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s;
}

.search-toggle-btn:hover {
	color: var(--text-white);
}

.miniplayer.expanded .search-toggle-btn {
	display: none;
}

.progress-bar {
	height: 3px;
	background: var(--white-a06);
	cursor: pointer;
	flex-shrink: 0;
}

.progress-bar:hover {
	height: 5px;
}

.progress-inner {
	width: 0;
	height: 100%;
	background: var(--color1-dim);
	border-radius: 0 2px 2px 0;
	transition: width 0.1s linear;
}

.loading-dots::after {
	content: '';
	animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
	0% {
		content: '';
	}

	25% {
		content: '.';
	}

	50% {
		content: '..';
	}

	75% {
		content: '...';
	}
}

.musicnav {
	display: none;
}

.miniplayer {
	display: flex;

}

.musicnav {
	display: flex;
}

body.hide-music .miniplayer {
	display: none;
}

#search-input {
	align-items: center;
	padding: 16px 28px;
	background: var(--glass-bg);
	backdrop-filter: blur(28px) saturate(1.5);
	-webkit-backdrop-filter: blur(28px) saturate(1.5);
	border: 1.5px solid transparent;
	border-radius: 60px;
	max-width: 460px;
	transition: all 0.4s var(--ease-out);
	width: 90%;
	color: var(--ink);
	font-size: 15px;
	letter-spacing: 0.01em;
	box-shadow: 0 4px 30px var(--black-a40),
		inset 0 1px 0 var(--white-a04);
	background-image: linear-gradient(var(--glass-bg),
			var(--glass-bg)),
		var(--accent-grad-225);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	margin: 30px;
	margin-top: 0px;
	position: relative;
	top: 30px;
}

#search-input::placeholder {
	color: var(--white-a22);
	font-weight: 300;
}

#search-input:focus {
	outline: none;
	color: var(--text-white);
	box-shadow: 0 4px 50px var(--glow-mixed), 0 0 0 5px var(--accent-glow),
		inset 0 1px 0 var(--white-a06);
	border-radius: 20px;
	background-image: linear-gradient(var(--glass-bg-strong),
			var(--glass-bg-strong)),
		var(--accent-grad-225);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.search-input {
	flex: 1;
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid var(--white-a06);
	background: var(--white-a04);
	color: var(--text-white);
	font-family: inherit;
	font-size: 11px;
	transition: all 0.2s;
}

.search-input::placeholder {
	color: var(--text-faint);
}

.search-input:focus {
	border-color: var(--white-a15);
	background: var(--white-a07);
}
.item {
	width: 160px;
	height: 160px;
	overflow: hidden;
	margin: 0.781vw;
	border-radius: 16px;
	display: inline-block;
	transition: all 0.4s var(--ease-out);
	position: relative;
	text-align: center;
	border: 1.5px solid rgba(255, 255, 255, 0.04);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	opacity: 0;
}

.item::before {
	content: "";
	position: absolute;
	inset: -1.5px;
	border-radius: calc(16px + 1.5px);
	opacity: 0;
	z-index: -1;
	transition: opacity 0.4s ease;
}

.item::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
	background: linear-gradient(180deg,
			transparent 30%,
			rgba(0, 0, 0, 0.65) 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	z-index: 1;
}

.item:hover {
	transform: translateY(calc(1vw - 6px)) scale(1.03);

	border-color: transparent;
}

.item:hover::before {
	opacity: 1;
}

.item:hover::after {
	opacity: 1;
}

.item img {
	width: 100%;
	height: 100%;
	position: relative;
	transition: all 0.5s var(--ease-out);

	pointer-events: none;
	object-fit: cover;
	border-radius: calc(16px - 1.5px);
}

.item:hover img {
	filter: brightness(0.45) blur(1.5px);
	transform: scale(1.06);
}

.item h1 {
	bottom: 12px;
	opacity: 0;
	transition: all 0.4s var(--ease-out);
	position: absolute;
	color: #fff;
	text-align: center;
	width: 85%;
	margin: 0 auto;
	left: 0;
	right: 0;
	z-index: 2;
	transform: translateY(8px);
}

.item:hover h1 {
	opacity: 1;
	transform: translateY(0);
}

.itemh1 {
	font-size: 14px;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.01em;
	line-height: 1.3;
	background: linear-gradient(135deg, var(--trans), var(--color1));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
#category {
	align-items: center;
	padding: 8px 14px;
	background: rgba(13, 18, 32, 0.5);
	backdrop-filter: blur(28px) saturate(1.5);
	-webkit-backdrop-filter: blur(28px) saturate(1.5);
	border: 1.5px solid transparent;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius:30px;

	max-width: 460px;
	transition: all 0.4s var(--ease-out);
	width: 90%;
	color: #d0d0d8;
	font-size: 15px;
	letter-spacing: 0.01em;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	background-image: linear-gradient(rgba(13, 18, 32, 0.5),
			rgba(13, 18, 32, 0.5)),
		var(--accent-grad-225);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	margin-top: 0px;
	position: relative;
}

#category::placeholder {
	color: rgba(255, 255, 255, 0.22);
	font-weight: 300;
}

#category:focus {
	outline: none;
	color: #fff;
	box-shadow: 0 4px 50px var(--glow-mixed), 0 0 0 5px rgba(200, 210, 255, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
		border-bottom-left-radius: 20px;
	border-bottom-right-radius:20px;
	background-image: linear-gradient(rgba(13, 18, 32, 0.8),
			rgba(13, 18, 32, 0.8)),
		var(--accent-grad-225);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}