/* НАДО: кастомные стили поверх Tailwind. */

/*
 * Тёмная тема (референс — artlist.io): глубокий фон, светлая типографика,
 * изумрудный акцент. Слой переопределяет утилиты Tailwind CDN,
 * поэтому селекторы усилены body и !important.
 */
:root {
	--nado-bg: #0F1117;       /* фон страницы */
	--nado-deep: #0A0B0F;     /* hero, футер */
	--nado-surface: #171923;  /* карточки, формы */
	--nado-surface-2: #1E2130;/* вторичные поверхности */
	--nado-line: #2A2E3D;     /* границы */
	--nado-text: #F2F3F7;     /* основной текст */
	--nado-muted: #9AA1B2;    /* вторичный текст */
}

body {
	font-family: Inter, sans-serif;
	background-color: var(--nado-bg);
	color: var(--nado-text);
}

/* Поверхности */
body .bg-white { background-color: var(--nado-surface) !important; }
body header.bg-white\/95 { background-color: rgba(10, 11, 15, 0.88) !important; }
body .bg-mist { background-color: var(--nado-surface-2) !important; }
body .hover\:bg-mist:hover { background-color: var(--nado-surface-2) !important; }
body .hover\:bg-line:hover { background-color: var(--nado-line) !important; }
body .bg-ink { background-color: var(--nado-deep) !important; }
body .bg-line { background-color: var(--nado-line) !important; }

/* Текст */
body .text-ink, body .text-ink\/90 { color: var(--nado-text) !important; }
body .text-muted { color: var(--nado-muted) !important; }
body .hover\:text-ink:hover { color: var(--nado-text) !important; }

/* Границы */
body .border-line { border-color: var(--nado-line) !important; }
body .divide-line > :not([hidden]) ~ :not([hidden]) { border-color: var(--nado-line) !important; }

/* Формы */
body input, body select, body textarea {
	background-color: var(--nado-surface);
	color: var(--nado-text);
	color-scheme: dark;
}
body input::placeholder, body textarea::placeholder { color: var(--nado-muted); }

/* Сообщения об ошибках на тёмном */
body .bg-red-50 { background-color: rgba(220, 38, 38, 0.12) !important; }
body .border-red-300, body .border-red-200 { border-color: rgba(248, 113, 113, 0.4) !important; }
body .text-red-700, body .text-red-600, body .text-red-500 { color: #F87171 !important; }
body .hover\:bg-red-50:hover { background-color: rgba(220, 38, 38, 0.12) !important; }

/* Тени превращаем в свечение */
body .hover\:shadow-lg:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important; }
body .hover\:shadow-sm:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; }

/* Play-кнопка на обложках остаётся светлой — контраст с изображением */
body .bg-white\/90 { background-color: rgba(255, 255, 255, 0.9) !important; }

/* Пагинация */
body .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--nado-line);
	border-radius: 0.5rem;
	color: var(--nado-muted);
}
body .page-numbers.current { background: var(--nado-text); color: var(--nado-bg); border-color: var(--nado-text); }
body .page-numbers:hover:not(.current) { border-color: #00B67A; color: #00B67A; }

/* Контентная типографика (SEO-тексты, брифы) */
body .prose h2 { font-weight: 700; font-size: 1.15em; margin: 1.4em 0 0.5em; }
body .prose p { margin: 0.6em 0; }
body .prose a { color: #00B67A; }

/* Обрезка текста в карточках. */
.clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Адаптивные oEmbed-видео. */
.kreator-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #16171F;
	border-radius: 0.75rem;
	overflow: hidden;
}
.kreator-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Бегущая строка инструментов в hero. */
.kreator-marquee {
	overflow: hidden;
	white-space: nowrap;
}
.kreator-marquee__track {
	display: inline-block;
	animation: kreator-marquee 30s linear infinite;
}
@keyframes kreator-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.kreator-marquee__track { animation: none; }
}

/* Видимый фокус для клавиатуры. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid #00B67A;
	outline-offset: 2px;
}

/* Alpine: прячем до инициализации. */
[x-cloak] { display: none !important; }