/* «Жертва 2.0» — веб-версия. Светлая тема в стиле NWA Viewer: белые панели,
   серые рамки, оранжевый акцент.

   С сентября 2026 страница выводится в обвязке магазина — с той же панелью и
   подвалом, что на «Услугах». Раньше это был отдельный HTML-документ со своей
   шапкой; её правила (.nwa-zh-top, .nwa-zh-main, .nwa-zh-foot) остались ниже,
   ими пользуется локальный стенд dev/zhertva-dev.php.

   Все цвета собраны в переменные ниже — тема меняется только там. Селектор
   двойной, потому что на отдельной странице шапка и подвал лежат вне блока
   .nwa-zh, а сам блок должен пережить вставку в чужую страницу без класса на
   body — что теперь и происходит на сайте. */
.nwa-zh-body,
.nwa-zh{
	--zh-page:#F4F5F7;          /* фон страницы за панелями */
	--zh-bg:#FFFFFF;            /* фон блока инструмента */
	--zh-panel:#FFFFFF;         /* карточки настроек и метрик */
	--zh-head:#FFFFFF;          /* шапка страницы и блока, подвал */
	--zh-input:#FFFFFF;         /* поля ввода и вторичные кнопки */
	--zh-hover:#F1F3F5;         /* подсветка при наведении */
	--zh-border:#D9DEE3;
	--zh-border-strong:#BFC7CE;
	--zh-text:#1F2328;
	--zh-dim:#6B7280;
	--zh-orange:#DE4E10;        /* заливки, рамки, активные состояния */
	--zh-orange-hover:#F06529;
	/* Оранжевый для текста — темнее заливочного: светлый акцент на белом
	   фоне читается плохо, а надписи должны оставаться разборчивыми. */
	--zh-orange-text:#BD420E;
	--zh-orange-soft:rgba(222,78,16,.08);
	/* Подложка под оранжевым текстом (плашка, выбранный вариант) — серая:
	   оранжевое на оранжевом читалось плохо (владелец, 23.09.2026). */
	--zh-neutral-soft:#EEEEEA;
	--zh-blue:#1F6FC4;
	--zh-danger:#D22B2F;
	/* Область предпросмотра намеренно остаётся тёмной: это трёхмерный вид,
	   и цвета станка в nwa-zhertva.js подобраны под тёмный фон. */
	--zh-stage:#151515;
}

/* ── Защита от стилей магазина ─────────────────────────────────
   С сентября 2026 страница выводится в обвязке магазина, и на голые теги
   внутри блока ложатся правила bootstrap и темы: у h2 свои размеры и отступы,
   у label — display:inline-block и margin-bottom, у p — нижний отступ. Раньше
   страница была отдельным документом с одним этим файлом, и вёрстка рассчитана
   на чистые умолчания браузера. Здесь они возвращаются.

   Два решения, которые нельзя менять не подумав:

   1. Значение revert, а не конкретные числа. Оно откатывает свойство к
      умолчанию браузера, то есть ровно к тому состоянию, в каком блок жил на
      отдельной странице. Списывать умолчания руками пришлось бы для каждого
      тега, и они разъехались бы с браузерами.

   2. Селекторы завёрнуты в :where(). Он не добавляет специфичности, поэтому
      каждое правило весит как один класс .nwa-zh — столько же, сколько
      собственные правила инструмента вида .nwa-zh__card-title. При равном весе
      побеждает записанное ниже, а весь этот блок стоит ВЫШЕ компонентов.
      Отсюда следует главное: сброс подстилает под оформление и не может его
      перебить. Перенести блок в конец файла — сломать вид страницы.

   Большинство элементов инструмента размечены своими классами и закрыты
   собственными правилами, так что блок работает как страховка. Реально его
   касаются только теги без класса. */
.nwa-zh :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,figure,fieldset,legend,blockquote){
	margin:revert;
	padding:revert;
	font:revert;
	color:revert;
	text-transform:revert;
	letter-spacing:revert;
}
.nwa-zh :where(label){
	display:revert;
	max-width:revert;
	margin:revert;
	font-weight:revert;
}
.nwa-zh :where(input,select,textarea,button){
	margin:revert;
	font:revert;
	line-height:revert;
	text-transform:revert;
	letter-spacing:revert;
	box-shadow:revert;
}
/* Ссылки: у .nwa-zh__btn цвет уже стоит с !important — автор закладывал вставку
   в чужую страницу. Прочим ссылкам возвращается оранжевый акцент инструмента,
   иначе тема красит их своим бежевым var(--nwa-accent). */
.nwa-zh :where(a){
	color:var(--zh-orange-text);
	text-decoration:none;
}

/* ── Каркас отдельной страницы ─────────────────────────────────
   Классы ниже остались от прежней самостоятельной страницы. На сайте они
   больше не используются — там шапка и подвал магазина, — но ими по-прежнему
   пользуется локальный стенд dev/zhertva-dev.php, который собирает эту
   оболочку сам. Не удалять. */
.nwa-zh-body{
	margin:0;
	padding:0;
	min-height:100vh;
	display:flex;
	flex-direction:column;
	background:var(--zh-page);
	color:var(--zh-text);
	font-family:'Montserrat','Segoe UI',Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
}
.nwa-zh-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap;
	padding:14px 24px;
	background:var(--zh-head);
	border-bottom:1px solid var(--zh-border);
}
.nwa-zh-top__logo{
	display:block;
	line-height:0;
}
.nwa-zh-top__logo img{
	display:block;
	height:52px;
	width:auto;
}
.nwa-zh-top__nav{
	display:flex;
	gap:22px;
	flex-wrap:wrap;
}
.nwa-zh-top__nav a{
	color:var(--zh-dim);
	font-size:14px;
	font-weight:500;
	text-decoration:none;
	transition:color .15s ease;
}
.nwa-zh-top__nav a:hover{color:var(--zh-orange-text)}
.nwa-zh-main{
	flex:1 1 auto;
	width:100%;
	max-width:1560px;
	margin:0 auto;
	padding:22px;
}
.nwa-zh-foot{
	padding:16px 24px;
	border-top:1px solid var(--zh-border);
	background:var(--zh-head);
	color:var(--zh-dim);
	font-size:12px;
	text-align:center;
}

.nwa-zh{
	margin:0 0 28px;
	padding:0;
	border:1px solid var(--zh-border);
	border-radius:14px;
	background:var(--zh-bg);
	color:var(--zh-text);
	font-family:'Montserrat','Segoe UI',Arial,sans-serif;
	overflow:hidden;
	box-shadow:0 10px 30px rgba(16,24,40,.07);
}
.nwa-zh *{box-sizing:border-box}

/* ── Шапка ─────────────────────────────────────────────────────── */
.nwa-zh__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:18px 22px;
	background:var(--zh-head);
	border-bottom:1px solid var(--zh-border);
}
.nwa-zh__title{
	font-size:22px;
	font-weight:700;
	color:var(--zh-text);
	line-height:1.2;
}
.nwa-zh__sub{
	margin-top:3px;
	font-size:13px;
	color:var(--zh-dim);
}
.nwa-zh__badge{
	flex:0 0 auto;
	padding:6px 12px;
	border:1px solid var(--zh-orange);
	border-radius:999px;
	background:var(--zh-neutral-soft);
	font-size:12px;
	font-weight:600;
	letter-spacing:.04em;
	color:var(--zh-orange-text);
	white-space:nowrap;
}

/* ── Заглушка для неавторизованных ─────────────────────────────── */
.nwa-zh__gate{
	margin:22px;
	padding:22px;
	border:1px solid var(--zh-border);
	border-left:3px solid var(--zh-orange);
	border-radius:10px;
	background:#FFF4F0;
}
.nwa-zh__gate-title{
	font-size:17px;
	font-weight:700;
	color:var(--zh-text);
}
.nwa-zh__gate-text{
	margin:8px 0 16px;
	font-size:14px;
	line-height:1.55;
	color:var(--zh-dim);
}
.nwa-zh__gate-text b{color:var(--zh-text)}
.nwa-zh__gate-actions{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

/* ── Раскладка ─────────────────────────────────────────────────── */
.nwa-zh__layout{
	display:grid;
	grid-template-columns:minmax(320px, 420px) 1fr;
	gap:0;
	align-items:start;
}
.nwa-zh__layout[inert]{
	opacity:.4;
	filter:grayscale(.6);
	pointer-events:none;
	user-select:none;
}
.nwa-zh__panel{
	padding:18px;
	border-right:1px solid var(--zh-border);
	display:flex;
	flex-direction:column;
	gap:14px;
	min-width:0;
}

/* ── Карточки настроек ─────────────────────────────────────────── */
.nwa-zh__card{
	padding:14px 16px 16px;
	border:1px solid var(--zh-border);
	border-radius:10px;
	background:var(--zh-panel);
}
/* Заголовок карточки — он же кнопка сворачивания, как у «Контура»
   (.nwa-rc__card-title). Роль и клавиатуру ему выдаёт скрипт: без JS
   инструмент всё равно не работает, а разметка остаётся обычным заголовком. */
.nwa-zh__card-title{
	position:relative;
	margin:0 0 12px;
	padding:1px 22px 1px 0;
	font-size:14px;
	font-weight:700;
	color:var(--zh-text);
	text-transform:none;
	letter-spacing:0;
	cursor:pointer;
	user-select:none;
}
/* Галочка-указатель: вниз у раскрытой карточки, вправо у свёрнутой. */
.nwa-zh__card-title::after{
	content:"";
	position:absolute;
	top:50%;
	right:4px;
	width:7px;
	height:7px;
	margin-top:-5px;
	border-right:2px solid var(--zh-dim);
	border-bottom:2px solid var(--zh-dim);
	transform:rotate(45deg);
	transform-origin:center;
	transition:transform .15s ease, border-color .15s ease;
}
.nwa-zh__card-title:hover::after{border-color:var(--zh-orange)}
/* Карточки, которые не сворачиваются: ни стрелки, ни руки на курсоре. */
.nwa-zh__card[data-no-collapse] .nwa-zh__card-title{cursor:default;padding-right:0}
.nwa-zh__card[data-no-collapse] .nwa-zh__card-title::after{display:none}
.nwa-zh__card-title:focus-visible{outline:2px solid var(--zh-orange); outline-offset:2px}
.nwa-zh__card.is-collapsed .nwa-zh__card-title{margin-bottom:0}
.nwa-zh__card.is-collapsed .nwa-zh__card-title::after{
	margin-top:-4px;
	transform:rotate(-45deg);
}
/* Свёрнутая карточка показывает только заголовок. */
.nwa-zh__card.is-collapsed > *:not(.nwa-zh__card-title){display:none}
.nwa-zh__grid{
	display:flex;
	flex-direction:column;
	gap:9px;
}
.nwa-zh__row{
	display:grid;
	grid-template-columns:1fr 132px;
	align-items:center;
	gap:12px;
	margin:0;
	font-weight:400;
}
.nwa-zh__label{
	font-size:13px;
	color:var(--zh-dim);
	line-height:1.3;
}
.nwa-zh__input{
	width:100%;
	min-width:0;
	height:34px;
	padding:5px 10px;
	border:1px solid var(--zh-border);
	border-radius:6px;
	background:var(--zh-input);
	color:var(--zh-text);
	font-family:inherit;
	font-size:13px;
	font-weight:600;
	line-height:1.2;
	transition:border-color .15s ease;
}
.nwa-zh__input:focus{
	outline:none;
	border-color:var(--zh-orange);
}
.nwa-zh__input.is-bad{border-color:var(--zh-danger)}
select.nwa-zh__input{
	appearance:none;
	-webkit-appearance:none;
	padding-right:26px;
	background-image:linear-gradient(45deg,transparent 50%,var(--zh-dim) 50%),linear-gradient(135deg,var(--zh-dim) 50%,transparent 50%);
	background-position:calc(100% - 14px) 15px, calc(100% - 9px) 15px;
	background-size:5px 5px, 5px 5px;
	background-repeat:no-repeat;
	cursor:pointer;
}
/* Строки с длинными списками: подпись сверху, поле на всю ширину —
   иначе выбранный пункт не помещается и обрезается. */
.nwa-zh__row--wide{
	grid-template-columns:1fr;
	gap:5px;
}
.nwa-zh__row.is-off{opacity:.45}
.nwa-zh__row.is-off .nwa-zh__input{cursor:not-allowed}

/* ── Тумблер ───────────────────────────────────────────────────── */
.nwa-zh__switch{
	position:relative;
	display:inline-block;
	width:46px;
	height:24px;
	margin:0;
	cursor:pointer;
}
.nwa-zh__switch input{
	position:absolute;
	opacity:0;
	width:100%;
	height:100%;
	margin:0;
	cursor:pointer;
}
.nwa-zh__switch-ui{
	position:absolute;
	inset:0;
	border-radius:999px;
	background:#CBD2D9;
	transition:background .18s ease;
}
.nwa-zh__switch-ui::after{
	content:'';
	position:absolute;
	top:3px;
	left:3px;
	width:18px;
	height:18px;
	border-radius:50%;
	background:#FFFFFF;
	box-shadow:0 1px 2px rgba(16,24,40,.35);
	transition:transform .18s ease, background .18s ease;
}
.nwa-zh__switch input:checked + .nwa-zh__switch-ui{background:rgba(222,78,16,.35)}
.nwa-zh__switch input:checked + .nwa-zh__switch-ui::after{
	transform:translateX(22px);
	background:var(--zh-orange);
}
.nwa-zh__switch input:focus-visible + .nwa-zh__switch-ui{box-shadow:0 0 0 2px var(--zh-orange)}

/* ── Карточки стратегий ────────────────────────────────────────── */
.nwa-zh__cards{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:8px;
	margin:12px 0;
}
.nwa-zh__strat{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	padding:10px 6px 8px;
	border:1px solid var(--zh-border);
	border-radius:8px;
	background:var(--zh-input);
	color:var(--zh-dim);
	font-family:inherit;
	font-size:12px;
	cursor:pointer;
	transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.nwa-zh__strat:hover{
	border-color:var(--zh-border-strong);
	background:var(--zh-hover);
	color:var(--zh-text);
}
.nwa-zh__strat.is-active{
	border-color:var(--zh-orange);
	color:var(--zh-orange-text);
	background:var(--zh-neutral-soft);
}
.nwa-zh__strat-pic{
	width:100%;
	height:44px;
	display:block;
}
.nwa-zh__strat-name{font-weight:600}

/* ── Предпросмотр ──────────────────────────────────────────────── */
.nwa-zh__preview{
	padding:18px;
	display:flex;
	flex-direction:column;
	gap:14px;
	min-width:0;
}
.nwa-zh__canvas-wrap{
	position:relative;
	border:1px solid var(--zh-border);
	border-radius:10px;
	background:var(--zh-stage);
	overflow:hidden;
}
.nwa-zh__canvas{
	display:block;
	width:100%;
	height:auto;
}
/* Плашка статуса лежит поверх тёмной сцены, поэтому всегда залита цветом
   и белым текстом — так она читается сразу, а не сливается с фоном.
   Базовый вид синий: это нейтральные сообщения («нажмите Рассчитать»,
   «сервер считает», «проигрывание»). Состояния ниже меняют только цвет. */
.nwa-zh__status{
	position:absolute;
	left:12px;
	bottom:12px;
	padding:5px 10px;
	border:1px solid var(--zh-blue);
	border-radius:999px;
	background:var(--zh-blue);
	font-size:12px;
	font-weight:600;
	color:#FFFFFF;
	pointer-events:none;
}
/* «Параметры изменены» и «расчёт готов» намеренно того же синего цвета,
   что и нейтральные сообщения: плашка меняет только текст. Состояния в
   разметке при этом сохранены — вернуть им свой цвет можно правкой этого
   правила, ничего не трогая в скрипте. */
.nwa-zh__status--warn,
.nwa-zh__status--ok{
	border-color:var(--zh-blue);
	background:var(--zh-blue);
}
/* Красный оставлен: ошибка — единственное, что должно бросаться в глаза. */
.nwa-zh__status--bad{
	border-color:var(--zh-danger);
	background:var(--zh-danger);
}
.nwa-zh__metrics{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:12px;
	align-items:stretch;
}
.nwa-zh__actions{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.nwa-zh__act{flex:1 1 200px}
/* Скорость проигрывания — рядом с кнопками, но не растягивается вместе
   с ними: это узкий переключатель, а не действие. */
.nwa-zh__speed{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	gap:8px;
	margin:0;
	font-weight:400;
}
.nwa-zh__speed-label{
	font-size:13px;
	color:var(--zh-dim);
	white-space:nowrap;
}
.nwa-zh__speed-select{
	width:auto;
	min-width:86px;
	height:44px;
	/* Стрелка списка позиционируется от верха, а высота здесь больше
	   обычного поля — иначе она уезжает под верхний край. */
	background-position:calc(100% - 14px) 20px, calc(100% - 9px) 20px;
}
.nwa-zh__metric{
	padding:10px 14px;
	border:1px solid var(--zh-border);
	border-radius:10px;
	background:var(--zh-panel);
	min-width:0;
}
.nwa-zh__metric-label{
	display:block;
	font-size:12px;
	color:var(--zh-dim);
}
.nwa-zh__metric-value{
	display:block;
	margin-top:3px;
	font-size:20px;
	font-weight:700;
	color:var(--zh-text);
	line-height:1.15;
}
.nwa-zh__note{
	margin:0;
	font-size:12px;
	color:var(--zh-dim);
	line-height:1.5;
}
/* Подпись разработчика — подвал всего блока, как у «Контура» (.nwa-rc__sign):
   линия во всю ширину, текст по центру, 12px обычного веса приглушённым
   цветом. */
.nwa-zh__sign{
	margin:0;
	padding:12px 14px;
	border-top:1px solid var(--zh-border);
	background:var(--zh-head);
	text-align:center;
	font-size:12px;
	color:var(--zh-dim);
	line-height:1.5;
}

/* ── Кнопки ────────────────────────────────────────────────────── */
.nwa-zh__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:44px;
	padding:0 22px;
	border:1px solid var(--zh-border);
	border-radius:8px;
	background:var(--zh-input);
	color:var(--zh-text) !important;
	font-family:inherit;
	font-size:14px;
	font-weight:600;
	text-decoration:none !important;
	cursor:pointer;
	transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.nwa-zh__btn:hover{
	border-color:var(--zh-border-strong);
	background:var(--zh-hover);
}
.nwa-zh__btn--primary{
	border-color:var(--zh-orange);
	background:var(--zh-orange);
	color:#FFFFFF !important;
}
.nwa-zh__btn--primary:hover{
	background:var(--zh-orange-hover);
	border-color:var(--zh-orange-hover);
	color:#FFFFFF !important;
}
.nwa-zh__btn[disabled]{
	opacity:.55;
	cursor:not-allowed;
}
.nwa-zh__generate{
	white-space:nowrap;
	text-transform:uppercase;
	letter-spacing:.03em;
}

/* ── Адаптив ───────────────────────────────────────────────────── */
@media (max-width:991px){
	.nwa-zh__layout{grid-template-columns:1fr}
	.nwa-zh__panel{
		border-right:0;
		border-bottom:1px solid var(--zh-border);
	}
}
@media (max-width:575px){
	.nwa-zh__head{
		flex-direction:column;
		align-items:flex-start;
		gap:10px;
	}
	.nwa-zh__row{grid-template-columns:1fr 104px;gap:8px}
	.nwa-zh__metrics{grid-template-columns:1fr 1fr}
	.nwa-zh__generate{grid-column:1 / -1}
}

/* ── Страница в обвязке магазина ────────────────────────────────
   Блок инструмента лежит в #content обычной страницы, между панелью
   nwa_topbar.twig и подвалом магазина — так же, как содержимое «Услуг».
   Здесь только отступы вокруг: всё оформление самого блока выше по файлу.

   Правила намеренно привязаны к body.nwa-page. Класс ставит uni_new_data.php
   по маршруту tool/nwa_zhertva, и по нему же header.twig подключает панель:
   нет класса — нет ни панели, ни этих отступов, и это видно сразу. */
body.nwa-page .nwa-zh-page{
	padding-top:26px;
	padding-bottom:34px;
}
/* Нижний отступ у блока был рассчитан на соседей внутри .nwa-zh-main прежней
   страницы. Здесь под ним сразу подвал, и разрыв задаёт контейнер выше. */
body.nwa-page .nwa-zh-page .nwa-zh{
	margin-bottom:0;
}
/* Контейнер темы шире стандартного бутстраповского — 1300px против 1170.
   Инструмент рисовался под 1560, но растягивать страницу шире сайта нельзя:
   она перестанет совпадать с «Услугами», ради чего всё и делалось. */
@media (max-width:767px){
	body.nwa-page .nwa-zh-page{
		padding-top:16px;
		padding-bottom:24px;
	}
}

/* ── Только после входа (25.09.2026) ─────────────────────────────
   Гостю вместо формы — приглашение войти; вид — как у «Фасадов»
   (.nwa-fc__guest в nwa-facade.css). */
.nwa-zh__guest{
	margin:6px 0 4px;
	padding:32px 24px;
	border:1px solid var(--zh-border);
	border-radius:12px;
	background:var(--zh-panel);
	text-align:center;
}
.nwa-zh__guest-lead{
	margin:0 0 8px;
	font-size:17px;
	font-weight:700;
	color:var(--zh-text);
}
.nwa-zh__guest-text{
	margin:0 0 20px;
	font-size:14px;
	line-height:1.5;
	color:var(--zh-dim);
}
.nwa-zh__guest-actions{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px;
}
.nwa-zh__guest-actions .nwa-zh__btn{min-width:170px}
/* ── Цена файла под кнопками (25.09.2026) ─────────────────────────
   Скачивание: 3 бесплатных в день, дальше баллы (download_quota.php).
   Подсказку под кнопками пишет скрипт (downloadNote): что будет при
   скачивании и что случилось после. Число — жирным, «Пополнить баллы» —
   ссылкой: кнопки в ряду не удлиняются, раскладка на телефоне та же. */
.nwa-zh__note strong{
	color:var(--zh-text);
	font-weight:600;
	white-space:nowrap;
}
.nwa-zh__note a{
	color:var(--zh-orange-text);
	font-weight:600;
	text-decoration:underline;
}
.nwa-zh__note.is-short strong{color:var(--zh-orange-text)}
/* ── Всплывашка над «Скачать .nc» (25.09.2026) ─────────────────────
   «Скачать за N баллов» / «Пополнить баллы» + «Отмена» — только кнопки,
   без текста (владелец). Её ставит скрипт (showDialog) в ряд кнопок и
   сам считает отступы от кнопки «Скачать .nc»; ряду нужен relative. */
.nwa-zh__dlg-host{position:relative}
.nwa-zh__dlg{
	position:absolute;
	z-index:50;
	display:none;
	gap:8px;
	padding:10px;
	border:1px solid var(--zh-border);
	border-radius:12px;
	background:var(--zh-panel);
	box-shadow:0 12px 32px rgba(0,0,0,.28);
	white-space:nowrap;
}
.nwa-zh__dlg.is-open{display:flex}
.nwa-zh__dlg::after{
	content:'';
	position:absolute;
	right:var(--dlg-arrow, 24px);
	bottom:-7px;
	width:12px;
	height:12px;
	background:var(--zh-panel);
	border-right:1px solid var(--zh-border);
	border-bottom:1px solid var(--zh-border);
	transform:rotate(45deg);
}