/* ============================================================================
   Мир «Пост наблюдения» — общесайтовая система (#432).

   До 21.09.2026 мир жил только на главной (home.css под .home), а остальной
   сайт стоял на теме Bootswatch Darkly. Перекрашивать страницы по одной —
   путь к десятку «почти одинаковых» версий, поэтому система поднята на уровень
   всего сайта: токены, шрифты, органы управления, поля, таблицы, модальные
   окна, навигация и уведомления переопределяются здесь, на переменных
   и компонентах Bootstrap. Мир получает каждая страница, включая те,
   до которых ручная доводка не дошла.

   Файл подключается в _Layout.cshtml после темы Bootswatch и site.css.
   Источник правды о системе — DESIGN.md в корне репозитория.
   ============================================================================ */

/* --- Шрифты. Свои, с нашего же домена ------------------------------------
   Два регистра и ничего между ними (подъём от «Образца вариативного шрифта»):
   приборно-мелкая гравировка подписей против огромной табличной цифры.

   Martian Mono — гравировка и показания. Моноширинный здесь не костюм
   «под техно», а его законное применение: измерение и числа, которые
   обязаны стоять в колонку.
   Golos Text — длинная проза: FAQ, кейсы, отзывы. Русский текстовый шрифт
   государственных интерфейсов; для страницы, говорящей о правах и
   доказательствах, это регистр документа, а не рекламы.
   Оба вариативные: один файл на всю шкалу насыщенности.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Martian Mono';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/martian-mono-cyrillic-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Martian Mono';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/martian-mono-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/assets/fonts/golos-text-cyrillic-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/assets/fonts/golos-text-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Токены мира ----------------------------------------------------------
   Объявлены на :root, а не на .home, и это не небрежность. Шапка, подвал,
   боковая плашка и модальные окна живут ВНЕ контейнера .home — они соседи
   элемента main. Пока токены стояли на .home, каждое правило вида
   `body:has(.home) .navbar { background: var(--i-housing) }` было
   недействительным на этапе вычисления значения и молча превращалось
   в unset: шапка оставалась прозрачной, плашка кук — без корпуса.
   Имена с префиксом --i- уникальны, на остальных страницах они просто
   не используются. Применение по-прежнему scoped: .home и body:has(.home).
   -------------------------------------------------------------------------- */

:root {
    /* Корпус прибора: тёплый графит с зелёным подтоном — крашеный металл,
       а не «почти чёрный». Плоский near-black здесь запрещён: с него
       начинается ровно тот тёмный шаблон, который мы заменяем. */
    --i-housing: #1a1d18;
    --i-housing-lo: #121410;
    --i-housing-hi: #2c302a;
    --i-edge: #3a3f36;

    /* Врезанное экранное поле — холоднее и глубже корпуса. */
    --i-screen: #0b0e0c;
    --i-grat: #1e2b22;
    --i-grat-major: #2e4234;

    /* Люминофор — фирменный зелёный, решение владельца 21.09.2026 (было
       янтарное P3). Зелёный уже стоит в логотипе, и радарный экран исторически
       зелёный. Светится не «неоном», а затуханием — метка гаснет за секунды
       после прохода развёртки. Именно #00BC8C, а не матричный #00FF41:
       бирюзовый тон бренда и отделяет прибор от «хакерского терминала».
       Контраст: 6,9:1 на корпусе, 7,9:1 на экранном поле. */
    --i-phos: #00bc8c;
    /* Приглушённый люминофор: подписи машинной колонки и схемы.
       5,1:1 на корпусе и 5,8:1 на экранном поле — годится и тексту. */
    --i-phos-dim: #2f9e7c;

    /* Гравировка по панели. Не белый: панельная краска тёплая и костяная. */
    --i-ink: #d8d2c4;
    /* Вторичная гравировка. #A09A8C, а не прежний #9A9486: на подсвеченной
       филёнке --i-housing-hi тот давал 4,45:1 при полу 4,5. Этот — 4,8:1 там
       и 6,0:1 на корпусе. */
    --i-ink-2: #a09a8c;

    /* Красный — цвет нарушения, и только его. Стоит в двух местах, которые
       говорят одно и то же: «32 268 нарушений» в протоколе и чужие кадры
       на поле первого экрана. Больше нигде. До 21.09.2026 правило звучало
       «тратится один раз»; владелец попросил понятное без подписи разделение
       своих и чужих кадров, и красный стал смыслом, а не редкостью. */
    --i-alarm: #f0554a;

    --i-mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --i-text: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Шаг сетки делений. Всё на странице кратно ему: прибор размечен,
       а не свёрстан на глаз. */
    --i-u: 8px;

    /* Кегли в пикселях, а не в rem: site.css уводит корневой кегль
       на 14 px ниже 768, и шкала в rem там осыпается. */
    --i-t-label: 12px;
    --i-t-sm: 14px;
    --i-t-base: 17px;
    --i-t-lead: 20px;
    --i-t-h3: 21px;
    --i-t-h2: 28px;
    /* Базовое значение — телефонное. «компромиссов,» на 360 в 40 px не влезает
       в строку и уезжает за край: у русского заголовка самое длинное слово
       и задаёт потолок кегля, а не желаемый масштаб. */
    --i-t-h1: 30px;

    --i-radius: 2px;
    --i-measure: 68ch;

    /* Одна двигательная грамматика на весь прибор: затухающий выход.
       Упругой кривой в стилях нет намеренно — на интерфейсных переходах она
       читается как трюк, а не как масса. Единственный перелёт на странице —
       щелчок пиковой метки журнала, и он в home-instrument.js. */
    --i-ease: cubic-bezier(.16, 1, .3, 1);
}

/* --- Поверхности браузера -------------------------------------------------
   Выделение, каретка, полоса прокрутки и кольцо фокуса приезжают с
   умолчаниями, которые не принадлежат ни одной системе. Прибор красит их
   сам — это самый дешёвый признак того, что страницу сделали, а не собрали. */

::selection {
    background: var(--i-phos);
    color: #14170f;
}

{
    caret-color: var(--i-phos);
    scrollbar-color: var(--i-housing-hi) var(--i-housing-lo);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--i-housing-lo);
}

::-webkit-scrollbar-thumb {
    background: var(--i-housing-hi);
    border: 3px solid var(--i-housing-lo);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--i-edge);
}

/* Кольцо фокуса в мире прибора — цвета люминофора. Классы перечислены поимённо:
   у темы есть свои .nav-link:focus-visible{outline:0}, и они весомее
   селектора по тегу. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.dropdown-item:focus-visible,
.accordion-button:focus-visible,
.btn-close:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--i-phos);
    outline-offset: 3px;
    border-radius: 0;
}

/* ============================================================================
   Шапка и подвал
   Стоковый компонент внутри выдержанного мира — провал. До #432 эти правила
   видели только главную; теперь они общие для всего сайта.
   ============================================================================ */

.navbar {
    background: var(--i-housing) !important;
    border-bottom: 1px solid var(--i-housing-hi);
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar .container {
    max-width: 1320px;
}

.navbar-brand > span:last-child {
    font-family: var(--i-mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--i-ink);
}

.navbar-text {
    font-family: var(--i-mono);
    font-size: var(--i-t-label) !important;
    letter-spacing: .06em;
    color: var(--i-ink-2) !important;
}

.navbar .nav-link {
    font-family: var(--i-mono);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--i-ink-2) !important;
}

.navbar .nav-link:hover {
    color: var(--i-phos) !important;
}

footer {
    background: var(--i-housing-lo) !important;
    border-top: 1px solid var(--i-housing-hi);
    color: var(--i-ink-2) !important;
}

footer .container {
    max-width: 1320px;
}

footer a,
footer .btn-link {
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    letter-spacing: .06em;
    color: var(--i-ink-2) !important;
    text-decoration: none;
}

footer a:hover,
footer .btn-link:hover {
    color: var(--i-phos) !important;
    text-decoration: underline;
    text-underline-offset: .2em;
}

footer p {
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    letter-spacing: .06em;
}

/* ============================================================================
   Общие компоненты сайта: шапка, боковой ярлык, кнопки прокрутки, модалки
   Приезжают из темы Bootswatch и на приборной панели выглядят чужими.
   До #432 правились только на главной; теперь — везде.
   ============================================================================ */

/* Логотип в шапке: обойма иконки красилась в акцент старой темы. */
.navbar .bs-icon {
    color: inherit;
    background: none;
}

/* Иконки из набора в навигации сняты: подписи говорят сами, а чужой
   набор знаков внутри выдержанного мира — заплатка. */
.navbar .nav-link .bi {
    display: none;
}

/* Кнопка мобильного меню — та же клавиша с фаской, что и остальные органы
   управления. Бутстраповская картинка-гамбургер заменена нарисованными
   полосами: свой знак вместо знака из чужой системы. */
.navbar-toggler {
    padding: 0;
    width: 44px;
    height: 44px;
    background: var(--i-housing-hi);
    border: 1px solid var(--i-edge);
    border-radius: var(--i-radius);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .07);
}

.navbar-toggler-icon {
    width: 18px;
    height: 12px;
    background-image: none;
    background-color: transparent;
    border-top: 1.5px solid var(--i-ink);
    border-bottom: 1.5px solid var(--i-ink);
    position: relative;
}

.navbar-toggler-icon::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1.5px;
    margin-top: -.75px;
    background: var(--i-ink);
}

/* Кнопка регистрации в шапке — тот же орган управления, но вторичный:
   филёнка вместо зелёной лицевой панели. Двух главных кнопок на экране
   быть не должно, иначе целевое действие перестаёт читаться. */
.navbar .btn-success,
.navbar .btn-success:visited {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    font-family: var(--i-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--i-ink);
    background: var(--i-housing-hi);
    border: 1px solid var(--i-edge);
    border-radius: var(--i-radius);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .07);
}

.navbar .btn-success:hover,
.navbar .btn-success:focus {
    color: #14170f;
    background: var(--i-phos);
    border-color: #52d4ad;
}

/* Боковая плашка «Сообщить о проблеме»: была синей таблеткой поверх
   панели, стала привинченным к корпусу ярлыком. */
.rp-button,
.rp-button:hover {
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--i-ink-2);
    background: var(--i-housing-hi);
    border: 1px solid var(--i-edge);
    border-right: 0;
    border-radius: var(--i-radius) 0 0 var(--i-radius);
    box-shadow: none;
}

.rp-button:hover {
    color: var(--i-phos);
}

/* Кнопки прокрутки: круглые синие таблетки на приборе неуместны.
   Квадратная клавиша с фаской — тот же орган управления, что и везде. */
#scrollToTopBtn,
#scrollToBottomBtn {
    color: var(--i-ink-2) !important;
    background: var(--i-housing-hi) !important;
    border: 1px solid var(--i-edge) !important;
    border-radius: var(--i-radius) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .07);
}

#scrollToTopBtn:hover,
#scrollToBottomBtn:hover {
    color: #14170f !important;
    background: var(--i-phos) !important;
    border-color: #52d4ad !important;
}

/* Модальные окна, включая плашку согласия на куки: те же материалы корпуса.
   Плашка кук стоит поверх первого экрана и видна раньше самой страницы —
   зелёная и красная таблетки темы на приборной панели ломают мир на входе. */
.modal-content {
    background: var(--i-housing);
    border: 1px solid var(--i-housing-hi);
    border-radius: var(--i-radius);
    color: var(--i-ink);
}

#cookieConsentModal .modal-title {
    font-family: var(--i-text);
    font-weight: 600;
    color: var(--i-ink);
}

#cookieConsentModal .btn-success {
    color: #14170f;
    background: var(--i-phos);
    border: 1px solid #52d4ad;
}

#cookieConsentModal .btn-danger {
    color: var(--i-ink-2);
    background: none;
    border: 1px solid var(--i-edge);
}

#cookieConsentModal .btn-danger:hover {
    color: var(--i-ink);
    border-color: var(--i-ink-2);
}

#cookieConsentModal .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: var(--i-radius);
}

.modal-header,
.modal-footer {
    border-color: var(--i-housing-hi);
}

.modal .form-control,
.modal .form-select {
    background: var(--i-screen);
    border: 1px solid var(--i-edge);
    border-radius: var(--i-radius);
    color: var(--i-ink);
}

.modal .form-control:focus,
.modal .form-select:focus {
    border-color: var(--i-phos);
    box-shadow: none;
}


/* ============================================================================
   Система на уровне Bootstrap (#432)
   Тема Bootswatch Darkly остаётся базой — её компоненты, сетка, поведение.
   Здесь переопределяется всё, что она красит: переменные Bootstrap 5.3 там,
   где компонент на них построен, и сами компоненты там, где тема зашила
   цвета в скомпилированный CSS.
   ============================================================================ */

/* Цвет внимания — янтарь, бывший люминофор главной. Только для системных
   предупреждений («почта не подтверждена»): это не нарушение и не ошибка,
   а просьба обратить внимание. Контраст на корпусе 8,3:1. */
:root {
    --i-caution: #f0a81e;
}

/* Красный с #432 означает нарушение, ошибку и необратимое действие. На главной
   он по-прежнему стоит только на нарушениях; в рабочих страницах к ним
   прибавляются ошибки ввода и удаление — прятать их из красного значило бы
   спорить с привычкой, которую человек приносит с собой. */

:root {
    --bs-body-font-family: var(--i-text);
    --bs-font-sans-serif: var(--i-text);
    --bs-font-monospace: var(--i-mono);
    --bs-body-line-height: 1.55;
    --bs-body-color: var(--i-ink);
    --bs-body-color-rgb: 216, 210, 196;
    --bs-body-bg: var(--i-housing);
    --bs-body-bg-rgb: 26, 29, 24;
    --bs-emphasis-color: #efe9dc;
    --bs-emphasis-color-rgb: 239, 233, 220;
    --bs-secondary-color: var(--i-ink-2);
    --bs-secondary-color-rgb: 160, 154, 140;
    --bs-secondary-bg: var(--i-housing-hi);
    --bs-secondary-bg-rgb: 44, 48, 42;
    --bs-tertiary-color: var(--i-ink-2);
    --bs-tertiary-color-rgb: 160, 154, 140;
    --bs-tertiary-bg: var(--i-housing-lo);
    --bs-tertiary-bg-rgb: 18, 20, 16;
    --bs-heading-color: var(--i-ink);
    --bs-link-color: var(--i-phos);
    --bs-link-color-rgb: 0, 188, 140;
    --bs-link-hover-color: var(--i-ink);
    --bs-link-hover-color-rgb: 216, 210, 196;
    --bs-code-color: var(--i-phos);
    --bs-highlight-color: var(--i-ink);
    --bs-highlight-bg: rgba(0, 188, 140, .25);
    --bs-border-color: var(--i-housing-hi);
    --bs-border-color-translucent: rgba(58, 63, 54, .75);
    --bs-border-radius: 2px;
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: 2px;
    --bs-border-radius-xl: 2px;
    --bs-border-radius-xxl: 2px;
    --bs-border-radius-2xl: 2px;
    --bs-border-radius-pill: 2px;
    /* Падающих теней в мире нет ни одной — глубина только фаской. */
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
    --bs-box-shadow-inset: inset 0 1px 0 rgb(0 0 0 / .6);
    --bs-focus-ring-color: rgba(0, 188, 140, .45);
    --bs-form-valid-color: var(--i-phos);
    --bs-form-valid-border-color: var(--i-phos);
    --bs-form-invalid-color: var(--i-alarm);
    --bs-form-invalid-border-color: var(--i-alarm);

    --bs-primary: var(--i-phos);
    --bs-primary-rgb: 0, 188, 140;
    --bs-secondary: var(--i-housing-hi);
    --bs-secondary-rgb: 44, 48, 42;
    --bs-success: var(--i-phos);
    --bs-success-rgb: 0, 188, 140;
    --bs-info: var(--i-ink-2);
    --bs-info-rgb: 160, 154, 140;
    --bs-warning: var(--i-caution);
    --bs-warning-rgb: 240, 168, 30;
    --bs-danger: var(--i-alarm);
    --bs-danger-rgb: 240, 85, 74;
    --bs-light: var(--i-ink);
    --bs-light-rgb: 216, 210, 196;
    --bs-dark: var(--i-housing-lo);
    --bs-dark-rgb: 18, 20, 16;

    --bs-primary-text-emphasis: var(--i-phos);
    --bs-success-text-emphasis: var(--i-phos);
    --bs-danger-text-emphasis: var(--i-alarm);
    --bs-warning-text-emphasis: var(--i-caution);
    --bs-info-text-emphasis: var(--i-ink);
    --bs-secondary-text-emphasis: var(--i-ink);
    --bs-primary-bg-subtle: rgba(0, 188, 140, .08);
    --bs-success-bg-subtle: rgba(0, 188, 140, .08);
    --bs-danger-bg-subtle: rgba(240, 85, 74, .08);
    --bs-warning-bg-subtle: rgba(240, 168, 30, .08);
    --bs-info-bg-subtle: var(--i-housing-hi);
    --bs-secondary-bg-subtle: var(--i-housing-hi);
    --bs-primary-border-subtle: rgba(0, 188, 140, .5);
    --bs-success-border-subtle: rgba(0, 188, 140, .5);
    --bs-danger-border-subtle: rgba(240, 85, 74, .55);
    --bs-warning-border-subtle: rgba(240, 168, 30, .5);
    --bs-info-border-subtle: var(--i-edge);
    --bs-secondary-border-subtle: var(--i-edge);
}

body {
    font-family: var(--i-text);
    background-color: var(--i-housing);
    color: var(--i-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--i-text);
    color: var(--i-ink);
    letter-spacing: -.015em;
    text-wrap: balance;
}

h1, .h1, h2, .h2 {
    font-weight: 700;
}

h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-weight: 600;
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

hr {
    border-color: var(--i-housing-hi);
    opacity: 1;
}

.text-muted,
.text-body-secondary,
.text-secondary {
    color: var(--i-ink-2) !important;
}

code, kbd, samp, pre {
    font-family: var(--i-mono);
}

kbd {
    color: var(--i-ink);
    background: var(--i-housing-hi);
    border: 1px solid var(--i-edge);
    border-radius: var(--i-radius);
}

/* --- Органы управления ----------------------------------------------------
   Кнопка в мире — механический орган с фаской: моноширинная гравировка
   заглавными, поднятое и нажатое состояние, ход между ними. Главная ведёт
   свой .i-cta-btn, у всего остального сайта тот же вид на .btn. */

.btn:not(.btn-link):not(.btn-close) {
    --bs-btn-font-family: var(--i-mono);
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 13px;
    --bs-btn-border-radius: var(--i-radius);
    --bs-btn-box-shadow: inset 0 1px 0 rgb(255 255 255 / .07);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: var(--bs-btn-box-shadow);
    transition: transform .12s var(--i-ease), background-color .18s var(--i-ease),
    border-color .18s var(--i-ease), color .18s var(--i-ease);
}

.btn-lg:not(.btn-link) {
    --bs-btn-font-size: 14px;
    min-height: 52px;
}

.btn-sm:not(.btn-link):not(.btn-close) {
    --bs-btn-font-size: 12px;
    min-height: 36px;
}

/* На сенсорном экране мелкая кнопка не бывает мельче пальца. */
@media (pointer: coarse) {
    .btn-sm:not(.btn-link):not(.btn-close) {
        min-height: 44px;
    }
}

.btn:not(.btn-link):not(.btn-close):active {
    transform: translateY(1px);
}

.btn-primary,
.btn-success {
    --bs-btn-color: #14170f;
    --bs-btn-bg: var(--i-phos);
    --bs-btn-border-color: #52d4ad;
    --bs-btn-hover-color: #14170f;
    --bs-btn-hover-bg: #14cc9b;
    --bs-btn-hover-border-color: #52d4ad;
    --bs-btn-active-color: #14170f;
    --bs-btn-active-bg: #00a67c;
    --bs-btn-active-border-color: #52d4ad;
    --bs-btn-disabled-color: #14170f;
    --bs-btn-disabled-bg: var(--i-phos-dim);
    --bs-btn-disabled-border-color: var(--i-phos-dim);
    --bs-btn-focus-shadow-rgb: 0, 188, 140;
    --bs-btn-box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -2px 0 rgb(0 0 0 / .28);
}

.btn-secondary,
.btn-dark,
.btn-light,
.btn-info,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
    --bs-btn-color: var(--i-ink);
    --bs-btn-bg: var(--i-housing-hi);
    --bs-btn-border-color: var(--i-edge);
    --bs-btn-hover-color: #14170f;
    --bs-btn-hover-bg: var(--i-phos);
    --bs-btn-hover-border-color: #52d4ad;
    --bs-btn-active-color: #14170f;
    --bs-btn-active-bg: #00a67c;
    --bs-btn-active-border-color: #52d4ad;
    --bs-btn-disabled-color: var(--i-ink-2);
    --bs-btn-disabled-bg: var(--i-housing);
    --bs-btn-disabled-border-color: var(--i-housing-hi);
    --bs-btn-focus-shadow-rgb: 0, 188, 140;
}

/* Необратимое действие — красной кромкой, а не заливкой: залитый красный
   спорил бы с отметками нарушений. */
.btn-danger,
.btn-outline-danger {
    --bs-btn-color: var(--i-alarm);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--i-alarm);
    --bs-btn-hover-color: #14170f;
    --bs-btn-hover-bg: var(--i-alarm);
    --bs-btn-hover-border-color: var(--i-alarm);
    --bs-btn-active-color: #14170f;
    --bs-btn-active-bg: #d9463c;
    --bs-btn-active-border-color: var(--i-alarm);
    --bs-btn-disabled-color: var(--i-ink-2);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--i-housing-hi);
    --bs-btn-focus-shadow-rgb: 240, 85, 74;
    --bs-btn-box-shadow: none;
}

.btn-warning,
.btn-outline-warning {
    --bs-btn-color: var(--i-caution);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--i-caution);
    --bs-btn-hover-color: #14170f;
    --bs-btn-hover-bg: var(--i-caution);
    --bs-btn-hover-border-color: var(--i-caution);
    --bs-btn-active-color: #14170f;
    --bs-btn-active-bg: #d9951a;
    --bs-btn-active-border-color: var(--i-caution);
    --bs-btn-box-shadow: none;
}

.btn-link {
    --bs-btn-color: var(--i-phos);
    --bs-btn-hover-color: var(--i-ink);
    --bs-btn-active-color: var(--i-ink);
    --bs-btn-disabled-color: var(--i-ink-2);
}

.btn-close {
    --bs-btn-close-opacity: .65;
    --bs-btn-close-hover-opacity: 1;
    --bs-btn-close-focus-shadow: none;
}

/* --- Поля ввода -------------------------------------------------------------
   Поле — врезанное окно экранного материала: то же, что поле первого экрана
   и окна схем, утоплено фаской. Свечения при фокусе нет — кромка загорается
   люминофором, а кольцо фокуса рисует общее правило поверхностей браузера. */

/* Поле набирается текстовым регистром, где бы ни стояло. Reboot велит полям
   наследовать шрифт родителя, и в шапке платы — гравировке заглавными — поиск
   по совпадениям набирал запрос моноширинными заглавными с разрядкой. */
.form-control,
.form-select {
    min-height: 44px;
    font-family: var(--i-text);
    font-size: 16px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--i-ink);
    background-color: var(--i-screen);
    border: 1px solid var(--i-edge);
    border-radius: var(--i-radius);
    box-shadow: inset 0 1px 0 rgb(0 0 0 / .6);
}

.form-control::placeholder {
    color: var(--i-ink-2);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    color: var(--i-ink);
    background-color: var(--i-screen);
    border-color: var(--i-phos);
    box-shadow: inset 0 1px 0 rgb(0 0 0 / .6);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    color: var(--i-ink-2);
    background-color: var(--i-housing);
    border-color: var(--i-housing-hi);
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a09a8c' stroke-linecap='square' stroke-width='1.6' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--i-alarm);
    background-image: none;
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--i-phos);
    background-image: none;
}

.invalid-feedback,
.field-validation-error,
.text-danger {
    color: var(--i-alarm) !important;
}

.field-validation-error,
.invalid-feedback {
    display: block;
    margin-top: 6px;
    font-size: 14px;
}

.validation-summary-errors ul {
    margin: 0 0 16px;
    padding-left: 18px;
}

/* Подпись поля — гравировка, как подписи показаний на главной. */
.form-label,
.col-form-label {
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--i-ink-2);
}

.form-text {
    font-size: 14px;
    color: var(--i-ink-2);
}

/* Плавающая подпись: гравировкой внутри окна, при заполнении поднимается.
   Масштаб подобран так, чтобы поднятая подпись не падала ниже 12 px. */
.form-floating > .form-control,
.form-floating > .form-select {
    min-height: 58px;
}

.form-floating > label {
    font-family: var(--i-mono);
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--i-ink-2);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--i-ink-2);
    transform: scale(.86) translateY(-.55rem) translateX(.15rem);
}

.form-floating > .form-control:focus ~ label {
    color: var(--i-phos);
}

.form-check-input {
    background-color: var(--i-screen);
    border: 1px solid var(--i-edge);
    box-shadow: inset 0 1px 0 rgb(0 0 0 / .6);
}

.form-check-input[type="checkbox"] {
    border-radius: var(--i-radius);
}

.form-check-input:checked {
    background-color: var(--i-phos);
    border-color: #52d4ad;
    box-shadow: none;
}

.form-check-input[type="checkbox"]:checked {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2314170f' stroke-linecap='square' stroke-width='2.4' d='m5 10 3.5 3.5L15 6.5'/%3e%3c/svg%3e");
}

.form-check-input[type="radio"]:checked {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2314170f'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: var(--i-phos);
    box-shadow: inset 0 1px 0 rgb(0 0 0 / .6);
}

/* Подпись флажка — фраза, а не шкальная надпись: читается текстовым регистром
   и строчными. Без явного правила она наследовала гравировку колонтитула платы,
   и «Скрыть с низким процентом схожести» разъезжалась заглавными на три строки. */
.form-check-label {
    font-family: var(--i-text);
    letter-spacing: normal;
    text-transform: none;
    color: var(--i-ink);
}

.card-header .form-check-label,
.card-footer .form-check-label {
    font-size: var(--i-t-sm);
}

.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a09a8c'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2314170f'/%3e%3c/svg%3e");
}

.input-group-text {
    font-family: var(--i-mono);
    font-size: 13px;
    color: var(--i-ink-2);
    background-color: var(--i-housing-hi);
    border-color: var(--i-edge);
}

/* --- Платы, журналы, списки -------------------------------------------------*/

.card {
    --bs-card-bg: var(--i-housing);
    --bs-card-color: var(--i-ink);
    --bs-card-border-color: var(--i-housing-hi);
    --bs-card-border-radius: var(--i-radius);
    --bs-card-inner-border-radius: var(--i-radius);
    --bs-card-cap-bg: var(--i-housing-lo);
    --bs-card-cap-color: var(--i-ink);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .04);
}

.card-header,
.card-footer {
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--i-ink-2);
}

/* Заголовок в шапке платы — название панели текстовым регистром. Наследуя
   гравировку шапки, он становился Golos заглавными — третьим регистром,
   которого в мире нет. */
.card-header :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-family: var(--i-text);
    font-size: 18px;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--i-ink);
}

.table,
.table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--i-ink);
    --bs-table-border-color: var(--i-housing-hi);
    --bs-table-striped-bg: rgba(216, 210, 196, .025);
    --bs-table-striped-color: var(--i-ink);
    --bs-table-hover-bg: rgba(0, 188, 140, .07);
    --bs-table-hover-color: var(--i-ink);
    --bs-table-active-bg: rgba(0, 188, 140, .1);
    --bs-table-active-color: var(--i-ink);
    font-variant-numeric: tabular-nums;
}

.table > thead th,
.table > thead td {
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--i-ink-2);
    border-bottom-color: var(--i-edge);
    vertical-align: bottom;
}

.list-group {
    --bs-list-group-color: var(--i-ink);
    --bs-list-group-bg: var(--i-housing);
    --bs-list-group-border-color: var(--i-housing-hi);
    --bs-list-group-border-radius: var(--i-radius);
    --bs-list-group-action-color: var(--i-ink);
    --bs-list-group-action-hover-color: var(--i-phos);
    --bs-list-group-action-hover-bg: var(--i-housing-hi);
    --bs-list-group-action-active-color: #14170f;
    --bs-list-group-action-active-bg: var(--i-phos);
    --bs-list-group-active-color: #14170f;
    --bs-list-group-active-bg: var(--i-phos);
    --bs-list-group-active-border-color: #52d4ad;
    --bs-list-group-disabled-color: var(--i-ink-2);
    --bs-list-group-disabled-bg: var(--i-housing);
}

.dropdown-menu {
    --bs-dropdown-color: var(--i-ink);
    --bs-dropdown-bg: var(--i-housing);
    --bs-dropdown-border-color: var(--i-edge);
    --bs-dropdown-border-radius: var(--i-radius);
    --bs-dropdown-inner-border-radius: var(--i-radius);
    --bs-dropdown-divider-bg: var(--i-housing-hi);
    --bs-dropdown-box-shadow: none;
    --bs-dropdown-link-color: var(--i-ink);
    --bs-dropdown-link-hover-color: var(--i-phos);
    --bs-dropdown-link-hover-bg: var(--i-housing-hi);
    --bs-dropdown-link-active-color: #14170f;
    --bs-dropdown-link-active-bg: var(--i-phos);
    --bs-dropdown-link-disabled-color: var(--i-ink-2);
    --bs-dropdown-header-color: var(--i-ink-2);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
}

/* Пункт меню — строка: значок и подпись по одной оси. Блочные части пункта
   (подпись и расшифровка под ней в меню «Игнорировать») встают друг под другом,
   как и задумано разметкой: без переноса строки flex ставил их рядом. */
.dropdown-item {
    min-height: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
}

.dropdown-item > .d-block {
    flex: 1 0 100%;
}

.dropdown-header {
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.modal {
    --bs-modal-bg: var(--i-housing);
    --bs-modal-color: var(--i-ink);
    --bs-modal-border-color: var(--i-housing-hi);
    --bs-modal-border-radius: var(--i-radius);
    --bs-modal-inner-border-radius: var(--i-radius);
    --bs-modal-box-shadow: none;
    --bs-modal-header-border-color: var(--i-housing-hi);
    --bs-modal-footer-border-color: var(--i-housing-hi);
}

.modal-backdrop {
    --bs-backdrop-bg: #050605;
    --bs-backdrop-opacity: .74;
}

.modal-title {
    font-family: var(--i-text);
    font-weight: 600;
}

/* Сообщение системы — плата с кромкой своего цвета по всему периметру.
   Цветная полоса только слева — тот самый шаблон, от которого мир отказался. */
.alert {
    --bs-alert-border-radius: var(--i-radius);
    --bs-alert-color: var(--i-ink);
    --bs-alert-bg: var(--i-housing-hi);
    --bs-alert-border-color: var(--i-edge);
    --bs-alert-link-color: var(--i-phos);
}

.alert-success,
.alert-primary {
    --bs-alert-bg: rgba(0, 188, 140, .08);
    --bs-alert-border-color: rgba(0, 188, 140, .5);
}

.alert-danger {
    --bs-alert-bg: rgba(240, 85, 74, .08);
    --bs-alert-border-color: rgba(240, 85, 74, .55);
    --bs-alert-link-color: var(--i-ink);
}

.alert-warning {
    --bs-alert-bg: rgba(240, 168, 30, .08);
    --bs-alert-border-color: rgba(240, 168, 30, .5);
    --bs-alert-link-color: var(--i-caution);
}

.alert-info,
.alert-secondary,
.alert-light,
.alert-dark {
    --bs-alert-bg: var(--i-housing-hi);
    --bs-alert-border-color: var(--i-edge);
}

.alert-link {
    color: var(--bs-alert-link-color);
    font-weight: 600;
}

.badge {
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    font-weight: 600;
    letter-spacing: .06em;
    border-radius: var(--i-radius);
}

.badge.bg-primary,
.badge.bg-success,
.badge.text-bg-primary,
.badge.text-bg-success {
    color: #14170f !important;
}

.badge.bg-danger,
.badge.text-bg-danger,
.badge.bg-warning,
.badge.text-bg-warning {
    color: #14170f !important;
}

/* Info в мире — вторичная гравировка (#A09A8C). Белая цифра темы на ней давала
   2,6:1, тёмная — 6,9:1. */
.badge.bg-info,
.badge.text-bg-info {
    color: #14170f !important;
}

.badge.bg-secondary,
.badge.text-bg-secondary,
.badge.bg-dark,
.badge.text-bg-dark {
    color: var(--i-ink) !important;
    background-color: var(--i-housing-hi) !important;
    border: 1px solid var(--i-edge);
}

.pagination {
    --bs-pagination-color: var(--i-ink);
    --bs-pagination-bg: var(--i-housing-hi);
    --bs-pagination-border-color: var(--i-edge);
    --bs-pagination-border-radius: var(--i-radius);
    --bs-pagination-hover-color: #14170f;
    --bs-pagination-hover-bg: var(--i-phos);
    --bs-pagination-hover-border-color: #52d4ad;
    --bs-pagination-focus-color: var(--i-ink);
    --bs-pagination-focus-bg: var(--i-housing-hi);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: #14170f;
    --bs-pagination-active-bg: var(--i-phos);
    --bs-pagination-active-border-color: #52d4ad;
    --bs-pagination-disabled-color: var(--i-ink-2);
    --bs-pagination-disabled-bg: var(--i-housing);
    --bs-pagination-disabled-border-color: var(--i-housing-hi);
    font-family: var(--i-mono);
    font-variant-numeric: tabular-nums;
}

/* «1–27 из 27» — показание прибора: гравировка с табличными цифрами. */
.paginator-range {
    font-family: var(--i-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.page-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--i-housing-hi);
    --bs-nav-tabs-border-radius: var(--i-radius);
    --bs-nav-tabs-link-hover-border-color: var(--i-housing-hi) var(--i-housing-hi) var(--i-housing-hi);
    --bs-nav-tabs-link-active-color: var(--i-phos);
    --bs-nav-tabs-link-active-bg: var(--i-housing);
    --bs-nav-tabs-link-active-border-color: var(--i-housing-hi) var(--i-housing-hi) var(--i-housing);
}

/* Боковое меню разделов (профиль, админка) — галетный переключатель. Выбранное
   положение утоплено в дно корпуса, подпись горит люминофором, и на него
   смотрит указатель. Залитая люминофором плита спорила с целевой кнопкой
   страницы: на экране профиля их стояло две одинаковых. */
.nav-pills {
    --bs-nav-pills-border-radius: var(--i-radius);
    --bs-nav-pills-link-active-color: var(--i-phos);
    --bs-nav-pills-link-active-bg: var(--i-housing-lo);
}

.nav-pills .nav-link {
    gap: 10px;
}

.nav-pills .nav-link::before {
    content: "";
    flex: none;
    border-block: 5px solid transparent;
    border-inline-start: 6px solid transparent;
    transition: border-color .18s var(--i-ease);
}

.nav-pills .nav-link.active {
    box-shadow: inset 0 1px 0 rgb(0 0 0 / .6);
}

.nav-pills .nav-link.active::before {
    border-inline-start-color: var(--i-phos);
}

/* Вкладки и переключатели страниц — положения переключателя, гравировкой. */
.nav-tabs .nav-link,
.nav-pills .nav-link {
    font-family: var(--i-mono);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--i-ink-2);
    min-height: 44px;
    display: flex;
    align-items: center;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
    color: var(--i-phos);
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--bs-nav-pills-link-active-color, var(--i-phos));
}

.accordion {
    --bs-accordion-color: var(--i-ink);
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--i-housing-hi);
    --bs-accordion-border-radius: var(--i-radius);
    --bs-accordion-inner-border-radius: var(--i-radius);
    --bs-accordion-btn-color: var(--i-ink);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-color: var(--i-phos);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a09a8c' stroke-linecap='square' stroke-width='1.6' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300bc8c' stroke-linecap='square' stroke-width='1.6' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
}

.toast {
    --bs-toast-color: var(--i-ink);
    --bs-toast-bg: var(--i-housing);
    --bs-toast-border-color: var(--i-edge);
    --bs-toast-border-radius: var(--i-radius);
    --bs-toast-box-shadow: none;
    --bs-toast-header-color: var(--i-ink);
    --bs-toast-header-bg: var(--i-housing-hi);
    --bs-toast-header-border-color: var(--i-edge);
}

.progress,
.progress-stacked {
    --bs-progress-height: 6px;
    --bs-progress-bg: var(--i-grat-major);
    --bs-progress-border-radius: 0;
    --bs-progress-bar-bg: var(--i-phos);
    --bs-progress-bar-color: #14170f;
    --bs-progress-box-shadow: none;
}

.spinner-border,
.spinner-grow {
    color: var(--i-phos);
}

.tooltip {
    --bs-tooltip-bg: var(--i-housing-hi);
    --bs-tooltip-color: var(--i-ink);
    --bs-tooltip-border-radius: var(--i-radius);
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
}

.popover {
    --bs-popover-bg: var(--i-housing);
    --bs-popover-border-color: var(--i-edge);
    --bs-popover-border-radius: var(--i-radius);
    --bs-popover-box-shadow: none;
    --bs-popover-header-bg: var(--i-housing-hi);
    --bs-popover-header-color: var(--i-ink);
    --bs-popover-body-color: var(--i-ink);
}

/* ============================================================================
   Панель входа — общий вид страниц Identity
   Регистрация, вход, восстановление пароля и подтверждения стоят на одной
   разметке: <form class="form">. Это одна приборная панель на корпусе:
   шкала делений по верхней кромке, заголовок слева гравированной табличкой,
   поля — врезанные окна, главный орган управления — люминофорный.
   Разметка страниц не менялась, кроме обёрток, — вид целиком здесь.
   ============================================================================ */

/* Человек приходит сюда прямо с главной — и попадает не на пустой корпус,
   а на то же экранное поле: сетка делений, к краям уходящая в металл. Развёртки
   здесь нет — она авторский момент главной, а не каждой страницы. Текст
   на сетку не ложится: панель стоит на сплошном корпусе. */
/* Страницы Identity обёрнуты в .container (_LayoutContainer), поэтому
   форма — не прямой потомок main. */
main:has(.form, .i-panel-page) {
    flex: 1 0 auto;
    background:
            radial-gradient(ellipse 70% 60% at 50% 40%, rgb(11 14 12 / 0) 0, var(--i-housing) 78%),
            linear-gradient(to right, var(--i-grat) 1px, transparent 1px) 0 0 / 8px 8px,
            linear-gradient(to bottom, var(--i-grat) 1px, transparent 1px) 0 0 / 8px 8px,
            linear-gradient(to right, var(--i-grat-major) 1px, transparent 1px) 0 0 / 64px 64px,
            linear-gradient(to bottom, var(--i-grat-major) 1px, transparent 1px) 0 0 / 64px 64px,
            var(--i-screen);
}

/* .i-panel-page — та же панель для страниц-сообщений Identity без формы:
   доступ закрыт, блокировка, подтверждение почты. */
.form,
.i-panel-page {
    position: relative;
    max-width: 440px;
    margin: clamp(24px, 6vh, 72px) auto !important;
    padding: 40px 28px 28px !important;
    background: var(--i-housing);
    border: 1px solid var(--i-housing-hi);
    border-radius: var(--i-radius);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .05),
    inset 0 -1px 0 rgb(0 0 0 / .45);
}

/* Шкала делений на верхней кромке — тот же приём, что порог секций главной. */
.form::before,
.i-panel-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 9px;
    background-image: linear-gradient(to right, var(--i-edge) 1px, transparent 1px);
    background-size: 16px 9px;
    background-repeat: repeat-x;
    pointer-events: none;
}

.form > h4:first-child,
.form > h1:first-child,
.form > h2:first-child,
.i-panel-page > h1:first-child {
    margin-bottom: 24px !important;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    text-align: left !important;
}

/* Пиктограммы из набора сняты с главных кнопок панели: гравированная подпись
   говорит сама, а чужой знак внутри выдержанного мира — заплатка.
   Только прямые потомки формы: глаз у переключателя «показать пароль» живёт
   внутри поля и несёт смысл — первая редакция правила прятала и его. */
.form > .btn > .bi {
    display: none;
}

/* Главное действие на панели одно. Второе — «или вы можете» — вторичной
   клавишей: две залитые люминофором кнопки подряд спорили друг с другом.
   На странице входа это «Зарегистрироваться», на регистрации — «Войти». */
.form > .btn-success {
    --bs-btn-color: var(--i-ink);
    --bs-btn-bg: var(--i-housing-hi);
    --bs-btn-border-color: var(--i-edge);
    --bs-btn-hover-color: #14170f;
    --bs-btn-hover-bg: var(--i-phos);
    --bs-btn-hover-border-color: #52d4ad;
    --bs-btn-box-shadow: inset 0 1px 0 rgb(255 255 255 / .07);
}

/* Переключатель «показать пароль»: клавиша во всю высоту поля и не уже
   пальца. Цвет — из мира, а не вшитый серый темы. */
#togglePassword {
    width: 48px;
    min-width: 44px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--i-ink-2);
}

#togglePassword:hover,
#togglePassword[aria-pressed="true"] {
    color: var(--i-phos);
}

.form .btn-lg {
    margin-top: 4px;
}

/* «или вы можете» между двумя органами управления — гравировкой. Только эта
   строка (у неё my-2): первая редакция правила ловила любой центрированный
   абзац, и строка о пользовательском соглашении ушла в заглавные. */
.form > p.my-2.text-center {
    margin: 12px 0 !important;
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--i-ink-2);
}

.form > hr {
    margin: 28px 0 20px;
    border-color: var(--i-housing-hi);
}

.form > hr + p {
    margin-bottom: 4px;
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--i-ink-2);
}

/* Список ссылок «Также вы можете» — строки протокола, а не маркированный
   список: каждая строка во всю ширину, с нарисованной стрелкой. */
.form > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.form > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    border-bottom: 1px solid var(--i-housing-hi);
    font-size: 15px;
    color: var(--i-ink);
    text-decoration: none;
}

.form > ul > li > a::after {
    content: '';
    flex: none;
    width: 14px;
    height: 14px;
    background: var(--i-phos);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square' d='M1 8h13M9 3l5 5-5 5'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square' d='M1 8h13M9 3l5 5-5 5'/%3e%3c/svg%3e") center / contain no-repeat;
    transition: transform .18s var(--i-ease);
}

.form > ul > li > a:hover {
    color: var(--i-phos);
}

.form > ul > li > a:hover::after {
    transform: translateX(3px);
}

.form .form-check-label,
.form label.small,
.form p.small {
    font-size: 14px;
    line-height: 1.5;
}

/* Уведомление SmartCaptcha под формой — замена скрытого щита Яндекса. Мелкий текст
   вторичной гравировкой, ссылка подчёркнута и загорается люминофором под наведением. */
.i-captcha-note {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--i-ink-2);
}

.i-captcha-note a {
    color: var(--i-ink-2);
    text-decoration: underline;
    text-underline-offset: .18em;
}

.i-captcha-note a:hover {
    color: var(--i-phos);
}

.form > .i-captcha-note {
    text-align: center;
}

@media (max-width: 575.98px) {
    .form,
    .i-panel-page {
        padding: 36px 20px 24px !important;
        margin: 16px auto !important;
    }
}

/* ============================================================================
   Экран «нет сигнала» — ошибки 404 и 500
   Прибор не нашёл сигнала: врезанное поле с сеткой делений, огромное
   показание кода и сообщение гравировкой. Цвет у 404 — люминофор (это не
   авария, а пустой адрес), у 500 — красный (ошибка сервера).
   ============================================================================ */

.i-nosignal {
    position: relative;
    max-width: 880px;
    margin: clamp(24px, 6vh, 72px) auto;
    padding: clamp(40px, 8vw, 88px) clamp(20px, 5vw, 64px);
    overflow: hidden;
    background: var(--i-screen);
    border: 1px solid #1d2620;
    border-radius: var(--i-radius);
    box-shadow: inset 0 1px 0 rgb(0 0 0 / .6), inset 0 -1px 0 rgb(255 255 255 / .04);
}

.i-nosignal::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
            linear-gradient(to right, var(--i-grat) 1px, transparent 1px),
            linear-gradient(to bottom, var(--i-grat) 1px, transparent 1px),
            linear-gradient(to right, var(--i-grat-major) 1px, transparent 1px),
            linear-gradient(to bottom, var(--i-grat-major) 1px, transparent 1px);
    background-size: 8px 8px, 8px 8px, 64px 64px, 64px 64px;
    opacity: .7;
    pointer-events: none;
}

.i-nosignal > * {
    position: relative;
}

.i-nosignal-code {
    margin: 0 0 16px;
    font-family: var(--i-mono);
    font-size: clamp(72px, 14vw, 160px);
    font-weight: 600;
    line-height: .9;
    letter-spacing: -.04em;
    color: var(--i-phos);
    font-variant-numeric: tabular-nums;
}

.i-nosignal--error .i-nosignal-code {
    font-size: clamp(48px, 9vw, 104px);
    letter-spacing: -.02em;
    color: var(--i-alarm);
}

.i-nosignal-title {
    margin: 0 0 12px;
    font-size: clamp(24px, 3.4vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--i-ink);
}

.i-nosignal-note {
    margin: 0 0 32px;
    max-width: 52ch;
    font-size: 17px;
    color: var(--i-ink-2);
}

.i-nosignal-meta {
    margin: 24px 0 0;
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    letter-spacing: .06em;
    color: var(--i-ink-2);
}

.i-nosignal-meta code {
    color: var(--i-ink);
}

/* ============================================================================
   Контакты — две гравированные таблички
   Содержимого пока нет: реквизиты и контакты — открытый пункт владельца
   (CONTENT-06/07). Оформлен каркас, чтобы появившийся текст сразу встал в мир.
   ============================================================================ */

.i-contacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1100px;
    margin: clamp(24px, 6vh, 72px) auto;
    border-top: 1px solid var(--i-housing-hi);
    border-left: 1px solid var(--i-housing-hi);
}

.i-contacts > * {
    min-height: 200px;
    padding: 32px 28px;
    border-right: 1px solid var(--i-housing-hi);
    border-bottom: 1px solid var(--i-housing-hi);
}

.i-contacts h1,
.i-contacts h2,
.i-contacts h4 {
    margin: 0 0 16px;
    font-family: var(--i-mono);
    font-size: var(--i-t-label);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--i-ink-2);
}

@media (max-width: 767.98px) {
    .i-contacts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================================
   Прощание (/goodbye/) — страница отказа от кук
   Отдельная, без общего шаблона. Панель мира на корпусе: шкала делений по
   верхней кромке, как у панели входа. Эмодзи и пульсирующее сердечко сняты —
   пиктограммы из таблицы Юникода мир не принимает.
   ============================================================================ */

.i-goodbye {
    position: relative;
    background: var(--i-housing);
    border: 1px solid var(--i-housing-hi);
}

.i-goodbye::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 9px;
    background-image: linear-gradient(to right, var(--i-edge) 1px, transparent 1px);
    background-size: 16px 9px;
    background-repeat: repeat-x;
    pointer-events: none;
}

.i-goodbye-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    letter-spacing: -.02em;
}

/* Чисто белого в мире нет: самый светлый тон — подсвеченная гравировка. */
.text-white {
    color: #efe9dc !important;
}

/* ============================================================================
   Правила темы, которые обходят переменные
   Bootswatch Darkly после основных компонентов вписывает цвета напрямую:
   алерты — заливкой (#444, #f39c12, #e74c3c…) с белым текстом и без рамки,
   плавающие подписи — серым #888, ссылки хлебных крошек — белым. Переменные
   Bootstrap до них не доходят, поэтому здесь они перекрыты свойствами.
   Список снят со скомпилированной темы 21.09.2026 — 13 правил, других нет.
   ============================================================================ */

.alert,
.alert-primary,
.alert-secondary,
.alert-success,
.alert-info,
.alert-warning,
.alert-danger,
.alert-light,
.alert-dark {
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: 1px solid var(--bs-alert-border-color);
}

.alert .alert-link,
.alert a {
    color: var(--bs-alert-link-color);
    text-decoration: underline;
    text-underline-offset: .18em;
}

.form-floating > .form-control:not(:-moz-placeholder) ~ label {
    color: var(--i-ink-2);
}

.breadcrumb a {
    color: var(--i-phos);
}