/**
 * Hamenagen - ?????? ??? [hm_singer_archive]
 * ??? ????/???: html[data-hm-theme]
 */

/* --- Skip Link (accessibility) --- */
.hm-singer-archive__skip-link {
	position: absolute;
	top: -100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--hm-accent, #1a73e8);
	color: #fff;
	padding: 0.6rem 1.4rem;
	border-radius: 0 0 6px 6px;
	font-weight: 700;
	font-size: 0.95rem;
	z-index: 100000;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: top 0.2s, opacity 0.2s;
}

.hm-singer-archive__skip-link:focus {
	top: 0;
	opacity: 1;
	pointer-events: auto;
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* --- Breadcrumb --- */
.hm-singer-archive__breadcrumb {
	direction: rtl;
	font-family: "?????", "Polin", sans-serif;
	font-size: 0.85rem;
	padding: 0.75rem 7% 0;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

.hm-singer-archive__breadcrumb ol {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hm-singer-archive__breadcrumb li {
	display: flex;
	align-items: center;
}

.hm-singer-archive__breadcrumb li:not(:last-child)::after {
	content: "/";
	margin: 0 0.4em;
	color: #999;
}

.hm-singer-archive__breadcrumb a {
	color: #cb1e53;
	text-decoration: none;
	transition: opacity 0.2s;
}

.hm-singer-archive__breadcrumb a:hover {
	opacity: 0.7;
	text-decoration: underline;
}

.hm-singer-archive__breadcrumb li:last-child span {
	color: #555;
}

html[data-hm-theme="dark"] .hm-singer-archive__breadcrumb a {
	color: #fa8504;
}

html[data-hm-theme="dark"] .hm-singer-archive__breadcrumb li:last-child span {
	color: #ccc;
}

html[data-hm-theme="dark"] .hm-singer-archive__breadcrumb li:not(:last-child)::after {
	color: #777;
}

.hm-singer-archive {
	--hm-navy: #26235a;
	--hm-brand: #cb1e53;
	--hm-accent: #fa8504;
	--hm-radius: 16px;
	--hm-transition: 0.25s ease;
	--hm-font: "?????", "Polin", sans-serif;
	--hm-singer-pad-x: 7%;
	--hm-track-cols: 36px 48px minmax(0, 1fr) max-content 4.5rem;

	direction: rtl;
	font-family: var(--hm-font) !important;
	color: var(--hm-text) !important;
	background: var(--hm-page-bg);
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding: 0 var(--hm-singer-pad-x) 2.5rem !important;
	box-sizing: border-box;
	overflow-x: clip;
	transition: background var(--hm-transition), color var(--hm-transition);
}

.hm-singer-archive *,
.hm-singer-archive *::before,
.hm-singer-archive *::after {
	box-sizing: border-box;
}

/* ????? ?? ?? ????? - ???? Elementor / Heebo / ????? */
.hm-singer-archive,
.hm-singer-archive *,
.hm-singer-archive *::before,
.hm-singer-archive *::after,
.hm-singer-archive input,
.hm-singer-archive button,
.hm-singer-archive textarea,
.hm-singer-archive select,
.hm-singer-archive option,
.hm-singer-archive dialog,
.hm-singer-archive-notice {
	font-family: var(--hm-font) !important;
}

.hm-singer-archive :where(h1, h2, h3, h4, h5, h6,
	p, span, a, button, input, select, textarea, label,
	li, td, th, figcaption, blockquote, div, nav) {
	font-family: var(--hm-font) !important;
}

html[data-hm-theme="light"] .hm-singer-archive,
html:not([data-hm-theme]) .hm-singer-archive {
	--hm-page-bg: #f4f5f8;
	--hm-heading: #20215a;
	--hm-text: #333333;
	--hm-text-muted: #666666;
	--hm-surface: #ffffff;
	--hm-bg-soft: #f7f6ff;
	--hm-hero-heading: #20215a;
	--hm-hero-muted: #666666;
	--hm-hero-grad: linear-gradient(180deg, #e8e6f8 0%, #f0effa 45%, #f4f5f8 100%);
	--hm-track-hover: rgba(32, 33, 90, 0.06);
	--hm-border: rgba(32, 33, 90, 0.18);
	--hm-modal-bg: #ffffff;
	--hm-modal-inner: #f7f6ff;
	--hm-follow-bg: transparent;
	--hm-follow-text: #20215a;
	--hm-follow-following-bg: #20215a;
	--hm-follow-following-text: #ffffff;
}

html[data-hm-theme="dark"] .hm-singer-archive {
	--hm-page-bg: #16162e;
	--hm-heading: #f5f5f7;
	--hm-text: #f5f5f7;
	--hm-text-muted: rgba(245, 245, 247, 0.65);
	--hm-surface: rgba(255, 255, 255, 0.06);
	--hm-bg-soft: rgba(255, 255, 255, 0.04);
	--hm-hero-heading: #f5f5f7;
	--hm-hero-muted: rgba(245, 245, 247, 0.65);
	--hm-hero-grad: linear-gradient(180deg, #3d3a6a 0%, #26235a 35%, #16162e 100%);
	--hm-track-hover: rgba(255, 255, 255, 0.08);
	--hm-border: rgba(255, 255, 255, 0.2);
	--hm-modal-bg: #1e1e32;
	--hm-modal-inner: rgba(255, 255, 255, 0.06);
	--hm-follow-bg: transparent;
	--hm-follow-text: #f5f5f7;
	--hm-follow-following-bg: rgba(255, 255, 255, 0.14);
	--hm-follow-following-text: #f5f5f7;
}

/* === Hero === */
.hm-singer-archive__hero {
	position: relative;
	margin: 0 calc(-1 * var(--hm-singer-pad-x)) 1.5rem;
	padding: 2.5rem var(--hm-singer-pad-x) 1.75rem;
	overflow: hidden;
}

.hm-singer-archive__hero-bg {
	position: absolute;
	inset: 0;
	background: var(--hm-hero-grad);
	z-index: 0;
}

.hm-singer-archive__hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.hm-singer-archive__avatar-wrap {
	flex-shrink: 0;
	position: relative;
	width: clamp(140px, 22vw, 220px);
	height: clamp(140px, 22vw, 220px);
	border-radius: 50% !important;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
	border: 4px solid rgba(255, 255, 255, 0.15);
}

.hm-singer-archive__avatar {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	border-radius: 0 !important;
	object-fit: cover;
	object-position: center;
}

.hm-singer-archive__avatar--ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--hm-surface);
	color: var(--hm-text-muted);
}

.hm-singer-archive__hero-meta {
	min-width: 0;
	flex: 1;
}

.hm-singer-archive__kind {
	margin: 0 0 0.35rem !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hm-hero-muted) !important;
	font-family: "?????", sans-serif !important;
}

.hm-singer-archive__name {
	margin: 0 0 0.65rem !important;
	font-size: clamp(2rem, 6vw, 4.5rem) !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	color: var(--hm-hero-heading) !important;
	font-family: "?????", sans-serif !important;
}

.hm-singer-archive .hm-singer-archive__verified {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	margin: 0 0 0.75rem !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: var(--hm-accent) !important;
	cursor: default !important;
	font-family: "?????", sans-serif !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: unset !important;
}

.hm-singer-archive__verified svg {
	flex-shrink: 0 !important;
	width: 16px !important;
	height: 16px !important;
}

.hm-singer-archive__stats {
	margin: 0 !important;
	font-size: 0.9rem !important;
	color: var(--hm-hero-muted) !important;
	font-family: "?????", sans-serif !important;
}

.hm-singer-archive__seo-intro {
	margin: 0.4rem 0 0 !important;
	max-width: 42rem;
	font-size: 0.88rem !important;
	line-height: 1.5 !important;
	font-weight: 500 !important;
	color: var(--hm-hero-muted) !important;
	opacity: 0.9;
	font-family: "?????", sans-serif !important;
}

/* === Toolbar - !important ??? ????? ?-Elementor === */
.hm-singer-archive__toolbar {
	display: flex !important;
	align-items: center !important;
	gap: 1rem !important;
	flex-wrap: wrap !important;
	margin-bottom: 2rem !important;
	padding: 0 0.25rem !important;
}

.hm-singer-archive button.hm-singer-archive__play-all {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 56px !important;
	width: 56px !important;
	min-width: 56px !important;
	max-width: 56px !important;
	height: 56px !important;
	min-height: 56px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: var(--hm-accent) !important;
	background-color: var(--hm-accent) !important;
	color: #1a1a1a !important;
	cursor: pointer !important;
	box-shadow: 0 6px 20px rgba(250, 133, 4, 0.45) !important;
	font-family: "?????", sans-serif !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: transform var(--hm-transition), box-shadow var(--hm-transition) !important;
}

.hm-singer-archive button.hm-singer-archive__play-all:hover:not(:disabled) {
	transform: scale(1.05) !important;
	box-shadow: 0 8px 28px rgba(250, 133, 4, 0.55) !important;
	background: var(--hm-accent) !important;
	color: #1a1a1a !important;
}

.hm-singer-archive button.hm-singer-archive__play-all:disabled {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
}

.hm-singer-archive button.hm-singer-archive__play-all svg {
	display: block !important;
	flex-shrink: 0 !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	max-width: 24px !important;
	margin: 0 0 0 3px !important;
	pointer-events: none !important;
}

.hm-singer-archive button.hm-singer-archive__play-all svg,
.hm-singer-archive button.hm-singer-archive__play-all polygon {
	fill: #1a1a1a !important;
	stroke: none !important;
}

.hm-singer-archive button.hm-singer-archive__shuffle {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 40px !important;
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--hm-text-muted) !important;
	cursor: pointer !important;
	box-shadow: none !important;
	font-family: "?????", sans-serif !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: color var(--hm-transition), background var(--hm-transition) !important;
}

.hm-singer-archive button.hm-singer-archive__shuffle:hover:not(:disabled) {
	color: var(--hm-heading) !important;
	background: var(--hm-track-hover) !important;
	background-color: var(--hm-track-hover) !important;
	transform: none !important;
}

.hm-singer-archive button.hm-singer-archive__shuffle:disabled {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
}

.hm-singer-archive button.hm-singer-archive__shuffle svg {
	display: block !important;
	flex-shrink: 0 !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	max-width: 20px !important;
	fill: currentColor !important;
	stroke: none !important;
	pointer-events: none !important;
}

.hm-singer-archive button.hm-singer-archive__download-all {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 40px !important;
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--hm-text-muted) !important;
	cursor: pointer !important;
	box-shadow: none !important;
	font-family: "?????", sans-serif !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: color var(--hm-transition), background var(--hm-transition) !important;
}

.hm-singer-archive button.hm-singer-archive__download-all:hover:not(:disabled) {
	color: var(--hm-heading) !important;
	background: var(--hm-track-hover) !important;
	background-color: var(--hm-track-hover) !important;
	transform: none !important;
}

.hm-singer-archive button.hm-singer-archive__download-all:disabled {
	cursor: progress !important;
}

.hm-singer-archive button.hm-singer-archive__download-all svg {
	display: block !important;
	flex-shrink: 0 !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	max-width: 20px !important;
	pointer-events: none !important;
}

.hm-singer-archive button.hm-singer-archive__download-all .hm-singer-archive__download-all-spinner {
	display: none !important;
	animation: hm-singer-archive-spin 0.8s linear infinite !important;
}

.hm-singer-archive button.hm-singer-archive__download-all.is-loading .hm-singer-archive__download-all-icon {
	display: none !important;
}

.hm-singer-archive button.hm-singer-archive__download-all.is-loading .hm-singer-archive__download-all-spinner {
	display: block !important;
}

@keyframes hm-singer-archive-spin {
	to {
		transform: rotate(360deg);
	}
}

.hm-singer-archive button.hm-singer-archive__share {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 40px !important;
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--hm-text-muted) !important;
	cursor: pointer !important;
	box-shadow: none !important;
	font-family: "?????", sans-serif !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: color var(--hm-transition), background var(--hm-transition) !important;
}

.hm-singer-archive button.hm-singer-archive__share:hover {
	color: var(--hm-heading) !important;
	background: var(--hm-track-hover) !important;
	background-color: var(--hm-track-hover) !important;
	transform: none !important;
}

.hm-singer-archive button.hm-singer-archive__share svg {
	display: block !important;
	flex-shrink: 0 !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	max-width: 20px !important;
	pointer-events: none !important;
}

.hm-singer-archive__yt-admin {
	display: inline-flex !important;
	align-items: center !important;
	flex: 0 1 auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

.hm-singer-archive a.hm-singer-archive__yt-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 40px !important;
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: #ff0033 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: color var(--hm-transition), background var(--hm-transition) !important;
}

.hm-singer-archive a.hm-singer-archive__yt-link:hover {
	color: #ff3355 !important;
	background: var(--hm-track-hover) !important;
}

.hm-singer-archive a.hm-singer-archive__yt-link svg {
	display: block !important;
	width: 22px !important;
	height: 22px !important;
	pointer-events: none !important;
}

.hm-singer-archive__yt-form {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	flex-wrap: wrap !important;
	margin: 0 !important;
	max-width: min(100%, 360px) !important;
}

.hm-singer-archive__yt-form .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.hm-singer-archive input.hm-singer-archive__yt-input {
	flex: 1 1 180px !important;
	min-width: 160px !important;
	max-width: 260px !important;
	height: 36px !important;
	margin: 0 !important;
	padding: 0 0.7rem !important;
	border: 1px solid var(--hm-border) !important;
	border-radius: 999px !important;
	background: var(--hm-surface, #fff) !important;
	color: var(--hm-heading, #1a1a1a) !important;
	font-size: 0.82rem !important;
	font-family: inherit !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	direction: ltr !important;
	text-align: left !important;
}

.hm-singer-archive input.hm-singer-archive__yt-input:focus {
	outline: none !important;
	border-color: var(--hm-accent) !important;
	box-shadow: 0 0 0 2px rgba(250, 133, 4, 0.25) !important;
}

.hm-singer-archive button.hm-singer-archive__yt-save {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	height: 36px !important;
	min-height: 36px !important;
	padding: 0 0.9rem !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	background: #ff0033 !important;
	background-color: #ff0033 !important;
	color: #fff !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: opacity var(--hm-transition), transform var(--hm-transition) !important;
}

.hm-singer-archive button.hm-singer-archive__yt-save:hover:not(:disabled) {
	opacity: 0.92 !important;
	transform: none !important;
	background: #ff0033 !important;
	color: #fff !important;
}

.hm-singer-archive button.hm-singer-archive__yt-save:disabled {
	opacity: 0.55 !important;
	cursor: wait !important;
}

.hm-singer-archive__toast {
	position: fixed !important;
	bottom: 24px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 9999 !important;
	background: #1d2327 !important;
	color: #fff !important;
	padding: 12px 20px !important;
	border-radius: 999px !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-align: center !important;
	max-width: min(92vw, 420px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
	pointer-events: none !important;
}

.hm-singer-archive__toast.is-error {
	background: #8a1f1f !important;
}

.hm-singer-archive button.hm-singer-archive__follow {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 100px !important;
	max-width: none !important;
	height: auto !important;
	min-height: unset !important;
	padding: 0.55rem 1.5rem !important;
	margin: 0 !important;
	border: 1.5px solid var(--hm-border) !important;
	border-radius: 999px !important;
	background: var(--hm-follow-bg) !important;
	background-color: var(--hm-follow-bg) !important;
	color: var(--hm-follow-text) !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	font-family: var(--hm-font) !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: background var(--hm-transition), border-color var(--hm-transition), transform var(--hm-transition), color var(--hm-transition) !important;
}

.hm-singer-archive button.hm-singer-archive__follow:hover {
	border-color: var(--hm-heading) !important;
	background: var(--hm-follow-bg) !important;
	color: var(--hm-follow-text) !important;
	transform: none !important;
}

.hm-singer-archive button.hm-singer-archive__follow.is-following {
	background: var(--hm-follow-following-bg) !important;
	background-color: var(--hm-follow-following-bg) !important;
	color: var(--hm-follow-following-text) !important;
	border-color: var(--hm-follow-following-bg) !important;
	transform: scale(0.97) !important;
}

/* === Section === */
.hm-singer-archive__section {
	margin-top: 2.5rem;
}

.hm-singer-archive__section-title {
	margin: 0 0 1rem !important;
	font-size: 1.35rem !important;
	font-weight: 700 !important;
	color: var(--hm-heading) !important;
	font-family: "?????", sans-serif !important;
}

/* === Tabs (?????? / ???????) === */
.hm-singer-archive__section--tabs {
	margin-top: 2.5rem;
}

.hm-singer-archive__tabs {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--hm-border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.hm-singer-archive__tabs::-webkit-scrollbar {
	display: none;
}

.hm-singer-archive button.hm-singer-archive__tab {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.45rem !important;
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 0 0 0.85rem !important;
	margin: 0 !important;
	border: none !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--hm-text-muted) !important;
	font-size: 1.2rem !important;
	font-weight: 600 !important;
	font-family: var(--hm-font) !important;
	cursor: pointer !important;
	transition: color var(--hm-transition), border-color var(--hm-transition) !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	margin-bottom: -1px !important;
}

.hm-singer-archive button.hm-singer-archive__tab:hover {
	color: var(--hm-heading) !important;
}

.hm-singer-archive button.hm-singer-archive__tab.is-active {
	color: var(--hm-heading) !important;
	border-bottom-color: var(--hm-heading) !important;
	font-weight: 700 !important;
}

.hm-singer-archive__tab-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	background: var(--hm-bg-soft);
	color: var(--hm-text-muted);
	font-size: 0.62rem !important;
	font-weight: 700 !important;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.hm-singer-archive button.hm-singer-archive__tab.is-active .hm-singer-archive__tab-badge {
	background: rgba(32, 33, 90, 0.1);
	color: var(--hm-heading);
}

html[data-hm-theme="dark"] .hm-singer-archive button.hm-singer-archive__tab.is-active .hm-singer-archive__tab-badge {
	background: rgba(245, 245, 247, 0.12);
}

.hm-singer-archive__tab-panel[hidden] {
	display: none !important;
}

.hm-singer-archive__events-soon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 3.5rem 1.5rem;
	border-radius: var(--hm-radius);
	background: var(--hm-surface);
	border: 1px dashed var(--hm-border);
}

.hm-singer-archive__events-soon-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--hm-bg-soft);
	color: var(--hm-text-muted);
}

.hm-singer-archive__events-soon-title {
	margin: 0 0 0.5rem !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: var(--hm-heading) !important;
}

.hm-singer-archive__events-soon-text {
	margin: 0 !important;
	max-width: 28rem;
	font-size: 0.92rem !important;
	line-height: 1.55 !important;
	color: var(--hm-text-muted) !important;
}

.hm-singer-archive__tab-panel .hm-singer-archive__section--related {
	border-top: none;
	padding-top: 0;
	margin-top: 3rem;
}

.hm-singer-archive__tab-panel .hm-singer-archive__section--extras {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hm-border);
}

.hm-singer-archive__tab-panel[data-hm-tab-panel="albums"] .hm-singer-archive__section--albums,
.hm-singer-archive__tab-panel[data-hm-tab-panel="extras"] .hm-singer-archive__section--extras,
.hm-singer-archive__tab-panel[data-hm-tab-panel="programs"] .hm-singer-archive__section--programs {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.hm-singer-archive__tab-panel .hm-singer-archive__section--programs {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hm-border);
}

.hm-singer-archive__extras-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.hm-singer-archive__extras-head .hm-singer-archive__section-title {
	margin-bottom: 0 !important;
}

.hm-singer-archive__extras-wrap {
	position: relative;
	margin: 0 -0.25rem;
}

.hm-singer-archive__extras-row {
	display: flex;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 0.35rem 0.25rem 0.75rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.hm-singer-archive__extras-row::-webkit-scrollbar {
	display: none;
}

.hm-singer-archive__extras-row:focus-visible {
	outline: 2px solid var(--hm-brand);
	outline-offset: 4px;
	border-radius: var(--hm-radius);
}

.hm-singer-archive__extra-card {
	flex: 0 0 auto;
	width: min(220px, 68vw);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	text-decoration: none !important;
	color: inherit !important;
	transition: transform var(--hm-transition), opacity var(--hm-transition);
}

.hm-singer-archive__extra-card:hover {
	transform: translateY(-2px);
	opacity: 0.92;
}

.hm-singer-archive__extra-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: var(--hm-bg-soft);
}

.hm-singer-archive__extra-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hm-singer-archive__extra-thumb-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 1.5rem;
	color: var(--hm-text-muted);
}

.hm-singer-archive__extra-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.28);
	color: #fff;
	opacity: 0;
	transition: opacity var(--hm-transition);
}

.hm-singer-archive__extra-card:hover .hm-singer-archive__extra-play,
.hm-singer-archive__extra-card:focus-visible .hm-singer-archive__extra-play {
	opacity: 1;
}

.hm-singer-archive__extra-title {
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--hm-heading);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hm-singer-archive__extra-date {
	font-size: 0.78rem;
	color: var(--hm-text-muted);
}

/* ?????? ? ???? ????? ???? (??? ???????? ?????) */
.hm-singer-archive__clips-va.hm-video-archive-wrapper {
	max-width: none;
	margin: 0;
	padding: 0;
}

.hm-singer-archive__clips-va .hm-va-grid {
	gap: 1.25rem;
}

.hm-singer-archive__clip-fallback {
	min-width: 0;
}

.hm-singer-archive__clip-fallback .hm-singer-archive__extra-card {
	width: 100%;
	min-width: 0;
}

/* === Related singers row === */
.hm-singer-archive__section--related {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hm-border);
}

.hm-singer-archive__related-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.hm-singer-archive__related-head .hm-singer-archive__section-title {
	margin-bottom: 0 !important;
}

.hm-singer-archive__related-nav {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}

.hm-singer-archive button.hm-singer-archive__related-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	min-width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	border: 1px solid var(--hm-border) !important;
	background: var(--hm-surface) !important;
	color: var(--hm-heading) !important;
	cursor: pointer !important;
	transition: background var(--hm-transition), border-color var(--hm-transition) !important;
}

.hm-singer-archive button.hm-singer-archive__related-btn:hover:not(:disabled) {
	border-color: var(--hm-brand) !important;
	background: var(--hm-bg-soft) !important;
}

.hm-singer-archive button.hm-singer-archive__related-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed !important;
}

.hm-singer-archive__related-wrap {
	position: relative;
	margin: 0 -0.25rem;
}

.hm-singer-archive__related-row {
	display: flex;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 0.35rem 0.25rem 0.75rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.hm-singer-archive__related-row::-webkit-scrollbar {
	display: none;
}

.hm-singer-archive__related-row:focus-visible {
	outline: 2px solid var(--hm-brand);
	outline-offset: 4px;
	border-radius: var(--hm-radius);
}

.hm-singer-archive__related-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none !important;
	color: var(--hm-text) !important;
	gap: 0.5rem;
	flex: 0 0 auto;
	width: clamp(96px, 11vw, 120px);
	min-width: 96px;
	scroll-snap-align: start;
	transition: transform var(--hm-transition);
}

.hm-singer-archive__related-card:hover {
	transform: scale(1.04);
}

.hm-singer-archive__related-avatar {
	position: relative;
	display: block;
	width: clamp(88px, 10vw, 112px);
	height: clamp(88px, 10vw, 112px);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	line-height: 0;
	background: var(--hm-bg-soft);
	box-shadow:
		0 0 0 1px var(--hm-border),
		0 8px 24px rgba(32, 33, 90, 0.08);
	transition: box-shadow var(--hm-transition);
}

.hm-singer-archive__related-card:hover .hm-singer-archive__related-avatar {
	box-shadow:
		0 0 0 2px var(--hm-brand),
		0 12px 32px rgba(32, 33, 90, 0.12);
}

.hm-singer-archive__related-img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center;
	display: block;
}

.hm-singer-archive__related-ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--hm-text-muted);
}

.hm-singer-archive__related-name {
	display: block;
	width: 100%;
	font-size: clamp(0.82rem, 1.6vw, 0.95rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--hm-heading) !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hm-singer-archive__related-role {
	display: block;
	width: 100%;
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--hm-text-muted) !important;
}

.hm-singer-archive__empty,
.hm-singer-archive-notice {
	color: var(--hm-text-muted) !important;
	text-align: center;
	padding: 2rem;
	font-family: "?????", sans-serif !important;
}

/* === Track list (Spotify rows + sidebar thumbs) === */
.hm-singer-archive__list-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
	padding: 0 0.25rem;
}

.hm-singer-archive__list-controls-start {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	flex: 1 1 auto;
}

.hm-singer-archive button.hm-singer-archive__search-toggle {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	min-width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--hm-text-muted) !important;
	cursor: pointer !important;
	transition: color var(--hm-transition), background var(--hm-transition) !important;
}

.hm-singer-archive button.hm-singer-archive__search-toggle:hover,
.hm-singer-archive button.hm-singer-archive__search-toggle.is-active {
	color: var(--hm-heading) !important;
	background: var(--hm-track-hover) !important;
}

.hm-singer-archive__search-wrap {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 280px;
}

.hm-singer-archive__search-wrap[hidden] {
	display: none !important;
}

.hm-singer-archive__search-input {
	display: block;
	width: 100%;
	padding: 0.45rem 0.75rem;
	border: 1px solid var(--hm-border);
	border-radius: 999px;
	background: var(--hm-surface);
	color: var(--hm-heading);
	font-size: 0.88rem !important;
	outline: none;
	transition: border-color var(--hm-transition);
}

.hm-singer-archive__search-input:focus {
	border-color: var(--hm-brand);
}

.hm-singer-archive__search-input::placeholder {
	color: var(--hm-text-muted);
}

.hm-singer-archive__sort-wrap {
	position: relative;
	flex-shrink: 0;
}

.hm-singer-archive button.hm-singer-archive__sort-trigger {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.45rem !important;
	padding: 0.35rem 0.5rem !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: var(--hm-text-muted) !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: color var(--hm-transition), background var(--hm-transition) !important;
}

.hm-singer-archive button.hm-singer-archive__sort-trigger:hover,
.hm-singer-archive button.hm-singer-archive__sort-trigger[aria-expanded="true"] {
	color: var(--hm-heading) !important;
	background: var(--hm-track-hover) !important;
}

.hm-singer-archive__sort-label {
	white-space: nowrap;
}

.hm-singer-archive__sort-menu {
	position: absolute;
	top: calc(100% + 6px);
	inset-inline-start: 0;
	z-index: 20;
	min-width: 220px;
	padding: 0.5rem 0;
	border-radius: 12px;
	background: var(--hm-modal-bg);
	border: 1px solid var(--hm-border);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.hm-singer-archive__sort-menu[hidden] {
	display: none !important;
}

.hm-singer-archive__sort-menu-heading {
	margin: 0 0 0.25rem !important;
	padding: 0.35rem 1rem 0.5rem !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hm-text-muted) !important;
}

.hm-singer-archive button.hm-singer-archive__sort-option {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.75rem !important;
	width: 100% !important;
	padding: 0.55rem 1rem !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--hm-heading) !important;
	font-size: 0.88rem !important;
	font-weight: 500 !important;
	text-align: right !important;
	cursor: pointer !important;
	transition: background var(--hm-transition), color var(--hm-transition) !important;
}

.hm-singer-archive button.hm-singer-archive__sort-option:hover {
	background: var(--hm-track-hover) !important;
}

.hm-singer-archive button.hm-singer-archive__sort-option.is-active {
	color: var(--hm-accent) !important;
	font-weight: 700 !important;
}

.hm-singer-archive__sort-check,
.hm-singer-archive__sort-arrow {
	flex-shrink: 0;
	opacity: 0;
}

.hm-singer-archive button.hm-singer-archive__sort-option.is-active .hm-singer-archive__sort-check,
.hm-singer-archive button.hm-singer-archive__sort-option.is-active .hm-singer-archive__sort-arrow {
	opacity: 1;
	color: var(--hm-accent);
}

.hm-singer-archive__no-results {
	margin: 0 0 1rem !important;
	padding: 1.5rem;
	text-align: center;
	color: var(--hm-text-muted) !important;
	font-size: 0.9rem !important;
}

.hm-singer-archive__no-results[hidden] {
	display: none !important;
}

/* === "?????? ??????" tile (Spotify-style) === */
.hm-singer-archive__liked-tile {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.7rem 0.85rem;
	margin-bottom: 1.1rem;
	border-radius: 12px;
	background: var(--hm-surface);
	border: 1px solid var(--hm-border);
	cursor: pointer;
	position: relative;
	transition: background var(--hm-transition), transform 0.15s ease, box-shadow var(--hm-transition);
}

.hm-singer-archive__liked-tile:hover {
	background: var(--hm-track-hover);
}

.hm-singer-archive__liked-tile.has-tracks:hover {
	box-shadow: 0 6px 20px rgba(203, 30, 83, 0.18);
}

.hm-singer-archive__liked-tile:focus-visible {
	outline: 2px solid var(--hm-brand);
	outline-offset: 2px;
}

.hm-singer-archive__liked-tile.is-empty {
	cursor: default;
}

.hm-singer-archive__liked-tile.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.hm-singer-archive__liked-cover {
	position: relative;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #4300a0 0%, #cb1e53 100%);
	box-shadow: 0 4px 14px rgba(203, 30, 83, 0.35);
}

.hm-singer-archive__liked-heart {
	width: 26px !important;
	height: 26px !important;
	color: #ffffff;
}

.hm-singer-archive__liked-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity var(--hm-transition);
}

.hm-singer-archive__liked-play svg,
.hm-singer-archive__liked-play polygon {
	width: 22px;
	height: 22px;
	fill: #ffffff;
}

.hm-singer-archive__liked-tile.has-tracks:hover .hm-singer-archive__liked-play {
	opacity: 1;
}

.hm-singer-archive__liked-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.hm-singer-archive__liked-title {
	font-size: 1.02rem !important;
	font-weight: 700 !important;
	color: var(--hm-heading) !important;
	font-family: "?????", sans-serif !important;
	line-height: 1.2 !important;
}

.hm-singer-archive__liked-sub {
	font-size: 0.83rem !important;
	color: var(--hm-text-muted) !important;
	font-family: "?????", sans-serif !important;
	line-height: 1.35 !important;
}

.hm-singer-archive__tracks {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hm-singer-archive__tracks-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hm-singer-archive__track.is-hidden {
	display: none !important;
}

.hm-singer-archive__tracks-head {
	display: grid;
	grid-template-columns: var(--hm-track-cols);
	gap: 0.75rem;
	align-items: center;
	padding: 0 0.75rem 0.5rem;
	font-size: 0.75rem !important;
	color: var(--hm-text-muted) !important;
	border-bottom: 1px solid var(--hm-border);
	margin-bottom: 0.25rem;
	font-family: "?????", sans-serif !important;
}

.hm-singer-archive__tracks-head span {
	color: var(--hm-text-muted) !important;
}

.hm-singer-archive__tracks-head .hm-singer-archive__col-thumb,
.hm-singer-archive__tracks-head .hm-singer-archive__col-title,
.hm-singer-archive__tracks-head .hm-singer-archive__col-actions {
	visibility: hidden;
}

.hm-singer-archive__track {
	display: grid;
	grid-template-columns: var(--hm-track-cols);
	gap: 0.75rem;
	align-items: center;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	transition: background var(--hm-transition);
}

.hm-singer-archive__track:hover {
	background: var(--hm-track-hover);
}

.hm-singer-archive__track-index {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.9rem !important;
	line-height: 1 !important;
	color: var(--hm-text-muted) !important;
	align-self: center;
}

.hm-singer-archive button.hm-singer-archive__track-play {
	display: none;
	position: absolute;
	inset: 0;
	margin: auto;
	width: 28px !important;
	min-width: 28px !important;
	max-width: 28px !important;
	height: 28px !important;
	min-height: 28px !important;
	border: none !important;
	border-radius: 50% !important;
	background: var(--hm-accent) !important;
	background-color: var(--hm-accent) !important;
	color: #1a1a1a !important;
	cursor: pointer !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	box-shadow: none !important;
	font-size: 0 !important;
}

.hm-singer-archive button.hm-singer-archive__track-play svg,
.hm-singer-archive button.hm-singer-archive__track-play polygon {
	width: 12px !important;
	height: 12px !important;
	fill: #1a1a1a !important;
	stroke: none !important;
}

.hm-singer-archive__track:hover .hm-singer-archive__track-num {
	opacity: 0;
}

.hm-singer-archive__track:hover .hm-singer-archive__track-play {
	display: inline-flex;
}

.hm-singer-archive__track-thumb {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
	align-self: center;
	background: var(--hm-surface);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.hm-singer-archive__track-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hm-singer-archive__track-thumb-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 1.25rem;
	background: var(--hm-surface);
}

.hm-singer-archive__track-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15rem;
	align-self: center;
}

.hm-singer-archive__track-title {
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	color: var(--hm-heading) !important;
	text-decoration: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: "?????", sans-serif !important;
}

.hm-singer-archive__track-title:hover {
	text-decoration: underline !important;
	color: var(--hm-heading) !important;
}

.hm-singer-archive__track-meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
}

.hm-singer-archive__track-singers {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.78rem !important;
	line-height: 1.2 !important;
	color: var(--hm-text-muted) !important;
	font-family: "?????", sans-serif !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hm-singer-archive a.hm-singer-archive__track-singer-link {
	color: var(--hm-text-muted) !important;
	text-decoration: none !important;
	font-weight: 500 !important;
	transition: color var(--hm-transition);
}

.hm-singer-archive a.hm-singer-archive__track-singer-link:hover {
	color: var(--hm-brand) !important;
	text-decoration: underline !important;
}

.hm-singer-archive__track-singers-sep {
	color: var(--hm-text-muted) !important;
}

.hm-singer-archive__track-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	height: 32px;
	font-size: 0.75rem !important;
	line-height: 1 !important;
	color: var(--hm-text-muted) !important;
	font-family: "?????", sans-serif !important;
	white-space: nowrap;
}

.hm-singer-archive__track-badge svg {
	display: block;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.hm-singer-archive__track-date {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	min-height: 32px;
	font-size: 0.85rem !important;
	line-height: 1 !important;
	color: var(--hm-text-muted) !important;
	text-align: center;
	font-family: "?????", sans-serif !important;
}

/* === Track actions (badge + download + like) === */
.hm-singer-archive__track-actions {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	align-self: center;
	gap: 2px;
	min-height: 32px;
}

.hm-singer-archive button.hm-singer-archive__track-more {
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--hm-text-muted) !important;
	cursor: pointer !important;
	box-shadow: none !important;
	font-size: 0 !important;
	transition: color var(--hm-transition), background 0.15s ease !important;
}

.hm-singer-archive button.hm-singer-archive__track-more:hover,
.hm-singer-archive button.hm-singer-archive__track-more:focus-visible,
.hm-singer-archive__track-actions.is-open button.hm-singer-archive__track-more {
	color: var(--hm-heading) !important;
	background: var(--hm-track-hover) !important;
}

.hm-singer-archive button.hm-singer-archive__track-more svg {
	display: block;
	width: 20px;
	height: 20px;
}

.hm-singer-archive__track-menu {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	min-height: 32px;
}

.hm-singer-archive a.hm-singer-archive__track-download {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	height: 32px !important;
	min-height: 32px !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--hm-text-muted) !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: color var(--hm-transition), transform 0.15s ease !important;
}

.hm-singer-archive a.hm-singer-archive__track-download:hover {
	color: var(--hm-accent) !important;
	transform: scale(1.1);
}

.hm-singer-archive a.hm-singer-archive__track-download svg {
	display: block;
	flex-shrink: 0;
}

/* "?? ?????? ????" - ?????? ??? ??? ??? */
.hm-singer-archive .hm-singer-archive__track-actions button.cmp-not-interested-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	height: 32px !important;
	min-height: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--hm-text-muted) !important;
	font-size: 0 !important;
	line-height: 1 !important;
	vertical-align: middle !important;
}

.hm-singer-archive .hm-singer-archive__track-actions button.cmp-not-interested-btn .cmp-not-interested-btn__icon {
	font-size: 17px !important;
	line-height: 1 !important;
	color: inherit !important;
}

.hm-singer-archive .hm-singer-archive__track-actions button.cmp-not-interested-btn:hover,
.hm-singer-archive .hm-singer-archive__track-actions button.cmp-not-interested-btn:focus-visible {
	color: #7f1d4e !important;
	background: rgba(127, 29, 78, 0.1) !important;
	transform: scale(1.1) !important;
}

.hm-singer-archive .hm-singer-archive__track-actions button.cmp-not-interested-btn.is-marked {
	color: #fff !important;
	background: #7f1d4e !important;
}

.hm-singer-archive .hm-singer-archive__track-actions button.cmp-not-interested-btn.is-marked:hover,
.hm-singer-archive .hm-singer-archive__track-actions button.cmp-not-interested-btn.is-marked:focus-visible {
	color: #fff !important;
	background: #6b1842 !important;
}

/* === Pink heart (like player) === */
.hm-singer-archive button.hm-singer-archive__like.hm-save-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	height: 32px !important;
	min-height: 32px !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--hm-text-muted) !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	font-size: 0 !important;
	transition: color var(--hm-transition), transform 0.15s ease !important;
}

.hm-singer-archive__like.hm-save-btn:hover {
	color: var(--hm-brand);
	transform: scale(1.1);
}

.hm-singer-archive__like.hm-save-btn .hm-singer-archive__like-filled {
	display: none;
}

.hm-singer-archive__like.hm-save-btn:not(.is-saved) .hm-singer-archive__like-outline {
	display: block;
	fill: none !important;
	stroke: currentColor !important;
}

.hm-singer-archive__like.hm-save-btn.is-saved {
	color: var(--hm-brand);
}

.hm-singer-archive__like.hm-save-btn.is-saved .hm-singer-archive__like-outline {
	display: none !important;
}

.hm-singer-archive__like.hm-save-btn.is-saved .hm-singer-archive__like-filled {
	display: block !important;
	fill: var(--hm-brand) !important;
	stroke: none !important;
}

/* === Modal === */
.hm-singer-archive__modal {
	overflow-x: hidden;
	border: none;
	border-radius: var(--hm-radius);
	padding: 0;
	max-width: 480px;
	width: calc(100% - 2rem);
	background: var(--hm-modal-bg);
	color: var(--hm-heading);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.hm-singer-archive__modal::backdrop {
	background: rgba(0, 0, 0, 0.65);
}

.hm-singer-archive__modal-inner {
	padding: 1.25rem;
}

.hm-singer-archive__modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.hm-singer-archive__modal-head h3 {
	margin: 0 !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: var(--hm-heading) !important;
	font-family: "?????", sans-serif !important;
}

.hm-singer-archive button.hm-singer-archive__modal-close {
	border: none !important;
	background: none !important;
	background-color: transparent !important;
	font-size: 1.5rem !important;
	line-height: 1 !important;
	color: var(--hm-text-muted) !important;
	cursor: pointer !important;
	padding: 0.25rem !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	box-shadow: none !important;
}

.hm-singer-archive__modal-body {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1rem;
	background: var(--hm-modal-inner);
	border-radius: 12px;
}

.hm-singer-archive__modal-badge {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--hm-accent);
	color: #1a1a1a;
}

.hm-singer-archive__modal-label {
	margin: 0 0 0.35rem !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	color: var(--hm-heading) !important;
	font-family: "?????", sans-serif !important;
}

.hm-singer-archive__modal-text {
	margin: 0 !important;
	font-size: 0.88rem !important;
	line-height: 1.55 !important;
	color: var(--hm-text-muted) !important;
	font-family: "?????", sans-serif !important;
}

/* === Login modal === */
.hm-singer-archive__modal--login {
	max-width: 420px;
}

.hm-singer-archive__login-body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hm-singer-archive__login-intro {
	margin: 0 !important;
	font-size: 0.9rem !important;
	line-height: 1.55 !important;
	color: var(--hm-text-muted) !important;
	text-align: center;
	font-family: "?????", sans-serif !important;
}

.hm-singer-archive a.hm-singer-archive__google-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.65rem !important;
	width: 100% !important;
	padding: 0.8rem 1rem !important;
	border: 1px solid var(--hm-border) !important;
	border-radius: 999px !important;
	background: var(--hm-modal-bg) !important;
	color: var(--hm-heading) !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	font-family: "?????", sans-serif !important;
}

.hm-singer-archive a.hm-singer-archive__google-btn:hover {
	transform: translateY(-1px);
	border-color: var(--hm-brand) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

.hm-singer-archive__google-icon {
	flex-shrink: 0;
}

.hm-singer-archive__login-divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--hm-text-muted);
	font-size: 0.82rem;
	font-family: "?????", sans-serif !important;
}

.hm-singer-archive__login-divider::before,
.hm-singer-archive__login-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--hm-border);
}

.hm-singer-archive__login-form-wrap #hm-singer-loginform {
	margin: 0;
	padding: 0;
}

.hm-singer-archive__login-form-wrap #hm-singer-loginform p {
	margin: 0 0 0.75rem !important;
}

.hm-singer-archive__login-form-wrap #hm-singer-loginform label {
	display: block !important;
	margin-bottom: 0.35rem !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: var(--hm-heading) !important;
	font-family: "?????", sans-serif !important;
}

.hm-singer-archive__login-form-wrap #hm-singer-loginform input[type="text"],
.hm-singer-archive__login-form-wrap #hm-singer-loginform input[type="password"] {
	display: block !important;
	width: 100% !important;
	padding: 0.7rem 0.85rem !important;
	border: 1px solid var(--hm-border) !important;
	border-radius: 12px !important;
	background: var(--hm-modal-inner) !important;
	color: var(--hm-heading) !important;
	font-size: 0.95rem !important;
	font-family: "?????", sans-serif !important;
	box-sizing: border-box !important;
}

.hm-singer-archive__login-form-wrap #hm-singer-loginform input[type="text"]:focus,
.hm-singer-archive__login-form-wrap #hm-singer-loginform input[type="password"]:focus {
	outline: none !important;
	border-color: var(--hm-brand) !important;
}

.hm-singer-archive__login-form-wrap #hm-singer-loginform .login-remember {
	display: block !important;
	margin: 0 0 0.85rem !important;
	padding: 0 !important;
}

.hm-singer-archive__login-form-wrap #hm-singer-loginform .login-remember label {
	display: inline-flex !important;
	flex-direction: row-reverse !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 0.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: var(--hm-heading) !important;
	font-family: "?????", sans-serif !important;
	cursor: pointer !important;
	line-height: 1.3 !important;
}

/* ????? ?'????? "???? ????" - ???? Elementor / ????? */
.hm-singer-archive input[type="checkbox"]#hm-singer-remember,
.hm-singer-archive__login-form-wrap #hm-singer-loginform input[type="checkbox"]#hm-singer-remember {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	display: inline-block !important;
	flex: 0 0 18px !important;
	width: 18px !important;
	min-width: 18px !important;
	max-width: 18px !important;
	height: 18px !important;
	min-height: 18px !important;
	max-height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid var(--hm-heading) !important;
	border-radius: 5px !important;
	background: var(--hm-modal-bg) !important;
	background-color: var(--hm-modal-bg) !important;
	background-image: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	vertical-align: middle !important;
	position: relative !important;
	float: none !important;
	opacity: 1 !important;
	transform: none !important;
}

.hm-singer-archive input[type="checkbox"]#hm-singer-remember:checked,
.hm-singer-archive__login-form-wrap #hm-singer-loginform input[type="checkbox"]#hm-singer-remember:checked {
	background: var(--hm-brand) !important;
	background-color: var(--hm-brand) !important;
	border-color: var(--hm-brand) !important;
}

.hm-singer-archive input[type="checkbox"]#hm-singer-remember:checked::after,
.hm-singer-archive__login-form-wrap #hm-singer-loginform input[type="checkbox"]#hm-singer-remember:checked::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 1px !important;
	left: 5px !important;
	right: auto !important;
	bottom: auto !important;
	width: 5px !important;
	height: 9px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: solid #ffffff !important;
	border-width: 0 2px 2px 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: rotate(45deg) !important;
	box-sizing: border-box !important;
}

.hm-singer-archive input[type="checkbox"]#hm-singer-remember:focus,
.hm-singer-archive__login-form-wrap #hm-singer-loginform input[type="checkbox"]#hm-singer-remember:focus {
	outline: 2px solid var(--hm-brand) !important;
	outline-offset: 2px !important;
}

/* CAPTCHA 4WP - submit ????? ?????; ?? ????? ???? */
.hm-singer-archive__login-form-wrap #hm-singer-loginform .login-submit:has(.c4wp-submit) input[type="submit"]:not(.c4wp-submit) {
	display: none !important;
	visibility: hidden !important;
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

.hm-singer-archive button#hm-singer-submit,
.hm-singer-archive__login-form-wrap #hm-singer-loginform .login-submit input[type="submit"].c4wp-submit,
.hm-singer-archive__login-form-wrap #hm-singer-loginform .login-submit input[type="submit"]:not(.c4wp-submit) {
	display: block !important;
	width: 100% !important;
	padding: 0.8rem 1rem !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--hm-brand) !important;
	background-color: var(--hm-brand) !important;
	color: #ffffff !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	font-family: "?????", sans-serif !important;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.hm-singer-archive button#hm-singer-submit:hover,
.hm-singer-archive__login-form-wrap #hm-singer-loginform .login-submit input[type="submit"].c4wp-submit:hover,
.hm-singer-archive__login-form-wrap #hm-singer-loginform .login-submit input[type="submit"]:not(.c4wp-submit):hover {
	opacity: 0.92;
	transform: translateY(-1px);
}

.hm-singer-archive__login-register {
	margin: 0 !important;
	text-align: center;
	font-size: 0.85rem !important;
	color: var(--hm-text-muted) !important;
	font-family: "?????", sans-serif !important;
}

.hm-singer-archive__login-register a {
	color: var(--hm-brand) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.hm-singer-archive__login-register a:hover {
	text-decoration: underline !important;
}

.elementor-widget-shortcode .hm-singer-archive a.hm-singer-archive__google-btn,
.elementor-element .hm-singer-archive a.hm-singer-archive__google-btn {
	width: 100% !important;
}

.elementor-widget-shortcode .hm-singer-archive input[type="checkbox"]#hm-singer-remember,
.elementor-element .hm-singer-archive input[type="checkbox"]#hm-singer-remember {
	width: 18px !important;
	min-width: 18px !important;
	max-width: 18px !important;
	height: 18px !important;
	min-height: 18px !important;
	max-height: 18px !important;
}

/* === Pagination === */
.hm-singer-archive__pagination {
	margin-top: 1.5rem;
	text-align: center;
}

.hm-singer-archive__pagination .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.75rem;
	margin: 0 0.15rem;
	border-radius: 8px;
	color: var(--hm-heading) !important;
	text-decoration: none !important;
	font-size: 0.9rem !important;
	font-family: "?????", sans-serif !important;
}

.hm-singer-archive__pagination .page-numbers.current {
	background: var(--hm-accent);
	color: #1a1a1a;
	font-weight: 700;
}

.hm-singer-archive__pagination .page-numbers:hover:not(.current) {
	background: var(--hm-track-hover);
}

/* === Responsive === */
@media (max-width: 640px) {
	.hm-singer-archive__hero {
		padding: 1.75rem var(--hm-singer-pad-x) 1.25rem;
	}

	.hm-singer-archive__hero-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.hm-singer-archive__list-controls {
		flex-wrap: wrap;
	}

	.hm-singer-archive__search-wrap {
		max-width: none;
		width: 100%;
	}

	.hm-singer-archive__tracks-head {
		display: none;
	}

	.hm-singer-archive__track {
		grid-template-columns: 32px 44px minmax(0, 1fr) 36px;
		gap: 0.5rem;
		padding: 0.5rem 0.35rem;
	}

	.hm-singer-archive__track-actions {
		gap: 0;
		grid-column: 4;
		grid-row: 1;
		justify-content: center;
	}

	.hm-singer-archive button.hm-singer-archive__track-more {
		display: inline-flex !important;
	}

	.hm-singer-archive__track-menu {
		display: none;
		position: absolute;
		top: calc(100% + 4px);
		left: 0;
		right: auto;
		z-index: 40;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		min-width: 168px;
		padding: 0.4rem;
		border-radius: 12px;
		background: var(--hm-modal-bg, #fff);
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
		border: 1px solid var(--hm-border);
	}

	.hm-singer-archive__track-actions.is-open .hm-singer-archive__track-menu {
		display: flex;
	}

	.hm-singer-archive__track-menu .hm-singer-archive__track-badge,
	.hm-singer-archive__track-menu a.hm-singer-archive__track-download,
	.hm-singer-archive__track-menu button.hm-singer-archive__like.hm-save-btn,
	.hm-singer-archive__track-menu button.cmp-not-interested-btn {
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 40px !important;
		min-height: 40px !important;
		justify-content: flex-start !important;
		padding: 0 0.65rem !important;
		border-radius: 8px !important;
		gap: 0.5rem !important;
		font-size: 0.85rem !important;
	}

	.hm-singer-archive__track-menu .hm-singer-archive__track-badge {
		pointer-events: none;
		color: var(--hm-text-muted) !important;
	}

	.hm-singer-archive__track-menu a.hm-singer-archive__track-download::after {
		content: "?????";
		font-size: 0.85rem !important;
		font-family: "?????", sans-serif !important;
		line-height: 1 !important;
	}

	.hm-singer-archive__track-menu button.hm-singer-archive__like.hm-save-btn::after {
		content: "?????";
		font-size: 0.85rem !important;
		font-family: "?????", sans-serif !important;
		line-height: 1 !important;
		color: currentColor;
	}

	.hm-singer-archive__track-menu button.hm-singer-archive__like.hm-save-btn.is-saved::after {
		content: "????";
	}

	.hm-singer-archive__track-menu button.cmp-not-interested-btn::after {
		content: "?? ??????";
		font-size: 0.85rem !important;
		font-family: "?????", sans-serif !important;
		line-height: 1 !important;
		color: currentColor;
	}

	.hm-singer-archive__track-menu a.hm-singer-archive__track-download:hover,
	.hm-singer-archive__track-menu button.hm-singer-archive__like.hm-save-btn:hover,
	.hm-singer-archive__track-menu button.cmp-not-interested-btn:hover {
		background: var(--hm-track-hover) !important;
		transform: none !important;
	}

	.hm-singer-archive__track-date {
		display: none;
	}

	.hm-singer-archive__track-main {
		grid-column: 3;
		grid-row: 1;
	}
}

/* === Elementor - ???? ??? + ????? ????? ???????/???? === */
.elementor-widget-shortcode:has(.hm-singer-archive),
.elementor-column:has(.hm-singer-archive),
.elementor-container:has(.hm-singer-archive) {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.elementor-widget-shortcode .hm-singer-archive,
.elementor-element .hm-singer-archive {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.elementor-widget-shortcode .hm-singer-archive button.hm-singer-archive__play-all,
.elementor-element .hm-singer-archive button.hm-singer-archive__play-all,
.elementor-widget-shortcode .hm-singer-archive button.hm-singer-archive__shuffle,
.elementor-element .hm-singer-archive button.hm-singer-archive__shuffle,
.elementor-widget-shortcode .hm-singer-archive button.hm-singer-archive__follow,
.elementor-element .hm-singer-archive button.hm-singer-archive__follow {
	width: auto !important;
}

.elementor-widget-shortcode .hm-singer-archive button.hm-singer-archive__play-all,
.elementor-element .hm-singer-archive button.hm-singer-archive__play-all {
	flex: 0 0 56px !important;
	width: 56px !important;
	min-width: 56px !important;
	max-width: 56px !important;
}

.elementor-widget-shortcode .hm-singer-archive button.hm-singer-archive__shuffle,
.elementor-element .hm-singer-archive button.hm-singer-archive__shuffle,
.elementor-widget-shortcode .hm-singer-archive button.hm-singer-archive__download-all,
.elementor-element .hm-singer-archive button.hm-singer-archive__download-all,
.elementor-widget-shortcode .hm-singer-archive button.hm-singer-archive__share,
.elementor-element .hm-singer-archive button.hm-singer-archive__share,
.elementor-widget-shortcode .hm-singer-archive a.hm-singer-archive__yt-link,
.elementor-element .hm-singer-archive a.hm-singer-archive__yt-link {
	flex: 0 0 40px !important;
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
}

.elementor-widget-shortcode .hm-singer-archive,
.elementor-widget-shortcode .hm-singer-archive *,
.elementor-element .hm-singer-archive,
.elementor-element .hm-singer-archive * {
	font-family: "?????", "Polin", sans-serif !important;
}

.elementor-widget-shortcode .hm-singer-archive .hm-singer-archive__related-img,
.elementor-element .hm-singer-archive .hm-singer-archive__related-img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center !important;
}