/*
 * Раздел комиксов: витрина, каталог, страница тайтла и читалка.
 *
 * Всё строится на тех же токенах, что и раздел новелл, поэтому обе схемы и обе
 * темы работают без отдельных правил. Отличается плотность: у комикса единица
 * витрины — постер, и его на экране должно быть заметно больше, чем карточек
 * новелл.
 */

/* -------------------------------------------------------------------------
 * Переключатель разделов
 * ---------------------------------------------------------------------- */

.xin-sections {
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	border-radius: 999px;
	background: hsl(var(--muted));
	border: 1px solid hsl(var(--border));
}

.xin-sections__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: hsl(var(--muted-fg));
	white-space: nowrap;
	transition: background .18s ease, color .18s ease;
}

.xin-sections__item svg { width: 15px; height: 15px; }

.xin-sections__item:hover { color: hsl(var(--fg)); }

.xin-sections__item.is-current {
	background: hsl(var(--card));
	color: hsl(var(--fg));
	box-shadow: var(--shadow-1);
}

@media (max-width: 991px) {
	.xin-sections__item span { display: none; }
	.xin-sections__item { padding: 5px 10px; }
}

/* -------------------------------------------------------------------------
 * Афиша: первый экран витрины
 * ---------------------------------------------------------------------- */

.xin-bill {
	position: relative;
	overflow: hidden;
	padding: 34px 0 40px;
	isolation: isolate;
}

.xin-bill__art {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.xin-bill__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(34px) saturate(1.2);
	transform: scale(1.2);
	opacity: .42;
}

/* Ложе под текстом: без него светлая обложка съедает белые буквы. */
.xin-bill::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to right, hsl(var(--bg) / .96) 0%, hsl(var(--bg) / .78) 52%, hsl(var(--bg) / .5) 100%),
		linear-gradient(to bottom, transparent 55%, hsl(var(--bg)) 100%);
}

.xin-bill__in {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) 210px;
	gap: 26px;
	align-items: center;
}

.xin-bill__poster {
	display: block;
	aspect-ratio: 2 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: hsl(var(--muted));
	box-shadow: var(--shadow-3);
}

.xin-bill__poster img { width: 100%; height: 100%; object-fit: cover; }

.xin-bill__kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: hsl(var(--muted-fg));
}

.xin-bill__kicker svg { width: 14px; height: 14px; }

.xin-bill__title { margin: 10px 0 0; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.08; }
.xin-bill__title a { color: inherit; }
.xin-bill__title a:hover { color: hsl(var(--primary)); }

.xin-bill__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-top: 10px;
	font-size: 13.5px;
	color: hsl(var(--muted-fg));
}

.xin-bill__facts b {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: hsl(var(--fg));
}

.xin-bill__facts svg { width: 15px; height: 15px; }

.xin-bill__lead {
	margin: 14px 0 0;
	max-width: 56ch;
	font-size: 15px;
	line-height: 1.55;
	color: hsl(var(--muted-fg));
}

.xin-bill__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.xin-bill__rail {
	display: grid;
	gap: 6px;
	align-content: start;
}

.xin-bill__rail-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: hsl(var(--muted-fg));
	margin-bottom: 2px;
}

.xin-bill__rail-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px;
	border-radius: var(--radius-sm);
	transition: background .18s ease;
}

.xin-bill__rail-item:hover { background: hsl(var(--accent)); }

.xin-bill__rail-cover {
	flex: 0 0 auto;
	width: 34px;
	height: 51px;
	overflow: hidden;
	border-radius: 6px;
	background: hsl(var(--muted));
}

.xin-bill__rail-cover img { width: 100%; height: 100%; object-fit: cover; }

.xin-bill__rail-name {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 991px) {
	.xin-bill__in { grid-template-columns: 140px minmax(0, 1fr); }
	.xin-bill__rail { display: none; }
}

@media (max-width: 575px) {
	.xin-bill__in { grid-template-columns: 108px minmax(0, 1fr); gap: 16px; }
	.xin-bill__lead { display: none; }
}

/* -------------------------------------------------------------------------
 * Неделя выходов
 * ---------------------------------------------------------------------- */

.xin-week__days {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin-bottom: 16px;
	scrollbar-width: thin;
}

.xin-week__day {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 62px;
	padding: 9px 12px;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	background: hsl(var(--card));
	color: hsl(var(--muted-fg));
	font-weight: 600;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.xin-week__day:hover { border-color: hsl(var(--ring)); color: hsl(var(--fg)); }

.xin-week__day.active {
	background: hsl(var(--primary));
	border-color: hsl(var(--primary));
	color: hsl(var(--primary-fg));
}

.xin-week__day.is-empty { opacity: .55; }

.xin-week__short { font-size: 13.5px; }
.xin-week__count { font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: .8; }

.xin-week__none { color: hsl(var(--muted-fg)); font-size: 14px; margin: 0; padding: 18px 0; }

/* -------------------------------------------------------------------------
 * Лента обновлений, собранная по тайтлам
 * ---------------------------------------------------------------------- */

.xin-upd {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 12px;
}

.xin-upd__card {
	display: flex;
	gap: 12px;
	padding: 12px;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-lg);
	background: hsl(var(--card));
	transition: border-color .18s ease;
}

.xin-upd__card:hover { border-color: hsl(var(--ring)); }

.xin-upd__cover {
	flex: 0 0 auto;
	width: 62px;
	height: 93px;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: hsl(var(--muted));
}

.xin-upd__cover img { width: 100%; height: 100%; object-fit: cover; }

.xin-upd__body { min-width: 0; flex: 1; }

.xin-upd__title {
	margin: 0 0 6px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
}

.xin-upd__title a:hover { color: hsl(var(--primary)); }

.xin-upd__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.xin-upd__list a {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 3px 6px;
	margin: 0 -6px;
	border-radius: var(--radius-sm);
	font-size: 12.5px;
	color: hsl(var(--muted-fg));
	transition: background .16s ease;
}

.xin-upd__list a:hover { background: hsl(var(--accent)); color: hsl(var(--fg)); }
.xin-upd__list b { font-family: var(--font-mono); color: hsl(var(--fg)); }
.xin-upd__list svg { width: 13px; height: 13px; flex: 0 0 auto; }

.xin-upd__name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.xin-upd__list time { margin-left: auto; flex: 0 0 auto; font-size: 11.5px; opacity: .8; }

/* -------------------------------------------------------------------------
 * Топ раздела
 * ---------------------------------------------------------------------- */

.xin-top {
	list-style: none;
	margin: 0;
	padding: 0 0 6px;
	display: flex;
	gap: 26px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.xin-top__item { flex: 0 0 auto; scroll-snap-align: start; }

.xin-top__item a {
	display: grid;
	grid-template-columns: auto 108px;
	align-items: end;
	gap: 4px;
}

/* Цифра ранга наполовину заезжает под обложку: это читается как афишный
   номер, а не как подпись рядом. */
.xin-top__num {
	font-size: 68px;
	font-weight: 800;
	line-height: .8;
	letter-spacing: -.04em;
	color: hsl(var(--card));
	-webkit-text-stroke: 2px hsl(var(--muted-fg) / .55);
	margin-right: -22px;
	z-index: 1;
}

.xin-top__cover {
	width: 108px;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background: hsl(var(--muted));
	box-shadow: var(--shadow-2);
}

.xin-top__cover img { width: 100%; height: 100%; object-fit: cover; }

.xin-top__meta { grid-column: 2; display: grid; gap: 2px; padding-top: 7px; }

.xin-top__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.xin-top__facts {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	color: hsl(var(--muted-fg));
}

.xin-top__facts svg { width: 12px; height: 12px; }

/* -------------------------------------------------------------------------
 * Сетка постеров
 * ---------------------------------------------------------------------- */

.xin-cm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 18px 14px;
}

.xin-cm-grid--wide { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

@media (max-width: 575px) {
	.xin-cm-grid,
	.xin-cm-grid--wide { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 14px 10px; }
}

.xin-cm-card__poster {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background: hsl(var(--muted));
	box-shadow: var(--shadow-1);
}

.xin-cm-card__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.xin-cm-card:hover .xin-cm-card__poster img { transform: scale(1.05); }

.xin-cm-card__poster--empty {
	display: grid;
	place-items: center;
	color: hsl(var(--muted-fg));
}

.xin-cm-card__poster--empty svg { width: 32px; height: 32px; }

.xin-cm-card--blur .xin-cm-card__poster img { filter: blur(14px); }
.xin-cm-card--blur:hover .xin-cm-card__poster img { filter: none; }

.xin-cm-card__badges {
	position: absolute;
	top: 6px;
	left: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.xin-cm-card__rank {
	position: absolute;
	top: 6px;
	right: 6px;
	min-width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	padding: 0 6px;
	border-radius: var(--radius-sm);
	background: hsl(220 20% 4% / .72);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.xin-cm-card__rank.is-top { background: hsl(var(--gold)); color: hsl(var(--gold-fg)); }

.xin-cm-card__over {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	gap: 10px;
	padding: 18px 8px 7px;
	background: linear-gradient(to top, hsl(220 20% 4% / .82), transparent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.xin-cm-card__over span { display: inline-flex; align-items: center; gap: 3px; }
.xin-cm-card__over svg { width: 13px; height: 13px; }

.xin-cm-card__title {
	margin: 7px 0 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
}

.xin-cm-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.xin-cm-card__title a:hover { color: hsl(var(--primary)); }

/* -------------------------------------------------------------------------
 * Пустой раздел
 * ---------------------------------------------------------------------- */

.xin-cm-empty { text-align: center; padding: 44px 20px; }
.xin-cm-empty svg { width: 38px; height: 38px; color: hsl(var(--muted-fg)); }
.xin-cm-empty h1, .xin-cm-empty h2 { margin: 12px 0 6px; font-size: 22px; }
.xin-cm-empty p { margin: 0 auto 16px; max-width: 42ch; }

/* -------------------------------------------------------------------------
 * Страница тайтла
 * ---------------------------------------------------------------------- */

.xin-ct__top { position: relative; overflow: hidden; padding: 28px 0 32px; isolation: isolate; }

.xin-ct__art { position: absolute; inset: 0; z-index: -2; }

.xin-ct__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(40px) saturate(1.15);
	transform: scale(1.2);
	opacity: .4;
}

.xin-ct__top::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, hsl(var(--bg) / .72), hsl(var(--bg)));
}

.xin-ct__topin {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.xin-ct__cover {
	position: relative;
	aspect-ratio: 2 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: hsl(var(--muted));
	box-shadow: var(--shadow-3);
}

.xin-ct__cover img { width: 100%; height: 100%; object-fit: cover; }
.xin-ct__cover.is-adult img { filter: blur(16px); }
.xin-ct__cover.is-adult:hover img { filter: none; }
.xin-ct__cover .xin-badge { position: absolute; top: 8px; left: 8px; }

.xin-ct__name { margin: 8px 0 2px; font-size: clamp(24px, 3vw, 38px); line-height: 1.12; }

.xin-ct__original { margin: 0; color: hsl(var(--muted-fg)); font-size: 14px; }

.xin-ct__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 18px 0 0;
}

.xin-ct__stats div { display: grid; gap: 1px; }

.xin-ct__stats dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: hsl(var(--muted-fg));
}

.xin-ct__stats dd {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.xin-ct__stats .is-rating { display: inline-flex; align-items: center; gap: 5px; }
.xin-ct__stats .is-rating svg { width: 17px; height: 17px; }

.xin-ct__genres { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; }

.xin-ct__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

@media (max-width: 767px) {
	.xin-ct__topin { grid-template-columns: 132px minmax(0, 1fr); gap: 16px; }
	.xin-ct__stats { gap: 10px 18px; }
	.xin-ct__stats dd { font-size: 16px; }
}

/* --- вкладки --- */

.xin-ct__body { padding: 26px 0 46px; }

.xin-ct__tabs {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	border-bottom: 1px solid hsl(var(--border));
	margin-bottom: 22px;
	scrollbar-width: none;
}

.xin-ct__tab {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 16px;
	border: 0;
	background: transparent;
	color: hsl(var(--muted-fg));
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.xin-ct__tab b {
	font-size: 11.5px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 999px;
	background: hsl(var(--muted));
	color: hsl(var(--muted-fg));
}

.xin-ct__tab:hover { color: hsl(var(--fg)); }

.xin-ct__tab.active { color: hsl(var(--fg)); }

.xin-ct__tab.active::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: hsl(var(--primary));
}

.xin-ct__synopsis { max-width: 78ch; }
.xin-ct__synopsis.is-collapsed { max-height: 240px; overflow: hidden; mask-image: linear-gradient(to bottom, #000 60%, transparent); }

.xin-ct__more {
	margin-top: 8px;
	border: 0;
	background: transparent;
	padding: 0;
	color: hsl(var(--primary));
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
}

.xin-ct__details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px 24px;
	margin: 26px 0 0;
	padding: 18px;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-lg);
	background: hsl(var(--card));
}

.xin-ct__details div { display: grid; gap: 2px; }
.xin-ct__details dt { font-size: 12px; color: hsl(var(--muted-fg)); }
.xin-ct__details dd { margin: 0; font-size: 14px; font-weight: 600; }

.xin-ct__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }

/* --- главы --- */

.xin-ct__toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

.xin-ct__search {
	position: relative;
	flex: 1 1 220px;
	display: flex;
	align-items: center;
}

.xin-ct__search svg {
	position: absolute;
	left: 11px;
	width: 16px;
	height: 16px;
	color: hsl(var(--muted-fg));
	pointer-events: none;
}

.xin-ct__search input {
	width: 100%;
	padding: 9px 12px 9px 34px;
	border: 1px solid hsl(var(--input));
	border-radius: var(--radius);
	background: hsl(var(--card));
	color: inherit;
	font-size: 14px;
}

.xin-ct__search input:focus { outline: 2px solid hsl(var(--ring) / .4); outline-offset: 1px; }

.xin-ct__chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.xin-ct__chapter {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	background: hsl(var(--card));
	transition: border-color .18s ease, background .18s ease;
}

.xin-ct__chapter:hover { border-color: hsl(var(--ring)); background: hsl(var(--accent)); }
.xin-ct__chapter.is-locked { opacity: .72; }

.xin-ct__thumb {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: hsl(var(--muted));
	color: hsl(var(--muted-fg));
}

.xin-ct__thumb img { width: 100%; height: 100%; object-fit: cover; }

.xin-ct__chapter-text { display: grid; gap: 2px; min-width: 0; }

.xin-ct__chapter-name { font-size: 14px; font-weight: 600; }
.xin-ct__chapter-name b { font-family: var(--font-mono); color: hsl(var(--muted-fg)); margin-right: 5px; font-weight: 600; }

.xin-ct__chapter-meta { display: flex; gap: 6px; font-size: 12.5px; color: hsl(var(--muted-fg)); }

.xin-ct__lock { margin-left: auto; color: hsl(var(--muted-fg)); }

.xin-ct__none { color: hsl(var(--muted-fg)); padding: 14px 0; }

/* -------------------------------------------------------------------------
 * Читалка
 * ---------------------------------------------------------------------- */

/* `body.xin-reading` в parts.css уже красит фон, поэтому селектор здесь той же
   силы: без `body` тёмный фон читалки проигрывал бы светлому фону страницы. */
body.xin-reading--comic { background: hsl(220 18% 8%); }

.xin-cr {
	--cr-width: 860px;
	--cr-gap: 0px;
	display: block;
	min-height: 100vh;
	color: #e8eaee;
}

.xin-cr[data-width="narrow"] { --cr-width: 620px; }
.xin-cr[data-width="normal"] { --cr-width: 860px; }
.xin-cr[data-width="wide"]   { --cr-width: 1100px; }
.xin-cr[data-width="full"]   { --cr-width: 100%; }

.xin-cr[data-gap="none"]  { --cr-gap: 0px; }
.xin-cr[data-gap="small"] { --cr-gap: 8px; }
.xin-cr[data-gap="large"] { --cr-gap: 26px; }

.xin-cr__bar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	background: hsl(220 18% 8% / .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid hsl(0 0% 100% / .08);
	transition: transform .25s ease;
}

.xin-cr__bar .btn-icon { color: #e8eaee; }
.xin-cr.is-immersive .xin-cr__bar { transform: translateY(-100%); }

.xin-cr__where { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.xin-cr__novel {
	font-size: 12px;
	color: hsl(0 0% 100% / .6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.xin-cr__chapter { font-size: 14px; font-weight: 600; }

.xin-cr__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.xin-cr__counter {
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: hsl(0 0% 100% / .7);
	padding: 3px 9px;
	border-radius: 999px;
	background: hsl(0 0% 100% / .08);
}

.xin-cr__panel {
	position: sticky;
	top: 52px;
	z-index: 19;
	display: grid;
	gap: 16px;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 16px;
	border-radius: var(--radius-lg);
	background: hsl(220 18% 12%);
	border: 1px solid hsl(0 0% 100% / .1);
	box-shadow: var(--shadow-3);
}

.xin-cr__group { display: grid; gap: 8px; }

.xin-cr__group-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: hsl(0 0% 100% / .5);
}

.xin-cr__choices { display: flex; flex-wrap: wrap; gap: 6px; }

.xin-cr__choices button {
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid hsl(0 0% 100% / .14);
	background: transparent;
	color: #e8eaee;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}

.xin-cr__choices button:hover { background: hsl(0 0% 100% / .08); }

.xin-cr__choices button.is-active {
	background: #e8eaee;
	border-color: #e8eaee;
	color: hsl(220 18% 10%);
}

.xin-cr__hint { margin: 0; font-size: 12.5px; color: hsl(0 0% 100% / .45); }

.xin-cr__stage { padding: 0 0 30px; }

.xin-cr__pages {
	display: flex;
	flex-direction: column;
	gap: var(--cr-gap);
	width: min(var(--cr-width), 100%);
	margin: 0 auto;
}

.xin-cr__page { margin: 0; }

.xin-cr__page img { display: block; width: 100%; height: auto; }

/* Постранично: на экране ровно один кадр, остальные спрятаны. */
.xin-cr[data-mode="ltr"] .xin-cr__pages,
.xin-cr[data-mode="rtl"] .xin-cr__pages { gap: 0; }

.xin-cr[data-mode="ltr"] .xin-cr__page,
.xin-cr[data-mode="rtl"] .xin-cr__page { display: none; }

.xin-cr[data-mode="ltr"] .xin-cr__page.is-current,
.xin-cr[data-mode="rtl"] .xin-cr__page.is-current { display: block; }

.xin-cr[data-mode="ltr"] .xin-cr__page img,
.xin-cr[data-mode="rtl"] .xin-cr__page img {
	max-height: calc(100vh - 110px);
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}

.xin-cr__locked {
	max-width: 460px;
	margin: 60px auto;
	padding: 34px 24px;
	text-align: center;
	border-radius: var(--radius-lg);
	background: hsl(0 0% 100% / .05);
	border: 1px solid hsl(0 0% 100% / .1);
}

.xin-cr__locked svg { width: 34px; height: 34px; color: hsl(0 0% 100% / .5); }
.xin-cr__locked h1 { margin: 12px 0 8px; font-size: 21px; }
.xin-cr__locked p { color: hsl(0 0% 100% / .6); font-size: 14px; }
.xin-cr__locked-actions { margin-top: 16px; }

.xin-cr__foot {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: hsl(220 18% 8% / .92);
	backdrop-filter: blur(10px);
	border-top: 1px solid hsl(0 0% 100% / .08);
}

.xin-cr__foot .btn-icon { color: #e8eaee; }
.xin-cr__foot .btn-outline { border-color: hsl(0 0% 100% / .2); color: #e8eaee; }
.xin-cr__foot .btn-outline:hover { background: hsl(0 0% 100% / .08); }

.xin-ct__chapter-name b { font-family: var(--font-mono); }
.xin-cr__chapter b { color: hsl(0 0% 100% / .5); font-family: var(--font-mono); margin-right: 4px; }