/* =========================================================================
   ТЕМА ФОРКА — «НОЧНОЙ НАДЗОРНЫЙ ТЕРМИНАЛ»

   Корпоративная тяжесть плюс тёмное. Графитово-синяя подложка (#0E1420),
   единственный акцент — лазурный #0093f9, статусы — сигнальная триада из
   кода продукта: красный #e74c3c, янтарный #f39c12, бирюзовый #27ae60
   (в теме они разведены на читаемые пары «фон + текст» для обеих тем).
   Плотные карточки-реестры, прямые углы, моноширинный шрифт для версий,
   порогов, кодов и статусов. Рабочий контур комплаенс-офицера, не лендинг.

   ПРАВИЛА ФАЙЛА
   1. Подключается ПОСЛЕДНИМ из стилей — одной строкой <link> на странице
      (в legal/ — с префиксом ../). Больше форк от базового сайта ничем не
      отличается.
   2. Ни одного внешнего ресурса: ни @import, ни url() наружу, ни шрифтов.
      Гарнитура — та же локальная Carlito; моноширинный — системный стек.
   3. Цвет задаётся токеном. Компонентные правила ниже переопределяют форму
      и типографику, цвета в них — только через var(--…).
   4. Переопределены ВСЕ группы токенов дизайн-системы: незакрытая группа в
      тёмной теме даёт белую панель на тёмном полотне.
   5. Блок «ПЕЧАТЬ» в конце обязателен: базовый print-сброс в components.css
      идёт РАНЬШЕ темы, и без повторного сброса тёмные значения темы уехали
      бы на бумагу.
   ========================================================================= */

/* =========================================================================
   1. ФОРМА И РИТМ — общее для обеих тем
   ========================================================================= */
:root {
  /* Прямые углы: карточка-реестр, а не карточка лендинга. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  --border-width: 1px;

  /* Плотнее вертикальный ритм: экран оператора, а не рекламная полоса. */
  --space-8: 3rem;
  --space-9: 4rem;

  --tracking-wide: 0.11em;

  /* Моноширинный стек — системный, без единого внешнего обращения. */
  --font-mono: ui-monospace, "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;

  /* Нативные элементы форм красятся акцентом темы, а не синим по умолчанию. */
  accent-color: var(--color-brand);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) var(--color-canvas-sunken);
}

/* =========================================================================
   2. ДЕНЬ — тот же терминал при свете: холодная графитовая бумага,
   тот же лазурный акцент, та же сигнальная триада.
   ========================================================================= */
:root {
  color-scheme: light;

  --color-canvas: #e7ecf3;
  --color-canvas-sunken: #dce3ed;
  --color-surface: #ffffff;
  --color-surface-sunken: #edf1f7;

  --color-text: #0e1420;
  --color-text-muted: #414d60;
  --color-text-subtle: #4f5d73;
  --color-text-link: #005fa8;
  --color-text-link-hover: #003f73;
  --color-text-on-brand: #06121f;

  --color-brand: #0093f9;
  --color-brand-strong: #00629f;
  --color-accent: #0c7a62;
  --color-danger: #b02318;
  --color-warning: #8a5200;

  --color-border: #c6d0de;
  --color-border-strong: #a3b1c4;
  --color-focus: #005fa8;
  --color-selection-bg: #cfe6fb;

  --shadow-sm: 0 1px 0 rgba(14, 20, 32, 0.10);
  --shadow-md: 0 6px 18px rgba(14, 20, 32, 0.12);
  --shadow-lg: 0 22px 52px rgba(14, 20, 32, 0.18);
  --shadow-focus: 0 0 0 3px rgba(0, 147, 249, 0.35);

  /* Служебные оттенки темы. Не пары «текст/фон»: подсветки и разделители. */
  --term-row-hover: #dfe8f3;
  --term-grid-line: rgba(0, 147, 249, 0.10);
  --term-overlay: rgba(8, 14, 24, 0.62);

  /* --- Шапка --- */
  --header-bg: #ffffff;
  --header-text: #0e1420;
  --header-muted: #4f5d73;
  --header-border: #c6d0de;

  /* --- Подвал: графит в обеих темах --- */
  --footer-bg: #0b111c;
  --footer-text: #e4ebf5;
  --footer-muted: #93a2b8;
  --footer-link: #58b0f7;
  --footer-border: #1b2534;

  /* --- Первый экран: ночная подложка и при свете --- */
  --hero-bg: linear-gradient(155deg, #080e18 0%, #0e1420 48%, #10243b 100%);
  --hero-text: #ffffff;
  --hero-muted: #a9bcd4;
  --hero-border: #14314d;

  /* --- Тёмная секция-разделитель --- */
  --band-bg: #0b111c;
  --band-text: #e4ebf5;
  --band-muted: #a8b6c9;

  /* --- Кнопки: лазурная клавиша действия с графитовой краской --- */
  --btn-primary-bg: #0093f9;
  --btn-primary-text: #06121f;
  --btn-primary-bg-hover: #35a9fb;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: #133251;
  --btn-secondary-border: #a3b1c4;
  --btn-ghost-bg: transparent;
  --btn-ghost-text: #005fa8;

  /* --- Статусные чипы: сигнальная триада из кода --- */
  --chip-ok-bg: #d6f2e7;
  --chip-ok-text: #0a5f4a;
  --chip-warn-bg: #fbebcb;
  --chip-warn-text: #6b4200;
  --chip-info-bg: #d3e8fb;
  --chip-info-text: #044c86;
  --chip-muted-bg: #e1e7f0;
  --chip-muted-text: #414d60;
  --chip-danger-bg: #fbdfdc;
  --chip-danger-text: #96170f;

  /* --- Акцентные блоки --- */
  --rule-bg: #e4eefa;
  --rule-text: #10243a;
  --rule-accent: #0070c4;
  --rule-warn-bg: #fbeed5;
  --rule-warn-text: #5a3800;
  --rule-warn-accent: #a56200;

  --info-bg: #e9edf4;
  --info-text: #33404f;
  --info-accent: #7b8aa0;

  /* --- Реестровые таблицы --- */
  --table-head-bg: #dfe6f0;
  --table-head-text: #23324a;
  --table-row-bg: #ffffff;
  --table-row-alt-bg: #f3f6fa;
  --table-border: #cbd5e2;

  /* --- Поля форм --- */
  --field-bg: #ffffff;
  --field-text: #0e1420;
  --field-label: #2a3547;
  --field-subtle: #4f5d73;
  --field-border: #a3b1c4;
  --field-invalid: #b02318;

  /* --- Тултип, поиск, служебные --- */
  --tip-bg: #10192a;
  --tip-text: #eaf1fa;

  --search-bg: #ffffff;
  --search-text: #0e1420;
  --search-subtle: #4f5d73;

  --banner-bg: #0b111c;
  --banner-text: #e4ebf5;
  --banner-muted: #afbed2;

  --tile-bg: #ffffff;
  --tile-text: #414d60;

  --code-bg: #e3eaf4;
  --code-text: #10395e;

  --totop-bg: #0093f9;
  --totop-text: #06121f;

  --progress-bg: #cbd5e2;
  --progress-fill: #0093f9;

  /* --- Схемы (инлайн-SVG) --- */
  --dgm-node-bg: #ffffff;
  --dgm-node-text: #0e1420;
  --dgm-node-border: #a3b1c4;
  --dgm-accent-bg: #dcedfc;
  --dgm-accent-text: #0b3b63;
  --dgm-line: #6d7f96;
  --dgm-label: #4f5d73;
}

/* =========================================================================
   3. НОЧЬ — основной режим темы. Графитово-синее полотно #0E1420.
   ========================================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-canvas: #0e1420;
  --color-canvas-sunken: #0a0f19;
  --color-surface: #151d2b;
  --color-surface-sunken: #1b2536;

  --color-text: #e4ebf5;
  --color-text-muted: #a8b6c9;
  --color-text-subtle: #8b99ae;
  --color-text-link: #3aa5fb;
  --color-text-link-hover: #7bc4ff;
  --color-text-on-brand: #06121f;

  --color-brand: #0093f9;
  --color-brand-strong: #4fb4ff;
  --color-accent: #2fc79f;
  --color-danger: #ff6b63;
  --color-warning: #f5b33c;

  --color-border: #232e42;
  --color-border-strong: #37455c;
  --color-focus: #4fb4ff;
  --color-selection-bg: #143a5c;

  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.55);
  --shadow-md: 0 8px 24px rgba(2, 6, 14, 0.65);
  --shadow-lg: 0 26px 64px rgba(2, 6, 14, 0.75);
  --shadow-focus: 0 0 0 3px rgba(0, 147, 249, 0.45);

  --term-row-hover: #17202f;
  --term-grid-line: rgba(0, 147, 249, 0.07);
  --term-overlay: rgba(3, 6, 12, 0.78);

  /* --- Шапка --- */
  --header-bg: #0b111c;
  --header-text: #e4ebf5;
  --header-muted: #93a2b8;
  --header-border: #1e2839;

  /* --- Подвал --- */
  --footer-bg: #080d15;
  --footer-text: #e4ebf5;
  --footer-muted: #93a2b8;
  --footer-link: #58b0f7;
  --footer-border: #1b2534;

  /* --- Первый экран --- */
  --hero-bg: linear-gradient(155deg, #080e18 0%, #0e1420 48%, #10243b 100%);
  --hero-text: #ffffff;
  --hero-muted: #a9bcd4;
  --hero-border: #14314d;

  /* --- Полоса-разделитель --- */
  --band-bg: #080d15;
  --band-text: #e4ebf5;
  --band-muted: #a8b6c9;

  /* --- Кнопки --- */
  --btn-primary-bg: #0093f9;
  --btn-primary-text: #06121f;
  --btn-primary-bg-hover: #35a9fb;
  --btn-secondary-bg: #141d2b;
  --btn-secondary-text: #cfe2f4;
  --btn-secondary-border: #37455c;
  --btn-ghost-bg: transparent;
  --btn-ghost-text: #3aa5fb;

  /* --- Статусные чипы --- */
  --chip-ok-bg: #06241d;
  --chip-ok-text: #45d6ae;
  --chip-warn-bg: #2b1d06;
  --chip-warn-text: #f5b43c;
  --chip-info-bg: #06223a;
  --chip-info-text: #62bcff;
  --chip-muted-bg: #171f2e;
  --chip-muted-text: #a8b6c9;
  --chip-danger-bg: #2a1114;
  --chip-danger-text: #ff8f8a;

  /* --- Акцентные блоки --- */
  --rule-bg: #101b2b;
  --rule-text: #d9e5f3;
  --rule-accent: #0093f9;
  --rule-warn-bg: #2a1e07;
  --rule-warn-text: #f3d294;
  --rule-warn-accent: #f5b33c;

  --info-bg: #121a27;
  --info-text: #c0cdde;
  --info-accent: #4e5f78;

  /* --- Реестровые таблицы --- */
  --table-head-bg: #131c29;
  --table-head-text: #9fb3cc;
  --table-row-bg: #101825;
  --table-row-alt-bg: #131c2a;
  --table-border: #212c3e;

  /* --- Поля форм --- */
  --field-bg: #0b121d;
  --field-text: #e4ebf5;
  --field-label: #c3d1e2;
  --field-subtle: #8e9db2;
  --field-border: #33425a;
  --field-invalid: #ff8f8a;

  /* --- Тултип, поиск, служебные --- */
  --tip-bg: #1c2739;
  --tip-text: #e9f0fa;

  --search-bg: #101825;
  --search-text: #e4ebf5;
  --search-subtle: #8e9db2;

  --banner-bg: #0b111c;
  --banner-text: #e4ebf5;
  --banner-muted: #afbed2;

  --tile-bg: #121a27;
  --tile-text: #b9c7d9;

  --code-bg: #0a101b;
  --code-text: #8fd0ff;

  --totop-bg: #0093f9;
  --totop-text: #06121f;

  --progress-bg: #1a2536;
  --progress-fill: #0093f9;

  /* --- Схемы (инлайн-SVG) --- */
  --dgm-node-bg: #131c2a;
  --dgm-node-text: #e4ebf5;
  --dgm-node-border: #33425a;
  --dgm-accent-bg: #06223a;
  --dgm-accent-text: #7ec6ff;
  --dgm-line: #59708c;
  --dgm-label: #a8b6c9;
}

/* =========================================================================
   4. ОБЩЕЕ ПОЛОТНО И НАТИВНЫЕ ЭЛЕМЕНТЫ
   Нативные контролы в тёмной теме — отдельная зона риска: браузер рисует
   их своей палитрой, если ему не сказать иное.
   ========================================================================= */
body { background: var(--color-canvas); color: var(--color-text); }

::selection { background: var(--color-selection-bg); color: var(--color-text); }

input, textarea, button, select, progress, meter { accent-color: var(--color-brand); }

/* Автозаполнение Chrome красит поле своим белым — на тёмном полотне это
   единственное светлое пятно во всей форме. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--field-text);
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset;
  caret-color: var(--field-text);
  border-color: var(--field-border);
}

/* Значок календаря и крестик поиска — тёмные глифы браузера. Выворачиваем. */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="search"]::-webkit-search-cancel-button {
  filter: invert(1) brightness(1.35);
  opacity: 0.85;
}

::placeholder { color: var(--field-subtle); opacity: 1; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-canvas-sunken); }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-brand); }

/* Надзаголовок — метка контура: моноширинная, с лазурной насечкой слева. */
.eyebrow {
  padding-left: 0.55rem;
  border-left: 2px solid var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.lead { color: var(--color-text-muted); }

hr { border-top-color: var(--color-border); }

code, kbd, samp, pre { border: var(--border-width) solid var(--color-border); }

/* =========================================================================
   5. КАРКАС: шапка, поиск, прогресс, «наверх», виджет связи, подвал
   ========================================================================= */
.site-header {
  background: var(--header-bg);
  border-bottom: var(--border-width) solid var(--header-border);
  box-shadow: inset 0 2px 0 0 var(--color-brand);
}
.site-header[data-scrolled="true"] {
  box-shadow: inset 0 2px 0 0 var(--color-brand), var(--shadow-md);
}

.brand__name { letter-spacing: 0; }
.brand__tagline {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.02em;
  color: var(--header-muted);
}

.site-nav__link { border-radius: 2px; }
.site-nav__link[aria-current="page"] {
  color: var(--color-text-link);
  box-shadow: inset 0 -2px 0 var(--color-brand);
}

.icon-btn { border-radius: 2px; color: var(--header-text); }
.icon-btn:hover { border-color: var(--color-brand); color: var(--color-text-link); }

@media (max-width: 1259px) {
  .site-nav { background: var(--header-bg); border-bottom-color: var(--header-border); }
  .site-nav__link { border-bottom-color: var(--header-border); }
}

/* Поиск: строка запроса в терминале. */
.site-search__panel {
  background: var(--search-bg);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.site-search__field {
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--border-width) solid var(--field-border);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.site-search__field:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.site-search__hint { font-family: var(--font-mono); color: var(--search-subtle); }
.site-search__results li { border-top-color: var(--color-border); }
.site-search__results a { color: var(--search-text); border-left: 2px solid transparent; }
.site-search__results a:hover { background: var(--term-row-hover); border-left-color: var(--color-brand); }
.site-search__results strong { color: var(--color-text-link); }
.site-search__results span { color: var(--search-subtle); }

.read-progress { background: var(--progress-bg); }
.read-progress__bar { background: var(--progress-fill); }

.to-top {
  background: var(--totop-bg);
  color: var(--totop-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.consultant__bubble {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.consultant__panel {
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.consultant__panel p { color: var(--color-text-muted); }

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  box-shadow: inset 0 1px 0 0 var(--color-brand);
}
.footer__title {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  color: var(--footer-muted);
}
.footer__req, .footer__glossary { color: var(--footer-muted); }
.footer__org { color: var(--footer-text); }
.footer__bottom { border-top-color: var(--footer-border); font-family: var(--font-mono); }
.site-footer a { color: var(--footer-link); }

.skip-link { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-radius: 2px; }

/* =========================================================================
   6. ПЕРВЫЙ ЭКРАН, ПОЛОСЫ, ЗАГОЛОВОК СТРАНИЦЫ
   ========================================================================= */
/* Тонкая сетка поверх графита: подложка рабочего контура, а не баннер.
   Ни одного внешнего ресурса — только градиенты. */
.hero {
  background:
    repeating-linear-gradient(90deg, var(--term-grid-line) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, var(--term-grid-line) 0 1px, transparent 1px 72px),
    var(--hero-bg);
  border-bottom: var(--border-width) solid var(--hero-border);
  box-shadow: inset 0 -3px 0 0 var(--color-brand);
}
.hero h1 { color: var(--hero-text); letter-spacing: -0.015em; }
.hero__lead, .hero__note, .hero__fine { color: var(--hero-muted); }
.hero .eyebrow { color: var(--hero-muted); border-left-color: var(--color-brand); }
.hero__fine { font-family: var(--font-mono); font-size: var(--fs-3xs); }
.hero__fine a { color: var(--hero-text); }

.band {
  background: var(--band-bg);
  color: var(--band-text);
  border-top: var(--border-width) solid var(--color-brand);
}
.band p { color: var(--band-muted); }

.page-head {
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-5);
}

.section--sunken { background: var(--color-canvas-sunken); }
.section--surface { background: var(--color-surface); }
.section__head h2 { letter-spacing: -0.015em; }

.breadcrumbs { font-family: var(--font-mono); color: var(--color-text-subtle); }
.breadcrumbs a { color: var(--color-text-subtle); }
.breadcrumbs a:hover { color: var(--color-text-link); }
.breadcrumbs li + li::before { color: var(--color-border-strong); }

/* =========================================================================
   7. КНОПКИ И ПЕРЕКЛЮЧАТЕЛИ
   ========================================================================= */
/* Ширину надписи кнопки тема не трогает: разрядка и моноширинный шрифт
   раздували кнопку в шапке, и на 1440 px она вылезала за край окна. */
.btn { border-radius: var(--radius-md); }
.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.btn--primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); }
.btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn--secondary:hover { border-color: var(--color-brand); }
.btn--ghost { color: var(--btn-ghost-text); }

.seg__tab { border-radius: 2px; }
.seg__tab[aria-selected="true"] {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.seg--mock .seg__tabs { border-bottom-color: var(--color-border); }
.seg--mock .seg__tab {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  background: transparent;
  border-bottom: 3px solid transparent;
}
.seg--mock .seg__tab[aria-selected="true"] {
  background: transparent;
  color: var(--color-text);
  border-bottom-color: var(--color-brand);
}
.seg--flow .seg__tab { border-radius: 2px; text-align: left; }
.seg--flow .seg__tab .flow__num {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  opacity: 0.8;
}

/* =========================================================================
   8. СТАТУСНЫЕ ЧИПЫ — коды состояния, а не пилюли
   ========================================================================= */
.chip {
  padding: 0.2em 0.55em;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.chip::before { width: 0.45em; height: 0.45em; border-radius: 0; }
.chip--ok     { background: var(--chip-ok-bg);     color: var(--chip-ok-text); }
.chip--warn   { background: var(--chip-warn-bg);   color: var(--chip-warn-text); }
.chip--info   { background: var(--chip-info-bg);   color: var(--chip-info-text); }
.chip--muted  { background: var(--chip-muted-bg);  color: var(--chip-muted-text); }
.chip--danger { background: var(--chip-danger-bg); color: var(--chip-danger-text); }

/* =========================================================================
   9. КАРТОЧКИ-РЕЕСТРЫ, ПОКАЗАТЕЛИ, ВРЕЗКИ, ПЛАШКИ
   ========================================================================= */
.card {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.card h3, .card h4 {
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
}
.card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}
.card--flat { background: transparent; border-style: dashed; border-color: var(--color-border-strong); }

.stat {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-lg);
}
.stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.stat__source { color: var(--color-text-subtle); }

.callout {
  padding: var(--space-4) var(--space-5);
  background: var(--color-canvas-sunken);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.facts li {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-top: 2px solid var(--color-brand);
  border-radius: var(--radius-md);
}
.facts b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-text); }
.facts span { color: var(--color-text-muted); }

.rule-box {
  background: var(--rule-bg);
  color: var(--rule-text);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--rule-accent);
  border-radius: var(--radius-md);
}
.rule-box__icon { color: var(--rule-accent); }
.rule-box--warn {
  background: var(--rule-warn-bg);
  color: var(--rule-warn-text);
  border-left-color: var(--rule-warn-accent);
}
.rule-box--warn .rule-box__icon { color: var(--rule-warn-accent); }

.info-box {
  background: var(--info-bg);
  color: var(--info-text);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--info-accent);
  border-radius: var(--radius-md);
}
.info-box__icon { color: var(--info-accent); }

.list-check > li::before { border-color: var(--color-accent); }
.list-cross > li::before { color: var(--color-text-subtle); }

blockquote { border-left-color: var(--color-brand); color: var(--color-text-muted); }

/* =========================================================================
   10. ТАБЛИЦЫ-РЕЕСТРЫ
   ========================================================================= */
.table {
  background: var(--table-row-bg);
  border: var(--border-width) solid var(--table-border);
  border-radius: var(--radius-md);
}
.table thead th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  border-bottom: 2px solid var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.table th, .table td { border-bottom-color: var(--table-border); }
.table td { font-variant-numeric: tabular-nums; }
.table tbody tr:nth-child(even) { background: var(--table-row-alt-bg); }
.table tbody tr:hover { background: var(--term-row-hover); }

@media (max-width: 720px) {
  .table--cards tbody tr {
    background: var(--table-row-bg);
    border: var(--border-width) solid var(--table-border);
    border-left: 3px solid var(--color-brand);
    border-radius: var(--radius-md);
  }
  .table--cards tbody tr:nth-child(even) { background: var(--table-row-bg); }
  .table--cards tbody tr:hover { background: var(--table-row-bg); }
  .table--cards td::before {
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }
}

/* =========================================================================
   11. ТУЛТИПЫ
   ========================================================================= */
.has-tip { border-bottom: 1px dashed var(--color-brand); }
.tip-bubble {
  background: var(--tip-bg);
  color: var(--tip-text);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
abbr[title] { border-bottom-color: var(--color-border-strong); }

/* =========================================================================
   12. МАКЕТ ИНТЕРФЕЙСА — экран программы, а не картинка
   ========================================================================= */
.mock {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
/* Заголовок макета переносится: моноширинная подпись шире обычной, и на
   узком экране пара «название + пометка» вылезала за край макета. */
.mock__bar {
  flex-wrap: wrap;
  background: var(--table-head-bg);
  color: var(--table-head-text);
  border-bottom: 2px solid var(--color-brand);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mock__tag {
  background: var(--chip-muted-bg);
  color: var(--chip-muted-text);
  border-radius: 2px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: none;
}
.mock__table {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-variant-numeric: tabular-nums;
}
.mock__table thead th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mock__table th, .mock__table td { border-bottom-color: var(--table-border); }
.mock__table tbody tr:hover { background: var(--term-row-hover); }
.mock__caption, .mock__swipe { color: var(--color-text-subtle); }
.mock__hint { color: var(--color-text-muted); }

/* =========================================================================
   13. СХЕМЫ (ИНЛАЙН-SVG)
   ========================================================================= */
.fig {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.fig__caption, .fig__swipe { color: var(--color-text-subtle); }
.dgm-node { fill: var(--dgm-node-bg); stroke: var(--dgm-node-border); }
.dgm-node--accent { fill: var(--dgm-accent-bg); stroke: var(--color-brand); }
.dgm-text { fill: var(--dgm-node-text); }
.dgm-text--accent { fill: var(--dgm-accent-text); }
.dgm-label { fill: var(--dgm-label); font-family: var(--font-mono); }
.dgm-line { stroke: var(--dgm-line); }
.dgm-arrow { fill: var(--dgm-line); }

/* =========================================================================
   14. МОДАЛЬНОЕ ОКНО И РОЛИК ПОКАЗА
   ========================================================================= */
.modal { background: var(--term-overlay); }
.modal__dialog {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-top: 3px solid var(--color-brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.player__stage {
  background: var(--color-canvas-sunken);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.player__step-num {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: 2px;
  font-family: var(--font-mono);
}
.player__panel {
  background: var(--table-row-bg);
  border: var(--border-width) solid var(--table-border);
  border-radius: var(--radius-md);
}
.player__row { border-bottom-color: var(--table-border); }
.player__row--head {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.player__row--sel {
  background: var(--table-row-alt-bg);
  box-shadow: inset 2px 0 0 0 var(--color-brand);
}
.player__note { color: var(--color-text-muted); }
.player__dot { background: var(--color-border-strong); border-radius: 1px; }
.player__dot[data-active="true"] { background: var(--color-brand); }
.player__counter {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

/* =========================================================================
   15. СРАВНЕНИЕ «БЫЛО/СТАЛО»
   ========================================================================= */
.compare__side {
  background: var(--color-canvas-sunken);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.compare__side:last-child {
  background: var(--color-surface);
  border-style: solid;
  border-left: 3px solid var(--color-brand);
}
.compare__label {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.compare__label--after { color: var(--color-text-link); }
.compare__file {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: 2px;
}
.compare__file-name { font-family: var(--font-mono); color: var(--color-text); }
.compare__file-meta { font-family: var(--font-mono); color: var(--color-text-subtle); }
.compare__note { color: var(--color-text-muted); }
.compare__panel {
  background: var(--table-row-bg);
  border: var(--border-width) solid var(--table-border);
  border-radius: var(--radius-md);
}
.compare__row { border-bottom-color: var(--table-border); }
.compare__row-title { color: var(--color-text); }
.compare__panel-foot { border-top-color: var(--table-border); color: var(--color-text-subtle); }

/* =========================================================================
   16. РАСКЛАДКА «БОКОВОЕ МЕНЮ + КОНТЕНТ»
   ========================================================================= */
.page-side__title {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
}
.page-side__link {
  border-left: 3px solid var(--color-border);
  color: var(--color-text-muted);
}
.page-side__link:hover { color: var(--color-text-link); border-left-color: var(--color-border-strong); }
.page-side__link[aria-current="true"] {
  border-left-color: var(--color-brand);
  color: var(--color-text);
}

@media (max-width: 1000px) {
  .page-side {
    background: var(--color-canvas);
    border-bottom: var(--border-width) solid var(--color-border);
  }
  .page-side__link {
    border: var(--border-width) solid var(--color-border);
    border-radius: 2px;
  }
  .page-side__link[aria-current="true"] {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
  }
}

/* =========================================================================
   17. ПЛИТКИ, ЦЕПОЧКА ЭТАПОВ, ДЕРЕВО, СТОРОНЫ, ВЫГРУЗКА
   ========================================================================= */
.tile {
  background: var(--tile-bg);
  color: var(--tile-text);
  border: var(--border-width) solid var(--color-border);
  border-left: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.tile:hover { border-left-color: var(--color-brand); }
.tile__icon { color: var(--color-brand); }
.tile__name { color: var(--color-text); }
.tile__note { color: var(--color-text-muted); }

.flow__panel {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-top: 2px solid var(--color-brand);
  border-radius: var(--radius-lg);
}
.flow__meta { border-top-color: var(--color-border); }
.flow__meta dt {
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.flow__meta dd { color: var(--color-text); }

.tree__item {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.tree__item[open] { border-left: 3px solid var(--color-brand); }
.tree__head::after { color: var(--color-brand); font-family: var(--font-mono); }
.tree__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
}
.tree__list li { color: var(--color-text-muted); }

.sides__card {
  background: var(--color-surface-sunken);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.sides__label {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
}
.sides__link { font-family: var(--font-mono); color: var(--color-text-muted); }

.pick__switch input { accent-color: var(--color-brand); }

/* =========================================================================
   18. ПАНЕЛИ, КАЛЬКУЛЯТОР, ЧЕК-ЛИСТ, МЕНЮ ПО ПРАВАМ, ДИАГРАММА СРОКОВ
   ========================================================================= */
.panel {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-top: 2px solid var(--color-brand);
  border-radius: var(--radius-lg);
}
.panel__title { letter-spacing: -0.01em; }
.panel__lead { color: var(--color-text-muted); }
.panel__note { color: var(--color-text-subtle); }
.panel__label {
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--field-label);
}
.panel__hint { color: var(--field-subtle); }
.panel__input {
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--border-width) solid var(--field-border);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.panel__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

/* Расчёт суммы риска — табло калькулятора. */
.calc__out {
  background: var(--color-surface-sunken);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-md);
}
.calc__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.calc__unit { font-family: var(--font-mono); color: var(--color-text-muted); }
.calc__steps li { font-family: var(--font-mono); color: var(--color-text-muted); }
.calc__steps li::before { background: var(--color-border-strong); border-radius: 0; }
.calc__steps li[data-on="true"] { color: var(--color-text); }
.calc__steps li[data-on="true"]::before { background: var(--color-brand); }

.checklist__item { border-radius: 2px; }
.checklist__item:hover { background: var(--color-surface-sunken); }
.checklist__item input { accent-color: var(--color-brand); }
.checklist__gate {
  background: var(--color-surface-sunken);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.checklist__msg { font-family: var(--font-mono); color: var(--color-text-muted); }

.perm__menu {
  background: var(--code-bg);
  color: var(--code-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
}
.perm__empty { color: var(--color-text-subtle); font-family: var(--font-mono); }

.gantt__label { font-family: var(--font-mono); color: var(--color-text); }
.gantt__track { background: var(--progress-bg); border-radius: 2px; }
/* Подпись внутри полосы остаётся наборной: моноширинный шрифт шире, и
   надпись молча обрезалась краем полосы на узком экране. */
.gantt__bar {
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
.gantt__bar[data-state="overdue"] { background: var(--chip-danger-bg); color: var(--chip-danger-text); box-shadow: inset 2px 0 0 0 var(--color-danger); }
.gantt__bar[data-state="near"]    { background: var(--chip-warn-bg);   color: var(--chip-warn-text);   box-shadow: inset 2px 0 0 0 var(--color-warning); }
.gantt__bar[data-state="work"]    { background: var(--chip-ok-bg);     color: var(--chip-ok-text);     box-shadow: inset 2px 0 0 0 var(--color-accent); }
/* «Статус не определён» заливается тем же нейтральным тоном, что и дорожка:
   в тёмной теме --chip-muted-bg (#171f2e) и --progress-bg (#1a2536) различаются
   на 1,05:1, в светлой — на 1,19:1, поэтому полоса пропадала и прочитать её
   границы было нельзя. Насечка слева и обводка задают протяжённость полосы
   независимо от заливки — как у трёх остальных состояний. */
.gantt__bar[data-state="none"]    { background: var(--chip-muted-bg);  color: var(--chip-muted-text);  box-shadow: inset 2px 0 0 0 var(--color-text-subtle), inset 0 0 0 1px var(--color-border-strong); }

/* =========================================================================
   19. ФОРМЫ ЗАХВАТА
   ========================================================================= */
.form {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-top: 2px solid var(--color-brand);
  border-radius: var(--radius-lg);
}
.form__label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--field-label);
}
.form__label .req { color: var(--color-danger); }
.form__control {
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--border-width) solid var(--field-border);
  border-radius: 2px;
}
.form__control:hover { border-color: var(--color-border-strong); }
.form__control:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.form__control[data-invalid="true"] {
  border-color: var(--field-invalid);
  box-shadow: inset 3px 0 0 0 var(--field-invalid);
}
.form__hint { color: var(--field-subtle); }
.form__error { font-family: var(--font-mono); color: var(--field-invalid); }
.form__consent { color: var(--field-label); }
.form__consent input[type="checkbox"] { accent-color: var(--color-brand); }
.form-note { font-family: var(--font-mono); color: var(--color-text-subtle); }

fieldset.form__field {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
fieldset.form__field > legend {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--field-label);
}

.form__result {
  background: var(--info-bg);
  color: var(--info-text);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-md);
}
.form__result h3 { color: var(--info-text); border-bottom: 0; padding-bottom: 0; }

/* Теги ролей */
.tags__label {
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--border-width) solid var(--field-border);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.03em;
}
.tags__input:hover + .tags__label { border-color: var(--color-border-strong); }
.tags__input:checked + .tags__label {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}

/* Квиз */
.quiz {
  background: var(--color-surface-sunken);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.quiz__legend { color: var(--color-text); }
.quiz__hint { font-family: var(--font-mono); color: var(--color-text-subtle); }
.quiz__option {
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--border-width) solid var(--field-border);
  border-radius: 2px;
}
.quiz__option:hover { border-color: var(--color-brand); }
.quiz__option input[type="checkbox"] { accent-color: var(--color-brand); }
.quiz__summary {
  background: var(--info-bg);
  color: var(--info-text);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: 2px;
}

/* Календарь: выбор дня и времени */
.slots__title {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--field-label);
}
.slots__days {
  padding: var(--space-2);
  background: var(--color-surface-sunken);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.slots__day {
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--border-width) solid var(--field-border);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.slots__date { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.slots__weekday { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--field-subtle); }
.slots__time {
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--border-width) solid var(--field-border);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.slots__day:hover, .slots__time:hover { border-color: var(--color-brand); }
.slots__day[aria-pressed="true"], .slots__time[aria-pressed="true"] {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.slots__day[aria-pressed="true"] .slots__weekday { color: var(--btn-primary-text); }
.slots__picked { font-family: var(--font-mono); color: var(--color-text-muted); }

/* Калькулятор трудозатрат */
.roi {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-top: 2px solid var(--color-brand);
  border-radius: var(--radius-lg);
}
.roi__range { accent-color: var(--color-brand); }
.roi__share {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--field-label);
}
.roi__line {
  background: var(--color-surface-sunken);
  border: var(--border-width) solid var(--color-border);
  border-radius: 2px;
  color: var(--color-text);
}
.roi__line--total {
  background: var(--info-bg);
  color: var(--info-text);
  border-left: 3px solid var(--color-brand);
}
.roi__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.roi__formula {
  background: var(--code-bg);
  color: var(--code-text);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: 2px;
}

/* Вопросы, шаги, материалы, реквизиты, схема проезда */
.faq__item {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.faq__item[open] { border-left: 3px solid var(--color-brand); }
.faq__q { color: var(--color-text); }
.faq__q::before { color: var(--color-brand); font-family: var(--font-mono); }

.steps__item {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.steps__item::before {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: 2px;
  font-family: var(--font-mono);
}
.steps__title { color: var(--color-text); }
.steps__text { color: var(--color-text-muted); }

.dl__item {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-top: 2px solid var(--color-brand);
  border-radius: var(--radius-lg);
}
.dl__kind {
  background: var(--chip-info-bg);
  color: var(--chip-info-text);
  border-radius: 2px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.dl__title { color: var(--color-text); }
.dl__text { color: var(--color-text-muted); }
.dl__meta { font-family: var(--font-mono); color: var(--color-text-subtle); }

.req-list dt {
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.req-list dd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  border-bottom-color: var(--color-border);
  color: var(--color-text);
}

.route {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.route__caption { color: var(--color-text-subtle); }

/* =========================================================================
   20. COOKIE-БАННЕР, БЛОК КЛИЕНТОВ (выключен), ПРАВОВЫЕ, 404
   ========================================================================= */
.cookie-banner {
  background: var(--banner-bg);
  color: var(--banner-text);
  border: var(--border-width) solid var(--footer-border);
  border-top: 2px solid var(--color-brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.cookie-banner p { color: var(--banner-muted); }
.cookie-banner a { color: var(--footer-link); }

.client-tile {
  background: var(--tile-bg);
  color: var(--tile-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.client-tile__name { font-family: var(--font-mono); letter-spacing: 0.04em; }

.legal-toc { font-size: var(--fs-sm); }
.legal-req dt { font-family: var(--font-mono); letter-spacing: 0.03em; }
.legal-req dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-text); }

.error-page__code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--color-brand);
}
.error-page__links { color: var(--color-text-muted); }

/* =========================================================================
   21. ПЕЧАТЬ — бумага всегда светлая.
   Базовый print-сброс лежит в components.css, то есть РАНЬШЕ темы, и без
   этого блока ночные значения ушли бы на печать. Повторяем сброс и гасим
   декоративные добавки темы (сетку первого экрана, лазурные насечки).
   ========================================================================= */
@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;

    --color-canvas: #ffffff;
    --color-canvas-sunken: #ffffff;
    --color-surface: #ffffff;
    --color-surface-sunken: #ffffff;
    --color-text: #000000;
    --color-text-muted: #222222;
    --color-text-subtle: #333333;
    --color-text-link: #000000;
    --color-text-link-hover: #000000;
    --color-text-on-brand: #000000;
    --color-brand: #000000;
    --color-brand-strong: #000000;
    --color-accent: #000000;
    --color-danger: #000000;
    --color-warning: #000000;
    --color-border: #999999;
    --color-border-strong: #666666;
    --color-focus: #000000;
    --color-selection-bg: #ffffff;

    --term-row-hover: #ffffff;
    --term-grid-line: transparent;
    --term-overlay: transparent;

    --header-bg: #ffffff;
    --header-text: #000000;
    --header-muted: #333333;
    --header-border: #999999;

    --hero-bg: #ffffff;
    --hero-text: #000000;
    --hero-muted: #333333;
    --hero-border: #999999;

    --band-bg: #ffffff;
    --band-text: #000000;
    --band-muted: #333333;

    --footer-bg: #ffffff;
    --footer-text: #000000;
    --footer-muted: #333333;
    --footer-link: #000000;
    --footer-border: #999999;

    --btn-primary-bg: #ffffff;
    --btn-primary-text: #000000;
    --btn-primary-bg-hover: #ffffff;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: #000000;
    --btn-secondary-border: #666666;
    --btn-ghost-bg: transparent;
    --btn-ghost-text: #000000;

    --rule-bg: #ffffff;
    --rule-text: #000000;
    --rule-accent: #666666;
    --rule-warn-bg: #ffffff;
    --rule-warn-text: #000000;
    --rule-warn-accent: #666666;

    --info-bg: #ffffff;
    --info-text: #000000;
    --info-accent: #666666;

    --table-head-bg: #ffffff;
    --table-head-text: #000000;
    --table-row-bg: #ffffff;
    --table-row-alt-bg: #ffffff;
    --table-border: #999999;

    --field-bg: #ffffff;
    --field-text: #000000;
    --field-label: #000000;
    --field-subtle: #333333;
    --field-border: #666666;
    --field-invalid: #000000;

    --tip-bg: #ffffff;
    --tip-text: #000000;
    --search-bg: #ffffff;
    --search-text: #000000;
    --search-subtle: #333333;
    --banner-bg: #ffffff;
    --banner-text: #000000;
    --banner-muted: #333333;

    --tile-bg: #ffffff;
    --tile-text: #000000;

    --code-bg: #ffffff;
    --code-text: #000000;

    --totop-bg: #ffffff;
    --totop-text: #000000;

    --progress-bg: #ffffff;
    --progress-fill: #999999;

    --chip-ok-bg: #ffffff;     --chip-ok-text: #000000;
    --chip-warn-bg: #ffffff;   --chip-warn-text: #000000;
    --chip-info-bg: #ffffff;   --chip-info-text: #000000;
    --chip-muted-bg: #ffffff;  --chip-muted-text: #000000;
    --chip-danger-bg: #ffffff; --chip-danger-text: #000000;

    --dgm-node-bg: #ffffff;
    --dgm-node-text: #000000;
    --dgm-node-border: #666666;
    --dgm-accent-bg: #ffffff;
    --dgm-accent-text: #000000;
    --dgm-line: #666666;
    --dgm-label: #333333;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-focus: none;
  }

  html, body { background: #ffffff; color: #000000; }

  /* Декор темы на бумаге не нужен: сетка первого экрана, лазурные насечки,
     подсветка строк и тени. */
  .hero { background: #ffffff; box-shadow: none; border-bottom: 1px solid #999999; }
  .site-header, .site-footer, .band, .modal__dialog, .cookie-banner,
  .form, .roi, .dl__item, .panel, .flow__panel, .facts li, .site-search__panel {
    box-shadow: none;
  }
  .band { border-top: 1px solid #999999; }
  .table thead th { border-bottom: 1px solid #999999; }
  .mock__bar { border-bottom: 1px solid #999999; }
  .table tbody tr:hover, .mock__table tbody tr:hover { background: #ffffff; }
  .player__row--sel, .form__control[data-invalid="true"] { box-shadow: none; }

  /* На бумаге вся палитра состояний схлопывается в белый: и дорожка, и все
     четыре полосы получали --progress-bg / --chip-*-bg = #ffffff, а насечки
     слева здесь же и снимались. Диаграмма печаталась пустой — оставались
     только подписи, висящие в воздухе. Протяжённость полосы на печати задаём
     контуром, а состояние — толщиной насечки слева, а не заливкой. */
  .gantt__track { border: 1px solid #999999; }
  .gantt__bar { border: 1px solid #666666; }
  .gantt__bar[data-state="overdue"] { box-shadow: inset 4px 0 0 0 #000000; }
  .gantt__bar[data-state="near"]    { box-shadow: inset 4px 0 0 0 #666666; }
  .gantt__bar[data-state="work"]    { box-shadow: inset 4px 0 0 0 #999999; }
  .gantt__bar[data-state="none"]    { box-shadow: inset 4px 0 0 0 #cccccc; }
  .stat, .card, .tile, .compare__side:last-child, .tree__item[open],
  .faq__item[open], .form__result, .roi__line--total, .roi__formula,
  .calc__out, .quiz__summary, .rule-box, .info-box, .compare__file {
    border-left-color: #666666;
  }
  .facts li, .flow__panel, .panel, .form, .roi, .dl__item, .modal__dialog {
    border-top-color: #999999;
  }
}