.config-logs {
    margin: 20px 0;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
}
.config-logs h2 {
    margin: 0 0 16px 0;
    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: 0.3s;
    border-radius: 24px;
}
.config-logs__slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.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: translateX(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 0.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: 0.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;
}

.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: translateX(-50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
    max-width: 400px;
    min-width: 200px;
    word-wrap: break-word; /* Перенос слов при необходимости */
    /* white-space: nowrap; Запретить перенос слов */
}

/* .switch:hover .tooltip, */
.tooltipParent:hover .tooltip {
    visibility: visible;
    opacity: 1;
}
/* ============================================================================
 * Оформление клиента b24_change_entity — язык macOS Tahoe, раскладка
 * «инспектор справа» (вариант A, принят 16.08.2026).
 *
 * КАНОН: /Users/andrey/Coding/nodejs/ui ux macOs Tahoe/
 *   PALETTE.md    цвет и контраст        GEOMETRY.md   метрики и типографика
 *   COMPONENTS.md устройство элементов   ADOPTION.md   порядок внедрения
 * Макет вариантов: client/design/ui-variants-2026-08-16.html
 *
 * ПОРЯДОК ИМПОРТА ВАЖЕН: tahoe.css — копия канона, он идёт первым и не
 * правится в проекте. Всё, что ниже, — сборка компонентов из канонических
 * токенов и мост совместимости для чужих компонентов.
 *
 * ПРО ЛИТЕРАЛЫ ЦВЕТА. В .vue-файлах их быть не должно вовсе. В этом файле
 * допустимы только там, где токена нет по существу: белый текст на заливке
 * акцента и выделения, полупрозрачные тени и подложки, белая ручка
 * переключателя. Цвета стадий в справочнике приходят из Битрикс24 — это
 * данные, а не оформление.
 * ==========================================================================*/

/* ============================================================================
 * 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;
    }
}

:root {
    /* ПРОЕКТНОЕ ПРОИЗВОДНОЕ, оформлено расчётом (PALETTE.md, правило 6).
       Заливка главного действия экрана. В светлой теме совпадает с
       --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, но кнопка получила бы цвет
       выделенной строки — подмена, от которой канон предостерегает. */
    --tahoe-accent: #0d6efd;

    /* Наведение на кнопку по умолчанию. НЕ --tahoe-control-press: в тёмной
       теме он светлее акцента (#409cff) и роняет белый текст до 2.83:1 —
       ровно та пара, которую канон запрещает. Здесь белый даёт 6.13:1 */
    --tahoe-accent-hover: #0a5ad4;

    /* Моноширинный стек: в каноне его нет, идентификаторы там описаны
       словами. Цветом не является */
    --tahoe-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

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

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --tahoe-accent: #0974e0; }
}

:root[data-theme="dark"] { --tahoe-accent: #0974e0; }

/* ============================================================================
 * БАЗА
 * ==========================================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    /* Приложение занимает весь фрейм: полей вокруг нет, окно macOS не рисуем */
    overflow: hidden;
    line-height: 1.45;
}

#app {
    height: 100%;
}

body.no-scroll {
    overflow: hidden;
}

a {
    color: var(--tahoe-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

/* ============================================================================
 * ЗНАЧКИ. Контурные, только currentColor: цвет значку не задаётся никогда.
 * Размер в em, а не в пикселях, — значок стоит в тексте разного кегля.
 * ==========================================================================*/

.tahoe-icon {
    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;
}

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

.tahoe-icon--sm {
    width: calc(11 * var(--tahoe-u));
    height: calc(11 * var(--tahoe-u));
}

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

.tahoe-chevron--open {
    transform: rotate(90deg);
}

/* ============================================================================
 * ТИПОГРАФИКА И СЛУЖЕБНЫЕ КЛАССЫ
 * ==========================================================================*/

.tahoe-t2 { color: var(--tahoe-label-2); }
.tahoe-t3 { color: var(--tahoe-label-3); }
.tahoe-ok { color: var(--tahoe-ink-green); }
.tahoe-warn { color: var(--tahoe-ink-orange); }
.tahoe-err { color: var(--tahoe-ink-red); }
.tahoe-link { color: var(--tahoe-link); }
.tahoe-num { font-variant-numeric: tabular-nums; }

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

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

/* ============================================================================
 * КАРКАС: сайдбар — тулбар — контент — инспектор
 * ==========================================================================*/

/* max-width: 100 % — страховка от выезда за границу фрейма: приложение часто
   открыто в слайдере портала, который уже экрана, а горизонтальной прокрутки у
   body нет, и всё, что не поместилось, просто пропадает из виду */
.tahoe-shell {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--tahoe-win);
}

/* Границы справа НЕТ намеренно: разделение держит разница материалов */
.tahoe-sidebar {
    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;
    transition: width .2s var(--tahoe-ease), opacity .2s var(--tahoe-ease), visibility .2s var(--tahoe-ease);
}

/* visibility, а не только ширина: свёрнутая панель нулевой ширины осталась бы
   в порядке обхода Tab, и фокус уезжал бы на невидимые пункты */
.tahoe-sidebar--collapsed {
    width: 0;
    opacity: 0;
    visibility: hidden;
}

.tahoe-sidebar-inner {
    width: calc(214 * var(--tahoe-u));
    flex: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tahoe-sidebar-head {
    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;
}

.tahoe-sidebar-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: calc(4 * var(--tahoe-u)) calc(8 * var(--tahoe-u)) calc(8 * var(--tahoe-u));
}

.tahoe-sidebar-section { margin-bottom: calc(6 * var(--tahoe-u)); }

.tahoe-sidebar-title {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--tahoe-u));
    width: 100%;
    height: calc(24 * var(--tahoe-u));
    padding: 0 calc(7 * var(--tahoe-u));
    border: none;
    background: none;
    color: var(--tahoe-label-2);
    font-family: inherit;
    font-size: calc(11.5 * var(--tahoe-u));
    font-weight: 590;
    text-align: left;
    cursor: pointer;
}

.tahoe-item {
    display: flex;
    align-items: center;
    gap: calc(7 * var(--tahoe-u));
    width: 100%;
    height: calc(27 * var(--tahoe-u));
    padding: 0 calc(7 * var(--tahoe-u));
    border: none;
    border-radius: calc(6 * var(--tahoe-u));
    background: none;
    color: var(--tahoe-label);
    font-family: inherit;
    font-size: calc(13 * var(--tahoe-u));
    text-align: left;
    cursor: pointer;
}

.tahoe-item:hover { background: var(--tahoe-fill); }

/* Выделение пункта сайдбара СЕРОЕ: синим в macOS красится строка списка */
.tahoe-item--active {
    background: var(--tahoe-sb-sel);
    font-weight: 590;
}

.tahoe-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tahoe-count {
    font-size: calc(11 * var(--tahoe-u));
    color: var(--tahoe-label-2);
    font-variant-numeric: tabular-nums;
}

.tahoe-sidebar-foot {
    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);
}

/* Точка состояния. Низкий контраст ей разрешён ровно потому, что рядом
   всегда стоит текстовая метка (PALETTE.md, правило 5) */
.tahoe-dot {
    flex: none;
    width: calc(7 * var(--tahoe-u));
    height: calc(7 * var(--tahoe-u));
    border-radius: 999px;
    background: var(--tahoe-green);
}

.tahoe-dot--warn { background: var(--tahoe-orange); }
.tahoe-dot--err { background: var(--tahoe-red); }

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

/* Высота не фиксирована, а минимальна, и ряд переносится: иначе на крупных
   ступенях зума правые кнопки уходят под overflow: hidden */
.tahoe-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%);
}

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

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

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

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

.tahoe-content--flush { padding: 0; }

.tahoe-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;
    transition: width .2s var(--tahoe-ease), opacity .2s var(--tahoe-ease), visibility .2s var(--tahoe-ease);
}

.tahoe-inspector--hidden {
    width: 0;
    opacity: 0;
    visibility: hidden;
    border-left-width: 0;
}

.tahoe-inspector-inner {
    width: calc(252 * var(--tahoe-u));
    flex: none;
}

.tahoe-inspector-head {
    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);
}

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

.tahoe-inspector-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);
}

/* ============================================================================
 * КАПСУЛЫ ТУЛБАРА
 * ==========================================================================*/

.tahoe-capsule {
    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);
}

.tahoe-capsule--accent { background: var(--tahoe-accent); }

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

.tahoe-capsule-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));
    padding: 0 calc(8 * var(--tahoe-u));
    border: none;
    border-radius: calc(12 * var(--tahoe-u));
    background: 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);
}

.tahoe-capsule-btn:hover:not(:disabled) { background: var(--tahoe-fill-hover); }
.tahoe-capsule-btn:active:not(:disabled) { background: var(--tahoe-fill-press); }
.tahoe-capsule-btn[aria-pressed="true"] { background: var(--tahoe-fill-press); }
.tahoe-capsule-btn:disabled { opacity: .4; cursor: default; }
.tahoe-capsule-btn--accent { color: #fff; }
/* Вуаль ТЁМНАЯ: осветляющая давала белому тексту 3.44:1 в обеих темах,
   затемняющая — 5.56 светлая / 5.64 тёмная */
.tahoe-capsule-btn--accent:hover:not(:disabled),
.tahoe-capsule-btn--accent:active:not(:disabled) { background: rgba(0, 0, 0, .12); }

.tahoe-search {
    display: inline-flex;
    align-items: center;
    gap: calc(5 * var(--tahoe-u));
    height: calc(28 * var(--tahoe-u));
    min-width: calc(150 * var(--tahoe-u));
    padding: 0 calc(10 * var(--tahoe-u));
    border: none;
    border-radius: calc(14 * var(--tahoe-u));
    background: var(--tahoe-fill);
    color: var(--tahoe-label);
    font-family: inherit;
    font-size: calc(12 * var(--tahoe-u));
}

/* ============================================================================
 * КНОПКИ
 * ==========================================================================*/

.tahoe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(5 * var(--tahoe-u));
    height: calc(22 * var(--tahoe-u));
    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);
}

.tahoe-btn:hover:not(:disabled) { background: var(--tahoe-fill-hover); }
.tahoe-btn:active:not(:disabled) { background: var(--tahoe-fill-press); }
.tahoe-btn:disabled { opacity: .4; cursor: default; }

/* Кнопка по умолчанию: белый текст законен для короткой подписи */
.tahoe-btn--accent {
    background: var(--tahoe-accent);
    box-shadow: none;
    color: #fff;
}

.tahoe-btn--accent:hover:not(:disabled) { background: var(--tahoe-accent-hover); }

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

.tahoe-btn--danger:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--tahoe-ink-red); }

/* Плоская: без фона, фон появляется на наведении */
.tahoe-btn--ghost {
    background: none;
    box-shadow: none;
    color: var(--tahoe-link);
}

.tahoe-btn--ghost:hover:not(:disabled) { background: var(--tahoe-fill); }

.tahoe-btn--block { width: 100%; }

/* ============================================================================
 * ПОЛЯ, СПИСКИ, ПЕРЕКЛЮЧАТЕЛИ
 * ==========================================================================*/

.tahoe-input {
    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));
}

.tahoe-input--wide { flex: 1; width: 100%; }
.tahoe-input::placeholder { color: var(--tahoe-label-3); }
.tahoe-input:disabled { opacity: .5; }

.tahoe-textarea {
    min-height: calc(60 * var(--tahoe-u));
    padding: calc(5 * var(--tahoe-u)) calc(7 * var(--tahoe-u));
    line-height: 1.45;
    resize: vertical;
}

/* Pop-up button: нативный select в оболочке macOS. Меню рисует ОС, клавиатура
   достаётся бесплатно; своё меню внутри iframe — это позиционирование поверх
   границы фрейма и ловля фокуса */
.tahoe-popup {
    height: calc(22 * var(--tahoe-u));
    padding: 0 calc(22 * var(--tahoe-u)) 0 calc(7 * var(--tahoe-u));
    border: none;
    border-radius: calc(5 * var(--tahoe-u));
    background: var(--tahoe-win);
    box-shadow: var(--tahoe-ctl-shadow);
    color: var(--tahoe-label);
    font-family: inherit;
    font-size: calc(12 * var(--tahoe-u));
    cursor: pointer;
    /* стрелки pop-up button рисуются фоном: свой элемент поверх нативного
       select перехватывал бы клик */
    -webkit-appearance: none;
    appearance: none;
}

/* Значок pop-up button рисуется поверх нативного select и не ловит клик:
   сам select остаётся нативным, поэтому меню рисует ОС и клавиатура работает */
.tahoe-popup-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tahoe-popup-wrap .tahoe-popup-arrow {
    position: absolute;
    right: calc(6 * var(--tahoe-u));
    pointer-events: none;
    color: var(--tahoe-label-2);
}

.tahoe-checkbox-row {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--tahoe-u));
    padding: calc(3 * var(--tahoe-u)) 0;
    font-size: calc(12.5 * var(--tahoe-u));
    cursor: pointer;
}

.tahoe-checkbox {
    flex: none;
    width: calc(14 * var(--tahoe-u));
    height: calc(14 * var(--tahoe-u));
    margin: 0;
    border-radius: calc(3.5 * var(--tahoe-u));
    accent-color: var(--tahoe-control);
    cursor: pointer;
}

/* Switch: дорожка fill-press, включённая — control */
.tahoe-switch {
    flex: none;
    position: relative;
    width: calc(30 * var(--tahoe-u));
    height: calc(18 * var(--tahoe-u));
    border: none;
    border-radius: 999px;
    background: var(--tahoe-fill-press);
    cursor: pointer;
    transition: background-color .14s var(--tahoe-ease);
}

.tahoe-switch::after {
    content: "";
    position: absolute;
    top: calc(2 * var(--tahoe-u));
    left: calc(2 * var(--tahoe-u));
    width: calc(14 * var(--tahoe-u));
    height: calc(14 * var(--tahoe-u));
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .14s var(--tahoe-ease);
}

.tahoe-switch[aria-checked="true"] { background: var(--tahoe-control); }
.tahoe-switch[aria-checked="true"]::after { transform: translateX(calc(12 * var(--tahoe-u))); }
.tahoe-switch:disabled { opacity: .4; cursor: default; }

.tahoe-segmented {
    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);
}

/* Пункт сегментированного контрола ОБЯЗАН нести класс tahoe-seg, а не быть
   голым button: мост совместимости внизу файла ловит любую кнопку без
   tahoe-класса и с равной специфичностью перебивает подсветку активного
   пункта — активный сегмент переставал отличаться от неактивного ничем,
   кроме жирности шрифта */
.tahoe-seg {
    height: calc(20 * var(--tahoe-u));
    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));
    cursor: pointer;
}

.tahoe-seg[aria-pressed="true"] {
    background: var(--tahoe-win);
    box-shadow: var(--tahoe-ctl-shadow);
    font-weight: 590;
}

/* ============================================================================
 * ПАНЕЛИ, ПОЛЯ ФОРМЫ, БЕЙДЖИ, СООБЩЕНИЯ
 * ==========================================================================*/

/* Панель отделяется хейрлайном, а не тенью: тень оставлена тому, что
   физически висит над содержимым — алерту и поповеру */
.tahoe-panel {
    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;
}

.tahoe-panel-head {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--tahoe-u));
    min-height: calc(34 * var(--tahoe-u));
    padding: calc(4 * var(--tahoe-u)) calc(12 * var(--tahoe-u));
    background: var(--tahoe-bar);
    border-bottom: .5px solid var(--tahoe-hair);
    font-size: calc(12.5 * var(--tahoe-u));
    font-weight: 590;
}

.tahoe-panel-body {
    padding: calc(10 * var(--tahoe-u)) calc(12 * var(--tahoe-u)) calc(12 * var(--tahoe-u));
    font-size: calc(13 * var(--tahoe-u));
}

/* Строка формы «подпись слева — контрол справа», а не подпись над полем */
.tahoe-row {
    display: flex;
    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));
}

.tahoe-row:last-child { border-bottom: none; }

.tahoe-row-label {
    flex: none;
    width: calc(170 * var(--tahoe-u));
    color: var(--tahoe-label);
}

.tahoe-row-ctl {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(6 * var(--tahoe-u));
}

.tahoe-row-ctl--left { justify-content: flex-start; flex-wrap: wrap; }

.tahoe-row-hint {
    padding: 0 calc(12 * var(--tahoe-u)) calc(8 * var(--tahoe-u));
    font-size: calc(11 * var(--tahoe-u));
    color: var(--tahoe-label-2);
    line-height: 1.45;
}

.tahoe-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(4 * var(--tahoe-u));
    height: calc(16 * var(--tahoe-u));
    padding: 0 calc(7 * 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;
}

.tahoe-badge--ok { background: var(--tahoe-tint-green); color: var(--tahoe-ink-green); }
.tahoe-badge--warn { background: var(--tahoe-tint-orange); color: var(--tahoe-ink-orange); }
.tahoe-badge--err { background: var(--tahoe-tint-red); color: var(--tahoe-ink-red); }

.tahoe-notice {
    display: flex;
    gap: calc(8 * var(--tahoe-u));
    margin-bottom: calc(10 * var(--tahoe-u));
    padding: calc(8 * var(--tahoe-u)) calc(10 * var(--tahoe-u));
    border-radius: calc(6 * var(--tahoe-u));
    background: var(--tahoe-tint-blue);
    color: var(--tahoe-link);
    font-size: calc(12 * var(--tahoe-u));
    line-height: 1.45;
}

.tahoe-notice--warn { background: var(--tahoe-tint-orange); color: var(--tahoe-ink-orange); }
.tahoe-notice--err { background: var(--tahoe-tint-red); color: var(--tahoe-ink-red); }
.tahoe-notice--ok { background: var(--tahoe-tint-green); color: var(--tahoe-ink-green); }

/* Пустое состояние: значок label-3, фраза label-2, без иллюстраций.
   Причина называется словами, если она известна */
.tahoe-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--tahoe-u));
    padding: calc(40 * var(--tahoe-u)) calc(20 * var(--tahoe-u));
    color: var(--tahoe-label-2);
    font-size: calc(12.5 * var(--tahoe-u));
    text-align: center;
}

.tahoe-empty svg { width: calc(28 * var(--tahoe-u)); height: calc(28 * var(--tahoe-u)); color: var(--tahoe-label-3); }

/* ============================================================================
 * СПИСКИ И ТАБЛИЦЫ: зебра вместо сетки, липкая шапка, выделение по клику
 * ==========================================================================*/

.tahoe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(12.5 * var(--tahoe-u));
}

.tahoe-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: calc(5 * var(--tahoe-u)) calc(9 * var(--tahoe-u));
    background: var(--tahoe-bar);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    border-bottom: .5px solid var(--tahoe-hair);
    font-size: calc(11.5 * var(--tahoe-u));
    font-weight: 500;
    color: var(--tahoe-label-2);
    text-align: left;
}

.tahoe-table td {
    padding: calc(4 * var(--tahoe-u)) calc(9 * var(--tahoe-u));
    vertical-align: middle;
}

.tahoe-table tbody tr:nth-child(even) { background: var(--tahoe-stripe); }
.tahoe-table tbody tr:hover { background: var(--tahoe-tint-blue); }
.tahoe-table .tahoe-num { font-variant-numeric: tabular-nums; }

/* Цвет стадии приходит из Битрикс24 — это данные, не оформление */
.tahoe-swatch {
    display: inline-block;
    width: calc(9 * var(--tahoe-u));
    height: calc(9 * var(--tahoe-u));
    margin-right: calc(6 * var(--tahoe-u));
    border-radius: calc(2 * var(--tahoe-u));
    vertical-align: -1px;
}

/* Строка-раскрывашка справочника */
.tahoe-tree-row {
    display: flex;
    align-items: center;
    gap: calc(7 * var(--tahoe-u));
    width: 100%;
    padding: calc(5 * var(--tahoe-u)) calc(9 * var(--tahoe-u));
    border: none;
    border-bottom: .5px solid var(--tahoe-hair-soft);
    background: none;
    color: var(--tahoe-label);
    font-family: inherit;
    font-size: calc(13 * var(--tahoe-u));
    text-align: left;
    cursor: pointer;
}

.tahoe-tree-row:hover { background: var(--tahoe-fill); }
.tahoe-tree-row--child { padding-left: calc(26 * var(--tahoe-u)); }

/* Копируемый идентификатор */
.tahoe-copy {
    font-family: var(--tahoe-mono);
    font-size: calc(11.5 * var(--tahoe-u));
    color: var(--tahoe-link);
    cursor: pointer;
}

.tahoe-copy:hover { text-decoration: underline; }

/* ============================================================================
 * ЛЕНТА ИСТОРИИ
 * ==========================================================================*/

.tahoe-feed { display: flex; flex-direction: column; }

.tahoe-feed-day {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: calc(4 * var(--tahoe-u)) calc(9 * var(--tahoe-u));
    background: var(--tahoe-bar);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    border-bottom: .5px solid var(--tahoe-hair-soft);
    font-size: calc(11.5 * var(--tahoe-u));
    font-weight: 590;
    color: var(--tahoe-label-2);
}

.tahoe-event {
    display: flex;
    align-items: flex-start;
    gap: calc(8 * var(--tahoe-u));
    padding: calc(5 * var(--tahoe-u)) calc(9 * var(--tahoe-u));
    font-size: calc(13 * var(--tahoe-u));
}

.tahoe-event:nth-child(even) { background: var(--tahoe-stripe); }
.tahoe-event:hover { background: var(--tahoe-tint-blue); }

/* Событие чужой сделки в ленте контакта: приглушено, но не выключено */
.tahoe-event--other { opacity: .68; }

/* Содержимое выделенной строки перекрашивается ЦЕЛИКОМ в белый. Полупрозрачный
   белый здесь незаконен: на --tahoe-sel он не доходит до AA ни при какой альфе
   (.75 → 3.80:1, даже .85 → 4.42:1 при норме 4.5). Уровни различает кегль */
.tahoe-event--current { background: var(--tahoe-sel); }
.tahoe-event--current:hover { background: var(--tahoe-sel); }
.tahoe-event--current,
.tahoe-event--current .tahoe-event-time,
.tahoe-event--current .tahoe-event-who,
.tahoe-event--current .tahoe-event-icon,
.tahoe-event--current .tahoe-event-summary,
.tahoe-event--current .tahoe-hint { color: #fff; }
.tahoe-event--current .tahoe-badge { background: rgba(0, 0, 0, .18); color: #fff; }
.tahoe-event--current .tahoe-btn--ghost { color: #fff; }
.tahoe-event--current .tahoe-btn--ghost:hover { background: rgba(0, 0, 0, .18); }

.tahoe-event-time {
    flex: none;
    width: calc(34 * var(--tahoe-u));
    padding-top: calc(1 * var(--tahoe-u));
    color: var(--tahoe-label-2);
    font-size: calc(11.5 * var(--tahoe-u));
    font-variant-numeric: tabular-nums;
}

.tahoe-event-icon {
    flex: none;
    padding-top: calc(2 * var(--tahoe-u));
    color: var(--tahoe-label-2);
}

.tahoe-event-body { flex: 1; min-width: 0; }

.tahoe-event-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(7 * var(--tahoe-u));
}

.tahoe-event-who {
    color: var(--tahoe-label-2);
    font-size: calc(11.5 * var(--tahoe-u));
}

.tahoe-event-summary {
    margin-top: calc(3 * var(--tahoe-u));
    color: var(--tahoe-label-2);
    font-size: calc(12 * var(--tahoe-u));
    line-height: 1.45;
    white-space: pre-wrap;
}

/* ============================================================================
 * ALERT — жанр «нужно решение, работа стоит»
 * ==========================================================================*/

.tahoe-alert-layer {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(20 * var(--tahoe-u));
    background: rgba(0, 0, 0, .18);
}

.tahoe-alert {
    width: calc(300 * 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;
}

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

.tahoe-alert-text {
    margin: calc(5 * var(--tahoe-u)) 0 calc(14 * var(--tahoe-u));
    font-size: calc(11.5 * var(--tahoe-u));
    color: var(--tahoe-label-2);
    line-height: 1.45;
    white-space: pre-wrap;
    text-align: left;
}

.tahoe-alert-btns { display: flex; gap: calc(8 * var(--tahoe-u)); }

.tahoe-alert-btns .tahoe-btn {
    flex: 1;
    height: calc(26 * var(--tahoe-u));
    border-radius: calc(8 * var(--tahoe-u));
}

/* ============================================================================
 * ЭКРАН ВХОДА: центрированная панель, хейрлайн вместо тени, без логотипов
 * ==========================================================================*/

.tahoe-login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: calc(20 * var(--tahoe-u));
    background: var(--tahoe-sidebar-solid);
}

.tahoe-login-panel {
    width: calc(320 * var(--tahoe-u));
    max-width: 100%;
    padding: calc(20 * var(--tahoe-u));
    border: .5px solid var(--tahoe-hair);
    border-radius: calc(12 * var(--tahoe-u));
    background: var(--tahoe-win);
}

/* ============================================================================
 * МОСТ СОВМЕСТИМОСТИ. Компоненты из @andrey4emk/npm-app-front-b24
 * (Subscriptions.vue, ConfigLogs.vue) приходят со своей разметкой и своими
 * не-scoped стилями. Переписать их нельзя — они в node_modules, поэтому здесь
 * они перекрашиваются в токены Tahoe.
 * Правило канона соблюдено: из библиотеки берётся поведение, а не облик.
 *
 * ПРО ПОРЯДОК И СПЕЦИФИЧНОСТЬ. В прод-сборке стили компонентов Vue попадают в
 * бандл ПЕРЕД этим файлом (в dev — наоборот), поэтому при равной специфичности
 * выигрывают правила отсюда, и задирать вес селекторов не нужно. Обратная
 * посылка уже стоила дефекта: `button:not([class*="tahoe-"])` с равным весом
 * перебил подсветку собственных сегментов приложения. Отсюда правило:
 * ЛЮБАЯ СВОЯ КНОПКА НЕСЁТ tahoe-КЛАСС — только так она выпадает из моста.
 * ==========================================================================*/

/* Заголовки чужих компонентов: браузерный h1 в 2em рядом с 13.5px тулбара
   выглядит как кусок другой страницы */
.tahoe-shell h1,
.tahoe-shell h2,
.tahoe-shell h3 {
    margin: 0 0 calc(8 * var(--tahoe-u));
    font-size: calc(13.5 * var(--tahoe-u));
    font-weight: 590;
    letter-spacing: -.01em;
    color: var(--tahoe-label);
}

.tahoe-shell p { margin: 0 0 calc(8 * var(--tahoe-u)); }
.tahoe-shell ul { margin: 0 0 calc(8 * var(--tahoe-u)); padding-left: calc(18 * var(--tahoe-u)); }

.tahoe-shell button:not([class*="tahoe-"]) {
    height: calc(22 * var(--tahoe-u));
    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));
    cursor: pointer;
}

.tahoe-shell button:not([class*="tahoe-"]):hover { background: var(--tahoe-fill-hover); }
.tahoe-shell button:not([class*="tahoe-"]):disabled,
.tahoe-shell button.disabled-button { opacity: .4; cursor: default; }

.tahoe-shell table.main {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(12.5 * var(--tahoe-u));
}

.tahoe-shell table.main th,
.tahoe-shell table.main td {
    padding: calc(4 * var(--tahoe-u)) calc(9 * var(--tahoe-u));
    border: none;
    border-bottom: .5px solid var(--tahoe-hair-soft);
    text-align: left;
}

.tahoe-shell table.main th {
    background: var(--tahoe-bar);
    font-size: calc(11.5 * var(--tahoe-u));
    font-weight: 500;
    color: var(--tahoe-label-2);
}

.tahoe-shell table.main tbody tr:nth-child(even) { background: var(--tahoe-stripe); }
.tahoe-shell table.main tbody tr:hover { background: var(--tahoe-tint-blue); }

/* Переключатель библиотеки: своя разметка label.switch > input + span.slider */
.tahoe-shell .switch {
    position: relative;
    display: inline-block;
    width: calc(30 * var(--tahoe-u));
    height: calc(18 * var(--tahoe-u));
}

.tahoe-shell .switch input { display: none; }

.tahoe-shell .slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--tahoe-fill-press);
    cursor: pointer;
    transition: background-color .14s var(--tahoe-ease);
}

.tahoe-shell .slider::before {
    content: "";
    position: absolute;
    top: calc(2 * var(--tahoe-u));
    left: calc(2 * var(--tahoe-u));
    width: calc(14 * var(--tahoe-u));
    height: calc(14 * var(--tahoe-u));
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .14s var(--tahoe-ease);
}

.tahoe-shell input:checked + .slider { background: var(--tahoe-control); }
.tahoe-shell input:checked + .slider::before { transform: translateX(calc(12 * var(--tahoe-u))); }

/* Подсказка библиотеки. Свой тултип в iframe приносит больше проблем, чем
   пользы, но этот уже написан — остаётся перекрасить */
.tahoe-shell .tooltipParent { position: relative; cursor: pointer; }

.tahoe-shell .tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
    min-width: calc(200 * var(--tahoe-u));
    max-width: calc(400 * var(--tahoe-u));
    padding: calc(6 * var(--tahoe-u)) calc(8 * var(--tahoe-u));
    border-radius: calc(6 * var(--tahoe-u));
    background: var(--tahoe-sidebar-solid);
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .5);
    color: var(--tahoe-label);
    font-size: calc(11.5 * var(--tahoe-u));
    opacity: 0;
    transition: opacity .14s var(--tahoe-ease);
    word-wrap: break-word;
}

.tahoe-shell .tooltipParent:hover .tooltip { visibility: visible; opacity: 1; }

/* ConfigLogs: карточка, таблица и переключатели библиотеки */
.tahoe-shell .config-logs {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
}

/* Заголовок раздела уже стоит в шапке панели — второй такой же был бы дублем */
.tahoe-shell .config-logs h2 { display: none; }

.tahoe-shell .config-logs__table th,
.tahoe-shell .config-logs__table td {
    padding: calc(4 * var(--tahoe-u)) calc(9 * var(--tahoe-u));
    border-bottom: .5px solid var(--tahoe-hair-soft);
    font-size: calc(12.5 * var(--tahoe-u));
}

.tahoe-shell .config-logs__table th {
    font-size: calc(11.5 * var(--tahoe-u));
    font-weight: 500;
    color: var(--tahoe-label-2);
    text-transform: none;
}

.tahoe-shell .config-logs__level-key {
    font-family: var(--tahoe-mono);
    font-size: calc(11 * var(--tahoe-u));
    color: var(--tahoe-label-2);
}

.tahoe-shell .config-logs__switch { width: calc(30 * var(--tahoe-u)); height: calc(18 * var(--tahoe-u)); }

.tahoe-shell .config-logs__slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--tahoe-fill-press);
    cursor: pointer;
}

.tahoe-shell .config-logs__slider::before {
    content: "";
    position: absolute;
    top: calc(2 * var(--tahoe-u));
    left: calc(2 * var(--tahoe-u));
    width: calc(14 * var(--tahoe-u));
    height: calc(14 * var(--tahoe-u));
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .14s var(--tahoe-ease);
}

.tahoe-shell .config-logs__switch input:checked + .config-logs__slider { background: var(--tahoe-control); }
.tahoe-shell .config-logs__switch input:checked + .config-logs__slider::before { transform: translateX(calc(12 * var(--tahoe-u))); }

.tahoe-shell .config-logs__message--success { color: var(--tahoe-ink-green); }
.tahoe-shell .config-logs__message--error,
.tahoe-shell .config-logs__error { color: var(--tahoe-ink-red); }