/* Planning App — V5 «A2 Графит» (design system v3, светлая тема — дефолт).
   2026-07-13: миграция токенов по docs/redesign/tokens.css.
   Тёмная тема — заполнить позже по той же сетке имён.
   Эталоны — docs/redesign/etalons/. Не придумывать визуал: переносить эталон. */

:root,
[data-theme="light"] {
    /* — Поверхности — */
    --bg:            #F7F7F8;
    --surface:       #FFFFFF;
    --surface-2:     #F2F3F4;
    --surface-3:     #ECEDEF;
    --border:        #E7E8EA;
    --border-strong: #DDDEE1;
    --row-divider:   #F0F0F2;

    /* — Текст — */
    --fg:            #1B1C1E;
    --fg-soft:       #3E4045;
    --muted:         #6B6E74;
    --muted-2:       #8A8D93;
    --muted-3:       #9EA1A7;

    /* — Акцент (графит) — */
    --accent:        #26282D;
    --accent-2:      #43464C;
    --accent-soft:   #ECEDEF;

    /* — Статусы — */
    --red:           #C93A2B;
    --red-soft:      #FBEBE8;
    --yellow:        #9A6B00;
    --yellow-soft:   #FAF1DC;
    --warn-bg:       #FBF4E3;
    --warn-border:   #E8DCB8;
    --green:         #1D7A4E;
    --green-soft:    #E6F2EC;
    --blue:          #2E5FC7;
    --blue-soft:     #EAF0FB;
    --violet:        #6C5CD3;
    --violet-soft:   #EFECFB;

    --p1: var(--red);
    --p2: var(--yellow);
    --p3: var(--muted);

    /* — Геометрия — */
    --r-sm: 6px; --r-md: 7px; --r-lg: 10px; --r-xl: 12px; --r-pill: 999px;
    --shadow-pop: 0 8px 24px rgba(27, 28, 30, 0.10);
    --shadow-seg: 0 1px 2px rgba(27, 28, 30, 0.06);
    --ring:       0 0 0 3px rgba(38, 40, 45, 0.14);

    /* — Типографика — */
    --font: "Golos Text", system-ui, -apple-system, "SF Pro Text", BlinkMacSystemFont, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Menlo, Consolas, monospace;

    /* — Layout — */
    --sidebar-w: 236px;
    --content-max: 1040px;
    --content-pad: 40px 48px 72px;

    /* — Сетка строки задачи (grid, не flex) — */
    --task-grid: 17px minmax(0, 1fr) 40px 128px 148px 92px;

    /* — Legacy: используется несмигрированными правилами. Уходит постранично. — */
    --bg-mesh:      none;
    --cyan:         var(--accent);
    --pink:         var(--accent);
    --purple:       var(--accent);
    --grad-main:    var(--accent);
    --grad-pink:    var(--accent);
    --grad-cy:      var(--accent);
    --grad-yl:      var(--accent);
    --grad-gn:      var(--accent);
    --grad-pu:      var(--accent);
    --shadow-sm:    0 1px 2px rgba(27, 28, 30, 0.06);
    --shadow-md:    0 2px 12px rgba(27, 28, 30, 0.06);
    --shadow-lg:    0 8px 32px rgba(27, 28, 30, 0.08);
    --glow-accent:  none;
    --glow-pink:    none;
    --glow-cyan:    none;

    /* Density tokens — переключаются через [data-density]. */
    --row-pad-y: 12px;
    --row-pad-x: 14px;
    --gap-md: 16px;
    --hero-pad: 28px;

    /* Legacy accent-палитра по категориям sidebar (Я.360-style, DS v2). */
    --acc-blue:    #3b82f6;
    --acc-purple:  #8b5cf6;
    --acc-pink:    #ec4899;
    --acc-green:   #10b981;
    --acc-orange:  #f97316;
    --acc-teal:    #14b8a6;
    --acc-red:     #ef4444;
    --acc-yellow:  #eab308;
    --acc-indigo:  #6366f1;
    --acc-cyan:    #06b6d4;
}

/* Density: компактный режим — меньше воздуха в таблицах и карточках. */
:root[data-density="compact"] {
    --row-pad-y: 6px;
    --row-pad-x: 10px;
    --gap-md: 10px;
    --hero-pad: 18px;
}

/* Light theme — softer hero overlay (один accent, без cyan/purple). */
[data-theme="light"] .hero::before {
    background: radial-gradient(circle at 0% 100%, rgba(0, 112, 243, 0.06), transparent 55%);
}
[data-theme="light"] .card::before {
    background: radial-gradient(circle, rgba(0, 112, 243, 0.10), transparent 70%);
    opacity: 0.7;
}
[data-theme="light"] .card.danger::before { background: radial-gradient(circle, rgba(255, 77, 77, 0.12), transparent 70%); }
[data-theme="light"] .card.success::before { background: radial-gradient(circle, rgba(34, 197, 94, 0.10), transparent 70%); }
[data-theme="light"] .card.warn::before { background: radial-gradient(circle, rgba(245, 158, 11, 0.12), transparent 70%); }

[data-theme="light"] .auth-card::before {
    background: radial-gradient(circle, rgba(0, 112, 243, 0.10), transparent 60%);
}
[data-theme="light"] .auth-card::after {
    background: radial-gradient(circle, rgba(0, 112, 243, 0.08), transparent 60%);
}

/* Sidebar / a-link overrides см. блок Sidebar v3 ниже.
   .bucket-tab / .pipeline-row / .hero-cta оверрайды удалены 2026-07-13 (Блок F) —
   классы больше не рендерятся в шаблонах, оверрайд-таргеты пустые. */
[data-theme="light"] header h1 a { color: var(--fg); }
[data-theme="light"] header nav a { color: var(--muted); }
[data-theme="light"] header nav a:hover,
[data-theme="light"] header nav a.active { color: var(--fg); }
[data-theme="light"] .sb-user { color: var(--fg); }
[data-theme="light"] a.btn-suggest { color: #fff; }
/* Light-theme: `a` overrides .btn-primary text-color (higher specificity).
   Возвращаем белый текст на акцентном фоне для anchor'ов-как-кнопок. */
[data-theme="light"] a.btn-primary { color: #fff; }
[data-theme="light"] a.btn-primary:hover { color: #fff; opacity: 1; }
[data-theme="light"] a.card { color: var(--fg); }
[data-theme="light"] a.card.danger { color: var(--fg); }
[data-theme="light"] a.card.success { color: var(--fg); }
[data-theme="light"] a.card.warn { color: var(--fg); }

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    background-image: var(--bg-mesh);
    background-attachment: fixed;
    color: var(--fg);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; transition: opacity .12s ease; }
[data-theme="light"] a { color: var(--accent); }
a:hover { opacity: 0.85; text-decoration: none; }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.015em; color: var(--fg); }
/* Фаза 15.5.3: бо́льшая типографика — Я.360-style. H1 для hero, H2 — page title. */
h1 { font-size: 32px; font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -0.025em; }
h2 { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0 0 20px; letter-spacing: -0.025em; }
h3 { font-size: 12px; margin: 24px 0 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; }
h2 small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 8px; }
/* Subheading внутри страницы — sentence-case, среднего размера. */
.section-title {
    font-size: 17px; font-weight: 600; color: var(--fg);
    text-transform: none; letter-spacing: -0.005em;
    margin: 28px 0 12px; display: flex; align-items: center; gap: 8px;
}
.section-title small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
small { color: var(--muted); font-weight: 400; }

input, select, button, textarea { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: rgba(0, 112, 243, 0.4); }

/* ====== Layout: sidebar + content ====================================== */
.layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}
.layout.no-sidebar {
    grid-template-columns: 1fr;
}

/* === Sidebar v3 «A2 Графит» ============================================
   Эталон: docs/redesign/etalons/new-a2-sidebar.dc.html
   Ширина 236px, светлая поверхность, вертикальные группы Фокус/Планирование/
   Люди, счётчики цифрой без плашек, красные — только требующие внимания.
   Тумблеры темы/плотности переехали в /settings. */

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 20px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
}

.sb-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 18px;
    color: var(--fg);
    text-decoration: none;
}
.sb-logo:hover { opacity: 1; text-decoration: none; }
.sb-logo-tile {
    width: 26px;
    height: 26px;
    border-radius: var(--r-md);
    background: var(--accent);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.sb-title {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--fg);
}

.sb-nav { display: flex; flex-direction: column; gap: 1px; }
.sb-nav-bottom { gap: 1px; }

.sb-group-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted-3);
    padding: 18px 10px 6px;
}

.sb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--r-md);
    color: var(--fg-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background .1s, color .1s;
}
.sb-item:hover {
    background: var(--surface-2);
    color: var(--fg);
    text-decoration: none;
    opacity: 1;
}
.sb-item.active {
    background: var(--surface-3);
    color: var(--fg);
    font-weight: 600;
}

.sb-ic {
    color: var(--muted-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sb-ic .icon { width: 16px; height: 16px; }
.sb-item:hover .sb-ic,
.sb-item.active .sb-ic { color: var(--fg); }

.sb-label { flex: 1; min-width: 0; }

/* Sub-items внутри «Планирование» (Неделя / 2 недели / Месяц): без иконки,
   с отступом слева, меньший размер шрифта. */
.sb-item.sub {
    padding: 5px 10px 5px 36px;
    font-size: 13px;
    color: var(--muted);
}
.sb-item.sub:hover,
.sb-item.sub.active {
    color: var(--fg);
}
.sb-item.sub.active { background: var(--surface-3); font-weight: 600; }

/* Счётчик: цифра без плашки. Красный — только требующие внимания
   (входящие / новые расшифровки). */
.sb-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.sb-count.red {
    font-weight: 600;
    color: var(--red);
}
.sb-item.active .sb-count { color: var(--fg); background: transparent; }

.sb-spacer { flex: 1; min-height: 16px; }

/* User-card внизу: аватар-кружок графит + ФИО + роль. */
.sb-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--r-lg);
    margin-top: 10px;
    border-top: 1px solid var(--row-divider);
    color: var(--fg);
    text-decoration: none;
    transition: background .12s;
}
.sb-user:hover { background: var(--surface-2); text-decoration: none; opacity: 1; }
.sb-av {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 11px;
    flex-shrink: 0;
}
.sb-user-meta { flex: 1; min-width: 0; }
.sb-user-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-user-role {
    display: block;
    font-size: 11px;
    color: var(--muted-3);
}

/* Базовый класс для inline-SVG иконок Lucide. */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.chip-icon {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 2px;
}

.inline-form { display: inline; margin: 0; padding: 0; }

/* === Content area ====================================================== */
.content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.content-inner {
    padding: 32px 40px 64px;
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
}
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
}

/* === Hero (dashboard) ================================================== */
.hero {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 28px 32px;
    margin-bottom: 24px;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 100%, rgba(0, 112, 243, 0.08), transparent 55%);
    pointer-events: none;
}
.hero > * { position: relative; }
.hero-meta {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 12px;
}
.hero-title {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--fg);
    margin: 0 0 24px;
}
/* Legacy .hero-focus/.hero-row/.hero-cta удалены в Блоке F —
   dashboard v3 использует .dash-header + .dash-kpi + .btn-primary. */

/* === Card (базовая, для partial'ов) ==================================== */
/* Legacy .card-value/.card-label/.card-soft-* удалены в Блоке F —
   dashboard v3 использует .dash-kpi-card + .person-stat-card. */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    color: var(--fg);
    text-decoration: none;
}

/* Legacy .pipeline-* удалены в Блоке F — dashboard v3 использует
   .dash-track / .dash-track-bar / .dash-track-fill. */

/* === Grid layout ======================================================== */
/* Legacy .grid-2 удалён в Блоке F — v3 использует .dash-cols, .person-cols
   и другие явные grid-контейнеры. */

/* === Tables ============================================================== */
table.data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    font-size: 13px;
}
table.data th, table.data td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
/* Фаза 15.5.4: th в нормальном регистре, мельче letter-spacing — Я.360-style. */
table.data thead th {
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--border);
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .08s ease; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data a { color: var(--accent); }
[data-theme="light"] table.data a { color: var(--accent); }
table.data a:hover { opacity: 0.85; }

/* Legacy table.tasks удалены в Блоке F — задачи через .today-row grid. */

/* === Badges ============================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 500;
    background: var(--surface-2);
    color: var(--fg-soft);
    line-height: 1.4;
    margin-left: 6px;
    border: 1px solid var(--border);
}
.badge.personal { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(245, 165, 36, 0.25); }
.badge.horizon { background: var(--accent-soft); color: var(--accent); border-color: rgba(0, 112, 243, 0.25); }
[data-theme="light"] .badge.horizon { color: var(--accent); }
.badge.status-badge { background: var(--surface-2); color: var(--muted); text-transform: lowercase; }
.status-done .badge.status-badge { background: var(--green-soft); color: var(--green); border-color: rgba(14, 228, 90, 0.25); }
.status-pending_routing .badge.status-badge { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(245, 165, 36, 0.25); }
.status-in_progress .badge.status-badge { background: var(--accent-soft); color: var(--accent); border-color: rgba(0, 112, 243, 0.25); }
[data-theme="light"] .status-in_progress .badge.status-badge { color: var(--accent); }
.status-cancelled .badge.status-badge { background: var(--surface-2); color: var(--muted-2); }
.status-blocked .badge.status-badge { background: var(--red-soft); color: var(--red); border-color: rgba(255, 77, 77, 0.25); }

/* === Chips (новый набор — для дедлайнов и приоритетов) =================== */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 500;
    background: var(--surface-2);
    color: var(--fg-soft);
    line-height: 1.4;
    margin-right: 6px;
    border: 1px solid var(--border);
    white-space: nowrap;
}
.chips-row { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; }

/* Deadline-цвета */
.chip-overdue  { background: var(--red-soft);    color: var(--red);    border-color: rgba(255, 77, 77, 0.3); }
.chip-today    { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(245, 165, 36, 0.3); }
.chip-soon     { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(245, 165, 36, 0.18); }
/* Юзер 2026-07-08: явный бордер 1px цвета чуть темнее фона (--border-strong)
   — чтобы chip-week/chip-later не сливались с surface-2 на светлой теме. */
.chip-week     { background: var(--surface-2);   color: var(--fg-soft); border: 1px solid var(--border-strong); }
.chip-later    { background: var(--surface-2);   color: var(--muted);   border: 1px solid var(--border-strong); }

/* Priority-цвета */
.chip-p1       { background: var(--red-soft);    color: var(--red);    border-color: rgba(255, 77, 77, 0.3); font-weight: 600; }
.chip-p2       { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(245, 165, 36, 0.3); font-weight: 600; }
.chip-p3       { background: var(--surface-2);   color: var(--muted); }

/* Прочее */
.chip-horizon  { background: var(--accent-soft); color: var(--accent); border-color: rgba(0, 112, 243, 0.22); }
[data-theme="light"] .chip-horizon { color: var(--accent); }
/* Legacy .chip-personal удалён в Блоке F — «личное» через .today-status violet. */
/* Assignee chip: единый компонент через partial `_assignee_chip.html`.
   Раньше рендерился ~5 разными способами: inline-стили с gap:4px и icon('user'),
   разные фоны, разные размеры. Собран в один класс — иконка+имя в inline-flex,
   нейтральный фон surface-2, обводка border. 2026-07-08. */
.chip-assignee {
    background: var(--surface-2);
    color: var(--fg-soft);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* Legacy .chip-status* удалены в Блоке F — статусы через .today-status v3. */

/* Goals: чипы статусов целей сезона (2026-07-08, миграция 071).
   Цвета из уже существующей палитры (см. chip-p1/chip-week/chip-personal и
   chip-status-*). Своих значений не заводим. */
.chip-goal-open    { background: var(--accent-soft); color: var(--accent); border-color: rgba(0, 112, 243, 0.22); }
.chip-goal-done    { background: rgba(34, 139, 84, 0.15);  color: #1f8a52; border-color: rgba(34, 139, 84, 0.28); }
.chip-goal-partial { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(245, 165, 36, 0.28); }
.chip-goal-notdone { background: var(--red-soft);    color: var(--red);    border-color: rgba(255, 77, 77, 0.30); }
.chip-goal-moved   { background: var(--surface-2);   color: var(--muted);  border: 1px solid var(--border-strong); }
[data-theme="light"] .chip-goal-done { color: #178044; }

/* Milestones: чип «просрочка» для вехи с due_date < today и status='open'
   (этап 4, 2026-07-08, миграция 073). Палитра — из chip-p1/chip-goal-notdone. */
.chip-milestone-overdue {
    background: var(--red-soft);
    color: var(--red);
    border-color: rgba(255, 77, 77, 0.30);
    font-size: 11px;
    font-weight: 600;
}
.milestone-text.milestone-done {
    text-decoration: line-through;
    color: var(--muted);
}
.milestone-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}
.milestone-delete-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 4px;
}
.milestone-delete-btn:hover { color: var(--red); }
.milestone-create-fields { display: flex; gap: 8px; align-items: center; }
.milestone-create-fields input[type="text"] { flex: 1; }

/* Подсветка строки задачи по дедлайну */
.date-cell .chip-overdue { font-weight: 600; }
.prio-cell { width: 70px; text-align: center; }
.date-cell { white-space: nowrap; }

/* Inline-edit popover поверх chip */
.chip-edit { display: inline-block; position: relative; }
.chip-edit summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    padding: 0;
}
.chip-edit summary::-webkit-details-marker { display: none; }
.chip-edit summary::marker { display: none; }
.chip-edit[open] summary > .chip { box-shadow: 0 0 0 2px var(--accent-soft); }

.chip-empty { background: transparent; color: var(--muted-2); border: 1px solid var(--border); }
.chip-empty:hover { border-color: var(--border-strong); color: var(--muted); }

.chip-pop {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.chip-pop form { display: contents; }
.chip-pop .chip { cursor: pointer; border: 1px solid var(--border); }
.chip-pop .chip:hover { filter: brightness(1.1); }
.chip-pop select {
    background: var(--surface-2);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 3px 8px;
    font: inherit;
    max-width: 100%;
}
.chip-pop select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.chip-pop-date {
    display: flex !important;
    width: 100%;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    gap: 4px;
}
.chip-pop-date input[type="date"] {
    flex: 1;
    background: var(--surface-2);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 3px 6px;
    font-size: 11px;
}

/* === Filters ============================================================= */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    align-items: center;
}
.filters select,
.filters input[type=text] {
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg);
    font-size: 13px;
    transition: border-color .12s, box-shadow .12s, background .12s;
    height: 34px;
}
.filters select:hover,
.filters input[type=text]:hover { border-color: var(--border-strong); background: var(--surface-3); }
.filters select:focus,
.filters input[type=text]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
    background: var(--surface);
}
.filters .cb {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--fg-soft); font-size: 13px; padding: 0 10px; cursor: pointer;
}
.filters .cb input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; }
.filters button[type=submit] {
    padding: 7px 16px;
    background: var(--grad-main);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    height: 34px;
    transition: transform .08s, box-shadow .12s;
}
.filters button[type=submit]:hover { transform: translateY(-1px); box-shadow: var(--glow-accent); }
.filters .btn-link {
    color: var(--muted); font-size: 13px; padding: 7px 10px;
    border-radius: var(--r-md); border: 1px solid transparent; background: none;
}
.filters .btn-link:hover { color: var(--fg); background: var(--surface-2); }

/* === Bucket tabs ========================================================= */
/* Legacy .bucket-tab* удалены в Блоке F — вкладки через .tasks-seg. */

/* === Tab panels (generic) ================================================ */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* === Empty state ========================================================= */
.empty-state {
    margin: 16px 0;
    padding: 16px 18px;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
.empty-state p { margin: 0; }
.empty-state.subtle { background: transparent; }
.empty-state.warn { border-color: var(--acc-orange); }

/* === Meetings ============================================================ */
.meeting-list { display: flex; flex-direction: column; gap: 8px; }
.meeting-card {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
.meeting-card header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.meeting-title { font-weight: 500; }
.meeting-meta { display: flex; gap: 12px; color: var(--muted); font-size: 12px; align-items: center; }
.meeting-meta span { display: inline-flex; gap: 4px; align-items: center; }
.meeting-controls { margin-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.meeting-card .toggle { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; user-select: none; }
.meeting-card .hint { color: var(--acc-orange); font-size: 12px; margin: 0; }
.meeting-card.no-track .toggle input { outline: 2px solid var(--acc-orange); }

/* Multi-track выбор: пилюли-чекбоксы для серии (m044) */
.tracks-multiselect { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tracks-multiselect-label { color: var(--muted); font-size: 12px; margin-right: 2px; }
.track-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border: 1px solid var(--border);
    border-radius: 999px; font-size: 12px; cursor: pointer;
    background: var(--surface-2); transition: background .08s, border-color .08s;
    user-select: none;
}
.track-pill:hover { border-color: var(--fg-soft); }
.track-pill input { margin: 0; cursor: pointer; }
.track-pill input:checked + span { color: var(--accent); font-weight: 500; }
.track-pill:has(input:checked) { background: var(--accent-soft, var(--surface)); border-color: var(--accent); }
.meeting-controls.no-track .tracks-multiselect { outline: 2px dashed var(--acc-orange); outline-offset: 2px; border-radius: 6px; }

/* === Inbox =============================================================== */
.hint { color: var(--muted); font-size: 13px; margin: 12px 0; }
.hint code {
    background: var(--surface-2); padding: 2px 8px; border-radius: var(--r-sm);
    font-family: var(--mono); font-size: 12px; color: var(--fg-soft);
    border: 1px solid var(--border);
}
.inbox-list {
    list-style: none; padding: 0; margin: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-xl); overflow: hidden;
}
.inbox-list li {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    transition: background .08s;
}
.inbox-list li:last-child { border-bottom: none; }
.inbox-list li:hover { background: var(--surface-2); }
.inbox-list .text { font-weight: 500; color: var(--fg); flex: 1 1 280px; min-width: 0; }
.inbox-list .meta { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.inbox-list li.moved { color: var(--muted); }
.inbox-list li.moved .text { text-decoration: line-through; color: var(--muted-2); }

.empty {
    color: var(--muted); text-align: center; padding: 56px 16px;
    background: var(--surface); border: 1px dashed var(--border);
    border-radius: var(--r-xl); font-size: 14px;
}

/* === Pagination (Phase 7c) ============================================== */
.pagination {
    display: flex; gap: 12px; align-items: center; justify-content: center;
    margin: 24px 0 8px; font-size: 14px;
}
.pagination .pg-btn {
    background: var(--surface-2); color: var(--fg); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 6px 14px; text-decoration: none;
    font-weight: 500;
}
.pagination .pg-btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.pagination .pg-btn-off { color: var(--muted-2); pointer-events: none; opacity: 0.5; }
.pagination .pg-info { color: var(--muted); }

/* === Duplicates detector ================================================ */
#duplicates-slot:empty { display: none; }
.duplicates-empty { color: var(--green); display: inline-flex; align-items: center; gap: 6px; }

/* Suggestion блок в /inbox (LLM-предложение трека) */
.suggestion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.suggestion-icon { color: var(--acc-purple); display: inline-flex; align-items: center; }

.duplicates {
    margin-top: 10px; padding: 10px 12px;
    background: var(--yellow-soft); border: 1px solid rgba(245, 165, 36, 0.4);
    border-radius: var(--r-md);
}
.duplicates-header { color: var(--yellow); font-size: 13px; margin-bottom: 6px; }
.duplicates-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.duplicates-list li {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 4px 6px; font-size: 13px;
}
.dup-sim {
    color: var(--yellow); font-weight: 600; font-family: var(--mono); font-size: 11px;
    min-width: 36px;
}
.dup-text { color: var(--fg); flex: 1; min-width: 0; }
.dup-track { color: var(--muted); font-size: 12px; }
.dup-status { color: var(--muted-2); font-size: 11px; font-family: var(--mono); }
.duplicates-hint { color: var(--muted); font-size: 11px; margin-top: 6px; font-style: italic; }

/* === AI draft chips (создание задачи) =================================== */
.create-task-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#draft-chips-slot:empty { display: none; }

.ai-draft {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin-top: 10px; padding: 10px 12px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.ai-draft-label { color: var(--muted); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.ai-draft-group { display: flex; gap: 4px; flex-wrap: wrap; }
.ai-draft-reason { color: var(--muted-2); font-size: 12px; font-style: italic; }
.ai-draft-error {
    margin-top: 10px; padding: 8px 12px; color: var(--red); font-size: 13px;
    background: var(--red-soft); border: 1px solid var(--red);
    border-radius: var(--r-md);
}

/* Radio-chips: скрываем нативный input, при :checked подсвечиваем span */
.chip-radio { cursor: pointer; display: inline-block; }
.chip-radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio .chip { opacity: 0.5; transition: opacity 0.1s, box-shadow 0.1s; }
.chip-radio:hover .chip { opacity: 0.85; }
.chip-radio input[type="radio"]:checked + .chip {
    opacity: 1; box-shadow: 0 0 0 2px var(--accent-soft);
}

/* === /today page ======================================================== */
.today-header { margin-bottom: 20px; }
.today-header h2 { margin-bottom: 4px; }
.today-subtitle { color: var(--muted); font-size: 13px; margin: 0; }

.today-section { margin: 24px 0; }
.today-section h3 {
    color: var(--fg); text-transform: none; font-size: 14px;
    letter-spacing: 0; font-weight: 600; margin: 0 0 10px;
}
.today-section h3 small { color: var(--muted); font-weight: 400; margin-left: 4px; }

.today-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.today-row {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 12px 14px;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.today-row:hover { background: var(--surface-2); border-color: var(--border-strong); }

.section-overdue .today-row { border-left: 3px solid var(--red); }
.section-today .today-row   { border-left: 3px solid var(--yellow); }
.section-soon .today-row    { border-left: 3px solid var(--accent); }
.section-p1 .today-row      { border-left: 3px solid var(--red); }

.today-row-main { display: flex; gap: 12px; align-items: flex-start; }
.today-row-chips { display: flex; gap: 6px; align-items: center; flex-shrink: 0; flex-wrap: wrap; max-width: 220px; }
.today-row-text { flex: 1 1 auto; min-width: 0; }
.today-row-text .text { display: block; color: var(--fg); margin-bottom: 4px; word-wrap: break-word; }
.today-row-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.today-row-meta .meta-item { color: var(--muted); }
.today-row-actions { flex-shrink: 0; display: flex; gap: 6px; }

/* ─── Пикер срока: единый вид с соседней «Готово» ────────────────── */
.snooze-editor { position: relative; }
.snooze-editor-btn {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 10px;
}
.snooze-editor-btn::-webkit-details-marker { display: none; }
.snooze-editor-body {
    position: absolute; top: 100%; right: 0; z-index: 10;
    min-width: 180px; margin-top: 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}
.snooze-editor-title {
    color: var(--muted); font-size: 12px;
    padding: 4px 8px 6px; text-transform: none;
}
.snooze-editor-item {
    display: block; width: 100%; text-align: left;
    padding: 6px 8px; border-radius: 6px;
    background: transparent; border: 1px solid transparent;
    color: var(--fg); font-size: 13px; cursor: pointer;
}
.snooze-editor-item:hover {
    background: var(--surface-2); border-color: var(--border);
}

.today-row-actions .btn-close {
    background: transparent; border: 1px solid var(--border); color: var(--green);
    border-radius: var(--r-sm); padding: 4px 10px; cursor: pointer;
}
.today-row-actions .btn-close:hover { background: var(--green-soft); border-color: var(--green); }

.today-summary { margin-top: 32px; }
.today-summary .empty { padding: 16px; font-size: 13px; }
.today-summary-row { display: flex; align-items: center; gap: 6px; }

/* === Calendar section on /today (D.1a') ================================= */
.section-calendar .today-row { border-left: 3px solid var(--acc-blue); }

.calendar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.calendar-card {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--acc-blue);
    border-radius: var(--r-md); padding: 12px 14px;
    display: flex; gap: 14px; align-items: flex-start;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.calendar-card:hover { background: var(--surface-2); border-color: var(--border-strong); }
.calendar-card-passed { opacity: 0.6; border-left-color: var(--border); }

.calendar-card-time {
    flex-shrink: 0; font-variant-numeric: tabular-nums;
    color: var(--muted); font-size: 13px; min-width: 100px; padding-top: 2px;
}
.calendar-card-body { flex: 1 1 auto; min-width: 0; }
.calendar-card-title { color: var(--fg); font-weight: 500; margin-bottom: 4px; word-wrap: break-word; }
.calendar-card-title a { color: var(--fg); text-decoration: none; }
.calendar-card-title a:hover { text-decoration: underline; }

.calendar-card-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.calendar-meta-item { color: var(--muted); }
.calendar-meta-item a { color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--border-strong); }
.calendar-meta-item a:hover { color: var(--fg); border-bottom-color: var(--fg); }

.calendar-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: var(--r-pill);
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 11px; color: var(--muted); text-decoration: none;
}
.calendar-chip-video { background: var(--surface-2); color: var(--acc-blue); border-color: var(--acc-blue); }
.calendar-chip-video:hover { background: var(--acc-blue); color: var(--surface); }

.calendar-card-agenda {
    font-size: 13px; color: var(--fg-soft); margin-top: 6px;
    word-wrap: break-word; white-space: pre-wrap;
    /* Без max-height / mask-image. Юзер явно сказал «всё сразу видно
       в боте и вебе». Density тут уступает полноте контента. */
}
.calendar-card-video { font-size: 12px; color: var(--muted); margin-top: 6px; word-break: break-all; }
.calendar-card-video a { color: var(--acc-blue); text-decoration: none; }
.calendar-card-video a:hover { text-decoration: underline; }

.calendar-banner {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 10px 14px;
    font-size: 13px; color: var(--muted);
}
.calendar-banner-warn { border-color: var(--yellow); background: var(--yellow-soft); color: var(--fg); }
.calendar-banner a { color: var(--acc-blue); }

@media (max-width: 720px) {
    .calendar-card { flex-direction: column; gap: 4px; }
    .calendar-card-time { min-width: 0; }
}

/* === HERO + sticky sub-nav + 2 раздела (D.1a' v2 redesign) ============== */

/* Legacy .today-hero* и .hero-counter* удалены в Блоке F — /today v3
   использует .today-header + .today-subnav (segment pills). */

.today-subnav {
    position: sticky; top: 0; z-index: 10;
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 10px 0; margin: 8px 0 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.today-subnav-item {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: var(--r-pill);
    background: var(--surface); border: 1px solid var(--border);
    font-size: 13px; color: var(--fg); text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.today-subnav-item:hover { background: var(--surface-2); border-color: var(--border-strong); }
.today-subnav-item:focus-visible { outline: none; box-shadow: var(--ring); }
.today-subnav-warn { color: var(--red); background: var(--red-soft); border-color: var(--red); }

.today-group { margin: 24px 0; }
.today-group-title {
    margin: 0 0 10px;
    font-size: 15px; font-weight: 600; color: var(--fg-soft);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

/* Section-title icon — взамен inline style="color:..." (DS дисциплина). */
.section-title-icon { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 4px; }
.section-title-icon--red { color: var(--red); }
.section-title-icon--blue { color: var(--acc-blue); }
.section-title-icon--accent { color: var(--accent); }
.section-title-icon--green { color: var(--green); }

/* Юзер 2026-07-08: модификатор section-title.with-icon — прижимает
   первую (иконочную) обёртку к левому краю без .section-title-icon
   margin, задаёт единый gap 6px. Использовать когда иконка ближе к
   тексту, чем дефолтные 8px. */
.section-title.with-icon { gap: 6px; }
.section-title.with-icon > .section-title-icon { margin-right: 0; margin-left: 0; }
.section-title.with-icon > .section-title-icon:first-child { margin-left: 0; }

/* Юзер 2026-07-08: chip-parent-track — ссылка «Вложен в трек: <родитель>»
   с chevron-left слева перед именем (в track.html). Chevron прижат к
   тексту, немного сдвинут вниз для оптического центра. */
.chip-parent-track {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
}
.chip-parent-track > svg { color: var(--muted); flex-shrink: 0; }
.chip-parent-track:hover > svg { color: var(--fg-soft); }

/* На мобиле sticky-nav горизонтальный скролл, hero counters wrap */
@media (max-width: 720px) {
    .today-subnav {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    }
    .today-subnav-item { white-space: nowrap; flex-shrink: 0; }
}

@media (max-width: 720px) {
    .today-row-main { flex-direction: column; gap: 8px; }
    .today-row-chips { max-width: none; }
    .today-row-actions { align-self: flex-end; }
}

/* === Toggle button (team activate) ====================================== */
.btn-toggle {
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 500;
    border: 1px solid;
    transition: background .12s, color .12s, border-color .12s;
    cursor: pointer;
}
.btn-toggle.on { background: var(--green-soft); color: var(--green); border-color: rgba(14, 228, 90, .25); }
.btn-toggle.on:hover { background: var(--red-soft); color: var(--red); border-color: rgba(255, 77, 77, .25); }
.btn-toggle.off { background: var(--red-soft); color: var(--red); border-color: rgba(255, 77, 77, .25); }
.btn-toggle.off:hover { background: var(--green-soft); color: var(--green); border-color: rgba(14, 228, 90, .25); }

/* === Buttons ============================================================= */
button { cursor: pointer; border-radius: var(--r-md); font-weight: 500;
         transition: background .12s, border-color .12s, color .12s, transform .04s, box-shadow .12s; }
button:active { transform: translateY(0.5px); }
button:focus-visible { outline: none; box-shadow: var(--ring); }

/* === Buttons — единая 5-классовая система (Phase 8a) ====================
   Все кнопки веба сведены к 5 базовым классам:
     .btn-primary    — главный CTA (Save, Submit, ✓ Принять)
     .btn-secondary  — вторичный/inline (Edit, ↩ Назад, ✓ закрыть task)
     .btn-ghost      — третичный, минимальный (Skip, ➕ Новый)
     .btn-danger     — destructive (🗑 Delete, ✗ Decline)
     .btn-chip-close — × внутри chip
   До 8a было 22+ вариаций (.btn-ok/edit/close/save/route/...) с
   несинхронной палитрой (зелёный glow, pink glow, gradient). Аудит
   design-reviewer 2026-06-02. */

.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 8px 14px; border-radius: var(--r-md);
    font-family: var(--font); font-size: 13px; font-weight: 500;
    line-height: 1.2; cursor: pointer; text-decoration: none;
    border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}

/* Фаза 15.5.4: компактная inline-icon кнопка (save / + в формах). */
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.btn-icon:hover { background: var(--surface-2); color: var(--fg); border-color: var(--border-strong); }
.btn-icon-accent { color: var(--accent); border-color: var(--accent-soft); }
.btn-icon-accent:hover { background: var(--accent-soft); color: var(--accent); }
.btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-ghost:focus-visible, .btn-danger:focus-visible {
    outline: none; box-shadow: var(--ring);
}

/* primary — accent fill */
.btn-primary {
    background: var(--accent); color: #fff; font-weight: 600;
}
.btn-primary:hover { background: var(--accent-2); }
.btn-primary:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; }

/* secondary — white + border-strong, hover: border → accent (HANDOFF v3). */
.btn-secondary {
    background: var(--surface); color: var(--fg);
    border-color: var(--border-strong);
    font-weight: 500;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--fg); }

/* ghost — transparent, hover surface */
.btn-ghost {
    background: transparent; color: var(--muted);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--fg-soft); }

/* danger — 2026-07-07: outlined red idle (единственный outlined в системе,
   визуальный сигнал «внимание, удаление»), fill red на hover.
   До этого idle был neutral surface-2 + border, что сливалось с secondary. */
.btn-danger {
    background: transparent; color: var(--red);
    border-color: var(--red);
}
.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:disabled {
    background: transparent; color: var(--muted); border-color: var(--border);
    cursor: not-allowed;
}
/* Icon-only вариант (svg без текста рядом) — outlined red в каждой строке
   таблицы визуально шумно. Убираем border, оставляем красную иконку,
   на hover — soft fill. Обнаруживается через `:has(svg:only-child)`
   (браузеры без :has поддержки увидят стандартный outlined — приемлемо). */
.btn-danger:has(svg:only-child) {
    background: transparent; color: var(--red);
    border-color: transparent;
}
.btn-danger:has(svg:only-child):hover {
    background: var(--red-soft); color: var(--red);
    border-color: var(--red-soft);
}

/* === Confirm modal ======================================================
   Универсальная модалка подтверждения destructive-действий. Подключается
   через JS в base.html — перехватывает hx-confirm (HTMX) и
   data-confirm-modal на формах (не-HTMX). Заменяет нативный browser
   confirm() — у него нет визуальной дифференциации destructive vs обычное. */
.confirm-modal {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--fg);
    max-width: 440px;
    width: calc(100% - 32px);
    box-shadow: var(--shadow-lg);
}
.confirm-modal::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}
.confirm-modal > form {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}
.confirm-modal-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--fg); }
.confirm-modal-text  { margin: 0; font-size: 14px; color: var(--fg-soft); line-height: 1.45; white-space: pre-line; }
.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

/* magic — LLM action marker, purple accent. Семантика: «эта кнопка стоит токенов / времени GPT» */
.btn-magic {
    background: var(--surface-2); color: var(--acc-purple);
    border-color: var(--border);
}
.btn-magic:hover {
    background: var(--accent-soft); color: var(--acc-purple);
    border-color: var(--acc-purple);
}
.btn-magic svg { color: var(--acc-purple); }

/* Inline-row компактная версия — для action-кнопок в строках таблицы. */
.actions .btn-primary, .actions .btn-secondary,
.actions .btn-ghost, .actions .btn-danger {
    padding: 5px 10px; margin-left: 4px;
}
/* 2026-07-07: outlined red в каждой строке таблицы = визуальный шум.
   В контексте `.actions` (inline table rows) сбрасываем idle-border,
   оставляем только цветную иконку. Hover — soft-red fill. */
.actions .btn-danger {
    background: transparent; color: var(--red);
    border-color: transparent;
}
.actions .btn-danger:hover {
    background: var(--red-soft); color: var(--red);
    border-color: var(--red-soft);
}

table.tasks .actions { text-align: right; width: 140px; white-space: nowrap; }

.route-form { display: inline-flex; gap: 6px; margin-left: auto; align-items: center; }
.route-form select {
    padding: 5px 10px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: var(--surface-2);
    color: var(--fg); font-size: 13px; height: 30px;
}
.route-form select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* === Suggestion / LLM ==================================================== */
.suggestion {
    flex: 1 1 100%; margin: 4px 0 0;
    padding: 12px 14px;
    background: var(--accent-soft);
    border: 1px solid rgba(0, 112, 243, 0.2);
    border-radius: var(--r-md);
    font-size: 13px; color: var(--fg-soft);
}
.suggestion strong { color: var(--accent); font-weight: 600; }
[data-theme="light"] .suggestion strong { color: var(--accent); }

.conf {
    display: inline-block; padding: 2px 8px; border-radius: var(--r-pill);
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    margin-left: 6px; font-weight: 600;
}
.conf-high { background: var(--green-soft); color: var(--green); }
.conf-medium { background: var(--yellow-soft); color: var(--yellow); }
.conf-low { background: var(--red-soft); color: var(--red); }

.suggestion-accept { display: inline-block; margin-left: 8px; }

/* === Pending assignments в /inbox ======================================= */
/* Блок «На согласование» — тебе делегировали. До этой версии CSS не было,
   рендерилось как голый <ul>. Стиль зеркалит `today-row` (border-left
   акцент 3px) — сразу читается как «требует твоего внимания». */
.pending-assignments {
    margin: 0 0 24px 0;
    padding: 16px;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-lg);
}
.pending-assignments h2 {
    margin: 0 0 6px 0; font-size: 16px;
    text-transform: none; letter-spacing: normal;
}
.pending-assignments .hint {
    margin: 0 0 12px 0; color: var(--muted);
    font-size: 12px;
}
.pending-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
/* 2026-07-08: pending-card теперь наследует базу от `.list-card` (см. блок
   «list-card»). Здесь остаются только специфичные для pending-card мелочи,
   если они появятся; сам «прямоугольник» — из `.list-card`. */
.pending-card { flex-wrap: nowrap; }
.pending-card-body {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.pending-text {
    color: var(--fg); font-size: 14px; font-weight: 500;
    line-height: 1.4;
}
.pending-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: 11px; color: var(--muted);
}
.pending-from { color: var(--fg-soft); }
.pending-track {
    padding: 1px 7px; background: var(--surface-2);
    border-radius: var(--r-pill); font-size: 11px;
    color: var(--fg-soft); font-family: var(--mono);
}
.pending-actions {
    display: flex; gap: 6px; flex-shrink: 0;
}

/* === Create / process forms ============================================= */
.create-track, .create-task, .process-transcripts {
    margin: 12px 0; padding: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.create-track form, .create-task form, .process-transcripts form {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.create-track input[type=text], .create-task input[type=text] {
    flex: 1 1 200px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-2); color: var(--fg);
    font-size: 13px; height: 34px;
}
.create-track input[type=text]:focus, .create-task input[type=text]:focus {
    outline: none; border-color: var(--accent); box-shadow: var(--ring); background: var(--surface);
}
.create-track input[type=text]::placeholder, .create-task input[type=text]::placeholder { color: var(--muted-2); }
.create-track button, .create-task button, .process-transcripts button {
    padding: 8px 16px; background: var(--grad-main); color: #fff;
    border: none; border-radius: var(--r-md);
    font-weight: 600; font-size: 13px; height: 34px;
    transition: transform .08s, box-shadow .12s;
}
.create-track button:hover, .create-task button:hover, .process-transcripts button:hover {
    transform: translateY(-1px); box-shadow: var(--glow-accent);
}
.success-flash {
    display: inline-flex; align-items: center; color: var(--green);
    font-size: 13px; padding: 5px 12px;
    background: var(--green-soft); border-radius: var(--r-md);
    border: 1px solid rgba(14, 228, 90, 0.25);
}
.success-flash a { color: var(--accent); }
[data-theme="light"] .success-flash a { color: var(--accent); }

.error-flash {
    display: inline-flex; align-items: center; color: var(--red);
    font-size: 13px; padding: 5px 12px;
    background: rgba(255, 71, 87, 0.10); border-radius: var(--r-md);
    border: 1px solid rgba(255, 71, 87, 0.30);
}

/* === Floating toasts (HTMX errors etc.) ==================================
   v3 A2: монохром, мягкая тень, тонкая рамка. Класс `.show` включается JS'ом
   в base.html после fade-in (200ms). Виды: `toast-info` (default) и
   `toast-error` (для htmx:responseError). */
.toast {
    position: fixed; bottom: 24px; right: 24px;
    max-width: 480px; padding: 12px 16px;
    background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-md);
    font-size: 13px; line-height: 1.4;
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(8px);
    transition: opacity .2s, transform .2s;
    z-index: 9999;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.toast-info { border-color: var(--border-strong); }

/* === Edit row ============================================================ */
table.tasks tr.edit-row td { background: var(--surface-2); padding: 14px 16px; }
/* 2026-07-08: клик по «пустому фону» строки (/tasks, /team) открывает
   inline edit-form. См. handler `installRowToggle` в base.html. */
tr[data-edit-toggle] { cursor: pointer; }
tr[data-edit-toggle]:hover > td { background: var(--surface-2); }
.edit-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13px; }
.edit-form label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.edit-form input {
    padding: 5px 10px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: var(--surface);
    color: var(--fg); font-size: 13px; height: 30px;
}
.edit-form input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* === Auth ================================================================ */
.auth-card {
    max-width: 400px;
    margin: 64px auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 36px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.auth-card::before {
    content: "";
    position: absolute;
    width: 240px; height: 240px;
    right: -80px; top: -80px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 112, 243, 0.20), transparent 60%);
    pointer-events: none;
}
.auth-card::after {
    content: "";
    position: absolute;
    width: 200px; height: 200px;
    left: -60px; bottom: -60px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 112, 243, 0.16), transparent 60%);
    pointer-events: none;
}
.auth-card > * { position: relative; }
.auth-card h2 { margin: 0 0 24px; font-size: 22px; text-align: center; letter-spacing: -0.02em; }
/* Фаза 15.5.4: labels без uppercase/letter-spacing (Я.360-style — обычный
   капитализированный регистр), inputs тоньше, кнопка не full-width-glow. */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 13px; font-weight: 500; color: var(--fg-soft);
}
/* .auth-form label.check + .digest-time-select удалены 2026-07-13 (Блок F) —
   больше не используются в шаблонах. Настройки дайджестов переехали в
   /settings через .settings-row + .switch. */
/* 2026-07-07: .auth-form button больше НЕ переопределяет базовый .btn-*.
   Идея — единый размер кнопок везде: `.btn-primary` и `.btn-danger` держат
   свой padding/border-radius/размер (см. секцию Buttons выше). Раньше
   auth-form-override делал кнопки в формах толще (9px 20px) чем везде
   ещё (8px 14px) — визуальный mismatch. Fallback margin-top 4px оставлен
   как inline на самой кнопке через align-self. */
.auth-form label small { color: var(--muted); font-weight: 400; }
.auth-form input, .auth-form select {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 14px; color: var(--fg);
    background: var(--surface);
    transition: border-color .12s, box-shadow .12s;
}
.auth-form input:hover, .auth-form select:hover { border-color: var(--border-strong); }
.auth-form input:focus, .auth-form select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-form input:disabled { color: var(--muted); background: var(--surface-2); }
.auth-form .btn-primary,
.auth-form .btn-danger,
.auth-form .btn-secondary,
.auth-form .btn-magic {
    align-self: flex-start;
    margin-top: 4px;
}
.auth-error {
    padding: 10px 14px; background: var(--red-soft); color: var(--red);
    border-radius: var(--r-md); margin-bottom: 4px; font-size: 13px;
    border-left: 3px solid var(--red);
}

/* === 2026-07-07: form utilities ==========================================
   .form-grid       — 2-колоночная сетка label/input с выровненной базой.
                       Для форм /settings и /me где несколько похожих
                       строк с одинаковой семантикой.
   .form-toggle-row — checkbox + текст + опциональный control в одну
                       линию с выровненным правым краем. Раньше
                       «Утренний дайджест в [время]» и «Вечерний итог
                       в [время]» — select'ы плавали по горизонтали
                       из-за разной ширины подписей. */
.form-grid {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: 10px 16px; align-items: center;
}
.form-grid label {
    display: contents;  /* label превращается в паравоз для двух ячеек */
}
.form-grid label > span:first-child {
    color: var(--fg-soft); font-size: 13px;
    font-weight: 500;
}
.form-grid label input,
.form-grid label select {
    padding: 9px 12px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    font-size: 14px; color: var(--fg); background: var(--surface);
    width: 100%;
}
.form-grid label input:focus,
.form-grid label select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Legacy .form-toggle-row* и .toggle-label/-body/-hint/-control удалены
   в Блоке F — тумблеры через .switch 34×20 в .settings-row. */
.auth-alt { margin: 20px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.auth-alt a { color: var(--accent); font-weight: 600; }
[data-theme="light"] .auth-alt a { color: var(--accent); }

/* === HTMX states ========================================================= */
.htmx-request { opacity: 0.6; transition: opacity .15s; }
.htmx-request.htmx-indicator { display: inline; }

/* === Scrollbar =========================================================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* === Responsive ========================================================== */
@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar {
        position: static; height: auto;
        flex-direction: row;
        overflow-x: auto;
        padding: 10px 12px;
        gap: 8px;
        align-items: center;
    }
    .sb-logo { margin-bottom: 0; padding: 4px 8px; }
    .sb-section, .sb-spacer, .sb-bottom { display: none; }
    .sb-nav { flex-direction: row; gap: 4px; }
    .sb-item { white-space: nowrap; }
    .sb-label { display: none; }
    .content-inner { padding: 20px 16px 40px; }
    .hero { padding: 20px 22px; }
    .hero-title { font-size: 26px; }
    h2 { font-size: 20px; }
    .filters { flex-direction: column; align-items: stretch; }
    .filters select, .filters input[type=text] { width: 100%; }
    table.data { font-size: 12px; }
    table.data th, table.data td { padding: 8px 10px; }
    table.tasks .actions { width: auto; }
}

/* ─── Transcript flow v2 ────────────────────────────────────────── */

.tx-upload { margin: 24px 0; }
.tx-upload textarea {
    width: 100%; min-height: 200px;
    padding: 12px; font-family: inherit; font-size: 14px;
    background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: 8px;
}
.tx-upload-actions {
    display: flex; gap: 12px; align-items: center; margin-top: 12px;
}
.tx-folder {
    margin-top: 32px; padding: 12px; border: 1px dashed var(--border);
    border-radius: 8px; opacity: 0.7;
}
.tx-folder summary { cursor: pointer; font-weight: 500; }

.tx-walk { max-width: 720px; margin: 0 auto; }
.tx-walk-header h2 { margin-bottom: 8px; }
.tx-context {
    padding: 8px 12px; background: var(--surface-2, var(--surface));
    border-left: 3px solid var(--accent); border-radius: 4px;
    font-style: italic; margin: 8px 0;
}
.tx-progress { color: var(--muted); font-size: 14px; }

/* ─── TX.1 мини-обзор задач ─────────────────────────────────────── */
.tx-list-frame {
    margin: 16px 0 0;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.tx-list-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 8px;
}
.tx-list-count { color: var(--muted); font-size: 13px; }
.tx-list-toggle { display: flex; gap: 6px; }
.tx-list-group {
    margin: 10px 0 4px; font-size: 13px; color: var(--muted);
    font-weight: 500; text-transform: none;
}
.tx-list-group-count { color: var(--muted); font-weight: 400; }
.tx-list-items {
    list-style: none; padding: 0; margin: 0 0 4px;
    display: flex; flex-direction: column; gap: 2px;
}
.tx-list-item { margin: 0; }
.tx-list-item-btn {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; text-align: left;
    background: transparent; border: 1px solid transparent;
    border-radius: 6px; cursor: pointer;
    color: var(--fg); font: inherit;
}
.tx-list-item-btn:hover {
    background: var(--surface-2); border-color: var(--border);
}
.tx-list-item.is-current .tx-list-item-btn {
    background: var(--accent-soft);
    border-color: rgba(0,112,243,.22);
    font-weight: 500;
}
.tx-list-item-num {
    color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0;
    min-width: 22px;
}
.tx-list-item-text {
    flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}
.tx-list-item-asg {
    color: var(--muted); font-size: 12px; flex-shrink: 0;
}

.tx-card-frame {
    margin: 24px 0; padding: 20px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px;
}
.tx-task-text { font-size: 16px; line-height: 1.5; margin: 8px 0; }
.tx-task-meta {
    display: flex; gap: 24px; color: var(--muted); font-size: 14px;
    margin-bottom: 16px;
}
.tx-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.tx-actions button,
.tx-actions .btn-ok,
.tx-actions .btn-skip,
.tx-actions .btn-edit,
.tx-actions button:hover { border-color: var(--accent); }

.tx-context-form textarea,
.tx-input-form textarea {
    width: 100%; padding: 10px; font-family: inherit; font-size: 14px;
    background: var(--surface-2, var(--surface)); color: var(--fg);
    border: 1px solid var(--border); border-radius: 6px;
}
.tx-prompt { font-weight: 500; margin: 0 0 12px 0; white-space: pre-line; }
.tx-row { display: flex; gap: 8px; margin-top: 12px; }

/* Walk-flow track picker: chip'ы горизонтально с wrap, а не столбиком.
   Без этого правила каждая <form> — блочная и треки идут вертикально
   (см. скрин 2026-07-13). */
.tx-track-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.tx-track-list form { margin: 0; }
.tx-track-list .btn-secondary {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
}
.tx-error { color: #c53030; font-size: 13px; }

/* Walk-flow preview суммаризации: <pre> без переноса разъезжается по
   горизонтали и уводит кнопку «Сохранить» за экран. Заставляем перенос. */
.tx-ctx-preview {
    max-width: 100%;
    overflow: hidden;
}
.tx-summary-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg-soft);
    background: var(--surface-2);
    border-radius: var(--r-md);
    padding: 12px 14px;
    line-height: 1.5;
    margin: 8px 0 0;
    max-width: 100%;
    box-sizing: border-box;
}
.tx-message { color: var(--accent); font-size: 13px; margin-top: 8px; }

.tx-picker-grid {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0;
}
.tx-done h3 { color: var(--accent); }
.tx-done .tx-tracks ul { margin: 8px 0; padding-left: 20px; }
.tx-walk-footer { margin-top: 24px; text-align: right; }

/* ─── edit-row / add-person form ──────────────────────────────────── */
.edit-row-grid {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
    padding: 12px; background: var(--surface-2); border-radius: var(--r-md);
}
.edit-row-grid label {
    display: flex; flex-direction: column; gap: 4px; font-size: 12px;
    color: var(--muted); flex: 1 1 auto;
}
.edit-row-grid .edit-text { flex: 2 1 320px; }
.edit-row-grid textarea {
    padding: 8px; font-family: inherit; font-size: 14px;
    background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-sm);
    min-height: 56px;
}
.edit-row-grid select, .edit-row-grid input[type=date] {
    padding: 6px 8px; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-sm);
}

/* Фаза 15.5.4: inline-форма редактирования в /people — input + save-кнопка
   на одной линии, чистый стиль без heavy borders. */
.edit-person-form {
    display: inline-flex; gap: 6px; align-items: center;
}
.edit-person-form input {
    padding: 6px 10px; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-md);
    font-size: 13px; height: 30px; box-sizing: border-box;
}
.edit-person-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.add-person { margin-top: 12px; }
.add-person summary {
    cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 0;
}
.add-person summary:hover { color: var(--fg); }
.add-person-form {
    display: flex; gap: 10px; align-items: end; margin-top: 12px;
    padding: 14px; background: transparent; border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.add-person-form label {
    display: flex; flex-direction: column; gap: 5px; font-size: 13px;
    color: var(--fg-soft); font-weight: 500;
}
.add-person-form input {
    padding: 8px 10px; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px;
}
.add-person-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.add-person-form button {
    padding: 8px 16px; background: var(--accent); color: white;
    border: none; border-radius: var(--r-md); cursor: pointer; font-size: 13px; font-weight: 600;
}
.add-person-form button:hover { background: var(--accent-2); }
.save-result, .add-person-result { display: block; font-size: 12px; margin-top: 6px; }

/* ─── Multi-assignee chips ────────────────────────────────────────── */
.multi-assignees {
    margin-top: 12px; padding: 10px; background: var(--surface-2);
    border-radius: var(--r-md); font-size: 13px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.multi-assignees .chip-assignee {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-pill);
}
.btn-chip-x {
    background: none; border: none; color: var(--muted); cursor: pointer;
    padding: 0 2px; font-size: 14px; line-height: 1;
}
.btn-chip-x:hover { color: var(--red); }
.multi-assignees select {
    padding: 4px 8px; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-sm);
}
.muted { color: var(--muted); }

/* ─── /people маркеры ─────────────────────────────────────────────── */
.chip-marker {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--r-pill);
    font-family: var(--mono); font-size: 12px;
}
.chip-marker form { display: inline; }
.chip-muted { background: transparent; color: var(--muted); border: 1px dashed var(--border); }
.add-marker-form {
    display: inline-flex; gap: 6px; align-items: center;
}
.add-marker-form input {
    padding: 6px 10px; background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--r-md);
    font-family: var(--mono); font-size: 12px; height: 30px; box-sizing: border-box;
}
.add-marker-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* .add-marker-form .btn-icon наследует из глобального */
table.people th { text-align: left; padding: 8px 12px; color: var(--muted); }
table.people td { padding: 10px 12px; border-top: 1px solid var(--border); }

/* ─── Typography: tabular numbers ─────────────────────────────────── */

/* Tabular figures для чисел, дат, счётчиков: чтобы цифры не «прыгали». */
table.data, table.tasks, .sb-count, .stat-num, .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ─── Density toggle UI ─────────────────────────────────────────── */

.sb-density-toggle {
    display: inline-flex; gap: 4px; padding: 3px;
    background: var(--surface-2); border-radius: var(--r-pill);
    border: 1px solid var(--border); margin-top: 8px;
    font-size: 11px;
}
.sb-density-toggle .opt {
    padding: 4px 10px; border-radius: var(--r-pill);
    color: var(--muted); cursor: pointer; user-select: none;
    transition: all .12s ease;
}
.sb-density-toggle .opt.active {
    background: var(--surface); color: var(--fg);
    box-shadow: var(--shadow-sm);
}
.sb-density-toggle .opt:hover { color: var(--fg); }

/* Применение density к table rows */
table.data td, table.data th,
table.tasks td, table.tasks th {
    padding: var(--row-pad-y) var(--row-pad-x);
}
.hero { padding: var(--hero-pad) calc(var(--hero-pad) + 4px); }

/* В compact-режиме чуть меньше vertical отступов в формах */
:root[data-density="compact"] .filters {
    gap: 8px;
}
:root[data-density="compact"] .filters input,
:root[data-density="compact"] .filters select {
    padding: 5px 8px;
}

/* =========================================================================
   P1.8 (2026-06-11): utility-классы взамен inline style=""
   ========================================================================= */

/* Soft-card — повторяющийся «нежный блок»: surface + border + r-lg + padding.
   Видно в _person_card_top3, me-checklist, suggested-link sections. */
.soft-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px 22px;
}
.soft-card--narrow { max-width: 840px; }

/* Tier-chip — карточка человека: «я»/«прямой репорт»/«в моей команде»/«не мой репорт».
   Базовый стиль + цветовые варианты (semantic). */
.tier-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 12px; font-weight: 500; color: var(--fg-soft);
}
.tier-chip--self      { color: var(--accent); border-color: var(--accent); }
.tier-chip--direct    { color: var(--acc-blue); border-color: var(--acc-blue); }
.tier-chip--indirect  { color: var(--acc-purple); border-color: var(--acc-purple); }
.tier-chip--peer      { color: var(--muted); }

/* People-grid — компактная сетка карточек (карточка человека-команды). */
.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

/* Section-title-icon — расширение цветовой палитры. */
.section-title-icon--yellow { color: var(--yellow); }
.section-title-icon--pink   { color: var(--acc-pink); }
.section-title-icon--purple { color: var(--acc-purple); }

/* Subsection-title — мелкий заголовок-делитель внутри карточки. */
.subsection-title {
    margin: 12px 0 6px;
    font-size: 14px; font-weight: 600;
    color: var(--fg-soft);
}

/* Spacing utilities (margin-top / margin-bottom).
   Кратны 8px для соответствия rhythm grid. */
.mt-0  { margin-top: 0; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

/* Max-width utilities (соответствуют content widths DS v2). */
.max-w-460 { max-width: 460px; }
.max-w-560 { max-width: 560px; }
.max-w-640 { max-width: 640px; }
.max-w-840 { max-width: 840px; }

/* Inline-flex helper — повторяющийся style="display:inline-flex;align-items:center;gap:..." */
.inline-flex-center {
    display: inline-flex; align-items: center; gap: 8px;
}

/* today-list/today-row variants для карточек. */
.today-list--unstyled {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.today-row-chips--narrow { max-width: 120px; }

/* Спец-классы карточек встреч. */
.calendar-card-time-range { margin-top: 2px; }

/* P1.8: дополнительные utility — back-link, ml/center, муty-hint, show-all. */
.back-link { color: var(--muted); font-size: 13px; }
.ml-8 { margin-left: 8px; }
.muted-hint { color: var(--muted); font-size: 13px; }
.muted-hint--pad { padding: 8px 0; }
.show-all-link { text-align: center; margin-top: 12px; }

/* P1.8: ещё utility — inline-flex variants, person-meta-row, marker-code. */
.inline-flex-center--xs { gap: 6px; }
.person-meta-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.marker-code { color: var(--muted); }

/* P1.8: flash и list utilities. */
.flash-row {
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}
.list-reset { margin: 0; padding-left: 18px; list-style: none; }
.checklist-row {
    margin: 6px 0; display: flex; gap: 10px; align-items: flex-start;
}
.checklist-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.checklist-icon--ok { color: var(--green); }
.checklist-icon--warn { color: var(--yellow); }
.checklist-text { flex: 1; }
.code-muted { color: var(--muted); font-size: 12px; }
.text-muted { color: var(--muted); }
.text-green { color: var(--green); }
.text-yellow { color: var(--yellow); }
.flex-between {
    display: flex; justify-content: space-between; align-items: center;
}
.section-header { margin-bottom: 10px; }
.icon-label-row { display: inline-flex; align-items: center; gap: 8px; }

/* Russian locale time-input — скрыть AM/PM поле (regression на macOS en
   locale 2026-06-23). Цифры моноширинными для выравнивания. */
input[type="time"]::-webkit-datetime-edit-ampm-field { display: none; }
input[type="time"] { font-variant-numeric: tabular-nums; }

/* Tier-icons для людей: direct/indirect report, peer, self. 2026-06-23.
   Применяются рядом с именем человека на /team, /team/{id}, person-card. */
.tier-icon { width: 14px; height: 14px; vertical-align: text-bottom; }
.tier-direct { color: var(--acc-blue); }
.tier-indirect { color: var(--acc-indigo); }
.tier-peer { color: var(--muted); }
.tier-self { color: var(--acc-green); }

/* Onboarding hero — иерархия 3 главных + 3 дополнительных. 2026-06-23. */
.onb-hero { display: grid; gap: 14px; margin-bottom: 32px; }
.onb-hero-row-primary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.onb-hero-row-secondary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.onb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.onb-card:hover { border-color: var(--acc-blue); transform: translateY(-1px); }
.onb-card-secondary { padding: 14px 16px; gap: 6px; }
.onb-card-icon { display: inline-flex; align-items: center; color: var(--acc-blue); }
.onb-card-secondary .onb-card-icon { color: var(--muted); }
.onb-card-title { font-weight: 600; font-size: 16px; }
.onb-card-secondary .onb-card-title { font-size: 14px; }
.onb-card-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
@media (max-width: 720px) {
  .onb-hero-row-primary, .onb-hero-row-secondary { grid-template-columns: 1fr; }
}
/* Inline row utility — иконка/чип + текст в одну линию.
   Заменяет повторные style="display:inline-flex;align-items:center;gap:Npx"
   на 30+ местах (tasks/me/install_bot/etc). 2026-06-23. */
.row-inline { display: inline-flex; align-items: center; gap: 6px; }
.row-inline-tight { display: inline-flex; align-items: center; gap: 4px; }
.row-inline-wide { display: inline-flex; align-items: center; gap: 10px; }

/* Свёрнутые фильтры на /tasks. Раскрытие — клик по summary. */
details.task-filters { margin-bottom: 16px; }
details.task-filters > summary { cursor: pointer; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
details.task-filters[open] > summary { margin-bottom: 12px; }

/* Surface cards — карточки на /me и /settings. 2026-06-23. */
.me-checklist { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 22px; margin-bottom: 24px; }
.me-checklist-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.me-checklist-list { margin: 0; padding-left: 18px; list-style: none; }
.me-checklist-list li { margin: 6px 0; display: flex; gap: 10px; align-items: flex-start; }
.me-checklist-list li > span:first-child { display: inline-flex; align-items: center; flex-shrink: 0; }
.me-checklist-list li > span:last-child { flex: 1; }
.me-link-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 560px; }
.me-link-card + .me-link-card { margin-top: 12px; }
.me-icon-ok { color: var(--green); }
.me-icon-warn { color: var(--yellow); }

/* Блок 5 (2026-06-27): карточка-ссылка на /settings со страницы /me. */
.me-settings-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin: 0 0 24px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    max-width: 560px;
    transition: background 0.12s, border-color 0.12s;
}
.me-settings-link:hover {
    background: var(--surface-hover, var(--surface));
    border-color: var(--acc-blue, var(--border));
}
.me-settings-link-ic {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--muted);
}
.me-settings-link-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.me-settings-link-body strong { color: var(--text); font-weight: 600; }
.me-settings-link-body small { color: var(--muted); }
.me-settings-link-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--muted);
}

/* === Блок 8 (2026-06-27): дизайн-долг веба. === */

/* Универсальный alert-card. Заменяет calendar-banner-warn,
   escalations-секцию на /team и подобные «коробочки-предупреждения».
   Модификаторы: --warn (жёлтый), --info (синий), --error (красный). */
.alert-card {
    margin: 16px 0;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--r-lg);
    font-size: 13px;
    color: var(--fg);
}
.alert-card--warn  { border-left-color: var(--yellow); background: var(--yellow-soft); }
.alert-card--info  { border-left-color: var(--acc-blue); }
.alert-card--error { border-left-color: var(--red); background: var(--red-soft); color: var(--red); }
.alert-card a { color: var(--acc-blue); }
.alert-card-head {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 8px; font-weight: 600;
}
.alert-card-head .alert-card-icon { display: inline-flex; align-items: center; }
.alert-card--warn  .alert-card-icon { color: var(--yellow); }
.alert-card--info  .alert-card-icon { color: var(--acc-blue); }
.alert-card--error .alert-card-icon { color: var(--red); }
.alert-card-list { margin: 0; padding-left: 0; list-style: none; }
.alert-card-list > li { margin: 6px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* === Единый шаблон карточки списка (list-card) — 2026-07-08. =============
   Раньше на страницах жило ~8 «коробочек» с индивидуальными border-left
   3px в inline-стилях: баннеры расшифровок на /today, /dashboard, /inbox
   (soft-card + border-left:3px solid var(--accent)); pending-card на
   /inbox (в .pending-assignments); empty-state и alerts. Все они —
   вариации одного паттерна. Собираем в единый компонент. Модификаторы
   `--ok/warn/info/error` задают только цвет левой плашки. */
.list-card {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 14px 0;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--r-lg);
    font-size: 13px;
    color: var(--fg);
}
.list-card--ok    { border-left-color: var(--green); }
.list-card--warn  { border-left-color: var(--yellow); }
.list-card--info  { border-left-color: var(--accent); }
.list-card--error { border-left-color: var(--red); }
.list-card > .list-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.list-card > .list-card-main { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; }
.list-card > .list-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.list-card[data-edit-toggle] { cursor: pointer; }
.list-card[data-edit-toggle]:hover { background: var(--surface-2); }

/* Блок «помощник» внутри карточки встречи (A.11). Раньше — 22 inline-style. */
.calendar-card-assistant {
    margin-top: 10px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
}
.assistant-block-summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.assistant-block-body { margin-top: 10px; }
.assistant-block-text {
    white-space: pre-wrap;
    font-size: 13px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: 10px;
    margin-bottom: 10px;
}
.assistant-block-empty {
    color: var(--muted);
    font-size: 12px;
    margin: 0 0 10px 0;
}
.assistant-block-tasks {
    list-style: none;
    padding: 0;
    margin: 0;
}
.assistant-block-task {
    padding: 4px 0;
    font-size: 13px;
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.assistant-block-task-prio {
    color: var(--muted);
    font-size: 11px;
    min-width: 24px;
}
.assistant-block-task-text { flex: 1; }
.assistant-block-task-deadline {
    color: var(--muted);
    font-size: 11px;
}
.assistant-block-link {
    font-size: 12px;
    display: inline-block;
    margin-top: 6px;
}

/* Onboarding — раньше в onboarding.html был inline <style> с .ob-*.
   Переезжаем в style.css, объединяем с уже существующими .onb-*. */
.ob-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 48px;
    align-items: start;
}
.ob-toc {
    position: sticky;
    top: 24px;
    padding: 16px 0;
    border-left: 1px solid var(--border);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.ob-toc h4 {
    margin: 0 0 12px 16px;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}
.ob-toc a {
    display: block;
    padding: 6px 16px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
    transition: color .15s, border-color .15s;
}
.ob-toc a:hover { color: var(--fg); }
.ob-toc a.active { color: var(--accent); border-left-color: var(--accent); }
.ob-main h2 {
    margin-top: 48px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    scroll-margin-top: 24px;
}
.ob-main h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 24px; }
.ob-main h3 { margin-top: 28px; }
.ob-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 32px;
    margin-bottom: 32px;
}
.ob-hero h1 { margin: 0 0 8px; font-size: 32px; }
.ob-hero p { margin: 0; color: var(--muted); font-size: 15px; }
.ob-state {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    margin: 24px 0 32px;
}
.ob-state.ok { border-color: var(--green); }
.ob-state.warn { border-color: var(--yellow); }
.ob-state h3 {
    margin: 0 0 8px; font-size: 18px; font-weight: 700;
    color: var(--fg); text-transform: none; letter-spacing: -0.01em;
}
.ob-state .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ob-state ol {
    margin: 8px 0 12px 20px;
    padding: 0;
    color: var(--fg-soft);
    font-size: 14px;
    line-height: 1.7;
}
.ob-cmd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--surface-2, rgba(0,0,0,.05));
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}
.ob-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 16px 0;
}
.ob-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px 20px;
}
.ob-card h4 {
    margin: 0 0 6px; font-size: 15px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    text-transform: none; letter-spacing: 0; color: var(--fg);
}
.ob-card-icon { display: inline-flex; align-items: center; }
.ob-card p { margin: 0; color: var(--muted); font-size: 13px; }
.ob-whatsnew {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    margin: 24px 0 32px;
}
.ob-whatsnew h2 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fg);
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    padding: 0;
}
.ob-whatsnew ul { list-style: none; padding: 0; margin: 0; }
.ob-whatsnew li {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    border-top: 1px solid var(--border);
}
.ob-whatsnew li:first-child { border-top: 0; }
.ob-whatsnew .nw-date { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.ob-whatsnew .nw-title { font-weight: 500; color: var(--fg); }
.ob-whatsnew .nw-why { color: var(--muted); font-size: 13px; margin-left: 6px; }
.ob-whatsnew .nw-link { color: var(--accent); text-decoration: none; }
.ob-whatsnew .nw-link:hover { text-decoration: underline; }
.ob-table { width: 100%; margin: 12px 0; border-collapse: collapse; }
.ob-table th, .ob-table td {
    text-align: left; padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.ob-table th { color: var(--muted); font-weight: 500; font-size: 12px; }
details.ob-backdoor {
    margin: 16px 0;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
details.ob-backdoor summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--muted);
}
details.ob-backdoor ul,
details.ob-backdoor ol {
    color: var(--fg-soft);
    line-height: 1.7;
}
.ob-details-intro {
    color: var(--muted);
    font-size: 14px;
}
@media (max-width: 900px) {
    .ob-layout { grid-template-columns: 1fr; }
    .ob-toc { display: none; }
}

/* install_bot.html — multi-step guide. Раньше был inline <style> блок. 2026-06-23. */
.ib-wrap { max-width: 720px; }
.ib-hero { margin-bottom: 24px; }
.ib-hero h1 { margin: 0 0 8px; font-size: 28px; }
.ib-hero p { margin: 0; color: var(--muted); }
.ib-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    margin-bottom: 24px;
}
.ib-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.ib-step:last-child { margin-bottom: 0; }
.ib-step-num {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
}
.ib-step-body { flex: 1; }
.ib-step-body strong { display: block; margin-bottom: 4px; }
.ib-username {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    background: var(--surface-2, rgba(0,0,0,0.05));
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 15px;
    user-select: all;
    margin-top: 6px;
}
.ib-qr {
    text-align: center;
    margin: 28px 0;
}
.ib-qr svg {
    width: 200px;
    height: 200px;
    background: #fff;
    padding: 12px;
    border-radius: 12px;
}
.ib-qr p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
}
.ib-foot { margin-top: 20px; }
.ib-foot a { margin-right: 16px; }

/* === Dashboard v3 «A2 Графит» =========================================
   Эталон: docs/redesign/etalons/new-a2-home.dc.html */

.dash-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.dash-meta { font-size: 13px; color: var(--muted-2); margin-bottom: 4px; }
.dash-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--fg);
}
.dash-actions { display: flex; gap: 8px; }

/* KPI ряд — 4 карточки одинаковой ширины. */
.dash-kpi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}
.dash-kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--fg);
    transition: border-color .12s;
}
.dash-kpi-card:hover { border-color: var(--border-strong); text-decoration: none; opacity: 1; }
.dash-kpi-card--red:hover { border-color: var(--red); }
.dash-kpi-value {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.dash-kpi-card--red .dash-kpi-value { color: var(--red); }
.dash-kpi-label { font-size: 13px; color: var(--muted); }

/* Alert-бар: расшифровки ждут разбора. */
.dash-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--fg);
    margin-bottom: 28px;
    transition: border-color .12s;
}
.dash-alert:hover { border-color: var(--accent); text-decoration: none; opacity: 1; }
.dash-alert-ic { color: var(--accent); flex-shrink: 0; display: inline-flex; }
.dash-alert-text { flex: 1; }
.dash-alert-cta { color: var(--accent); font-weight: 600; font-size: 13px; white-space: nowrap; }
/* Если alert'а нет — тот же отступ через margin-top на dash-cols. */
.dash-alert + .dash-cols { margin-top: 0; }

.dash-cols {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 16px;
    align-items: start;
    margin-top: 28px;
}
.dash-alert ~ .dash-cols { margin-top: 0; }

.dash-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.dash-card-pad { padding: 16px 20px 18px; }

.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 10px;
}
.dash-card-pad .dash-card-head { padding: 0 0 14px; }
.dash-card-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--fg); }
.dash-card-more { font-size: 13px; font-weight: 500; color: var(--accent); }

.dash-card-body { padding: 0 20px 6px; display: flex; flex-direction: column; }
.dash-card-section {
    border-top: 1px solid var(--row-divider);
    padding: 12px 20px 16px;
}
.dash-section-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-3);
    margin-bottom: 6px;
}
.dash-empty { color: var(--muted); padding: 12px 0; }
.dash-empty.small { font-size: 13px; padding: 4px 0; }

/* Строка задачи: чекбокс · текст · мета. */
.task-row {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-top: 1px solid var(--row-divider);
}
.task-row:first-child { border-top: none; }
.task-cb-form { display: contents; }
.task-cb {
    width: 17px; height: 17px;
    border-radius: 999px;
    border: 1.5px solid #C6C8CC;
    background: transparent;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .12s, background .12s;
}
.task-cb:hover { border-color: var(--accent); }
.task-text { color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-meta { font-size: 12px; white-space: nowrap; text-align: right; }
.task-prio { font-weight: 700; }
.task-prio.p1 { color: var(--red); }
.task-prio.p2 { color: var(--yellow); }
.task-prio.p3 { color: var(--muted); }
.task-when { color: var(--muted); font-weight: 500; }
.task-when.overdue { color: var(--red); font-weight: 600; }
.task-when.today { color: var(--yellow); font-weight: 600; }
.task-when.muted { color: var(--muted-3); }

/* Строка встречи из календаря на дашборде. */
.cal-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
}
.cal-time {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    width: 86px;
    flex-shrink: 0;
}
.cal-title { flex: 1; color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-right-col { display: flex; flex-direction: column; gap: 16px; }

/* Треки на дашборде: имя, число, прогресс-бар. */
.dash-tracks { display: flex; flex-direction: column; gap: 11px; }
.dash-track { display: block; color: var(--fg); }
.dash-track:hover { text-decoration: none; opacity: 1; }
.dash-track-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
.dash-track-name { font-size: 13px; color: var(--fg); }
.dash-track-count { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.dash-track-bar {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: var(--row-divider);
    overflow: hidden;
}
.dash-track-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

/* Команда на дашборде: аватар (инициалы) + имя + счётчик. */
.dash-people { display: flex; flex-direction: column; }
.dash-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--row-divider);
    color: var(--fg);
}
.dash-person:first-child { border-top: none; }
.dash-person:hover { text-decoration: none; opacity: 1; }
.dash-avatar {
    width: 24px; height: 24px;
    border-radius: 999px;
    background: #EEF0F3;
    color: #55575C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.dash-person-name { flex: 1; font-size: 13px; }
.dash-person-count { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* === Today v3 «A2 Графит» =============================================
   Эталон: docs/redesign/etalons/new-a2-today.dc.html
   Строка — grid var(--task-grid): 17px 1fr 40 128 148 92. */

.today-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.today-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--fg);
}
.today-summary-inline { font-size: 13px; color: var(--muted); }
.today-summary-inline strong { color: var(--fg); font-weight: 600; }

/* Sticky pill sub-nav: категории с числами. */
.today-subnav {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
    margin-bottom: 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.today-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--fg-soft);
    font-size: 13px;
    font-weight: 500;
    transition: border-color .12s, color .12s;
}
.today-pill:hover { border-color: var(--border-strong); color: var(--fg); text-decoration: none; opacity: 1; }
.today-pill-red {
    background: var(--red-soft);
    border-color: transparent;
    color: var(--red);
}
.today-pill-red:hover { color: var(--red); border-color: transparent; }

.today-section { margin-bottom: 24px; }
.today-sec-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
}
.today-sec-title.red { color: var(--red); }
.today-sec-title.muted { color: var(--muted); }

/* Карточка со строками задач. */
.today-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.today-row {
    display: grid;
    grid-template-columns: var(--task-grid);
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    transition: background .1s;
}
.today-row + .today-row { border-top: 1px solid var(--row-divider); }
.today-row:hover { background: #FAFAFB; }

.today-cb-form { display: contents; }
.today-cb {
    width: 17px; height: 17px;
    border-radius: 999px;
    border: 1.5px solid #C6C8CC;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.today-cb:hover { border-color: var(--accent); }

.today-text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.today-text-main {
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.today-track {
    font-size: 12px;
    color: var(--muted-3);
}
.today-status {
    font-size: 12px;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 5px;
}
.today-status.blue { color: var(--blue); background: var(--blue-soft); }
.today-status.violet { color: var(--violet); background: var(--violet-soft); }
.today-status.green { color: var(--green); background: var(--green-soft); }

.today-col { min-width: 0; }
.today-col-actions { display: inline-flex; gap: 2px; justify-content: flex-end; }

.today-prio { font-size: 12px; font-weight: 700; cursor: pointer; }
.today-prio.p1 { color: var(--red); }
.today-prio.p2 { color: var(--yellow); }
.today-prio.p3 { color: var(--muted); }

/* Ghost-иконка 28×28 в actions-колонке. */
.today-act {
    width: 28px; height: 28px;
    border-radius: var(--r-md);
    border: none;
    background: transparent;
    color: var(--muted-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .12s, color .12s;
}
.today-act:hover { background: var(--accent-soft); color: var(--fg); }

/* Snooze editor в строке /today: тот же ghost-look, не btn-secondary. */
.today-col-actions .snooze-editor > summary.snooze-editor-btn {
    width: 28px; height: 28px;
    border-radius: var(--r-md);
    border: none;
    background: transparent;
    color: var(--muted-2);
    padding: 0;
    box-shadow: none;
}
.today-col-actions .snooze-editor > summary.snooze-editor-btn:hover {
    background: var(--accent-soft);
    color: var(--fg);
    border: none;
}

/* Chip-editor'ы (priority/deadline/track/assignee) внутри строки задачи —
   без плашки, только цветной текст. Popover-логику не трогаем. */
.today-row .chip-edit > summary { padding: 0; }
.today-row .chip {
    background: transparent !important;
    border: none !important;
    padding: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-3);
}
.today-row .chip-p1 { color: var(--red); font-weight: 700; }
.today-row .chip-p2 { color: var(--yellow); font-weight: 700; }
.today-row .chip-p3 { color: var(--muted); font-weight: 700; }
.today-row .chip-today { color: var(--yellow); font-weight: 600; }
.today-row .chip-soon,
.today-row .chip-week,
.today-row .chip-later { color: var(--muted); font-weight: 500; }
.today-row .chip-empty {
    color: var(--muted-3);
    font-weight: 500;
    cursor: pointer;
}
.today-row .chip-empty:hover { color: var(--accent); }
.today-row .chip-assignee {
    color: var(--fg-soft);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.today-row .chip-icon { color: var(--muted-2); }
/* .today-row .chip-personal удалён 2026-07-13 (Блок F). Приватность в
   строке задачи теперь через .today-status violet (см. today.html). */

/* Deadline chip в строке — цветной текст (муть), кастомизация в шаблоне
   не делаем (chip-today даёт yellow, «просрочено N дн.» — придётся
   расширить editor позже; на этом шаге показываем как есть). */

/* Popover-контейнер chip-edit — оставляем стандартный вид. */

/* === Календарь-карточка v3 ============================================= */
.calendar-list { display: flex; flex-direction: column; gap: 10px; }
.calendar-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 12px;
}
.calendar-card-ic { color: var(--muted-3); margin-top: 3px; display: inline-flex; }
.calendar-card-body { min-width: 0; }
.calendar-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.calendar-card-time {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
}
.calendar-card-title { font-weight: 600; color: var(--fg); }
.calendar-card-title a { color: var(--fg); }
.calendar-card-title a:hover { color: var(--accent-2); }
.calendar-chip {
    font-size: 11px;
    color: var(--muted);
    background: var(--surface-3);
    border-radius: 5px;
    padding: 1px 7px;
    font-weight: 500;
}
.calendar-card-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted-2);
}
.calendar-card-meta a { color: var(--muted); }
.calendar-card-meta a:hover { color: var(--accent-2); }
.calendar-card-agenda {
    margin-top: 8px;
    font-size: 13px;
    color: var(--fg-soft);
    background: var(--surface-2);
    border-radius: var(--r-md);
    padding: 8px 10px;
    line-height: 1.45;
}
.calendar-card-passed { opacity: 0.55; }

/* Assistant-block внутри карточки встречи. */
.calendar-card-assistant {
    margin-top: 10px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
}
.calendar-card-assistant > summary,
.assistant-block-summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    list-style: none;
}
.assistant-block-summary::-webkit-details-marker { display: none; }
.assistant-block-body {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.assistant-block-text {
    font-size: 13px;
    color: var(--fg-soft);
    background: var(--surface-2);
    border-radius: var(--r-md);
    padding: 10px 12px;
    line-height: 1.5;
}
.assistant-block-empty { font-size: 13px; color: var(--muted); margin: 0; }
.assistant-block-tasks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--fg-soft);
}
.assistant-block-task { display: flex; gap: 6px; align-items: baseline; }
.assistant-block-task-text { color: var(--fg-soft); }
.assistant-block-link { font-size: 13px; color: var(--accent); font-weight: 500; }

/* === Inbox v3 «A2 Графит» ==============================================
   Эталон: docs/redesign/etalons/new-a2-inbox.dc.html */

.inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.inbox-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--fg);
}
.inbox-title-count {
    font-size: 14px;
    font-weight: 400;
    color: var(--muted-2);
    margin-left: 8px;
}
.inbox-header-actions { display: inline-flex; gap: 8px; align-items: center; }

.inbox-section { margin-bottom: 24px; }
.inbox-sec-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
}
.inbox-sec-hint { font-weight: 400; color: var(--muted-2); }

/* Pending assignments — карточка на строку. */
.inbox-pending-list { display: flex; flex-direction: column; gap: 10px; }
.inbox-pending-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.inbox-pending-text { flex: 1; min-width: 260px; }
.inbox-pending-title { font-weight: 500; color: var(--fg); }
.inbox-pending-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted-2);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.inbox-pending-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Danger-модификатор secondary-кнопки: red-текст, hover border→red. */
.btn-secondary-danger { color: var(--red); }
.btn-secondary-danger:hover { border-color: var(--red); color: var(--red); }

/* Форма создания задачи — одна строка, слева input, справа две кнопки. */
.inbox-create {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 8px 8px 8px 16px;
    margin-bottom: 24px;
}
.inbox-create-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font);
    font-size: 14px;
    color: var(--fg);
    padding: 4px 0;
}
.inbox-create-input::placeholder { color: var(--muted-3); }

/* Список задач: grid с колонками текст · P · трек · срок · исполнитель · действие. */
.inbox-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.inbox-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px 118px 128px 148px 118px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    transition: background .1s;
}
.inbox-row + .inbox-row { border-top: 1px solid var(--row-divider); }
.inbox-row:hover { background: #FAFAFB; }
.inbox-row-text { min-width: 0; }
.inbox-row-title { color: var(--fg); }
.inbox-row-meta { font-size: 12px; color: var(--muted-3); margin-top: 2px; }

/* Inline AI-suggestion внутри строки задачи. */
.inbox-suggestion {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    background: var(--bg);
    border-radius: var(--r-md);
    padding: 6px 10px;
    flex-wrap: wrap;
}
.inbox-suggestion-ic { color: var(--muted); display: inline-flex; }
.inbox-suggestion-text { color: var(--fg-soft); flex: 1; min-width: 0; }
.inbox-suggestion-text strong { color: var(--fg); font-weight: 600; }
.inbox-suggestion-accept {
    border: none;
    background: var(--accent);
    color: #FFFFFF;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
}
.inbox-suggestion-accept:hover { background: var(--accent-2); }

.inbox-col { min-width: 0; }
.inbox-col-actions { display: inline-flex; justify-content: flex-end; }
.inbox-col-actions .btn-secondary {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
}

/* Chip-editor'ы в inbox-row: тот же плоский вид как в today-row. */
.inbox-row .chip-edit > summary { padding: 0; }
.inbox-row .chip {
    background: transparent !important;
    border: none !important;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-3);
}
.inbox-row .chip-p1 { color: var(--red); font-weight: 700; font-size: 12px; }
.inbox-row .chip-p2 { color: var(--yellow); font-weight: 700; font-size: 12px; }
.inbox-row .chip-p3 { color: var(--muted); font-weight: 700; font-size: 12px; }
.inbox-row .chip-today { color: var(--yellow); font-weight: 600; font-size: 12px; }
.inbox-row .chip-soon,
.inbox-row .chip-week,
.inbox-row .chip-later { color: var(--muted); font-weight: 500; font-size: 12px; }
.inbox-row .chip-empty {
    color: var(--muted-3);
    font-weight: 500;
    cursor: pointer;
}
.inbox-row .chip-empty:hover { color: var(--accent); }
.inbox-row .chip-assignee {
    color: var(--fg-soft);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.inbox-row .chip-icon { color: var(--muted-2); }

.inbox-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--muted);
}

.inbox-hint {
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted);
}
.inbox-hint a { color: var(--accent); font-weight: 500; }

/* === Tasks v3 «A2 Графит» ==============================================
   Эталон: docs/redesign/etalons/new-a2-tasks.dc.html
   Строка задачи — переиспользует .today-row (--task-grid). */

.tasks-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.tasks-toolbar-spacer { flex: 1; }

/* Segment control по горизонту. */
.tasks-seg {
    display: inline-flex;
    background: var(--surface-3);
    border-radius: 8px;
    padding: 2px;
    gap: 1px;
}
.tasks-seg-opt {
    /* Работает и для <a>, и для <button> — сбрасываем нативные стили
       button (background, border, font). Без этого сегментный контрол
       на /transcripts и /meetings выглядит как ряд серых кнопок с
       рамками, а не как pill-переключатель. */
    padding: 6px 14px;
    border-radius: 7px;
    color: var(--muted);
    font-size: 13px;
    font-family: var(--font);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color .12s, background .12s;
}
.tasks-seg-opt:hover { color: var(--fg); text-decoration: none; opacity: 1; background: transparent; }
.tasks-seg-opt.active {
    background: var(--surface);
    color: var(--fg);
    font-weight: 600;
    box-shadow: var(--shadow-seg);
}
.tasks-seg-count {
    margin-left: 4px;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.tasks-seg-opt.active .tasks-seg-count { color: var(--fg); }

/* Popover для группировки и фильтров. */
.tasks-pop { position: relative; }
.tasks-pop > summary { list-style: none; cursor: pointer; }
.tasks-pop > summary::-webkit-details-marker { display: none; }
.tasks-pop-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 13px;
}
.tasks-pop-btn strong { font-weight: 600; }
.tasks-pop-body {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    right: 0;
    min-width: 176px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 5px;
    box-shadow: var(--shadow-pop);
    display: flex;
    flex-direction: column;
}
.tasks-pop-body-wide { min-width: 260px; padding: 14px; gap: 10px; }
.tasks-pop-opt {
    padding: 7px 10px;
    border-radius: var(--r-md);
    color: var(--fg-soft);
    font-size: 13px;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.tasks-pop-opt:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; opacity: 1; }
.tasks-pop-opt.active { background: var(--surface-3); color: var(--fg); font-weight: 600; }

/* Форма фильтров внутри popover. */
.tasks-filters { display: flex; flex-direction: column; gap: 10px; }
.tasks-filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}
.tasks-filters select {
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    background: var(--surface);
}
.tasks-filter-cb {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fg-soft);
    cursor: pointer;
}
.tasks-filter-cb input { accent-color: var(--accent); }
.tasks-filter-actions { display: flex; gap: 8px; margin-top: 4px; }

/* Группа секций в списке задач. */
.tasks-group { margin-bottom: 28px; }
.tasks-group-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}
.tasks-group-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
}
.tasks-group-count {
    font-size: 12px;
    color: var(--muted-3);
    font-variant-numeric: tabular-nums;
}

/* Ghost-actions в конце task-row. */
.today-act-danger:hover { background: var(--red-soft); color: var(--red); }

/* Раскрывающаяся edit-form под строкой (клик по «карандашу»). */
.tasks-edit-row {
    padding: 12px 16px;
    background: var(--surface-2);
    border-top: 1px solid var(--row-divider);
}
.tasks-edit-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    background: var(--surface);
    resize: vertical;
}
.tasks-edit-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.tasks-edit-hint { font-size: 12px; color: var(--muted); }

.tasks-multi-asg {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--fg-soft);
}
.tasks-multi-asg-label { font-weight: 600; color: var(--fg); }
.tasks-multi-asg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
}
.tasks-multi-asg-remove {
    border: none;
    background: transparent;
    color: var(--muted-2);
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
}
.tasks-multi-asg-remove:hover { color: var(--red); }
.tasks-multi-asg-empty { color: var(--muted-3); font-style: italic; }
.tasks-multi-asg select {
    padding: 4px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    background: var(--surface);
    color: var(--fg);
}

/* === Tracks v3 «A2 Графит» ============================================
   Эталон: docs/redesign/etalons/new-a2-tracks.dc.html
   Grid `200px 1fr 70 70 70 44`, content-max 900px. */

.tracks-header {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 70px 70px 70px 44px;
    gap: 16px;
    align-items: center;
    padding: 0 16px 8px;
    font-size: 12px;
    color: var(--muted-2);
}
.tracks-header-num { text-align: right; }

.tracks-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.tracks-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 70px 70px 70px 44px;
    gap: 16px;
    align-items: center;
    padding: 13px 16px;
    transition: background .1s;
}
.tracks-row + .tracks-row { border-top: 1px solid var(--row-divider); }
.tracks-row:hover { background: #FAFAFB; }
.tracks-name-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tracks-name { font-weight: 600; color: var(--fg); }
.tracks-name-empty {
    font-weight: 500;
    color: var(--muted-2);
    font-style: italic;
}
.tracks-parent { font-size: 12px; color: var(--muted-3); }
.tracks-parent a { color: var(--muted); text-decoration: underline; }
.tracks-bar {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: var(--row-divider);
    overflow: hidden;
}
.tracks-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}
.tracks-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}
.tracks-num-muted { color: var(--muted-2); }
.tracks-act { display: inline-flex; justify-content: flex-end; }

/* /tracks — узкий content-max по HANDOFF. */
body[data-page="tracks"] .content-inner { max-width: 900px; }

/* === Meetings v3 «A2 Графит» ==========================================
   Эталон: docs/redesign/etalons/new-a2-meetings.dc.html
   Настоящий switch 34×20 + треки чипами (accent-soft). */

.mt-header { margin-bottom: 20px; }
.mt-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg);
}
.mt-subtitle {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 14px;
    max-width: 560px;
}

.mt-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 24px;
    flex-wrap: wrap;
}
.mt-sync { font-size: 12px; color: var(--muted-3); }
.mt-sync a { color: var(--fg); text-decoration: underline; }

.mt-list { display: flex; flex-direction: column; gap: 10px; }
.mt-section-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-3);
    margin-bottom: 6px;
}
.mt-section-label-offset { margin-top: 20px; }

.meeting-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 20px;
}
.mt-card-head {
    display: flex;
    align-items: center;
    gap: 16px;
}
.mt-card-title-block { flex: 1; min-width: 0; }
.mt-card-title { font-weight: 600; color: var(--fg); }
.mt-card-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted-2);
}
.mt-card-note {
    margin-top: 10px;
    white-space: pre-wrap;
    font-size: 13px;
    color: var(--fg-soft);
    background: var(--surface-2);
    border-radius: var(--r-md);
    padding: 10px 12px;
}
.mt-card-form {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.mt-card-form select {
    flex: 1;
    min-width: 200px;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    background: var(--surface);
    color: var(--fg);
}
.mt-hint { font-size: 13px; color: var(--muted); margin: 8px 0 12px; }

/* Meeting-controls: переопределяем legacy layout под v3.
   `.toggle` — настоящий switch 34×20 (подпись слева).
   `.track-pill` — accent-soft chip (без checkbox-vibe). */
.meeting-card .meeting-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    flex: 1;
    max-width: 100%;
}
.meeting-card .meeting-controls > form:first-child {
    align-self: flex-end;
}
.meeting-card .toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--fg-soft);
    user-select: none;
}
.meeting-card .toggle span:not(.mt-switch) {
    order: -1;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
}
.meeting-card .toggle input[type="checkbox"]:checked ~ span {
    color: var(--fg);
}
/* Настоящий switch 34×20 через overlay-псевдоэлементы на скрытом checkbox. */
.meeting-card .toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: #D5D7DB;
    position: relative;
    cursor: pointer;
    transition: background .15s;
    margin: 0;
    flex-shrink: 0;
}
.meeting-card .toggle input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: left .15s;
}
.meeting-card .toggle input[type="checkbox"]:checked {
    background: var(--accent);
}
.meeting-card .toggle input[type="checkbox"]:checked::before {
    left: 16px;
}

/* Tracks-multiselect: перерисован под чипы v3. */
.meeting-card .tracks-multiselect {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--row-divider);
    flex-wrap: wrap;
}
.meeting-card .tracks-multiselect-label {
    font-size: 13px;
    color: var(--muted-2);
    width: 118px;
    flex-shrink: 0;
}
.meeting-card .track-pill {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-soft);
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.meeting-card .track-pill:hover { border-color: var(--accent); color: var(--fg); }
.meeting-card .track-pill input[type="checkbox"] {
    display: none;
}
.meeting-card .track-pill:has(input:checked) {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
    font-weight: 500;
}

.meeting-card .meeting-controls .hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--warn-bg);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--yellow);
}

/* === Transcripts v3 «A2 Графит» ========================================
   Эталон: docs/redesign/etalons/new-a2-transcripts.dc.html
   Content-max 900px (страница узкая). */

.tx-subtitle {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--muted);
    max-width: 620px;
}

.tx-list { display: flex; flex-direction: column; gap: 12px; }
.tx-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 20px;
}
.tx-card-body { display: flex; flex-direction: column; gap: 2px; }
.tx-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tx-card-title { font-weight: 600; font-size: 15px; color: var(--fg); }
.tx-badge {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 5px;
    font-weight: 500;
}
.tx-badge.red { color: var(--red); background: var(--red-soft); }
.tx-card-meta {
    font-size: 12px;
    color: var(--muted-2);
}
.tx-card-preview {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--fg-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}
.tx-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.tx-archive {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.tx-archive-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 110px 100px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    color: var(--fg);
    text-decoration: none;
    transition: background .1s;
}
.tx-archive-row + .tx-archive-row { border-top: 1px solid var(--row-divider); }
.tx-archive-row:hover { background: #FAFAFB; text-decoration: none; opacity: 1; }
.tx-archive-title {
    font-weight: 500;
    color: var(--fg);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tx-archive-track { font-size: 12px; color: var(--muted); }
.tx-archive-count { font-size: 12px; color: var(--muted-2); }
.tx-archive-date {
    font-size: 12px;
    color: var(--muted-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body[data-page="transcripts"] .content-inner { max-width: 900px; }

/* === Team v3 «A2 Графит» ===============================================
   Эталон: docs/redesign/etalons/new-a2-team.dc.html
   Таблица команды grid `1fr 168 92 98 88 66 104`. */

.team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.team-invite-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 4px 4px 12px;
}
.team-invite-inline input[type="email"] {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font);
    font-size: 13px;
    width: 200px;
    color: var(--fg);
}
.team-invite-inline select {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font);
    font-size: 13px;
    color: var(--muted);
}
.team-invite-btn {
    display: inline-flex;
    padding: 6px 13px;
    border-radius: 6px;
    border: none;
    background: var(--accent);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font);
    transition: background .12s;
}
.team-invite-btn:hover { background: var(--accent-2); }

.team-alert {
    display: grid;
    gap: 6px;
    background: var(--warn-bg);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 24px;
}
.team-alert-row {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.team-alert-ic { color: var(--yellow); display: inline-flex; }
.team-alert-text { font-size: 13px; color: var(--yellow); }
.team-alert-text strong { font-weight: 600; }
.team-alert-cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--warn-border);
    border-radius: var(--r-md);
    padding: 5px 12px;
}
.team-alert-cta:hover { text-decoration: none; opacity: 1; }

.team-section { margin-bottom: 28px; }
.team-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.team-sec-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
}
.team-sec-head .team-sec-title { margin-bottom: 0; }
.team-sec-sub { font-weight: 400; color: var(--muted-2); }

.team-hint { margin: 0 0 8px; font-size: 13px; color: var(--muted); }

.team-th {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px 92px 98px 88px 66px 104px;
    gap: 12px;
    align-items: center;
    padding: 0 16px 8px;
    font-size: 12px;
    color: var(--muted-2);
}

.team-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.team-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px 92px 98px 88px 66px 104px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    transition: background .1s;
}
.team-row + .team-row { border-top: 1px solid var(--row-divider); }
.team-row:hover { background: #FAFAFB; }

/* «Свободные аккаунты» / «Приглашения» — упрощённая строка. */
.team-row-slim {
    grid-template-columns: minmax(0, 1fr) 200px 200px 104px;
}

.team-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fg);
    font-weight: 600;
    min-width: 0;
    text-decoration: none;
}
.team-name:hover { color: var(--fg); text-decoration: none; opacity: 1; }
.team-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-avatar {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #EEF0F3;
    color: #55575C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.team-email {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-role, .team-manager { font-size: 12px; color: var(--muted); }
.team-marker {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}
.team-status { font-size: 12px; font-weight: 500; }
.team-status.active { color: var(--green); }
.team-status.inactive { color: var(--red); }
.team-actions { display: inline-flex; justify-content: flex-end; }
.team-manage-btn {
    padding: 6px 8px;
    font-size: 12px;
}

/* Edit-row: раскрывающийся блок под строкой. */
.team-edit-row {
    padding: 14px 16px;
    background: var(--surface-2);
    border-top: 1px solid var(--row-divider);
}
.team-edit-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.team-edit-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}
.team-edit-form input[type="text"],
.team-edit-form select {
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    background: var(--surface);
    min-width: 130px;
}
.team-edit-cb {
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
    color: var(--fg-soft);
}
.team-edit-cb input { accent-color: var(--accent); }
.team-edit-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Pending-approvals: карточка на строку. */
.team-pending-list { display: flex; flex-direction: column; gap: 10px; }
.team-pending-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.team-pending-info { flex: 1; min-width: 240px; }
.team-pending-name { font-weight: 600; color: var(--fg); }
.team-pending-meta { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.team-pending-actions { display: flex; gap: 8px; }

/* «Без аккаунта» — grid карточек. */
.team-add-virtual { position: relative; }
.team-add-virtual > summary {
    list-style: none;
    cursor: pointer;
    padding: 6px 13px;
    font-size: 12px;
    font-weight: 500;
}
.team-add-virtual > summary::-webkit-details-marker { display: none; }
.team-add-virtual-form {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px;
    box-shadow: var(--shadow-pop);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.team-add-virtual-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
}
.team-add-virtual-form input {
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    background: var(--surface);
}
.team-virtual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.team-virtual-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    color: var(--fg);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .12s;
    text-decoration: none;
}
.team-virtual-card:hover {
    border-color: var(--border-strong);
    text-decoration: none;
    color: var(--fg);
    opacity: 1;
}
.team-virtual-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--fg);
}
.team-virtual-meta { font-size: 12px; color: var(--muted-2); }
.team-virtual-marker {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}
.team-virtual-card-link {
    color: var(--fg);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.team-virtual-card-link:hover { text-decoration: none; color: var(--fg); opacity: 1; }
.link-form {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--row-divider);
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.link-form select {
    flex: 1;
    min-width: 120px;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 12px;
    color: var(--fg);
    background: var(--surface);
}
.link-form .btn-secondary {
    padding: 6px 12px;
    font-size: 12px;
}

/* === Person v3 «A2 Графит» =============================================
   Эталон: docs/redesign/etalons/new-a2-person.dc.html
   Header-card + grid 3fr/2fr (задачи+цели / профиль+треки). */

.person-back {
    display: inline-block;
    font-size: 13px;
    color: var(--muted-2);
    margin-bottom: 16px;
}
.person-back:hover { color: var(--fg-soft); text-decoration: none; opacity: 1; }

.person-header {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.person-avatar-lg {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--accent);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}
.person-header-info { flex: 1; min-width: 240px; }
.person-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.person-name {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg);
}
.person-tier {
    font-size: 11px;
    color: var(--fg-soft);
    background: var(--surface-3);
    border-radius: 999px;
    padding: 2px 10px;
    font-weight: 500;
    white-space: nowrap;
}
.person-header-meta {
    margin-top: 2px;
    font-size: 13px;
    color: var(--muted-2);
}
.person-marker {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}
.person-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.person-stat { text-align: center; }
.person-stat-num {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    color: var(--fg);
}
.person-stat-num-red { color: var(--red); }
.person-stat-num-green { color: var(--green); }
.person-stat-label { font-size: 12px; color: var(--muted-2); }
.person-cta { padding: 8px 15px; }

.person-cols {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 16px;
    align-items: start;
    margin-top: 4px;
}
.person-col-left, .person-col-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.person-count-inline {
    font-weight: 400;
    color: var(--muted-2);
    font-size: 13px;
    margin-left: 4px;
}
.person-tasks-body { padding: 0 20px 8px; display: flex; flex-direction: column; }
.person-task-row {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) 36px 120px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--row-divider);
}
.person-task-row:first-child { border-top: none; }
.person-task-text { color: var(--fg); min-width: 0; }
.person-task-prio { text-align: center; }
.person-task-when {
    font-size: 12px;
    color: var(--muted-2);
    text-align: right;
    white-space: nowrap;
}
.person-tasks-foot {
    border-top: 1px solid var(--row-divider);
    padding: 10px 20px;
    font-size: 13px;
}
.person-tasks-foot a { text-decoration: underline; color: var(--fg); }

.person-empty { color: var(--muted); padding: 12px 20px; }
.person-empty.small { font-size: 13px; }

/* Профиль-таблица (правая колонка). */
.person-profile-grid {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 8px 12px;
    font-size: 13px;
}
.person-profile-key { color: var(--muted-2); }
.person-profile-val { color: var(--fg); word-break: break-word; }
.person-profile-val.mono {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}

/* Статистика — карточки 5 в ряд (legacy-секция под 3fr/2fr сеткой). */
.person-section-title {
    margin: 24px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
}
.person-stats-cards { margin-top: 20px; }
.person-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.person-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.person-stat-card.warn { border-color: var(--warn-border); }
.person-stat-card.danger { border-color: var(--red-soft); }
.person-stat-card.success { border-color: var(--green-soft); }
.person-stat-card-num {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--fg);
}
.person-stat-card.danger .person-stat-card-num { color: var(--red); }
.person-stat-card.warn .person-stat-card-num { color: var(--yellow); }
.person-stat-card.success .person-stat-card-num { color: var(--green); }
.person-stat-card-label { font-size: 13px; color: var(--muted); }

/* === Settings v3 «A2 Графит» ==========================================
   Эталон: docs/redesign/etalons/new-a2-settings.dc.html
   Grid контент+sticky-nav 180px. */

body[data-page="settings"] .content-inner { max-width: 1000px; padding: 40px 48px 72px; }

.settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 40px;
    align-items: start;
}
.settings-content { min-width: 0; }
.settings-title {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg);
}
.settings-toast { margin-bottom: 16px; }

.settings-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 6px 22px 8px;
    margin-bottom: 16px;
}
.settings-sec-title {
    margin: 0;
    padding: 12px 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fg);
}
.settings-subblock {
    border-top: 1px solid var(--row-divider);
    padding-top: 12px;
    margin-top: 12px;
}

/* Строка настройки: label + control (grid 1fr / 220px). */
.settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
}
.settings-row + .settings-row { border-top: 1px solid var(--row-divider); }
.settings-row-label { color: var(--fg); }
.settings-row-hint {
    display: block;
    font-size: 12px;
    color: var(--muted-2);
    margin-top: 2px;
}
.settings-row-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Segment-контрол в настройках. */
.settings-seg { padding: 2px; }
.settings-seg .tasks-seg-opt {
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: var(--font);
    cursor: pointer;
}
.settings-seg .tasks-seg-opt.active {
    background: var(--surface);
    color: var(--fg);
    font-weight: 600;
    box-shadow: var(--shadow-seg);
}

/* Правая nav (sticky) с якорями секций. */
.settings-nav {
    position: sticky;
    top: 40px;
    border-left: 1px solid var(--border);
    padding: 4px 0 4px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 52px;
}
.settings-nav-link {
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    transition: background .12s, color .12s;
}
.settings-nav-link:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; opacity: 1; }
.settings-nav-link.active { color: var(--fg); font-weight: 600; background: var(--surface-3); }

/* Настройка partials: применяем sett-row внутренним шаблонам _me_* /
   _settings_* без переписи каждого (они используют разные обёртки —
   формы, checkbox, select). Оборачиваем ключевые селекторы в единый вид. */
.settings-section .form-row,
.settings-section .settings-inline-row,
.settings-section > form:not(.settings-nested),
.settings-section > div:not(.settings-subblock):not(.alert-card):not(.settings-row) {
    padding: 12px 0;
    border-top: 1px solid var(--row-divider);
}
.settings-section > *:first-child + form,
.settings-section > *:first-child + div,
.settings-section .settings-subblock > form,
.settings-section .settings-subblock > div {
    border-top: none;
}

/* === Me/Profile v3 «A2 Графит» ========================================
   Эталон: docs/redesign/etalons/new-a2-profile.dc.html
   Content-max 760px. */

body[data-page="me"] .content-inner { max-width: 760px; }

.me-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.me-avatar-lg {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--accent);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}
.me-name {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg);
}
.me-header-meta { font-size: 13px; color: var(--muted-2); }

.me-warn {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    background: var(--warn-bg);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.me-warn-ic { color: var(--yellow); display: inline-flex; }
.me-warn-text { font-size: 13px; color: var(--yellow); }
.me-warn-cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--warn-border);
    border-radius: var(--r-md);
    padding: 5px 12px;
}
.me-warn-cta:hover { text-decoration: none; opacity: 1; }

.me-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px 22px;
    margin-bottom: 16px;
}
.me-sec-title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fg);
}
.me-sec-hint { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.me-sec-hint.muted { color: var(--muted-3); }
.me-toast { margin-bottom: 12px; }

/* Link-card: показать/спрятать привязку. */
.me-link-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 13px;
}
.me-link-suggest-label {
    display: block;
    font-size: 12px;
    color: var(--muted-2);
    margin-bottom: 2px;
}
.me-link-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 12px;
}
.me-link-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
    flex: 1;
    min-width: 240px;
}
.me-link-form select {
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    background: var(--surface);
}

/* Системное — grid 180/1fr. */
.me-system-grid {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 8px 12px;
    font-size: 13px;
}
.me-system-key { color: var(--muted-2); }
.me-system-val { color: var(--fg); }
.me-system-val.mono { font-family: var(--mono); font-size: 12px; }

/* Ссылка «Все настройки» — большая card-link внизу. */
.me-settings-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 22px;
    color: var(--fg);
    transition: border-color .12s;
}
.me-settings-link:hover { border-color: var(--accent); text-decoration: none; opacity: 1; }
.me-settings-link-body strong { font-weight: 600; }
.me-settings-link-body small {
    display: block;
    font-size: 12px;
    color: var(--muted-2);
    margin-top: 2px;
}
.me-settings-link-arrow { color: var(--muted-2); display: inline-flex; }

.mono { font-family: var(--mono); font-size: 12px; }

/* === Switch 34×20 (HANDOFF: настоящий switch, подпись слева) ============ */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.switch-slider {
    position: absolute;
    inset: 0;
    background: #D5D7DB;
    border-radius: 999px;
    transition: background .15s;
    cursor: pointer;
}
.switch-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: left .15s;
}
.switch input:checked + .switch-slider { background: var(--accent); }
.switch input:checked + .switch-slider::before { left: 16px; }
.switch input:focus-visible + .switch-slider { box-shadow: var(--ring); }

/* === Settings partials — единый вид ================================== */
.settings-partial-form { display: block; }
.settings-row-actions {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: none !important;
    gap: 12px;
}
.settings-row-actions .settings-row-hint { flex: 1; }
.settings-row-control-wide {
    justify-content: flex-end;
    gap: 8px;
}
.settings-row-control-wide .settings-input { flex: 1; min-width: 0; }
.settings-row-block {
    display: block !important;
    padding: 14px 0;
    grid-template-columns: none !important;
    border-top: 1px solid var(--row-divider);
}
.settings-row-block:first-child { border-top: none; }
.settings-row-block .settings-row-label { display: block; margin-bottom: 4px; }
.settings-row-password {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px 220px;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
}
.settings-select {
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    background: var(--surface);
    min-width: 110px;
}
.settings-input {
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    background: var(--surface);
    box-sizing: border-box;
}
.settings-input.mono { font-family: var(--mono); }
.settings-input-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
}
.settings-input-label input { max-width: 100%; }
.settings-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fg-soft);
    cursor: pointer;
}
.settings-inline-check input { accent-color: var(--accent); }
.settings-status-ok {
    color: var(--green);
    font-weight: 600;
}
.settings-connect-form { display: block; }
.settings-connect-steps {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 12px 0;
    padding-left: 20px;
}
.settings-connect-steps a { text-decoration: underline; }

/* === Me profile form (partial _me_profile) ============================ */
.me-profile-form { display: block; }
.me-profile-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
}
.me-profile-key { color: var(--muted-2); }
.me-profile-input {
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    background: var(--surface);
    max-width: 280px;
}
.me-profile-input.mono { font-family: var(--mono); }
.me-profile-input:disabled {
    background: var(--surface-2);
    color: var(--muted);
    cursor: not-allowed;
}
.me-profile-marker {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--fg);
    display: block;
    margin-bottom: 4px;
}
.me-profile-tech {
    margin: 12px 0;
    font-size: 12px;
    color: var(--muted);
    border-top: 1px solid var(--row-divider);
    padding-top: 12px;
}
.me-profile-tech > summary {
    cursor: pointer;
    color: var(--muted);
    padding: 6px 0;
    list-style: none;
}
.me-profile-tech > summary::-webkit-details-marker { display: none; }
.me-profile-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

/* === Walk-flow transcript partials v3 «A2 Графит» =====================
   Единые chip'ы, prompt-текст, action-ряды. */

.tx-prompt {
    margin: 0 0 12px;
    color: var(--fg);
    font-size: 14px;
    font-weight: 500;
}
.tx-selected {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--muted);
}
.tx-selected strong { color: var(--fg); }
.tx-empty-hint {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
}

.tx-picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.tx-chip-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}
.tx-chip-btn-active {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid transparent;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font);
}
.tx-chip-btn-active:hover { background: var(--surface-3); }

.tx-actions-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}
.tx-actions-primary { border-bottom: 1px solid var(--row-divider); padding-bottom: 12px; }
.tx-actions-fields, .tx-actions-prio { padding-top: 8px; }
.tx-actions-label {
    font-size: 12px;
    color: var(--muted-2);
    margin-right: 4px;
}
.tx-field-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
}

/* Priority-кнопки в _tx_card: цветной текст, не эмодзи. */
.tx-prio-btn {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    padding: 4px 12px;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.tx-prio-btn.tx-prio-p1 { color: var(--red); }
.tx-prio-btn.tx-prio-p2 { color: var(--yellow); }
.tx-prio-btn.tx-prio-p3 { color: var(--muted); }
.tx-prio-btn:hover { border-color: var(--accent); }
.tx-prio-btn.tx-prio-p1.active { background: var(--red-soft); border-color: transparent; }
.tx-prio-btn.tx-prio-p2.active { background: var(--yellow-soft); border-color: transparent; }
.tx-prio-btn.tx-prio-p3.active { background: var(--surface-3); border-color: transparent; }

/* Add-track/person форма в details/summary. */
.tx-add-track { margin-top: 8px; }
.tx-add-track > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--muted);
    list-style: none;
    border-radius: var(--r-md);
}
.tx-add-track > summary::-webkit-details-marker { display: none; }
.tx-add-track > summary:hover { background: var(--surface-2); color: var(--fg); }
.tx-add-track-form {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.tx-add-track-input {
    flex: 1;
    min-width: 160px;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    background: var(--surface);
}
.tx-add-track-input.mono { font-family: var(--mono); }

/* Task card — уверенности точка, meta-строка. */
.tx-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 22px;
}
.tx-task-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--fg);
}
.tx-conf-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    top: 2px;
}
.tx-task-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--muted);
}
.tx-task-reason {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--muted-3);
}
.tx-speaker { color: var(--yellow); }

.tx-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    background: var(--surface);
    resize: vertical;
    line-height: 1.5;
}
.tx-date-input {
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    background: var(--surface);
}
.tx-skip-form { margin-top: 8px; }
.tx-link-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    text-decoration: underline;
    padding: 4px 0;
    font-family: var(--font);
}
.tx-link-btn:hover { color: var(--accent); }

.tx-error-alert { margin: 0 0 12px; }

/* Preview — заголовок и summary-label. */
.tx-preview-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fg);
}
.tx-summary-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-3);
    margin-bottom: 4px;
}
.tx-pcx-mode-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.tx-mode-toggle-label { font-size: 12px; color: var(--muted-2); }

/* Mode fork: 4 крупные карточки-кнопки. */
.tx-mode-fork { padding: 0; }
.tx-mode-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tx-mode-btn {
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 18px;
    cursor: pointer;
    font-family: var(--font);
    transition: border-color .12s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--fg);
}
.tx-mode-btn:hover { border-color: var(--accent); }
.tx-mode-btn strong { font-size: 14px; color: var(--fg); font-weight: 600; }
.tx-mode-hint { font-size: 12px; color: var(--muted); }
.tx-mode-btn-primary {
    background: var(--accent);
    color: #FFFFFF;
    border-color: transparent;
}
.tx-mode-btn-primary:hover { background: var(--accent-2); border-color: transparent; }
.tx-mode-btn-primary strong { color: #FFFFFF; }
.tx-mode-btn-primary .tx-mode-hint { color: rgba(255,255,255,0.8); }
.tx-mode-saved { margin-bottom: 12px; }

/* Done — status-titles. */
.tx-done-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
}
.tx-done-title-ok { color: var(--green); }
.tx-done-title-warn { color: var(--yellow); }
.tx-done-title-muted { color: var(--muted); }
.tx-done-summary { margin: 0 0 12px; color: var(--fg-soft); font-size: 13px; }
.tx-done-summary strong { color: var(--fg); font-weight: 600; }
.tx-done-tracks { margin: 12px 0; }
.tx-done-tracks ul { margin: 6px 0; padding-left: 20px; color: var(--fg-soft); font-size: 13px; }

/* Tx-list — mini-обзор задач над картой walk. */
.tx-list-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.tx-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.tx-list-count { font-size: 13px; color: var(--muted); }
.tx-list-count strong { color: var(--fg); font-weight: 600; }
.tx-list-seg .tasks-seg-opt { cursor: pointer; }
.tx-list-group {
    margin: 12px 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tx-list-group-count { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.tx-list-items { list-style: none; padding: 0; margin: 0; }
.tx-list-item + .tx-list-item { border-top: 1px solid var(--row-divider); }
.tx-list-item-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 4px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg-soft);
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.tx-list-item-btn:hover { background: var(--surface-2); color: var(--fg); }
.tx-list-item.is-current .tx-list-item-btn {
    background: var(--surface-3);
    color: var(--fg);
    font-weight: 500;
}
.tx-list-item-num { color: var(--muted-3); font-variant-numeric: tabular-nums; }
.tx-list-item-text { flex: 1; }
.tx-list-item-asg {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted-2);
}

/* === Auth pages v3 (login/register/pending/magic-confirm) ============== */
.auth-page {
    max-width: 400px;
    margin: 60px auto 40px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    color: var(--fg);
    text-decoration: none;
}
.auth-logo:hover { text-decoration: none; opacity: 1; }
.auth-card {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 32px 28px;
}
.auth-title {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg);
}
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--fg-soft);
    font-weight: 500;
}
.auth-hint { font-weight: 400; color: var(--muted-2); font-size: 12px; }
.auth-input {
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 14px;
    color: var(--fg);
    background: var(--surface);
    box-sizing: border-box;
}
.auth-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.auth-input:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.auth-submit { padding: 10px 16px; margin-top: 8px; }
.auth-alt {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}
.auth-alt a { color: var(--accent); font-weight: 500; }
.auth-alt-small { font-size: 12px; color: var(--muted-2); }
.auth-text { margin: 12px 0; font-size: 13px; color: var(--fg-soft); line-height: 1.5; text-align: center; }
.auth-text strong { color: var(--fg); font-weight: 600; }
.auth-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* === Install-bot page v3 =============================================== */
.install-bot-page {
    max-width: 640px;
    margin: 40px auto;
    padding: 0 24px;
}
.install-bot-header { margin-bottom: 28px; text-align: center; }
.install-bot-title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg);
}
.install-bot-subtitle { margin: 0; color: var(--muted); font-size: 14px; }
.install-bot-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.install-bot-step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.install-bot-num {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--accent);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.install-bot-body { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg-soft); }
.install-bot-body strong { color: var(--fg); font-size: 14px; font-weight: 600; }
.install-bot-username {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 10px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 4px;
    width: fit-content;
}
.install-bot-qr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    text-align: center;
    margin-bottom: 20px;
}
.install-bot-qr svg { max-width: 200px; height: auto; }
.install-bot-hint { margin: 12px 0 0; font-size: 12px; color: var(--muted-2); }
.install-bot-foot { display: flex; gap: 16px; justify-content: center; font-size: 13px; }
.install-bot-foot a { color: var(--accent); }

/* === Track page v3 ===================================================== */
.track-header { margin-bottom: 24px; }
.track-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.track-header-title .person-name { margin: 0; }
.track-header-meta { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.track-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.track-rename { position: relative; }
.track-rename-btn {
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    list-style: none;
}
.track-rename-btn::-webkit-details-marker { display: none; }
.track-rename-form {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 10px;
    display: flex;
    gap: 8px;
    box-shadow: var(--shadow-pop);
    min-width: 280px;
}
.track-rename-form input { flex: 1; }
.track-hierarchy {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--surface-2);
    border-radius: var(--r-md);
    margin-bottom: 20px;
    font-size: 13px;
}
.track-hier-item { color: var(--fg-soft); }
.track-child-chip {
    display: inline-block;
    padding: 2px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--fg);
    margin-left: 4px;
    text-decoration: none;
}
.track-parent-edit > summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 12px;
    list-style: none;
}
.track-parent-edit > summary::-webkit-details-marker { display: none; }
.track-parent-form { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.track-closed-list { padding: 0 16px; }
.track-closed-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--row-divider);
    font-size: 13px;
}
.track-closed-row:first-child { border-top: none; }
.track-closed-text {
    color: var(--muted);
    text-decoration: line-through;
}
.track-closed-date { color: var(--muted-2); font-size: 12px; text-align: right; }

/* === Archive page v3 =================================================== */
.archive-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.archive-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 120px 120px 100px 120px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    font-size: 13px;
}
.archive-row + .archive-row { border-top: 1px solid var(--row-divider); }
.archive-row:hover { background: #FAFAFB; }
.archive-strike { color: var(--muted); text-decoration: line-through; }
.archive-track, .archive-asg { color: var(--muted); font-size: 12px; }
.archive-date { color: var(--muted-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.archive-act { display: inline-flex; justify-content: flex-end; }
.archive-act .btn-secondary { padding: 5px 12px; font-size: 12px; }

/* === Library page v3 =================================================== */
.library-section {
    margin-bottom: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 20px;
}
.library-section .team-sec-title { margin: 0 0 12px; }
.library-upload-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.library-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
    flex: 1;
    min-width: 180px;
}
.library-field input, .library-field select {
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    background: var(--surface);
}
.library-inline-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fg-soft);
    cursor: pointer;
    padding-bottom: 8px;
}
.library-inline-check input { accent-color: var(--accent); }
.library-search-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.library-search-input {
    flex: 1;
    min-width: 220px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    background: var(--surface);
}

/* === Transcript detail v3 ============================================== */
.tx-detail-header { margin-bottom: 20px; }
.tx-detail-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg);
}
.tx-detail-meta { font-size: 13px; color: var(--muted-2); margin-bottom: 10px; }
.tx-detail-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tx-detail-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.tx-detail-sec-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fg);
}
.tx-detail-strong { font-weight: 500; margin: 6px 0 4px; color: var(--fg); }
.tx-detail-hint { color: var(--muted); font-size: 13px; margin: 0 0 4px; }
.tx-detail-summary { line-height: 1.5; color: var(--fg-soft); font-size: 14px; margin: 0; }
.tx-detail-fulltext {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.5;
    margin: 12px 0 0;
    padding: 12px 14px;
    max-height: 60vh;
    overflow: auto;
    background: var(--surface-2);
    border-radius: var(--r-md);
    color: var(--fg-soft);
}
details.tx-detail-card > summary::-webkit-details-marker { display: none; }
.today-status.muted { color: var(--muted); background: var(--surface-3); }

/* === Transcript walk-session v3 ======================================== */
.tx-walk { max-width: 900px; }
.tx-walk-header { margin-bottom: 20px; }
.tx-walk-context {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--muted);
    background: var(--surface-2);
    padding: 8px 12px;
    border-radius: var(--r-md);
}
.tx-walk-progress { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.tx-walk-progress strong { color: var(--fg); font-weight: 600; }
.tx-walk-footer { margin-top: 20px; }

/* Auto-add form на добавлении расшифровки. */
.tx-add-form { display: flex; flex-direction: column; gap: 14px; }
.tx-add-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--fg-soft);
    font-weight: 500;
}
.tx-file-input {
    padding: 8px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    font-family: var(--font);
    font-size: 13px;
}
.tx-mode-select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tx-mode-select-picker {
    padding-left: 26px;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.tx-ctx-preview-form { display: flex; flex-direction: column; gap: 14px; max-width: 780px; }

/* Track hierarchy fixes для узкого layout. */
.track-child-chip:hover { text-decoration: none; opacity: 1; }