/* Дизайн-система ПОРТАЛА = дизайн кабинета (admin/index.html). Токены, шрифты,
   размеры, отступы, скругления и компоненты — те же, чтобы новые окна выглядели
   родными. Светлая тема по умолчанию, тёмная — через [data-theme="dark"]. Портал
   и кабинет на одном домене делят localStorage: пре-скрипт страниц читает
   wac_admin_theme/wac_admin_accent/wac_admin_bg — ваша настройка цвета/темы из
   кабинета применяется и здесь. Значения токенов совпадают с admin/index.html. */

/* Manrope — единый шрифт дизайн-системы OKADAR (эталон okhko.xyz). Самохостинг
   (без внешних зависимостей/трекинга): вариативный woff2 (≈53 КБ, покрывает
   latin + cyrillic, вес 200–800) с ttf-фолбэком для очень старых браузеров.
   Браузер сам выбирает поддерживаемый format(). Для прочих алфавитов — системный
   фолбэк. Перенос из okhko.xyz (ТЗ унификации 2026-09-14): один визуальный язык. */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/brand/fonts/manrope-variable.woff2') format('woff2'),
       url('/brand/fonts/manrope-variable.ttf') format('truetype');
}

:root {
  color-scheme: light;
  /* Единый фирменный шрифт для ВСЕХ страниц (лендинг, legal, 3D-услуги, примеры,
     поддержка, features, кабинет). Генераторы задают body через var(--font,…);
     без этого токена они падали в системный шрифт → «прыгал» шрифт между app-shell
     (единый шрифт) и маркетинговыми страницами. @font-face Manrope — ниже в этом файле. */
  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Дизайн-система OKADAR = эталон okhko.xyz (ТЗ унификации 2026-09-14): прохладная
     сине-серая glassmorphism-палитра, синий акцент #2563eb, стеклянные карточки.
     Значения извлечены из okhko.xyz/css/base.css. Заменяет прежнюю тёплую «крафтовую»
     палитру (по ТЗ §48 источник визуала — актуальный okhko.xyz). Светлая тема. */
  --bg: #eff3fc;
  --bg-soft: #f5f8ff;
  --surface: #f7f9ff;
  --surface-2: #ffffff;
  --surface-3: #edf1fc;
  /* Фон чередующейся секции (Аудит-3 §5, §36.2 --color-bg-section): «фон → чуть отличающийся фон → фон» в
     ОБЕИХ темах. Раньше полосы брали --surface-3 (#edf1fc) - в светлой теме почти равен --bg (#eff3fc), и
     секции сливались. Спокойная, но заметная разница, без серых полос. */
  --bg-section: #e4eaf7;
  /* Соответствие цветовых токенов Аудита-3 §36.2 («CSS variables или эквивалент в используемой системе»):
     --color-bg-page = --bg · --color-bg-section = --bg-section · --color-bg-surface = --surface-2 ·
     --color-bg-surface-hover = --surface-3 · --color-border = --line · --color-text-primary = --text ·
     --color-text-secondary = --muted · --color-text-muted = --muted-light · --color-accent = --accent ·
     --color-accent-hover = --accent-hover · --color-accent-text = --accent-text · --color-focus = --accent ·
     --color-danger = --err · --color-success = --ok. Каждая пара переопределена в тёмной теме ниже (тема меняет значения, не разметку). */
  --panel: #ffffff;
  --line: rgba(10,15,30,0.08);
  --line-strong: rgba(10,15,30,0.16);
  --text: #0a0f1e;
  --text-strong: #04070f;
  --muted: #4b5775;        /* okhko --muted, ≥ WCAG AA на --bg и карточках */
  --muted-light: #6b7898;
  --primary: #0a0f1e;
  /* OKADAR Blue (бренд «Radar», логотип v2): акцент #0868FF, navy #061A4D. Заменяет #2563eb. */
  --accent: #0868FF;
  --accent-rgb: 8,104,255;
  --accent-hover: #0357e0;
  --accent-soft: #eaf1ff;
  /* Акцентный ТЕКСТ (кикеры, ссылки, активный пункт меню; Аудит-3 A15, WCAG AA): мелкий синий текст #0868FF на
     --bg даёт 4.26:1, на --bg-section 3.93:1 (меньше 4.5:1). Акцент на 15% темнее (см. @supports ниже - следует и за
     своим акцентом wac_admin_accent): 5.5:1 / 5.1:1 / 6.2:1 (белый). Здесь - фолбэк для браузеров без color-mix. */
  --accent-text: #0357e0;
  /* Мелкий акцентный текст на подложке самого акцента (10-14%: чипы, выбранный пункт списка). В светлой теме = --accent-text. */
  --accent-text-tinted: var(--accent-text);
  --on-accent: #FFFFFF;
  --blue: #0868FF;
  /* Логотип-марка (inline SVG): рамка/скол + куб. Светлая тема — фирменный нави + синий. */
  --logo-frame: #0B2A69;
  --logo-cube: #0868FF;
  --navy: #061A4D;
  --warn: #8A5E13;
  --err: #BE3A2C;
  --err-surface: #FBECEA;
  --err-line: #E9C4BF;
  --ok: #10b981;
  /* Цвета статусов (Аудит-3 §56.4/§62): один набор для бейджей, статусов и сообщений во всём кабинете и консоли.
     --ok (#10b981) - для значков и точек; текст успеха - --ok-text (контраст ≥4.5:1 на светлом фоне), заливка и
     рамка - --ok-surface/--ok-line; то же для предупреждения. Ошибка - --err/--err-surface/--err-line (выше). */
  --ok-text: #0A7A2F;
  --ok-surface: rgba(16,185,129,0.12);
  --ok-line: rgba(10,122,47,0.35);
  --warn-surface: rgba(138,94,19,0.10);
  --warn-line: rgba(138,94,19,0.35);
  /* Стекло/карточки (glassmorphism okhko): полупрозрачный фон + blur. */
  --glass: rgba(255,255,255,0.72);
  --glass-blur: blur(28px) saturate(180%);
  --card-bg: rgba(255,255,255,0.72);
  --card-border: rgba(255,255,255,0.55);
  --card-shadow: 0 2px 8px rgba(10,15,30,0.06), 0 10px 32px rgba(10,15,30,0.10), inset 0 1px 0 rgba(255,255,255,0.65);
  /* Шкала теней (ТЗ §59: три уровня вместо множества ad-hoc box-shadow). Нейтральный тон
     (сине-чёрный), тема-зависимый — в dark переопределены ниже. --card-shadow (стеклянная
     карточка okhko) сохранён как отдельный композит. */
  --shadow-sm: 0 1px 2px rgba(10,15,30,0.06), 0 2px 6px rgba(10,15,30,0.07);
  --shadow-md: 0 4px 12px rgba(10,15,30,0.08), 0 12px 28px rgba(10,15,30,0.10);
  --shadow-lg: 0 12px 34px rgba(10,15,30,0.16), 0 30px 70px -30px rgba(10,15,30,0.22);
  /* Скругления (шкала okhko): карточки 24, кнопки/поля 12, полный набор ниже. */
  --radius: 24px;      /* карточки (okhko --radius-card) */
  --radius-sm: 12px;   /* кнопки, поля (okhko --radius-sm) */
  --radius-xs: 6px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  /* Модальные окна кабинета и консоли (Аудит-3 §57.1 «единый modal», §57.7): одно скругление, отступ, тень и
     затемнение фона для всех модалок (публикация, тестовый режим, документация, заказ, заказ услуги, подтверждение). */
  --radius-modal: var(--radius-md);
  --modal-pad: 24px;
  --shadow-modal: 0 30px 80px rgba(0,0,0,0.38);
  --overlay: rgba(0,0,0,0.5);

  /* ── Единая адаптивная сетка портала (layout / spacing / typography токены). ──────
     ОДИН источник ширины контента, полей и вертикального ритма: страницы ссылаются на
     эти токены вместо индивидуальных max-width/padding. Меняешь тут — меняется на всём
     портале. Токены не зависят от темы, поэтому объявлены только здесь (не в dark). */
  /* ContentContainer (Аудит-3 §35.2) - ОДИН контейнер для всех публичных страниц, шапки и футера:
     ширина контента на desktop - 1320px (на широких экранах растут боковые поля, контент не
     растягивается); боковые поля по ширине экрана: телефон 16px → планшет 24-32 → ноутбук 40-48px.
     Заменяет прежнее min(95vw, 1720px) (ТЗ 2026-09-20): Аудит-3 новее и задаёт 1280-1320px явно; «лишние»
     2.5vw по краям на телефоне/планшете тоже убраны - контенту достаётся вся ширина за вычетом полей. */
  --content-max: 1320px;             /* ширина контента (без полей) */
  --page-x: clamp(16px, 4vw, 48px);  /* боковые поля контейнера: 16 (≤400) → 24-32 (планшет) → 48 (≥1200) */
  --container-wide: calc(var(--content-max) + 2 * var(--page-x)); /* внешняя ширина контейнера с полями */
  /* Шапка и футер выровнены по тому же контейнеру: их левый/правый край = край контента страниц. */
  --chrome-wrap: var(--container-wide);
  --header-pad-x-sm: var(--page-x);  /* мобильная шапка - те же поля, что у контента (было 14px) */
  --container-narrow: 1160px;        /* формы/фокус-контент (.page-wrap, узкие вью кабинета) */
  --measure: 74ch;                   /* комфортная длина строки прозы (без ранних переносов) */
  /* Аудит-3 §26/§37.8: ширина текста ДОКУМЕНТОВ (юридические страницы) - «широкая читабельная колонка»:
     значительно шире --measure, использует место справа от навигации по документам, но ограничена на
     сверхшироких экранах (~1090px при 16px). Не white-space:nowrap - именно шире контейнер. */
  --measure-doc: 112ch;
  --sec-y: clamp(30px, 3.8vw, 52px); /* вертикальный ритм секций (ТЗ 2026-09-20: было 46-84 — слишком
     воздушно на десктопе, между секциями набегало ~148px; теперь плотнее, но с сохранением разделения) */
  /* Шкала отступов (4-based): единые gap/padding/margin по всему проекту (ТЗ §60). */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s7b: 40px; --s8: 48px; --s9: 64px; --s10: 80px;
  /* Типографическая шкала (адаптивная): H1→H2→H3→Subtitle→Body→Caption. */
  --fs-h1: clamp(30px, 5.4vw, 52px);
  --fs-h2: clamp(23px, 3.4vw, 32px);
  --fs-h3: 18px;
  --fs-subtitle: clamp(16px, 2vw, 19px);
  --fs-body: 15px;
  --fs-caption: 13px;
  --lh-tight: 1.12;
  --lh-body: 1.6;
  /* Базовый размер шрифта — ЕДИНЫЙ источник истины. Раньше был захардкожен в ДВУХ местах с
     РАЗНЫМИ значениями: theme.css body = 14px и в 7 генераторах секций = 16px (из-за этого
     публичные страницы «ощущались» по-разному). Теперь два осознанных контекста, оба — токены:
     приложение (кабинет/консоль/конфигуратор/активация/auth — плотность 14px) и публичные
     страницы (лендинг + секции — читаемость/доступность 16px, браузерный стандарт). */
  --fs-base: 15px;      /* приложение (app-shell) — ТЗ §7: комфортный минимум ≥15px (было 14) */
  --lh-base: 1.45;
  --fs-content: 16px;   /* публичные страницы (лендинг + секции) */
  --lh-content: 1.65;
  /* Общие текстовые роли публичных страниц — ЕДИНЫЙ источник. Были продублированы в 7 генераторах
     секций + landing.css с РАСХОЖДЕНИЯМИ: вводный абзац 16px на главной vs 17px в секциях; заголовок
     секции 26–36 на главной vs 28–40 в секциях (хотя landing.css декларировал «.lp h2 == h1»). */
  --fs-section-title: clamp(28px, 4.5vw, 40px);  /* h1 секций == .lp h2 главной */
  --fs-lead: 17px;       /* вводный абзац .lp-lead */
  --fs-eyebrow: 12.5px;  /* кикер .lp-kicker / .lp-eyebrow */
  /* Шкала главной (ТЗ 2026-09-30 §23): H1 64-72 px на компьютере / 44-52 на планшете / 36-40 на телефоне, заголовок
     секции до 48, основной текст 17-18, вводный 18-20, интервал между секциями 96-128 на компьютере и 56-72 на телефоне.
     Главная (platform/landing.css) берёт размеры только отсюда. */
  --pub-h1: clamp(36px, calc(26px + 3.2vw), 72px);
  --pub-h2: clamp(28px, calc(19px + 2vw), 48px);
  --pub-h3: clamp(19px, calc(16px + .35vw), 22px);
  --pub-body: clamp(17px, calc(16px + .2vw), 18px);
  --pub-lead: clamp(18px, calc(16px + .4vw), 20px);
  --pub-sec: clamp(56px, calc(30px + 6.2vw), 128px);
  --pub-gap: clamp(24px, calc(12px + 2.2vw), 48px);
  --pub-eyebrow: 13px;
  --pub-note: 14px;     /* подписи и примечания (.lp-note): НДС, строки контактов, подсказки полей, сообщения сцены */

  /* Веса Manrope (примитивы для компонентов) + line-height заголовков. ТЗ §6: ЕДИНАЯ
     типо-шкала — это webar-набор выше (--fs-h1…--fs-caption + --fs-base/--fs-content).
     Вторая, okhko `--fs-xs…--fs-3xl` (0 использований), удалена в 596.10 — чтобы не было
     двух конкурирующих шкал размеров. */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
  --lh-display: 1.15; --lh-heading: 1.3;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Тёмная тема — эталон okhko.xyz: тёмно-синий фон, прохладный off-white текст,
     осветлённый бренд-синий #60a5fa как акцент, стеклянные карточки. Значения из
     okhko.xyz/css/base.css (html[data-theme="dark"]). */
  --bg: #040c1c;
  --bg-soft: #060f22;
  --surface: rgba(8,15,32,0.94);
  --surface-2: rgba(12,20,42,0.90);
  --surface-3: rgba(18,30,58,0.90);
  --bg-section: rgba(18,30,58,0.90);   /* как прежние полосы тёмной темы (разделение уже было заметным) */
  --panel: #0f1a32;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.15);
  --text: #dde5ff;
  --text-strong: #f0f5ff;
  --muted: #a8b6d8;   /* okhko dark --muted, WCAG AA на стеклянных карточках */
  --muted-light: #8896b9;
  --primary: #f0f5ff;
  /* OKADAR Blue, осветлённый тон для тёмного фона (эталон okhko #60a5fa). */
  --accent: #3b8bff;
  --accent-rgb: 59,139,255;
  --accent-hover: #63a4ff;
  --accent-soft: rgba(8,104,255,0.16);
  --accent-text: var(--accent);   /* на тёмном фоне акцент уже ≥5:1 - тот же тон */
  --accent-text-tinted: var(--accent);   /* уточняется ниже через color-mix: на своей подложке акцент 4.3-4.4:1 */
  --on-accent: #04122B;
  --blue: #60a5fa;
  /* Тёмная тема: рамка/скол логотипа — светлые, чтобы не сливаться с тёмным фоном; куб — яркий синий. */
  --logo-frame: #dbe4fb;
  --logo-cube: #3b8bff;
  --warn: #E2C08D;
  --err: #FF7A6B;
  --err-surface: #241413;
  --err-line: #5A2A2A;
  --ok: #34d399;
  --ok-text: #34d399;
  --ok-surface: rgba(52,211,153,0.14);
  --ok-line: rgba(52,211,153,0.35);
  --warn-surface: rgba(226,192,141,0.12);
  --warn-line: rgba(226,192,141,0.35);
  --glass: rgba(15,23,42,0.62);
  --card-bg: rgba(255,255,255,0.10);
  --card-border: rgba(255,255,255,0.12);
  --card-shadow: 0 2px 8px rgba(0,0,0,0.36), 0 10px 32px rgba(0,0,0,0.44), inset 0 1px 0 rgba(255,255,255,0.12);
  /* Тени тёмной темы — плотнее (чёрный, выше alpha), ТЗ §53/§59. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.34), 0 2px 6px rgba(0,0,0,0.34);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.40), 0 12px 28px rgba(0,0,0,0.46);
  --shadow-lg: 0 12px 34px rgba(0,0,0,0.52), 0 30px 70px -30px rgba(0,0,0,0.60);
}
/* --accent-text выводится из акцента (в т.ч. своего цвета из кабинета - пре-скрипт меняет --accent): на 15% темнее,
   чтобы мелкий акцентный текст держал WCAG AA на светлых фонах. Тёмная тема - сам акцент (правило выше). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root:not([data-theme="dark"]) { --accent-text: color-mix(in srgb, var(--accent) 85%, #000); }
  /* Тёмная тема: на подложке акцента текст на четверть светлее акцента (≈5.9:1) - A15h, чип «Новый», выбранный язык. */
  :root[data-theme="dark"] { --accent-text-tinted: color-mix(in srgb, var(--accent) 75%, #fff); }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; }
/* Sticky footer: body — колонка на всю высоту вьюпорта, футер (.brand-foot с
   margin-top:auto) прижат к низу. На страницах с малым контентом футер стоит внизу
   экрана, а не «висит» посередине с пустотой под ним. */
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Цвет ссылок - --accent-text (A15, WCAG AA): #0868FF на --bg давал 4.26:1. Одинаково с публичными страницами. */
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* A11y (ТЗ §40, эталон okhko): единое видимое состояние фокуса с клавиатуры для ЛЮБОГО
   интерактивного элемента без своего правила (ссылки, кастомные контролы). */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }

/* A11y (ТЗ §34/§40): уважать prefers-reduced-motion — гасим анимации/переходы. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Иконки — inline SVG (Lucide/Tabler-стиль): красятся currentColor. */
.icon { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn .icon { width: 16px; height: 16px; }
.icon-btn .icon { width: 18px; height: 18px; }
/* Инлайн-иконка перед текстом в статусах/подсказках (#92): выравниваем по строке. */
.has-ic > .icon:first-child { width: 15px; height: 15px; margin-right: 6px; vertical-align: -0.15em; }

/* Декоративный фон = эталон okhko.xyz: двойное радиальное синее свечение (сверху
   и снизу-справа) поверх базового --bg. Тон свечения из --accent-rgb, поэтому
   корректен в обеих темах. Fixed — не скроллится с контентом. */
.bg-decor {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 130% 55% at 50% -8%, rgba(var(--accent-rgb),0.16) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 85% 88%, rgba(var(--accent-rgb),0.08) 0%, transparent 45%),
    var(--bg);
}

/* Шапка = header кабинета (sticky, стекло, blur). */
/* Единый Header во всём проекте (ТЗ дизайн-системы): геометрия и размер бренда — ТОЛЬКО здесь (theme.css),
   один источник истины для публичных страниц (chrome.mjs), кабинета, консоли и служебных страниц. */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  /* Содержимое шапки выровнено к единому внешнему контейнеру --chrome-wrap (ТЗ 2026-09-20): границы
     бренда/навигации совпадают с контентом/футером на всех публичных страницах. Кабинет использует
     .app-topbar (не затрагивается). Мобильный @media ниже перекрывает padding на компактный. */
  /* Аудит-3 §31/§40.1: компактнее по высоте (~67px → ~58px). Вертикальный padding 14px → 10px; элементы
     (лого/меню/язык/тема/вход) не уменьшаем — только воздух сверху/снизу. Mobile уже 10px (ниже). */
  padding: var(--header-pad-y, 10px) max(var(--page-x), calc((100% - var(--chrome-wrap)) / 2 + var(--page-x)));
  background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
/* font-size у бренда — ЯВНЫЙ (не наследуется от body): иначе надпись «OKADAR» была 14px на главной и 16px
   на секционных страницах (разный базовый размер body). Теперь одинаковый бренд на всех страницах. */
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -0.2px;
  font-size: var(--brand-size, 16px); line-height: 1; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand-mark { width: var(--brand-mark-size, 22px); height: var(--brand-mark-size, 22px); border-radius: 6px; display: block; flex: 0 0 auto; }
/* Мобильный header — единая высота для всех страниц (публичные + кабинет/консоль). Раньше 10px задавался
   только в chrome.mjs (публичные), а кабинет брал 14px → шапка была выше. Теперь и он здесь. */
@media (max-width: 560px) { .topbar { padding: var(--header-pad-y-sm, 10px) var(--header-pad-x-sm, 14px); } }
.topbar .spacer { flex: 1 1 auto; }

/* Иконочная кнопка (тема/язык) = .theme-toggle кабинета. */
.icon-btn {
  width: 38px; height: 38px; padding: 0; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; transition: border-color 140ms ease, background 140ms ease; }
/* hover — только на устройствах с реальным указателем: на touch (iOS/Safari) :hover «залипает»
   после тапа и рамка выглядит как второе активное состояние (ТЗ мобильной навигации §3/§13). */
@media (hover: hover) { .icon-btn:hover { border-color: var(--accent); } }
.icon-btn:focus { outline: none; }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Языковой селектор кабинета — единый кастомный .lang-dd (ниже). Прежние .lang-select/
   .lang-picker (нативный <select> + оверлей) удалены в 600.14 после миграции на mountPicker. */

/* Единый языковой dropdown (ТЗ §20-24/§144): полностью кастомный, БЕЗ нативного <select>.
   Кнопка (глобус + короткий код + шеврон) + кастомное меню полных названий. Один вид во
   всём кабинете; визуально совпадает с публичным .lang-menu. Тема — через токены. */
.lang-dd { position: relative; display: inline-flex; }
.lang-dd__btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px 0 11px;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .03em; cursor: pointer;
  transition: border-color 140ms ease; }
.lang-dd__btn:hover { border-color: var(--accent); }
.lang-dd__btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18); }
.lang-dd__globe { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.lang-dd__chev { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; transition: transform 140ms ease; }
.lang-dd__btn[aria-expanded="true"] .lang-dd__chev { transform: rotate(180deg); }
.lang-dd__code { min-width: 1.6em; text-align: left; }
.lang-dd__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 184px;
  max-height: min(70vh, 560px); overflow-y: auto; display: grid; gap: 2px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.lang-dd__menu[hidden] { display: none; }
.lang-dd__opt { display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 12px;
  border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text);
  font: inherit; font-size: 14px; cursor: pointer; }
@media (hover: hover) { .lang-dd__opt:hover { background: rgba(var(--accent-rgb),0.10); color: var(--accent); } }
.lang-dd__opt:focus-visible { outline: none; background: rgba(var(--accent-rgb),0.12); color: var(--accent); }
.lang-dd__opt.is-on { color: var(--accent-text-tinted); font-weight: 700; }   /* A15h: акцент на подложке пункта был 4.0:1 (светлая) / 4.4:1 (тёмная) */
.lang-dd__opt.is-on::after { content: '✓'; margin-left: auto; font-size: 12px; }

/* Карточки = стеклянная карточка okhko (.info-card): полупрозрачный фон + blur,
   мягкая многослойная тень, радиус 24. Единый вид карточек во всём портале. */
.card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--card-shadow);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.card h1, .card h2 { margin: 0 0 4px; }
.card h1 { font-size: 20px; letter-spacing: -0.3px; }
.card .sub { margin: 0 0 18px; color: var(--muted); font-size: 13px; }

/* Кнопки = button кабинета: база нейтральная, .btn-accent = button.accent. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font: inherit; font-weight: 700; font-size: 13px; line-height: 1.2; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease; }
/* color на :hover ОБЯЗАТЕЛЕН — иначе глобальное a:hover перекрашивает текст кнопки-ссылки
   (напр. синий текст на синей .btn-accent → исчезает). Держим читаемый цвет кнопки. */
/* color-контр всегда (в т.ч. на touch), чтобы глобальный a:hover не перекрасил текст кнопки-ссылки;
   визуальный «подъём»/тень/рамка — только для реального указателя (десктоп), иначе на iOS они «залипают»
   после тапа (ТЗ мобильной навигации §26 — тот же класс бага, что и у навигации/иконок). */
.btn:hover { color: var(--text); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb),0.55); box-shadow: 0 8px 20px rgba(0,0,0,0.10); } }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
/* Главная акцентная кнопка — плоский синий okhko (без градиента), белый текст, pill. */
.btn-accent { background: var(--accent);
  color: var(--on-accent); border-color: transparent; box-shadow: 0 6px 16px rgba(var(--accent-rgb),0.26); }
.btn-accent:hover { background: var(--accent-hover); box-shadow: 0 11px 26px rgba(var(--accent-rgb),0.34); border-color: transparent; color: var(--on-accent); }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; }
.btn-danger { color: var(--err); border-color: var(--line); }
.btn-danger:hover { background: var(--err-surface); border-color: var(--err-line); }

/* Поля = input кабинета (10px, панель, акцентный фокус-ринг). */
.field { display: block; margin-bottom: 12px; }
.field > label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text); font: inherit; font-size: 13px;
  transition: border-color 140ms ease, box-shadow 140ms ease; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18); }
textarea.input { min-height: 90px; resize: vertical; }
/* Поле с ведущей иконкой. */
.input-wrap { position: relative; }
.input-wrap .lead { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted); display: inline-flex; pointer-events: none; }
.input-wrap .input { padding-left: 38px; }

/* Вкладки. */
.tabs { display: flex; gap: 6px; background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 4px; margin-bottom: 18px; }
.tab { flex: 1 1 0; text-align: center; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-weight: 700; font-size: 13px; color: var(--muted); border: 0; background: transparent; transition: background 140ms ease, color 140ms ease; }
.tab.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(18,20,30,0.06); }

/* Уведомления/подсказки. */
.note { border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 14px; border: 1px solid var(--line); }
.note.ok { background: rgba(var(--accent-rgb),0.10); border-color: rgba(var(--accent-rgb),0.4); color: var(--text); }
.note.err { background: var(--err-surface); border-color: var(--err-line); color: var(--err); }
.hint { color: var(--muted); font-size: 12px; }

/* Бейджи статусов. */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
.badge.on { color: var(--ok-text); border-color: var(--ok-line); }
.badge.wait { color: var(--warn); border-color: var(--warn-line); }
.badge.off { color: var(--muted); }
.badge.err { color: var(--err); border-color: var(--err-line); }

/* Консоль супер-админа: обёртка, тулбар-фильтр, карточки заявок. */
.page-wrap { max-width: var(--container-narrow); margin: 0 auto; padding: 26px var(--page-x) 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.page-head h1 { font-size: 22px; letter-spacing: -0.4px; margin: 0 0 3px; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
/* Сегментированный переключатель. `max-width:100%`+`overflow-x:auto` — если пунктов
   много (напр. 8 вкладок консоли на телефоне), лента прокручивается ВНУТРИ себя, а не
   тянет всю страницу вбок; узкие переключатели (2–3 пункта) не затронуты. Скроллбар
   скрыт для аккуратности. */
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; overflow-y: hidden; background: var(--surface-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 0 0 auto; white-space: nowrap; border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: 12.5px; padding: 6px 13px; border-radius: 8px; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.seg button.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(18,20,30,0.06); }

.rq { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 15px 16px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(18,20,30,0.04); }
.rq h3 { margin: 0; font-size: 15px; letter-spacing: -0.2px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rq .meta { margin: 9px 0 0; color: var(--muted); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 3px 18px; }
.rq .meta b { color: var(--text); font-weight: 600; }
.rq .msg { margin: 11px 0 0; padding: 10px 12px; background: var(--surface-3); border-radius: var(--radius-sm); font-size: 13px; white-space: pre-wrap; }
.rq .actions { margin-top: 13px; display: flex; gap: 8px; flex-wrap: wrap; }
/* Архивная компания (#72): приглушённая карточка, но действия остаются кликабельными. */
.rq.is-archived { opacity: 0.62; border-style: dashed; }
.rq.is-archived:hover, .rq.is-archived:focus-within { opacity: 1; }

.copyfield { display: flex; gap: 8px; margin-top: 11px; }
.copyfield .input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.copyfield .btn { flex: 0 0 auto; }

/* Пустое состояние (нет заявок/компаний/заказов и т.п.). Раньше — тонкая коробка,
   прижатая к верху → под ней зияла пустота. Теперь центрированный блок, заполняющий
   область: мягкая иконка-плейсхолдер + сообщение — пустота читается как намеренное
   пространство, а не «дыра». Единый вид во всех панелях. */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
  text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5;
  min-height: clamp(260px, 46vh, 520px); padding: 40px 24px; }
.empty::before { content: ''; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
  background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }

/* ===== Оболочка кабинета: боковое меню + рабочая область (Фаза A) ===== */
/* App-shell (кабинет/консоль/legal/настройки): сайдбар + рабочая область. ТЗ §34/§94/§115:
   кабинет — это workspace, поэтому шелл использует ВСЮ ширину вьюпорта (без общего max-width
   и центрирования), иначе на 1920px справа зияла пустая зона (~160px). Рабочая область
   заполняет всё после сайдбара; структурные блоки используют ширину, проза — на --measure
   (ограничение внутренних текстовых колонок — по мере страничных фаз). Ниже 860px сайдбар
   превращается в drawer (см. медиазапрос). */
.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100dvh; width: 100%; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column;
  padding: 16px 12px; position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
.sidebar .brand { padding: 6px 8px 14px; }
/* Drawer на телефоне: фокус ставится на само меню (tabindex=-1, wacDrawer) - без рамки вокруг всей панели,
   дальше Tab идёт по пунктам с обычным кольцом фокуса (A15h). */
.sidebar:focus { outline: none; }
/* Основная область (role=main, tabindex=-1): сюда уходит фокус после выбора раздела в мобильном меню - без рамки. */
.app-content:focus { outline: none; }
.nav-sec { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 14px 10px 4px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius-sm); color: var(--muted);
  font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: background 140ms ease, color 140ms ease; }
.nav-item:hover { background: var(--surface-3); color: var(--text); }
/* Активный пункт — ОДНО ясное состояние (ТЗ §18): мягкая акцентная заливка + акцентный
   текст/иконка. Без одновременной рамки/подчёркивания/доп-индикатора. */
.nav-item.active { background: rgba(var(--accent-rgb),0.12); color: var(--accent-text); border-color: transparent; font-weight: 700; }
.nav-item.active .icon { color: var(--accent-text); }   /* A15: #0868FF на заливке пункта - 3.8:1, --accent-text - 4.9:1 */
.nav-item .icon { color: var(--muted); }
.nav-item .soon { margin-left: auto; font-size: 9.5px; font-weight: 800; text-transform: uppercase; color: var(--warn);
  border: 1px solid rgba(226,192,141,0.4); border-radius: 999px; padding: 1px 6px; }
.sidebar-foot { margin-top: auto; padding: 10px 8px 4px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
/* Кросс-навигация «Главная/Кабинет/Конфигуратор» в боковом меню (инжектит brand.js на
   app-shell). Живёт в сайдбаре, поэтому доступна и в мобильном drawer, где топбар-версия
   .brand-topnav скрыта. Отделяем от разделов тонкой линией сверху. */
.brand-sidenav { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.brand-sidenav .nav-item { min-height: 0; }

.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 12px 22px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); }
/* Заголовок раздела всегда уступает место (ellipsis), а не выталкивает правую
   группу кнопок за вьюпорт — иначе в консоли (lang+тема+обновить+выход) топбар
   переполнялся по горизонтали на планшетных ширинах (601–1100px). #98. */
.app-topbar h1 { margin: 0; font-size: 17px; letter-spacing: -0.2px; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar .spacer { flex: 1 1 auto; }
.app-content { padding: 24px clamp(20px, 3vw, 64px) 48px; max-width: none; width: 100%; }
.app-content h2.sec { font-size: 15px; margin: 22px 0 12px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.kpi { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px; box-shadow: var(--card-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.kpi .k-lbl { font-size: 12.5px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.kpi .k-lbl .icon { width: 16px; height: 16px; color: var(--accent); }
.kpi .k-big { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin-top: 8px; }
.kpi .k-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Скелетон-загрузка (ТЗ §31): мягкий шиммер вместо «…»/пустоты, пока грузятся данные.
   Анимация автоматически гаснет при prefers-reduced-motion (глобальное правило выше). */
.skeleton { display: inline-block; border-radius: 8px; background:
  linear-gradient(100deg, var(--surface-3) 30%, rgba(var(--accent-rgb),0.12) 50%, var(--surface-3) 70%);
  background-size: 200% 100%; animation: wac-shimmer 1.3s ease-in-out infinite; }
.kpi .k-big .skeleton--num { width: 2.2em; height: 0.82em; margin-top: 6px; vertical-align: -0.05em; }
@keyframes wac-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* Мобайл: KPI — компактной сеткой 2×N (а не гигантскими карточками в один столбец,
   где на всю ширину висит короткое число). Плотнее, меньше вертикальной прокрутки. */
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 13px 14px; }
  .kpi .k-big { font-size: 21px; margin-top: 4px; }
}

.hamburger { display: none; }
/* Мобайл: боковое меню — выезжающий drawer поверх контента (не сжимает раскладку). */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  /* Закрытый drawer - ещё и visibility:hidden (после выезда): иначе его пункты оставались в порядке Tab невидимыми
     (Аудит-3 A15h); открывается - видим сразу, фокус ставит wacDrawer. */
  .sidebar { position: fixed; left: 0; top: 0; z-index: 1200; width: 260px; transform: translateX(-100%); visibility: hidden;
    transition: transform 200ms ease, visibility 0s linear 200ms; box-shadow: 0 24px 60px rgba(0,0,0,0.28); }
  .app.nav-open .sidebar { transform: translateX(0); visibility: visible; transition: transform 200ms ease, visibility 0s; }
  .app.nav-open::before { content: ''; position: fixed; inset: 0; z-index: 1100; background: rgba(10,14,24,0.4); }
  .hamburger { display: inline-flex; }
  .app-content { padding: 18px 16px 40px; }
}
/* Узкий мобайл: топбар не переполняется по горизонтали. Кросс-навигация
   («Главная/Кабинет/Конфигуратор») прячется — она дублируется боковым меню
   («гамбургер») и быстрыми действиями на дашборде; заголовок ужимается с
   многоточием; у «Выход» остаётся только иконка; селектор языка — уже. */
/* ТЗ 2026-09-27 A17/A18 - без обрезанного текста в шапке на планшете, телефоне и при масштабе 200-400 %: боковое меню
   скрыто (≤860px) - у «Выход» только иконка (подпись - имя кнопки для диктора, A15), заголовок раздела переносится,
   а не обрезается многоточием; не хватает ширины - элементы шапки переходят на вторую строку, а не за край экрана. */
@media (max-width: 860px) {
  .app-topbar { flex-wrap: wrap; row-gap: 8px; }
  .app-topbar h1 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; line-height: 1.2; }
  .app-topbar #logout-btn span[data-i18n] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .app-topbar #logout-btn { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 600px) {
  .app-topbar { padding: 11px 14px; gap: 8px; }
  .app-topbar .brand-topnav { display: none; }
  .app-topbar h1 { font-size: 15px; }
  .app-topbar .lang-select { max-width: 96px; }
}
@media (max-width: 460px) {
  /* Самые узкие телефоны: заголовок раздела уступает место (иначе в TEST-режиме,
     рядом с бейджем, он ужимается до «Д..»). Раздел виден в боковом меню. */
  .app-topbar h1 { display: none; }
}

/* Служебное. */
.center-wrap { min-height: calc(100dvh - 66px); display: flex; align-items: center; justify-content: center; padding: 28px 18px; }
.stack-8 > * + * { margin-top: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }