/* /Components/Account/Shared/AuthLayout.razor.rz.scp.css */
/* Сплит входа: слева обещание на чернилах, справа форма фиксированной ширины.
   Значения — из макета (панель формы 560px, поле внутри 388px). */

.sx-auth[b-jt5bmrz8cq] {
    display: flex;
    min-height: 100vh;
    background: var(--ink-900);
    color: var(--text);
    font-family: var(--font-ui);
}

.sx-auth-side[b-jt5bmrz8cq] {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background: var(--ink-900);
}

.sx-auth-side-inner[b-jt5bmrz8cq] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
    padding: 44px 56px;
}

/* Обещание прижато к низу, но выше строки про данные: между шапкой и им —
   свободное поле, как на макете. */
.sx-auth-pitch[b-jt5bmrz8cq] {
    margin-top: auto;
    max-width: 460px;
}

.sx-auth-h2[b-jt5bmrz8cq] {
    margin: 20px 0 0;
    font-family: var(--font-display);
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: #F4F0E8;
}

.sx-auth-points[b-jt5bmrz8cq] {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 28px;
}

.sx-auth-points .sx-point[b-jt5bmrz8cq] {
    font-size: 15px;
    line-height: 1.55;
    color: #A7AFBB;
}

.sx-auth-points[b-jt5bmrz8cq]  .sx-auth-check {
    flex: none;
    margin-top: 2px;
    color: var(--ember-soft);
}

.sx-auth-note[b-jt5bmrz8cq] {
    margin-top: auto;
    padding-top: 36px;
    font-size: 13px;
    color: var(--text-4);
}

.sx-auth-form[b-jt5bmrz8cq] {
    flex: none;
    width: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink-800);
    border-left: 1px solid var(--line-1);
}

.sx-auth-form-inner[b-jt5bmrz8cq] {
    width: 100%;
    max-width: 388px;
    padding: 48px 24px;
}

/* Узкий экран: панель с обещанием уходит целиком. Оставлять её сверху значило
   бы гнать человека скроллом до формы, ради которой он сюда и пришёл. */
@media (max-width: 900px) {
    .sx-auth-side[b-jt5bmrz8cq] {
        display: none;
    }

    .sx-auth-form[b-jt5bmrz8cq] {
        flex: 1;
        width: auto;
        border-left: none;
        background: var(--ink-900);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Оболочка кабинета. Цвета — из токенов редизайна (графит), а не хардкодом:
   прежние #010409 / #0d1117 / #21262d жили прямо здесь, поэтому смена палитры
   в app.css рельс и полосу не перекрашивала. */

.page[b-b1c0rjtzoq] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-b1c0rjtzoq] {
    flex: 1;
    min-width: 0; /* предотвращает горизонтальный overflow при широких таблицах */
}

/* Верхняя полоса: слева раздел с подсказкой, справа состояние воркера и помощь. */
.top-bar[b-b1c0rjtzoq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 64px;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--app-elev);
    background-color: var(--app-bg);
}

.top-bar-title[b-b1c0rjtzoq] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
}

.top-bar-section[b-b1c0rjtzoq] {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--app-text-hi, #F4F2EC);
    white-space: nowrap;
}

/* Подсказка — первое, чем жертвуем при нехватке ширины. */
.top-bar-hint[b-b1c0rjtzoq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--app-muted);
}

.top-bar-help[b-b1c0rjtzoq] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--app-elev-2);
    border-radius: var(--r-ctl);
    color: var(--app-text-3, #C3C9D2);
    font-size: 0.82rem;
    text-decoration: none;
}

.top-bar-help:hover[b-b1c0rjtzoq] {
    border-color: var(--app-line-2);
    color: var(--app-text-hi, #F4F2EC);
    text-decoration: none;
}

.sidebar[b-b1c0rjtzoq] {
    background-color: var(--app-rail);
    border-right: 1px solid var(--app-elev);
    /* Колонка: шапка сверху, меню растягивается и скроллится, карточка
       пользователя прибита к низу. Раньше высоту задавал calc(100vh - 64px)
       на самом меню, и подвал внутри него подпрыгивал при переходах. */
    display: flex;
    flex-direction: column;
}

@media (max-width: 640px) {
    /* На узком экране подсказка уходит: заголовок раздела и индикатор важнее. */
    .top-bar-hint[b-b1c0rjtzoq] {
        display: none;
    }

    .top-bar[b-b1c0rjtzoq] {
        padding: 0 1rem;
    }
}

@media (min-width: 641px) {
    .page[b-b1c0rjtzoq] {
        flex-direction: row;
    }

    .sidebar[b-b1c0rjtzoq] {
        width: 252px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    /* Отступы симметричные: слева до рельса и справа до края одинаковые.
       Было 2rem слева против 1.5rem справа — при снятом ограничении ширины
       перекос сразу стало видно. */
    article[b-b1c0rjtzoq] {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}
/* /Components/Layout/MarkingLayout.razor.rz.scp.css */
/* Раздел инструментов маркировки: узкая колонка контента, шапка-нав и футер.
   Сайдбара нет — это публичный сайт, а не кабинет, поэтому раскладка простая
   вертикальная, а ширина ограничена читаемой строкой. */

.wa-tools-shell[b-08d4pwih03] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Раздел — публичная часть, значит чернила лендинга, а не графит кабинета:
       после перекраски приложения он оставался бы светлее основного сайта. */
    background: var(--ink-900);
    color: var(--text);
}

.wa-tools-header[b-08d4pwih03] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--line-1);
}

.wa-tools-brand[b-08d4pwih03] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.wa-tools-brand img[b-08d4pwih03] {
    align-self: center;
}

.wa-tools-brand-name[b-08d4pwih03] {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.wa-tools-brand-hint[b-08d4pwih03] {
    font-size: 0.8rem;
    color: var(--app-text-muted, #8b949e);
}

.wa-tools-nav[b-08d4pwih03] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.25rem;
    margin-left: auto;
    font-size: 0.925rem;
}

.wa-tools-nav a[b-08d4pwih03] {
    text-decoration: none;
    color: var(--app-text-muted, #8b949e);
}

.wa-tools-nav a:hover[b-08d4pwih03] {
    color: var(--app-text, #e6edf3);
    text-decoration: underline;
}

/* Ссылка на основной продукт — единственный «выход» с поддомена, поэтому
   выделена цветом бренда, но остаётся ссылкой, а не кнопкой: это навигация. */
.wa-tools-nav-main[b-08d4pwih03] {
    color: var(--app-link, #ff8a80) !important;
}

.wa-tools-nav-main-hint[b-08d4pwih03] {
    color: var(--app-text-muted, #8b949e);
}

/* Ширина рабочей области. 62rem были узкими для инструментов: колонка справки
   сжималась до нескольких слов в строке и вытягивалась на два экрана, а коды и
   таблицы в основной колонке ломались переносами. Инструменту нужен разворот,
   читаемую ширину держат уже сами текстовые блоки (.wa-tools-prose). */
.wa-tools-main[b-08d4pwih03] {
    flex: 1 1 auto;
    width: 100%;
    max-width: 84rem;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 2.5rem;
}

.wa-tools-footer[b-08d4pwih03] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    padding: 1rem 1.5rem 1.75rem;
    border-top: 1px solid var(--app-border-soft, rgba(255, 255, 255, 0.05));
    font-size: 0.85rem;
    color: var(--app-text-muted, #8b949e);
}

.wa-tools-footer a[b-08d4pwih03] {
    color: inherit;
    text-decoration: none;
}

.wa-tools-footer a:hover[b-08d4pwih03] {
    color: var(--app-text, #e6edf3);
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .wa-tools-header[b-08d4pwih03] {
        padding: 0.75rem 1rem;
        gap: 0.5rem 1rem;
    }

    /* На узком экране нав уходит на свою строку целиком, а не жмётся в угол. */
    .wa-tools-nav[b-08d4pwih03] {
        margin-left: 0;
        width: 100%;
        font-size: 0.875rem;
    }

    .wa-tools-nav-main-hint[b-08d4pwih03] {
        display: none;
    }

    .wa-tools-main[b-08d4pwih03] {
        padding: 1.25rem 1rem 2rem;
    }
}

/* ── Приведение содержимого раздела к дизайну ────────────────────────────
   Страницы инструментов писались под кабинет: бутстраповские заголовки,
   карточки и кнопки на графитовых токенах. Раздел же — публичная часть, и
   после редизайна он стоит на чернилах. Здесь ::deep-слой, который приводит
   содержимое к общей типографике и палитре: иначе рестайл означал бы правку
   четырёх инструментов по отдельности (у GS-разделителей одних 830 строк),
   а каждый новый инструмент начинался бы с копирования стилей.

   ::deep обязателен — разметку рисует @Body, то есть чужой компонент. */

.wa-tools-main[b-08d4pwih03]  h1 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--text-hi);
    margin-bottom: 0.9rem;
}

.wa-tools-main[b-08d4pwih03]  h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--text-hi);
}

.wa-tools-main[b-08d4pwih03]  h3,
.wa-tools-main[b-08d4pwih03]  h4,
.wa-tools-main[b-08d4pwih03]  h5,
.wa-tools-main[b-08d4pwih03]  h6 {
    color: var(--text-hi);
}

.wa-tools-main[b-08d4pwih03]  p,
.wa-tools-main[b-08d4pwih03]  li,
.wa-tools-main[b-08d4pwih03]  dd,
.wa-tools-main[b-08d4pwih03]  dt {
    color: var(--text-2);
}

.wa-tools-main[b-08d4pwih03]  .text-muted {
    color: var(--text-3) !important;
}

/* Панели инструментов и бутстраповские карточки — на чернильном фоне с
   радиусом дизайна. */
.wa-tools-main[b-08d4pwih03]  .wa-gs-card,
.wa-tools-main[b-08d4pwih03]  .card {
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    background-color: var(--ink-800);
}

.wa-tools-main[b-08d4pwih03]  .wa-gs-card {
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.15rem;
}

/* Поля ввода: те же чернила, что в формах публичной части. */
.wa-tools-main[b-08d4pwih03]  .form-control,
.wa-tools-main[b-08d4pwih03]  .form-select {
    background-color: var(--ink-700);
    border-color: var(--line-4);
    color: var(--text);
}

.wa-tools-main[b-08d4pwih03]  .form-control:focus,
.wa-tools-main[b-08d4pwih03]  .form-select:focus {
    background-color: var(--ink-700);
    border-color: rgba(255, 90, 77, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 90, 77, 0.12);
    color: var(--text);
}

.wa-tools-main[b-08d4pwih03]  .form-control::placeholder {
    color: var(--text-4);
}

/* Кнопки: главная — вермильон со свечением, как CTA лендинга; вторичная —
   контур на чернилах. */
.wa-tools-main[b-08d4pwih03]  .btn-primary {
    --bs-btn-bg: var(--ember);
    --bs-btn-border-color: var(--ember);
    --bs-btn-hover-bg: var(--ember-hover);
    --bs-btn-hover-border-color: var(--ember-hover);
    border-radius: var(--r-ctl);
    box-shadow: var(--sh-cta-s);
}

.wa-tools-main[b-08d4pwih03]  .btn-outline-secondary {
    --bs-btn-color: var(--text-2);
    --bs-btn-border-color: var(--line-4);
    --bs-btn-hover-bg: var(--ink-700);
    --bs-btn-hover-border-color: var(--line-4);
    --bs-btn-hover-color: var(--text-hi);
    border-radius: var(--r-ctl);
}

/* Таблицы результатов: без бутстраповской заливки, границы тише. */
.wa-tools-main[b-08d4pwih03]  .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-2);
    --bs-table-border-color: var(--line-1);
}

.wa-tools-main[b-08d4pwih03]  .table > :not(caption) > * > * {
    background-color: transparent;
}

/* Врезки-подсказки внутри инструментов. */
.wa-tools-main[b-08d4pwih03]  .alert-info {
    background-color: rgba(127, 166, 255, 0.10);
    border-color: rgba(127, 166, 255, 0.28);
    color: var(--steel-text);
}

.wa-tools-main[b-08d4pwih03]  .alert-warning {
    background-color: rgba(227, 179, 65, 0.10);
    border-color: rgba(227, 179, 65, 0.28);
    color: var(--amber-text);
}

.wa-tools-main[b-08d4pwih03]  .alert-danger {
    background-color: rgba(255, 90, 77, 0.10);
    border-color: rgba(255, 90, 77, 0.30);
    color: var(--ember-300);
}

.wa-tools-main[b-08d4pwih03]  a {
    color: var(--ember-text);
}

.wa-tools-main[b-08d4pwih03]  a:hover {
    color: var(--ember-hover);
}

/* Коды и моноширинные фрагменты — на подложке поля ввода, чтобы символы
   читались как данные, а не как текст статьи. */
.wa-tools-main[b-08d4pwih03]  code,
.wa-tools-main[b-08d4pwih03]  pre,
.wa-tools-main[b-08d4pwih03]  .font-monospace {
    color: var(--text);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Рельс кабинета. Значения — из макета редизайна (шапка 64px, карточка
   организации, пункт 14.5px, активный — вермильон на подложке .14). */

.navbar-toggler[b-qebfo64df1] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-qebfo64df1] {
    background-color: rgba(255, 255, 255, 0.5);
}

/* ── Шапка рельса ───────────────────────────────────────────────────────── */
.sa-brand-row[b-qebfo64df1] {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 20px;
    border-bottom: 1px solid var(--app-rail-line);
}

.sa-brand[b-qebfo64df1] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.sa-brand:hover[b-qebfo64df1] {
    text-decoration: none;
}

/* Вордмарк вернулся в шапку рельса по макету. Прежде здесь был только знак
   (осторожность на случай white-label). Правило UI_CONVENTIONS §18 запрещает
   светить внутреннее имя «WikiAI», а не бренд продукта; если дело дойдёт до
   white-label, вордмарк должен стать настраиваемым, а не отсутствовать. */
.sa-wordmark[b-qebfo64df1] {
    font-family: var(--font-brand);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--app-text-hi, #F4F2EC);
}

/* ── Карточка организации ───────────────────────────────────────────────── */
.sa-org[b-qebfo64df1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 14px 8px;
    padding: 9px 11px;
    border: 1px solid var(--app-elev-2);
    border-radius: var(--r-ctl);
    background: #1E232B;
}

.sa-org-avatar[b-qebfo64df1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 90, 77, 0.16);
    color: var(--ember-300);
    font-size: 0.85rem;
    font-weight: 600;
}

.sa-org-body[b-qebfo64df1] {
    min-width: 0;
    flex: 1;
}

.sa-org-role[b-qebfo64df1] {
    margin-top: 1px;
    font-size: 0.7rem;
    color: var(--app-muted-2);
}

/* Свитчер организации живёт внутри карточки: убираем у него бордер и фон,
   чтобы селект не выглядел коробкой в коробке. ::deep — разметку рендерит
   дочерний компонент OrgSwitcher. */
.sa-org[b-qebfo64df1]  .org-switcher .form-select,
.sa-org[b-qebfo64df1]  .form-select {
    padding: 0;
    height: auto;
    min-width: 0;
    max-width: 100%;
    border: none;
    background-color: transparent;
    background-position: right center;
    color: var(--app-text-hi, #F4F2EC);
    font-size: 0.9rem;
    font-weight: 600;
}

.sa-org[b-qebfo64df1]  .org-switcher .form-select:focus {
    box-shadow: none;
}

.sa-org[b-qebfo64df1]  .org-switcher-static {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--app-text-hi, #F4F2EC);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Иконка «здание» внутри статичного варианта свитчера лишняя: слева уже
   стоит аватар-буква организации. */
.sa-org[b-qebfo64df1]  .org-switcher-static .wa-icon {
    display: none;
}

/* ── Пункты ─────────────────────────────────────────────────────────────── */
/* Иконки пунктов меню — Lucide через компонент <Icon> (inline SVG).
   ::deep, потому что <svg> рендерит дочерний компонент Icon — атрибут scope
   этого компонента (NavMenu) на него не попадает. */
.nav-item[b-qebfo64df1]  .wa-icon {
    margin-right: 0.7rem;
    color: var(--app-muted-2);
}

.nav-item[b-qebfo64df1] {
    font-size: 0.905rem;
    padding-bottom: 0.15rem;
}

    .nav-item:first-of-type[b-qebfo64df1] {
        padding-top: 0.5rem;
    }

    .nav-item:last-of-type[b-qebfo64df1] {
        padding-bottom: 0.5rem;
    }

    .nav-item[b-qebfo64df1]  .nav-link {
        color: var(--app-text-3, #C3C9D2);
        background: none;
        border: none;
        border-radius: 10px;
        height: 2.5rem;
        display: flex;
        align-items: center;
        line-height: 2.5rem;
        width: 100%;
        padding: 0 0.75rem;
        transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
    }

.nav-item[b-qebfo64df1]  a.active {
    background-color: rgba(255, 90, 77, 0.14);
    color: #FFA394;
    font-weight: 500;
}

.nav-item[b-qebfo64df1]  a.active .wa-icon {
    color: var(--ember-text);
}

.nav-item[b-qebfo64df1]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--app-text-hi, #F4F2EC);
}

/* Заголовок группы «Управление». */
.nav-section[b-qebfo64df1] {
    margin: 18px 12px 4px;
    padding: 0 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #6B737F;
    font-weight: 500;
}

/* ── Низ рельса ─────────────────────────────────────────────────────────── */
.sa-rail-foot[b-qebfo64df1] {
    flex: none;
    padding: 12px 14px 16px;
    border-top: 1px solid var(--app-rail-line);
}

/* На узком экране подвал живёт вместе с меню: он часть выпадающего рельса,
   и без развёрнутого меню карточка пользователя висела бы под шапкой сама
   по себе. */
@media (max-width: 640px) {
    .navbar-toggler:not(:checked) ~ .sa-rail-foot[b-qebfo64df1] {
        display: none;
    }
}

.sa-user[b-qebfo64df1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sa-user-link[b-qebfo64df1] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    padding: 7px 8px;
    border-radius: 10px;
    color: var(--app-text-3, #C3C9D2);
    text-decoration: none;
    transition: background-color var(--t-fast) ease;
}

.sa-user-link:hover[b-qebfo64df1] {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--app-text-hi, #F4F2EC);
    text-decoration: none;
}

.sa-user-avatar[b-qebfo64df1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--app-elev-2);
    color: var(--app-text-2);
    font-size: 0.78rem;
    font-weight: 600;
}

.sa-user-name[b-qebfo64df1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}

.sa-user-exit[b-qebfo64df1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--app-muted-2);
    cursor: pointer;
}

.sa-user-exit:hover[b-qebfo64df1] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--app-text-hi, #F4F2EC);
}

.sa-rail-site[b-qebfo64df1] {
    display: block;
    margin-top: 6px;
    padding: 0 8px;
    font-size: 0.78rem;
    color: var(--app-muted-2);
    text-decoration: none;
}

.sa-rail-site:hover[b-qebfo64df1] {
    color: var(--app-text-2);
    text-decoration: underline;
}

/* ── Раскладка ──────────────────────────────────────────────────────────── */
.nav-scrollable[b-qebfo64df1] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-qebfo64df1] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-qebfo64df1] {
        display: none;
    }

    .nav-scrollable[b-qebfo64df1] {
        /* На широком экране рельс не сворачивается. Высоту НЕ считаем от 100vh:
           её даёт flex-колонка .sidebar, а меню занимает остаток и скроллится
           само. min-height:0 обязателен — без него flex-элемент не даёт себя
           сжать, и скроллиться начинает страница целиком. */
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        /* Если длинный label nav-link шире рельса — режем, не даём горизонтальный скролл. */
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    }
}
/* /Components/Layout/PublicPageLayout.razor.rz.scp.css */
/* Контентные страницы публичной части: тарифы, документация, блог, legal.
   Лендинг сам управляет своими секциями, здесь — общая колонка для текста. */

.sx-doc-page[b-owhx0sarkm] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sx-doc-body[b-owhx0sarkm] {
    flex: 1;
    padding-top: 32px;
    padding-bottom: 72px;
}

/* Эти страницы писались под кабинет: заголовки Bootstrap, таблицы, карточки.
   Здесь их нужно вернуть к типографике публичной части, не переписывая
   разметку каждой — иначе перевод одиннадцати страниц превратился бы в
   одиннадцать рестайлов. */
.sx-doc-body[b-owhx0sarkm]  h1 {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-hi);
    margin-bottom: 1rem;
}

.sx-doc-body[b-owhx0sarkm]  h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    color: var(--text-hi);
    margin-top: 2rem;
}

.sx-doc-body[b-owhx0sarkm]  h3,
.sx-doc-body[b-owhx0sarkm]  h4,
.sx-doc-body[b-owhx0sarkm]  h5 {
    color: var(--text-hi);
}

.sx-doc-body[b-owhx0sarkm]  p,
.sx-doc-body[b-owhx0sarkm]  li {
    color: var(--text-2);
}

.sx-doc-body[b-owhx0sarkm]  .text-muted {
    color: var(--text-3) !important;
}

/* Карточки и таблицы Bootstrap на чернилах: их переменные заданы для графита
   кабинета, здесь фон темнее и границы тише. */
.sx-doc-body[b-owhx0sarkm]  .card {
    background-color: var(--ink-800);
    border-color: var(--line-1);
    border-radius: var(--r-md);
}

.sx-doc-body[b-owhx0sarkm]  .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-2);
    --bs-table-border-color: var(--line-1);
}

.sx-doc-body[b-owhx0sarkm]  .list-group-item {
    background-color: var(--ink-800);
    border-color: var(--line-1);
    color: var(--text-2);
}

.sx-doc-body[b-owhx0sarkm]  .btn-outline-secondary {
    --bs-btn-color: var(--text-2);
    --bs-btn-border-color: var(--line-4);
    --bs-btn-hover-bg: var(--ink-700);
    --bs-btn-hover-border-color: var(--line-4);
    --bs-btn-hover-color: var(--text-hi);
}

.sx-doc-body[b-owhx0sarkm]  a {
    color: var(--ember-text);
}

.sx-doc-body[b-owhx0sarkm]  a:hover {
    color: var(--ember-hover);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-o1ihpc0fe0],
.components-reconnect-repeated-attempt-visible[b-o1ihpc0fe0],
.components-reconnect-failed-visible[b-o1ihpc0fe0],
.components-pause-visible[b-o1ihpc0fe0],
.components-resume-failed-visible[b-o1ihpc0fe0],
.components-rejoining-animation[b-o1ihpc0fe0] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-o1ihpc0fe0],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-o1ihpc0fe0],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-o1ihpc0fe0],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-o1ihpc0fe0],
#components-reconnect-modal.components-reconnect-retrying[b-o1ihpc0fe0],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-o1ihpc0fe0],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-o1ihpc0fe0],
#components-reconnect-modal.components-reconnect-failed[b-o1ihpc0fe0],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-o1ihpc0fe0] {
    display: block;
}


#components-reconnect-modal[b-o1ihpc0fe0] {
    background-color: var(--app-bg-elev, #161b22);
    color: var(--app-text, #e6edf3);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--app-border, #30363d);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-o1ihpc0fe0 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-o1ihpc0fe0 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-o1ihpc0fe0 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-o1ihpc0fe0]::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    animation: components-reconnect-modal-fadeInOpacity-b-o1ihpc0fe0 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-o1ihpc0fe0 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-o1ihpc0fe0 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-o1ihpc0fe0 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-o1ihpc0fe0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-o1ihpc0fe0] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-o1ihpc0fe0] {
    border: 1px solid var(--app-border, #30363d);
    background-color: var(--app-bg-elev-2, #21262d);
    color: var(--app-text, #e6edf3);
    padding: 6px 24px;
    border-radius: 4px;
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-o1ihpc0fe0] {
        background-color: var(--app-border, #30363d);
    }

    #components-reconnect-modal button:active[b-o1ihpc0fe0] {
        background-color: var(--app-bg-elev-2, #21262d);
    }

.components-rejoining-animation[b-o1ihpc0fe0] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-o1ihpc0fe0] {
        position: absolute;
        border: 3px solid #58a6ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-o1ihpc0fe0 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-o1ihpc0fe0] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-o1ihpc0fe0 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AdminSpaces.razor.rz.scp.css */
/* Пространства карточками: состав и состояние видно, не заходя внутрь. */

.sa-space-grid[b-9crrrpu97i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.sa-space-card[b-9crrrpu97i] {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.25rem 0.9rem;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--r-md);
    background: var(--app-bg-elev);
    transition: border-color var(--t-base) ease;
}

.sa-space-card:hover[b-9crrrpu97i] {
    border-color: var(--app-line-2);
}

/* Пространство с упавшей синхронизацией должно быть видно с одного взгляда —
   не только по пилюле, но и по рамке: в сетке из десятка карточек текст
   теряется, рамка нет. */
.sa-space-card.has-error[b-9crrrpu97i] {
    border-color: rgba(255, 90, 77, 0.45);
}

.sa-space-head[b-9crrrpu97i] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-space-icon[b-9crrrpu97i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 90, 77, 0.10);
    border: 1px solid rgba(255, 90, 77, 0.26);
    color: var(--ember-soft);
}

.sa-space-name[b-9crrrpu97i] {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--app-text-hi, #F4F2EC);
    text-decoration: none;
}

.sa-space-name:hover[b-9crrrpu97i] {
    color: var(--app-accent);
    text-decoration: underline;
}

.sa-space-pill[b-9crrrpu97i] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.15rem 0.55rem;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
    white-space: nowrap;
}

.sa-space-pill.is-ok[b-9crrrpu97i]      { background: rgba(69, 192, 138, 0.12); color: var(--jade-text); }
.sa-space-pill.is-error[b-9crrrpu97i]   { background: rgba(255, 90, 77, 0.14); color: var(--ember-300); }
.sa-space-pill.is-public[b-9crrrpu97i]  { background: rgba(127, 166, 255, 0.12); color: var(--steel-text); }

.sa-space-meta[b-9crrrpu97i] {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--app-muted);
}

.sa-space-sources[b-9crrrpu97i] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.85rem;
}

.sa-space-source[b-9crrrpu97i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.85rem;
}

.sa-space-kind[b-9crrrpu97i] {
    flex: none;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--app-elev-2);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--app-muted-2);
    white-space: nowrap;
}

.sa-space-src-name[b-9crrrpu97i] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--app-text-2);
}

.sa-space-src-date[b-9crrrpu97i] {
    flex: none;
    font-size: 0.78rem;
    color: var(--app-muted-2);
    white-space: nowrap;
}

.sa-space-empty[b-9crrrpu97i] {
    margin-top: 0.85rem;
    padding: 0.6rem 0.75rem;
    border: 1px dashed var(--app-elev-2);
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    color: var(--app-muted);
}

.sa-space-actions[b-9crrrpu97i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
}
/* /Components/Pages/Chat.razor.rz.scp.css */
/* Поиск. Базовые формы — .sa-scope, .sa-ask, .sa-ask-box, .sa-chip — приходят
   из пакета дизайна (wwwroot/css/sensei.css); здесь только то, чего в нём нет.
   Ответ и карточки источников по-прежнему стилизует app.css (.wa-answer,
   .wa-srclist) — их рестайл отдельным шагом. */

/* Колонка поиска: одна ширина на «прицел», заголовок, поле, подсказки, вопрос,
   ответ и панель оценки — иначе они расходятся по краям и центр экрана «дышит»
   при появлении ответа. Держим её в переменной: менять придётся всем блокам
   сразу, а их семь.

   1120 вместо прежних 900: на широком экране колонка выглядела узкой полосой
   посреди пустоты, особенно рядом с растянутой админкой. Дальше расширять
   некуда — строка ответа станет длиннее удобной для чтения. */
.sa-scope[b-v0711du7sg],
.sa-ask[b-v0711du7sg],
.sa-ask-head[b-v0711du7sg],
.sa-suggest[b-v0711du7sg] {
    max-width: var(--sa-col);
    margin-left: auto;
    margin-right: auto;
}

/* ── Карточка-«прицел»: какая база отвечает ─────────────────────────────── */
.sa-scope-icon[b-v0711du7sg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 90, 77, 0.10);
    border: 1px solid rgba(255, 90, 77, 0.26);
    color: var(--ember-soft);
}

.sa-scope-body[b-v0711du7sg] {
    min-width: 0;
    flex: 1;
}

.sa-scope-label[b-v0711du7sg] {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--app-muted-2);
}

.sa-scope-name[b-v0711du7sg] {
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--app-text-hi, #F4F2EC);
}

.sa-scope-meta[b-v0711du7sg] {
    flex: none;
    font-size: 0.82rem;
    color: var(--app-muted);
    white-space: nowrap;
}

.sa-scope-switch[b-v0711du7sg] {
    flex: none;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--app-elev-2);
    border-radius: var(--r-ctl);
    background: transparent;
    color: var(--app-text-3, #C3C9D2);
    font-size: 0.83rem;
    cursor: pointer;
}

.sa-scope-switch:hover:not(:disabled)[b-v0711du7sg] {
    border-color: var(--app-line-2);
    color: var(--app-text-hi, #F4F2EC);
}

.sa-scope-switch:disabled[b-v0711du7sg] {
    opacity: 0.5;
    cursor: default;
}

/* Селект внутри карточки — без коробки: рамку уже рисует сама карточка. */
.sa-scope .form-select[b-v0711du7sg] {
    margin-top: 2px;
    padding: 0 1.6rem 0 0;
    height: auto;
    border: none;
    background-color: transparent;
    color: var(--app-text-hi, #F4F2EC);
    font-size: 1.06rem;
    font-weight: 600;
}

.sa-scope .form-select:focus[b-v0711du7sg] {
    box-shadow: none;
}

/* ── Приглашение и поле ─────────────────────────────────────────────────── */
.sa-ask-head[b-v0711du7sg] {
    margin-top: 40px;
    text-align: center;
}

.sa-ask-title[b-v0711du7sg] {
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: var(--app-text-hi, #F4F2EC);
    margin: 0;
}

.sa-ask-sub[b-v0711du7sg] {
    max-width: 34rem;
    margin: 0.75rem auto 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--app-muted);
}

/* Поле: рамка с градиентной подсветкой рисуется пакетным .sa-ask::before,
   здесь — только внутренности. */
.sa-ask-input[b-v0711du7sg] {
    width: 100%;
    min-height: 76px;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    color: var(--app-text-hi, #F4F2EC);
    font-family: var(--font-ui);
    font-size: 1.06rem;
    line-height: 1.55;
}

.sa-ask-input[b-v0711du7sg]::placeholder {
    color: var(--app-muted-2);
}

.sa-ask-input:disabled[b-v0711du7sg] {
    opacity: 0.6;
}

.sa-ask-preview[b-v0711du7sg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--app-muted);
}

.sa-ask-badge[b-v0711du7sg] {
    padding: 0.15rem 0.45rem;
    border-radius: var(--r-xs);
    background: rgba(127, 166, 255, 0.12);
    color: var(--steel-text);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.sa-ask-foot[b-v0711du7sg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.sa-ask-hint[b-v0711du7sg] {
    font-size: 0.8rem;
    color: var(--app-muted-2);
}

.sa-ask-hint kbd[b-v0711du7sg] {
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    background: var(--app-elev);
    color: var(--app-text-3, #C3C9D2);
    font-size: 0.75rem;
}

.sa-ask-btn[b-v0711du7sg] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0.6rem 1.15rem;
    border: none;
    border-radius: var(--r-ctl);
    background: var(--app-accent);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--sh-cta-s);
    transition: background-color var(--t-fast) ease;
}

.sa-ask-btn:hover:not(:disabled)[b-v0711du7sg] {
    background: var(--app-accent-hover);
}

.sa-ask-btn:disabled[b-v0711du7sg] {
    background: var(--app-elev-2);
    color: var(--app-muted);
    box-shadow: none;
    cursor: default;
}

/* ── Подсказки-чипы ─────────────────────────────────────────────────────── */
.sa-suggest[b-v0711du7sg] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2rem;
}

.sa-suggest-title[b-v0711du7sg] {
    margin-bottom: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--app-muted-2);
}

.sa-suggest-row[b-v0711du7sg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Чип из пакета не знает про disabled — при офлайн-воркере он должен
   выглядеть неактивным, иначе клик молча ничего не делает. */
.sa-chip:disabled[b-v0711du7sg] {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 760px) {
    .sa-ask-title[b-v0711du7sg] {
        font-size: 1.85rem;
    }

    .sa-ask-head[b-v0711du7sg] {
        margin-top: 20px;
        text-align: left;
    }

    .sa-scope[b-v0711du7sg] {
        flex-wrap: wrap;
    }

    .sa-scope-meta[b-v0711du7sg] {
        width: 100%;
        order: 3;
    }
}

/* ── Ответ ──────────────────────────────────────────────────────────────── */
/* Строка вопроса: аватар, текст, «Новый вопрос» справа. */
.sa-turn-q[b-v0711du7sg] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    max-width: var(--sa-col);
    margin: 2rem auto 0;
}

.sa-turn-avatar[b-v0711du7sg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--app-elev-2);
    color: var(--app-text-2);
    font-size: 0.82rem;
    font-weight: 600;
}

.sa-turn-text[b-v0711du7sg] {
    flex: 1;
    min-width: 0;
    padding-top: 3px;
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--app-text-hi, #F4F2EC);
}

.sa-turn-new[b-v0711du7sg] {
    flex: none;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--app-elev-2);
    border-radius: var(--r-ctl);
    background: transparent;
    color: var(--app-text-3, #C3C9D2);
    font-size: 0.83rem;
    white-space: nowrap;
    cursor: pointer;
}

.sa-turn-new:hover:not(:disabled)[b-v0711du7sg] {
    border-color: var(--app-line-2);
    color: var(--app-text-hi, #F4F2EC);
}

.sa-turn-new:disabled[b-v0711du7sg] {
    opacity: 0.5;
    cursor: default;
}

/* Карточка ответа. Раскладку (рамка, радиус, шапка, тело) даёт пакетный
   .sa-answer; здесь — содержимое шапки и колонка по ширине поля. */
.sa-answer[b-v0711du7sg] {
    max-width: var(--sa-col);
    margin-left: auto;
    margin-right: auto;
}

.sa-answer-title[b-v0711du7sg] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--app-text-2);
}

.sa-answer-count[b-v0711du7sg] {
    padding: 0.1rem 0.45rem;
    border-radius: var(--r-pill);
    background: rgba(255, 90, 77, 0.12);
    color: var(--ember-300);
    font-size: 0.72rem;
    white-space: nowrap;
}

.sa-answer-meta[b-v0711du7sg] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--app-muted-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-answer-srctitle[b-v0711du7sg] {
    margin: 1.4rem 0 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--app-muted-2);
}

/* Панель оценки — подвал под карточкой ответа (в макете она часть карточки;
   держим отдельным блоком, потому что ответов-групп может быть несколько,
   а оценка у turn'а одна). */
.wa-feedback-bar[b-v0711du7sg],
.sa-answer + .wa-feedback-bar[b-v0711du7sg] {
    max-width: var(--sa-col);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 760px) {
    .sa-turn-new[b-v0711du7sg] {
        display: none;   /* на узком экране «Новый вопрос» = очистить поле */
    }

    .sa-answer-meta[b-v0711du7sg] {
        display: none;   /* модель и время уводим: имя группы важнее */
    }
}
/* /Components/Pages/History.razor.rz.scp.css */
/* Лента истории: маркер статуса слева и превью ответа в две строки. */

.wa-hist-mark[b-nhea256zix] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    margin-top: 0.15rem;
    border-radius: 8px;
}

.wa-hist-mark.is-found[b-nhea256zix] { background: rgba(69, 192, 138, 0.12); color: var(--jade-text); }
.wa-hist-mark.is-empty[b-nhea256zix] { background: rgba(255, 90, 77, 0.12); color: var(--ember-300); }
.wa-hist-mark.is-fav[b-nhea256zix]   { background: rgba(210, 153, 34, 0.14); color: var(--warning-text); }

/* Ровно две строки: третья ничего не добавляет к узнаванию записи, зато
   ломает ритм ленты. */
.wa-hist-preview[b-nhea256zix] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0.2rem 0 0.15rem;
    font-size: 0.87rem;
    line-height: 1.45;
    color: var(--app-muted);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Лендинг. Базовые вещи (.sx-container, .sx-section, .sx-btn, .sx-card,
   .sx-demo, .sx-marquee, .sx-badge) приходят из пакета дизайна — css/sensei.css.
   Здесь только то, что в нём не описано: раскладка секций и мелкие элементы,
   которые в прототипе были инлайновыми стилями.

   Все размеры и цвета — с макета; отклонения помечены комментарием. */

/* ── Hero ───────────────────────────────────────────────────────────────── */
.sx-hero[b-blec6yhx4d] {
    position: relative;
    overflow: hidden;
    background: var(--ink-900);
}

.sx-hero-inner[b-blec6yhx4d] {
    position: relative;
}

.sx-hero-grid[b-blec6yhx4d] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: 64px;
    align-items: center;
    padding: 64px 0 104px;
}

.sx-hero-lead[b-blec6yhx4d] {
    margin: 28px 0 0;
}

.sx-hero-cta[b-blec6yhx4d] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 38px;
}

.sx-hero-pills[b-blec6yhx4d] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

/* ── Демо-окно поиска ───────────────────────────────────────────────────── */
.sx-demo-dot[b-blec6yhx4d] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line-4);
}

.sx-demo-title[b-blec6yhx4d] {
    margin-left: 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: #6E7683;
}

.sx-demo-pad[b-blec6yhx4d] {
    padding: 22px;
}

.sx-demo-input[b-blec6yhx4d]  .wa-icon {
    color: var(--ember-text);
}

.sx-demo-q[b-blec6yhx4d] {
    font-size: 15.5px;
    color: var(--text);
}

/* Бейджи поиска и панель оценки переключаются мгновенно (см. motion.md, №1):
   никакого transition на opacity — иначе при остановленном таймлайне блок
   останется невидимым навсегда. */
.sx-demo-meta[b-blec6yhx4d] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    opacity: 0;
}

.sx-tag[b-blec6yhx4d] {
    padding: 5px 9px;
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.sx-tag-steel[b-blec6yhx4d] {
    background: rgba(127, 166, 255, 0.10);
    color: var(--steel-text);
}

.sx-tag-jade[b-blec6yhx4d] {
    background: rgba(69, 192, 138, 0.10);
    color: var(--jade-text);
}

.sx-answer-head[b-blec6yhx4d] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
}

.sx-answer-label[b-blec6yhx4d] {
    font-size: 12.5px;
    font-weight: 600;
    color: #8B93A1;
}

.sx-answer-time[b-blec6yhx4d] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #5F6875;
}

.sx-answer-text[b-blec6yhx4d] {
    min-height: 132px;
    font-size: 15px;
    line-height: 1.72;
    color: #D9DEE6;
}

/* Место под три карточки источников зарезервировано (3 × 46 + 2 × 8 = 154):
   демо-цикл очищает их в начале каждого прохода и добавляет заново, и без
   резерва окно то сжималось, то росло на 154px — вся страница под ним
   дёргалась дважды за цикл. Текст ответа держит высоту тем же приёмом
   (min-height на .sx-answer-text). */
.sx-answer-sources[b-blec6yhx4d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    min-height: 154px;
}

.sx-demo-act[b-blec6yhx4d] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    opacity: 0;
}

.sx-act-btn[b-blec6yhx4d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line-2);
    border-radius: 9px;
    color: var(--text-3);
}

.sx-act-hint[b-blec6yhx4d] {
    font-size: 12.5px;
    color: var(--text-4);
}

/* ── Общее для секций ───────────────────────────────────────────────────── */
.sx-section-tight[b-blec6yhx4d] {
    padding-top: 80px;
}

.sx-section-head[b-blec6yhx4d] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
}

.sx-section-aside[b-blec6yhx4d] {
    max-width: 340px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-3);
}

.sx-h2-wide[b-blec6yhx4d] {
    max-width: 700px;
}

.sx-eyebrow-mute[b-blec6yhx4d] {
    color: var(--text-3);
    letter-spacing: 0.16em;
}

/* Звёздочка-сноска у цифры. Отдельным классом, а не <sup>: у sup своя
   базовая линия, и рядом с 74px-заголовком он уезжает под строку. */
.sx-note-ref[b-blec6yhx4d] {
    margin-left: 3px;
    font-size: 0.45em;
    vertical-align: super;
    line-height: 0;
    color: inherit;
    opacity: 0.7;
    text-decoration: none;
}

.sx-note-ref:hover[b-blec6yhx4d] {
    opacity: 1;
    color: inherit;
    text-decoration: none;
}

/* ── Как это работает ───────────────────────────────────────────────────── */
.sx-steps[b-blec6yhx4d] {
    position: relative;
    margin-top: 56px;
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
    overflow: hidden;
}

.sx-steps-graph[b-blec6yhx4d] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
}

.sx-steps-grid[b-blec6yhx4d] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.sx-step[b-blec6yhx4d] {
    padding: 34px 30px 40px;
    border-right: 1px solid #171B23;
}

.sx-step:last-child[b-blec6yhx4d] {
    border-right: none;
}

.sx-step-num[b-blec6yhx4d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-ctl);
    border: 1px solid rgba(255, 90, 77, 0.34);
    background: rgba(255, 90, 77, 0.10);
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ember-soft);
}

.sx-step-title[b-blec6yhx4d] {
    margin-top: 20px;
    font-size: 17.5px;
    font-weight: 600;
    color: #EFEAE1;
}

.sx-step-text[b-blec6yhx4d] {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-3);
}

/* ── Три цифры ──────────────────────────────────────────────────────────── */
.sx-stats[b-blec6yhx4d] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sx-stat[b-blec6yhx4d] {
    padding: 30px 28px;
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    background: var(--ink-800);
}

.sx-stat-value[b-blec6yhx4d] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.sx-stat-num[b-blec6yhx4d] {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #F5F1E9;
}

.sx-stat-unit[b-blec6yhx4d] {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    color: var(--ember-text);
}

.sx-stat-title[b-blec6yhx4d] {
    margin-top: 16px;
    font-size: 15px;
    font-weight: 600;
    color: #D8DDE5;
}

.sx-stat-text[b-blec6yhx4d] {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.55;
    color: #828B97;
}

/* ── Возможности ────────────────────────────────────────────────────────── */
.sx-cards[b-blec6yhx4d] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
}

.sx-card-title[b-blec6yhx4d] {
    margin-top: 22px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #EFEAE1;
}

.sx-card-text[b-blec6yhx4d] {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--text-3);
}

/* ── Для кого ───────────────────────────────────────────────────────────── */
.sx-audience[b-blec6yhx4d] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.sx-audience-card[b-blec6yhx4d] {
    padding: 40px 38px;
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, #101319, #0C0F14);
}

/* Карточка enterprise теплее: тот же приём, что в hero — вермильон подсвечивает
   то, что читатель должен заметить вторым. */
.sx-audience-card-ember[b-blec6yhx4d] {
    background: linear-gradient(160deg, #14100F, #0C0F14);
}

.sx-h3[b-blec6yhx4d] {
    margin: 16px 0 0;
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--text);
}

.sx-audience-text[b-blec6yhx4d] {
    margin: 14px 0 0;
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--text-3);
}

.sx-audience-points[b-blec6yhx4d] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 26px;
}

.sx-point[b-blec6yhx4d] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--app-text-3);
}

.sx-point[b-blec6yhx4d]  .sx-point-mark-jade {
    flex: none;
    margin-top: 2px;
    color: var(--jade-text);
}

.sx-point[b-blec6yhx4d]  .sx-point-mark-ember {
    flex: none;
    margin-top: 2px;
    color: var(--ember-soft);
}

/* Метка «Скоро» у направления, которого ещё нет в продукте. Тише акцента —
   это уточнение, а не приглашение: продавать несуществующее не нужно. */
.sx-audience-head[b-blec6yhx4d] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sx-soon[b-blec6yhx4d] {
    padding: 3px 9px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* Ненастроенный пункт списка: без галочки и приглушённый, чтобы взгляд не
   считал его за уже работающую возможность. */
.sx-point-soon[b-blec6yhx4d] {
    color: var(--text-4);
}

.sx-point-soon-mark[b-blec6yhx4d] {
    flex: none;
    margin-top: 1px;
    padding: 1px 7px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-4);
}

/* ── Тарифы ─────────────────────────────────────────────────────────────── */
.sx-pricing-head[b-blec6yhx4d] {
    text-align: center;
}

.sx-pricing-head .sx-h2[b-blec6yhx4d] {
    margin-left: auto;
    margin-right: auto;
    max-width: 620px;
}

.sx-plans[b-blec6yhx4d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 48px;
    align-items: start;
}

.sx-plan[b-blec6yhx4d] {
    position: relative;
    padding: 34px 30px;
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    background: var(--ink-800);
}

.sx-plan-featured[b-blec6yhx4d] {
    border-color: rgba(255, 90, 77, 0.42);
    background: linear-gradient(170deg, #16110F, var(--ink-800));
}

.sx-plan-head[b-blec6yhx4d] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sx-plan-name[b-blec6yhx4d] {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}

.sx-plan-badge[b-blec6yhx4d] {
    padding: 4px 9px;
    border-radius: var(--r-pill);
    background: rgba(255, 90, 77, 0.16);
    color: var(--ember-300);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sx-plan-price[b-blec6yhx4d] {
    margin-top: 18px;
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.sx-plan-amount[b-blec6yhx4d] {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #F5F1E9;
}

/* «по запросу» вместо суммы — цены как поля тарифа в системе нет; на 44px
   такая строка ломает сетку карточек, поэтому ужимаем. */
.sx-plan-amount:not(:only-child)[b-blec6yhx4d],
.sx-plan-amount[b-blec6yhx4d] {
    font-size: clamp(24px, 3.4vw, 44px);
}

.sx-plan-per[b-blec6yhx4d] {
    font-size: 14px;
    color: #828B97;
}

.sx-plan-text[b-blec6yhx4d] {
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-3);
    min-height: 44px;
}

.sx-plan-rows[b-blec6yhx4d] {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line-1);
}

.sx-plan-row[b-blec6yhx4d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 14px;
    color: var(--text-3);
}

.sx-plan-val[b-blec6yhx4d] {
    font-family: var(--font-mono);
    font-size: 13px;
    color: #D8DDE5;
}

.sx-plan-cta[b-blec6yhx4d] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    margin-top: 26px;
    border: 1px solid var(--line-4);
    border-radius: var(--r-ctl);
    background: transparent;
    color: #E8E3DA;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}

.sx-plan-cta:hover[b-blec6yhx4d] {
    border-color: var(--line-4);
    color: #E8E3DA;
    text-decoration: none;
}

.sx-plan-cta-primary[b-blec6yhx4d] {
    background: var(--ember);
    border-color: var(--ember);
    color: #fff;
}

.sx-plan-cta-primary:hover[b-blec6yhx4d] {
    background: var(--ember-hover);
    border-color: var(--ember-hover);
    color: #fff;
}

.sx-plans-empty[b-blec6yhx4d] {
    margin-top: 48px;
    padding: 30px 28px;
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    background: var(--ink-800);
    color: var(--text-3);
    text-align: center;
}

/* ── Финальный CTA ──────────────────────────────────────────────────────── */
.sx-final[b-blec6yhx4d] {
    position: relative;
    padding: 76px 60px;
    border-radius: var(--r-xl);
    border: 1px solid rgba(255, 90, 77, 0.24);
    background: radial-gradient(120% 140% at 20% 0%, rgba(255, 90, 77, 0.16), rgba(11, 13, 16, 0) 62%), var(--ink-800);
    overflow: hidden;
    text-align: center;
}

.sx-final-title[b-blec6yhx4d] {
    margin: 0 auto;
    max-width: 660px;
    font-family: var(--font-display);
    font-size: 52px;
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: var(--text-hi);
}

.sx-final-text[b-blec6yhx4d] {
    margin: 20px auto 0;
    max-width: 520px;
    font-size: 17px;
    line-height: 1.6;
    color: #A7AFBB;
}

.sx-final-cta[b-blec6yhx4d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 36px;
}

/* ── Примечания к цифрам ────────────────────────────────────────────────── */
.sx-notes[b-blec6yhx4d] {
    padding: 26px 28px;
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    background: var(--ink-850);
}

.sx-notes-title[b-blec6yhx4d] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-4);
}

.sx-notes-list[b-blec6yhx4d] {
    margin: 14px 0 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-3);
}

.sx-redirect[b-blec6yhx4d] {
    padding-top: 64px;
    color: var(--text-3);
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .sx-hero-grid[b-blec6yhx4d] {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 40px 0 72px;
    }

    .sx-steps-grid[b-blec6yhx4d] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sx-step:nth-child(2n)[b-blec6yhx4d] {
        border-right: none;
    }

    .sx-cards[b-blec6yhx4d] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sx-audience[b-blec6yhx4d] {
        grid-template-columns: 1fr;
    }

    .sx-section-head[b-blec6yhx4d] {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

@media (max-width: 760px) {
    .sx-stats[b-blec6yhx4d] {
        grid-template-columns: 1fr;
    }

    .sx-cards[b-blec6yhx4d] {
        grid-template-columns: 1fr;
    }

    .sx-steps-grid[b-blec6yhx4d] {
        grid-template-columns: 1fr;
    }

    .sx-step[b-blec6yhx4d] {
        border-right: none;
        border-bottom: 1px solid #171B23;
    }

    .sx-final[b-blec6yhx4d] {
        padding: 48px 24px;
    }

    .sx-final-title[b-blec6yhx4d] {
        font-size: 34px;
    }

    .sx-final-cta[b-blec6yhx4d],
    .sx-hero-cta[b-blec6yhx4d] {
        flex-direction: column;
        align-items: stretch;
    }

    .sx-audience-card[b-blec6yhx4d] {
        padding: 28px 22px;
    }

    .sx-h3[b-blec6yhx4d] {
        font-size: 24px;
    }
}
/* /Components/Pages/Tools/ExtractCodes.razor.rz.scp.css */
/* Карточки секций — те же, что у соседнего инструмента (класс глобальный, в app.css). */

/* Фрагмент исходной строки под найденным кодом: показывает, откуда код взят,
   но не должен спорить с самим кодом за внимание. */
.wa-ex-context[b-b51i8xc9ul] {
    font-size: 0.75rem;
    line-height: 1.3;
    word-break: break-all;
    opacity: 0.75;
}
/* /Components/Pages/Tools/GsSeparators.razor.rz.scp.css */
/* Лента символов кода: нажатие по символу ставит разделитель ПЕРЕД ним. Позиция
   рисуется левой границей ячейки — так отметка попадает ровно в зазор между
   символами, а не «на символ». */
.wa-gs-strip[b-5568ntbp49] {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.35rem;
    user-select: none;
}

.wa-gs-cell[b-5568ntbp49] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 1.05em;
    padding: 0.95em 1px 0;
    line-height: 1.15;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.wa-gs-cell:hover[b-5568ntbp49] {
    background-color: var(--bs-secondary-bg);
    border-left-color: var(--bs-secondary-border-subtle);
}

.wa-gs-cell.is-sep[b-5568ntbp49],
.wa-gs-cell.is-sep:hover[b-5568ntbp49] {
    border-left-color: var(--bs-warning);
}

/* Перед первым символом разделителя не бывает — ячейку не подсвечиваем. */
.wa-gs-cell.is-locked[b-5568ntbp49],
.wa-gs-cell.is-locked:hover[b-5568ntbp49] {
    cursor: default;
    background-color: transparent;
    border-left-color: transparent;
}

/* Номер позиции — линейка над лентой. Вынесен из потока и прижат к левому краю
   ячейки: двузначные номера иначе центрируются и «уезжают» на соседние символы. */
.wa-gs-idx[b-5568ntbp49] {
    position: absolute;
    top: 0;
    left: 1px;
    font-size: 0.6rem;
    line-height: 1;
    color: var(--app-text-muted, #8b949e);
}
/* /Components/Pages/Tools/ScanCodes.razor.rz.scp.css */
/* Карточки секций — те же, что у соседних инструментов (класс глобальный, в app.css). */

/* Кадр камеры. Ограничен по высоте: на телефоне видео иначе занимает весь экран
   и список найденных кодов уходит за нижний край — а смотреть нужно на оба. */
.wa-scan-video[b-fyparoeku8] {
    width: 100%;
    max-height: 60vh;
    border-radius: 0.5rem;
    background: #000;
    object-fit: contain;
}
/* /Components/Pages/Tools/ToolsIndex.razor.rz.scp.css */
/* Шапка каталога: заголовок, лид и строка фактов «почему этим можно пользоваться».
   Сплошной текст держим в читаемой ширине, даже когда рабочая область шире. */
.wa-tools-hero[b-pqthja9zfs],
.wa-tools-prose[b-pqthja9zfs] {
    padding-bottom: 0.5rem;
    max-width: 52rem;
}

/* Между mono-бейджем «Бесплатные инструменты» и заголовком — воздух: без него
   бейдж читается как надстрочная метка заголовка, а не как отдельная плашка. */
.wa-tools-hero h1[b-pqthja9zfs] {
    margin-top: 1.25rem;
}

.wa-tools-facts[b-pqthja9zfs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--app-text-muted, #8b949e);
}

.wa-tools-facts li[b-pqthja9zfs] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.wa-tools-section-title[b-pqthja9zfs] {
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

/* Карточка инструмента: вся карточка — одна ссылка, поэтому ей нужен явный
   hover-отклик, иначе кликабельность не читается (UI-конвенции §12). */
.wa-tool-card[b-pqthja9zfs] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    background-color: var(--ink-800);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.wa-tool-card:hover[b-pqthja9zfs] {
    border-color: var(--app-accent, #ff5a4d);
    transform: translateY(-1px);
    color: inherit;
}

.wa-tool-card h3[b-pqthja9zfs] {
    color: var(--app-text, #e6edf3);
}

/* Кому пригодится — отделяем от описания, но держим в потоке карточки. */
.wa-tool-audience[b-pqthja9zfs] {
    font-size: 0.8rem;
    color: var(--app-text-muted, #8b949e);
}

/* «Открыть» прижимаем к низу, чтобы у карточек разной высоты призыв стоял на одной линии. */
.wa-tool-open[b-pqthja9zfs] {
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--app-link, #ff8a80);
}

/* Анонс — та же карточка, но неактивная: приглушена и не реагирует на курсор. */
.wa-tool-card.is-soon[b-pqthja9zfs] {
    border-style: dashed;
    opacity: 0.75;
    cursor: default;
}

.wa-tool-card.is-soon:hover[b-pqthja9zfs] {
    border-color: var(--app-border-soft, rgba(255, 255, 255, 0.08));
    transform: none;
}

/* Иконка в плашке — как на карточках лендинга: раздел и основной сайт должны
   выглядеть одним продуктом. */
.wa-tool-icon[b-pqthja9zfs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 90, 77, 0.10);
    border: 1px solid rgba(255, 90, 77, 0.26);
    color: var(--ember-soft);
}

/* Моношрифтовые метки: формат, лимит, охват. Значения — из MarkingLimits и
   MarkingTemplateRegistry (в макете стояли другие цифры: 5 000 кодов и 4 МБ,
   код разрешает 20 000 и 8 МБ). */
.wa-tool-tags[b-pqthja9zfs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

.wa-tool-tag[b-pqthja9zfs] {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--line-2);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--text-3);
    white-space: nowrap;
}
/* /Components/Pages/Updates.razor.rz.scp.css */
/* Плашка «что изменилось» над лентой обновлений. */

.wa-upd-banner[b-ugbc8d5rt2] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--app-elev-2);
    border-radius: var(--r-md);
    background: var(--app-bg-elev);
}

.wa-upd-banner-icon[b-ugbc8d5rt2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 90, 77, 0.10);
    border: 1px solid rgba(255, 90, 77, 0.26);
    color: var(--ember-soft);
}

.wa-upd-banner-body[b-ugbc8d5rt2] {
    flex: 1;
    min-width: 0;
}

.wa-upd-banner-title[b-ugbc8d5rt2] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-text-hi, #F4F2EC);
}

.wa-upd-banner-hint[b-ugbc8d5rt2] {
    font-size: 0.85rem;
    color: var(--app-muted);
}

@media (max-width: 640px) {
    /* На узком экране подсказка уступает место кнопке. */
    .wa-upd-banner-hint[b-ugbc8d5rt2] {
        display: none;
    }
}
/* /Components/Shared/ArticleDiffView.razor.rz.scp.css */
/* Diff статьи на /updates. Тема в проекте одна — тёмная; заливки строк даём
   полупрозрачными rgba поверх body-bg, а не solid *-bg-subtle: последние в
   тёмной палитре светлые, и текст на них становится нечитаем (тот же урок,
   что и в .wa-glogin-assure). */

.wa-diff[b-mfqyh4pe14] {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.wa-diff-hunk[b-mfqyh4pe14] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

/* Разрыв между несмежными правками — чтобы не читалось как сплошной текст. */
.wa-diff-hunk + .wa-diff-hunk[b-mfqyh4pe14] {
    position: relative;
}

.wa-diff-hunk + .wa-diff-hunk[b-mfqyh4pe14]::before {
    content: "⋯";
    display: block;
    text-align: center;
    color: var(--bs-secondary-color);
    line-height: 1;
    padding: 0.125rem 0;
}

.wa-diff-line[b-mfqyh4pe14] {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem;
    /* Текст статьи — проза, а не код: переносим по словам, длинные
       слова/ссылки рвём принудительно, чтобы не было горизонтальной прокрутки. */
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.wa-diff-sign[b-mfqyh4pe14] {
    flex: 0 0 0.75rem;
    font-family: var(--font-mono);
    font-weight: 600;
    user-select: none;
}

.wa-diff-text[b-mfqyh4pe14] {
    flex: 1 1 auto;
    min-width: 0;
}

.wa-diff-ins[b-mfqyh4pe14] {
    background: rgba(var(--bs-success-rgb), 0.12);
    box-shadow: inset 0.125rem 0 0 var(--app-success, #3fb950);
}

.wa-diff-ins .wa-diff-sign[b-mfqyh4pe14] {
    color: var(--app-success, #3fb950);
}

.wa-diff-del[b-mfqyh4pe14] {
    background: rgba(var(--bs-danger-rgb), 0.12);
    box-shadow: inset 0.125rem 0 0 var(--app-danger, #e5484d);
}

.wa-diff-del .wa-diff-sign[b-mfqyh4pe14] {
    color: var(--app-danger, #e5484d);
}

/* Контекст вокруг правки — приглушён, чтобы глаз шёл на изменения. */
.wa-diff-ctx[b-mfqyh4pe14] {
    color: var(--bs-secondary-color);
}

/* Word-level: конкретные изменившиеся слова внутри строки. Насыщеннее
   строчной заливки, иначе на её фоне не читается как выделение. */
.wa-diff-mark[b-mfqyh4pe14] {
    background: transparent;
    color: inherit;
    padding: 0.05rem 0.15rem;
    border-radius: 0.2rem;
    font-weight: 600;
}

.wa-diff-ins .wa-diff-mark[b-mfqyh4pe14] {
    background: rgba(var(--bs-success-rgb), 0.3);
}

.wa-diff-del .wa-diff-mark[b-mfqyh4pe14] {
    background: rgba(var(--bs-danger-rgb), 0.3);
}

.wa-diff-note[b-mfqyh4pe14] {
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
}

.wa-diff-note-end[b-mfqyh4pe14] {
    margin: 0;
}
/* /Components/Shared/ArticlePreviewModal.razor.rz.scp.css */
/* Тело статьи: обычный markdown-поток. Заголовки внутри окна поджаты — статья
   открывается в модалке, и h1 «как на странице» ломал бы её масштаб.

   Всё внутреннее — через ::deep: разметка приходит из markdown готовым HTML
   (MarkupString), атрибута области видимости на ней нет, и обычные правила
   до неё не достают. */

.wa-ap-body[b-tzpcfxqgwt] {
    font-size: 0.92rem;
    line-height: 1.6;
    word-break: break-word;
}

.wa-ap-body[b-tzpcfxqgwt]  > :first-child { margin-top: 0; }
.wa-ap-body[b-tzpcfxqgwt]  > :last-child { margin-bottom: 0; }

.wa-ap-body[b-tzpcfxqgwt]  h1 { font-size: 1.25rem; }
.wa-ap-body[b-tzpcfxqgwt]  h2 { font-size: 1.1rem; }
.wa-ap-body[b-tzpcfxqgwt]  h3,
.wa-ap-body[b-tzpcfxqgwt]  h4,
.wa-ap-body[b-tzpcfxqgwt]  h5,
.wa-ap-body[b-tzpcfxqgwt]  h6 { font-size: 1rem; }

.wa-ap-body[b-tzpcfxqgwt]  h1,
.wa-ap-body[b-tzpcfxqgwt]  h2,
.wa-ap-body[b-tzpcfxqgwt]  h3,
.wa-ap-body[b-tzpcfxqgwt]  h4 {
    margin-top: 1.1rem;
    margin-bottom: 0.4rem;
}

.wa-ap-body[b-tzpcfxqgwt]  img { max-width: 100%; height: auto; }

.wa-ap-body[b-tzpcfxqgwt]  pre {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: var(--r-sm);
    background: var(--app-bg-elev);
    overflow-x: auto;
}

.wa-ap-body[b-tzpcfxqgwt]  code {
    font-size: 0.85em;
}

/* Цитата — вертикальная линейка слева: в статьях поддержки ими выделяют
   предупреждения, и без оформления они сливаются с обычным абзацем. */
.wa-ap-body[b-tzpcfxqgwt]  blockquote {
    margin: 0.8rem 0;
    padding: 0.1rem 0 0.1rem 0.8rem;
    border-left: 3px solid var(--app-accent);
    color: var(--app-text-muted);
}

.wa-ap-body[b-tzpcfxqgwt]  table {
    width: 100%;
    margin: 0.6rem 0;
    font-size: 0.86rem;
    border-collapse: collapse;
}

.wa-ap-body[b-tzpcfxqgwt]  th,
.wa-ap-body[b-tzpcfxqgwt]  td {
    border: 1px solid var(--app-border);
    padding: 0.35rem 0.55rem;
    vertical-align: top;
    text-align: left;
}

.wa-ap-body[b-tzpcfxqgwt]  th {
    background: var(--app-bg-elev);
    font-weight: 600;
}

.wa-ap-body[b-tzpcfxqgwt]  ul,
.wa-ap-body[b-tzpcfxqgwt]  ol {
    padding-left: 1.3rem;
}

.wa-ap-body[b-tzpcfxqgwt]  hr {
    margin: 1rem 0;
    border-color: var(--app-border);
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.empty-state-emoji[b-22vti5bzfq] {
    font-size: 48px;
    line-height: 1;
}
/* /Components/Shared/LoadingState.razor.rz.scp.css */
.loading-state[b-4e11b5bvmo] {
    opacity: 0;
    animation: ls-fade-in-b-4e11b5bvmo 150ms ease-out 120ms forwards;
}

@keyframes ls-fade-in-b-4e11b5bvmo {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .loading-state[b-4e11b5bvmo] {
        animation: none;
        opacity: 1;
    }
}
/* /Components/Shared/MarkingAboutSensei.razor.rz.scp.css */
/* Блок про основной сервис. Отделён от контента инструмента рамкой и лёгкой
   заливкой: это не часть инструкции, а рассказ «чей это инструмент». */
.wa-tools-about[b-mq03e3xj75] {
    margin-top: 2.5rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--app-border-soft, rgba(255, 255, 255, 0.08));
    border-radius: 0.6rem;
    background-color: var(--app-bg-elev, rgba(255, 255, 255, 0.02));
}

/* Короткая версия внизу страницы инструмента — компактнее и без акцента. */
.wa-tools-about.is-compact[b-mq03e3xj75] {
    margin-top: 1rem;
    padding: 1rem 1.15rem;
}

.wa-tools-about h3[b-mq03e3xj75] {
    color: var(--app-text, #e6edf3);
}
/* /Components/Shared/PublicFooter.razor.rz.scp.css */
/* Футер публичных страниц: четыре колонки, первая шире (описание продукта). */

.sx-footer[b-365zilrk5d] {
    position: relative;
    margin-top: 104px;
    border-top: 1px solid #171B23;
    background: var(--ink-900);
}

.sx-footer .sx-container[b-365zilrk5d] {
    padding-top: 56px;
    padding-bottom: 92px;
}

.sx-footer-grid[b-365zilrk5d] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
}

.sx-footer-about[b-365zilrk5d] {
    margin: 14px 0 0;
    max-width: 260px;
    font-size: 14px;
    line-height: 1.6;
    color: #727A86;
}

.sx-footer-title[b-365zilrk5d] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-4);
}

.sx-footer-links[b-365zilrk5d] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.sx-footer-links a[b-365zilrk5d] {
    font-size: 14px;
    color: var(--text-3);
    text-decoration: none;
}

.sx-footer-links a:hover[b-365zilrk5d] {
    color: var(--text-hi);
    text-decoration: underline;
}

.sx-footer-bottom[b-365zilrk5d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid #171B23;
    font-size: 13px;
    color: var(--text-4);
}

.sx-footer-bottom a[b-365zilrk5d] {
    color: var(--text-4);
    text-decoration: none;
}

.sx-footer-bottom a:hover[b-365zilrk5d] {
    color: var(--text-3);
    text-decoration: underline;
}

@media (max-width: 900px) {
    .sx-footer-grid[b-365zilrk5d] {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

@media (max-width: 560px) {
    .sx-footer[b-365zilrk5d] {
        margin-top: 64px;
    }

    .sx-footer .sx-container[b-365zilrk5d] {
        padding-bottom: 56px;
    }

    .sx-footer-grid[b-365zilrk5d] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/PublicHeader.razor.rz.scp.css */
/* Шапка публичных страниц. Раскладку (flex, высота 88) даёт .sx-header из
   пакета дизайна — здесь только то, чего в нём нет: разделы и действия. */

.sx-header[b-ghknehjsxm] {
    gap: 24px;
}

.sx-nav[b-ghknehjsxm] {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 14.5px;
}

.sx-nav a[b-ghknehjsxm] {
    color: #B9BFC9;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--t-fast) ease;
}

.sx-nav a:hover[b-ghknehjsxm] {
    color: var(--text-hi);
    text-decoration: none;
}

.sx-header-actions[b-ghknehjsxm] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sx-header-login[b-ghknehjsxm] {
    color: #B9BFC9;
    font-size: 14.5px;
    text-decoration: none;
    white-space: nowrap;
}

.sx-header-login:hover[b-ghknehjsxm] {
    color: var(--text-hi);
    text-decoration: none;
}

/* Планшет: разделы уезжают, остаются знак и действия — иначе строка ломается
   раньше, чем перестаёт помещаться сама кнопка регистрации. */
@media (max-width: 980px) {
    .sx-nav[b-ghknehjsxm] {
        display: none;
    }
}

@media (max-width: 640px) {
    .sx-header[b-ghknehjsxm] {
        height: 68px;
    }

    /* «Войти» на узком экране лишний: тот же вход доступен из формы регистрации,
       а два соседних текстовых действия на 360px сливаются. */
    .sx-header-login[b-ghknehjsxm] {
        display: none;
    }
}
/* /Components/Shared/RowPreviewModal.razor.rz.scp.css */
/* Строка таблицы: сначала «как найти запись», потом сами значения.
   Порядок не случаен — человек открывает окно из ответа, и первый вопрос у него
   «где это лежит», а ссылку на ячейку дать нельзя. */

.wa-row-where[b-2a4rwby7tw] {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--app-border);
    border-radius: var(--r-sm);
    background: var(--app-bg-elev);
    font-size: 0.88rem;
}

.wa-row-where-title[b-2a4rwby7tw] {
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted);
    margin-bottom: 0.35rem;
}

.wa-row-where-body > div + div[b-2a4rwby7tw] {
    margin-top: 0.2rem;
}

.wa-row-where-label[b-2a4rwby7tw] {
    display: inline-block;
    min-width: 4.5rem;
    color: var(--app-text-muted);
}

.wa-row-cells[b-2a4rwby7tw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.wa-row-cell[b-2a4rwby7tw] {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: var(--r-sm);
    background: var(--app-bg-elev);
}

.wa-row-cell-col[b-2a4rwby7tw] {
    font-size: 0.78rem;
    color: var(--app-text-muted);
    margin-bottom: 0.15rem;
}

/* Значения ячеек приходят как есть — переносы строк в них значимы. */
.wa-row-cell-val[b-2a4rwby7tw] {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.5;
}

.wa-row-extra[b-2a4rwby7tw] {
    margin-top: 1rem;
}

.wa-row-extra-title[b-2a4rwby7tw] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted);
}

.wa-row-extra .wa-row-cells[b-2a4rwby7tw] {
    margin-top: 0.4rem;
}
/* /Components/Shared/SectionTabs.razor.rz.scp.css */
/* Вкладки раздела: горизонтальная полоса над заголовком страницы.
   Активная — вермильон с подчёркиванием той же толщины, что и линия полосы,
   чтобы подчёркивание читалось как продолжение, а не как отдельная плашка. */

.sa-tabs[b-6ud58vd3n6] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--app-border-soft);
    overflow-x: auto;
}

/* Вторая полоса (подраздел) — мельче и без своей линии: линию уже нарисовала
   полоса уровнем выше, две подряд выглядят как ошибка вёрстки. */
.sa-tabs-sub[b-6ud58vd3n6] {
    margin-top: -0.75rem;
    border-bottom: none;
    gap: 2px;
}

/* ::deep обязателен: <a> рендерит дочерний компонент NavLink, и scope-атрибут
   этого компонента на него не попадает — без ::deep вкладки остаются
   ненастроенными ссылками (видно как «все вкладки активного цвета»). */
.sa-tabs[b-6ud58vd3n6]  .sa-tab {
    padding: 0.55rem 0.85rem;
    border-bottom: 2px solid transparent;
    color: var(--app-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.sa-tabs[b-6ud58vd3n6]  .sa-tab:hover {
    color: var(--app-text);
    text-decoration: none;
}

/* NavLink сам вешает .active на совпадении маршрута. */
.sa-tabs[b-6ud58vd3n6]  .sa-tab.active {
    color: var(--app-accent);
    border-bottom-color: var(--app-accent);
}

.sa-tabs-sub[b-6ud58vd3n6]  .sa-tab {
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    border-bottom-width: 1px;
}
/* /Components/Shared/SenseiMark.razor.rz.scp.css */
/* Знак: книга в потоке, звезда — приподнята и сдвинута вправо за её угол.
   Размеры приходят инлайном (параметр Size), здесь только раскладка. */
.wa-sensei-mark[b-e50lg606nx] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.wa-sensei-mark-star[b-e50lg606nx] {
    position: absolute;
    right: -3px;
    top: -3px;
}
/* /Components/Shared/SpacePickerModal.razor.rz.scp.css */
/* Карточки выбора базы. Крупные, кликабельные целиком — окно открывают, чтобы
   ткнуть в нужную базу, а не читать список. */

.sa-picker[b-qpif9o212t] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sa-picker-card[b-qpif9o212t] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--app-elev-2);
    border-radius: var(--r-sm);
    background: var(--app-bg-elev);
    color: var(--app-text);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}

.sa-picker-card:hover[b-qpif9o212t] {
    border-color: rgba(255, 90, 77, 0.45);
    background: var(--app-elev);
}

/* Выбранная сейчас — вермильоновая рамка и галочка справа. Цветом, а не только
   галочкой: на тёмной теме два соседних состояния кнопки иначе неразличимы
   (UI_CONVENTIONS про active state). */
.sa-picker-card-current[b-qpif9o212t] {
    border-color: rgba(255, 90, 77, 0.55);
    background: rgba(255, 90, 77, 0.08);
}

.sa-picker-icon[b-qpif9o212t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 90, 77, 0.10);
    border: 1px solid rgba(255, 90, 77, 0.26);
    color: var(--ember-soft);
}

.sa-picker-body[b-qpif9o212t] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.sa-picker-name[b-qpif9o212t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--app-text-hi, #F4F2EC);
}

.sa-picker-tag[b-qpif9o212t] {
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: rgba(127, 166, 255, 0.14);
    color: var(--steel-text);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sa-picker-meta[b-qpif9o212t] {
    font-size: 0.85rem;
    color: var(--app-muted);
}

.sa-picker-current[b-qpif9o212t] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--app-accent);
    color: #fff;
}

@media (max-width: 560px) {
    .sa-picker-card[b-qpif9o212t] {
        padding: 0.8rem 0.9rem;
        gap: 0.7rem;
    }

    .sa-picker-icon[b-qpif9o212t] {
        width: 34px;
        height: 34px;
    }
}
/* /Components/Shared/TicketPreviewModal.razor.rz.scp.css */
/* Предпросмотр обращения службы поддержки. Плотнее обычной карточки: в окне
   помещаются шапка обращения и переписка целиком, и главное здесь — читаемость
   длинных текстов, а не воздух. */

.wa-tp-subject[b-e0kym2024f] {
    margin-bottom: 0.75rem;
    line-height: 1.35;
}

/* Шапка обращения: пары «поле — значение» в две колонки на широком экране,
   в одну на узком. Таблицей не делаем — половина полей часто пустая. */
.wa-tp-meta[b-e0kym2024f] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--app-border);
    border-radius: var(--r-sm);
    background: var(--app-bg-elev);
    font-size: 0.86rem;
}

@media (max-width: 575.98px) {
    .wa-tp-meta[b-e0kym2024f] { grid-template-columns: minmax(0, 1fr); }
}

.wa-tp-meta-item[b-e0kym2024f] {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
}

.wa-tp-meta-label[b-e0kym2024f] {
    flex: none;
    color: var(--app-text-muted);
}

.wa-tp-meta-value[b-e0kym2024f] {
    min-width: 0;
    word-break: break-word;
}

.wa-tp-section[b-e0kym2024f] {
    margin-top: 0.9rem;
}

.wa-tp-section-title[b-e0kym2024f] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted);
    margin-bottom: 0.25rem;
}

/* Тексты приходят из helpdesk как есть — переносы строк значимы. */
.wa-tp-text[b-e0kym2024f] {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.5;
}

.wa-tp-attach[b-e0kym2024f] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--app-text-muted);
}

.wa-tp-tabs[b-e0kym2024f] {
    margin-top: 1rem;
}

/* Bootstrap на тёмной теме красит неактивную вкладку акцентом, а активную —
   приглушённо: получается наоборот, глаз читает активной не ту. Задаём явно:
   выбранная — обычным текстом и подчёркиванием акцентом, остальные приглушены. */
.wa-tp-tabs .nav-link[b-e0kym2024f] {
    display: inline-flex;
    align-items: center;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--app-text-muted);
}

.wa-tp-tabs .nav-link:hover[b-e0kym2024f] {
    color: var(--app-text);
}

.wa-tp-tabs .nav-link.active[b-e0kym2024f] {
    color: var(--app-text);
    background: none;
    border-bottom-color: var(--app-accent);
}

.wa-tp-tabs .nav-link.active .wa-tp-count[b-e0kym2024f] {
    background: var(--app-elev-2);
}

/* Счётчик сообщений во вкладке — пилюля, чтобы не сливаться с подписью. */
.wa-tp-count[b-e0kym2024f] {
    margin-left: 0.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--app-elev);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* На узком экране пара вкладок не влезает в строку и рвётся в столбик —
   поджимаем отступы, чтобы остались рядом. */
@media (max-width: 575.98px) {
    .wa-tp-tabs .nav-link[b-e0kym2024f] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 0.86rem;
    }
}

.wa-tp-msgs[b-e0kym2024f] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.wa-tp-msg[b-e0kym2024f] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: var(--r-sm);
    background: var(--app-bg-elev);
}

.wa-tp-msg-head[b-e0kym2024f] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.wa-tp-msg-author[b-e0kym2024f] {
    font-weight: 600;
    font-size: 0.86rem;
}

.wa-tp-msg-at[b-e0kym2024f],
.wa-tp-msg-attach[b-e0kym2024f] {
    font-size: 0.78rem;
    color: var(--app-text-muted);
}

.wa-tp-msg-attach[b-e0kym2024f] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
/* /Components/Shared/WikiTreeNode.razor.rz.scp.css */
/* Single-toggle кнопка (◐) — без явного hover-state выглядит как
   декорация, юзер не понимает что она кликабельна. Подсвечиваем
   фон и border на hover, чтобы намерение «это управляющий элемент»
   читалось сразу. */
.wa-tree-single:not(:disabled):hover[b-zi7ihlpvwe] {
    background: var(--bs-secondary-bg) !important;
    border-radius: 4px;
    color: var(--bs-body-color) !important;
}