/* =========================================================
   IDD Playlist DJ — CORE
   ========================================================= */

.idd-pl {
	--pl-brand:        var(--wp-brand,        #B5637A);
	--pl-brand-dark:   var(--wp-brand-dark,   #9A4F65);
	--pl-brand-light:  var(--wp-brand-light,  #EDD6DC);
	--pl-brand-soft:   var(--wp-brand-soft,   rgba(181,99,122,.09));
	--pl-brand-border: var(--wp-brand-border, rgba(181,99,122,.22));

	--pl-gold:         var(--wp-gold,         #C9A87C);
	--pl-sage:         var(--wp-sage,         #7A9D80);
	--pl-sage-dark:    var(--wp-sage-dark,    #5C7E62);
	--pl-sage-light:   var(--wp-sage-light,   #E2EDE4);
	--pl-prune:        #9C1657;

	--pl-bg:           var(--wp-bg,           #FDFAF8);
	--pl-surface:      var(--wp-surface,      #FFFFFF);
	--pl-surface-2:    var(--wp-surface-2,    #F8F2EE);
	--pl-surface-3:    var(--wp-surface-3,    #F2E8E2);

	--pl-ink:          var(--wp-ink,          #1D1819);
	--pl-soft:         var(--wp-soft,         #4A4144);
	--pl-muted:        var(--wp-muted,        #8A7E81);
	--pl-line:         var(--wp-line,         #EFE5E0);
	--pl-line-strong:  var(--wp-line-strong,  #E2D3CB);

	--pl-font-serif:   var(--font-serif, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
	--pl-font-sans:    var(--font-sans, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);

	--pl-radius:       var(--radius-md, 16px);
	--pl-radius-sm:    var(--radius-sm, 10px);
	--pl-shadow:       var(--shadow-md, 0 8px 28px rgba(29,24,25,.09));
	--pl-shadow-sm:    var(--shadow-sm, 0 3px 12px rgba(29,24,25,.07));

	color: var(--pl-ink);
	font-family: var(--pl-font-sans);
	max-width: 1200px;
	margin: 24px auto 80px;
	padding: 0 20px;
	box-sizing: border-box;
}
.idd-pl *, .idd-pl *::before, .idd-pl *::after { box-sizing: inherit; }

.idd-pl-login-required {
	max-width: 480px;
	margin: 60px auto;
	padding: 24px 28px;
	background: var(--wp-surface, #fff);
	border: 1px solid var(--wp-line, #EFE5E0);
	border-radius: var(--radius-md, 18px);
	text-align: center;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.3rem;
	color: var(--wp-ink, #1D1819);
}

/* Topbar */
.idd-pl__topbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.idd-pl__topbar-left { flex: 1 1 280px; }
.idd-pl__eyebrow {
	margin: 0 0 6px;
	color: var(--pl-brand);
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
}
.idd-pl__title-main {
	font-family: var(--pl-font-serif);
	font-size: clamp(2rem, 1.4rem + 1.8vw, 2.6rem);
	font-weight: 600;
	color: var(--pl-ink);
	line-height: 1.1;
	margin: 0 0 6px;
}
.idd-pl__sub {
	color: var(--pl-muted);
	font-size: .95rem;
	margin: 0;
	max-width: 640px;
}
.idd-pl__topbar-right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.idd-pl__saved {
	min-width: 92px;
	color: var(--pl-muted);
	font-size: .88rem;
	text-align: right;
	min-height: 1.2em;
}
.idd-pl__icon-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: var(--radius-full, 999px);
	border: 1px solid var(--pl-line-strong);
	background: var(--pl-surface);
	color: var(--pl-ink);
	font-size: .9rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--duration, 180ms) var(--ease, ease), border-color var(--duration, 180ms) var(--ease, ease);
}
.idd-pl__icon-btn:hover { background: var(--pl-surface-2); color: var(--pl-ink); }
.idd-pl__icon-btn .dashicons { font-size: 18px; width: 18px; height: 18px; }
.idd-pl__icon-only {
	background: none; border: 0; cursor: pointer;
	width: 32px; height: 32px;
	border-radius: var(--radius-xs, 8px);
	color: var(--pl-muted);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background var(--duration, 180ms) var(--ease, ease), color var(--duration, 180ms) var(--ease, ease);
	flex: 0 0 auto;
}
.idd-pl__icon-only:hover { background: var(--pl-surface-2); color: var(--pl-prune); }
.idd-pl__icon-only .dashicons { font-size: 18px; width: 18px; height: 18px; }

/* Stats */
.idd-pl__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}
@media (max-width: 580px) {
	.idd-pl__stats { grid-template-columns: 1fr; }
}
.idd-pl__stat-card {
	background: var(--pl-surface);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-sm);
	box-shadow: var(--pl-shadow-sm);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.idd-pl__stat-card--accent {
	background: linear-gradient(135deg, var(--pl-brand-soft), #fff);
	border-color: var(--pl-brand-border);
}
.idd-pl__stat-num {
	font-family: var(--pl-font-serif);
	font-size: 2rem;
	font-weight: 600;
	color: var(--pl-ink);
	line-height: 1;
}
.idd-pl__stat-card--accent .idd-pl__stat-num { color: var(--pl-brand-dark); }
.idd-pl__stat-label { font-size: .82rem; color: var(--pl-muted); }

/* Buttons */
.idd-pl__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--radius-full, 999px);
	border: 1px solid var(--pl-line-strong);
	background: var(--pl-surface);
	color: var(--pl-ink);
	font-family: inherit;
	font-size: .92rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--duration, 180ms) var(--ease, ease), border-color var(--duration, 180ms) var(--ease, ease), transform .08s;
}
.idd-pl__btn--sm { padding: 6px 12px; font-size: .85rem; }
.idd-pl__btn:hover { background: var(--pl-surface-2); }
.idd-pl__btn:active { transform: translateY(1px); }
.idd-pl__btn .dashicons { font-size: 18px; width: 18px; height: 18px; }
.idd-pl__btn--primary {
	background: var(--pl-brand);
	color: #fff;
	border-color: var(--pl-brand);
	box-shadow: var(--shadow-brand, 0 10px 22px rgba(181,99,122,.28));
}
.idd-pl__btn--primary:hover {
	background: var(--pl-brand-dark);
	border-color: var(--pl-brand-dark);
	color: #fff;
}
.idd-pl__btn--ghost {
	background: transparent;
	border-color: var(--pl-line);
	color: var(--pl-soft);
}
.idd-pl__btn--ghost:hover { background: var(--pl-surface-2); color: var(--pl-ink); }

@media (max-width: 640px) {
	.idd-pl { padding: 0 14px; margin: 18px auto 60px; }
}