/* Полимон CRM — единый стандарт оформления, версия 1 (15.10.2026).
   Витрина всех элементов: /Manager/ui_kit (только root). Правила — CLAUDE.md в корне репозитория.
   Все классы с префиксом ui-, состояния — is-*. Цвета только через переменные ниже:
   организация подменяет блок «Фирменные», статусы и нейтральные не меняются.
   Новый элемент сначала добавляется сюда и на витрину, потом используется на страницах. */

:root {
    /* Фирменные — их меняет организация */
    --ui-brand: #129E00;            /* главная кнопка, активные элементы */
    --ui-brand-hover: #0E8A00;
    --ui-brand-active: #0B7300;
    --ui-brand-soft: #F0F9D5;       /* подложка: переходы, активный пункт меню, выбранная строка */
    --ui-brand-soft-hover: #E3F4C8; /* переход при наведении */
    --ui-brand-text: #0E7C00;       /* ссылки и цветной текст на белом и на подложке */
    --ui-on-brand: #FFFFFF;         /* текст на главной кнопке */
    --ui-focus: rgba(18, 158, 0, .28);

    /* Статусы — одинаковые во всех организациях */
    --ui-success: #129E00;
    --ui-success-soft: #EAF6E2;
    --ui-success-text: #0B6B00;
    --ui-success-line: #CBE8B9;
    --ui-success-strong: #0E8A00;   /* заливка зелёного счётчика: белая цифра читается */
    --ui-danger: #D92D20;
    --ui-danger-hover: #B42318;
    --ui-danger-soft: #FDECEC;
    --ui-danger-text: #B42318;
    --ui-danger-line: #F6C8C5;
    --ui-warning: #F0A500;
    --ui-warning-soft: #FFF3DD;
    --ui-warning-text: #8A5A00;
    --ui-warning-line: #F5DCAB;
    --ui-on-warning: #3D2A00;       /* тёмная цифра на оранжевом счётчике */
    --ui-info: #2E6FD8;
    --ui-info-soft: #E8F1FD;
    --ui-info-text: #1D5FD1;
    --ui-info-line: #C9DCF7;

    /* Шкала этапов — статусы предметов заявки (воронка): от светло-зелёного «новая» через «записан» и «посетил»
       к тёмно-зелёному «записался»; ожидание и неявка — жёлтый, «не записался» — красный, отмена — бордовый,
       «на следующий год» — серый. Не бренд: у всех организаций одинаковая */
    --ui-stage-1: #A4DB00; --ui-stage-1-soft: #F2F9DC; --ui-stage-1-text: #4D6A00; --ui-stage-1-line: #DCEFA3;
    --ui-stage-2: #66C133; --ui-stage-2-soft: #E8F6E0; --ui-stage-2-text: #2F6E14; --ui-stage-2-line: #C5E6B2;
    --ui-stage-3: #129E00; --ui-stage-3-soft: #DFF2DB; --ui-stage-3-text: #0B6B00; --ui-stage-3-line: #B7E0AE;
    --ui-stage-4: #054B13; --ui-stage-4-soft: #D6E4D9; --ui-stage-4-text: #054B13; --ui-stage-4-line: #A9C6AF;
    --ui-stage-wait: #F0A500; --ui-stage-wait-soft: #FFF3DD; --ui-stage-wait-text: #8A5A00; --ui-stage-wait-line: #F5DCAB;
    --ui-stage-lost: #FF2F2F; --ui-stage-lost-soft: #FFE4E4; --ui-stage-lost-text: #C21B1B; --ui-stage-lost-line: #FBC0C0;
    --ui-stage-cancel: #B40909; --ui-stage-cancel-soft: #F5DADA; --ui-stage-cancel-text: #8E0707; --ui-stage-cancel-line: #E3AAAA;
    --ui-stage-off: #797979; --ui-stage-off-soft: #EFEFEF; --ui-stage-off-text: #555555; --ui-stage-off-line: #D6D6D6;

    /* Нейтральные */
    --ui-text: #424141;
    --ui-text-muted: #737373;
    --ui-text-faint: #A3A3A3;
    --ui-border: #C4C4C4;           /* рамки полей и второстепенных кнопок */
    --ui-border-hover: #A3A3A3;
    --ui-line: #E3E3E3;             /* рамки карточек и таблиц, разделители */
    --ui-bg: #F7F7F7;               /* подложка страницы и меню */
    --ui-surface: #FFFFFF;
    --ui-surface-alt: #FAFAFA;      /* шапка таблицы, подвал окна, строка при наведении */
    --ui-on-color: #FFFFFF;         /* текст на цветной заливке: красная кнопка, счётчик, подсказка */
    --ui-hover: #F3F3F3;
    --ui-muted-soft: #EFEFEF;       /* серая метка, дорожка прогресса */
    --ui-disabled-bg: #F2F2F2;
    --ui-disabled-text: #A3A3A3;
    --ui-tooltip-bg: #2B2B2B;       /* подсказка при наведении */

    /* Типы занятий и работ — постоянные цвета, от организации не зависят */
    --ui-type-lesson: #129E00;     --ui-type-lesson-soft: #EBF7E9;     --ui-type-lesson-text: #0B6B00;
    --ui-type-extra: #FF8000;      --ui-type-extra-soft: #FDEEE0;      --ui-type-extra-text: #9A5100;
    --ui-type-free: #7C6BD6;       --ui-type-free-soft: #F0EAFA;       --ui-type-free-text: #5F4BC4;
    --ui-type-exam: #2E6FD8;       --ui-type-exam-soft: #E4EFFA;       --ui-type-exam-text: #1B5FBF;
    --ui-type-admin: #E0AE00;      --ui-type-admin-soft: #FFF6DA;      --ui-type-admin-text: #7A5C00;
    --ui-type-other: #A3A3A3;      --ui-type-other-soft: #F1F1F1;      --ui-type-other-text: #5E5E5E;
    --ui-type-home: #3A9A2A;       --ui-type-home-soft: #E5F3DE;       --ui-type-home-text: #1E6B12;
    --ui-type-class: #2E6FD8;      --ui-type-class-soft: #E3EEFB;      --ui-type-class-text: #1D4F8C;
    --ui-type-addwork: #8A4FD0;    --ui-type-addwork-soft: #F1E8FA;    --ui-type-addwork-text: #5B2E8A;
    --ui-type-online: #E07B00;     --ui-type-online-soft: #FFF0DC;     --ui-type-online-text: #8A4B00;

    /* Графики: первая серия — цвет организации, дальше постоянные */
    --ui-chart-1: var(--ui-brand);
    --ui-chart-2: #2E6FD8;
    --ui-chart-3: #E07B00;
    --ui-chart-4: #7C6BD6;
    --ui-chart-5: #0E9AA7;
    --ui-chart-6: #A3A3A3;

    /* Размеры и шрифт */
    --ui-font: 'Open Sans', 'Segoe UI', Arial, sans-serif;
    --ui-fs: 14px;
    --ui-fs-sm: 13px;
    --ui-fs-xs: 12px;
    --ui-radius: 8px;
    --ui-radius-lg: 12px;
    --ui-radius-pill: 999px;
    --ui-h: 38px;
    --ui-h-sm: 32px;
    --ui-overlay: rgba(30, 30, 30, .45); /* затемнение под окном */
    --ui-lightbox-bg: rgba(20, 20, 20, .9); /* затемнение под увеличенной картинкой */
    --ui-shadow-pop: 0 10px 30px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .06);
    --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);      /* выбранный сегмент */
    --ui-shadow-knob: 0 1px 2px rgba(0, 0, 0, .2);     /* ручка переключателя */
    --ui-danger-focus: rgba(217, 45, 32, .25);         /* обводка фокуса: опасная кнопка, поле с ошибкой */

    /* Редактор кода ui-code: тёмный, как в CodeLab (тема Monaco codelab-dark) */
    --ui-code-bg: #1B1B1F;
    --ui-code-line: #34343B;
    --ui-code-text: #E4E4E7;
    --ui-code-muted: #9A9AA3;
    --ui-code-error: #FF8A80;
}

/* Атрибут hidden прячет всегда: без этого утилиты Bootstrap (d-flex, d-grid… с !important) его перебивают
   и спрятанный блок остаётся на экране. Прячет и data-ui-filter */
[hidden] { display: none !important; }

/* ---------- Текст ---------- */

.ui-page-title { margin: 0; font: 600 26px/1.25 var(--ui-font); color: var(--ui-text); text-wrap: balance; }
.ui-section-title { margin: 0; font: 600 18px/1.35 var(--ui-font); color: var(--ui-text); }
/* .ui-muted и цветной текст .ui-text-* — в конце файла: они должны перекрывать цвет любого элемента */
.ui-small { font-size: var(--ui-fs-sm); }
.ui-num { font-variant-numeric: tabular-nums; }
.ui-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ui-link, .ui-link:visited { color: var(--ui-brand-text); font-weight: 600; text-decoration: none; }
.ui-link:hover, .ui-link:focus { color: var(--ui-brand-text); text-decoration: underline; text-underline-offset: 2px; }
/* Название объекта в строке таблицы или списка (группа, занятие, работа): тёмное, при наведении — цвет организации.
   Цветная ui-link — для ссылок внутри текста */
.ui-title-link, .ui-title-link:visited { color: var(--ui-text); font-weight: 600; text-decoration: none; }
.ui-title-link:hover, .ui-title-link:focus { color: var(--ui-brand-text); text-decoration: underline; text-underline-offset: 2px; }

.ui-back, .ui-back:visited { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-text-muted); font: 600 var(--ui-fs-sm) var(--ui-font); text-decoration: none; }
.ui-back:hover, .ui-back:focus { color: var(--ui-brand-text); text-decoration: none; }

/* ---------- Кнопки ---------- */
/* Размер один на все виды: 38 px обычная, 32 px маленькая, отступы 16 / 12. Вид меняет только цвет.
   Ширина и цвет повторены во всех состояниях: иначе старые правила :hover/:focus перебивают. */

.ui-btn, .ui-btn:hover, .ui-btn:focus, .ui-btn:active {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box; width: auto; height: var(--ui-h); padding: 0 16px; margin: 0;
    border: 1px solid transparent; border-radius: var(--ui-radius);
    font: 600 var(--ui-fs)/1 var(--ui-font); white-space: nowrap; text-decoration: none;
    vertical-align: middle; cursor: pointer; user-select: none; outline: none;
}
.ui-btn { transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s; }
.ui-btn:focus-visible { box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-btn svg, .ui-btn i { flex: none; }

.ui-btn-primary, .ui-btn-primary:visited, .ui-btn-primary:focus { background: var(--ui-brand); border-color: var(--ui-brand); color: var(--ui-on-brand); }
.ui-btn-primary:hover { background: var(--ui-brand-hover); border-color: var(--ui-brand-hover); color: var(--ui-on-brand); }
.ui-btn-primary:active { background: var(--ui-brand-active); border-color: var(--ui-brand-active); color: var(--ui-on-brand); }

.ui-btn-secondary, .ui-btn-secondary:visited, .ui-btn-secondary:focus { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text); }
.ui-btn-secondary:hover { background: var(--ui-hover); border-color: var(--ui-border-hover); color: var(--ui-text); }
.ui-btn-secondary:active { background: var(--ui-muted-soft); border-color: var(--ui-border-hover); color: var(--ui-text); }

/* Заметная: важное, но не главное. Белая с рамкой и текстом цвета организации. */
.ui-btn-outline, .ui-btn-outline:visited, .ui-btn-outline:focus { background: var(--ui-surface); border-color: var(--ui-brand); color: var(--ui-brand-text); }
.ui-btn-outline:hover, .ui-btn-outline:active { background: var(--ui-brand-soft); border-color: var(--ui-brand); color: var(--ui-brand-text); }

.ui-btn-danger, .ui-btn-danger:visited, .ui-btn-danger:focus { background: var(--ui-danger); border-color: var(--ui-danger); color: var(--ui-on-color); }
.ui-btn-danger:hover, .ui-btn-danger:active { background: var(--ui-danger-hover); border-color: var(--ui-danger-hover); color: var(--ui-on-color); }
.ui-btn-danger:focus-visible { box-shadow: 0 0 0 3px var(--ui-danger-focus); }

.ui-btn-ghost, .ui-btn-ghost:visited, .ui-btn-ghost:focus { background: transparent; border-color: transparent; color: var(--ui-brand-text); }
.ui-btn-ghost:hover, .ui-btn-ghost:active { background: var(--ui-brand-soft); border-color: transparent; color: var(--ui-brand-text); }

.ui-btn-icon, .ui-btn-icon:visited, .ui-btn-icon:focus { width: var(--ui-h); padding: 0; background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text-muted); }
.ui-btn-icon:hover, .ui-btn-icon:active { width: var(--ui-h); padding: 0; background: var(--ui-hover); border-color: var(--ui-border-hover); color: var(--ui-text); }
.ui-btn-icon.is-danger:hover, .ui-btn-icon.is-danger:active { background: var(--ui-danger-soft); border-color: var(--ui-danger-line); color: var(--ui-danger-text); }
/* действие «сделать» в строке (проверить работу): зелёная иконка, при наведении — зелёная подложка */
.ui-btn-icon.is-success, .ui-btn-icon.is-success:focus { color: var(--ui-success-text); }
.ui-btn-icon.is-success:hover, .ui-btn-icon.is-success:active { background: var(--ui-success-soft); border-color: var(--ui-success-line); color: var(--ui-success-text); }

/* Переход: ведёт посмотреть другую страницу. Всегда <a>, текст — существительное, стрелка справа ставится сама. */
.ui-btn-nav, .ui-btn-nav:visited, .ui-btn-nav:focus { background: var(--ui-brand-soft); border-color: transparent; color: var(--ui-brand-text); }
.ui-btn-nav:hover, .ui-btn-nav:active { background: var(--ui-brand-soft-hover); border-color: transparent; color: var(--ui-brand-text); }
.ui-btn-nav::after {
    content: ""; flex: none; width: 7px; height: 12px; margin-left: 2px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .12s;
}
.ui-btn-nav:hover::after { transform: translateX(2px); }
.ui-btn-nav.ui-btn-sm::after { width: 6px; height: 10px; }
.ui-btn-nav.ui-btn-block, .ui-btn-nav.ui-btn-block:hover, .ui-btn-nav.ui-btn-block:focus { justify-content: flex-start; }
.ui-btn-nav.ui-btn-block::after { margin-left: auto; }

.ui-btn-sm, .ui-btn-sm:hover, .ui-btn-sm:focus, .ui-btn-sm:active { height: var(--ui-h-sm); padding: 0 12px; font-size: var(--ui-fs-sm); gap: 6px; }
.ui-btn-icon.ui-btn-sm, .ui-btn-icon.ui-btn-sm:hover, .ui-btn-icon.ui-btn-sm:focus, .ui-btn-icon.ui-btn-sm:active { width: var(--ui-h-sm); padding: 0; }

.ui-btn-block, .ui-btn-block:hover, .ui-btn-block:focus, .ui-btn-block:active { display: flex; width: 100%; }

.ui-btn:disabled, .ui-btn.is-disabled, .ui-btn:disabled:hover, .ui-btn.is-disabled:hover {
    background: var(--ui-disabled-bg); border-color: var(--ui-disabled-bg); color: var(--ui-disabled-text);
    cursor: not-allowed; box-shadow: none;
}
.ui-btn-ghost:disabled, .ui-btn-ghost.is-disabled { background: transparent; border-color: transparent; }

.ui-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ui-btn.is-loading::after {
    content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid currentColor; border-color: var(--ui-on-brand) var(--ui-on-brand) var(--ui-on-brand) transparent;
    animation: ui-spin .7s linear infinite;
}
.ui-btn-secondary.is-loading::after, .ui-btn-ghost.is-loading::after { border-color: var(--ui-text-muted) var(--ui-text-muted) var(--ui-text-muted) transparent; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

.ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-actions-end { justify-content: flex-end; }
/* меню «…» рядом с кнопками: style.css растягивает .dropdown на всю ширину, и кнопка меню уезжала на новую строку */
.ui-actions > .dropdown, .ui-toolbar > .dropdown, .ui-card-head > .dropdown { width: auto; }

/* ---------- Поля формы ---------- */

.ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-label { font: 600 var(--ui-fs-sm)/1.3 var(--ui-font); color: var(--ui-text); }
.ui-req { color: var(--ui-danger-text); margin-left: 2px; }
.ui-hint { font: 400 var(--ui-fs-xs)/1.45 var(--ui-font); color: var(--ui-text-muted); }
.ui-error { display: none; align-items: flex-start; gap: 6px; font: 400 var(--ui-fs-xs)/1.45 var(--ui-font); color: var(--ui-danger-text); }
.ui-field.is-invalid .ui-error { display: flex; }

.ui-input {
    box-sizing: border-box; width: 100%; height: var(--ui-h); padding: 0 12px; margin: 0;
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
    font: 400 var(--ui-fs)/1.4 var(--ui-font); color: var(--ui-text);
    transition: border-color .12s, box-shadow .12s; outline: none;
}
.ui-input::placeholder { color: var(--ui-text-faint); opacity: 1; }
.ui-input:hover { border-color: var(--ui-border-hover); }
.ui-input:focus { border-color: var(--ui-brand); box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-input:disabled, .ui-input[readonly] { background: var(--ui-disabled-bg); color: var(--ui-text-muted); border-color: var(--ui-line); cursor: not-allowed; }
textarea.ui-input { height: auto; min-height: 92px; padding: 9px 12px; line-height: 1.5; resize: vertical; }
/* текст абзацами: абзацный отступ — знак табуляции в начале строки (его ставит Enter в поле, см. ui.js), шириной 1,25 см;
   тот же класс на блоке вывода сохраняет переносы и отступы. Целое tab-size — для браузеров без длины */
.ui-paragraphs { white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 8; tab-size: 1.25cm; }
select.ui-input {
    appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23737373' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.ui-field.is-invalid .ui-input, .ui-input.is-invalid { border-color: var(--ui-danger); }
.ui-field.is-invalid .ui-input:focus, .ui-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--ui-danger-focus); }
.ui-input-sm { height: var(--ui-h-sm); font-size: var(--ui-fs-sm); }
/* клетки ответа ученика (таблица, несколько элементов): число колонок — переменная --ui-cols в style,
   клетки сужаются, чтобы строка помещалась на телефоне; is-narrow — по символу в клетке */
.ui-answer-cells { display: grid; grid-template-columns: repeat(var(--ui-cols, 6), minmax(0, 88px)); gap: 6px; }
.ui-answer-cells.is-narrow { grid-template-columns: repeat(var(--ui-cols, 10), minmax(0, 40px)); gap: 4px; }
.ui-answer-cells > .ui-input { padding: 0 4px; text-align: center; }

.ui-input-wrap { position: relative; display: block; }
.ui-input-wrap > .ui-input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ui-text-faint); pointer-events: none; font-size: 13px; }
.ui-input-wrap > .ui-input-icon ~ .ui-input { padding-left: 36px; }
.ui-input-wrap > .ui-input-suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ui-text-muted); pointer-events: none; font-size: var(--ui-fs); }
.ui-input-wrap > .ui-input.has-suffix { padding-right: 34px; }

.ui-check { display: inline-flex; align-items: center; gap: 8px; font: 400 var(--ui-fs)/1.4 var(--ui-font); color: var(--ui-text); cursor: pointer; }
.ui-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ui-brand); cursor: pointer; flex: none; }
.ui-check input:disabled, .ui-check input:disabled + span { cursor: not-allowed; color: var(--ui-disabled-text); }

.ui-switch { display: inline-flex; align-items: center; gap: 10px; font: 400 var(--ui-fs)/1.4 var(--ui-font); color: var(--ui-text); cursor: pointer; }
.ui-switch input {
    appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
    width: 36px; height: 20px; border-radius: var(--ui-radius-pill); background: var(--ui-border);
    cursor: pointer; transition: background-color .15s; outline: none;
}
.ui-switch input::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--ui-surface); box-shadow: var(--ui-shadow-knob); transition: transform .15s;
}
.ui-switch input:checked { background: var(--ui-brand); }
.ui-switch input:checked::after { transform: translateX(16px); }
.ui-switch input:focus-visible { box-shadow: 0 0 0 3px var(--ui-focus); }

.ui-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.ui-form-grid > .ui-span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .ui-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Метки, счётчики, теги ---------- */

.ui-badge {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px;
    border-radius: var(--ui-radius-pill); background: var(--ui-muted-soft); color: var(--ui-text-muted);
    font: 600 var(--ui-fs-xs)/1 var(--ui-font); white-space: nowrap; vertical-align: middle;
}
.ui-badge-success { background: var(--ui-success-soft); color: var(--ui-success-text); }
.ui-badge-danger { background: var(--ui-danger-soft); color: var(--ui-danger-text); }
.ui-badge-warning { background: var(--ui-warning-soft); color: var(--ui-warning-text); }
.ui-badge-info { background: var(--ui-info-soft); color: var(--ui-info-text); }
.ui-badge-brand { background: var(--ui-brand-soft); color: var(--ui-brand-text); }
/* шкала этапов (--ui-stage-*): метка статуса предмета заявки */
.ui-badge-stage-1 { background: var(--ui-stage-1-soft); color: var(--ui-stage-1-text); }
.ui-badge-stage-2 { background: var(--ui-stage-2-soft); color: var(--ui-stage-2-text); }
.ui-badge-stage-3 { background: var(--ui-stage-3-soft); color: var(--ui-stage-3-text); }
.ui-badge-stage-4 { background: var(--ui-stage-4-soft); color: var(--ui-stage-4-text); }
.ui-badge-stage-wait { background: var(--ui-stage-wait-soft); color: var(--ui-stage-wait-text); }
.ui-badge-stage-lost { background: var(--ui-stage-lost-soft); color: var(--ui-stage-lost-text); }
.ui-badge-stage-cancel { background: var(--ui-stage-cancel-soft); color: var(--ui-stage-cancel-text); }
.ui-badge-stage-off { background: var(--ui-stage-off-soft); color: var(--ui-stage-off-text); }
/* метка одной иконкой — кружок того же цвета; смысл — в title (подсказка) и aria-label */
.ui-badge.is-icon { justify-content: center; width: 22px; padding: 0; border-radius: 50%; font-size: 11px; }

.ui-count {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--ui-radius-pill);
    background: var(--ui-danger); color: var(--ui-on-color); font: 600 11px/1 var(--ui-font); font-variant-numeric: tabular-nums;
}
.ui-count-muted { background: var(--ui-muted-soft); color: var(--ui-text-muted); }
.ui-count-warning { background: var(--ui-warning); color: var(--ui-on-warning); }
.ui-count-success { background: var(--ui-success-strong); color: var(--ui-on-color); }

.ui-chip, .ui-chip:hover, .ui-chip:focus {
    display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 30px; padding: 0 12px;
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius-pill); background: var(--ui-surface);
    font: 400 var(--ui-fs-sm)/1 var(--ui-font); color: var(--ui-text); text-decoration: none; cursor: pointer; outline: none;
}
.ui-chip:hover { border-color: var(--ui-border-hover); }
.ui-chip:focus-visible { box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-chip.is-selected { background: var(--ui-brand-soft); border-color: var(--ui-brand); color: var(--ui-brand-text); font-weight: 600; }
.ui-chip:disabled { opacity: .5; cursor: default; border-color: var(--ui-border); }
.ui-chip-x { display: inline-flex; border: 0; padding: 0; background: none; color: inherit; opacity: .7; cursor: pointer; font-size: 12px; }
.ui-chip-x:hover { opacity: 1; }

/* ---------- Плашки ---------- */

.ui-alert {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
    border: 1px solid transparent; border-radius: var(--ui-radius);
    font: 400 var(--ui-fs)/1.5 var(--ui-font); color: var(--ui-text);
}
.ui-alert > .ui-alert-icon { flex: none; margin-top: 2px; }
.ui-alert-body { flex: 1; min-width: 0; }
.ui-alert-title { font-weight: 600; margin: 0 0 2px; }
.ui-alert-info { background: var(--ui-info-soft); border-color: var(--ui-info-line); }
.ui-alert-info .ui-alert-icon, .ui-alert-info .ui-alert-title { color: var(--ui-info-text); }
.ui-alert-success { background: var(--ui-success-soft); border-color: var(--ui-success-line); }
.ui-alert-success .ui-alert-icon, .ui-alert-success .ui-alert-title { color: var(--ui-success-text); }
.ui-alert-warning { background: var(--ui-warning-soft); border-color: var(--ui-warning-line); }
.ui-alert-warning .ui-alert-icon, .ui-alert-warning .ui-alert-title { color: var(--ui-warning-text); }
.ui-alert-danger { background: var(--ui-danger-soft); border-color: var(--ui-danger-line); }
.ui-alert-danger .ui-alert-icon, .ui-alert-danger .ui-alert-title { color: var(--ui-danger-text); }

/* ---------- Вкладки ---------- */

.ui-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--ui-line); overflow-x: auto; scrollbar-width: none; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab, .ui-tab:visited, .ui-tab:focus {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; margin-bottom: -1px;
    border: 0; border-bottom: 2px solid transparent; background: none;
    font: 600 var(--ui-fs)/1.3 var(--ui-font); color: var(--ui-text-muted); text-decoration: none; white-space: nowrap; cursor: pointer; outline: none;
}
.ui-tab:hover { color: var(--ui-text); text-decoration: none; }
/* .active ставит плагин вкладок Bootstrap (data-bs-toggle="tab" + .tab-pane) — выглядит так же, как is-active */
.ui-tab.is-active, .ui-tab.active { color: var(--ui-text); border-bottom-color: var(--ui-brand); }
.ui-tab:focus-visible { box-shadow: 0 2px 0 0 var(--ui-focus); }

/* вкладки и справа свой элемент (переход к другой группе, кнопка): линия вкладок продолжается под ним.
   На телефоне элемент встаёт над вкладками во всю ширину */
.ui-tabs-bar { display: flex; align-items: stretch; }
.ui-tabs-bar > .ui-tabs { flex: 1 1 auto; min-width: 0; }
.ui-tabs-bar-side { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 0 6px 16px; border-bottom: 1px solid var(--ui-line); }
.ui-tabs-bar-side .bootstrap-select.ui-select { width: 260px !important; }
.ui-tabs-bar-side .bootstrap-select.ui-select > .dropdown-menu { min-width: 340px !important; }
@media (max-width: 767.98px) {
    .ui-tabs-bar { flex-wrap: wrap; }
    .ui-tabs-bar > .ui-tabs { flex-basis: 100%; }
    .ui-tabs-bar-side { order: -1; flex: 1 1 100%; padding: 0 0 10px; border-bottom: 0; }
    .ui-tabs-bar-side .bootstrap-select.ui-select { width: 100% !important; }
    .ui-tabs-bar-side .bootstrap-select.ui-select > .dropdown-menu { min-width: 100% !important; }
}

.ui-segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--ui-radius); background: var(--ui-bg); border: 1px solid var(--ui-line); max-width: 100%; overflow-x: auto; }
.ui-segment, .ui-segment:hover, .ui-segment:focus {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border: 0; border-radius: 6px;
    background: transparent; font: 600 var(--ui-fs-sm)/1 var(--ui-font); color: var(--ui-text-muted); white-space: nowrap; cursor: pointer; text-decoration: none; outline: none;
}
.ui-segment:hover { color: var(--ui-text); }
.ui-segment.is-active { background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow-sm), 0 0 0 1px var(--ui-line); }

/* ---------- Карточки и шапка страницы ---------- */

.ui-card { box-sizing: border-box; min-width: 0; padding: 20px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.ui-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.ui-card-title { margin: 0; font: 600 16px/1.35 var(--ui-font); color: var(--ui-text); }
.ui-card-sub { margin: 2px 0 0; font: 400 var(--ui-fs-sm)/1.4 var(--ui-font); color: var(--ui-text-muted); }
/* раздел внутри карточки: черта сверху и отступ (настройки публикации, подвал вопроса анкеты) */
.ui-card-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ui-line); }
/* вложенная карточка: форма правки прямо в строке списка */
.ui-card.is-inset { padding: 14px 16px; background: var(--ui-surface-alt); }
a.ui-card { display: block; color: inherit; text-decoration: none; transition: border-color .12s, box-shadow .12s; }
a.ui-card:hover { border-color: var(--ui-brand); box-shadow: 0 0 0 1px var(--ui-brand); color: inherit; }

/* ряд показателей: сколько влезет по 200 px, на телефоне — столбиком */
.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ui-stat { box-sizing: border-box; min-width: 0; padding: 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.ui-stat-label { font: 400 var(--ui-fs-sm)/1.3 var(--ui-font); color: var(--ui-text-muted); }
.ui-stat-value { margin-top: 6px; font: 600 26px/1.15 var(--ui-font); color: var(--ui-text); font-variant-numeric: tabular-nums; }
.ui-stat-note { margin-top: 4px; font: 400 var(--ui-fs-xs)/1.3 var(--ui-font); color: var(--ui-text-muted); }
.ui-stat-head { display: flex; align-items: center; gap: 10px; }
.ui-stat-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--ui-brand-soft); color: var(--ui-brand-text); font-size: 15px; }
.ui-stat-icon.is-success { background: var(--ui-success-soft); color: var(--ui-success-text); }
.ui-stat-icon.is-warning { background: var(--ui-warning-soft); color: var(--ui-warning-text); }
.ui-stat-icon.is-danger { background: var(--ui-danger-soft); color: var(--ui-danger-text); }
.ui-stat-icon.is-info { background: var(--ui-info-soft); color: var(--ui-info-text); }
/* показатель-кнопка: открывает подробности под собой (aria-expanded); показатель-ссылка — фильтр списка; выбранный — обводка цветом организации */
button.ui-stat, a.ui-stat { display: block; width: 100%; text-align: left; font: inherit; color: inherit; text-decoration: none; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
button.ui-stat:hover, a.ui-stat:hover { border-color: var(--ui-border-hover); color: inherit; text-decoration: none; }
button.ui-stat:focus-visible, a.ui-stat:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-stat.is-active, .ui-stat.is-active:hover { border-color: var(--ui-brand); box-shadow: 0 0 0 1px var(--ui-brand); }

.ui-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 24px; }
.ui-page-head-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-page-sub { margin: 0; font: 400 var(--ui-fs)/1.45 var(--ui-font); color: var(--ui-text-muted); }

/* ---------- Таблица ---------- */

.ui-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.ui-table { width: 100%; border-collapse: collapse; font: 400 var(--ui-fs)/1.4 var(--ui-font); color: var(--ui-text); }
.ui-table th {
    padding: 10px 14px; text-align: left; white-space: nowrap; background: var(--ui-surface-alt);
    font: 600 var(--ui-fs-xs)/1.3 var(--ui-font); color: var(--ui-text-muted); border-bottom: 1px solid var(--ui-line);
}
.ui-table td { padding: 11px 14px; border-bottom: 1px solid var(--ui-line); vertical-align: middle; }
/* в строках по несколько строк текста (контакты, абонементы) — по верху, иначе колонки читаются вразнобой */
.ui-table.is-top td { vertical-align: top; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover td { background: var(--ui-surface-alt); }
.ui-table tbody tr.is-selected td { background: var(--ui-brand-soft); }
.ui-table tbody tr.is-group td { padding-top: 14px; background: var(--ui-surface-alt); font-weight: 600; }
/* граница группы столбцов («Экзамен», «Занятия», «Тесты» …) — у первого столбца группы, и в шапке, и в строках */
.ui-table .is-col-start { border-left: 1px solid var(--ui-line); }
/* строка, которая по нажатию (и с клавиатуры, tabindex="0") открывает подробности */
.ui-table tbody tr.is-clickable { cursor: pointer; }
.ui-table tbody tr.is-clickable:focus-visible { outline: none; }
.ui-table tbody tr.is-clickable:focus-visible td { background: var(--ui-brand-soft); }
.ui-table tr.is-total td { font-weight: 600; background: var(--ui-surface-alt); border-top: 1.5px solid var(--ui-border); }
.ui-table .ui-td-check { width: 1%; padding-right: 0; }
.ui-table .ui-td-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ui-brand); cursor: pointer; vertical-align: middle; }
.ui-sort-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.ui-sort-btn::after { content: "↕"; font-size: 11px; color: var(--ui-text-faint); }
.ui-sort-btn:hover { color: var(--ui-text); }
th[aria-sort="ascending"] .ui-sort-btn, th[aria-sort="descending"] .ui-sort-btn { color: var(--ui-text); }
th[aria-sort="ascending"] .ui-sort-btn::after { content: "↑"; color: var(--ui-brand-text); }
th[aria-sort="descending"] .ui-sort-btn::after { content: "↓"; color: var(--ui-brand-text); }
.ui-table-wrap.is-sticky-head { max-height: var(--ui-table-max-h, 60vh); overflow: auto; }
.ui-table-wrap.is-sticky-head thead th { position: sticky; top: 0; z-index: 2; }
.ui-table .ui-td-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-table .ui-td-actions { text-align: right; white-space: nowrap; width: 1%; padding-top: 4px; padding-bottom: 4px; }
/* Таблица с полями в строках (участники пробника, разового мероприятия): ставится без ui-table-wrap — блок с прокруткой
   обрезал бы меню выпадающих списков. Уже 1200 px строки становятся карточками: подпись поля — из data-label ячейки,
   кнопка удаления строки (ui-td-actions) — в правом верхнем углу карточки */
.ui-table.is-form td { padding: 8px; }
.ui-table.is-form tbody tr:hover td { background: none; }
@media (max-width: 1199px) {
    .ui-table.is-form thead { display: none; }
    .ui-table.is-form, .ui-table.is-form tbody { display: block; }
    .ui-table.is-form tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; margin-bottom: 10px; padding: 12px 52px 12px 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); }
    .ui-table.is-form td { display: block; min-width: 0; padding: 0; border: 0; }
    .ui-table.is-form td:first-child { grid-column: 1 / -1; }
    .ui-table.is-form td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 600 var(--ui-fs-xs)/1.3 var(--ui-font); color: var(--ui-text-muted); }
    .ui-table.is-form td.ui-td-actions { position: absolute; top: 8px; right: 8px; width: auto; padding: 0; }
}
@media (max-width: 575px) { .ui-table.is-form tr { grid-template-columns: minmax(0, 1fr); } }
/* Плотная таблица — небольшая сетка полей или чисел внутри формы (оплата «по таблице» у группы): строки ниже, без подсветки */
.ui-table.is-compact th { padding: 6px 10px; }
.ui-table.is-compact td { padding: 4px 10px; }
.ui-table.is-compact tbody tr:hover td { background: none; }
/* длинный текст как ввели (комментарий преподавателя): переносы строк сохраняются, колонка не сжимается в столбик */
.ui-table .ui-td-text { min-width: 180px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Пустое состояние ---------- */

.ui-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 20px; text-align: center; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.ui-empty-icon { font-size: 26px; color: var(--ui-text-faint); }
.ui-empty-title { margin: 4px 0 0; font: 600 16px/1.35 var(--ui-font); color: var(--ui-text); }
.ui-empty-text { margin: 0 0 8px; max-width: 42ch; font: 400 var(--ui-fs)/1.5 var(--ui-font); color: var(--ui-text-muted); }

/* ---------- Окно (ставится на .modal-content Bootstrap) ---------- */

/* без overflow: hidden — им окно обрезало выпадающие списки (bootstrap-select, меню «…») у своего нижнего края.
   Углы скруглены у самих частей: серый подвал — своим радиусом. Окно с прокруткой (modal-dialog-scrollable) Bootstrap
   по-прежнему обрезает сам: там прокручивается тело */
.ui-modal { border: 0; border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow-pop); }
.ui-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 20px; border-bottom: 1px solid var(--ui-line); }
.ui-modal-title { margin: 0; font: 600 18px/1.35 var(--ui-font); color: var(--ui-text); }
.ui-modal-body { padding: 20px; }
.ui-modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ui-line); border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg); background: var(--ui-surface-alt); }
/* форма внутри окна — колонкой: в modal-dialog-scrollable прокручивается тело, подвал не обрезается */
.modal-content.ui-modal > form { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
/* тело окна с прокруткой: Bootstrap прокручивает только .modal-body, без этого подвал с кнопками уходил за край экрана */
.modal-dialog-scrollable .ui-modal-body { overflow-y: auto; }

/* ---------- Меню ---------- */

.ui-menu { display: flex; flex-direction: column; gap: 2px; }
.ui-menu-item, .ui-menu-item:visited, .ui-menu-item:focus {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: var(--ui-radius);
    font: 400 15px/1.3 var(--ui-font); color: var(--ui-text); text-decoration: none; outline: none;
}
.ui-menu-item > i, .ui-menu-item > svg { width: 18px; text-align: center; color: var(--ui-text-muted); }
.ui-menu-item:hover { background: var(--ui-hover); color: var(--ui-text); text-decoration: none; }
.ui-menu-item.is-active { background: var(--ui-brand-soft); color: var(--ui-brand-text); font-weight: 600; }
.ui-menu-item.is-active > i, .ui-menu-item.is-active > svg { color: var(--ui-brand-text); }
.ui-menu-item > .ui-count { margin-left: auto; }
.ui-menu-item:focus-visible { box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-menu-heading { display: block; margin: 12px 12px 2px; font: 600 11px/1.3 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ui-text-faint); }

/* ---------- Страницы списка и прогресс ---------- */

.ui-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ui-page, .ui-page:visited, .ui-page:focus {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 8px;
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface);
    font: 600 var(--ui-fs-sm)/1 var(--ui-font); color: var(--ui-text); text-decoration: none; cursor: pointer; outline: none;
}
.ui-page:hover { border-color: var(--ui-border-hover); color: var(--ui-text); text-decoration: none; }
.ui-page.is-active { background: var(--ui-brand); border-color: var(--ui-brand); color: var(--ui-on-brand); }
.ui-page.is-disabled { opacity: .45; pointer-events: none; }
.ui-page-gap { padding: 0 4px; color: var(--ui-text-faint); }

.ui-progress { height: 8px; border-radius: var(--ui-radius-pill); background: var(--ui-muted-soft); overflow: hidden; }
.ui-progress-bar { height: 100%; border-radius: inherit; background: var(--ui-brand); }
.ui-progress.is-success .ui-progress-bar { background: var(--ui-success); }
.ui-progress.is-warning .ui-progress-bar { background: var(--ui-warning); }
.ui-progress.is-danger .ui-progress-bar { background: var(--ui-danger); }

/* ---------- Отметки и статусы ---------- */

/* Галочка-метка: выбор в форме («Распечатать», «Видно ученикам»). Отмеченная — в цвет организации.
   Подпись может меняться: <span class="ui-when-on">…</span><span class="ui-when-off">…</span> после input. */
.ui-check-pill {
    display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: var(--ui-h-sm); padding: 0 12px 0 10px; margin: 0;
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius-pill); background: var(--ui-surface);
    font: 600 var(--ui-fs-sm)/1 var(--ui-font); color: var(--ui-text-muted); white-space: nowrap; cursor: pointer; user-select: none;
    transition: background-color .12s, border-color .12s, color .12s;
}
.ui-check-pill:hover { border-color: var(--ui-border-hover); color: var(--ui-text); }
.ui-check-pill input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--ui-brand); cursor: pointer; }
.ui-check-pill:has(input:checked) { background: var(--ui-brand-soft); border-color: var(--ui-brand); color: var(--ui-brand-text); }
.ui-check-pill:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-check-pill:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ui-check-pill input:checked ~ .ui-when-off, .ui-check-pill input:not(:checked) ~ .ui-when-on { display: none; }

/* Кнопка-статус: показывает состояние и меняет его по нажатию. Размер как у кнопок, цвета статусные.
   Без состояния — «не сделано» (пунктир), is-success / is-warning / is-danger — по смыслу. */
.ui-btn-status, .ui-btn-status:visited, .ui-btn-status:focus { background: var(--ui-surface); border: 1px dashed var(--ui-border); color: var(--ui-text-muted); }
.ui-btn-status:hover, .ui-btn-status:active { background: var(--ui-hover); border: 1px dashed var(--ui-border-hover); color: var(--ui-text); }
.ui-btn-status.is-success, .ui-btn-status.is-success:focus { background: var(--ui-success-soft); border: 1px solid var(--ui-success-line); color: var(--ui-success-text); }
.ui-btn-status.is-success:hover, .ui-btn-status.is-success:active { background: var(--ui-success-soft); border: 1px solid var(--ui-success); color: var(--ui-success-text); }
.ui-btn-status.is-warning, .ui-btn-status.is-warning:focus { background: var(--ui-warning-soft); border: 1px solid var(--ui-warning-line); color: var(--ui-warning-text); }
.ui-btn-status.is-warning:hover, .ui-btn-status.is-warning:active { background: var(--ui-warning-soft); border: 1px solid var(--ui-warning); color: var(--ui-warning-text); }
.ui-btn-status.is-danger, .ui-btn-status.is-danger:focus { background: var(--ui-danger-soft); border: 1px solid var(--ui-danger-line); color: var(--ui-danger-text); }
.ui-btn-status.is-danger:hover, .ui-btn-status.is-danger:active { background: var(--ui-danger-soft); border: 1px solid var(--ui-danger); color: var(--ui-danger-text); }
/* кнопка-статус в цвете этапа: статус предмета заявки, нажатие открывает смену */
.ui-btn-status.is-stage-1, .ui-btn-status.is-stage-1:focus { background: var(--ui-stage-1-soft); border: 1px solid var(--ui-stage-1-line); color: var(--ui-stage-1-text); }
.ui-btn-status.is-stage-2, .ui-btn-status.is-stage-2:focus { background: var(--ui-stage-2-soft); border: 1px solid var(--ui-stage-2-line); color: var(--ui-stage-2-text); }
.ui-btn-status.is-stage-3, .ui-btn-status.is-stage-3:focus { background: var(--ui-stage-3-soft); border: 1px solid var(--ui-stage-3-line); color: var(--ui-stage-3-text); }
.ui-btn-status.is-stage-4, .ui-btn-status.is-stage-4:focus { background: var(--ui-stage-4-soft); border: 1px solid var(--ui-stage-4-line); color: var(--ui-stage-4-text); }
.ui-btn-status.is-stage-wait, .ui-btn-status.is-stage-wait:focus { background: var(--ui-stage-wait-soft); border: 1px solid var(--ui-stage-wait-line); color: var(--ui-stage-wait-text); }
.ui-btn-status.is-stage-lost, .ui-btn-status.is-stage-lost:focus { background: var(--ui-stage-lost-soft); border: 1px solid var(--ui-stage-lost-line); color: var(--ui-stage-lost-text); }
.ui-btn-status.is-stage-cancel, .ui-btn-status.is-stage-cancel:focus { background: var(--ui-stage-cancel-soft); border: 1px solid var(--ui-stage-cancel-line); color: var(--ui-stage-cancel-text); }
.ui-btn-status.is-stage-off, .ui-btn-status.is-stage-off:focus { background: var(--ui-stage-off-soft); border: 1px solid var(--ui-stage-off-line); color: var(--ui-stage-off-text); }
.ui-btn-status.is-stage-1:hover, .ui-btn-status.is-stage-1:active { background: var(--ui-stage-1-soft); border: 1px solid var(--ui-stage-1); color: var(--ui-stage-1-text); }
.ui-btn-status.is-stage-2:hover, .ui-btn-status.is-stage-2:active { background: var(--ui-stage-2-soft); border: 1px solid var(--ui-stage-2); color: var(--ui-stage-2-text); }
.ui-btn-status.is-stage-3:hover, .ui-btn-status.is-stage-3:active { background: var(--ui-stage-3-soft); border: 1px solid var(--ui-stage-3); color: var(--ui-stage-3-text); }
.ui-btn-status.is-stage-4:hover, .ui-btn-status.is-stage-4:active { background: var(--ui-stage-4-soft); border: 1px solid var(--ui-stage-4); color: var(--ui-stage-4-text); }
.ui-btn-status.is-stage-wait:hover, .ui-btn-status.is-stage-wait:active { background: var(--ui-stage-wait-soft); border: 1px solid var(--ui-stage-wait); color: var(--ui-stage-wait-text); }
.ui-btn-status.is-stage-lost:hover, .ui-btn-status.is-stage-lost:active { background: var(--ui-stage-lost-soft); border: 1px solid var(--ui-stage-lost); color: var(--ui-stage-lost-text); }
.ui-btn-status.is-stage-cancel:hover, .ui-btn-status.is-stage-cancel:active { background: var(--ui-stage-cancel-soft); border: 1px solid var(--ui-stage-cancel); color: var(--ui-stage-cancel-text); }
.ui-btn-status.is-stage-off:hover, .ui-btn-status.is-stage-off:active { background: var(--ui-stage-off-soft); border: 1px solid var(--ui-stage-off); color: var(--ui-stage-off-text); }

/* Выбор статуса из нескольких («Был / Не был / Уважительная»): ui-segmented ui-status-switch,
   варианты — <label class="ui-segment is-success"><input type="radio">Был</label>. Работает без скриптов. */
.ui-segment { position: relative; }
.ui-segment > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ui-segment:has(> input:checked) { background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow-sm), 0 0 0 1px var(--ui-line); }
.ui-segment:has(> input:focus-visible) { box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-status-switch .ui-segment.is-success.is-active, .ui-status-switch .ui-segment.is-success:has(> input:checked) { background: var(--ui-success-soft); color: var(--ui-success-text); box-shadow: 0 0 0 1px var(--ui-success-line); }
.ui-status-switch .ui-segment.is-warning.is-active, .ui-status-switch .ui-segment.is-warning:has(> input:checked) { background: var(--ui-warning-soft); color: var(--ui-warning-text); box-shadow: 0 0 0 1px var(--ui-warning-line); }
.ui-status-switch .ui-segment.is-danger.is-active, .ui-status-switch .ui-segment.is-danger:has(> input:checked) { background: var(--ui-danger-soft); color: var(--ui-danger-text); box-shadow: 0 0 0 1px var(--ui-danger-line); }

/* ---------- Хлебные крошки (ставится на ol.breadcrumb Bootstrap) ---------- */

ol.ui-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; background: none; font: 400 var(--ui-fs-sm)/1.4 var(--ui-font); color: var(--ui-text-muted); }
.ui-crumbs > li, .ui-crumbs > .breadcrumb-item + .breadcrumb-item { display: inline-flex; align-items: center; padding: 0; color: var(--ui-text-muted); }
.ui-crumbs > li + li::before, .ui-crumbs > .breadcrumb-item + .breadcrumb-item::before {
    content: ""; float: none; flex: none; width: 6px; height: 10px; padding: 0; margin: 0 8px; background: var(--ui-text-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ui-crumbs > li > a, .ui-crumbs > li > a:visited { color: var(--ui-text-muted); font-weight: 400; text-decoration: none; }
.ui-crumbs > li > a:hover, .ui-crumbs > li > a:focus { color: var(--ui-brand-text); text-decoration: underline; text-underline-offset: 2px; }
.ui-crumbs > li.active, .ui-crumbs > li[aria-current] { color: var(--ui-text); font-weight: 600; }

/* ---------- Выпадающий список с поиском (bootstrap-select: класс ui-select на <select>, плагин переносит его на обёртку) ---------- */

.bootstrap-select.ui-select { display: block; width: 100% !important; }
.bootstrap-select.ui-select > .dropdown-toggle {
    display: flex; align-items: center; box-sizing: border-box; width: 100%; height: var(--ui-h); padding: 0 34px 0 12px; margin: 0;
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
    background: var(--ui-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23737373' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    font: 400 var(--ui-fs)/1.4 var(--ui-font); color: var(--ui-text); text-align: left; box-shadow: none; outline: none !important;
}
.bootstrap-select.ui-select > .dropdown-toggle::after { display: none; }
.bootstrap-select.ui-select > .dropdown-toggle:hover { border-color: var(--ui-border-hover); color: var(--ui-text); }
.bootstrap-select.ui-select.show > .dropdown-toggle, .bootstrap-select.ui-select > .dropdown-toggle:focus { border-color: var(--ui-brand); box-shadow: 0 0 0 3px var(--ui-focus); }
.bootstrap-select.ui-select > .dropdown-toggle.bs-placeholder { color: var(--ui-text-faint); }
/* height: auto — плагин тянет .filter-option на всю высоту кнопки, и текст прилипал к верхнему краю */
.bootstrap-select.ui-select > .dropdown-toggle .filter-option { flex: 1; min-width: 0; height: auto; overflow: hidden; }
.bootstrap-select.ui-select .filter-option-inner-inner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bootstrap-select.ui-select > .dropdown-menu {
    box-sizing: border-box; min-width: 100% !important; padding: 6px; margin-top: 4px;
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow-pop);
    font: 400 var(--ui-fs)/1.4 var(--ui-font);
}
.bootstrap-select.ui-select .bs-searchbox { padding: 0 0 6px; }
.bootstrap-select.ui-select .bs-searchbox .form-control {
    box-sizing: border-box; width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: 6px;
    background: var(--ui-surface); font: 400 var(--ui-fs)/1.4 var(--ui-font); color: var(--ui-text); box-shadow: none; outline: none;
}
.bootstrap-select.ui-select .bs-searchbox .form-control:focus { border-color: var(--ui-brand); box-shadow: 0 0 0 3px var(--ui-focus); }
.bootstrap-select.ui-select .inner { margin: 0; padding: 0; list-style: none; }
.bootstrap-select.ui-select .dropdown-item { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; padding: 8px 10px; border-radius: 6px; color: var(--ui-text); background: none; white-space: normal; text-decoration: none; cursor: pointer; }
.bootstrap-select.ui-select .dropdown-item:hover, .bootstrap-select.ui-select .dropdown-item:focus, .bootstrap-select.ui-select .dropdown-item:active,
.bootstrap-select.ui-select .dropdown-item.active:not(.selected) { background: var(--ui-hover); color: var(--ui-text); }
.bootstrap-select.ui-select .dropdown-item.selected, .bootstrap-select.ui-select .dropdown-item.selected:hover { background: var(--ui-brand-soft); color: var(--ui-brand-text); font-weight: 600; }
.bootstrap-select.ui-select .divider, .bootstrap-select.ui-select .dropdown-divider { height: 0; margin: 4px 2px; border: 0; border-top: 1px solid var(--ui-line); }
.bootstrap-select.ui-select .no-results { margin: 0; padding: 8px 10px; background: none; color: var(--ui-text-muted); }
/* подтекст пункта (data-subtext): у выбранного пункта плагин красит его белым — на светлом фоне не виден */
.bootstrap-select.ui-select .dropdown-item .text-muted { color: var(--ui-text-muted) !important; }

/* ---------- Меню действий «…» (Bootstrap dropdown: класс ui-dropdown на .dropdown-menu) ---------- */

.dropdown-menu.ui-dropdown {
    box-sizing: border-box; min-width: 210px; padding: 6px; margin: 0; list-style: none;
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow-pop);
    font: 400 var(--ui-fs)/1.4 var(--ui-font);
}
.ui-dropdown > li { margin: 0; padding: 0; list-style: none; }
.ui-dropdown .dropdown-item, .ui-dropdown .dropdown-item:visited {
    display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; padding: 8px 10px; margin: 0;
    border: 0; border-radius: 6px; background: none; font: inherit; color: var(--ui-text); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ui-dropdown .dropdown-item > i, .ui-dropdown .dropdown-item > svg { width: 16px; flex: none; text-align: center; color: var(--ui-text-muted); }
.ui-dropdown .dropdown-item:hover, .ui-dropdown .dropdown-item:focus, .ui-dropdown .dropdown-item:active { background: var(--ui-hover); color: var(--ui-text); text-decoration: none; outline: none; }
.ui-dropdown .dropdown-item.is-danger, .ui-dropdown .dropdown-item.is-danger > i, .ui-dropdown .dropdown-item.is-danger > svg { color: var(--ui-danger-text); }
.ui-dropdown .dropdown-item.is-danger:hover, .ui-dropdown .dropdown-item.is-danger:focus { background: var(--ui-danger-soft); color: var(--ui-danger-text); }
.ui-dropdown .dropdown-divider { height: 0; margin: 6px 4px; border: 0; border-top: 1px solid var(--ui-line); opacity: 1; }
.ui-dropdown .dropdown-header { display: block; padding: 6px 10px 4px; font: 600 var(--ui-fs-xs)/1.3 var(--ui-font); color: var(--ui-text-muted); }

/* ---------- Подсказка при наведении (Bootstrap tooltip, customClass: 'ui-tooltip' ставит лейаут) ---------- */

.tooltip.ui-tooltip {
    --bs-tooltip-bg: var(--ui-tooltip-bg); --bs-tooltip-color: var(--ui-on-color); --bs-tooltip-opacity: 1; --bs-tooltip-max-width: 260px;
    --bs-tooltip-border-radius: 6px; --bs-tooltip-font-size: var(--ui-fs-xs); --bs-tooltip-padding-x: 10px; --bs-tooltip-padding-y: 6px;
}
.ui-tooltip .tooltip-inner { max-width: 260px; padding: 6px 10px; border-radius: 6px; background: var(--ui-tooltip-bg); color: var(--ui-on-color); font: 400 var(--ui-fs-xs)/1.45 var(--ui-font); text-align: left; }

/* ---------- Всплывающее уведомление (Bootstrap toast: класс ui-toast; стопка — в контейнере ui-toasts) ---------- */

.ui-toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1090; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.toast.ui-toast, .ui-toast {
    display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box; width: 100%; padding: 12px 10px 12px 14px;
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow-pop);
    font: 400 var(--ui-fs)/1.45 var(--ui-font); color: var(--ui-text); opacity: 1;
}
.toast.ui-toast:not(.show) { display: none; }
.ui-toast-icon { flex: none; margin-top: 3px; font-size: 16px; color: var(--ui-text-muted); }
.ui-toast-success .ui-toast-icon { color: var(--ui-success); }
.ui-toast-danger .ui-toast-icon { color: var(--ui-danger); }
.ui-toast-warning .ui-toast-icon { color: var(--ui-warning-text); }
.ui-toast-info .ui-toast-icon { color: var(--ui-info); }
.ui-toast-body { flex: 1; min-width: 0; padding-top: 1px; }
.ui-toast-title { margin: 0 0 2px; font-weight: 600; }
.ui-toast > .ui-btn-icon { margin: -4px 0; }

/* ---------- Боковая панель (Bootstrap offcanvas: класс ui-panel; внутри части окна ui-modal-head / -body / -foot) ---------- */

.offcanvas.ui-panel, .ui-panel { --bs-offcanvas-width: min(420px, 100vw); display: flex; flex-direction: column; box-sizing: border-box; width: min(420px, 100vw); max-width: 100%; border: 0; background: var(--ui-surface); box-shadow: var(--ui-shadow-pop); }
.ui-panel > .ui-modal-body { flex: 1; overflow-y: auto; align-content: start; }

/* ---------- Сворачиваемый блок: <details class="ui-collapse"><summary>…</summary><div class="ui-collapse-body">…</div></details> ---------- */

.ui-collapse { border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.ui-collapse > summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: inherit; list-style: none; cursor: pointer; outline: none; font: 600 15px/1.35 var(--ui-font); color: var(--ui-text); }
.ui-collapse > summary::-webkit-details-marker { display: none; }
.ui-collapse > summary::after {
    content: ""; flex: none; width: 12px; height: 8px; background: var(--ui-text-muted); transition: transform .15s;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ui-collapse[open] > summary::after { transform: rotate(180deg); }
.ui-collapse > summary:hover { background: var(--ui-surface-alt); }
.ui-collapse > summary:focus-visible { box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-collapse[open] > summary { border-bottom: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; }
.ui-collapse-title { flex: 1; min-width: 0; }
.ui-collapse-meta { font-weight: 400; font-size: var(--ui-fs-sm); color: var(--ui-text-muted); white-space: nowrap; }
.ui-collapse-body { padding: 14px 16px 16px; font: 400 var(--ui-fs)/1.5 var(--ui-font); color: var(--ui-text); }
/* сворачиваемая карточка: отступы и заголовок как у ui-card, в meta — кратко, что внутри (не влезает — обрезается) */
.ui-collapse.is-card > summary { padding: 16px 20px; font-size: 16px; }
.ui-collapse.is-card > summary > .ui-collapse-title { flex: none; }
.ui-collapse.is-card > summary > .ui-collapse-meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.ui-collapse.is-card > .ui-collapse-body { padding: 16px 20px 20px; }

/* ---------- Аватар и человек ---------- */

.ui-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--ui-brand-soft); color: var(--ui-brand-text); font: 600 13px/1 var(--ui-font); text-transform: uppercase; }
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar-xs { width: 20px; height: 20px; font-size: 9px; }
.ui-avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.ui-avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.ui-person { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.ui-person-text { display: flex; flex-direction: column; min-width: 0; }
.ui-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--ui-fs)/1.3 var(--ui-font); color: var(--ui-text); }
a.ui-person-name, a.ui-person-name:visited { text-decoration: none; }
a.ui-person-name:hover, a.ui-person-name:focus { color: var(--ui-brand-text); text-decoration: underline; text-underline-offset: 2px; }
.ui-person-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--ui-fs-xs)/1.35 var(--ui-font); color: var(--ui-text-muted); }

/* ---------- Загрузка файла ---------- */

.ui-upload {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; box-sizing: border-box; padding: 22px 16px; text-align: center;
    border: 1.5px dashed var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); cursor: pointer;
    font: 400 var(--ui-fs)/1.45 var(--ui-font); color: var(--ui-text); transition: border-color .12s, background-color .12s;
}
.ui-upload:hover, .ui-upload.is-dragover { border-color: var(--ui-brand); background: var(--ui-brand-soft); }
.ui-upload:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-upload > input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ui-upload-icon { font-size: 22px; color: var(--ui-text-faint); }
.ui-upload-pick { color: var(--ui-brand-text); font-weight: 600; }
.ui-upload-hint { font-size: var(--ui-fs-xs); color: var(--ui-text-muted); }
.ui-files { display: flex; flex-direction: column; gap: 8px; }
.ui-file { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-width: 0; padding: 8px 8px 8px 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-file-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 6px; background: var(--ui-bg); color: var(--ui-text-muted); }
.ui-file-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ui-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--ui-fs-sm)/1.3 var(--ui-font); color: var(--ui-text); }
.ui-file-meta { font: 400 var(--ui-fs-xs)/1.3 var(--ui-font); color: var(--ui-text-muted); }
/* файл-ссылка (скачать): без подчёркивания Bootstrap, при наведении — рамка темнее */
a.ui-file, a.ui-file:hover, a.ui-file:focus { color: inherit; text-decoration: none; }
a.ui-file:hover { border-color: var(--ui-border-hover); }

/* ---------- Пояснение, ключ-значение, точка ---------- */

/* Пояснение: мелкий серый текст под блоком или полем. */
.ui-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font: 400 var(--ui-fs-xs)/1.5 var(--ui-font); color: var(--ui-text-muted); }
.ui-note > i, .ui-note > svg { flex: none; margin-top: 2px; color: var(--ui-text-faint); }
.ui-note.is-warning, .ui-note.is-warning > i, .ui-note.is-warning > svg { color: var(--ui-warning-text); }

/* Ключ-значение: <dl class="ui-props"><dt>Телефон</dt><dd>…</dd></dl> */
.ui-props { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0; font: 400 var(--ui-fs)/1.45 var(--ui-font); }
.ui-props > dt { color: var(--ui-text-muted); font-size: var(--ui-fs-sm); font-weight: 400; }
.ui-props > dd { margin: 0; color: var(--ui-text); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .ui-props { grid-template-columns: minmax(0, 1fr); gap: 2px; } .ui-props > dd + dt { margin-top: 8px; } }

/* Строки расчёта: подпись слева, сумма справа — <div class="ui-sums"><span>За часы</span><span class="ui-num">24 000 ₽</span>…</div>.
   Итоговая пара — is-total у обеих половин. */
.ui-sums { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; margin: 0; font: 400 var(--ui-fs)/1.45 var(--ui-font); color: var(--ui-text); }
.ui-sums > .ui-num { text-align: right; white-space: nowrap; }
.ui-sums > .is-total { padding-top: 8px; border-top: 1px solid var(--ui-line); font-weight: 600; }

/* Разделитель внутри карточки или окна */
.ui-divider { height: 0; margin: 16px 0; border: 0; border-top: 1px solid var(--ui-line); opacity: 1; }

/* Точка-индикатор: новое, онлайн, внимание. */
.ui-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-text-faint); vertical-align: middle; }
.ui-dot.is-brand { background: var(--ui-brand); }
.ui-dot.is-success { background: var(--ui-success); }
.ui-dot.is-warning { background: var(--ui-warning); }
.ui-dot.is-danger { background: var(--ui-danger); }
.ui-dot.is-info { background: var(--ui-info); }
.ui-dot.is-stage-1 { background: var(--ui-stage-1); }
.ui-dot.is-stage-2 { background: var(--ui-stage-2); }
.ui-dot.is-stage-3 { background: var(--ui-stage-3); }
.ui-dot.is-stage-4 { background: var(--ui-stage-4); }
.ui-dot.is-stage-wait { background: var(--ui-stage-wait); }
.ui-dot.is-stage-lost { background: var(--ui-stage-lost); }
.ui-dot.is-stage-cancel { background: var(--ui-stage-cancel); }
.ui-dot.is-stage-off { background: var(--ui-stage-off); }
.ui-dot.is-live { animation: ui-pulse 1.6s ease-out infinite; }
@keyframes ui-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-danger) 45%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }

/* ---------- Значения: балл, изменение, цена, срок, тип ---------- */

/* Балл: число цветом статуса. is-chip — клетка с подложкой (матрица, список занятий). */
.ui-score { display: inline-block; font: 600 var(--ui-fs)/1.2 var(--ui-font); font-variant-numeric: tabular-nums; color: var(--ui-text); white-space: nowrap; }
.ui-score.is-success { color: var(--ui-success-text); }
.ui-score.is-warning { color: var(--ui-warning-text); }
.ui-score.is-danger { color: var(--ui-danger-text); }
.ui-score.is-muted { color: var(--ui-text-faint); }
/* итог, который ищут глазами в таблице (первичный балл, балл за задание) — жирнее */
.ui-score.is-strong { font-weight: 700; }
.ui-score.is-chip { min-width: 34px; height: 26px; padding: 0 6px; box-sizing: border-box; border-radius: 6px; background: var(--ui-muted-soft); text-align: center; line-height: 26px; font-size: var(--ui-fs-sm); }
.ui-score.is-chip.is-success { background: var(--ui-success-soft); }
.ui-score.is-chip.is-warning { background: var(--ui-warning-soft); }
.ui-score.is-chip.is-danger { background: var(--ui-danger-soft); }
.ui-score.is-chip.is-muted { background: var(--ui-surface-alt); }
.ui-score.is-lg { font-size: 22px; }

/* Изменение: рост зелёным, падение красным. */
.ui-delta { display: inline-flex; align-items: center; gap: 2px; font: 600 var(--ui-fs-xs)/1 var(--ui-font); font-variant-numeric: tabular-nums; color: var(--ui-text-muted); white-space: nowrap; }
.ui-delta::before { content: "→"; }
.ui-delta.is-up { color: var(--ui-success-text); }
.ui-delta.is-up::before { content: "↑"; }
.ui-delta.is-down { color: var(--ui-danger-text); }
.ui-delta.is-down::before { content: "↓"; }

/* Цена: старая зачёркнута, новая выделена. */
.ui-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-variant-numeric: tabular-nums; }
.ui-price-now { font: 600 16px/1.2 var(--ui-font); color: var(--ui-text); }
.ui-price-old { font: 400 var(--ui-fs-sm)/1.2 var(--ui-font); color: var(--ui-text-faint); text-decoration: line-through; }

/* Срок и таймер: обычный, скоро, просрочен. */
.ui-due { display: inline-flex; align-items: center; gap: 6px; font: 400 var(--ui-fs-sm)/1.3 var(--ui-font); color: var(--ui-text-muted); white-space: nowrap; }
.ui-due.is-soon { color: var(--ui-warning-text); font-weight: 600; }
.ui-due.is-overdue { color: var(--ui-danger-text); font-weight: 600; }
.ui-due.is-done { color: var(--ui-success-text); }
.ui-due-timer { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em; }

/* Тип занятия или работы: прямоугольная метка с точкой. Статусы — круглые ui-badge, типы — ui-type. */
.ui-type { --t: var(--ui-type-other); --t-soft: var(--ui-type-other-soft); --t-text: var(--ui-type-other-text);
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--t-soft); color: var(--t-text);
    font: 600 var(--ui-fs-xs)/1 var(--ui-font); white-space: nowrap; vertical-align: middle; }
.ui-type::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--t); }
.ui-type-lesson { --t: var(--ui-type-lesson); --t-soft: var(--ui-type-lesson-soft); --t-text: var(--ui-type-lesson-text); }
.ui-type-extra { --t: var(--ui-type-extra); --t-soft: var(--ui-type-extra-soft); --t-text: var(--ui-type-extra-text); }
.ui-type-free { --t: var(--ui-type-free); --t-soft: var(--ui-type-free-soft); --t-text: var(--ui-type-free-text); }
.ui-type-exam { --t: var(--ui-type-exam); --t-soft: var(--ui-type-exam-soft); --t-text: var(--ui-type-exam-text); }
.ui-type-admin { --t: var(--ui-type-admin); --t-soft: var(--ui-type-admin-soft); --t-text: var(--ui-type-admin-text); }
.ui-type-home { --t: var(--ui-type-home); --t-soft: var(--ui-type-home-soft); --t-text: var(--ui-type-home-text); }
.ui-type-class { --t: var(--ui-type-class); --t-soft: var(--ui-type-class-soft); --t-text: var(--ui-type-class-text); }
.ui-type-addwork { --t: var(--ui-type-addwork); --t-soft: var(--ui-type-addwork-soft); --t-text: var(--ui-type-addwork-text); }
.ui-type-other { --t: var(--ui-type-other); --t-soft: var(--ui-type-other-soft); --t-text: var(--ui-type-other-text); }
/* выбор типа цветом этого типа (тип заявки в карточке): вместе с классом ui-type-{тип} — фон, текст и рамка как у метки типа */
select.ui-input.ui-type-select, select.ui-input.ui-type-select:hover { background-color: var(--t-soft, var(--ui-surface)); color: var(--t-text, var(--ui-text)); border-color: var(--t, var(--ui-border)); font-weight: 600; }
select.ui-input.ui-type-select:disabled { background-color: var(--t-soft, var(--ui-disabled-bg)); color: var(--t-text, var(--ui-text-muted)); border-color: var(--t, var(--ui-line)); opacity: .9; }
select.ui-input.ui-type-select option { background: var(--ui-surface); color: var(--ui-text); font-weight: 400; }
.ui-type-online { --t: var(--ui-type-online); --t-soft: var(--ui-type-online-soft); --t-text: var(--ui-type-online-text); }
/* Строка с полосой цвета типа слева (расписание дня): тип — тем же классом ui-type-*, что у метки.
   is-current — идёт сейчас (подложка), is-past — уже закончилось (полоса бледнеет, текст строки не трогаем) */
.ui-type-stripe { position: relative; padding-left: 16px; }
.ui-type-stripe::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 2px; background: var(--t, var(--ui-border)); }
.ui-type-stripe.is-current { background: var(--ui-brand-soft); }
.ui-type-stripe.is-past::before { opacity: .35; }
/* полоса цветом статуса, а не типа: задача сегодня / просрочена / в срок */
.ui-type-stripe.is-success { --t: var(--ui-success); }
.ui-type-stripe.is-warning { --t: var(--ui-warning); }
.ui-type-stripe.is-danger { --t: var(--ui-danger); }
.ui-type-stripe.is-info { --t: var(--ui-info); }
.ui-type-stripe.is-stage-1 { --t: var(--ui-stage-1); }
.ui-type-stripe.is-stage-2 { --t: var(--ui-stage-2); }
.ui-type-stripe.is-stage-3 { --t: var(--ui-stage-3); }
.ui-type-stripe.is-stage-4 { --t: var(--ui-stage-4); }
.ui-type-stripe.is-stage-wait { --t: var(--ui-stage-wait); }
.ui-type-stripe.is-stage-lost { --t: var(--ui-stage-lost); }
.ui-type-stripe.is-stage-cancel { --t: var(--ui-stage-cancel); }
.ui-type-stripe.is-stage-off { --t: var(--ui-stage-off); }

/* ---------- Картинки и кольцо ---------- */

.ui-thumb { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 48px; height: 48px; overflow: hidden;
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-bg); color: var(--ui-text-faint); font-size: 18px; }
.ui-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ui-thumb-sm { width: 32px; height: 32px; font-size: 13px; border-radius: 6px; }
.ui-thumb-lg { width: 72px; height: 72px; font-size: 24px; border-radius: var(--ui-radius-lg); }
.ui-thumb.is-round { border-radius: 50%; }
.ui-cover { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-bg); color: var(--ui-text-faint); font-size: 28px; }
.ui-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Карточки с обложкой (курсы и черновики онлайн-школы): четыре в ряд, на планшете три и две, на телефоне одна.
   <div class="ui-cards"><article class="ui-card has-cover"><div class="ui-cover">картинка или значок <span class="ui-badge ui-cover-badge">идёт</span></div>
   <div class="ui-card-body">название, метки, ui-figures… <div class="ui-card-foot">кнопки</div></div></article></div> */
.ui-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1199px) { .ui-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ui-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .ui-cards { grid-template-columns: minmax(0, 1fr); } }
.ui-card.has-cover { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ui-card.has-cover > .ui-cover { position: relative; flex: none; border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; }
/* метка состояния поверх обложки, в левом верхнем углу */
.ui-cover-badge { position: absolute; top: 10px; left: 10px; }
.ui-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; padding: 14px 16px 16px; }
/* кнопки прижаты к низу: в ряду карточек разной высоты они стоят на одной линии */
.ui-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
/* числа с подписями в ряд на серой подложке: «12 учеников», «5 тем», «30 занятий» */
.ui-figures { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 10px 6px; border-radius: var(--ui-radius); background: var(--ui-bg); text-align: center; }
.ui-figure { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-figure-value { font: 600 18px/1.15 var(--ui-font); color: var(--ui-text); font-variant-numeric: tabular-nums; }
.ui-figure-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--ui-fs-xs)/1.3 var(--ui-font); color: var(--ui-text-muted); }

/* Круговой прогресс: style="--p: 60". Тон — is-success / is-warning / is-danger. */
.ui-ring { --p: 0; --ring: var(--ui-brand); position: relative; display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%;
    background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--ui-muted-soft) 0); }
.ui-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--ui-surface); }
.ui-ring > span { position: relative; font: 600 var(--ui-fs-sm)/1 var(--ui-font); color: var(--ui-text); font-variant-numeric: tabular-nums; }
.ui-ring.is-success { --ring: var(--ui-success); }
.ui-ring.is-warning { --ring: var(--ui-warning); }
.ui-ring.is-danger { --ring: var(--ui-danger); }
.ui-ring-lg { width: 88px; height: 88px; }
.ui-ring-lg::before { inset: 8px; }
.ui-ring-lg > span { font-size: 18px; }

/* ---------- Плитки-переходы ---------- */

.ui-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1199px) { .ui-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .ui-tiles { grid-template-columns: minmax(0, 1fr); } }
.ui-tile, .ui-tile:visited { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-width: 0; padding: 12px 14px;
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); color: var(--ui-text); text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.ui-tile:hover, .ui-tile:focus { border-color: var(--ui-brand); box-shadow: 0 2px 10px var(--ui-focus); color: var(--ui-text); text-decoration: none; outline: none; }
.ui-tile::after { content: ""; flex: none; width: 7px; height: 12px; background: var(--ui-text-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.ui-tile-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--ui-brand-soft); color: var(--ui-brand-text); font-size: 16px; }
.ui-tile-icon.is-danger { background: var(--ui-danger-soft); color: var(--ui-danger-text); }
.ui-tile-icon.is-warning { background: var(--ui-warning-soft); color: var(--ui-warning-text); }
.ui-tile-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ui-tile-title { font: 600 14.5px/1.3 var(--ui-font); }
.ui-tile-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--ui-fs-xs)/1.4 var(--ui-font); color: var(--ui-text-muted); }
.ui-tile-hint.is-warning { color: var(--ui-warning-text); font-weight: 600; white-space: normal; }
.ui-tile-hint.is-danger { color: var(--ui-danger-text); font-weight: 600; white-space: normal; }
/* плитки как вкладки: открытый сейчас раздел — подложка и рамка цвета организации (разделы занятия черновика курса) */
.ui-tile.is-active, .ui-tile.is-active:hover, .ui-tile.is-active:focus { border-color: var(--ui-brand); background: var(--ui-brand-soft); box-shadow: none; }
.ui-tile.is-active .ui-tile-icon { background: var(--ui-surface); }
/* заготовка: раздел ещё не готов — не ссылка (div), без стрелки и подсветки, значок серый; справа метка «Скоро» */
.ui-tile.is-disabled { cursor: default; }
.ui-tile.is-disabled:hover, .ui-tile.is-disabled:focus { border-color: var(--ui-line); box-shadow: none; }
.ui-tile.is-disabled::after { display: none; }
.ui-tile.is-disabled .ui-tile-icon { background: var(--ui-muted-soft); color: var(--ui-text-muted); }

/* ---------- Строка списка ---------- */

.ui-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-list.is-divided { gap: 0; }
.ui-list.is-divided > .ui-list-item + .ui-list-item { border-top: 1px solid var(--ui-line); border-radius: 0; }
/* длинные названия и подписи переносятся, а не обрезаются многоточием (задачи, заявки) */
.ui-list.is-wrap .ui-list-title, .ui-list.is-wrap .ui-list-sub { overflow: visible; white-space: normal; }
.ui-list-item, .ui-list-item:visited { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-width: 0; padding: 10px 12px;
    border: 1px solid transparent; border-radius: var(--ui-radius); background: none; color: var(--ui-text); font: 400 var(--ui-fs)/1.4 var(--ui-font); text-align: left; text-decoration: none; }
a.ui-list-item, button.ui-list-item, label.ui-list-item { cursor: pointer; width: 100%; }
a.ui-list-item:hover, button.ui-list-item:hover, label.ui-list-item:hover { background: var(--ui-hover); color: var(--ui-text); text-decoration: none; }
.ui-list-item.is-active, .ui-list-item.is-active:hover { background: var(--ui-brand-soft); border-color: var(--ui-brand); }
.ui-list-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-list-item > input[type=checkbox], .ui-list-item > input[type=radio] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--ui-brand); }
/* выбор одной строки списка: <label class="ui-list-item"><input type="radio">…</label> — выбранная подсвечена, как is-active */
.ui-list-item:has(> input[type=radio]:checked) { background: var(--ui-brand-soft); border-color: var(--ui-brand); }
.ui-list-lead { flex: none; display: flex; align-items: center; }
.ui-list-lead.ui-list-date { flex-direction: column; align-items: flex-start; justify-content: center; width: 46px; font: 600 var(--ui-fs-sm)/1.25 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-list-date small { display: block; font-weight: 400; color: var(--ui-text-muted); font-size: var(--ui-fs-xs); }
.ui-list-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ui-list-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ui-list-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ui-fs-xs); color: var(--ui-text-muted); }
.ui-list-trail { display: flex; align-items: center; gap: 8px; flex: none; }
.ui-list-item.has-arrow::after { content: ""; flex: none; width: 7px; height: 12px; background: var(--ui-text-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ---------- Раскладки: список слева + подробности, доска ---------- */

.ui-split { display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ui-split-list { position: sticky; top: var(--ui-sticky-top, 16px); max-height: calc(100vh - 32px); overflow-y: auto; min-width: 0; }
.ui-split-main { min-width: 0; }
.ui-split-back { display: none; }
@media (max-width: 860px) {
    .ui-split { grid-template-columns: minmax(0, 1fr); }
    .ui-split-list { position: static; max-height: none; }
    .ui-split.is-detail .ui-split-list { display: none; }
    .ui-split:not(.is-detail) .ui-split-main { display: none; }
    .ui-split-back { display: inline-flex; margin-bottom: 10px; }
}

.ui-board { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.ui-board-col { display: flex; flex-direction: column; gap: 8px; flex: 0 0 264px; box-sizing: border-box; min-height: 120px; padding: 10px;
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-bg); transition: border-color .12s, background-color .12s; }
.ui-board-col.is-over { border-color: var(--ui-brand); background: var(--ui-brand-soft); }
.ui-board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 4px; font: 600 var(--ui-fs-sm)/1.3 var(--ui-font); color: var(--ui-text); }
.ui-board-card { box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface);
    font: 400 var(--ui-fs-sm)/1.4 var(--ui-font); color: var(--ui-text); cursor: grab; }
.ui-board-card:active { cursor: grabbing; }
.ui-board-card.is-dragging { opacity: .5; }
.ui-board-card-title { margin: 0 0 4px; font-weight: 600; font-size: var(--ui-fs); }
/* колонки делят ширину поровну (канбан заявок): прокрутка вбок — только когда им тесно */
.ui-board.is-fluid { align-items: stretch; }
.ui-board.is-fluid > .ui-board-col { flex: 1 1 0; min-width: 210px; max-height: 74vh; }
.ui-board-col > .ui-board-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 60px; overflow-y: auto; }
/* заголовок колонки — кнопка сворачивания */
button.ui-board-head { width: 100%; margin: 0; border: 0; border-radius: var(--ui-radius); background: none; text-align: left; cursor: pointer; }
button.ui-board-head:hover { background: var(--ui-hover); }
button.ui-board-head:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-board-head-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* свёрнутая колонка — узкая плашка с названием сверху вниз; в неё по-прежнему можно бросить карточку */
.ui-board > .ui-board-col.is-collapsed { flex: 0 0 48px; min-width: 48px; max-width: 48px; padding: 8px 4px; }
.ui-board-col.is-collapsed > :not(.ui-board-head) { display: none; }
.ui-board-col.is-collapsed > .ui-board-head { flex-direction: column; justify-content: flex-start; height: 100%; padding: 6px 2px; }
.ui-board-col.is-collapsed .ui-board-head-title { writing-mode: vertical-rl; white-space: nowrap; }
.ui-board-col.is-collapsed .ui-board-chevron { transform: rotate(180deg); }
.ui-board-chevron { flex: none; font-size: 11px; color: var(--ui-text-muted); }

/* ---------- История и шаги ---------- */

.ui-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.ui-timeline > li { position: relative; padding: 0 0 18px 26px; font: 400 var(--ui-fs)/1.45 var(--ui-font); color: var(--ui-text); }
.ui-timeline > li::before { content: ""; position: absolute; left: 4px; top: 5px; box-sizing: border-box; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ui-border); background: var(--ui-surface); }
.ui-timeline > li::after { content: ""; position: absolute; left: 9px; top: 18px; bottom: 2px; width: 1px; background: var(--ui-line); }
.ui-timeline > li:last-child { padding-bottom: 0; }
.ui-timeline > li:last-child::after { display: none; }
.ui-timeline > li.is-brand::before { border-color: var(--ui-brand); }
.ui-timeline > li.is-success::before { border-color: var(--ui-success); background: var(--ui-success); }
.ui-timeline > li.is-warning::before { border-color: var(--ui-warning); }
.ui-timeline > li.is-danger::before { border-color: var(--ui-danger); }
.ui-timeline > li.is-stage-1::before { border-color: var(--ui-stage-1); background: var(--ui-stage-1-soft); }
.ui-timeline > li.is-stage-2::before { border-color: var(--ui-stage-2); background: var(--ui-stage-2-soft); }
.ui-timeline > li.is-stage-3::before { border-color: var(--ui-stage-3); background: var(--ui-stage-3-soft); }
.ui-timeline > li.is-stage-4::before { border-color: var(--ui-stage-4); background: var(--ui-stage-4-soft); }
.ui-timeline > li.is-stage-wait::before { border-color: var(--ui-stage-wait); background: var(--ui-stage-wait-soft); }
.ui-timeline > li.is-stage-lost::before { border-color: var(--ui-stage-lost); background: var(--ui-stage-lost-soft); }
.ui-timeline > li.is-stage-cancel::before { border-color: var(--ui-stage-cancel); background: var(--ui-stage-cancel-soft); }
.ui-timeline > li.is-stage-off::before { border-color: var(--ui-stage-off); background: var(--ui-stage-off-soft); }
.ui-timeline-time { display: block; font-size: var(--ui-fs-xs); color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
.ui-timeline-title { display: block; font-weight: 600; }
/* комментарий к шагу: почему не пришёл, о чём договорились — подложкой под заголовком */
.ui-timeline-note { display: block; margin-top: 6px; padding: 6px 10px; border-radius: var(--ui-radius); background: var(--ui-surface-alt);
    border: 1px solid var(--ui-line); font-size: var(--ui-fs-sm); color: var(--ui-text); white-space: pre-wrap; overflow-wrap: anywhere; }

.ui-steps { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: ui-step; }
.ui-steps > li { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; counter-increment: ui-step; font: 400 var(--ui-fs-sm)/1.3 var(--ui-font); color: var(--ui-text-muted); }
.ui-steps > li::before { content: counter(ui-step); display: grid; place-items: center; flex: none; box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px solid var(--ui-border); background: var(--ui-surface); font: 600 var(--ui-fs-xs)/1 var(--ui-font); color: var(--ui-text-muted); }
.ui-steps > li:not(:last-child)::after { content: ""; flex: 1; min-width: 12px; height: 1px; background: var(--ui-line); }
.ui-steps > li.is-done::before { content: "✓"; border-color: var(--ui-brand); background: var(--ui-brand); color: var(--ui-on-brand); }
.ui-steps > li.is-done::after { background: var(--ui-brand); }
.ui-steps > li.is-current { color: var(--ui-text); font-weight: 600; }
.ui-steps > li.is-current::before { border-color: var(--ui-brand); color: var(--ui-brand-text); }
@media (max-width: 640px) { .ui-steps { flex-direction: column; gap: 10px; } .ui-steps > li::after { display: none; } }
/* этапы столбиком — в узкой колонке (статус заявки в карточке), где подписи в строку не помещаются */
.ui-steps.is-vertical { flex-direction: column; gap: 10px; }
.ui-steps.is-vertical > li::after { display: none; }

/* ---------- Сообщения и редактор текста ---------- */

.ui-messages { display: flex; flex-direction: column; gap: 10px; }
.ui-msg { display: flex; flex-direction: column; gap: 4px; max-width: min(78%, 520px); }
.ui-msg-bubble { padding: 9px 12px; border: 1px solid var(--ui-line); border-radius: 12px 12px 12px 4px; background: var(--ui-surface-alt); font: 400 var(--ui-fs)/1.45 var(--ui-font); color: var(--ui-text); overflow-wrap: anywhere; }
.ui-msg.is-mine { align-self: flex-end; }
.ui-msg.is-mine .ui-msg-bubble { border-color: transparent; border-radius: 12px 12px 4px 12px; background: var(--ui-brand-soft); }
.ui-msg-meta { display: flex; gap: 6px; font: 400 11.5px/1.3 var(--ui-font); color: var(--ui-text-muted); }
.ui-msg.is-mine .ui-msg-meta { justify-content: flex-end; }
.ui-msg-day { align-self: center; padding: 2px 10px; border-radius: var(--ui-radius-pill); background: var(--ui-muted-soft); font: 600 11.5px/1.6 var(--ui-font); color: var(--ui-text-muted); }
.ui-composer { display: flex; align-items: flex-end; gap: 8px; }
.ui-composer > .ui-input { flex: 1; min-width: 0; min-height: var(--ui-h); height: var(--ui-h); resize: none; padding-top: 8px; }
/* длинные ответы (переписка с учеником): <form class="ui-composer is-tall"> и <textarea rows="5"> — высота по rows, тянется вниз за уголок */
.ui-composer.is-tall > .ui-input { height: auto; resize: vertical; line-height: 1.45; }

.ui-editor { box-sizing: border-box; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-editor:focus-within { border-color: var(--ui-brand); box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--ui-line); background: var(--ui-surface-alt); }
.ui-editor-bar button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ui-text-muted); font: 600 13px var(--ui-font); cursor: pointer; }
.ui-editor-bar button:hover { background: var(--ui-hover); color: var(--ui-text); }
.ui-editor-bar button.is-on { background: var(--ui-brand-soft); color: var(--ui-brand-text); }
.ui-editor-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--ui-line); }
.ui-editor-area { min-height: 120px; padding: 10px 12px; outline: none; font: 400 var(--ui-fs)/1.55 var(--ui-font); color: var(--ui-text); }
.ui-editor-area:empty::before { content: attr(data-placeholder); color: var(--ui-text-faint); }
/* панель документа: кнопка с подписью, выключенная кнопка, список (шрифт, размер, интервал) и группа кнопок,
   которая показывается только по месту курсора (действия с таблицей) */
.ui-editor-bar button.is-wide { width: auto; gap: 6px; padding: 0 8px; white-space: nowrap; }
.ui-editor-bar button:disabled { opacity: .4; cursor: default; background: none; }
.ui-editor-bar select.ui-input { width: auto; height: 30px; padding: 0 24px 0 8px; border-color: var(--ui-line); border-radius: 6px; font-size: var(--ui-fs-xs); background-position: right 8px center; }
.ui-editor-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.ui-editor-group[hidden] { display: none; }

/* ---------- Редактор кода с запуском (ui-code.js): Monaco и Python в браузере, как в CodeLab ----------
   <div class="ui-code" data-ui-code [data-readonly]><textarea name="…">код</textarea></div> — остальное строит скрипт:
   панель с «Запустить» / «Стоп», редактор, ввод для input() и вывод программы. textarea остаётся полем формы */
.ui-code { box-sizing: border-box; overflow: hidden; border: 1px solid var(--ui-code-line); border-radius: var(--ui-radius); background: var(--ui-code-bg); color: var(--ui-code-text); }
.ui-code > textarea { display: none; }
.ui-code.is-plain > textarea { display: block; box-sizing: border-box; width: 100%; min-height: 180px; padding: 10px 12px; border: 0; outline: none; resize: vertical; background: var(--ui-code-bg); color: var(--ui-code-text); font: 400 13px/1.5 'JetBrains Mono', Consolas, 'Courier New', monospace; tab-size: 4; }
.ui-code-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--ui-code-line); }
.ui-code-lang { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--ui-fs-sm) var(--ui-font); color: var(--ui-code-muted); }
.ui-code-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--ui-fs-xs) var(--ui-font); color: var(--ui-code-muted); }
.ui-code-editor { height: 180px; }
.ui-code-editor.is-loading { display: flex; align-items: center; justify-content: center; font: 400 var(--ui-fs-sm) var(--ui-font); color: var(--ui-code-muted); }
.ui-code-stdin, .ui-code-out { border-top: 1px solid var(--ui-code-line); }
.ui-code-stdin > summary { padding: 6px 12px; cursor: pointer; font: 600 var(--ui-fs-xs) var(--ui-font); color: var(--ui-code-muted); }
.ui-code-stdin > summary:hover { color: var(--ui-code-text); }
.ui-code-stdin > textarea { display: block; box-sizing: border-box; width: 100%; min-height: 64px; padding: 6px 12px 8px; border: 0; outline: none; resize: vertical; background: transparent; color: var(--ui-code-text); font: 400 13px/1.45 'JetBrains Mono', Consolas, 'Courier New', monospace; }
.ui-code-out-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px 0 12px; font: 600 var(--ui-fs-xs) var(--ui-font); color: var(--ui-code-muted); }
.ui-code-out-head > span { flex: 1; }
.ui-code-out-head .ui-btn-ghost { color: var(--ui-code-muted); }
.ui-code-out-head .ui-btn-ghost:hover { background: var(--ui-code-line); color: var(--ui-code-text); }
.ui-code-console { max-height: 260px; margin: 0; padding: 6px 12px 10px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 13px/1.45 'JetBrains Mono', Consolas, 'Courier New', monospace; color: var(--ui-code-text); }
.ui-code-console .is-error { color: var(--ui-code-error); }
.ui-code-console .is-system { color: var(--ui-code-muted); }

/* ---------- Карта заданий и матрица баллов ---------- */

.ui-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
.ui-cell, .ui-cell:visited { display: grid; place-items: center; box-sizing: border-box; height: 38px; border: 1.5px solid var(--ui-border); border-radius: var(--ui-radius);
    background: var(--ui-surface); font: 600 var(--ui-fs-sm)/1 var(--ui-font); color: var(--ui-text); text-decoration: none; }
a.ui-cell:hover { border-color: var(--ui-border-hover); color: var(--ui-text); }
.ui-cell.is-success { border-color: var(--ui-success); background: var(--ui-success-soft); color: var(--ui-success-text); }
.ui-cell.is-warning { border-color: var(--ui-warning); background: var(--ui-warning-soft); color: var(--ui-warning-text); }
.ui-cell.is-danger { border-color: var(--ui-danger); background: var(--ui-danger-soft); color: var(--ui-danger-text); }
.ui-cell.is-empty { border-style: dashed; color: var(--ui-text-faint); }
.ui-cell.is-active { box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 4px var(--ui-brand); }

.ui-matrix th, .ui-matrix td { padding: 8px 6px; text-align: center; white-space: nowrap; }
.ui-matrix th:first-child, .ui-matrix td:first-child { position: sticky; left: 0; z-index: 1; padding-left: 14px; text-align: left; background: var(--ui-surface); box-shadow: 1px 0 0 var(--ui-line); }
.ui-matrix thead th:first-child { background: var(--ui-surface-alt); }
.ui-matrix .is-avg { background: var(--ui-surface-alt); }
.ui-matrix th small { display: block; font-weight: 400; color: var(--ui-text-faint); }
/* Матрица с полями ввода (поля зарплаты по сотрудникам): узкие поля, итоги строки закреплены справа.
   Отступ справа и ширина закреплённой ячейки — у неё самой: style="right: 112px; width: 112px". */
.ui-matrix .ui-input { width: 96px; }
.ui-matrix tfoot td { background: var(--ui-surface-alt); font-weight: 600; }
.ui-matrix .is-pin-end { position: sticky; z-index: 1; box-sizing: border-box; background: var(--ui-surface); box-shadow: -1px 0 0 var(--ui-line); text-align: right; font-weight: 600; }
.ui-matrix thead .is-pin-end, .ui-matrix tfoot .is-pin-end { background: var(--ui-surface-alt); }
.ui-matrix .is-pin-end.is-total { background: var(--ui-brand-soft); color: var(--ui-brand-text); }

.ui-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font: 400 var(--ui-fs-xs)/1.4 var(--ui-font); color: var(--ui-text-muted); }
.ui-legend > li { display: inline-flex; align-items: center; gap: 6px; }
.ui-legend-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--sw, var(--ui-text-faint)); }

/* Графики: контейнер для crmChart() из crm/charts.js (Chart.js). Цвета серий — --ui-chart-1…6, легенда — ui-legend. */
.ui-chart { position: relative; width: 100%; min-height: 220px; }

/* ---------- Панель инструментов, массовые действия, панель сохранения ---------- */

.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-toolbar.is-boxed { padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.ui-toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ui-toolbar-spacer { flex: 1; }
.ui-toolbar-sep { align-self: stretch; width: 1px; margin: 4px 2px; background: var(--ui-line); }
.ui-toolbar > .ui-input-wrap { flex: 1 1 220px; max-width: 320px; }
.ui-toolbar select.ui-input { width: auto; min-width: 150px; }
@media (max-width: 640px) { .ui-toolbar > .ui-input-wrap { flex-basis: 100%; max-width: none; } .ui-toolbar-spacer, .ui-toolbar-sep { display: none; } }

.ui-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; box-sizing: border-box; padding: 8px 10px 8px 14px;
    border: 1px solid var(--ui-brand); border-radius: var(--ui-radius-lg); background: var(--ui-brand-soft); font: 600 var(--ui-fs-sm)/1.3 var(--ui-font); color: var(--ui-brand-text); }
.ui-bulkbar-count { margin-right: auto; }

.ui-savebar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px;
    box-sizing: border-box; padding: 10px 12px 10px 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow-pop);
    font: 600 var(--ui-fs)/1.3 var(--ui-font); color: var(--ui-text); }
.ui-savebar-text { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 575px) { .ui-savebar .ui-btn { white-space: normal; text-align: center; } }

/* ---------- Формы: раздел, диапазон, пароль, цвет, копирование, повторяющиеся строки, выбор карточкой ---------- */

.ui-form-section { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 12px 32px; padding: 20px 0; border-top: 1px solid var(--ui-line); }
.ui-form-section:first-child { padding-top: 0; border-top: 0; }
.ui-form-section-title { margin: 0; font: 600 15px/1.35 var(--ui-font); color: var(--ui-text); }
.ui-form-section-desc { margin: 4px 0 0; font: 400 var(--ui-fs-sm)/1.45 var(--ui-font); color: var(--ui-text-muted); }
@media (max-width: 760px) { .ui-form-section { grid-template-columns: minmax(0, 1fr); } }

.ui-range { display: flex; align-items: center; gap: 8px; }
.ui-range > .ui-input { flex: 1; min-width: 0; }
.ui-range-sep { flex: none; color: var(--ui-text-muted); }
/* ползунок (input type=range): во всю ширину, фирменного цвета */
.ui-slider { display: block; width: 100%; margin: 0; accent-color: var(--ui-brand); cursor: pointer; }

.ui-input-wrap > .ui-input-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ui-text-muted); cursor: pointer; }
.ui-input-wrap > .ui-input-btn:hover { background: var(--ui-hover); color: var(--ui-text); }
.ui-input-wrap > .ui-input.has-btn { padding-right: 40px; }

.ui-color { display: flex; align-items: center; gap: 8px; }
.ui-color > input[type=color] { box-sizing: border-box; flex: none; width: var(--ui-h); height: var(--ui-h); padding: 3px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); cursor: pointer; }
.ui-color > .ui-input { width: 120px; text-transform: uppercase; font-variant-numeric: tabular-nums; }

.ui-copy { display: flex; gap: 8px; }
.ui-copy > .ui-input { flex: 1; min-width: 0; }
.ui-btn.is-copied, .ui-btn.is-copied:hover, .ui-btn.is-copied:focus { background: var(--ui-success-soft); border-color: var(--ui-success-line); color: var(--ui-success-text); }

/* ---------- Текст сообщения клиенту: <div class="ui-message"><details><summary>Текст</summary><div class="ui-message-text">…</div></details>
   [<textarea class="ui-message-plain" hidden>] и кнопка data-ui-copy-message — копирует разметку и обычный текст ---------- */
.ui-message { min-width: 0; }
.ui-message > details > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font: 600 var(--ui-fs-sm)/1.4 var(--ui-font); color: var(--ui-brand-text); }
.ui-message > details > summary::-webkit-details-marker { display: none; }
.ui-message > details > summary::after { content: "\25BE"; font-size: 11px; transition: transform .15s; }
.ui-message > details[open] > summary::after { transform: rotate(180deg); }
.ui-message-text { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); font: 400 var(--ui-fs-sm)/1.5 var(--ui-font); color: var(--ui-text); overflow-wrap: anywhere; }
.ui-message-text p, .ui-message-text div, .ui-message-text ul, .ui-message-text ol { margin: 0 0 4px; }
.ui-message-text ul, .ui-message-text ol { padding-left: 18px; }

.ui-repeater { display: flex; flex-direction: column; gap: 8px; }
.ui-repeater-row { display: flex; align-items: center; gap: 8px; }
.ui-repeater-row > .ui-input { flex: 1; min-width: 0; }
.ui-repeater-tools { display: flex; gap: 4px; flex: none; }

.ui-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ui-choice { position: relative; display: flex; align-items: flex-start; gap: 12px; box-sizing: border-box; min-width: 0; padding: 14px 40px 14px 14px;
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); color: var(--ui-text); cursor: pointer; transition: border-color .12s, background-color .12s; }
.ui-choice:hover { border-color: var(--ui-border-hover); }
.ui-choice > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ui-choice::after { content: ""; position: absolute; top: 14px; right: 14px; box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ui-border); background: var(--ui-surface); }
.ui-choice:has(> input:checked) { border-color: var(--ui-brand); background: var(--ui-brand-soft); }
.ui-choice:has(> input:checked)::after { border: 5px solid var(--ui-brand); }
.ui-choice:has(> input:focus-visible) { box-shadow: 0 0 0 3px var(--ui-focus); }
/* несколько вариантов сразу — галочки вместо радиокнопок: значок квадратный, у выбранного — галочка */
.ui-choice:has(> input[type="checkbox"])::after { border-radius: 5px; }
.ui-choice:has(> input[type="checkbox"]:checked)::after { border: 0; background: var(--ui-brand); }
.ui-choice:has(> input[type="checkbox"]:checked)::before { content: ""; position: absolute; z-index: 1; top: 17px; right: 20px; width: 6px; height: 10px;
    border: solid var(--ui-surface); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ui-choice-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ui-brand-soft); color: var(--ui-brand-text); font-size: 15px; }
.ui-choice:has(> input:checked) .ui-choice-icon { background: var(--ui-surface); }
.ui-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ui-choice-title { font: 600 var(--ui-fs)/1.35 var(--ui-font); }
.ui-choice-desc { font: 400 var(--ui-fs-xs)/1.45 var(--ui-font); color: var(--ui-text-muted); }
/* плотные карточки: меньше отступы и значок — четыре варианта умещаются в ряд без переноса подписей (тип заявки) */
.ui-choices.is-compact { gap: 8px; }
.ui-choices.is-compact .ui-choice { gap: 10px; padding: 12px 30px 12px 12px; }
.ui-choices.is-compact .ui-choice::after { top: 12px; right: 10px; width: 16px; height: 16px; }
.ui-choices.is-compact .ui-choice:has(> input:checked)::after { border-width: 4px; }
.ui-choices.is-compact .ui-choice-icon { width: 30px; height: 30px; font-size: 13px; }
/* вариант, который сейчас выбрать нельзя: подсказка почему — в title */
.ui-choice:has(> input:disabled) { opacity: .55; cursor: not-allowed; }
.ui-choice:has(> input:disabled):hover { border-color: var(--ui-border); }
/* ошибка у группы полей: варианты выбора, таблица с полями и её строка */
.ui-choices.is-invalid { outline: 1px solid var(--ui-danger); outline-offset: 4px; border-radius: var(--ui-radius); }
.ui-table-wrap.is-invalid { border-color: var(--ui-danger); }
.ui-table tr.is-invalid .ui-input { border-color: var(--ui-danger); }

/* Переключатель с аватарами (выбор ребёнка у родителя): ui-segment + ui-avatar-xs. */
.ui-segment > .ui-avatar { margin-left: -4px; }

/* ---------- Загрузка, ошибка, нет доступа ---------- */

.ui-spinner { display: inline-block; flex: none; box-sizing: border-box; width: 20px; height: 20px; border: 2px solid var(--ui-line); border-top-color: var(--ui-brand); border-radius: 50%; animation: ui-spin .8s linear infinite; vertical-align: middle; }
.ui-spinner-sm { width: 14px; height: 14px; }
.ui-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.ui-loading { display: flex; align-items: center; gap: 10px; font: 400 var(--ui-fs-sm)/1.4 var(--ui-font); color: var(--ui-text-muted); }
.ui-skeleton { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--ui-muted-soft) 25%, var(--ui-surface-alt) 50%, var(--ui-muted-soft) 75%); background-size: 200% 100%; animation: ui-shimmer 1.3s ease-in-out infinite; }
.ui-skeleton.is-title { height: 16px; width: 45%; }
.ui-skeleton.is-circle { width: 36px; height: 36px; border-radius: 50%; flex: none; }
@keyframes ui-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.ui-empty.is-error { border-color: var(--ui-danger-line); }
.ui-empty.is-error .ui-empty-icon { color: var(--ui-danger); }
.ui-empty.is-locked { border-style: solid; background: var(--ui-surface-alt); }

/* ---------- Окно подтверждения (вместо confirm()) и размеры окон ---------- */

.ui-confirm .ui-modal-body { display: flex; align-items: flex-start; gap: 14px; padding: 22px 20px 18px; }
.ui-confirm-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ui-warning-soft); color: var(--ui-warning-text); font-size: 17px; }
.ui-confirm.is-danger .ui-confirm-icon { background: var(--ui-danger-soft); color: var(--ui-danger-text); }
.ui-confirm-title { margin: 2px 0 4px; font: 600 16px/1.35 var(--ui-font); color: var(--ui-text); }
.ui-confirm-text { margin: 0; font: 400 var(--ui-fs)/1.5 var(--ui-font); color: var(--ui-text-muted); }
.ui-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--ui-overlay); }
.ui-overlay > .ui-modal { width: 100%; max-width: 440px; }

/* ---------- Увеличение картинки: класс ui-zoom на блоке — картинки внутри открываются на весь экран (ui.js) ----------
   Картинки в ссылках и внутри ui-zoom-off не открываются. Подложка у картинки белая: в заданиях много
   прозрачных PNG с чёрными линиями, на тёмном фоне их не было бы видно */
.ui-zoom img { cursor: zoom-in; }
.ui-zoom a img, .ui-zoom .ui-zoom-off img, .ui-zoom img.ui-zoom-off { cursor: inherit; }
.ui-lightbox-open { overflow: hidden; }
.ui-lightbox { position: fixed; inset: 0; z-index: 1200; overflow: hidden; background: var(--ui-lightbox-bg); touch-action: none; user-select: none; -webkit-user-select: none; }
.ui-lightbox-img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; margin: 0; background: var(--ui-surface);
    transform-origin: center; cursor: grab; -webkit-user-drag: none; }
.ui-lightbox-img.is-dragging { cursor: grabbing; }
.ui-lightbox.is-animated .ui-lightbox-img { transition: transform .18s ease-out; }
.ui-lightbox-bar { position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--ui-radius-pill); background: var(--ui-surface); box-shadow: var(--ui-shadow-pop); }
.ui-lightbox-bar .ui-btn-icon, .ui-lightbox-bar .ui-btn-icon:hover, .ui-lightbox-bar .ui-btn-icon:focus { border-color: transparent; border-radius: 50%; }
.ui-lightbox-scale { min-width: 58px; text-align: center; font: 600 var(--ui-fs-sm)/1 var(--ui-font); color: var(--ui-text); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .ui-btn, .ui-btn-nav::after, .ui-input, .ui-switch input, .ui-switch input::after, a.ui-card,
    .ui-check-pill, .ui-collapse > summary::after, .ui-message > details > summary::after, .ui-upload, .ui-tile, .ui-choice, .ui-board-col { transition: none; }
    .ui-lightbox.is-animated .ui-lightbox-img { transition: none; }
    .ui-spinner { animation-duration: 2s; }
    .ui-skeleton, .ui-dot.is-live { animation: none; }
    .ui-btn.is-loading::after { animation-duration: 2s; }
}

/* ---------- Цвет текста ---------- */
/* Утилиты стоят последними, чтобы перекрывать цвет элементов: ui-stat-value ui-text-danger, ui-list-item ui-muted */
.ui-muted { color: var(--ui-text-muted); }
.ui-text-success { color: var(--ui-success-text); }   /* суммы «+», готово */
.ui-text-danger { color: var(--ui-danger-text); }     /* суммы «−», долг, просрочено */
.ui-text-warning { color: var(--ui-warning-text); }   /* ждёт действия */
/* текст как ввели (описание, комментарий): переносы строк сохраняются, длинные слова переносятся */
.ui-text-pre { white-space: pre-wrap; overflow-wrap: anywhere; }