/* =========================================================================
   City-skyline / DLE 19.1 — modern theme + standalone (no bootstrap)
   Loaded as the SOLE design CSS (after engine.css of DLE).
   Inter font is loaded via <link rel="preload"> in main.tpl head.
   ========================================================================= */

/* ====================================================================
   BOOTSTRAP-2 SHIM — минимальные классы, нужные для DLE 19.x и плагинов
   (модал, alert, label, badge, nav-pills, tab, pull, span fallback и т.д.)
   Без 7000 строк bootstrap.css.
   ==================================================================== */

/* Float / clearfix helpers */
.pull-right { float: right; }
.pull-left  { float: left; }
.clearfix::after { content: ""; display: block; clear: both; }
.invisible { visibility: hidden; }

/* Reset utility (DLE использует class="reset" / class="unstyled") */
.reset, .unstyled {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

/* Bootstrap Grid fallback — заглушка чтобы старая разметка не разваливалась */
.row, .row-fluid { display: block; }
.row-fluid::after, .row::after { content: ""; display: block; clear: both; }
[class*="span"] { float: left; min-height: 1px; }
.span1, .span2, .span3, .span4, .span5, .span6,
.span7, .span8, .span9, .span10, .span11, .span12 {
	width: 100%;
	margin-left: 0;
	float: none;
}

/* Fade utility for legacy DLE blocks */
.fade {
	opacity: 0;
	transition: opacity .15s linear;
}
.fade.in { opacity: 1; }
.hide { display: none !important; }
.show { display: block; }

/* Native <dialog> для логин-окна (заменяет bootstrap-modal) */
.cy-dialog {
	padding: 0;
	border: 0;
	background: transparent;
	max-width: min(560px, calc(100vw - 32px));
	width: 100%;
	max-height: calc(100vh - 48px);
	margin: auto;
	overflow: visible;
	color: inherit;
}
.cy-dialog::backdrop {
	background: rgba(15, 23, 42, .55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.cy-dialog[open] {
	animation: cy-dialog-in .22s ease-out;
}
.cy-dialog[open]::backdrop {
	animation: cy-dialog-bd-in .22s ease-out;
}
@keyframes cy-dialog-in {
	from { opacity: 0; transform: translateY(-12px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cy-dialog-bd-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.cy-dialog__inner {
	background: var(--c-surface);
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
	overflow: hidden;
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
}
.cy-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--c-border);
	background: var(--c-surface);
}
.cy-dialog__head h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--c-text);
}
.cy-dialog__close {
	background: transparent;
	border: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--c-text-muted);
	cursor: pointer;
	line-height: 1;
	padding: 4px 10px;
	border-radius: 8px;
	transition: color .15s ease, background .15s ease;
}
.cy-dialog__close:hover { color: var(--c-text); background: var(--c-surface-2); }
.cy-dialog__close:focus-visible {
	outline: 2px solid var(--c-primary-ring);
	outline-offset: 2px;
}
.cy-dialog__body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--c-surface);
	color: var(--c-text);
}

/* Compatibility: старые модальные классы (на случай, если DLE-плагины их используют)
   — оставляем хотя бы безопасный базовый набор */
body.modal-open { overflow: hidden; }
.modal-header, .modal-body, .modal-footer { padding: 16px 20px; }
.modal-body { max-height: 60vh; overflow-y: auto; }

/* Dark-mode совместимость для .modal-* внутри .cy-dialog */
.cy-dialog .modal-body,
.cy-dialog .modal-footer,
.cy-dialog .modal-header {
	background: var(--c-surface);
	color: var(--c-text);
}
.cy-dialog .modal-footer {
	border-top: 1px solid var(--c-border);
}
.cy-dialog .modal-header {
	border-bottom: 1px solid var(--c-border);
}

/* Alerts */
.alert {
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: 10px;
	margin: 0 0 14px;
	font-size: 14px;
}
.alert-info    { background: #eaf6ff; border-color: #c7e3f6; color: #1f5b8a; }
.alert-success { background: #eafff0; border-color: #c7eed3; color: #2c7a52; }
.alert-warning { background: #fff8e6; border-color: #f3dca0; color: #8a6f1f; }
.alert-error,
.alert-danger  { background: #fdecec; border-color: #f3c2c2; color: #8a2c2c; }

/* Tabs (используется в userinfo) */
.nav { list-style: none; padding: 0; margin: 0 0 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.nav > li { list-style: none; margin: 0; }
.nav-pills > li > a,
.nav-tabs  > li > a {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 9px;
	background: var(--c-surface-2);
	color: var(--c-text);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.nav-pills > li > a:hover,
.nav-tabs  > li > a:hover { background: var(--c-border); }
.nav-pills > li.active > a,
.nav-tabs  > li.active > a {
	background: var(--c-primary);
	color: #fff;
}
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }

/* Labels & badges */
.label, .badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 500;
	border-radius: 999px;
	background: var(--c-surface-2);
	color: var(--c-text);
	border: 1px solid var(--c-border);
	line-height: 1.4;
}
.label-success, .badge-success     { background: rgba(44,122,82,.12); color: #2c7a52; border-color: rgba(44,122,82,.3); }
.label-warning, .badge-warning     { background: rgba(138,111,31,.12); color: #8a6f1f; border-color: rgba(138,111,31,.3); }
.label-important, .badge-important { background: rgba(138,44,44,.12); color: #8a2c2c; border-color: rgba(138,44,44,.3); }
.label-info, .badge-info           { background: rgba(31,91,138,.12); color: #1f5b8a; border-color: rgba(31,91,138,.3); }

/* Wells */
.well {
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: 12px;
	padding: 16px;
	margin: 0 0 14px;
}
.well-small { padding: 12px; border-radius: 10px; }

/* Buttons base */
.btn, button.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
	border: 1px solid var(--c-border);
	background: var(--c-surface);
	color: var(--c-text);
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	line-height: 1.2;
	transition: background .15s, color .15s, border-color .15s, transform .05s;
}
.btn:hover { text-decoration: none; background: var(--c-surface-2); }

/* Текстовые помощники */
.text-error, .text-danger  { color: #c0392b; }
.text-success { color: #2c7a52; }
.text-warning { color: #8a6f1f; }
.text-info    { color: #1f5b8a; }
.muted        { color: #6b7280; }

/* Checkbox/Radio basic */
.checkbox, .radio { display: block; padding-left: 2px; }
.checkbox input[type="checkbox"], .radio input[type="radio"] { margin-right: 6px; vertical-align: middle; }
.controls { display: block; }

/* Thumbnails (для cust-* шаблонов, скрытых на этом сайте) */
.thumbnails { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.thumbnail { display: block; }

/* ------------------------------ Tokens ---------------------------------- */
/* Палитра в OKLCH: перцептивно-равномерная, hover/active генерим через
   относительный синтаксис from oklch(...) — ноль дублирования цветов. */
:root {
	color-scheme: light dark;

	/* Базовые тона */
	--brand-l: 70%;
	--brand-c: 0.13;
	--brand-h: 22;

	--c-primary: oklch(var(--brand-l) var(--brand-c) var(--brand-h));
	--c-primary-hover: oklch(from var(--c-primary) calc(l - 0.07) c h);
	--c-primary-active: oklch(from var(--c-primary) calc(l - 0.12) c h);
	--c-primary-soft: light-dark(oklch(from var(--c-primary) 0.95 calc(c * 0.4) h), oklch(from var(--c-primary) 0.22 calc(c * 0.28) h));
	--c-primary-ring: oklch(from var(--c-primary) l c h / 0.35);

	--c-accent: oklch(75% 0.08 165);
	--c-accent-hover: oklch(from var(--c-accent) calc(l - 0.06) c h);

	--c-warn: oklch(75% 0.14 70);
	--c-danger: oklch(64% 0.18 25);

	/* Поверхности — определяем для светлой и тёмной темы через light-dark() */
	--c-bg: light-dark(#f5f6f8, oklch(18% 0.005 250));
	--c-surface: light-dark(#ffffff, oklch(22% 0.006 250));
	--c-surface-2: light-dark(#fafbfc, oklch(25% 0.006 250));
	--c-border: light-dark(#e6e8ec, oklch(30% 0.008 250));
	--c-border-strong: light-dark(#d6dae0, oklch(38% 0.008 250));
	--c-text: light-dark(#1a1d21, oklch(95% 0.005 250));
	--c-text-muted: light-dark(#6b7280, oklch(70% 0.01 250));
	--c-text-soft: light-dark(#9aa0a6, oklch(60% 0.008 250));

	--c-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
	--c-shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
	--c-shadow-lg: 0 12px 32px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .04);

	--c-radius: 12px;
	--c-radius-sm: 8px;
	--c-radius-lg: 18px;
	--c-radius-pill: 999px;
	--ff-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--container: 1200px;
	--gap: 18px;
	--gap-lg: 24px;
}

/* Принудительные темы через data-theme (override prefers-color-scheme) */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Глубокие тени в тёмной теме */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--c-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .25);
		--c-shadow-md: 0 4px 12px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .25);
		--c-shadow-lg: 0 12px 32px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .25);
	}
}
:root[data-theme="dark"] {
	--c-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .25);
	--c-shadow-md: 0 4px 12px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .25);
	--c-shadow-lg: 0 12px 32px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .25);
}

/* ------------------------------ Reset ----------------------------------- */
html, body {
	background: var(--c-bg) !important;
	color: var(--c-text) !important;
	font-family: var(--ff-sans) !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html { overflow-x: hidden; scrollbar-gutter: stable; }
body { margin: 0 !important; overflow-x: hidden; max-width: 100%; }
* { box-sizing: border-box; }
a { color: var(--c-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--c-primary-hover); text-decoration: none; }
img { max-width: 100%; height: auto; }
hr.soften { display: none; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-sans) !important;
	color: var(--c-text) !important;
	margin: 0 0 14px;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
}
h1 { font-size: 28px !important; line-height: 1.25 !important; }
h2 { font-size: 22px !important; line-height: 1.3 !important; }
h3 { font-size: 19px !important; line-height: 1.35 !important; }
h4 { font-size: 17px !important; line-height: 1.4 !important; }
h5 { font-size: 15px !important; line-height: 1.45 !important; border: 0 !important; }

/* h6 used as section-divider with line-through-text effect (legacy) — modernize */
h6 {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-text-muted) !important;
	overflow: visible !important;
	margin: 22px 0 14px !important;
}
h6 > span {
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
}
h6 > span::before, h6 > span::after { content: none !important; }
h6::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-border);
}

/* ----------------------------- Layout ----------------------------------- */
.container { max-width: var(--container) !important; margin: 0 auto !important; padding: 0 16px !important; float: none !important; }

/* Hide legacy bootstrap visibility helpers cleanly: we keep desktop / mobile via media queries. */
.visible-desktop, .hidden-desktop { display: block !important; }
@media (max-width: 900px) {
	.visible-desktop { display: none !important; }
	.hidden-desktop { display: block !important; }
}
@media (min-width: 901px) {
	.hidden-desktop { display: none !important; }
}

/* The 2-column grid replacement for old span8/span4 */
.row-fluid { display: block !important; }
.layout-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--gap-lg);
	align-items: start;
}
.layout-grid--single {
	grid-template-columns: 1fr !important;
}
.layout-grid--single .sidebar {
	display: none !important;
}

@media (max-width: 900px) {
	.layout-grid { grid-template-columns: 1fr; }
}

/* Обычные страницы (полная новость, правила, формы): НЕ в tile-grid родителе */
.content-flow {
	display: flex !important;
	flex-direction: column;
	gap: var(--gap-lg);
	width: 100%;
	min-width: 0;
}
.content-flow > * {
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

/* Единая подложка для страничного контента (НЕ-блоки уже со своим оформлением исключены) */
.content-flow > :not(script):not(style):not(#dle-ajax-comments):not(#comments-section):not(.news-list):not(.form-card):not(.addcomments):not(.cy-comments-form):not(.user-card):not(.fullstory):not(.static):not(.text-page):not(.search-result):not(.search-comment):not(.alert):not(.sep):not(.profile-card) {
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--c-radius) !important;
	box-shadow: var(--c-shadow-sm) !important;
	padding: 20px 22px !important;
}

/* If DLE wraps forms in an extra container — remove duplicate card shell.
   Без :has() (Safari < 15.4): обнуляем все прямые контейнеры, у которых внутри уже form-card. */
.content-flow > .form-card-wrapper,
.content-flow > div:has(> .form-card),
.content-flow > div:has(.form-card) {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.content-area {
	min-width: 0;
	width: 100%;
}

/* Force old span8/span4 to behave inside the grid (kept for fallback) */
.row-fluid > .span8 { width: auto !important; margin-left: 0 !important; }
.row-fluid > .span4 { width: auto !important; margin-left: 0 !important; }

/* ------------------------------ Header ---------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--c-border);
}
.site-header__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 16px;
	height: 64px;
	display: flex;
	align-items: center;
	gap: 18px;
}
.site-brand {
	font-family: var(--ff-sans);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.01em;
	color: var(--c-text);
	text-transform: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.site-brand span:last-child {
	transition: text-shadow 0.3s ease, color 0.3s ease;
}
.site-brand:hover { color: var(--c-text); }
.site-brand:hover span:last-child {
	text-shadow: 0 0 12px rgba(255, 255, 255, 0.55), 0 0 22px rgba(255, 255, 255, 0.2);
}
.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 rgba(244, 122, 109, .55);
	outline-offset: 2px;
}
.site-brand__logo {
	flex-shrink: 0;
	display: block;
	width: 38px;
	height: 38px;
	object-fit: contain;
	/* тяжёлый SVG (~80KB): анимация только transform на отдельном слое, без «пружины» */
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	transform-origin: center;
	transition: transform 0.2s ease-out;
}
.site-brand:hover .site-brand__logo {
	transform: translate3d(0, 0, 0) scale(1.05);
}
.site-brand:active .site-brand__logo {
	transform: translate3d(0, 0, 0) scale(0.98);
	transition: transform 0.1s ease-out;
}
.site-nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; flex: 1; }
.site-nav a {
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	border-radius: 8px;
	font-weight: 500;
	font-size: 14px;
	color: var(--c-text-muted);
	transition: background .15s ease, color .15s ease;
}
.site-nav a:hover { background: var(--c-surface-2); color: var(--c-text); }
.site-nav a.is-active { color: var(--c-text); background: var(--c-surface-2); }

/* ── CheckFace nav button (AI badge) ───────────────────────────────────────
   Selector spelled `.site-nav a.site-nav__checkface` to outweigh `.site-nav a`. */
.site-nav a.site-nav__checkface {
	gap: 7px;
	color: var(--c-text);
	font-weight: 700;
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--c-primary) 8%, transparent),
		color-mix(in srgb, #a855f7 8%, transparent));
	border: 1px solid color-mix(in srgb, #a855f7 22%, transparent);
}
.site-nav a.site-nav__checkface:hover {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--c-primary) 14%, transparent),
		color-mix(in srgb, #a855f7 14%, transparent));
	border-color: color-mix(in srgb, #a855f7 36%, transparent);
	color: var(--c-text);
	transform: translateY(-1px);
}
.site-nav a.site-nav__checkface .cf-eye { width: 16px; height: 16px; color: #a855f7; flex-shrink: 0; }
html[data-theme="dark"] .site-nav a.site-nav__checkface .cf-eye { color: #c084fc; }

/* AI badge — same look in header link and mobile menu and sidebar widget */
.cf-ai {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
	color: #fff;
	padding: 2px 7px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-transform: uppercase;
	box-shadow: 0 2px 8px color-mix(in srgb, #a855f7 30%, transparent);
	border: 1px solid color-mix(in srgb, #ec4899 35%, transparent);
}
.cf-ai::before {
	content: "";
	width: 5px;
	height: 5px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 6px rgba(255,255,255,.85);
	animation: cf-ai-pulse 2.2s ease-in-out infinite;
}
@keyframes cf-ai-pulse {
	0%, 100% { opacity: .55; transform: scale(.8); }
	50%      { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .cf-ai::before { animation: none; opacity: 1; } }
.mobile-menu__checkface { display: flex !important; align-items: center; gap: 8px; }
html[data-theme="dark"] .site-nav a.site-nav__checkface {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--c-primary) 14%, transparent),
		color-mix(in srgb, #a855f7 18%, transparent));
	border-color: color-mix(in srgb, #a855f7 38%, transparent);
}

/* CheckFace button when placed in .site-header__cta (replaces Профиль on desktop) */
.site-header__cta a.site-nav__checkface {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	color: var(--c-text);
	text-decoration: none;
	transition: background .15s ease, color .15s ease, transform .15s ease;
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--c-primary) 8%, transparent),
		color-mix(in srgb, #a855f7 8%, transparent));
	border: 1px solid color-mix(in srgb, #a855f7 22%, transparent);
}
.site-header__cta a.site-nav__checkface:hover {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--c-primary) 14%, transparent),
		color-mix(in srgb, #a855f7 14%, transparent));
	border-color: color-mix(in srgb, #a855f7 36%, transparent);
	color: var(--c-text);
	transform: translateY(-1px);
	text-decoration: none;
}
.site-header__cta a.site-nav__checkface .cf-eye { width: 16px; height: 16px; color: #a855f7; flex-shrink: 0; }
html[data-theme="dark"] .site-header__cta a.site-nav__checkface {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--c-primary) 14%, transparent),
		color-mix(in srgb, #a855f7 18%, transparent));
	border-color: color-mix(in srgb, #a855f7 38%, transparent);
}
html[data-theme="dark"] .site-header__cta a.site-nav__checkface .cf-eye { color: #c084fc; }

.site-header__cta { display: flex; align-items: center; gap: 8px; }

.menu-toggle {
	display: none;
	width: 40px; height: 40px;
	border: 1px solid var(--c-border);
	background: var(--c-surface);
	border-radius: 10px;
	align-items: center; justify-content: center;
	cursor: pointer;
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
	display: block; width: 18px; height: 2px; background: var(--c-text); border-radius: 2px; position: relative; transition: transform .2s;
}
.menu-toggle span::before,
.menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
.site-header.is-open .menu-toggle span { background: transparent; }
.site-header.is-open .menu-toggle span::before { top: 0; transform: rotate(45deg); }
.site-header.is-open .menu-toggle span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1100px) {
	.site-header { z-index: 1100; }
	.site-header__inner {
		height: 60px;
		gap: 10px;
		justify-content: space-between;
	}
	.site-brand {
		font-size: 18px;
		flex: 1;
		min-width: 0;
	}
	.site-brand span:last-child {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.menu-toggle { display: inline-flex; }
	.menu-toggle {
		position: relative;
		z-index: 1110;
		flex: 0 0 40px;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}
	.site-header__cta > .btn {
		display: none !important;
	}
	.site-header__cta a.site-nav__checkface {
		display: none !important;
	}
	.site-nav { display: none !important; }
	.site-nav a {
		display: block !important;
		width: 100% !important;
		padding: 13px 14px !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		line-height: 1.25 !important;
		color: var(--c-text) !important;
		background: transparent !important;
		border: 1px solid transparent !important;
		text-align: left !important;
		text-decoration: none !important;
		position: relative;
		z-index: 1;
	}
	.site-nav a + a { margin-top: 4px; }
	.site-nav a:hover,
	.site-nav a:active {
		background: var(--c-surface-2);
		border-color: var(--c-border);
	}
	.site-nav__auth {
		margin-top: 6px;
		background: rgba(244, 122, 109, .10) !important;
		color: var(--c-primary) !important;
		border-color: rgba(244, 122, 109, .35) !important;
		font-weight: 600 !important;
	}
}

/* Dedicated mobile drawer (isolated from legacy nav styles) */
.mobile-menu { display: none; }
@media (max-width: 1100px) {
	.mobile-menu {
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		top: 60px;
		bottom: 0;
		background: var(--c-surface);
		border-top: 1px solid var(--c-border);
		box-shadow: var(--c-shadow-md);
		z-index: 1105;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 10px 12px 16px;
	}
	body.menu-open .mobile-menu { display: block; }
	.mobile-menu__nav {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	.mobile-menu__nav a {
		display: block;
		width: 100%;
		padding: 13px 14px;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.25;
		color: var(--c-text) !important;
		background: transparent;
		border: 1px solid transparent;
		border-radius: 10px;
		text-decoration: none;
	}
	.mobile-menu__nav a:active,
	.mobile-menu__nav a:hover {
		background: var(--c-surface-2);
		border-color: var(--c-border);
	}
	.mobile-menu__nav a.is-active {
		background: rgba(244, 122, 109, .10);
		color: var(--c-primary) !important;
		border-color: rgba(244, 122, 109, .35);
		font-weight: 600;
	}
	.mobile-menu__auth {
		margin-top: 6px;
		background: rgba(244, 122, 109, .10) !important;
		color: var(--c-primary) !important;
		border-color: rgba(244, 122, 109, .35) !important;
		font-weight: 600 !important;
	}
}

/* Hide ALL legacy navbars from the old template — we replace with .site-header */
.navbar.navbar-fixed-top,
.jumbotron-mob,
.jumbotron {
	display: none !important;
}

/* --------------------------- Page sections ------------------------------ */
.page-wrap { padding: 24px 0 60px; }
.section + .section { margin-top: 24px; }

.alert.alert-info {
	background: linear-gradient(135deg, rgba(244, 122, 109, .08), rgba(121, 192, 173, .10));
	border: 1px solid rgba(244, 122, 109, .25);
	color: var(--c-text);
	border-radius: var(--c-radius);
	padding: 14px 16px;
}
.alert.alert-info a { color: var(--c-primary); font-weight: 600; }

/* --------------------------- Anketa cards ------------------------------- */
.news-list {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
	gap: 14px !important;
}
.news-list .profile-card {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: var(--c-surface);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-sm);
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
	display: flex;
	flex-direction: column;
}
.news-list .profile-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--c-shadow-md);
}
.news-list .profile-card__link {
	display: block;
	overflow: hidden;
	border-radius: 0 !important;
	aspect-ratio: 4 / 5;
	position: relative;
}
.news-list .profile-card__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform .35s ease;
}
.news-list .profile-card:hover .profile-card__img { transform: scale(1.04); }
.news-list .profile-card__title {
	margin: 0 !important;
	padding: 12px 12px 14px !important;
}
.news-list .profile-card__title a {
	display: block;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.35;
	color: var(--c-text) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
.news-list .profile-card__title a:hover { color: var(--c-primary) !important; }
.news-list .profile-card .meta,
.news-list .profile-card .story,
.news-list .profile-card .btn,
.news-list .profile-card hr { display: none !important; }

/* Pagination inside .news-list grid — full row; flex keeps prev / pages / next on one line when wide enough */
.news-list nav.pagination,
.news-list > nav.pagination,
.news-list > .pagination,
.news-list > .dpad.basenavi,
.news-list > .basenavi {
	grid-column: 1 / -1;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	justify-self: stretch;
	margin-top: 8px;
}
.news-list nav.pagination {
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 8px 12px;
}
.news-list nav.pagination .page_prev,
.news-list nav.pagination .page_next {
	flex: 0 0 auto;
	min-width: 0;
}
.news-list nav.pagination .pages {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}
@media (max-width: 420px) {
	.news-list nav.pagination {
		flex-wrap: wrap;
		justify-content: center;
	}
}

@media (max-width: 600px) {
	.news-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
}

/* Похожие анкеты на полной странице — список ссылок, не tile-grid */
.related-news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.related-news-list li { margin: 0; }
.related-news-list a {
	display: block;
	padding: 12px 14px;
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--c-text) !important;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.related-news-list a:hover {
	background: var(--c-surface);
	border-color: var(--c-primary);
	color: var(--c-primary) !important;
}

/* --------------------------- Sidebar ------------------------------------ */
.sidebar { display: flex; flex-direction: column; gap: 16px; }
.sidebar-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	padding: 16px 18px;
	box-shadow: var(--c-shadow-sm);
}
.sidebar-card h6 { margin: 0 0 12px !important; }
.sidebar-card p { margin: 0 0 8px; color: var(--c-text-muted); font-size: 14px; }
.sidebar-card .btn-row { display: flex; flex-direction: column; gap: 8px; }
.sidebar .news-list { gap: 10px !important; grid-template-columns: repeat(2, 1fr) !important; }

/* --------------------------- Forms / inputs ----------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
	width: 100%;
	font-family: var(--ff-sans);
	font-size: 14px;
	color: var(--c-text);
	background: var(--c-surface);
	border: 1px solid var(--c-border-strong);
	border-radius: 10px !important;
	padding: 10px 12px !important;
	height: auto !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
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 rgba(244, 122, 109, .18) !important;
	outline: none;
}
textarea { min-height: 120px; resize: vertical; }
label { display: block; font-size: 13px; font-weight: 500; color: var(--c-text); margin: 10px 0 6px; }
.controls + .controls { margin-top: 10px; }
.controls.controls-row { display: flex; flex-wrap: wrap; gap: 10px; }
.controls.controls-row > * { flex: 1 1 200px; }

/* override legacy span* inside forms */
.span12, .span11, .span10, .span9, .span8, .span7, .span6, .span5, .span4, .span3, .span2, .span1 {
	width: 100% !important;
	min-height: 0 !important;
	margin-left: 0 !important;
	float: none !important;
}

/* "well" (Bootstrap 2) -> modern card */
.well {
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--c-radius) !important;
	box-shadow: var(--c-shadow-sm) !important;
	padding: 18px !important;
	margin: 0 !important;
}

/* ----------------------------- Buttons ---------------------------------- */
.btn,
button[type="submit"],
input[type="submit"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--ff-sans);
	font-weight: 600;
	font-size: 14px;
	padding: 10px 16px !important;
	border-radius: 10px !important;
	border: 1px solid transparent !important;
	cursor: pointer;
	background: var(--c-surface);
	color: var(--c-text) !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
	text-shadow: none !important;
	box-shadow: none !important;
	background-image: none !important;
	height: auto !important;
	line-height: 1.2 !important;
}
.btn:hover { background: var(--c-surface-2); }
.btn:active { transform: translateY(1px); }
.btn.btn-info,
button[type="submit"],
input[type="submit"] {
	background: var(--c-primary) !important;
	color: #fff !important;
	border-color: var(--c-primary) !important;
}
.btn.btn-info:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--c-primary-hover) !important;
	border-color: var(--c-primary-hover) !important;
	color: #fff !important;
}
.btn.btn-warning {
	background: var(--c-warn) !important;
	border-color: var(--c-warn) !important;
	color: #fff !important;
}
.btn.btn-large { padding: 12px 18px !important; font-size: 15px; }
.btn.btn-small { padding: 7px 12px !important; font-size: 13px; }
.btn-block { display: flex !important; width: 100%; }

/* ---------------------------- Search bar -------------------------------- */
/* Legacy .search (DLE default search page) */
.search {
	position: relative !important;
	width: 100% !important;
	margin: 0 0 16px !important;
}
.searchTerm {
	position: static !important;
	width: 100% !important;
	height: 44px !important;
	padding: 10px 50px 10px 14px !important;
	border-radius: 10px !important;
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	border: 1px solid var(--c-border-strong) !important;
}
.searchButton, .searchIcon {
	position: absolute !important;
	top: 6px !important; right: 6px !important;
	width: 32px !important; height: 32px !important;
	line-height: 32px !important;
	border-radius: 8px !important;
	background: var(--c-primary) !important;
	color: #fff !important;
}
.searchButton { opacity: 0 !important; cursor: pointer !important; }
.searchIcon { pointer-events: none !important; }
.searchIcon::before {
	content: "" !important;
	display: block;
	width: 14px; height: 14px;
	margin: 9px auto 0;
	border: 2px solid #fff;
	border-radius: 50%;
	position: relative;
}
.searchIcon::after {
	content: "" !important;
	position: absolute;
	width: 2px; height: 7px;
	background: #fff;
	top: 18px; left: 18px;
	transform: rotate(-45deg);
}

/* Sidebar search box — flex-row design (no absolute positioning) */
.search-box {
	width: 100%;
	margin: 0 0 10px;
}
.search-box__row {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--c-border-strong);
	border-radius: 10px;
	overflow: hidden;
	background: var(--c-surface);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.search-box__row:focus-within {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(244, 122, 109, .18);
}
.search-box__input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	height: 44px !important;
	padding: 10px 12px !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;
}
/* Override global input focus ring — handled by .search-box__row:focus-within */
.search-box__input:focus {
	border-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}
/* Use higher specificity to beat button[type="submit"] (0,1,1) */
.search-box__row .search-box__btn {
	flex: 0 0 44px !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--c-primary) !important;
	color: #fff !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	background-image: none !important;
	transition: background .15s ease !important;
	margin: 0 !important;
}
.search-box__row .search-box__btn:hover {
	background: var(--c-primary-hover) !important;
}
.search-box__row .search-box__btn:active {
	background: var(--c-primary-active) !important;
	transform: none !important;
}
.search-box__row .search-box__btn svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
	stroke: #fff !important;
	fill: none !important;
	pointer-events: none;
	flex-shrink: 0;
}

/* -------------------------- Comments ------------------------------------ */
.comment {
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--c-radius) !important;
	box-shadow: var(--c-shadow-sm) !important;
	padding: 14px 16px !important;
	margin-bottom: 12px !important;
}
.comment-header { display: flex; align-items: center; gap: 12px; }
.comment-header .comment-meta { flex: 1; min-width: 0; }
.comment-header .comment-rating { margin-left: auto; color: var(--c-text-muted); font-size: 13px; }
.comment-header strong { color: var(--c-text); font-weight: 600; }
.comment-header .muted { color: var(--c-text-muted); font-size: 13px; }
.comment-avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--c-surface-2);
}
.comment-body { margin-top: 10px; color: var(--c-text); font-size: 14.5px; }
.comment-body .text { word-wrap: break-word; }
.comment-footer { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--c-border); }
.comment-footer a { color: var(--c-text-muted); font-size: 13px; }
.comment-footer a:hover { color: var(--c-primary); }

/* Login modal grid */
.login-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .login-grid { grid-template-columns: 1fr; } }
.login-meta a { color: var(--c-primary); }

/* Static / page text — defaults from .static, etc. */
.static, .text-page {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	padding: 20px 22px;
	box-shadow: var(--c-shadow-sm);
}
.static__body, .text-page p { line-height: 1.65; color: var(--c-text); }
.static__body img { border-radius: var(--c-radius-sm); max-width: 100%; height: auto; }

/* Sidebar topnews list */
.topnews-item {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 10px;
	align-items: center;
	padding: 8px 0;
	border-top: 1px solid var(--c-border);
}
.topnews-item:first-child { border-top: 0; padding-top: 0; }
.topnews-item:last-child { padding-bottom: 0; }
.topnews-thumb img {
	width: 56px; height: 56px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
.topnews-title { display: block; color: var(--c-text); font-weight: 500; font-size: 13.5px; line-height: 1.35; }
.topnews-date { display: block; color: var(--c-text-muted); font-size: 12px; margin-top: 2px; }
.topnews-item:hover .topnews-title { color: var(--c-primary); }

/* Search results */
.search-result, .search-comment {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-sm);
	padding: 16px 18px;
	margin-bottom: 14px;
}
.search-result__title { color: var(--c-text); }
.search-result__title:hover { color: var(--c-primary); }
.search-result__meta, .search-comment__head .muted {
	color: var(--c-text-muted); font-size: 13px; margin: 4px 0 8px;
}
.search-result__foot {
	margin-top: 12px; padding-top: 10px;
	border-top: 1px solid var(--c-border);
	display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.search-result--short { padding: 12px 16px; }
.search-comment__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.search-comment__foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--c-border); font-size: 13px; }

/* User profile card */
.user-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-sm);
	padding: 22px;
}
.user-card__head {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--c-border);
	margin-bottom: 14px;
}
.user-card__avatar img {
	width: 96px; height: 96px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.user-card__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 22px;
	margin: 0 0 14px;
}
.user-card__list > div { padding: 4px 0; }
.user-card__list dt { display: inline; font-weight: 600; color: var(--c-text-muted); margin-right: 6px; font-size: 13px; }
.user-card__list dd { display: inline; margin: 0; }
@media (max-width: 600px) {
	.user-card__head { grid-template-columns: 72px 1fr; }
	.user-card__head .user-card__rating { grid-column: 1 / -1; }
	.user-card__avatar img { width: 72px; height: 72px; }
	.user-card__list { grid-template-columns: 1fr; }
}

/* Sidebar adjustments for topnews/news-list */
.sidebar-card .news-list { grid-template-columns: 1fr !important; }

/* Add-news / stats / profile popup consistency */
.box.story,
.basecont,
.statistics,
.userinfo-popup {
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--c-radius) !important;
	box-shadow: var(--c-shadow-sm) !important;
}
.box.story,
.basecont,
.statistics { padding: 18px !important; }

.addform .ui-form { list-style: none; margin: 0; padding: 0; }
.addform .ui-form .form-group { margin-bottom: 14px; }
.addform .wide,
.addform input[type="text"],
.addform input[type="email"],
.addform input[type="password"],
.addform textarea,
.addform select {
	width: 100% !important;
	max-width: 100% !important;
}
.addform table {
	width: 100% !important;
	display: block;
	overflow-x: auto;
}
.form_submit {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.c-captcha {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.statistics .lcol {
	float: none !important;
	display: inline-block;
	vertical-align: top;
	width: calc(33.333% - 12px);
	margin: 0 12px 12px 0;
}
.statistics .lcol:last-child { margin-right: 0; }
.statistics .userstop {
	width: 100% !important;
	display: block;
	overflow-x: auto;
}

.userinfo-popup {
	padding: 14px !important;
}
.userinfo-popup .pull-left {
	float: left;
	margin-right: 12px !important;
}
.userinfo-popup .pull-left img {
	width: 72px !important;
	height: 72px !important;
	object-fit: cover;
	border-radius: 50%;
}
.userinfo-popup .unstyled {
	margin-left: 92px !important;
}

@media (max-width: 760px) {
	.statistics .lcol {
		width: 100%;
		display: block;
		margin: 0 0 12px 0;
	}
	.userinfo-popup .pull-left {
		float: none !important;
		margin: 0 0 10px 0 !important;
	}
	.userinfo-popup .unstyled {
		margin-left: 0 !important;
	}
}

/* -------------------------- Pagination ---------------------------------- */
.pagination, .pages, .navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 18px 0;
	padding: 0;
	font-size: 14px !important;
	line-height: 1.2 !important;
}
.pages a, .pages span,
.navigation a, .navigation span {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	min-width: 36px; height: 36px;
	padding: 0 10px !important;
	border-radius: 9px !important;
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	color: var(--c-text) !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	float: none !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pages span, .navigation span {
	background: var(--c-primary) !important;
	border-color: var(--c-primary) !important;
	color: #fff !important;
}
.pages a:hover, .navigation a:hover {
	background: var(--c-primary) !important;
	border-color: var(--c-primary) !important;
	color: #fff !important;
}

/* ---------------------------- Footer ------------------------------------ */
.footer {
	background: var(--c-surface) !important;
	border-top: 1px solid var(--c-border) !important;
	margin-top: 60px !important;
	padding: 30px 0 !important;
}
.footer h4 {
	font-size: 18px !important;
	font-weight: 600 !important;
	color: var(--c-text) !important;
	text-transform: none !important;
}
.footer p { color: var(--c-text-muted); font-size: 13px; }
.footer-links li { display: inline; padding: 0 8px 0 0; }
.footer a { color: var(--c-primary) !important; }
.footer a:hover { color: var(--c-primary-hover) !important; }

/* ------------------------ Misc legacy cleanups -------------------------- */
.user, .user a { background: transparent !important; color: var(--c-text) !important; }
.user { padding: 0 !important; }
.cn { text-align: left !important; }

/* (Старые .modal-* стили перенесены в .cy-dialog* в начале файла) */

/* Speedbar */
.speedbar {
	font-size: 13px;
	color: var(--c-text-muted);
	margin: 12px 0 8px;
}
.speedbar a { color: var(--c-text-muted); }
.speedbar a:hover { color: var(--c-primary); }

/* Story content */
.story.sep, .fullstory, .post {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	padding: 22px 22px 24px;
	box-shadow: var(--c-shadow-sm);
}
.fullstory__head { margin-bottom: 16px; }
.fullstory__head h1 { margin: 0 0 8px; font-size: 26px; }
.fullstory__body { font-size: 15.5px; line-height: 1.65; color: var(--c-text); }
.fullstory__body img { border-radius: var(--c-radius-sm); max-width: 100%; height: auto; }
.fullstory__body p { margin: 0 0 14px; }
.fullstory__body a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.fullstory__share { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.fullstory__rating { margin-top: 8px; }
.share-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.share-title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--c-text-muted);
	text-transform: uppercase;
}
.share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-text) !important;
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	text-decoration: none !important;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.share-link:hover {
	background: rgba(244, 122, 109, .10);
	border-color: rgba(244, 122, 109, .35);
	color: var(--c-primary) !important;
}
.share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	color: #fff;
}
.share-icon svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	display: block;
}
.share-link--tg .share-icon {
	background: #2aabee;
}
.share-link--wa .share-icon {
	background: #25d366;
}
.share-link--wa .share-icon,
.share-link--wa .share-icon svg,
.share-link--wa .share-icon svg path {
	color: #fff !important;
	fill: #fff !important;
}
.share-link--wa .share-icon svg {
	width: 15px;
	height: 15px;
}
.share-link--wa .share-icon svg path {
	stroke: #fff;
	stroke-width: .7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* ---- Post meta (заголовок записи) ---- */
.post-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 6px 0 18px;
}

/* Категории — мягкие нежные чипы */
.post-meta__cats { font-size: 0; line-height: 0; }
.post-meta__cats a {
	display: inline-block;
	padding: 2px 9px;
	margin: 0 4px 4px 0;
	background: rgba(0,0,0,.045);
	border-radius: 4px;
	color: var(--c-text-muted, #777);
	font-size: 11px;
	font-weight: 500;
	line-height: 18px;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.post-meta__cats a:hover {
	background: rgba(0,0,0,.09);
	color: var(--c-text, #222);
}

/* Инфо-строка */
.post-meta__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--c-text-muted, #999);
	font-size: 11px;
	line-height: 1.4;
}
.post-meta__item { white-space: nowrap; }
.post-meta__dot {
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
	display: inline-block;
}
.post-meta__spacer { flex: 1; min-width: 8px; }
/* DLE оборачивает [edit]/[complaint] в свой <a href="javascript:...">,
   стилизуем и span внутри, и родительский <a> чтобы hover/cursor работали */
.post-meta__info a:has(.post-meta__action),
.post-meta__action {
	color: var(--c-text-muted, #aaa) !important;
	font-size: 11px;
	cursor: pointer;
	text-decoration: none !important;
	margin-left: 12px;
	transition: color .15s ease;
}
.post-meta__info a:has(.post-meta__action) .post-meta__action { margin-left: 0; }
.post-meta__info a:has(.post-meta__action):hover,
.post-meta__info a:has(.post-meta__action):hover .post-meta__action,
.post-meta__action:hover { color: var(--c-primary, #f47a6d) !important; }
.post-meta__info > a:first-of-type { margin-left: 0; }

@media (max-width: 640px) {
	.post-meta__spacer { display: none; }
	.post-meta__action { margin-left: 0; }
}

/* Forms — page-level wrapper */
.form-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-sm);
	padding: 22px;
}
.form-card--feedback {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}
.form-card .form-row { display: flex; flex-wrap: wrap; gap: 12px; }
.form-card .form-row > * { flex: 1 1 220px; min-width: 0; }
.form-card .form-row + .form-row,
.form-card .controls + .controls,
.form-card label + input,
.form-card label + textarea,
.form-card label + select { margin-top: 4px; }
.form-card .form-actions {
	margin-top: 18px;
	display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
}
.form-help {
	margin-top: 8px; font-size: 13px; color: var(--c-text-muted);
}

/* Search page extended layout */
.search-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .search-form { grid-template-columns: 1fr; } }
.search-form fieldset {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-sm);
	padding: 14px 16px;
	margin: 0;
}
.search-form fieldset.search-form__full { grid-column: 1 / -1; }
.search-form legend {
	font-size: 11px; font-weight: 700; text-transform: uppercase;
	color: var(--c-text-soft); letter-spacing: 0.08em;
	padding: 0 6px;
}
.search-form fieldset + fieldset { margin-top: 0; }
.search-form .field-row { margin-bottom: 8px; }
.search-form .field-row:last-child { margin-bottom: 0; }
/* Inline row: select + (input + label text) */
.search-form .field-row--inline {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.search-form .field-row--inline span {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--c-text-muted);
}
.search-form .field-row--inline span input[type="text"],
.search-form .field-row--inline span input[type="number"] {
	width: 64px !important;
	flex: 0 0 64px !important;
	text-align: center;
	padding: 6px 8px !important;
	height: 34px !important;
}
/* Gap row: checkbox + label */
.search-form .field-row--gap {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}
/* Custom checkboxes inside search form */
.search-form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 16px !important;
	height: 16px !important;
	border: 1.5px solid var(--c-border-strong) !important;
	border-radius: 4px !important;
	background: var(--c-surface-2) !important;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	vertical-align: middle;
	transition: border-color .15s, background .15s;
	box-shadow: none !important;
	padding: 0 !important;
}
.search-form input[type="checkbox"]:checked {
	background: var(--c-primary) !important;
	border-color: var(--c-primary) !important;
}
.search-form input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 4px; top: 1px;
	width: 5px; height: 9px;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
	transform: rotate(45deg);
}
.search-form .field-row label {
	display: flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 400;
	color: var(--c-text);
	margin: 4px 0 0;
}
/* Extended search: outer card is invisible, fieldsets are the cards */
.cy-search-page--wide .cy-search-card {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}
.cy-search-page--wide .cy-search-actions {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-sm);
	padding: 16px;
	margin-top: 0;
}

/* Tags / labels */
.label, .badge {
	background: var(--c-surface-2) !important;
	color: var(--c-text) !important;
	border: 1px solid var(--c-border) !important;
	font-weight: 500 !important;
	font-size: 11px !important;
	padding: 2px 8px !important;
	border-radius: 999px !important;
	text-shadow: none !important;
}
.label.label-success, .badge.badge-success { background: rgba(121,192,173,.15) !important; border-color: rgba(121,192,173,.45) !important; color: #2c7a64 !important; }
.label.label-important, .badge.badge-important { background: rgba(225,91,91,.10) !important; border-color: rgba(225,91,91,.4) !important; color: #b03434 !important; }
.label.label-info, .badge.badge-info { background: rgba(244,122,109,.10) !important; border-color: rgba(244,122,109,.45) !important; color: var(--c-primary-hover) !important; }

/* Up button (legacy "modern-upbutton") cleanup */
.modern-upbutton { display: none !important; }

/* Hide scrollspy artifacts and old nav-tabs misuses */
.nav-tabs { border: 0 !important; }
.nav-tabs > li > a {
	border-radius: 9px !important;
	border: 1px solid var(--c-border) !important;
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	margin-right: 6px !important;
}
.nav-tabs > li.active > a {
	background: var(--c-primary) !important;
	border-color: var(--c-primary) !important;
	color: #fff !important;
}

/* ======================================================================
   Utility classes (вынесены инлайн-стили из шаблонов)
   ====================================================================== */

/* Текст */
.muted { color: var(--c-text-muted); }
.small { font-size: 13px; }
.text-danger { color: var(--c-danger) !important; }
.edit-date-line {
	font-size: 13px;
	color: var(--c-text-soft);
	margin: 8px 0 0;
}

/* Form-row helpers */
.form-row-spaced { margin: 12px 0; }
.form-row--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.form-row--inline > input {
	flex: 1 1 220px;
}
.form-row--inline .btn-check { flex: 0 0 auto; }
.form-result-line { margin-top: 6px; min-height: 1em; }

/* Captcha row для DLE */
.captcha-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 12px 0;
}
.input-narrow { max-width: 220px; }
.input-medium { max-width: 320px; }
.readonly-field {
	padding: 10px 12px;
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: 10px;
	color: var(--c-text);
	font-size: 14px;
}

/* Form-card модификаторы */
.form-card--bare {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}
.form-actions--start { justify-content: flex-start !important; }
.form-card .form-row--inline + #result-registration,
.form-card .form-result-line { margin-bottom: 4px; }
.btn.btn-danger {
	background: var(--c-danger) !important;
	border-color: var(--c-danger) !important;
	color: #fff !important;
}
.btn.btn-danger:hover {
	background: #c84b4b !important;
	border-color: #c84b4b !important;
}

/* Comment editor wrapper */
.comment-editor { margin-top: 10px; }
.comment-news-title { margin: 0 0 6px; }
.comment-images { margin-top: 8px; }
.comment-signature {
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px dashed var(--c-border);
	font-size: 13px;
	color: var(--c-text-muted);
}

/* Checkboxes */
.checkbox--inline {
	font-weight: 400 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin: 8px 0 !important;
}
.user-fields-block { margin-top: 14px; }

/* Btn rows */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row--column {
	flex-direction: column;
	max-width: 240px;
}

/* Soc fieldset */
.soc-fieldset {
	margin-top: 18px;
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	padding: 12px 14px;
}
.soc-fieldset legend {
	padding: 0 6px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--c-text-muted);
	letter-spacing: 0.06em;
}
.soc_login {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* User-card detail */
.user-card__name { margin: 0 0 4px; }
.user-card__status {
	font-size: 13px;
	color: var(--c-text-muted);
}
.user-card__tabs { margin-bottom: 14px; }
.rss-icon {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	margin-left: 5px;
}
.rating-icon { width: 14px; height: 14px; vertical-align: middle; }
.rating-ul { display: inline-flex; gap: 6px; align-items: center; padding: 0; margin: 0; list-style: none; }

/* Login modal extras */
.login-name { margin: 0 0 8px; }
.login-form__lost {
	align-self: center;
	color: var(--c-text-muted);
	font-size: 13px;
}
.login-form__lost:hover { color: var(--c-primary); }

/* Footer extras */
.footer-links {
	list-style: none;
	padding: 0;
	margin: 0 0 8px;
}
.footer-links li { display: inline; padding: 0 8px 0 0; }
.footer-links__sep { color: var(--c-text-soft); }
.footer-copy { margin-top: 14px !important; }

/* Sort-bar */
.sort-bar { margin: 0 0 16px; }

/* Search result extras */
.search-result__short-title { margin: 0 0 4px; }
.search-comment__news-title { margin: 0 0 6px; }
.search-comment__quote { margin-left: auto; }
.search-comment__foot-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}
.search-comment__foot-mass { margin-left: auto; }

/* PM messages */
.pm-box { margin-bottom: 15px; }
.pm-message {
	display: flex;
	gap: 12px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	padding: 12px 14px;
	box-shadow: var(--c-shadow-sm);
	margin-bottom: 10px;
}
.pm-message__avatar img {
	width: 40px; height: 40px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.pm-message__body { flex: 1; min-width: 0; }
.pm-message__head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.pm-message__date { margin-left: auto; font-size: 13px; }
.pm-message__text { margin-top: 8px; word-wrap: break-word; }
.pm-message__signature {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dashed var(--c-border);
	color: var(--c-text-muted);
	font-size: 13px;
}
.pm-message__actions {
	margin-top: 8px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 13px;
}
.pm-message__actions a { color: var(--c-text-muted); }
.pm-message__actions a:hover { color: var(--c-primary); }
.pm-editor { margin-top: 10px; }
.vote-total { margin: 6px 0 0; text-align: center; }

/* ----- Vote / poll rows -----*/

/* ======================================================================
   Адаптивная страховка (горизонтальный скролл, медиа в текстах)
   ====================================================================== */

/* Все длинные блоки контента ограничиваем шириной */
.fullstory__body,
.static__body,
.search-result__body,
.search-comment__body,
.comment-body,
.text-page,
.pm-message__body {
	min-width: 0;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Адаптивные медиа в постах */
.fullstory__body img,
.fullstory__body video,
.fullstory__body iframe,
.fullstory__body embed,
.fullstory__body object,
.static__body img,
.static__body video,
.static__body iframe,
.search-result__body img,
.comment-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--c-radius-sm);
}
.fullstory__body iframe,
.fullstory__body video,
.static__body iframe,
.static__body video {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* Таблицы внутри текстовых страниц делаем прокручиваемыми */
.fullstory__body table,
.static__body table,
.text-page table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

/* Pre/code wrap */
.fullstory__body pre,
.static__body pre {
	max-width: 100%;
	overflow-x: auto;
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius-sm);
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.5;
}

/* Container защита */
.container,
.page-wrap,
.content-area,
.sidebar,
main,
.layout-grid {
	max-width: 100%;
	min-width: 0;
}

/* На мобильных: уменьшаем боковые отступы карточек */
@media (max-width: 600px) {
	.form-card,
	.fullstory,
	.static,
	.text-page,
	.user-card,
	.search-result,
	.comment {
		padding: 14px 14px !important;
	}
	.fullstory__head h1,
	h1 { font-size: 22px !important; }
	h2 { font-size: 18px !important; }
	.page-wrap { padding: 16px 0 40px; }
}

/* Скрываем дубль-фон у feedback-формы (на случай DLE-обёртки) */
.form-card--feedback,
.form-card--bare,
.content-area > form.form-card--bare {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Фильтрация: form-card НЕ должна получать ещё одну подложку из content-flow */
.content-flow > .form-card,
.content-flow > form.form-card,
.content-flow > .addcomments,
.content-flow > .user-card,
.content-flow > .fullstory,
.content-flow > .static,
.content-flow > .text-page {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-sm);
}
.content-flow > .form-card--feedback,
.content-flow > .form-card--bare {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* ======================================================================
   2026 STACK: text-wrap, container queries, view transitions, scroll-driven,
   light-dark hooks, popover, masonry
   ====================================================================== */

/* --- Типографика 2026 --- */
/* `balance` для коротких заголовков (макс ~6 строк) — браузер раскладывает
   заголовок так, чтобы строки были равной длины. Лечит «вдовы» в h1/h2. */
h1, h2, h3, h4 {
	text-wrap: balance;
}
/* `pretty` для длинного контента — улучшенный алгоритм переноса последнего
   абзаца, без «висячих» одиночных слов на последней строке. */
.fullstory__body p,
.static__body p,
.text-page p,
.comment-body .text {
	text-wrap: pretty;
	hyphens: auto;
}

/* --- View Transitions API (cross-document MPA) --- */
/* Декларативно включаем плавные переходы между страницами всего сайта.
   Карточка с view-transition-name: fullstory-{id} плавно «вырастает»
   в полную статью (имена совпадают). Без SPA, без JS — нативно. */
@view-transition {
	navigation: auto;
}

/* Тонкая настройка анимаций перехода */
@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: .35s;
		animation-timing-function: cubic-bezier(.2, .8, .2, 1);
	}
	::view-transition-old(root) {
		animation-name: cy-fade-out;
	}
	::view-transition-new(root) {
		animation-name: cy-fade-in;
	}
}
@keyframes cy-fade-out { to { opacity: 0; } }
@keyframes cy-fade-in  { from { opacity: 0; } }

/* --- Полоса прогресса чтения (fullstory): JS задаёт scaleX; без scroll-timeline — стабильнее цвет/толщина --- */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
	box-sizing: border-box;
	transform-origin: left center;
	transform: scaleX(0);
	will-change: transform;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--c-accent) 76%, var(--c-bg)),
		color-mix(in srgb, var(--c-primary) 62%, var(--c-bg))
	);
	z-index: 10050;
	pointer-events: none;
	border: 0;
	outline: none;
	box-shadow: none;
}
.reading-progress.reading-progress--js {
	animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.reading-progress { display: none !important; }
}
body:not(:has(.fullstory)) .reading-progress,
body:not(:has(.fullstory)) #cyReadingBar {
	display: none !important;
}

/* --- Container Queries для карточек --- */
/* Сетка списка карточек становится контейнером — карточки адаптируются
   к ширине КОЛОНКИ, а не экрана. Пригодится в сайдбаре/виджетах. */
.news-list { container-type: inline-size; container-name: news-grid; }
.sidebar   { container-type: inline-size; container-name: sidebar; }

@container news-grid (max-width: 480px) {
	.profile-card__title a { font-size: 13px !important; }
	.profile-card__title { padding: 10px 10px 12px !important; }
}
@container news-grid (max-width: 320px) {
	.profile-card__title { padding: 8px 8px 10px !important; }
}

/* form-card сам становится контейнером — поля внутри подстраиваются
   к его ширине. Если карточка узкая (в сайдбаре) — поля стек-в-колонку,
   на широкой — двухколоночный grid. */
.form-card { container-type: inline-size; container-name: form-card; }
@container form-card (max-width: 520px) {
	.form-card .form-row { flex-direction: column; gap: 8px; }
	.form-card .form-row > * { flex: 1 1 auto; }
}

/* Native grid masonry (grid-template-rows: masonry) removed: it packed <nav class="pagination">
   into the same flow as cards, so pagination sat beside the last card instead of full-width below. */

/* --- Reactions (поверх [rating-type-4]) --- */
.reactions {
	display: flex;
	gap: 10px;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--c-border);
}
.reaction {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--c-border);
	background: var(--c-surface-2);
	color: var(--c-text);
	font: 600 14px / 1 var(--ff-sans);
	cursor: pointer;
	transition: background .15s, border-color .15s, transform .08s;
}
.reaction:hover {
	background: var(--c-primary-soft);
	border-color: var(--c-primary);
	color: var(--c-primary);
}
.reaction:active { transform: scale(.96); }
.reaction__emoji { font-size: 18px; line-height: 1; }
.reaction__count {
	font-variant-numeric: tabular-nums;
	min-width: 1.2ch;
	text-align: left;
}
.reaction--like:hover  { background: oklch(0.95 0.05 145); border-color: oklch(0.65 0.13 145); color: oklch(0.40 0.13 145); }
.reaction--dislike:hover { background: oklch(0.95 0.05 25);  border-color: oklch(0.65 0.16 25);  color: var(--c-danger); }

/* DLE rating utility */
.ignore-select { -webkit-user-select: none; -ms-user-select: none; user-select: none; }

/* Comment rating buttons (plus/minus) — modern look */
.ratebox2, .ratebox3 {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--c-text-muted);
}
.rate-btn {
	display: inline-flex;
	width: 26px; height: 26px;
	align-items: center; justify-content: center;
	border-radius: 8px;
	border: 1px solid var(--c-border);
	background: var(--c-surface);
	color: var(--c-text-muted) !important;
	font-size: 12px;
	transition: background .15s, color .15s, border-color .15s, transform .08s;
}
.rate-btn:hover {
	background: var(--c-primary-soft);
	border-color: var(--c-primary);
	color: var(--c-primary) !important;
	text-decoration: none !important;
}
.rate-btn--minus:hover {
	background: oklch(0.95 0.05 25);
	border-color: oklch(0.65 0.16 25);
	color: var(--c-danger) !important;
}
.rate-btn:active { transform: scale(.92); }
.rate-num {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--c-text);
	min-width: 1.5ch;
	text-align: center;
}
.ratingtypeplusminus {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.ratingtypeplusminus.ratingplus  { color: oklch(0.55 0.13 145); }
.ratingtypeplusminus.ratingminus { color: var(--c-danger); }

/* News rating (fullstory header) */
.fullstory__rating .ratebox,
.fullstory__rating .ratebox2,
.fullstory__rating .ratebox3 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.fullstory__rating a:hover { text-decoration: none; }
.fullstory__rating img.rating-icon { display: block; }

/* --- Theme toggle --- */
.theme-toggle {
	display: inline-flex;
	width: 40px; height: 40px;
	align-items: center; justify-content: center;
	border: 1px solid var(--c-border);
	background: var(--c-surface);
	border-radius: 10px;
	color: var(--c-text);
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.theme-toggle:hover { background: var(--c-surface-2); border-color: var(--c-border-strong); }
.theme-toggle__icon {
	width: 18px; height: 18px;
}
.theme-toggle__icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle__icon--sun  { display: none; }
	:root:not([data-theme="light"]) .theme-toggle__icon--moon { display: inline; }
}
:root[data-theme="dark"] .theme-toggle__icon--sun  { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: inline; }

/* --- <dialog> toast --- */
.cy-toast[open] {
	position: fixed;
	bottom: 20px; right: 20px;
	left: auto; top: auto;
	z-index: 2147483002;
	max-width: 360px;
	margin: 0;
	padding: 12px 16px;
	background: var(--c-surface);
	color: var(--c-text);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-lg);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	white-space: pre-line;
	animation: cy-toast-in .25s ease-out;
}
.cy-toast[data-type="success"] { border-color: oklch(0.7 0.12 150); }
.cy-toast[data-type="error"]   { border-color: var(--c-danger); }
@keyframes cy-toast-in {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

#DLEPush { z-index: 2147483002 !important; }

/* --- Тонкая корректировка карточек/футера в тёмной теме --- */
.site-header { background: light-dark(rgba(255,255,255,.85), oklch(22% 0.006 250 / 0.85)); }
.alert.alert-info {
	background: light-dark(
		linear-gradient(135deg, oklch(95% 0.04 22 / 0.5), oklch(95% 0.04 165 / 0.6)),
		linear-gradient(135deg, oklch(28% 0.05 22 / 0.6), oklch(28% 0.05 165 / 0.6))
	);
}

/* ----- Misc utility classes (final) ----- */
.alert__title { margin: 0 0 6px; }
.alert__msg { margin: 0; }
.search-simple-field { margin-bottom: 14px; }
.search-form__full { grid-column: 1 / -1; }
.search-msg { margin-top: 14px; }
.field-row--gap { margin-top: 8px; }
.field-row--inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cat-menu { margin: 0; padding: 0 0 0 18px; }
.cat-menu__count { float: right; color: var(--c-text-muted); font-size: 12px; }

/* User-info popup */
.userinfo-popup {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-sm);
	padding: 14px;
	display: flex;
	gap: 14px;
}
.userinfo-popup__avatar img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.userinfo-popup__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}
@media (max-width: 600px) {
	.userinfo-popup { flex-direction: column; align-items: flex-start; }
}

/* Add-news form extras */
.addvote-hidden { display: none; }
.addnews-xfields { width: 100%; }
.addnews-form__hint { margin: 20px 0 0 0; color: var(--c-text-muted); font-size: 13px; }
.addnews-form__star { color: #e85319; font-weight: 700; margin-right: 2px; }
.addnews-form__title { margin-bottom: 18px; }
.plus_icon.circle {
	display: inline-flex;
	width: 18px; height: 18px;
	align-items: center; justify-content: center;
	background: var(--c-primary);
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	margin-right: 6px;
}

/* ======================================================================
   STEP 1 — Enterprise 2026: Unified Modal / Popup System
   jQuery UI Dialog override + search suggestions + fast reply + btn-ghost
   ====================================================================== */

/* --- A. jQuery UI Dialog — полный override поверх engine.css --- */

/* Overlay (затемнение) — единый стиль с .cy-dialog::backdrop */
.ui-widget-overlay {
	background: rgba(15, 23, 42, 0.55) !important;
	backdrop-filter: blur(2px) !important;
	-webkit-backdrop-filter: blur(2px) !important;
	opacity: 1 !important;
	filter: none !important;
	transition: opacity .2s ease !important;
	z-index: 99990 !important;
}

/* Контейнер диалога */
.ui-dialog {
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--c-radius-lg) !important;
	box-shadow:
		0 20px 60px rgba(15, 23, 42, 0.22),
		0 8px 24px rgba(15, 23, 42, 0.12),
		var(--c-shadow-lg) !important;
	overflow: hidden !important;
	padding: 0 !important;
	max-width: min(600px, calc(100vw - 32px)) !important;
	max-height: calc(100dvh - 48px) !important;
	/* glassmorphism  */
	backdrop-filter: blur(24px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
	/* Появление */
	animation: cy-dialog-in .22s ease-out !important;
	z-index: 99999 !important;
}

/* Виджет-обёртки: сброс легаси (не трогаем .ui-dialog — у него своя тень) */
.ui-widget:not(.ui-dialog) {
	font-family: var(--ff-sans) !important;
	font-size: 14px !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}
.ui-dialog.ui-widget.ui-widget-content {
	-webkit-box-shadow:
		0 20px 60px rgba(15, 23, 42, 0.22),
		0 8px 24px rgba(15, 23, 42, 0.12) !important;
	box-shadow:
		0 20px 60px rgba(15, 23, 42, 0.22),
		0 8px 24px rgba(15, 23, 42, 0.12) !important;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: var(--ff-sans) !important;
	font-size: 14px !important;
}
.ui-widget-content {
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	font-family: var(--ff-sans) !important;
	font-size: 14px !important;
	border: 0 !important;
}

/* Заголовок */
.ui-dialog .ui-dialog-titlebar,
.ui-widget-header {
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--c-border) !important;
	padding: 14px 18px !important;
	font-family: var(--ff-sans) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: -0.01em !important;
	border-radius: 0 !important;
	background-image: none !important;
}
.ui-dialog .ui-dialog-title {
	float: none !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--c-text) !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

/* Кнопка закрытия (×) — сброс .ui-button-icon-only из engine.css */
.ui-dialog .ui-dialog-titlebar-close,
.ui-dialog .ui-dialog-titlebar-close.ui-button-icon-only {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	padding: 0 !important;
	border-radius: var(--c-radius-sm) !important;
	border: 1px solid transparent !important;
	background: transparent !important;
	cursor: pointer !important;
	transition: background .15s ease, border-color .15s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-indent: 0 !important;
	overflow: hidden !important;
	font-size: 0 !important;
	line-height: 0 !important;
	font-family: var(--ff-sans) !important;
	color: transparent !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus-visible {
	background: var(--c-surface-2) !important;
	border-color: var(--c-border) !important;
	padding: 0 !important;
}
/* Скрыть подпись Close и иконку jQuery UI — только наш × */
.ui-dialog .ui-dialog-titlebar-close > * {
	display: none !important;
	visibility: hidden !important;
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.ui-dialog .ui-dialog-titlebar-close::before {
	content: "×" !important;
	display: block !important;
	font-size: 22px !important;
	line-height: 1 !important;
	font-weight: 400 !important;
	text-indent: 0 !important;
	color: var(--c-text-muted) !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover::before,
.ui-dialog .ui-dialog-titlebar-close:focus-visible::before {
	color: var(--c-text) !important;
}

/* Контент диалога */
.ui-dialog .ui-dialog-content {
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	border: 0 !important;
	padding: 18px 20px !important;
	overflow-y: auto !important;
	max-height: calc(100dvh - 180px) !important;
	-webkit-overflow-scrolling: touch;
	font-size: 14px !important;
	line-height: 1.55 !important;
}

/* Панель кнопок (footer) */
.ui-dialog .ui-dialog-buttonpane {
	background: var(--c-surface-2) !important;
	border-top: 1px solid var(--c-border) !important;
	border-width: 1px 0 0 0 !important;
	margin: 0 !important;
	padding: 12px 18px !important;
	text-align: right !important;
	display: flex !important;
	justify-content: flex-end !important;
	gap: 8px !important;
	background-image: none !important;
}
.ui-dialog .ui-dialog-buttonpane button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	font-family: var(--ff-sans) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	padding: 8px 16px !important;
	border-radius: var(--c-radius-sm) !important;
	border: 1px solid var(--c-border) !important;
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	cursor: pointer !important;
	float: none !important;
	margin: 0 !important;
	line-height: 1.3 !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease !important;
	text-shadow: none !important;
	box-shadow: none !important;
	background-image: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
.ui-dialog .ui-dialog-buttonpane button:hover {
	background: var(--c-surface-2) !important;
	border-color: var(--c-border-strong) !important;
}
.ui-dialog .ui-dialog-buttonpane button:active {
	transform: translateY(1px) !important;
}
/* Primary — последняя кнопка (Insert / OK в DLE) */
.ui-dialog .ui-dialog-buttonpane button:last-child,
.ui-dialog .ui-button.ui-button-success,
.ui-dialog .mediaupload-body .btn-success,
.ui-dialog .mediaupload-body .btn-primary {
	background: var(--c-primary) !important;
	color: #fff !important;
	border-color: var(--c-primary) !important;
}
.ui-dialog .ui-dialog-buttonpane button:last-child:hover,
.ui-dialog .ui-button.ui-button-success:hover,
.ui-dialog .mediaupload-body .btn-success:hover,
.ui-dialog .mediaupload-body .btn-primary:hover {
	background: var(--c-primary-hover) !important;
	border-color: var(--c-primary-hover) !important;
}
.ui-dialog .ui-dialog-buttonpane button.ui-button-delete,
.ui-dialog .ui-button.ui-button-delete,
.ui-dialog .mediaupload-body .btn-danger {
	background: #dc3545 !important;
	color: #fff !important;
	border-color: #dc3545 !important;
}
.ui-dialog .ui-dialog-buttonpane button.ui-button-delete:hover,
.ui-dialog .ui-button.ui-button-delete:hover,
.ui-dialog .mediaupload-body .btn-danger:hover {
	background: #c82333 !important;
	border-color: #bd2130 !important;
}

/* Resize handle — делаем незаметным но функциональным */
.ui-dialog .ui-resizable-se {
	opacity: 0.15 !important;
	width: 12px !important;
	height: 12px !important;
}

/* Draggable cursor */
.ui-draggable .ui-dialog-titlebar {
	cursor: grab !important;
}
.ui-draggable .ui-dialog-titlebar:active {
	cursor: grabbing !important;
}

/* ui-state overrides (кнопки состояний внутри ui-widget) */
.ui-state-default,
.ui-widget-content .ui-state-default {
	background: var(--c-surface) !important;
	background-image: none !important;
	border: 1px solid var(--c-border) !important;
	color: var(--c-text) !important;
	font-weight: 500 !important;
	border-radius: var(--c-radius-sm) !important;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus {
	background: var(--c-surface-2) !important;
	background-image: none !important;
	border: 1px solid var(--c-border-strong) !important;
	color: var(--c-text) !important;
	font-weight: 500 !important;
}
.ui-state-active,
.ui-widget-content .ui-state-active {
	background: var(--c-primary-soft) !important;
	border: 1px solid var(--c-primary) !important;
	color: var(--c-primary) !important;
	font-weight: 600 !important;
}

/* Формы внутри jQuery UI Dialog — наследуем стили modern.css */
.ui-dialog input[type="text"],
.ui-dialog input[type="email"],
.ui-dialog input[type="password"],
.ui-dialog textarea,
.ui-dialog select {
	width: 100% !important;
	font-family: var(--ff-sans) !important;
	font-size: 14px !important;
	color: var(--c-text) !important;
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border-strong) !important;
	border-radius: 10px !important;
	padding: 10px 12px !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
}
.ui-dialog input[type="text"]:focus,
.ui-dialog input[type="email"]:focus,
.ui-dialog input[type="password"]:focus,
.ui-dialog textarea:focus,
.ui-dialog select:focus {
	border-color: var(--c-primary) !important;
	box-shadow: 0 0 0 3px var(--c-primary-ring) !important;
	outline: none !important;
}
.ui-dialog label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--c-text) !important;
	margin: 10px 0 6px !important;
}

/* Tabs / media uploader / tables внутри диалогов */
.ui-dialog .ui-tabs { padding: 0 !important; border: none !important; background: transparent !important; }
.ui-dialog .ui-tabs .ui-tabs-nav { background: var(--c-surface) !important; border: none !important; border-bottom: 1px solid var(--c-border) !important; padding: 0 20px !important; margin: -20px -20px 20px -20px !important; display: flex !important; }
.ui-dialog .ui-tabs .ui-tabs-nav li { background: transparent !important; border: none !important; margin: 0 10px 0 0 !important; }
.ui-dialog .ui-tabs .ui-tabs-nav li a { display: block !important; color: var(--c-text) !important; padding: 16px 10px !important; font-weight: 600 !important; opacity: 0.6 !important; font-family: var(--ff-sans) !important; border-bottom: 2px solid transparent !important; transition: opacity 0.2s, color 0.2s !important; }
.ui-dialog .ui-tabs .ui-tabs-nav li a:hover { opacity: 1 !important; }
.ui-dialog .ui-tabs .ui-tabs-nav li.ui-tabs-active a { opacity: 1 !important; color: var(--c-primary) !important; border-bottom: 2px solid var(--c-primary) !important; }
.ui-dialog .ui-tabs .ui-tabs-panel { padding: 0 !important; background: transparent !important; color: var(--c-text) !important; }
.ui-dialog .mediaupload-body { background: transparent !important; color: var(--c-text) !important; }
.ui-dialog .qq-upload-drop-area,
.ui-dialog .dropzone { background: var(--c-surface) !important; border: 2px dashed var(--c-border) !important; border-radius: var(--c-radius-lg) !important; color: var(--c-text) !important; padding: 30px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
.ui-dialog .qq-upload-button,
.ui-dialog .dropzone .btn { background: var(--c-surface-2) !important; color: var(--c-text) !important; border: 1px solid var(--c-border) !important; border-radius: 8px !important; padding: 10px 20px !important; font-weight: 600 !important; margin: 10px !important; }
.ui-dialog .qq-upload-button:hover,
.ui-dialog .dropzone .btn:hover { background: var(--c-border) !important; }
.ui-dialog table,
.ui-dialog th,
.ui-dialog td { border-color: var(--c-border) !important; color: var(--c-text) !important; }
.ui-dialog th { background: var(--c-surface) !important; }
.ui-dialog .bb-pane-emoticons { background: transparent !important; }
.ui-dialog .bb-pane-dropdown { background: transparent !important; border: none !important; }

/* --- B. Кнопка Ghost (новый уровень иерархии) --- */
.btn-ghost,
a.btn-ghost {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--c-primary) !important;
	padding: 8px 12px !important;
}
.btn-ghost:hover,
a.btn-ghost:hover {
	background: var(--c-primary-soft) !important;
	border-color: transparent !important;
	color: var(--c-primary-hover) !important;
}
.btn-ghost:active { transform: translateY(1px); }

/* --- C. Search Suggestions — modernize #searchsuggestions --- */
#searchsuggestions {
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--c-radius) !important;
	box-shadow: var(--c-shadow-lg) !important;
	max-width: min(420px, calc(100vw - 32px)) !important;
	width: auto !important;
	overflow: hidden !important;
	font-family: var(--ff-sans) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	animation: cy-dialog-in .18s ease-out !important;
}
#searchsuggestions a {
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	padding: 10px 14px !important;
	border-bottom: 1px solid var(--c-border) !important;
	transition: background .12s ease !important;
}
#searchsuggestions a:last-child {
	border-bottom: 0 !important;
}
#searchsuggestions a:hover {
	background: var(--c-surface-2) !important;
	color: var(--c-text) !important;
}
#searchsuggestions a span {
	color: var(--c-text-muted) !important;
}
#searchsuggestions a:hover span {
	color: var(--c-text) !important;
}
#searchsuggestions a span.searchheading {
	background: var(--c-primary) !important;
	color: #fff !important;
	padding: 10px 14px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	border-radius: 0 !important;
}
#searchsuggestions span.notfound {
	background: var(--c-surface) !important;
	color: var(--c-text-muted) !important;
	padding: 14px !important;
	text-align: center !important;
}
#searchsuggestions span.seperator {
	float: none !important;
	display: block !important;
	text-align: center !important;
	padding: 8px 14px !important;
	border-top: 1px solid var(--c-border) !important;
}
#searchsuggestions span.seperator a {
	background: transparent !important;
	color: var(--c-primary) !important;
	padding: 4px 0 !important;
	border: 0 !important;
	font-weight: 600 !important;
	font-size: 13px !important;
}

/* --- D. Fast Reply (быстрый ответ на комментарий) --- */
#dlefastreplycomments {
	background: var(--c-surface-2) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--c-radius) !important;
	padding: 14px 16px !important;
	margin: 12px 0 12px 30px !important;
	box-shadow: var(--c-shadow-sm) !important;
}
.commentsreplyname {
	font-family: var(--ff-sans) !important;
	font-size: 14px !important;
	border: 1px solid var(--c-border-strong) !important;
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	border-radius: 10px !important;
	padding: 10px 12px !important;
	width: 100% !important;
	max-width: 320px !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
}
.commentsreplyname:focus {
	border-color: var(--c-primary) !important;
	box-shadow: 0 0 0 3px var(--c-primary-ring) !important;
	outline: none !important;
}

/* --- E. jQuery UI Autocomplete (теги, упоминания) --- */
.ui-autocomplete {
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--c-radius-sm) !important;
	box-shadow: var(--c-shadow-md) !important;
	padding: 4px !important;
	z-index: 2000 !important;
}
.ui-menu .ui-menu-item {
	float: none !important;
	width: 100% !important;
}
.ui-menu .ui-menu-item a {
	padding: 8px 12px !important;
	border-radius: var(--c-radius-sm) !important;
	font-size: 13px !important;
	color: var(--c-text) !important;
	line-height: 1.4 !important;
	transition: background .12s ease !important;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
	background: var(--c-primary-soft) !important;
	color: var(--c-primary) !important;
	margin: 0 !important;
	font-weight: 500 !important;
	border: 0 !important;
}

/* --- F. Share Popup (выделение текста) — modernize --- */
#share-popup {
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--c-radius) !important;
	box-shadow: var(--c-shadow-lg) !important;
	padding: 12px !important;
	width: auto !important;
	max-width: 380px !important;
}
#share-popup .link {
	border-top-color: var(--c-border) !important;
}
#share-popup .link p {
	color: var(--c-text) !important;
}
#share-popup .link span {
	color: var(--c-text-muted) !important;
}

/* --- G. Marker bar (выделение текста) --- */
#marker-bar {
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--c-radius-sm) !important;
	box-shadow: var(--c-shadow-md) !important;
}
#marker-bar .masha-marker {
	color: var(--c-text-muted) !important;
	border-bottom-color: var(--c-border) !important;
}
#marker-bar .masha-marker:hover {
	color: var(--c-primary) !important;
	border-color: var(--c-primary) !important;
}

/* --- H. PM Progress Bar — modernize --- */
.pm_progress_bar {
	width: 150px !important;
	height: 12px !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--c-radius-pill) !important;
	padding: 1px !important;
	background: var(--c-surface-2) !important;
	overflow: hidden !important;
	display: inline-block;
	vertical-align: middle;
}
.pm_progress_bar span {
	display: block !important;
	background: linear-gradient(90deg, var(--c-primary), var(--c-accent)) !important;
	height: 8px !important;
	border-radius: var(--c-radius-pill) !important;
	text-indent: -9999em !important;
}

/* --- I. Vote / Poll progress bars — modernize --- */
.voteprogress,
.pollprogress {
	background: var(--c-surface-2) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--c-radius-pill) !important;
	height: 14px !important;
	box-shadow: none !important;
	overflow: hidden !important;
	background-image: none !important;
	filter: none !important;
	margin-bottom: 8px !important;
}
.voteprogress span,
.pollprogress span {
	background: var(--c-primary) !important;
	background-image: none !important;
	filter: none !important;
	border-radius: var(--c-radius-pill) !important;
	height: 100% !important;
	text-shadow: none !important;
	font-size: 11px !important;
	line-height: 14px !important;
}
/* Вариации цветов для голосований */
.voteprogress .vote2,
.pollprogress .poll2 { background: var(--c-danger) !important; }
.voteprogress .vote3,
.pollprogress .poll3 { background: var(--c-accent) !important; }
.voteprogress .vote4,
.pollprogress .poll4 { background: oklch(65% 0.12 240) !important; }
.voteprogress .vote5,
.pollprogress .poll5 { background: var(--c-warn) !important; }

/* --- J. Highslide lightbox — minimal cleanup --- */
.highslide-wrapper,
.highslide-outline {
	background: var(--c-surface) !important;
}
.highslide-image {
	border: 0 !important;
	border-radius: var(--c-radius-sm) !important;
}
.highslide-dimming {
	background-color: rgba(15, 23, 42, .7) !important;
}
.highslide-html {
	background-color: var(--c-surface) !important;
	color: var(--c-text) !important;
	border-radius: var(--c-radius) !important;
}
.highslide-caption {
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	padding: 10px 14px !important;
	font-family: var(--ff-sans) !important;
	font-size: 13px !important;
}

/* --- K. DLE Captcha inside dialogs --- */
.ui-dialog .dle-captcha {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center !important;
}
.ui-dialog .dle-captcha img {
	border-radius: var(--c-radius-sm) !important;
}
.ui-dialog .dle-captcha input {
	max-width: 160px !important;
}

/* --- L. Profile popup внутри ui-dialog (AJAX-загрузка) --- */
.ui-dialog .userinfo-popup {
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* --- M. Disabled state for ui-buttons --- */
.ui-dialog .ui-dialog-buttonpane button.ui-state-disabled,
.ui-dialog .ui-dialog-buttonpane button[disabled] {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* --- N. Адаптивность jQuery UI Dialog --- */
@media (max-width: 600px) {
	.ui-dialog {
		max-width: calc(100vw - 16px) !important;
		left: 8px !important;
		right: 8px !important;
	}
	.ui-dialog .ui-dialog-content {
		padding: 14px 14px !important;
	}
	.ui-dialog .ui-dialog-titlebar {
		padding: 12px 14px !important;
	}
	.ui-dialog .ui-dialog-buttonpane {
		padding: 10px 14px !important;
	}
	#dlefastreplycomments {
		margin-left: 14px !important;
	}
}

/* ======================================================================
   STEP 2 — Enterprise 2026: User Dashboard / Stats / PM
   Data Cards, Settings form, Activity grid, PM compose/thread
   ====================================================================== */

/* --- Data Cards (универсальный компонент) --- */
.data-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	padding: 20px 22px;
	box-shadow: var(--c-shadow-sm);
	position: relative;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .15s ease;
}
.data-card:hover {
	box-shadow: var(--c-shadow-md);
}
.data-card__icon {
	font-size: 28px;
	line-height: 1;
	margin-bottom: 10px;
	filter: grayscale(0.1);
}
.data-card__value {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
.data-card__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--c-text-muted);
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.data-card__details {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--c-border);
	font-size: 13px;
	color: var(--c-text-muted);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.data-card__details a {
	color: var(--c-primary);
	font-weight: 500;
}
.data-card__details strong {
	color: var(--c-text);
	font-weight: 600;
}

/* Mini variant (для профиля) */
.data-card--mini {
	padding: 16px 18px;
	text-align: center;
}
.data-card--mini .data-card__value {
	font-size: 26px;
}
.data-card--mini .data-card__details {
	justify-content: center;
	align-items: center;
}

/* Subtle gradient background accent */
.data-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
	opacity: 0;
	transition: opacity .2s ease;
}
.data-card:hover::before {
	opacity: 1;
}

/* ---- Stats Dashboard ---- */
.stats-dashboard {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-sm);
	padding: 24px;
}
.stats-dashboard__title {
	margin: 0 0 20px !important;
	text-wrap: balance;
}
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

/* Activity section */
.stats-activity {
	margin-bottom: 20px;
}
.stats-activity__grid {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.stats-activity__row {
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 10px 14px;
	border-bottom: 1px solid var(--c-border);
	font-size: 14px;
	transition: background .12s ease;
}
.stats-activity__row:last-child {
	border-bottom: 0;
}
.stats-activity__row:hover {
	background: var(--c-surface-2);
	border-radius: var(--c-radius-sm);
}
.stats-activity__period {
	font-weight: 600;
	color: var(--c-text);
	min-width: 100px;
	flex-shrink: 0;
}
.stats-activity__data {
	color: var(--c-text-muted);
}
.stats-db-size {
	font-size: 13px;
	color: var(--c-text-muted);
	margin: 0 0 20px;
	padding: 10px 14px;
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius-sm);
}
.stats-db-size strong {
	color: var(--c-text);
}
.stats-topusers {
	margin-top: 20px;
}
.stats-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.stats-table td,
.stats-table th {
	padding: 10px 12px;
	border-bottom: 1px solid var(--c-border);
	text-align: left;
	color: var(--c-text);
}
.stats-table th {
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-text-muted);
	background: var(--c-surface-2);
}
.stats-table tr:hover td {
	background: var(--c-surface-2);
}

/* Legacy stats overrides */
.blue { color: var(--c-primary) !important; }
.pheading { margin: 0 !important; padding: 0 !important; }
.dpad, .infoblock, .radial { margin: 0; padding: 0; }

@media (max-width: 600px) {
	.stats-grid {
		grid-template-columns: 1fr;
	}
	.stats-dashboard {
		padding: 16px;
	}
	.stats-activity__row {
		flex-direction: column;
		gap: 4px;
	}
	.stats-activity__period {
		min-width: 0;
	}
}

/* ---- User Dashboard ---- */
.user-dashboard {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-sm);
	padding: 0;
	overflow: hidden;
}

/* Hero section */
.user-dashboard__hero {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 24px 24px 20px;
	background:
		linear-gradient(135deg, oklch(from var(--c-primary) l c h / 0.06), oklch(from var(--c-accent) l c h / 0.08));
	border-bottom: 1px solid var(--c-border);
}
.user-dashboard__avatar {
	position: relative;
}
.user-dashboard__avatar img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 3px solid var(--c-surface);
	box-shadow: var(--c-shadow-sm);
}
.user-dashboard__status-dot {
	position: absolute;
	bottom: 4px;
	right: 4px;
	width: 14px;
	height: 14px;
	background: oklch(0.7 0.18 145);
	border: 2.5px solid var(--c-surface);
	border-radius: 50%;
}
.user-dashboard__name {
	margin: 0 0 4px !important;
	font-size: 22px !important;
}
.user-dashboard__group {
	font-size: 13px;
	color: var(--c-text-muted);
	margin-bottom: 6px;
}
.user-dashboard__rating {
	text-align: right;
}
.user-dashboard__tabs {
	padding: 0 24px;
	margin: 16px 0 0 !important;
}

/* Data grid (mini cards in profile) */
.user-data-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	padding: 20px 24px 0;
}

/* Info list (dl) */
.user-info-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 16px 0 0;
	padding: 0 24px;
}
.user-info-list__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 0;
	border-bottom: 1px solid var(--c-border);
}
.user-info-list dt {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-text-muted);
	margin: 0;
}
.user-info-list dd {
	display: block;
	margin: 0;
	font-size: 14px;
	color: var(--c-text);
	font-weight: 500;
}

/* User sections (about, signature) */
.user-section {
	padding: 0 24px;
	margin-bottom: 20px;
}
.user-section p {
	color: var(--c-text);
	line-height: 1.6;
}

/* Tab content padding */
.user-dashboard .tab-content {
	padding-bottom: 24px;
}

/* ---- Settings form ---- */
.settings-form {
	padding: 0 24px;
}
.settings-fieldset {
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	padding: 18px 20px;
	margin: 0 0 16px;
	background: var(--c-surface-2);
}
.settings-fieldset legend {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--c-text-muted);
	padding: 0 8px;
}
.settings-fieldset label {
	margin-top: 12px;
}
.settings-fieldset label:first-of-type {
	margin-top: 4px;
}
.settings-fieldset input[type="text"],
.settings-fieldset input[type="email"],
.settings-fieldset input[type="password"],
.settings-fieldset textarea,
.settings-fieldset select {
	margin-top: 4px;
}
.settings-fieldset input[type="file"] {
	font-family: var(--ff-sans);
	font-size: 13px;
	color: var(--c-text);
	margin-top: 4px;
}
.settings-subscriptions {
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Accent-color for native checkboxes and radios */
.settings-form input[type="checkbox"],
.settings-form input[type="radio"],
.user-dashboard input[type="checkbox"],
.user-dashboard input[type="radio"] {
	accent-color: var(--c-primary);
}

/* Focus-visible for settings inputs */
.settings-fieldset input:focus-visible,
.settings-fieldset textarea:focus-visible,
.settings-fieldset select:focus-visible {
	outline: 2px solid var(--c-primary-ring);
	outline-offset: 2px;
}

@media (max-width: 700px) {
	.user-dashboard__hero {
		grid-template-columns: auto 1fr;
		padding: 18px 16px 16px;
	}
	.user-dashboard__hero .user-dashboard__rating {
		grid-column: 1 / -1;
	}
	.user-dashboard__avatar img {
		width: 72px;
		height: 72px;
	}
	.user-info-list {
		grid-template-columns: 1fr;
		padding: 0 16px;
	}
	.user-data-grid {
		grid-template-columns: 1fr 1fr;
		padding: 16px 16px 0;
	}
	.user-section {
		padding: 0 16px;
	}
	.user-dashboard__tabs {
		padding: 0 16px;
	}
	.settings-form {
		padding: 0 16px;
	}
	.settings-fieldset {
		padding: 14px 14px;
	}
}

/* ---- PM Dashboard ---- */
.pm-dashboard {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow-sm);
	padding: 24px;
}
.pm-dashboard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.pm-dashboard__head h3,
.pm-dashboard__head h4 {
	margin: 0 !important;
}
.pm-dashboard__nav {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.pm-dashboard__status {
	margin-bottom: 20px;
}
.pm-progress {
	margin-bottom: 6px;
}
.pm-progress__label {
	font-size: 12px;
	color: var(--c-text-muted);
	font-weight: 500;
}

/* PM compose form */
.pm-compose {
	margin-top: 20px;
}
.pm-compose h4 {
	margin: 0 0 14px !important;
}
.pm-compose__form label {
	margin-top: 12px;
}
.pm-compose__form label:first-child {
	margin-top: 0;
}

/* PM dialog info */
.pm-dialog-info {
	font-size: 13px;
	color: var(--c-text-muted);
	margin: 0 0 16px;
	padding: 10px 14px;
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius-sm);
}

/* PM thread */
.pm-thread {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 24px;
}

/* PM reply section */
.pm-reply {
	padding-top: 16px;
	border-top: 1px solid var(--c-border);
}

/* PMlist items (DLE renders these) */
.pmlist {
	margin-bottom: 16px;
}

/* PM Dashboard Card (Enterprise 2026) */
.pm-dashboard-card {
	padding: 24px;
	margin-bottom: 24px;
	border: 1px solid var(--c-border);
}

.pm-dashboard-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--c-border);
}

.pm-dashboard-header h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--c-text);
}

.pm-dashboard-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--c-text-muted);
}

/* PM Menu Links */
.pm-menu {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}
.pm-menu .btn {
	border-radius: var(--c-radius-sm);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}

/* Override default DLE .pm table inside .pmlist-wrap */
.pmlist-wrap table.pm {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 8px;
	margin-top: -8px;
}

.pmlist-wrap table.pm th {
	background: transparent;
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--c-text-muted);
	border-bottom: 1px solid var(--c-border);
	text-align: left;
}

.pmlist-wrap table.pm td {
	padding: 16px;
	background: var(--c-surface);
	border-top: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border);
	vertical-align: middle;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pmlist-wrap table.pm td:first-child {
	border-left: 1px solid var(--c-border);
	border-radius: var(--c-radius-sm) 0 0 var(--c-radius-sm);
}

.pmlist-wrap table.pm td:last-child {
	border-right: 1px solid var(--c-border);
	border-radius: 0 var(--c-radius-sm) var(--c-radius-sm) 0;
}

.pmlist-wrap table.pm tr:hover td {
	background: var(--c-surface-2);
	box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

/* Dark mode shadow adjustment */
[data-theme="dark"] .pmlist-wrap table.pm tr:hover td {
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* PM Links inside the table */
.pmlist-wrap table.pm td a {
	color: var(--c-text);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.pmlist-wrap table.pm td a:hover {
	color: var(--c-primary);
}

/* PM Checkboxes & Actions */
.pmlist-wrap table.pm td input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}

/* Bottom action panel (usually dropdown + button) */
.pmlist-wrap form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--c-border);
	align-items: center;
	justify-content: flex-end;
}

.pmlist-wrap select {
	padding: 8px 32px 8px 12px;
	border: 1px solid var(--c-border);
	background-color: var(--c-surface-2);
	color: var(--c-text);
	border-radius: var(--c-radius-sm);
	font-size: 14px;
	outline: none;
	cursor: pointer;
}

.pmlist-wrap select:focus {
	border-color: var(--c-primary);
}

.pmlist-wrap form input[type="button"],
.pmlist-wrap form input[type="submit"],
.pmlist-wrap form button {
	padding: 8px 16px;
	background: var(--c-primary);
	color: var(--c-primary-text);
	border: none;
	border-radius: var(--c-radius-sm);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
}

.pmlist-wrap form input[type="button"]:hover,
.pmlist-wrap form input[type="submit"]:hover,
.pmlist-wrap form button:hover {
	background: color-mix(in srgb, var(--c-primary) 85%, black);
}

/* Read Message Header */
.pm-read-header {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--c-border);
}

.pm-read-header h4 {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px 0;
}

.pm-read-dialog {
	color: var(--c-text-muted);
	font-size: 14px;
	margin: 0;
}

/* Reply Box */
.pm-reply-box {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--c-border);
}

.pm-reply-box h4 {
	font-size: 16px;
	margin: 0 0 16px 0;
}

@media (max-width: 600px) {
	.pm-dashboard-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.pmlist-wrap table.pm {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* ======================================================================
   DARK MODE — точечные overrides
   Применяются ТОЛЬКО в dark-режиме (prefers-color-scheme: dark ИЛИ
   data-theme="dark"). Все цвета — через переменные темы, без хардкода.
   БЕЗОПАСНО для light mode: эти правила изолированы в @media / :root[].
   ====================================================================== */

/* Миксин: применяем и через prefers, и через data-theme=dark */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {

		/* ---- cy-dialog (native <dialog>) ---- */
		/* .cy-dialog__inner и __head уже используют var(--c-surface),
		   дополнительно усиливаем тень для темного фона */
		.cy-dialog__inner {
			box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
		}

		/* ---- .modal-body / .modal-footer / .login-form внутри cy-dialog ----
		   DLE рендерит login.tpl как .modal-body и .modal-footer внутри
		   .cy-dialog__body. Гарантируем тёмный фон и читаемый текст. */
		.cy-dialog .modal-body,
		.cy-dialog .modal-footer,
		.cy-dialog .login-form,
		.cy-dialog .modal-header {
			background: var(--c-surface) !important;
			color: var(--c-text) !important;
		}
		.cy-dialog .modal-footer {
			border-top: 1px solid var(--c-border) !important;
		}

		/* ---- login-grid: имя, список мета-ссылок ---- */
		.login-grid {
			color: var(--c-text);
		}
		.login-meta li,
		.login-meta a {
			color: var(--c-text-muted);
		}
		.login-meta a:hover {
			color: var(--c-primary);
		}
		.login-name strong {
			color: var(--c-text);
		}

		/* ---- Форма комментариев (.addcomments / .form-card) ----
		   form-card использует var(--c-surface) — должно работать.
		   Добавляем страховку для случаев DLE-инжекта inline-style. */
		#comments-section {
			background: transparent !important;
			border: 0 !important;
			box-shadow: none !important;
		}
		.addcomments,
		.form-card.addcomments {
			background: var(--c-surface) !important;
			color: var(--c-text) !important;
		}

		/* textarea и input внутри addcomments — engine.css может ставить
		   background:#fff через низкоспецифичные правила */
		.addcomments textarea,
		.addcomments input[type="text"],
		.addcomments input[type="email"],
		.addcomments input[type="password"],
		.addcomments input[type="number"],
		.addcomments select,
		.cy-comments-form textarea,
		.cy-comments-form input[type="text"],
		.cy-comments-form input[type="email"],
		/* login-form fields */
		.login-form input[type="text"],
		.login-form input[type="password"],
		.login-form input[type="email"],
		.login-form select,
		/* любые поля внутри cy-dialog */
		.cy-dialog input[type="text"],
		.cy-dialog input[type="password"],
		.cy-dialog input[type="email"],
		.cy-dialog input[type="number"],
		.cy-dialog textarea,
		.cy-dialog select {
			background: var(--c-surface) !important;
			color: var(--c-text) !important;
			border-color: var(--c-border-strong) !important;
		}
		.addcomments textarea:focus,
		.addcomments input:focus,
		.cy-comments-form textarea:focus,
		.cy-comments-form input:focus,
		.login-form input:focus,
		.cy-dialog input:focus,
		.cy-dialog textarea:focus,
		.cy-dialog select:focus {
			border-color: var(--c-primary) !important;
			box-shadow: 0 0 0 3px var(--c-primary-ring) !important;
			outline: none !important;
		}

		/* label и form-help */
		.addcomments label,
		.cy-comments-form label,
		.login-form label,
		.cy-dialog label {
			color: var(--c-text) !important;
		}
		.addcomments .form-help {
			color: var(--c-text-muted) !important;
		}

		/* Кнопки по умолчанию (нейтральные, не primary) в тёмной теме */
		.cy-dialog .btn:not(.btn-info):not(.btn-warning):not(.btn-danger),
		.addcomments .btn:not(.btn-info):not(.btn-warning):not(.btn-danger) {
			background: var(--c-surface-2) !important;
			border-color: var(--c-border) !important;
			color: var(--c-text) !important;
		}
		.cy-dialog .btn:not(.btn-info):not(.btn-warning):not(.btn-danger):hover,
		.addcomments .btn:not(.btn-info):not(.btn-warning):not(.btn-danger):hover {
			background: var(--c-border) !important;
			border-color: var(--c-border-strong) !important;
		}

		/* Alert-блоки — делаем полупрозрачными вместо яркого светлого фона */
		.alert-info    { background: oklch(28% 0.04 220 / 0.6) !important; border-color: oklch(40% 0.06 220 / 0.7) !important; color: oklch(80% 0.05 220) !important; }
		.alert-success { background: oklch(25% 0.06 145 / 0.55) !important; border-color: oklch(40% 0.09 145 / 0.7) !important; color: oklch(78% 0.08 145) !important; }
		.alert-warning { background: oklch(28% 0.08 70 / 0.55) !important; border-color: oklch(42% 0.10 70 / 0.7) !important; color: oklch(80% 0.08 70) !important; }
		.alert-error,
		.alert-danger  { background: oklch(25% 0.08 25 / 0.55) !important; border-color: oklch(42% 0.12 25 / 0.7) !important; color: oklch(78% 0.09 25) !important; }

		/* Label / badge семантические варианты — повышаем яркость текста */
		.label-success, .badge-success     { color: oklch(75% 0.13 145) !important; }
		.label-warning, .badge-warning     { color: oklch(78% 0.10 70) !important; }
		.label-important, .badge-important { color: oklch(75% 0.14 25) !important; }
		.label-info, .badge-info           { color: oklch(75% 0.08 220) !important; }

		/* soc_login кнопки (VK/Yandex/etc) */
		.soc_login .btn {
			background: var(--c-surface-2) !important;
			border-color: var(--c-border) !important;
			color: var(--c-text) !important;
		}
		.soc_login .btn:hover {
			background: var(--c-border) !important;
			border-color: var(--c-border-strong) !important;
		}

		/* Ссылка "Забыли пароль?" */
		.login-form__lost {
			color: var(--c-text-muted) !important;
		}
		.login-form__lost:hover {
			color: var(--c-primary) !important;
		}
	}
}

/* Аналогичный блок для явного data-theme="dark"
   (переключение вручную, без prefers-color-scheme) */
:root[data-theme="dark"] {

	.cy-dialog__inner {
		box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
	}

	.cy-dialog .modal-body,
	.cy-dialog .modal-footer,
	.cy-dialog .login-form,
	.cy-dialog .modal-header {
		background: var(--c-surface) !important;
		color: var(--c-text) !important;
	}
	.cy-dialog .modal-footer {
		border-top: 1px solid var(--c-border) !important;
	}

	.login-meta li,
	.login-meta a { color: var(--c-text-muted); }
	.login-meta a:hover { color: var(--c-primary); }
	.login-name strong { color: var(--c-text); }

	.addcomments,
	.form-card.addcomments {
		background: var(--c-surface) !important;
		color: var(--c-text) !important;
	}

	.addcomments textarea,
	.addcomments input[type="text"],
	.addcomments input[type="email"],
	.addcomments input[type="password"],
	.addcomments input[type="number"],
	.addcomments select,
	.login-form input[type="text"],
	.login-form input[type="password"],
	.login-form input[type="email"],
	.login-form select,
	.cy-dialog input[type="text"],
	.cy-dialog input[type="password"],
	.cy-dialog input[type="email"],
	.cy-dialog input[type="number"],
	.cy-dialog textarea,
	.cy-dialog select {
		background: var(--c-surface) !important;
		color: var(--c-text) !important;
		border-color: var(--c-border-strong) !important;
	}
	.addcomments textarea:focus,
	.addcomments input:focus,
	.login-form input:focus,
	.cy-dialog input:focus,
	.cy-dialog textarea:focus,
	.cy-dialog select:focus {
		border-color: var(--c-primary) !important;
		box-shadow: 0 0 0 3px var(--c-primary-ring) !important;
		outline: none !important;
	}

	.addcomments label,
	.login-form label,
	.cy-dialog label { color: var(--c-text) !important; }
	.addcomments .form-help { color: var(--c-text-muted) !important; }

	.cy-dialog .btn:not(.btn-info):not(.btn-warning):not(.btn-danger),
	.addcomments .btn:not(.btn-info):not(.btn-warning):not(.btn-danger) {
		background: var(--c-surface-2) !important;
		border-color: var(--c-border) !important;
		color: var(--c-text) !important;
	}
	.cy-dialog .btn:not(.btn-info):not(.btn-warning):not(.btn-danger):hover,
	.addcomments .btn:not(.btn-info):not(.btn-warning):not(.btn-danger):hover {
		background: var(--c-border) !important;
		border-color: var(--c-border-strong) !important;
	}

	.alert-info    { background: oklch(28% 0.04 220 / 0.6) !important; border-color: oklch(40% 0.06 220 / 0.7) !important; color: oklch(80% 0.05 220) !important; }
	.alert-success { background: oklch(25% 0.06 145 / 0.55) !important; border-color: oklch(40% 0.09 145 / 0.7) !important; color: oklch(78% 0.08 145) !important; }
	.alert-warning { background: oklch(28% 0.08 70 / 0.55) !important; border-color: oklch(42% 0.10 70 / 0.7) !important; color: oklch(80% 0.08 70) !important; }
	.alert-error,
	.alert-danger  { background: oklch(25% 0.08 25 / 0.55) !important; border-color: oklch(42% 0.12 25 / 0.7) !important; color: oklch(78% 0.09 25) !important; }

	.label-success, .badge-success     { color: oklch(75% 0.13 145) !important; }
	.label-warning, .badge-warning     { color: oklch(78% 0.10 70) !important; }
	.label-important, .badge-important { color: oklch(75% 0.14 25) !important; }
	.label-info, .badge-info           { color: oklch(75% 0.08 220) !important; }

	.soc_login .btn {
		background: var(--c-surface-2) !important;
		border-color: var(--c-border) !important;
		color: var(--c-text) !important;
	}
	.soc_login .btn:hover {
		background: var(--c-border) !important;
		border-color: var(--c-border-strong) !important;
	}

	.login-form__lost { color: var(--c-text-muted) !important; }
	.login-form__lost:hover { color: var(--c-primary) !important; }

	/* ---- BB-Editor Dark Mode ---- */
	.bb-pane {
		background: var(--c-surface-2) !important;
		border-color: var(--c-border-strong) !important;
		box-shadow: none !important;
	}
	.bb-btn {
		background: var(--c-surface) !important;
		border-color: var(--c-border) !important;
		box-shadow: none !important;
		color: var(--c-text) !important;
	}
	.bb-btn:hover {
		background: var(--c-border) !important;
		border-color: var(--c-border-strong) !important;
		box-shadow: none !important;
	}
	.bb-btn:active {
		background: var(--c-border-strong) !important;
		box-shadow: inset 0 2px 4px rgba(0,0,0,.2) !important;
	}
	.bb-pane-dropdown {
		background: var(--c-surface) !important;
		border-color: var(--c-border-strong) !important;
		box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
	}
	.bb-pane-dropdown > li > a {
		color: var(--c-text) !important;
	}
	.bb-pane-dropdown > li > a:hover {
		background: var(--c-surface-2) !important;
		color: var(--c-primary) !important;
	}
	.bb-editor textarea {
		background: var(--c-surface) !important;
		color: var(--c-text) !important;
		border-color: var(--c-border-strong) !important;
	}
	.bb-editor textarea:focus {
		border-color: var(--c-primary) !important;
		box-shadow: 0 0 0 3px var(--c-primary-ring) !important;
	}
}

/* ---- TinyMCE Editor Dark Mode Overrides ---- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .tox-tinymce {
		border-color: var(--c-border-strong) !important;
		background: var(--c-surface) !important;
	}
	:root:not([data-theme="light"]) .tox .tox-toolbar,
	:root:not([data-theme="light"]) .tox .tox-toolbar__overflow,
	:root:not([data-theme="light"]) .tox .tox-toolbar__primary,
	:root:not([data-theme="light"]) .tox .tox-menubar {
		background: var(--c-surface-2) !important;
	}
	:root:not([data-theme="light"]) .tox .tox-mbtn,
	:root:not([data-theme="light"]) .tox .tox-tbtn {
		color: var(--c-text) !important;
	}
	:root:not([data-theme="light"]) .tox .tox-tbtn:hover,
	:root:not([data-theme="light"]) .tox .tox-mbtn:hover {
		background: var(--c-surface) !important;
	}
	:root:not([data-theme="light"]) .tox .tox-tbtn--enabled, 
	:root:not([data-theme="light"]) .tox .tox-tbtn--enabled:hover {
		background: var(--c-border) !important;
	}
	:root:not([data-theme="light"]) .tox .tox-tbtn svg {
		fill: var(--c-text) !important;
	}
	:root:not([data-theme="light"]) .tox .tox-statusbar {
		background: var(--c-surface-2) !important;
		border-top-color: var(--c-border) !important;
		color: var(--c-text-muted) !important;
	}
	:root:not([data-theme="light"]) .tox .tox-statusbar a,
	:root:not([data-theme="light"]) .tox .tox-statusbar__path-item {
		color: var(--c-text-muted) !important;
	}
	:root:not([data-theme="light"]) .tox .tox-edit-area__iframe {
		background: var(--c-surface) !important;
	}
}

:root[data-theme="dark"] .tox-tinymce {
	border-color: var(--c-border-strong) !important;
	background: var(--c-surface) !important;
}
:root[data-theme="dark"] .tox .tox-toolbar,
:root[data-theme="dark"] .tox .tox-toolbar__overflow,
:root[data-theme="dark"] .tox .tox-toolbar__primary,
:root[data-theme="dark"] .tox .tox-menubar {
	background: var(--c-surface-2) !important;
}
:root[data-theme="dark"] .tox .tox-mbtn,
:root[data-theme="dark"] .tox .tox-tbtn {
	color: var(--c-text) !important;
}
:root[data-theme="dark"] .tox .tox-tbtn:hover,
:root[data-theme="dark"] .tox .tox-mbtn:hover {
	background: var(--c-surface) !important;
}
:root[data-theme="dark"] .tox .tox-tbtn--enabled, 
:root[data-theme="dark"] .tox .tox-tbtn--enabled:hover {
	background: var(--c-border) !important;
}
:root[data-theme="dark"] .tox .tox-tbtn svg {
	fill: var(--c-text) !important;
}
:root[data-theme="dark"] .tox .tox-statusbar {
	background: var(--c-surface-2) !important;
	border-top-color: var(--c-border) !important;
	color: var(--c-text-muted) !important;
}
:root[data-theme="dark"] .tox .tox-statusbar a,
:root[data-theme="dark"] .tox .tox-statusbar__path-item {
	color: var(--c-text-muted) !important;
}
:root[data-theme="dark"] .tox .tox-edit-area__iframe {
	background: var(--c-surface) !important;
}

/* ---- BB-Editor Dark Mode (data-theme) ---- */
:root[data-theme="dark"] .bb-pane {
	background: var(--c-surface-2) !important;
	border-color: var(--c-border-strong) !important;
	box-shadow: none !important;
}
:root[data-theme="dark"] .bb-btn {
	background: var(--c-surface) !important;
	border-color: var(--c-border) !important;
	box-shadow: none !important;
	color: var(--c-text) !important;
}
:root[data-theme="dark"] .bb-btn:hover {
	background: var(--c-border) !important;
	border-color: var(--c-border-strong) !important;
	box-shadow: none !important;
}
:root[data-theme="dark"] .bb-btn:active {
	background: var(--c-border-strong) !important;
	box-shadow: inset 0 2px 4px rgba(0,0,0,.2) !important;
}
:root[data-theme="dark"] .bb-pane-dropdown {
	background: var(--c-surface) !important;
	border-color: var(--c-border-strong) !important;
	box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
}
:root[data-theme="dark"] .bb-pane-dropdown > li > a {
	color: var(--c-text) !important;
}
:root[data-theme="dark"] .bb-pane-dropdown > li > a:hover {
	background: var(--c-surface-2) !important;
	color: var(--c-primary) !important;
}
:root[data-theme="dark"] .bb-editor textarea {
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	border-color: var(--c-border-strong) !important;
}
:root[data-theme="dark"] .bb-editor textarea:focus {
	border-color: var(--c-primary) !important;
	box-shadow: 0 0 0 3px var(--c-primary-ring) !important;
}

/* ---- Comment editor polish (dark) ----
   Единый стиль панели/иконок/рамки для legacy BB-editor. */
:root[data-theme="dark"] .comment-editor .bb-editor {
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border-strong) !important;
	border-radius: 12px !important;
	overflow: hidden;
	box-shadow: var(--c-shadow-sm) !important;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .comment-editor .bb-editor {
		background: var(--c-surface) !important;
		border: 1px solid var(--c-border-strong) !important;
		border-radius: 12px !important;
		overflow: hidden;
		box-shadow: var(--c-shadow-sm) !important;
	}
}

:root[data-theme="dark"] .comment-editor .bb-pane,
:root[data-theme="dark"] .comment-editor .bbcodes,
:root[data-theme="dark"] .comment-editor .bbcodes_poll {
	background: var(--c-surface-2) !important;
	border: 0 !important;
	border-bottom: 1px solid color-mix(in oklab, var(--c-border-strong) 70%, black 30%) !important;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35) !important;
	text-shadow: none !important;
	color: var(--c-text) !important;
}

:root[data-theme="dark"] .comment-editor .bb-btn {
	background: transparent !important;
	border: 1px solid transparent !important;
	color: var(--c-text-muted) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

:root[data-theme="dark"] .comment-editor .bb-btn::before {
	color: var(--c-text) !important;
	opacity: .92;
}

:root[data-theme="dark"] .comment-editor .bb-btn:hover {
	background: var(--c-surface) !important;
	border-color: var(--c-border) !important;
	color: var(--c-text) !important;
}

:root[data-theme="dark"] .comment-editor .bb-btn:active {
	background: var(--c-border) !important;
	border-color: var(--c-border-strong) !important;
}

:root[data-theme="dark"] .comment-editor .bb-sep {
	opacity: .2;
}

:root[data-theme="dark"] .comment-editor .bb-sel select {
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: 8px !important;
}

:root[data-theme="dark"] .comment-editor .bb-editor textarea {
	background: color-mix(in oklab, var(--c-surface) 94%, black 6%) !important;
	color: var(--c-text) !important;
	border: 0 !important;
	border-top: 1px solid var(--c-border) !important;
	padding: 12px !important;
}

/* ======================================================================
   BUG FIXES — Sidebar, Comments, Profile
   ====================================================================== */

/* --- Search hint (merged into search card) --- */
.search-hint {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px;
	color: var(--c-text-muted);
	line-height: 1.45;
}

/* --- Search bar: remove bottom margin when inside merged card --- */
.sidebar-card .search {
	margin-bottom: 10px !important;
}

/* --- Sidebar Login Form (for guests) --- */
.sidebar-login-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sidebar-login-form input[type="text"],
.sidebar-login-form input[type="password"] {
	width: 100%;
	font-size: 13px;
	padding: 9px 12px !important;
}
.sidebar-login-links {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	justify-content: center;
	margin-top: 2px;
}
.sidebar-login-links a {
	color: var(--c-text-muted);
	transition: color .15s ease;
}
.sidebar-login-links a:hover {
	color: var(--c-primary);
}
.sidebar-login-links__sep {
	color: var(--c-text-soft);
}

/* --- Sidebar Profile (for logged-in users) --- */
.sidebar-profile {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sidebar-profile__head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.sidebar-profile__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--c-surface-2);
	flex-shrink: 0;
}
.sidebar-profile__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.sidebar-profile__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sidebar-profile__group {
	font-size: 12px;
	color: var(--c-text-muted);
	font-weight: 500;
}
.sidebar-profile__links {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.sidebar-profile__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--c-text) !important;
	border-radius: var(--c-radius-sm);
	transition: background .12s ease, color .12s ease;
}
.sidebar-profile__links a:hover {
	background: var(--c-surface-2);
	color: var(--c-primary) !important;
}
.sidebar-profile__links a strong {
	color: var(--c-primary);
	font-weight: 600;
}
.sidebar-profile__actions {
	display: flex;
	gap: 8px;
	padding-top: 6px;
	border-top: 1px solid var(--c-border);
}
.sidebar-profile__actions .btn {
	flex: 1;
	text-align: center;
	font-size: 13px !important;
}

/* ===================================================
   Comments block — monolithic: heading + cards
   =================================================== */

/* The heading sits above comments, no bottom border/shadow gap */
.comments-heading {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-bottom: 0;
	border-radius: var(--c-radius) var(--c-radius) 0 0;
	box-shadow: none;
	padding: 16px 20px 12px;
	margin: 0 !important;
	font-size: 15px;
	font-weight: 600;
}
/* First comment: no top border (heading provides it), no top radius */
.comments-heading + .comment {
	border-top: 1px solid var(--c-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin-top: 0 !important;
}
/* Middle comments: flat cards separated by gap */
.comment {
	margin-bottom: 12px !important;
}
/* Prevent double-top-border when heading is present */
.comments-heading + .comment {
	margin-top: 0 !important;
}

/* ======================================================
   SAW — Sidebar Account Widget (logged-in state)
   ====================================================== */
.sidebar-account-widget { display: flex; flex-direction: column; gap: 0; }

/* Header row: avatar icon + username + PM badge */
.saw__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	margin-bottom: 2px;
	border-bottom: 1px solid var(--c-border);
}
.saw__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--c-primary) 15%, var(--c-surface-2));
	border: 2px solid color-mix(in srgb, var(--c-primary) 30%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--c-primary);
}
.saw__avatar svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
	stroke: currentColor;
	fill: none;
	pointer-events: none;
}
.saw__userinfo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.saw__login {
	font-size: 14px;
	font-weight: 700;
	color: var(--c-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.saw__pm-badge {
	background: var(--c-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 999px;
	line-height: 1.6;
	flex-shrink: 0;
}

/* Navigation links */
.saw__links {
	display: flex;
	flex-direction: column;
	padding: 6px 0 8px;
	border-bottom: 1px solid var(--c-border);
	margin-bottom: 8px;
}
.saw__link {
	display: block;
	padding: 7px 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--c-text) !important;
	text-decoration: none !important;
	border-radius: var(--c-radius-sm);
	transition: background .12s ease, color .12s ease, padding-left .12s ease;
}
.saw__link:hover {
	background: var(--c-surface-2);
	color: var(--c-primary) !important;
	padding-left: 8px;
}
.saw__link--admin { color: var(--c-warn) !important; }
.saw__link--admin:hover {
	background: color-mix(in srgb, var(--c-warn) 10%, transparent) !important;
	color: var(--c-warn) !important;
}

/* Make saw__link a flex row so icon + label + badge align nicely.
   This stays compatible with the previously block-rendered links — they had
   inline content (svg + span) and rendered fine; flex just gives precise gap. */
.saw__link { display: flex; align-items: center; gap: 8px; }
.saw__link-icon { width: 16px; height: 16px; flex-shrink: 0; color: inherit; }
.saw__link-label { flex: 1; min-width: 0; }
.saw__link-badge { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 6px; letter-spacing: 0.04em; line-height: 1.2; flex-shrink: 0; text-transform: uppercase; }
.saw__link-badge--active { background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary); border: 1px solid color-mix(in srgb, var(--c-primary) 28%, transparent); }
.saw__link-badge--ai {
	background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
	color: #fff !important;
	box-shadow: 0 2px 8px color-mix(in srgb, #a855f7 35%, transparent);
	border: 1px solid color-mix(in srgb, #ec4899 30%, transparent);
}
.saw__link--checkface .saw__link-icon { color: #a855f7; }
html[data-theme="dark"] .saw__link--checkface .saw__link-icon { color: #c084fc; }
.saw__link--checkspin .saw__link-icon { color: #f47a6d !important; }
html[data-theme="dark"] .saw__link--checkspin .saw__link-icon { color: #fb7185 !important; }
/* "Free spin ready" badge — server-renders into the CheckSpin sidebar link
   when the daily-free cooldown has elapsed. Uses the same .saw__link-badge
   geometry as Premium "АКТИВЕН" (text pill, not a circle) so the sidebar
   reads as a coherent column of pills. Coral tint mirrors the CheckSpin
   icon's coral so the eye links badge ↔ icon on the same row. */
.saw__link-badge--fire {
	background: color-mix(in srgb, #f47a6d 16%, transparent);
	color: #d14a3d;
	border: 1px solid color-mix(in srgb, #f47a6d 38%, transparent);
	animation: saw__fire-pulse 2.2s ease-in-out infinite;
}
html[data-theme="dark"] .saw__link-badge--fire {
	background: color-mix(in srgb, #fb7185 18%, transparent);
	color: #fda4a0;
	border-color: color-mix(in srgb, #fb7185 42%, transparent);
}
@keyframes saw__fire-pulse {
	0%,100% { box-shadow: 0 0 0  0   color-mix(in srgb, #f47a6d 0%,  transparent); }
	50%     { box-shadow: 0 0 0  4px color-mix(in srgb, #f47a6d 18%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
	.saw__link-badge--fire { animation: none; }
}
.saw__link-badge--new {
	background: linear-gradient(135deg, #f59e0b 0%, #f2368f 100%);
	color: #fff !important;
	box-shadow: 0 2px 8px color-mix(in srgb, #f2368f 35%, transparent);
	border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
}

/* Footer: logout button */
.saw__footer { display: flex; }
.saw__footer .btn { flex: 1; text-align: center; justify-content: center; }

/* Guest auth hint */
.sidebar-auth-hint {
	font-size: 13px;
	color: var(--c-text-muted);
	margin: 0 0 12px;
	line-height: 1.5;
}

/* Sidebar login form (guest) */
.sidebar-login-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sidebar-login-form .soc_login {
	display: flex;
	gap: 4px;
	margin-bottom: 2px;
	justify-content: space-between;
}
.sidebar-login-form .soc_login .btn {
	flex: 1;
	padding: 0;
	min-width: 0;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	background: var(--c-surface-2);
	color: var(--c-text);
	border: 1px solid var(--c-border);
}
.sidebar-login-form .soc_login .btn:hover {
	background: var(--c-surface-3);
}
.saw__input {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--c-border);
	background: var(--c-surface);
	border-radius: 10px;
	color: var(--c-text);
	font-size: 14px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	font-family: inherit;
	box-sizing: border-box;
}
.saw__input:focus {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent);
}
.saw__input::placeholder { color: var(--c-text-muted); opacity: .85; }

/* Labeled field with leading icon (sidebar login).
   The padding-left needs !important because the global
   `input[type=text|password] { padding: 10px 12px !important }` rule above
   would otherwise win (same one-zero-zero-one specificity, but with !important). */
.sidebar-login-form .saw__field { display: block; margin: 0; }
.sidebar-login-form .saw__field-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--c-text);
	margin: 0 0 6px;
	padding-left: 2px;
	letter-spacing: 0.01em;
}
.sidebar-login-form .saw__field-input { position: relative; display: block; }
.sidebar-login-form .saw__field-input .saw__input { padding: 10px 12px 10px 40px !important; height: auto; }
.sidebar-login-form .saw__field-icon {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--c-text-muted);
	pointer-events: none;
	transition: color .15s ease;
}
.sidebar-login-form .saw__field-input:focus-within .saw__field-icon { color: var(--c-primary); }
.saw__form-actions {
	margin-top: 4px;
}
.saw__auth-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	margin-top: 2px;
}
.saw__auth-links a {
	color: var(--c-text-muted);
	text-decoration: none;
	transition: color .2s ease;
}
.saw__auth-links a:hover {
	color: var(--c-primary);
}
.saw__auth-links span {
	color: var(--c-border);
}

/* ======================================================
   .cf-article — styled news content for CheckFace article.
   Uses semantic CLASSES (not inline styles), because the DLE
   TinyMCE editor mangles inline style="" attributes on save.
   ====================================================== */
.cf-article { font-size: 15.5px; line-height: 1.6; color: var(--c-text); }
.cf-article p { margin: 0 0 14px; }
.cf-article .cf-lead { font-size: 17px; line-height: 1.55; margin: 0 0 18px; }
.cf-article .cf-h2 {
	font-size: 24px;
	font-weight: 800;
	margin: 32px 0 14px;
	line-height: 1.25;
}
/* Lists — global site CSS resets list-style, so we draw our own brand markers.
   <ol> = circular gradient badges with numbers; <ul> = rounded squares with white checkmark. */
.cf-article ol,
.cf-article ul {
	list-style: none;
	padding-left: 0;
	margin: 0 0 18px;
	font-size: 15.5px;
	line-height: 1.6;
}
.cf-article ol { counter-reset: cf-step; }
.cf-article ol > li {
	counter-increment: cf-step;
	position: relative;
	padding-left: 46px;
	margin: 0 0 14px;
	min-height: 30px;
}
.cf-article ol > li::before {
	content: counter(cf-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	background: linear-gradient(135deg, #f47a6d, #f2368f);
	color: #fff;
	border-radius: 50%;
	font-weight: 800;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(242, 54, 143, 0.22);
}

.cf-article ul > li {
	position: relative;
	padding-left: 34px;
	margin: 0 0 12px;
	min-height: 22px;
}
.cf-article ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 20px;
	height: 20px;
	background: linear-gradient(135deg, #f47a6d, #f2368f);
	border-radius: 6px;
	box-shadow: 0 3px 8px rgba(242, 54, 143, 0.22);
}
.cf-article ul > li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 9px;
	width: 9px;
	height: 5px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}
.cf-article a {
	color: #d73269;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px dashed #f2368f;
	transition: color .15s, border-color .15s;
}
.cf-article a:hover { color: #f2368f; border-color: #d73269; }

/* Pull-quote / meme block */
.cf-article .cf-quote {
	background: linear-gradient(135deg, #fff7f8, #fcecf2);
	border-left: 4px solid #f2368f;
	padding: 20px 24px;
	border-radius: 14px;
	margin: 26px 0;
	font-style: italic;
	color: #3a3a3a;
}
.cf-article .cf-quote p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.cf-article .cf-quote .cf-quote-author {
	margin-top: 10px;
	font-size: 13px;
	color: #888;
	font-style: normal;
}

/* Stats card grid */
.cf-article .cf-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 22px; }
.cf-article .cf-stat {
	flex: 1 1 220px;
	background: #fff;
	border: 1px solid #f4d6dc;
	border-radius: 16px;
	padding: 22px;
	box-shadow: 0 6px 20px rgba(242, 54, 143, 0.08);
	position: relative;
	overflow: hidden;
}
.cf-article .cf-stat::before {
	content: "";
	position: absolute;
	top: -20px; right: -20px;
	width: 90px; height: 90px;
	background: radial-gradient(circle, rgba(244,122,109,.15), transparent 70%);
	border-radius: 50%;
}
.cf-article .cf-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	background: linear-gradient(135deg, #f47a6d, #f2368f);
	border-radius: 10px;
	color: #fff;
	font-size: 20px;
	margin-bottom: 10px;
}
.cf-article .cf-stat-num {
	font-size: 32px;
	font-weight: 800;
	background: linear-gradient(135deg, #f47a6d, #f2368f);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	line-height: 1.1;
}
.cf-article .cf-stat-label { color: #666; font-size: 13.5px; margin-top: 4px; }

/* Final big CTA */
.cf-article .cf-cta {
	background: linear-gradient(135deg, #f47a6d 0%, #f2368f 100%);
	border-radius: 20px;
	padding: 40px 28px;
	margin: 38px 0;
	text-align: center;
	box-shadow: 0 14px 36px rgba(242, 54, 143, 0.28);
	position: relative;
	overflow: hidden;
}
.cf-article .cf-cta::before,
.cf-article .cf-cta::after {
	content: "";
	position: absolute;
	width: 140px; height: 140px;
	border-radius: 50%;
	pointer-events: none;
}
.cf-article .cf-cta::before { top: -30px; left: -30px; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); }
.cf-article .cf-cta::after  { bottom: -30px; right: -30px; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); }
.cf-article .cf-cta-title {
	color: #fff !important;
	margin: 0 0 10px !important;
	font-size: 28px !important;
	font-weight: 800 !important;
	line-height: 1.2;
	position: relative;
}
.cf-article .cf-cta-sub {
	color: rgba(255, 255, 255, 0.93) !important;
	margin: 0 0 24px !important;
	font-size: 16px;
	line-height: 1.5;
	position: relative;
}
.cf-article .cf-cta-btn {
	display: inline-block;
	background: #fff !important;
	color: #d73269 !important;
	padding: 14px 36px;
	border-radius: 12px;
	font-weight: 800;
	font-size: 16px;
	text-decoration: none !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	position: relative;
	border-bottom: 0 !important;
	transition: transform .12s ease, box-shadow .15s ease;
}
.cf-article .cf-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
}

/* P.S. footnote */
.cf-article .cf-ps {
	text-align: center;
	color: #888;
	font-size: 13.5px;
	margin-top: 24px;
	font-style: italic;
}

/* Dark theme overrides */
html[data-theme="dark"] .cf-article .cf-quote {
	background: linear-gradient(135deg, rgba(242,54,143,.12), rgba(244,122,109,.10));
	color: #c8cad0;
}
html[data-theme="dark"] .cf-article .cf-quote .cf-quote-author { color: #9b9da3; }
html[data-theme="dark"] .cf-article .cf-stat {
	background: #21232a;
	border-color: rgba(244, 122, 109, 0.22);
	color: #e6e8ec;
}
html[data-theme="dark"] .cf-article .cf-stat-label { color: #9b9da3; }
html[data-theme="dark"] .cf-article .cf-ps { color: #9b9da3; }

@media (max-width: 600px) {
	.cf-article .cf-h2 { font-size: 21px; }
	.cf-article .cf-cta { padding: 28px 20px; }
	.cf-article .cf-cta-title { font-size: 24px !important; }
	.cf-article .cf-stat { padding: 18px; }
	.cf-article .cf-stat-num { font-size: 28px; }
}

/* ======================================================
   DLE Poll — beautiful, theme-aware (light + dark)
   Selector form[id^=dlepollform_] catches every DLE poll on the site,
   so styling is consistent across all news posts.
   ====================================================== */
form[id^="dlepollform_"] .sep.well.well-small {
	background: linear-gradient(135deg, #fff 0%, #fff7f8 100%);
	border: 1px solid #f4d6dc;
	border-radius: 18px;
	padding: 24px 26px;
	box-shadow: 0 8px 28px rgba(242, 54, 143, 0.08);
	margin-bottom: 36px;
	position: relative;
	overflow: hidden;
}
/* Belt-and-suspenders: also push next sibling away — works even if some site CSS
   resets the form's margin-bottom. */
form[id^="dlepollform_"] { margin-bottom: 36px; }
form[id^="dlepollform_"] + .fullstory__head,
form[id^="dlepollform_"] + header,
form[id^="dlepollform_"] + h1,
form[id^="dlepollform_"] + .fullstory { margin-top: 24px; }
form[id^="dlepollform_"] .sep.well.well-small::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 3px; height: 100%;
	background: linear-gradient(180deg, #f47a6d, #f2368f);
	border-radius: 18px 0 0 18px;
}
form[id^="dlepollform_"] h5 {
	font-size: 19px !important;
	font-weight: 800 !important;
	margin: 0 0 18px !important;
	color: #1a1d21 !important;
	line-height: 1.3;
	padding: 0 !important;
}
form[id^="dlepollform_"] p { margin: 0 !important; padding: 0 !important; }
form[id^="dlepollform_"] .pollanswer { margin: 0 0 8px; }
form[id^="dlepollform_"] .pollanswer:last-child { margin-bottom: 0; }
form[id^="dlepollform_"] .pollanswer .form-check-label {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 12px 16px !important;
	border: 1.5px solid #e6e8ec;
	border-radius: 12px;
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 500;
	color: #1a1d21;
	background: #fff;
	transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease;
	margin: 0;
}
form[id^="dlepollform_"] .pollanswer .form-check-label:hover {
	border-color: #f2368f;
	background: linear-gradient(135deg, #fff7f8, #fff);
	transform: translateX(2px);
}
form[id^="dlepollform_"] .pollanswer input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid #d8dce3;
	border-radius: 50%;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	transition: border-color .15s, background .15s;
	margin: 0 !important;
}
form[id^="dlepollform_"] .pollanswer input[type="radio"]:checked {
	border-color: #f2368f;
}
form[id^="dlepollform_"] .pollanswer input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: linear-gradient(135deg, #f47a6d, #f2368f);
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
}
form[id^="dlepollform_"] .pollanswer:has(input:checked) .form-check-label {
	border-color: #f2368f;
	background: linear-gradient(135deg, #fff7f8, #fcecf2);
	box-shadow: 0 4px 14px rgba(242, 54, 143, 0.12);
}
form[id^="dlepollform_"] .pollanswer .form-check-label span { flex: 1; line-height: 1.45; }

form[id^="dlepollform_"] [align="center"] {
	margin-top: 20px !important;
	display: flex !important;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
form[id^="dlepollform_"] .btn.btn-info {
	background: linear-gradient(135deg, #f47a6d, #f2368f) !important;
	color: #fff !important;
	border: none !important;
	padding: 11px 30px !important;
	border-radius: 12px !important;
	font-weight: 700 !important;
	font-size: 14.5px !important;
	box-shadow: 0 6px 18px rgba(242, 54, 143, 0.28);
	transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
form[id^="dlepollform_"] .btn.btn-info:hover {
	filter: brightness(1.05);
	box-shadow: 0 8px 26px rgba(242, 54, 143, 0.36);
	transform: translateY(-1px);
}
form[id^="dlepollform_"] .btn:not(.btn-info) {
	background: #fff !important;
	color: #1a1d21 !important;
	border: 1.5px solid #e6e8ec !important;
	padding: 10px 24px !important;
	border-radius: 12px !important;
	font-weight: 700 !important;
	font-size: 14.5px !important;
	box-shadow: none !important;
}
form[id^="dlepollform_"] .btn:not(.btn-info):hover {
	border-color: #f2368f !important;
	color: #f2368f !important;
	background: #fff7f8 !important;
}

/* Result bars (after voting) */
form[id^="dlepollform_"] .progress {
	height: 8px;
	background: #f5f5f8;
	border-radius: 999px;
	overflow: hidden;
	margin: 6px 0 14px;
	box-shadow: none;
}
form[id^="dlepollform_"] .progress .bar,
form[id^="dlepollform_"] .progress .progress-bar {
	height: 100%;
	background: linear-gradient(135deg, #f47a6d, #f2368f) !important;
	border-radius: 999px;
	transition: width .5s ease;
}
form[id^="dlepollform_"] .muted { margin-top: 14px; color: #6b7280; font-size: 13px; }
form[id^="dlepollform_"] .text-error { color: #dc2626 !important; }

/* Dark theme */
html[data-theme="dark"] form[id^="dlepollform_"] .sep.well.well-small {
	background: linear-gradient(135deg, #1a1d21, #21232a);
	border-color: rgba(244, 122, 109, 0.22);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] form[id^="dlepollform_"] h5 { color: #e6e8ec !important; }
html[data-theme="dark"] form[id^="dlepollform_"] .pollanswer .form-check-label {
	background: #21232a;
	border-color: #2f3138;
	color: #e6e8ec;
}
html[data-theme="dark"] form[id^="dlepollform_"] .pollanswer .form-check-label:hover {
	border-color: #f2368f;
	background: rgba(242, 54, 143, 0.08);
}
html[data-theme="dark"] form[id^="dlepollform_"] .pollanswer:has(input:checked) .form-check-label {
	background: rgba(242, 54, 143, 0.14);
	border-color: #f2368f;
}
html[data-theme="dark"] form[id^="dlepollform_"] .pollanswer input[type="radio"] { border-color: #4a4d54; }
html[data-theme="dark"] form[id^="dlepollform_"] .btn:not(.btn-info) {
	background: #21232a !important;
	color: #e6e8ec !important;
	border-color: #2f3138 !important;
}
html[data-theme="dark"] form[id^="dlepollform_"] .btn:not(.btn-info):hover {
	background: rgba(242, 54, 143, 0.08) !important;
	color: #f2368f !important;
	border-color: #f2368f !important;
}
html[data-theme="dark"] form[id^="dlepollform_"] .progress { background: #2f3138; }

/* --- Mass Comments Action Fix --- */
.mass_comments_action {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
	font-size: 14px;
}
.mass_comments_action select {
	width: auto !important;
	min-width: 200px;
	flex: 0 1 auto;
}

/* --- Theme View Transition (Heart Reveal): no-preference only; reduce = instant apply in JS --- */
@media (prefers-reduced-motion: no-preference) {
	.theme-transitioning::view-transition-group(root) {
		animation-duration: 500ms;
	}
	.theme-transitioning::view-transition-old(root),
	.theme-transitioning::view-transition-new(root) {
		animation: none;
		mix-blend-mode: normal;
		display: block;
	}

	:root[data-theme="dark"].theme-transitioning::view-transition-new(root),
	:root[data-theme="light"].theme-transitioning::view-transition-old(root) {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 50 90 C 50 90 5 60 5 30 C 5 5 45 5 50 30 C 55 5 95 5 95 30 C 95 60 50 90 50 90 Z' fill='black'/%3E%3C/svg%3E");
		-webkit-mask-repeat: no-repeat;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 50 90 C 50 90 5 60 5 30 C 5 5 45 5 50 30 C 55 5 95 5 95 30 C 95 60 50 90 50 90 Z' fill='black'/%3E%3C/svg%3E");
		mask-repeat: no-repeat;
	}

	/* Dark -> Light */
	:root[data-theme="light"].theme-transitioning::view-transition-old(root) {
		z-index: 2;
		animation: heart-shrink 350ms ease-out forwards;
		will-change: mask-size, mask-position;
	}
	:root[data-theme="light"].theme-transitioning::view-transition-new(root) {
		z-index: 1;
	}

	/* Light -> Dark */
	:root[data-theme="dark"].theme-transitioning::view-transition-old(root) {
		z-index: 1;
	}
	:root[data-theme="dark"].theme-transitioning::view-transition-new(root) {
		z-index: 2;
		animation: heart-expand 350ms ease-in forwards;
		will-change: mask-size, mask-position;
	}

	@keyframes heart-expand {
		0% {
			-webkit-mask-size: 0px 0px;
			-webkit-mask-position: var(--x, 50%) var(--y, 50%);
			mask-size: 0px 0px;
			mask-position: var(--x, 50%) var(--y, 50%);
		}
		100% {
			-webkit-mask-size: 250vmax 250vmax;
			-webkit-mask-position: calc(var(--x, 50%) - 125vmax) calc(var(--y, 50%) - 125vmax);
			mask-size: 250vmax 250vmax;
			mask-position: calc(var(--x, 50%) - 125vmax) calc(var(--y, 50%) - 125vmax);
		}
	}

	@keyframes heart-shrink {
		0% {
			-webkit-mask-size: 250vmax 250vmax;
			-webkit-mask-position: calc(var(--x, 50%) - 125vmax) calc(var(--y, 50%) - 125vmax);
			mask-size: 250vmax 250vmax;
			mask-position: calc(var(--x, 50%) - 125vmax) calc(var(--y, 50%) - 125vmax);
		}
		100% {
			-webkit-mask-size: 0px 0px;
			-webkit-mask-position: var(--x, 50%) var(--y, 50%);
			mask-size: 0px 0px;
			mask-position: var(--x, 50%) var(--y, 50%);
	}
}

/* --- TinyMCE Editor Dialogs Override (tox-dialog) --- */
.tox.tox-tinymce-aux .tox-dialog {
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--c-radius-lg) !important;
	box-shadow: var(--c-shadow-lg) !important;
	overflow: hidden !important;
}
.tox.tox-tinymce-aux .tox-dialog-wrap__backdrop {
	background: rgba(15, 23, 42, 0.55) !important;
	backdrop-filter: blur(2px) !important;
	-webkit-backdrop-filter: blur(2px) !important;
}
.tox.tox-tinymce-aux .tox-dialog__header {
	background: var(--c-surface-2) !important;
	color: var(--c-text) !important;
	border-bottom: 1px solid var(--c-border) !important;
	padding: 16px 20px !important;
}
.tox.tox-tinymce-aux .tox-dialog__title {
	color: var(--c-text) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	font-family: var(--ff-sans) !important;
}
.tox.tox-tinymce-aux .tox-button--icon {
	color: var(--c-text) !important;
}
.tox.tox-tinymce-aux .tox-dialog__body {
	background: transparent !important;
}
.tox.tox-tinymce-aux .tox-dialog__body-content {
	background: transparent !important;
	color: var(--c-text) !important;
}
.tox.tox-tinymce-aux .tox-dialog__footer {
	background: var(--c-surface-2) !important;
	border-top: 1px solid var(--c-border) !important;
	padding: 16px 20px !important;
}
.tox.tox-tinymce-aux .tox-button:not(.tox-button--naked):not(.tox-button--secondary) {
	background: var(--c-primary) !important;
	color: #fff !important;
	border-color: var(--c-primary) !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	font-family: var(--ff-sans) !important;
	transition: background 0.2s, border-color 0.2s !important;
}
.tox.tox-tinymce-aux .tox-button:not(.tox-button--naked):not(.tox-button--secondary):hover {
	background: var(--c-primary-hover) !important;
	border-color: var(--c-primary-hover) !important;
}
.tox.tox-tinymce-aux .tox-button--icon,
.tox.tox-tinymce-aux .tox-button--naked {
	background: transparent !important;
	border: none !important;
	color: var(--c-text) !important;
	opacity: 1 !important;
	transition: background 0.2s !important;
}
.tox.tox-tinymce-aux .tox-button--icon svg,
.tox.tox-tinymce-aux .tox-button--naked svg {
	fill: var(--c-text) !important;
}
.tox.tox-tinymce-aux .tox-button--icon:hover,
.tox.tox-tinymce-aux .tox-button--naked:hover {
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
}
.tox.tox-tinymce-aux .tox-button--secondary {
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	border-color: var(--c-border) !important;
}
.tox.tox-tinymce-aux .tox-button--secondary:hover {
	background: var(--c-surface-2) !important;
	color: var(--c-text) !important;
}
/* Inputs */
.tox.tox-tinymce-aux .tox-textfield,
.tox.tox-tinymce-aux .tox-textarea,
.tox.tox-tinymce-aux .tox-selectfield select {
	background: var(--c-bg) !important;
	border: 1px solid var(--c-border) !important;
	color: var(--c-text) !important;
	border-radius: var(--c-radius-sm) !important;
	padding: 10px 14px !important;
	font-family: var(--ff-sans) !important;
	transition: border-color 0.2s !important;
}
.tox.tox-tinymce-aux .tox-textfield:focus,
.tox.tox-tinymce-aux .tox-textarea:focus {
	border-color: var(--c-primary) !important;
}
.tox.tox-tinymce-aux .tox-collection__group,
.tox.tox-tinymce-aux .tox-collection__item {
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	border-color: var(--c-border) !important;
}
}

/* Custom Translate Loader */
.cy-translate-loader {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(-20px);
	background: light-dark(rgba(255, 255, 255, 0.85), rgba(21, 23, 26, 0.85));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--c-text);
	padding: 10px 24px;
	border-radius: 30px;
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 999999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: light-dark(0 10px 30px rgba(0,0,0,0.1), 0 10px 30px rgba(0,0,0,0.3));
	border: 1px solid light-dark(rgba(0,0,0,0.06), rgba(255,255,255,0.1));
	font-family: var(--ff-sans);
	font-size: 14px;
	font-weight: 500;
	pointer-events: none;
}
html.is-translating .cy-translate-loader {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.cy-translate-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.2));
	border-top-color: var(--c-primary, #f2368f);
	border-radius: 50%;
	animation: cy-spin 0.8s linear infinite;
}
@keyframes cy-spin {
	to { transform: rotate(360deg); }
}

/* Cities page search: keep clean input (no magnifier icon) */
.cities-search__icon {
	display: none;
}
.cities-search__input {
	padding: 0 44px 0 16px !important;
	background-image: none !important;
}


/* CheckYou SEO: H1 главной — визуально точная копия старого <h6><span>Список анкет</span></h6>.
   SEO-хвост скрыт sr-only-паттерном (Google читает как обычный текст). */
.cy-home-h1 {
    /* воспроизводим стиль h6 (см. правила выше) */
    display: flex !important;
    align-items: center;
    gap: 12px;
    font-family: var(--ff-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em !important;
    color: var(--c-text-muted) !important;
    overflow: visible !important;
    margin: 22px 0 14px !important;
    line-height: normal !important;
}
.cy-home-h1::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--c-border);
}
.cy-home-h1__lead {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
}
.cy-home-h1__lead > span {
    display: inline;
}
.cy-home-h1__seo {
    /* visually-hidden (sr-only) — невидимо, но в DOM */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- Guide page: /page/proverit-devushku/ ---- */
.cyg { font-family: var(--ff-sans); }
.cyg-intro {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--c-text-muted);
}
.cyg-section-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--c-text) !important;
    margin: 0 0 14px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cyg-section-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 18px;
    background: var(--c-primary);
    border-radius: 2px;
    flex-shrink: 0;
}
.cyg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
@media (max-width: 640px) { .cyg-grid { grid-template-columns: 1fr; } }
.cyg-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    padding: 18px;
    box-shadow: var(--c-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow .18s, border-color .18s;
}
.cyg-card:hover { box-shadow: var(--c-shadow-md); border-color: var(--c-primary); }
.cyg-card__head { display: flex; align-items: flex-start; gap: 12px; }
.cyg-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--c-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}
.cyg-card__name {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 2px !important;
    color: var(--c-text) !important;
    line-height: 1.2 !important;
}
.cyg-card__alias {
    display: block;
    font-size: 12px;
    color: var(--c-text-muted);
    margin-bottom: 4px;
    font-weight: 400;
}
.cyg-card__handle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    color: var(--c-primary);
    text-decoration: none;
    font-weight: 500;
}
.cyg-card__handle:hover { text-decoration: underline; }
.cyg-card__handle svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
.cyg-card__features { list-style: none; margin: 0; padding: 0; }
.cyg-card__features li {
    position: relative;
    padding-left: 13px;
    font-size: 13.5px;
    color: var(--c-text);
    line-height: 1.5;
    margin-bottom: 6px;
}
.cyg-card__features li:last-child { margin-bottom: 0; }
.cyg-card__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    background: var(--c-primary);
    border-radius: 50%;
}
.cyg-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--c-border);
    padding-top: 10px;
    flex-wrap: wrap;
}
.cyg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.2;
}
.cyg-badge--free  { background: light-dark(rgba(34, 197, 94, .12), rgba(34, 197, 94, .18)); color: light-dark(#16803a, #4ade80); }
.cyg-badge--paid  { background: light-dark(rgba(245, 158, 11, .12), rgba(245, 158, 11, .18)); color: light-dark(#b45309, #fbbf24); }
.cyg-badge--both  { background: light-dark(rgba(99, 102, 241, .12), rgba(99, 102, 241, .18)); color: light-dark(#4338ca, #818cf8); }
.cyg-badge--own   { background: var(--c-primary-soft); color: var(--c-primary); }
.cyg-cmd {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 5px;
    padding: 1px 7px;
    font-family: monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-primary);
    cursor: pointer;
    user-select: none;
    transition: background .15s, color .15s, border-color .15s;
    vertical-align: middle;
    white-space: nowrap;
}
.cyg-cmd:hover { background: var(--c-primary-soft); border-color: var(--c-primary); }
.cyg-cmd svg { width: 10px; height: 10px; flex-shrink: 0; opacity: .5; }
.cyg-cmd--ok { background: light-dark(rgba(34, 197, 94, .15), rgba(34, 197, 94, .22)) !important; color: light-dark(#16803a, #4ade80) !important; border-color: light-dark(rgba(34, 197, 94, .35), rgba(34, 197, 94, .45)) !important; }

/* ---- Search page (/index.php?do=search) ---- */
.cy-search-page {
    margin: 0 auto;
}
.cy-search-hero {
    text-align: center;
    padding: 28px 0 22px;
}
.cy-search-hero--compact {
    padding: 16px 0 14px;
}
.cy-search-hero__icon {
    font-size: 44px;
    line-height: 1;
    display: block;
    margin-bottom: 14px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
}
.cy-search-hero--compact .cy-search-hero__icon {
    font-size: 32px;
    margin-bottom: 10px;
}
.cy-search-hero__title {
    font-size: 26px;
    font-weight: 800;
    color: var(--c-text);
    margin: 0 0 6px;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.cy-search-hero--compact .cy-search-hero__title {
    font-size: 20px;
}
.cy-search-hero__sub {
    font-size: 14px;
    color: var(--c-text-muted);
    margin: 0;
    line-height: 1.5;
}
.cy-search-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius-lg);
    box-shadow: var(--c-shadow-md);
    padding: 24px;
}
.cy-search-card .search { margin-bottom: 0 !important; }
.cy-search-card .search-form { margin-bottom: 0; }
.cy-search-card .searchTerm {
    height: 52px !important;
    font-size: 16px !important;
    padding: 12px 56px 12px 18px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--c-border-strong) !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.cy-search-card .searchTerm:focus {
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 3px var(--c-primary-ring) !important;
    outline: none !important;
}
.cy-search-card .searchButton,
.cy-search-card .searchIcon {
    top: 10px !important;
    right: 10px !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    border-radius: 9px !important;
}
.cy-search-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.cy-search-submit {
    flex: 2;
    min-width: 0;
    font-size: 15px !important;
    font-weight: 600 !important;
}
.cy-search-adv-btn {
    flex: 1;
    min-width: 0;
    font-size: 14px !important;
    color: var(--c-text-muted) !important;
}
.cy-search-adv-btn:hover { color: var(--c-text) !important; }
@media (max-width: 480px) {
    .cy-search-hero__title { font-size: 22px; }
    .cy-search-hero__icon { font-size: 38px; }
    .cy-search-card { padding: 18px; }
    .cy-search-actions { flex-direction: column; }
    .cy-search-submit, .cy-search-adv-btn { flex: none; width: 100%; }
}

/* ===== Advanced search — form control refinements ===== */
/* single-select: replace native arrow with a consistent chevron */
.search-form select:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}
.search-form select:not([multiple])::-ms-expand { display: none; }
/* "По разделам" multi-select */
.search-form select[multiple] {
    min-height: 168px;
    padding: 6px !important;
    scrollbar-width: thin;
}
.search-form select[multiple] option {
    padding: 7px 10px;
    border-radius: 7px;
    margin-bottom: 2px;
    font-size: 13.5px;
}
.search-form select[multiple] option:checked {
    background: var(--c-primary-soft);
    box-shadow: 0 0 0 100px var(--c-primary-soft) inset;
    color: var(--c-primary);
    font-weight: 600;
}
/* radios: brand-colored, consistent with the custom checkboxes */
.search-form input[type="radio"] {
    accent-color: var(--c-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ============================================================
   Профиль → вкладка «Настройки»: секционированный вид (v2)
   ============================================================ */
.profile-settings.settings-body{ max-width:none; }
/* секции — плоские, на всю ширину карточки, разделены тонкой линией (без вложенных подложек) */
.ps-section{
	padding:20px 0;
	margin:0;
	border-top:1px solid var(--c-border);
}
.ps-section:first-of-type{ border-top:0; padding-top:2px; }
.ps-section:last-of-type{ padding-bottom:6px; }
.ps-section__head{ display:flex; align-items:center; gap:11px; margin:0 0 14px; }
.ps-ico{
	flex:none; width:34px; height:34px; border-radius:10px;
	display:grid; place-items:center;
	background:var(--c-primary-soft); color:var(--c-primary);
}
.ps-ico svg{ width:18px; height:18px; }
.ps-ico--tg{ background:light-dark(#eaf6fd, oklch(34% 0.05 240)); color:#229ED9; }
.ps-section__title{ font-size:15px; font-weight:600; margin:0; letter-spacing:-.01em; }
.ps-section__sub{ font-size:12px; color:var(--c-text-muted); margin:1px 0 0; line-height:1.35; }
.ps-section > label:first-of-type{ margin-top:0; }

/* парные поля в 2 колонки */
.ps-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.ps-grid-2 > div{ min-width:0; }
.ps-grid-2 label{ margin-top:0; }
@media (max-width:560px){ .ps-grid-2{ grid-template-columns:1fr; } .ps-grid-2 > div + div label{ margin-top:10px; } }

/* аватар */
.ps-avatar{ display:flex; align-items:center; gap:16px; }
.ps-avatar__img{
	width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none;
	border:2px solid var(--c-border-strong); background:var(--c-surface);
}
.ps-upload{
	display:inline-flex; align-items:center; gap:7px; margin:0;
	padding:8px 14px; border:1px solid var(--c-border-strong);
	border-radius:var(--c-radius-pill); font-size:13px; font-weight:500; cursor:pointer;
	background:var(--c-surface); color:var(--c-text); transition:border-color .15s, color .15s;
}
.ps-upload:hover{ border-color:var(--c-primary); color:var(--c-primary); }
.ps-upload svg{ width:15px; height:15px; }
.ps-remove{
	display:inline-flex; align-items:center; gap:6px; margin:10px 0 0;
	font-size:12.5px; color:var(--c-danger); cursor:pointer; font-weight:400;
}
.ps-remove input{ accent-color:var(--c-danger); width:14px; height:14px; }

/* тумблеры поверх DLE-разметки .form-check-label / .form-check-input */
.ps-toggles{ display:flex; flex-direction:column; }
.ps-toggle .form-check-label{
	display:flex; align-items:center; justify-content:space-between; gap:14px;
	margin:0; padding:11px 0; border-top:1px solid var(--c-border);
	font-weight:400; cursor:pointer;
}
.ps-toggles .ps-toggle:first-child .form-check-label{ border-top:0; }
.ps-toggle .form-check-label > span{ order:1; font-size:13.5px; color:var(--c-text); }
.ps-toggle .form-check-input{
	order:2; flex:none; margin:0; cursor:pointer;
	-webkit-appearance:none; appearance:none;
	width:40px; height:23px; border-radius:999px;
	background:var(--c-border-strong); position:relative; transition:background .18s;
}
.ps-toggle .form-check-input::after{
	content:""; position:absolute; top:2px; left:2px;
	width:19px; height:19px; border-radius:50%; background:#fff;
	box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .18s;
}
.ps-toggle .form-check-input:checked{ background:var(--c-primary); }
.ps-toggle .form-check-input:checked::after{ left:19px; }
.ps-toggle .form-check-input:focus-visible{ outline:2px solid var(--c-primary-ring); outline-offset:2px; }

/* Telegram — фирменная карточка (использует существующую .cy-tglink) */
.cy-tg-fieldset .cy-tglink{
	padding:13px 14px; border-radius:var(--c-radius);
	background:light-dark(#eaf6fd, oklch(30% 0.04 240));
	border:1px solid light-dark(#bfe3f5, oklch(42% 0.05 240));
}
.cy-tg-fieldset .cy-tglink .form-help{ flex:1 1 100%; margin:0 0 4px !important; }

/* липкая панель «Сохранить» */
.ps-save{
	position:sticky; bottom:0; z-index:5;
	margin-top:18px; padding:14px 0 2px;
	background:color-mix(in oklab, var(--c-surface) 90%, transparent);
	-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
	border-top:1px solid var(--c-border);
	display:flex; justify-content:flex-end; gap:10px;
}
.ps-save .btn{ min-width:180px; }
@media (max-width:560px){ .ps-save .btn{ width:100%; min-width:0; } }
