/* =========================================================================
   cy-redesign.css  —  DIRECTION: AURORA FUCHSIA -> VIOLET
   Loaded LAST (after modern.css). Re-themes the whole site by redefining
   :root tokens (fuchsia hue 330) + layering gradients/glass/shadows.
   Layout / structure / element order are intentionally left untouched.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS  — drive the entire palette off a single fuchsia->violet system
   ------------------------------------------------------------------------- */
:root {
	/* Primary accent: juicy fuchsia/magenta (was coral hue 22) */
	--brand-l: 62%;
	--brand-c: 0.18;
	--brand-h: 330;

	/* Secondary aurora anchor: violet */
	--cy-violet-l: 58%;
	--cy-violet-c: 0.17;
	--cy-violet-h: 295;
	--cy-violet: oklch(var(--cy-violet-l) var(--cy-violet-c) var(--cy-violet-h));
	--cy-violet-deep: oklch(52% 0.18 288);

	/* Signature gradients (reused everywhere: CTAs, badges, active states) */
	--grad-brand: linear-gradient(135deg,
		oklch(66% 0.20 332) 0%,
		oklch(60% 0.19 318) 42%,
		oklch(56% 0.18 292) 100%);
	--grad-brand-hover: linear-gradient(135deg,
		oklch(62% 0.21 332) 0%,
		oklch(56% 0.20 316) 45%,
		oklch(51% 0.19 290) 100%);
	--grad-brand-soft: linear-gradient(135deg,
		color-mix(in srgb, var(--c-primary) 14%, transparent),
		color-mix(in srgb, var(--cy-violet) 14%, transparent));

	/* Sheen used on hover lifts */
	--cy-sheen: linear-gradient(120deg, transparent 30%,
		rgba(255,255,255,.28) 50%, transparent 70%);

	/* Accent recolour: shift teal-ish accent toward a cool cyan that
	   complements fuchsia/violet without clashing */
	--c-accent: oklch(74% 0.10 215);
	--c-accent-hover: oklch(from var(--c-accent) calc(l - 0.06) c h);

	/* Slightly larger, softer radii for premium feel */
	--c-radius: 14px;
	--c-radius-sm: 10px;
	--c-radius-lg: 22px;

	/* Brand-tinted glow used in soft surfaces / focus */
	--cy-glow: oklch(from var(--c-primary) l c h / 0.30);

	/* Layered, fuchsia-tinted shadows (light theme) */
	--c-shadow-sm:
		0 1px 2px oklch(45% 0.10 320 / .06),
		0 1px 3px oklch(45% 0.10 320 / .07);
	--c-shadow-md:
		0 6px 18px oklch(45% 0.12 320 / .10),
		0 2px 6px oklch(45% 0.10 320 / .06);
	--c-shadow-lg:
		0 18px 44px oklch(45% 0.14 320 / .16),
		0 6px 16px oklch(45% 0.12 320 / .08);
}

/* Deeper, cooler shadows in dark theme (override modern.css dark shadows too) */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--c-shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
		--c-shadow-md: 0 6px 18px rgba(0,0,0,.50), 0 2px 6px rgba(20,8,30,.35);
		--c-shadow-lg: 0 18px 44px rgba(0,0,0,.60), 0 6px 16px oklch(20% 0.10 320 / .35);
	}
}
:root[data-theme="dark"] {
	--c-shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
	--c-shadow-md: 0 6px 18px rgba(0,0,0,.50), 0 2px 6px rgba(20,8,30,.35);
	--c-shadow-lg: 0 18px 44px rgba(0,0,0,.60), 0 6px 16px oklch(20% 0.10 320 / .35);
}

/* -------------------------------------------------------------------------
   2. BODY — faint aurora mesh background (very restrained)
   ------------------------------------------------------------------------- */
body {
	background-image:
		radial-gradient(900px 600px at 12% -6%,
			oklch(70% 0.16 332 / 0.10), transparent 60%),
		radial-gradient(820px 560px at 96% 4%,
			oklch(64% 0.16 290 / 0.09), transparent 62%),
		radial-gradient(1000px 700px at 50% 118%,
			oklch(66% 0.14 318 / 0.06), transparent 60%) !important;
	background-attachment: fixed, fixed, fixed;
	background-repeat: no-repeat;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) body {
		background-image:
			radial-gradient(900px 600px at 12% -6%,
				oklch(58% 0.18 332 / 0.16), transparent 60%),
			radial-gradient(820px 560px at 96% 4%,
				oklch(52% 0.18 290 / 0.14), transparent 62%),
			radial-gradient(1000px 700px at 50% 120%,
				oklch(54% 0.16 312 / 0.10), transparent 60%) !important;
	}
}
:root[data-theme="dark"] body {
	background-image:
		radial-gradient(900px 600px at 12% -6%,
			oklch(58% 0.18 332 / 0.16), transparent 60%),
		radial-gradient(820px 560px at 96% 4%,
			oklch(52% 0.18 290 / 0.14), transparent 62%),
		radial-gradient(1000px 700px at 50% 120%,
			oklch(54% 0.16 312 / 0.10), transparent 60%) !important;
}

/* -------------------------------------------------------------------------
   3. SCROLLBAR / SELECTION / GLOBAL FOCUS RING
   ------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--c-primary) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: linear-gradient(var(--cy-violet), var(--c-primary));
	border-radius: 999px;
	border: 3px solid transparent;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(var(--cy-violet-deep), var(--c-primary-hover));
	background-clip: padding-box;
}

::selection {
	background: color-mix(in srgb, var(--c-primary) 32%, transparent);
	color: var(--c-text);
}

:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
	border-radius: 4px;
}
/* Recolour the hardcoded coral focus rings from modern.css */
.site-brand:focus-visible,
.site-nav a:focus-visible,
.mobile-menu__nav a:focus-visible,
.btn:focus-visible,
.menu-toggle:focus-visible {
	outline: 2px solid var(--c-primary-ring);
	outline-offset: 2px;
}

/* Global smooth micro-interactions on interactive elements */
a, button, .btn, input, select, textarea,
.profile-card, .sidebar-card, .topnews-item,
.search-hint__chip, .saw__link, .related-news-list a {
	transition:
		color .18s ease, background-color .18s ease, background .18s ease,
		border-color .18s ease, box-shadow .22s ease, transform .18s ease,
		filter .18s ease, opacity .18s ease;
}

/* -------------------------------------------------------------------------
   4. LINKS & HEADINGS
   ------------------------------------------------------------------------- */
a { color: var(--c-primary); }
a:hover { color: var(--cy-violet); }

h1, h2, h3 { letter-spacing: -0.02em !important; }
/* Subtle divider tint on the uppercase h6 section labels */
h6::after {
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--c-primary) 40%, var(--c-border)),
		var(--c-border) 55%) !important;
}

/* -------------------------------------------------------------------------
   5. STICKY GLASS HEADER + BRAND
   ------------------------------------------------------------------------- */
.site-header {
	background: light-dark(rgba(255,255,255,.72), oklch(20% 0.02 312 / .72)) !important;
	backdrop-filter: saturate(190%) blur(18px) !important;
	-webkit-backdrop-filter: saturate(190%) blur(18px) !important;
	border-bottom: 1px solid var(--c-border) !important;
	box-shadow: 0 1px 0 light-dark(rgba(255,255,255,.5), rgba(255,255,255,.04)) inset,
		0 10px 30px -24px light-dark(rgba(15,15,25,.35), rgba(0,0,0,.6));
}
/* (the coloured aurora hairline under the header was removed — a clean neutral
   divider + soft depth shadow read more premium and less "loud") */
.site-header__inner { position: relative; }

.site-brand { font-weight: 800; }
/* Clean, legible wordmark — solid ink, no rainbow text-fill. The pink heart
   mark already carries the brand colour, so the logotype stays crisp & premium. */
.site-brand span:last-child {
	background: none !important;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	color: var(--c-text);
}
/* Give the heart mark a soft fuchsia halo that warms up on hover */
.site-brand__logo {
	filter: drop-shadow(0 2px 7px color-mix(in srgb, var(--c-primary) 22%, transparent));
}
.site-brand:hover .site-brand__logo {
	filter: drop-shadow(0 3px 13px color-mix(in srgb, var(--c-primary) 44%, transparent));
}
/* Hover: a tasteful fuchsia tint on the wordmark, replacing the old white glow */
.site-brand:hover span:last-child {
	color: var(--c-primary);
	text-shadow: none;
	filter: none;
}

/* Nav pills */
.site-nav a:hover {
	background: var(--grad-brand-soft);
	color: var(--c-text);
}
.site-nav a.is-active {
	background: var(--grad-brand-soft);
	color: var(--c-text);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary) 30%, transparent);
}

/* CheckFace AI nav button — retint into the fuchsia/violet family */
.site-nav a.site-nav__checkface {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--c-primary) 12%, transparent),
		color-mix(in srgb, var(--cy-violet) 14%, transparent));
	border: 1px solid color-mix(in srgb, var(--cy-violet) 30%, transparent);
}
.site-nav a.site-nav__checkface:hover {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--c-primary) 20%, transparent),
		color-mix(in srgb, var(--cy-violet) 22%, transparent));
	border-color: color-mix(in srgb, var(--cy-violet) 46%, transparent);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -8px var(--cy-glow);
}
.site-nav a.site-nav__checkface .cf-eye { color: var(--c-primary); }
html[data-theme="dark"] .site-nav a.site-nav__checkface .cf-eye { color: oklch(72% 0.16 330); }

/* AI gradient badge — align to fuchsia->violet */
.cf-ai {
	background: var(--grad-brand) !important;
	box-shadow: 0 2px 10px -2px var(--cy-glow) !important;
}

/* -------------------------------------------------------------------------
   6. BUTTONS — gradient primary CTA with sheen + lift; refined secondary
   ------------------------------------------------------------------------- */
.btn,
button[type="submit"],
input[type="submit"] {
	border-radius: 12px !important;
	position: relative;
	overflow: hidden;
	font-weight: 600;
}
/* Secondary / generic .btn (e.g. "Войти") */
.btn:hover {
	background: var(--c-surface-2);
	border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-border)) !important;
	box-shadow: 0 4px 14px -8px var(--cy-glow);
	transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

/* Primary CTA: the red "Регистрация" → juicy fuchsia→violet gradient */
.btn.btn-info,
button[type="submit"],
input[type="submit"] {
	background: var(--grad-brand) !important;
	background-size: 160% 160% !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 6px 18px -8px var(--cy-glow), 0 2px 4px rgba(0,0,0,.08);
}
.btn.btn-info:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--grad-brand-hover) !important;
	color: #fff !important;
	border-color: transparent !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -10px var(--cy-glow), 0 3px 8px rgba(0,0,0,.12);
}
.btn.btn-info:active,
button[type="submit"]:active,
input[type="submit"]:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px -8px var(--cy-glow);
}
/* moving sheen on primary CTA hover */
.btn.btn-info::after,
button[type="submit"]::after,
input[type="submit"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cy-sheen);
	transform: translateX(-130%);
	transition: transform .6s ease;
	pointer-events: none;
}
.btn.btn-info:hover::after,
button[type="submit"]:hover::after,
input[type="submit"]:hover::after {
	transform: translateX(130%);
}

/* keep warning button readable (warm amber) but slightly richer */
.btn.btn-warning {
	background: linear-gradient(135deg, oklch(78% 0.15 72), oklch(72% 0.15 56)) !important;
	border-color: transparent !important;
	color: #3a2600 !important;
}

/* -------------------------------------------------------------------------
   7. SEARCH — sidebar search-box + legacy .search
   ------------------------------------------------------------------------- */
/* SINGLE authoritative definition of the sidebar search control.
   The whole thing = a soft pill (text field) with an inset round gradient
   icon-button on the right — no hard seam, no oversized block.
   NOTE: the old duplicate .search-box__row/__input/__btn rules from the
   r3/r4/r5 passes were removed; everything lives here now. */
.search-box { width: 100%; margin: 0 0 2px; }
.search-box__row {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 5px 5px 5px 4px !important;
	border: 1px solid var(--c-border-strong) !important;
	border-radius: var(--c-radius-pill) !important;
	background: var(--c-surface) !important;
	overflow: visible !important;
	box-shadow: var(--c-shadow-sm);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.search-box__row:focus-within {
	border-color: var(--c-primary) !important;
	box-shadow: 0 0 0 4px var(--c-primary-ring),
		0 10px 26px -16px var(--cy-glow) !important;
}
.search-box__row .search-box__input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	height: 42px !important;
	padding: 0 6px 0 16px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--c-text) !important;
	font-size: 14px !important;
	font-family: var(--ff-sans) !important;
	box-shadow: none !important;
	outline: none !important;
}
/* Kill the global :focus-visible dark outline on the field — the pill's
   own :focus-within ring is the (accessible) focus indicator here. */
.search-box__row .search-box__input:focus,
.search-box__row .search-box__input:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}
/* Tidy the native search "clear" (×) so it isn't an off-brand navy glyph */
.search-box__row .search-box__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 15px; height: 15px;
	margin-right: 2px;
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center/9px 1.6px no-repeat,
		linear-gradient(currentColor, currentColor) center/1.6px 9px no-repeat;
	color: var(--c-text-soft);
	transform: rotate(45deg);
	opacity: .75;
	cursor: pointer;
}
.search-box__row .search-box__input::-webkit-search-cancel-button:hover { color: var(--c-primary); opacity: 1; }
.search-box__row .search-box__btn {
	flex: 0 0 42px !important;
	width: 42px !important;
	height: 42px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	align-self: center !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--grad-brand) !important;
	color: #fff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	box-shadow: 0 4px 12px -5px var(--cy-glow) !important;
	transition: filter .18s ease, background .18s ease, box-shadow .18s ease !important;
}
.search-box__row .search-box__btn:hover {
	background: var(--grad-brand-hover) !important;
	box-shadow: 0 6px 16px -6px var(--cy-glow) !important;
}
.search-box__row .search-box__btn:active {
	filter: brightness(.94);
}
.search-box__row .search-box__btn svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
	stroke: #fff !important;
	fill: none !important;
}

/* legacy DLE search field */
.searchTerm:focus {
	border-color: var(--c-primary) !important;
	box-shadow: 0 0 0 3px var(--c-primary-ring) !important;
}
.searchButton, .searchIcon {
	background: var(--grad-brand) !important;
}

/* -------------------------------------------------------------------------
   8. FORM INPUTS — fuchsia focus ring
   ------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
	border-radius: 11px !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px var(--c-primary-ring) !important;
}

/* -------------------------------------------------------------------------
   9. PROFILE CARDS — refined radius, layered shadow, lift + zoom, scrim
   ------------------------------------------------------------------------- */
.news-list .profile-card {
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-sm);
	border: 1px solid color-mix(in srgb, var(--c-primary) 6%, var(--c-border));
	position: relative;
	transition: transform .25s cubic-bezier(.22,.61,.36,1),
		box-shadow .28s ease, border-color .2s ease;
}
.news-list .profile-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--c-shadow-lg);
	border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-border));
}
.news-list .profile-card__link {
	position: relative;
}
/* gradient title scrim overlaying the bottom of the image */
.news-list .profile-card__link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 46%;
	background: linear-gradient(to top,
		oklch(22% 0.06 318 / .55) 0%,
		oklch(22% 0.06 318 / .12) 55%,
		transparent 100%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.news-list .profile-card:hover .profile-card__link::after { opacity: 1; }

.news-list .profile-card__img {
	transition: transform .55s cubic-bezier(.22,.61,.36,1), filter .3s ease;
}
.news-list .profile-card:hover .profile-card__img {
	transform: scale(1.06);
	filter: saturate(1.06);
}
.news-list .profile-card__title a:hover { color: var(--c-primary) !important; }

/* VIDEO corner badge — juicy gradient ribbon */
.cy-premium-video-badge {
	background: var(--grad-brand) !important;
	box-shadow: 0 4px 14px -2px var(--cy-glow), 0 1px 2px rgba(0,0,0,.25) !important;
	letter-spacing: 1.2px !important;
}

/* If a badge ever renders as an inline pill (not the rotated ribbon),
   keep it on-brand too — scoped so it can't hurt the ribbon variant. */
.profile-card .time-badge,
.profile-card .user-badge {
	background: var(--grad-brand-soft);
	color: var(--c-text);
	border-radius: 999px;
}

/* related-news links: fuchsia hover */
.related-news-list a:hover {
	border-color: var(--c-primary);
	color: var(--c-primary) !important;
	box-shadow: 0 4px 14px -10px var(--cy-glow);
}

/* -------------------------------------------------------------------------
   10. SIDEBAR — cards + login/registration panel + account widget
   ------------------------------------------------------------------------- */
.sidebar-card {
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-sm);
	border: 1px solid var(--c-border);
}
/* the login/registration sidebar variant gets an aurora accent surface */
.sidebar-card--login {
	background:
		radial-gradient(120% 90% at 100% 0%,
			color-mix(in srgb, var(--c-primary) 10%, transparent), transparent 60%),
		var(--c-surface);
	border-color: color-mix(in srgb, var(--c-primary) 22%, var(--c-border));
	box-shadow: var(--c-shadow-md);
	position: relative;
	overflow: hidden;
}
.sidebar-card--login::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--grad-brand);
}

.sidebar-login-links a:hover { color: var(--cy-violet); }

/* account widget links: fuchsia hover */
.saw__link:hover {
	background: var(--grad-brand-soft);
	color: var(--c-text);
}
.saw__login { color: var(--c-text); }
.saw__pm-badge { background: var(--grad-brand); }
.saw__link-badge--active {
	background: color-mix(in srgb, var(--c-primary) 16%, transparent);
	color: var(--c-primary);
	border-color: color-mix(in srgb, var(--c-primary) 32%, transparent);
}
.saw__link--checkspin .saw__link-icon { color: var(--c-primary) !important; }
html[data-theme="dark"] .saw__link--checkspin .saw__link-icon { color: oklch(72% 0.16 330) !important; }

/* login form field icons light up on focus */
.sidebar-login-form .saw__field-input:focus-within .saw__field-icon { color: var(--c-primary); }
.sidebar-login-form input[type="text"]:focus,
.sidebar-login-form input[type="password"]:focus {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px var(--c-primary-ring) !important;
}

/* -------------------------------------------------------------------------
   11. SEARCH-HINT CHIPS / TAGS
   ------------------------------------------------------------------------- */
/* The hint is a tidy wrapping tag-row: "Например:" label + example chips,
   all on one baseline with even gaps (modern.css zeroed its layout, so we
   define the whole thing here). */
.search-hint {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 7px !important;
	margin: 11px 2px 2px !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}
.search-hint__label {
	color: var(--c-text-soft);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .045em;
	text-transform: uppercase;
	margin-right: 1px;
}
.search-hint__chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border: 1px solid var(--c-border-strong);
	border-radius: 999px;
	background: var(--c-surface-2);
	color: var(--c-text);
	font-size: 12.5px;
	font-family: var(--ff-sans);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}
.search-hint__chip:hover {
	background: var(--grad-brand);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 4px 12px -6px var(--cy-glow);
	transform: translateY(-1px);
}
.search-hint__chip:active { transform: translateY(0); }

/* -------------------------------------------------------------------------
   12. TOPNEWS SIDEBAR WIDGET
   ------------------------------------------------------------------------- */
.topnews-thumb img {
	border-radius: 9px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.topnews-item:hover .topnews-thumb img {
	transform: scale(1.05);
	box-shadow: 0 6px 16px -8px var(--cy-glow);
}
.topnews-item:hover .topnews-title { color: var(--c-primary); }

/* medal ranks (gold/silver/bronze stay, fuchsia accent for the rest) */
.topnews-rank.is-medal.medal-1 { color: oklch(80% 0.15 85); }
.topnews-rank.is-medal.medal-2 { color: oklch(78% 0.02 280); }
.topnews-rank.is-medal.medal-3 { color: oklch(70% 0.12 50); }

/* active topnews tab underline -> gradient */
.topnews-tab.is-active,
.topnews-tab[aria-selected="true"] {
	color: var(--c-primary);
	box-shadow: inset 0 -2px 0 0 var(--c-primary);
}

/* -------------------------------------------------------------------------
   13. PAGINATION
   ------------------------------------------------------------------------- */
.pagination .pages a,
.pagination span.pages,
.news-list nav.pagination .pages a {
	border-radius: 10px;
	transition: background .18s ease, color .18s ease, box-shadow .2s ease, transform .12s ease;
}
.pagination .pages a:hover,
.news-list nav.pagination .pages a:hover {
	background: var(--grad-brand-soft);
	color: var(--c-text);
	transform: translateY(-1px);
}
/* current page + prev/next as gradient pills */
.pagination .pages span:not(a),
.pagination .pages .thisclass,
.news-list nav.pagination .pages span:not(a),
.page_prev, .page_next {
	border-radius: 10px;
}
.pagination .pages .thisclass,
.pagination .pages span.thisclass a {
	background: var(--grad-brand) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 5px 14px -7px var(--cy-glow);
}
.page_prev:hover, .page_next:hover {
	background: var(--grad-brand-soft);
	color: var(--c-text);
	transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   14. PREMIUM / PAYWALL ACCENT SURFACES + LOGIN DIALOG
   ------------------------------------------------------------------------- */
.cy-premium-video-wall,
.cy-premium-video-wall-inner {
	background:
		radial-gradient(140% 120% at 50% 0%,
			color-mix(in srgb, var(--c-primary) 16%, transparent), transparent 60%),
		var(--c-surface) !important;
	border: 1px solid color-mix(in srgb, var(--c-primary) 26%, var(--c-border)) !important;
	box-shadow: var(--c-shadow-lg) !important;
}
.cy-premium-video-cta,
.cy-premium-video-login {
	background: var(--grad-brand) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 8px 22px -8px var(--cy-glow) !important;
}
.cy-premium-video-cta:hover,
.cy-premium-video-login:hover {
	background: var(--grad-brand-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -10px var(--cy-glow) !important;
}
.cy-premium-video-icon { color: var(--c-primary); }

/* play overlay tint */
.cy-video-play-overlay {
	background: linear-gradient(180deg,
		oklch(22% 0.06 318 / .35), oklch(20% 0.08 300 / .55)) !important;
}
.cy-video-play-overlay:hover {
	background: linear-gradient(180deg,
		oklch(22% 0.06 318 / .25), oklch(20% 0.08 300 / .45)) !important;
}

/* login / registration modal dialog */
.cy-dialog__inner {
	border-radius: var(--c-radius-lg);
	box-shadow: 0 28px 70px -20px oklch(35% 0.14 320 / .45);
	border: 1px solid color-mix(in srgb, var(--c-primary) 14%, var(--c-border));
}
.cy-dialog__head {
	background:
		linear-gradient(180deg, var(--grad-brand-soft), transparent);
}
.cy-dialog::backdrop {
	background: oklch(22% 0.06 312 / .55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.cy-dialog__close:focus-visible {
	outline: 2px solid var(--c-primary-ring);
}

/* -------------------------------------------------------------------------
   15. ALERTS — keep semantics, but info uses brand family
   ------------------------------------------------------------------------- */
.alert-info {
	background: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface));
	border-color: color-mix(in srgb, var(--c-primary) 30%, transparent);
	color: oklch(42% 0.14 320);
}

/* -------------------------------------------------------------------------
   16. FOOTER
   ------------------------------------------------------------------------- */
.footer {
	border-top: 1px solid color-mix(in srgb, var(--c-primary) 14%, var(--c-border)) !important;
	background:
		linear-gradient(180deg,
			color-mix(in srgb, var(--c-primary) 4%, transparent), transparent 40%),
		var(--c-surface) !important;
	position: relative;
}
.footer::before {
	content: "";
	position: absolute;
	top: -1px; left: 0; right: 0;
	height: 2px;
	background: var(--grad-brand);
	opacity: .5;
}
.footer a { color: var(--c-primary) !important; }
.footer a:hover { color: var(--cy-violet) !important; }
.footer-links__sep { color: var(--c-text-soft); }

/* -------------------------------------------------------------------------
   17. MISC — reading progress bar (top-of-page), theme toggle hover
   ------------------------------------------------------------------------- */
.reading-progress {
	background: var(--grad-brand) !important;
}
.theme-toggle:hover {
	color: var(--c-primary);
	border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-border));
}

/* =========================================================================
   refinements r2 — fixes from adversarial A/B visual review (2026-06-14)
   ========================================================================= */

/* (1) Link contrast: darken/violet-shift TEXT links on light surfaces for AA.
   Brand/nav use their own component colors, so they are unaffected. */
a { color: light-dark(oklch(50% 0.20 332), oklch(75% 0.15 332)); }
a:hover { color: light-dark(oklch(44% 0.20 320), oklch(83% 0.13 320)); }

/* (2) Destructive action keeps a clear DANGER (red) signal, not the brand hue */
.fullstory__del-profile .del-profile-btn {
	color: var(--c-danger) !important;
	border-color: color-mix(in srgb, var(--c-danger) 55%, transparent) !important;
}
.fullstory__del-profile .del-profile-btn:hover {
	color: #fff !important;
	background: var(--c-danger) !important;
	border-color: var(--c-danger) !important;
}

/* (3) Premium hero badge: migrate the orphaned coral pill to the fuchsia->violet system */
.cy-premium-hero__badge {
	background: var(--grad-brand) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: 0 6px 18px var(--cy-glow);
}

/* (4) CheckFace "+N" perk badge: deepen text + fill so small text is legible (AA) */
.cy-premium-plan__perk--face {
	color: light-dark(oklch(46% 0.20 330), oklch(83% 0.14 330)) !important;
	background: light-dark(oklch(96% 0.045 330), oklch(30% 0.08 330)) !important;
	border-color: color-mix(in srgb, var(--c-primary) 42%, transparent) !important;
}

/* =========================================================================
   STRUCTURAL r3 — reshape the blocks themselves (not just colour)
   (A) PROFILE CARDS: full-bleed photo tiles with the name overlaid on the
       photo (was: square-ish photo + separate title strip below).
   ========================================================================= */
.news-list { grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)) !important; gap: 16px !important; }

.news-list .profile-card {
	position: relative !important;
	aspect-ratio: 3 / 4;
	border-radius: 20px !important;
	overflow: hidden !important;
	background: var(--c-surface);
	box-shadow: var(--c-shadow-md);
	isolation: isolate;
	padding: 0 !important;
	border: 0 !important;
}
.news-list .profile-card__link {
	position: absolute !important; inset: 0 !important;
	aspect-ratio: auto !important;
	display: block !important;
	border-radius: inherit !important;
	overflow: hidden !important;
	margin: 0 !important;
}
.news-list .profile-card__img {
	width: 100% !important; height: 100% !important;
	object-fit: cover !important; border-radius: inherit !important;
	transition: transform .45s cubic-bezier(.2,.6,.2,1) !important;
}
/* remove the old below-image scrim; the overlaid title carries its own scrim */
.news-list .profile-card__link::after { display: none !important; }

.news-list .profile-card__title {
	position: absolute !important; left: 0; right: 0; bottom: 0;
	margin: 0 !important; padding: 36px 14px 13px !important;
	background: linear-gradient(to top, rgba(10,4,16,.88) 0%, rgba(10,4,16,.52) 46%, transparent 100%) !important;
	z-index: 2; pointer-events: none; border: 0 !important;
}
.news-list .profile-card__title a {
	color: #fff !important; pointer-events: auto;
	font-weight: 650 !important; letter-spacing: .1px;
	text-shadow: 0 1px 4px rgba(0,0,0,.55);
	font-size: 14px !important; line-height: 1.25 !important;
}
.news-list .profile-card:hover { transform: translateY(-5px); box-shadow: var(--c-shadow-lg); }
.news-list .profile-card:hover .profile-card__img { transform: scale(1.06) !important; }

/* hover accent ring (inset, so it never shifts layout) */
.news-list .profile-card::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	z-index: 3; pointer-events: none;
	box-shadow: inset 0 0 0 0 var(--c-primary);
	transition: box-shadow .22s ease;
}
.news-list .profile-card:hover::before { box-shadow: inset 0 0 0 2px var(--c-primary); }

@media (max-width: 600px) {
	.news-list { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
	.news-list .profile-card { border-radius: 16px !important; }
	.news-list .profile-card__title { padding: 28px 11px 11px !important; }
	.news-list .profile-card__title a { font-size: 13px !important; }
}

/* =========================================================================
   STRUCTURAL r3 (B) — reshape header/search/buttons/pricing
   ========================================================================= */
/* SEARCH: consolidated into the single search-box block in section 7 above
   (the old segmented-pill rules here were one of 4 conflicting copies). */

/* CTA BUTTONS → pill shape (was rounded-rect) */
.site-header__cta, .cy-btn, .btn, .btn-info, .login-form button,
.cy-premium-plan__cta, .cy-premium-video-cta { border-radius: var(--c-radius-pill) !important; }

/* NAV → pill hover */
.site-nav a { border-radius: var(--c-radius-pill); padding: 7px 13px; transition: background .18s ease, color .18s ease; }
.site-nav a:hover { background: var(--grad-brand-soft); color: var(--c-primary); }

/* PRICING → reshaped cards, featured tier elevated & enlarged */
.cy-premium-plans__grid { gap: 18px !important; align-items: stretch; }
.cy-premium-plan {
	border-radius: 22px !important;
	padding: 26px 20px !important;
	border: 1px solid var(--c-border) !important;
	background: var(--c-surface) !important;
	box-shadow: var(--c-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}
.cy-premium-plan:hover { transform: translateY(-4px); box-shadow: var(--c-shadow-lg); }
.cy-premium-plan--popular {
	transform: scale(1.05);
	border: 2px solid var(--c-primary) !important;
	background: linear-gradient(180deg, var(--grad-brand-soft)), var(--c-surface) !important;
	box-shadow: 0 20px 48px var(--cy-glow), var(--c-shadow-lg) !important;
	z-index: 2;
}
.cy-premium-plan--popular:hover { transform: scale(1.05) translateY(-4px); }
.cy-premium-plan__price { font-size: 34px !important; font-weight: 800 !important; letter-spacing: -.5px; }
@media (max-width: 760px) {
	.cy-premium-plan--popular, .cy-premium-plan--popular:hover { transform: none; }
}

/* =========================================================================
   r4 — fixes from baseline->r3 adversarial A/B review
   ========================================================================= */
/* (1) Overlaid name legibility on bright/light photos: taller+stronger scrim
       + a hard text-shadow floor so white never drops below readable. */
.news-list .profile-card__title {
	padding: 48px 14px 13px !important;
	background: linear-gradient(to top,
		rgba(0,0,0,.88) 0%, rgba(0,0,0,.58) 36%, rgba(0,0,0,.20) 64%, transparent 100%) !important;
}
.news-list .profile-card__title a {
	text-shadow: 0 1px 2px rgba(0,0,0,.96), 0 0 10px rgba(0,0,0,.6) !important;
	padding-right: 4px;
}
@media (max-width: 600px) {
	.news-list .profile-card__title { padding: 40px 11px 11px !important; }
}

/* (3) Pricing tiers: equal height + CTA pinned to bottom so the row lines up */
.cy-premium-plans__grid { align-items: stretch !important; }
.cy-premium-plan { display: flex !important; flex-direction: column !important; }
.cy-premium-plan__cta { margin-top: auto !important; }

/* =========================================================================
   r5 — fixes: search button shape + topnews active-tab stray underline
   ========================================================================= */
/* (search-box shape is fully defined in section 7 now — this r5 patch,
   which fought modern.css's leftover flex:0 0 44px, was removed.) */

/* TOPNEWS TABS: remove the stray underline bar + inset underline that hang
   below the now-rounded active chip (active is shown by the chip + colour). */
.topnews-tab.is-active { box-shadow: none !important; }
.topnews-tab.is-active::after { content: none !important; display: none !important; }

/* -------------------------------------------------------------------------
   CITIES PAGE (?do=cities) — drop the faint city-skyline SVG backdrop
   (/uploads/city.svg) that sat behind the title/search/tabs. The pseudo
   element is removed entirely, so the SVG is no longer fetched either. */
.cities-controls::after { content: none !important; }

/* ===== guest registration CTA (access pyramid r-pyramid) ===== */
.cy-photo-paywall__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cy-photo-paywall--guest .cy-photo-paywall__cta--ghost {
	background: transparent !important; color: var(--c-text) !important;
	border: 1.5px solid var(--c-border-strong) !important; box-shadow: none !important;
}
.cy-photo-paywall--guest .cy-photo-paywall__cta--ghost:hover {
	border-color: var(--c-primary) !important; color: var(--c-primary) !important;
}
/* MOBILE: the two guest CTAs were auto-width + left-aligned inside a centred
   card → ragged. Stack them full-width so the block reads clean. */
@media (max-width: 640px) {
	.cy-photo-paywall--guest .cy-photo-paywall__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.cy-photo-paywall--guest .cy-photo-paywall__actions .cy-photo-paywall__cta {
		width: 100%;
		min-width: 0;
		justify-content: center;
	}
}

/* ===== SEO text block (bottom of anketa, muted card) ===== */
.cy-seo-text { margin: 28px 0 8px; padding: 18px 20px; border-radius: var(--c-radius-lg); background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-muted); font-size: 14px; line-height: 1.7; }
.cy-seo-text h2 { font-size: 17px; margin: 0 0 10px; color: var(--c-text); font-weight: 700; line-height: 1.35; }
.cy-seo-text p { margin: 0 0 10px; }
.cy-seo-text p:last-child { margin-bottom: 0; }
.cy-seo-text b { color: var(--c-text); font-weight: 600; }