/* Проверка IP и утечек VANYA: /ip и /en/ip (ПРОВЕРКА IP VANYA, 10.10.2026). Разметка — front-views/vanya/ipcheck.ejs, поведение —
   js/ipcheck.js. Каркас — page-top / page-bottom: шрифт, токены, кнопки (.btn-quiet), колонка текста (.pg-col, .pg-sec), вопросы
   (.faq-list) — из lp2.css и page.css, здесь только то, чего у них нет. Все правила — под .pg-ipcheck (класс <main>), классы — ipc-,
   без подстроки «vpn» (vpsifyHtml). Светлая тема, как у всего lp2.
   Цвета состояний — только этой страницы (решение владельца D9: отдельный «успешный» токен на странице, без тёмной темы). Правило дома
   «один красный» (landings/README.md, «Визуал»): красный — только у утечки, то есть у того, что посетителю правда нужно исправить;
   «VPN не обнаружен» и «проверить не удалось» — нейтральные серые, без запугивания. Состояние никогда не передаётся одним цветом:
   у каждого свой значок и текст. Контраст текста — не ниже 4,5:1 на своей подложке:
     --ipc-ok   #17703A на #EAF5ED — 5,5:1 (на белом 6,1:1); тот же тон, что зелёный «успех» на /help (#1A7F37), на ступень темнее —
                на светло-зелёной подложке #1A7F37 давал 4,54:1, на грани;
     --ipc-warn #8A5300 на #FFF4E0 — 5,8:1;
     --ipc-leak #C80E19 (красный ссылок lp2) на #FDEEEF — 5,3:1;
     --ipc-mute #6C6C70 (--text-2) на #F2F2F7 — 4,7:1.
   Кэшируется Cloudflare: ссылка с ?v=<хеш содержимого> (IPCHECK_ASSETS в front.js), после правки нужен рестарт front.js. */

.pg-ipcheck {
	--ipc-ok: #17703A;
	--ipc-ok-bg: #EAF5ED;
	--ipc-warn: #8A5300;
	--ipc-warn-bg: #FFF4E0;
	--ipc-leak: #C80E19;
	--ipc-leak-bg: #FDEEEF;
	--ipc-mute: #6C6C70;
	--ipc-mute-bg: #F2F2F7;
	--ipc-tile-hover: #E9E9EF;
	--ipc-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
/* hidden у блоков страницы сильнее их display (grid, flex) */
.pg-ipcheck [hidden] { display: none !important; }
/* Без JavaScript проверка не работает: инструмент скрыт, виден текст из <noscript> (класс js ставит lp2-head.ejs до отрисовки) */
html:not(.js) .pg-ipcheck .ipc-js { display: none !important; }
html.js .pg-ipcheck .ipc-nojs { display: none !important; }
.pg-ipcheck .ipc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- первый экран ---------- */
.pg-ipcheck .ipc-hero { padding-bottom: clamp(40px, 5vw, 64px); }
.pg-ipcheck .ipc-hero .lead { max-width: 36em; margin-bottom: 28px; }
.pg-ipcheck .ipc { max-width: 900px; }

/* ---------- итог проверки ---------- */
.pg-ipcheck .ipc-verdict {
	display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 20px; align-items: start;
	padding: 24px 28px 26px 24px; border-radius: var(--r-l); background: var(--ipc-mute-bg);
	transition: background-color .2s ease;
}
.pg-ipcheck .ipc-verdict[data-state="p1"] { background: var(--ipc-ok-bg); }
.pg-ipcheck .ipc-verdict[data-state="p2"] { background: var(--ipc-warn-bg); }
.pg-ipcheck .ipc-v-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #FFFFFF; color: var(--ipc-mute); }
.pg-ipcheck .ipc-v-ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pg-ipcheck .ipc-verdict[data-state="p1"] .ipc-v-ico { color: var(--ipc-ok); }
.pg-ipcheck .ipc-verdict[data-state="p2"] .ipc-v-ico { color: var(--ipc-warn); }
.pg-ipcheck .ipc-verdict[data-state="p0"] .ipc-v-ico svg.ipc-js { animation: ipc-spin 1s linear infinite; }
.pg-ipcheck .ipc-v-body { min-width: 0; }
.pg-ipcheck .ipc-v-title { margin: 8px 0 0; font-size: clamp(24px, 1rem + 1.1vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.pg-ipcheck .ipc-verdict[data-state="p1"] .ipc-v-title { color: var(--ipc-ok); }
.pg-ipcheck .ipc-verdict[data-state="p2"] .ipc-v-title { color: var(--ipc-warn); }
.pg-ipcheck .ipc-v-sub { margin-top: 8px; max-width: 40em; font-size: 17px; line-height: 1.5; color: var(--text-lead); }
.pg-ipcheck .ipc-v-meta { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 20px 0 0; }
.pg-ipcheck .ipc-v-meta > div { min-width: 0; }
.pg-ipcheck .ipc-v-meta dt { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.pg-ipcheck .ipc-v-meta dd { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.pg-ipcheck .ipc-v-note { margin-top: 14px; max-width: 42em; font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.pg-ipcheck .ipc-v-note a { font-weight: 500; }
/* «Открыть проверку на <основной адрес>» — нейтральный итог на зеркале (js/ipcheck.js, mirrorReach; 10.10.2026, по итогам ревью SEC-1).
   Заметная, но не красная: красный на странице — только утечка. Адрес длинный: текст переносится, на телефоне кнопка во всю ширину */
.pg-ipcheck .ipc-v-go { margin-top: 18px; }
.pg-ipcheck .ipc-v-go .btn-quiet { background: #FFFFFF; white-space: normal; text-align: center; }
.pg-ipcheck .ipc-v-go .btn-quiet:hover { background: var(--ipc-tile-hover); }
/* «Если приложение показывает “Подключено”…» и мягкий призыв — под чертой, внутри той же карточки */
.pg-ipcheck .ipc-why, .pg-ipcheck .ipc-cta { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-bg); }
.pg-ipcheck .ipc-why h3 { font-size: 18px; line-height: 1.3; }
.pg-ipcheck .ipc-why .pg-list { margin-top: 10px; }
.pg-ipcheck .ipc-why .pg-list > li { font-size: 16px; line-height: 1.55; max-width: 40em; }
.pg-ipcheck .ipc-why .pg-list > li + li { margin-top: 8px; }
.pg-ipcheck .ipc-why li.is-likely { color: var(--text); font-weight: 500; }
.pg-ipcheck .ipc-why li .ipc-tag { margin-left: 8px; }
.pg-ipcheck .ipc-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.pg-ipcheck .ipc-cta p { flex: 1 1 280px; max-width: 34em; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.pg-ipcheck .ipc-cta .btn-quiet { flex: none; background: #FFFFFF; }
.pg-ipcheck .ipc-cta .btn-quiet:hover { background: var(--ipc-tile-hover); }

/* ---------- адреса: моноширинный шрифт, перенос в любом месте (IPv6 длинный) ---------- */
.pg-ipcheck .ipc-ip { font-family: var(--ipc-mono); font-size: .92em; font-weight: 500; letter-spacing: 0; overflow-wrap: anywhere; }

/* ---------- плитки ---------- */
/* Кнопка-плитка и её панель идут парами. Уже 900 px — столбиком, панель сразу под своей плиткой. От 900 px — четыре плитки
   в ряд (grid-row: 1), открытая панель — строкой под ними во всю ширину (grid-row: 2); открыта всегда одна (js/ipcheck.js, setOpen). */
.pg-ipcheck .ipc-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.pg-ipcheck .ipc-tile {
	display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; grid-template-areas: "ico name chev" "ico st chev";
	align-items: center; column-gap: 12px; row-gap: 1px; width: 100%; min-height: 64px; margin: 0; padding: 12px 16px;
	border: 1.5px solid transparent; border-radius: 16px; background: var(--ipc-mute-bg); color: var(--text);
	font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.pg-ipcheck .ipc-tile:hover { background: var(--ipc-tile-hover); }
.pg-ipcheck .ipc-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pg-ipcheck .ipc-tile[aria-expanded="true"] { border-color: var(--text-3); }
.pg-ipcheck .ipc-tile-ico { grid-area: ico; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; color: var(--ipc-mute); }
.pg-ipcheck .ipc-tile-name { grid-area: name; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.pg-ipcheck .ipc-tile-st { grid-area: st; font-size: 14.5px; line-height: 1.35; color: var(--text-2); }
.pg-ipcheck .ipc-tile .ipc-chev { grid-area: chev; width: 16px; height: 16px; fill: none; stroke: var(--text-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.pg-ipcheck .ipc-tile[aria-expanded="true"] .ipc-chev { transform: rotate(180deg); }
.pg-ipcheck .ipc-tile[data-state="run"] .ipc-tile-ico { animation: ipc-spin 1s linear infinite; }
.pg-ipcheck .ipc-tile[data-state="ok"] .ipc-tile-ico, .pg-ipcheck .ipc-tile[data-state="ok"] .ipc-tile-st { color: var(--ipc-ok); }
.pg-ipcheck .ipc-tile[data-state="warn"] .ipc-tile-ico, .pg-ipcheck .ipc-tile[data-state="warn"] .ipc-tile-st { color: var(--ipc-warn); }
.pg-ipcheck .ipc-tile[data-state="leak"] .ipc-tile-ico, .pg-ipcheck .ipc-tile[data-state="leak"] .ipc-tile-st { color: var(--ipc-leak); }
.pg-ipcheck .ipc-tile[data-state="ok"] .ipc-tile-st, .pg-ipcheck .ipc-tile[data-state="warn"] .ipc-tile-st, .pg-ipcheck .ipc-tile[data-state="leak"] .ipc-tile-st { font-weight: 500; }

.pg-ipcheck .ipc-pane { padding: 18px 22px 22px; border-radius: 16px; background: var(--ipc-mute-bg); }
.pg-ipcheck .ipc-pane > * + * { margin-top: 14px; }
.pg-ipcheck .ipc-pane-data:empty { display: none; }
.pg-ipcheck .ipc-pane-text { max-width: 44em; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.pg-ipcheck .ipc-pane .ipc-kv .ipc-row:first-child { border-top: 0; padding-top: 0; }
.pg-ipcheck .ipc-pane .ipc-row { border-top-color: var(--line-bg); }
.pg-ipcheck .ipc-fix { padding: 16px 18px; border-radius: 12px; background: #FFFFFF; }
.pg-ipcheck .ipc-fix h3 { font-size: 16.5px; line-height: 1.3; margin-bottom: 6px; }
.pg-ipcheck .ipc-fix p { max-width: 44em; font-size: 15.5px; line-height: 1.6; }
.pg-ipcheck .ipc-fix p + p { margin-top: 8px; }
.pg-ipcheck .ipc-fix code, .pg-ipcheck .ipc-text code { overflow-wrap: anywhere; line-height: 1.6; }

@media (min-width: 900px) {
	.pg-ipcheck .ipc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pg-ipcheck .ipc-tile { grid-row: 1; }
	.pg-ipcheck .ipc-pane { grid-row: 2; grid-column: 1 / -1; }
}

/* метки у адресов и резолверов: «адрес нашего сервера», «не наш адрес», «вероятная утечка» */
.pg-ipcheck .ipc-tag { display: inline-block; padding: 1px 8px 2px; border-radius: 7px; background: #FFFFFF; font-family: var(--font, "Onest", system-ui, sans-serif); font-size: 12.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--text-2); white-space: nowrap; }
.pg-ipcheck .ipc-tag.is-ok { color: var(--ipc-ok); }
.pg-ipcheck .ipc-tag.is-warn { color: var(--ipc-warn); }
.pg-ipcheck .ipc-tag.is-leak { color: var(--ipc-leak); }
.pg-ipcheck .ipc-sec .ipc-tag { background: var(--ipc-mute-bg); }
.pg-ipcheck .ipc-addrs, .pg-ipcheck .ipc-res { list-style: none; margin: 0; padding: 0; }
.pg-ipcheck .ipc-addrs li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pg-ipcheck .ipc-addrs li + li { margin-top: 6px; }
/* Резолвер DNS — группа «страна, оператор, метка» и под ней адреса группы одной строкой (js/ipcheck.js, renderPane) */
.pg-ipcheck .ipc-res li { display: flex; flex-direction: column; gap: 3px; }
.pg-ipcheck .ipc-res li + li { margin-top: 12px; }
.pg-ipcheck .ipc-res-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.pg-ipcheck .ipc-res-ips { font-size: 13.5px; font-weight: 400; line-height: 1.55; color: var(--text-2); }
.pg-ipcheck .ipc-res-where { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.pg-ipcheck .ipc-flag { flex: none; width: 16px; height: 16px; }
.pg-ipcheck .ipc-res-org { color: var(--text-2); }

/* ---------- кнопки под плитками ---------- */
.pg-ipcheck .ipc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; }
.pg-ipcheck .ipc-actions .btn-quiet { gap: 8px; padding: 0 18px 0 14px; }
.pg-ipcheck .ipc-actions .btn-quiet svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pg-ipcheck .ipc-keep { margin-left: 4px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.pg-ipcheck .ipc-report-st { flex-basis: 100%; font-size: 14px; line-height: 1.4; color: var(--ipc-ok); }
.pg-ipcheck .ipc-report-st:empty { display: none; }
/* Отчёт на экране, когда копирование не сработало (js/ipcheck.js, showReportBox; 10.10.2026, ревью PAGE-9) */
.pg-ipcheck .ipc-report-box { flex-basis: 100%; width: 100%; min-height: 10em; padding: 10px 12px; border: 1px solid var(--text-3); border-radius: 12px;
	background: #FFFFFF; color: var(--text); font-family: var(--ipc-mono); font-size: 13.5px; line-height: 1.5; resize: vertical; }

/* ---------- «Что видят сайты»: разделы с таблицами ключ → значение ---------- */
.pg-ipcheck .ipc-more h2 { margin-bottom: 20px; }
.pg-ipcheck .ipc-sec { max-width: 900px; border-radius: var(--r-l); background: var(--surface); }
/* «~», а не «+»: между «Браузер и система» и отпечатком стоит <script> сворачивания на телефоне (ревью TXT-16), и «+» терял отступ */
.pg-ipcheck .ipc-sec ~ .ipc-sec { margin-top: 12px; }
.pg-ipcheck .ipc-sec > summary { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 24px; list-style: none; cursor: pointer; border-radius: var(--r-l); }
.pg-ipcheck .ipc-sec > summary::-webkit-details-marker { display: none; }
.pg-ipcheck .ipc-sec > summary h3 { flex: 1 1 auto; min-width: 0; font-size: 19px; line-height: 1.3; }
.pg-ipcheck .ipc-sec > summary .ipc-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--text-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.pg-ipcheck .ipc-sec[open] > summary .ipc-chev { transform: rotate(180deg); }
.pg-ipcheck .ipc-sec > summary:hover h3 { color: var(--link); }
.pg-ipcheck .ipc-sec-body { padding: 0 24px 22px; }
.pg-ipcheck .ipc-sec-lead { margin-bottom: 14px; max-width: 44em; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.pg-ipcheck .ipc-sub { margin: 26px 0 4px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.pg-ipcheck .ipc-kv { margin: 0; }
.pg-ipcheck .ipc-row { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 2px 24px; padding: 10px 0 11px; border-top: 1px solid var(--line); }
.pg-ipcheck .ipc-row dt { font-size: 15px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.pg-ipcheck .ipc-row dd { display: flex; align-items: flex-start; gap: 8px; min-width: 0; margin: 0; }
.pg-ipcheck .ipc-val { flex: 1 1 auto; min-width: 0; font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pg-ipcheck .ipc-val.is-mono { font-family: var(--ipc-mono); font-size: 14px; line-height: 1.55; }
/* «Нет данных», «Не найден» — это результат, его должно быть видно: --text-2 (4,7:1 на #F2F2F7, 5,2:1 на белом), а не --text-3
   (2,0:1). От значений (--text) по-прежнему отличается цветом (10.10.2026, ревью PAGE-8) */
.pg-ipcheck .ipc-val.is-empty { color: var(--text-2); }
.pg-ipcheck .ipc-kv-note { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
/* Кнопка «Скопировать» у значения: 32 px поле нажатия, значок 18 px */
.pg-ipcheck .ipc-copy {
	flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -5px -6px -6px 0; padding: 0;
	border: 0; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.pg-ipcheck .ipc-copy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pg-ipcheck .ipc-copy:hover { background: var(--hover); color: var(--text); }
.pg-ipcheck .ipc-copy.is-done { color: var(--ipc-ok); }
.pg-ipcheck .ipc-v-meta .ipc-copy { margin: -4px 0 -4px -2px; }
.pg-ipcheck .ipc-canvas-box { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pg-ipcheck .ipc-canvas { display: block; width: 240px; max-width: 100%; height: auto; border-radius: 8px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line-bg); }
.pg-ipcheck .ipc-hash { font-family: var(--ipc-mono); font-size: 14px; overflow-wrap: anywhere; }
.pg-ipcheck .ipc-fonts { display: flex; flex-direction: column; gap: 4px; }
.pg-ipcheck .ipc-fonts-list { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.pg-ipcheck .ipc-geo-go { margin: 0 0 6px; }
.pg-ipcheck .ipc-geo-st { margin-top: 8px; font-size: 15px; color: var(--text-2); }
.pg-ipcheck .ipc-geo-st:empty { display: none; }

/* ---------- текст под инструментом ---------- */
.pg-ipcheck .ipc-text .pg-sec .pg-list > li + li { margin-top: 10px; }
/* Раздел «Что видят сайты» скрыт (без JS, бот, распознанный скриптом), но в DOM остаётся соседом: правило lp2.css
   .section + .section снимало бы у текста верхний отступ, и он прилипал к первому экрану */
html:not(.js) .pg-ipcheck .ipc-more + .ipc-text, .pg-ipcheck .ipc-more[hidden] + .ipc-text { padding-top: clamp(56px, 6vw, 88px); }

/* ---------- загрузка ---------- */
@keyframes ipc-spin { to { transform: rotate(360deg); } }
/* без анимации — неподвижное кольцо с разрывом: «идёт проверка» читается и так (lp2.css и сам гасит анимации) */
@media (prefers-reduced-motion: reduce) {
	.pg-ipcheck .ipc-verdict[data-state="p0"] .ipc-v-ico svg.ipc-js, .pg-ipcheck .ipc-tile[data-state="run"] .ipc-tile-ico { animation: none; }
}

/* ---------- телефон ---------- */
@media (max-width: 767px) {
	html:not(.js) .pg-ipcheck .ipc-more + .ipc-text, .pg-ipcheck .ipc-more[hidden] + .ipc-text { padding-top: 32px; }
	.pg-ipcheck .ipc-hero .lead { margin-bottom: 20px; }
	.pg-ipcheck .ipc-verdict { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 20px; }
	.pg-ipcheck .ipc-v-ico { width: 44px; height: 44px; }
	.pg-ipcheck .ipc-v-ico svg { width: 24px; height: 24px; }
	.pg-ipcheck .ipc-v-title { margin-top: 12px; font-size: 24px; }
	.pg-ipcheck .ipc-v-sub { font-size: 16px; }
	.pg-ipcheck .ipc-v-meta { gap: 12px 28px; margin-top: 16px; }
	.pg-ipcheck .ipc-v-meta dd { font-size: 17px; }
	.pg-ipcheck .ipc-why .pg-list > li { font-size: 15px; }
	.pg-ipcheck .ipc-cta .btn-quiet { order: 0; width: 100%; }
	.pg-ipcheck .ipc-v-go .btn-quiet { width: 100%; }
	.pg-ipcheck .ipc-pane { padding: 16px 16px 18px; }
	.pg-ipcheck .ipc-fix { padding: 14px 14px; }
	/* order: 0 — lp2.css на телефоне ставит .btn-quiet order: 1 (строка пробного), здесь кнопки идут до подписи */
	.pg-ipcheck .ipc-actions .btn-quiet { order: 0; flex: 1 1 auto; min-height: 44px; }
	.pg-ipcheck .ipc-keep { flex-basis: 100%; margin-left: 0; text-align: center; }
	.pg-ipcheck .ipc-sec > summary { padding: 16px 18px; }
	.pg-ipcheck .ipc-sec > summary h3 { font-size: 17px; }
	.pg-ipcheck .ipc-sec-body { padding: 0 18px 18px; }
	.pg-ipcheck .ipc-sec-lead { font-size: 15px; }
}
@media (max-width: 599px) {
	.pg-ipcheck .ipc-row { grid-template-columns: minmax(0, 1fr); padding: 9px 0 10px; }
	.pg-ipcheck .ipc-row dt { font-size: 13.5px; }
	.pg-ipcheck .ipc-val { font-size: 15px; }
	.pg-ipcheck .ipc-val.is-mono { font-size: 13.5px; }
}