/* ==========================================================================
   theme.css — современный слой оформления Hentaro RU
   Шрифт Golos Text · жидкое стекло · рваные линии · плавные анимации · чипсы
   Подключается ПОСЛЕ styles222.css и engine.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Шрифт — Golos Text (вариативный, кириллица, self-hosted)
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/golos-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/golos-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/golos-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/golos-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Токены дизайн-системы
   -------------------------------------------------------------------------- */

:root {
	/* Поверхности. Нейтральный серый ряд взят из палитры anime-share2
	   (grey.css): #0f0f0f, #202020, #232323, #2b2b2b, #3f3f3f, #454545.
	   Прежние холодные значения — в theme.css.bak-colors. */
	--bg:            #161616;
	--bg-deep:       #0f0f0f;
	--surface:       #232323;
	--surface-2:     #2b2b2b;
	--surface-3:     #3f3f3f;

	/* Стекло */
	--glass:         rgba(69, 69, 69, 0.62);   /* #454545 — основной тон блоков */
	--glass-strong:  rgba(32, 32, 32, 0.86);
	--glass-light:   rgba(255, 255, 255, 0.045);
	--glass-border:  rgba(255, 255, 255, 0.09);
	--glass-hi:      rgba(255, 255, 255, 0.16);
	--blur:          20px;
	--blur-lg:       34px;

	/* Текст */
	--fg:            #eef0f5;
	--fg-muted:      #a8a8a8;   /* было #a2a8b8 — синева не сходилась с серым */
	--fg-dim:        #787878;   /* было #6f7686 */

	/* Акценты */
	--accent:        #ff2f52;
	--accent-2:      #ff6a3d;
	--accent-soft:   rgba(255, 47, 82, 0.14);
	--accent-glow:   rgba(255, 47, 82, 0.42);
	--accent-grad:   linear-gradient(118deg, #ff2f52 0%, #ff5a3c 100%);
	--info:          #4b8dff;
	--ok:            #32c17a;
	--warn:          #ffb020;

	/* Радиусы (шкала VKUI) */
	--r-xs:  6px;
	--r-sm:  10px;
	--r-md:  14px;
	--r-lg:  20px;
	--r-xl:  28px;
	--r-pill: 999px;

	/* Тени */
	--sh-1: 0 1px 2px rgba(0,0,0,.34);
	--sh-2: 0 6px 18px -6px rgba(0,0,0,.55);
	--sh-3: 0 18px 44px -14px rgba(0,0,0,.72);
	--sh-glow: 0 8px 30px -8px var(--accent-glow);

	/* Плавность */
	--e-out:    cubic-bezier(.22,.61,.36,1);
	--e-inout:  cubic-bezier(.65,0,.35,1);
	--e-spring: cubic-bezier(.34,1.56,.64,1);
	--t-fast: .16s;
	--t:      .26s;
	--t-slow: .46s;

	/* Сетка */
	--gap: 16px;
}

/* --------------------------------------------------------------------------
   3. База
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	box-sizing: border-box;
}
*, *::before, *::after {
	box-sizing: inherit;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: var(--fg-muted);
	background: #000 url(../images/bg.jpg) no-repeat center top fixed;
	background-size: cover;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-numeric: tabular-nums;
	overflow-x: hidden;
}

.center {
	width: 100% !important;
	max-width: 1280px;
	min-width: 0 !important;
	margin: 0 auto;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

.block.center {
	background: rgba(22, 22, 22, 0.92);
	border-radius: var(--r-lg, 12px);
	border: 1px solid rgba(255, 255, 255, 0.05);
	margin-top: 12px;
	margin-bottom: 24px;
	padding: 16px 20px !important;
	box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.8);
}

/* Атмосферный фон: наложение для контраста на bg.jpg */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(900px 620px at 12% -6%,  rgba(255,47,82,.08), transparent 62%),
		radial-gradient(760px 560px at 92% 8%,   rgba(75,141,255,.06), transparent 60%),
		linear-gradient(to bottom, rgba(5, 6, 8, 0.72), rgba(7, 8, 11, 0.90));
	pointer-events: none;
}
/* Едва заметное зерно — убирает бандинг на градиентах */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6 {
	color: var(--fg);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.24;
}
h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: 21px; }
h3 { font-size: 18px; }

a { color: var(--fg-muted); transition: color var(--t-fast) var(--e-out); }
a:hover, a:focus { color: var(--fg); }

::selection { background: var(--accent); color: #fff; }

/* Скроллбар */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: var(--surface-3);
	border-radius: var(--r-pill);
	border: 2px solid transparent;
	background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; }

/* Видимый фокус только с клавиатуры */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   4. Утилиты: стекло и рваные края
   -------------------------------------------------------------------------- */

.glass {
	background: var(--glass);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(165%);
	        backdrop-filter: blur(var(--blur)) saturate(165%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--sh-2), inset 0 1px 0 var(--glass-hi);
}
/* Fallback, если backdrop-filter не поддерживается */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass, .top-wr, .side-box, .chip, .vk-select__control { background: var(--glass-strong); }
}

/* Блик «жидкого стекла»: диагональная подсветка, которая едет при наведении */
.glass-sheen { position: relative; overflow: hidden; isolation: isolate; }
.glass-sheen::after {
	content: '';
	position: absolute;
	inset: -60% -120%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.13) 48%, transparent 58%);
	transform: translateX(-70%);
	transition: transform var(--t-slow) var(--e-out);
}
.glass-sheen:hover::after { transform: translateX(70%); }

/* Рваные линии — маска «оторванной бумаги». Используется как разделитель. */
.torn,
.torn-top,
.torn-bottom { position: relative; }

.torn-bottom::after,
.torn-top::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 14px;
	pointer-events: none;
	background: inherit;
	-webkit-mask-repeat: repeat-x;
	        mask-repeat: repeat-x;
	-webkit-mask-size: 190px 14px;
	        mask-size: 190px 14px;
}
.torn-bottom::after {
	bottom: -13px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0h190v3l-9 4 -12-3 -14 6 -11-4 -13 5 -10-6 -15 7 -12-5 -14 4 -9-6 -13 5 -12-3 -11 5 -13-4 -12 3z' fill='%23000'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0h190v3l-9 4 -12-3 -14 6 -11-4 -13 5 -10-6 -15 7 -12-5 -14 4 -9-6 -13 5 -12-3 -11 5 -13-4 -12 3z' fill='%23000'/%3E%3C/svg%3E");
}
.torn-top::before {
	top: -13px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14h190v-3l-9-4 -12 3 -14-6 -11 4 -13-5 -10 6 -15-7 -12 5 -14-4 -9 6 -13-5 -12 3 -11-5 -13 4 -12-3z' fill='%23000'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14h190v-3l-9-4 -12 3 -14-6 -11 4 -13-5 -10 6 -15-7 -12 5 -14-4 -9 6 -13-5 -12 3 -11-5 -13 4 -12-3z' fill='%23000'/%3E%3C/svg%3E");
}

/* Самостоятельный разделитель-разрыв между секциями */
.rip {
	height: 18px;
	margin: 28px 0;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--glass-border) 12%, var(--accent-soft) 50%, var(--glass-border) 88%, transparent);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 18' preserveAspectRatio='none'%3E%3Cpath d='M0 9l11-5 13 6 12-7 14 5 11-6 13 7 12-4 15 6 11-7 13 5 12-6 14 7 11-5 13 6 12-4 13 5v3l-13-2 -12 4 -13-6 -11 5 -14-7 -12 6 -13-5 -11 7 -15-6 -12 4 -13-7 -11 6 -14-5 -12 7 -13-6 -11 5z' fill='%23000'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 18' preserveAspectRatio='none'%3E%3Cpath d='M0 9l11-5 13 6 12-7 14 5 11-6 13 7 12-4 15 6 11-7 13 5 12-6 14 7 11-5 13 6 12-4 13 5v3l-13-2 -12 4 -13-6 -11 5 -14-7 -12 6 -13-5 -11 7 -15-6 -12 4 -13-7 -11 6 -14-5 -12 7 -13-6 -11 5z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 220px 18px;
	        mask-size: 220px 18px;
	-webkit-mask-repeat: repeat-x;
	        mask-repeat: repeat-x;
}

/* --------------------------------------------------------------------------
   5. Шапка
   -------------------------------------------------------------------------- */

/* Отступ под фиксированную шапку. Замерено на стенде: высота шапки 51px,
   старое значение 176px осталось от прежней вёрстки с крупным лого и давало
   ~90px пустоты над контентом. */
.wr { padding-top: 84px; }

.top-wr {
	background: var(--glass-strong);
	-webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%);
	        backdrop-filter: blur(var(--blur-lg)) saturate(180%);
	border-bottom: 1px solid var(--glass-border);
	box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 10px 34px -18px rgba(0,0,0,.9);
	transition: background var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
	will-change: background;
}
.top-wr.is-stuck {
	background: rgba(8, 9, 12, .93);
	box-shadow: 0 14px 40px -20px rgba(0,0,0,1);
}

/* Шапка одной флекс-строкой.
   В styles222 логотип и блок входа позиционированы absolute, а поиск лежит
   в потоке с padding:10px — из-за этого три элемента стояли по трём разным
   вертикальным осям (25 / 30 / 19 px). Переводим ряд на flex: одна ось,
   один вертикальный центр. */
.top {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 56px;
	padding: 0;
}

.logo {
	position: static;
	flex: none;
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
	overflow: visible;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--fg);
	background: none;
	text-indent: 0;
	transition: transform var(--t) var(--e-spring), filter var(--t) var(--e-out);
}
.logo:hover { transform: translateY(-1px) scale(1.02); filter: drop-shadow(0 4px 14px var(--accent-glow)); }
/* Поиск занимает свободное место по центру строки */
.search-wrap {
	flex: 0 1 420px;
	margin-left: auto;
	margin-right: auto;
	width: auto;
}

/* Блок входа — в потоке, у правого края */
.log-buts {
	position: static;
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: normal;
}
.log-buts a { float: none; margin: 0; }

/* Поиск.
   В styles222 кнопка позиционирована absolute внутри .search-box. Я сделал
   контейнер flex — из-за этого кнопка выпадала из потока и наезжала на текст.
   Оставляем исходную схему «относительный контейнер + абсолютная кнопка»
   и просто задаём полю отступ справа под кнопку. */
.search-wrap { position: relative; }
.search-box {
	display: block;
	position: relative;
	width: 100%;
	height: 40px;
	padding: 0;
	border-radius: var(--r-pill);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	-webkit-backdrop-filter: blur(12px);
	        backdrop-filter: blur(12px);
	transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out), background var(--t) var(--e-out);
}
.search-box:focus-within {
	border-color: var(--accent);
	background: rgba(255,255,255,.07);
	box-shadow: 0 0 0 4px var(--accent-soft);
}
.search-box input,
.search-box input:focus {
	display: block;
	width: 100%;
	height: 38px;
	line-height: 38px;
	padding: 0 46px 0 16px;
	background: none;
	border: 0;
	border-radius: var(--r-pill);
	box-shadow: none !important;
	color: var(--fg);
	font: inherit;
	font-size: 14.5px;
}
.search-box input::placeholder { color: var(--fg-dim); }
.search-box button {
	position: absolute;
	top: 50%;
	right: 4px;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border: 0;
	border-left: 0;
	border-radius: var(--r-pill);
	background: var(--accent-grad);
	color: #fff;
	padding: 0;
	line-height: 0;
	font-size: 0;
	transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t) var(--e-out);
}
.search-box button:hover { transform: scale(1.08); box-shadow: var(--sh-glow); }
.search-box button .fa { font-size: 15px; }

/* Кнопки входа */
.log-buts a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 16px;
	border-radius: var(--r-pill);
	font-size: 14px;
	font-weight: 600;
	color: var(--fg-muted);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	transition: all var(--t) var(--e-out);
}
.log-buts a:hover {
	color: var(--fg);
	background: rgba(255,255,255,.09);
	border-color: var(--glass-hi);
	transform: translateY(-1px);
}
.log-buts .reg-link {
	background: var(--accent-grad);
	border-color: transparent;
	color: #fff;
}
.log-buts .reg-link:hover { color: #fff; box-shadow: var(--sh-glow); }

nav {
	max-width: 100%;
	min-width: 0;
}

.first-menu, .second-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	height: auto;
	line-height: normal;
	margin-bottom: 12px;
	max-width: 100%;
	min-width: 0;
}
.first-menu > li, .second-menu > li { display: block; float: none; margin: 0; }
.first-menu li:last-child, .second-menu li:last-child { float: none; }

.first-menu li a,
.second-menu li a {
	display: inline-flex;
	align-items: center;
	/* Отступ иконки от подписи. Пробел в разметке здесь не работает:
	   между flex-элементами он схлопывается и ничего не даёт. */
	gap: 7px;
	height: 36px;
	padding: 0 16px;
	border-radius: var(--r-pill);
	font-size: 14px;
	font-weight: 600;
	color: var(--fg-muted);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	box-shadow: none;
	transition: all var(--t) var(--e-out);
	white-space: nowrap;
}
.first-menu li a:hover,
.second-menu li a:hover {
	color: var(--fg);
	background: rgba(255,255,255,.09);
	border-color: var(--glass-hi);
	transform: translateY(-1px);
}
.first-menu li a.active,
.second-menu li a.active {
	color: #fff;
	background: var(--accent-grad);
	border-color: transparent;
	box-shadow: var(--sh-glow);
}

/* --------------------------------------------------------------------------
   7. Колонки
   -------------------------------------------------------------------------- */

.cols, #cols {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 20px;
	padding: 0 !important;
	background: transparent;
	border: 0;
	border-radius: var(--r-lg);
	margin-bottom: 28px;
	max-width: 100%;
	min-width: 0;
}
/* Оба псевдоэлемента clearfix, а не только ::before.
   .cols — флекс-контейнер, а во флекс-контейнере псевдоэлементы становятся
   полноценными флекс-элементами. ::after с `display: table` от clearfix
   занимал нулевую ширину, но съедал целый gap в 20px, и при row-reverse
   этот отступ вставал у ЛЕВОГО края: боковая колонка не доходила до левой
   границы слайдера ровно на 20px. */
.cols::before, .cols::after,
#cols::before, #cols::after { display: none; }

.col-side {
	width: 320px;
	flex-shrink: 0;
	margin: 0 !important;
	float: none !important;
	padding: 0;
}

.col-cont, .full-comms {
	flex: 1;
	min-width: 0;
	width: auto !important;
	float: none !important;
	background: rgba(32, 32, 32, 0.88);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-hi);
	padding: 0;
}

/* На статических страницах без сайдбара контент занимает 100% */
.col-side:empty {
	display: none;
}

/* Один горизонтальный отступ для всего, что лежит в колонке напрямую */
.col-cont > *,
.col-cont > #dle-content > * {
	padding-left: 20px;
	padding-right: 20px;
}
/* Сетка карточек, календарь и списки сами задают свои отступы */
.col-cont > .main-items,
.col-cont > #dle-content > .main-items { padding-left: 18px; padding-right: 18px; }
.col-cont > .calendar-page,
.col-cont > #dle-content > .calendar-page,
.col-cont > #dle-content > .static-page.calendar-page { padding-left: 0 !important; padding-right: 0 !important; }

.side-box {
	background: rgba(32, 32, 32, 0.88);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2), inset 0 1px 0 var(--glass-hi);
	margin-bottom: 16px;
}
.sb-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fg-dim);
	text-shadow: none;
	background: none;
	border-bottom: 1px solid var(--glass-border);
}
.sb-title::before {
	content: '';
	width: 3px; height: 14px;
	border-radius: var(--r-pill);
	background: var(--accent-grad);
	flex: none;
}
.sb-cont { padding: 12px 14px; }

/* --------------------------------------------------------------------------
   8. ЧИПСЫ — жанры, теги, фильтры (ключевой элемент интерфейса)
   -------------------------------------------------------------------------- */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.chips--scroll {
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: 6px;
	-ms-overflow-style: none;
}
.chips--scroll::-webkit-scrollbar { height: 4px; }
.chips--scroll > * { scroll-snap-align: start; }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	height: 26px;
	padding: 0 10px;
	border-radius: var(--r-pill);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--fg-muted);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	        backdrop-filter: blur(10px) saturate(150%);
	box-shadow: inset 0 1px 0 var(--glass-hi);
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		color var(--t-fast) var(--e-out),
		border-color var(--t) var(--e-out),
		background var(--t) var(--e-out),
		transform var(--t) var(--e-spring),
		box-shadow var(--t) var(--e-out);
}
/* Заливка-подсветка растекается от центра при наведении */
.chip::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--accent-grad);
	opacity: 0;
	transform: scale(.6);
	transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.chip:hover {
	color: #fff;
	border-color: transparent;
	transform: translateY(-2px);
	box-shadow: var(--sh-glow);
}
.chip:hover::before { opacity: 1; transform: scale(1); }
.chip:active { transform: translateY(0) scale(.97); }

.chip.is-active,
.chip[aria-pressed="true"] {
	color: #fff;
	border-color: transparent;
	box-shadow: var(--sh-glow);
}
.chip.is-active::before,
.chip[aria-pressed="true"]::before { opacity: 1; transform: scale(1); }

/* Счётчик внутри чипсы */
.chip__count {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: var(--r-pill);
	background: rgba(255,255,255,.1);
	color: inherit;
	line-height: 1;
}
.chip:hover .chip__count,
.chip.is-active .chip__count { background: rgba(0,0,0,.22); }

/* Варианты */
.chip--accent { color: #fff; border-color: transparent; }
.chip--accent::before { opacity: 1; transform: scale(1); }
.chip--ghost  { background: transparent; }
.chip--lg { height: 32px; padding: 0 14px; font-size: 13px; }
.chip--sm { height: 22px; padding: 0 8px; font-size: 11px; }

/* Кнопка «ещё» в списке чипсов */
.chips__more {
	background: transparent;
	border-style: dashed;
	color: var(--fg-dim);
}

/* Свёрнутый список жанров: показываем первые N, остальное — по клику */
.chips.is-collapsed > li:nth-child(n+21),
.chips.is-collapsed > a:nth-child(n+21) { display: none; }

/* Старое меню жанров приводим к чипсам без правки разметки.
   В styles222 списки жанров делили сайдбар на колонки 65% / 35% через float —
   от этого чипсы шли двумя рваными столбиками. Сбрасываем ширины: список
   занимает всю ширину блока и переносится сам. */
.genres-menu,
.main-menu.chips {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 5px;
	width: 100% !important;
	float: none !important;
	padding-right: 0 !important;
	margin: 0 0 12px;
}
/* flex:1 1 auto — чипсы растягиваются и ряд заполняется от края до края,
   без рваного правого поля. Ширина остаётся пропорциональной длине названия. */
.genres-menu > li,
.main-menu.chips > li {
	display: flex;
	flex: 1 1 auto;
	float: none;
	width: auto;
	height: auto;
	line-height: normal;
	margin: 0;
	border: 0;
}
.genres-menu > li.mm-subtitle,
.main-menu.chips > li.mm-subtitle {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	margin: 2px 0 4px;
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fg-dim);
}
.genres-menu > li + .mm-subtitle,
.main-menu.chips > li + .mm-subtitle { margin-top: 12px; }

/* Компактная чипса: 26px вместо 32px, мельче кегль, плотнее набор */
.genres-menu > li > a,
.main-menu.chips > li > a {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 26px;
	padding: 0 10px;
	border-radius: var(--r-pill);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	float: none;
	text-decoration: none;
	color: var(--fg-muted);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	transition: color var(--t-fast) var(--e-out), background var(--t) var(--e-out),
	            border-color var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.genres-menu > li > a:hover,
.main-menu.chips > li > a:hover {
	color: #fff;
	background: var(--accent-grad);
	border-color: transparent;
	transform: translateY(-1px);
	box-shadow: var(--sh-glow);
}
/* В разметке остались <font color> — цвет берём из чипсы */
.genres-menu font, .main-menu.chips font { color: inherit !important; }

/* Кнопка «Ещё N» в том же размере */
.chips__more { flex: 1 1 auto; height: 26px; padding: 0 10px; font-size: 12px; justify-content: center; }

/* Значения xfield-полей как чипсы.
   DLE рендерит поисковые доп. поля как <a href="/xfsearch/…">Value</a>, поэтому
   достаточно оформить вложенные ссылки — разметку менять не нужно. */
.xf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
	margin: 12px 0;
	font-size: 13px;
}
/* Разделители-запятые между значениями убирает JS (см. app.js).
   Без JS остаётся обычное перечисление «Жанр, Жанр» — тоже читаемо,
   поэтому font-size:0 здесь сознательно НЕ используется: если поле
   не помечено как поисковое, DLE выведет простой текст без ссылок,
   и он бы стал невидимым. */
.xf-chips a {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border-radius: var(--r-pill);
	font-size: 12px;
	line-height: 1;
	font-weight: 600;
	white-space: nowrap;
	color: var(--fg-muted);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
	text-decoration: none;
	transition: all var(--t) var(--e-out);
}
.xf-chips a:hover {
	color: #fff;
	background: var(--accent-grad);
	border-color: transparent;
	transform: translateY(-2px);
	box-shadow: var(--sh-glow);
}
/* Текстовые узлы между ссылками (запятые/пробелы) схлопываем в 0 */
.xf-chips br { display: none; }

/* Блок с заголовком внутри полной новости */
.xf-block { margin: 22px 0; }
/* Компактный вариант: подпись и чипсы в одну строку — для студии и режиссёра,
   где значений обычно одно-два и целый блок под них избыточен. */
.xf-block--inline {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 10px 0;
}
.xf-block--inline .xf-block__title { margin-bottom: 0; flex: none; }
.xf-block--inline .xf-chips { margin: 0; }
.xf-block__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--fg-dim);
	margin-bottom: 10px;
}
h2.xf-block__title { font-size: 15px; text-transform: none; letter-spacing: -0.01em; color: var(--fg); }

/* Панель над списком материалов */
.list-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 18px;
	border-bottom: 1px solid var(--glass-border);
}
.list-sort { flex: 1 1 auto; min-width: 0; }

/* Шапка страницы xfsearch (yummyfields) */
.xf-head {
	padding: 18px 18px 0;
}
.xf-head h1, .xf-head h2 { font-size: 24px; margin-bottom: 8px; }
.xf-head p { color: var(--fg-muted); font-size: 14.5px; }

/* Кнопка скачивания и статистика в полной новости */
.dl-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 14px 0;
}
.dl-hint { font-size: 13px; color: var(--fg-dim); }
.stats-line { font-size: 14px; }
.story-foot { margin-top: 16px; }
.seo-data { display: none !important; }

/* Доступность: подпись только для скринридеров */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   9. Селекторы в стиле VKUI и горизонтальный подбор (над пагинацией)
   -------------------------------------------------------------------------- */

.vk-select { position: relative; display: block; width: 100%; margin-bottom: 10px; }
.vk-select > select,
select.sorting-data {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	width: 100%;
	height: 44px;
	padding: 0 42px 0 15px;
	border-radius: var(--r-md);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--fg);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	-webkit-backdrop-filter: blur(12px);
	        backdrop-filter: blur(12px);
	box-shadow: inset 0 1px 0 var(--glass-hi);
	cursor: pointer;
	transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out), background var(--t) var(--e-out);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2a8b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
}
select.sorting-data:hover { background-color: rgba(255,255,255,.08); border-color: var(--glass-hi); }
select.sorting-data:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-soft);
}
select.sorting-data option {
	background: var(--surface-2);
	color: var(--fg);
	padding: 8px;
}

/* Горизонтальная панель подбора над пагинацией */
.filter-horizontal-bar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	margin: 28px 0 12px;
	background: var(--glass);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
	        backdrop-filter: blur(var(--blur)) saturate(150%);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2), inset 0 1px 0 var(--glass-hi);
	box-sizing: border-box;
	width: 100%;
}

.fh-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--fg);
	white-space: nowrap;
	flex-shrink: 0;
}

.fh-title .fa {
	color: var(--accent);
	font-size: 16px;
}

.fh-selects {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.filter-horizontal-bar .vk-select {
	margin-bottom: 0;
	width: 100%;
}

.filter-horizontal-bar select.sorting-data {
	height: 40px;
	padding: 0 36px 0 14px;
	font-size: 13.5px;
	border-radius: var(--r-pill);
	background-color: var(--glass-light);
	background-position: right 12px center;
	background-size: 16px 16px;
}

.filter-horizontal-bar select.sorting-data:hover {
	border-color: var(--glass-hi);
	background-color: rgba(255, 255, 255, .09);
}

.filter-horizontal-bar select.sorting-data:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Если navigation.tpl дублируется DLE вверху списка (news_navigation=3),
   скрываем блок фильтров в верхней навигации, оставляя его только над нижней пагинацией */
#dle-content > .filter-horizontal-bar:first-child {
	display: none;
}

@media (max-width: 992px) {
	.fh-selects {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.filter-horizontal-bar {
		flex-direction: column;
		align-items: stretch;
		padding: 12px;
		gap: 10px;
	}

	.fh-title {
		justify-content: flex-start;
	}

	.fh-selects {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* Заголовки-обёртки вокруг селекторов в сайдбаре не должны выглядеть как заголовки */
.col-side .kino-h-sub {
	margin: 0 0 10px;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	text-align: left;
}
.col-side .kino-h-sub strong { font-weight: inherit; }

/* --------------------------------------------------------------------------
   10. Карточки материалов
   -------------------------------------------------------------------------- */

.kino-item {
	border-top: 0;
	margin: 0;
	background: none;
	transition: transform var(--t) var(--e-out);
}

.kino-h h2, .kino-h {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--fg);
	transition: color var(--t-fast) var(--e-out);
}

/* Заголовок плитки занимает РОВНО две строки — и когда строка одна тоже.
   Иначе однострочные названия поднимают постер на 19px, и ряд карточек
   выглядит рваным: сами карточки одной высоты, а обложки в них съезжают.
   Высота в em, а не в px: при смене размера шрифта считать заново
   не придётся. */
.kino-title .kino-h,
.kino-title .kino-h h2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.25;
	height: 2.5em;          /* 2 строки × 1.25 */
	margin: 0;
}
a.kino-h:hover h2 { color: var(--accent); }

.kino-img, .side-movie-img, .skoro-img, .rel-kino-img, .kino-desc img {
	border-radius: var(--r-md);
	border: 1px solid var(--glass-border);
	background: var(--surface-2);
	overflow: hidden;
}
.kino-img img, .side-movie-img img, .rel-kino-img img {
	transition: transform var(--t-slow) var(--e-out), filter var(--t) var(--e-out);
	will-change: transform;
}
.kino-item:hover .kino-img img,
.side-movie:hover .side-movie-img img,
.rel-kino:hover .rel-kino-img img { transform: scale(1.055); }

/* Оверлей воспроизведения */
.carou-inner {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	background: linear-gradient(to top, rgba(6,7,10,.86) 0%, rgba(6,7,10,.16) 55%, transparent 100%);
	-webkit-backdrop-filter: blur(1.5px);
	        backdrop-filter: blur(1.5px);
	transition: opacity var(--t) var(--e-out);
	color: #fff;
	font-size: 44px;
	z-index: 5;
}
.kino-img:hover .carou-inner,
.carou:hover .carou-inner,
.kino-item:hover .carou-inner { opacity: 1; }
.carou-inner .fa {
	transform: scale(.82);
	transition: transform var(--t) var(--e-spring);
	filter: drop-shadow(0 6px 20px rgba(0,0,0,.7));
}
.kino-img:hover .carou-inner .fa,
.carou:hover .carou-inner .fa { transform: scale(1); }

/* Плашка качества/категории.
   Геометрия как в оригинале: полоса во всю ширину по нижнему краю постера.
   Раньше я сделал из неё пилюлю в углу — она вылезала за карточку и «стояла
   криво», потому что оригинальная ширина 100% считалась от другого предка. */
.k-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 6px 10px;
	border: 0;
	border-radius: 0;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: linear-gradient(to top, rgba(6,7,10,.94) 0%, rgba(6,7,10,.72) 55%, transparent 100%);
	-webkit-backdrop-filter: blur(8px) saturate(150%);
	        backdrop-filter: blur(8px) saturate(150%);
	box-shadow: none;
}
/* Акцентная подложка, как красная полоса в оригинале, но мягче */
.k-meta::before {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: var(--accent-grad);
}
.qual-mark { top: auto; }
/* Плашка «серия» остаётся уголком сверху справа */
.series-mark {
	top: 8px; right: 8px; left: auto; bottom: auto;
	min-height: 0;
	border-radius: var(--r-pill);
	background: rgba(15,15,15,.78);
	padding: 3px 9px;
	font-size: 11px;
}
.series-mark::before { display: none; }

/* Строки характеристик */
.kino-lines li {
	/* Грид, а не флекс: при флексе длинное значение (английское название)
	   переносило пару целиком, и подписи переставали стоять в одну колонку.
	   Теперь ширина колонки подписей фиксирована, значение всегда начинается
	   на одном и том же x и переносится внутри своей колонки. */
	display: grid;
	grid-template-columns: 172px minmax(0, 1fr);
	gap: 2px 12px;
	align-items: baseline;
	font-size: 14px;
	line-height: 1.45;
	padding: 3px 0;
	border-bottom: 1px dashed rgba(255,255,255,.055);
}
.kino-lines li:last-child { border-bottom: 0; }
.kino-lines .k-label {
	/* ширину задаёт колонка грида, собственный min-width только мешал бы */
	min-width: 0;
	color: var(--fg-dim);
	font-size: 13px;
}
.kino-lines .k-label strong { font-weight: 600; }
.kino-lines a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.kino-lines a:hover { color: var(--accent-2); border-bottom-color: currentColor; }
.kino-lines span {
	/* Раньше это была «пилюля» с подложкой и скруглением. В гриде такой
	   span становится элементом сетки, блокируется и растягивается на всю
	   колонку — получалась широкая кнопка с обводкой во всю строку.
	   Оставляем только цвет: значение выделено, лишней рамки нет. */
	float: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: inherit;
	font-weight: 600;
	color: var(--accent);
	justify-self: start;
}
/* Ни одно значение не должно растягиваться на всю колонку */
.kino-lines li > *:not(.k-label) { justify-self: start; }

/* Кнопка «Смотреть» */
.k-link, .btn-error a, .btn-error {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 42px;
	padding: 0 22px;
	border-radius: var(--r-pill);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: var(--accent-grad);
	border: 0;
	box-shadow: var(--sh-glow);
	cursor: pointer;
	line-height: 1;
	transition: transform var(--t) var(--e-spring), box-shadow var(--t) var(--e-out), filter var(--t) var(--e-out);
}
.k-link:hover, .btn-error a:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 38px -10px var(--accent-glow);
	filter: brightness(1.06);
}
.k-link:active { transform: translateY(0) scale(.98); }
.k-link i, .k-link .fa { color: inherit; margin: 0; }

/* Панель действий в карточке: кнопка плейлиста и «редактировать».
   В styles222 у .kino-info стоит position:absolute с padding-right:50px,
   а у .k-edit — свой absolute right:50px. Из-за этого кнопка плейлиста
   и админская шестерёнка накладывались друг на друга. Выстраиваем в ряд. */
.kino-info {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-right: 0;
}
.kino-info .k-edit {
	position: static;
	right: auto;
	top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-size: 15px;
	border-radius: var(--r-pill);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	color: var(--fg-muted);
	transition: all var(--t) var(--e-out);
}
.kino-info .k-edit:hover { color: #fff; background: var(--accent-grad); border-color: transparent; }
.kino-info .k-edit a { display: grid; place-items: center; width: 100%; height: 100%; color: inherit; }

/* Избранное */
.k-fav {
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: var(--r-pill);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	color: var(--fg-muted);
	cursor: pointer;
	transition: all var(--t) var(--e-spring);
}
.k-fav:hover { color: var(--warn); border-color: var(--warn); transform: scale(1.1); }
.k-fav-added { color: var(--warn); border-color: rgba(255,176,32,.4); background: rgba(255,176,32,.12); }

/* Дата */
.kino-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--fg-dim);
}

/* Сетка плиток */
.grid-thumb { border-top: 0; padding: 18px 0; margin: 0; }
/* Важно: DLE оборачивает {content} в <div id="dle-content">, поэтому карточки
   лежат не прямыми детьми #grid, а внутри обёртки. Объявляем сетку на обоих
   уровнях — тогда раскладка верна и с обёрткой (обычные страницы), и без неё
   (карточки, добавленные AJAX-ом напрямую в #grid). */
.grid-thumb .main-items,
.main-items.grid-thumb,
.main-items.grid-thumb > #dle-content {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	grid-auto-flow: row dense;
	gap: 26px 18px;
}
/* Обёртка растягивается на всю ширину внешней сетки */
.main-items.grid-thumb > #dle-content { grid-column: 1 / -1; }

/* Скрываем script и style теги от сетки Grid */
.main-items.grid-thumb script,
.main-items.grid-thumb style,
.main-items.grid-thumb > #dle-content script,
.main-items.grid-thumb > #dle-content style {
	display: none !important;
}

/* DLE кладёт внутрь #dle-content не только карточки: там же .pagi-nav
   с постраничной навигацией, блок {info} и служебные сообщения, а также
   рекламные блоки и баннеры DLE. Все они занимают ряд целиком. */
.main-items.grid-thumb > #dle-content > *:not(.kino-item):not(script):not(style),
.main-items.grid-thumb > *:not(.kino-item):not(#dle-content):not(script):not(style),
.main-items.grid-thumb ins,
.main-items.grid-thumb center,
.main-items.grid-thumb [class*="eas"],
.main-items.grid-thumb [data-zoneid] {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 6px 0 !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}
.main-items.grid-thumb .kino-item {
	width: auto;
	float: none;
	margin: 0;
	/* Снизу резервируем место под рейтинг: в styles222 у .grid-thumb
	   .kino-info стоит `position:absolute; top:100%`, то есть звёзды
	   висят ПОД карточкой вне её потока и наезжали на следующий ряд. */
	padding: 0 0 26px;
	position: relative;
	transition: transform var(--t) var(--e-out);
}
/* Рейтинг в плитке — по центру отведённой полосы, без наложений */
.main-items.grid-thumb .kino-info {
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	width: auto;
	margin: 0;
	padding: 0;
	height: 22px;
	justify-content: center;
	gap: 6px;
}
.main-items.grid-thumb .k-rate { line-height: 1; }
.main-items.grid-thumb .kino-item:hover { transform: translateY(-4px); }
.main-items.grid-thumb .kino-img { height: auto; aspect-ratio: 2 / 3; width: 100%; margin: 0; }
.main-items.grid-thumb .kino-img img { height: 100%; object-fit: cover; }
.main-items.grid-thumb .kino-h h2 {
	font-size: 14.5px;
	height: auto;
	line-height: 1.35;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Переключатель вида */
.grid-select {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: var(--r-pill);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
}
.grid-select span {
	width: 34px; height: 30px;
	display: grid; place-items: center;
	border-radius: var(--r-pill);
	color: var(--fg-dim);
	cursor: pointer;
	background: none;
	transition: all var(--t) var(--e-out);
}
.grid-select span:hover { color: var(--fg); background: rgba(255,255,255,.07); }
.grid-select span.current { color: #fff; background: var(--accent-grad); box-shadow: var(--sh-1); }

/* --------------------------------------------------------------------------
   11. Полная новость
   -------------------------------------------------------------------------- */

.kino-title-full {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 12px;
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--glass-border);
}
.kino-title-full h1.kino-h {
	flex: 1 1 320px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.028em;
	line-height: 1.2;
	background: linear-gradient(96deg, #fff 20%, #cfd4e2 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* В styles222 у .kino-text висит float:right + padding-left:20px — это было
   нужно для старой раскладки «постер слева, текст справа» в списке. В полной
   новости из-за него внутренние блоки съезжали на 20px относительно остальных
   (заголовок и плеер стояли по разным левым краям). Отступ теперь один — от
   колонки. */
.kino-inner-full .kino-text {
	float: none;
	width: 100%;
	padding: 0 0 24px 0;
}
.kino-inner-full > .kino-text > * { margin-left: 0; margin-right: 0; }

.story-poster {
	float: left;
	margin: 0 20px 14px 0;
	max-width: 240px;
}
.story-poster img {
	display: block;
	width: 100%;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-3);
}

.kino-h-sub {
	padding: 14px 18px;
	margin: 22px 0;
	border-radius: var(--r-md);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	font-size: 15px;
	font-weight: 600;
	color: var(--fg-muted);
	text-align: left;
	box-shadow: inset 0 1px 0 var(--glass-hi);
}
.kino-h-sub b { color: var(--fg); }

/* Плеер (перенесено из gemini-code-*.css, чтобы убрать лишний запрос) */
.apijav-player-container, .player-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-bottom: 20px;
	border-radius: var(--r-lg);
	border: 1px solid var(--glass-border);
	box-shadow: var(--sh-3);
	background: #000;
}
.apijav-player-container iframe, .player-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.apijav-loader, .apijav-no-player {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.apijav-loader { color: var(--fg-dim); font-size: 14px; }
.apijav-loader::after {
	content: '';
	display: block;
	width: 26px; height: 26px;
	margin: 12px auto 0;
	border-radius: 50%;
	border: 2.5px solid var(--glass-border);
	border-top-color: var(--accent);
	animation: fa-spin .9s linear infinite;
}

/* Заглушка «нажмите, чтобы показать видео».
   Перенесено из js/offline2.css — тот файл подключался <link>-ом из середины
   <body> (невалидно) и ссылался на картинку чужого шаблона anime-share2,
   которой нет. Кнопка теперь рисуется инлайновым SVG. */
.click-for-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 520px;
	cursor: pointer;
	border-radius: var(--r-lg);
	border: 1px solid var(--glass-border);
	background:
		radial-gradient(60% 60% at 50% 50%, rgba(255,47,82,.16), transparent 70%),
		var(--surface-2);
	box-shadow: var(--sh-2);
	overflow: hidden;
	transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.click-for-video::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 84px; height: 84px;
	margin: -42px 0 0 -42px;
	border-radius: 50%;
	background: var(--accent-grad) no-repeat center;
	box-shadow: var(--sh-glow);
	-webkit-mask: none;
	        mask: none;
	transition: transform var(--t) var(--e-spring);
}
.click-for-video::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 28px; height: 28px;
	margin: -14px 0 0 -10px;
	z-index: 2;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4.5v15l14-7.5z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4.5v15l14-7.5z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--t) var(--e-spring);
}
.click-for-video:hover { border-color: var(--glass-hi); box-shadow: var(--sh-3); }
.click-for-video:hover::after,
.click-for-video:hover::before { transform: scale(1.09); }

.youtube { width: 100%; }
div.youtube { display: none; }
div.youtube iframe, div.youtube video, div.youtube embed {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--r-lg);
}

/* Панель серий — те же чипсы */
#episodes-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
#episodes-bar button {
	height: 34px;
	padding: 0 15px;
	border-radius: var(--r-pill);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--fg-muted);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	cursor: pointer;
	transition: all var(--t) var(--e-out);
}
#episodes-bar button:hover { color: var(--fg); border-color: var(--glass-hi); transform: translateY(-1px); }
#episodes-bar button.is-active {
	color: #fff;
	background: var(--accent-grad);
	border-color: transparent;
	box-shadow: var(--sh-glow);
}

/* Вкладки */
.tabs {
	display: flex;
	align-items: center;
	gap: 8px;
	height: auto;
	line-height: normal;
	border: 0;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.tabs li {
	float: none;
	height: 38px;
	display: inline-flex;
	align-items: center;
	padding: 0 18px;
	border-radius: var(--r-pill);
	font-size: 14px;
	font-weight: 600;
	color: var(--fg-muted);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	cursor: pointer;
	transition: all var(--t) var(--e-out);
}
.tabs li:hover { color: var(--fg); border-color: var(--glass-hi); }
.tabs li.current {
	color: #fff;
	background: var(--accent-grad);
	border-color: transparent;
	box-shadow: var(--sh-glow);
}

/* Скриншоты */
.screens { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.screens img, .screens a {
	border-radius: var(--r-sm);
	overflow: hidden;
	transition: transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.screens a:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--sh-3); z-index: 2; }

/* Похожее */
.kino-related { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--glass-border); }
.rel-kino-title, .side-movie-title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--fg-muted);
	margin-top: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rel-kino:hover .rel-kino-title, .side-movie:hover .side-movie-title { color: var(--fg); }

/* --------------------------------------------------------------------------
   11б. Нижний SEO-блок
   -------------------------------------------------------------------------- */

.site-desc {
	background: var(--glass);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
	        backdrop-filter: blur(var(--blur)) saturate(150%);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2), inset 0 1px 0 var(--glass-hi);
	padding: 28px;
	margin-bottom: 24px;
	font-size: 15px;
	line-height: 1.7;
}
.site-desc h1 { font-size: 27px; margin-bottom: 16px; }
.site-desc h1 span {
	background: var(--accent-grad);
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
}
.site-desc h2 {
	font-size: 19px;
	margin: 26px 0 12px;
	padding-top: 20px;
	position: relative;
}
/* Рваная линия-разделитель перед каждым подзаголовком */
.site-desc h2::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 8px;
	background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4l9-3 11 4 10-4 12 3 9-4 13 4 10-3 12 4 9-4 11 3 10-4 12 4 9-3 13 3v2l-13-1 -9 2 -12-3 -10 3 -11-2 -9 3 -12-3 -10 2 -13-3 -9 3 -12-2 -10 3 -11-3 -9 2z' fill='%23000'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4l9-3 11 4 10-4 12 3 9-4 13 4 10-3 12 4 9-4 11 3 10-4 12 4 9-3 13 3v2l-13-1 -9 2 -12-3 -10 3 -11-2 -9 3 -12-3 -10 2 -13-3 -9 3 -12-2 -10 3 -11-3 -9 2z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 160px 8px;
	        mask-size: 160px 8px;
	-webkit-mask-repeat: repeat-x;
	        mask-repeat: repeat-x;
}
.site-desc p { margin-bottom: 12px; }
.site-desc strong { color: var(--fg); font-weight: 700; }
.site-desc a { color: var(--accent); }
.site-desc a:hover { color: var(--accent-2); }

.seo-list { margin: 0 0 14px; padding: 0; list-style: none; }
.seo-list li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 7px;
}
.seo-list li::before {
	content: '';
	position: absolute;
	left: 4px; top: .68em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent-glow);
}
.seo-chips { margin: 0 0 16px; }
.seo-chips li { list-style: none; }

.age-note {
	padding: 12px 16px;
	border-radius: var(--r-md);
	background: rgba(255,176,32,.08);
	border: 1px solid rgba(255,176,32,.24);
	color: var(--warn);
	font-size: 14px;
}

/* FAQ */
.faq { display: grid; gap: 8px; margin-bottom: 14px; }
.faq-item {
	border-radius: var(--r-md);
	border: 1px solid var(--glass-border);
	background: var(--glass-light);
	overflow: hidden;
	transition: border-color var(--t) var(--e-out), background var(--t) var(--e-out);
}
.faq-item[open] { border-color: var(--glass-hi); background: rgba(255,255,255,.06); }
.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 16px;
	font-weight: 600;
	color: var(--fg);
	cursor: pointer;
	list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: '';
	flex: none;
	width: 18px; height: 18px;
	background-color: var(--fg-dim);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 100% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 100% no-repeat;
	transition: transform var(--t) var(--e-spring);
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item > p { padding: 0 16px 14px; margin: 0; color: var(--fg-muted); }


/* Полная новость: один левый край для всех блоков.
   Карусель похожих и секция плеера раньше выбивались из общей сетки. */
#kino-page .player-section,
#kino-page .kino-related,
#kino-page .kino-h-sub,
#kino-page .screens,
#kino-page .xf-block { margin-left: 0; margin-right: 0; }
#kino-page .k-rel-box { padding: 0; }
#kino-page #owl-rel { margin: 0; }
.rel-kino { margin: 0 8px; max-width: none; }

/* --------------------------------------------------------------------------
   12. Подвал
   -------------------------------------------------------------------------- */

.bottom {
	background: var(--glass);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
	        backdrop-filter: blur(var(--blur)) saturate(150%);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-lg);
	padding: 24px;
	margin-bottom: 28px;
	box-shadow: var(--sh-2);
}
.bot-menu { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
.bot-menu li { float: none; }
/* «Правообладателям» и счётчик живут пунктами .bot-menu.
   Раньше ссылка была отдельным блоком под списком: как блочный элемент
   она растягивалась во всю ширину футера и получала фон от общего
   правила наведения из styles222.css — выходила огромная полоса. */
.pravo-link { font-size: 13px; color: var(--fg-dim); }
.bot-menu .pravo-link,
.bot-menu .pravo-link:hover {
	display: inline;
	width: auto;
	padding: 0;
	background: none;
	border: 0;
}

/* Счётчик — в один ряд с пунктами, по центру строки */
.bot-menu .bot-counter { display: inline-flex; align-items: center; }
.bot-menu .bot-counter::before { display: none; }   /* без разделителя-точки */
.bot-menu .bot-counter img { display: block; opacity: .5; transition: opacity var(--t-fast); }
.bot-menu .bot-counter a:hover img { opacity: 1; }
.pravo-link:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   13. Формы, кнопки, служебные элементы DLE
   -------------------------------------------------------------------------- */

input[type="text"], input[type="password"], input[type="email"], input[type="search"],
input[type="url"], input[type="number"], textarea, select {
	font-family: inherit;
	color: var(--fg);
}
.f-input, input.f-input, textarea.f-input {
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-sm);
	padding: 10px 14px;
	transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.f-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

button:not(.color-btn), input[type="submit"], input[type="button"], input[type="reset"] {
	font-family: inherit;
	font-weight: 600;
	border-radius: var(--r-sm);
	transition: transform var(--t-fast) var(--e-out), filter var(--t) var(--e-out);
}
input[type="submit"]:hover, input[type="button"]:hover { filter: brightness(1.08); }

input.bbcodes, input[type="submit"].bbcodes, input[type="button"].bbcodes, .ui-button {
	background-color: var(--accent) !important;
	border-radius: var(--r-sm) !important;
	color: #fff;
}

/* Постраничная навигация.
   DLE 10.3 отдаёт плоский список: <span>1</span><a>2</a>…<span class="nav_ext">…</span>,
   а рядом отдельные блоки .pprev / .pnext. Правила из engine.css (inline-block,
   padding 0 5px, свои фоны) перебиваем целиком, иначе кнопки разной высоты
   и разъезжаются. */
/* ==========================================================================
   Постраничная навигация (Liquid Glass Chips)
   ========================================================================== */

.pagi-nav {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 12px;
	margin: 14px 0;
	background: transparent !important;
	border: 0 !important;
	text-align: center;
	line-height: normal;
	box-shadow: none !important;
}

/* Сброс базовых спанов-обёрток DLE */
.pagi-nav > span.pprev,
.pagi-nav > span.pnext,
.pagi-nav > span.navigation {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
}

/* Все интерактивные чипсы пагинации */
.navigation a,
.navigation > span:not(.nav_ext),
.navigation .thisclass,
.pprev a,
.pnext a,
.pprev > span,
.pnext > span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 34px !important;
	min-width: 34px !important;
	padding: 0 12px !important;
	margin: 0 !important;
	border-radius: var(--r-pill) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	color: var(--fg-muted) !important;
	background: var(--surface-2) !important;
	-webkit-backdrop-filter: blur(14px) saturate(160%) !important;
	        backdrop-filter: blur(14px) saturate(160%) !important;
	border: 1px solid var(--glass-border) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 var(--glass-hi) !important;
	transition: all var(--t-fast) var(--e-out) !important;
	cursor: pointer;
	box-sizing: border-box !important;
}

/* Чипсы с номерами страниц */
.navigation a,
.navigation > span:not(.nav_ext) {
	min-width: 34px !important;
	padding: 0 9px !important;
}

/* Кнопки «Назад» и «Вперед» */
.pprev a,
.pnext a,
.pprev > span,
.pnext > span {
	padding: 0 16px !important;
	font-size: 12.5px !important;
}

/* Наведение на кликабельные чипсы */
.navigation a:hover,
.pprev a:hover,
.pnext a:hover {
	color: #fff !important;
	background: var(--surface-3) !important;
	border-color: var(--accent) !important;
	box-shadow: 0 4px 14px -2px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
	transform: translateY(-1px) !important;
}

/* Активная страница (Текущая чипса) */
.navigation > span:not(.nav_ext),
.navigation .thisclass {
	color: #fff !important;
	background: var(--accent-grad) !important;
	border-color: transparent !important;
	box-shadow: var(--sh-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
	cursor: default !important;
	transform: scale(1.04) !important;
}

/* Неактивные Назад / Вперед */
.pprev > span:not(a),
.pnext > span:not(a) {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	background: var(--glass-light) !important;
	border-color: var(--glass-border) !important;
	box-shadow: none !important;
}

/* Разделитель многоточие (...) */
.navigation span.nav_ext,
.pagi-nav span.nav_ext {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--fg-dim) !important;
	min-width: 18px !important;
	padding: 0 2px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
}

/* Комментарии */
.comment-item, .icomm-item {
	border-radius: var(--r-md);
	border: 1px solid var(--glass-border);
	background: var(--glass-light);
	padding: 14px;
	margin-bottom: 12px;
	transition: border-color var(--t) var(--e-out);
}
.comment-item:hover { border-color: var(--glass-hi); }

/* --------------------------------------------------------------------------
   14. Анимации появления
   -------------------------------------------------------------------------- */

@keyframes rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { to { background-position: 200% 0; } }

/* Элементы, помеченные JS-ом при попадании во вьюпорт.
   Намеренно на transition, а не на animation: скрытое состояние задаётся
   только селектором :not(.is-in). Как только JS добавит .is-in, элемент виден
   независимо от того, отработала анимация или нет — контент не может
   «залипнуть» на opacity:0 (у animation с fill-mode такой риск есть). */
.js .reveal {
	transition: opacity .5s var(--e-out), transform .5s var(--e-out);
}
.js .reveal:not(.is-in) {
	opacity: 0;
	transform: translateY(14px);
}

/* Скелетон для AJAX-подгрузки */
.skeleton {
	border-radius: var(--r-md);
	background: linear-gradient(100deg, var(--surface-2) 8%, var(--surface-3) 20%, var(--surface-2) 33%);
	background-size: 200% 100%;
	animation: shimmer 1.3s linear infinite;
}
.skeleton-card { aspect-ratio: 2 / 3; }

/* --------------------------------------------------------------------------
   15. AJAX: «Показать ещё», подсказки поиска, наверх
   -------------------------------------------------------------------------- */

.load-more-wrap { display: flex; justify-content: center; padding: 24px 0 8px; }
.load-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 30px;
	border-radius: var(--r-pill);
	font-size: 15px;
	font-weight: 700;
	color: var(--fg);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	-webkit-backdrop-filter: blur(14px);
	        backdrop-filter: blur(14px);
	cursor: pointer;
	transition: all var(--t) var(--e-out);
}
.load-more:hover { color: #fff; background: var(--accent-grad); border-color: transparent; box-shadow: var(--sh-glow); transform: translateY(-2px); }
.load-more[disabled] { opacity: .5; cursor: default; transform: none; }
.load-more.is-busy .fa { animation: fa-spin .9s linear infinite; }

/* Живой поиск */
#searchsuggestions,
.qs-drop {
	position: absolute;
	left: 0; right: 0;
	top: calc(100% + 8px);
	z-index: 900;
	max-height: 62vh;
	overflow-y: auto;
	padding: 6px;
	border-radius: var(--r-md);
	background: var(--glass-strong);
	-webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%);
	        backdrop-filter: blur(var(--blur-lg)) saturate(180%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--sh-3);
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-out);
}
#searchsuggestions[style*="block"],
.qs-drop.is-open { opacity: 1; transform: none; pointer-events: auto; }
/* DLE управляет своей выпадашкой через inline display, а не классом —
   поэтому для неё сбрасываем анимационные свойства в «видимо». */
/* Позицию и ширину подсказок DLE выставляет инлайном сам — свои
   left/right/top тут не навязываем, иначе выпадашка разъедется. */
#searchsuggestions {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	right: auto;
	max-height: 62vh;
}
/* Разметку выдачи формирует сам DLE (engine/ajax/search.php):
   <a><span class="searchheading">Заголовок</span><span>Описание</span></a>
   плюс .notfound и .seperator. Оформляем именно её. */
#searchsuggestions > a,
.qs-drop > a,
.qs-item {
	display: block;
	padding: 9px 10px;
	border-radius: var(--r-sm);
	color: var(--fg-muted);
	text-decoration: none;
	transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
#searchsuggestions > a:hover,
.qs-drop > a:hover,
.qs-item:hover, .qs-item.is-cur { background: rgba(255,255,255,.07); color: var(--fg); }

#searchsuggestions .searchheading,
.qs-drop .searchheading {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--fg);
	margin-bottom: 3px;
}
#searchsuggestions > a > span:not(.searchheading):not(.seperator),
.qs-drop > a > span:not(.searchheading):not(.seperator) {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--fg-dim);
}
#searchsuggestions .notfound,
.qs-drop .notfound,
.qs-empty {
	display: block;
	padding: 14px;
	text-align: center;
	color: var(--fg-dim);
	font-size: 14px;
}
#searchsuggestions .seperator,
.qs-drop .seperator {
	display: block;
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid var(--glass-border);
	text-align: center;
}
#searchsuggestions .seperator a,
.qs-drop .seperator a { font-size: 13px; font-weight: 600; color: var(--accent); }
#searchsuggestions .break,
.qs-drop .break { display: none; }

.qs-item img { width: 38px; height: 54px; object-fit: cover; border-radius: var(--r-xs); flex: none; }
.qs-item__t { font-size: 14px; font-weight: 600; line-height: 1.3; }
.qs-item__m { font-size: 12px; color: var(--fg-dim); }

/* Кнопка «наверх» */
.to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 700;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border-radius: var(--r-pill);
	color: var(--fg);
	background: var(--glass-strong);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
	        backdrop-filter: blur(var(--blur)) saturate(170%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--sh-2);
	cursor: pointer;
	opacity: 0;
	transform: translateY(14px) scale(.9);
	pointer-events: none;
	transition: all var(--t) var(--e-spring);
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: #fff; background: var(--accent-grad); border-color: transparent; box-shadow: var(--sh-glow); }

/* --------------------------------------------------------------------------
   15б. Мобильные кнопки «меню» и «поиск»
   На десктопе они не нужны: боковая колонка и строка поиска и так на виду.
   В styles222 они скрыты правилом `.show-menu, .show-search {display:none}`,
   но я собираю их в app.js как <button>, а у шаблона есть общее правило
   `button:not(.color-btn) {display:inline-block}` со специфичностью выше —
   из-за него кнопки вылезали на десктопе отдельным блоком под шапкой.
   Прячем явно, с запасом по специфичности.
   -------------------------------------------------------------------------- */

.top .show-menu,
.top .show-search,
.mob-toggle { display: none; }

/* --------------------------------------------------------------------------
   16. Owl Carousel — перенесён из owl.css, чтобы убрать лишний запрос
   -------------------------------------------------------------------------- */

.owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.owl-carousel { display: none; position: relative; width: 100%; -ms-touch-action: pan-y; }
.owl-carousel .owl-wrapper { display: none; position: relative; -webkit-transform: translate3d(0,0,0); }
.owl-carousel .owl-wrapper-outer { overflow: hidden; position: relative; width: 100%; }
.owl-carousel .owl-wrapper-outer.autoHeight { transition: height .5s ease-in-out; }
.owl-carousel .owl-item { float: left; }

/* --------------------------------------------------------------------------
   Слайдер кадров под плеером (.screens-c)
   --------------------------------------------------------------------------
   Две отдельные болячки, обе видны как «постер сбоку, точки в стороне».

   1. Слайд (.owl-item) шириной во всю колонку, а картинка внутри узкая —
      она липла к левому краю, тогда как точки пагинации центрируются
      по контейнеру. Выглядело так, будто управление уехало вбок.
      Центрируем содержимое слайда.

   2. .owl-theme .owl-controls в engine.css спозиционирован absolute,
      а его top карусель считает при инициализации по высоте первого
      слайда. Слайды тут разной высоты (316–320px), поэтому управление
      оказывалось то на картинке, то поверх соседнего блока. Возвращаем
      в поток: тогда оно физически не может ни на что налезть.
   -------------------------------------------------------------------------- */

.screens-c .owl-item { text-align: center; }

/* Картинка вылезала из собственной ссылки: <a class="highslide"> шириной
   195px, а <img> внутри — 220px. Центрировался анкор, а видно картинку,
   поэтому она стабильно уезжала вправо на ~13px, и на каждом следующем
   слайде это читалось как «постер сползает».
   Заставляем ссылку обнимать картинку по размеру и центрируем её саму. */
.screens-c .owl-item .highslide {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
}
.screens-c .owl-item .highslide img {
	display: block;
	max-width: 100%;
	height: auto;
	/* !important здесь не от лени: движок вешает картинке ИНЛАЙНОВЫЙ
	   style="margin:0 15px 10px 0; float:left" прямо при вставке в текст,
	   а инлайновый стиль не перебивается никаким селектором. Именно эти
	   15px справа раздували ссылку до 235px при картинке в 220 и уводили
	   постер от центра. */
	margin: 0 auto !important;
	float: none !important;
}

.screens-c.owl-theme .owl-controls {
	position: static;
	margin-top: 10px;
	height: auto;
}
.screens-c .owl-pagination { top: 0; }

.owl-controls .owl-page, .owl-controls .owl-buttons div { cursor: pointer; }
.owl-controls { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.grabbing { cursor: url(../images/grabbing.png) 8 8, move; }
.owl-carousel .owl-wrapper, .owl-carousel .owl-item {
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
	        transform: translate3d(0,0,0);
}
.owl-origin { -webkit-perspective: 1200px; perspective: 1200px; }
.owl-fade-out { z-index: 10; animation: fadeOut .7s both ease; }
.owl-fade-in  { animation: fadeIn .7s both ease; }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeIn  { 0% { opacity: 0; } 100% { opacity: 1; } }

.owl-buttons div {
	position: absolute;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: var(--r-pill);
	color: var(--fg);
	background: var(--glass-strong);
	-webkit-backdrop-filter: blur(14px) saturate(170%);
	        backdrop-filter: blur(14px) saturate(170%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--sh-2);
	z-index: 30;
	opacity: 0;
	transition: all var(--t) var(--e-out);
}
.carousel-wr:hover .owl-buttons div,
.k-rel-box:hover .owl-buttons div { opacity: 1; }
.owl-buttons div:hover { color: #fff; background: var(--accent-grad); border-color: transparent; box-shadow: var(--sh-glow); }
.carousel-wr .owl-buttons .owl-prev { left: 8px; }
.carousel-wr .owl-buttons .owl-next { right: 8px; }

/* Карусель похожих работ: в engine.css её стрелки вынесены НАД блоком
   (.k-rel-box .owl-controls {top:-30px; right:7px}) — оставляем эту схему,
   только приводим сами кнопки к общему виду. */
.k-rel-box .owl-theme .owl-controls { pointer-events: none; }
.k-rel-box .owl-buttons div {
	position: relative;
	pointer-events: auto;
	top: auto;
	margin: 0 3px;
	opacity: 1;
	border-radius: var(--r-pill) !important;
}
.k-rel-box .owl-prev, .k-rel-box .owl-next { left: auto; right: auto; padding: 0; }

/* Слайдер: фиксированная высота слайда. Раньше картинка (300px) была выше
   слайда (280px) и вылезала — из-за этого и высота .owl-carousel «плыла»,
   и стрелки, спозиционированные от неё через top:50%, уезжали вниз. */
.carousel-wr {
	position: relative;
	height: auto;
	margin-bottom: 18px;
	padding: 10px;
	border-radius: var(--r-lg);
	background: var(--glass);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
	        backdrop-filter: blur(var(--blur)) saturate(150%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--sh-2), inset 0 1px 0 var(--glass-hi);
	overflow: hidden;
}
.carou {
	position: relative;
	display: block;
	height: 270px;
	max-width: none;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface-2);
}
.carou img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
}
/* Стрелки — строго по центру слайда.
   В engine.css лежит `.owl-theme .owl-controls {position:absolute; bottom:0;
   height:10px}` — этот десятипиксельный блок под лентой и был точкой отсчёта
   для стрелок, поэтому top:50% опускал их под карусель. Растягиваем контейнер
   на всю высоту карусели (селектор той же специфичности, иначе не перебьётся)
   и отключаем ему перехват мыши, чтобы не мешал перетаскиванию слайдов. */
.carousel-wr .owl-theme .owl-controls {
	top: 0;
	bottom: 0;
	height: auto;
	pointer-events: none;
}
.carousel-wr .owl-buttons div {
	pointer-events: auto;
	top: 50%;
	margin-top: -20px;
}

/* --------------------------------------------------------------------------
   17. Адаптив
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
	.center { max-width: 1100px; }
}

@media (max-width: 1024px) {
	.wr { padding-top: 80px; }
	.kino-title-full h1.kino-h { font-size: 25px; }
}

@media screen and (max-width: 768px), screen and (max-width: 480px) {
	.center { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box !important; }
	.wr { padding-top: 68px; }
	.cols, #cols { padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
	.col-side { display: none !important; }
	.col-cont { border-radius: var(--r-md); margin: 0 !important; width: 100% !important; float: none !important; padding: 8px 4px !important; box-sizing: border-box !important; }
	/* Шапка: логотип слева, справа — иконки в один ряд, поиск разворачивается
	   отдельной строкой под ними. Кнопки стоят рядом с поиском и подписаны
	   через aria-label/title, а не висят отдельным блоком под шапкой. */
	.top {
		padding: 6px 0;
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
		height: auto;
	}
	.logo { position: static; width: auto; height: 40px; margin-right: auto; }

	.top .show-menu,
	.top .show-search {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: static;
		order: 2;
		width: 38px;
		height: 38px;
		padding: 0;
		flex: none;
		font-size: 0;
		line-height: 0;
		color: var(--fg-muted);
		background: var(--glass-light);
		border: 1px solid var(--glass-border);
		border-radius: var(--r-pill);
		cursor: pointer;
		transition: color var(--t-fast) var(--e-out), background var(--t) var(--e-out),
		            border-color var(--t) var(--e-out);
	}
	.top .show-menu .fa,
	.top .show-search .fa { font-size: 17px; }
	.top .show-menu:hover,
	.top .show-search:hover,
	.top .show-menu[aria-expanded="true"],
	.top .show-search[aria-expanded="true"] {
		color: #fff;
		background: var(--accent-grad);
		border-color: transparent;
	}

	/* На десктопе .log-buts позиционирован absolute (правый край шапки).
	   В мобильном ряду это заставляло его наезжать на кнопки меню и поиска —
	   возвращаем в поток. */
	.log-buts {
		position: static;
		order: 3;
		margin-left: 0;
		display: flex;
		gap: 6px;
		line-height: normal;
	}
	.log-buts a { float: none; margin: 0; }
	.log-buts a span { display: none; }
	.log-buts a { padding: 0; width: 38px; height: 38px; justify-content: center; }

	/* Поиск разворачивается второй строкой — под иконками, во всю ширину */
	.search-wrap {
		flex: 1 1 100%;
		order: 4;
		position: static;
		width: 100%;
		padding: 0;
		margin-top: 6px;
		background: none;
	}
	.main-items.grid-thumb,
	.main-items.grid-thumb > #dle-content { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px 12px; }
	.kino-title-full h1.kino-h { font-size: 21px; }
	.kino-lines .k-label { min-width: 100%; }
	.chips { gap: 6px; }
	.to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
	.bottom { padding: 18px; }
	/* Мобильное меню — горизонтальная лента чипсов */
	.first-menu, .second-menu {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 6px;
		scroll-snap-type: x proximity;
	}
	.first-menu::-webkit-scrollbar, .second-menu::-webkit-scrollbar { height: 3px; }

	/* Выпадающее мобильное меню под шапкой */
	.mob-dropdown {
		width: 100% !important;
		background: rgba(22, 22, 22, 0.98) !important;
		border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
		-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
		        backdrop-filter: blur(20px) saturate(180%) !important;
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.7) !important;
		z-index: 999 !important;
		box-sizing: border-box !important;
	}

	.mob-dropdown__inner {
		padding: 16px 14px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		box-sizing: border-box !important;
	}

	.mob-nav-title {
		font-size: 11px !important;
		font-weight: 700 !important;
		color: var(--fg-dim, #888) !important;
		text-transform: uppercase !important;
		letter-spacing: 0.8px !important;
		margin-bottom: 10px !important;
	}

	.mob-nav-list {
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
	}

	.mob-nav-list li a {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		padding: 10px 14px !important;
		background: rgba(255, 255, 255, 0.05) !important;
		border: 1px solid rgba(255, 255, 255, 0.08) !important;
		border-radius: var(--r-md, 10px) !important;
		color: var(--fg, #eee) !important;
		font-size: 13.5px !important;
		font-weight: 600 !important;
		transition: all 0.2s ease !important;
		text-decoration: none !important;
		box-sizing: border-box !important;
	}

	.mob-nav-list li a i {
		color: var(--accent, #ff2a5f) !important;
		font-size: 14px !important;
		width: 16px !important;
		text-align: center !important;
	}

	.mob-nav-list li a:hover,
	.mob-nav-list li a:active {
		background: rgba(255, 255, 255, 0.12) !important;
		color: #fff !important;
		border-color: rgba(255, 255, 255, 0.2) !important;
	}

	.mob-nav-chips {
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
	}

	.mob-nav-chips li a {
		display: inline-flex !important;
		align-items: center !important;
		padding: 8px 16px !important;
		background: rgba(255, 255, 255, 0.05) !important;
		border: 1px solid rgba(255, 255, 255, 0.08) !important;
		border-radius: var(--r-pill, 999px) !important;
		color: var(--fg-muted, #ccc) !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		transition: all 0.2s ease !important;
		text-decoration: none !important;
	}

	.mob-nav-chips li a:hover,
	.mob-nav-chips li a:active {
		background: var(--accent-grad, linear-gradient(135deg, #ff2a5f, #ce1025)) !important;
		color: #fff !important;
		border-color: transparent !important;
		box-shadow: 0 4px 12px rgba(206, 16, 37, 0.4) !important;
	}
}

@media (max-width: 480px) {
	body { font-size: 14.5px; }
	.center { padding: 0 4px !important; }
	.col-cont { padding: 6px 4px !important; }
	.main-items.grid-thumb,
	.main-items.grid-thumb > #dle-content { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
	.grid-thumb { padding: 12px; }
	.kino-item { padding: 14px; margin: 0; }
}

/* Печать */
@media print {
	.top-wr, .col-side, .bottom, .to-top, .owl-buttons, .k-link, .tabs { display: none !important; }
	body { background: #fff; color: #000; }
	body::before, body::after { display: none; }
}

/* Пункт «Предложить хентай» в меню разделов.
   Он переехал из боковой колонки и по смыслу не раздел каталога, а действие,
   поэтому не заливаем акцентом (так помечен текущий раздел), а обводим
   акцентной рамкой — заметно, но с активным пунктом не путается. */
/* Меню разделов app.js переносит в .main-menu.mob-menu, поэтому селектор
   не привязан к исходному контейнеру — иначе акцент теряется после переноса. */
.second-menu li a.is-offer,
.main-menu li a.is-offer {
	color: var(--accent);
	background: var(--accent-soft);
	border-color: var(--accent);
}
.second-menu li a.is-offer:hover,
.main-menu li a.is-offer:hover {
	color: #fff;
	background: var(--accent-grad);
	border-color: transparent;
	box-shadow: var(--sh-glow);
}

/* Иконки в меню шапки: чуть мельче текста и приглушены, чтобы читалась подпись,
   а не значок. У активного пункта и у ссылки под курсором — цвет текста. */
.first-menu li a .fa,
.second-menu li a .fa {
	font-size: .92em;
	opacity: .75;
	transition: opacity var(--t) var(--e-out);
}
.first-menu li a:hover .fa,
.second-menu li a:hover .fa,
.first-menu li a.active .fa,
.second-menu li a.active .fa { opacity: 1; }

/* =====================================================================
   Панель над списком: вид (список / плитка) и сортировка
   ===================================================================== */

.list-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 10px 16px;
	border-radius: var(--r-lg, 12px);
	background: var(--surface-2, rgba(43, 43, 43, 0.6));
	border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

.view-switch {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border-radius: var(--r-pill, 999px);
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

button.view-switch__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill, 999px);
	background: none;
	color: var(--fg-dim, #888);
	font-size: 14px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background var(--t) var(--e-out), color var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}

button.view-switch__btn:hover {
	color: var(--fg, #fff);
	background: rgba(255, 255, 255, .08);
}

button.view-switch__btn.is-active {
	color: #fff !important;
	background: var(--accent-grad, linear-gradient(135deg, #ff2a5f, #ce1025)) !important;
	box-shadow: 0 2px 10px rgba(206, 16, 37, 0.45) !important;
}

.sort-box {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.sort-box__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--fg-dim, #888);
}

.sort-box__select {
	height: 34px;
	padding: 0 32px 0 14px;
	border-radius: var(--r-pill, 999px);
	border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
	background: rgba(0, 0, 0, 0.35)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23ff2a5f'/%3E%3C/svg%3E")
		no-repeat right 10px center / 16px 16px;
	color: var(--fg, #eee);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}

.sort-box__select:hover,
.sort-box__select:focus {
	border-color: var(--accent, #ce1025);
	box-shadow: 0 0 10px rgba(206, 16, 37, 0.3);
	outline: none;
}

.sort-box__select option {
	background: #232323;
	color: #eee;
	padding: 6px 10px;
}

.sorting {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 12px 18px !important;
	margin: 0 0 16px 0 !important;
	border-bottom: 1px solid var(--glass-border) !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

.sorting-menu {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.grid-select {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	position: static !important;
	float: none !important;
	margin-left: auto !important;
}

.grid-select span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 32px !important;
	border-radius: var(--r-md, 8px) !important;
	background: var(--glass-light, rgba(255,255,255,0.05)) !important;
	border: 1px solid var(--glass-border, rgba(255,255,255,0.1)) !important;
	color: var(--fg-muted) !important;
	cursor: pointer !important;
	float: none !important;
	margin: 0 !important;
	font-size: 14px !important;
	transition: all 0.2s ease !important;
}

.grid-select span:hover {
	color: var(--fg) !important;
	background: rgba(255, 255, 255, 0.12) !important;
}

.grid-select span.current {
	color: #fff !important;
	background: var(--accent-grad) !important;
	border-color: transparent !important;
	box-shadow: var(--sh-glow) !important;
}

/* =====================================================================
   Списочный вид: та же карточка, что и в плитке, но развёрнутая
   ===================================================================== */

.main-items.list-view,
.main-items.grid-list,
.grid-list {
	display: block !important;
	padding: 0 !important;
}

.main-items.list-view .kino-item,
.main-items.grid-list .kino-item,
.grid-list .kino-item {
	width: auto !important;
	float: none !important;
	margin: 0 0 14px !important;
	padding: 14px !important;
	border-radius: var(--r-lg) !important;
	border: 1px solid var(--glass-border);
	background: var(--surface-2);
	box-shadow: var(--sh-2);
	transition: border-color var(--t) var(--e-out), transform var(--t) var(--e-out);
}

.main-items.list-view .kino-item:hover {
	border-color: var(--glass-hi);
	transform: translateY(-2px);
}

/* В плитке эти блоки скрыты (styles222.css), в списке они и есть содержание */
.main-items.list-view .kino-text,
.main-items.list-view .kino-date { display: block; }

.main-items.list-view .kino-inner {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.main-items.list-view .kino-img {
	flex: none;
	width: 180px;
	border-radius: var(--r-md, 10px);
	overflow: hidden;
}

.main-items.list-view .kino-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

.main-items.list-view .kino-text {
	flex: 1 1 auto;
	min-width: 0;
}

.main-items.list-view .kino-title { margin-bottom: 4px; }
.main-items.list-view .kino-title h2 { font-size: 17px; line-height: 1.3; }

.main-items.list-view .kino-date {
	margin-bottom: 10px;
	font-size: 12px;
	color: var(--fg-dim);
}

.main-items.list-view .kino-lines {
	margin: 10px 0 12px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.6;
}

.main-items.list-view .kino-lines li { display: flex; gap: 8px; }
.main-items.list-view .kino-lines .k-label { flex: none; min-width: 150px; color: var(--fg-dim); }
.main-items.list-view .kino-lines strong { font-weight: 600; }

.main-items.list-view .kino-desc {
	margin-bottom: 10px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--fg-muted);
}

.main-items.list-view .k-link { display: inline-flex; }

/* Своя пагинация ajax-выдачи */
.hs-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 16px 0 4px;
}
.hs-pager .chip[disabled] { opacity: .4; cursor: default; }
.hs-pager__gap { color: var(--fg-dim); padding: 0 2px; }

@media (max-width: 768px) {
	.view-switch {
		display: none !important;
	}
	.list-toolbar {
		justify-content: flex-end !important;
		margin-bottom: 12px !important;
	}
	.sort-box {
		margin-left: auto !important;
	}
	.sort-box__label {
		display: none !important;
	}
	.main-items.list-view {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
		gap: 16px 12px !important;
	}
	.main-items.list-view .kino-item {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
	}
	.main-items.list-view .kino-inner {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		gap: 8px !important;
	}
	.main-items.list-view .kino-img {
		width: 100% !important;
		aspect-ratio: 2 / 3 !important;
		height: auto !important;
	}
	.main-items.list-view .kino-desc,
	.main-items.list-view .kino-lines,
	.main-items.list-view .k-link {
		display: none !important;
	}
	.main-items.list-view .kino-text {
		display: flex !important;
		flex-direction: column !important;
	}
}

/* =====================================================================
   Фоновая иллюстрация

   Слой лежит НИЖЕ градиента (у body::before z-index -2, здесь -3), поэтому
   цветные пятна темы остаются главными, а картинка читается фоном.

   Под общий стиль приглушаем: обесцвечиваем, гасим яркость и уводим низ
   в прозрачность маской — иначе картинка спорит с карточками за внимание
   и текст на ней теряется.

   Файл: templates/hentaro/images/bg-hero.jpg. Если его нет — слой просто
   пустой, вёрстка не меняется.
   ===================================================================== */

html::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -3;
	background: url('../images/bg-hero.jpg') no-repeat center top / cover;
	filter: grayscale(.4) brightness(.5) saturate(.8);
	opacity: .55;
	/* Низ уводим в прозрачность: контент начинается сразу под шапкой,
	   и под ним картинка только мешала бы */
	-webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.75) 42%, transparent 88%);
	        mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.75) 42%, transparent 88%);
	pointer-events: none;
}

/* На узких экранах картинка почти не видна за контентом, а перерисовка
   фиксированного слоя при скролле заметно дороже — отключаем */
@media (max-width: 900px) {
	html::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	html::before { background-attachment: scroll; }
}

/* ==========================================================================
   Плавающие и фиксированные рекламные блоки (ExoClick Sticky & Outstream)
   ========================================================================== */

/* 1. Плавающий видеоплеер (Outstream / Stripchat / LoverKiss) — всегда фиксирован в правом нижнем углу */
div[class*="_main_outstream"],
div[id*="outstream"],
div[class*="outstream"],
div[class*="exo_outstream"],
div[class*="_effect_exo"] {
	position: fixed !important;
	right: 20px !important;
	bottom: 20px !important;
	left: auto !important;
	top: auto !important;
	width: auto !important;
	max-width: 400px !important;
	z-index: 999999 !important;
}

div[class*="_effect_exo_wrapper"] {
	max-width: 100% !important;
}

/* 2. Плавающий / липкий баннер в правом верхнем углу (Sticky Desktop 3374061) */
.adv-sticky-right,
ins.eas6a97888e[data-zoneid="3374061"],
[data-zoneid="3374061"],
div[class*="_main_sticky"],
div[class*="sticky_banner"] {
	position: fixed !important;
	top: 90px !important;
	right: 20px !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 99998 !important;
}

@media (max-width: 1200px) {
	.adv-sticky-right,
	ins.eas6a97888e[data-zoneid="3374061"],
	[data-zoneid="3374061"] {
		display: none !important;
	}
}


/* ===========================================================================
   Селекторы «Год / Студия / Режиссёр» в сайдбаре
   Перенос блоков #sort-film и #sort-serial из боевого шаблона anime-share3.
   =========================================================================== */
.hs-jump__row {
	display: block;
	margin-bottom: 12px;
}
.hs-jump__row:last-child { margin-bottom: 0; }

.hs-jump__label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	letter-spacing: .02em;
	color: var(--fg-dim, #9aa0a6);
}

select.hs-jump {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 8px 30px 8px 11px;
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	color: var(--fg, #e8eaed);
	background-color: var(--glass, rgba(255, 255, 255, .04));
	border: 1px solid var(--glass-border, rgba(255, 255, 255, .1));
	border-radius: 8px;
	cursor: pointer;
	/* стрелка своя: системную у appearance:none браузер убирает */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239aa0a6'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 16px 16px;
}
select.hs-jump:hover { border-color: var(--accent, #ff2a5f); }
select.hs-jump:focus {
	outline: none;
	border-color: var(--accent, #ff2a5f);
}
/* Список раскрывается системным виджетом — там своя палитра, задаём явно */
select.hs-jump option { color: #e8eaed; background: #232323; }

/* ===========================================================================
   Слайдер ExoClick — прилипить к экрану
   ---------------------------------------------------------------------------
   Формат приходит в .adv-box--content (зона 2852744) и по умолчанию встаёт
   в поток страницы: блок уезжает вместе с телом и упирается в футер.
   Выводим его из потока и прижимаем к левому нижнему углу окна — тогда он
   следует за прокруткой. Правый нижний угол уже занят outstream-правилом
   выше по файлу, поэтому слайдер уходит влево, чтобы они не перекрывались.

   Селекторы — по стабильным классам самого ExoClick: id у контейнера
   генерируется случайным (aBObJxMQ и т.п.), опираться на него нельзя.
   =========================================================================== */
div[class*="exo-video-slider-container-wrapper"],
div[id*="exo-video-slider-content"] > .exo_wrapper {
	position: fixed !important;
	right: 20px !important;
	bottom: 20px !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
	max-width: 360px !important;
	z-index: 999998 !important;
}

/* Крестик закрытия у этого формата абсолютный внутри обёртки — не даём ему
   уехать за пределы окна вместе с фиксированным родителем. */
div[class*="exo-video-slider-container-wrapper"] .exo_close {
	z-index: 1 !important;
}

@media (max-width: 1000px) {
	div[class*="exo-video-slider-container-wrapper"] {
		position: static !important;
		max-width: 100% !important;
	}
}

/* ===========================================================================
   Выдача поиска — приведение к общему оформлению
   ---------------------------------------------------------------------------
   DLE отдаёт страницу поиска со своей вёрсткой: белые карточки .sres-wrap,
   жёлтая плашка .berrors, форма таблицей с кнопками input.bbcodes.
   Всё это описано в engine.css светлой палитрой.

   Правила ниже намеренно вложены в .search-page: класс .bbcodes носит и
   панель редактора комментариев, .berrors выводится и в других разделах —
   без ограничения областью мы бы задели их тоже.
   =========================================================================== */

.search-page { margin-bottom: 20px; }

.search-page .sub-title { margin-bottom: 18px; }
.search-page .sub-title h1 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--fg);
}

/* --- Форма запроса ------------------------------------------------------- */
.search-page .searchtable {
	padding: 6px 4px;
	background: var(--glass);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-md);
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
}
.search-page .searchtable table { width: 100%; border-collapse: collapse; }
.search-page .searchtable td { border: 0; }

.search-page input.textin,
.search-page #searchinput {
	width: 100% !important;
	max-width: 420px;
	box-sizing: border-box;
	padding: 10px 13px;
	font: inherit;
	font-size: 14px;
	color: var(--fg);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-sm);
	transition: border-color var(--t-fast) var(--e-out);
}
.search-page input.textin:focus,
.search-page #searchinput:focus {
	outline: none;
	border-color: var(--accent);
}
.search-page input.textin::placeholder { color: var(--fg-dim); }

.search-page input.bbcodes {
	min-width: 0;
	margin: 0 8px 0 0;
	padding: 9px 18px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fg);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-pill);
	cursor: pointer;
	transition: background var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.search-page input.bbcodes:hover {
	background: var(--glass-hi);
	border-color: var(--accent);
}
/* «Начать поиск» — основное действие */
.search-page input#dosearch {
	color: #fff;
	background: var(--accent);
	border-color: transparent;
}
.search-page input#dosearch:hover {
	background: var(--accent);
	filter: brightness(1.1);
}

/* Расширенный поиск: поля, легенды, чекбоксы */
.search-page fieldset,
.search-page #searchtable fieldset {
	color: var(--fg-muted);
	background: var(--glass-light);
	border: 1px solid var(--glass-border) !important;
	border-radius: var(--r-sm);
}
.search-page fieldset legend { color: var(--fg); font-size: 12px; }
.search-page select,
.search-page textarea {
	padding: 7px 10px;
	font: inherit;
	font-size: 13px;
	color: var(--fg);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-xs);
}
.search-page select option { color: #e8eaed; background: #232323; }

/* --- Плашка «Информация» ------------------------------------------------- */
.search-page .berrors {
	margin: 18px 0;
	padding: 13px 17px;
	color: var(--fg-muted);
	background: var(--accent-soft);
	border: 1px solid var(--glass-border);
	border-left: 3px solid var(--accent);
	border-radius: var(--r-sm);
}
.search-page .berrors b { color: var(--fg); }
.search-page .berrors a { color: var(--accent); }

/* --- Карточки результатов ------------------------------------------------ */
.sres-wrap {
	margin-bottom: 12px;
	padding: 14px 14px 14px 226px;
	color: var(--fg-muted);
	background: var(--glass);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-md);
	transition: border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.sres-wrap:nth-child(2n) { background: var(--glass); }
.sres-wrap:hover {
	border-color: var(--accent);
	box-shadow: var(--sh-2);
	transform: translateY(-1px);
}
.sres-img { margin-left: -212px; width: 196px; }
.sres-img img { border-radius: var(--r-sm); }
.sres-date {
	left: 0;
	top: 0;
	padding: 5px 9px;
	font-size: 11px;
	color: var(--fg);
	background: rgba(0, 0, 0, .72);
	border-radius: var(--r-sm) 0 var(--r-sm) 0;
}
.sres-text { color: var(--fg-muted); }
.sres-text h2 {
	margin-bottom: 10px;
	font-size: 17px;
	line-height: 1.3;
	color: var(--fg);
}
.sres-wrap:hover .sres-text h2 { color: var(--accent); }
.sres-desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--fg-dim);
}

@media (max-width: 768px) {
	.sres-wrap { padding: 12px; }
	.sres-img { margin-left: 0; }
	/* Подпись поверх постера читается только на тёмной подложке */
	.sres-text {
		padding: 10px;
		background: rgba(0, 0, 0, .72);
		border-radius: 0 0 var(--r-md) var(--r-md);
	}
	.sres-text h2 { color: #fff; }
}

/* ===========================================================================
   Слайдер главной: круглые кнопки «жидкое стекло»
   ---------------------------------------------------------------------------
   Область — только .carousel-wr (лента на главной). Остальные карусели
   (похожие работы, боковая, скриншоты) сохраняют прежние стрелки.

   «Жидкое стекло» здесь — это четыре слоя на одной кнопке:
     1) сильное размытие с подъёмом насыщенности — подложка «оживает»;
     2) полупрозрачная белая заливка вместо плотной --glass-strong;
     3) внутренняя светлая кромка (inset box-shadow) — блик по краю стекла;
     4) диагональный блик ::before поверх — отражение.
   Кнопки видны всегда, а не только при наведении: лента больше не крутится
   сама, и стрелка стала единственным способом её листать.
   =========================================================================== */
.carousel-wr .owl-theme .owl-controls .owl-buttons div {
	width: 46px;
	height: 46px;
	opacity: 1;
	overflow: hidden;
	color: #fff;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .22);
	/* !important здесь вынужденно: в engine.css у .owl-next скругление
	   50% 0 0 50% помечено !important, и никакая специфичность его не берёт —
	   правая стрелка оставалась полукруглой. */
	border-radius: 50% !important;
	-webkit-backdrop-filter: blur(18px) saturate(190%);
	        backdrop-filter: blur(18px) saturate(190%);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, .38),
		inset 0 -1px 2px rgba(0, 0, 0, .28),
		0 6px 18px -6px rgba(0, 0, 0, .55);
	margin-top: -23px;
	transition:
		background var(--t-fast) var(--e-out),
		border-color var(--t-fast) var(--e-out),
		transform var(--t-fast) var(--e-out);
}

/* Блик. pointer-events: none — иначе перекрывает саму кнопку и клик не проходит */
.carousel-wr .owl-theme .owl-controls .owl-buttons div::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(145deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 62%);
}

.carousel-wr .owl-theme .owl-controls .owl-buttons div .fa {
	position: relative;
	z-index: 1;
	font-size: 15px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.carousel-wr .owl-theme .owl-controls .owl-buttons div:hover {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .38);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, .48),
		inset 0 -1px 2px rgba(0, 0, 0, .28),
		var(--sh-glow);
	transform: scale(1.06);
}
.carousel-wr .owl-theme .owl-controls .owl-buttons div:active { transform: scale(.97); }

/* Отключаем правило прозрачности по ховеру родителя из блока выше —
   кнопки нужны постоянно */
.carousel-wr:hover .owl-buttons div { opacity: 1; }

/* Safari/Firefox без backdrop-filter: без подложки стекло выглядит пустым */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.carousel-wr .owl-theme .owl-controls .owl-buttons div { background: rgba(40, 40, 40, .82); }
}

/* ===========================================================================
   Telegram: плавающая кнопка и блок в полной новости
   ---------------------------------------------------------------------------
   Оба перенесены из anime-share3 и переписаны:
     — вместо css/tg4.css (отдельный запрос) правила лежат здесь;
     — вместо иконки Font Awesome с bootstrapcdn (внешний CDN на каждой
       странице) — встроенный SVG прямо в разметке;
     — вместо inline-стилей в <center> — классы и переменные шаблона;
     — «волны» вокруг кнопки рисует один псевдоэлемент вместо двух,
       и они выключаются при prefers-reduced-motion.
   Фирменный #0088cc сохранён: по нему кнопку узнают.
   =========================================================================== */

/* --- Плавающая кнопка ---------------------------------------------------- */
.tg-float {
	position: fixed;
	right: 22px;
	bottom: 80px;   /* над кнопкой «наверх», та сидит на bottom: 22px */
	z-index: 700;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	color: #fff;
	background: #0088cc;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--r-pill);
	box-shadow: var(--sh-2);
	transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.tg-float svg { position: relative; z-index: 1; }
.tg-float:hover {
	color: #fff;
	transform: scale(1.07);
	box-shadow: 0 8px 26px -8px rgba(0, 136, 204, .85);
}
.tg-float:active { transform: scale(.96); }

/* Расходящаяся волна. Один псевдоэлемент вместо двух из tg4.css:
   вторая волна там отличалась только задержкой, а стоила лишнего слоя. */
.tg-float::before {
	content: "";
	position: absolute;
	inset: -14px;
	border: 1px solid #0088cc;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	animation: tg-wave 2.4s linear infinite;
}
@keyframes tg-wave {
	0%   { transform: scale(.62); opacity: 0; }
	35%  { opacity: .8; }
	100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.tg-float::before { animation: none; }
}

/* На узких экранах внизу справа уже теснится кнопка «наверх» —
   уводим самолётик выше, чтобы они не наезжали друг на друга. */
@media (max-width: 480px) {
	.tg-float { width: 42px; height: 42px; bottom: 74px; right: 16px; }
}

/* --- Блок в полной новости ----------------------------------------------- */
.tg-cta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	padding: 13px 18px;
	color: var(--fg);
	background: linear-gradient(115deg, rgba(0, 136, 204, .22) 0%, var(--glass) 62%);
	border: 1px solid var(--glass-border);
	border-left: 3px solid #0088cc;
	border-radius: var(--r-md);
	-webkit-backdrop-filter: blur(var(--blur));
	        backdrop-filter: blur(var(--blur));
	transition: border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.tg-cta:hover {
	color: var(--fg);
	border-color: #0088cc;
	transform: translateY(-1px);
}
.tg-cta svg { flex: none; color: #29a7e3; }
.tg-cta__text {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}
.tg-cta__hint {
	margin-left: auto;
	font-size: 12.5px;
	color: var(--fg-dim);
}
@media (max-width: 560px) {
	.tg-cta { flex-wrap: wrap; }
	.tg-cta__hint { margin-left: 0; width: 100%; }
}

/* ===========================================================================
   Инфоблок полной новости: единый ряд жанров и уплотнение строк
   =========================================================================== */

/* Жанры, предложения на голосовании и кнопка «+» в одной ленте.
   display: contents у вложенных списков убирает их собственные боксы,
   и чипсы обоих становятся прямыми детьми ряда — только так «+» встаёт
   вплотную за последним жанром, а не с новой строки. */
.xf-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin: 8px 0 0;
}
.xf-row > .xf-chips { display: contents; }
/* hidden на элементе с display:contents браузером не соблюдается —
   гасим пустой список предложений явно */
.xf-row > .xf-chips[hidden] { display: none; }
.xf-row > .gf__add { margin-left: 2px; }

/* Строки студии и режиссёра внутри общего списка характеристик */
.kino-lines .k-line--chips .xf-chips { margin: 0; gap: 4px; }
.kino-lines .k-line--chips .xf-chips a { height: 22px; padding: 0 9px; }

/* --- Уплотнение -----------------------------------------------------------
   Просили «строчки чуть компактнее друг к другу»: режем вертикальные
   отступы примерно вдвое, размеры шрифта не трогаем — читаемость та же. */
.xf-block { margin: 14px 0; }
.xf-block__title { margin-bottom: 6px; }
.xf-chips { margin: 8px 0; }

/* На узких экранах колонка подписей съедала бы место у значения —
   складываем строку в один столбец. */
@media (max-width: 560px) {
	.kino-lines li {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

/* ===========================================================================
   Инфоблок: постер и характеристики двумя настоящими колонками
   ---------------------------------------------------------------------------
   Постер плавал (float: left), и список характеристик его обтекал: строки
   выше нижнего края постера были уже и начинались правее, а те, что ниже —
   от левого края блока. Отсюда «Студия» и «Режиссёр» стояли не в одной
   колонке с остальными, а длинные названия ломались на две строки.

   Грид, а не флекс: во флексе список характеристик не помещался рядом
   с постером и переносился под него. Здесь постер занимает первую колонку
   на всю высоту, а всё остальное строго во второй — сколько бы блоков
   там ни было и какой бы высоты ни был постер.
   =========================================================================== */
.kino-desc.full-text {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 0 20px;
	align-items: start;
}
.kino-desc.full-text > .story-poster {
	grid-column: 1;
	grid-row: 1 / span 99;   /* -1 у неявных строк не работает, поэтому span */
	float: none;
	margin: 0;
	max-width: 100%;
}
.kino-desc.full-text > *:not(.story-poster) {
	grid-column: 2;
	min-width: 0;
}

/* Без постера (есть галерея [xfvalue_poster2]) колонка не нужна */
.kino-desc.full-text:not(:has(> .story-poster)) {
	grid-template-columns: minmax(0, 1fr);
}
.kino-desc.full-text:not(:has(> .story-poster)) > * { grid-column: 1; }

@media (max-width: 560px) {
	.kino-desc.full-text {
		grid-template-columns: minmax(0, 1fr);
	}
	.kino-desc.full-text > .story-poster {
		grid-row: auto;
		margin-bottom: 14px;
	}
	.kino-desc.full-text > *:not(.story-poster) { grid-column: 1; }
}

/* ===========================================================================
   Гео-заглушка вместо плеера (DLE Country Filter v2.0)
   ---------------------------------------------------------------------------
   Показывается только гостю из закрытой страны. Занимает то же место, что
   плеер, и держит те же пропорции 16:9 — страница не «прыгает» при входе.
   =========================================================================== */
.geo-lock {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	min-height: 220px;
	margin: 0 0 16px;
	padding: 22px 24px;
	color: var(--fg);
	background: var(--glass);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-lg);
	-webkit-backdrop-filter: blur(var(--blur));
	        backdrop-filter: blur(var(--blur));
}
.geo-lock__ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	color: var(--warn);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-pill);
}
.geo-lock__ico .fa { font-size: 20px; }
.geo-lock__body { flex: 1 1 260px; min-width: 0; }
.geo-lock__title {
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}
.geo-lock__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--fg-dim);
}
.geo-lock__btn {
	flex: none;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--accent);
	border-radius: var(--r-pill);
	transition: filter var(--t-fast) var(--e-out);
}
.geo-lock__btn:hover { color: #fff; filter: brightness(1.1); }
@media (max-width: 560px) {
	.geo-lock { padding: 18px; }
	.geo-lock__btn { width: 100%; text-align: center; }
}