:root {
	/*--font: "Segoe UI", sans-serif;*/
	--font: "Cascadia Code Light", "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
	/*--font: "Cascadia Code Light", "Monaco", "Andale Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace;*/
	--anim: 0.27s ease-out;
	--pads: 0.7rem;
	--gaps: 0.6rem;
	--tiny: calc(var(--gaps) * 0.66);
	--rads: 2px;
	--back: #fff;
	--high: #eaeaea;
	--text: #333;
	--hint: #03a9f4;
}

@media (prefers-color-scheme: dark) {
	:root {
		--back: #0d1117;
		--high: #1d2534;
		--text: #898989;
	}
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}
body {
	font-family: var(--font);
	background-color: var(--back);
	color: var(--text);
	touch-action: none;
}

* {
	box-sizing: border-box;
	outline: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

#main {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	color: var(--text);
}

/* ── LEFT COLUMN (panels + player) ──────────────── */

#player {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tiny);
}

#wrap {
	flex: 0 0 auto;
	padding: var(--tiny);
	display: flex;
	flex-direction: column;
	width: 100%;
	/*border-bottom: 1px solid var(--high);*/
}

#wrap-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	/*gap: var(--pads);*/
}

/* ── MENU ────────────────────────────────────────── */

#menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--back);
	transform: translateX(-100%);
	transition: transform var(--anim);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 3;
}
#main.menu #menu {
	transform: translateX(0%);
}
#main.menu #menu-btn svg {
	stroke: var(--hint);
}

/* ── TRACK LIST ──────────────────────────────────── */

#list {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--back);
	transform: translateX(100%);
	transition: transform var(--anim);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#main.list #list {
	transform: translateX(0%);
}
#main.list #list-btn svg {
	stroke: var(--hint);
}

#tracklist {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	touch-action: pan-y;
}

#list-tracks {
	flex: 1;
	min-height: 0;
	overflow-y: scroll;
	touch-action: pan-y;
}

/* ── LIBRARY ─────────────────────────────────────── */

#lib-nav {
	height: 40px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--high);
	flex-shrink: 0;
	gap: var(--tiny);
}

#lib-up-btn {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	transition: opacity var(--anim);
}

#lib-crumbs {
	height: 100%;
	flex: 1;
	display: flex;
	overflow-x: auto;
	white-space: nowrap;
	gap: 0.1rem;
	align-items: center;
	font-size: 0.85rem;
	scrollbar-width: none;
	padding-right: var(--gaps);
}

#lib-crumbs span {
	height: 100%;
	display: flex;
	align-items: center;
}

#lib-crumbs::-webkit-scrollbar {
	display: none;
}

.crumb {
	cursor: pointer;
	opacity: 0.7;
}

.crumb:last-child {
	opacity: 1;
}

.crumb-sep {
	opacity: 0.42;
	width: 16px;
	flex-shrink: 0;
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E");
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	background: var(--text);
}

#lib-search-wrap {
	display: flex;
	align-items: center;
	gap: var(--gaps);
	padding: var(--tiny) var(--gaps);
	border-bottom: 1px solid var(--high);
	flex-shrink: 0;
}

#lib-search {
	flex: 1;
	min-width: 0;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	color: var(--text);
	font-family: var(--font);
	font-size: 0.8rem;
	outline: none;
}

#lib-search::placeholder {
	opacity: 0.5;
}

#lib-search-clear {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	font-size: 0.75rem;
	opacity: 0.5;
	color: var(--text);
	transition: opacity var(--anim);
}

#lib-list {
	flex: 1;
	overflow-y: auto;
	touch-action: pan-y;
}

.lib-dir {
	padding: var(--gaps) var(--tiny);
	cursor: pointer;
	border-bottom: 1px solid var(--high);
	font-size: 0.9rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--gaps);
}

.lib-dir-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1;
	min-width: 0;
}

.lib-dir-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lib-dir-info {
	font-size: 0.72rem;
	opacity: 0.5;
}

.lib-dir::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	background: var(--text);
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>');
	mask-size: contain;
	mask-repeat: no-repeat;
	opacity: 0.5;
}

#lib-list .track-item::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	background: var(--text);
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>');
	mask-size: contain;
	mask-repeat: no-repeat;
	opacity: 0.5;
}

.lib-dir-more,
.lib-track-more {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	background: var(--text);
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	opacity: 0.5;
}

/* menu items */

#playlist-list,
#menu-list {
	flex: 1;
	overflow-y: auto;
	touch-action: pan-y;
}
.menu-item {
	padding: 0.8rem 1rem;
	cursor: pointer;
	border-bottom: 1px solid var(--high);
	font-size: 0.9rem;
	transition: background var(--anim);
}
/* WTF, SELECTED */
.menu-item.active {
	background: var(--high);
}

/* storage info */

#menu-info {
	flex-shrink: 0;
	padding: var(--pads);
	font-size: 0.7rem;
	opacity: 0.45;
	border-top: 1px solid var(--high);
}

/* track list */

.track-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--gaps);
	padding: var(--tiny);
	cursor: pointer;
	transition: background var(--anim);
}
.track-item:not(:last-child) {
	border-bottom: 1px solid var(--high);
}
.track-item.now-playing {
	background: var(--high);
}

.track-item.cached::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 2px;
	height: 100%;
	background: #03a9f4;
	opacity: 0.5;
}

.track-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	/*padding-left: var(--pads);*/
	/*pointer-events: none;*/
}
.track-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.9rem;
}
.track-sub {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.75rem;
	opacity: 0.55;
	/*margin-top: 0.1rem;*/
}

.track-dur {
	font-size: 0.75rem;
	opacity: 0.5;
	white-space: nowrap;
	flex-shrink: 0;
}

.track-inf {
	font-size: 0.66rem;
	opacity: 0.5;
	white-space: nowrap;
}

/* main wrap */

/* ── COVER ART ───────────────────────────────────── */

#cover {
	width: min(60%, 30vh);
	aspect-ratio: 1;
	position: relative;
}
.cover-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*padding: var(--gaps);*/
	/*padding: var(--gaps) 0 var(--gaps);*/
	padding-bottom: var(--gaps);
	transition: opacity var(--anim);
}

#wrap-a,
#wrap-b {
	opacity: 0;
	/*transition: opacity var(--anim);*/
}

#cover-hold {
	width: 100%;
	height: 100%;
	fill: var(--text);
	opacity: 0.2;
	/*transition: opacity var(--anim);*/
}

/* Let the existing `.covered` class fade out the SVG */
#cover.covered #cover-hold {
	opacity: 0;
}

.cover-img {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--rads);
	/* Opacity and transition are now handled by #wrap-a / #wrap-b */
}

#wrap-code {
	background: var(--back);
	opacity: 0;
}

#wrap-code svg {
	width: 100%;
	height: 100%;
}

#wrap-code svg rect {
	fill: var(--text);
}

#wrap.qrcode #wrap-code {
	opacity: 1;
}

/* ── METADATA ────────────────────────────────────── */

#meta-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
#meta-container > div {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#meta-title {
	font-size: 1.3rem;
}
#meta-album {
	font-size: .9rem;
	opacity: 0.8;
}
#meta-artist {
	font-size: .8rem;
	opacity: 0.6;
}
#meta-tech {
	display: none;
	font-size: 0.7rem;
	opacity: 0.6;
}

/* ── PLAYER CONTROLS ─────────────────────────────── */

#controls {
	width: 100%;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	gap: calc(var(--gaps) / 2);
	padding: var(--pads);
	padding-top: var(--gaps);
	padding-bottom: calc(var(--tiny) + env(safe-area-inset-bottom, 0px));
	/*border-top: 1px solid var(--high);*/
}
#medias {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#medias button {
	width: 40px;
	height: 40px;
}
button {
	position: relative;
	border: none;
	cursor: pointer;
	padding: 0;
	background: none;
}
button svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	fill: none;
	stroke: var(--text);
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition:
		opacity var(--anim),
		stroke var(--anim);
	pointer-events: none;
}

#actions button {
	width: 36px;
	height: 36px;
}

#keep-btn {
}
#keep-btn.busy svg {
	opacity: 0;
}

#wrap.qrcode #code-btn svg {
	stroke: var(--hint);
}

#play-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

#play-btn svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.12s ease-out;
}

#play-btn:not(.playing) #played {
	opacity: 1;
}

#play-btn.playing #paused {
	opacity: 1;
}

#prev-svg.slide {
	animation: slide-prev 0.27s ease-out forwards;
}

@keyframes slide-prev {
	0% {
		transform: translateX(0%);
	}
	15% {
		transform: translateX(-8px);
	}
	50% {
		transform: translateX(-8px);
	}
	100% {
		transform: translateX(0%);
	}
}

#next-svg.slide {
	animation: slide-next 0.27s ease-out forwards;
}

@keyframes slide-next {
	0% {
		transform: translateX(0%);
	}
	15% {
		transform: translateX(8px);
	}
	50% {
		transform: translateX(8px);
	}
	100% {
		transform: translateX(0%);
	}
}

.pop-btn {
	animation: pop-btn 0.24s ease-out forwards;
}

@keyframes pop-btn {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.66);
	}
	100% {
		transform: scale(1);
	}
}

/* ── SEEK ────────────────────────────────────────── */

#seek-wrap {
	width: 100%;
	flex-shrink: 0;
	height: 32px;
	position: relative;
	cursor: pointer;
	touch-action: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
#seek-wrap .track {
	position: relative;
	width: 100%;
	height: 8px;
	border: solid 1px var(--text);
	border-radius: var(--rads);
	overflow: hidden;
}
#seek-wrap .timed {
	width: 0%;
	height: 100%;
	will-change: width;
	background: var(--text);
}
#seek-wrap .texts {
	width: 100%;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	font-size: 0.8rem;
}

/* ── UTILITY CONTROLS ────────────────────────────── */

#actions {
	flex: 1;
	display: grid;
	place-items: center;
	/*grid-template-rows: auto-fit;*/
	grid-template-columns: repeat(2, 1fr);
	row-gap: calc(var(--gaps) * 2);
	column-gap: var(--gaps);
}

button.busy {
	pointer-events: none;
}

button.disabled {
	opacity: 0.25;
	pointer-events: none;
}

#keep-btn.cached svg {
	stroke: var(--hint);
}

#keep-prg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	pointer-events: none;
	color: var(--text);
}

#keep-btn.busy svg {
	opacity: 0;
}

#keep-btn.busy #keep-prg {
	visibility: visible;
}

/* ── HIDDEN ──────────────────────────────────────── */

audio {
	display: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: var(--back);
}

::-webkit-scrollbar-thumb {
	width: 6px;
	height: 6px;
	background-color: var(--high);
	cursor: pointer;
}

::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

::-webkit-scrollbar-corner {
	background-color: transparent;
}

/* ── LANDSCAPE / WIDE-SCREEN ─────────────────────── */

@media (orientation: landscape) and (min-width: 480px) {
	#main {
		padding-left: 50%;
	}

	#menu {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: 50%;
		transform: none !important;
		transition: none;
		border-right: 1px solid var(--high);
		padding-left: env(safe-area-inset-left, 0px);
	}

	/*#list {
		position: fixed;
		right: 0;
		top: 0;
		bottom: 0;
		width: clamp(260px, 33%, 380px);
		transform: translateX(100%);
		transition: transform var(--anim);
		padding-right: env(safe-area-inset-right, 0px);
	}

	#main.list #list {
		transform: translateX(0%);
	}*/

	#cover {
		/*display: none;*/
	}

	#menu-btn {
		/*display: none;*/
		visibility: hidden;
	}
}

@media (orientation: landscape) and (min-width: 480px) and (max-width: 960px) {
	#actions {
		grid-template-columns: repeat(3, 1fr);
		row-gap: calc(var(--gaps) * 2);
		column-gap: var(--gaps);
	}
}

@media (min-width: 960px) {
	#main {
		padding-left: 30%;
		padding-right: 30%;
	}

	#menu {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: 30%;
		transform: none !important;
		transition: none;
		border-right: 1px solid var(--high);
		padding-left: env(safe-area-inset-left, 0px);
	}

	#list {
		position: fixed;
		right: 0;
		left: unset;
		top: 0;
		width: 30%;
		height: 100%;
		transform: none !important;
		transition: none;
		border-left: 1px solid var(--high);
		padding-right: env(safe-area-inset-right, 0px);
	}

	#menu-btn,
	#list-btn {
		/*display: none;*/
		visibility: hidden;
	}

	#medias {
		justify-content: space-evenly;
	}
}

/* ── STAR BUTTON ─────────────────────────────────── */

#star-btn.starred svg {
	stroke: var(--hint);
	/*fill: var(--hint);*/
}

/* ── MOVE-TO-PLAYLIST MODAL ──────────────────────── */

.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 200;
	display: flex;
	align-items: flex-end;
	transition: background var(--anim);
}

.modal-overlay.open {
	background: rgb(from var(--back) r g b / 66%);
}

.modal-sheet {
	width: 100%;
	background: var(--back);
	border-radius: var(--rads) var(--rads) 0 0;
	border-top: 1px solid var(--high);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(100%);
	transition: transform var(--anim);
	max-height: 70vh;
	padding-bottom: env(safe-area-inset-bottom, 20px);
}

.modal-overlay.open .modal-sheet {
	transform: translateY(0);
}

.modal-title {
	padding: var(--gaps);
	border-bottom: 1px solid var(--high);
	font-size: 0.8rem;
	flex-shrink: 0;
}

.modal-body {
	overflow-y: auto;
	touch-action: pan-y;
}

.modal-empty {
	padding: var(--gaps);
	font-size: 0.85rem;
	opacity: 0.4;
}

.modal-item {
	padding: 0.8rem 1rem;
	cursor: pointer;
	border-bottom: 1px solid var(--high);
	font-size: 0.9rem;
	transition: background var(--anim);
}

.modal-item:active {
	background: var(--high);
}

.modal-input-row {
	display: flex;
	gap: var(--gaps);
	padding: var(--gaps);
	/*border-top: 1px solid var(--high);*/
	flex-shrink: 0;
}

.modal-input {
	flex: 1;
	min-width: 0;
	background: var(--high);
	border: 1px solid var(--high);
	border-radius: var(--rads);
	padding: 0.45rem 0.6rem;
	color: var(--text);
	font-family: var(--font);
	font-size: 0.85rem;
	outline: none;
}


.modal-confirm {
	flex-shrink: 0;
	padding: 0.45rem 0.9rem;
	background: var(--hint);
	color: #fff;
	border: none;
	border-radius: var(--rads);
	cursor: pointer;
	font-family: var(--font);
	font-size: 0.85rem;
}

/* ── LIB POPOVER ─────────────────────────────────── */

.lib-popover-bd {
	position: fixed;
	inset: 0;
	z-index: 150;
}
.lib-popover {
	position: fixed;
	z-index: 151;
	background: var(--back);
	border: 1px solid var(--high);
	min-width: 160px;
}
.lib-popover-item {
	padding: 0.75rem 1rem;
	font-size: 0.85rem;
	cursor: pointer;
	border-bottom: 1px solid var(--high);
}
.lib-popover-item:last-child {
	border-bottom: none;
}
.lib-popover-item:active {
	background: var(--high);
}

.toaster {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	backdrop-filter: blur(5px);
	cursor: pointer;
}

.toast {
	/*position: fixed;*/
	/*bottom: calc(75px + var(--gaps) + 2 * var(--pads) + env(safe-area-inset-bottom, 20px));*/
	/*left: 50%;*/
	/*transform: translateX(-50%);*/
	/*background: var(--back);*/
	/*color: var(--text);*/
	/*padding: var(--pads);*/
	/*border: solid 1px var(--hint);*/
	/*border-radius: var(--rads);*/
	
	font-size: 1.5rem;
}