:root {
	--pdm-accent: #bc983c;
	--pdm-bar: #666;
	--pdm-ref: #999;
	--pdm-wave-h: 100px;
	--pdm-radius: 12px;
	--pdm-border: #e5e5e5;
	--pdm-muted: #777;
}

.pdm-wrap, .pdm-wrap * , .pdm-single, .pdm-single * { box-sizing: border-box; }
.pdm-wrap { margin: 1.5em 0; }

/* ---------- Full waveform player ---------- */
.pdm-player--full {
	background: #fff;
	border: 1px solid var(--pdm-border);
	border-radius: var(--pdm-radius);
	padding: 16px;
	margin: 1em 0;
}
.pdm-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pdm-play {
	flex: 0 0 auto;
	width: 52px; height: 52px;
	border: 0; border-radius: 50%;
	background: var(--pdm-accent);
	color: #fff;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.pdm-play:hover { transform: scale(1.06); }
.pdm-play:focus-visible, .pdm-wave:focus-visible { outline: 2px solid var(--pdm-accent); outline-offset: 3px; }
.pdm-play svg { width: 26px; height: 26px; fill: currentColor; }
.pdm-play .i-pause { display: none; }
.is-playing > .pdm-head .i-play,
.is-playing > .i-play,
.pdm-player.is-playing .pdm-play .i-play { display: none; }
.pdm-player.is-playing .pdm-play .i-pause { display: block; }

.pdm-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pdm-sub { font-size: 13px; color: var(--pdm-muted); }
.pdm-name { font-size: 18px; line-height: 1.3; color: #222; }

.pdm-wave {
	position: relative;
	height: var(--pdm-wave-h);
	background: #f5f5f5;
	border-radius: 8px;
	cursor: pointer;
	touch-action: pan-y;
	user-select: none;
	overflow: hidden;
}
.pdm-wave canvas { width: 100%; height: 100%; display: block; }
.pdm-badge-t {
	position: absolute;
	top: 70%;
	transform: translateY(-50%);
	background: rgba(17, 17, 17, .88);
	color: #fff;
	font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	padding: 3px 5px;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}
.pdm-wave .pdm-cur { left: 0; color: var(--pdm-accent); }
.pdm-wave .pdm-dur { right: 0; }

.pdm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pdm-tools button, .pdm-dl {
	background: #f1f1f1;
	color: #333;
	border: 0;
	border-radius: 999px;
	padding: 7px 12px;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex; align-items: center; gap: 6px;
}
.pdm-tools button:hover, .pdm-dl:hover { background: #e4e4e4; color: #111; }
.pdm-volwrap { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.pdm-volwrap svg, .pdm-dl svg { width: 18px; height: 18px; fill: #555; }
.pdm-vol { width: 90px; accent-color: var(--pdm-accent); }
.pdm-dl { margin-left: 0; }
.pdm-player.is-error::after {
	content: "Audio could not be loaded.";
	display: block; margin-top: 8px; font-size: 13px; color: #b00020;
}

/* ---------- Mini player ---------- */
.pdm-player--mini { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pdm-player--mini .pdm-play { width: 36px; height: 36px; }
.pdm-player--mini .pdm-play svg { width: 18px; height: 18px; }
.pdm-bar { flex: 1; height: 6px; background: #e3e3e3; border-radius: 3px; cursor: pointer; position: relative; touch-action: pan-y; }
.pdm-bar i { display: block; height: 100%; width: 0; background: var(--pdm-accent); border-radius: 3px; pointer-events: none; }
.pdm-mtime { font-size: 12px; color: var(--pdm-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Cards ---------- */
.pdm-grid { display: grid; grid-template-columns: repeat(var(--pdm-cols, 3), 1fr); gap: 24px; }
.pdm-rows, .pdm-heroes { display: flex; flex-direction: column; gap: 24px; }

.pdm-card {
	background: #fff;
	border: 1px solid var(--pdm-border);
	border-radius: var(--pdm-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.pdm-thumb { display: block; background: #eee; aspect-ratio: 16 / 10; overflow: hidden; }
.pdm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdm-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pdm-accent), #222); }
.pdm-ph svg { width: 48px; height: 48px; fill: rgba(255, 255, 255, .85); }
.pdm-ph .i-pause { display: none; }
.pdm-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pdm-kicker { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--pdm-muted); }
.pdm-flag { background: var(--pdm-accent); color: #fff; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.pdm-title { margin: 0; font-size: 19px; line-height: 1.3; }
.pdm-title a { color: inherit; text-decoration: none; }
.pdm-title a:hover { color: var(--pdm-accent); }
.pdm-meta { font-size: 13px; color: var(--pdm-muted); }
.pdm-ex { margin: 4px 0 0; font-size: 15px; color: #444; }
.pdm-card .pdm-player--full { border: 0; padding: 0; margin: 10px 0 0; }

/* row (list) layout */
.pdm-card--list { flex-direction: row; }
.pdm-card--list .pdm-thumb { flex: 0 0 200px; aspect-ratio: auto; min-height: 140px; }

/* hero layout */
.pdm-card--hero { flex-direction: row; align-items: stretch; }
.pdm-card--hero .pdm-thumb { flex: 0 0 38%; aspect-ratio: auto; min-height: 260px; }
.pdm-card--hero .pdm-body { padding: 24px; gap: 8px; justify-content: center; }
.pdm-card--hero .pdm-title { font-size: 28px; }

/* ---------- Misc ---------- */
.pdm-search { display: flex; gap: 8px; margin-bottom: 20px; }
.pdm-search input { flex: 1; padding: 10px 12px; border: 1px solid var(--pdm-border); border-radius: 8px; }
.pdm-search button { padding: 10px 18px; border: 0; border-radius: 8px; background: var(--pdm-accent); color: #fff; cursor: pointer; }
.pdm-pages { margin-top: 24px; text-align: center; }
.pdm-pages .page-numbers { display: inline-block; padding: 6px 12px; margin: 0 2px; border: 1px solid var(--pdm-border); border-radius: 6px; text-decoration: none; color: inherit; }
.pdm-pages .page-numbers.current { background: var(--pdm-accent); border-color: var(--pdm-accent); color: #fff; }
.pdm-empty { color: var(--pdm-muted); }

.pdm-cat { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--pdm-border); border-radius: var(--pdm-radius); text-decoration: none; color: inherit; background: #fff; transition: border-color .15s, transform .15s; }
.pdm-cat:hover { border-color: var(--pdm-accent); transform: translateY(-2px); }
.pdm-cat strong { font-size: 18px; }
.pdm-cat span { font-size: 13px; color: var(--pdm-muted); }

.pdm-single .pdm-notes { margin: 1.5em 0; }
.pdm-single .pdm-more-h { margin-top: 2em; }
.pdm-archive-page { max-width: 1100px; margin: 0 auto; padding: 40px 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.pdm-grid { grid-template-columns: repeat(2, 1fr); }
	.pdm-card--hero .pdm-thumb { flex-basis: 34%; }
}
@media (max-width: 640px) {
	.pdm-grid { grid-template-columns: 1fr; }
	.pdm-card--list, .pdm-card--hero { flex-direction: column; }
	.pdm-card--list .pdm-thumb, .pdm-card--hero .pdm-thumb { flex-basis: auto; aspect-ratio: 16 / 10; min-height: 0; }
	.pdm-card--hero .pdm-title { font-size: 22px; }
	.pdm-vol { width: 70px; }
	.pdm-name { font-size: 16px; }
	:root { --pdm-wave-h: 84px; }
}

/* ---------- Locked (members only) ---------- */
.pdm-locked { display: flex; align-items: center; gap: 12px; background: #f5f5f5; border: 1px solid var(--pdm-border); border-radius: 10px; padding: 14px 16px; margin: 1em 0; flex-wrap: wrap; }
.pdm-locked--mini { padding: 8px 10px; margin: 12px 0 0; }
.pdm-lock-ic { width: 40px; height: 40px; border-radius: 50%; background: #222; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pdm-locked--mini .pdm-lock-ic { width: 30px; height: 30px; }
.pdm-lock-ic svg { width: 20px; height: 20px; fill: #fff; }
.pdm-locked--mini .pdm-lock-ic svg { width: 15px; height: 15px; }
.pdm-lock-tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 140px; font-size: 14px; color: #333; }
.pdm-lock-tx span { color: var(--pdm-muted); font-size: 13px; }
.pdm-lock-btns { display: inline-flex; gap: 8px; }
.pdm-lock-btns a { padding: 7px 14px; border-radius: 999px; font-size: 13px; text-decoration: none; line-height: 1; }
.pdm-lock-join { background: var(--pdm-accent); color: #fff; }
.pdm-lock-login { background: #e8e8e8; color: #222; }
.pdm-card .pdm-locked--full { margin: 10px 0 0; }

/* ---------- Theme-proof play button (themes often style every <button>) ---------- */
.pdm-player .pdm-play,
.pdm-player .pdm-play:hover,
.pdm-player .pdm-play:focus,
.pdm-player .pdm-play:active {
	background: var(--pdm-accent);
	color: #fff;
	border: 0;
	border-radius: 50%;
	padding: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.pdm-player .pdm-play:hover { filter: brightness(1.08); }
.pdm-search button, .pdm-search button:hover, .pdm-search button:focus { background: var(--pdm-accent); color: #fff; border: 0; }

/* ---------- Waveform inside list / grid cards: compact, one line ---------- */
.pdm-card:not(.pdm-card--hero) .pdm-player--full {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 14px;
	margin-top: 12px;
}
.pdm-card:not(.pdm-card--hero) .pdm-player--full .pdm-head { margin: 0; }
.pdm-card:not(.pdm-card--hero) .pdm-player--full .pdm-info,
.pdm-card:not(.pdm-card--hero) .pdm-player--full .pdm-tools { display: none; }
.pdm-card:not(.pdm-card--hero) .pdm-player--full .pdm-wave { --pdm-wave-h: 64px; }

/* ---------- Round play buttons that can never be squashed ---------- */
.pdm-player .pdm-play {
	width: var(--pdm-btn, 52px);
	height: var(--pdm-btn, 52px);
	min-width: var(--pdm-btn, 52px);
	min-height: var(--pdm-btn, 52px);
	aspect-ratio: 1 / 1;
	flex: none;
	box-sizing: border-box;
	margin: 0;
	line-height: 1;
}
.pdm-player--mini { --pdm-btn: 36px; }
.pdm-card:not(.pdm-card--hero) .pdm-player--full {
	--pdm-btn: 44px;
	grid-template-columns: 44px minmax(0, 1fr);
}
.pdm-card:not(.pdm-card--hero) .pdm-player--full .pdm-wave { min-width: 0; width: 100%; }
.pdm-search button:hover { filter: brightness(1.08); }

/* ---------- Play / pause icons: same size, always centred ---------- */
.pdm-player .pdm-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pdm-player .pdm-play svg {
	width: 52%;
	height: 52%;
	display: block;
	margin: 0;
	flex: none;
	fill: currentColor;
}
.pdm-player .pdm-play .i-pause { display: none; }
.pdm-player.is-playing .pdm-play .i-pause { display: block; }
.pdm-player.is-playing .pdm-play .i-play { display: none; }