/*
Theme Name: DeepSeek Ru
Description: Тема сайта deepseekai.help. Язык дизайна снят с deepseek.com: светлый холст, контейнер с двумя порогами ширины, закреплённая шапка-пилюля, белые непрозрачные карточки с мягкой тенью и живой WebGL-фон за содержимым.
Version: 1.4.3
Text Domain: dsk-theme
*/

/* ═══════════════════════════════════════════════════════════
   1. ТОКЕНЫ
   Значения не подобраны на глаз — сняты кодом с живых страниц
   deepseek.com 17.08.2026 (собственные CSS-переменные --ds-*).
   ═══════════════════════════════════════════════════════════ */
:root {
	--brand:        #4d6bfe;
	--brand-deep:   #3a65c2;
	--brand-mid:    #4176e6;
	--brand-400:    #679efe;
	--brand-300:    #b7c8fe;
	--brand-50:     #edf3fe;

	--page:         #f9f8f8;
	--ink:          #1a1615;
	--text:         #1e232c;
	--text-head:    #152443;
	--text-2:       rgba(0, 0, 0, .7);
	--text-3:       rgba(0, 0, 0, .65);
	--paper:        #ffffff;

	/* Синие поверхности взамен чёрных (правка владельца 19.08.2026).
	   Ключ тот же, что у .ctaband, но диапазон градиента сдвинут в тень.
	   Причина ровно арифметическая: на светлом конце ctaband (#4d6bfe)
	   белый текст даёт 4.33:1 — ниже порога AA 4.5:1 для обычного текста,
	   а приглушённая подпись rgba(255,255,255,.72) — вообще 3.02:1.
	   Поэтому светлый край карточек не светлее #3558c9: белый на нём
	   6.19:1, подпись rgba(255,255,255,.88) — 5.21:1. Значения посчитаны
	   по WCAG и сняты пипеткой с отрисованных пикселей, а не на глаз. */
	--blue-1:       #3558c9;
	--blue-2:       #2c4fb8;
	--blue-3:       #24408f;
	--blue-surface:    linear-gradient(146deg, var(--blue-1) 0%, var(--blue-2) 62%, var(--blue-3) 100%);
	--blue-surface-on: linear-gradient(146deg, #3a5fd4 0%, #3156c6 62%, #294a9e 100%);
	--blue-chip:    rgba(13, 26, 66, .30);
	--on-blue-2:    rgba(255, 255, 255, .88);
	--on-blue-link: #e6ecff;

	--glass:        hsla(0, 0%, 100%, .30);
	--glass-raised: hsla(0, 0%, 100%, .45);
	--glass-strong: hsla(0, 0%, 100%, .55);
	--line:         rgba(0, 0, 0, .06);
	--line-2:       rgba(0, 0, 0, .1);
	--line-3:       rgba(9, 45, 78, .18);

	/* Карточки: сплошной белый вместо стекла (правка владельца 18.08.2026).
	   Раньше глубину держали прозрачность и backdrop-filter; под непрозрачной
	   заливкой размытие ничего не даёт и только гоняет композитор, поэтому
	   оно снято, а глубину теперь держат рамка и мягкая тень.
	   Рамка на белом по холсту #f9f8f8 обязана быть заметнее прежней --line
	   (6 % чёрного): между #fff и #f9f8f8 разница около 2 %, без внятного
	   контура карточка на полотне вообще не читается.
	   Тень двухслойная: короткий контактный слой (1px) прижимает карточку
	   к полотну, длинный размытый с отрицательным spread даёт объём, не
	   пачкая полотно серым. Оттенок взят от --text-head (#152443), чтобы
	   тень оставалась в холодной гамме темы, а не выглядела грязно-серой. */
	--surface:        #ffffff;
	--line-card:      rgba(21, 36, 67, .10);
	--line-card-on:   rgba(21, 36, 67, .20);
	--shadow-card:    0 1px 2px rgba(21, 36, 67, .05), 0 12px 28px -14px rgba(21, 36, 67, .20);
	--shadow-card-sm: 0 1px 2px rgba(21, 36, 67, .05), 0 6px 16px -10px rgba(21, 36, 67, .18);
	--shadow-card-on: 0 2px 4px rgba(21, 36, 67, .06), 0 18px 36px -16px rgba(21, 36, 67, .26);

	/* Радиусы офсайта. Пилюля используется агрессивно — шапка,
	   все кнопки, бейджи. */
	--r-sm:    8px;
	--r-media: 12px;
	--r-panel: 16px;
	--r-card:  24px;
	--r-pill:  100px;

	--f-head: 'Didact Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--f-text: 'Arimo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ═══════════════════════════════════════════════════════════
   2. КОНТЕЙНЕР — ДВА ПОРОГА
   Главная особенность офсайта: до 1560px контейнер упирается
   в 1140, и только с 1560 расширяется до 1280. Между 1280 и 1559
   ширина стоит, а растут поля. Замерено: при окне 1920 — ровно 1280.
   ═══════════════════════════════════════════════════════════ */
.shell {
	width: min(100% - 48px, 1140px);
	margin-inline: auto;
}
@media (min-width: 768px)  { .shell { width: min(100% - 144px, 1140px); } }
@media (min-width: 1560px) { .shell { width: min(100% - 160px, 1280px); } }

/* ═══════════════════════════════════════════════════════════
   3. БАЗА
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top — под закреплённую шапку: без него якорный переход
   (в т.ч. ссылка «Перейти к содержимому» на #main) ставит цель ровно под
   верх окна, где её накрывает пилюля. 80px = 8px отступ .nav + ~46px самой
   полосы + запас. Задаётся на скроллпорте, поэтому одной строкой закрывает
   все якоря сразу и не требует scroll-margin у каждой цели. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
	margin: 0;
	background: var(--page);
	color: var(--text);
	font-family: var(--f-text);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img, svg, canvas, video { max-width: 100%; }
img, video { height: auto; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }

/* Заголовки — светлым начертанием в крупном кегле: самая узнаваемая
   типографская черта офсайта (там H1 идёт 50px весом 400 с интерлиньяжем
   155%). Didact Gothic существует только в весе 400, что здесь плюс. */
h1, h2, h3, h4 {
	font-family: var(--f-head);
	font-weight: 400;
	color: var(--text-head);
	line-height: 1.28;
	letter-spacing: -.01em;
	margin: 0 0 .5em;
	text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.125rem); line-height: 1.55; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.5rem); }

p { margin: 0 0 1.1em; color: var(--text-3); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; color: var(--text-3); }
li { margin-bottom: .5em; }
strong { font-weight: 700; color: var(--text); }
code, kbd { font-family: var(--f-mono); font-size: .92em; }

.lead { font-size: clamp(1rem, .96rem + .3vw, 1.125rem); color: var(--text-2); max-width: 64ch; }
.ic { width: 20px; height: 20px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   4. ФОН — WEBGL-ШЕЙДЕР
   Холст лежит под всем содержимым и рисует медленно перетекающие
   пятна. Непрозрачный: контент кладётся отдельным слоем выше.
   ═══════════════════════════════════════════════════════════ */
.bg-canvas {
	position: fixed;
	inset: 0;
	/* width/height обязательны: canvas — замещаемый элемент, и для него
	   inset: 0 не растягивает коробку, а оставляет собственный размер
	   300×150. Без этих строк шейдер рисуется пятном в левом верхнем
	   углу, а остальной экран остаётся пустым. */
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	display: block;
}
/* Запасной фон, если WebGL недоступен: те же цвета, статикой. */
.bg-fallback {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 50% at 22% 28%, rgba(103, 158, 254, .22), transparent 70%),
		radial-gradient(50% 45% at 78% 62%, rgba(77, 107, 254, .16), transparent 72%),
		var(--page);
}
/* Слой контента над фоном-холстом. ШАПКУ И SKIP-ССЫЛКУ ИЗ ЭТОГО ПРАВИЛА
   ИСКЛЮЧАЕМ: его специфичность (элемент body плюс :not с классами) выше,
   чем у одиночных .nav и .skip, поэтому `position: relative; z-index: 1`
   отсюда молча перебивали их собственное позиционирование.
   Из-за этого было две поломки сразу:
   1) шапка уезжала вместе со страницей, хотя в блоке .nav стояло
      `position: fixed` — правило выглядело рабочим и искали не там;
   2) .skip вместо `position: absolute` становилась relative, оставалась
      в потоке строчным элементом и держала над шапкой пустую строку
      высотой 26px (сама ссылка при этом угнана за левый край на -9999px,
      поэтому полосу было не видно, а причину — не найти).
   Каждый новый прямой ребёнок body с собственным позиционированием
   придётся добавлять сюда же. */
body > *:not(.bg-canvas):not(.bg-fallback):not(.nav):not(.skip) { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════
   5. ШАПКА — ЗАКРЕПЛЁННАЯ ПИЛЮЛЯ ПО ШИРИНЕ КОНТЕЙНЕРА
   Наверху страницы прозрачна и не имеет границы: фон-шейдер
   просвечивает насквозь. Стеклянной становится по классу при
   прокрутке — ровно как на офсайте, переход .3s.

   position: sticky, а не fixed. Sticky оставляет шапку в потоке, поэтому
   вертикальные отступы первого экрана (.hero, .pagehead) остаются ровно
   такими, как были, — при fixed шапка выпала бы из потока и всё
   содержимое подскочило бы вверх на её высоту. У body стоит
   `overflow-x: clip`, а clip (в отличие от hidden) скролл-контейнера не
   создаёт, поэтому шапка липнет к окну, а не к невидимому родителю.
   ═══════════════════════════════════════════════════════════ */
.nav {
	position: sticky;
	top: 0;
	/* Выше содержимого: у всех остальных прямых детей body z-index 1.
	   Без этого белые карточки уезжали бы поверх закреплённой шапки. */
	z-index: 60;
	width: min(100% - 48px, 1140px);
	margin-inline: auto;
	padding: 8px 0 0;
}
@media (min-width: 768px)  { .nav { width: min(100% - 144px, 1140px); } }
@media (min-width: 1560px) { .nav { width: min(100% - 160px, 1280px); } }

.nav__bar {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 4px 6px 4px 16px;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	background: transparent;
	transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* Закреплённая шапка стоит поверх уезжающего вниз содержимого, поэтому
   прежних 45 % белого уже не хватало: сквозь полосу читались заголовки и
   рамки карточек. Подняли до 88 % и оставили blur — полоса не глухая,
   но подписи разделов читаются над любым блоком. */
.nav.is-scrolled .nav__bar {
	background: hsla(0, 0%, 100%, .88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-color: var(--line-2);
	box-shadow: 0 6px 20px -14px rgba(21, 36, 67, .45);
}
.nav__logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text-head); font-family: var(--f-head); font-size: 17px; white-space: nowrap; }
.nav__logo img { width: 24px; height: 24px; display: block; flex-shrink: 0; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.nav__link {
	padding: 6px 12px;
	border-radius: var(--r-pill);
	font-size: 14px;
	color: var(--text-2);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover { background: rgba(0, 0, 0, .04); color: var(--text); }
.nav__cta { margin-left: auto; }
.nav__burger { display: none; margin-left: auto; background: none; border: 0; padding: 8px; color: var(--text); cursor: pointer; }
.nav__burger svg { width: 22px; height: 22px; }

/* Выдвижная панель лежит внутри закреплённой шапки, то есть висит над
   уезжающим содержимым — полупрозрачной ей быть нельзя, ссылки под ней
   становятся нечитаемыми. Плюс ограничение по высоте: в панели 15 пунктов,
   на узком экране они не помещаются, а sticky-элемент выше окна ведёт себя
   как обычный блок и перестаёт липнуть. */
.drawer { display: none; margin-top: 8px; padding: 10px 14px 16px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line-card); box-shadow: var(--shadow-card); max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; }
.drawer.is-open { display: block; }
.drawer a { display: block; padding: 10px 0; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); font-size: 15px; }
.drawer a:last-of-type { border-bottom: 0; }
.drawer .btn { width: 100%; justify-content: center; margin-top: 12px; }

/* ═══════════════════════════════════════════════════════════
   6. КНОПКИ
   Была тёмная (#1a1615) — по офсайту. Правка владельца 19.08.2026:
   основная кнопка синяя, в том же ключе, что полоса .ctaband.
   От .btn--brand отличается весом: у primary градиент с глубиной,
   у brand — плоская фирменная заливка.
   Радиус пилюли.
   ═══════════════════════════════════════════════════════════ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	font-family: var(--f-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--blue-surface); color: var(--paper); }
.btn--primary:hover { background: var(--blue-surface-on); color: var(--paper); }
.btn--brand { background: var(--brand); color: var(--paper); }
.btn--brand:hover { background: var(--brand-deep); color: var(--paper); }
.btn--glass { background: var(--glass-raised); color: var(--text); border-color: var(--line-3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--glass:hover { background: var(--glass-strong); color: var(--text); }
.btn--sm { padding: 7px 14px; font-size: 14px; }
.btn:active { transform: translateY(1px); }

/* Цвет кнопок держим на селекторе с классом кнопки и в футере тоже:
   правило на контейнер (.foot a) перебивает цвет по специфичности,
   и текст сливается с заливкой. Эта грабля в сетке повторялась. */
.foot a.btn--primary, .nav a.btn--primary { color: var(--paper); }
.foot a.btn--brand, .nav a.btn--brand { color: var(--paper); }

/* ═══════════════════════════════════════════════════════════
   7. СЕКЦИИ И ПЕРВЫЙ ЭКРАН
   Шкала отступов офсайта нелинейная: 4 8 12 16 24 32 40 56 80 120 160.
   ═══════════════════════════════════════════════════════════ */
.band { padding-block: clamp(56px, 7vw, 120px); }
.band--tight { padding-block: clamp(36px, 4vw, 64px); }

/* overflow-x: clip обязателен. Кит-псевдоэлемент ниже растянут на -8vw в
   каждую сторону, и без обрезки он расширяет документ: на 1280 это давало
   ровно 30px горизонтальной прокрутки, на 940 — 3px, на 390 — 7px.
   В DOM этого не видно (псевдоэлементы не перечисляются), ловится только
   замером scrollWidth. Именно clip, а не hidden: hidden по оси X принудил
   бы overflow-y в auto и сломал бы липкую шапку. */
.hero { padding-block: clamp(120px, 14vw, 160px) clamp(48px, 6vw, 96px); position: relative; overflow-x: clip; overflow-y: visible; }

/* Кит на фоне первого экрана. Лежит псевдоэлементом, а не <img>: это декор,
   он не должен попадать в поток, в вывод для скринридера и в подсчёт высоты.
   Тянется шире контейнера (inset по бокам отрицательный), чтобы читался
   как фон первого экрана, а не как картинка внутри колонки.
   Прозрачность .5 проверена замером отрисованных пикселей: тёмный текст
   поверх кита держит 5.75:1 при норме 3:1 для крупного — запас есть даже
   там, где заголовок ложится прямо на тело рисунка.
   На узких экранах кит остаётся (требование владельца) — там он смещён
   вниз, под блок с кнопками, где текста уже нет. */
.hero::before {
	content: '';
    position: absolute;
    inset: 0 -3vw;
     background: url(images/whale.png) no-repeat right 20px center;
    background-size: min(100%, 1100px) auto;
    opacity: .3;
    pointer-events: none;
    z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
@media (max-width: 1190px) {
	
	.hero::before {
		content: '';
    position: absolute;
    inset: 0 -3vw;
		 background: url(images/whale.png) no-repeat right 1px center;
		 background-size: min(100%, 1100px) auto;
    opacity: .3;
    pointer-events: none;
    z-index: 0;
	}
}
@media (max-width: 860px) {
	.hero::before {
		background-position: center;
        background-size: min(100%, 700px) auto;
        opacity: .5;
	}
}
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 32px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.pagehead { padding-block: clamp(96px, 11vw, 140px) clamp(20px, 3vw, 36px); }
.pagehead h1 { margin-bottom: 14px; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px;
	margin-bottom: 20px;
	border-radius: var(--r-pill);
	background: var(--glass-raised);
	border: 1px solid var(--line);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 12.5px;
	color: var(--text-2);
}
.eyebrow svg { width: 15px; height: 15px; color: var(--brand); }

/* ═══════════════════════════════════════════════════════════
   8. БЕЛЫЕ НЕПРОЗРАЧНЫЕ КАРТОЧКИ
   Было: полупрозрачная заливка плюс backdrop-filter, глубина держалась
   на просвечивающем фоне-шейдере. Стало (правка владельца 18.08.2026):
   сплошной белый, размытие снято, глубину держат рамка --line-card и
   двухслойная тень --shadow-card. Токены и обоснование значений — в
   блоке 1.
   ═══════════════════════════════════════════════════════════ */
.card {
	background: var(--surface);
	border: 1px solid var(--line-card);
	border-radius: var(--r-card);
	padding: clamp(20px, 2.4vw, 28px);
	box-shadow: var(--shadow-card);
	min-width: 0;
}
.card h3 { margin-bottom: 10px; }
.card p { margin-bottom: 0; font-size: 15px; }
.card__icon { color: var(--brand); margin-bottom: 14px; }
.card__icon svg { width: 26px; height: 26px; }

/* Акцентная карточка — контраст на светлом холсте (референс 3).
   Была чёрная (--ink), стала синяя (правка владельца 19.08.2026).
   Вложенные элементы пересобраны под новый фон: --brand-400 (#679efe)
   на синем давал 2.33:1 и пропадал, --brand-300 даёт 3.75:1 — порог
   для нетекстовой графики. Подпись поднята с .72 (4.04:1 — провал)
   до .88 (5.21:1). Ссылка получила подчёркивание: на синем она уже
   не отличается от текста одним лишь оттенком. */
.card--dark { background: linear-gradient(158deg, var(--brand) 0%, var(--brand-deep) 58%, #2c4fb8 100%); border-color: transparent; color: var(--paper); }
.card--dark h3 { color: var(--paper); }
.card--dark p { color: var(--on-blue-2); }
.card--dark .card__icon { color: var(--brand-300); }
.card--dark a { color: var(--on-blue-link); text-decoration: underline; text-underline-offset: 2px; }
.card--dark a:hover { color: var(--paper); }

/* Списки внутри цветных плашек. Базовое правило «ul, ol { color: var(--text-3) }»
   бьёт по самому списку, а не наследуется, поэтому цвет плашки до пунктов не
   доходил: на /chat/ пункты .ticks были чёрными по чёрному, 1.11:1 — текст
   физически не читался. Возвращаем наследование. */
.card--dark ul, .card--dark ol,
.split__col--alt ul, .split__col--alt ol { color: inherit; }

/* Иллюстрация в потоке страницы. Обёртка обязательна: без неё картинка
   1024px шириной распирает текстовую колонку, а на телефоне даёт
   горизонтальное переполнение. Соотношение сторон держится через
   aspect-ratio, поэтому блок не прыгает, пока файл грузится. */
.art {
	margin: 28px 0;
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--blue-3, #24408f);
}
.art img {
	display: block;
	width: 100%;
	height: auto;
}
/* Пропорции НЕ навязываем: у картинок они разные (16:9, 1.37:1, 1:1),
   и общая рамка срезала бы объект. Прыжок при загрузке предотвращают
   атрибуты width/height у самой <img>, а не aspect-ratio здесь. */
.art--square { max-width: 520px; margin-inline: auto; }

/* Иллюстрация сбоку от текста. Колонки выравниваются по верху: иначе
   картинка растягивается вслед за длиной абзацев и теряет пропорции.
   Ниже 861px раскладка схлопывается в одну колонку — двухколоночный
   текст на телефоне нечитаем. */
.art-side {
	display: grid;
	gap: clamp(20px, 3vw, 36px);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}
@media (min-width: 861px) {
	.art-side { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.art-side .art { margin: 0; max-width: none; }
.art-side > div > p:last-child { margin-bottom: 0; }

/* Вариант, где иллюстрация — не главная, а спутник содержимого справа:
   колонка под неё уже, чем под текст. Порядок в разметке обратный
   (сначала картинка), поэтому и пропорции зеркальные. */
@media (min-width: 861px) {
	.art-side--media { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

/* Пара карточек рядом с иллюстрацией. Обычный .split на ширине в
   половину контейнера разложился бы в две колонки по ~250px и порвал
   заголовки, поэтому здесь они всегда идут столбиком. */
.stack { display: grid; gap: 16px; }
.stack .split__col { margin: 0; }

/* Уменьшенная иллюстрация — для случаев, когда картинка иллюстрирует
   мысль, а не несёт блок. */
.art--sm { max-width: 360px; }

/* Карточка на фотофоне (правка владельца 19.08.2026, «Веб-чат»).
   Поверх снимка лежит тёмно-синяя вуаль, и она обязательна: у самой
   текстуры средняя яркость даёт с белым 8.44:1, но на светлых разводах
   бархата (#8196ff) — всего 2.71:1, то есть белый текст местами
   проваливается даже по порогу для крупного. Вуаль 45% поднимает худший
   участок до 6.30:1, фактура при этом остаётся видна.
   Списки и код внутри — как у .card--dark, по той же причине: базовые
   правила ul/code не наследуют цвет плашки. */
.card--photo {
	background: linear-gradient(146deg, var(--blue-1) 0%, var(--blue-2) 62%, var(--blue-3) 100%);
	background-size: cover;
	background-position: center;
	border-color: transparent;
	color: #fff;
}
.card--photo h3,
.card--photo p,
.card--photo a,
.card--photo .card__icon { color: #fff; }
.card--photo ul, .card--photo ol { color: inherit; }
.card--photo a { text-decoration: underline; text-underline-offset: 2px; }
.card--photo a:hover { color: var(--brand-300); }

/* Ховер: карточка поднимается на 4px, тень под ней растёт — иначе подъём
   непрозрачной плашки читается как рывок без причины. */
.card--lift { transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-on); }

.grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) {
	.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Асимметричная сетка (референс 3): крупный блок и два мелких рядом. */
@media (min-width: 981px) {
	.grid--asym { grid-template-columns: 1.55fr 1fr; grid-auto-rows: minmax(0, auto); }
	.grid--asym > .span-2 { grid-row: span 2; }
	/* Правая асимметрия ставит рядом блоки разной длины (оценка по
	   критериям и короткая тёмная врезка). Без align-items: start
	   короткая карточка растягивается на высоту длинной и половина
	   её площади остаётся пустой. */
	.grid--asym-r { grid-template-columns: 1fr 1.55fr; align-items: start; }
}

/* ═══════════════════════════════════════════════════════════
   9. РАЗДВИГАЮЩИЕСЯ ПАНЕЛИ (референс 1)
   При наведении панель расширяется, соседние сжимаются, внутри
   проявляется текст. Всё на flex-grow и переходах — без JS-расчёта
   высот, поэтому не ломается при смене длины текста.
   ═══════════════════════════════════════════════════════════ */
.reel { display: flex; gap: 14px; }
.reel__item {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	overflow: hidden;
	border-radius: var(--r-card);
	border: 1px solid var(--line-card);
	background: var(--surface);
	box-shadow: var(--shadow-card-sm);
	padding: clamp(20px, 2.2vw, 26px);
	cursor: default;
	transition: flex-grow .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.reel__item h3 { margin-bottom: 0; }
.reel__num { font-family: var(--f-mono); font-size: 12.5px; color: var(--brand); display: block; margin-bottom: 10px; }
.reel__text {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin-top: 0;
	transition: max-height .45s var(--ease), opacity .35s var(--ease), margin-top .45s var(--ease);
}
.reel__item:hover,
.reel__item:focus-within,
.reel__item.is-open {
	/* Заливка теперь белая у всех панелей, поэтому раскрытую выделяем не
	   плотностью стекла, а рамкой и тенью. */
	flex-grow: 2.6;
	border-color: var(--line-card-on);
	box-shadow: var(--shadow-card-on);
}
.reel__item:hover .reel__text,
.reel__item:focus-within .reel__text,
.reel__item.is-open .reel__text { max-height: 260px; opacity: 1; margin-top: 12px; }

@media (max-width: 900px) {
	/* На узком экране раздвижение бессмысленно: панели встают колонкой
	   с раскрытым текстом, иначе содержимое недоступно с тача. */
	.reel { flex-direction: column; }
	.reel__item { flex: 1 1 auto; }
	.reel__text { max-height: none; opacity: 1; margin-top: 12px; overflow: visible; }
}

/* ═══════════════════════════════════════════════════════════
   10. ТАБЛИЦЫ, ЦЕНЫ, ЗВЁЗДЫ
   ═══════════════════════════════════════════════════════════ */
.tablewrap { overflow-x: auto; border: 1px solid var(--line-card); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--shadow-card-sm); }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 15px; }
th, td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-weight: 700; color: var(--text); white-space: nowrap; }
td { color: var(--text-3); }
tr:last-child td { border-bottom: 0; }
td strong { color: var(--text); }
.num { font-family: var(--f-mono); font-size: 14px; white-space: nowrap; color: var(--text); }

.star-rating { position: relative; display: inline-flex; line-height: 0; vertical-align: middle; }
.star-rating__bg, .star-rating__fg { display: flex; gap: 2px; }
.star-rating__bg { color: rgba(0, 0, 0, .18); }
/* НЕ писать `inset: 0`: он задаёт и left, и right, из-за чего инлайновая
   ширина заливки становится переопределённой. Тянуть только от левого края. */
.star-rating__fg { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; white-space: nowrap; color: #f59e0b; }
/* fill обязателен: контурная звезда без заливки читается как пустая. */
.star-rating svg { width: var(--star-size, 20px); height: var(--star-size, 20px); flex-shrink: 0; fill: currentColor; stroke: currentColor; }
.rate { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.rate__num { font-family: var(--f-mono); font-size: 26px; color: var(--text); }

/* ═══════════════════════════════════════════════════════════
   11. FAQ
   ═══════════════════════════════════════════════════════════ */
.faq { border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; background: none; border: 0; color: var(--text-head); font-family: var(--f-head); font-size: 17px; text-align: left; cursor: pointer; }
.faq__q svg { width: 20px; height: 20px; color: var(--text-2); transition: transform .25s var(--ease); flex-shrink: 0; }
.faq__item.is-open .faq__q svg { transform: rotate(90deg); color: var(--brand); }
.faq__a { display: none; padding-bottom: 18px; }
.faq__item.is-open .faq__a { display: block; }

/* ═══════════════════════════════════════════════════════════
   12. ПОДВАЛ — ДВЕ ПЛИТЫ (референс 2)
   Слева цветная градиентная плита с логотипом и слоганом,
   справа светлая с колонками навигации. Без декоративного значка.
   ═══════════════════════════════════════════════════════════ */
.foot { padding-block: clamp(40px, 5vw, 80px) 40px; }
.foot__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 981px) { .foot__grid { grid-template-columns: minmax(280px, .78fr) minmax(0, 1.6fr); } }

.foot__brand {
	border-radius: var(--r-card);
	padding: clamp(24px, 3vw, 34px);
	background: linear-gradient(158deg, var(--brand) 0%, var(--brand-deep) 58%, #2c4fb8 100%);
	color: var(--paper);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	min-height: 260px;
}
.foot__brand p { color: rgba(255, 255, 255, .82); font-size: 15px; }
.foot__logo { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; font-family: var(--f-head); font-size: 19px; }
/* Кит нарисован синим по прозрачному, а плита подвала — синий градиент
   (#4d6bfe → #2c4fb8). Контур кита #2b5cf6 от неё почти не отличается,
   поэтому знак кладём на белую подложку-скруглённый квадрат: это не
   заплатка, а тот же приём, каким иконка приложения показывается в
   магазинах. Размер знака внутри — прежние 26px, коробка 34px. */
.foot__logo img { width: 34px; height: 34px; padding: 4px; border-radius: 10px; background: var(--paper); display: block; flex-shrink: 0; }

.foot__cols {
	border-radius: var(--r-card);
	padding: clamp(24px, 3vw, 34px);
	background: var(--surface);
	border: 1px solid var(--line-card);
	box-shadow: var(--shadow-card-sm);
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
}
@media (min-width: 761px) { .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot h4 { font-family: var(--f-text); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--text); margin-bottom: 12px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 9px; }
.foot a:not(.btn) { color: var(--text-2); text-decoration: none; font-size: 15px; }
.foot a:not(.btn):hover { color: var(--brand); }
.foot__note { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.foot__note p { font-size: 13px; color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════
   13. ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   ═══════════════════════════════════════════════════════════ */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rise.is-in { opacity: 1; transform: none; }
.rise-d1 { transition-delay: .07s; }
.rise-d2 { transition-delay: .14s; }
.rise-d3 { transition-delay: .21s; }

/* ═══════════════════════════════════════════════════════════
   14. МОБИЛЬНАЯ АДАПТАЦИЯ
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.nav__links { display: none; }
	/* Реф-кнопка на мобильном НЕ прячется: она остаётся в полосе рядом
	   с бургером и только укорачивает подпись. Прятать её в выдвижную
	   панель нельзя — это прямой запрет playbook. */
	.nav__cta { margin-left: auto; padding: 8px 14px; font-size: 14px; }
	.nav__burger { display: inline-flex; margin-left: 0; }
	/* На мобильном полоса плотная всегда, а не только по скроллу: она
	   закреплена и постоянно висит над содержимым, при 45 % белого сквозь
	   неё читались заголовки. */
	.nav__bar { gap: 8px; padding-left: 12px; background: hsla(0, 0%, 100%, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--line-2); box-shadow: 0 6px 20px -14px rgba(21, 36, 67, .45); }
	/* Селектор с родителем нужен по специфичности: базовые .wide/.narrow
	   объявлены ниже по файлу, в блоке компонентов, и при равной
	   специфичности перебивали бы этот медиазапрос порядком следования —
	   кнопка оставалась бы с длинной подписью и ломалась в две строки. */
	.nav__cta .wide { display: none; }
	.nav__cta .narrow { display: inline; }
	.hero { padding-block: 92px 44px; }
}

@media (max-width: 374px) {
	/* На самых узких словесная часть логотипа уходит, чтобы в строку
	   помещались знак, кнопка и бургер. */
	.nav__name { display: none; }
	.nav__cta { padding: 8px 12px; }
}

@media (max-width: 520px) {
	.hero__ctas .btn { width: 100%; justify-content: center; }
	.hero__ctas .nav__cta { width: auto; }
	.foot__brand { min-height: 0; }
}

/* ═══════════════════════════════════════════════════════════
   15. КОМПОНЕНТЫ СТРАНИЦ
   ═══════════════════════════════════════════════════════════ */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--paper); border-radius: 0 0 var(--r-sm) 0; }
.skip:focus { left: 0; }

.wide { display: inline; }
.narrow { display: none; }

/* Крошки */
.dsk-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: var(--text-3); }
.dsk-breadcrumb__link { color: var(--text-2); text-decoration: none; }
.dsk-breadcrumb__link:hover { color: var(--brand); }
.dsk-breadcrumb__sep { color: rgba(0, 0, 0, .28); }
.dsk-breadcrumb__current { color: var(--text); }

/* Первый экран: текст слева, панель с ценами справа */
/* Панель с ценами из первого экрана убрана (правка владельца 19.08.2026),
   поэтому вторая колонка больше не нужна: текст идёт одной колонкой, а
   освободившееся место справа занимает кит. Ширину текста ограничиваем —
   иначе строка растянется на весь контейнер 1140px и станет нечитаемой. */
.hero__grid { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero__txt { max-width: min(100%, 620px); }
.hero__note { margin-top: 20px; font-size: 14px; color: var(--text-3); max-width: 52ch; }

.panel {
	border-radius: var(--r-card);
	border: 1px solid var(--line-card);
	background: var(--surface);
	box-shadow: var(--shadow-card);
	padding: clamp(18px, 2.2vw, 26px);
	min-width: 0;
}
.panel__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.panel__model { font-family: var(--f-mono); font-size: 14px; color: var(--text); }
.panel__unit { font-size: 12.5px; color: var(--text-3); }
.panel__cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 14px 0; }
.panel__cap { font-size: 11.5px; letter-spacing: .02em; color: var(--text-3); }
.panel__cap--peak { color: rgba(0, 0, 0, .45); }
.panel__k { font-size: 13.5px; color: var(--text-2); min-width: 0; }
.panel__v { font-size: 15px; color: var(--brand); }
.panel__v--peak { color: var(--text-3); }
.panel__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 0; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--text-2); }
.panel__facts b { color: var(--text-head); font-size: 15px; margin-right: 4px; }
.panel__foot { font-size: 12.5px; color: var(--text-3); margin: 0; }

/* Списки с галочками */
.ticks { list-style: none; padding: 0; margin: 0 0 4px; }
.ticks li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: 15px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.card--dark .ticks li::before,
.split__col--alt .ticks li::before { background: var(--brand-300); }

/* Две колонки-противопоставления */
.split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 22px 0; }
@media (min-width: 761px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split__col { border-radius: var(--r-panel); border: 1px solid var(--line-card); background: var(--surface); box-shadow: var(--shadow-card-sm); padding: clamp(18px, 2vw, 24px); min-width: 0; }
/* Была чёрная колонка (--ink), стала синяя — правка владельца 19.08.2026. */
.split__col--alt { background: var(--blue-surface); border-color: transparent; color: var(--paper); }
.split__col--alt h3 { color: var(--paper); }
.split__col--alt p { color: var(--on-blue-2); }
.split__col--alt a { color: var(--on-blue-link); text-decoration: underline; text-underline-offset: 2px; }
.split__col--alt a:hover { color: var(--paper); }
.split__col h3 { font-size: 17px; margin-bottom: 8px; }
.split__col p { margin: 0; font-size: 15px; }

/* Шаги */
.steps { display: grid; gap: 14px; margin: 22px 0; }
.step { display: flex; gap: 16px; align-items: flex-start; border-radius: var(--r-panel); border: 1px solid var(--line-card); background: var(--surface); box-shadow: var(--shadow-card-sm); padding: 18px 20px; min-width: 0; }
.step > div { min-width: 0; }
.step__n { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-50); color: var(--brand); font-family: var(--f-mono); font-size: 14px; }
.step h3 { font-size: 17px; margin-bottom: 6px; }
.step p { margin: 0; font-size: 15px; }

/* Предупреждение */
.warnbox { display: flex; gap: 16px; align-items: flex-start; border-radius: var(--r-panel); border: 1px solid var(--line-3); background: var(--brand-50); padding: 20px 22px; margin: 22px 0; min-width: 0; }
.warnbox > div { min-width: 0; }
.warnbox .ic { width: 24px; height: 24px; color: var(--brand); flex-shrink: 0; }
.warnbox h3 { font-size: 17px; margin-bottom: 8px; }
.warnbox p:last-child, .warnbox ul:last-child { margin-bottom: 0; }

/* Код */
.code { overflow-x: auto; border-radius: var(--r-panel); border: 1px solid var(--line-2); background: var(--ink); color: rgba(255, 255, 255, .88); padding: 18px 20px; font-family: var(--f-mono); font-size: 13.5px; line-height: 1.65; margin: 22px 0; }
.code code { font-size: inherit; }
p code, li code, td code { background: var(--brand-50); border-radius: 5px; padding: 1px 6px; }
/* Инлайновый код внутри цветных плашек. Общее правило выше кладёт под него
   почти белый --brand-50, а цвет буквы наследуется от плашки и остаётся
   светлым — на /promty/ так получался белый по белому (1.06:1). Здесь
   плашка кода тёмно-синяя, буква белая: 8.56:1 на светлом крае градиента. */
.card--dark p code, .card--dark li code,
.split__col--alt p code, .split__col--alt li code {
	background: var(--blue-chip);
	color: var(--paper);
}

/* Карточки тарифов: кнопка у каждой */
.plans { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin: 26px 0; }
@media (min-width: 861px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan { border-radius: var(--r-card); border: 1px solid var(--line-card); background: var(--surface); box-shadow: var(--shadow-card); padding: clamp(20px, 2.4vw, 28px); min-width: 0; display: flex; flex-direction: column; }
.plan__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; justify-content: space-between; margin-bottom: 16px; }
.plan__head h3 { font-family: var(--f-mono); font-size: 16px; margin: 0; color: var(--text-head); }
.plan__snap { font-size: 12px; color: var(--text-3); }
.plan__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.plan__cap { font-size: 11.5px; color: var(--text-3); }
.plan__k { font-size: 13.5px; color: var(--text-2); min-width: 0; }
.plan__v { font-size: 15px; color: var(--brand); }
.plan__v--peak { color: var(--text-3); }
.plan__note { font-size: 14px; margin: 16px 0 20px; }
.plan__cta { margin-top: auto; }
.plan__cta .btn { width: 100%; justify-content: center; }

/* Критерии оценки */
.card--flat { background: var(--surface); }
.rate__of { font-size: 14px; color: var(--text-3); }
.crit { display: grid; gap: 14px; }
.crit__row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 42px; gap: 6px 12px; align-items: center; }
.crit__k { font-size: 15px; color: var(--text); min-width: 0; }
.crit__bar { height: 6px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .08); overflow: hidden; }
.crit__bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--brand); }
.crit__v { font-size: 14px; text-align: right; }
.crit__d { grid-column: 1 / -1; font-size: 13.5px; color: var(--text-3); }

/* Блок оплаты */
.paybox { display: grid; gap: 22px; align-items: center; grid-template-columns: minmax(0, 1fr); border-radius: var(--r-card); border: 1px solid var(--line-card); background: var(--surface); box-shadow: var(--shadow-card); padding: clamp(22px, 2.6vw, 32px); margin-top: 26px; }
@media (min-width: 981px) { .paybox { grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr); } }
.paybox h3 { font-size: 20px; }
.paybox p:last-child { margin-bottom: 0; }
.paybox__btns { display: flex; flex-direction: column; gap: 10px; }
.paybox__btns .btn { justify-content: center; }

/* Ссылки на соседние страницы */
.nextup { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) { .nextup { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1101px) { .nextup { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nextup__item { position: relative; display: flex; flex-direction: column; gap: 6px; border-radius: var(--r-panel); border: 1px solid var(--line-card); background: var(--surface); box-shadow: var(--shadow-card-sm); padding: 18px 20px 44px; text-decoration: none; min-width: 0; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.nextup__item:hover { border-color: var(--line-card-on); box-shadow: var(--shadow-card-on); }
.nextup__t { font-family: var(--f-head); font-size: 17px; color: var(--text-head); }
.nextup__d { font-size: 13.5px; color: var(--text-3); }
.nextup__a { position: absolute; left: 20px; bottom: 16px; width: 20px; height: 20px; color: var(--brand); transition: transform .2s var(--ease); }
.nextup__item:hover .nextup__a { transform: translateX(4px); }

/* Финальная полоса с реф-кнопкой */
.ctaband { display: grid; gap: 22px; align-items: center; grid-template-columns: minmax(0, 1fr); border-radius: var(--r-card); padding: clamp(26px, 3vw, 40px); background: linear-gradient(146deg, var(--brand) 0%, var(--brand-deep) 62%, #2c4fb8 100%); color: var(--paper); }
@media (min-width: 861px) { .ctaband { grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr); } }
.ctaband h2 { color: var(--paper); margin-bottom: 8px; }
.ctaband p { color: rgba(255, 255, 255, .84); margin: 0; }
.ctaband__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ctaband__btns .btn--glass { background: hsla(0, 0%, 100%, .16); color: var(--paper); border-color: hsla(0, 0%, 100%, .34); }
.ctaband__btns .btn--glass:hover { background: hsla(0, 0%, 100%, .26); color: var(--paper); }
.ctaband__btns .btn--brand { background: var(--paper); color: var(--brand-deep); }
.ctaband__btns .btn--brand:hover { background: #f1f4ff; color: var(--brand-deep); }
.btn--glass-on-brand { background: hsla(0, 0%, 100%, .18); color: var(--paper); border-color: hsla(0, 0%, 100%, .36); }
.btn--glass-on-brand:hover { background: hsla(0, 0%, 100%, .28); color: var(--paper); }
.foot a.btn--glass-on-brand { color: var(--paper); }
.foot__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* 404 */
.err { max-width: 640px; }
.err__code { display: block; font-size: 64px; color: var(--brand); margin-bottom: 8px; }

/* Кнопка в ячейке таблицы */
.btn--xs { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.table--dl td:last-child { white-space: nowrap; }

/* Проза служебных страниц */
.prose h2 { font-size: 1.4rem; margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }

.grid--gap { margin-top: 20px; }

/* Таблицы на узком экране — карточками по строкам, без прокрутки вбок */
@media (max-width: 640px) {
	.tablewrap { border: 0; background: none; box-shadow: none; overflow-x: visible; }
	table { min-width: 0; display: block; }
	thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	tbody, tr, td { display: block; width: 100%; }
	tr { border: 1px solid var(--line-card); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--shadow-card-sm); padding: 6px 4px; margin-bottom: 12px; }
	td { border-bottom: 1px solid var(--line); padding: 10px 14px; }
	tr td:last-child { border-bottom: 0; }
	td::before { content: attr(data-label); display: block; font-size: 11.5px; letter-spacing: .02em; color: var(--text-3); margin-bottom: 4px; }
	td:not([data-label])::before { content: none; }
	.crit__row { grid-template-columns: minmax(0, 1fr) 60px 38px; }
	.panel__cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
	.err__code { font-size: 48px; }
}

/* Уважение к системной настройке: фон-шейдер гасится совсем. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.bg-canvas { display: none; }
	.rise { opacity: 1; transform: none; }
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}