body {
	background: var(--bg, #111F35);
	color: var(--text, #f2f2f6);
	font-family: 'VCR OSD Mono', monospace;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
}

.music-player {
	background: var(--panel2, #1b1b24);
	border-radius: 18px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.18);
	padding: 32px 28px 24px 28px;
	min-width: 340px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.controls button.accent {
	background: var(--accent, #ff3b58);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 32px;
	font-size: 1.1em;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s;
	margin-bottom: 8px;
}
.controls button.accent:hover {
	background: var(--accent2, #ff2d6a);
}

.controls input[type="range"] {
	width: 180px;
	accent-color: var(--accent, #ff3b58);
}

.controls span {
	font-family: monospace;
	font-size: 1em;
	color: var(--text, #f2f2f6);
}

.playlist {
	list-style: none;
	padding: 0;
	margin: 18px 0 0 0;
	width: 100%;
	max-width: 320px;
}
.playlist li {
	padding: 8px 12px;
	border-radius: 6px;
	margin-bottom: 4px;
	background: var(--panel, #17171f);
	color: var(--text, #f2f2f6);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.playlist li.active, .playlist li:hover {
	background: var(--accent, #ff3b58);
	color: #fff;
}
}