.itd-discography {
	--itd-columns-desktop: 4;
	--itd-columns-tablet: 3;
	--itd-columns-mobile: 2;
	--itd-gap: 20px;
	--itd-radius: 0px;
	--itd-shadow: none;
	--itd-hover-lift: 6;
	--itd-hover-scale: 1.03;
	--itd-hover-duration: 180ms;
	--itd-modal-bg: #535353;
	--itd-modal-text: #ffffff;
	--itd-modal-accent: #1db954;
	--itd-modal-muted: rgba(255, 255, 255, 0.72);
	--itd-modal-line: rgba(255, 255, 255, 0.12);
	--itd-modal-panel: rgba(0, 0, 0, 0.18);
	--itd-modal-pill: rgba(0, 0, 0, 0.24);
}

.itd-discography,
.itd-discography * {
	box-sizing: border-box;
}

.itd-grid {
	display: grid;
	grid-template-columns: repeat(var(--itd-columns-desktop), minmax(0, 1fr));
	gap: var(--itd-gap);
	align-items: start;
}

.itd-card {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.itd-card__button {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none !important;
	line-height: 0;
	cursor: pointer;
	overflow: hidden;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--itd-hover-duration) ease, opacity var(--itd-hover-duration) ease;
}

.itd-discography[data-itd-hover-effect="lift"] .itd-card__button:hover {
	transform: translateY(calc(var(--itd-hover-lift) * -1px));
}

.itd-discography[data-itd-hover-effect="zoom"] .itd-card__button:hover {
	transform: scale(var(--itd-hover-scale));
}

.itd-card__button:focus,
.itd-card__button:focus-visible {
	outline: none;
	box-shadow: none !important;
}

.itd-discography .itd-card__artwork,
.itd-discography img.itd-card__artwork {
	display: block;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: cover;
	vertical-align: top;
	background: #111827;
}

.itd-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 18px;
	background: linear-gradient(135deg, #dbe2ea, #f4f7fa);
	color: #64748b;
	text-align: center;
	line-height: 1.4;
}

.itd-empty {
	padding: 24px;
	border: 1px dashed #cbd5e1;
	color: #64748b;
	text-align: center;
}

.itd-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.itd-pagination__item {
	display: inline-flex;
}

.itd-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--itd-pagination-border) !important;
	border-radius: 999px;
	text-decoration: none;
	color: var(--itd-pagination-text) !important;
	background: var(--itd-pagination-fill) !important;
	box-shadow: none !important;
	outline: none !important;
	background-image: none !important;
}

.itd-pagination a.page-numbers:hover,
.itd-pagination a.page-numbers:focus {
	color: var(--itd-pagination-text) !important;
	border-color: var(--itd-pagination-border) !important;
	background: var(--itd-pagination-fill) !important;
	box-shadow: none !important;
}

.itd-pagination .page-numbers.current {
	background: var(--itd-pagination-active-fill) !important;
	border-color: var(--itd-pagination-active-border) !important;
	color: var(--itd-pagination-active-text) !important;
}

.itd-modal[hidden],
.itd-modal[aria-hidden="true"] {
	display: none;
}

.itd-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
}

.itd-modal__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(10px);
}

.itd-modal__dialog {
	position: relative;
	width: min(900px, calc(100vw - 40px));
	max-height: min(760px, calc(100vh - 40px));
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 160px),
		var(--itd-modal-bg);
	color: var(--itd-modal-text);
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
}

.micromodal-slide.is-open .itd-modal__overlay {
	animation: itd-fade-in 220ms ease;
}

.micromodal-slide.is-open .itd-modal__dialog {
	animation: itd-slide-up 240ms ease;
}

.itd-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--itd-modal-text);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
	appearance: none;
	-webkit-appearance: none;
}

.itd-modal__close:hover {
	background: rgba(255, 255, 255, 0.12);
}

.itd-modal__content {
	max-height: min(760px, calc(100vh - 40px));
	padding: 22px 0 0;
	overflow: auto;
}

.itd-modal__layout {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
}

.itd-modal__hero {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 20px;
	padding: 0 22px 18px;
	align-items: start;
}

.itd-modal__cover-wrap {
	width: 120px;
}

.itd-modal__cover {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 10px;
	object-fit: cover;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

.itd-modal__cover--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	color: var(--itd-modal-muted);
}

.itd-modal__summary {
	min-width: 0;
	padding-right: 52px;
}

.itd-modal__eyebrow {
	margin: 2px 0 0;
	color: var(--itd-modal-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.itd-modal__title {
	margin: 8px 0 0;
	color: var(--itd-modal-text);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 800;
	line-height: 1.04;
}

.itd-modal__subtitle {
	margin: 8px 0 0;
	color: var(--itd-modal-muted);
	font-size: 16px;
	font-weight: 500;
}

.itd-modal__status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	color: var(--itd-modal-text);
	font-size: 13px;
	font-weight: 600;
}

.itd-modal__status-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--itd-modal-accent);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
	flex: 0 0 auto;
}

.itd-modal__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.itd-modal__meta span {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--itd-modal-pill);
	color: var(--itd-modal-text);
	font-size: 12px;
	font-weight: 700;
}

.itd-tracklist__preview-host audio {
	width: 100%;
}

.itd-modal .plyr,
.itd-tracklist .plyr {
	border-radius: 14px;
	overflow: hidden;
}

.itd-modal .plyr--audio,
.itd-tracklist .plyr--audio {
	background: rgba(0, 0, 0, 0.16);
	color: var(--itd-modal-text);
	box-shadow: none;
}

.itd-modal .plyr__controls,
.itd-tracklist .plyr__controls {
	background: rgba(0, 0, 0, 0.14);
	color: var(--itd-modal-text);
}

.itd-modal .plyr__control,
.itd-tracklist .plyr__control {
	color: var(--itd-modal-text);
}

.itd-modal .plyr--audio .plyr__control.plyr__tab-focus,
.itd-tracklist .plyr--audio .plyr__control.plyr__tab-focus,
.itd-modal .plyr--audio .plyr__control:hover,
.itd-tracklist .plyr--audio .plyr__control:hover {
	background: rgba(255, 255, 255, 0.08);
}

.itd-modal .plyr--full-ui input[type="range"],
.itd-tracklist .plyr--full-ui input[type="range"] {
	color: var(--itd-modal-accent);
}

.itd-modal__footer {
	margin-top: 12px;
}

.itd-modal__apple-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--itd-modal-line);
	border-radius: 999px;
	background: transparent;
	color: var(--itd-modal-text);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.itd-modal__apple-link:hover {
	background: rgba(255, 255, 255, 0.08);
}

.itd-modal__tracklist {
	max-height: 440px;
	padding: 14px 0 0;
	border-top: 1px solid var(--itd-modal-line);
	background: rgba(0, 0, 0, 0.1);
	overflow: auto;
}

.itd-tracklist {
	display: grid;
	gap: 0;
}

.itd-tracklist__item {
	padding: 10px 22px;
	border-bottom: 1px solid var(--itd-modal-line);
	background: transparent;
	transition: background 160ms ease;
}

.itd-tracklist__item:hover {
	background: rgba(255, 255, 255, 0.04);
}

.itd-tracklist__item.is-current {
	background: rgba(255, 255, 255, 0.07);
}

.itd-tracklist__item.is-previewing {
	background: rgba(255, 255, 255, 0.1);
}

.itd-tracklist__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
}

.itd-tracklist__summary {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	min-width: 0;
}

.itd-tracklist__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--itd-modal-muted);
	font-size: 14px;
	font-weight: 600;
}

.itd-tracklist__text {
	min-width: 0;
}

.itd-tracklist__name {
	display: block;
	color: var(--itd-modal-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.itd-tracklist__artist {
	display: block;
	margin-top: 2px;
	color: var(--itd-modal-muted);
	font-size: 13px;
	line-height: 1.25;
}

.itd-tracklist__side {
	display: flex;
	align-items: center;
	gap: 14px;
}

.itd-tracklist__duration {
	color: var(--itd-modal-text);
	font-size: 13px;
	font-weight: 700;
}

.itd-tracklist__preview-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--itd-modal-line);
	border-radius: 999px;
	background: transparent;
	color: var(--itd-modal-text);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.itd-tracklist__preview-button:hover {
	background: rgba(255, 255, 255, 0.08);
}

.itd-tracklist__preview-host {
	margin-top: 10px;
}

.itd-modal__content::-webkit-scrollbar,
.itd-modal__tracklist::-webkit-scrollbar {
	width: 10px;
}

.itd-modal__content::-webkit-scrollbar-thumb,
.itd-modal__tracklist::-webkit-scrollbar-thumb {
	border: 2px solid transparent;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	background-clip: content-box;
}

body.itd-modal-open {
	overflow: hidden;
}

@keyframes itd-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes itd-slide-up {
	from {
		opacity: 0;
		transform: translateY(18px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 980px) {
	.itd-grid {
		grid-template-columns: repeat(var(--itd-columns-tablet), minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.itd-grid {
		grid-template-columns: repeat(var(--itd-columns-mobile), minmax(0, 1fr));
	}

	.itd-modal__overlay {
		padding: 8px;
	}

	.itd-modal__dialog,
	.itd-modal__content {
		max-height: calc(100vh - 16px);
	}

	.itd-modal__dialog {
		width: calc(100vw - 16px);
		border-radius: 16px;
	}

	.itd-modal__hero {
		grid-template-columns: 86px minmax(0, 1fr);
		gap: 14px;
		padding: 0 16px 16px;
	}

	.itd-modal__cover,
	.itd-modal__cover-wrap {
		width: 86px;
		height: 86px;
	}

	.itd-modal__summary {
		padding-right: 34px;
	}

	.itd-modal__title {
		font-size: 22px;
	}

	.itd-tracklist__item {
		padding: 10px 16px;
	}

	.itd-tracklist__row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.itd-tracklist__side {
		justify-content: space-between;
	}
}