/*
Theme Name:        Last.fm Aurora
Theme URI:         https://example.com/lastfm-aurora
Description:       Стильная, быстрая и SEO/AI-оптимизированная тема для плагина Last.fm Track Importer. Переопределяет шаблон одиночного трека, добавляет FAQ + Speakable schema и блок «Быстрые факты» для извлечения ответов генеративными ИИ (GEO/AEO). Автоматически поддерживает светлую и тёмную темы.
Author:            Last.fm Aurora
Version:           1.0.0
Requires at least: 5.8
Tested up to:      6.6
Requires PHP:      7.4
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       lastfm-aurora
Tags:              music, seo, custom-post-type, dark-mode, one-column, custom-colors
*/

/* =============================================================
   Last.fm Aurora — theme layer (prefix: lt-)
   Работает поверх плагина Last.fm Track Importer.
   Внутренности шорткодов (.lfmi-*) стилизует плагин;
   тема отвечает за оболочку, hero, сетку и SEO/AI-блоки.
   ============================================================= */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
	--lt-accent:      #e8192c;
	--lt-accent-2:    #ff5a3c;
	--lt-spotify:     #1db954;
	--lt-bg:          #ffffff;
	--lt-surface:     #ffffff;
	--lt-surface-2:   #f5f6f8;
	--lt-border:      #e7e9ee;
	--lt-text:        #14161a;
	--lt-muted:       #6b7280;
	--lt-hero-ink:    #ffffff;
	--lt-radius:      18px;
	--lt-radius-sm:   12px;
	--lt-shadow:      0 1px 2px rgba(16,18,22,.04), 0 8px 30px rgba(16,18,22,.07);
	--lt-shadow-lg:   0 30px 70px rgba(0,0,0,.5);
	--lt-font:        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--lt-maxw:        1120px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--lt-bg:        #0b0c0f;
		--lt-surface:   #14161b;
		--lt-surface-2: #191c22;
		--lt-border:    #262a32;
		--lt-text:      #edeef1;
		--lt-muted:     #9aa1ad;
		--lt-shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.45);
	}
}

/* ── Base ──────────────────────────────────────────────────── */
.lt-site {
	background: var(--lt-bg);
	color: var(--lt-text);
	font-family: var(--lt-font);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.lt-site *, .lt-site *::before, .lt-site *::after { box-sizing: border-box; }

/*
 * Осознанно НЕ красим здесь все ссылки подряд.
 * Правило вида «.lt-site a { color: … }» имеет специфичность (0,1,1) и
 * перебивает любой компонент, объявленный одним классом (0,1,0): кнопки,
 * карточки треков, чарт, теги. На практике это давало красный текст на
 * красной кнопке и красные заголовки во всех карточках.
 * Акцентный цвет задаётся точечно — только тексту статей, ниже.
 */
.lt-site a { text-underline-offset: 3px; }

/* Ссылки внутри читаемого текста */
.lt-prose a,
.lt-summary a,
.lt-notice a,
.lt-article__meta a { color: var(--lt-accent); }
.lt-skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--lt-text); color: var(--lt-bg);
	padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.lt-skip-link:focus { left: 0; }

/* ── Header / nav ──────────────────────────────────────────── */
.lt-topbar {
	position: sticky; top: 0; z-index: 40;
	background: var(--lt-bg); /* фолбэк для браузеров без color-mix() */
	background: color-mix(in srgb, var(--lt-bg) 82%, transparent);
	backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid var(--lt-border);
}
.lt-topbar__inner {
	max-width: var(--lt-maxw); margin: 0 auto;
	padding: 12px 20px;
	display: flex; align-items: center; gap: 18px;
}
.lt-brand {
	font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem;
	color: var(--lt-text); text-decoration: none;
	display: inline-flex; align-items: center; gap: 9px;
}
.lt-brand__dot {
	width: 20px; height: 20px; border-radius: 6px;
	background: linear-gradient(135deg, var(--lt-accent), var(--lt-accent-2));
	box-shadow: 0 4px 14px color-mix(in srgb, var(--lt-accent) 40%, transparent);
}
.lt-topnav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.lt-topnav a {
	text-decoration: none; color: var(--lt-muted);
	font-size: .9rem; font-weight: 600;
	padding: 7px 12px; border-radius: 999px;
	transition: background .15s, color .15s;
}
.lt-topnav a:hover { color: var(--lt-text); background: var(--lt-surface-2); }

/* ── Layout ────────────────────────────────────────────────── */
.lt-main { display: block; }
.lt-wrap { max-width: var(--lt-maxw); margin: 0 auto; padding: 0 20px; }

/* ── Breadcrumbs (visible; JSON-LD выдаёт плагин) ──────────── */
.lt-breadcrumb {
	max-width: var(--lt-maxw); margin: 0 auto; padding: 14px 20px 0;
	font-size: .82rem; color: var(--lt-muted);
}
.lt-breadcrumb ol {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.lt-breadcrumb a { color: var(--lt-muted); text-decoration: none; }
.lt-breadcrumb a:hover { color: var(--lt-accent); }
.lt-breadcrumb li + li::before { content: "/"; margin-right: 6px; opacity: .5; }

/* ── Hero ──────────────────────────────────────────────────── */
.lt-hero { position: relative; overflow: hidden; margin-top: 14px; }
.lt-hero__bg {
	position: absolute; inset: -40px;
	background-size: cover; background-position: center;
	filter: blur(60px) saturate(1.6) brightness(.4);
	transform: scale(1.15);
}
.lt-hero::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(8,8,10,.35) 0%, rgba(8,8,10,.72) 100%);
}
.lt-hero__inner {
	position: relative; z-index: 1;
	max-width: var(--lt-maxw); margin: 0 auto;
	padding: 44px 20px 46px;
	display: flex; flex-direction: column; gap: 24px;
	color: var(--lt-hero-ink);
}
.lt-hero__art {
	flex-shrink: 0; width: 168px; height: 168px;
	border-radius: 16px; overflow: hidden;
	box-shadow: var(--lt-shadow-lg);
	background: rgba(255,255,255,.06);
}
.lt-hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lt-hero__text { min-width: 0; }
.lt-hero__eyebrow {
	margin: 0 0 10px; font-size: .74rem; font-weight: 800;
	letter-spacing: .16em; text-transform: uppercase;
	color: #ff8a7a;
}
.lt-hero__eyebrow a { color: inherit; text-decoration: none; }
.lt-hero__eyebrow a:hover { text-decoration: underline; }
.lt-hero__title {
	margin: 0 0 14px; font-weight: 800; line-height: 1.05;
	letter-spacing: -.02em; font-size: clamp(1.9rem, 5.5vw, 3.4rem);
	color: #fff; word-break: break-word;
}
.lt-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: 999px;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.16);
	font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.92);
	backdrop-filter: blur(4px);
}
.lt-chip svg { width: 14px; height: 14px; opacity: .8; }
.lt-chip--accent { background: var(--lt-accent); border-color: transparent; }

/* ── Hero страницы исполнителя ─────────────────────────────── */
.lt-hero--artist .lt-hero__inner { padding-bottom: 40px; }
.lt-hero__art--round { border-radius: 50%; }
.lt-hero__art--round img { border-radius: 50%; }

/* ── Content grid ──────────────────────────────────────────── */
.lt-layout {
	max-width: var(--lt-maxw); margin: 0 auto;
	padding: 40px 20px 80px;
	display: grid; gap: 40px;
	grid-template-columns: 1fr;
}
.lt-col-main { min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.lt-col-side { min-width: 0; display: flex; flex-direction: column; gap: 28px; }

.lt-block { }
.lt-block__title {
	margin: 0 0 16px; font-size: .74rem; font-weight: 800;
	letter-spacing: .13em; text-transform: uppercase; color: var(--lt-muted);
}

/* ── Cards ─────────────────────────────────────────────────── */
.lt-card {
	background: var(--lt-surface);
	border: 1px solid var(--lt-border);
	border-radius: var(--lt-radius);
	box-shadow: var(--lt-shadow);
	padding: 22px;
}

/* ── Quick facts (AI/GEO-friendly key:value) ───────────────── */
.lt-facts { }
.lt-facts dl { margin: 0; display: grid; grid-template-columns: 1fr; }
.lt-facts__row {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 12px 0; border-bottom: 1px solid var(--lt-border);
}
.lt-facts__row:last-child { border-bottom: 0; }
.lt-facts dt {
	font-size: .82rem; font-weight: 600; color: var(--lt-muted);
	flex: 0 0 auto;
}
.lt-facts dd {
	margin: 0; font-size: .9rem; font-weight: 600; text-align: right;
	color: var(--lt-text); min-width: 0;
}
.lt-facts dd a { color: var(--lt-accent); text-decoration: none; }

/* ── AI summary (extractable single paragraph) ─────────────── */
.lt-summary {
	font-size: 1.02rem; line-height: 1.7; color: var(--lt-text);
	border-left: 3px solid var(--lt-accent);
	padding: 4px 0 4px 18px; margin: 0;
}

/* ── FAQ (visible + FAQPage schema via functions.php) ──────── */
.lt-faq details {
	border: 1px solid var(--lt-border);
	border-radius: var(--lt-radius-sm);
	background: var(--lt-surface);
	margin-bottom: 10px; overflow: hidden;
}
.lt-faq summary {
	cursor: pointer; list-style: none;
	padding: 15px 18px; font-weight: 700; font-size: .96rem;
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.lt-faq summary::-webkit-details-marker { display: none; }
.lt-faq summary::after {
	content: "+"; font-size: 1.3rem; color: var(--lt-muted);
	transition: transform .2s; line-height: 1;
}
.lt-faq details[open] summary::after { transform: rotate(45deg); }
.lt-faq__a { padding: 0 18px 16px; color: var(--lt-muted); font-size: .94rem; line-height: 1.6; }

/* ── Similar / author reuse plugin CSS; add spacing card ───── */
.lt-col-side .lt-card > :first-child { margin-top: 0; }

/* ── Footer ────────────────────────────────────────────────── */
.lt-footer {
	border-top: 1px solid var(--lt-border);
	padding: 30px 20px; color: var(--lt-muted); font-size: .85rem;
}
.lt-footer__inner {
	max-width: var(--lt-maxw); margin: 0 auto;
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
}
.lt-footer a { color: var(--lt-muted); }

/* ── Archive / index grid ──────────────────────────────────── */
.lt-archive-head { padding: 40px 20px 8px; max-width: var(--lt-maxw); margin: 0 auto; }
.lt-archive-head h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.02em; }
.lt-archive-head p { margin: 0; color: var(--lt-muted); }
.lt-grid {
	max-width: var(--lt-maxw); margin: 0 auto;
	padding: 24px 20px 80px;
	display: grid; gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.lt-track-card {
	background: var(--lt-surface); border: 1px solid var(--lt-border);
	border-radius: var(--lt-radius); overflow: hidden;
	box-shadow: var(--lt-shadow); text-decoration: none; color: var(--lt-text);
	display: flex; flex-direction: column;
	transition: transform .18s, box-shadow .18s;
}
.lt-track-card:hover { transform: translateY(-4px); box-shadow: var(--lt-shadow-lg); }
.lt-track-card__art {
	display: block;
	background: var(--lt-surface-2);
	overflow: hidden;
}
/*
 * Пропорцию задаёт картинка, а не контейнер: при aspect-ratio на обёртке
 * и height:100% у img в браузерах без поддержки aspect-ratio (Safari до 15)
 * блок схлопывался в нулевую высоту. Здесь height:auto — карточка остаётся
 * рабочей даже там, где свойство игнорируется.
 */
.lt-track-card__art img {
	width: 100%; height: auto;
	aspect-ratio: 1;
	object-fit: cover; display: block;
}
.lt-track-card__body { display: block; padding: 13px 14px 15px; }
/* Спаны внутри не-флекс контейнера остаются строчными: без display:block
   исполнитель и название слипаются в одну строку, а margin игнорируется. */
.lt-track-card__artist {
	display: block;
	font-size: .72rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .08em; color: var(--lt-accent); margin: 0 0 4px;
}
.lt-track-card__title { display: block; font-size: .95rem; font-weight: 700; margin: 0; line-height: 1.3; }
.lt-pagination { max-width: var(--lt-maxw); margin: 0 auto; padding: 0 20px 80px; }
.lt-pagination .page-numbers {
	display: inline-block; padding: 8px 13px; margin: 2px;
	border: 1px solid var(--lt-border); border-radius: 10px;
	text-decoration: none; color: var(--lt-text);
}
.lt-pagination .current { background: var(--lt-accent); color: #fff; border-color: transparent; }

/* ── Главная: первый экран ─────────────────────────────────── */
.lt-lead {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--lt-border);
}
.lt-lead__glow {
	position: absolute;
	top: -320px; left: 50%;
	width: 900px; height: 700px;
	transform: translateX(-50%);
	background: radial-gradient(circle at center,
		color-mix(in srgb, var(--lt-accent) 30%, transparent) 0%,
		transparent 62%);
	pointer-events: none;
}
.lt-lead__inner {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
	padding: 84px 20px 76px;
	text-align: center;
}
.lt-lead__eyebrow {
	margin: 0 0 18px;
	font-size: .74rem; font-weight: 800;
	letter-spacing: .2em; text-transform: uppercase;
	color: var(--lt-muted);
}
.lt-lead__title {
	margin: 0 0 20px;
	font-size: clamp(2.2rem, 6.5vw, 4.2rem);
	font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
}
/*
 * Сначала обычный цвет, прозрачным текст становится только там, где
 * background-clip:text реально работает. Иначе получался невидимый заголовок.
 */
.lt-lead__grad {
	display: block;
	color: var(--lt-accent);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.lt-lead__grad {
		background: linear-gradient(115deg, var(--lt-accent), var(--lt-accent-2));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}
.lt-lead__text {
	max-width: 580px; margin: 0 auto 30px;
	font-size: 1.08rem; line-height: 1.65; color: var(--lt-muted);
}
.lt-lead__actions {
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.lt-stats {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 14px 44px; margin: 46px 0 0;
}
.lt-stats__cell { text-align: center; }
.lt-stats dt {
	order: 2;
	font-size: .72rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--lt-muted);
}
.lt-stats dd {
	order: 1; margin: 0 0 4px;
	font-size: 2rem; font-weight: 800; letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.lt-stats__cell { display: flex; flex-direction: column; }

/* ── Главная: секции ───────────────────────────────────────── */
.lt-home {
	max-width: var(--lt-maxw); margin: 0 auto;
	padding: 56px 20px 90px;
	display: flex; flex-direction: column; gap: 62px;
}
.lt-home__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; margin-bottom: 20px;
}
.lt-home__head h2 {
	margin: 0;
	font-size: clamp(1.25rem, 3vw, 1.7rem);
	font-weight: 800; letter-spacing: -.02em;
}
.lt-more {
	flex-shrink: 0;
	font-size: .86rem; font-weight: 700;
	text-decoration: none; color: var(--lt-muted);
	transition: color .15s;
}
.lt-more:hover { color: var(--lt-accent); }
.lt-more::after { content: " →"; }

.lt-home__section--split {
	display: grid; gap: 46px;
	grid-template-columns: 1fr;
}
.lt-home__col { min-width: 0; }

/* ── Заглушка (пустой каталог / нет плагина) ───────────────── */
.lt-notice {
	max-width: 720px;
	margin: 60px auto 90px;
	padding: 34px 30px;
	text-align: center;
	border: 1px dashed var(--lt-border);
	border-radius: var(--lt-radius);
	background: var(--lt-surface-2);
}
.lt-notice h2 { margin: 0 0 10px; font-size: 1.4rem; letter-spacing: -.01em; }
.lt-notice p { margin: 0 0 14px; color: var(--lt-muted); }
.lt-notice p:last-child { margin-bottom: 0; }

/* ── Страница (широкий контейнер под сетки) ────────────────── */
.lt-page {
	max-width: var(--lt-maxw); margin: 0 auto; padding: 48px 20px 20px;
}
.lt-page--comments { padding-top: 8px; padding-bottom: 80px; }
.lt-page__title {
	margin: 0; letter-spacing: -.02em; line-height: 1.15;
	font-size: clamp(1.8rem, 4.5vw, 2.8rem);
}
.lt-page__cover { margin: 26px 0 0; }
.lt-page__cover img {
	width: 100%; height: auto; display: block;
	border-radius: var(--lt-radius); box-shadow: var(--lt-shadow);
}
/* Текст держим в читаемой колонке, сетки шорткодов — во всю ширину. */
.lt-prose--wide > p,
.lt-prose--wide > h2,
.lt-prose--wide > h3,
.lt-prose--wide > ul,
.lt-prose--wide > ol,
.lt-prose--wide > blockquote {
	max-width: 720px;
}

/* ── Article (обычные записи и страницы) ───────────────────── */
.lt-article {
	max-width: 760px; margin: 0 auto; padding: 48px 20px 20px;
}
.lt-article--comments { padding-top: 8px; padding-bottom: 80px; }
.lt-article__title {
	margin: 0 0 10px; letter-spacing: -.02em; line-height: 1.15;
	font-size: clamp(1.7rem, 4.5vw, 2.6rem);
}
.lt-article__meta { margin: 0; color: var(--lt-muted); font-size: .88rem; }
.lt-article__cover { margin: 26px 0 0; }
.lt-article__cover img {
	width: 100%; height: auto; display: block;
	border-radius: var(--lt-radius); box-shadow: var(--lt-shadow);
}

/* ── Prose (контент редактора) ─────────────────────────────── */
.lt-prose { margin-top: 26px; font-size: 1.02rem; line-height: 1.75; }
.lt-prose > *:first-child { margin-top: 0; }
.lt-prose h2 { margin: 2em 0 .6em; font-size: 1.5rem; letter-spacing: -.01em; }
.lt-prose h3 { margin: 1.6em 0 .5em; font-size: 1.2rem; }
.lt-prose p, .lt-prose ul, .lt-prose ol { margin: 0 0 1.2em; }
.lt-prose ul, .lt-prose ol { padding-left: 1.4em; }
.lt-prose li { margin-bottom: .4em; }
.lt-prose img { max-width: 100%; height: auto; border-radius: var(--lt-radius-sm); }
.lt-prose blockquote {
	margin: 1.6em 0; padding: 2px 0 2px 20px;
	border-left: 3px solid var(--lt-accent); color: var(--lt-muted);
}
.lt-prose pre {
	background: var(--lt-surface-2); border: 1px solid var(--lt-border);
	border-radius: var(--lt-radius-sm); padding: 16px; overflow-x: auto;
	font-size: .88rem;
}
.lt-prose code {
	font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em;
}
.lt-prose :not(pre) > code {
	background: var(--lt-surface-2); border: 1px solid var(--lt-border);
	border-radius: 5px; padding: 1px 6px;
}
.lt-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.lt-prose th, .lt-prose td {
	border: 1px solid var(--lt-border); padding: 9px 12px; text-align: left;
}
.lt-prose th { background: var(--lt-surface-2); font-size: .88rem; }

/* ── Buttons / forms ───────────────────────────────────────── */
.lt-btn {
	display: inline-block; padding: 11px 22px; border-radius: 999px;
	background: var(--lt-accent); color: #fff; font-weight: 700;
	font-size: .92rem; text-decoration: none;
	transition: transform .15s, box-shadow .15s;
	box-shadow: 0 6px 20px color-mix(in srgb, var(--lt-accent) 35%, transparent);
}
.lt-btn:hover { transform: translateY(-2px); }

/* Объявлена строго после .lt-btn: при равной специфичности решает порядок. */
.lt-btn--ghost {
	background: transparent;
	color: var(--lt-text);
	border: 1px solid var(--lt-border);
	box-shadow: none;
}
.lt-btn--ghost:hover { border-color: var(--lt-accent); color: var(--lt-accent); }
.lt-site input[type="search"], .lt-site input[type="text"],
.lt-site input[type="email"], .lt-site textarea {
	width: 100%; max-width: 100%; padding: 11px 14px;
	border: 1px solid var(--lt-border); border-radius: var(--lt-radius-sm);
	background: var(--lt-surface); color: var(--lt-text);
	font: inherit; font-size: .95rem;
}
.lt-site input:focus-visible, .lt-site textarea:focus-visible,
.lt-site a:focus-visible, .lt-site button:focus-visible,
.lt-site summary:focus-visible {
	outline: 2px solid var(--lt-accent); outline-offset: 2px;
}
.lt-site .search-form { display: flex; gap: 8px; flex-wrap: wrap; }
.lt-site .search-form label { flex: 1; min-width: 200px; }
.lt-site .search-submit {
	padding: 11px 20px; border: 0; border-radius: var(--lt-radius-sm);
	background: var(--lt-text); color: var(--lt-bg);
	font: inherit; font-weight: 700; cursor: pointer;
}

/* ── 404 ───────────────────────────────────────────────────── */
.lt-404 {
	max-width: 620px; margin: 0 auto; padding: 90px 20px 110px; text-align: center;
}
.lt-404__code {
	margin: 0; font-size: clamp(4rem, 16vw, 8rem); font-weight: 800;
	line-height: 1; letter-spacing: -.04em;
	color: var(--lt-accent);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.lt-404__code {
		background: linear-gradient(135deg, var(--lt-accent), var(--lt-accent-2));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}
.lt-404__title { margin: 12px 0 10px; font-size: 1.5rem; letter-spacing: -.01em; }
.lt-404__text { margin: 0 0 26px; color: var(--lt-muted); }
.lt-404__search { margin-bottom: 26px; }

/* ── Comments ──────────────────────────────────────────────── */
.lt-site .comment-list { list-style: none; margin: 0; padding: 0; }
.lt-site .comment-list li { margin-bottom: 18px; }
.lt-site .comment-body {
	border: 1px solid var(--lt-border); border-radius: var(--lt-radius-sm);
	background: var(--lt-surface); padding: 16px 18px;
}
.lt-site .comment-form p { margin: 0 0 14px; }

/* ── Motion preferences ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.lt-site *, .lt-site *::before, .lt-site *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
	.lt-track-card:hover, .lt-btn:hover { transform: none; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (min-width: 680px) {
	.lt-hero__inner { flex-direction: row; align-items: flex-end; gap: 32px; }
	.lt-hero__art { width: 210px; height: 210px; }
}
@media (min-width: 960px) {
	.lt-layout { grid-template-columns: minmax(0, 1fr) 320px; }
	.lt-hero__art { width: 240px; height: 240px; }
	.lt-home__section--split { grid-template-columns: 1.15fr 1fr; }
}

/* ── Тема задаёт палитру блокам плагина ────────────────────── */
.lt-site .lfmi-grid,
.lt-site .lfmi-terms,
.lt-site .lfmi-chart,
.lt-site .lfmi-index,
.lt-site .lfmi-years,
.lt-site .lfmi-cards,
.lt-site .lfmi-reactions,
.lt-site .lfmi-faq,
.lt-site .lfmi-artist-intro {
	--lfmi-h-accent:  var(--lt-accent);
	--lfmi-h-surface: var(--lt-surface-2);
	--lfmi-h-border:  var(--lt-border);
	--lfmi-h-muted:   var(--lt-muted);
	--lfmi-h-radius:  var(--lt-radius);
}

/*
 * Токены плеера, обзора и блока автора. Плагин объявляет их на :root со
 * своей светлой палитрой; здесь они пересобираются из переменных темы,
 * чтобы блоки совпадали по цвету и корректно уходили в тёмную схему.
 */
.lt-site {
	--lfmi-accent:    var(--lt-accent);
	--lfmi-accent-hi: var(--lt-accent-2);
	--lfmi-surface:   var(--lt-surface);
	--lfmi-surface-2: var(--lt-surface-2);
	--lfmi-border:    var(--lt-border);
	--lfmi-text:      var(--lt-text);
	--lfmi-muted:     var(--lt-muted);
	--lfmi-radius:    var(--lt-radius);
	--lfmi-radius-sm: var(--lt-radius-sm);
	--lfmi-shadow-sm: var(--lt-shadow);
	--lfmi-shadow-md: var(--lt-shadow);
}