.pmpr-panel,
.pmpr-login {
	--pmpr-bg: #111217;
	--pmpr-card: #1b1d24;
	--pmpr-text: #f8f8fa;
	--pmpr-muted: #a9acb7;
	--pmpr-accent: #ff3d9a;
	--pmpr-priority: #ffd84d;
	box-sizing: border-box;
	width: min(100%, 980px);
	margin: 24px auto;
	padding: clamp(18px, 4vw, 38px);
	border-radius: 22px;
	background: var(--pmpr-bg);
	color: var(--pmpr-text);
	font-family: inherit;
}

.pmpr-panel *, .pmpr-login * { box-sizing: border-box; }
.pmpr-header { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 20px; }
.pmpr-header h1 { margin: 0; color: var(--pmpr-text); font-size: clamp(28px, 5vw, 48px); line-height: 1; }
.pmpr-kicker { margin: 0 0 7px; color: var(--pmpr-accent); font-size: 13px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.pmpr-header-actions { display: flex; gap: 10px; align-items: center; }
.pmpr-refresh, .pmpr-logout, .pmpr-delete { border: 0; border-radius: 999px; padding: 11px 16px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.pmpr-refresh { background: #30333e; color: var(--pmpr-text); }
.pmpr-logout { background: transparent; color: var(--pmpr-muted); border: 1px solid #3a3d47; }
.pmpr-refresh:disabled, .pmpr-delete:disabled { cursor: wait; opacity: .6; }
.pmpr-status { margin-bottom: 16px; color: var(--pmpr-muted); font-size: 14px; }
.pmpr-status.is-error { color: #ff8383; }
.pmpr-list { display: grid; gap: 12px; }
.pmpr-card { position: relative; padding: 18px; border: 1px solid #30333c; border-radius: 16px; background: var(--pmpr-card); }
.pmpr-card.is-priority { border: 2px solid var(--pmpr-priority); background: linear-gradient(135deg, #2d2915 0%, var(--pmpr-card) 55%); }
.pmpr-card-top { display: flex; justify-content: space-between; align-items: center; min-height: 25px; gap: 12px; }
.pmpr-badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: var(--pmpr-priority); color: #17130a; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.pmpr-time { margin-left: auto; color: var(--pmpr-muted); font-size: 13px; }
.pmpr-song { margin: 10px 0 7px; color: var(--pmpr-text); font-size: clamp(20px, 4vw, 30px); line-height: 1.15; overflow-wrap: anywhere; }
.pmpr-person, .pmpr-comments { margin: 5px 0; color: var(--pmpr-muted); overflow-wrap: anywhere; white-space: pre-line; }
.pmpr-comments { color: #d8d9df; }
.pmpr-delete { margin-top: 14px; background: #343741; color: var(--pmpr-text); }
.pmpr-delete:hover { background: #4a1e31; color: #ffb5d7; }
.pmpr-empty { padding: 52px 18px; border: 1px dashed #3a3d47; border-radius: 16px; color: var(--pmpr-muted); text-align: center; }
.pmpr-login { max-width: 520px; }
.pmpr-login h2 { margin-top: 0; color: var(--pmpr-text); }
.pmpr-login label { color: var(--pmpr-text); }
.pmpr-login input[type="text"], .pmpr-login input[type="password"] { width: 100%; }

@media (max-width: 640px) {
	.pmpr-panel { margin: 0 auto; border-radius: 0; min-height: 100vh; }
	.pmpr-header { align-items: flex-start; flex-direction: column; }
	.pmpr-header-actions { width: 100%; }
	.pmpr-refresh, .pmpr-logout { flex: 1; text-align: center; }
	.pmpr-delete { width: 100%; }
}