.tooltipParent{position:relative;cursor:pointer}.tooltip{visibility:hidden;background-color:#555;color:#fff;text-align:center;border-radius:5px;padding:5px;position:absolute;bottom:100%;left:50%;transform:translate(-50%);z-index:1;opacity:0;transition:opacity .3s;max-width:400px;min-width:200px;word-wrap:break-word}.tooltipParent:hover .tooltip{visibility:visible;opacity:1}.config-logs{margin:20px 0;padding:16px;border:1px solid #ddd;border-radius:8px;background:#fafafa}.config-logs h2{margin:0 0 16px;font-size:18px}.config-logs__loading,.config-logs__error{padding:12px;text-align:center}.config-logs__error{color:#d32f2f}.config-logs__table{width:100%;border-collapse:collapse;margin-bottom:16px}.config-logs__table th,.config-logs__table td{padding:10px 12px;text-align:left;border-bottom:1px solid #eee}.config-logs__table th{font-weight:600;color:#555;font-size:13px;text-transform:uppercase}.config-logs__level-name{display:block;font-weight:500}.config-logs__level-key{display:block;font-size:12px;color:#888;font-family:monospace}.config-logs__switch{position:relative;display:inline-block;width:44px;height:24px}.config-logs__switch input{opacity:0;width:0;height:0}.config-logs__slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.3s;border-radius:24px}.config-logs__slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}.config-logs__switch input:checked+.config-logs__slider{background-color:#4caf50}.config-logs__switch input:checked+.config-logs__slider:before{transform:translate(20px)}.config-logs__actions{display:flex;gap:8px}.config-logs__actions button{padding:8px 20px;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;font-size:14px;transition:background .2s}.config-logs__actions button:hover:not(:disabled){background:#f0f0f0}.config-logs__actions button:first-child{background:#4caf50;color:#fff;border-color:#4caf50}.config-logs__actions button:first-child:hover:not(:disabled){background:#43a047}.config-logs__actions button:disabled{opacity:.6;cursor:not-allowed}.config-logs__message{margin-top:12px;padding:8px 12px;border-radius:4px;font-size:14px}.config-logs__message--success{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}.config-logs__message--error{background:#ffebee;color:#c62828;border:1px solid #ef9a9a}
/* ============================================================================
 * Tahoe UI — канонические токены. Источник истины: ../PALETTE.md
 *
 * Файл копируется в проект КАК ЕСТЬ. Значения не подбираются на глаз и не
 * «улучшаются»: они получены замером с Apple Design Resources (см. PALETTE.md,
 * раздел «Происхождение значений»). Любая правка значения здесь — правка
 * канона, а не проекта: сначала PALETTE.md, потом все проекты.
 *
 * Тема: светлая на :root; тёмная — и по системной настройке, и по
 * [data-theme="dark"], чтобы ручной переключатель мог перебить систему
 * в обе стороны. Проекту без переключателя достаточно @media-ветки —
 * [data-theme] просто ни разу не сработает.
 * ==========================================================================*/

:root {
    color-scheme: light;

    /* --- Масштабируемая единица ---------------------------------------
     * Вся геометрия пишется как calc(N * var(--tahoe-u)), а не голым px.
     * Проект без пользовательского зума оставляет --tahoe-zoom равным 1
     * и ничего не теряет. Проект с зумом меняет один коэффициент. */
    --tahoe-zoom: 1;
    --tahoe-u: calc(1px * var(--tahoe-zoom));

    /* --- Синие. ИХ ТРИ, И ОНИ НЕ ВЗАИМОЗАМЕНЯЕМЫ ----------------------
     * control  — чекбокс, радио, switch, кнопка по умолчанию, фокус
     * sel      — заливка выделенной строки списка (глуше control)
     * menu-hl  — подсветка пункта меню (светлее control)
     * #007AFF сюда не подставлять: это iOS, в desktop-Tahoe его нет. */
    --tahoe-control: #0d6efd;
    --tahoe-control-press: #0a5ad4;
    --tahoe-sel: #2962d9;
    --tahoe-menu-hl: #0088ff;
    --tahoe-link: #0a5fd4;

    /* --- Семантика: сигнальные цвета (заливки, точки, индикаторы) ------
     * Как ТЕКСТ не годятся — контраст на белом 2.1–3.6:1. Для текста
     * ниже отдельные --tahoe-ink-*. */
    --tahoe-green: #28cd41;
    --tahoe-orange: #ff9500;
    --tahoe-red: #ff3b30;

    /* --- Семантика: те же смыслы ТЕКСТОМ (держат AA на белом и на тинте) */
    --tahoe-ink-green: #17762c;
    --tahoe-ink-orange: #9c5a00;
    --tahoe-ink-red: #c32b21;

    /* --- Текст --------------------------------------------------------
     * label-2 = .54, а не системные .5: при .5 контраст 3.98:1 — провал AA
     * для вторичного текста, которым набраны подписи 11–12 px.
     * Осознанное отступление от Apple, посчитано (см. PALETTE.md). */
    --tahoe-label: rgba(0, 0, 0, .85);
    --tahoe-label-2: rgba(0, 0, 0, .54);
    --tahoe-label-3: rgba(0, 0, 0, .28);

    /* --- Поверхности --------------------------------------------------- */
    --tahoe-win: #ffffff;
    --tahoe-sidebar: rgba(248, 248, 248, .82);
    --tahoe-sidebar-solid: #f8f8f8;
    --tahoe-bar: rgba(250, 250, 250, .8);

    /* --- Заливки и состояния ------------------------------------------- */
    --tahoe-stripe: rgba(0, 0, 0, .031);
    --tahoe-fill: rgba(0, 0, 0, .05);
    --tahoe-fill-hover: rgba(0, 0, 0, .085);
    --tahoe-fill-press: rgba(0, 0, 0, .13);
    --tahoe-sb-sel: rgba(0, 0, 0, .14);

    /* --- Разделители ---------------------------------------------------- */
    --tahoe-hair: rgba(0, 0, 0, .11);
    --tahoe-hair-soft: rgba(0, 0, 0, .06);

    /* --- Тонированные подложки ------------------------------------------ */
    --tahoe-tint-blue: rgba(13, 110, 253, .1);
    --tahoe-tint-green: rgba(40, 205, 65, .16);
    --tahoe-tint-orange: rgba(255, 149, 0, .17);
    --tahoe-tint-red: rgba(255, 59, 48, .13);

    /* --- Тень контрола --------------------------------------------------
     * В настоящих px: на зуме 150 % масштабированная тень станет грязью. */
    --tahoe-ctl-shadow: 0 0 0 .5px rgba(0, 0, 0, .13), 0 1px 1.5px rgba(0, 0, 0, .09);

    /* --- Типографика ----------------------------------------------------
     * Webfont не подключается: SF Pro лицензирована Apple только под их
     * платформы. На Windows отрисуется Segoe UI — принято осознанно. */
    --tahoe-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

/* Тёмная тема собрана отдельно, а НЕ инверсией светлой. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --tahoe-control: #0a84ff;
        --tahoe-control-press: #409cff;
        --tahoe-sel: #2e5fc9;
        --tahoe-menu-hl: #0a84ff;
        --tahoe-link: #409cff;

        --tahoe-green: #32d74b;
        --tahoe-orange: #ff9f0a;
        --tahoe-red: #ff453a;

        --tahoe-ink-green: #4cdc6a;
        --tahoe-ink-orange: #ffb340;
        --tahoe-ink-red: #ff6961;

        --tahoe-label: rgba(255, 255, 255, .88);
        --tahoe-label-2: rgba(255, 255, 255, .52);
        --tahoe-label-3: rgba(255, 255, 255, .3);

        --tahoe-win: #1e1e1e;
        --tahoe-sidebar: rgba(40, 40, 40, .8);
        --tahoe-sidebar-solid: #282828;
        --tahoe-bar: rgba(46, 46, 46, .8);

        --tahoe-stripe: rgba(255, 255, 255, .035);
        --tahoe-fill: rgba(255, 255, 255, .08);
        --tahoe-fill-hover: rgba(255, 255, 255, .13);
        --tahoe-fill-press: rgba(255, 255, 255, .18);
        --tahoe-sb-sel: rgba(255, 255, 255, .16);

        --tahoe-hair: rgba(255, 255, 255, .13);
        --tahoe-hair-soft: rgba(255, 255, 255, .08);

        --tahoe-tint-blue: rgba(10, 132, 255, .22);
        --tahoe-tint-green: rgba(50, 215, 75, .2);
        --tahoe-tint-orange: rgba(255, 159, 10, .22);
        --tahoe-tint-red: rgba(255, 69, 58, .2);
    }
}

/* Ручной переключатель. Значения обязаны совпадать с @media-веткой
 * символ в символ — иначе тема поедет в зависимости от того, каким
 * путём она включилась. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --tahoe-control: #0a84ff;
    --tahoe-control-press: #409cff;
    --tahoe-sel: #2e5fc9;
    --tahoe-menu-hl: #0a84ff;
    --tahoe-link: #409cff;

    --tahoe-green: #32d74b;
    --tahoe-orange: #ff9f0a;
    --tahoe-red: #ff453a;

    --tahoe-ink-green: #4cdc6a;
    --tahoe-ink-orange: #ffb340;
    --tahoe-ink-red: #ff6961;

    --tahoe-label: rgba(255, 255, 255, .88);
    --tahoe-label-2: rgba(255, 255, 255, .52);
    --tahoe-label-3: rgba(255, 255, 255, .3);

    --tahoe-win: #1e1e1e;
    --tahoe-sidebar: rgba(40, 40, 40, .8);
    --tahoe-sidebar-solid: #282828;
    --tahoe-bar: rgba(46, 46, 46, .8);

    --tahoe-stripe: rgba(255, 255, 255, .035);
    --tahoe-fill: rgba(255, 255, 255, .08);
    --tahoe-fill-hover: rgba(255, 255, 255, .13);
    --tahoe-fill-press: rgba(255, 255, 255, .18);
    --tahoe-sb-sel: rgba(255, 255, 255, .16);

    --tahoe-hair: rgba(255, 255, 255, .13);
    --tahoe-hair-soft: rgba(255, 255, 255, .08);

    --tahoe-tint-blue: rgba(10, 132, 255, .22);
    --tahoe-tint-green: rgba(50, 215, 75, .2);
    --tahoe-tint-orange: rgba(255, 159, 10, .22);
    --tahoe-tint-red: rgba(255, 69, 58, .2);
}

/* ============================================================================
 * База. Минимум, который нужен любому Tahoe-проекту.
 * ==========================================================================*/

body {
    font-family: var(--tahoe-font);
    font-size: calc(13 * var(--tahoe-u));
    color: var(--tahoe-label);
    background: var(--tahoe-win);
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
}

/* Числовые колонки — иначе разряды не выстраиваются в столбик. */
.tahoe-tabular { font-variant-numeric: tabular-nums; }

/* Нативные контролы красятся системным синим контролов, а не зелёным:
 * зелёный в Tahoe остаётся индикаторам состояния. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="date"],
progress { accent-color: var(--tahoe-control); }

/* Фокус виден всегда и одинаково. В настоящих px — как и тени. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--tahoe-control);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* ============================================================================
 * Проектные добавки к канону Tahoe. Подключается СРАЗУ ПОСЛЕ tahoe.css.
 *
 * В этом файле живёт только то, чего в каноне нет по существу. Сам
 * `tahoe.css` — побайтовая копия `ui ux macOs Tahoe/tokens/tahoe.css` и не
 * правится никогда: обновление канона сводится к `cp`, а проверка копии —
 * к одной команде `cmp`.
 *
 * Значений здесь ровно пять, и ни одно из них не подменяет канонический токен.
 * ==========================================================================*/

:root {
    /* --- ЕДИНСТВЕННОЕ ОТСТУПЛЕНИЕ ОТ КАНОНА, оформлено расчётом -----------
     * Заливка главного действия экрана. В светлой теме совпадает с
     * --tahoe-control: белый на нём 4.50:1 — граница AA, канон разрешает для
     * короткой подписи кнопки.
     * В ТЁМНОЙ теме белый на --tahoe-control (#0a84ff) даёт 3.65:1 и каноном
     * ПРЯМО ЗАПРЕЩЁН, а --tahoe-control-press там светлее (#409cff, белый =
     * 2.83:1) и не спасает. Поэтому в тёмной теме берётся системный синий,
     * затемнённый на 12 %: #0974e0, белый на нём 4.58:1. Замена на
     * --tahoe-sel дала бы 5.84:1, но кнопка получила бы цвет выделенной
     * строки — ровно та подмена, от которой канон предостерегает в разделе
     * «Три синих». Все пять чисел пересчитаны 16.08.2026 через
     * `ui ux macOs Tahoe/tools/contrast.py`. */
    --tahoe-accent: #0d6efd;

    /* Наведение и нажатие на кнопке главного действия. Канонический
     * --tahoe-control-press сюда не годится: в ТЁМНОЙ теме он светлее самого
     * контрола (#409cff), и белый на нём даёт 2.83:1 — то есть кнопка при
     * наведении переставала бы читаться. Берём затемнение своего же
     * --tahoe-accent на 12 %: светлая #0a5ad4 (белый 6.13:1), тёмная #0866c5
     * (белый 5.65:1). Обе пары считает client/scripts/contrast-project.py. */
    --tahoe-accent-press: #0a5ad4;

    /* Наведение и нажатие на деструктивной кнопке. Канон даёт только покойный
     * --tahoe-tint-red, и без этого токена кнопка «Удалить» не отвечала бы на
     * курсор — в списке из нескольких строк не видно, какая строка под ним,
     * при том что действие необратимое.
     * Плотность выбрана предельной по AA, а не на глаз: с текстом
     * --tahoe-ink-red светлая .17 даёт 4.53:1 (при .18 уже 4.47 — провал),
     * тёмная .22 даёт 4.52:1 (при .24 уже 4.38). Цвет текста не меняется. */
    --tahoe-tint-red-press: rgba(255, 59, 48, .17);

    /* Движение: системная «плавно тормозящая». Линейных переходов в
     * интерфейсе нет. Мелкий контрол 120–160 мс, раскрытие панели 180–220,
     * модалка 220–260. */
    --tahoe-ease: cubic-bezier(.32, .72, 0, 1);

    /* Моноширинного стека в каноне нет: идентификаторы там описаны словами.
     * Значение проектное, цветом не является. В b24_conector моноширинного
     * текста много: connectorId, токены-маски, URL вебхуков. */
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Тёмная тема объявляется дважды — по системной настройке и по ручному
 * переключателю, ровно как в каноне. Значения обязаны совпадать символ в
 * символ, иначе тема поедет в зависимости от того, каким путём включилась. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tahoe-accent: #0974e0;
        --tahoe-accent-press: #0866c5;
        --tahoe-tint-red-press: rgba(255, 69, 58, .22);
    }
}

:root[data-theme="dark"] {
    --tahoe-accent: #0974e0;
    --tahoe-accent-press: #0866c5;
    --tahoe-tint-red-press: rgba(255, 69, 58, .22);
}
/* ============================================================================
 * База приложения: сброс, полноэкранный каркас варианта A и текстовые
 * утилиты. Цвета — только через токены из tahoe.css / tahoe-project.css.
 *
 * Здесь живёт то, что обязано быть ГЛОБАЛЬНЫМ:
 *   - сброс и размеры html/body/#app;
 *   - каркас (.t-shell, .t-main, .t-toolbar, .t-body, .t-content, инспектор);
 *   - утилиты типографики, которыми пользуется содержимое, улетающее в
 *     инспектор и тулбар через <Teleport>: у телепортированной разметки
 *     остаётся scope страницы-источника, и scoped-стили App.vue до неё
 *     не дотягиваются.
 *
 * Атомы (кнопка, поле, чекбокс…) сюда НЕ попадают: они живут в
 * components/ui/Ui*.vue со своими scoped-стилями.
 * ==========================================================================*/

/* Сброс лежит в слое reset, объявленном РАНЬШЕ слоя legacy, а не вне слоёв.
   Вне слоёв он победил бы h1..h6, p, ul и nav из старого main.css — там
   отступы задаются именно этими правилами, и без них страницы, ещё не
   перенесённые на Tahoe, потеряли бы вертикальный ритм и отступ списков.
   Порядок слоёв: reset < legacy < (всё неслоистое, то есть новый код). */
@layer reset {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

html,
body,
#app {
    height: 100%;
}

/* Прокручиваются .t-content, сайдбар и инспектор, а не страница целиком:
 * иначе тулбар и сайдбар уезжают вверх вместе с содержимым. */
body {
    overflow: hidden;
}

/* Класс из legacy-слайдеров: при открытом слайдере прокрутка только у него. */
body.no-scroll {
    overflow: hidden;
}

/* --- Каркас ------------------------------------------------------------- */

.t-shell {
    display: flex;
    width: 100%;
    height: 100%;
    background: var(--tahoe-win);
}

.t-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--tahoe-win);
}

/* Тулбар обязан переноситься: на узком фрейме и крупном зуме правые кнопки
 * иначе уходят под overflow: hidden. */
.t-toolbar {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(8 * var(--tahoe-u));
    min-height: calc(52 * var(--tahoe-u));
    padding: calc(4 * var(--tahoe-u)) calc(12 * var(--tahoe-u));
    border-bottom: .5px solid var(--tahoe-hair);
    background: var(--tahoe-bar);
    -webkit-backdrop-filter: blur(48px) saturate(180%);
    backdrop-filter: blur(48px) saturate(180%);
}

.t-title {
    font-size: calc(13.5 * var(--tahoe-u));
    font-weight: 590;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.t-sub {
    font-size: calc(11.5 * var(--tahoe-u));
    color: var(--tahoe-label-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-spacer {
    flex: 1;
    min-width: calc(8 * var(--tahoe-u));
}

.t-body {
    flex: 1;
    min-height: 0;
    display: flex;
}

.t-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: calc(12 * var(--tahoe-u)) calc(14 * var(--tahoe-u));
}

/* --- Инспектор ---------------------------------------------------------- */

.t-inspector {
    flex: none;
    width: calc(252 * var(--tahoe-u));
    display: flex;
    flex-direction: column;
    border-left: .5px solid var(--tahoe-hair);
    background: var(--tahoe-sidebar);
    -webkit-backdrop-filter: blur(48px) saturate(180%);
    backdrop-filter: blur(48px) saturate(180%);
    overflow-y: auto;
}

.t-insp-head {
    flex: none;
    display: flex;
    align-items: center;
    height: calc(34 * var(--tahoe-u));
    padding: 0 calc(12 * var(--tahoe-u));
    border-bottom: .5px solid var(--tahoe-hair);
    font-size: calc(11.5 * var(--tahoe-u));
    font-weight: 590;
    color: var(--tahoe-label-2);
}

.t-insp-group {
    padding: calc(10 * var(--tahoe-u)) calc(12 * var(--tahoe-u));
    border-bottom: .5px solid var(--tahoe-hair-soft);
}

.t-insp-title {
    margin-bottom: calc(7 * var(--tahoe-u));
    font-size: calc(11 * var(--tahoe-u));
    font-weight: 590;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--tahoe-label-2);
}

/* Строка «ключ — значение» внутри группы инспектора */
.t-kv {
    display: flex;
    gap: calc(10 * var(--tahoe-u));
    padding: calc(4 * var(--tahoe-u)) 0;
    font-size: calc(12.5 * var(--tahoe-u));
    border-bottom: .5px solid var(--tahoe-hair-soft);
}

.t-kv:last-child {
    border-bottom: none;
}

.t-kv dt {
    flex: none;
    width: calc(104 * var(--tahoe-u));
    margin: 0;
    color: var(--tahoe-label-2);
}

/* Значение переносится, а не уезжает за край панели: в инспекторе 252 px
 * на него остаётся около 110 px, а @repa_potolki_bot длиннее. */
.t-kv dd {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

/* --- Текстовые утилиты -------------------------------------------------- */

.t-mono {
    font-family: var(--mono);
    font-size: calc(11.5 * var(--tahoe-u));
}

.t-link {
    color: var(--tahoe-link);
}

.t-hint {
    font-size: calc(11 * var(--tahoe-u));
    color: var(--tahoe-label-2);
}

/* Числовые колонки: без tabular-nums разряды не выстраиваются в столбик. */
.t-num {
    font-variant-numeric: tabular-nums;
}

/* Шеврон раскрытия: поворот на 90° за 140 мс, треугольников в Tahoe нет. */
.chev-r {
    color: var(--tahoe-label-2);
    transition: transform .14s var(--tahoe-ease);
}

.chev-r.open {
    transform: rotate(90deg);
}
/* Старое оформление проекта целиком. Живёт в слое legacy и потому проигрывает
   любому неслоистому правилу — новые Ui*-компоненты его не замечают.
   Нужно ровно одному потребителю: компоненту Subscriptions из библиотеки
   @andrey4emk/npm-app-front-b24, который рендерит классы этого проекта
   (main, switch, slider, tooltip, tooltipParent, disabled-button).
   Удаляется целиком, когда Subscriptions получит свой облик. */

@layer legacy {
/* Старое оформление проекта. Живёт целиком в слое legacy (см. styles/legacy.css)
   и держит вид компонента Subscriptions из @andrey4emk/npm-app-front-b24.
   Значки набора со стороны здесь больше не используются: их рисует
   components/ui/UiIcon.vue, ссылка на CDN из index.html удалена. */
}

@layer legacy {

.slider-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    max-height: 100vh; /* ограничиваем высоту 100% от высоты экрана */
    max-width: 100vw; /* Ограничиваем ширину в 100% от ширины экрана */
    /* justify-content: center;
    align-items: center; */
    overflow-y: auto; /*если слайдер длиннее окна */
    padding: 5px; /* отступ для предотвращения прилипания к краям окна */
}

.slider-content {
    position: relative;
    background: #fff;
    padding: 5px 5px 5px 5px;
    border-radius: 4px;
    max-height: 100%; /* ограничиваем высоту 99% от высоты экрана */
    /*max-width: 100vw;  Ограничиваем ширину в 99% от ширины экрана */
    /*min-width: 300px;  Минимальная ширина слайдера */
    width: 100vw; /*Минимальная ширина слайдера */
    max-width: 390px;
    /*max-width: 700px; Ограничиваем ширину в 99% от ширины экрана */
    overflow-y: auto; /* добавляем прокрутку */
}
.slider-content2 {
    position: relative;
    background: #fff;
    padding: 5px;
    border-radius: 4px;
    max-height: 99%; /* ограничиваем высоту 99% от высоты экрана */
    min-width: 300px; /* Минимальная ширина слайдера */
    /* overflow-y: auto; добавляем прокрутку */
}
.slider-content-over {
    z-index: 2;
}

.slider-enter-active,
.slider-leave-active {
    transition: opacity 0.5s;
}
.slider-enter,
.slider-leave-to {
    opacity: 0;
}
}

@layer legacy {

.modal-modal {
    position: fixed; /* фиксированное позиционирование относительно окна браузера */
    top: 0; /* отступ сверху равен 0 - модальное окно начинается с верха экрана */
    left: 0; /* отступ слева равен 0 - модальное окно начинается с левого края экрана */
    right: 0; /* растягивает блок до правого края экрана */
    bottom: 0; /* растягивает блок до нижнего края экрана */
    background: #f5f7fa; /* затемнение фона (закомментировано) */
    display: flex; /* включает flex-контейнер для удобного центрирования содержимого */
    justify-content: center; /* горизонтальное центрирование содержимого */
    /*  align-items: center; вертикальное центрирование содержимого */
    /*overflow-y: auto;  если слайдер длиннее окна */ /* позволяет прокручивать содержимое, если оно выходит за пределы окна (закомментировано) */
    padding: 20px; /* внутренний отступ, предотвращающий прилипание содержимого к краям окна */
}

.modal-content {
    position: relative; /* относительно позиционированный контейнер для внутренних элементов */
    /* background: #625f59;  фоновый цвет модального окна */
    padding: 20px; /* внутренний отступ для содержимого модального окна */
    border-radius: 4px; /* скругление углов модального окна */
    /* height: 250px;  высота модального окна */
    width: 500px; /* ширина модального окна */
    max-height: 15vh; /* ограничение максимальной высоты модального окна относительно высоты экрана */
    overflow-y: auto; /* добавление вертикальной прокрутки при переполнении содержимого */
    border: 4px solid #27ae60; /* добавлена граница: 2px шириной, сплошная, с золотым цветом */
}

.modal-text {
    justify-content: center; /* горизонтальное центрирование содержимого */
    align-items: center; /* вертикальное центрирование содержимого */
    font-weight: bold; /* Жирный */
    padding-top: 40px; /* внутренний отступ для текста */
}

.modal-yes {
    background-color: #27ae60; /* цвет фона кнопки */
    color: #fff; /* цвет текста кнопки */
    border: none; /* убираем границу у кнопки */
    padding: 10px 20px; /* внутренний отступ кнопки */
    margin-top: 20px; /* отступ сверху для кнопки */
    cursor: pointer; /* изменение формы курсора при наведении на кнопку */
}
.modal-no {
    background-color: #a30c0c; /* цвет фона кнопки */
    color: #fff; /* цвет текста кнопки */
    border: none; /* убираем границу у кнопки */
    padding: 10px 20px; /* внутренний отступ кнопки */
    margin-top: 20px; /* отступ сверху для кнопки */
    cursor: pointer; /* изменение формы курсора при наведении на кнопку */
}
.modal-no:hover {
    background-color: #a30c0c;
    filter: brightness(1.15);
}

.modal-enter-active,
.modal-leave-active {
    transition: opacity 0.5s; /* плавное изменение прозрачности при появлении и скрытии модального окна */
}

.modal-enter,
.modal-leave-to {
    opacity: 0; /* начальное и конечное состояние прозрачности для анимации */
}

.close-button {
    position: absolute; /* абсолютное позиционирование относительно родительского элемента */
    top: 5px; /* отступ сверху для кнопки закрытия */
    right: 5px; /* отступ справа для кнопки закрытия */
    z-index: 1; /* установка приоритета по слоям для отображения кнопки над другими элементами */
}
}

@layer legacy {
/* Кнопки переключения. Используются в смарт процессах, при выборе полей и т.д*/
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Версия маленького переключателя */
.switch.small {
    width: 30px;
    height: 17px;
}
/* Hide default HTML checkbox */
.switch input {
    display: none;
}

/* The slider */
/* Дорожка. Цвета переведены на токены: выключенная — заливка нажатого
   контрола, включённая — синий контролов. Зелёный в Tahoe остаётся
   индикаторам состояния и переключателю не принадлежит (PALETTE.md) */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--tahoe-fill-press);
    /* Дорожка и ручка круглые: в Tahoe переключатель — капсула, а не
       прямоугольник. Радиус задан здесь, а не в разметке библиотеки */
    border-radius: 999px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.sliderNotGrey {
    background-color: var(--tahoe-control);
}

/* Slider для маленького переключателя */
.switch.small .slider {
    /* размеры наследуются от контейнера .switch.small */
}

/* Кнопка до (ползунок) */
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

/* Ползунок для маленького переключателя */
.switch.small .slider:before {
    height: 13px; /* 26px/2 */
    width: 13px; /* 26px/2 */
    left: 2px; /* 4px/2 */
    bottom: 2px; /* 4px/2 */
}

/* При активном состоянии переключателя */
input:checked + .slider {
    background-color: var(--tahoe-control);
}

input:focus + .slider {
    box-shadow: 0 0 5px var(--tahoe-control);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Смарт для маленького переключателя */
.switch.small input:checked + .slider:before {
    -webkit-transform: translateX(13px); /* 26px/2 */
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}
}

@layer legacy {

.loader {
    width: 35px;
    height: 16px;
    /* display: block; */
    margin: 5px;
    padding: 5px;
    background-image: radial-gradient(circle 25px at 25px 25px, #fff 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #fff 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #fff 100%, transparent 0), linear-gradient(#fff 50px, transparent 0);
    background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
    background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
    background-repeat: no-repeat;
    position: relative;
    box-sizing: border-box;
}

.loader::before {
    content: "";
    left: 5px;
    bottom: 0px;
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #27ae60;
    background-image: radial-gradient(circle 8px at 18px 18px, #fff 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, #fff 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, #fff 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, #fff 100%, transparent 0),
        radial-gradient(circle 4px at 18px 36px, #fff 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #fff 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #fff 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, #fff 100%, transparent 0),
        radial-gradient(circle 4px at 5px 30px, #fff 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, #fff 100%, transparent 0);
    background-repeat: no-repeat;
    box-sizing: border-box;
    animation: rotationBack 3s linear infinite;
}
.loader::after {
    content: "";
    left: 39px;
    bottom: 0px;
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #27ae60;
    background-image: radial-gradient(circle 5px at 12px 12px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, #fff 100%, transparent 0),
        radial-gradient(circle 2.5px at 12px 24px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, #fff 100%, transparent 0),
        radial-gradient(circle 2.5px at 3px 20px, #fff 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, #fff 100%, transparent 0);
    background-repeat: no-repeat;
    box-sizing: border-box;
    animation: rotationBack 4s linear infinite reverse;
}

@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
}

@layer legacy {
/* HTML: <div class="loader"></div> */
.loader2 {
    width: fit-content;
    font-weight: bold;
    font-family: "Open Sans", sans-serif;
    font-size: 30px;
    padding-bottom: 8px;
    color: #27ae60;
    background: linear-gradient(currentColor 0 0) 0 100%/0% 3px no-repeat;
    animation: l2 2s linear infinite;
}
.loader2:before {
    content: "Загрузка...";
}
@keyframes l2 {
    to {
        background-size: 100% 3px;
    }
}
}

@layer legacy {
.multiselect {
    /* width: 500px; */
    min-width: 300px;
    max-width: 80%;
    white-space: pre-wrap;
    /* margin: 0 auto; */
    /* position: relative; */
}
.multiselect_active {
    width: 500px;
    max-width: 80%;
    height: 200px;
}

/* Настройка контейнера выпадающего списка */
.multiselect__content {
    /*background-color: #00000080; /* Цвет фона */
    /*border: 1px solid #bdc3c7; /* Цвет границы */
    /*border-radius: 8px; /* Скругление углов */
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тень */
    max-height: 200px; /* Максимальная высота */
    overflow-y: auto; /* Прокрутка, если список длинный */
}
/* Настройка опций в выпадающем списке */
.multiselect__option {
    /*padding: 10px; /* Внутренние отступы */
    /*font-size: 14px;  Размер текста */
    /*color: #ffffff; /* Цвет текста */
    /* cursor: pointer; Указатель мыши при наведении */
    /* transition: background-color 0.3s;  Плавный переход цвета фона */
}

/* Стилизация опции при наведении */
.multiselect__option:hover {
    /*background-color: #00000080; /* Цвет фона при наведении */
}

/* Стилизация выделенной опции */
.multiselect__option--highlight {
    /*background-color: #00000080; /* Цвет фона выделенной опции */
    /* color: #fff; /* Цвет текста выделенной опции */
}

/* Настройка текста внутри выпадающего списка */
.multiselect__single {
    /* font-weight: bold; /* Жирный текст */
    /* color: #2c3e50; /* Цвет текста */
    /*background-color: #00000080; /* Цвет фона выделенной опции */
}

/* Стилизация выбранного элемента */
.multiselect__option--selected {
    /*background-color: #00000080; /* Синий фон */
    /*color: #ffffff; /* Белый текст */
    /*font-weight: bold; /* Жирный текст */
}

/* Стилизация повторно выбранного элемента */
.multiselect__option--reselected {
    /*background-color: #00000080; /* Темно-синий фон */
    /*color: #ffffff; /* Белый текст */
    /*font-style: italic; /* Курсивный текст */
}
}

@layer legacy {
/* Кнопки.
   Геометрия оставлена прежней — на неё опирается разметка компонента
   Subscriptions из @andrey4emk/npm-app-front-b24, единственного потребителя
   этого слоя. Заменены только ЦВЕТА: зелёный #27ae60 не из библиотеки, он
   всегда приходил отсюда, и в тёмной теме давал чужеродную заливку.
   Токены меняются вместе с темой, поэтому ветка [data-theme] не нужна. */
button {
    display: inline-block;
    background-color: var(--tahoe-fill);
    color: var(--tahoe-label);
    box-shadow: var(--tahoe-ctl-shadow);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 10px;
}

button.big {
    font-size: 25px;
    padding: 5px 10px;
    margin: 1px 1px;
}
button.small {
    font-size: 15px;
    padding: 5px 10px;
    margin: 1px 1px;
}

button.add-product {
    margin: 3px 10px 0px 3px;
}
button:hover {
    background-color: var(--tahoe-fill-hover);
}
/* Стили для активной (отмеченной) кнопки. Класс вешает глобальный обработчик
   клика из main.ts — оранжевый #f39c12 заменён нажатым состоянием контрола */
button.active {
    background-color: var(--tahoe-fill-press);
}
button.disabled {
    background-color: var(--tahoe-fill);
    color: var(--tahoe-label-3);
    box-shadow: none;
}
button.disabled:hover {
    background-color: var(--tahoe-fill); /* Оставляем цвет без изменений */
    cursor: not-allowed; /* Указываем, что кнопка недоступна */
}
/* Деструктивная: текст ink-red на подложке tint-red — 4.78:1 (COMPONENTS.md §4).
   Прежняя заливка #a30c0c с белым текстом в тёмной теме выглядела чужеродно */
button.cancel,
button.delete {
    background-color: var(--tahoe-tint-red);
    color: var(--tahoe-ink-red);
    box-shadow: none;
}
button.close {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
    background-color: var(--tahoe-tint-red);
    color: var(--tahoe-ink-red);
    box-shadow: none;
}
/* Кнопка "Переменные" начало */
.variables-button {
    position: fixed;
    margin: 10px;
    top: 50px;
    right: 10px;
    background-color: var(--tahoe-accent);
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1;
}
.variables-container {
    position: fixed;
    margin: 5px;
    top: 50px;
    right: 10px;
    color: white;
    border: none;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1;
}

.variables-button:hover {
    background-color: var(--tahoe-accent-press);
}
/* Кнопка "Переменные" конец */
}

@layer legacy {
/* новый input начало */
.input-main {
    position: relative;
    /* margin: 20px 0; */
    font-family: "Open Sans", sans-serif;
    margin-top: 20px;
}

.input-main label {
    position: absolute;
    top: 0;
    left: 10px;
    background: white;
    padding: 0 5px;
    font-size: 12px;
    color: #666;
    transform: translateY(-50%);
    max-width: 90%;
}

.input-main input,
.input-main select,
.input-main textarea {
    padding: 12px 10px 8px;
    font-size: 16px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    max-width: 60%;
    min-width: 500px;
    font-family: "Open Sans", sans-serif;
    background-color: white;
    cursor: pointer;
}

.input-main input:focus,
.input-main select:focus {
    border-color: #000;
}

.input-main select:hover {
    border-color: #95a5a6;
}

.input-main select option {
    padding: 8px;
    font-size: 16px;
}
/* новый input конец */

.input-main .multiselect {
    padding-top: 14px; /* чтобы label не налезал на текст */
    box-sizing: border-box;
}

.input-main .multiselect__tags {
    padding: 12px 10px 8px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    min-height: 42px;
}

.input-main .multiselect--active .multiselect__tags {
    border-color: #000;
}
}

@layer legacy {
/* Сообщение при наведении на элемент начало  */
.tooltipParent {
    position: relative; /* Чтобы подсказка позиционировалась относительно родителя */
    cursor: pointer;
}

.tooltip {
    font-size: 12px;
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 6px 8px;
    position: absolute;
    bottom: calc(100% + 6px); /* Расположить подсказку над элементом */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.18s ease;
    box-sizing: border-box;

    /* предотвращаем выход за viewport */
    max-width: calc(100vw - 32px); /* не шире окна с отступом */
    min-width: 120px; /* минимально читабельная ширина */
    overflow-wrap: anywhere; /* переносит длинные слова/URL */
    word-break: break-word;
    white-space: normal;

    /* если текст большой — даём скролл внутри подсказки */
    max-height: 40vh;
    overflow: auto;
}

/* .switch:hover .tooltip, */
.tooltipParent:hover .tooltip {
    visibility: visible;
    opacity: 1;
}
/* Сообщение при наведении на элемент конец */
}

@layer legacy {

/* Сброс базовых стилей и правила body переехали в styles/app.css:
   в слое legacy они пережили бы токены (padding в tahoe.css не задан) и молча
   сдвинули бы весь каркас на 20px. */

/* Заголовки.
   Цвет взят из токена, а не оставлен legacy-значением #2c3e50: на тёмном фоне
   (#1e1e1e) оно даёт 1.52:1 — заголовок страницы «События» практически не
   читается. Токен сам меняется вместе с темой, поэтому дублировать правило под
   [data-theme="dark"] не нужно (иначе оно разъехалось бы с @media). */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--tahoe-label);
    margin-bottom: 15px;
}

/* Ссылки */
a {
    color: var(--tahoe-link);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--tahoe-control);
}

.rounded-border {
    border: 2px solid var(--tahoe-hair); /* цвет границы из токена */
    border-radius: 4px; /* скругление углов */
    padding: 10px; /* внутренние отступы для содержимого */
}

.big-text {
    font-size: 20px; /* размер текста */
    font-weight: bold; /* жирный текст */
}
.small-text {
    font-size: 12px; /* размер текста */
    font-weight: normal; /* обычный текст */
}

/* Списки */
ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 15px;
}

/* Текстовые блоки и абзацы */
p {
    margin-bottom: 15px;
}

/* Навигация */
nav {
    /* background-color: #f5f7fa; */
    padding: 10px 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    align-items: center; /* центрирование по горизонтали */
}

nav a {
    color: var(--tahoe-label);
    margin-right: 15px;
}

nav a:hover {
    color: var(--tahoe-label-2);
}

/* Таблицы */
table.main {
    width: auto;
    padding: 10px;
    border-spacing: 0;
    border-collapse: collapse;
    margin-bottom: 20px;
    line-height: 1;
    /* white-space: nowrap; */
}

.main tr {
    border: none; /* Убираем границы у строк */
}

.main td,
.main th {
    border: 2px solid var(--tahoe-hair-soft); /* Границы только у ячеек */
    padding: 10px 15px;
}

/* Только для строк первого уровня в .main. Подчёркивание при наведении было
   зелёным — цвет, который в Tahoe принадлежит индикаторам состояния, а не
   наведению; берём синий контролов */
table.main > tbody > tr:hover > td,
table.main > tr:hover > td {
    border-bottom: 2px solid var(--tahoe-control);
}

/* Стили для таблиц с переносом слов */
table.word-wrap td.word-wrap {
    word-wrap: break-word; /* Перенос слов */
    word-break: break-word; /* Перенос слов */
    white-space: normal; /* Убирает запрет на перенос строк */
}

select {
    min-width: 500px;
}
}

/* Размер в em, а не в пикселях: значок стоит в тексте разного кегля, и
   пиксельный размер сделал бы его в шапке крупнее буквы, а в ячейке мельче */
.icon[data-v-fa229745] {
    width: 1.3em;
    height: 1.3em;
    vertical-align: -.26em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}
.icon--sm[data-v-fa229745] {
    width: calc(11 * var(--tahoe-u));
    height: calc(11 * var(--tahoe-u));
}

/* Значок как всё содержимое кнопки */
.icon--ctl[data-v-fa229745] {
    width: calc(17 * var(--tahoe-u));
    height: calc(17 * var(--tahoe-u));
    vertical-align: middle;
}
.icon--lg[data-v-fa229745] {
    width: calc(22 * var(--tahoe-u));
    height: calc(22 * var(--tahoe-u));
}

.t-btn[data-v-974994bf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(5 * var(--tahoe-u));
    height: calc(22 * var(--tahoe-u));
    /* margin задаётся явно: старое правило button { margin: 10px } живёт в
       слое legacy, который объявлен ПОЗЖЕ слоя reset и потому его перебивает.
       Убирать margin общим правилом нельзя — на нём держатся ещё не
       перенесённые страницы */
    margin: 0;
    padding: 0 calc(10 * var(--tahoe-u));
    border: none;
    border-radius: calc(5 * var(--tahoe-u));
    background: var(--tahoe-fill);
    box-shadow: var(--tahoe-ctl-shadow);
    color: var(--tahoe-label);
    font-family: inherit;
    font-size: calc(12 * var(--tahoe-u));
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s var(--tahoe-ease);
}
.t-btn[data-v-974994bf]:hover:not(:disabled) {
    background: var(--tahoe-fill-hover);
}
.t-btn[data-v-974994bf]:active:not(:disabled) {
    background: var(--tahoe-fill-press);
}
.t-btn[data-v-974994bf]:disabled {
    color: var(--tahoe-label-3);
    cursor: not-allowed;
}

/* Кнопка по умолчанию. Белый текст здесь законен только для короткой подписи:
   4.50:1 в светлой теме и 4.58:1 в тёмной — см. tahoe-project.css */
.t-btn--accent[data-v-974994bf] {
    background: var(--tahoe-accent);
    box-shadow: none;
    color: #fff;
}

/* Не --tahoe-control-press: в тёмной теме он СВЕТЛЕЕ контрола и белый на нём
   даёт 2.83:1 — кнопка при наведении переставала бы читаться. Расчёт
   собственного токена — в tahoe-project.css */
.t-btn--accent[data-v-974994bf]:hover:not(:disabled),
.t-btn--accent[data-v-974994bf]:active:not(:disabled) {
    background: var(--tahoe-accent-press);
}
.t-btn--accent[data-v-974994bf]:disabled {
    color: #fff;
    opacity: .5;
}

/* Деструктивная: текст ink-red на подложке tint-red — 4.78:1 */
.t-btn--danger[data-v-974994bf] {
    background: var(--tahoe-tint-red);
    box-shadow: none;
    color: var(--tahoe-ink-red);
}

/* Плашка плотнее на курсоре: в списке из нескольких строк «Удалить» иначе не
   видно, над какой строкой курсор, а действие необратимое. Цвет текста тот же */
.t-btn--danger[data-v-974994bf]:hover:not(:disabled),
.t-btn--danger[data-v-974994bf]:active:not(:disabled) {
    background: var(--tahoe-tint-red-press);
}

/* Плоская: без фона, фон появляется на наведении */
.t-btn--ghost[data-v-974994bf] {
    background: none;
    box-shadow: none;
    color: var(--tahoe-link);
}
.t-btn--ghost[data-v-974994bf]:hover:not(:disabled) {
    background: var(--tahoe-fill);
}

.t-input[data-v-521d87ca] {
    height: calc(22 * var(--tahoe-u));
    min-width: 0;
    padding: 0 calc(7 * var(--tahoe-u));
    border: .5px solid var(--tahoe-hair);
    border-radius: calc(5 * var(--tahoe-u));
    background: var(--tahoe-win);
    /* внутренняя тень сверху — канон описывает её словами, число производное */
    box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, .06);
    color: var(--tahoe-label);
    font-family: inherit;
    font-size: calc(12 * var(--tahoe-u));
}
.t-input--wide[data-v-521d87ca] {
    flex: 1;
    width: 100%;
}
.t-input--mono[data-v-521d87ca] {
    font-family: var(--mono);
    font-size: calc(11.5 * var(--tahoe-u));
}
.t-input--num[data-v-521d87ca] {
    font-variant-numeric: tabular-nums;
}
.t-input[data-v-521d87ca]::placeholder {
    color: var(--tahoe-label-3);
}
.t-input[data-v-521d87ca]:disabled {
    color: var(--tahoe-label-2);
    cursor: not-allowed;
}

.login-screen[data-v-22f71eee] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: calc(20 * var(--tahoe-u));
    background: var(--tahoe-win);
}

/* Радиус 12 и хейрлайн: панель лежит на фоне, а не висит над ним, поэтому
   тени у неё нет */
.login-card[data-v-22f71eee] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(12 * var(--tahoe-u));
    width: calc(300 * var(--tahoe-u));
    max-width: 100%;
    padding: calc(22 * var(--tahoe-u)) calc(20 * var(--tahoe-u));
    border: .5px solid var(--tahoe-hair);
    border-radius: calc(12 * var(--tahoe-u));
    background: var(--tahoe-sidebar-solid);
}
.login-icon[data-v-22f71eee] {
    color: var(--tahoe-label-2);
}
.login-more[data-v-22f71eee] {
    width: 100%;
    font-size: calc(12.5 * var(--tahoe-u));
}
.login-more summary[data-v-22f71eee] {
    padding: calc(4 * var(--tahoe-u)) 0;
    color: var(--tahoe-label-2);
    cursor: pointer;
}

/* summary фокусируется с клавиатуры, но в общий список tahoe.css
   (a, button, input, select, textarea, [tabindex]) не попадает — кольцо
   задаётся здесь, теми же значениями */
.login-more summary[data-v-22f71eee]:focus-visible {
    outline: 2px solid var(--tahoe-control);
    outline-offset: 1px;
    border-radius: calc(4 * var(--tahoe-u));
}
.login-more-body[data-v-22f71eee] {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--tahoe-u));
    padding-top: calc(8 * var(--tahoe-u));
}
.login-more-btns[data-v-22f71eee] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(6 * var(--tahoe-u));
}

.t-dot[data-v-cc2cd183] {
    flex: none;
    width: calc(7 * var(--tahoe-u));
    height: calc(7 * var(--tahoe-u));
    border-radius: 999px;
    background: var(--tahoe-green);
}
.t-dot--warn[data-v-cc2cd183] {
    background: var(--tahoe-orange);
}
.t-dot--err[data-v-cc2cd183] {
    background: var(--tahoe-red);
}
.t-dot--off[data-v-cc2cd183] {
    background: var(--tahoe-label-3);
}

/* Границы справа НЕТ намеренно (COMPONENTS.md §1): разделение держит разница
   материалов сайдбара и содержимого, а не линия */
.t-side[data-v-46cf8ef8] {
    flex: none;
    width: calc(214 * var(--tahoe-u));
    display: flex;
    flex-direction: column;
    background: var(--tahoe-sidebar);
    -webkit-backdrop-filter: blur(48px) saturate(180%);
    backdrop-filter: blur(48px) saturate(180%);
    overflow: hidden;
}
.t-side-head[data-v-46cf8ef8] {
    flex: none;
    display: flex;
    align-items: center;
    gap: calc(7 * var(--tahoe-u));
    height: calc(52 * var(--tahoe-u));
    padding: 0 calc(12 * var(--tahoe-u));
    font-size: calc(13.5 * var(--tahoe-u));
    font-weight: 590;
    letter-spacing: -.01em;
}
.t-side-body[data-v-46cf8ef8] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* margin явно: legacy nav { margin-bottom: 20px } объявлен в слое, идущем
       после reset, и без этой строки внизу сайдбара появляется щель */
    margin: 0;
    padding: calc(4 * var(--tahoe-u)) calc(8 * var(--tahoe-u)) calc(8 * var(--tahoe-u));
}
.t-side-sect[data-v-46cf8ef8] {
    margin-bottom: calc(6 * var(--tahoe-u));
}
.t-side-title[data-v-46cf8ef8] {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--tahoe-u));
    height: calc(24 * var(--tahoe-u));
    padding: 0 calc(7 * var(--tahoe-u));
    font-size: calc(11.5 * var(--tahoe-u));
    font-weight: 590;
    color: var(--tahoe-label-2);
}
.t-item[data-v-46cf8ef8] {
    display: flex;
    align-items: center;
    gap: calc(7 * var(--tahoe-u));
    width: 100%;
    height: calc(27 * var(--tahoe-u));
    /* margin явно: legacy button { margin: 10px } перебивает слой reset */
    margin: 0;
    padding: 0 calc(7 * var(--tahoe-u));
    border: none;
    border-radius: calc(6 * var(--tahoe-u));
    background: none;
    box-shadow: none;
    color: var(--tahoe-label);
    font-family: inherit;
    font-size: calc(13 * var(--tahoe-u));
    text-align: left;
    cursor: pointer;
    transition: background-color .12s var(--tahoe-ease);
}
.t-item[data-v-46cf8ef8]:hover {
    background: var(--tahoe-fill);
}

/* Выделение пункта сайдбара СЕРОЕ, а не синее.
   Класс называется is-active, а не active: глобальный обработчик клика из
   main.ts вешает класс `active` на любую нажатую кнопку и снимает его со
   всех остальных. Совпадение имён означало бы, что подсветка раздела гаснет
   при нажатии любой кнопки на странице — до ближайшей перерисовки */
.t-item.is-active[data-v-46cf8ef8] {
    background: var(--tahoe-sb-sel);
    font-weight: 590;
}
.t-item-label[data-v-46cf8ef8] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.t-count[data-v-46cf8ef8] {
    font-size: calc(11 * var(--tahoe-u));
    color: var(--tahoe-label-2);
    font-variant-numeric: tabular-nums;
}
.t-side-foot[data-v-46cf8ef8] {
    flex: none;
    display: flex;
    align-items: center;
    gap: calc(6 * var(--tahoe-u));
    padding: calc(8 * var(--tahoe-u)) calc(14 * var(--tahoe-u));
    border-top: .5px solid var(--tahoe-hair);
    font-size: calc(11 * var(--tahoe-u));
    color: var(--tahoe-label-2);
}

/* 44 = 30 (высота строки состояния внизу сайдбара) + 14 (обычный зазор):
   иначе тост накрывает надпись «Соединение с сервером есть». Отсчёт от низа, а
   не сдвиг вправо на ширину сайдбара: при свёрнутом сайдбаре тост иначе повис
   бы в пустоте, а знать его состояние тост не должен */
.log-container[data-v-34723051] {
    position: fixed;
    left: calc(14 * var(--tahoe-u));
    bottom: calc(44 * var(--tahoe-u));
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: calc(7 * var(--tahoe-u));
}
.log[data-v-34723051] {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--tahoe-u));
    min-width: calc(210 * var(--tahoe-u));
    max-width: calc(360 * var(--tahoe-u));
    padding: calc(8 * var(--tahoe-u)) calc(11 * var(--tahoe-u));
    border: .5px solid var(--tahoe-hair);
    border-radius: calc(10 * var(--tahoe-u));
    background: var(--tahoe-sidebar);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    /* Тень законна: тост физически висит над содержимым */
    box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .55);
    color: var(--tahoe-label);
    font-size: calc(12 * var(--tahoe-u));
    overflow-wrap: anywhere;
}

.t-capsule[data-v-8e491000] {
    display: inline-flex;
    align-items: center;
    gap: calc(2 * var(--tahoe-u));
    height: calc(28 * var(--tahoe-u));
    padding: 0 calc(2 * var(--tahoe-u));
    border-radius: calc(14 * var(--tahoe-u));
    background: var(--tahoe-fill);
}
.t-capsule--accent[data-v-8e491000] {
    background: var(--tahoe-accent);
}
.t-capsule[data-v-8e491000] .t-cap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(4 * var(--tahoe-u));
    height: calc(24 * var(--tahoe-u));
    min-width: calc(26 * var(--tahoe-u));
    /* margin явно: legacy-правило button { margin: 10px } объявлено в слое,
       который идёт после reset, и без этой строки разрывает капсулу */
    margin: 0;
    padding: 0 calc(8 * var(--tahoe-u));
    border: none;
    border-radius: calc(12 * var(--tahoe-u));
    background: none;
    box-shadow: none;
    color: var(--tahoe-label);
    font-family: inherit;
    font-size: calc(12 * var(--tahoe-u));
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s var(--tahoe-ease);
}
.t-capsule[data-v-8e491000] .t-cap-btn:hover:not(:disabled) {
    background: var(--tahoe-fill-hover);
}
.t-capsule[data-v-8e491000] .t-cap-btn[aria-pressed="true"] {
    background: var(--tahoe-fill-press);
}
.t-capsule[data-v-8e491000] .t-cap-btn:disabled {
    color: var(--tahoe-label-3);
    cursor: not-allowed;
}
.t-capsule--accent[data-v-8e491000] .t-cap-btn {
    color: #fff;
}
.t-capsule--accent[data-v-8e491000] .t-cap-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, .18);
}

/* Ширина разделителя — настоящий пиксель, высота масштабируемая */
.t-capsule[data-v-8e491000] .t-cap-sep {
    flex: none;
    width: .5px;
    height: calc(15 * var(--tahoe-u));
    background: var(--tahoe-hair);
}

.t-alert[data-v-7522f645] {
    width: calc(280 * var(--tahoe-u));
    max-width: 100%;
    padding: calc(18 * var(--tahoe-u)) calc(20 * var(--tahoe-u)) calc(16 * var(--tahoe-u));
    border: .5px solid var(--tahoe-hair);
    border-radius: calc(26 * var(--tahoe-u));
    background: var(--tahoe-sidebar);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .5);
    text-align: center;
}
.t-alert-icon[data-v-7522f645] {
    margin-bottom: calc(8 * var(--tahoe-u));
}
.t-alert-icon--warn[data-v-7522f645] {
    color: var(--tahoe-ink-orange);
}
.t-alert-icon--error[data-v-7522f645] {
    color: var(--tahoe-ink-red);
}
.t-alert-title[data-v-7522f645] {
    font-size: calc(13.5 * var(--tahoe-u));
    font-weight: 590;
    letter-spacing: -.01em;
}
.t-alert-text[data-v-7522f645] {
    margin-top: calc(5 * var(--tahoe-u));
    font-size: calc(11.5 * var(--tahoe-u));
    color: var(--tahoe-label-2);
    line-height: 1.45;
    /* Сообщения об ошибках приходят от API целыми абзацами и с длинными
       идентификаторами: без переноса они разъезжают алерт по ширине */
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.t-alert-btns[data-v-7522f645] {
    display: flex;
    gap: calc(8 * var(--tahoe-u));
    margin-top: calc(14 * var(--tahoe-u));
}

/* Кнопки алерта крупнее обычных: 26 против 22, радиус 8 против 5 —
   вложенное скруглено меньше родителя (алерт 26) */
.t-alert-btns[data-v-7522f645] .t-btn {
    flex: 1;
    height: calc(26 * var(--tahoe-u));
    border-radius: calc(8 * var(--tahoe-u));
}

.t-row[data-v-97e31ee2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(12 * var(--tahoe-u));
    min-height: calc(30 * var(--tahoe-u));
    padding: calc(5 * var(--tahoe-u)) calc(12 * var(--tahoe-u));
    border-bottom: .5px solid var(--tahoe-hair-soft);
    font-size: calc(13 * var(--tahoe-u));
}
.t-row[data-v-97e31ee2]:last-child {
    border-bottom: none;
}
.t-row-label[data-v-97e31ee2] {
    flex: none;
    width: calc(160 * var(--tahoe-u));
    color: var(--tahoe-label);
}
.t-row-ctl[data-v-97e31ee2] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(6 * var(--tahoe-u));
}
.t-row-hint[data-v-97e31ee2] {
    width: 100%;
    padding-bottom: calc(3 * var(--tahoe-u));
    font-size: calc(11 * var(--tahoe-u));
    color: var(--tahoe-label-2);
}

.t-area[data-v-dcf4fbc2] {
    display: block;
    width: 100%;
    min-height: calc(58 * var(--tahoe-u));
    padding: calc(6 * var(--tahoe-u)) calc(7 * var(--tahoe-u));
    border: .5px solid var(--tahoe-hair);
    border-radius: calc(5 * var(--tahoe-u));
    background: var(--tahoe-win);
    box-shadow: inset 0 1px 1.5px rgba(0, 0, 0, .06);
    color: var(--tahoe-label);
    font-family: inherit;
    font-size: calc(12.5 * var(--tahoe-u));
    line-height: 1.45;
    resize: vertical;
}
.t-area[data-v-dcf4fbc2]::placeholder {
    color: var(--tahoe-label-3);
}

.t-dialog[data-v-6efd89a9] {
    width: calc(420 * var(--tahoe-u));
    max-width: 100%;
    border: .5px solid var(--tahoe-hair);
    border-radius: calc(20 * var(--tahoe-u));
    background: var(--tahoe-sidebar);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .5);
    overflow: hidden;
}
.t-dialog-head[data-v-6efd89a9] {
    padding: calc(16 * var(--tahoe-u)) calc(16 * var(--tahoe-u)) calc(10 * var(--tahoe-u));
}
.t-dialog-title[data-v-6efd89a9] {
    font-size: calc(13.5 * var(--tahoe-u));
    font-weight: 590;
    letter-spacing: -.01em;
}
.t-dialog-text[data-v-6efd89a9] {
    margin-top: calc(4 * var(--tahoe-u));
    font-size: calc(11.5 * var(--tahoe-u));
    color: var(--tahoe-label-2);
    line-height: 1.45;
}
.t-dialog-body[data-v-6efd89a9] {
    padding-bottom: calc(12 * var(--tahoe-u));
}
.t-dialog-btns[data-v-6efd89a9] {
    display: flex;
    gap: calc(8 * var(--tahoe-u));
    padding: calc(12 * var(--tahoe-u)) calc(16 * var(--tahoe-u)) 0;
}

.t-dialog-layer[data-v-b1d23a10] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(16 * var(--tahoe-u));
    background: rgba(0, 0, 0, .18);
}

.t-popup[data-v-cdfde047] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--tahoe-u));
    height: calc(22 * var(--tahoe-u));
    padding: 0 calc(7 * var(--tahoe-u));
    border-radius: calc(5 * var(--tahoe-u));
    background: var(--tahoe-win);
    box-shadow: var(--tahoe-ctl-shadow);
    color: var(--tahoe-label);
    font-size: calc(12 * var(--tahoe-u));
    cursor: pointer;
}
.t-popup.block[data-v-cdfde047] {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.t-popup.disabled[data-v-cdfde047] {
    color: var(--tahoe-label-2);
    cursor: not-allowed;
}
.native[data-v-cdfde047] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    /* min-width из legacy-стилей select здесь не действует: слой legacy
       проигрывает неслоистому правилу */
    min-width: 0;
}
.text[data-v-cdfde047] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* label-2, а не label-3: плейсхолдер — единственная роль, где канон разрешает
   бледный цвет, но здесь это ещё и единственная подсказка «что выбрать» */
.text.is-placeholder[data-v-cdfde047] {
    color: var(--tahoe-label-2);
}
.chev[data-v-cdfde047] {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: var(--tahoe-label-2);
}

/* Кольцо рисуется вокруг оболочки, а не вокруг невидимого select.
   :has(:focus-visible), а не :focus-within — иначе кольцо появлялось бы и по
   клику мышью, а не только при обходе клавиатурой */
.native[data-v-cdfde047]:focus-visible {
    outline: none;
}
.t-popup[data-v-cdfde047]:has(.native:focus-visible) {
    outline: 2px solid var(--tahoe-control);
    outline-offset: 1px;
}

/* Заголовок с подзаголовком в тулбаре стоят колонкой и сжимаются первыми:
   на узком фрейме место должно оставаться кнопкам, а не тексту */
.t-heading[data-v-f3de7b54] {
    min-width: 0;
}
.is-hidden[data-v-f3de7b54] {
    display: none;
}

/* Страница не отдала в инспектор ничего — панели на экране нет.
   Сам элемент при этом остаётся в DOM: он цель телепорта */
.t-inspector[data-v-f3de7b54]:empty {
    display: none;
}

.t-panel[data-v-5cab51b4] {
    margin-bottom: calc(10 * var(--tahoe-u));
    border: .5px solid var(--tahoe-hair);
    border-radius: calc(8 * var(--tahoe-u));
    background: var(--tahoe-win);
    overflow: hidden;
}
.t-panel-head[data-v-5cab51b4] {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--tahoe-u));
    min-height: calc(34 * var(--tahoe-u));
    padding: 0 calc(12 * var(--tahoe-u));
    background: var(--tahoe-bar);
    font-size: calc(12.5 * var(--tahoe-u));
    font-weight: 590;
}
.t-panel-body[data-v-5cab51b4] {
    padding: calc(10 * var(--tahoe-u)) calc(12 * var(--tahoe-u)) calc(12 * var(--tahoe-u));
}

/* margin явно: legacy p { margin-bottom: 15px } живёт в слое, объявленном
   после reset, и без этой строки абзац разъезжается с кнопкой */
.home-text[data-v-41ccdff3] {
    max-width: calc(560 * var(--tahoe-u));
    margin: 0 0 calc(10 * var(--tahoe-u));
    font-size: calc(12.5 * var(--tahoe-u));
    color: var(--tahoe-label-2);
    line-height: 1.45;
}

.t-empty[data-v-3f9daf55] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(6 * var(--tahoe-u));
    padding: calc(40 * var(--tahoe-u)) calc(20 * var(--tahoe-u));
    text-align: center;
}
.t-empty-icon[data-v-3f9daf55] {
    color: var(--tahoe-label-3);
}

/* margin явно: legacy p { margin-bottom: 15px } объявлен в слое, идущем после
   reset, и без этой строки вертикальный ритм пустого состояния разъезжается */
.t-empty-title[data-v-3f9daf55] {
    margin: 0;
    font-size: calc(13 * var(--tahoe-u));
    color: var(--tahoe-label-2);
}

/* label-2, а не label-3: причина — текст-носитель, его обязаны прочитать
   (COMPONENTS.md §9), а label-3 канон разрешает только плейсхолдеру — на белом
   он даёт 1.99:1. Бледным остаётся один значок */
.t-empty-reason[data-v-3f9daf55] {
    margin: 0;
    max-width: calc(360 * var(--tahoe-u));
    font-size: calc(11.5 * var(--tahoe-u));
    color: var(--tahoe-label-2);
    line-height: 1.45;
}

.step[data-v-f941df3e] {
    display: flex;
    align-items: flex-start;
    gap: calc(8 * var(--tahoe-u));
    padding: calc(4 * var(--tahoe-u)) 0;
    font-size: calc(12.5 * var(--tahoe-u));
}
.step-mark[data-v-f941df3e] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(16 * var(--tahoe-u));
    height: calc(16 * var(--tahoe-u));
    margin-top: calc(1 * var(--tahoe-u));
    border-radius: 999px;
    background: var(--tahoe-fill);
    color: var(--tahoe-label-3);
}
.step.done .step-mark[data-v-f941df3e] {
    background: var(--tahoe-tint-green);
    color: var(--tahoe-ink-green);
}
.step.fail .step-mark[data-v-f941df3e] {
    background: var(--tahoe-tint-red);
    color: var(--tahoe-ink-red);
}
.step.wait .step-mark[data-v-f941df3e] {
    background: var(--tahoe-tint-orange);
    color: var(--tahoe-ink-orange);
}
.step-text[data-v-f941df3e] {
    flex: 1;
    min-width: 0;
}
.step.todo .step-text[data-v-f941df3e] {
    color: var(--tahoe-label-2);
}

.t-table-wrap[data-v-72b0ed7d] {
    overflow-x: auto;
}
.t-table[data-v-72b0ed7d] {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(12.5 * var(--tahoe-u));
}
.t-table[data-v-72b0ed7d] th {
    padding: calc(5 * var(--tahoe-u)) calc(9 * var(--tahoe-u));
    border-bottom: .5px solid var(--tahoe-hair);
    background: var(--tahoe-bar);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    font-size: calc(11.5 * var(--tahoe-u));
    font-weight: 500;
    color: var(--tahoe-label-2);
    text-align: left;
    white-space: nowrap;
}
.t-table[data-v-72b0ed7d] td {
    padding: calc(4 * var(--tahoe-u)) calc(9 * var(--tahoe-u));
}
.t-table[data-v-72b0ed7d] tbody tr:nth-child(even) {
    background: var(--tahoe-stripe);
}
.t-table[data-v-72b0ed7d] tbody tr:hover {
    background: var(--tahoe-tint-blue);
}
.t-table[data-v-72b0ed7d] .num {
    font-variant-numeric: tabular-nums;
}

/* Подвал панели: чек-лист и кнопка регистрации. Панель отдана строкам UiRow
   и потому объявлена как :padded="false" — отступы задаёт этот блок */
.panel-foot[data-v-aaeb6e60] {
    padding: calc(10 * var(--tahoe-u)) calc(12 * var(--tahoe-u)) calc(12 * var(--tahoe-u));
    border-top: .5px solid var(--tahoe-hair-soft);
}
.foot-hint[data-v-aaeb6e60] {
    margin-bottom: calc(6 * var(--tahoe-u));
}
.foot-btns[data-v-aaeb6e60] {
    display: flex;
    gap: calc(6 * var(--tahoe-u));
    margin-top: calc(10 * var(--tahoe-u));
}

/* Адрес вебхука — длинная строка без пробелов: без переноса она растягивает
   панель и выдавливает содержимое за край фрейма */
.step-url[data-v-aaeb6e60] {
    display: block;
    color: var(--tahoe-label-2);
    overflow-wrap: anywhere;
}

.t-badge[data-v-cdc1dfd7] {
    display: inline-flex;
    align-items: center;
    gap: calc(4 * var(--tahoe-u));
    height: calc(16 * var(--tahoe-u));
    padding: 0 calc(6 * var(--tahoe-u));
    border-radius: 999px;
    background: var(--tahoe-fill);
    color: var(--tahoe-label-2);
    font-size: calc(11 * var(--tahoe-u));
    font-weight: 500;
    white-space: nowrap;
}
.t-badge--ok[data-v-cdc1dfd7] {
    background: var(--tahoe-tint-green);
    color: var(--tahoe-ink-green);
}
.t-badge--warn[data-v-cdc1dfd7] {
    background: var(--tahoe-tint-orange);
    color: var(--tahoe-ink-orange);
}
.t-badge--err[data-v-cdc1dfd7] {
    background: var(--tahoe-tint-red);
    color: var(--tahoe-ink-red);
}
.t-badge--calm[data-v-cdc1dfd7] {
    background: var(--tahoe-fill);
    color: var(--tahoe-label);
}

.t-seg[data-v-8fe892a6] {
    display: inline-flex;
    gap: calc(2 * var(--tahoe-u));
    padding: calc(1 * var(--tahoe-u));
    border-radius: calc(6 * var(--tahoe-u));
    background: var(--tahoe-fill);
}
.t-seg button[data-v-8fe892a6] {
    height: calc(20 * var(--tahoe-u));
    /* margin явно: legacy button { margin: 10px } перебивает слой reset */
    margin: 0;
    padding: 0 calc(10 * var(--tahoe-u));
    border: none;
    border-radius: calc(5 * var(--tahoe-u));
    background: none;
    color: var(--tahoe-label);
    font-family: inherit;
    font-size: calc(12 * var(--tahoe-u));
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s var(--tahoe-ease);
}
.t-seg button[aria-pressed="true"][data-v-8fe892a6] {
    background: var(--tahoe-win);
    box-shadow: var(--tahoe-ctl-shadow);
    font-weight: 590;
}
.t-seg button[data-v-8fe892a6]:disabled {
    color: var(--tahoe-label-3);
    cursor: not-allowed;
}
.t-seg--v[data-v-8fe892a6] {
    flex-direction: column;
    gap: calc(2 * var(--tahoe-u));
    padding: calc(2 * var(--tahoe-u));
    border-radius: calc(7 * var(--tahoe-u));
}
.t-seg--v button[data-v-8fe892a6] {
    height: calc(28 * var(--tahoe-u));
    padding: 0 calc(11 * var(--tahoe-u));
    text-align: left;
}

.bot-body[data-v-a8d06c93] {
    padding: calc(10 * var(--tahoe-u)) calc(12 * var(--tahoe-u)) calc(12 * var(--tahoe-u));
}

/* Кнопка сворачивания. Плоская: фон появляется только на наведении, как у
   любой кнопки в шапке (COMPONENTS.md §4). Отрицательный отступ слева
   возвращает шеврон на левый край шапки — иначе он висит с двойным зазором */
.bot-toggle[data-v-a8d06c93] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(22 * var(--tahoe-u));
    height: calc(22 * var(--tahoe-u));
    margin-left: calc(-4 * var(--tahoe-u));
    padding: 0;
    border: none;
    border-radius: calc(5 * var(--tahoe-u));
    background: none;
    color: var(--tahoe-label-2);
    cursor: pointer;
}
.bot-toggle[data-v-a8d06c93]:hover {
    background: var(--tahoe-fill-hover);
}

/* Поворот шеврона на 90° задаёт общее правило .chev-r в styles/app.css —
   здесь оно не дублируется */

/* Блок «вопрос — ответы — кнопки» */
.qa[data-v-a8d06c93] {
    margin-bottom: calc(10 * var(--tahoe-u));
    border: .5px solid var(--tahoe-hair);
    border-radius: calc(8 * var(--tahoe-u));
    overflow: hidden;
}
.qa-head[data-v-a8d06c93] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(8 * var(--tahoe-u));
    min-height: calc(32 * var(--tahoe-u));
    padding: calc(4 * var(--tahoe-u)) calc(10 * var(--tahoe-u));
    background: var(--tahoe-bar);
    font-size: calc(12.5 * var(--tahoe-u));
    font-weight: 590;
}
.qa-body[data-v-a8d06c93] {
    padding: calc(9 * var(--tahoe-u)) calc(10 * var(--tahoe-u)) calc(10 * var(--tahoe-u));
}
.qa-answer[data-v-a8d06c93] {
    margin-bottom: calc(8 * var(--tahoe-u));
    padding: calc(8 * var(--tahoe-u));
    border: .5px solid var(--tahoe-hair-soft);
    border-radius: calc(6 * var(--tahoe-u));
    background: var(--tahoe-stripe);
}
.qa-answer-head[data-v-a8d06c93] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(8 * var(--tahoe-u));
    margin-bottom: calc(6 * var(--tahoe-u));
    font-size: calc(11 * var(--tahoe-u));
    font-weight: 590;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--tahoe-label-2);
}
.qa-delay[data-v-a8d06c93] {
    width: calc(52 * var(--tahoe-u));
}

/* Плашки кнопок бота: пунктир — знак того, что это ДАННЫЕ, уходящие клиенту
   в мессенджер, а не контролы интерфейса */
.qa-btns[data-v-a8d06c93] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(6 * var(--tahoe-u));
}
.qa-btns-add[data-v-a8d06c93] {
    margin-bottom: calc(10 * var(--tahoe-u));
}
.qa-btns-title[data-v-a8d06c93] {
    margin-bottom: calc(5 * var(--tahoe-u));
}
.qa-btn[data-v-a8d06c93] {
    display: inline-flex;
    align-items: center;
    gap: calc(4 * var(--tahoe-u));
    height: calc(28 * var(--tahoe-u));
    padding: 0 calc(4 * var(--tahoe-u)) 0 calc(6 * var(--tahoe-u));
    border: .5px dashed var(--tahoe-hair);
    border-radius: calc(6 * var(--tahoe-u));
    background: var(--tahoe-fill);
}
.qa-btn-input[data-v-a8d06c93] {
    width: calc(150 * var(--tahoe-u));
}

/* Превью файла-ответа */
.qa-file[data-v-a8d06c93] {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--tahoe-u));
    padding: calc(6 * var(--tahoe-u)) calc(8 * var(--tahoe-u));
    border-radius: calc(6 * var(--tahoe-u));
    background: var(--tahoe-fill);
    font-size: calc(12 * var(--tahoe-u));
}
.qa-file-thumb[data-v-a8d06c93] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(34 * var(--tahoe-u));
    height: calc(34 * var(--tahoe-u));
    border-radius: calc(5 * var(--tahoe-u));
    background: var(--tahoe-fill-press);
    color: var(--tahoe-label-2);
    overflow: hidden;
}
.qa-file-thumb img[data-v-a8d06c93] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.qa-file-body[data-v-a8d06c93] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Выбор файла. Нативный input спрятан ВНУТРИ label и потому продолжает
   открывать диалог по клику по подписи; из потока фокуса он не выпадает —
   кольцо рисуется вокруг видимой части */
.file-pick[data-v-a8d06c93] {
    position: relative;
    flex: none;
    cursor: pointer;
}
.file-native[data-v-a8d06c93] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    /* Кольцо рисуется вокруг видимой части, а не вокруг невидимого поля */
    outline: none;
}
.file-pick-face[data-v-a8d06c93] {
    display: inline-flex;
    align-items: center;
    height: calc(22 * var(--tahoe-u));
    padding: 0 calc(10 * var(--tahoe-u));
    border-radius: calc(5 * var(--tahoe-u));
    background: var(--tahoe-fill);
    box-shadow: var(--tahoe-ctl-shadow);
    color: var(--tahoe-label);
    font-size: calc(12 * var(--tahoe-u));
    white-space: nowrap;
}
.file-pick:hover .file-pick-face[data-v-a8d06c93] {
    background: var(--tahoe-fill-hover);
}
.file-native:focus-visible + .file-pick-face[data-v-a8d06c93] {
    outline: 2px solid var(--tahoe-control);
    outline-offset: 1px;
}
.bot-foot[data-v-a8d06c93] {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--tahoe-u));
}

/* Подвал панели: содержимое, у которого нет своих отступов (панель отдана
   строкам UiRow и потому объявлена как :padded="false") */
.panel-foot[data-v-a4e391fe] {
    padding: calc(10 * var(--tahoe-u)) calc(12 * var(--tahoe-u)) calc(12 * var(--tahoe-u));
    border-top: .5px solid var(--tahoe-hair-soft);
}
.foot-hint[data-v-a4e391fe] {
    margin-bottom: calc(6 * var(--tahoe-u));
}
.foot-btns[data-v-a4e391fe] {
    display: flex;
    gap: calc(6 * var(--tahoe-u));
    margin-top: calc(10 * var(--tahoe-u));
}

/* Ненулевая ошибка. Цвет здесь дублирует смысл, а не заменяет его:
   подпись строки называет ошибку словами */
.is-err[data-v-a4e391fe] {
    color: var(--tahoe-ink-red);
}