/* Новый дизайн GPCRM — этап 1 (#277): цвета и шрифт за бетой.
   Канон и таблица «старый токен → новое значение»: 06-website-and-marketing/design-system-crm.md, раздел 1.
   Всё здесь действует ТОЛЬКО при html[data-ui="new"] (переключатель «Новый дизайн (бета)»
   внизу меню, выбор хранится в браузере — localStorage 'gpcrm-ui'). Без атрибута файл ни на что не влияет.
   Подключается ПОСЛЕ встроенного <style> index.html/login.html: светлый блок здесь той же
   специфичности (0,2,0), что и старый тёмный, — тёмные блоки ниже специфичнее (0,3,0) и побеждают.
   Hex-коды — только в блоках тем. */

@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Светлая тема ─────────────────────────────────────────────── */
:root[data-ui="new"] {
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ground: #F7F6F2;
  --surface: #FFFFFF;
  --surface-2: #EFEEE8;
  --ink: #14161C;
  --ink-soft: #454955;
  --ink-faint: #676B76;
  --line: #E4E2DA;
  --line-strong: #CDCAC0;
  --field-border: #858279;

  --accent: #1A7486;
  --accent-hover: #135D6B;
  --accent-bg: #DFF1F4;
  --on-accent: #FFFFFF;
  --accent-ink: var(--on-accent);

  --marker: #FFD84D;
  --marker-soft: #FFF0B0;
  --on-marker: #14161C;

  --success: #1B7A4B; --success-bg: #E3F4EA;
  --warning: #8A5A00; --warning-bg: #FFF3D6;
  --danger: #C42B2B;  --danger-bg: #FDE7E7;
  --diag: #A3501C;    --diag-bg: #FBEADD;

  --type-individual: var(--success); --type-individual-bg: var(--success-bg);
  --type-group: #3B55C4; --type-group-bg: #E7EBFB;
  --type-diagnostic: var(--diag); --type-diagnostic-bg: var(--diag-bg);
  --type-trial: #7B42AE; --type-trial-bg: #F2E8FA;

  --t1: #1A7486; --t2: #C42B2B; --t3: #8A5A00; --t4: #3B55C4; --t5: #1B7A4B; --t6: #7B42AE;

  --on-fill: #FFFFFF;
  --on-success: var(--on-fill); --on-danger: var(--on-fill); --on-warning: var(--on-fill); --on-muted: var(--on-fill);

  /* Тёмно-синего сайдбара больше нет — меню на общей поверхности */
  --sb-bg: var(--surface);
  --sb-bg-2: var(--surface-2);
  --sb-ink: var(--ink);
  --sb-ink-soft: var(--ink-soft);
  --sb-ink-faint: var(--ink-faint);
  --sb-line: var(--line);
  --sb-active-bg: var(--accent-bg);
  --sb-active-ink: var(--accent);

  --shadow: 0 1px 2px rgba(20, 22, 28, .06), 0 2px 8px rgba(20, 22, 28, .05);
  --shadow-sm: var(--shadow);
  --shadow-pop: 0 8px 28px rgba(20, 22, 28, .10);
  --overlay: rgba(14, 15, 19, .55);
}

/* ── Тёмная тема (по системе, если не выбрана светлая) ───────── */
@media (prefers-color-scheme: dark) {
  :root[data-ui="new"]:not([data-theme="light"]) {
    --ground: #0E0F13;
    --surface: #17191F;
    --surface-2: #21242C;
    --ink: #F2F3F5;
    --ink-soft: #B6BAC4;
    --ink-faint: #8C909B;
    --line: #2A2D36;
    --line-strong: #3B3F4A;
    --field-border: #6E7380;

    --accent: #5FC4DA;
    --accent-hover: #8AD6E6;
    --accent-bg: #123238;
    --on-accent: #0E0F13;

    --marker-soft: #3B3317;

    --success: #4CC38A; --success-bg: #12291D;
    --warning: #E5B547; --warning-bg: #2B2410;
    --danger: #FF7A7A;  --danger-bg: #331616;
    --diag: #F0A06A;    --diag-bg: #33200F;

    --type-group: #93A6F5; --type-group-bg: #1C2244;
    --type-trial: #C9A0EE; --type-trial-bg: #2A1C3B;

    --t1: #5FC4DA; --t2: #FF7A7A; --t3: #E5B547; --t4: #93A6F5; --t5: #4CC38A; --t6: #C9A0EE;

    --on-fill: #0E0F13;

    --shadow: 0 0 0 1px rgba(255, 255, 255, .02);
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
/* Явно выбранная тёмная тема — те же значения */
:root[data-ui="new"][data-theme="dark"] {
  --ground: #0E0F13;
  --surface: #17191F;
  --surface-2: #21242C;
  --ink: #F2F3F5;
  --ink-soft: #B6BAC4;
  --ink-faint: #8C909B;
  --line: #2A2D36;
  --line-strong: #3B3F4A;
  --field-border: #6E7380;

  --accent: #5FC4DA;
  --accent-hover: #8AD6E6;
  --accent-bg: #123238;
  --on-accent: #0E0F13;

  --marker-soft: #3B3317;

  --success: #4CC38A; --success-bg: #12291D;
  --warning: #E5B547; --warning-bg: #2B2410;
  --danger: #FF7A7A;  --danger-bg: #331616;
  --diag: #F0A06A;    --diag-bg: #33200F;

  --type-group: #93A6F5; --type-group-bg: #1C2244;
  --type-trial: #C9A0EE; --type-trial-bg: #2A1C3B;

  --t1: #5FC4DA; --t2: #FF7A7A; --t3: #E5B547; --t4: #93A6F5; --t5: #4CC38A; --t6: #C9A0EE;

  --on-fill: #0E0F13;

  --shadow: 0 0 0 1px rgba(255, 255, 255, .02);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ── Шрифт: один Onest вместо Unbounded / Golos Text / IBM Plex Mono ──
   Старые шрифты заданы точечно в ~137 правилах (index.html + app.js, в т.ч. инлайн),
   поэтому перекрываем одним правилом с !important. Цифры — табличные везде (раньше это
   делал моноширинный Plex Mono), чтобы колонки и суммы не «прыгали». */
:root[data-ui="new"] body,
:root[data-ui="new"] body * {
  font-family: var(--font) !important;
  font-variant-numeric: tabular-nums;
}
:root[data-ui="new"] body { -webkit-font-smoothing: antialiased; }

/* ── Переключатель «Новый дизайн (бета)» внизу меню ─────────────── */
:root[data-ui="new"] .ui-beta input { accent-color: var(--accent); }


/* ══════════ Этап 2 (#278, 20.10.2026): каркас «вариант 5» ══════════
   Канон — design-system-crm.md, раздел 4 «Каркас». Разметка — index.html
   (#appHead, #pageCrumbs, #menuBtn, #navRecent, #navScrim), логика — блок
   «каркас вариант 5» в конце index.html. Узкая полоса разделов (.icon-rail)
   и логотип в колонке скрыты: раздел выбирается кнопкой в шапке. */

:root[data-ui="new"] body { flex-direction: column; }
:root[data-ui="new"] .shell { flex: 1 1 auto; min-height: 0; }
:root[data-ui="new"] .icon-rail,
:root[data-ui="new"] .sidebar .brand,
:root[data-ui="new"] #pageTitle { display: none; }

/* Шапка */
:root[data-ui="new"] .app-head {
  display: flex; align-items: center; gap: 16px; flex: none; position: relative; z-index: 20;
  padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
}
:root[data-ui="new"] .app-head-brand { display: flex; align-items: center; gap: 10px; flex: none; }
:root[data-ui="new"] .app-head-brand .brand-mark { width: 36px; height: 36px; border-radius: 10px; border-color: var(--line); }
:root[data-ui="new"] .app-head-word { font-weight: 800; font-size: 15px; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
:root[data-ui="new"] .app-head-word em { font-style: normal; color: var(--accent); }
:root[data-ui="new"] .app-head-grow { flex: 1; }

/* Кнопка текущего раздела + всплывающее окно с 4 разделами */
:root[data-ui="new"] .ws-pick { position: relative; flex: none; }
:root[data-ui="new"] .ws-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px 6px 12px;
  border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: 14px; line-height: 1.2; cursor: pointer;
  transition: border-color .14s, background-color .14s;
}
:root[data-ui="new"] .ws-btn:hover { border-color: var(--ink); }
:root[data-ui="new"] .ws-btn[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-bg); }
:root[data-ui="new"] .ws-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
:root[data-ui="new"] .ws-btn-icon { display: flex; color: var(--accent); }
:root[data-ui="new"] .ws-btn-icon svg { width: 16px; height: 16px; }
:root[data-ui="new"] .ws-caret { color: var(--ink-faint); transition: transform .14s; }
:root[data-ui="new"] .ws-btn[aria-expanded="true"] .ws-caret { transform: rotate(180deg); }
:root[data-ui="new"] .ws-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(22rem, calc(100vw - 32px));
  padding: 8px; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow-pop); animation: wsPopIn .22s cubic-bezier(.2,.8,.2,1);
}
:root[data-ui="new"] .ws-pop[hidden] { display: none; }
@keyframes wsPopIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
:root[data-ui="new"] .ws-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px;
  border: 0; border-radius: 14px; background: transparent; color: var(--ink-soft); text-align: left; cursor: pointer;
}
:root[data-ui="new"] .ws-item:hover { background: var(--surface-2); color: var(--ink); }
:root[data-ui="new"] .ws-item[aria-current="true"] { background: var(--accent-bg); color: var(--ink); }
:root[data-ui="new"] .ws-item:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
:root[data-ui="new"] .ws-item-icon { display: flex; color: var(--accent); flex: none; }
:root[data-ui="new"] .ws-item-icon svg { width: 18px; height: 18px; }
:root[data-ui="new"] .ws-item-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
:root[data-ui="new"] .ws-item-text b { font-weight: 650; font-size: 15px; color: var(--ink); }
:root[data-ui="new"] .ws-item-text span { font-size: 12px; color: var(--ink-faint); }
:root[data-ui="new"] .ws-item-badge {
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  font-weight: 700; font-size: 11px; background: var(--marker); color: var(--on-marker);
}
:root[data-ui="new"] .ws-item-check { color: var(--accent); flex: none; }

/* Поиск — в шапке */
:root[data-ui="new"] .app-head-search { display: flex; min-width: 0; }
:root[data-ui="new"] .app-head-search .search {
  margin-left: 0; width: 20rem; max-width: 100%; background: var(--surface); border: 1.5px solid var(--line-strong);
  border-radius: 999px; padding: 7px 14px; font-size: 14px;
}
:root[data-ui="new"] .app-head-search .search:focus-within { border-color: var(--accent); }
:root[data-ui="new"] .app-head-search .search input { font-size: 14px; }

/* Левая колонка: подразделы выбранного раздела, «Недавние», тема, бета, профиль */
:root[data-ui="new"] .sidebar {
  width: 240px; flex: 0 0 240px; background: var(--surface); border-right: 1px solid var(--line);
  padding: 12px 12px 0; gap: 2px; overflow-y: auto; color: var(--ink);
}
:root[data-ui="new"] .nav-group-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; padding: 14px 10px 4px; color: var(--ink-faint);
}
:root[data-ui="new"] .nav-item {
  min-height: 36px; padding: 7px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink-soft);
  transition: background-color .14s, color .14s;
}
:root[data-ui="new"] .nav-item:hover { background: var(--surface-2); color: var(--ink); }
:root[data-ui="new"] .nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 650; }
:root[data-ui="new"] .nav-item:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
:root[data-ui="new"] .nav-badge,
:root[data-ui="new"] .nav-item.active .nav-badge,
:root[data-ui="new"] .sidebar .badge-count {
  background: var(--marker); color: var(--on-marker); font-size: 11px; font-weight: 700; padding: 2px 7px; margin-left: auto;
}
:root[data-ui="new"] .nav-recent { display: grid; gap: 2px; margin-top: 4px; }
:root[data-ui="new"] .nav-recent-av {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface-2); color: var(--ink-soft); font-size: 10px; font-weight: 700;
}
:root[data-ui="new"] .nav-recent-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="new"] .theme-row { border-top: 1px solid var(--line); padding-top: 12px; margin-top: auto; }
:root[data-ui="new"] .nav-recent:empty + .theme-row,
:root[data-ui="new"] .nav-recent + .theme-row { margin-top: auto; }
:root[data-ui="new"] .sidebar-foot {
  position: sticky; bottom: 0; background: var(--surface); margin: 0 -12px; padding: 10px 22px 12px;
  border-top: 1px solid var(--line);
}
:root[data-ui="new"] .avatar { width: 32px; height: 32px; background: var(--accent-bg); color: var(--accent); font-size: 12px; }
:root[data-ui="new"] .who-name { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
:root[data-ui="new"] .who-role { font-size: 12px; color: var(--ink-faint); }

/* Строка над рабочей областью: кнопка меню (узкое окно) + крошки */
:root[data-ui="new"] .topbar { padding: 10px 24px; gap: 12px; min-height: 52px; }
:root[data-ui="new"] .crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--ink-faint); min-width: 0; }
:root[data-ui="new"] .crumbs b { color: var(--ink); font-weight: 600; }
:root[data-ui="new"] .crumbs svg { flex: none; }
:root[data-ui="new"] .content { padding: 24px 24px 60px; }

/* Узкое окно (< 860px): колонка — выдвижная панель, кнопка ☰ в строке крошек */
:root[data-ui="new"] .menu-btn {
  display: none; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer;
}
:root[data-ui="new"] .menu-btn:hover { background: var(--surface-2); color: var(--ink); }
@media (max-width: 860px) {
  :root[data-ui="new"] .menu-btn { display: inline-flex; }
  :root[data-ui="new"] .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; max-width: 86vw;
    transform: translateX(-105%); transition: transform .22s cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow-pop);
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }
  :root[data-ui="new"] .sidebar.open { transform: none; }
  :root[data-ui="new"] body:has(.sidebar.open) .crm-helper-fab { display: none; }  /* «?» не висит над открытым меню */
  :root[data-ui="new"] .nav-scrim.open { display: block; position: fixed; inset: 0; z-index: 69; background: var(--overlay); }
  :root[data-ui="new"] .app-head { gap: 10px; padding: 8px 12px; }
  :root[data-ui="new"] .app-head-word { display: none; }
  :root[data-ui="new"] .app-head-grow { display: none; }
  :root[data-ui="new"] .app-head-search { flex: 1; }
  :root[data-ui="new"] .app-head-search .search { width: 100%; }
  :root[data-ui="new"] .topbar { padding: 8px 12px; }
  /* низ — 96px: место под плавающую «?» помощника (50px + 20px от края), чтобы она не закрывала последние строки (#314 1.6) */
  :root[data-ui="new"] .content { padding: 16px 12px 96px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-ui="new"] .ws-pop, :root[data-ui="new"] .sidebar { animation: none; transition: none; }
}


/* ══════════ Этап 3 (#279, 20.10.2026): общие элементы ══════════
   Канон — design-system-crm.md, раздел 4 «Базовые элементы». Только переопределение
   существующих классов (.btn, .pill, .chip, .panel, .stat-card, таблицы, поля,
   модалка, .switch, .kv) — разметка и классы не меняются (на них опираются e2e).
   Размеры, заданные инлайн-стилями в app.js, остаются до этапа 4 (по экранам). */

/* Фокус с клавиатуры — бирюзовая рамка везде */
:root[data-ui="new"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Кнопки: таблетки 36px; вторичная — обводка; главная — бирюза; опасная — красный текст с обводкой */
:root[data-ui="new"] .btn {
  min-height: 36px; padding: 6px 16px; border-radius: 999px; border: 1.5px solid var(--field-border);
  background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.2; gap: 8px;
  transition: background-color .14s, border-color .14s, color .14s, transform .14s;
}
:root[data-ui="new"] .btn:hover { border-color: var(--ink); }
:root[data-ui="new"] .btn:active { transform: translateY(1px) scale(.99); }
:root[data-ui="new"] .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root[data-ui="new"] .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
:root[data-ui="new"] .btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
:root[data-ui="new"] .btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
:root[data-ui="new"] .btn:disabled { opacity: .45; transform: none; }

/* Выпадающие списки — как поля */
:root[data-ui="new"] select {
  min-height: 36px; border-radius: 8px; border: 1.5px solid var(--field-border); background-color: var(--surface);
  font-size: 14px; font-weight: 500; color: var(--ink);
}
:root[data-ui="new"] select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

/* Пилюли статусов: точка + слово */
:root[data-ui="new"] .pill,
:root[data-ui="new"] .stage-pill { font-size: 13px; font-weight: 600; padding: 3px 10px; gap: 6px; border-radius: 999px; }
:root[data-ui="new"] .pill::before,
:root[data-ui="new"] .stage-pill::before { width: 7px; height: 7px; }
:root[data-ui="new"] .status-dot { font-size: 12px; padding: 3px 10px; border-radius: 999px; }

/* Чипы (фильтры, атрибуты) */
:root[data-ui="new"] .chip {
  font-size: 13px; font-weight: 600; padding: 5px 12px; border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--ink-soft); transition: border-color .14s, background-color .14s, color .14s;
}
:root[data-ui="new"] .chip:hover { border-color: var(--ink-faint); color: var(--ink); }
:root[data-ui="new"] .chip.active,
:root[data-ui="new"] .chip-checkbox:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* Панели и плитки с цифрами */
:root[data-ui="new"] .panel { border-radius: 22px; border-color: var(--line); box-shadow: var(--shadow); }
:root[data-ui="new"] .panel-head { padding: 16px 20px; gap: 12px; }
:root[data-ui="new"] .panel-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
:root[data-ui="new"] .panel-sub { font-size: 13px; color: var(--ink-faint); }
:root[data-ui="new"] .stat-card { border-radius: 14px; border-color: var(--line); box-shadow: var(--shadow); padding: 16px 18px; }
:root[data-ui="new"] .stat-card.stat-link:hover { border-color: var(--accent); }
:root[data-ui="new"] .stat-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ink-faint); }
:root[data-ui="new"] .stat-value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
:root[data-ui="new"] .stat-delta { font-size: 13px; }

/* Таблицы: шапка — метки капсом на вторичной поверхности */
:root[data-ui="new"] table { font-size: 14px; }
:root[data-ui="new"] th { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ink-faint); background: var(--surface-2); border-bottom-color: var(--line); }
:root[data-ui="new"] td { border-bottom-color: var(--line); }
:root[data-ui="new"] tbody tr { transition: background-color .14s; }
:root[data-ui="new"] tbody tr:hover { background: var(--surface-2); }

/* Пары «подпись — значение» в карточках */
:root[data-ui="new"] .kv-label,
:root[data-ui="new"] .kv-section-title { font-size: 11px; letter-spacing: .06em; color: var(--ink-faint); }
:root[data-ui="new"] .kv-value { font-size: 15px; font-weight: 600; }

/* Сегмент-переключатели («Таблица / Канбан», «Расписание / календари») */
:root[data-ui="new"] .switch { border-radius: 999px; padding: 3px; gap: 2px; background: var(--surface-2); }
:root[data-ui="new"] .switch-btn { border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; min-height: 32px; }
:root[data-ui="new"] .switch-btn.active { box-shadow: var(--shadow); }
:root[data-ui="new"] .periods { border-radius: 999px; }
:root[data-ui="new"] .period-btn { border-radius: 999px; font-size: 11px; padding: 4px 10px; }

/* Модальное окно: скругление 22px, тень, плавное появление; узкий экран — лист снизу */
:root[data-ui="new"] .modal-overlay { background: var(--overlay); }
:root[data-ui="new"] .modal {
  border-radius: 22px; border-color: var(--line); box-shadow: var(--shadow-pop); padding: 24px;
  animation: modalIn .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
:root[data-ui="new"] .modal h3 { font-size: 20px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 18px; }
@media (max-width: 560px) {
  :root[data-ui="new"] .modal-overlay { align-items: flex-end; }
  :root[data-ui="new"] .modal {
    width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: 22px 22px 0 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* Поля форм: подпись обычным регистром над полем, рамка 1.5px, бирюзовый фокус.
   40px на компьютере, 44px на телефоне (поправка к канону, раздел 3). */
:root[data-ui="new"] .modal .form-field label,
:root[data-ui="new"] .tg-quick-panel .form-field label {
  font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-soft); margin-bottom: 6px;
}
:root[data-ui="new"] .modal .form-field input,
:root[data-ui="new"] .modal .form-field select,
:root[data-ui="new"] .modal .form-field textarea,
:root[data-ui="new"] .modal input.dr-input,
:root[data-ui="new"] .tg-quick-panel .form-field input,
:root[data-ui="new"] .tg-quick-panel .form-field select,
:root[data-ui="new"] .tg-quick-panel .form-field textarea,
:root[data-ui="new"] .kv-value input,
:root[data-ui="new"] .kv-value select,
:root[data-ui="new"] [data-schedule] select,
:root[data-ui="new"] [data-schedule] input,
:root[data-ui="new"] .wz-addslot select,
:root[data-ui="new"] .wz-addslot input,
:root[data-ui="new"] .filters-bar input[type="text"],
:root[data-ui="new"] .filters-bar input[type="date"] {
  min-height: 40px; padding: 8px 12px; border-radius: 8px; border: 1.5px solid var(--field-border);
  background-color: var(--surface); color: var(--ink); font-size: 14px;  /* только цвет: стрелку списков рисует background-image базового select */
}
:root[data-ui="new"] .modal .form-field select,
:root[data-ui="new"] .tg-quick-panel .form-field select,
:root[data-ui="new"] .kv-value select,
:root[data-ui="new"] [data-schedule] select,
:root[data-ui="new"] .wz-addslot select {
  padding-right: 32px; appearance: none; -webkit-appearance: none;  /* стрелка — та же, что у базового select (index.html); правило окон стирает её сокращённым background */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238a8fa3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
:root[data-ui="new"] .modal .form-field textarea,
:root[data-ui="new"] .tg-quick-panel .form-field textarea { min-height: 72px; line-height: 1.45; }
:root[data-ui="new"] .modal .form-field input:focus,
:root[data-ui="new"] .modal .form-field select:focus,
:root[data-ui="new"] .modal .form-field textarea:focus,
:root[data-ui="new"] .tg-quick-panel .form-field input:focus,
:root[data-ui="new"] .tg-quick-panel .form-field select:focus,
:root[data-ui="new"] .tg-quick-panel .form-field textarea:focus,
:root[data-ui="new"] .kv-value input:focus,
:root[data-ui="new"] .kv-value select:focus,
:root[data-ui="new"] [data-schedule] select:focus,
:root[data-ui="new"] [data-schedule] input:focus,
:root[data-ui="new"] .wz-addslot select:focus,
:root[data-ui="new"] .wz-addslot input:focus,
:root[data-ui="new"] .filters-bar input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg);
}
/* Календарь выбора даты — в цвет темы (раньше всегда тёмный, color-scheme:dark) */
:root[data-ui="new"] .filters-bar input[type="date"] { color-scheme: inherit; }
:root[data-ui="new"] .modal .form-actions,
:root[data-ui="new"] .tg-quick-panel .form-actions { gap: 8px; margin-top: 20px; }
@media (max-width: 560px) {
  :root[data-ui="new"] .modal .form-field input,
  :root[data-ui="new"] .modal .form-field select,
  :root[data-ui="new"] .modal .form-field textarea { min-height: 44px; }
  :root[data-ui="new"] .btn { min-height: 44px; }
  /* 16px — порог iOS: с viewport (#314 1.6) поле мельче приближает страницу при фокусе */
  :root[data-ui="new"] input:not([type="checkbox"]):not([type="radio"]),
  :root[data-ui="new"] select,
  :root[data-ui="new"] textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-ui="new"] .modal { animation: none; }
  :root[data-ui="new"] .btn, :root[data-ui="new"] .chip, :root[data-ui="new"] tbody tr { transition: none; }
}

/* «Недавние»: длинное имя — многоточием, не за край колонки */
:root[data-ui="new"] .nav-recent-item { min-width: 0; overflow: hidden; }

/* Страница входа (login.html) — карточка, поля и кнопка по канону */
:root[data-ui="new"] body > form.card { border-radius: 22px; border-color: var(--line); box-shadow: var(--shadow-pop); padding: 32px; }
:root[data-ui="new"] body > form.card h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
:root[data-ui="new"] body > form.card label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
:root[data-ui="new"] body > form.card input {
  min-height: 44px; border-radius: 8px; border: 1.5px solid var(--field-border); background: var(--surface); font-size: 15px;
}
:root[data-ui="new"] body > form.card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
:root[data-ui="new"] body > form.card button { min-height: 44px; border-radius: 999px; font-size: 15px; }
:root[data-ui="new"] body > form.card button:hover { background: var(--accent-hover); }


/* ══════════ Этап 4 (#280, 20.10.2026): карточка ученика «вариант 2» ══════════
   Мокап — crm design new/карточка-ученика-мокап.html; канон — «Компоненты карточки
   ученика». Разметка — #studentBeta + data-tab у существующих блоков, логика —
   блок «карточка ученика» в конце index.html. */
:root[data-ui="new"] #view-student .st-beta { display: block; padding: 0 24px 4px; }
:root[data-ui="new"] #view-student .st-beta-only:not([hidden]) { display: inline-flex; }
:root[data-ui="new"] #studentName .stage-pill { display: none; }  /* стадию показывает воронка */

/* Шапка */
:root[data-ui="new"] #view-student .profile-head { padding: 22px 24px 16px; gap: 16px; flex-wrap: wrap; }
:root[data-ui="new"] #view-student .profile-avatar { width: 48px; height: 48px; background: var(--accent-bg); color: var(--accent); font-weight: 800; }
:root[data-ui="new"] #view-student .profile-name { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
:root[data-ui="new"] #view-student .profile-meta { font-size: 14px; color: var(--ink-soft); }
:root[data-ui="new"] #view-student .card-actions { gap: 8px; flex-wrap: wrap; }
:root[data-ui="new"] #view-student .card-actions .btn-danger { border-color: transparent; }
:root[data-ui="new"] #view-student .card-actions .btn-danger:hover { background: var(--danger-bg); }

/* Вкладки: показываем только блоки активной вкладки */
:root[data-ui="new"] #view-student [data-tab] { display: none; }
:root[data-ui="new"] #view-student .panel[data-st-tab="over"] [data-tab="over"],
:root[data-ui="new"] #view-student .panel[data-st-tab="enr"] [data-tab="enr"],
:root[data-ui="new"] #view-student .panel[data-st-tab="pay"] [data-tab="pay"],
:root[data-ui="new"] #view-student .panel[data-st-tab="att"] [data-tab="att"],
:root[data-ui="new"] #view-student .panel[data-st-tab="docs"] [data-tab="docs"],
:root[data-ui="new"] #view-student .panel[data-st-tab="notes"] [data-tab="notes"] { display: block; }
:root[data-ui="new"] #view-student .panel[data-st-tab="contacts"] [data-tab="contacts"] { display: grid; }
/* Вкладка «Класс» (21.10.2026): ссылка на кабинет ученика; в «Контактах» прежней кнопки при бете нет */
:root[data-ui="new"] #view-student .panel[data-st-tab="class"] [data-tab="class"] { display: flex; }
:root[data-ui="new"] #view-student .st-class { gap: 16px; align-items: flex-start; padding: 20px 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); margin-top: 8px; }
:root[data-ui="new"] #view-student .st-class-ic { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); }
:root[data-ui="new"] #view-student .st-class-m { display: grid; gap: 6px; min-width: 0; }
:root[data-ui="new"] #view-student .st-class-m b { font-size: 17px; font-weight: 700; }
:root[data-ui="new"] #view-student .st-class-m > span { font-size: 14px; color: var(--ink-soft); line-height: 1.5; max-width: 60ch; }
:root[data-ui="new"] #view-student .st-class-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
:root[data-ui="new"] #view-student .student-view-chips button[onclick^="copyClassLink"] { display: none; }
:root[data-ui="new"] #view-student .st-panel { padding: 16px 24px 24px; }
:root[data-ui="new"] #view-student .panel[data-st-tab] .timeline { padding-top: 8px; }
:root[data-ui="new"] #view-student .panel[data-st-tab] .timeline > .section-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-top: 8px !important; }

/* Воронка: 7 плиток одного размера, текущая крупнее; «Отток/Отказ» — строкой ниже */
:root[data-ui="new"] .st-funnel { display: grid; gap: 8px; padding: 4px 0 4px; container-type: inline-size; }
:root[data-ui="new"] .st-fgrid { display: grid; gap: 10px; align-items: center; padding: 5px; }
:root[data-ui="new"] .st-fb {
  position: relative; height: 48px; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: 4px 10px; border: 1.5px solid transparent; border-radius: 10px; background: var(--surface-2);
  color: var(--ink-faint); font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer;
  transition: border-color .14s, background-color .14s;
}
:root[data-ui="new"] .st-fb span { text-wrap: balance; }
:root[data-ui="new"] .st-fb:hover { border-color: var(--line-strong); }
:root[data-ui="new"] .st-fb.done { background: var(--accent-bg); color: var(--accent); }
:root[data-ui="new"] .st-fb-ok {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 3px; border-radius: 50%;
  background: var(--accent); stroke: var(--on-accent); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  box-shadow: 0 0 0 2px var(--surface);
}
:root[data-ui="new"] .st-fb.arrow::after {
  content: ""; position: absolute; right: -9px; top: 50%; width: 6px; height: 6px;
  border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong);
  transform: translateY(-50%) rotate(45deg); pointer-events: none;
}
:root[data-ui="new"] .st-fb.arrow-on::after { border-color: var(--accent); }
:root[data-ui="new"] .st-fb.now {
  height: 64px; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 750;
  border-radius: 14px; box-shadow: 0 0 0 4px var(--accent-bg); cursor: default;
}
:root[data-ui="new"] .st-fb.now.loss { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); box-shadow: none; }
:root[data-ui="new"] .st-fexit { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .st-fexit-btn {
  border: 0; background: transparent; color: var(--ink-soft); font-size: 14px; font-weight: 600; padding: 6px 10px;
  border-radius: 999px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
:root[data-ui="new"] .st-fexit-btn:hover { background: var(--surface-2); color: var(--ink); }
@container (max-width: 680px) {
  :root[data-ui="new"] .st-fgrid { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)) !important; gap: 6px; }
  :root[data-ui="new"] .st-fb.arrow::after { display: none; }
  :root[data-ui="new"] .st-fb.now { font-size: 14px; }
}

/* Плитки: старые бейджи (остаток/резерв/долг) + «Оплата» + «Следующее занятие» */
:root[data-ui="new"] .st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0 16px; }
:root[data-ui="new"] .st-kpis > * { margin: 0 !important; }
:root[data-ui="new"] .st-kpi,
:root[data-ui="new"] .st-kpis .balance-badge,
:root[data-ui="new"] .st-kpis .reserve-badge,
:root[data-ui="new"] .st-kpis .debt-badge {
  display: grid; gap: 4px; align-content: start; align-items: start; justify-items: start; justify-content: stretch;
  text-align: left; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; box-shadow: none;
}
:root[data-ui="new"] .st-kpis .hidden { display: none !important; }
:root[data-ui="new"] .st-kpis .balance-num { order: 2; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
:root[data-ui="new"] .st-kpis .balance-label { order: 1; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
:root[data-ui="new"] .st-kpis .balance-badge.balance-ok .balance-num { color: var(--ink); }
:root[data-ui="new"] .st-kpis .balance-badge.balance-low { border-color: var(--warning); }
:root[data-ui="new"] .st-kpis .balance-badge.balance-zero { border-color: var(--danger); }
:root[data-ui="new"] .st-kpis .reserve-badge { border: 1px solid var(--line); }
:root[data-ui="new"] .st-kpis .reserve-badge .balance-num { color: var(--ink); }
:root[data-ui="new"] .st-kpis .debt-badge { border-color: var(--danger); }
:root[data-ui="new"] .st-kpi-l { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
:root[data-ui="new"] .st-kpi-v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
:root[data-ui="new"] .st-kpi-v.sm { font-size: 19px; }
:root[data-ui="new"] .st-kpi-s { font-size: 13px; color: var(--ink-faint); }
:root[data-ui="new"] .st-kpi .pill { justify-self: start; white-space: normal; }
:root[data-ui="new"] .st-kpi.warn { border-color: var(--warning); }

/* Вкладки */
:root[data-ui="new"] .st-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; background: var(--surface-2); border-radius: 999px; scrollbar-width: none; }
:root[data-ui="new"] .st-tab {
  border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--ink-soft); padding: 9px 16px;
  border-radius: 999px; cursor: pointer; white-space: nowrap; min-height: 38px; display: inline-flex; align-items: center; gap: 6px;
}
:root[data-ui="new"] .st-tab:hover { color: var(--ink); }
:root[data-ui="new"] .st-tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
:root[data-ui="new"] .st-tab-c { font-size: 12px; color: var(--ink-faint); }

/* Обзор */
:root[data-ui="new"] .st-over { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { :root[data-ui="new"] .st-over { grid-template-columns: 1fr; } }
:root[data-ui="new"] .st-col { display: grid; gap: 16px; min-width: 0; }
:root[data-ui="new"] .st-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
:root[data-ui="new"] .st-box h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
:root[data-ui="new"] .st-callout { padding: 14px 18px; border-radius: 14px; background: var(--accent-bg); color: var(--ink); font-size: 14px; line-height: 1.5; }
:root[data-ui="new"] .st-callout.warn { background: var(--warning-bg); }
/* #303 — плашка «Похоже на дубль» (карточка ученика, форма «Новый лид») — как .st-callout.warn. */
:root[data-ui="new"] .dup-callout { padding: 14px 18px; border-radius: 14px; font-size: 14px; margin: 16px 0 0; }
:root[data-ui="new"] .st-lesson { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
:root[data-ui="new"] .st-lesson:first-of-type { border-top: 0; padding-top: 0; }
:root[data-ui="new"] .st-date { width: 52px; flex: none; text-align: center; border-radius: 8px; background: var(--surface-2); padding: 6px 0; line-height: 1.1; }
:root[data-ui="new"] .st-date b { display: block; font-size: 18px; }
:root[data-ui="new"] .st-date span { font-size: 12px; color: var(--ink-faint); }
:root[data-ui="new"] .st-lesson-t { font-size: 14px; min-width: 0; }
/* #309 — «Расписание»: дорожка на неделю под плитками (мокап LTbwEfqu1YZ8aFHQmCLKSi, вариант 1).
   Цвет записи — тип занятия (индивидуально/группа/пробный/диагностика); статус — цвет + слово. */
:root[data-ui="new"] .stw { display: grid; gap: 12px; margin: 0 0 16px; }
:root[data-ui="new"] .stw-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
:root[data-ui="new"] .stw-head h4 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
:root[data-ui="new"] .stw-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
:root[data-ui="new"] .stw-nav .stw-arrow { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); display: inline-grid; place-items: center; cursor: pointer; transition: background-color .14s; }
:root[data-ui="new"] .stw-nav .stw-arrow:hover { background: var(--surface-2); }
:root[data-ui="new"] .stw-nav .stw-arrow[disabled] { opacity: .45; cursor: default; background: transparent; }
:root[data-ui="new"] .stw .stw-btn { min-height: 36px; padding: 5px 14px; font-size: 14px; }
:root[data-ui="new"] .stw-range { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 4px; }
:root[data-ui="new"] .stw-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
:root[data-ui="new"] .stw-day { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 8px; display: grid; gap: 4px; align-content: start; min-height: 112px; min-width: 0; }
:root[data-ui="new"] .stw-dh { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; padding: 0 4px 4px; }
:root[data-ui="new"] .stw-dh b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .stw-day.today { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
:root[data-ui="new"] .stw-day.today .label { color: var(--accent); }
:root[data-ui="new"] .stw-day.past .stw-dh { opacity: .75; }
:root[data-ui="new"] .stw-ls { display: grid; gap: 4px; min-width: 0; }
:root[data-ui="new"] .stw-none { font-size: 12px; color: var(--ink-faint); padding: 0 4px; }
:root[data-ui="new"] .stw-l { display: grid; gap: 2px; width: 100%; min-width: 0; text-align: left; border: 1.5px solid transparent; border-radius: 8px; padding: 6px 8px; font: 400 14px/1.3 var(--font); cursor: pointer; background: var(--surface-2); color: var(--ink-soft); transition: border-color .14s, box-shadow .14s; }
:root[data-ui="new"] .stw-l:hover { border-color: var(--line-strong); }
:root[data-ui="new"] .stw-l.ind { background: var(--type-individual-bg); color: var(--type-individual); }
:root[data-ui="new"] .stw-l.grp { background: var(--type-group-bg); color: var(--type-group); }
:root[data-ui="new"] .stw-l.trial { background: var(--type-trial-bg); color: var(--type-trial); }
:root[data-ui="new"] .stw-l.diag { background: var(--diag-bg); color: var(--diag); }
:root[data-ui="new"] .stw-l.unpaid { background: transparent; border: 1.5px dashed var(--field-border); color: var(--ink-faint); }
:root[data-ui="new"] .stw-l.off { background: var(--surface-2); color: var(--ink-faint); }
:root[data-ui="new"] .stw-l.off .stw-t { text-decoration: line-through; }
:root[data-ui="new"] .stw-l.sel, :root[data-ui="new"] .stw-l.sel:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
:root[data-ui="new"] .stw-t { font-weight: 700; font-variant-numeric: tabular-nums; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
:root[data-ui="new"] .stw-once { font-size: 12px; font-weight: 600; color: var(--ink-faint); text-decoration: none; }
:root[data-ui="new"] .stw-s { color: var(--ink-soft); overflow-wrap: anywhere; }
:root[data-ui="new"] .stw-l.unpaid .stw-s, :root[data-ui="new"] .stw-l.off .stw-s { color: var(--ink-faint); }
:root[data-ui="new"] .stw-st { font-size: 12px; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; color: var(--ink-faint); }
:root[data-ui="new"] .stw-st.ok { color: var(--success); }
:root[data-ui="new"] .stw-st.cx { color: var(--danger); }
:root[data-ui="new"] .stw-st.mv, :root[data-ui="new"] .stw-st.wt { color: var(--warning); }
:root[data-ui="new"] .stw-detail { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; background: var(--surface-2); font-size: 14px; }
:root[data-ui="new"] .stw-detail b { font-weight: 600; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .stw-acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  :root[data-ui="new"] .stw-grid { grid-template-columns: 1fr; }
  :root[data-ui="new"] .stw-day { min-height: 0; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 12px; }
  :root[data-ui="new"] .stw-dh { flex-direction: column; gap: 0; padding: 4px; }
  :root[data-ui="new"] .stw-day.empty:not(.today) { display: none; }
}
:root[data-ui="new"] .st-note { padding: 10px 0; border-top: 1px solid var(--line); }
:root[data-ui="new"] .st-note:first-of-type { border-top: 0; padding-top: 0; }
:root[data-ui="new"] .st-note-m { font-size: 12px; color: var(--ink-faint); }
:root[data-ui="new"] .st-note p { margin: 2px 0 0; font-size: 14px; white-space: pre-wrap; }
/* #283 — лента событий на «Обзоре» (канон: design-system-crm.md, «Лента событий»). */
:root[data-ui="new"] .st-callout.danger { background: var(--danger-bg); }
:root[data-ui="new"] .stf-compose { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
:root[data-ui="new"] .stf-compose textarea { flex: 1; min-width: 0; min-height: 44px; height: 44px; resize: vertical; border: 1.5px solid var(--field-border); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); }
:root[data-ui="new"] .stf-compose .btn { min-height: 44px; }
:root[data-ui="new"] .stf-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
:root[data-ui="new"] .stf-f { border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink-soft); font: 600 13px/1 inherit; font-family: inherit; padding: 8px 14px; border-radius: 999px; cursor: pointer; min-height: 36px; }
:root[data-ui="new"] .stf-f[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--surface); }
:root[data-ui="new"] .stf-day { padding: 12px 0 8px 52px; }
:root[data-ui="new"] .stf-ev { display: grid; grid-template-columns: 36px 1fr; gap: 16px; position: relative; padding-bottom: 12px; animation: stf-in 220ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .stf-ev::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--line); }
:root[data-ui="new"] .stf-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-soft); }
:root[data-ui="new"] .stf-ic.pay { background: var(--success-bg); color: var(--success); }
:root[data-ui="new"] .stf-ic.les { background: var(--accent-bg); color: var(--accent); }
:root[data-ui="new"] .stf-ic.mov { background: var(--warning-bg); color: var(--warning); }
:root[data-ui="new"] .stf-ic.bad { background: var(--danger-bg); color: var(--danger); }
:root[data-ui="new"] .stf-ic.chg { background: var(--marker-soft); color: var(--ink); }
:root[data-ui="new"] .stf-body { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; display: grid; gap: 4px; min-width: 0; }
:root[data-ui="new"] .stf-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
:root[data-ui="new"] .stf-top b { font-weight: 600; font-size: 14px; }
:root[data-ui="new"] .stf-meta { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .stf-body p { margin: 0; font-size: 14px; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
:root[data-ui="new"] .stf-ev.note .stf-body p { color: var(--ink); }
:root[data-ui="new"] .stf-del { justify-self: start; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--ink-faint); cursor: pointer; text-decoration: underline; }
:root[data-ui="new"] .stf-del:hover { color: var(--danger); }
@keyframes stf-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { :root[data-ui="new"] .stf-ev { animation: none; } }
:root[data-ui="new"] .st-more { margin-top: 8px; min-height: 32px; font-size: 13px; }
:root[data-ui="new"] .st-empty { color: var(--ink-faint); font-size: 14px; margin: 0; }

/* Посещаемость */
:root[data-ui="new"] .st-att-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
:root[data-ui="new"] .st-att { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 8px; margin-bottom: 12px; }
:root[data-ui="new"] .st-att-i { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
:root[data-ui="new"] .st-att-i b { color: var(--ink); font-size: 14px; }
:root[data-ui="new"] .st-att-i.ok { background: var(--success-bg); color: var(--success); }
:root[data-ui="new"] .st-att-i.miss { background: var(--danger-bg); color: var(--danger); }
:root[data-ui="new"] .st-att-i.wait { background: var(--warning-bg); color: var(--warning); }
:root[data-ui="new"] .st-att-e { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 27.10.2026 — плитка-кнопка: нажатие меняет отметку (карточки ученика и преподавателя) */
:root[data-ui="new"] button.st-att-i { min-width: 0; border: 0; font-family: var(--font); line-height: 1.4; text-align: left; cursor: pointer; transition: box-shadow 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] button.st-att-i:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px currentColor; }
:root[data-ui="new"] button.st-att-i:disabled { cursor: default; }
:root[data-ui="new"] .st-att-why { color: var(--danger); }

@media (max-width: 640px) {
  :root[data-ui="new"] #view-student .st-beta,
  :root[data-ui="new"] #view-student .st-panel,
  :root[data-ui="new"] #view-student .profile-head { padding-left: 16px; padding-right: 16px; }
  :root[data-ui="new"] .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Телефон (#314 1.6): крошки — одной строкой, только последняя (имя); путь «откуда» уже
   в кнопке «Назад». Вкладки прокручиваются — у правого края затухание, чтобы было видно,
   что дальше есть ещё; запас справа, чтобы последняя вкладка выезжала из-под затухания. */
@media (max-width: 560px) {
  :root[data-ui="new"] .crumbs { flex-wrap: nowrap; }
  :root[data-ui="new"] .crumbs > :not(b) { display: none; }
  :root[data-ui="new"] .crumbs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :root[data-ui="new"] .st-tabs { padding-right: 28px; -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); }
}


/* ── #280, шаг 1.1 (21.10.2026): «Назад» слева от крошек, шапка карточки по мокапу ── */
:root[data-ui="new"] .crumb-back:not([hidden]) {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 34px; padding: 5px 12px 5px 8px;
  border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .14s, background-color .14s;
}
:root[data-ui="new"] .crumb-back:hover { border-color: var(--ink); }
:root[data-ui="new"] .crumb-back svg { color: var(--accent); }
:root[data-ui="new"] .view > .btn.is-view-back { display: none; }
:root[data-ui="new"] .crumb-link { color: var(--ink-faint); text-decoration: none; }
:root[data-ui="new"] .crumb-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Карточка ученика без общей белой рамки — шапка, воронка, плитки и вкладки прямо на странице */
:root[data-ui="new"] #view-student > .panel { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
:root[data-ui="new"] #view-student .profile-head { padding: 0 0 16px; }
:root[data-ui="new"] #view-student .st-beta { padding: 0; }
:root[data-ui="new"] #view-student .st-panel { padding: 16px 0 0; }
/* содержимое вкладок — в своих карточках */
:root[data-ui="new"] #view-student .panel[data-st-tab] .timeline {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 16px 20px 20px; margin-top: 16px;
}
:root[data-ui="new"] #view-student .panel[data-st-tab="contacts"] #studentKv {
  display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  margin-top: 16px; padding: 4px 0 8px;
}
/* режим правки (renderStudentKv ставит класс kv-grid) — сетка полей */
:root[data-ui="new"] #view-student .panel[data-st-tab="contacts"] #studentKv.kv-grid { display: grid; padding: 0; }
:root[data-ui="new"] #view-student .card-actions .btn-danger { display: none; }  /* «Удалить» — на вкладке «Контакты» */

/* Иконки на кнопках шапки (Lucide, маской — текст кнопки меняет app.js) */
:root[data-ui="new"] #studentWriteParentBtn::before,
:root[data-ui="new"] #studentEditBtn::before,
:root[data-ui="new"] #studentPayBtn::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--ic) no-repeat center / contain; mask: var(--ic) no-repeat center / contain;
}
:root[data-ui="new"] #studentWriteParentBtn { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E"); }
:root[data-ui="new"] #studentEditBtn { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E"); }
:root[data-ui="new"] #studentPayBtn { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E"); }

/* «Раскидать по занятиям» — внутри плитки «Резерв» */
:root[data-ui="new"] .st-kpis #studentReserveBtn { order: 3; justify-self: start; min-height: 30px; padding: 4px 12px; font-size: 13px; margin-top: 4px; }

/* Вкладка «Контакты»: удаление ученика — отдельным блоком внизу */
:root[data-ui="new"] #view-student .st-danger {
  grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 16px;
  padding: 16px 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface);
}
:root[data-ui="new"] #view-student .st-danger b { display: block; font-size: 15px; }
:root[data-ui="new"] #view-student .st-danger span { font-size: 13px; color: var(--ink-faint); }
@media (max-width: 640px) { :root[data-ui="new"] #view-student .st-danger { grid-template-columns: 1fr; } }

/* ── Свои окна уведомления и подтверждения (#286, экран 1 шаг 1.2, 21.10.2026) ──
   uiAlert/uiConfirm — окно поверх открытой модалки (z-index выше .modal-overlay),
   uiToast — плашка внизу справа, исчезает сама. Канон — design-system-crm.md. */
:root[data-ui="new"] .ui-dlg-scrim {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px;
  background: var(--overlay); animation: uiFade .16s ease-out;
}
:root[data-ui="new"] .ui-dlg {
  width: min(420px, 100%); background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow-pop); padding: 22px 24px 20px; display: grid; gap: 14px;
  animation: modalIn .22s cubic-bezier(.2,.8,.2,1);
}
:root[data-ui="new"] .ui-dlg-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
:root[data-ui="new"] .ui-dlg-error .ui-dlg-ic { background: var(--danger-bg); color: var(--danger); }
:root[data-ui="new"] .ui-dlg-warning .ui-dlg-ic { background: var(--warning-bg); color: var(--warning); }
:root[data-ui="new"] .ui-dlg-info .ui-dlg-ic { background: var(--accent-bg); color: var(--accent); }
:root[data-ui="new"] .ui-dlg-t { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
:root[data-ui="new"] .ui-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
:root[data-ui="new"] .btn-danger-solid { background: var(--danger); border-color: var(--danger); color: var(--on-fill); }
:root[data-ui="new"] .btn-danger-solid:hover { filter: brightness(.92); border-color: var(--danger); color: var(--on-fill); }
:root[data-ui="new"] .ui-toasts {
  position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 310; display: grid; gap: 8px; justify-items: end; pointer-events: none;
}
:root[data-ui="new"] .ui-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 32px));
  padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-pop); font-size: 14px; line-height: 1.4;
  animation: toastIn .22s cubic-bezier(.2,.8,.2,1); transition: opacity .3s, transform .3s;
}
:root[data-ui="new"] .ui-toast.out { opacity: 0; transform: translateY(6px); }
:root[data-ui="new"] .ui-toast-success svg { color: var(--success); flex: none; }
:root[data-ui="new"] .ui-toast-info svg { color: var(--accent); flex: none; }
:root[data-ui="new"] .ui-toast-t { white-space: pre-line; overflow-wrap: anywhere; }
:root[data-ui="new"] .ui-toast-x { border: 0; background: transparent; color: var(--ink-faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
:root[data-ui="new"] .ui-toast-x:hover { background: var(--surface-2); color: var(--ink); }
@keyframes uiFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-ui="new"] .ui-dlg, :root[data-ui="new"] .ui-dlg-scrim, :root[data-ui="new"] .ui-toast { animation: none; transition: none; }
}

/* ── Пошаговый мастер изменений (#282, экран 1 шаг 1.3a, 21.10.2026) ──
   Разметка — ui-wizard.js, значения — утверждённый мокап карточки (dialog.wiz) и канон
   design-system-crm.md, «Пошаговый мастер изменений». Рисуется в общей модалке (.modal-wz). */
:root[data-ui="new"] .modal.modal-wz { width: min(42rem, calc(100vw - 32px)); max-width: none; padding: 0; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); overflow: hidden; }
:root[data-ui="new"] .modal-wz .wz { display: flex; flex-direction: column; min-height: 0; flex: 1; }
:root[data-ui="new"] .wz .label { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
:root[data-ui="new"] .wz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 24px 12px; }
:root[data-ui="new"] .wz-head h3 { font-size: 22px; font-weight: 750; line-height: 1.2; letter-spacing: -.02em; margin: 0; }
:root[data-ui="new"] .wz-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; }
:root[data-ui="new"] .wz-x:hover { background: var(--surface-2); color: var(--ink); }
:root[data-ui="new"] .wz-prog { padding: 0 24px 16px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
:root[data-ui="new"] .wz-prog[hidden] { display: none; }
:root[data-ui="new"] .wz-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
:root[data-ui="new"] .wz-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .22s cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .wz-steps { display: flex; gap: 8px 16px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .wz-steps li { display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="new"] .wz-steps li::before { content: attr(data-n); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--ink-faint); }
:root[data-ui="new"] .wz-steps li.done::before { content: "✓"; background: var(--accent-bg); color: var(--accent); }
:root[data-ui="new"] .wz-steps li.cur { color: var(--ink); font-weight: 600; }
:root[data-ui="new"] .wz-steps li.cur::before { background: var(--accent); color: var(--on-accent); }
:root[data-ui="new"] .wz-body { padding: 20px 24px; overflow-y: auto; display: grid; gap: 16px; align-content: start; flex: 1; min-height: 0; }
:root[data-ui="new"] .wz-foot { display: flex; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; align-items: center; }
:root[data-ui="new"] .wz-hint { font-size: 14px; color: var(--ink-faint); flex: 1; text-align: right; }
:root[data-ui="new"] .wz-hint:empty { visibility: hidden; }
/* .btn{display:inline-flex} перебивает [hidden] — без этого скрытая #wzFootBtn видна пустой рамкой (#314 1.6) */
:root[data-ui="new"] .wz-foot [hidden] { display: none; }
/* «Далее» — вид главной кнопки, но не класс .btn-primary: общий перехват в app.js блокирует любую
   .modal .btn-primary на 10 с и потом возвращает ей старый текст — мастеру это ломает подписи. */
:root[data-ui="new"] .btn.wz-next { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root[data-ui="new"] .btn.wz-next:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
/* окно выбора */
:root[data-ui="new"] .wz-choice { gap: 20px; }
:root[data-ui="new"] .wz-cgroup { display: grid; gap: 8px; }
:root[data-ui="new"] .wz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 12px; }
:root[data-ui="new"] .wz-card { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; text-align: left; padding: 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .14s, background-color .14s; }
:root[data-ui="new"] .wz-card:hover { border-color: var(--accent); background: var(--accent-bg); }
:root[data-ui="new"] .wz-card.soon { position: relative; cursor: default; background: var(--surface-2); border-color: transparent; padding-right: 72px; }
:root[data-ui="new"] .wz-card.soon:hover { border-color: transparent; background: var(--surface-2); }
:root[data-ui="new"] .wz-card.soon > :not(.wz-soon-tag) { opacity: .5; filter: grayscale(1) blur(.4px); }
:root[data-ui="new"] .wz-soon-tag { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--ink-faint); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
:root[data-ui="new"] .wz-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); }
:root[data-ui="new"] .wz-card b { display: block; font-weight: 700; }
:root[data-ui="new"] .wz-card span span { display: block; font-size: 14px; color: var(--ink-faint); line-height: 1.4; }
/* варианты ответа */
:root[data-ui="new"] .wz-opts { display: grid; gap: 8px; }
:root[data-ui="new"] .wz-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .14s, background-color .14s; }
:root[data-ui="new"] .wz-opt:hover { border-color: var(--line-strong); }
:root[data-ui="new"] .wz-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
:root[data-ui="new"] .wz-opt.dis { opacity: .6; cursor: not-allowed; background: var(--surface-2); }
:root[data-ui="new"] .wz-opt input { accent-color: var(--accent); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
:root[data-ui="new"] .wz-opt-m { display: grid; gap: 2px; flex: 1; min-width: 0; }
:root[data-ui="new"] .wz-opt-m span { font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .wz-field { margin: 0; }
:root[data-ui="new"] .wz-help { font-size: 14px; color: var(--ink-faint); }
/* 1.3e деньги: строка «запись — сколько занятий» (как .wz-opt, но с числом справа) и итог шага */
:root[data-ui="new"] .wz-al { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 14px; transition: border-color .14s, background-color .14s; }
:root[data-ui="new"] .wz-al.on { border-color: var(--accent); background: var(--accent-bg); }
:root[data-ui="new"] .wz-al input { width: 5.5rem; flex: none; text-align: center; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .wz-acts { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-ui="new"] .wz-sum { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--surface-2); }
:root[data-ui="new"] .wz-sum span { display: grid; gap: 2px; font-size: 14px; color: var(--ink-soft); }
:root[data-ui="new"] .wz-sum small { font-size: 13px; color: var(--ink-faint); }
:root[data-ui="new"] .wz-sum b { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
/* 1.3e-2 договор (#288, вариант 2 мокапа): широкое окно — условия слева, Приложение №1 справа */
:root[data-ui="new"] .modal.modal-wz.modal-wz-wide { max-width: 64rem; width: min(64rem, calc(100vw - 32px)); }
:root[data-ui="new"] .wz-ctsplit { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 20px; align-items: start; }
:root[data-ui="new"] .wz-ctterms { display: grid; gap: 12px; }
:root[data-ui="new"] .wz-ctterms .pill { justify-self: start; }
:root[data-ui="new"] .wz-ctkv { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
:root[data-ui="new"] .wz-ctkv span { font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .wz-ctkv b { font-weight: 600; overflow-wrap: anywhere; }
:root[data-ui="new"] .wz-lnk { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
:root[data-ui="new"] .wz-ctview { background: var(--surface-2); border-radius: 14px; padding: 16px; display: grid; gap: 12px; min-width: 0; }
:root[data-ui="new"] .wz-ctbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
:root[data-ui="new"] .wz-ctpdf { width: 100%; height: min(32rem, 60vh); border: 0; border-radius: 8px; background: var(--surface); }
@media (max-width: 860px) { :root[data-ui="new"] .wz-ctsplit { grid-template-columns: 1fr; } }
@media (max-width: 560px) { :root[data-ui="new"] .modal.modal-wz.modal-wz-wide { width: 100vw; max-width: none; } }
:root[data-ui="new"] .wz-group { display: grid; gap: 8px; }
:root[data-ui="new"] .wz-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 12px 16px; }
:root[data-ui="new"] .wz-kv { padding: 0; border: 0; }
:root[data-ui="new"] .wz-kv .kv-label { font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; text-transform: none; letter-spacing: 0; }
:root[data-ui="new"] .wz-kv input, :root[data-ui="new"] .wz-kv select, :root[data-ui="new"] .wz-kv textarea { width: 100%; }
:root[data-ui="new"] .wz-p { margin: 0; color: var(--ink-soft); }
:root[data-ui="new"] .wz-list { margin: 0; padding-left: 20px; color: var(--ink-soft); }
:root[data-ui="new"] .wz-note { padding: 14px 18px; border-radius: 14px; background: var(--surface-2); font-size: 14px; line-height: 1.5; }
:root[data-ui="new"] .wz-note.info { background: var(--accent-bg); }
:root[data-ui="new"] .wz-note.warn { background: var(--warning-bg); }
:root[data-ui="new"] .wz-note.danger { background: var(--danger-bg); }
:root[data-ui="new"] .wz-note.ok { background: var(--success-bg); }
:root[data-ui="new"] #wzBusy { display: grid; gap: 8px; }
/* 1.3b: дни расписания — таблетки с «×», строка добавления; превью сообщения ученику */
:root[data-ui="new"] .wz-slots { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-ui="new"] .wz-slot { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 6px 4px 14px; border-radius: 999px; background: var(--accent-bg); color: var(--ink); font-weight: 600; font-size: 14px; }
:root[data-ui="new"] .wz-slot.once { background: var(--warning-bg); }  /* разовая дата — как в прежнем редакторе (пилюля warning) */
:root[data-ui="new"] .wz-slot-k { font-size: 12px; font-weight: 600; color: var(--warning); }
:root[data-ui="new"] .wz-slot button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; }
:root[data-ui="new"] .wz-slot button:hover { background: var(--surface); color: var(--danger); }
:root[data-ui="new"] .wz-slot.once { background: var(--warning-bg); }  /* разовое занятие — как оранжевая плашка прежнего редактора */
:root[data-ui="new"] .wz-addslot[data-mode="once"] select[name="day"], :root[data-ui="new"] .wz-addslot:not([data-mode="once"]) input[name="sdate"] { display: none; }
:root[data-ui="new"] .wz-addslot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Мультивыбор занятий в отмене (30.10.2026) */
:root[data-ui="new"] .wz-occbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
:root[data-ui="new"] .wz-occbar span { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-ui="new"] .wz-occmore { justify-self: start; }
:root[data-ui="new"] .wz-msg { border: 1.5px dashed var(--line-strong); border-radius: 14px; padding: 12px 16px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); white-space: pre-line; }
/* проверка и готово */
:root[data-ui="new"] .wz-diff td.from { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: currentColor; }
:root[data-ui="new"] .wz-diff td.from, :root[data-ui="new"] .wz-diff td.to { min-width: 7rem; }
:root[data-ui="new"] .wz-diff td.to { font-weight: 600; }
:root[data-ui="new"] .wz-effects { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
:root[data-ui="new"] .wz-effects li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-soft); }
:root[data-ui="new"] .wz-effects svg, :root[data-ui="new"] .wz-done-row svg { flex: none; color: var(--success); margin-top: 2px; }
:root[data-ui="new"] .wz-done { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success); }
:root[data-ui="new"] .wz-done-t b { color: var(--ink); font-size: 17px; }
:root[data-ui="new"] .wz-done-row { display: flex; gap: 8px; font-size: 14px; }
/* «Править все поля» — тихая ссылка на вкладке «Контакты» */
:root[data-ui="new"] #view-student .panel[data-st-tab="contacts"] .st-fulledit { display: inline-block; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  :root[data-ui="new"] .modal.modal-wz { width: 100vw; max-height: 92dvh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  :root[data-ui="new"] .wz-steps li:not(.cur) { font-size: 0; gap: 0; }
  :root[data-ui="new"] .wz-head, :root[data-ui="new"] .wz-prog, :root[data-ui="new"] .wz-body, :root[data-ui="new"] .wz-foot { padding-left: 16px; padding-right: 16px; }
}


/* ── Мастер «Распределить занятия» — замещение преподавателя (#292, 21.10.2026). Каркас — .wz-* выше;
   здесь только своё: блоки учеников с датами-чипами, строки «время было → станет». ── */
:root[data-ui="new"] .sw-ent { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 16px; display: grid; gap: 8px; }
:root[data-ui="new"] .sw-ent:has(.sw-chip input:checked) { border-color: var(--accent); background: var(--accent-bg); }
:root[data-ui="new"] .sw-ent-h { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
:root[data-ui="new"] .sw-ent-h input { accent-color: var(--accent); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
:root[data-ui="new"] .sw-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 30px; }
:root[data-ui="new"] .sw-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft); cursor: pointer; }
:root[data-ui="new"] .sw-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:root[data-ui="new"] .sw-chip:has(input:checked) { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
:root[data-ui="new"] .sw-chip:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
:root[data-ui="new"] .sw-chip.done { border-color: transparent; background: var(--success-bg); color: var(--success); }
:root[data-ui="new"] .sw-chip.done:has(input:checked) { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
:root[data-ui="new"] .sw-chip.past { opacity: .6; }
:root[data-ui="new"] .sw-times { display: grid; gap: 8px; padding-left: 30px; }
:root[data-ui="new"] .sw-time { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 14px; }
:root[data-ui="new"] .sw-time b { min-width: 12rem; font-weight: 600; }
:root[data-ui="new"] .sw-time input[type="time"] { width: 7.5rem; }
:root[data-ui="new"] .sw-tag { margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; align-self: center; }
:root[data-ui="new"] .sw-tag.ok { background: var(--success-bg); color: var(--success); }
:root[data-ui="new"] .sw-tag.warn { background: var(--warning-bg); color: var(--warning); }
:root[data-ui="new"] .sw-tag.wait { background: var(--surface-2); color: var(--ink-faint); }
@media (max-width: 560px) {
  :root[data-ui="new"] .sw-chips, :root[data-ui="new"] .sw-times { padding-left: 0; }
  :root[data-ui="new"] .sw-time b { min-width: 0; width: 100%; }
}

/* ── Доска распределения (#338, 27.10.2026): все занятия за одну сессию — «Корзины» / «Таблица».
   Мокап https://claude.ai/artifact/FXrPHXdjKLsGVxoGyyiuBq, варианты 1 и 2; код — ui-sub-wizard.js. ── */
:root[data-ui="new"] .modal.modal-wz.sb-modal { max-width: 76rem; width: min(76rem, calc(100vw - 32px)); }
:root[data-ui="new"] .sb-faint { color: var(--ink-faint); font-size: 14px; }
:root[data-ui="new"] .sb-period { display: grid; grid-template-columns: repeat(2, minmax(0, 14rem)); gap: 12px 16px; }
:root[data-ui="new"] .sb-period .sb-wide { grid-column: 1 / -1; max-width: 29rem; }
@media (max-width: 560px) { :root[data-ui="new"] .sb-period { grid-template-columns: minmax(0, 1fr); } }
:root[data-ui="new"] .sb-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
:root[data-ui="new"] .sb-views { margin-left: auto; display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-2); border-radius: 14px; }
:root[data-ui="new"] .sb-views button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 12px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-soft); font: 600 14px/1.2 var(--font); cursor: pointer; }
:root[data-ui="new"] .sb-views button.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
:root[data-ui="new"] .sb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
:root[data-ui="new"] .sb-chip { font-family: var(--font); }
:root[data-ui="new"] .sb-chip.on, :root[data-ui="new"] .sb-chip.done.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
:root[data-ui="new"] .sb-chip[draggable="true"] { cursor: grab; }
/* карточка ряда перетаскивается целиком (как канбан лидов #316): берётся за любое место, под ней — 0.5 */
:root[data-ui="new"] .sb-card[draggable="true"] { cursor: grab; }
:root[data-ui="new"] .sb-card.dragging { opacity: .5; }
:root[data-ui="new"] .sb-brow.sb-card { border: 1px solid transparent; transition: border-color 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .sb-brow.sb-card:hover { border-color: var(--line-strong); }
@media (hover: none) { :root[data-ui="new"] .sb-card[draggable="true"] { cursor: default; } }
:root[data-ui="new"] .sb-rh { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-width: 0; }
:root[data-ui="new"] .sb-rh input { accent-color: var(--accent); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
:root[data-ui="new"] .sb-rh > span { display: flex; flex-direction: column; min-width: 0; }
:root[data-ui="new"] .sb-tm { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-ui="new"] .sb-tm input[type="time"] { width: 7.5rem; min-height: 36px; }
:root[data-ui="new"] .sb-okline { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--success); font-weight: 600; }
:root[data-ui="new"] .sb-foot-note { margin-top: 12px; font-size: 14px; color: var(--ink-faint); }
/* корзины */
:root[data-ui="new"] .sb-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
:root[data-ui="new"] .sb-pool { display: flex; flex-direction: column; min-width: 0; padding: 12px 14px; background: var(--ground); border: 1.5px solid var(--line); border-radius: 14px; }
:root[data-ui="new"] .sb-ph { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; }
:root[data-ui="new"] .sb-ph .btn { margin-left: auto; }
:root[data-ui="new"] .sb-ent { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
:root[data-ui="new"] .sb-ent .sb-chips { padding-left: 28px; }
:root[data-ui="new"] .sb-bks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
:root[data-ui="new"] .sb-bucket { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; transition: border-color 140ms cubic-bezier(.2,.8,.2,1), background-color 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .sb-bucket.self { border-style: dashed; }
:root[data-ui="new"] .sb-bucket.over, :root[data-ui="new"] .sb-pool.over { border-color: var(--accent); background: var(--accent-bg); }
:root[data-ui="new"] .sb-bh { display: flex; align-items: center; gap: 8px; }
:root[data-ui="new"] .sb-put { margin-left: auto; min-height: 32px; padding: 4px 12px; border-color: var(--accent); color: var(--accent); }
:root[data-ui="new"] .sb-brow { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; }
:root[data-ui="new"] .sb-brow-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
:root[data-ui="new"] .sb-brow-h .sb-tm { margin-left: auto; }
:root[data-ui="new"] .sb-brow .sw-tag { margin-left: 0; align-self: flex-start; }
:root[data-ui="new"] .sb-drop { margin: 0; padding: 10px; border: 1.5px dashed var(--line-strong); border-radius: 8px; font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .sb-add { position: relative; align-self: start; }
:root[data-ui="new"] .sb-add > .btn { display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="new"] .sb-addlist { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; gap: 2px; width: min(20rem, 80vw); max-height: 18rem; overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); }
:root[data-ui="new"] .sb-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 400 14px/1.4 var(--font); text-align: left; cursor: pointer; }
:root[data-ui="new"] .sb-opt span { font-size: 12px; color: var(--ink-faint); }
:root[data-ui="new"] .sb-opt:hover:not(:disabled) { background: var(--surface-2); }
:root[data-ui="new"] .sb-opt:disabled { opacity: .6; cursor: default; }
/* таблица */
:root[data-ui="new"] .sb-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
:root[data-ui="new"] .sb-bulk select, :root[data-ui="new"] .sb-tbl select { max-width: 15rem; }
:root[data-ui="new"] .sb-tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
:root[data-ui="new"] .sb-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
:root[data-ui="new"] .sb-tbl th { padding: 10px 12px; background: var(--surface-2); text-align: left; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
:root[data-ui="new"] .sb-tbl td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
:root[data-ui="new"] .sb-tbl td.sb-c { width: 32px; }
:root[data-ui="new"] .sb-tbl td.sb-c input { accent-color: var(--accent); width: 18px; height: 18px; }
:root[data-ui="new"] .sb-tbl tr.sb-un td { background: var(--warning-bg); }
:root[data-ui="new"] .sb-tbl .sw-tag { margin-left: 0; }
@media (max-width: 900px) { :root[data-ui="new"] .sb-board { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  :root[data-ui="new"] .sb-bks { grid-template-columns: minmax(0, 1fr); }
  :root[data-ui="new"] .sb-views { margin-left: 0; }
  :root[data-ui="new"] .sb-tbl thead { display: none; }
  :root[data-ui="new"] .sb-tbl table, :root[data-ui="new"] .sb-tbl tbody, :root[data-ui="new"] .sb-tbl tr, :root[data-ui="new"] .sb-tbl td { display: block; width: 100%; }
  :root[data-ui="new"] .sb-tbl tr { padding: 10px 14px; border-top: 1px solid var(--line); }
  :root[data-ui="new"] .sb-tbl td { position: relative; padding: 4px 0 4px 6.5rem; border: 0; }
  :root[data-ui="new"] .sb-tbl td.sb-c { width: auto; padding-left: 0; }
  :root[data-ui="new"] .sb-tbl td select { width: 100%; max-width: 100%; }
  :root[data-ui="new"] .sb-tbl td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 6px; width: 6rem; font-size: 12px; color: var(--ink-faint); }
  :root[data-ui="new"] .sb-ent .sb-chips { padding-left: 0; }
}

@media (max-width: 560px) {
  :root[data-ui="new"] .modal-wz .wz-diff th, :root[data-ui="new"] .modal-wz .wz-diff td { padding: 8px 10px; overflow-wrap: anywhere; }
  :root[data-ui="new"] .modal-wz .wz-diff td.from, :root[data-ui="new"] .modal-wz .wz-diff td.to { min-width: 0; }
  :root[data-ui="new"] .modal-wz .wz-diff table { table-layout: fixed; width: 100%; }
}

/* ===================== Финансы (#312, 25.10.2026): P&L и «Сверка аванса» плитками ===================== */
/* Мокап https://claude.ai/artifact/NaVFEw5jG67vEoYHtUW6JV, вариант 1. Код — ui-finance.js. Прежняя шапка раздела
   (panel с сегментом/кнопкой) при новом виде прячется — свою панель с месяцем рисует ui-finance.js. */
:root[data-ui="new"] #view-pnl.fin-new > .panel:first-child,
:root[data-ui="new"] #view-reconciliation.fin-new > .panel:first-child { display: none; }
:root[data-ui="new"] .fin { display: grid; gap: 20px; min-width: 0; }
:root[data-ui="new"] .fin-bar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
:root[data-ui="new"] .fin-month { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 14px; padding: 3px; }
:root[data-ui="new"] .fin-month select { border: 0; background: var(--surface); border-radius: 11px; font: 600 15px/1 var(--font); color: var(--ink); padding: 9px 12px; min-height: 36px; box-shadow: var(--shadow); cursor: pointer; }
:root[data-ui="new"] .fin-arrow { width: 36px; height: 36px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; }
:root[data-ui="new"] .fin-arrow:hover:not(:disabled) { background: var(--surface); color: var(--accent); }
:root[data-ui="new"] .fin-arrow:disabled { opacity: .4; cursor: default; }
:root[data-ui="new"] .fin-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; min-height: 36px; position: relative; }
:root[data-ui="new"] .fin-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:root[data-ui="new"] .fin-switch-ui { width: 40px; height: 24px; border-radius: 999px; background: var(--line-strong); position: relative; flex: none; transition: background-color 140ms; }
:root[data-ui="new"] .fin-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); transition: transform 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .fin-switch input:checked + .fin-switch-ui { background: var(--accent); }
:root[data-ui="new"] .fin-switch input:checked + .fin-switch-ui::after { transform: translateX(16px); }
:root[data-ui="new"] .fin-switch input:checked ~ span:last-child { color: var(--ink); }
:root[data-ui="new"] .fin-switch input:focus-visible + .fin-switch-ui { outline: 3px solid var(--accent); outline-offset: 2px; }
:root[data-ui="new"] .fin-head { display: grid; gap: 2px; }
:root[data-ui="new"] .fin-head h2 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
:root[data-ui="new"] .fin-head p, :root[data-ui="new"] .fin-group-h p { margin: 0; font-size: 14px; }
:root[data-ui="new"] .fin-group-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
:root[data-ui="new"] .fin-group-h h3 { margin: 0; font-size: 17px; font-weight: 700; }
:root[data-ui="new"] .fin-group-h p { color: var(--ink-faint); }
:root[data-ui="new"] .fin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
:root[data-ui="new"] .fin-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 6px; align-content: start; }
:root[data-ui="new"] .fin-tile.main { background: var(--accent-bg); border-color: transparent; }
:root[data-ui="new"] .fin-tile-top { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
:root[data-ui="new"] .fin-val { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .fin-what { margin: 0; font-size: 14px; color: var(--ink-soft); }
:root[data-ui="new"] .fin-cmp { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; }
:root[data-ui="new"] .fin-d { display: inline-flex; gap: 6px; flex-wrap: wrap; }
:root[data-ui="new"] .fin-up { color: var(--success); font-weight: 600; }
:root[data-ui="new"] .fin-down { color: var(--danger); font-weight: 600; }
:root[data-ui="new"] .fin .faint { color: var(--ink-faint); }
:root[data-ui="new"] .fin-i { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-faint); display: inline-grid; place-items: center; padding: 0; cursor: help; transition: color 140ms, border-color 140ms; }
:root[data-ui="new"] .fin-i:hover, :root[data-ui="new"] .fin-i[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
:root[data-ui="new"] .fin-rowlabel { display: inline-flex; align-items: center; gap: 8px; }
:root[data-ui="new"] .fin-rowlabel .fin-i { width: 22px; height: 22px; }
:root[data-ui="new"] .fin-hl { cursor: help; border-bottom: 1.5px dotted var(--field-border); }
:root[data-ui="new"] .fin-callout { display: flex; gap: 10px; align-items: start; border-radius: 14px; padding: 12px 16px; font-size: 14px; background: var(--accent-bg); }
:root[data-ui="new"] .fin-callout p { margin: 0; }
:root[data-ui="new"] .fin-callout svg { flex: none; margin-top: 1px; color: var(--accent); }
:root[data-ui="new"] .fin-callout.ok { background: var(--success-bg); }
:root[data-ui="new"] .fin-callout.ok svg { color: var(--success); }
:root[data-ui="new"] .fin-callout.warn { background: var(--warning-bg); }
:root[data-ui="new"] .fin-callout.warn svg { color: var(--warning); }
:root[data-ui="new"] .fin-table table { width: 100%; }
:root[data-ui="new"] .fin-table td, :root[data-ui="new"] .fin-table th { white-space: nowrap; }
:root[data-ui="new"] .fin-table td:first-child { white-space: normal; min-width: 12rem; }
:root[data-ui="new"] .fin-n { text-align: right; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .fin-table .cur { background: var(--accent-bg); }
:root[data-ui="new"] .fin-table th.cur { color: var(--accent); }
:root[data-ui="new"] .fin-table .neg { color: var(--danger); }
:root[data-ui="new"] .fin-table tr.total td { font-weight: 700; background: var(--surface-2); }
:root[data-ui="new"] .fin-table tr.total td.cur { background: var(--accent-bg); }
:root[data-ui="new"] .fin-sub { font-size: 13px; }
:root[data-ui="new"] .fin-hint { margin: 0; font-size: 13px; color: var(--ink-faint); }
:root[data-ui="new"] .fin-tip { position: fixed; z-index: 400; width: min(22rem, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 14px 16px; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 140ms, transform 140ms; }
:root[data-ui="new"] .fin-tip.on { opacity: 1; transform: none; }
:root[data-ui="new"] .fin-tip .label { display: block; margin-bottom: 2px; }
:root[data-ui="new"] .fin-tip-h { font-size: 15px; font-weight: 700; }
:root[data-ui="new"] .fin-tip-calc { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .fin-tip-src { color: var(--ink-faint); }
:root[data-ui="new"] .fin-tip-good { color: var(--success); }
:root:not([data-ui="new"]) .fin-tip { display: none; }
@media (max-width: 600px) { :root[data-ui="new"] .fin-val { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { :root[data-ui="new"] .fin-tip, :root[data-ui="new"] .fin-switch-ui::after { transition: none; } }
:root[data-ui="new"] .fin .label, :root[data-ui="new"] .fin-tip .label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
:root[data-ui="new"] .fin-tiles-5 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
:root[data-ui="new"] .fin-table a { color: var(--ink); text-decoration: none; }
:root[data-ui="new"] .fin-table a:hover { color: var(--accent); text-decoration: underline; }
:root[data-ui="new"] #view-metrics.fin-new > .panel:first-child { display: none; }

/* ===================== Карточка ученика: вкладки (1.5, #314, 26.10.2026) ===================== */
/* Код — ui-card-tabs.js. «Записи» таблицей по мокапу карточки (вариант 2), «Оплаты», «Документы» таблицами,
   «Контакты» — группы пар «подпись — значение». Прежние заголовки секций (инлайн-стили, эмодзи) при бете
   прячутся — свои заголовки и кнопки рисует ui-card-tabs.js. */
:root[data-ui="new"] #view-student .timeline[data-tab="enr"] > .section-title,
:root[data-ui="new"] #view-student .timeline[data-tab="pay"] > .section-title,
:root[data-ui="new"] #view-student .timeline[data-tab="docs"] > .section-title { display: none !important; }  /* у заголовка инлайн display:flex */
:root[data-ui="new"] .stt-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin: 4px 0 12px; }
:root[data-ui="new"] .stt-head h4 { margin: 0; font-size: 17px; font-weight: 700; }
:root[data-ui="new"] .stt-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
:root[data-ui="new"] .stt-danger { color: var(--danger); }
:root[data-ui="new"] .stt-table table { width: 100%; }
:root[data-ui="new"] .stt-table td { vertical-align: top; }
:root[data-ui="new"] .stt-table td:first-child { min-width: 13rem; }
:root[data-ui="new"] .stt-table tr.pick { cursor: pointer; transition: background-color 140ms; }
:root[data-ui="new"] .stt-table tr.pick:hover td, :root[data-ui="new"] .stt-table tr.pick:focus-visible td { background: var(--surface-2); }
:root[data-ui="new"] .stt-table tr.pick:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
:root[data-ui="new"] .stt-table tr.ended td { color: var(--ink-soft); }
:root[data-ui="new"] .stt-table tr.refund td b { color: var(--danger); }
:root[data-ui="new"] .stt-table tr.stt-edit > td { background: var(--surface-2); padding: 12px; }
:root[data-ui="new"] .stt-sub { font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
:root[data-ui="new"] .stt-sub a { color: var(--accent); }
:root[data-ui="new"] .stt-once { color: var(--warning); font-weight: 600; }
:root[data-ui="new"] .stt-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .stt-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .stt-notif:empty { display: none; }
:root[data-ui="new"] .stt-acts { white-space: nowrap; text-align: right; }
:root[data-ui="new"] .stt-acts .btn + .btn { margin-left: 6px; }
/* Документы: действия значками (мокап https://claude.ai/artifact/CuQ5CJwbNQgZjGWYn9BRnC, вариант 1) */
:root[data-ui="new"] .stt-icons { display: inline-flex; gap: 4px; }
:root[data-ui="new"] .stt-ic { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); cursor: pointer; text-decoration: none; transition: background-color .14s, color .14s; }
:root[data-ui="new"] .stt-ic:hover { background: var(--surface-2); color: var(--accent); }
:root[data-ui="new"] .stt-ic.del { color: var(--danger); }
:root[data-ui="new"] .stt-ic.del:hover { background: var(--danger-bg); color: var(--danger); }
:root[data-ui="new"] .stt-ic[data-tip]:hover::after, :root[data-ui="new"] .stt-ic[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 4px); padding: 4px 8px; border-radius: 8px; background: var(--ink); color: var(--ground); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; z-index: 5; }
@media (max-width: 600px) { :root[data-ui="new"] .stt-ic { width: 44px; height: 44px; } }
/* Занятые/замещённые в мастере: строка-опция недоступна — см. .wz-opt.dis */
:root[data-ui="new"] .stt-hint { margin: 8px 0 0; font-size: 13px; color: var(--ink-faint); }
:root[data-ui="new"] .stt-toggle { margin-top: 16px; border: 0; background: none; padding: 6px 0; font: 600 14px/1.3 var(--font); color: var(--accent); cursor: pointer; }
:root[data-ui="new"] .stt-toggle + .stt-table { margin-top: 8px; }
:root[data-ui="new"] .stt-kv { display: grid; gap: 0; }
:root[data-ui="new"] .stt-group { padding: 12px 20px 8px; display: grid; gap: 0; }
:root[data-ui="new"] .stt-group + .stt-group { border-top: 1px solid var(--line); }
:root[data-ui="new"] .stt-group h4 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
:root[data-ui="new"] .stt-group .kv { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 4px 16px; padding: 6px 0; border-top: 1px solid var(--line); }
:root[data-ui="new"] .stt-group h4 + .kv { border-top: 0; }
:root[data-ui="new"] .stt-group .kv-label { font-family: var(--font); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
:root[data-ui="new"] .stt-group .kv-value { font-size: 15px; overflow-wrap: anywhere; }
:root[data-ui="new"] .stt-group .kv-value a { color: var(--accent); }
:root[data-ui="new"] .stt-group p { margin: 0; font-size: 14px; }
:root[data-ui="new"] .stt-kv .faint, :root[data-ui="new"] .stt-table .faint, :root[data-ui="new"] #view-student p.faint { color: var(--ink-faint); }
@media (max-width: 560px) {
  :root[data-ui="new"] .stt-group .kv { grid-template-columns: 1fr; gap: 0; }
  :root[data-ui="new"] .stt-table td:first-child { min-width: 11rem; }
}
/* 1.5: на телефоне таблицы вкладок — карточки-строки «подпись — значение», без горизонтальной прокрутки */
:root[data-ui="new"] .stt-group .kv { border-right: 0; border-bottom: 0; background: none; }
@media (max-width: 600px) {
  :root[data-ui="new"] .stt-table { border: 0; overflow: visible; }
  :root[data-ui="new"] .stt-table thead { display: none; }
  :root[data-ui="new"] .stt-table table, :root[data-ui="new"] .stt-table tbody, :root[data-ui="new"] .stt-table tr, :root[data-ui="new"] .stt-table td { display: block; width: 100%; }
  :root[data-ui="new"] .stt-table tr { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-bottom: 8px; background: var(--surface); }
  :root[data-ui="new"] .stt-table td { border: 0; padding: 4px 0; text-align: left; white-space: normal; min-width: 0; }
  :root[data-ui="new"] .stt-table td:first-child { min-width: 0; padding-bottom: 6px; }
  :root[data-ui="new"] .stt-table td[data-label] { position: relative; padding-left: calc(8.5rem + 8px); }
  :root[data-ui="new"] .stt-table td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 8.5rem; font-size: 13px; color: var(--ink-faint); }
  :root[data-ui="new"] .stt-table td.stt-acts { text-align: left; padding-top: 8px; }
  :root[data-ui="new"] .stt-table tr.stt-edit { padding: 0; }
}

/* ── Экран 2: Лиды / Ученики (2.1, #315, 26.10.2026) — ui-leads.js ──
   Без общей белой рамки (как карточка ученика): шапка, строка инструментов, чипы, таблица. */
:root[data-ui="new"] .pill-diag { background: var(--diag-bg); color: var(--diag); }
:root[data-ui="new"] .pill-trial { background: var(--type-trial-bg); color: var(--type-trial); }
:root[data-ui="new"] .pill-marker { background: var(--marker); color: var(--on-marker); }
:root[data-ui="new"] #view-leads > .panel { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
:root[data-ui="new"] #view-leads .panel-head { padding: 0 0 12px; border: 0; background: none; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
:root[data-ui="new"] #view-leads .panel-head > div:first-child { flex: 1 1 auto; min-width: 0; }
:root[data-ui="new"] #leadsPanelTitle { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); font-weight: 800; letter-spacing: -.028em; line-height: 1.1; }
:root[data-ui="new"] #leadsCount { font-size: 14px; color: var(--ink-faint); margin-top: 4px; }
:root[data-ui="new"] #view-leads .lh-gap { margin-right: 0; }
:root[data-ui="new"] .lt-tools { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; justify-content: flex-end; margin: 0 0 12px; }
:root[data-ui="new"] #view-leads .stage-chips-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 16px; border: 0; background: none; }
:root[data-ui="new"] #view-leads .stage-chips-row .count { font-size: 12px; opacity: .75; margin-left: 2px; }
:root[data-ui="new"] .lt-table { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow-x: auto; }
:root[data-ui="new"] .lt-table table { width: 100%; }
:root[data-ui="new"] .lt-table td { vertical-align: middle; }
:root[data-ui="new"] .lt-table td.lt-who { min-width: 13rem; }
:root[data-ui="new"] .lt-table .cell-name { font-weight: 600; font-size: 15px; line-height: 1.3; }
:root[data-ui="new"] .lt-sub { font-size: 13px; color: var(--ink-faint); line-height: 1.35; margin-top: 2px; }
:root[data-ui="new"] .lt-table tr.pick { cursor: pointer; transition: background-color 140ms; }
:root[data-ui="new"] .lt-table tr.pick:hover td, :root[data-ui="new"] .lt-table tr.pick:focus-visible td { background: var(--surface-2); }
:root[data-ui="new"] .lt-table tr.pick:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
:root[data-ui="new"] .lt-table tr.group-head-row td { background: var(--ground); padding: 8px 16px; cursor: pointer; }
:root[data-ui="new"] .lt-gh { display: flex; align-items: center; gap: 10px; }
:root[data-ui="new"] .lt-gh-c { font-size: 13px; font-weight: 600; color: var(--ink-faint); }
:root[data-ui="new"] .lt-chev { margin-left: auto; color: var(--ink-faint); transition: transform 140ms; }
:root[data-ui="new"] tr.group-head-row.closed .lt-chev { transform: rotate(-90deg); }
:root[data-ui="new"] .lt-recs { display: grid; gap: 2px; }
:root[data-ui="new"] .lt-rec-s { color: var(--ink-soft); }
:root[data-ui="new"] .lt-next { white-space: nowrap; }
:root[data-ui="new"] .lt-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .lt-table .faint { color: var(--ink-faint); }
:root[data-ui="new"] .lt-table .soft { color: var(--ink-soft); }
:root[data-ui="new"] .lt-empty { text-align: center; color: var(--ink-faint); padding: 24px 16px; }
/* телефон: строки — карточки «подпись — значение», шапка таблицы скрыта, без горизонтальной прокрутки */
@media (max-width: 600px) {
  :root[data-ui="new"] .lt-tools { justify-content: flex-start; }
  :root[data-ui="new"] .lt-tools select { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  :root[data-ui="new"] .lt-table { border: 0; background: none; overflow: visible; }
  :root[data-ui="new"] .lt-table thead { display: none; }
  :root[data-ui="new"] .lt-table table, :root[data-ui="new"] .lt-table tbody, :root[data-ui="new"] .lt-table tr, :root[data-ui="new"] .lt-table td { display: block; width: 100%; }
  :root[data-ui="new"] .lt-table tr.pick { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-bottom: 8px; background: var(--surface); }
  :root[data-ui="new"] .lt-table tr.group-head-row td { background: none; padding: 12px 2px 8px; border: 0; }
  :root[data-ui="new"] .lt-table td { border: 0; padding: 4px 0; white-space: normal; min-width: 0; }
  :root[data-ui="new"] .lt-table td.lt-who { min-width: 0; padding-bottom: 6px; }
  :root[data-ui="new"] .lt-table td[data-label] { position: relative; padding-left: calc(7.5rem + 8px); }
  :root[data-ui="new"] .lt-table td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 7.5rem; font-size: 13px; color: var(--ink-faint); }
  :root[data-ui="new"] .lt-next { white-space: normal; }
}

/* ── Экран 2.2: канбан + быстрый просмотр (#316, 26.10.2026) — ui-leads.js ──
   Колонки на --surface-2, карточки --surface; выбранная — рамка --accent + кольцо --accent-bg;
   колонка под перетаскиваемой карточкой — рамка --accent. Панель справа 340px (--r-lg, --shadow-pop);
   узко (< 1100px) — лист снизу с затемнением --overlay. */
:root[data-ui="new"] .lk-wrap.active { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; padding: 0; overflow: visible; }
:root[data-ui="new"] .lk-wrap.active.lk-open { grid-template-columns: minmax(0, 1fr) 340px; }
:root[data-ui="new"] .lk-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; min-width: 0; align-items: start; padding-bottom: 6px; }
:root[data-ui="new"] .lk-col { width: auto; flex: none; background: var(--surface-2); border: 1.5px solid transparent; border-radius: 14px; padding: 10px; display: grid; gap: 8px; align-content: start; min-width: 0; transition: border-color 140ms, background-color 140ms; }
:root[data-ui="new"] .lk-col.drop { border-color: var(--accent); background: var(--accent-bg); }
:root[data-ui="new"] .lk-col-h { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 2px 4px 4px; margin: 0; border: 0; background: none; }
:root[data-ui="new"] .lk-col-h .kanban-col-name { font-size: 14px; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--ink); }
:root[data-ui="new"] .lk-col-h .kanban-col-count { font-size: 13px; font-weight: 600; color: var(--ink-faint); background: none; padding: 0; }
:root[data-ui="new"] .lk-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; padding: 0; }
:root[data-ui="new"] .lk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 6px; cursor: pointer; box-shadow: var(--shadow-sm); margin: 0; transition: border-color 140ms, box-shadow 140ms; }
:root[data-ui="new"] .lk-card:hover { border-color: var(--line-strong); }
:root[data-ui="new"] .lk-card.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
:root[data-ui="new"] .lk-card.drag { opacity: .5; }
:root[data-ui="new"] .lk-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
:root[data-ui="new"] .lk-top { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: flex-start; justify-content: space-between; }  /* узкая колонка — пилюля под имя, слово не рвётся */
:root[data-ui="new"] .lk-card .kc-name { font-size: 15px; font-weight: 600; line-height: 1.3; min-width: 0; overflow-wrap: break-word; }
:root[data-ui="new"] .lk-card .pill { flex: none; font-size: 13px; }
:root[data-ui="new"] .lk-line { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
:root[data-ui="new"] .lk-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ink-soft); }
:root[data-ui="new"] .lk-meta .pill { font-size: 13px; }
:root[data-ui="new"] .lk-meta .lt-sub { display: none; }
:root[data-ui="new"] .lk-card .faint, :root[data-ui="new"] .lk-peek .faint { color: var(--ink-faint); }
:root[data-ui="new"] .lk-card .soft, :root[data-ui="new"] .lk-peek .soft { color: var(--ink-soft); }
:root[data-ui="new"] .lk-empty { font-size: 13px; color: var(--ink-faint); padding: 8px 4px; border: 0; text-align: left; }
:root[data-ui="new"] .lk-peek { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-pop); padding: 20px; display: grid; gap: 14px; position: sticky; top: 12px; min-width: 0; }
:root[data-ui="new"] .lk-scrim { display: none; }
:root[data-ui="new"] .lk-peek[hidden] { display: none; }  /* display: grid перебивает [hidden] */
:root[data-ui="new"] .lk-ph { display: flex; gap: 12px; align-items: flex-start; }
:root[data-ui="new"] .lk-av { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; }
:root[data-ui="new"] .lk-pw { min-width: 0; flex: 1; }
:root[data-ui="new"] .lk-pn { font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
:root[data-ui="new"] .lk-x { width: 36px; height: 36px; padding: 0; justify-content: center; flex: none; }
:root[data-ui="new"] .lk-st { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:root[data-ui="new"] .lk-fun { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
:root[data-ui="new"] .lk-fun i { height: 6px; border-radius: 999px; background: var(--surface-2); }
:root[data-ui="new"] .lk-fun i.done { background: var(--accent-bg); }
:root[data-ui="new"] .lk-fun i.now { background: var(--accent); }
:root[data-ui="new"] .lk-fun i.lost { background: var(--danger-bg); }
:root[data-ui="new"] .lk-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
:root[data-ui="new"] .lk-kpi { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; align-content: start; min-width: 0; }
:root[data-ui="new"] .lk-kpi.wide { grid-column: 1 / -1; }
:root[data-ui="new"] .lk-kpi.warn { border-color: var(--warning); }
:root[data-ui="new"] .lk-kpi.bad { border-color: var(--danger); }
:root[data-ui="new"] .lk-kpi .label { font-size: 11px; }
:root[data-ui="new"] .lk-kv { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .lk-kv.sm { font-size: 15px; font-weight: 650; letter-spacing: 0; line-height: 1.35; min-width: 0; }
:root[data-ui="new"] .lk-kv .pill { white-space: normal; max-width: 100%; }
:root[data-ui="new"] .lk-sec { display: grid; gap: 6px; font-size: 14px; }
:root[data-ui="new"] .lk-dl { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 14px; }
:root[data-ui="new"] .lk-dl dt { color: var(--ink-faint); }
:root[data-ui="new"] .lk-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
:root[data-ui="new"] .lk-acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1100px) {
  :root[data-ui="new"] .lk-wrap.active.lk-open { grid-template-columns: minmax(0, 1fr); }
  :root[data-ui="new"] .lk-peek { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 81; border-radius: 22px 22px 0 0; max-height: 86vh; overflow-y: auto;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  :root[data-ui="new"] .lk-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 80; background: var(--overlay); }
  :root[data-ui="new"] body:has(.lk-wrap.lk-open) .crm-helper-fab { display: none; }  /* «?» не висит над листом */
}
@media (max-width: 600px) {
  :root[data-ui="new"] .lk-board { grid-auto-columns: 84%; scroll-snap-type: x mandatory; }
  :root[data-ui="new"] .lk-col { scroll-snap-align: start; }
  :root[data-ui="new"] .lk-dl { grid-template-columns: 1fr; gap: 0; }
  :root[data-ui="new"] .lk-dl dd { margin-bottom: 6px; }
}

/* ===================== Экран 6: Дашборд (#269, 27.10.2026) ===================== */
/* Мокап https://claude.ai/artifact/RQEWv9e9CU1Ng22yt6oci1, вариант 4. Код — ui-dashboard.js (#dashNew).
   Прежние плитки/панели дашборда при бете скрыты, без беты не видно #dashNew. */
#dashNew { display: none; }
:root[data-ui="new"] #view-dashboard > :not(#dashNew) { display: none; }
:root[data-ui="new"] #dashNew { display: grid; gap: 32px; min-width: 0; }
:root[data-ui="new"] .dh-i { flex: none; }
:root[data-ui="new"] .dh-num { font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .dh-faint { color: var(--ink-faint); font-size: 14px; }
:root[data-ui="new"] .dh-soft { color: var(--ink-soft); font-size: 14px; }
:root[data-ui="new"] .dh-empty { margin: 0; color: var(--ink-faint); font-size: 14px; }
:root[data-ui="new"] .dh-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
:root[data-ui="new"] .dh-head h2 { margin: 0; font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -.028em; }
:root[data-ui="new"] .dh-head .btn-primary { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="new"] .dh-zone { display: grid; gap: 16px; min-width: 0; }
:root[data-ui="new"] .dh-zone-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
:root[data-ui="new"] .dh-zone-head h3, :root[data-ui="new"] .dh-card-head h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
:root[data-ui="new"] .dh-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); padding: 20px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
:root[data-ui="new"] .dh-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
:root[data-ui="new"] .dh-more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; color: var(--accent); font: 600 14px/1.4 var(--font); cursor: pointer; }
:root[data-ui="new"] .dh-more:hover { color: var(--accent-hover); }
:root[data-ui="new"] .dh-more-btn { margin-left: 0; align-self: flex-start; min-height: 36px; }
:root[data-ui="new"] .dh-link { border: 0; background: none; padding: 0; font: 600 15px/1.4 var(--font); color: var(--ink); text-align: left; cursor: pointer; }
:root[data-ui="new"] .dh-link:hover { color: var(--accent); }
:root[data-ui="new"] .dh-btn { flex: none; white-space: nowrap; }
:root[data-ui="new"] .dh-label, :root[data-ui="new"] .dh-label-t { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
:root[data-ui="new"] .dh-label { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px; }

/* сводка дня */
:root[data-ui="new"] .dh-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
:root[data-ui="new"] .dh-strip-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 400 14px/1.4 var(--font); text-align: left; cursor: pointer; transition: border-color 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .dh-strip-row:hover { border-color: var(--accent); }
:root[data-ui="new"] .dh-strip-row b { font-size: 15px; font-weight: 700; min-width: 24px; }
:root[data-ui="new"] .dh-strip-row .dh-i { color: var(--ink-faint); }
:root[data-ui="new"] .dh-strip-row.attn .dh-i { color: var(--warning); }
:root[data-ui="new"] .dh-3col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }

/* занятия сегодня */
:root[data-ui="new"] .dh-lessons { display: flex; flex-direction: column; }
:root[data-ui="new"] .dh-lesson { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
:root[data-ui="new"] .dh-lesson:first-child { border-top: 0; }
:root[data-ui="new"] .dh-lesson > .pill { grid-column: 2; justify-self: start; }
:root[data-ui="new"] .dh-lesson > .pill[data-go] { cursor: pointer; }
:root[data-ui="new"] .dh-time { font-weight: 650; padding-top: 1px; }
:root[data-ui="new"] .dh-lesson.past .dh-time, :root[data-ui="new"] .dh-lesson.past .dh-link { color: var(--ink-soft); }
:root[data-ui="new"] .dh-who { min-width: 0; }
:root[data-ui="new"] .dh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .dh-type { display: inline-flex; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; }
:root[data-ui="new"] .dh-type-ind { background: var(--success-bg); color: var(--success); }
:root[data-ui="new"] .dh-type-group { background: var(--type-group-bg); color: var(--type-group); }
:root[data-ui="new"] .dh-type-trial { background: var(--type-trial-bg); color: var(--type-trial); }
:root[data-ui="new"] .dh-type-diag { background: var(--diag-bg); color: var(--diag); }
:root[data-ui="new"] .dh-now { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--accent); font-size: 12px; font-weight: 700; }
:root[data-ui="new"] .dh-now::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--accent); }

/* сделать сегодня */
:root[data-ui="new"] .dh-todo-group { display: flex; flex-direction: column; }
:root[data-ui="new"] .dh-todo-group.folded { display: none; }
:root[data-ui="new"] .dh-todo { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
:root[data-ui="new"] .dh-what b { font-weight: 600; }
:root[data-ui="new"] .dh-why { font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .dh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); justify-self: center; }
:root[data-ui="new"] .dh-chk { width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1.5px solid var(--field-border); background: var(--surface); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; }
:root[data-ui="new"] .dh-chk .dh-i { opacity: 0; }
:root[data-ui="new"] .dh-chk.done { background: var(--accent); border-color: var(--accent); }
:root[data-ui="new"] .dh-chk.done .dh-i { opacity: 1; }
:root[data-ui="new"] .dh-rest { align-self: flex-start; border: 0; background: none; padding: 6px 0 0 34px; color: var(--accent); font: 600 14px/1.4 var(--font); cursor: pointer; }
:root[data-ui="new"] .dh-all-done { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--success-bg); color: var(--success); font-weight: 600; }

/* хорошие новости */
:root[data-ui="new"] .dh-feed { display: flex; flex-direction: column; gap: 12px; }
:root[data-ui="new"] .dh-ev { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
:root[data-ui="new"] .dh-ev-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success); }
:root[data-ui="new"] .dh-ev-ic.trial { background: var(--type-trial-bg); color: var(--type-trial); }
:root[data-ui="new"] .dh-ev-ic.acc { background: var(--accent-bg); color: var(--accent); }

/* требует внимания */
:root[data-ui="new"] .dh-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
:root[data-ui="new"] .dh-money { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
/* #344: деньги месяца — плитка-блок с ⓘ (кнопка в кнопке недопустима), главная — касса */
:root[data-ui="new"] .dh-mtile .fin-i { margin-left: auto; }
:root[data-ui="new"] .dh-mtile .dh-val { font-size: 22px; white-space: nowrap; }
:root[data-ui="new"] .dh-mtile.main .dh-val { font-size: 26px; }
:root[data-ui="new"] .dh-mtile.main { border-color: var(--accent); }
:root[data-ui="new"] .dh-mtile.main .dh-tile-row .dh-i { color: var(--accent); }
:root[data-ui="new"] .dh-owner { margin-left: auto; }
:root[data-ui="new"] .dh-scope { margin: 0; }
:root[data-ui="new"] .dh-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; text-align: left; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); color: var(--ink); font: 400 14px/1.4 var(--font); cursor: pointer; min-width: 0; transition: border-color 140ms cubic-bezier(.2,.8,.2,1), box-shadow 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .dh-tile:hover { border-color: var(--line-strong); }
:root[data-ui="new"] .dh-tile-row { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); }
:root[data-ui="new"] .dh-val { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
:root[data-ui="new"] .dh-tile .pill { align-self: flex-start; }
:root[data-ui="new"] .dh-tile.attn { border-color: var(--warning); }
:root[data-ui="new"] .dh-tile.attn .dh-tile-row .dh-i { color: var(--warning); }
:root[data-ui="new"] .dh-tile.ok .dh-tile-row .dh-i { color: var(--success); }
:root[data-ui="new"] .dh-tile.debt { border-color: var(--danger); }
:root[data-ui="new"] .dh-tile.debt .dh-tile-row .dh-i, :root[data-ui="new"] .dh-tile.neg .dh-val { color: var(--danger); }
:root[data-ui="new"] .dh-tile.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
:root[data-ui="new"] .dh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-ui="new"] .dh-chip { min-height: 36px; padding: 5px 14px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font: 600 14px/1.4 var(--font); cursor: pointer; }
:root[data-ui="new"] .dh-chip.on { background: var(--accent); color: var(--on-accent); }
:root[data-ui="new"] .dh-tbl { border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; }
:root[data-ui="new"] .dh-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
:root[data-ui="new"] .dh-tbl th { text-align: left; padding: 10px 16px; background: var(--surface-2); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
:root[data-ui="new"] .dh-tbl td { padding: 10px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
:root[data-ui="new"] .dh-tbl td.dh-act { text-align: right; white-space: nowrap; }
:root[data-ui="new"] .dh-nm { font-weight: 600; font-size: 15px; }

/* месяц */
:root[data-ui="new"] .dh-month { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
:root[data-ui="new"] .dh-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
:root[data-ui="new"] .dh-big b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
:root[data-ui="new"] .dh-bar { position: relative; height: 12px; border-radius: 999px; background: var(--surface-2); }
:root[data-ui="new"] .dh-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--accent); }
:root[data-ui="new"] .dh-bar-plan { position: absolute; top: -6px; bottom: -6px; width: 2px; border-radius: 2px; background: var(--ink-soft); }
:root[data-ui="new"] .dh-bar-legend { font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .dh-funnel { display: flex; flex-direction: column; gap: 4px; }
:root[data-ui="new"] .dh-f-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 40px; gap: 12px; align-items: center; }
:root[data-ui="new"] .dh-f-nm { font-size: 14px; font-weight: 600; }
:root[data-ui="new"] .dh-f-track { height: 28px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
:root[data-ui="new"] .dh-f-fill { height: 100%; border-radius: 8px; background: var(--accent-bg); border: 1.5px solid var(--accent); }
:root[data-ui="new"] .dh-f-row.paid .dh-f-fill { background: var(--success-bg); border-color: var(--success); }
:root[data-ui="new"] .dh-f-n { font-weight: 700; text-align: right; }
:root[data-ui="new"] .dh-f-conv { padding-left: 132px; font-size: 12px; font-weight: 600; color: var(--ink-faint); }

@media (max-width: 1240px) { :root[data-ui="new"] .dh-tiles, :root[data-ui="new"] .dh-money { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  :root[data-ui="new"] .dh-3col, :root[data-ui="new"] .dh-month { grid-template-columns: minmax(0, 1fr); }
  :root[data-ui="new"] .dh-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  :root[data-ui="new"] .dh-strip { grid-template-columns: minmax(0, 1fr); }
  :root[data-ui="new"] .dh-tiles, :root[data-ui="new"] .dh-money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-ui="new"] .dh-mtile.main { grid-column: 1 / -1; }
  :root[data-ui="new"] .dh-owner { margin-left: 0; }
  :root[data-ui="new"] .dh-head .btn-primary { margin-left: 0; }
  :root[data-ui="new"] .dh-f-row { grid-template-columns: 96px minmax(0, 1fr) 32px; gap: 8px; }
  :root[data-ui="new"] .dh-f-conv { padding-left: 104px; }
  :root[data-ui="new"] .dh-tbl thead { display: none; }
  :root[data-ui="new"] .dh-tbl table, :root[data-ui="new"] .dh-tbl tbody, :root[data-ui="new"] .dh-tbl tr, :root[data-ui="new"] .dh-tbl td { display: block; width: 100%; }
  :root[data-ui="new"] .dh-tbl tr { padding: 12px 16px; border-top: 1px solid var(--line); }
  :root[data-ui="new"] .dh-tbl tr:first-child { border-top: 0; }
  :root[data-ui="new"] .dh-tbl td { border: 0; padding: 2px 0; }
  :root[data-ui="new"] .dh-tbl td.dh-act { text-align: left; padding-top: 8px; }
}

/* ===================== Экран 8: Преподаватели (#334, 27.10.2026) ===================== */
/* Мокап https://claude.ai/artifact/Njr5DEXcTP3SkXgix64UPC — все три вида с переключателем. Код — ui-teachers.js
   (#teachersNew); прежняя сетка при бете скрыта, без беты не видно #teachersNew. */
#teachersNew { display: none; }
:root[data-ui="new"] #view-teachers > :not(#teachersNew) { display: none; }
:root[data-ui="new"] #teachersNew { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
:root[data-ui="new"] .tc-body, :root[data-ui="new"] .tc-week-box { min-width: 0; }  /* неделя 820px — прокрутка в своей рамке, не страницы */
:root[data-ui="new"] .tc-i { flex: none; }
:root[data-ui="new"] .tc-num { font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .tc-faint { color: var(--ink-faint); font-size: 14px; }
:root[data-ui="new"] .tc-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
:root[data-ui="new"] .tc-head h2 { margin: 0; font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -.028em; }
:root[data-ui="new"] .tc-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-ui="new"] .tc-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="new"] .tc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
:root[data-ui="new"] .tc-views { margin-left: auto; }
:root[data-ui="new"] .tc-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: var(--surface-2); border-radius: 14px; }
:root[data-ui="new"] .tc-seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 12px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-soft); font: 600 14px/1.2 var(--font); white-space: nowrap; cursor: pointer; transition: background-color 140ms cubic-bezier(.2,.8,.2,1), color 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .tc-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
:root[data-ui="new"] .tc-views button.on { color: var(--accent); }
:root[data-ui="new"] .tc-seg .n { margin-left: 2px; font-size: 12px; color: var(--ink-faint); }
:root[data-ui="new"] .tc-summary { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 14px; color: var(--ink-soft); }
:root[data-ui="new"] .tc-summary b { color: var(--ink); font-size: 15px; }
:root[data-ui="new"] .tc-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
:root[data-ui="new"] .tc-nm { font-weight: 600; }
:root[data-ui="new"] .tc-sub { font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .tc-ava { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); font-size: 14px; font-weight: 700; }
:root[data-ui="new"] .tc-ava.lg { width: 48px; height: 48px; font-size: 15px; }
:root[data-ui="new"] .tc-pillbtn { border: 0; cursor: pointer; font-family: var(--font); }
:root[data-ui="new"] .tc-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* таблица */
:root[data-ui="new"] .tc-tbl { border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; background: var(--surface); }
:root[data-ui="new"] .tc-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
:root[data-ui="new"] .tc-tbl th { padding: 10px 12px; background: var(--surface-2); text-align: left; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); cursor: pointer; user-select: none; }
:root[data-ui="new"] .tc-tbl th.sorted { color: var(--accent); }
:root[data-ui="new"] .tc-ar { display: inline-block; width: 12px; }
:root[data-ui="new"] .tc-tbl td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
:root[data-ui="new"] .tc-tbl .r { text-align: right; }
:root[data-ui="new"] .tc-tbl tbody tr { cursor: pointer; }
:root[data-ui="new"] .tc-tbl tbody tr:hover td { background: var(--surface-2); }
:root[data-ui="new"] .tc-tbl td.tc-first .tc-nm { white-space: nowrap; }

/* карточки */
:root[data-ui="new"] .tc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
:root[data-ui="new"] .tc-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .tc-card:hover { border-color: var(--line-strong); }
:root[data-ui="new"] .tc-card.attn { border-color: var(--warning); }
:root[data-ui="new"] .tc-card-head { display: flex; align-items: flex-start; gap: 12px; }
:root[data-ui="new"] .tc-card-title { min-width: 0; flex: 1; }
:root[data-ui="new"] .tc-card-nm { font-size: 17px; font-weight: 700; line-height: 1.3; }
:root[data-ui="new"] .tc-kpis { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.3fr); gap: 8px; }
:root[data-ui="new"] .tc-kpi { padding: 10px 12px; min-width: 0; border-radius: 14px; background: var(--surface-2); }
:root[data-ui="new"] .tc-kpi .v { font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; white-space: nowrap; }
:root[data-ui="new"] .tc-kpi .l { font-size: 12px; color: var(--ink-faint); }
:root[data-ui="new"] .tc-notes { display: flex; flex-direction: column; gap: 6px; }
:root[data-ui="new"] .tc-note { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; border-radius: 8px; font: 400 14px/1.4 var(--font); text-align: left; }
:root[data-ui="new"] button.tc-note { cursor: pointer; }
:root[data-ui="new"] .tc-note.warn { background: var(--warning-bg); color: var(--warning); }
:root[data-ui="new"] .tc-note.ok { background: var(--success-bg); color: var(--success); }
:root[data-ui="new"] .tc-note.info { background: var(--accent-bg); color: var(--accent); }
:root[data-ui="new"] .tc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-faint); }

/* загрузка недели */
:root[data-ui="new"] .tc-week-box { display: flex; flex-direction: column; gap: 12px; }
:root[data-ui="new"] .tc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .tc-legend .tc-slot { width: 28px; height: 20px; font-size: 12px; }
:root[data-ui="new"] .tc-week-wrap { border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; background: var(--surface); }
:root[data-ui="new"] .tc-week { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(7, minmax(56px, 1fr)) minmax(120px, .9fr); min-width: 820px; }
:root[data-ui="new"] .tc-week > div { display: flex; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); }
:root[data-ui="new"] .tc-week .h { justify-content: center; border-top: 0; background: var(--surface-2); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
:root[data-ui="new"] .tc-week .h.first { justify-content: flex-start; }
:root[data-ui="new"] .tc-week .h.today { color: var(--accent); }
:root[data-ui="new"] .tc-week .cell { justify-content: center; }
:root[data-ui="new"] .tc-week .row { cursor: pointer; }
:root[data-ui="new"] .tc-week .row.sel { background: var(--accent-bg); }
:root[data-ui="new"] .tc-slot { width: 100%; max-width: 64px; height: 32px; display: grid; place-items: center; border-radius: 8px; font-size: 14px; font-weight: 700; }
:root[data-ui="new"] .tc-slot.l0 { border: 1.5px dashed var(--line-strong); color: var(--ink-faint); font-weight: 500; }
:root[data-ui="new"] .tc-slot.l1 { background: var(--accent-bg); color: var(--accent); }
:root[data-ui="new"] .tc-slot.l2 { background: var(--accent-bg); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
:root[data-ui="new"] .tc-slot.l3 { background: var(--accent); color: var(--on-accent); }
:root[data-ui="new"] .tc-load { display: flex; flex-direction: column; gap: 4px; width: 100%; }
:root[data-ui="new"] .tc-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
:root[data-ui="new"] .tc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
:root[data-ui="new"] .tc-detail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); }
:root[data-ui="new"] .tc-detail-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

@media (max-width: 700px) {
  :root[data-ui="new"] .tc-detail { grid-template-columns: minmax(0, 1fr); }
  :root[data-ui="new"] .tc-views { margin-left: 0; }
}
@media (max-width: 600px) {
  :root[data-ui="new"] .tc-actions { margin-left: 0; }
  :root[data-ui="new"] .tc-tbl thead { display: none; }
  :root[data-ui="new"] .tc-tbl table, :root[data-ui="new"] .tc-tbl tbody, :root[data-ui="new"] .tc-tbl tr, :root[data-ui="new"] .tc-tbl td { display: block; width: 100%; }
  :root[data-ui="new"] .tc-tbl tr { padding: 12px 16px; border-top: 1px solid var(--line); }
  :root[data-ui="new"] .tc-tbl tr:first-child { border-top: 0; }
  :root[data-ui="new"] .tc-tbl td { position: relative; padding: 3px 0 3px 9rem; border: 0; text-align: left; }
  :root[data-ui="new"] .tc-tbl td[data-label]::before { content: attr(data-label); position: absolute; left: 0; width: 8.5rem; font-size: 12px; color: var(--ink-faint); }
  :root[data-ui="new"] .tc-tbl td.tc-first { padding: 0 0 8px; }
  :root[data-ui="new"] .tc-tbl td.tc-first .tc-nm { white-space: normal; }
  :root[data-ui="new"] .tc-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ===================== Экран 9: Карточка преподавателя (#335, #240, 27.10.2026) ===================== */
/* Мокап https://claude.ai/artifact/4DzT9vvgtcMYEPfrpyTvLj, вариант 1 + вкладка «Класс». Код — ui-teacher-card.js
   (#tkRoot внутри #teacherCard). Прежняя панель колонок учеников/зарплаты/замещений при бете скрыта —
   #teacherSalary и #teacherSubstitutions переносятся во вкладки. */
:root[data-ui="new"] #view-teacher > .panel { display: none; }
:root[data-ui="new"] .tk { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
:root[data-ui="new"] .tk-i { flex: none; }
:root[data-ui="new"] .tk-num { font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .tk-faint { color: var(--ink-faint); font-size: 14px; }
:root[data-ui="new"] .tk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
:root[data-ui="new"] .tk-ava { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); font-size: 15px; font-weight: 800; }
:root[data-ui="new"] .tk-title { min-width: 0; }
:root[data-ui="new"] .tk-title h2 { margin: 0; font-size: 22px; font-weight: 750; line-height: 1.2; letter-spacing: -.02em; }
:root[data-ui="new"] .tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
:root[data-ui="new"] .tk-acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-ui="new"] .tk-acts .btn, :root[data-ui="new"] .tk .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
:root[data-ui="new"] .tk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
:root[data-ui="new"] .tk-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
:root[data-ui="new"] .tk-tile.attn { border-color: var(--warning); }
:root[data-ui="new"] .tk-tile .label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
:root[data-ui="new"] .tk-tile .v { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
:root[data-ui="new"] .tk-tile .s { font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .tk-link { padding: 0; border: 0; background: none; color: var(--accent); font: 600 14px/1.4 var(--font); cursor: pointer; }
:root[data-ui="new"] .tk-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); }
:root[data-ui="new"] .tk-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
:root[data-ui="new"] .tk-ph h3 { margin: 0; font-size: 17px; font-weight: 700; }
:root[data-ui="new"] .tk-arrows { margin-left: auto; display: flex; gap: 4px; }
:root[data-ui="new"] .tk-ic { width: 36px; padding: 0; justify-content: center; }
:root[data-ui="new"] .tk-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
:root[data-ui="new"] .tk-day { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 96px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
:root[data-ui="new"] .tk-day.today { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
:root[data-ui="new"] .tk-dh { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
:root[data-ui="new"] .tk-dh b { color: var(--ink); letter-spacing: 0; }
:root[data-ui="new"] .tk-day.today .tk-dh { color: var(--accent); }
:root[data-ui="new"] .tk-none { font-size: 12px; }
:root[data-ui="new"] .tk-les { display: block; width: 100%; min-width: 0; padding: 4px 6px; border: 0; border-radius: 8px; font: 400 12px/1.35 var(--font); text-align: left; cursor: pointer; }
:root[data-ui="new"] .tk-les b { display: block; font-weight: 700; }
:root[data-ui="new"] .tk-les span { display: block; overflow: hidden; color: var(--ink-soft); text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="new"] .tk-les.ind { background: var(--type-individual-bg); color: var(--type-individual); }
:root[data-ui="new"] .tk-les.grp { background: var(--type-group-bg); color: var(--type-group); }
:root[data-ui="new"] .tk-les.trial { background: var(--type-trial-bg); color: var(--type-trial); }
:root[data-ui="new"] .tk-les.diag { background: var(--diag-bg); color: var(--diag); }
:root[data-ui="new"] .tk-les.unm { background: transparent; border: 1.5px dashed var(--warning); color: var(--warning); }
:root[data-ui="new"] .tk-les.off { background: var(--surface-2); color: var(--ink-faint); }
:root[data-ui="new"] .tk-les.off b { text-decoration: line-through; }
:root[data-ui="new"] .tk-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; background: var(--surface-2); border-radius: 999px; scrollbar-width: none; align-self: flex-start; max-width: 100%; }
:root[data-ui="new"] .tk-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 9px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: 600 14px/1.2 var(--font); white-space: nowrap; cursor: pointer; }
:root[data-ui="new"] .tk-tabs button:hover { color: var(--ink); }
:root[data-ui="new"] .tk-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
:root[data-ui="new"] .tk-tabs .c { margin-left: 4px; font-size: 12px; color: var(--ink-faint); }
:root[data-ui="new"] .tk-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 16px; }
:root[data-ui="new"] .tk-tbl { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
:root[data-ui="new"] .tk-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
:root[data-ui="new"] .tk-tbl th { padding: 10px 12px; background: var(--surface-2); text-align: left; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
:root[data-ui="new"] .tk-tbl td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
:root[data-ui="new"] .tk-tbl .r { text-align: right; }
:root[data-ui="new"] .tk-tbl tr[data-tk-student], :root[data-ui="new"] .tk-tbl tr[data-tk-group] { cursor: pointer; }
:root[data-ui="new"] .tk-tbl tr[data-tk-student]:hover td, :root[data-ui="new"] .tk-tbl tr[data-tk-group]:hover td { background: var(--surface-2); }
:root[data-ui="new"] .tk-grp td { padding: 8px 12px; background: var(--ground); }
:root[data-ui="new"] .tk-grp .pill { margin-right: 8px; }
:root[data-ui="new"] .tk-type { display: inline-flex; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; }
:root[data-ui="new"] .tk-type.ind { background: var(--success-bg); color: var(--success); }
:root[data-ui="new"] .tk-type.grp { background: var(--type-group-bg); color: var(--type-group); }
:root[data-ui="new"] .tk-type.trial { background: var(--type-trial-bg); color: var(--type-trial); }
:root[data-ui="new"] .tk-type.diag { background: var(--diag-bg); color: var(--diag); }
:root[data-ui="new"] .tk-seg { display: inline-flex; align-self: flex-start; gap: 4px; padding: 3px; background: var(--surface-2); border-radius: 14px; }
:root[data-ui="new"] .tk-seg button { min-height: 32px; padding: 6px 12px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-soft); font: 600 14px/1.2 var(--font); cursor: pointer; }
:root[data-ui="new"] .tk-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
/* вкладка «Посещаемость»: те же цветные плитки, что у ученика (.st-att), нажатие — изменить отметку */
:root[data-ui="new"] .tk-att-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
:root[data-ui="new"] .tk-att-month { display: inline-flex; align-items: center; gap: 8px; }
:root[data-ui="new"] .tk-att-month b { min-width: 9rem; text-align: center; font-size: 15px; }
:root[data-ui="new"] .tk-seg .c { margin-left: 4px; font-size: 12px; color: var(--ink-faint); }
/* «Профиль» — те же группы, что «Контакты» карточки ученика (.stt-kv), в карточке-панели */
:root[data-ui="new"] .tk-profile { display: flex; flex-direction: column; gap: 8px; }
:root[data-ui="new"] .tk-profile .stt-kv { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); overflow: hidden; }
:root[data-ui="new"] .tk-profile .stt-group .pill { margin-left: 8px; }
:root[data-ui="new"] .tk-profile .stt-group p.faint { margin-bottom: 8px; color: var(--ink-faint); }
:root[data-ui="new"] .tk-profile-hint { margin: 0; }
/* «Замещения»: вторичная кнопка с бирюзой (главная — в шапке), строки — карточки */
:root[data-ui="new"] .btn.tk-accent { margin-left: auto; border-color: var(--accent); color: var(--accent); }
:root[data-ui="new"] .btn.tk-accent:hover { background: var(--accent-bg); }
:root[data-ui="new"] .tk-subs { display: flex; flex-direction: column; gap: 8px; color: var(--ink); font-size: 15px; }
:root[data-ui="new"] .tk-subs .tl-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); transition: border-color 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .tk-subs .tl-item:hover { border-color: var(--accent); }
:root[data-ui="new"] .tk-subs .tl-content { flex: 1; min-width: 0; }
:root[data-ui="new"] .tk-subs .tl-title { font-weight: 600; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .tk-subs .tl-sub { font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .tk-subs .tl-item:not([onclick]) { box-shadow: none; background: var(--ground); border-style: dashed; color: var(--ink-faint); }
:root[data-ui="new"] .tk-money { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 12px; }
:root[data-ui="new"] .tk-tile .tk-pillbtn { align-self: flex-start; border: 0; cursor: pointer; font-family: var(--font); }
:root[data-ui="new"] .tk-tile.cur { border-color: var(--accent); }
/* окно замещения (просмотр) — в новом виде, без системных alert/confirm */
:root[data-ui="new"] .sd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
:root[data-ui="new"] .sd-head h3 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
:root[data-ui="new"] .sd-head .pill { margin-left: auto; }
:root[data-ui="new"] .sd-meta { margin: 4px 0 12px; font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .sd-tbl { overflow: auto; max-height: 50vh; border: 1px solid var(--line); border-radius: 14px; }
:root[data-ui="new"] .sd-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
:root[data-ui="new"] .sd-tbl th { position: sticky; top: 0; padding: 10px 12px; background: var(--surface-2); text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
:root[data-ui="new"] .sd-tbl td { padding: 10px 12px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .sd-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
:root[data-ui="new"] .sd-foot .sd-danger { margin-right: auto; color: var(--danger); }
:root[data-ui="new"] .tk-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
:root[data-ui="new"] .tk-kv { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 8px 16px; font-size: 15px; }
:root[data-ui="new"] .tk-kv .l { color: var(--ink-faint); font-size: 14px; }
:root[data-ui="new"] .tk-svc summary { color: var(--accent); font-weight: 600; cursor: pointer; padding: 8px 0; }
:root[data-ui="new"] .tk-danger { color: var(--danger); }
:root[data-ui="new"] .tk-class { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; }
:root[data-ui="new"] .tk-class-ic { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); }
:root[data-ui="new"] .tk-class-m { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
:root[data-ui="new"] .tk-class-m b { font-size: 17px; font-weight: 700; }
:root[data-ui="new"] .tk-class-m > span { font-size: 14px; color: var(--ink-soft); }
:root[data-ui="new"] .tk-class-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
@media (max-width: 860px) {
  :root[data-ui="new"] .tk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-ui="new"] .tk-acts { margin-left: 0; }
  :root[data-ui="new"] .tk-week { grid-template-columns: repeat(7, minmax(110px, 1fr)); overflow-x: auto; }
}
@media (max-width: 600px) {
  :root[data-ui="new"] .tk-metrics, :root[data-ui="new"] .tk-kv { grid-template-columns: minmax(0, 1fr); }
  :root[data-ui="new"] .tk-kv { gap: 2px; }
  :root[data-ui="new"] .tk-kv .l { margin-top: 8px; }
  :root[data-ui="new"] .tk-tbl thead { display: none; }
  :root[data-ui="new"] .tk-tbl table, :root[data-ui="new"] .tk-tbl tbody, :root[data-ui="new"] .tk-tbl tr, :root[data-ui="new"] .tk-tbl td { display: block; width: 100%; }
  :root[data-ui="new"] .tk-tbl tr { padding: 10px 14px; border-top: 1px solid var(--line); }
  :root[data-ui="new"] .tk-tbl td { position: relative; padding: 3px 0 3px 8.5rem; border: 0; text-align: left; }
  :root[data-ui="new"] .tk-tbl td:first-child { padding-left: 0; }
  :root[data-ui="new"] .tk-tbl td[data-label]::before { content: attr(data-label); position: absolute; left: 0; width: 8rem; font-size: 12px; color: var(--ink-faint); }
  :root[data-ui="new"] .tk-grp td { padding: 4px 0; background: none; }
}

/* ===================== Финансы → Выплаты преподавателям (#274, 26.10.2026) ===================== */
/* Код — ui-payouts.js. Мокап https://claude.ai/artifact/DjjB8cc9hRaDipEkG4Qikr, вариант 1 «Ведомость месяца».
   Плитки, таблица, подсказки — общие классы «Финансов» (.fin-*); на телефоне строки — карточки (.stt-table). */
:root:not([data-ui="new"]) .nav-new-only { display: none !important; }
:root[data-ui="new"] .pay-month { min-width: 9.5rem; text-align: center; font-weight: 600; font-size: 15px; background: var(--surface); border-radius: 11px; padding: 8px 12px; box-shadow: var(--shadow); }
:root[data-ui="new"] .pay-add { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="new"] .pay-table tbody tr { cursor: pointer; }
:root[data-ui="new"] .pay-table tbody tr:hover td { background: var(--surface-2); }
:root[data-ui="new"] .pay-table tbody tr:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
:root[data-ui="new"] .pay-who { font-weight: 600; }
:root[data-ui="new"] .pay-sub { display: block; font-size: 12px; color: var(--ink-faint); font-weight: 400; }
:root[data-ui="new"] .pay-neg { color: var(--danger); }
:root[data-ui="new"] .pay-table tfoot td { font-weight: 700; background: var(--surface-2); }
:root[data-ui="new"] .pay-sum { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--ink-faint); margin-bottom: 12px; }
:root[data-ui="new"] .pay-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .pay-list { display: grid; gap: 6px; margin-bottom: 14px; }
:root[data-ui="new"] .pay-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; font-size: 14px; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .pay-del { color: var(--danger); flex: none; }
:root[data-ui="new"] .pay-form { display: grid; gap: 12px; }
:root[data-ui="new"] .pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px; }
:root[data-ui="new"] .pay-grid .form-field, :root[data-ui="new"] .pay-form .form-field { margin: 0; }
@media (max-width: 600px) {
  :root[data-ui="new"] .pay-add { margin-left: 0; }
  :root[data-ui="new"] .pay-table tfoot tr { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; background: var(--surface-2); }
  :root[data-ui="new"] .pay-table tfoot td { display: block; border: 0; padding: 4px 0; background: none; }
  :root[data-ui="new"] .pay-table tfoot td[data-label] { position: relative; padding-left: calc(8.5rem + 8px); }
  :root[data-ui="new"] .pay-table tfoot td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 8.5rem; font-size: 13px; color: var(--ink-faint); }
}

/* ===================== Карточка ученика: вкладка «Уроки» (#270, 27.10.2026) ===================== */
/* Код — ui-card-tabs.js (loadLessons/renderLessons/editTopic). Таблица — общий вид вкладок (.stt-table). */
:root[data-ui="new"] #view-student .panel[data-st-tab="lessons"] [data-tab="lessons"] { display: block; }
:root[data-ui="new"] .stl-table tbody tr.pick { cursor: pointer; }
:root[data-ui="new"] .stl-table tbody tr.pick:hover td { background: var(--surface-2); }
:root[data-ui="new"] .stl-table tbody tr.pick:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
:root[data-ui="new"] .stl-table td.stl-topic { white-space: normal; min-width: 14rem; }
:root[data-ui="new"] .stl-when { margin: 0 0 12px; font-size: 14px; }
:root[data-ui="new"] .stl-by { display: block; margin-top: 6px; font-size: 13px; }
:root[data-ui="new"] #stlTopic { width: 100%; min-height: 84px; resize: vertical; font: 400 15px/1.5 var(--font); }
@media (max-width: 600px) { :root[data-ui="new"] .stl-table td.stl-topic { min-width: 0; } }

/* ===================== Экран 11: Группы (#340, 27.10.2026) ===================== */
/* Мокап https://claude.ai/artifact/MgSczPbBY2ssi36dvabjqk — вариант 1 (таблица) и 2 (плитки) с переключателем.
   Код — ui-groups.js (#groupsNew); разметка — классы .tc-* экрана «Преподаватели» + свои .gr-*. */
#groupsNew { display: none; }
:root[data-ui="new"] #view-groups > :not(#groupsNew) { display: none; }
:root[data-ui="new"] #groupsNew { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
:root[data-ui="new"] .gr-sel { height: 38px; padding: 6px 12px; border: 1.5px solid var(--field-border); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 14px/1.2 var(--font); max-width: 100%; }
:root[data-ui="new"] .gr-solo { background: var(--marker-soft); color: var(--ink); font-size: 12px; margin-top: 4px; }
:root[data-ui="new"] .pill-group { background: var(--type-group-bg); color: var(--type-group); }
:root[data-ui="new"] .gr-bars { display: inline-flex; align-items: center; gap: 3px; }
:root[data-ui="new"] .gr-b { display: inline-block; width: 10px; height: 18px; border-radius: 3px; background: var(--surface-2); }
:root[data-ui="new"] .gr-b.y { background: var(--success); }
:root[data-ui="new"] .gr-b.n { background: var(--danger); }
:root[data-ui="new"] .gr-b.q { background: transparent; border: 1.5px dashed var(--warning); }
:root[data-ui="new"] .gr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-faint); }
:root[data-ui="new"] .gr-legend span { display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="new"] .gr-legend .gr-b { width: 8px; height: 12px; }
:root[data-ui="new"] .gr-tbl tr.gr-sec td { background: var(--ground); cursor: default; }
:root[data-ui="new"] .gr-tbl tr.gr-sec .pill { margin-right: 8px; }
:root[data-ui="new"] .gr-off { display: flex; flex-direction: column; gap: 10px; }
:root[data-ui="new"] .gr-off-h { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 10px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 14px/1.2 var(--font); cursor: pointer; }
:root[data-ui="new"] .gr-off-h:hover { border-color: var(--line-strong); }
:root[data-ui="new"] .gr-off-h .tc-i { color: var(--ink-faint); transition: transform 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .gr-off.open .gr-off-h .tc-i { transform: rotate(90deg); }
:root[data-ui="new"] .gr-ava, :root[data-ui="new"] .gc-ava { flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--type-group-bg); color: var(--type-group); font-weight: 800; }
:root[data-ui="new"] .gr-ava { width: 40px; height: 40px; border-radius: 10px; font-size: 14px; }
:root[data-ui="new"] .gr-people { display: flex; flex-wrap: wrap; gap: 6px; }
:root[data-ui="new"] .gr-person { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 999px; background: var(--surface-2); font-size: 14px; }
:root[data-ui="new"] .gr-person .tc-ava { width: 24px; height: 24px; font-size: 11px; }
:root[data-ui="new"] .gr-person.slot { padding: 2px 10px; background: transparent; border: 1.5px dashed var(--line-strong); color: var(--ink-faint); }
:root[data-ui="new"] .gr-tile.empty { background: var(--ground); box-shadow: none; border-style: dashed; border-color: var(--line-strong); }
:root[data-ui="new"] .gr-tile .tc-card-nm, :root[data-ui="new"] .gc .tk-title h2 { overflow-wrap: anywhere; }  /* длинное название без пробелов */
:root[data-ui="new"] .gr-tbl .gr-solo, :root[data-ui="new"] .gr-tbl td[data-label="Следующее"], :root[data-ui="new"] .gr-tbl td[data-label="Расписание"] { white-space: nowrap; }
@media (max-width: 600px) {
  :root[data-ui="new"] .gr-tbl tr.gr-sec { background: var(--ground); }
  :root[data-ui="new"] .gr-tbl tr.gr-sec td { padding: 0; }
  :root[data-ui="new"] .gr-sel { width: 100%; }
}

/* ===================== Экран 12: Карточка группы (#341, 27.10.2026) ===================== */
/* Мокап — тот же, вариант 1. Код — ui-group-card.js (#groupCardNew): шапка, плитки, вкладки — классы .tk-*
   карточки преподавателя; свои — .gc-*. Прежняя карточка (.panel) при бете скрыта. */
#groupCardNew { display: none; }
:root[data-ui="new"] #view-group > .panel { display: none; }
:root[data-ui="new"] #groupCardNew { display: block; min-width: 0; }
:root[data-ui="new"] .gc-ava { width: 48px; height: 48px; font-size: 15px; }
:root[data-ui="new"] .tk-tile .v.sm { font-size: 19px; }
:root[data-ui="new"] .gc-of { font-size: 15px; font-weight: 600; color: var(--ink-faint); }
:root[data-ui="new"] .gc-link { padding: 0; border: 0; background: none; color: var(--accent); font: 600 14px/1.4 var(--font); cursor: pointer; text-align: left; }
:root[data-ui="new"] .gc-link:hover { color: var(--accent-hover); text-decoration: underline; }
:root[data-ui="new"] .gc-chain { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
:root[data-ui="new"] .gc-members { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
:root[data-ui="new"] .gc-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
:root[data-ui="new"] .gc-mrow:first-child { border-top: 0; }
:root[data-ui="new"] .gc-mname { flex: 1; min-width: 12rem; display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: none; color: var(--ink); font: 400 15px/1.4 var(--font); text-align: left; cursor: pointer; }
:root[data-ui="new"] .gc-mname b { font-weight: 600; }
:root[data-ui="new"] .gc-mname:hover b { color: var(--accent); }
:root[data-ui="new"] .gc-hint { font-size: 14px; }
:root[data-ui="new"] .gc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Доработка 28.10.2026: плитка «Добавить участника» под участниками, дорожка «Расписание» (классы .stw-* ученика). */
:root[data-ui="new"] .gc-addm { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 72px; margin-top: 12px; padding: 16px; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: transparent; color: var(--ink-soft); font: 600 15px/1.4 var(--font); cursor: pointer; transition: border-color .14s, background-color .14s, color .14s; }
:root[data-ui="new"] .gc-addm:hover { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
:root[data-ui="new"] .gc-addm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-ui="new"] .gc-week { margin: 0; }  /* отступы — gap .tk */

/* ===================== Экраны «Задачи», «Оплаты», «Помощник», «Инструкции» (28.10.2026) ===================== */
/* Мокап https://claude.ai/artifact/PCumcJb2YVg97nrJNexsZd, вариант 1. Код — ui-tasks.js (#tasksNew),
   ui-payments.js (#paymentsNew), ui-help.js (#helpHead, #insRoot). Шапки, сегменты, таблица — .tc-* «Преподавателей». */
#tasksNew, #paymentsNew, #helpHead { display: none; }
:root[data-ui="new"] #view-tasks > :not(#tasksNew), :root[data-ui="new"] #view-payments > :not(#paymentsNew) { display: none; }
:root[data-ui="new"] #tasksNew, :root[data-ui="new"] #paymentsNew { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
:root[data-ui="new"] .tq-hint { margin: 0; font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .tq-inp { height: 40px; padding: 8px 12px; border: 1.5px solid var(--field-border); border-radius: 8px; background: var(--surface); color: var(--ink); font: 400 15px/1.4 var(--font); min-width: 0; }
:root[data-ui="new"] .tq-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
:root[data-ui="new"] .tq-inp[disabled] { opacity: .55; }
/* задачи: список по группам */
:root[data-ui="new"] .tq-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
:root[data-ui="new"] .tq-gh { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--ground); border: 0; border-top: 1px solid var(--line); font: 600 14px/1.4 var(--font); color: var(--ink); text-align: left; }
:root[data-ui="new"] .tq-list > .tq-gh:first-child { border-top: 0; }
:root[data-ui="new"] .tq-n { font-size: 14px; font-weight: 400; color: var(--ink-faint); }
:root[data-ui="new"] .tq-toggle { width: 100%; cursor: pointer; }
:root[data-ui="new"] .tq-toggle .tc-i { margin-left: auto; color: var(--ink-faint); transition: transform 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .tq-toggle[aria-expanded="true"] .tc-i { transform: rotate(180deg); }
:root[data-ui="new"] .tq-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
:root[data-ui="new"] .tq-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
:root[data-ui="new"] .tq-text { font-weight: 600; overflow-wrap: anywhere; }
:root[data-ui="new"] .tq-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .tq-due { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
:root[data-ui="new"] .tq-due.overdue { color: var(--danger); }
:root[data-ui="new"] .tq-due.today { color: var(--warning); }
:root[data-ui="new"] .tq-who { border: 0; background: var(--accent-bg); color: var(--accent); font-weight: 600; cursor: pointer; }
:root[data-ui="new"] .tq-who:hover { text-decoration: underline; }
:root[data-ui="new"] .tq-src { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-faint); }
:root[data-ui="new"] .tq-to { font-size: 12px; font-weight: 600; color: var(--ink-soft); }  /* исполнитель «→ Лера» (29.10.2026) */
:root[data-ui="new"] .tq-acts { display: flex; gap: 6px; flex-wrap: wrap; }
:root[data-ui="new"] .tq-sm { min-height: 32px; height: 32px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 4px; }
:root[data-ui="new"] .tq-cb { width: 22px; height: 22px; flex: none; margin-top: 1px; padding: 0; display: grid; place-items: center; border: 1.5px solid var(--field-border); border-radius: 6px; background: var(--surface); color: transparent; cursor: pointer; transition: background-color .14s, border-color .14s; }
:root[data-ui="new"] .tq-cb:hover:not([disabled]) { border-color: var(--accent); }
:root[data-ui="new"] .tq-cb.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root[data-ui="new"] .tq-cb[disabled] { cursor: default; opacity: .55; }
:root[data-ui="new"] .tq-row.done .tq-text { font-weight: 500; color: var(--ink-faint); text-decoration: line-through; }
:root[data-ui="new"] .tq-empty { padding: 16px; font-size: 14px; color: var(--ink-faint); }
@media (max-width: 600px) {
  /* плавающая «?» в правом нижнем углу не закрывает последние кнопки («На завтра», «Спросить», конец статьи) */
  :root[data-ui="new"] #tasksNew, :root[data-ui="new"] #paymentsNew, :root[data-ui="new"] #insRoot, :root[data-ui="new"] #view-crmhelper { padding-bottom: 72px; }
  :root[data-ui="new"] .tq-row { flex-wrap: wrap; }
  :root[data-ui="new"] .tq-acts { flex-basis: 100%; padding-left: 34px; }
  :root[data-ui="new"] .tq-inp { font-size: 16px; height: 44px; }
}
/* оплаты */
:root[data-ui="new"] .py-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
:root[data-ui="new"] .py-kpis .tk-tile.py-over { border-color: var(--danger); }
:root[data-ui="new"] .py-kpis .tk-tile.py-over .v { color: var(--danger); }
:root[data-ui="new"] .py-own { display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="new"] .py-search { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1.5px solid var(--field-border); border-radius: 999px; background: var(--surface); color: var(--ink-faint); flex: 1; min-width: 12rem; max-width: 20rem; }
:root[data-ui="new"] .py-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 15px/1.4 var(--font); }
:root[data-ui="new"] .py-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
:root[data-ui="new"] #paymentsNew .tc-tbl td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
:root[data-ui="new"] #paymentsNew .tc-tbl th { cursor: default; }
:root[data-ui="new"] .py-row { cursor: pointer; }
:root[data-ui="new"] .py-row:hover td, :root[data-ui="new"] .py-row:focus-visible td { background: var(--ground); }
:root[data-ui="new"] .py-who { font-weight: 600; }
:root[data-ui="new"] .py-r { text-align: right; }
:root[data-ui="new"] .py-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-ui="new"] .py-amt.neg { color: var(--danger); }
:root[data-ui="new"] #paymentsNew .tc-tbl tfoot td { background: var(--ground); font-weight: 600; }
:root[data-ui="new"] .py-empty { padding: 20px 12px; text-align: center; color: var(--ink-faint); }
@media (max-width: 760px) { :root[data-ui="new"] .py-kpis { grid-template-columns: minmax(0, 1fr); } }
/* помощник: страница */
:root[data-ui="new"] #helpHead { display: flex; margin-bottom: 16px; }
:root[data-ui="new"] #view-crmhelper > #helpHead + .panel { display: none; }  /* прежняя шапка «❓ Помощник по CRM» */
:root[data-ui="new"] #view-crmhelper > .panel { border-radius: 22px; }
:root[data-ui="new"] #view-crmhelper .crm-helper-thread { display: flex; flex-direction: column; gap: 10px; padding: 20px; font-size: 15px; min-height: 16rem; }
:root[data-ui="new"] #view-crmhelper .crm-helper-msg { align-self: flex-start; max-width: 44rem; margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; line-height: 1.55; }
:root[data-ui="new"] #view-crmhelper .crm-helper-msg.me { align-self: flex-end; margin: 0; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root[data-ui="new"] #view-crmhelper .crm-helper-chips { padding: 0 20px 12px; gap: 6px; }
:root[data-ui="new"] #view-crmhelper .crm-helper-chips .chip { border: 1.5px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: 600 14px/1.3 var(--font); color: var(--ink-soft); cursor: pointer; }
:root[data-ui="new"] #view-crmhelper .crm-helper-chips .chip:hover { border-color: var(--accent); color: var(--accent); }
:root[data-ui="new"] #view-crmhelper .crm-helper-input { gap: 8px; padding: 12px 20px 20px; border-top: 0; }
:root[data-ui="new"] #view-crmhelper .crm-helper-input input { flex: 1; min-width: 0; height: 44px; padding: 8px 16px; border: 1.5px solid var(--field-border); border-radius: 999px; background: var(--surface); color: var(--ink); font: 400 15px/1.4 var(--font); }
:root[data-ui="new"] #view-crmhelper .crm-helper-input input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
:root[data-ui="new"] #view-crmhelper .crm-helper-input .btn { height: 44px; }
/* инструкции (экран работает и без беты — тогда в прежних цветах) */
#insRoot { display: grid; gap: 16px; min-width: 0; }
.ins-doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.ins-toc { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; }
.ins-toc .label { padding: 8px 10px 4px; }
.ins-toc a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.ins-toc a:hover { background: var(--surface-2); }
.ins-toc a.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.ins-toc a.sub { padding-left: 22px; }
.ins-art { max-width: 46rem; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ins-art h3 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.ins-item { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.ins-item h4 { margin: 0; font-size: 17px; font-weight: 700; }
.ins-art p, .ins-art li { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.ins-art p { margin: 0; }
.ins-art ul, .ins-art ol { margin: 0; padding-left: 20px; }
.ins-art table { border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; max-width: 100%; }
.ins-art th, .ins-art td { padding: 8px 10px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.ins-art code, .ins-art kbd { padding: 0 6px; border-radius: 6px; background: var(--surface-2); font-size: 14px; }
.ins-art a { color: var(--accent); }
.ins-art img { max-width: 100%; border-radius: 8px; }
@media (max-width: 860px) { .ins-doc { grid-template-columns: minmax(0, 1fr); } .ins-toc { position: static; } }

/* ===== Экран «Расписание» (#348, 29.10.2026) — механика Google Календаря. Код — ui-schedule.js (#schedNew).
   Мокап https://claude.ai/artifact/HHbvBaVNKfz5vWbizFN8DW. Цвет занятия — цвет преподавателя (8 токенов по кругу),
   прошедшие бледнее, пунктир — занятость из календаря. ===== */
#schedNew { display: none; }
:root[data-ui="new"] #view-schedule > :not(#schedNew) { display: none; }
:root[data-ui="new"] #schedNew { display: block; min-width: 0; padding-bottom: 72px; }  /* круглая «?» помощника не закрывает низ сетки */
:root[data-ui="new"] .sc { position: relative; display: grid; grid-template-columns: 272px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); overflow: clip; min-height: 640px; }
:root[data-ui="new"] .sc-side { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-right: 1px solid var(--line); min-width: 0; }
:root[data-ui="new"] .sc-main { display: flex; flex-direction: column; min-width: 0; }
:root[data-ui="new"] .sc-ghost { border-color: transparent; color: var(--ink-soft); }
:root[data-ui="new"] .sc-ghost:hover { border-color: transparent; background: var(--surface-2); color: var(--ink); }
:root[data-ui="new"] .sc-sm { height: 32px; padding: 4px 12px; font-size: 13px; }
:root[data-ui="new"] .sc-ghost.sc-sm { width: 32px; padding: 0; }
:root[data-ui="new"] .sc-create { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 16px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-pop); color: var(--ink); font: 650 15px/1 var(--font); cursor: pointer; transition: background-color 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .sc-create svg { color: var(--accent); }
:root[data-ui="new"] .sc-create:hover { background: var(--accent-bg); }
:root[data-ui="new"] .sc-mini-h { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; }
:root[data-ui="new"] .sc-mini-h > span:last-child { display: flex; gap: 2px; }
:root[data-ui="new"] .sc-mini-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .sc-mini-g > span { color: var(--ink-faint); font-weight: 600; padding: 2px 0; }
:root[data-ui="new"] .sc-mini-g button { aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font: 400 12px/1 var(--font); cursor: pointer; padding: 0; }
:root[data-ui="new"] .sc-mini-g button:hover { background: var(--surface-2); }
:root[data-ui="new"] .sc-mini-g button.out { color: var(--ink-faint); }
:root[data-ui="new"] .sc-mini-g button.in { background: var(--accent-bg); border-radius: 6px; }
:root[data-ui="new"] .sc-mini-g button.today { background: var(--accent); color: var(--on-accent); font-weight: 700; }
:root[data-ui="new"] .sc-flt { border-top: 1px solid var(--line); padding-top: 12px; }
:root[data-ui="new"] .sc-flt summary { cursor: pointer; list-style: none; margin-bottom: 8px; }
:root[data-ui="new"] .sc-flt summary::-webkit-details-marker { display: none; }
:root[data-ui="new"] .sc-stk { display: flex; flex-direction: column; gap: 8px; }
:root[data-ui="new"] .sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
:root[data-ui="new"] .sc-chip { cursor: pointer; border: 1.5px solid transparent; font: 400 14px/1.5 var(--font); }
:root[data-ui="new"] .sc-chip.on { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); font-weight: 600; }
:root[data-ui="new"] .sc-chip button { display: grid; place-items: center; border: 0; background: transparent; color: inherit; padding: 0; cursor: pointer; }
:root[data-ui="new"] .sc-sec { display: flex; flex-direction: column; gap: 8px; }
:root[data-ui="new"] .sc-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
:root[data-ui="new"] .sc-sec-h .tc-faint { font-size: 12px; }
:root[data-ui="new"] .sc-tbtns { display: flex; flex-wrap: wrap; gap: 6px; }
:root[data-ui="new"] .sc-tlist { display: flex; flex-direction: column; gap: 1px; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
:root[data-ui="new"] .sc-tlist.plain { max-height: none; border: 0; padding: 0; }
:root[data-ui="new"] .sc-tlist label { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; font-size: 14px; cursor: pointer; min-width: 0; }
:root[data-ui="new"] .sc-tlist label:hover { background: var(--surface-2); }
:root[data-ui="new"] .sc-tlist input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--c, var(--accent)); }
:root[data-ui="new"] .sc-tlist .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="new"] .sc-tlist .n { margin-left: auto; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .sc-note { font-size: 12px; }
:root[data-ui="new"] .sc-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1.5px solid var(--field-border); border-radius: 999px; background: var(--surface); color: var(--ink-faint); min-width: 0; }
:root[data-ui="new"] .sc-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
:root[data-ui="new"] .sc-search input { border: 0; outline: 0; background: transparent; font: 400 14px/1 var(--font); color: var(--ink); width: 100%; min-width: 0; padding: 0; }
:root[data-ui="new"] .sc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
:root[data-ui="new"] .sc-arrows { display: flex; gap: 2px; }
:root[data-ui="new"] .sc-arrows .btn { width: 36px; padding: 0; }
:root[data-ui="new"] .sc-title { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
:root[data-ui="new"] .sc-top-r { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
:root[data-ui="new"] .sc-top-r .sc-search { width: 13rem; }
:root[data-ui="new"] .sc-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); }
:root[data-ui="new"] .sc-active[hidden] { display: none; }
:root[data-ui="new"] .sc-act-l { display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="new"] .sc-body { min-width: 0; flex: 1; }
:root[data-ui="new"] .sc-empty { padding: 24px; color: var(--ink-faint); }
:root[data-ui="new"] .sc-hint { margin: 0; padding: 8px 16px; }
/* сетка */
:root[data-ui="new"] .sc-scroll { overflow: auto; max-height: calc(100vh - 230px); min-height: 420px; }
:root[data-ui="new"] .sc-grid { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(118px, 1fr)); min-width: calc(56px + var(--cols) * 118px); }
:root[data-ui="new"] .sc-grid.by-t { grid-template-columns: 56px repeat(var(--cols), minmax(140px, 1fr)); min-width: calc(56px + var(--cols) * 140px); }
:root[data-ui="new"] .sc-grid.one { grid-template-columns: 56px minmax(0, 1fr); min-width: 0; }
:root[data-ui="new"] .sc-corner { position: sticky; top: 0; left: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--line); }
:root[data-ui="new"] .sc-h { position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; min-width: 0; font: inherit; }
:root[data-ui="new"] .sc-h .wd { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
:root[data-ui="new"] .sc-h .dn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .sc-h:hover .dn { background: var(--surface-2); }
:root[data-ui="new"] .sc-h.today .wd { color: var(--accent); }
:root[data-ui="new"] .sc-h.today .dn { background: var(--accent); color: var(--on-accent); }
:root[data-ui="new"] .sc-h.tch { flex-direction: row; justify-content: center; gap: 8px; padding: 14px 8px; cursor: default; }
:root[data-ui="new"] .sc-h.tch i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
:root[data-ui="new"] .sc-h.tch b { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="new"] .sc-hours { position: sticky; left: 0; z-index: 2; background: var(--surface); }
:root[data-ui="new"] .sc-hours div { height: 48px; position: relative; }
:root[data-ui="new"] .sc-hours span { position: absolute; top: -9px; right: 8px; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .sc-hours div:first-child span { display: none; }
:root[data-ui="new"] .sc-col { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--line) 47px, var(--line) 48px); cursor: copy; min-width: 0; }
:root[data-ui="new"] .sc-col.today { background-color: color-mix(in srgb, var(--accent-bg) 35%, transparent); }
:root[data-ui="new"] .sc-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 3; pointer-events: none; }
:root[data-ui="new"] .sc-now::before { content: ""; position: absolute; left: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); }
:root[data-ui="new"] .sc-now.cont::before { display: none; }
:root[data-ui="new"] .sc-ev { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1px; padding: 4px 8px; border: 1.5px solid var(--surface); border-radius: 8px; background: var(--c); color: var(--on-accent); font: 400 12px/1.3 var(--font); text-align: left; overflow: hidden; cursor: pointer; min-width: 0; transition: box-shadow 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .sc-ev b { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 16px; }
:root[data-ui="new"] .sc-ev span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .sc-ev:hover { box-shadow: var(--shadow-pop); z-index: 4; }
:root[data-ui="new"] .sc-ev.past { background: color-mix(in srgb, var(--c) 60%, var(--surface)); }  /* не opacity: сквозь неё видна подпись «Занято» */
:root[data-ui="new"] .sc-busy { position: absolute; left: 0; right: 0; z-index: 0; display: block; padding: 2px 6px; border: 0; border-top: 1.5px dashed var(--c); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, transparent) 0 6px, transparent 6px 12px); color: var(--ink-faint); font: 600 11px/1.3 var(--font); text-align: left; cursor: pointer; overflow: hidden; }
:root[data-ui="new"] .sc-busy span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-ui="new"] .sc-busy:hover { background-color: color-mix(in srgb, var(--c) 8%, transparent); }
:root[data-ui="new"] .sc-mk { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 92%, transparent); font-size: 12px; font-weight: 800; }
:root[data-ui="new"] .sc-mk svg { stroke-width: 2.5; }
:root[data-ui="new"] .sc-mk.ok { color: var(--success); }
:root[data-ui="new"] .sc-mk.no { color: var(--danger); }
:root[data-ui="new"] .sc-mk.q { color: var(--warning); }
:root[data-ui="new"] .sc-more { position: absolute; z-index: 1; left: calc(60% + 2px); width: calc(40% - 4px); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 4px 8px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); color: var(--ink); font: 700 12px/1.3 var(--font); text-align: left; overflow: hidden; cursor: pointer; }
:root[data-ui="new"] .sc-more:hover { border-color: var(--accent); color: var(--accent); }
:root[data-ui="new"] .sc-dots { display: flex; flex-wrap: wrap; gap: 3px; }
:root[data-ui="new"] .sc-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
:root[data-ui="new"] .sc-slot { position: absolute; left: 3px; right: 3px; z-index: 4; padding: 4px 8px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font: 600 12px/1.3 var(--font); box-shadow: var(--shadow-pop); pointer-events: none; }
/* перетаскивание занятия (#349): исходное — бледнее, тень на новом месте — цветом преподавателя; прошедшее время — пунктир --danger */
:root[data-ui="new"] .sc-ev.mv { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
:root[data-ui="new"].sc-drag-on, :root[data-ui="new"].sc-drag-on * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
:root[data-ui="new"] .sc-ev.sc-dragging { opacity: .5; box-shadow: none; }
:root[data-ui="new"] .sc-dragghost { position: absolute; left: 3px; right: 3px; z-index: 5; display: flex; flex-direction: column; gap: 1px; padding: 4px 8px; border: 1.5px solid var(--surface); border-radius: 8px; background: var(--c); color: var(--on-accent); font: 400 12px/1.3 var(--font); font-variant-numeric: tabular-nums; box-shadow: var(--shadow-pop); pointer-events: none; overflow: hidden; }
:root[data-ui="new"] .sc-dragghost b { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-ui="new"] .sc-dragghost span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
:root[data-ui="new"] .sc-dragghost.bad { border: 1.5px dashed var(--danger); background: var(--surface); color: var(--danger); box-shadow: none; }
:root[data-ui="new"] .sc-dragghost.bad b { white-space: normal; }
/* месяц, список */
:root[data-ui="new"] .sc-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
:root[data-ui="new"] .sc-month .w { padding: 6px 8px; text-align: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
:root[data-ui="new"] .sc-month .d { display: flex; flex-direction: column; gap: 2px; min-height: 112px; min-width: 0; padding: 4px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); cursor: pointer; }
:root[data-ui="new"] .sc-month .d:nth-child(7n+8) { border-left: 0; }
:root[data-ui="new"] .sc-month .dn { align-self: center; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .sc-month .d.out .dn { color: var(--ink-faint); }
:root[data-ui="new"] .sc-month .d.today .dn { background: var(--accent); color: var(--on-accent); }
:root[data-ui="new"] .sc-month .me { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 1px 4px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: 400 12px/1.4 var(--font); text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer; }
:root[data-ui="new"] .sc-month .me:hover { background: var(--surface-2); }
:root[data-ui="new"] .sc-month .me i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
:root[data-ui="new"] .sc-month .me .t { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .sc-month .more { padding: 1px 4px; border: 0; background: transparent; color: var(--ink-soft); font: 600 12px/1.4 var(--font); text-align: left; cursor: pointer; }
:root[data-ui="new"] .sc-list .ld { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
:root[data-ui="new"] .sc-list .ld:first-child { border-top: 0; }
:root[data-ui="new"] .sc-list .dd { display: flex; align-items: baseline; gap: 8px; }
:root[data-ui="new"] .sc-list .dd b { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .sc-list .dd span { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--ink-faint); }
:root[data-ui="new"] .sc-list .ld.today .dd b { color: var(--accent); }
:root[data-ui="new"] .sc-list .li { display: grid; grid-template-columns: 12px 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 400 14px/1.4 var(--font); text-align: left; cursor: pointer; }
:root[data-ui="new"] .sc-list .li:hover { background: var(--surface-2); }
:root[data-ui="new"] .sc-list .li i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
:root[data-ui="new"] .sc-list .li.cal i { background: transparent; border: 1.5px dashed var(--c); }
:root[data-ui="new"] .sc-list .li .t { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .sc-list .li .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* всплывающее окно занятия / быстрого создания (вне #schedNew — в body) */
.sc-pop { position: fixed; z-index: 1200; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 16px); overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-pop); color: var(--ink); font-family: var(--font); }
.sc-pop.sheet { left: 0; right: 0; bottom: 0; width: auto; max-height: 85vh; border-radius: 22px 22px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: no-preference) { .sc-pop { animation: scPopIn 220ms cubic-bezier(.2,.8,.2,1); } }
@keyframes scPopIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sc-pop .sc-pop-h { display: flex; align-items: flex-start; gap: 10px; }
.sc-pop .sc-pop-h .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-pop .sc-pop-h h4 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sc-pop .sw { width: 14px; height: 14px; margin-top: 5px; border-radius: 4px; background: var(--c); flex: none; }
.sc-pop .sc-x { width: 36px; padding: 0; margin: -6px -10px 0 0; border-color: transparent; }
.sc-pop .sc-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; color: var(--ink-soft); }
.sc-pop .sc-row > svg { color: var(--ink-faint); }
.sc-pop .sc-row a { color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
.sc-pop .sc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-pop .sc-acts.end { justify-content: flex-end; }
.sc-pop .sc-danger { color: var(--danger); }
.sc-pop .sc-in { height: 36px; padding: 4px 10px; border: 1.5px solid var(--field-border); border-radius: 8px; background: var(--surface); color: var(--ink); font: 400 14px/1 var(--font); min-width: 0; width: 100%; }
.sc-pop .sc-qc-time { display: flex; align-items: center; gap: 8px; }
.sc-pop .sc-qc-time .sc-in { width: 7.5rem; }
.sc-pop .sc-plist { display: flex; flex-direction: column; gap: 2px; }
.sc-pop .sc-plist button { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 400 14px/1.3 var(--font); text-align: left; cursor: pointer; }
.sc-pop .sc-plist button:hover, .sc-pop .sc-plist button.on { background: var(--surface-2); }
.sc-pop .sc-plist i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.sc-pop .sc-plist .tt { min-width: 0; display: flex; flex-direction: column; }
.sc-pop .sc-plist .tt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-pop .sc-plist .tt span { font-size: 12px; color: var(--ink-faint); }
.sc-pop .sc-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1.5px solid var(--field-border); border-radius: 8px; color: var(--ink-faint); }
.sc-pop .sc-search input { border: 0; outline: 0; background: transparent; font: 400 15px/1 var(--font); color: var(--ink); width: 100%; min-width: 0; }
.sc-pop .sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-pop .sc-chip { cursor: pointer; border: 1.5px solid transparent; }
.sc-pop .sc-chip.on { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); font-weight: 600; }
.sc-pop .sc-ghost { border-color: transparent; color: var(--ink-soft); }
.sc-pop .sc-ghost:hover { background: var(--surface-2); color: var(--ink); }
/* узкий экран: панель — за кнопкой меню, кнопка «+»; телефон — «День» по умолчанию (ui-schedule.js) */
/* при бете старый переключатель «Расписание / YA календарь / G календарь» в верхней панели не нужен */
:root[data-ui="new"] #scheduleTopbarSwitch { display: none !important; }
:root[data-ui="new"] .sc-burger, :root[data-ui="new"] .sc-fab { display: none; }
@media (max-width: 960px) {
  :root[data-ui="new"] .sc { grid-template-columns: minmax(0, 1fr); }
  :root[data-ui="new"] .sc-side { display: none; border-right: 0; border-bottom: 1px solid var(--line); }
  :root[data-ui="new"] .sc.side-open .sc-side { display: flex; }
  :root[data-ui="new"] .sc-burger { display: inline-flex; width: auto; padding: 5px 14px; }
  :root[data-ui="new"] .sc-fab { display: grid; place-items: center; position: absolute; right: 16px; bottom: 16px; z-index: 6; width: 56px; height: 56px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-pop); color: var(--accent); cursor: pointer; }
  :root[data-ui="new"] .sc-side .sc-create { display: none; }
}
@media (max-width: 600px) {
  :root[data-ui="new"] .sc { border-radius: 14px; }
  :root[data-ui="new"] .sc-top-r { margin-left: 0; width: 100%; }
  :root[data-ui="new"] .sc-top-r .sc-search { width: 100%; }
  :root[data-ui="new"] .sc-title { font-size: 18px; }
  :root[data-ui="new"] .sc-list .ld { grid-template-columns: minmax(0, 1fr); }
  :root[data-ui="new"] .sc-list .li { grid-template-columns: 12px 92px minmax(0, 1fr); }
  :root[data-ui="new"] .sc-list .li > .pill { grid-column: 3; justify-self: start; }
  :root[data-ui="new"] .sc-month .d { min-height: 72px; }
  :root[data-ui="new"] .sc-month .me .t { display: none; }
}

/* ===== «Качество данных» (#347, 30.10.2026): отчёт по посещаемости, проверка данных, неявки. Код — ui-quality.js.
   Мокап https://claude.ai/artifact/VnDrUr3onAu4p7gwsKmSwZ, варианты 1 и 2 с переключателем «Таблица / Разбор».
   Шапка, сегменты и таблица — .tc-* «Преподавателей», плитки — .tk-tile карточек. */
:root[data-ui="new"] #view-attendance-report > :not(#attNew), :root[data-ui="new"] #view-datachecks > :not(#dcNew), :root[data-ui="new"] #view-noshow > :not(#nsNew) { display: none; }
:root[data-ui="new"] .dq { display: flex; flex-direction: column; gap: 20px; padding-bottom: 72px; }  /* под плавающую «?» помощника — не закрывает кнопки последней строки */
:root[data-ui="new"] .dq .tc-toolbar .tc-views { margin-left: auto; }
:root[data-ui="new"] .dq-sub { font-size: 12px; color: var(--ink-faint); }
:root[data-ui="new"] .dq-sub.dq-bad { color: var(--danger); }
:root[data-ui="new"] .dq-warn { color: var(--warning); font-weight: 700; }
:root[data-ui="new"] .dq-empty { padding: 20px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--ink-faint); font-size: 14px; text-align: center; }
:root[data-ui="new"] .dq-note { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 360px; padding: 10px 14px; border-radius: 14px; background: var(--accent-bg); color: var(--ink); font-size: 14px; }
:root[data-ui="new"] .dq-note .tc-i { flex: none; margin-top: 2px; color: var(--accent); }
:root[data-ui="new"] .dq-note.err { background: var(--danger-bg); }
:root[data-ui="new"] .dq-month { display: inline-flex; align-items: center; gap: 4px; }
:root[data-ui="new"] .dq-month b { min-width: 9.5rem; text-align: center; font-size: 15px; font-weight: 700; }
:root[data-ui="new"] .dq-sq { width: 36px; padding: 0; justify-content: center; }
:root[data-ui="new"] .dq-select { height: 36px; padding: 0 12px; border: 1.5px solid var(--field-border); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font); max-width: 16rem; }
:root[data-ui="new"] .dq-chip { display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="new"] .dq-chip button { display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; padding: 0; }
:root[data-ui="new"] .tk-tile.dq-tile-bad { border-color: var(--danger); }
:root[data-ui="new"] .tk-tile.dq-tile-bad .v { color: var(--danger); }
:root[data-ui="new"] .dq .tk-tile.attn .v { color: var(--warning); }
:root[data-ui="new"] .dq-tag { display: inline-block; padding: 1px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
:root[data-ui="new"] .dq-tag.ind { background: var(--type-individual-bg); color: var(--type-individual); }
:root[data-ui="new"] .dq-tag.grp { background: var(--type-group-bg); color: var(--type-group); }
:root[data-ui="new"] .dq-tag.tri { background: var(--type-trial-bg); color: var(--type-trial); }
:root[data-ui="new"] .dq-tag.dia { background: var(--diag-bg); color: var(--diag); }
/* таблица: разделы по преподавателю, строки проверок и неявок раскрываются */
:root[data-ui="new"] .dq-tbl tbody tr { cursor: default; }
:root[data-ui="new"] .dq-tbl tr.dq-grp td { background: var(--ground); font-weight: 650; cursor: pointer; }
:root[data-ui="new"] .dq-tbl tr.dq-grp td .pill { margin-left: 6px; }
:root[data-ui="new"] .dq-chev { display: inline-flex; color: var(--ink-faint); transition: transform 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] tr.dq-grp .dq-chev { margin-right: 6px; vertical-align: -2px; }
:root[data-ui="new"] tr.dq-grp.closed .dq-chev { transform: rotate(-90deg); }
:root[data-ui="new"] .dq-tbl tr.dq-chk { cursor: pointer; }
:root[data-ui="new"] tr.dq-chk.open .dq-chev { transform: rotate(180deg); }
:root[data-ui="new"] .dq-tbl tr.dq-exp > td, :root[data-ui="new"] .dq-tbl tr.dq-exp:hover > td { background: var(--ground); padding: 12px 16px 16px; }
:root[data-ui="new"] .dq-total td { background: var(--ground); font-weight: 700; }
:root[data-ui="new"] .dq-cntc { width: 64px; }
:root[data-ui="new"] .dq-cnt { display: inline-grid; place-items: center; min-width: 36px; height: 28px; padding: 0 8px; border-radius: 10px; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .dq-cnt.ok { background: var(--success-bg); color: var(--success); }
:root[data-ui="new"] .dq-cnt.warn { background: var(--warning-bg); color: var(--warning); }
:root[data-ui="new"] .dq-cnt.bad { background: var(--danger-bg); color: var(--danger); }
:root[data-ui="new"] .dq-ct { font-weight: 650; }
:root[data-ui="new"] .dq-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; }
:root[data-ui="new"] .dq-okline { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
:root[data-ui="new"] .dq-chks .dq-okline:first-child { border-top: 0; }
:root[data-ui="new"] .dq-okline b { color: var(--ink); }
:root[data-ui="new"] .dq-okline span { display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="new"] .dq-okline .tc-i { color: var(--success); }
:root[data-ui="new"] .dq-items { overflow-x: auto; }
/* разбор: список слева, выбранное справа */
:root[data-ui="new"] .dq-md { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
:root[data-ui="new"] .dq-mlist { display: flex; flex-direction: column; gap: 6px; }
:root[data-ui="new"] .dq-mi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 140ms cubic-bezier(.2,.8,.2,1); }
:root[data-ui="new"] .dq-mi:hover { border-color: var(--line-strong); }
:root[data-ui="new"] .dq-mi b { font-size: 14px; font-weight: 650; }
:root[data-ui="new"] .dq-mi .s { grid-column: 1; font-size: 12px; color: var(--ink-faint); }
:root[data-ui="new"] .dq-mi .c { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
:root[data-ui="new"] .dq-mi.on { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 3px var(--accent-bg); }
:root[data-ui="new"] .dq-mi.zero { background: var(--ground); }
:root[data-ui="new"] .dq-detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); }
:root[data-ui="new"] .dq-dhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
:root[data-ui="new"] .dq-dhead h3 { margin: 0; font-size: 22px; font-weight: 750; line-height: 1.2; letter-spacing: -.02em; }
:root[data-ui="new"] .dq-dhead .dq-acts { margin-left: auto; }
:root[data-ui="new"] .dq-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
:root[data-ui="new"] .dq-kv { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
:root[data-ui="new"] .dq-kv dt { color: var(--ink-faint); }
:root[data-ui="new"] .dq-kv dd { margin: 0; }
:root[data-ui="new"] .dq-lessons { display: flex; flex-direction: column; gap: 8px; }
:root[data-ui="new"] .dq-lesson { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; }
:root[data-ui="new"] .dq-dplate { display: grid; place-items: center; padding: 4px 0; border-radius: 10px; background: var(--surface-2); line-height: 1.1; }
:root[data-ui="new"] .dq-dplate b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
:root[data-ui="new"] .dq-dplate span { font-size: 12px; color: var(--ink-faint); }
:root[data-ui="new"] .dq-who { min-width: 0; }
:root[data-ui="new"] .dq-who b { font-weight: 650; }
:root[data-ui="new"] .dq-who div { font-size: 12px; color: var(--ink-faint); }
/* решение по неявке */
:root[data-ui="new"] .dq-decide { display: flex; flex-direction: column; gap: 12px; }
:root[data-ui="new"] .dq-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
:root[data-ui="new"] .dq-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
:root[data-ui="new"] .dq-opt i { grid-row: 1 / span 2; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid var(--field-border); border-radius: 50%; }
:root[data-ui="new"] .dq-opt b { font-weight: 650; }
:root[data-ui="new"] .dq-opt span { grid-column: 2; font-size: 14px; color: var(--ink-faint); }
:root[data-ui="new"] .dq-opt.on { border-color: var(--accent); background: var(--accent-bg); }
:root[data-ui="new"] .dq-opt.on i { border: 5px solid var(--accent); }
:root[data-ui="new"] .dq-opt.danger.on { border-color: var(--danger); background: var(--danger-bg); }
:root[data-ui="new"] .dq-opt.danger.on i { border-color: var(--danger); }
:root[data-ui="new"] .dq-opt:disabled { opacity: .6; cursor: default; }
:root[data-ui="new"] .dq-chkline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
:root[data-ui="new"] .dq-chkline input { width: 18px; height: 18px; accent-color: var(--accent); }
:root[data-ui="new"] .dq-amt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
:root[data-ui="new"] .dq-amt input { width: 8rem; height: 40px; padding: 8px 12px; border: 1.5px solid var(--field-border); border-radius: 8px; background: var(--surface); color: var(--ink); font: 400 15px var(--font); }
:root[data-ui="new"] .dq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-end; }
:root[data-ui="new"] .dq-foot .tc-faint { margin-right: auto; }
@media (max-width: 1100px) {
  :root[data-ui="new"] .dq-md { grid-template-columns: minmax(0, 1fr); }
  :root[data-ui="new"] .dq-mlist { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  :root[data-ui="new"] .dq-mlist .label { display: none; }
  :root[data-ui="new"] .dq-mi { flex: 0 0 240px; }
}
@media (max-width: 600px) {
  :root[data-ui="new"] .dq .tk-tiles, :root[data-ui="new"] .dq-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-ui="new"] .dq .tk-tile .v { font-size: 19px; }
  :root[data-ui="new"] .dq-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  :root[data-ui="new"] .dq-kv dd { margin-bottom: 8px; }
  :root[data-ui="new"] .dq-lesson { grid-template-columns: 52px minmax(0, 1fr); }
  :root[data-ui="new"] .dq-lesson .dq-st, :root[data-ui="new"] .dq-lesson .dq-act { grid-column: 2; }
  :root[data-ui="new"] .dq-month b { min-width: 0; }
  :root[data-ui="new"] .dq-select { max-width: 100%; }
  /* карточки .tc-tbl дают ячейкам отступ 9rem под подпись — у ячеек без data-label (проверка, раздел, вложенные случаи) его нет */
  :root[data-ui="new"] .dq-tbl td:not([data-label]) { padding-left: 0; }
  :root[data-ui="new"] .dq-tbl tr.dq-chk:not([data-dq-ns]) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; }
  :root[data-ui="new"] .dq-tbl tr.dq-chk:not([data-dq-ns]) > td { width: auto; }
  :root[data-ui="new"] .dq-tbl tr.dq-chk:not([data-dq-ns]) > td.r { grid-column: 1 / -1; }
  :root[data-ui="new"] .dq-cntc { width: auto; }
  /* случаи проверки (_dcItems) — обычная таблица с прокруткой в своей рамке, не карточки .tc-tbl */
  :root[data-ui="new"] .dq-items table { display: table; width: max-content; min-width: 100%; }
  :root[data-ui="new"] .dq-items thead { display: table-header-group; }
  :root[data-ui="new"] .dq-items tbody { display: table-row-group; }
  :root[data-ui="new"] .dq-items tr { display: table-row; width: auto; padding: 0; }
  :root[data-ui="new"] .dq-items td, :root[data-ui="new"] .dq-items th { display: table-cell; width: auto; position: static; padding: 8px 10px; }
  /* «Дубли» — карточки случаев: кнопки под именем, а не рядом (иначе имя сжимается до слова в строке) */
  :root[data-ui="new"] .dq-items .dc-case-head { flex-wrap: wrap; }
  :root[data-ui="new"] .dq-items .dc-case-head .dc-actions { flex-basis: 100%; flex-wrap: wrap; }
}
:root[data-ui="new"] .sc-backfill { margin-top: 8px; align-self: flex-start; }  /* «Привязать подтверждённые» (#347) */