/*
 * UI-кит админки (KITE-2): токены и классы компонентов, без утилитарного фреймворка.
 * Файл рукописный и отдаётся как есть; собираемый ресурс у кита один — kit.js.
 * Правило кита: ни !important, ни обхода специфичности чужим селектором (KIT-49).
 */

/* ===== Токены (KITE-3) ===== */

:root {
    color-scheme: light;

    /* Три ступени глубины: канва < приподнятая панель < контрол. */
    --color-sunken: #eaecef;
    --color-raised: #f7f8fa;
    --color-surface: #ffffff;
    --color-control: #ffffff;
    --color-line: #e6e8eb;
    --color-ink: #1a1d21;
    --color-muted: #6b7280;
    --color-inverted: #ffffff;

    /* Акцент выводится из одного сырого токена: зона переопределяет только его. */
    --brand-turmeric: #ec7c1b;
    --accent-base: var(--brand-turmeric);
    --color-accent: var(--accent-base);

    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger: #dc2626;

    /* Цвета уровней доступа: базовый, профи, гуру (куркума = акцент RU), риши. */
    --color-tier-1: #eab308;
    --color-tier-2: #8b5cf6;
    --color-tier-3: var(--brand-turmeric);
    --color-tier-4: #d946ef;

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-xl: 18px;

    --shadow-raised: 0 1px 16px rgba(16, 24, 40, 0.1);
    --shadow-selected: 0 1px 6px rgba(16, 24, 40, 0.1);

    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    /* Геометрия оболочки. */
    --kit-gap: 8px;
    --kit-rail-w: 72px;
    --kit-context-w: 18rem;
    --kit-aside-w: 20rem;

    /* Единая высота управляющих элементов одной строки (KIT-31). */
    --kit-control-h: 35px;
    --kit-control-h-sm: 28px;

    --kit-accent-weak: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
    --kit-hover: color-mix(in srgb, var(--color-ink) 5%, var(--color-raised));
    --kit-selected: var(--kit-accent-weak);
    --kit-rail-header: color-mix(in srgb, var(--color-accent) 35%, var(--color-raised));
    --kit-focus-ring: var(--color-accent);
    --kit-scrim: rgba(0, 0, 0, 0.4);

    /* Цвета регионов участника (KIT-72): акценты марок EU и RU, темнее для текста. */
    --color-zone-eu: color-mix(in srgb, #0ea5e9 72%, #000);
    --color-zone-ru: color-mix(in srgb, var(--brand-turmeric) 78%, #000);
}

/* Зона EU: переопределяется сырая база акцента. --color-accent повторяется здесь же,
   иначе он остался бы вычисленным на :root и наследовался готовым значением: зона на
   вложенном элементе (витрина показывает обе марки рядом) не подействовала бы. */
[data-region="eu"] {
    --accent-base: #0ea5e9;
    --color-accent: var(--accent-base);
}

.kit-dark {
    color-scheme: dark;
    --color-sunken: #16181d;
    --color-raised: #1f2329;
    --color-surface: #1a1d21;
    --color-control: #262b31;
    --color-line: #2e3338;
    --color-ink: #d6d9df;
    --color-muted: #9aa1aa;
    --color-inverted: #ffffff;

    /* Чистый акцент на тёмном фоне светит слишком ярко; затемняется от той же базы,
       поэтому правило не знает про конкретную зону. */
    --color-accent: color-mix(in srgb, var(--accent-base) 78%, #000);
    --color-danger: color-mix(in srgb, #dc2626 78%, #000);
    --color-tier-1: color-mix(in srgb, #eab308 72%, #000);
    --color-tier-2: color-mix(in srgb, #8b5cf6 78%, #000);
    --color-tier-3: color-mix(in srgb, var(--brand-turmeric) 78%, #000);
    --color-tier-4: color-mix(in srgb, #d946ef 78%, #000);

    --kit-accent-weak: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
    --kit-hover: color-mix(in srgb, var(--color-ink) 7%, var(--color-raised));
    /* Выше 60% выделенный пункт и ховер тонут в подкрашенном верхе рейла. */
    --kit-rail-header: color-mix(in srgb, var(--color-accent) 60%, #000);
    --kit-scrim: rgba(0, 0, 0, 0.62);
    /* На тёмном фоне drop-тень не видна: приподнятость даёт внутренняя фаска —
       контур, свет сверху и тень снизу. */
    --shadow-raised:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28);
    --shadow-selected: inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    --color-zone-eu: #38bdf8;
    --color-zone-ru: #f59e4b;
}

/* ===== База ===== */

.kit-root,
.kit-body {
    height: 100%;
}

.kit-body {
    margin: 0;
    background: var(--color-sunken);
    color: var(--color-ink);
    font-family: var(--font-body);
    /* База 14px/1.45: на 16px/1.5 всё оказывается крупнее на шаг и колонки не сходятся. */
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.kit-body h1,
.kit-body h2,
.kit-body h3,
.kit-body h4,
.kit-body p,
.kit-body ul,
.kit-body dl,
.kit-body dd {
    margin: 0;
}

.kit-body a {
    color: inherit;
    text-decoration: none;
}

.kit-body button {
    font: inherit;
    color: inherit;
}

.kit-icon {
    flex: none;
}

/* Кольцо фокуса вплотную к контролу; в тёмной теме — акцентом темы (KIT-34). */
.kit-body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--kit-focus-ring);
    outline-offset: 0;
}

/* ===== Оболочка ===== */

.kit-shell {
    display: flex;
    gap: var(--kit-gap);
    height: 100dvh;
    min-height: 0;
    padding: var(--kit-gap);
    overflow: hidden;
    box-sizing: border-box;
    background: var(--color-sunken);
}

.kit-shell-content {
    flex: 1;
    min-width: 0;
    height: 100%;
    min-height: 0;
}

/* Сообщение об отказе лежит поверх содержимого и высоту колонок не делит. */
.kit-shell-content > *:not(.kit-desktop-only):not(.kit-alert):not(.kit-toast) {
    height: 100%;
    min-height: 0;
}

/* Постоянное место сообщения об отказе: поверх содержимого и окон, по центру верха
   рабочей области (KIT-52). */
.kit-alert {
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 60;
    max-width: min(34rem, calc(100vw - 32px));
    padding: 10px 14px;
    box-sizing: border-box;
    transform: translateX(-50%);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-danger);
    box-shadow: var(--shadow-raised);
}

/* Признак отказа в теле ответа: кит читает из него текст и в цель запроса не вставляет. */
.kit-refusal {
    color: var(--color-danger);
}

.kit-desktop-only {
    display: none;
}

.kit-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
    width: var(--kit-rail-w);
    height: 100%;
    min-height: 0;
    padding: 8px 4px;
    box-sizing: border-box;
    /* Рейл своё содержимое не обрезает: подсказка нижнего действия выходит за его правый
       край и должна читаться целиком (KIT-44). Радиусы и градиент верха держит сам фон —
       border-radius обрезает его и без overflow, — а переполнение по высоте сдерживает
       колонка разделов: она единственная растёт вместе со списком. */
    overflow: visible;
    border-radius: var(--radius-xl);
    /* Высота подкрашенного верха фиксирована на 30% и по темам не меняется:
       тема меняет только цвет верха. */
    background: linear-gradient(180deg, var(--kit-rail-header) 0%, var(--color-raised) 30%);
    box-shadow: var(--shadow-raised);
}

.kit-rail-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    width: 100%;
    min-height: 0;
    /* Разделов может стать больше, чем помещается в окно: лишние прячет колонка разделов,
       а не рейл целиком — иначе вместе с ними обрезались бы подсказки нижних действий. */
    overflow: hidden;
}

/* Лого = «Главная». До первого пункта — шаг меню 6px плюс вылет бейджа 4px. */
.kit-brand {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    flex: none;
    margin-bottom: 10px;
}

.kit-brand-mark {
    display: block;
}

.kit-brand-plate {
    fill: var(--color-accent);
}

.kit-brand-glyph {
    color: var(--color-inverted);
    fill: currentColor;
}

.kit-brand-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-ink);
}

/* Кружок иконки занимает 19 из 24 единиц вьюбокса, поэтому svg крупнее подложки
   ровно на 24/19 и центрируется поверх неё. Меняешь размер бейджа — пересчитай svg. */
.kit-brand-badge > svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.kit-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    align-self: center;
    width: 56px;
    height: 56px;
    flex: none;
    padding: 0 2px;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-align: center;
    transition: background-color 0.15s, color 0.15s;
}

/* Ховер и текущий пункт окрашены одинаково (KIT-8). */
.kit-rail-item:hover,
.kit-rail-item[aria-current="page"] {
    background: var(--kit-selected);
    color: var(--color-accent);
}

.kit-rail-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.kit-rail-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}

.kit-rail-action:hover {
    background: var(--kit-selected);
    color: var(--color-accent);
}

/* В светлой теме предлагается тёмная и наоборот: знак показывает, куда переключит. */
.kit-theme-light {
    display: none;
}

.kit-dark .kit-theme-light {
    display: inline-flex;
}

.kit-dark .kit-theme-dark {
    display: none;
}

.kit-workspace {
    display: grid;
    gap: var(--kit-gap);
    grid-template-columns: minmax(15rem, var(--kit-context-w)) minmax(30rem, 1fr) minmax(16rem, var(--kit-aside-w));
    height: 100%;
    min-height: 0;
}

.kit-workspace-wide {
    grid-template-columns: minmax(15rem, var(--kit-context-w)) minmax(30rem, 1fr);
}

/* Экран без каталога: колонки под него не бывает вовсе. Пустая колонка каталога съедала бы
   288px рабочего места, а страница её ничем не наполнит — каталога у экрана нет (KIT-10). */
.kit-workspace-no-catalog {
    grid-template-columns: minmax(30rem, 1fr) minmax(16rem, var(--kit-aside-w));
}

.kit-workspace-wide.kit-workspace-no-catalog {
    grid-template-columns: minmax(0, 1fr);
}

.kit-workspace > * {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    border-radius: var(--radius-xl);
    background: var(--color-raised);
    box-shadow: var(--shadow-raised);
}

/* Каталог прокручивается телом списка, а не колонкой целиком. */
.kit-workspace-context {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.kit-workspace-main {
    background: var(--color-surface);
    padding: 20px 24px 32px;
}

.kit-workspace-aside {
    padding: 16px;
}

/* Инспектор со списком (KIT-72): голова стоит, прокручивается тело списка. */
.kit-workspace-aside:has(> .kit-list-head) {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* Рабочая колонка чата — сама панель (KIT-70): без полей снизу, прокручивается лента. */
.kit-workspace-main:has(> .kit-chat-room) {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.kit-panel {
    min-width: 0;
    overflow: auto;
    border-radius: var(--radius-xl);
    background: var(--color-raised);
    box-shadow: var(--shadow-raised);
}

.kit-panel-work {
    background: var(--color-surface);
    padding: 24px;
}

/* ===== Страница входа (KIT-50) ===== */

/* До входа разделов не существует: рейла и рабочей области нет, одна карточка по центру. */
.kit-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 24px;
    box-sizing: border-box;
    background: var(--color-sunken);
}

.kit-login-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 22rem;
    gap: 14px;
    padding: 24px;
    box-sizing: border-box;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-raised);
}

.kit-login-brand {
    display: flex;
    justify-content: center;
}

/* Отбивку марки задаёт карточка: в рейле у неё свой отступ до первого пункта. */
.kit-login-brand .kit-brand {
    margin-bottom: 0;
}

.kit-login-title {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.kit-login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Зазор формы входа задан её компоновкой; отбивка соседних полей формы здесь лишняя. */
.kit-login-form .kit-field + .kit-field {
    margin-top: 0;
}

/* ===== Навигация ===== */

.kit-segment {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-sm);
    background: var(--color-sunken);
}

.kit-segment > a {
    flex: 1;
    padding: 5px 4px;
    border-radius: 8px;
    color: var(--color-muted);
    font-size: 12.5px;
    font-weight: 500;
    text-align: center;
}

.kit-segment > a[aria-current="page"] {
    background: var(--color-surface);
    box-shadow: var(--shadow-selected);
    color: var(--color-ink);
    font-weight: 600;
}

.kit-dark .kit-segment > a[aria-current="page"] {
    background: var(--color-control);
}

.kit-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--color-line);
}

.kit-tabs > a {
    margin-bottom: -1px;
    padding: 7px 12px 9px;
    border-bottom: 2px solid transparent;
    color: var(--color-muted);
    font-size: 13.5px;
    font-weight: 500;
}

.kit-tabs > a[aria-current="page"] {
    border-bottom-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 600;
}

.kit-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
    color: var(--color-muted);
    font-size: 12px;
}

.kit-crumbs a:hover {
    color: var(--color-accent);
}

.kit-object-head {
    margin-bottom: 18px;
}

.kit-object-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.kit-object-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.kit-object-name {
    font-size: 21px;
    font-weight: 700;
}

.kit-object-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kit-object-head .kit-tabs {
    margin-top: 14px;
}

/* ===== Кнопки ===== */

.kit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--kit-control-h);
    min-height: var(--kit-control-h);
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    /* Подпись кнопки не переносится: на узкой колонке перенос ломает ряд действий. */
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.kit-button-neutral {
    border-color: var(--color-line);
    background: var(--color-control);
    color: var(--color-ink);
}

.kit-button-primary {
    background: var(--color-accent);
    color: var(--color-inverted);
}

.kit-button-ghost {
    background: transparent;
    color: var(--color-ink);
}

/* Опасное действие в обеих темах без заливки (KIT-33). */
.kit-button-danger {
    border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-surface));
    background: transparent;
    color: var(--color-danger);
}

/* Ховер одинаков у кнопки, дропдауна и select; поле ввода ховера не имеет (KIT-31). */
.kit-button-neutral:hover:not(:disabled),
.kit-button-ghost:hover:not(:disabled) {
    background: var(--kit-hover);
    border-color: var(--color-line);
}

.kit-button-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-accent) 85%, #000);
}

.kit-button-danger:hover:not(:disabled) {
    border-color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
}

.kit-button-sm {
    height: var(--kit-control-h-sm);
    min-height: var(--kit-control-h-sm);
    padding: 0 9px;
    border-radius: 8px;
    font-size: 12px;
}

.kit-button-square {
    width: var(--kit-control-h);
    padding: 0;
}

.kit-button-sm.kit-button-square {
    width: var(--kit-control-h-sm);
}

.kit-button-block {
    width: 100%;
}

/* Выключенный контрол обязан читаться выключенным: на этом состоянии держатся
   крайние кнопки порядка и запреты по правам (KIT-32). */
.kit-button:disabled,
.kit-button[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.kit-spinner {
    width: 16px;
    height: 16px;
    margin-left: -2px;
    display: none;
    animation: kit-spin 0.8s linear infinite;
}

.kit-spinner-track {
    opacity: 0.3;
}

.kit-button[aria-busy="true"] .kit-spinner {
    display: inline-block;
}

/* Занятая кнопка недоступна, но не бледнеет: цвет тона держится (KIT-36). */
.kit-button[aria-busy="true"] {
    opacity: 1;
    cursor: progress;
}

@keyframes kit-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kit-spinner {
        animation-duration: 2.4s;
    }
}

.kit-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}

.kit-icon-button:hover {
    background: var(--kit-hover);
    color: var(--color-ink);
}

.kit-icon-button-off {
    opacity: 0.4;
    cursor: not-allowed;
}

.kit-icon-button-off:hover {
    background: transparent;
    color: var(--color-muted);
}

/* Действие внутри строки: без рамки и собственных отступов, иначе оно задаёт
   высоту строки (KIT-45). */
.kit-inline-action {
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.kit-inline-action:hover {
    color: var(--color-accent);
}

/* Стрелка порядка — свой контрол ростом с текст строки: кнопка кита задавала бы
   высоту строки дерева. */
.kit-shift {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-muted);
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.kit-shift:hover:not(:disabled) {
    background: var(--color-control);
    color: var(--color-ink);
}

.kit-shift:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.kit-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    margin-top: 24px;
}

@media (min-width: 640px) {
    .kit-actions {
        flex-direction: row-reverse;
        align-items: center;
    }
}

/* ===== Поля ===== */

.kit-field {
    display: block;
}

.kit-field + .kit-field {
    margin-top: 20px;
}

.kit-field-label {
    display: block;
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 600;
}

.kit-field[data-invalid="true"] .kit-field-label {
    color: var(--color-danger);
}

.kit-field-hint {
    margin-top: 6px;
    color: var(--color-muted);
    font-size: 12px;
}

.kit-field-error {
    margin-top: 6px;
    color: var(--color-danger);
    font-size: 12px;
}

/* Ошибка без своего контрола (KIT-58): отступ она берёт сверху сама, потому что стоит не
   внутри поля, а после группы контролов или после списка выбора. */
.kit-field-error-alone {
    margin-bottom: 6px;
}

.kit-control {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-control);
    color: var(--color-ink);
    font: inherit;
    font-size: 13.5px;
    line-height: 1.45;
}

.kit-input,
.kit-select {
    height: var(--kit-control-h);
    min-height: var(--kit-control-h);
    padding: 0 11px;
}

.kit-textarea {
    padding: 8px 11px;
    resize: vertical;
}

/* Плейсхолдер — общий приглушённый цвет обеих тем (KIT-35). */
.kit-control::placeholder {
    color: var(--color-muted);
}

.kit-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.kit-control[aria-invalid="true"] {
    border-color: var(--color-danger);
}

/* Одна стрелка вниз, та же, что у кнопки-дропдауна рядом. */
.kit-select {
    appearance: none;
    padding-inline-end: 30px;
    background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 16px 16px;
    cursor: pointer;
}

.kit-select:hover:not(:disabled) {
    background-color: var(--kit-hover);
}

.kit-dark .kit-select,
.kit-dark .kit-dropdown-button {
    background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='%239aa1aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.kit-input-group {
    position: relative;
    display: block;
}

.kit-input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    pointer-events: none;
}

.kit-input-search {
    padding-inline-start: 32px;
}

.kit-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.kit-checkbox input {
    margin: 2px 0 0;
    accent-color: var(--color-accent);
}

.kit-checkbox-label {
    display: block;
    font-size: 13.5px;
}

.kit-checkbox-description {
    display: block;
    margin-top: 4px;
    color: var(--color-muted);
    font-size: 12px;
}

/* Кружок радио не показываем — выбор читается рамкой и фоном карточки. Поле прячем
   каноничным sr-only, чтобы оно осталось в табуляции и в дереве доступности (KIT-40). */
.kit-radio-card {
    position: relative;
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
}

.kit-radio-card + .kit-radio-card {
    margin-top: 12px;
}

.kit-radio-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.kit-radio-card:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--kit-accent-weak);
}

.kit-radio-card:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.kit-radio-card-title {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
}

.kit-radio-card-description {
    display: block;
    margin-top: 4px;
    color: var(--color-muted);
    font-size: 12px;
}

.kit-upload-label {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
}

.kit-upload-preview {
    display: block;
    height: 96px;
    width: auto;
    margin-bottom: 8px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    object-fit: cover;
}

.kit-upload-input {
    display: block;
    width: 100%;
    font-size: 13px;
}

.kit-upload-state {
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 12px;
}

.kit-upload-error {
    margin-top: 8px;
    color: var(--color-danger);
    font-size: 12px;
}

.kit-upload .kit-button {
    margin-top: 8px;
}

/* Опрос статуса обработки места не занимает: это только атрибуты запроса (KIT-63). */
.kit-upload-poll {
    display: none;
}

/* Прямая загрузка видео провайдеру (KIT-64): поле названия, выбор файла, строка состояния,
   полоса прогресса и место отказа — в том же ритме, что у загрузки изображения. */
.kit-video-upload .kit-input {
    margin-bottom: 8px;
}

.kit-video-upload-input {
    margin-top: 0;
}

.kit-video-upload-progress {
    margin-top: 8px;
}

.kit-video-upload-error:empty {
    display: none;
}

.kit-video-upload-error {
    margin-top: 8px;
}

/* ===== Состояния ===== */

.kit-status {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
}

.kit-status-ok {
    background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface));
    color: color-mix(in srgb, var(--color-success) 75%, var(--color-ink));
}

.kit-status-warn {
    background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface));
    color: color-mix(in srgb, var(--color-warning) 75%, var(--color-ink));
}

.kit-status-bad {
    background: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
    color: color-mix(in srgb, var(--color-danger) 75%, var(--color-ink));
}

.kit-status-info {
    background: var(--kit-accent-weak);
    color: var(--color-accent);
}

.kit-status-quiet {
    background: var(--color-sunken);
    color: var(--color-muted);
}

/* Нейтральная пометка: свойство объекта, а не состояние (KIT-62). Геометрия — как у пилюли
   состояния, цвет — приглушённый, чтобы её не читали как состояние. */
.kit-tag {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 2px 9px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-raised);
    color: var(--color-muted);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
}

.kit-tier {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 1px 8px;
    border-radius: 999px;
    color: var(--color-inverted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.kit-tier[data-tier="1"] {
    background: var(--color-tier-1);
}

.kit-tier[data-tier="2"] {
    background: var(--color-tier-2);
}

.kit-tier[data-tier="3"] {
    background: var(--color-tier-3);
}

.kit-tier[data-tier="4"] {
    background: var(--color-tier-4);
}

/* Там, где пилюль много, сплошная заливка рябит: подложка-тон и цветной текст (KIT-16). */
.kit-tier-muted[data-tier="1"] {
    background: color-mix(in srgb, var(--color-tier-1) 16%, var(--color-surface));
    color: color-mix(in srgb, var(--color-tier-1) 65%, var(--color-ink));
}

.kit-tier-muted[data-tier="2"] {
    background: color-mix(in srgb, var(--color-tier-2) 16%, var(--color-surface));
    color: color-mix(in srgb, var(--color-tier-2) 65%, var(--color-ink));
}

.kit-tier-muted[data-tier="3"] {
    background: color-mix(in srgb, var(--color-tier-3) 16%, var(--color-surface));
    color: color-mix(in srgb, var(--color-tier-3) 65%, var(--color-ink));
}

.kit-tier-muted[data-tier="4"] {
    background: color-mix(in srgb, var(--color-tier-4) 16%, var(--color-surface));
    color: color-mix(in srgb, var(--color-tier-4) 65%, var(--color-ink));
}

.kit-formats {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
}

.kit-format {
    display: inline-flex;
}

.kit-format-on {
    color: var(--color-success);
}

.kit-format-bad {
    color: var(--color-danger);
}

.kit-format-off {
    color: var(--color-muted);
}

/* Онлайн-урок: знак эфира и время начала вместо пяти иконок (KIT-53). Строка времени ниже
   текста урока, поэтому высота строки дерева остаётся прежней (KIT-24). */
.kit-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.kit-live-start {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.kit-format-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 13.5px;
}

.kit-format-chip-on {
    border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-surface));
    background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
}

.kit-format-chip-soon {
    background: var(--color-raised);
    color: var(--color-muted);
}

.kit-format-chip-mark {
    color: var(--color-success);
}

.kit-format-chip-label {
    font-weight: 500;
}

.kit-format-chip-soon-label {
    color: var(--color-muted);
    font-size: 12px;
}

.kit-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-sunken);
}

.kit-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--color-accent);
}

.kit-bar-fill-warning {
    background: var(--color-warning);
}

.kit-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-sunken);
    font-size: 15px;
    font-weight: 600;
}

.kit-avatar-sm {
    width: 30px;
    height: 30px;
    font-size: 11.5px;
}

/* Фотография лежит поверх буквы: не загрузилась — видна буква (KIT-30). */
.kit-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Данные ===== */

.kit-list-head {
    padding: 14px 14px 10px;
}

.kit-list-head h1 {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 700;
}

.kit-list-head .kit-field {
    margin-top: 8px;
}

/* Поле поиска головы списка — высоты мелкой кнопки (KIT-69). */
.kit-list-head .kit-input {
    height: var(--kit-control-h-sm);
    min-height: var(--kit-control-h-sm);
}

/* Заголовок списка и справа его счётчик и действие (KIT-69, KIT-72). */
.kit-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: var(--kit-control-h-sm);
}

.kit-list-title h1 {
    margin: 0;
}

.kit-list-title-end {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kit-list-count {
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.kit-list-body {
    flex: 1;
    min-height: 0;
    padding: 4px 8px 8px;
    overflow-y: auto;
}

.kit-list-foot {
    padding: 8px;
    border-top: 1px solid var(--color-line);
}

/* Подвал-цель без содержимого (KIT-56): страниц нет — нет и черты с полями. */
.kit-list-foot:empty {
    display: none;
}

.kit-list-item {
    display: block;
    width: 100%;
    padding: 11px 12px;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-ink);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s;
}

.kit-list-item + .kit-list-item {
    margin-top: 4px;
}

.kit-list-item:hover {
    background: var(--kit-hover);
}

.kit-list-item[aria-current] {
    background: var(--color-surface);
    box-shadow: 0 0 0 1.5px var(--color-accent), var(--shadow-selected);
}

/* Содержимое строки списка (KIT-55): заголовок с состоянием в одной строке и приглушённые
   строки подробностей под ним. Длинное название обрезается, состояние остаётся видно. */
.kit-list-item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
}

.kit-list-item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Строка человека (KIT-76): кружок, имя и подробности колонкой, пометка зоны справа. */
.kit-person-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Поле поиска справа от заголовка списка (KIT-77): без отступа сверху, узкое. */
.kit-list-title-end .kit-field {
    margin-top: 0;
}

.kit-list-title-end .kit-input {
    width: 220px;
}

.kit-list-item-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--color-muted);
    font-size: 12px;
}

/* Колонка текста внутри строки: занимает свободное место, действия остаются справа. */
.kit-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

/* Действия строки в линию: столбец действий таблицы от них не растягивается (KIT-28, KIT-57).
   Форма вокруг одного действия раскладку не ломает: она отдаёт своё место кнопке. */
.kit-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.kit-row-actions-wrap {
    flex-wrap: wrap;
}

.kit-row-actions > form {
    display: contents;
}

/* Контрол в линии действий сам держит свою ширину. У поля формы ширина 100% от колонки, и
   в ячейке действий она схлопывала select до одних отступов: выбранное значение пропадало
   (KIT-28, KIT-57). Здесь ширину задаёт содержимое, а поле не сжимается соседями. */
.kit-row-actions .kit-field {
    flex: none;
}

.kit-row-actions .kit-control {
    width: auto;
}

/* Нижняя граница на случай короткого списка: даже выбор из «да» и «нет» читается подписью,
   а не одной стрелкой. Выше собственной ширины содержимого она select не растягивает. */
.kit-row-actions .kit-select {
    min-width: 5rem;
}

.kit-rows {
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.kit-rows > * {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    box-sizing: border-box;
    border: 0;
    border-top: 1px solid var(--color-line);
    background: transparent;
    color: inherit;
    text-align: left;
}

.kit-rows > *:first-child {
    border-top: 0;
}

.kit-row-button {
    cursor: pointer;
}

.kit-row-button:hover {
    background: var(--kit-hover);
}

/* Карточки показателей идут рядом и переносятся (KIT-61): столбиком они занимают экран,
   а сетка в ките одна на все экраны. */
.kit-kpi-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.kit-kpi {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.kit-kpi-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.kit-kpi-label {
    color: var(--color-muted);
    font-size: 12px;
}

.kit-kpi-detail {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--color-muted);
}

/* Карточка уровня: пилюля слева, число справа, всё в одну строку. */
.kit-tier-kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.kit-tier-kpi-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.kit-kv {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
}

.kit-kv > dt {
    color: var(--color-muted);
}

.kit-kv > dd {
    font-weight: 600;
    text-align: right;
}

.kit-kv-total {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--color-line);
}

.kit-checklist {
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.kit-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
}

.kit-check-button {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.kit-check-button:hover {
    color: var(--color-accent);
}

.kit-check-mark {
    flex: none;
}

.kit-check-ready {
    color: var(--color-success);
}

.kit-check-missing {
    color: var(--color-warning);
}

.kit-check-pending {
    color: var(--color-muted);
}

.kit-card {
    padding: 14px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.kit-card-raised {
    border: 0;
    background: var(--color-raised);
}

.kit-note {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--color-raised);
    color: var(--color-muted);
    font-size: 12.5px;
}

.kit-note-accent {
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    color: var(--color-ink);
}

.kit-today {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--color-surface));
    border-radius: var(--radius-md);
    background: var(--kit-accent-weak);
}

.kit-today-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-inverted);
}

.kit-section {
    margin-top: 22px;
}

.kit-section:first-child {
    margin-top: 0;
}

.kit-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.kit-section-head h3 {
    font-size: 15px;
    font-weight: 700;
}

.kit-section-hint {
    color: var(--color-muted);
    font-size: 12px;
}

.kit-empty {
    padding: 48px 24px;
    border: 1px dashed var(--color-line);
    border-radius: var(--radius-md);
    text-align: center;
}

.kit-empty-icon {
    display: inline-flex;
    color: var(--color-muted);
}

.kit-empty-title {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 700;
}

.kit-empty-text {
    margin: 8px auto 0;
    max-width: 32rem;
    color: var(--color-muted);
    font-size: 13px;
}

.kit-empty-actions:not(:empty) {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.kit-table-frame {
    overflow-x: auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
}

.kit-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    font-size: 13px;
}

.kit-table th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-raised);
    color: var(--color-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: left;
    text-transform: uppercase;
}

.kit-table td {
    padding: 9px 10px;
    border-top: 1px solid var(--color-line);
}

.kit-table tbody tr {
    cursor: pointer;
}

.kit-table tbody tr:hover td,
.kit-table tbody tr[data-selected="true"] td {
    background: var(--kit-hover);
}

/* Страницы списка: края остаются на месте выключенными, подпись — между ними (KIT-54). */
.kit-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 0;
}

.kit-pager-count {
    color: var(--color-muted);
    font-size: 12px;
}

/* Столбец действий не растягивает таблицу. */
.kit-table-end {
    width: 1%;
    padding-right: 6px;
    text-align: right;
    white-space: nowrap;
}

/* ===== Дерево программы ===== */

.kit-tree {
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.kit-tree-module {
    border-top: 1px solid var(--color-line);
}

.kit-tree-module:first-child {
    border-top: 0;
}

.kit-tree-module-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
}

.kit-tree-module-name {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kit-tree-module-name-muted {
    color: var(--color-muted);
    font-weight: 400;
}

.kit-tree-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 32px;
    color: var(--color-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Действия раздела живут в его строке (KIT-59). Обёртка своего места не занимает, но снимает
   с действий капс подписи: капсом набрана подпись яруса, а не кнопки. */
.kit-tree-section-head {
    display: contents;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

/* Ярус задаёт отступ самой строки: строка целиком — ховер-цель (KIT-24). */
.kit-tree-lesson {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 48px;
}

.kit-tree-lesson:hover {
    background: var(--kit-hover);
}

/* Строка-действие: кнопка сама несёт свою высоту, поэтому отступ строки меньше. */
.kit-tree-lesson-action {
    padding-top: 4px;
    padding-bottom: 4px;
}

.kit-tree-lesson-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.kit-tree-lesson-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kit-tree-spacer {
    flex: 1;
}

/* Плотный вид уровней мастер-класса. Модуль с уроками — единое целое: внешние поля
   задаёт сам блок, строки внутри дают ритм поменьше (KIT-25). */
.kit-tree-compact .kit-tree-module {
    padding: 6px 0;
}

.kit-tree-compact .kit-tree-module-head {
    padding: 4px 16px;
}

.kit-tree-compact .kit-tree-module-name {
    font-size: 13.5px;
}

.kit-tree-compact .kit-tree-lesson {
    padding: 4px 16px 4px 34px;
}

/* ===== Меню и окна ===== */

.kit-dropdown {
    position: relative;
    display: inline-flex;
}

.kit-dropdown-button {
    padding-inline-end: 30px;
    background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9L12 15L18 9' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 16px 16px;
}

.kit-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 240px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-raised);
}

.kit-dark .kit-menu {
    background: var(--color-raised);
}

.kit-menu-end {
    left: auto;
    right: 0;
}

.kit-menu[hidden] {
    display: none;
}

/* Пункт ростом с кнопку-дропдаун: первый пункт повторяет то, что на кнопке. */
.kit-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: var(--kit-control-h);
    min-height: var(--kit-control-h);
    padding: 0 10px;
    box-sizing: border-box;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-ink);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.kit-menu-item:hover {
    background: var(--kit-hover);
}

/* Селектор внутри меню: базовое `.kit-body button { color: inherit }` специфичнее одиночного
   класса и перекрашивало опасный пункт в цвет текста. */
.kit-menu .kit-menu-item-danger {
    color: var(--color-danger);
}

.kit-menu-note {
    padding: 6px 10px;
    color: var(--color-muted);
    font-size: 12.5px;
}

.kit-menu-separator {
    height: 1px;
    margin: 5px -5px;
    border: 0;
    background: var(--color-line);
}

.kit-menu-heading {
    padding: 4px 10px;
    color: var(--color-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.kit-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.kit-modal-overlay {
    position: absolute;
    inset: 0;
    background: var(--kit-scrim);
}

.kit-modal-panel {
    position: relative;
    width: 100%;
    max-width: 32rem;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-raised);
}

.kit-modal-wide .kit-modal-panel {
    max-width: 48rem;
}

/* Крестик показан от 640px: на телефоне окно закрывают кнопка и затемнение (KIT-42). */
.kit-modal-close {
    display: none;
}

@media (min-width: 640px) {
    .kit-modal-close {
        position: absolute;
        top: 14px;
        right: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 0;
        border-radius: var(--radius-xs);
        background: transparent;
        color: var(--color-muted);
        cursor: pointer;
    }

    .kit-modal-close:hover {
        color: var(--color-ink);
    }
}

.kit-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 32px;
}

.kit-modal-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 999px;
    background: var(--color-sunken);
    color: var(--color-muted);
}

.kit-modal-icon-primary {
    background: var(--kit-accent-weak);
    color: var(--color-accent);
}

.kit-modal-icon-danger {
    background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
    color: var(--color-danger);
}

.kit-modal-title {
    font-size: 17px;
    font-weight: 700;
}

.kit-modal-body {
    margin-top: 14px;
}

/* Отбивка панели действий окна отличается от формы страницы: 20px против 24px. */
.kit-modal-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    margin-top: 20px;
}

@media (min-width: 640px) {
    .kit-modal-actions {
        flex-direction: row-reverse;
        align-items: center;
    }
}

.kit-tooltip {
    position: relative;
    display: inline-flex;
}

.kit-tooltip-bubble {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    z-index: 30;
    transform: translateX(-50%);
    display: none;
    width: max-content;
    max-width: 16rem;
    padding: 4px 8px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xs);
    background: var(--color-control);
    color: var(--color-ink);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    pointer-events: none;
}

.kit-tooltip-right .kit-tooltip-bubble {
    bottom: auto;
    top: 50%;
    left: calc(100% + 8px);
    transform: translateY(-50%);
}

.kit-tooltip:hover .kit-tooltip-bubble,
.kit-tooltip:focus-within .kit-tooltip-bubble {
    display: block;
}

/* ===== Выбор из справочника ===== */

/* Высота фиксирована, чтобы окно не прыгало по мере набора, и свой скролл (KIT-41). */
.kit-picker {
    height: 232px;
    overflow-y: auto;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-control);
}

.kit-picker-wrap .kit-field + .kit-picker,
.kit-picker-wrap .kit-field + .kit-picker-list {
    margin-top: 8px;
}

/* Строка ростом с контрол; имя и адрес разного кегля выравниваются по центру,
   а не по базовой линии — иначе пара прижимается к верху строки. */
.kit-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: var(--kit-control-h);
    padding: 0 8px;
    box-sizing: border-box;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 13.5px;
    text-align: start;
    cursor: pointer;
}

.kit-picker-item:hover:not(:disabled),
.kit-picker-item[data-selected="true"] {
    background: var(--kit-hover);
}

/* Уже в потоке: строка неактивна, но читается — это ответ «человек найден». */
.kit-picker-item:disabled {
    color: var(--color-muted);
    cursor: default;
}

.kit-picker-hint {
    padding: 8px;
    color: var(--color-muted);
    font-size: 12.5px;
}

/* ===== Набор из справочника (KIT-73) ===== */

.kit-multipicker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.kit-multipicker .kit-field-label {
    margin: 0;
}

.kit-multipicker-chosen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kit-multipicker-chosen:empty {
    display: none;
}

.kit-multipicker-search .kit-field + .kit-picker {
    margin-top: 8px;
}

.kit-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 28px;
    padding: 0 3px 0 10px;
    box-sizing: border-box;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-raised);
    font-size: 13px;
}

.kit-chip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kit-chip .kit-member-zone {
    min-width: 0;
}

.kit-member-zone:empty {
    display: none;
}

.kit-chip-remove {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}

.kit-chip-remove:hover,
.kit-chip-remove:focus-visible {
    background: var(--kit-hover);
    color: var(--color-ink);
}

/* Строка набора в две строки текста; действие — плюс справа, а не нажатие строки. */
.kit-multipicker-item {
    height: auto;
    min-height: var(--kit-control-h);
    padding: 4px 4px 4px 8px;
    cursor: default;
}

.kit-multipicker-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.kit-multipicker-item .kit-list-item-title {
    justify-content: flex-start;
}

/* ===== Сообщение об исходе действия (KIT-74) ===== */

.kit-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 59;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(34rem, calc(100vw - 32px));
    padding: 8px 8px 8px 14px;
    box-sizing: border-box;
    transform: translateX(-50%);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-raised);
    color: var(--color-ink);
    box-shadow: var(--shadow-raised);
    font-size: 13.5px;
}

.kit-toast-close {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}

.kit-toast-close:hover,
.kit-toast-close:focus-visible {
    background: var(--kit-hover);
    color: var(--color-ink);
}

/* ===== Выбор значения в окне (KIT-68) ===== */

.kit-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.kit-choice legend {
    padding: 0;
}

.kit-choice-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Вариант повторяет карточку выбора (KIT-40): кружок скрыт, выбор читается рамкой и фоном
   акцента, фокус — кольцом на варианте. Высота — как у контрола строки (KIT-31). */
.kit-choice-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--kit-control-h);
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-control);
    font-size: 13px;
    cursor: pointer;
}

.kit-choice-option:hover {
    background: var(--kit-hover);
}

.kit-choice-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.kit-choice-option:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--kit-accent-weak);
    color: var(--color-accent);
    font-weight: 600;
}

.kit-choice-option:has(input:focus-visible) {
    outline: 2px solid var(--kit-focus-ring);
    outline-offset: 0;
}

/* Форма окна с запросом: поля и действия идут колонкой, отбивка действий та же, что у окна. */
.kit-modal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kit-modal-form > .kit-modal-actions {
    margin-top: 6px;
}

/* ===== Лента чата (KIT-65…KIT-67) ===== */

/* Вид повторяет чат фронта студента: чужие сообщения слева на приподнятом фоне с рамкой,
   свои — справа акцентом; кружок и имя один раз на группу. */
.kit-chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

/* Своя прокрутка: лента открывается у последнего сообщения, страница вокруг стоит. */
.kit-chat-scroll {
    max-height: clamp(20rem, 62vh, 44rem);
    overflow-y: auto;
    padding: 12px 14px;
}

/* ===== Комната чата (KIT-70) ===== */

.kit-chat-room {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.kit-chat-room-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px 12px;
    border-bottom: 1px solid var(--color-line);
}

.kit-chat-room-title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kit-chat-room .kit-chat {
    flex: 1;
    border: 0;
    border-radius: 0;
}

.kit-chat-room .kit-chat-scroll {
    flex: 1;
    max-height: none;
    padding: 12px 24px;
}

.kit-chat-scroll:focus-visible {
    outline-offset: -2px;
}

.kit-chat-older {
    display: flex;
    justify-content: center;
}

.kit-chat-older:not(:empty) {
    margin-bottom: 8px;
}

.kit-chat-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kit-chat-empty {
    padding: 28px 0;
    color: var(--color-muted);
    text-align: center;
}

.kit-chat-list:has(.kit-chat-message) + .kit-chat-empty {
    display: none;
}

/* Строка держит меню сообщения: оно раскрывается по ширине строки, а не кнопки, и не
   уходит за край прокрутки. */
.kit-chat-message {
    position: relative;
    margin-top: 2px;
}

.kit-chat-message[data-group-start="true"] {
    margin-top: 12px;
}

.kit-chat-list > .kit-chat-message:first-child {
    margin-top: 0;
}

/* Разделитель дня и голова группы есть у каждой строки; показывает их признак строки. */
.kit-chat-day {
    display: none;
    justify-content: center;
    padding: 6px 0 10px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 600;
}

.kit-chat-message[data-day-start="true"] > .kit-chat-day {
    display: flex;
}

.kit-chat-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-right: 48px;
}

.kit-chat-message[data-own="true"] .kit-chat-row {
    flex-direction: row-reverse;
    padding-right: 0;
    padding-left: 48px;
}

/* Колонка кружка стоит у всей группы, кружок виден у её первого сообщения. */
.kit-chat-avatar {
    display: flex;
    width: 30px;
    flex: none;
    margin-top: 1px;
    visibility: hidden;
}

.kit-chat-message[data-group-start="true"] .kit-chat-avatar {
    visibility: visible;
}

.kit-chat-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
}

.kit-chat-message[data-own="true"] .kit-chat-content {
    align-items: flex-end;
}

.kit-chat-author {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 600;
}

.kit-chat-message[data-group-start="true"] .kit-chat-author {
    display: flex;
}

.kit-chat-zone {
    padding: 0 5px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    font-size: 10.5px;
    line-height: 1.5;
}

.kit-chat-line {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

/* Значки действий стоят справа от пузыря и у своих сообщений (KIT-66). */
.kit-chat-message[data-own="true"] .kit-chat-line {
    justify-content: flex-end;
}

.kit-chat-bubble {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    max-width: min(100%, 30rem);
    padding: 6px 10px;
    box-sizing: border-box;
    border: 1px solid var(--color-line);
    border-radius: 4px 14px 14px 14px;
    background: var(--color-raised);
    font-size: 13.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.kit-chat-message[data-own="true"] .kit-chat-bubble {
    border-color: transparent;
    border-radius: 14px 4px 14px 14px;
    background: var(--color-accent);
    color: var(--color-inverted);
}

/* Удалённое: пузырь без содержимого, приглушённый и без заливки в обеих сторонах. */
.kit-chat-message .kit-chat-bubble-deleted,
.kit-chat-message[data-own="true"] .kit-chat-bubble-deleted {
    border: 1px dashed var(--color-line);
    background: transparent;
    color: var(--color-muted);
}

.kit-chat-deleted {
    font-style: italic;
}

/* Текст удалённого сообщения — только в админке (ADM-74): читается, но отделён от живых. */
.kit-chat-removed {
    padding: 2px 0 2px 8px;
    border-left: 2px solid var(--color-line);
    color: var(--color-muted);
    white-space: pre-wrap;
}

.kit-chat-removed-image {
    padding: 2px 0 2px 8px;
    border-left: 2px solid var(--color-line);
}

/* Текст и подвал в одной строке с переносом: короткое сообщение держит время справа от
   текста, длинное уводит его на свою строку. */
.kit-chat-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 2px 10px;
    min-width: 0;
}

.kit-chat-text {
    min-width: 0;
    max-width: 100%;
    white-space: pre-wrap;
}

.kit-chat-mention {
    color: var(--color-accent);
    font-weight: 600;
}

.kit-chat-message[data-own="true"] .kit-chat-mention {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kit-chat-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 8px;
    margin-left: auto;
}

.kit-chat-meta {
    display: inline-flex;
    gap: 4px;
    color: var(--color-muted);
    font-size: 11.5px;
    line-height: 1.4;
    white-space: nowrap;
}

.kit-chat-message[data-own="true"] .kit-chat-meta {
    color: color-mix(in srgb, var(--color-inverted) 75%, transparent);
}

.kit-chat-message[data-own="true"] .kit-chat-bubble-deleted .kit-chat-meta {
    color: var(--color-muted);
}

.kit-chat-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kit-chat-reaction {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--kit-accent-weak);
    color: var(--color-accent);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* Своя реакция выделена рамкой (ADM-64). */
.kit-chat-reaction[aria-pressed="true"] {
    border-color: var(--color-accent);
}

.kit-chat-reaction-emoji {
    font-size: 14px;
    line-height: 1.3;
}

.kit-chat-message[data-own="true"] .kit-chat-reaction {
    background: color-mix(in srgb, var(--color-inverted) 20%, transparent);
    color: var(--color-inverted);
}

.kit-chat-message[data-own="true"] .kit-chat-reaction[aria-pressed="true"] {
    border-color: var(--color-inverted);
}

/* Цитата родителя: автор акцентом и одна строка текста под ним. */
.kit-chat-reply {
    min-width: 0;
    max-width: 100%;
    padding: 3px 8px;
    box-sizing: border-box;
    border-left: 3px solid var(--color-accent);
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    font-size: 12px;
}

.kit-chat-reply-author {
    overflow: hidden;
    color: var(--color-accent);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kit-chat-reply-text {
    overflow: hidden;
    color: var(--color-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kit-chat-message[data-own="true"] .kit-chat-reply {
    border-left-color: color-mix(in srgb, var(--color-inverted) 70%, transparent);
    background: color-mix(in srgb, var(--color-inverted) 15%, transparent);
}

.kit-chat-message[data-own="true"] .kit-chat-reply-author,
.kit-chat-message[data-own="true"] .kit-chat-reply-text {
    color: var(--color-inverted);
}

/* Место под картинку задают её размеры атрибутами: лента не прыгает при загрузке. */
.kit-chat-image {
    display: block;
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: var(--color-sunken);
}

.kit-chat-image img {
    display: block;
    width: 22rem;
    max-width: 100%;
    height: auto;
}

a.kit-chat-image {
    cursor: zoom-in;
}

/* Значки действий видны всегда, без наведения (KIT-66). */
.kit-chat-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
}

.kit-chat-actions .kit-icon-button[data-danger="true"]:hover {
    color: var(--color-danger);
}

/* ===== Контекстное меню (KIT-66, KIT-72) ===== */

.kit-context-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    min-width: 220px;
}

.kit-context-reactions {
    display: flex;
    gap: 2px;
    margin: -5px -5px 5px;
    padding: 5px;
    border-bottom: 1px solid var(--color-line);
}

.kit-context-reaction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.kit-context-reaction:hover,
.kit-context-reaction:focus-visible {
    background: var(--kit-hover);
}

.kit-context-reaction[aria-pressed="true"] {
    background: var(--kit-accent-weak);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.kit-context-menu .kit-menu-item[hidden] {
    display: none;
}

/* Строка обрыва живой ленты: модератор видит, что новые сообщения сейчас не приходят. */
.kit-chat-offline {
    padding: 7px 14px;
    border-top: 1px solid var(--color-line);
    color: var(--color-warning);
    font-size: 12.5px;
}

.kit-chat-offline[hidden] {
    display: none;
}

/* ===== Адаптив (KIT-10) ===== */

@media (max-width: 1024px) {
    .kit-workspace {
        grid-template-columns: minmax(15rem, var(--kit-context-w)) minmax(0, 1fr);
    }

    /* Инспектора здесь уже нет, каталога не было: остаётся одна рабочая колонка. */
    .kit-workspace-no-catalog {
        grid-template-columns: minmax(0, 1fr);
    }

    .kit-workspace-aside {
        display: none;
    }
}

@media (max-width: 767px) {
    .kit-shell {
        display: block;
        height: auto;
        padding: 0;
        overflow: visible;
    }

    .kit-rail {
        display: none;
    }

    .kit-shell-content > *:not(.kit-desktop-only) {
        display: none;
    }

    .kit-desktop-only {
        display: block;
        min-height: 100dvh;
        padding: 20px;
        background: var(--color-sunken);
    }
}

/* ===== Композер (KIT-71) ===== */

.kit-chat-composer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 24px 16px;
    border-top: 1px solid var(--color-line);
}

.kit-chat-composer-mode {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border-left: 3px solid var(--color-accent);
    border-radius: 4px;
    background: var(--kit-accent-weak);
}

.kit-chat-composer-mode[hidden],
.kit-chat-composer-attachment[hidden],
.kit-chat-composer-mode-icon[hidden],
.kit-chat-composer-attach[hidden] {
    display: none;
}

.kit-chat-composer-mode-icon {
    display: inline-flex;
    color: var(--color-accent);
}

.kit-chat-composer-mode-text {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
}

.kit-chat-composer-mode-label {
    color: var(--color-accent);
    font-weight: 600;
}

.kit-chat-composer-mode-quote {
    overflow: hidden;
    color: var(--color-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kit-chat-composer-attachment {
    position: relative;
    align-self: flex-start;
}

.kit-chat-composer-attachment img {
    display: block;
    max-width: 160px;
    max-height: 120px;
    border-radius: 10px;
    background: var(--color-sunken);
}

.kit-chat-composer-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
}

.kit-chat-composer-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.kit-chat-composer-attach {
    position: relative;
    width: var(--kit-control-h);
    height: var(--kit-control-h);
    border-radius: var(--radius-sm);
}

.kit-chat-composer-attach:focus-within {
    outline: 2px solid var(--kit-focus-ring);
}

/* Поле выбора файла спрятано под скрепкой, но остаётся в табуляции и в дереве доступности. */
.kit-chat-composer-file {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.kit-chat-composer-input {
    flex: 1;
    min-height: var(--kit-control-h);
    max-height: 10rem;
    padding: 7px 11px;
    overflow-y: auto;
    resize: none;
}

.kit-chat-composer-error:empty {
    display: none;
}

.kit-chat-composer[aria-busy="true"] .kit-chat-composer-attachment img {
    opacity: 0.6;
}

/* ===== Список участников (KIT-72) ===== */

.kit-members {
    padding-top: 0;
}

.kit-member {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px 6px;
    border-radius: var(--radius-xs);
}

.kit-member[data-context-row] {
    cursor: context-menu;
}

.kit-member:hover,
.kit-member:focus-visible {
    background: var(--kit-hover);
}

.kit-member-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kit-member-marks {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
}

.kit-member-mark {
    display: inline-flex;
    color: var(--color-warning);
}

.kit-member-mark-ban {
    color: var(--color-danger);
}

.kit-member-zone {
    min-width: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: right;
}

.kit-member-zone[data-zone="eu"] {
    color: var(--color-zone-eu);
}

.kit-member-zone[data-zone="ru"] {
    color: var(--color-zone-ru);
}

/* Флажок с вложенными контролами (KIT-68): без отметки они скрыты. */
.kit-reveal-body {
    margin-top: 10px;
}

.kit-reveal:not(:has(> .kit-checkbox input:checked)) > .kit-reveal-body {
    display: none;
}