/* ═══════════════════════════════════════════════════════════════════════
ZiAlt — общие компоненты редизайна (ui-*)
Значения — из CLAUDE.md «Визуальная система» и README пакетов редизайна.
Цвета только через токены --ui-* (tokens.css), поэтому тёмная тема работает сама.
Старые ds-* (components.css) не трогаются: страницы переходят на ui-* по одной
на этапе 3, после этого ds-* удаляются.
═══════════════════════════════════════════════════════════════════════ */
/* Размеры компонентов не зависят от общих стилей страницы */
[class^="ui-"], [class*=" ui-"], [class^="ui-"]::before, [class^="ui-"]::after { box-sizing: border-box; }
/* ── Контент страницы ─────────────────────────────────────────────────── */
.ui-content {
display: flex;
flex-direction: column;
gap: 20px;
padding: 28px 32px 32px;
font-family: var(--font-sans);
color: var(--ui-text);
}
.ui-stack { display: flex; flex-direction: column; gap: 12px; }
.ui-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ui-spacer { flex: 1; }
/* Основная колонка + правая (288 / 300 / 320 / 400) */
.ui-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.ui-split--288 { grid-template-columns: minmax(0, 1fr) 288px; }
.ui-split--300 { grid-template-columns: minmax(0, 1fr) 300px; }
.ui-split--400 { grid-template-columns: minmax(0, 1fr) 400px; }
/* ── Заголовок страницы ───────────────────────────────────────────────── */
.ui-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ui-page-header__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-page-header__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ui-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--ui-fs-crumbs); color: var(--ui-text-3); }
.ui-crumbs a { color: inherit; text-decoration: none; }
.ui-crumbs a:hover { color: var(--ui-text); }
.ui-crumbs__sep { color: var(--ui-text-muted); }
.ui-crumbs__current { color: var(--ui-text); font-weight: 600; }
.ui-h1 { margin: 0; font-size: var(--ui-fs-h1); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--ui-text); text-wrap: balance; }
.ui-h2 { margin: 0; font-size: var(--ui-fs-h2); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--ui-text); }
.ui-subtitle { margin: 0; font-size: var(--ui-fs-subtitle); color: var(--ui-text-3); line-height: 1.5; }
.ui-eyebrow { font-size: var(--ui-fs-eyebrow); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-text-muted); }
.ui-micro { font-size: 12px; color: var(--ui-text-muted); }
.ui-mono { font-family: var(--font-mono); }
/* ── Кнопки ───────────────────────────────────────────────────────────── */
.ui-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: inherit; line-height: 1.2; text-decoration: none; cursor: pointer;
border: 1px solid transparent; white-space: nowrap;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ui-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-btn[disabled], .ui-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* основная: 13px 22px, r11, #4f46e5, #fff 15/700 */
.ui-btn--primary { padding: 13px 22px; border-radius: var(--ui-r-11); background: var(--ui-accent); color: var(--ui-on-accent); font-size: 15px; font-weight: 700; }
.ui-btn--primary:hover { background: var(--ui-accent-dark); color: var(--ui-on-accent); }
/* вторичная: #fff + 1px #cbd5e1, #334155 14/600 */
.ui-btn--secondary { padding: 12px 18px; border-radius: var(--ui-r-11); background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-text-body); font-size: 14px; font-weight: 600; }
.ui-btn--secondary:hover { background: var(--ui-bg); color: var(--ui-text); }
/* третичная: #f6f7f9 + 1px #e2e8f0, 13.5/700 #334155 */
.ui-btn--tertiary { padding: 9px 15px; border-radius: var(--ui-r-10); background: var(--ui-bg); border-color: var(--ui-border); color: var(--ui-text-body); font-size: 13.5px; font-weight: 700; }
.ui-btn--tertiary:hover { background: var(--ui-sub); color: var(--ui-text); }
/* «Запустить» в редакторе кода: #16a34a, #fff 12.5/700, 6px 12px */
.ui-btn--run { padding: 6px 12px; border-radius: var(--ui-r-8); background: #16a34a; color: #fff; font-size: 12.5px; font-weight: 700; } /* живёт в тёмном редакторе кода — цвет одинаков в обеих темах */
.ui-btn--run:hover { filter: brightness(.95); color: #fff; }
/* опасное действие (отменить, отклонить) */
.ui-btn--danger { padding: 12px 18px; border-radius: var(--ui-r-11); background: var(--ui-surface); border-color: var(--ui-danger-border); color: var(--ui-danger-text); font-size: 14px; font-weight: 600; }
.ui-btn--danger:hover { background: var(--ui-danger-bg); }
.ui-btn--compact { padding: 11px 18px; } /* кнопки в герой-блоке «Сегодня» */
.ui-btn--block { width: 100%; }
.ui-btn--icon { padding: 10px 14px; } /* «···» в карточке */
/* ── Чипы-фильтры ─────────────────────────────────────────────────────── */
/* На телефоне ряд чипов переносится (flex-wrap), а не прячется под overflow:hidden. */
.ui-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ui-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 15px; border-radius: var(--ui-r-10);
background: var(--ui-surface); border: 1px solid var(--ui-border);
font-family: inherit; font-size: 13.5px; color: var(--ui-text-2); text-decoration: none; cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.ui-chip:hover { border-color: var(--ui-border-strong); color: var(--ui-text); }
.ui-chip.is-active { background: var(--ui-text); border-color: var(--ui-text); color: var(--ui-surface); font-weight: 700; }
.ui-chip--danger { border: 1.5px solid var(--ui-danger-border); color: var(--ui-danger-text); font-weight: 600; }
.ui-chip--danger.is-active { background: var(--ui-danger-text); border-color: var(--ui-danger-text); color: #fff; }
.ui-chip__count { opacity: .75; }
/* ── Сегментированный переключатель ───────────────────────────────────── */
.ui-segmented { display: inline-flex; gap: 3px; padding: 4px; border-radius: var(--ui-r-12); background: var(--ui-sub); }
.ui-segmented__item {
padding: 8px 14px; border-radius: var(--ui-r-9); border: 0; background: transparent;
font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ui-text-2); text-decoration: none; cursor: pointer;
}
.ui-segmented__item:hover { color: var(--ui-text); }
.ui-segmented__item.is-active { background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow-segment); }
.ui-segmented--block { display: flex; }
.ui-segmented--block .ui-segmented__item { flex: 1; text-align: center; }
/* ── Карточки ─────────────────────────────────────────────────────────── */
.ui-card { padding: 20px; border-radius: var(--ui-r-14); background: var(--ui-surface); border: 1px solid var(--ui-border); }
.ui-card--draft { border: 1.5px dashed var(--ui-border-strong); } /* черновик / неназначенное */
.ui-card--attention { border: 1.5px solid var(--ui-danger-border); } /* требует внимания */
.ui-card--accent { border: 1.5px solid var(--ui-accent-border); } /* акцентная */
.ui-card--link { display: block; color: inherit; text-decoration: none; transition: border-color .15s ease; }
.ui-card--link:hover { border-color: var(--ui-border-strong); }
.ui-card__title { margin: 0; font-size: var(--ui-fs-card-title); font-weight: 700; color: var(--ui-text); }
.ui-card__meta { font-size: 13.5px; color: var(--ui-text-3); }
.ui-card__divider { border: 0; border-top: 1px solid var(--ui-border-subtle); margin: 14px 0; }
/* подложка внутри карточки (блок деталей заявки и т.п.) */
.ui-inset { padding: 15px 17px; border-radius: var(--ui-r-12); background: var(--ui-bg); }
.ui-kv__label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-text-muted); }
.ui-kv__value { font-size: 15px; color: var(--ui-text); }
/* ── Статус-метки ─────────────────────────────────────────────────────── */
.ui-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--ui-r-8); font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.ui-status--success { background: var(--ui-success-bg); color: var(--ui-success-text); }
.ui-status--warning { background: var(--ui-warning-bg); color: var(--ui-warning-text); }
.ui-status--danger { background: var(--ui-danger-bg); color: var(--ui-danger-text); }
.ui-status--info { background: var(--ui-info-bg); color: var(--ui-info-text); }
.ui-status--neutral { background: var(--ui-neutral-bg); color: var(--ui-neutral-text); }
/* «горячий» счётчик (в сайдбаре и не только) */
.ui-hot { padding: 2px 8px; border-radius: var(--ui-r-7); background: var(--ui-danger-bg); color: var(--ui-danger-text); font-size: 12.5px; font-weight: 700; }
.ui-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-border-strong); flex: 0 0 auto; }
.ui-dot--accent { background: var(--ui-accent); }
.ui-dot--success { background: var(--ui-success); }
.ui-dot--danger { background: var(--ui-danger); }
.ui-dot--warning { background: var(--ui-warning); }
/* ── Прогресс-бар ─────────────────────────────────────────────────────── */
.ui-progress { height: 7px; border-radius: 4px; background: var(--ui-sub); overflow: hidden; }
.ui-progress__bar { display: block; height: 100%; border-radius: 4px; background: var(--ui-accent); }
.ui-progress--success .ui-progress__bar { background: var(--ui-success); }
.ui-progress--warning .ui-progress__bar { background: var(--ui-warning); }
.ui-progress--thin { height: 5px; }
/* ── Аватар ───────────────────────────────────────────────────────────── */
.ui-avatar {
width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
background: var(--ui-accent-bg); color: var(--ui-accent-dark);
font-size: 14.5px; font-weight: 800; overflow: hidden;
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar--neutral { background: var(--ui-neutral-bg); color: var(--ui-neutral-text); }
.ui-avatar--danger { background: var(--ui-danger-bg); color: var(--ui-danger-text); }
.ui-avatar--30 { width: 30px; height: 30px; font-size: 11px; }
.ui-avatar--38 { width: 38px; height: 38px; font-size: 13px; }
.ui-avatar--40 { width: 40px; height: 40px; font-size: 13.5px; }
.ui-avatar--46 { width: 46px; height: 46px; font-size: 15px; }
.ui-avatar--52 { width: 52px; height: 52px; font-size: 17px; }
/* стопка аватаров «Открыт 11 ученикам» */
.ui-avatar-stack { display: inline-flex; }
.ui-avatar-stack .ui-avatar { border: 2px solid var(--ui-surface); }
.ui-avatar-stack .ui-avatar + .ui-avatar { margin-left: -8px; }
/* ── Переключатель (тоггл) ────────────────────────────────────────────── */
/* */
.ui-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--ui-text); }
.ui-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-toggle__track {
width: 42px; height: 24px; padding: 2px; border-radius: 12px; flex: 0 0 auto;
background: var(--ui-border); display: flex; justify-content: flex-start; transition: background .15s ease;
}
.ui-toggle__track::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .2); }
.ui-toggle input:checked + .ui-toggle__track { background: var(--ui-accent); justify-content: flex-end; }
.ui-toggle input:focus-visible + .ui-toggle__track { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-toggle input:disabled + .ui-toggle__track { opacity: .5; }
/* ── Чекбокс ──────────────────────────────────────────────────────────── */
.ui-checkbox {
appearance: none; -webkit-appearance: none; margin: 0; flex: 0 0 auto; cursor: pointer;
width: 22px; height: 22px; border-radius: var(--ui-r-7);
border: 2px solid var(--ui-border-strong); background: var(--ui-surface);
display: inline-grid; place-content: center;
}
.ui-checkbox:checked {
border-color: var(--ui-success); background: var(--ui-success)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
center / 14px no-repeat;
}
.ui-checkbox:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-checkbox--sm { width: 20px; height: 20px; }
/* ── Поля ввода ───────────────────────────────────────────────────────── */
.ui-field { display: flex; flex-direction: column; gap: 6px; }
.ui-label { font-size: 13.5px; font-weight: 600; color: var(--ui-text-body); }
.ui-hint { font-size: 12.5px; color: var(--ui-text-3); }
.ui-input, .ui-select, .ui-textarea {
width: 100%; padding: 13px 15px; border-radius: var(--ui-r-11);
border: 1px solid var(--ui-border-strong); background: var(--ui-surface);
font-family: inherit; font-size: 15px; color: var(--ui-text);
}
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border: 1.5px solid var(--ui-accent); padding: 12.5px 14.5px; }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-text-muted); }
.ui-textarea { min-height: 74px; resize: vertical; line-height: 1.55; }
.ui-field-error { font-size: 12.5px; color: var(--ui-danger-text); }
/* поиск с лупой */
.ui-search { position: relative; min-width: 210px; }
.ui-search .ui-input { padding: 11px 15px 11px 38px; }
.ui-search .ui-input:focus { padding: 10.5px 14.5px 10.5px 37.5px; }
.ui-search__icon { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ui-text-muted); pointer-events: none; }
/* ── Сноска-объяснение внизу экрана ───────────────────────────────────── */
.ui-note { padding: 16px 20px; border-radius: var(--ui-r-13); background: var(--ui-sub); font-size: 13.5px; line-height: 1.55; color: var(--ui-text-2); }
.ui-note b, .ui-note strong { color: var(--ui-text); }
/* ── Тёмная карточка-пояснение (одинакова в обеих темах) ─────────────── */
.ui-explainer { padding: 18px 20px; border-radius: var(--ui-r-15); background: var(--color-plane); } /* #0f172a; в тёмной теме — поднятый блок, чтобы не слипаться с фоном */
.ui-explainer__title { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: #fff; }
.ui-explainer__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ui-on-dark-2); }
/* ── Полоса-предупреждение («4 материала без раздела») ────────────────── */
.ui-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--ui-r-12); font-size: 14px; }
.ui-banner--warning { background: var(--ui-warning-bg); color: var(--ui-warning-text); }
.ui-banner--danger { background: var(--ui-danger-bg); color: var(--ui-danger-text); }
.ui-banner--info { background: var(--ui-accent-bg); color: var(--ui-accent-dark); }
.ui-banner__action { margin-left: auto; }
/* ── Состояния страницы: пусто / загрузка / ошибка / нет доступа ──────── */
/* Пустое состояние всегда отвечает на два вопроса: почему пусто и что нажать. */
.ui-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 20px; }
.ui-state--inset { background: var(--ui-bg); border-radius: var(--ui-r-14); }
.ui-state__icon { width: 64px; height: 64px; border-radius: var(--ui-r-18); display: grid; place-items: center; background: var(--ui-accent-bg); color: var(--ui-accent); }
.ui-state__icon svg { width: 28px; height: 28px; }
.ui-state--success .ui-state__icon { background: var(--ui-success-bg); color: var(--ui-success); }
.ui-state--warning .ui-state__icon { background: var(--ui-warning-bg); color: var(--ui-warning-text); }
.ui-state--danger .ui-state__icon { background: var(--ui-danger-bg); color: var(--ui-danger-text); }
.ui-state--neutral .ui-state__icon { background: var(--ui-neutral-bg); color: var(--ui-neutral-text); }
.ui-state__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--ui-text); }
.ui-state__text { margin: 0; max-width: 290px; font-size: 14.5px; line-height: 1.6; color: var(--ui-text-3); text-wrap: pretty; }
.ui-state__text--wide { max-width: 420px; }
.ui-state__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.ui-state__link { font-size: 13.5px; color: var(--ui-accent); text-decoration: none; }
/* Загрузка — скелет повторяет форму будущего содержимого */
.ui-skeleton { display: block; border-radius: var(--ui-r-8); background: var(--ui-sub); position: relative; overflow: hidden; }
.ui-skeleton::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
transform: translateX(-100%); animation: ui-shimmer 1.4s ease-in-out infinite;
}
[data-theme="dark"] .ui-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
.ui-skeleton--line { height: 12px; }
.ui-skeleton--title { height: 20px; width: 40%; }
.ui-skeleton--card { height: 92px; border-radius: var(--ui-r-14); }
@keyframes ui-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ui-skeleton::after { animation: none; } }
/* ── Нижняя навигация телефона (ученик и любые новые каркасы) ─────────── */
.ui-bottom-nav { display: flex; background: var(--ui-surface); border-top: 1px solid var(--ui-border-soft); padding-bottom: env(safe-area-inset-bottom, 0px); }
.ui-bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; font-size: 11px; font-weight: 600; color: var(--ui-text-3); text-decoration: none; }
.ui-bottom-nav__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-border-strong); }
.ui-bottom-nav__item.is-active { color: var(--ui-accent); }
.ui-bottom-nav__item.is-active .ui-bottom-nav__dot { background: var(--ui-accent); }
/* ── Телефон ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.ui-split, .ui-split--288, .ui-split--300, .ui-split--400 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.ui-content { padding: 16px; gap: 12px; }
.ui-h1 { font-size: var(--ui-fs-h1-mobile); }
.ui-page-header { align-items: flex-start; }
.ui-search { min-width: 0; width: 100%; }
.ui-toggle__track { width: 40px; height: 23px; }
.ui-toggle__track::after { width: 19px; height: 19px; }
.ui-btn--primary.ui-btn--mobile-block { width: 100%; padding: 15px; border-radius: var(--ui-r-12); }
.ui-checkbox { width: 20px; height: 20px; }
}
/* Кнопка внутри вертикального стека не растягивается на всю ширину (если не --block) */
.ui-stack > .ui-btn:not(.ui-btn--block) { align-self: flex-start; }
/* ══ Раскладка страниц ui-* внутри каркаса учителя ═══════════════════════
Страница в обёртке .ui-page задаёт отступы сама (28px 32px 32px), а правая
панель встаёт к краю (макеты 20/21: колонка 400px на всю высоту). */
.dashboard-content:has(> .ui-page) { padding: 0; }
.ui-page { min-height: 100%; }
.ui-page--with-pane { display: flex; align-items: stretch; }
.ui-page--with-pane > .ui-content { flex: 1; min-width: 0; }
.ui-pane {
width: 400px; flex: none; background: var(--ui-surface); border-left: 1px solid var(--ui-border-soft);
padding: 28px 24px; display: flex; flex-direction: column; gap: 16px;
}
.ui-pane--320 { width: 320px; }
.ui-section { display: flex; flex-direction: column; gap: 10px; }
.ui-section__head { display: flex; align-items: center; gap: 12px; }
.ui-section__head .ui-btn { margin-left: auto; }
/* Обложка сущности (группа, курс): 52×52, r14, инициалы 19/800 */
.ui-cover {
width: 52px; height: 52px; flex: none; border-radius: var(--ui-r-14);
display: inline-flex; align-items: center; justify-content: center;
background: var(--ui-accent-bg); color: var(--ui-accent-dark); font-size: 19px; font-weight: 800;
}
.ui-cover--neutral { background: var(--ui-neutral-bg); color: var(--ui-neutral-text); }
.ui-cover--danger { background: var(--ui-danger-bg); color: var(--ui-danger-text); }
.ui-cover--40 { width: 40px; height: 40px; border-radius: var(--ui-r-12); font-size: 15px; }
/* Маленькая метка внутри вложенной карточки: 4px 9px, r7, 12px */
.ui-status--sm { padding: 4px 9px; border-radius: var(--ui-r-7); font-size: 12px; }
/* Строка списка внутри страницы (участник группы и т.п.): 15px 18px, r13 */
.ui-list-row {
display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: var(--ui-r-13);
background: var(--ui-surface); border: 1px solid var(--ui-border);
}
.ui-list-row--attention { border: 1.5px solid var(--ui-danger-border); }
.ui-list-row--more { justify-content: center; border-style: dashed; border-color: var(--ui-border-strong); color: var(--ui-text-3); font-size: 13.5px; cursor: pointer; }
.ui-list-row__name { font-size: 15px; font-weight: 700; color: var(--ui-text); }
.ui-list-row__sub { font-size: 12.5px; color: var(--ui-text-muted); }
.ui-list-row__sub--danger { color: var(--ui-danger-text); }
/* Вложенная карточка в правой панели: подложка #f6f7f9, рамка #eef1f5, r12 */
.ui-subcard { padding: 14px 16px; border-radius: var(--ui-r-12); background: var(--ui-bg); border: 1px solid var(--ui-border-subtle); display: flex; flex-direction: column; gap: 6px; }
.ui-subcard__title { font-size: 14.5px; font-weight: 700; color: var(--ui-text); }
.ui-subcard__meta { font-size: 12.5px; color: var(--ui-text-3); }
/* Кнопки внутри карточек правой панели: 9px 15px, r10, 13.5/700 */
.ui-btn--small { padding: 9px 15px; border-radius: var(--ui-r-10); font-size: 13.5px; font-weight: 700; }
/* ── Модальное окно (создание, настройки, добавление) — нативный