/* ==========================================================================
   Vstream — neomorphic design layer for DLE 21.0
   Soft UI: one base surface, dual shadows, no borders, generous radii.
   Loaded after engine.css + styles.css (Air base).
   ========================================================================== */

:root {
	/* soft UI surfaces */
	--n-bg: #e9edf4;
	--n-light: #ffffff;
	--n-dark: #d4dbe7;
	--n-darker: #c3ccdd;

	/* floating overlays that sit on top of artwork (play cue, chips) */
	--n-float-90: rgba(233, 237, 244, .90);
	--n-float-88: rgba(233, 237, 244, .88);
	--n-float-35: rgba(233, 237, 244, .35);
	--n-float-10: rgba(233, 237, 244, .10);

	/* ink */
	--n-text: #364152;
	--n-ink: #2b3444;
	--n-muted: #8b95a8;
	--n-faint: #a6aebe;
	--n-line: #dde2ec;

	/* accents */
	--n-accent: #5b6cff;
	--n-accent-dk: #4a58e0;
	--n-accent-soft: #e2e6ff;

	/* The Air base styles (engine.css / styles.css) still drive focus rings and
	   active states through their own tokens. Left alone they came out in Air's
	   light palette: focus outlines in slate blue, and --accent-soft is almost
	   white (#e8f0f6), which painted a stray pale block behind the current nav
	   pill on a dark surface. Point the shared names at our palette. */
	--accent: var(--n-accent);
	--accent-strong: var(--n-accent-dk);
	--accent-soft: var(--n-accent-soft);
	--n-gold: #ffb020;
	--n-gold-soft: #fff0d6;
	--n-green: #35c08a;
	--n-danger: #e2564c;

	/* geometry */
	--n-r-xs: 10px;
	--n-r-sm: 14px;
	--n-r: 20px;
	--n-r-lg: 28px;
	--n-r-pill: 999px;
	--n-container: 1200px;

	/* elevation presets */
	--n-raise: -6px -6px 16px var(--n-light), 6px 6px 16px var(--n-dark);
	--n-raise-sm: -3px -3px 8px var(--n-light), 3px 3px 8px var(--n-dark);
	--n-raise-lg: -10px -10px 26px var(--n-light), 10px 10px 26px var(--n-dark);
	--n-inset: inset -4px -4px 10px var(--n-light), inset 4px 4px 10px var(--n-darker);
	--n-inset-sm: inset -2px -2px 6px var(--n-light), inset 2px 2px 6px var(--n-darker);

	--n-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

	color-scheme: light;
}

/* ---------------------------------------------------------------- dark --- */
/* Same soft-UI construction on a dark base: the "light" shadow becomes a
   lighter shade of the surface, so every component flips with the tokens. */

html[data-vs-theme="dark"] {
	--n-bg: #232833;
	--n-light: #2c323f;
	--n-dark: #191d26;
	--n-darker: #141821;

	--n-float-90: rgba(35, 40, 51, .90);
	--n-float-88: rgba(35, 40, 51, .88);
	--n-float-35: rgba(35, 40, 51, .38);
	--n-float-10: rgba(35, 40, 51, .12);

	--n-text: #c6cddb;
	--n-ink: #eef1f7;
	--n-muted: #8d95a8;
	--n-faint: #6d7587;
	--n-line: #333a49;

	--n-accent: #7b8aff;
	--n-accent-dk: #6878f0;
	--n-accent-soft: #2a3050;
	--n-gold: #ffb020;
	--n-gold-soft: #3a2e14;
	--n-green: #3fd39b;
	--n-danger: #ff6f63;

	/* Softer inset on a dark base: the light shadow is only a shade lighter,
	   otherwise active pills read as a bright ring instead of a pressed well. */
	--n-inset: inset -3px -3px 8px rgba(44, 50, 63, .70), inset 3px 3px 8px rgba(10, 13, 19, .70);
	--n-inset-sm: inset -2px -2px 5px rgba(44, 50, 63, .55), inset 2px 2px 5px rgba(10, 13, 19, .65);

	color-scheme: dark;
}

/* Accent-tinted shadows need a slightly stronger tint on the dark base. */
html[data-vs-theme="dark"] .vs-btn {
	box-shadow: -4px -4px 12px rgba(44, 50, 63, .9), 6px 6px 16px rgba(10, 12, 18, .55);
}

html[data-vs-theme="dark"] .vs-btn:hover {
	box-shadow: -4px -4px 12px rgba(44, 50, 63, .9), 8px 10px 20px rgba(10, 12, 18, .6);
}

html[data-vs-theme="dark"] .vs-card__score,
html[data-vs-theme="dark"] .vs-pager .current,
html[data-vs-theme="dark"] .vs-pager b,
html[data-vs-theme="dark"] .vs-article__pages b,
html[data-vs-theme="dark"] .vs-article__pages .current,
/* The active nav pill is tinted via Air's --accent-soft, which is a light
   surface colour; the dark surface needs a readable-on-dark variant. */
html[data-vs-theme="dark"] .vs-nav .category-link.is-active,
html[data-vs-theme="dark"] .vs-nav .category-menu__row:has(.category-link.is-active) {
	background-color: var(--n-accent-soft);
	color: var(--n-accent);
}

html[data-vs-theme="dark"] .vs-counter,
html[data-vs-theme="dark"] .vs-user__badge,
html[data-vs-theme="dark"] .vs-card__pin,
html[data-vs-theme="dark"] .vs-slider__dot.is-active {
	color: #1b1f28;
}

html[data-vs-theme="dark"] .vs-cat-tile::before {
	background: linear-gradient(140deg, rgba(123, 138, 255, .22), rgba(63, 211, 155, .18));
}

html[data-vs-theme="dark"] .vs-slide__frame::after {
	background: linear-gradient(to top, var(--n-bg) 12%, var(--n-float-35) 55%, var(--n-float-10) 100%);
}

/* --------------------------------------------------------------- base --- */

.vs-body {
	margin: 0;
	background-color: var(--n-bg);
	color: var(--n-text);
	font-family: var(--n-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.vs-body :where(h1, h2, h3, h4, h5, h6) {
	color: var(--n-ink);
	font-family: var(--n-font);
	margin-top: 0;
}

.vs-body a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}

.vs-body a:hover {
	color: var(--n-accent);
}

.vs-body img {
	max-width: 100%;
	height: auto;
}

.vs-body .cat-link,
.vs-body .cat-link:hover {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	box-shadow: none;
}

.vs-container {
	width: 100%;
	max-width: var(--n-container);
	margin: 0 auto;
	padding: 0 20px;
}

.vs-icon,
.vs-body .icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
	vertical-align: middle;
	flex: none;
}

.vs-sr-only,
.vs-body .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vs-body .skip-link {
	position: absolute;
	left: -9999px;
}

.vs-body .skip-link:focus {
	left: 20px;
	top: 20px;
	z-index: 200;
	padding: 12px 18px;
	background: var(--n-bg);
	border-radius: var(--n-r-pill);
	box-shadow: var(--n-raise);
}

/* ------------------------------------------------------------ primitives --- */

.vs-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-bg);
	box-shadow: var(--n-inset-sm);
	color: var(--n-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.vs-chip b {
	color: var(--n-text);
	font-weight: 700;
}

.vs-chip .icon {
	width: 13px;
	height: 13px;
	opacity: .7;
}

.vs-chip--accent {
	color: var(--n-accent);
	box-shadow: inset -2px -2px 6px var(--n-light), inset 2px 2px 6px rgba(91, 108, 255, .25);
}

.vs-chip--gold {
	color: #b97c05;
	background-color: var(--n-gold-soft);
	box-shadow: none;
}

.vs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 30px;
	height: 48px;
	background-color: var(--n-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border: 0;
	border-radius: var(--n-r-pill);
	box-shadow: -4px -4px 12px rgba(255, 255, 255, .75), 6px 6px 16px rgba(91, 108, 255, .45);
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.vs-btn:hover {
	background-color: var(--n-accent-dk);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: -4px -4px 12px rgba(255, 255, 255, .75), 8px 10px 20px rgba(91, 108, 255, .5);
}

.vs-btn__play {
	width: 18px;
	height: 18px;
	flex: none;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

/* Hero CTA: a play disc inside the pill. The old markup used a raster play.png
   tinted with a filter, which lost its edge on the accent background. */
.vs-btn--play {
	height: 54px;
	padding: 0 32px 0 12px;
	gap: 14px;
	font-size: 13px;
}

.vs-btn__disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: background-color .2s ease, transform .2s ease;
}

.vs-btn__disc .icon {
	width: 15px;
	height: 15px;
	/* the glyph is drawn with fill, so nudge it right to sit optically centred */
	margin-left: 1px;
}

.vs-btn--play:hover .vs-btn__disc {
	background-color: rgba(255, 255, 255, .34);
	transform: scale(1.06);
}

/* Hover on the shared .vs-btn keeps a 12px white glow, which against the light
   header blooms around the hero CTA and swallows the edge. Replace it with a
   ring and keep the fill, so the button stays readable. */
.vs-btn--play:hover {
	color: #fff;
	box-shadow: 0 0 0 2px var(--n-bg), 0 8px 20px rgba(91, 108, 255, .45);
}

/* On the dark base the accent is a light blue (#7b8aff), so white text lands
   near 2.5:1 and "Смотреть" washes out. Flip the label to the dark ink for every
   accent-filled button; .vs-btn--ghost keeps --n-text because it sits on the
   surface, not the accent. */
html[data-vs-theme="dark"] .vs-btn:not(.vs-btn--ghost),
html[data-vs-theme="dark"] .vs-btn--play:hover {
	color: #1b1f28;
	box-shadow: 0 0 0 2px var(--n-bg), 0 8px 20px rgba(10, 12, 18, .6);
}

/* Hover keeps the fill here: darkening toward --n-accent-dk dropped the dark
   label to 4.35:1, just under the 4.5 threshold. The lift and ring carry the
   hover on their own. */
html[data-vs-theme="dark"] .vs-btn--play:hover {
	background-color: var(--n-accent);
}

/* `.vs-body a { color: inherit }` scores (0,1,1) and beats a bare `.vs-btn` at
   (0,1,0), so the resting label inherited the body ink instead of white - 2.47:1
   on the accent fill. `.vs-body a:hover` at (0,2,1) then repainted it accent,
   which is how the CTA ended up unreadable. Re-declaring both states with the
   body class puts them on top: (0,2,0) and (0,3,0). */
.vs-body .vs-btn,
.vs-body .vs-btn:hover,
.vs-body .vs-btn:focus-visible {
	color: #fff;
}

html[data-vs-theme="dark"] .vs-body .vs-btn,
html[data-vs-theme="dark"] .vs-body .vs-btn:hover,
html[data-vs-theme="dark"] .vs-body .vs-btn:focus-visible {
	color: #1b1f28;
}

/* Ghost buttons sit on the surface rather than the accent, so they keep the
   accent label that makes them readable there. */
.vs-body .vs-btn--ghost:hover,
.vs-body .vs-btn--ghost:focus-visible {
	color: var(--n-accent);
}

.vs-btn--ghost {
	background-color: var(--n-bg);
	color: var(--n-text);
	box-shadow: var(--n-raise-sm);
}

.vs-btn--ghost:hover {
	background-color: var(--n-bg);
	color: var(--n-accent);
	transform: translateY(-2px);
}

.vs-btn--block {
	width: 100%;
}

/* -------------------------------------------------------------- header --- */

.vs-header {
	padding: 18px 0 6px;
	position: relative;
	z-index: 40;
}

.vs-header__inner {
	padding: 16px 24px 14px;
	/* Transparent so the seasonal art on .vs-header reads through; the
	   background-color there is the fallback whenever the season is off. */
	background-color: transparent;
	border-radius: var(--n-r-lg);
	box-shadow: var(--n-raise);
}

.vs-header__top {
	display: flex;
	align-items: center;
	gap: 18px;
}

.vs-logo {
	display: block;
	flex: none;
	line-height: 0;
}

/* Wordmark: the artwork was a bitmap in the old accent blue, which clashed on
   the dark surface. --n-text keeps it legible in both themes - a hardcoded
   #fff disappeared against the light header. */
.vs-logo__text {
	display: block;
	color: var(--n-text);
	font-family: var(--n-font);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
}

.vs-logo:hover .vs-logo__text {
	color: var(--n-accent);
	transition: color .2s ease;
}

.vs-logo__img {
	max-height: 30px;
	width: auto;
}

.vs-nav {
	margin-top: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Seasonal header art.
   It sits on .vs-header__inner as a real background, not as an overlay on the
   nav: painting it on the nav alone confined the art to one horizontal band,
   which read as stripes. vstream.js stamps the resolved season onto the header
   as data-vs-season. The image is the bottom layer and a translucent surface
   wash goes on top of it, so the art never covers the text itself. */
[data-vs-season-bg] {
	background-image:
		linear-gradient(var(--vs-wash-top), var(--vs-wash-bottom)),
		var(--vs-season-img, none);
	background-size: cover, cover;
	background-position: center, center bottom;
	background-repeat: no-repeat, no-repeat;
	background-color: var(--n-bg);
}

/* Real photographs, CC0 / public domain, fetched through the Openverse API.
   These replace the earlier hand-built SVG art. Note the source resolution:
   the header crops this to a ~150px band behind a heavy gradient wash, so the
   three 960px files are a 1.35x upscale at the widest desktop container. That
   is invisible under the wash; do not "fix" it by re-encoding. cdn.stocksnap.io
   serves only 960w thumbs and exposes no larger variant, so 960px is the
   ceiling for those; only the Wikimedia-sourced summer shot exceeds it. */
[data-vs-season-bg][data-vs-season="spring"] { --vs-season-img: url(../images/season-spring.jpg); }
[data-vs-season-bg][data-vs-season="summer"] { --vs-season-img: url(../images/season-summer.jpg); }
[data-vs-season-bg][data-vs-season="autumn"] { --vs-season-img: url(../images/season-autumn.jpg); }
[data-vs-season-bg][data-vs-season="winter"] { --vs-season-img: url(../images/season-winter.jpg); }

/* Wash strength: light theme keeps a lot of the art, dark theme needs more
   surface to hold the pills against the darker palette. */
[data-vs-season-bg] {
	--vs-wash-top: var(--n-float-35);
	--vs-wash-bottom: var(--n-float-90);
}

html[data-vs-theme="dark"] [data-vs-season-bg] {
	--vs-wash-top: rgba(35, 40, 51, .62);
	--vs-wash-bottom: rgba(35, 40, 51, .93);
}

.vs-nav__list {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: nowrap;
}

.vs-nav__item {
	display: block;
}

/* Category buttons.
   The previous recipe used --n-raise-sm, whose white/dark pair was tuned for a
   cool grey page. On the warm seasonal header the white highlight disappeared
   into the button and the row read as flat. These are solid-button shadows
   instead: a top inner highlight plus a two-step drop shadow, which stay
   legible over a photo, a gradient or a flat fill alike. The radius is a
   deliberate 16px rather than a 999px stadium, which also stops the horizontal
   scroller from slicing a half-round pill off at the end of the row. */
.vs-nav__link,
.vs-nav .category-link {
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: 8px 15px;
	border-radius: 16px;
	background-color: var(--n-bg);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 1px 2px rgba(28, 34, 52, .10),
		0 6px 14px rgba(28, 34, 52, .16);
	color: var(--n-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}

/* Hover lifts the button off the surface, which is what sells the depth. */
.vs-nav__link:hover,
.vs-nav .category-link:hover {
	transform: translateY(-1px);
	color: var(--n-accent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 2px 4px rgba(28, 34, 52, .12),
		0 10px 20px rgba(28, 34, 52, .20);
}

/* The active item keeps a real raised edge and an accent fill, so selection is
   told by colour and by depth at once instead of a flat 1.5px ring. */
.vs-nav__link.is-active,
.vs-nav .category-link.is-active {
	color: var(--n-accent);
	background-color: var(--n-accent-soft);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .8),
		0 1px 2px rgba(28, 34, 52, .10),
		0 6px 14px rgba(28, 34, 52, .18);
}

/* On the dark surface the top highlight has to come down, otherwise every
   button looks lit from a light theme. */
html[data-vs-theme="dark"] .vs-nav__link,
html[data-vs-theme="dark"] .vs-nav .category-link {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .06),
		0 1px 2px rgba(0, 0, 0, .30),
		0 6px 14px rgba(0, 0, 0, .38);
}

html[data-vs-theme="dark"] .vs-nav__link:hover,
html[data-vs-theme="dark"] .vs-nav .category-link:hover {
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .08),
		0 2px 4px rgba(0, 0, 0, .34),
		0 10px 20px rgba(0, 0, 0, .46);
}

/* The genre list is longer than the header, so the row scrolls and these
   buttons step it. They stay hidden until there is actually something to see.
   The pills carry a 3px/8px dual shadow; a scroll container clips at its own
   padding box, so without vertical room the highlight is sliced off and reads
   as a cut white edge. The padding gives the shadow space and the negative
   margin takes the extra height back out of the header. */
.vs-nav__list {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 2px;
	margin: -12px -2px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}

.vs-nav__list::-webkit-scrollbar {
	display: none;
}

.vs-nav__scroll {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--n-bg);
	color: var(--n-muted);
	box-shadow: var(--n-raise-sm);
	cursor: pointer;
	transition: color .2s ease;
}

.vs-nav__scroll:hover {
	color: var(--n-accent);
}

.vs-nav__scroll[hidden] {
	display: none;
}

/* Air catmenu internals are neutralised inside the Vstream nav */
.vs-nav .category-menu__item {
	padding: 0;
	float: none;
	display: block;
}

.vs-nav .category-menu__row {
	display: block;
	position: relative;
}

.vs-nav .category-link__icon,
.vs-nav .category-link__count,
.vs-nav .category-menu__toggle,
.vs-nav .category-menu__submenu {
	display: none;
}

.vs-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.vs-search {
	display: flex;
	align-items: center;
	/* Without flex:none the header squeezed it and clipped the placeholder. */
	flex: none;
	width: 264px;
	height: 42px;
	padding: 0 6px 0 15px;
	border-radius: var(--n-r-pill);
	/* Same raised surface as the "Войти" toggle. The earlier deep inset read as a
	   hole punched into the header and the flat hairline version looked like an
	   input pasted on top; --n-bg + --n-raise-sm matches the real buttons. */
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	border: 0;
	transition: box-shadow .2s ease;
}

/* Same reasoning as the nav pills: an inset ring on this pill painted dark
   corners in the dark theme, so hover and focus use flat surface + accent ring. */
.vs-search:hover {
	background-color: var(--n-float-90);
	box-shadow: var(--n-raise-sm);
}

.vs-search:focus-within {
	background-color: var(--n-float-90);
	box-shadow: var(--n-raise-sm), 0 0 0 2px var(--n-accent);
}

.vs-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.vs-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--n-text);
	font-size: 14px;
	font-family: inherit;
}

.vs-search__input::placeholder {
	color: var(--n-faint);
}

.vs-search__btn {
	flex: none;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--n-faint);
	cursor: pointer;
	transition: color .2s ease, box-shadow .2s ease;
}

.vs-search__btn:hover {
	color: var(--n-accent);
	box-shadow: var(--n-inset-sm);
}

.vs-burger {
	display: none;
	width: 42px;
	height: 42px;
	padding: 0;
	background-color: var(--n-bg);
	border: 0;
	border-radius: 50%;
	box-shadow: var(--n-raise-sm);
	cursor: pointer;
	flex: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.vs-burger__line {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: var(--n-r-xs);
	background-color: var(--n-muted);
	transition: transform .25s ease, opacity .25s ease;
}

.vs-burger[aria-expanded="true"] .vs-burger__line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.vs-burger[aria-expanded="true"] .vs-burger__line:nth-child(2) {
	opacity: 0;
}

.vs-burger[aria-expanded="true"] .vs-burger__line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------------------------------------ form controls --- */
/* Air's base skin paints form controls with light colours and selectors like
   input[type=...] — these two-class rules outrank it so the controls follow
   the active theme in both light and dark mode. */

.vs-body .vs-search__input {
	background-color: transparent;
	color: var(--n-text);
	caret-color: var(--n-text);
}

.vs-body .vs-form-input {
	background-color: var(--n-bg);
	color: var(--n-text);
	caret-color: var(--n-text);
}

.vs-body .vs-comments textarea,
.vs-body .vs-comments input[type="text"],
.vs-body .vs-comments input[type="email"],
.vs-body .vs-comments input[type="url"] {
	background-color: var(--n-bg);
	color: var(--n-text);
	caret-color: var(--n-text);
}

.vs-body .vs-comments input::placeholder,
.vs-body .vs-comments textarea::placeholder,
.vs-body .vs-form-input::placeholder,
.vs-body .vs-search__input::placeholder {
	color: var(--n-faint);
	opacity: 1;
}

/* ------------------------------------------------------------ user menu --- */

.vs-user {
	position: relative;
	flex: none;
}

.vs-user__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 14px 0 6px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	cursor: pointer;
	list-style: none;
	color: var(--n-text);
	font-size: 14px;
	font-weight: 600;
	transition: box-shadow .2s ease, color .2s ease;
}

.vs-user__toggle::-webkit-details-marker {
	display: none;
}

.vs-user__toggle:hover {
	color: var(--n-accent);
}

/* Kept lifted rather than carved: an inset ring on a 999px pill renders the
   near-black --n-darker as dark arcs in the corners, which was most visible on
   the account toggle and the search field. */
.vs-user[open] .vs-user__toggle,
.vs-user__toggle:hover {
	color: var(--n-accent);
	box-shadow: -3px -3px 8px var(--n-light), 3px 3px 8px var(--n-dark);
}

.vs-user__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	box-shadow: 0 2px 6px rgba(163, 177, 198, .6);
}

.vs-user__avatar--lg {
	width: 46px;
	height: 46px;
}

.vs-user__caret {
	width: 13px;
	height: 13px;
	color: var(--n-faint);
	transition: transform .2s ease;
}

.vs-user[open] .vs-user__caret {
	transform: rotate(180deg);
}

.vs-user__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.vs-user__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 14px);
	z-index: 60;
	min-width: 250px;
	padding: 8px;
	background-color: var(--n-bg);
	border-radius: var(--n-r);
	box-shadow: var(--n-raise-lg);
}

.vs-user__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px 16px;
	margin-bottom: 6px;
	border-radius: var(--n-r-sm);
	box-shadow: var(--n-inset-sm);
}

.vs-user__id {
	min-width: 0;
}

.vs-user__profile {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--n-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vs-user__group {
	display: block;
	font-size: 12px;
	color: var(--n-muted);
}

.vs-user__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: var(--n-r-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--n-muted);
	transition: box-shadow .2s ease, color .2s ease;
}

.vs-user__list a:hover {
	color: var(--n-accent);
	box-shadow: var(--n-inset-sm);
}

.vs-user__list .icon {
	width: 16px;
	height: 16px;
	color: var(--n-faint);
}

.vs-user__list a:hover .icon {
	color: var(--n-accent);
}

.vs-user__count {
	margin-left: auto;
	font-size: 12px;
	color: var(--n-faint);
}

.vs-user__count b {
	color: var(--n-accent);
}

.vs-user__foot {
	padding: 10px 6px 4px;
	margin-top: 6px;
	border-radius: var(--n-r-sm);
	box-shadow: var(--n-inset-sm);
}

.vs-user__foot .vs-btn {
	width: 100%;
	height: 40px;
}

.vs-user__panel--login {
	min-width: 300px;
	padding: 18px;
}

.vs-form-row {
	margin-bottom: 12px;
}

.vs-form-label {
	display: block;
	margin: 0 0 6px 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--n-muted);
}

.vs-form-input {
	width: 100%;
	height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--n-r-pill);
	background-color: var(--n-bg);
	box-shadow: var(--n-inset-sm);
	color: var(--n-text);
	font-size: 14px;
	font-family: inherit;
	outline: none;
}

.vs-form-input:focus {
	box-shadow: var(--n-inset);
}

.vs-form-input::placeholder {
	color: var(--n-faint);
}

.vs-form-actions {
	margin-top: 18px;
}

.vs-form-actions .vs-btn {
	width: 100%;
}

.vs-user__links {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 500;
}

.vs-soc-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	border-radius: var(--n-r-sm);
	box-shadow: var(--n-inset-sm);
	padding: 16px;
}

.vs-soc-links:not(:has(a)) {
	display: none;
}

.vs-soc-links__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	color: var(--n-muted);
}

.vs-soc-links__item:hover {
	color: var(--n-accent);
	box-shadow: var(--n-inset-sm);
}

.vs-soc-links__item .icon {
	width: 16px;
	height: 16px;
}

/* ---------------------------------------------------------------- hero --- */

.vs-banner {
	padding: 26px 0 0;
}

.vs-slider {
	position: relative;
	overflow: hidden;
	/* the clipper must carry the radius, otherwise it squares off the
	   slides' corners — and it carries the glow the slides cannot show
	   through an overflow:hidden parent */
	border-radius: var(--n-r-lg);
	box-shadow: var(--n-raise-lg);
	background-color: var(--n-bg);
}

.vs-slider__track {
	display: flex;
	width: 100%;
}

.vs-slider__track.is-animating {
	transition: transform .65s cubic-bezier(.4, 0, .2, 1);
}

.vs-slide {
	flex: 0 0 100%;
	max-width: 100%;
	display: flex;
	align-items: stretch;
	background-color: var(--n-bg);
	overflow: hidden;
	position: relative;
	/* Tall enough that a 2:3 poster reads as a poster rather than a thumbnail. */
	min-height: 560px;
}

.vs-slide__left {
	flex: 0 0 60%;
	max-width: 60%;
	position: relative;
	z-index: 2;
	padding: 46px 20px 46px 46px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vs-slide__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 5px 14px;
	margin-bottom: 18px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-gold-soft);
	color: #b97c05;
	font-size: 13px;
	font-weight: 800;
}

.vs-slide__badge .icon {
	width: 14px;
	height: 14px;
}

.vs-slide__title {
	color: var(--n-ink);
	font-size: 46px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.5px;
	margin: 0 0 18px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.vs-slide__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

/* a full Kinorium genre list is long — keep one line, ellipsis the rest */
.vs-slide__tags .vs-chip {
	max-width: 100%;
	line-height: 26px;
}

/* Genres in the hero are chips, matching the cards. The old single line of
   comma-separated text was long enough to wrap over the poster column. */
.vs-slide__genres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -4px 0 14px;
	padding: 0;
	list-style: none;
	max-width: 46ch;
}

.vs-slide__genre {
	font-size: 12px;
	line-height: 1;
	color: var(--n-text);
	background-color: var(--n-bg);
	border-radius: var(--n-r-pill);
	padding: 7px 13px;
	box-shadow: var(--n-inset-sm);
	white-space: nowrap;
}

.vs-slide__text {
	font-size: 15px;
	line-height: 1.7;
	color: var(--n-muted);
	margin: 0 0 26px;
	max-width: 460px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* the hero column is a flex box — keep the CTA at its natural width */
.vs-slide__left > .vs-btn {
	align-self: flex-start;
}

.vs-slide__right {
	/* Narrower than the text side so the portrait poster is not marooned in a
	   half-width column. */
	flex: 0 0 40%;
	max-width: 40%;
	position: relative;
	padding: 26px 26px 26px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.vs-slide__frame {
	position: relative;
	/* Posters are portrait 2:3. The frame used to take the full height of its
	   column, so it was landscape and the artwork got cropped or letterboxed.
	   Driving the width from the height keeps the frame exactly poster-shaped
	   without letting a 2:3 box blow the hero's height up. */
	height: 100%;
	width: auto;
	aspect-ratio: 2 / 3;
	max-width: 100%;
	margin-inline: auto;
	border-radius: var(--n-r);
	overflow: hidden;
	background-color: var(--n-bg);
	box-shadow: var(--n-inset);
}

.vs-slide__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.vs-slider__controls {
	position: absolute;
	left: 0;
	/* The pager used to sit under the synopsis, where it crowded the copy, and
	   before that it was centred on the seam and landed on the poster frame.
	   Right-aligned inside the text column it clears the synopsis, the "Смотреть"
	   button and the poster alike. */
	left: 0;
	right: auto;
	width: 60%;
	bottom: 14px;
	padding-right: 20px;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	pointer-events: none;
}

.vs-slider__controls > * {
	pointer-events: auto;
}

.vs-slider__arrow {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	color: var(--n-muted);
	cursor: pointer;
	transition: color .2s ease, box-shadow .2s ease;
}

.vs-slider__arrow:hover {
	color: var(--n-accent);
	box-shadow: var(--n-inset-sm);
}

.vs-slider__dots {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 8px;
}

.vs-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: var(--n-r-pill);
	background-color: var(--n-darker);
	cursor: pointer;
	transition: all .25s ease;
}

.vs-slider__dot.is-active {
	width: 26px;
	background-color: var(--n-accent);
}

/* ------------------------------------------------------------- sections --- */

.vs-section {
	padding: 52px 0 0;
}

.vs-section .vs-container {
	position: relative;
}

.vs-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}

.vs-section__title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--n-ink);
	margin: 0;
}

.vs-section__note {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--n-muted);
}

.vs-section__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	color: var(--n-muted);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	transition: color .2s ease, box-shadow .2s ease;
}

.vs-section__link:hover {
	color: var(--n-accent);
	box-shadow: var(--n-inset-sm);
}

.vs-row {
	display: flex;
	--vs-row-gap: 26px;
	gap: var(--vs-row-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* A horizontal scroller clips its children's shadows, so the row needs a
	   little breathing room. It used to pull itself out by the same amount
	   (negative margins), which made the track wider than the container, pushed
	   scrollLeft to 16 and left the first card flush against the edge. Padding
	   alone keeps the row inside the container. */
	padding: 8px 16px 20px;
	margin: 0;
	/* Without this the snap port aligns the first card to the padding edge and
	   scrolls the track by exactly the side padding, so the leading card ends up
	   flush against the container with its shadow cut. */
	scroll-padding-inline: 16px;
}

.vs-row::-webkit-scrollbar {
	display: none;
}

/* Anchored to the section head, not to the row, so they sit on the same line as
   the title instead of hanging -4px over it. The pair is laid out from the
   right edge with a flex row, so the gap stays right whichever button is
   hidden - a hardcoded right:50px left a gap when only one was shown. */
/* Lives inside .vs-section__head now, so the head's align-items:center does the
   vertical centring and space-between pushes the pair to the right edge. No
   absolute positioning, so nothing can overlap the "Все публикации" link. */
.vs-section__navs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	margin-left: auto;
	padding-left: 12px;
}

.vs-row__nav {
	position: static;
	width: 40px;
	height: 40px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	color: var(--n-muted);
	cursor: pointer;
	opacity: 1;
	visibility: visible;
	transition: color .2s ease, box-shadow .2s ease;
}

.vs-row__nav:hover {
	color: var(--n-accent);
	box-shadow: var(--n-inset-sm);
}

.vs-row__nav[hidden] {
	display: none;
}

/* ----------------------------------------------------------------- card --- */

.vs-card {
	/* Width is derived from the row so a whole number of cards fills the
	   container exactly. A fixed 268px left the fourth card clipped and a
	   sliver of the fifth showing, which read as a rendering fault. */
	flex: 0 0 calc((100% - 3 * var(--vs-row-gap, 26px)) / 4);
	max-width: calc((100% - 3 * var(--vs-row-gap, 26px)) / 4);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	padding: 14px;
	background-color: var(--n-bg);
	border-radius: var(--n-r);
	box-shadow: var(--n-raise);
	transition: transform .3s ease, box-shadow .3s ease;
}

/* Rows scroll horizontally, so lifting the card made the whole row shift under
   the cursor and clipped the top edge against the section head. The rows keep a
   static surface; only the poster art zooms. */
.vs-card:hover {
	box-shadow: var(--n-raise);
}

.vs-card:hover .vs-card__img {
	transform: scale(1.04);
}

.vs-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--n-r-sm);
	background-color: var(--n-bg);
	box-shadow: var(--n-inset-sm);
	aspect-ratio: 2 / 3;
}

.vs-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.vs-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

/* Removed: a second hover rule for the poster art. The one above covers both
   grid and row cards, and two rules at different scales (1.04 / 1.06) made the
   zoom strength depend on which stylesheet block won. */

.vs-card__cat {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 4;
	padding: 4px 12px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-float-88);
	backdrop-filter: blur(6px);
	color: var(--n-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	/* A publication can sit in several genres at once, and {link-category}
	   emits one anchor per genre with no separator - without this the badge
	   rendered as one mashed word and spilled over the poster. */
	display: flex;
	align-items: center;
	max-width: calc(100% - 20px);
	overflow: hidden;
	white-space: nowrap;
}

/* The badge marks the primary section. A publication can sit in several genres
   at once and {link-category} emits one <a class="cat-link"> per genre, so only
   the first is shown here - the full list already appears under the card. */
.vs-card__cat .cat-link + .cat-link {
	display: none;
}
}

.vs-card__score {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-gold);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	box-shadow: 0 4px 10px rgba(255, 176, 32, .45);
}

.vs-card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--n-float-90);
	box-shadow: var(--n-raise);
	opacity: 0;
	transform: scale(.7);
	transition: opacity .3s ease, transform .3s ease;
}

.vs-card:hover .vs-card__play {
	opacity: 1;
	transform: scale(1);
}

.vs-card__play .icon {
	width: 20px;
	height: 20px;
	color: var(--n-accent);
	margin-left: 3px;
}

.vs-card__pin {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 4;
	padding: 4px 10px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.vs-card__body {
	padding: 16px 6px 4px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.vs-card__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--n-ink);
	margin: 0 0 10px;
}

.vs-card__title a {
	color: var(--n-ink);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.vs-card__title a:hover {
	color: var(--n-accent);
}

.vs-card__text {
	font-size: 13px;
	line-height: 1.6;
	color: var(--n-muted);
	margin: 0 0 14px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.vs-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
}

.vs-card__tools {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding: 8px 10px;
	border-radius: var(--n-r-sm);
	box-shadow: var(--n-inset-sm);
}

.vs-card__tools .icon-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	color: var(--n-muted);
	cursor: pointer;
	transition: color .2s ease, box-shadow .2s ease;
}

.vs-card__tools .icon-action:hover,
.vs-card__tools .icon-action.is-active {
	color: var(--n-accent);
	box-shadow: var(--n-inset-sm);
}

.vs-card__tools .icon {
	width: 15px;
	height: 15px;
}

.vs-card__more {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--n-faint);
}

.vs-card__more:hover {
	color: var(--n-accent);
}

.vs-card__note {
	font-size: 11px;
	color: var(--n-faint);
	margin: 0 0 8px;
}

/* Genre chips. The xfields hold the first three genres, so the row stays short
   enough to hold one line on a narrow card instead of clamping a long comma
   list the way the old <p> did. */
.vs-card__genres {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.vs-card__genre {
	font-size: 11px;
	line-height: 1;
	color: var(--n-muted);
	background-color: var(--n-bg);
	border-radius: var(--n-r-pill);
	padding: 5px 9px;
	box-shadow: var(--n-inset-sm);
	white-space: nowrap;
}

/* Film vs series sits with the year rather than the genre row, so it reads as
   metadata instead of a topic. */
.vs-chip--type {
	color: var(--n-accent);
}

/* Rating repeated in the meta row, next to the quality chip. The poster keeps
   its gold score badge, so without this the rating was only readable from the
   artwork and the row of chips showed quality but no verdict. */
.vs-chip--rate {
	color: #b97c05;
	background-color: var(--n-gold-soft);
	font-weight: 800;
}

html[data-vs-theme="dark"] .vs-chip--rate {
	color: #f0b429;
}

.vs-card__rate {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--n-muted);
}

/* ---------------------------------------------------------- cat tiles --- */

.vs-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 24px;
}

.vs-cat-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	height: 130px;
	padding: 18px;
	border-radius: var(--n-r);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise);
	overflow: hidden;
	text-align: center;
	color: var(--n-ink);
	transition: transform .3s ease, box-shadow .3s ease;
}

.vs-cat-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(140deg, rgba(91, 108, 255, .16), rgba(53, 192, 138, .16));
	opacity: 0;
	transition: opacity .3s ease;
}

.vs-cat-tile:hover {
	transform: translateY(-5px);
	box-shadow: -8px -8px 20px var(--n-light), 10px 12px 24px var(--n-dark);
	color: var(--n-ink);
}

.vs-cat-tile:hover::before {
	opacity: 1;
}

.vs-cat-tile__name {
	position: relative;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.vs-cat-tile__count {
	position: relative;
	font-size: 12px;
	font-weight: 600;
	color: var(--n-muted);
}

/* ----------------------------------------------------------- page head --- */

.vs-page {
	padding: 30px 0 20px;
}

/* Breadcrumbs. DLE emits "a В» text" inside a single link, so vstream.js splits
   the trail into .vs-crumb spans and marks the last one as --current; the pills
   and chevrons are then pure CSS. */
.vs-speedbar {
	font-size: 13px;
	color: var(--n-muted);
	margin-bottom: 24px;
}

.vs-speedbar .speedbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.vs-crumb,
.vs-speedbar a,
.vs-speedbar strong {
	display: inline-flex;
	align-items: center;
	position: relative;
	padding: 7px 13px;
	border-radius: var(--n-r-pill);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.vs-crumb,
.vs-speedbar a {
	color: var(--n-text);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	transition: color .2s ease, box-shadow .2s ease;
}

.vs-crumb:hover,
.vs-speedbar a:hover {
	color: var(--n-accent);
	box-shadow: var(--n-inset-sm);
}

.vs-crumb--current,
.vs-speedbar strong {
	color: var(--n-accent);
	background-color: var(--n-accent-soft);
	font-weight: 700;
}

/* Chevron between crumbs, drawn so the "В»" text DLE emits can be discarded. */
.vs-crumb + .vs-crumb::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -4px;
	border-top: 1.5px solid var(--n-faint);
	border-right: 1.5px solid var(--n-faint);
	transform: rotate(45deg);
}

.vs-sort {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 26px;
	font-size: 14px;
	color: var(--n-muted);
}

.vs-sort__label {
	font-weight: 700;
}

.vs-intro {
	margin-bottom: 32px;
}

.vs-page-title {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--n-ink);
	margin: 0 0 10px;
}

.vs-page-desc {
	font-size: 15px;
	color: var(--n-muted);
	margin: 0;
}

.vs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: 26px;
}

/* Inside the grid the card is a grid item, so a percentage max-width resolves
   against the 280px track, not the 1200px container - it collapsed the card to
   51px (25% of the track) and squeezed the poster to a sliver. The track from
   grid-template-columns already controls the width here. */
.vs-grid > .vs-card {
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
}

.vs-grid > *:not(.vs-card) {
	grid-column: 1 / -1;
}

.vs-pager {
	margin: 44px 0 10px;
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.vs-pager a,
.vs-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	color: var(--n-muted);
	font-size: 14px;
	font-weight: 700;
}

.vs-pager a:hover {
	color: var(--n-accent);
	box-shadow: var(--n-inset-sm);
}

.vs-pager .current,
.vs-pager b {
	background-color: var(--n-accent);
	color: #fff;
	box-shadow: none;
}

/* -------------------------------------------------------------- footer --- */

.vs-footer {
	margin-top: 90px;
	padding: 0 0 10px;
}

.vs-footer__inner {
	background-color: var(--n-bg);
	border-radius: var(--n-r-lg);
	box-shadow: var(--n-raise);
	padding: 52px 46px 34px;
}

/* Slimmed-down footer: brand, one line of copy, Telegram link, copyright.
   The old link columns, RSS and feedback blocks were removed. */
.vs-footer__inner--slim {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 44px 46px 30px;
	text-align: center;
}

.vs-footer__logo {
	line-height: 1;
}

.vs-footer__inner--slim .vs-footer__text {
	max-width: 52ch;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--n-muted);
}

.vs-footer__tg {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 22px;
	border-radius: var(--n-r-pill);
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	color: var(--n-text);
	font-size: 14px;
	font-weight: 600;
	transition: color .2s ease, box-shadow .2s ease;
}

.vs-footer__tg .icon {
	width: 18px;
	height: 18px;
}

.vs-footer__tg:hover {
	color: var(--n-accent);
	box-shadow: var(--n-inset-sm);
}

.vs-footer__inner--slim .vs-footer__bottom {
	margin-top: 6px;
}

.vs-footer__lead {
	font-size: 22px;
	line-height: 1.6;
	font-weight: 500;
	color: var(--n-text);
	max-width: 760px;
	margin: 0 0 30px;
}

.vs-footer__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 44px;
}

.vs-store {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 52px;
	padding: 0 24px;
	background-color: var(--n-bg);
	border-radius: var(--n-r-pill);
	box-shadow: var(--n-raise-sm);
	color: var(--n-text);
	font-size: 14px;
	font-weight: 700;
	transition: color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.vs-store:hover {
	color: var(--n-accent);
	transform: translateY(-2px);
	box-shadow: var(--n-inset-sm);
}

.vs-store .icon {
	width: 20px;
	height: 20px;
	color: var(--n-accent);
}

.vs-footer__cols {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 26px;
	margin-top: 8px;
	padding: 40px 34px;
	border-radius: var(--n-r);
	box-shadow: var(--n-inset-sm);
}

.vs-footer__col h5 {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--n-ink);
	margin: 0 0 16px;
}

.vs-footer__col a {
	display: block;
	padding: 5px 0;
	font-size: 14px;
	color: var(--n-muted);
}

.vs-footer__col a:hover {
	color: var(--n-accent);
}

.vs-footer__text {
	font-size: 13px;
	line-height: 1.7;
	color: var(--n-muted);
	margin: 0 0 10px;
}

.vs-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 40px;
	padding-top: 24px;
	font-size: 13px;
	color: var(--n-faint);
}

.vs-footer__bottom a {
	color: var(--n-muted);
	font-weight: 600;
}

/* ---------------------------------------------------------- theme toggle --- */

.vs-theme-toggle {
	position: relative;
	flex: none;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: var(--n-bg);
	box-shadow: var(--n-raise-sm);
	color: var(--n-muted);
	cursor: pointer;
	transition: color .2s ease, box-shadow .2s ease;
}

.vs-theme-toggle:hover {
	color: var(--n-accent);
	box-shadow: -3px -3px 8px var(--n-light), 3px 3px 8px var(--n-dark);
}

.vs-theme-toggle .icon {
	width: 19px;
	height: 19px;
	grid-area: 1 / 1;
	transition: opacity .25s ease, transform .3s ease;
}

.vs-theme-toggle {
	display: grid;
	place-items: center;
}

.vs-theme-toggle__sun {
	opacity: 0;
	transform: rotate(-70deg) scale(.6);
}

.vs-theme-toggle__moon {
	opacity: 1;
	transform: rotate(0) scale(1);
}

html[data-vs-theme="dark"] .vs-theme-toggle__sun {
	opacity: 1;
	transform: rotate(0) scale(1);
}

html[data-vs-theme="dark"] .vs-theme-toggle__moon {
	opacity: 0;
	transform: rotate(70deg) scale(.6);
}

/* ------------------------------------------------------------- to top --- */

.vs-to-top {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 70;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: var(--n-bg);
	box-shadow: var(--n-raise);
	color: var(--n-accent);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: all .3s ease;
}

.vs-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.vs-to-top:hover {
	box-shadow: var(--n-inset);
}

/* ---------------------------------------------------------- responsive --- */

@media only screen and (max-width: 1200px) {
	.vs-row {
		--vs-row-gap: 22px;
	}

	.vs-card {
		flex: 0 0 calc((100% - 2 * var(--vs-row-gap)) / 3);
		max-width: calc((100% - 2 * var(--vs-row-gap)) / 3);
	}

	.vs-search {
		width: 190px;
	}

	.vs-slide {
		min-height: 400px;
	}

	.vs-slide__title {
		font-size: 38px;
	}

	.vs-slide__left {
		padding: 34px 16px 34px 34px;
	}
}

@media only screen and (max-width: 992px) {
	.vs-header {
		padding-top: 14px;
	}

	.vs-header__inner {
		border-radius: var(--n-r);
		padding: 14px 16px 12px;
	}

	.vs-burger {
		display: flex;
		margin-left: auto;
	}

	.vs-nav {
		display: none;
		overflow: visible;
	}

	.vs-nav.is-open {
		display: block;
	}

	.vs-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		/* Symmetric padding, otherwise the bottom 4px re-clips the pill shadow
		   in the stacked layout. */
		padding: 12px 2px;
		margin: -12px -2px;
		flex-wrap: wrap;
	}

	.vs-nav__link,
	.vs-nav .category-link {
		padding: 12px 18px;
	}

	.vs-header__actions {
		flex: 0 1 auto;
		justify-content: flex-end;
	}

	.vs-slide {
		min-height: 340px;
	}

	.vs-slide__left {
		flex: 0 0 58%;
		max-width: 58%;
		padding: 26px 14px 26px 26px;
	}

	.vs-slide__right {
		flex: 0 0 42%;
		max-width: 42%;
		padding: 20px 20px 20px 0;
	}

	.vs-slide__title {
		font-size: 30px;
	}

	.vs-slide__text {
		display: none;
	}

	.vs-section__title {
		font-size: 21px;
	}

	.vs-page-title {
		font-size: 27px;
	}

	.vs-footer__inner {
		padding: 40px 30px 28px;
	}

	.vs-footer__cols {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media only screen and (max-width: 768px) {
	.vs-row {
		--vs-row-gap: 18px;
	}

	.vs-card {
		flex: 0 0 calc((100% - var(--vs-row-gap)) / 2);
		max-width: calc((100% - var(--vs-row-gap)) / 2);
	}

	.vs-user__name {
		display: none;
	}

	.vs-cat-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}

	.vs-cat-tile {
		height: 108px;
	}

	.vs-footer__cols {
		grid-template-columns: repeat(2, 1fr);
	}

	.vs-footer__bottom {
		flex-direction: column;
		text-align: center;
	}

	.vs-row__nav,
	.vs-section__navs {
		display: none;
	}

.vs-row {
	/* The row used to pull itself out by its own side padding so card shadows
	   were not clipped by the scroller. On a phone that negative margin is wider
	   than the container and pushes the document into horizontal scroll, so keep
	   the padding (shadows still breathe) but drop the pull-back. */
	margin-left: 0;
	margin-right: 0;
}

	/* arrows are hidden on small screens, so nothing is reserved for them */
}

@media only screen and (max-width: 576px) {
	.vs-search {
		display: none;
	}

	.vs-banner {
		padding-top: 18px;
	}

	.vs-slide {
		min-height: 440px;
		align-items: flex-end;
	}

	.vs-slide__right {
		position: absolute;
		inset: 0;
		max-width: 100%;
		padding: 0;
		z-index: 1;
	}

	.vs-slide__frame {
		border-radius: var(--n-r-lg);
		box-shadow: none;
	}

	.vs-slide__frame::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, var(--n-bg) 12%, var(--n-float-35) 55%, var(--n-float-10) 100%);
	}

	.vs-slide__left {
		flex: 0 0 100%;
		max-width: 100%;
		padding: 24px 22px 52px;
		z-index: 2;
		justify-content: flex-end;
	}

	/* dots alone on narrow screens — arrows would sit on the CTA */
	.vs-slider__arrow {
		display: none;
	}

	.vs-slider__controls {
		bottom: 12px;
	}

	.vs-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.vs-slide__title {
		font-size: 26px;
		margin-bottom: 14px;
		-webkit-line-clamp: 2;
	}

	.vs-slide__text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		margin-bottom: 18px;
	}

	.vs-card {
		flex: 0 0 76%;
	}

	.vs-grid {
		grid-template-columns: 1fr;
	}

	.vs-footer__cols {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.vs-footer__inner {
		padding: 32px 20px 24px;
	}

	.vs-store {
		flex: 1 1 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vs-slider__track.is-animating {
		transition: none;
	}

	.vs-row {
		scroll-behavior: auto;
	}

	.vs-card,
	.vs-card__img,
	.vs-cat-tile,
	.vs-btn,
	.vs-store {
		transition: none;
	}
}