/* Morella Vault Player. Everything is driven by CSS variables set on #mvp-root. */
#mvp-root, #mvp-root * { box-sizing: border-box; }
#mvp-root {
	position: fixed;
	left: 0;
	right: 0;
	z-index: var(--mvp-z, 99999);
	font-family: var(--mvp-font, inherit);
	color: var(--mvp-text);
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
}
#mvp-root.mvp-pos-bottom { bottom: 0; }
#mvp-root.mvp-pos-top { top: 0; }
#mvp-root.mvp-layout-floating {
	left: 50%;
	right: auto;
	width: calc(100% - 24px);
	max-width: var(--mvp-maxw, 1100px);
	transform: translateX(-50%);
}
#mvp-root.mvp-layout-floating.mvp-pos-bottom { bottom: 12px; }
#mvp-root.mvp-layout-floating.mvp-pos-top { top: 12px; }
#mvp-root.mvp-empty { display: none; }

body.mvp-pad-bottom { padding-bottom: calc(var(--mvp-pad, 64px) + env(safe-area-inset-bottom, 0px)); }
body.mvp-pad-top { padding-top: var(--mvp-pad, 64px); }

.mvp-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: var(--mvp-h, 64px);
	padding: 0 16px;
	background: var(--mvp-bg);
	border-radius: var(--mvp-radius, 0);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 0 24px rgba(0, 0, 0, .35);
}
.mvp-pos-bottom .mvp-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }

.mvp-cover {
	flex: 0 0 auto;
	width: var(--mvp-cover, 44px);
	height: var(--mvp-cover, 44px);
	border-radius: 4px;
	background: var(--mvp-track) center / cover no-repeat;
}
.mvp-info { flex: 0 1 240px; min-width: 0; }
.mvp-title {
	font-size: var(--mvp-fs-title, 14px);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mvp-meta {
	font-size: var(--mvp-fs-meta, 12px);
	color: var(--mvp-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mvp-controls { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#mvp-root button {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 6px;
	color: var(--mvp-btn);
	cursor: pointer;
	line-height: 0;
	border-radius: 50%;
	box-shadow: none;
	text-transform: none;
	min-height: 0;
}
#mvp-root button:hover { color: var(--mvp-accent); background: transparent; }
#mvp-root button:focus-visible { outline: 2px solid var(--mvp-accent); outline-offset: 2px; }
#mvp-root button svg { width: var(--mvp-icon, 22px); height: var(--mvp-icon, 22px); fill: currentColor; display: block; }
#mvp-root .mvp-play { color: var(--mvp-accent); }
#mvp-root button.mvp-on { color: var(--mvp-accent); }
#mvp-root button.mvp-shuffle, #mvp-root button.mvp-repeat { opacity: .75; }
#mvp-root button.mvp-shuffle.mvp-on, #mvp-root button.mvp-repeat.mvp-on { opacity: 1; }
#mvp-root .mvp-play svg { width: calc(var(--mvp-icon, 22px) * 1.5); height: calc(var(--mvp-icon, 22px) * 1.5); }
#mvp-root .mvp-play:hover { color: var(--mvp-btn); }
#mvp-root.mvp-needs-tap .mvp-play { animation: mvp-pulse 1.2s ease-in-out infinite; }
@keyframes mvp-pulse { 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { #mvp-root.mvp-needs-tap .mvp-play { animation: none; } }

.mvp-seek { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.mvp-time { font-size: var(--mvp-fs-time, 12px); color: var(--mvp-muted); font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; }

/* Sliders */
#mvp-root input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 18px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	--mvp-p: 0%;
}
#mvp-root input[type=range]::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--mvp-accent) var(--mvp-p), var(--mvp-track) var(--mvp-p));
}
#mvp-root input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--mvp-track); }
#mvp-root input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--mvp-accent); }
#mvp-root input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	margin-top: -4px;
	border: 0;
	border-radius: 50%;
	background: var(--mvp-btn);
}
#mvp-root input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--mvp-btn); }
#mvp-root input[type=range]:focus-visible { outline: 2px solid var(--mvp-accent); outline-offset: 2px; }

.mvp-vol { display: flex; align-items: center; gap: 4px; flex: 0 0 120px; }

/* Library panel */
.mvp-panel {
	position: absolute;
	left: 0;
	right: 0;
	max-height: min(60vh, 520px);
	overflow-y: auto;
	background: var(--mvp-panel);
	border-radius: var(--mvp-radius, 0);
	box-shadow: 0 0 24px rgba(0, 0, 0, .4);
	padding: 8px 0;
	display: none;
}
.mvp-pos-bottom .mvp-panel { bottom: 100%; margin-bottom: 6px; }
.mvp-pos-top .mvp-panel { top: 100%; margin-top: 6px; }
#mvp-root.mvp-open .mvp-panel { display: block; }
.mvp-panel details { border-bottom: 1px solid var(--mvp-track); }
.mvp-panel summary {
	padding: 10px 16px;
	cursor: pointer;
	font-size: var(--mvp-fs-title, 14px);
	font-weight: 600;
	list-style: none;
}
.mvp-panel summary::-webkit-details-marker { display: none; }
.mvp-panel summary::before { content: "\25B8"; display: inline-block; width: 1.1em; color: var(--mvp-muted); }
.mvp-panel details[open] > summary::before { content: "\25BE"; }
.mvp-album { padding: 4px 16px 10px 32px; }
.mvp-album-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mvp-album-head .mvp-thumb { width: 36px; height: 36px; border-radius: 3px; background: var(--mvp-track) center / cover no-repeat; flex: 0 0 auto; }
.mvp-album-name { flex: 1 1 auto; font-size: var(--mvp-fs-meta, 12px); color: var(--mvp-muted); text-transform: uppercase; letter-spacing: .06em; }
#mvp-root .mvp-album-play { font-size: var(--mvp-fs-meta, 12px); line-height: 1.2; padding: 4px 10px; border: 1px solid var(--mvp-accent); border-radius: 12px; color: var(--mvp-accent); }
#mvp-root .mvp-album-play:hover { background: var(--mvp-accent); color: var(--mvp-panel); }
#mvp-root .mvp-track {
	display: block;
	width: 100%;
	text-align: left;
	border-radius: 3px;
	padding: 6px 8px;
	line-height: 1.3;
	font-size: var(--mvp-fs-title, 14px);
	color: var(--mvp-text);
}
#mvp-root .mvp-track:hover { background: var(--mvp-track); color: var(--mvp-text); }
#mvp-root .mvp-track.mvp-current { color: var(--mvp-accent); font-weight: 600; }
.mvp-msg { padding: 16px; color: var(--mvp-muted); font-size: var(--mvp-fs-meta, 12px); }

@media (max-width: 720px) {
	.mvp-bar { gap: 8px; padding: 0 10px; }
	.mvp-info { flex: 1 1 auto; }
	.mvp-seek, .mvp-vol { display: none; }
	.mvp-bar.mvp-has-seek-mobile .mvp-seek { display: flex; }
	#mvp-root .mvp-prev, #mvp-root .mvp-repeat { display: none; }
	.mvp-bar::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		height: 2px;
		width: var(--mvp-prog, 0%);
		background: var(--mvp-accent);
	}
}

/* Seamless mode: the page sits in a frame next to the bar. */
html.mvp-shell-html, html.mvp-shell-html body { margin: 0; height: 100%; overflow: hidden; background: var(--mvp-panel, #111); }
#mvp-frame {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100vh - var(--mvp-pad, 64px));
	height: calc(100dvh - var(--mvp-pad, 64px));
	border: 0;
	background: #fff;
}
body.mvp-top #mvp-frame { top: var(--mvp-pad, 64px); }