/* THEMES — пользовательские темы оформления (UserThemes, /themes, /admin/themes).
 * Подключается на каждой странице (UserThemes::htmlAttrs() в макете v3):
 *  1. палитры сайта — <html data-palette="…" style="--nfp-h;--nfp-c[;--nfp-h2]">: оттенок и насыщенность задаёт PHP
 *     (UserThemes::palettes()), яркость каждого токена — здесь, отдельно для светлой и тёмной темы (контраст гарантирован);
 *  2. .nf-scope[data-theme][data-palette] — область с принудительной темой (предпросмотры «светлая / тёмная» рядом);
 *  3. стили комментариев .nf-ct и шапки профиля .nf-pt: картинка справа, вуаль для читаемости, светящаяся рамка,
 *     цветной ник, бейдж. Переменные темы (--ct-*) приходят в style из UserThemes::styleVars();
 *  4. меню палитр в шапке, страница /themes, редактор тем в админке. */

/* ============================================================ 1. палитры сайта */

/* запасные оттенки (основной источник — style на <html>, держите в синхронности с UserThemes::palettes()) */
:root[data-palette="sakura"], .nf-scope[data-palette="sakura"] { --nfp-h: 350; --nfp-c: .15; }
:root[data-palette="ocean"], .nf-scope[data-palette="ocean"] { --nfp-h: 245; --nfp-c: .14; }
:root[data-palette="emerald"], .nf-scope[data-palette="emerald"] { --nfp-h: 160; --nfp-c: .13; }
:root[data-palette="amber"], .nf-scope[data-palette="amber"] { --nfp-h: 70; --nfp-c: .14; }
:root[data-palette="amethyst"], .nf-scope[data-palette="amethyst"] { --nfp-h: 300; --nfp-c: .16; }
:root[data-palette="neon"], .nf-scope[data-palette="neon"] { --nfp-h: 340; --nfp-c: .2; --nfp-h2: 205; }
:root[data-palette="sunset"], .nf-scope[data-palette="sunset"] { --nfp-h: 32; --nfp-c: .16; --nfp-h2: 320; }

/* светлая тема */
:root[data-palette], .nf-scope[data-palette][data-theme="light"] {
	--background: oklch(0.982 calc(var(--nfp-c, 0) * 0.07) var(--nfp-h, 0));
	--card-solid: oklch(0.997 calc(var(--nfp-c, 0) * 0.03) var(--nfp-h, 0));
	--popover: oklch(0.997 calc(var(--nfp-c, 0) * 0.03) var(--nfp-h, 0));
	--primary: oklch(0.5 var(--nfp-c, 0) var(--nfp-h, 0));
	--primary-foreground: oklch(0.985 0.012 var(--nfp-h, 0));
	--secondary: oklch(0.5 calc(var(--nfp-c, 0) * 0.6) var(--nfp-h, 0) / 0.08);
	--muted: oklch(0.5 calc(var(--nfp-c, 0) * 0.45) var(--nfp-h, 0) / 0.055);
	--accent: oklch(0.55 var(--nfp-c, 0) var(--nfp-h, 0) / 0.11);
	--border: oklch(0.42 calc(var(--nfp-c, 0) * 0.4) var(--nfp-h, 0) / 0.14);
	--input: oklch(0.42 calc(var(--nfp-c, 0) * 0.45) var(--nfp-h, 0) / 0.24);
	--ring: oklch(0.55 var(--nfp-c, 0) var(--nfp-h, 0));
	--link: oklch(0.47 calc(var(--nfp-c, 0) * 0.95) var(--nfp-h2, var(--nfp-h, 0)));
	--glow: radial-gradient(120ch 60ch at 50% -20%, oklch(0.72 var(--nfp-c, 0) var(--nfp-h, 0) / 0.16), transparent 70%);
}

/* тёмная тема (явная и системная) */
:root[data-palette][data-theme="dark"], .nf-scope[data-palette][data-theme="dark"] {
	--background: oklch(0.165 calc(var(--nfp-c, 0) * 0.13) var(--nfp-h, 0));
	--card-solid: oklch(0.205 calc(var(--nfp-c, 0) * 0.15) var(--nfp-h, 0));
	--popover: oklch(0.225 calc(var(--nfp-c, 0) * 0.15) var(--nfp-h, 0));
	--primary: oklch(0.8 var(--nfp-c, 0) var(--nfp-h, 0));
	--primary-foreground: oklch(0.2 0.03 var(--nfp-h, 0));
	--secondary: oklch(0.8 calc(var(--nfp-c, 0) * 0.5) var(--nfp-h, 0) / 0.11);
	--muted: oklch(0.8 calc(var(--nfp-c, 0) * 0.4) var(--nfp-h, 0) / 0.075);
	--accent: oklch(0.8 var(--nfp-c, 0) var(--nfp-h, 0) / 0.15);
	--border: oklch(0.85 calc(var(--nfp-c, 0) * 0.45) var(--nfp-h, 0) / 0.13);
	--input: oklch(0.85 calc(var(--nfp-c, 0) * 0.45) var(--nfp-h, 0) / 0.19);
	--ring: oklch(0.78 var(--nfp-c, 0) var(--nfp-h, 0));
	--link: oklch(0.82 calc(var(--nfp-c, 0) * 0.8) var(--nfp-h2, var(--nfp-h, 0)));
	--glow: radial-gradient(120ch 60ch at 50% -20%, oklch(0.6 var(--nfp-c, 0) var(--nfp-h, 0) / 0.2), transparent 70%);
}
@media (prefers-color-scheme: dark) {
	:root[data-palette]:not([data-theme="light"]) {
		--background: oklch(0.165 calc(var(--nfp-c, 0) * 0.13) var(--nfp-h, 0));
		--card-solid: oklch(0.205 calc(var(--nfp-c, 0) * 0.15) var(--nfp-h, 0));
		--popover: oklch(0.225 calc(var(--nfp-c, 0) * 0.15) var(--nfp-h, 0));
		--primary: oklch(0.8 var(--nfp-c, 0) var(--nfp-h, 0));
		--primary-foreground: oklch(0.2 0.03 var(--nfp-h, 0));
		--secondary: oklch(0.8 calc(var(--nfp-c, 0) * 0.5) var(--nfp-h, 0) / 0.11);
		--muted: oklch(0.8 calc(var(--nfp-c, 0) * 0.4) var(--nfp-h, 0) / 0.075);
		--accent: oklch(0.8 var(--nfp-c, 0) var(--nfp-h, 0) / 0.15);
		--border: oklch(0.85 calc(var(--nfp-c, 0) * 0.45) var(--nfp-h, 0) / 0.13);
		--input: oklch(0.85 calc(var(--nfp-c, 0) * 0.45) var(--nfp-h, 0) / 0.19);
		--ring: oklch(0.78 var(--nfp-c, 0) var(--nfp-h, 0));
		--link: oklch(0.82 calc(var(--nfp-c, 0) * 0.8) var(--nfp-h2, var(--nfp-h, 0)));
		--glow: radial-gradient(120ch 60ch at 50% -20%, oklch(0.6 var(--nfp-c, 0) var(--nfp-h, 0) / 0.2), transparent 70%);
	}
}

/* плавная смена палитры (класс ставит themes.js на 400 мс) */
@media (prefers-reduced-motion: no-preference) {
	html.nf-pal-anim, html.nf-pal-anim body, html.nf-pal-anim *:not(.nf-ct):not(.nf-pt) {
		transition: background-color .35s ease, border-color .35s ease, color .35s ease, fill .35s ease, box-shadow .35s ease !important;
	}
}

/* ============================================================ 2. области с принудительной темой (предпросмотры) */
/* повторяют базовые токены nb.css — палитра страницы внутрь не протекает */
.nf-scope[data-theme="light"] {
	--background: oklch(0.985 0.002 250);
	--foreground: oklch(0.22 0 0);
	--card: oklch(1 0 0 / 0.78);
	--card-solid: oklch(1 0 0);
	--popover: oklch(1 0 0);
	--primary: oklch(0.18 0 0);
	--primary-foreground: oklch(0.99 0 0);
	--secondary: oklch(0 0 0 / 0.06);
	--muted: oklch(0 0 0 / 0.045);
	--muted-foreground: oklch(0.47 0 0);
	--accent: oklch(0 0 0 / 0.07);
	--border: oklch(0 0 0 / 0.1);
	--input: oklch(0 0 0 / 0.18);
	--ring: oklch(0.35 0 0);
	--success: oklch(0.52 0.14 152);
	--link: oklch(0.42 0.09 250);
	--glow: none;
	color-scheme: light;
}
.nf-scope[data-theme="dark"] {
	--background: oklch(0.16 0 0);
	--foreground: oklch(0.95 0 0);
	--card: oklch(1 0 0 / 0.05);
	--card-solid: oklch(0.2 0 0);
	--popover: oklch(0.22 0 0);
	--primary: oklch(1 0 0);
	--primary-foreground: oklch(0.13 0 0);
	--secondary: oklch(1 0 0 / 0.09);
	--muted: oklch(1 0 0 / 0.06);
	--muted-foreground: oklch(0.72 0 0);
	--accent: oklch(1 0 0 / 0.09);
	--border: oklch(1 0 0 / 0.11);
	--input: oklch(1 0 0 / 0.16);
	--ring: oklch(0.85 0 0);
	--success: oklch(0.76 0.14 152);
	--link: oklch(0.82 0.07 250);
	--glow: none;
	color-scheme: dark;
}
.nf-scope { background: var(--background); color: var(--foreground); }
/* палитра внутри области: те же формулы, что для страницы (селекторы выше), эти — поверх базовых токенов области */
.nf-scope[data-palette][data-theme="light"] { --foreground: oklch(0.22 0 0); }
.nf-scope[data-palette][data-theme="dark"] { --foreground: oklch(0.95 0 0); }

/* ============================================================ 3. меню палитр в шапке */
.nf-pal-menu > summary { position: relative; color: var(--muted-foreground); }
.nf-pal-menu > summary .nf-pal-dot {
	display: none; position: absolute; right: 7px; bottom: 7px; width: 8px; height: 8px; border-radius: 50%;
	background: var(--primary); box-shadow: 0 0 0 2px var(--background);
}
:root[data-palette] .nf-pal-menu > summary .nf-pal-dot { display: block; }
.nf-pal-menu[open] > summary { background: var(--muted); color: var(--foreground); }
.nb-dropdown.nf-pal-drop { width: 272px; padding: 8px; top: calc(100% + 14px); }	/* ниже линии шапки, а не поверх неё */
/* уголок-указатель на кнопку палитры: его координату ставит themes.js (--nf-pal-caret), по умолчанию — у правого края */
.nb-dropdown.nf-pal-drop::before {
	content: ""; position: absolute; top: -6px; left: var(--nf-pal-caret, calc(100% - 20px)); width: 10px; height: 10px;
	transform: translateX(-50%) rotate(45deg); background: var(--popover);
	border-left: 1px solid var(--border); border-top: 1px solid var(--border); pointer-events: none;
}
.nf-pal-drop .head { padding: 4px 6px 8px; }
.nf-pal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.nb-dropdown .nf-pal-grid button, .nf-pal-grid button {
	display: grid; justify-items: center; gap: 4px; width: auto; min-height: 0; padding: 7px 2px 6px; border: 1px solid transparent;
	border-radius: var(--radius); background: none; color: var(--muted-foreground); font-size: 11px; line-height: 1.2; text-align: center; cursor: pointer;
}
.nb-dropdown .nf-pal-grid button:hover { background: var(--muted); color: var(--foreground); }
.nb-dropdown .nf-pal-grid button[aria-checked="true"] { border-color: var(--ring); color: var(--foreground); font-weight: 650; background: var(--muted); }
.nf-sw {
	position: relative; display: block; width: 26px; height: 26px; border-radius: 50%; flex: none;
	background: linear-gradient(135deg, oklch(0.5 var(--sw-c, 0) var(--sw-h, 0)) 0 50%, oklch(0.8 var(--sw-c, 0) var(--sw-h2, var(--sw-h, 0))) 50% 100%);
	box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.12), 0 1px 2px oklch(0 0 0 / 0.2);
}
.nf-sw.is-classic { background: linear-gradient(135deg, oklch(0.2 0 0) 0 50%, oklch(0.96 0 0) 50% 100%); }
.nf-sw.is-custom { background: conic-gradient(from 90deg, #f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); }
[aria-checked="true"] > .nf-sw::after {
	content: ""; position: absolute; inset: 7px; border-radius: 50%; background: oklch(1 0 0);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(0 0 1px oklch(0 0 0 / 0.6));
}
.nf-pal-custom { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; padding: 6px 8px; border-radius: var(--radius); font-size: 13px; color: var(--foreground); cursor: pointer; }
.nf-pal-custom:hover { background: var(--muted); }
.nf-pal-custom input[type="color"] { width: 30px; height: 26px; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: none; cursor: pointer; }
.nf-pal-custom small { margin-left: auto; color: var(--muted-foreground); font-size: 11.5px; }
.nf-pal-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 2px; margin: 2px 0; }
.nb-dropdown .nf-pal-mode button, .nf-pal-mode button {
	justify-content: center; gap: 6px; min-height: 32px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius);
	font-size: 12.5px; color: var(--muted-foreground); background: none;
}
.nb-dropdown .nf-pal-mode button[aria-pressed="true"], .nf-pal-mode button[aria-pressed="true"] { border-color: var(--ring); color: var(--foreground); background: var(--muted); font-weight: 600; }
/* меню без доступа к палитрам (не поддержал проект): образцы под замком + ссылка на /themes */
.nb-dropdown a.nf-pal-locked, .nf-pal-locked {
	display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius); color: var(--foreground); text-decoration: none; white-space: normal;
}
.nb-dropdown a.nf-pal-locked:hover { background: var(--muted); }
.nf-pal-locked .sws { position: relative; display: flex; flex: none; padding-right: 4px; }
.nf-pal-locked .sws .nf-sw { width: 20px; height: 20px; margin-right: -7px; box-shadow: 0 0 0 2px var(--popover); opacity: .75; }
.nf-pal-locked .sws .lk {
	position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
	background: var(--foreground); color: var(--background); box-shadow: 0 0 0 2px var(--popover);
}
.nf-pal-locked .tx { display: grid; gap: 2px; min-width: 0; padding-left: 6px; }
.nf-pal-locked .tx b { font-size: 13px; }
.nf-pal-locked .tx small { font-size: 11.5px; line-height: 1.35; color: var(--muted-foreground); }
@media (max-width: 860px) {
	/* на телефоне кнопка палитры стоит посреди шапки: меню привязано не к ней (уезжало за левый край),
	   а к строке шапки (.nb-header-inner — position: relative) — у правого поля, с отступами 16px от краёв */
	.nb-header .nb-menu.nf-pal-menu { position: static; }
	.nb-header .nb-dropdown.nf-pal-drop { left: auto; right: 12px; top: calc(100% + 6px); width: min(320px, calc(100vw - 24px)); box-sizing: border-box; }	/* left/right под кнопкой ставит themes.js */
	.nb-header .nb-dropdown .nf-pal-grid button { min-height: 58px; }
}

/* ============================================================ 4. стиль комментария .nf-ct и шапки профиля .nf-pt */
.nf-ct, .nf-pt {
	--ct-a: var(--ct-accent-l, var(--primary));
	--ct-nick: var(--ct-nick-l, var(--foreground));
	--ct-veil: var(--card-solid);
	--ct-veil-min: 58%;
	--ct-art-w: min(62%, 560px);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 1px solid color-mix(in oklab, var(--ct-a) 55%, transparent) !important;
	border-radius: var(--radius-lg);
	background-color: var(--card-solid);
	box-shadow:
		0 0 0 1px color-mix(in oklab, var(--ct-a) calc(var(--ct-glow, .6) * 30%), transparent),
		0 0 calc(6px + var(--ct-glow, .6) * 22px) calc(var(--ct-glow, .6) * -2px) color-mix(in oklab, var(--ct-a) calc(var(--ct-glow, .6) * 60%), transparent);
}
:root[data-theme="dark"] :is(.nf-ct, .nf-pt) { --ct-a: var(--ct-accent-d, var(--primary)); --ct-nick: var(--ct-nick-d, var(--foreground)); --ct-veil-min: 22%; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) :is(.nf-ct, .nf-pt) { --ct-a: var(--ct-accent-d, var(--primary)); --ct-nick: var(--ct-nick-d, var(--foreground)); --ct-veil-min: 22%; }
}
.nf-scope[data-theme="light"] :is(.nf-ct, .nf-pt) { --ct-a: var(--ct-accent-l, var(--primary)); --ct-nick: var(--ct-nick-l, var(--foreground)); --ct-veil-min: 58%; }
.nf-scope[data-theme="dark"] :is(.nf-ct, .nf-pt) { --ct-a: var(--ct-accent-d, var(--primary)); --ct-nick: var(--ct-nick-d, var(--foreground)); --ct-veil-min: 22%; }

/* картинка справа (размытие — за краями, чтобы не было светлой каймы) */
.nf-ct::before, .nf-pt::before {
	content: ""; position: absolute; z-index: -2; pointer-events: none;
	top: calc(var(--ct-blur, 0px) * -2); right: calc(var(--ct-blur, 0px) * -2); bottom: calc(var(--ct-blur, 0px) * -2);
	width: calc(var(--ct-art-w) + var(--ct-blur, 0px) * 2);
	background: var(--ct-img, none) 100% var(--ct-pos, 50%) / cover no-repeat;
	filter: blur(var(--ct-blur, 0px));
}
/* вуаль: слева сплошная (там текст), к правому краю — до «затемнения» темы; плюс акцентный отсвет в углу */
.nf-ct::after, .nf-pt::after {
	content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
	background:
		radial-gradient(90% 130% at 100% 0%, color-mix(in oklab, var(--ct-a) 16%, transparent), transparent 60%),
		linear-gradient(90deg, var(--ct-veil) 0, var(--ct-veil) calc(100% - var(--ct-art-w)), color-mix(in oklab, var(--ct-veil) max(var(--ct-dim, 55%), var(--ct-veil-min)), transparent) 100%);
}
/* текст поверх картинки — с мягким ореолом цвета вуали */
.nf-ct, .nf-pt .nb-profile-head { text-shadow: 0 0 8px color-mix(in oklab, var(--ct-veil) 75%, transparent); }
.nf-ct :is(button, .nb-btn, .nb-chip, .nf-rank, .nf-ct-badge, input, textarea), .nf-pt :is(.nb-btn, .nb-chip, .nf-rank, .nf-ct-badge) { text-shadow: none; }

/* цветной ник */
.nf-ct :is(.nb-d-user, a.user, .who > b), .nf-pt .nb-profile-name h1 {
	color: var(--ct-nick) !important;
	text-shadow: 0 0 14px color-mix(in oklab, var(--ct-nick) 40%, transparent), 0 0 6px var(--ct-veil);
}

/* бейдж темы («Меценат», «Поддержка») */
.nf-ct-badge {
	position: relative; display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 8px 0 6px; box-sizing: border-box;
	border-radius: var(--radius-pill); overflow: hidden; vertical-align: middle; white-space: nowrap;
	font: 700 10px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
	color: var(--ct-a, var(--primary));
	background: color-mix(in oklab, var(--ct-a, var(--primary)) 13%, var(--card-solid));
	border: 1px solid color-mix(in oklab, var(--ct-a, var(--primary)) 50%, transparent);
	box-shadow: 0 0 10px -3px color-mix(in oklab, var(--ct-a, var(--primary)) 60%, transparent);
}
.nf-ct-badge svg { flex: none; }
.nf-pt .nf-ct-badge { height: 22px; font-size: 11px; padding: 0 10px 0 8px; }
@media (prefers-reduced-motion: no-preference) {
	.nf-ct-badge::after {
		content: ""; position: absolute; inset: 0; transform: translateX(-120%);
		background: linear-gradient(100deg, transparent 20%, color-mix(in oklab, var(--ct-a, #fff) 35%, transparent) 50%, transparent 80%);
		animation: nf-ct-shine 5s ease-in-out 1.5s infinite;
	}
}
@keyframes nf-ct-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* --- обсуждения тайтлов и глав (discussion/_comment.php): карточкой становится .nb-d-main --- */
:is(.nb-d, .nb-d.is-new) > .nb-d-main.nf-ct, .nf-th-demo .nb-d-main.nf-ct { padding: 12px 14px 8px; }
.nb-d.is-new > .nb-d-main.nf-ct {
	box-shadow: inset 3px 0 0 color-mix(in oklab, var(--success) 70%, transparent),
		0 0 calc(6px + var(--ct-glow, .6) * 22px) calc(var(--ct-glow, .6) * -2px) color-mix(in oklab, var(--ct-a) calc(var(--ct-glow, .6) * 60%), transparent);
}
.nb-d-main.nf-ct .nb-d-actions { position: relative; }
.nb-d-main.nf-ct .nb-d-quote { background: color-mix(in oklab, var(--ct-veil) 70%, var(--muted)); }
.nb-d-replies .nb-d-main.nf-ct { padding: 10px 12px 6px; }

/* --- блог, блоги тайтлов, анонсы (blog/_cmt.php) --- */
.comments.bl-comments .comment.nf-ct { background-color: var(--card-solid); margin: 4px 0; }
.comments.bl-comments .comment.nf-ct:hover { background-color: var(--card-solid); }
.comments.bl-comments .comment.nf-ct.new {
	box-shadow: inset 3px 0 0 var(--translator),
		0 0 calc(6px + var(--ct-glow, .6) * 22px) calc(var(--ct-glow, .6) * -2px) color-mix(in oklab, var(--ct-a) calc(var(--ct-glow, .6) * 60%), transparent);
}

/* --- комментарии к фрагментам и старый вид (blog/_comment*.php) --- */
.comments .comment.nf-ct { padding: 8px 12px; margin: 4px 0; background-color: var(--card-solid); }
.comments.bl-comments .comment.nf-ct { padding: 12px 40px 10px 56px; }

/* --- рецензии, заявки --- */
.nb-card.nf-ct { background: var(--card-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
.dc-note.nf-ct { padding: 10px 12px; margin: 6px 0; }

/* --- шапка профиля (users/profile_head.php) --- */
.nb-card.nf-pt { --ct-art-w: min(74%, 860px); background: var(--card-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nf-pt::after {
	background:
		linear-gradient(180deg, transparent 58%, var(--ct-veil) 96%),
		radial-gradient(80% 120% at 100% 0%, color-mix(in oklab, var(--ct-a) 18%, transparent), transparent 60%),
		linear-gradient(90deg, var(--ct-veil) 0, var(--ct-veil) calc(100% - var(--ct-art-w)), color-mix(in oklab, var(--ct-veil) max(var(--ct-dim, 55%), var(--ct-veil-min)), transparent) 100%);
}
.nf-pt .nb-profile-ava .nb-avatar-lg {
	box-shadow: 0 0 0 4px var(--card-solid), 0 0 0 6px color-mix(in oklab, var(--ct-a) 75%, transparent), 0 0 30px color-mix(in oklab, var(--ct-a) 45%, transparent) !important;
}
.nf-pt .nb-profile-stats, .nf-pt .nb-profile-tabs { position: relative; }

/* телефоны: картинка шире, вуаль плотнее — текст идёт по всей ширине */
@media (max-width: 640px) {
	.nf-ct, .nf-pt { --ct-art-w: 78%; --ct-veil-min: 68%; }
	:root[data-theme="dark"] :is(.nf-ct, .nf-pt), .nf-scope[data-theme="dark"] :is(.nf-ct, .nf-pt) { --ct-veil-min: 45%; }
}
@media (max-width: 640px) and (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) :is(.nf-ct, .nf-pt) { --ct-veil-min: 45%; }
}
@media (forced-colors: active) {
	.nf-ct::before, .nf-ct::after, .nf-pt::before, .nf-pt::after { display: none; }
}

/* ============================================================ 5. страница /themes */
.nf-th-page { max-width: 1120px; margin: 0 auto; }
.nf-th-head { margin-bottom: 14px; }
.nf-th-head .nb-row { gap: 8px; flex-wrap: wrap; }
.nf-th-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }

/* карточка «Оформление — для поддержавших проект» */
.nf-th-gate {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; margin: 0 0 22px; padding: 18px 20px;
	border: 1px solid color-mix(in oklab, var(--warning) 45%, var(--border)); border-radius: var(--radius-lg);
	background: radial-gradient(90% 140% at 0% 0%, color-mix(in oklab, var(--warning) 12%, transparent), transparent 65%), var(--card-solid);
	box-shadow: var(--elev-1);
}
.nf-th-gate-ico {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: color-mix(in oklab, var(--warning) 16%, var(--card-solid)); color: color-mix(in oklab, var(--warning) 80%, var(--foreground));
	border: 1px solid color-mix(in oklab, var(--warning) 40%, transparent);
}
.nf-th-gate-body { display: grid; gap: 10px; min-width: 0; }
.nf-th-gate h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.nf-th-gate-body > p { margin: 0; font-size: 14px; color: var(--muted-foreground); max-width: 72ch; }
.nf-th-gate-progress { display: grid; gap: 6px; max-width: 520px; }
.nf-th-gate-progress .lbl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nf-th-gate-progress .lbl .nb-muted { font-weight: 500; }
.nf-th-gate-progress .nb-progress { height: 8px; }
.nf-th-gate-progress .nb-progress > i { background: color-mix(in oklab, var(--warning) 75%, var(--primary)); min-width: 4px; }
.nf-th-gate-progress p { margin: 0; font-size: 12.5px; }
.nf-th-gate-saved { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; color: var(--foreground); }
.nf-th-gate-saved svg { flex: none; margin-top: 2px; color: var(--success); }
.nf-th-gate-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.nf-th-gate-act .nb-muted { font-size: 13px; }
@media (max-width: 560px) {
	.nf-th-gate { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 12px; }
	.nf-th-gate-act .nb-btn { flex: 1 1 auto; justify-content: center; }
}
.nf-th-jump a { display: inline-flex; align-items: center; gap: 6px; }

.nf-th-section { margin: 0 0 40px; scroll-margin-top: 80px; }
.nf-th-section > .nb-section-head { align-items: flex-end; gap: 6px 16px; flex-wrap: wrap; }
.nf-th-section > .nb-section-head h2 { display: flex; align-items: center; gap: 8px; }
.nf-th-section > .nb-section-head p { margin: 0; color: var(--muted-foreground); font-size: 13px; }

.nf-th-live { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 12px 16px 16px; box-shadow: var(--elev-1); }
.nf-th-live-lbl {
	display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 11px; font-weight: 750; letter-spacing: .1em;
	text-transform: uppercase; color: var(--muted-foreground);
}
.nf-th-live-lbl .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 25%, transparent); }
@media (prefers-reduced-motion: no-preference) {
	.nf-th-live-lbl .dot { animation: nf-th-pulse 2s ease-in-out infinite; }
}
@keyframes nf-th-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--success) 0%, transparent); } }
.nf-th-live-lbl .nb-spacer { flex: 1; }
.nf-th-live-lbl .nf-th-now { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12.5px; color: var(--foreground); }
.nf-th-demo { margin: 0; }
.nf-th-demo .nb-d-main { transition: none; }
.nf-th-demo .nb-d-text p { margin: 0 0 6px; }
.nf-th-pdemo { margin: 0; }
.nf-th-pdemo.nb-profile-card { padding-bottom: 16px; margin: 0; }
.nf-th-pdemo .nb-profile-name .h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.nf-pt .nb-profile-name .h1 { color: var(--ct-nick) !important; text-shadow: 0 0 14px color-mix(in oklab, var(--ct-nick) 40%, transparent), 0 0 6px var(--ct-veil); }
.nf-th-pdemo .nb-profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; padding-bottom: 0; }

.nf-th-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 12px 0 14px; min-height: 36px; }
.nf-th-bar-txt { flex: 1 1 240px; min-width: 0; font-size: 13px; color: var(--muted-foreground); }
.nf-th-bar-txt b { color: var(--foreground); }
.nf-th-bar .nb-btn[disabled] { opacity: .55; cursor: default; }

.nf-th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.nf-th-grid form { display: contents; }
.nf-th-tile {
	position: relative; display: grid; gap: 8px; align-content: start; width: 100%; margin: 0; padding: 8px; box-sizing: border-box;
	border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-solid); color: var(--foreground);
	font: inherit; text-align: left; cursor: pointer; box-shadow: var(--elev-1);
}
.nf-th-tile:hover { border-color: color-mix(in oklab, var(--ring) 60%, var(--border)); }
.nf-th-tile:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nf-th-tile[aria-pressed="true"] { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring), var(--elev-2); }
@media (prefers-reduced-motion: no-preference) {
	.nf-th-tile { transition: transform .15s ease, border-color .15s, box-shadow .15s; }
	.nf-th-tile:hover { transform: translateY(-2px); }
}
.nf-th-thumb {
	display: flex; align-items: center; gap: 8px; height: 76px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--border);
	border-radius: var(--radius); background: var(--card-solid); --ct-art-w: 72%;
}
.nf-th-thumb.nf-ct { box-shadow: 0 0 calc(4px + var(--ct-glow, .6) * 12px) calc(var(--ct-glow, .6) * -2px) color-mix(in oklab, var(--ct-a) calc(var(--ct-glow, .6) * 60%), transparent); }
.nf-th-thumb .av { width: 26px; height: 26px; border-radius: 50%; flex: none; background: color-mix(in oklab, var(--foreground) 18%, transparent); }
.nf-th-thumb .ln { display: grid; gap: 6px; flex: 1; min-width: 0; }
.nf-th-thumb .ln b { display: block; width: 46%; height: 7px; border-radius: 4px; background: var(--ct-nick, var(--foreground)); opacity: .9; }
.nf-th-thumb .ln i { display: block; height: 6px; border-radius: 4px; background: color-mix(in oklab, var(--foreground) 22%, transparent); }
.nf-th-thumb .ln i + i { width: 70%; }
.nf-th-thumb.is-none { justify-content: center; color: var(--muted-foreground); font-size: 12.5px; gap: 6px; }
.nf-th-cap { display: grid; gap: 2px; min-width: 0; padding: 0 2px 2px; }
.nf-th-cap b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-th-cap small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted-foreground); }
.nf-th-cap small.is-ok { color: var(--success); }
.nf-th-check, .nf-th-lock {
	position: absolute; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
	border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; box-shadow: var(--elev-2);
}
.nf-th-check { left: 14px; background: var(--primary); color: var(--primary-foreground); }
.nf-th-tile:not(.is-current) .nf-th-check { display: none; }
.nf-th-lock { right: 14px; padding: 0 6px; background: oklch(0 0 0 / 0.55); color: oklch(1 0 0); }
.nf-th-tile.is-locked .nf-th-cap small { color: color-mix(in oklab, var(--warning) 70%, var(--muted-foreground)); }
.nf-pal-tile .nf-th-lock { top: 14px; right: 14px; }
.nf-th-section.is-locked .nf-pal-tile:not([data-nf-palette="classic"]) .nf-pal-demo { opacity: .82; }
.nf-pal-tile.is-custom input[type="color"]:disabled { cursor: not-allowed; opacity: .6; }
.nf-th-tile.is-current .nf-th-lock { display: none; }
.nf-th-empty { margin: 0; padding: 22px; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted-foreground); text-align: center; }
.nf-th-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted-foreground); }

/* палитры на странице */
.nf-pal-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.nf-pal-tile {
	position: relative; display: grid; gap: 8px; padding: 8px; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg);
	background: var(--card-solid); color: var(--foreground); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--elev-1);
}
.nf-pal-tile:hover { border-color: color-mix(in oklab, var(--ring) 60%, var(--border)); }
.nf-pal-tile:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nf-pal-tile[aria-checked="true"] { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring), var(--elev-2); }
.nf-pal-tile[aria-checked="true"] .nf-th-check { display: inline-flex; }
.nf-pal-tile .nf-th-check { top: auto; left: auto; bottom: 10px; right: 10px; }
.nf-pal-tile:not([aria-checked="true"]) .nf-th-check { display: none; }
.nf-pal-demo { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.nf-pal-demo > .nf-scope { display: grid; gap: 6px; padding: 10px 9px; min-width: 0; background: var(--background) var(--glow) no-repeat; }
.nf-pal-demo .b { display: inline-block; justify-self: start; padding: 3px 9px; border-radius: var(--radius); background: var(--primary); color: var(--primary-foreground); font-size: 11px; font-weight: 650; white-space: nowrap; }
.nf-pal-demo .l { font-size: 11.5px; color: var(--link); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-pal-demo .c { display: flex; gap: 4px; }
.nf-pal-demo .c i { height: 14px; flex: 1; border-radius: var(--radius-sm); background: var(--secondary); border: 1px solid var(--border); }
.nf-pal-demo .c i:first-child { background: var(--accent); border-color: var(--ring); }
.nf-pal-tile .nf-th-cap { grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
.nf-pal-tile .nf-th-cap .nf-sw { width: 18px; height: 18px; }
.nf-pal-tile.is-custom label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--muted-foreground); cursor: pointer; }
.nf-pal-tile.is-custom input[type="color"] { width: 38px; height: 28px; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: none; cursor: pointer; }
.nf-pal-modebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; font-size: 13px; color: var(--muted-foreground); }
.nf-pal-modebar .nf-pal-mode { display: inline-grid; grid-template-columns: auto auto; }
.nf-pal-modebar .nf-pal-mode button { display: inline-flex; align-items: center; cursor: pointer; }

/* ============================================================ 6. админка /admin/themes */
.nf-adm-th-list { display: grid; gap: 8px; }
.nf-adm-th-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-solid); }
.nf-adm-th-row.is-off { opacity: .62; }
.nf-adm-th-row .nf-th-thumb { height: 58px; }
.nf-adm-th-row .t { display: grid; gap: 3px; min-width: 0; }
.nf-adm-th-row .t b { font-size: 14px; }
.nf-adm-th-row .t code { font-size: 11.5px; padding: 0 4px; border: 0; border-radius: var(--radius-sm); background: var(--secondary); color: var(--muted-foreground); }
.nf-adm-th-row .t .m { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--muted-foreground); }
.nf-adm-th-row .act { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.nf-adm-th-row .act form { margin: 0; }
@media (max-width: 720px) {
	.nf-adm-th-row { grid-template-columns: 110px minmax(0, 1fr); }
	.nf-adm-th-row .act { grid-column: 1 / -1; justify-content: flex-start; }
}
.nf-adm-th-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .nf-adm-th-edit { grid-template-columns: minmax(0, 1fr); } }
.nf-adm-th-preview { position: sticky; top: 76px; display: grid; gap: 10px; }
@media (max-width: 1100px) { .nf-adm-th-preview { position: static; } }
.nf-adm-th-preview > .nf-scope { display: grid; gap: 10px; padding: 12px; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.nf-adm-th-preview .lbl { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
.nf-adm-th-preview .nf-th-pmini { display: flex; align-items: center; gap: 12px; min-height: 92px; padding: 14px 16px; box-sizing: border-box; }
.nf-adm-th-preview .nf-th-pmini .nb-avatar { width: 52px; height: 52px; font-size: 20px; }
.nf-adm-th-preview .nf-th-pmini b { font-size: 18px; color: var(--ct-nick); }
.nf-adm-th-range { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 10px; align-items: center; }
.nf-adm-th-range input[type="range"] { width: 100%; margin: 0; accent-color: var(--primary); }
.nf-adm-th-range output { font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; color: var(--muted-foreground); }
.nf-adm-th-color { display: flex; gap: 8px; align-items: center; }
.nf-adm-th-color input[type="color"] { width: 44px; height: 36px; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); background: none; cursor: pointer; }
.nf-adm-th-color input[type="text"] { width: 110px !important; font-family: ui-monospace, monospace; }
.nf-adm-th-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .nf-adm-th-2 { grid-template-columns: minmax(0, 1fr); } }
.nf-adm-th-img { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nf-adm-th-img img { width: 160px; height: 64px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }