
.site-content { padding-bottom: 80px; }

.mini-player {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 100vw;
	box-sizing: border-box;
	padding: 10px 20px;
	background: #0f0f0f;
	border-top: 1px solid #2a2a2a;
	backdrop-filter: blur(6px);
	color: #f5f5f5;
	font-family: 'Inter', sans-serif;
	flex-wrap: wrap;
	gap: 10px;
}

.mini-player[hidden] { display: none !important; }

.player-left { display: flex; align-items: center; gap: 14px; min-width: 160px; }
.player-art { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; background: #222; border-radius: 6px; flex-shrink: 0; }
.player-art img { width: 100%; height: 100%; object-fit: cover; }
.player-info { font-size: 0.85rem; white-space: nowrap; }
.player-info small { color: #777; }
.player-controls { display: flex; align-items: center; gap: 16px; }
.player-controls button,
.player-icon-btn { padding: 0; background: transparent; border: 0; color: #b0b0b0; cursor: pointer; transition: 0.25s cubic-bezier(0.2, 0, 0, 1); }
.player-controls button:hover,
.player-controls button:focus-visible,
.player-icon-btn:hover,
.player-icon-btn:focus-visible { color: #fff; }
.player-controls button { font-size: 1.2rem; }
.player-controls .play-btn { color: #fff; font-size: 1.6rem; }
.player-controls .play-btn:hover,
.player-controls .play-btn:focus-visible { color: #a855f7; }
.player-progress { display: flex; align-items: center; gap: 12px; min-width: 150px; flex: 1; font-size: 0.75rem; }
.progress-bar { position: relative; height: 4px; overflow: hidden; background: #2a2a2a; border-radius: 4px; flex: 1; }
.progress-fill { width: 0; height: 100%; background: #a855f7; border-radius: 4px; transition: width 0.2s linear; }
.player-right { display: flex; align-items: center; gap: 12px; color: #777; }
.player-right i { cursor: pointer; }
.player-license-btn { padding: 0.2rem 1rem; background: #a855f7; border: 0; border-radius: 20px; color: #0b0b0b; font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: 0.25s cubic-bezier(0.2, 0, 0, 1); }
.player-license-btn:hover,
.player-license-btn:focus-visible { background: #c084fc; }
.player-icon-btn.is-liked { color: #a855f7; }

@media (max-width: 768px) {
	.mini-player { padding: 8px 12px; }
	.player-left { min-width: 140px; }
	.player-progress { min-width: 80px; }
}

@media (max-width: 480px) {
	.player-left { gap: 8px; min-width: 130px; }
	.player-art { width: 36px; height: 36px; }
	.player-info { max-width: 100px; overflow: hidden; text-overflow: ellipsis; font-size: 0.75rem; }
	.player-controls { gap: 10px; }
	.player-controls button { font-size: 1rem; }
	.player-controls .play-btn { font-size: 1.35rem; }
	.player-progress { order: 3; width: 100%; flex-basis: 100%; }
	.player-right { gap: 8px; }
	.player-license-btn { padding: 0.15rem 0.7rem; font-size: 0.6rem; }
}
