/* =============================================================
   Last.fm Track Importer — Premium Frontend CSS
   Mobile-first · Blurred-hero · Red accent
   ============================================================= */

/* ── Variables ─────────────────────────────────────────────── */
.lfmi-page {
	--lfmi-accent:     #e8192c;
	--lfmi-accent-hi:  #ff2d3f;
	--lfmi-btn:        #1db954;
	--lfmi-btn-hi:     #1ed760;
	--lfmi-dark:       #0d0d0d;
	--lfmi-surface:    #ffffff;
	--lfmi-surface-2:  #f6f6f6;
	--lfmi-border:     #e8e8e8;
	--lfmi-text:       #111111;
	--lfmi-muted:      #8c8c8c;
	--lfmi-shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
	--lfmi-shadow-md:  0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
	--lfmi-shadow-art: 0 24px 64px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.3);
	--lfmi-radius:     16px;
	--lfmi-radius-sm:  10px;

	box-sizing: border-box;
}
.lfmi-page *,
.lfmi-page *::before,
.lfmi-page *::after { box-sizing: inherit; }

/* ── Hero (full-width, blurred artwork background) ─────────── */
.lfmi-hero {
	position: relative;
	overflow: hidden;
	padding: 48px 20px 60px;
	background: var(--lfmi-dark);
}

.lfmi-hero__bg {
	position: absolute;
	inset: -32px;
	background-size: cover;
	background-position: center;
	filter: blur(48px) saturate(1.5) brightness(0.28);
	transform: scale(1.08);
	will-change: transform;
}

/* Gradient fade at bottom — blends into page bg */
.lfmi-hero::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 80px;
	background: linear-gradient(to bottom, transparent, rgba(0,0,0,.35));
	pointer-events: none;
}

.lfmi-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ── Hero art ──────────────────────────────────────────────── */
.lfmi-hero__art { flex-shrink: 0; }
.lfmi-hero__art img {
	width: 150px;
	height: 150px;
	border-radius: 12px;
	box-shadow: var(--lfmi-shadow-art);
	display: block;
	object-fit: cover;
}

/* ── Hero text ─────────────────────────────────────────────── */
.lfmi-hero__text { min-width: 0; }

.lfmi-hero__artist {
	margin: 0 0 8px;
	font-size: .76em;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lfmi-accent);
}
.lfmi-hero__title {
	margin: 0 0 10px;
	font-size: 2.1em;
	font-weight: 800;
	line-height: 1.1;
	color: #ffffff;
	word-break: break-word;
}
.lfmi-hero__album {
	margin: 0 0 18px;
	font-size: .88em;
	color: rgba(255,255,255,.48);
	display: flex;
	align-items: center;
	gap: 5px;
}
.lfmi-hero__album svg { width: 13px; height: 13px; flex-shrink: 0; }

.lfmi-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}
.lfmi-stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .81em;
	font-weight: 500;
	color: rgba(255,255,255,.45);
}
.lfmi-stat svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Body (constrained) ────────────────────────────────────── */
.lfmi-body {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 20px 72px;
}

/* ── Sections ──────────────────────────────────────────────── */
.lfmi-section { margin-top: 40px; }
.lfmi-section--player { margin-top: 36px; }
.lfmi-section--wiki   { margin-top: 40px; }

.lfmi-section__heading {
	font-size: .71em;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--lfmi-muted);
	margin: 0 0 16px;
}

/* ── Embed players ─────────────────────────────────────────── */
.lfmi-embed {
	border-radius: var(--lfmi-radius);
	overflow: hidden;
	box-shadow: var(--lfmi-shadow-md);
}
.lfmi-embed.lfmi-yt iframe {
	display: block; width: 100%;
	aspect-ratio: 16/9; height: auto; border: 0;
}
.lfmi-embed.lfmi-spotify iframe {
	display: block; width: 100%; height: 152px; border: 0;
}

/* Loading / NA states */
.lfmi-audio-loading,
.lfmi-audio-na {
	display: flex; align-items: center; gap: 12px;
	padding: 16px 20px; border-radius: var(--lfmi-radius);
	background: var(--lfmi-surface-2);
	border: 1px solid var(--lfmi-border);
	color: var(--lfmi-muted); font-size: .88em;
}
.lfmi-audio-na svg { width: 18px; height: 18px; flex-shrink: 0; }
.lfmi-spinner {
	width: 16px; height: 16px; flex-shrink: 0;
	border: 2px solid var(--lfmi-border);
	border-top-color: var(--lfmi-muted);
	border-radius: 50%;
	animation: lfmi-spin .75s linear infinite;
}
@keyframes lfmi-spin { to { transform: rotate(360deg); } }

/* ── Custom HTML5 audio player ─────────────────────────────── */
.lfmi-audio-player {
	background: var(--lfmi-dark);
	border-radius: var(--lfmi-radius);
	padding: 20px 22px;
	color: #fff;
	user-select: none;
	box-shadow: var(--lfmi-shadow-md);
}
.lfmi-ap-inner {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Play/Pause button — green */
.lfmi-ap-btn {
	flex-shrink: 0;
	width: 48px; height: 48px;
	border-radius: 50%; border: none;
	background: var(--lfmi-btn);
	color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .18s, transform .12s, box-shadow .18s;
	padding: 0;
	box-shadow: 0 4px 18px rgba(29,185,84,.45);
}
.lfmi-ap-btn:hover {
	background: var(--lfmi-btn-hi);
	transform: scale(1.08);
	box-shadow: 0 6px 24px rgba(29,185,84,.55);
}
.lfmi-ap-btn svg { width: 22px; height: 22px; pointer-events: none; }

/* Pulsing ring when playing */
.lfmi-playing .lfmi-ap-btn::after {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid rgba(29,185,84,.35);
	animation: lfmi-pulse 1.8s ease-out infinite;
}
@keyframes lfmi-pulse {
	0%   { transform: scale(1);   opacity: 1; }
	100% { transform: scale(1.5); opacity: 0; }
}
.lfmi-ap-btn { position: relative; } /* needed for ::after */

/* Body: info + progress */
.lfmi-ap-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lfmi-ap-info {
	font-size: .83em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: rgba(255,255,255,.55);
}
.lfmi-ap-artist { font-weight: 700; color: #fff; }
.lfmi-ap-sep    { color: rgba(255,255,255,.25); margin: 0 2px; }
.lfmi-ap-badge {
	display: inline-block; margin-left: 8px;
	padding: 1px 8px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.1);
	background: rgba(255,255,255,.06);
	font-size: .75em; color: rgba(255,255,255,.35);
	vertical-align: middle;
}

/* Progress bar */
.lfmi-ap-progress-wrap { display: flex; align-items: center; gap: 10px; }
.lfmi-ap-progress {
	flex: 1; height: 3px;
	background: rgba(255,255,255,.12);
	border-radius: 999px; position: relative; cursor: pointer;
	transition: height .15s;
}
.lfmi-ap-progress:hover { height: 5px; }
.lfmi-ap-bar {
	position: absolute; left: 0; top: 0;
	height: 100%; width: 0%;
	background: var(--lfmi-accent);
	border-radius: 999px;
}
.lfmi-ap-thumb {
	position: absolute; top: 50%; left: 0%;
	transform: translate(-50%,-50%);
	width: 12px; height: 12px; border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px var(--lfmi-accent), 0 2px 6px rgba(0,0,0,.45);
	opacity: 0; transition: opacity .15s;
}
.lfmi-ap-progress:hover .lfmi-ap-thumb,
.lfmi-playing .lfmi-ap-thumb { opacity: 1; }

.lfmi-ap-time, .lfmi-ap-dur {
	font-size: .73em; color: rgba(255,255,255,.32);
	white-space: nowrap; min-width: 28px;
	font-variant-numeric: tabular-nums;
}
.lfmi-ap-dur::before { content: '/ '; }

/* Volume */
.lfmi-ap-vol { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.lfmi-ap-vol svg { width: 15px; height: 15px; fill: rgba(255,255,255,.32); }
.lfmi-ap-volume {
	-webkit-appearance: none; appearance: none;
	width: 60px; height: 3px; border-radius: 999px;
	background: rgba(255,255,255,.15); outline: none; cursor: pointer;
}
.lfmi-ap-volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 11px; height: 11px; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.lfmi-ap-volume::-moz-range-thumb {
	width: 11px; height: 11px; border-radius: 50%;
	background: #fff; border: none;
}

/* ── Wiki prose ────────────────────────────────────────────── */
.lfmi-prose {
	font-size: .97em;
	line-height: 1.82;
	color: #3a3a3a;
}
.lfmi-prose p:first-child { margin-top: 0; }
.lfmi-prose a { color: var(--lfmi-accent); text-decoration: none; }
.lfmi-prose a:hover { text-decoration: underline; }

/* ── Meta table (card) ─────────────────────────────────────── */
.lfmi-meta {
	border: 1px solid var(--lfmi-border);
	border-radius: var(--lfmi-radius);
	overflow: hidden;
	background: var(--lfmi-surface);
}
.lfmi-meta__row {
	display: flex;
	gap: 16px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--lfmi-border);
	font-size: .91em;
	transition: background .14s;
}
.lfmi-meta__row:last-child { border-bottom: 0; }
.lfmi-meta__row:hover { background: var(--lfmi-surface-2); }
.lfmi-meta__row dt {
	flex: 0 0 120px;
	font-weight: 600;
	color: var(--lfmi-muted);
	font-size: .81em;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding-top: 1px;
}
.lfmi-meta__row dd { margin: 0; color: var(--lfmi-text); }

.lfmi-meta__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lfmi-tag {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	border: 1px solid var(--lfmi-border);
	background: transparent;
	font-size: .8em;
	color: var(--lfmi-muted);
}

/* ── Badges ────────────────────────────────────────────────── */
.lfmi-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--lfmi-surface-2);
	border: 1px solid var(--lfmi-border);
	font-size: .82em;
	font-weight: 600;
	color: var(--lfmi-text);
	white-space: nowrap;
}
.lfmi-badge--key     { background: #f0f4ff; border-color: #c7d3f5; color: #3455c7; }
.lfmi-badge--explicit{ background: #fff0f0; border-color: #f5c7c7; color: #c73434; font-size: .76em; letter-spacing: .04em; }
.lfmi-badge--clean   { background: #f0fff4; border-color: #c7f5d3; color: #1a8040; }

/* ── Popularity bar (inline) ────────────────────────────────── */
.lfmi-bar-wrap {
	display: inline-block;
	vertical-align: middle;
	width: 80px;
	height: 4px;
	background: var(--lfmi-border);
	border-radius: 999px;
	margin-right: 6px;
	overflow: hidden;
}
.lfmi-bar {
	height: 100%;
	background: var(--lfmi-accent);
	border-radius: 999px;
}
.lfmi-bar-val { font-size: .82em; color: var(--lfmi-muted); }

/* ── ISRC code ──────────────────────────────────────────────── */
.lfmi-code {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: .83em;
	background: var(--lfmi-surface-2);
	border: 1px solid var(--lfmi-border);
	border-radius: 5px;
	padding: 1px 6px;
	color: var(--lfmi-text);
	letter-spacing: .05em;
}

/* ── Info block: release date + genres ─────────────────────── */
.lfmi-info {
	display: flex;
	flex-wrap: wrap;
	gap: 28px 40px;
}
.lfmi-info__block { min-width: 120px; }

.lfmi-info__heading {
	margin: 0 0 8px;
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--lfmi-muted);
}
.lfmi-info__date {
	font-size: 1.06em;
	font-weight: 700;
	color: var(--lfmi-text);
	letter-spacing: -.01em;
}
.lfmi-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* ── Audio features block ───────────────────────────────────── */
.lfmi-features {
	margin-top: 20px;
	padding: 18px 18px 14px;
	background: var(--lfmi-surface-2);
	border: 1px solid var(--lfmi-border);
	border-radius: var(--lfmi-radius);
}
.lfmi-features__heading {
	margin: 0 0 14px;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lfmi-muted);
}
.lfmi-features__grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.lfmi-features__extra {
	margin: 12px 0 0;
	font-size: .82em;
	color: var(--lfmi-muted);
}
.lfmi-feat__header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
}
.lfmi-feat__label { font-size: .83em; font-weight: 600; color: var(--lfmi-text); }
.lfmi-feat__val   { font-size: .82em; color: var(--lfmi-muted); font-variant-numeric: tabular-nums; }
.lfmi-feat__track {
	height: 4px;
	background: var(--lfmi-border);
	border-radius: 999px;
	overflow: hidden;
}
.lfmi-feat__fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
	transition: width .5s ease;
}

/* ── Review block — чистый HTML без декоративных рамок ────── */
.lfmi-review__body {
	font-size: .97em;
	line-height: 1.82;
	color: var(--lfmi-text);
}
.lfmi-review__body p:first-child { margin-top: 0; }
.lfmi-review__body p:last-child  { margin-bottom: 0; }

/* ── Bottom: meta + similar ────────────────────────────────── */
.lfmi-bottom {
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ── Similar tracks list ───────────────────────────────────── */
.lfmi-similar-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column;
}
.lfmi-similar-list__item {
	border-bottom: 1px solid var(--lfmi-border);
	font-size: .91em;
}
.lfmi-similar-list__item:first-child {
	border-top: 1px solid var(--lfmi-border);
}
.lfmi-similar-list__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 11px 2px;
	color: var(--lfmi-text);
	text-decoration: none;
	transition: color .15s;
}
.lfmi-similar-list__item a::after {
	content: '→';
	flex-shrink: 0;
	color: var(--lfmi-border);
	font-size: 1em;
	transition: color .15s, transform .2s;
}
.lfmi-similar-list__item a:hover { color: var(--lfmi-accent); }
.lfmi-similar-list__item a:hover::after {
	color: var(--lfmi-accent);
	transform: translateX(4px);
}

/* ── Author block (E-E-A-T) ────────────────────────────────── */
.lfmi-author {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-top: 56px;
	padding: 22px 24px;
	border: 1px solid var(--lfmi-border);
	border-radius: var(--lfmi-radius);
	background: var(--lfmi-surface-2);
}
.lfmi-author__photo img {
	width: 56px; height: 56px;
	border-radius: 50%; display: block;
	box-shadow: var(--lfmi-shadow-sm);
}
.lfmi-author__info { flex: 1; min-width: 0; }
.lfmi-author__label {
	margin: 0 0 3px;
	font-size: .71em; font-weight: 700;
	letter-spacing: .11em; text-transform: uppercase;
	color: var(--lfmi-muted);
}
.lfmi-author__name {
	display: block; margin-bottom: 6px;
	font-size: 1em; font-weight: 700;
	color: var(--lfmi-text); text-decoration: none;
	transition: color .15s;
}
.lfmi-author__name:hover { color: var(--lfmi-accent); }
.lfmi-author__bio {
	margin: 0 0 6px;
	font-size: .88em; line-height: 1.62; color: #555;
}
.lfmi-author__count { margin: 0; font-size: .8em; color: var(--lfmi-muted); }

/* ── Tablet 600px ──────────────────────────────────────────── */
@media (min-width: 600px) {
	.lfmi-hero { padding: 64px 24px 80px; }

	.lfmi-hero__inner {
		flex-direction: row;
		align-items: flex-end;
		gap: 36px;
	}
	.lfmi-hero__art img {
		width: 200px;
		height: 200px;
		border-radius: 14px;
	}
	.lfmi-hero__title { font-size: 2.9em; }

	.lfmi-body { padding: 0 24px 80px; }
}

/* ── Desktop 760px ─────────────────────────────────────────── */
@media (min-width: 760px) {
	.lfmi-hero { padding: 72px 32px 88px; }
	.lfmi-hero__art img { width: 220px; height: 220px; }
	.lfmi-hero__title { font-size: 3.2em; }

	.lfmi-body { padding: 0 32px 88px; }

	.lfmi-bottom {
		flex-direction: row;
		align-items: flex-start;
	}
	.lfmi-bottom__main { flex: 1; min-width: 0; }
	.lfmi-bottom__aside {
		flex: 0 0 230px;
		padding-left: 36px;
		border-left: 1px solid var(--lfmi-border);
	}
}

/* ── Volume hidden on small screens ───────────────────────── */
@media (max-width: 479px) {
	.lfmi-ap-vol { display: none; }
	.lfmi-hero__title { font-size: 1.85em; }
}