/* yurist-reestr — стили. Вынесено из index.html 07.09.2026 (был инлайн-монолит). */
  :root {
    --navy: #1F3A5F;
    --navy-light: #EAF0F7;
    --bg: #F2F2F7;
    --card: #FFFFFF;
    --border: #E3E3E8;
    --text: #1C1C1E;
    --muted: #6B6B70;
    --red: #FF3B30;
    --orange: #FF9500;
    --blue: #007AFF;
    --gray: #8E8E93;
    --green: #34C759;
    --surface: #F7F7F8;
    --hover: #EEEEF0;
    /* Текст на главной кнопке: в тёмной теме её фон светло-синий, и белая
       надпись на нём читается плохо (2,13:1 при норме 4,5). */
    --btn-fg: #fff;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
  }
  header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 300;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 14px 28px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  header h1 {
    font-size: 20px;
    margin: 0;
    color: var(--navy);
  }
  header .sub {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
  }
  .tabs {
    display: flex;
    gap: 4px;
    background: #E5E5EA;
    border-radius: 10px;
    padding: 3px;
    overflow-x: auto;
    flex-shrink: 1;
    min-width: 0;
  }
  .tab-btn {
    border: none;
    background: transparent;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
  }
  .tab-btn.active {
    background: var(--card);
    color: var(--navy);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  }
  /* Основные разделы (в отличие от справочников/настроек) — видно даже когда открыта другая вкладка */
  .tab-btn.tab-primary:not(.active) {
    color: var(--navy);
    background: var(--navy-light);
  }
  /* Напоминание про Telegram — заметное, но не модальное: работать не мешает */
  .tg-reminder {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 10px 28px 0;
    padding: 10px 16px;
    background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 10px;
    color: #92400E; font-size: 13px;
  }
  .tg-reminder span { flex: 1; min-width: 220px; }
  html[data-theme="dark"] .tg-reminder { background: #2A1A00; border-color: #92400E; color: #FBBF24; }
  main {
    padding: 0 28px 40px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  main > section { height: 100%; display: flex; flex-direction: column; }
  .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  .toolbar input[type="search"] {
    flex: 1;
    min-width: 200px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 13.5px;
    background: var(--card);
  }
  .btn {
    border: none;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
  }
  /* Кнопка-ссылка (<a class="btn">) должна выглядеть как обычная кнопка:
     без подчёркивания и с тем же выравниванием по центру. */
  a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
  /* Цвет текста в полях задаём явно: без него браузер берёт свой чёрный, и
     поля выглядели по-разному в зависимости от того, выбрана тема вручную
     или взята из системы. */
  input, select, textarea { color: var(--text); }
  .btn-primary { background: var(--navy); color: var(--btn-fg); }
  .btn-primary:hover { background: #16304f; }
  .btn-ghost { background: var(--card); color: var(--navy); border: 1px solid var(--border); }
  .btn-danger { background: #fff; color: var(--red); border: 1px solid #F5C6C3; }
  .btn-small { padding: 5px 10px; font-size: 12px; border-radius: 8px; }

  .card-table {
    background: var(--card);
    border-radius: 14px;
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
  th, td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
  /* Ограничение высоты ячейки «Суть вопроса» — 3 строки с тултипом */
  .cell-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    max-height: calc(1.45em * 3);
    word-break: break-word;
    cursor: default;
  }

  th {
    background: var(--navy);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: #EEF2FA; }
  #registryBody tr { cursor: pointer; }
  #registryBody tr:hover td:first-child { border-left: 3px solid var(--navy); }
  .empty-state {
    padding: 40px;
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
  }

  .badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
  }
  .pr-Срочно { background: var(--red); font-size: 12px; letter-spacing: .01em; }
  /* Статусы претензий */
  @keyframes claimNoteHighlight { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 0 3px #F59E0B88;} }
  .claim-close-hint { margin-top:8px; padding:8px 12px; border-radius:8px;
    background:#FFF7ED; border:1px solid #FED7AA; color:#92400E; font-size:12.5px; display:none; }
  html[data-theme="dark"] .claim-close-hint { background:#2A1A00; border-color:#92400E; color:#FBBF24; }
  .claim-note-required { animation: claimNoteHighlight 0.7s 2; }
  .claim-note-preview { display:block; font-size:11px; color:var(--muted); margin-top:3px;
    max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    /* Алерт договоров — кнопки по категориям */
  /* Чипы жизненного статуса договора */
  .cs-chip { padding:5px 14px; border-radius:20px; font-size:12.5px; font-weight:600;
    border:1.5px solid var(--border); background:var(--card); color:var(--text);
    cursor:pointer; user-select:none; transition:all .15s; white-space:nowrap; }
  .cs-chip:hover { border-color:var(--navy); color:var(--navy); }
  .cs-chip.active { background:var(--navy); color:#fff; border-color:var(--navy); }
  .cs-chip.active.cs-active    { background:#16A34A; border-color:#16A34A; }
  .cs-chip.active.cs-расторгнут { background:#DC2626; border-color:#DC2626; }
  .cs-chip.active.cs-none      { background:#6B7280; border-color:#6B7280; }
  .cs-count { font-size:11px; font-weight:700; opacity:.75; margin-left:4px; }
  .cs-chip.active .cs-count { opacity:.9; }
    .exp-cat-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 12px;
    border-radius:20px; font-size:12.5px; font-weight:700; cursor:pointer;
    border:none; background:#DC2626; color:#fff; transition:opacity .15s; }
  .exp-cat-btn:hover { opacity:.85; }
  .exp-cat-btn.warn-cat { background:#D97706; }
  .exp-show-all { display:inline-flex; align-items:center; gap:4px; padding:4px 12px;
    border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer;
    border:1.5px solid #DC2626; background:transparent; color:#DC2626; transition:all .15s; }
  .exp-show-all:hover { background:#DC2626; color:#fff; }
  .cc-chip-exp { font-size:10px; font-weight:800; background:#DC2626; color:#fff;
    border-radius:10px; padding:0px 5px; margin-left:4px; vertical-align:middle; }
  .cc-chip-warn { font-size:10px; font-weight:800; background:#D97706; color:#fff;
    border-radius:10px; padding:0px 5px; margin-left:4px; vertical-align:middle; }
  .alert-exp-bar { background:linear-gradient(135deg,#FFF5F5,#FFF); border:1.5px solid #FCA5A5;
    border-radius:12px; padding:12px 16px; margin-bottom:12px;
    display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .alert-exp-title { font-size:13px; font-weight:700; color:#991B1B; margin-right:4px; }
  .alert-warn-bar { background:linear-gradient(135deg,#FFFBEB,#FFF); border:1.5px solid #FCD34D;
    border-radius:12px; padding:12px 16px; margin-bottom:12px;
    display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
    .claim-st-Открыта   { background: #DC2626 !important; }
  .claim-st-Закрыта   { background: #16A34A !important; }
  .claim-st-В_работе  { background: #D97706 !important; }
  .claim-st-Ожидает_ответа { background: #2563EB !important; }
  .claim-st-Передана_в_суд { background: #7C3AED !important; }
  .pr-Высокий { background: #E67E22; }
  .pr-Обычный { background: var(--blue); }
  .pr-Плановая-работа { background: var(--gray); opacity: .75; }
  tr[data-pr="Высокий"] td { background: #FFF8ED; }
  tr[data-pr="Высокий"]:hover td { background: #FFEFD4 !important; }
  /* Статусы рисков */
  .rs-Активен    { background: #dc3545; }
  .rs-Митигирован{ background: #28a745; }
  .rs-Принят     { background: #6c757d; }
  .rs-Закрыт     { background: #adb5bd; color: #333; }
  .rs-delete-req { background: #fd7e14; }
  /* Фильтр-селекты в тулбаре */
  .filter-select {
    border: 1px solid var(--border); border-radius: 9px;
    padding: 7px 12px; font-size: 13px; background: var(--card);
    color: var(--text); cursor: pointer;
  }
  /* Мини-итоги рисков */
  .risk-stat {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 16px; font-size: 12.5px;
    display: flex; align-items: center; gap: 8px;
  }
  .risk-stat-num { font-size: 20px; font-weight: 700; line-height: 1; }
  .risk-stat-lbl { color: var(--muted); line-height: 1.2; }
  /* «Подготовка к встрече» — вопросы/задачи с последней среды и перенесённые с прошлых встреч */
  .meeting-prep { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .mp-group {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 12px;
  }
  .mp-group-title { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
  .mp-hint { font-weight: 400; color: var(--muted); margin-left: 6px; }
  .mp-item {
    display: flex; align-items: baseline; gap: 8px; padding: 4px 0;
    font-size: 12.5px; cursor: pointer; border-top: 1px solid var(--border);
  }
  .mp-item:first-of-type { border-top: none; }
  .mp-item:hover .mp-subject { text-decoration: underline; }
  .mp-subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mp-assignee { color: var(--muted); flex-shrink: 0; }
  /* строки по приоритету */
  tr[data-pr="Срочно"] td { background: #FFF5F5; }
  tr[data-pr="Срочно"]:hover td { background: #FFE9E9 !important; }
  tr[data-pr="Плановая-работа"] td { color: var(--muted); }
  tr[data-pr="Плановая-работа"]:hover td { background: #FAFAFC !important; }
  .st-Инициировано { background: #7C3AED; }
  .st-В-работе { background: #D97706; }
  .st-На-доработке { background: #EA580C; }
  .st-Выполнено { background: var(--green); }
  .st-Просрочено { background: var(--red); }
  .st-Согласовано { background: #16A34A; }
  .st-Согласовано-с-замечаниями { background: #0891B2; }
  .st-Не-согласовано { background: #DC2626; }
  .status-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    margin-right: 6px; flex-shrink: 0; vertical-align: middle; margin-top: -1px;
  }
  .dot-Инициировано { background: #7C3AED; }
  .dot-В-работе { background: #D97706; }
  .dot-На-доработке { background: #EA580C; }
  .dot-Выполнено { background: var(--green); }
  .dot-Просрочено { background: var(--red); }
  .dot-Согласовано { background: #16A34A; }
  .dot-Согласовано-с-замечаниями { background: #0891B2; }
  .dot-Не-согласовано { background: #DC2626; }
  .st-Отозвано { background: #6B7280; }
  .dot-Отозвано { background: #6B7280; }
  /* Статусы вопросов совещаний */
  .qst-new { background: #7C3AED; }
  .qdot-new { background: #7C3AED; }
  .qst-in_progress { background: #D97706; }
  .qdot-in_progress { background: #D97706; }
  .qst-done { background: var(--green); }
  .qdot-done { background: var(--green); }
  .qst-cancelled { background: #6B7280; }
  .qdot-cancelled { background: #6B7280; }
  /* строки с финальным вердиктом */
  tr[data-st="Согласовано"] td { background: #F0FDF4; }
  tr[data-st="Согласовано"]:hover td { background: #DCF8E5 !important; }
  tr[data-st="Согласовано-с-замечаниями"] td { background: #ECFEFF; }
  tr[data-st="Согласовано-с-замечаниями"]:hover td { background: #D0F5FA !important; }
  tr[data-st="Не-согласовано"] td { background: #FFF1F2; }
  tr[data-st="Не-согласовано"]:hover td { background: #FFE0E2 !important; }
  /* подсказка к статусу */
  .status-hint { font-size: 11.5px; margin-top: 5px; padding: 6px 10px; border-radius: 6px; }
  .status-hint.warn { background: #FFF7ED; color: #92400E; border: 1px solid #FED7AA; }
  .status-hint.ok   { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
  .tab-count {
    display: inline-block; background: #7C3AED; color: #fff;
    font-size: 11px; font-weight: 700; border-radius: 10px;
    padding: 1px 7px; margin-left: 6px; vertical-align: middle;
  }
  .toast-wrap {
    position: fixed; bottom: 22px; right: 22px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px; pointer-events: none;
  }
  .toast {
    background: var(--navy); color: #fff; padding: 13px 18px;
    border-radius: 12px; font-size: 13.5px; max-width: 340px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.22); pointer-events: auto;
    animation: toastIn .28s ease;
  }
  .toast .toast-title { font-weight: 700; margin-bottom: 3px; }
  .toast .toast-body { opacity: .88; font-size: 12.5px; }
  /* Отказ обязан отличаться от обычного сообщения: на этих двух видах висит
     вся видимость серверных ошибок, а раньше «не удалено» выглядело ровно
     как «сохранено» и так же тихо гасло. */
  .toast.toast-error { background: var(--red, #C0392B); }
  .toast.toast-warn { background: #B45309; }
  .toast.toast-error .toast-body, .toast.toast-warn .toast-body { opacity: .95; }
  @keyframes toastIn { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

  .timeline {
    display: flex; gap: 14px; flex-wrap: wrap;
    background: #FAFAFC; border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 14px; font-size: 12px;
  }
  .timeline .step { display: flex; flex-direction: column; gap: 2px; }
  .timeline .step .label { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; }
  .timeline .step .value { font-weight: 600; color: var(--text); }
  .timeline .step .value.pending { color: var(--muted); font-weight: 400; }
  .type-badge { background: var(--navy-light); color: var(--navy); }

  .files-cell { display: flex; flex-direction: column; gap: 4px; }
  /* 09.09.2026: финал — крупно и наверху, остальные вложения (черновики,
     переписка) сворачиваются, чтобы ячейка не превращалась в портянку при
     нескольких файлах на одном обращении. */
  .files-more { margin-top: 2px; }
  .files-more summary { font-size: 11px; color: var(--muted); cursor: pointer; list-style: none; }
  .files-more summary::-webkit-details-marker { display: none; }
  .files-more summary::before { content: '▸ '; }
  .files-more[open] summary::before { content: '▾ '; }
  .files-more-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
  .files-nofinal {
    font-size: 12px; font-weight: 600; color: var(--orange);
    background: rgba(255,149,0,.12); border-radius: 6px; padding: 3px 8px;
    display: inline-block; cursor: help;
  }
  .file-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--navy-light);
    color: var(--navy);
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 11.5px;
    text-decoration: none;
    max-width: 220px;
  }
  .file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .row-actions { display: flex; gap: 6px; }
  /* Чипы категорий и года в договорах */
  .contract-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .cc-chip {
    padding: 5px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
    border: 1.5px solid var(--border); background: var(--card); color: var(--muted);
    cursor: pointer; transition: all 0.15s; white-space: nowrap; user-select: none;
  }
  .cc-chip:hover { border-color: var(--navy); color: var(--navy); }
  .cc-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
  .cc-chip.year-chip { font-size: 12px; padding: 4px 11px; }
  .cc-chip.year-chip.active { background: var(--C, #2563EB); border-color: var(--C, #2563EB); }
  .sticky-controls { flex-shrink:0; background:var(--bg); padding:4px 0 6px; margin-bottom:4px; }
  .status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; flex-shrink:0; }
  .dot-expired,.dot-urgent { background:#EF4444; }
  .dot-warn { background:#F59E0B; }
  .dot-ok { background:#22C55E; }
  .dot-unknown { background:#9CA3AF; }
  th.sortable { cursor: pointer; user-select: none; }
  th.sortable:hover { background: #16304f; }

  /* modal */
  .overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    align-items: center; justify-content: center;
    z-index: 300;
  }
  .overlay.open { display: flex; }
  .modal {
    background: var(--card);
    border-radius: 16px;
    width: 560px;
    max-width: 92vw;
    max-height: 88vh;
    overflow-y: auto;
    padding: 24px 26px;
  }
  .modal h2 { margin: 0 0 16px; font-size: 17px; color: var(--navy); }
  .field { margin-bottom: 13px; }
  .field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 5px;
  }
  .field input, .field select, .field textarea {
    width: 100%;
    padding: 9px 11px;
    border-radius: 9px;
    border: 1px solid var(--border);
    font-size: 13.5px;
    font-family: inherit;
    background: #FAFAFC;
  }
  .field textarea { min-height: 60px; resize: vertical; }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    gap: 10px;
    position: sticky;
    bottom: 0;
    background: var(--card);
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .attach-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
  .attach-item {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--navy-light); border-radius: 8px; padding: 5px 10px; font-size: 12.5px;
  }
  .attach-item a { color: var(--navy); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .attach-item button { border: none; background: none; color: var(--red); cursor: pointer; font-size: 13px; }
  .note {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
  }
  #lockedFieldsNote {
    background: #FFF8ED; border: 1px solid #FDE68A;
    border-radius: 8px; padding: 8px 12px;
    color: #92400E; font-size: 12.5px;
  }
  tr.overdue-row td { background: #FFE9E9 !important; }
  tr.overdue-row td:first-child::before { content: '⚠ '; color: var(--red); }
  .field-label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px; }
  .field-input { width:100%; padding:9px 11px; border-radius:9px; border:1px solid var(--border); font-size:13.5px; font-family:inherit; background:#FAFAFC; }
  .modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

  .deadline-soon { color: var(--orange); font-weight: 700; }
  .deadline-over { color: var(--red); font-weight: 700; }

  .attach-item .attach-actions { display: flex; gap: 6px; align-items: center; }
  .attach-item .btn-mini {
    border: none; border-radius: 6px; padding: 3px 7px; font-size: 11px;
    cursor: pointer; background: #fff; color: var(--navy); border: 1px solid var(--border);
  }
  /* 09.09.2026, QA: opacity:0-до-hover была уместна, пока кнопка была
     необязательной — теперь без неё нельзя закрыть обращение, а сообщение
     об ошибке прямо отправляет пользователя «нажать кнопку в списке выше»,
     которую физически не видно без наведения мыши. Кнопка обязательного
     действия не может быть invisible-until-hover. */
  .attach-setfinal-btn { font-size:12px; padding:3px 10px; border-radius:6px; background:#F0FDF4; color:#16A34A; border:1px solid #86EFAC; cursor:pointer; white-space:nowrap; }
  .attach-setfinal-btn:hover { background:#DCFCE7; border-color:#16A34A; }
  .attach-delete-sep { display:inline-block; width:8px; }
  .attach-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--navy-light); color: var(--navy);
    border: 1px dashed var(--navy);
    border-radius: 9px; padding: 9px 14px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    margin-top: 4px;
  }
  .attach-btn:hover { background: #DCE6F2; }
  .final-badge {
    display: inline-block; background: var(--green); color: #fff;
    font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; margin-right: 6px;
  }
  /* 10.09.2026: только подсказка — не меняет, какой документ станет
     финальным, это по-прежнему решает человек кнопкой «Сделать финальным». */
  .attach-item-suggested { outline: 1.5px dashed var(--orange); outline-offset: -1px; }
  .latest-hint {
    display: inline-block; background: #FFF8ED; color: #92400E;
    font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 20px; white-space: nowrap;
  }

  .comments-list {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 220px; overflow-y: auto;
    background: #FAFAFC; border: 1px solid var(--border); border-radius: 10px;
    padding: 10px; margin-top: 6px;
  }
  .comment-item { font-size: 12.5px; }
  .comment-item .meta { color: var(--muted); font-size: 11px; margin-bottom: 2px; }
  .comment-item.system .meta, .comment-item.system .text { color: var(--muted); font-style: italic; }
  .comment-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 8px; }

  h2.section-title {
    font-size: 15px; color: var(--navy); margin: 26px 0 10px;
  }

  /* База знаний — аккордеон */
  .faq-section { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .faq-section-header { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--surface); cursor: pointer; user-select: none; }
  .faq-section-header:hover { background: var(--hover); }
  .faq-section-title { font-weight: 600; font-size: 14px; flex: 1; }
  .faq-section-count { font-size: 11px; background: var(--navy); color: #fff; border-radius: 10px; padding: 1px 8px; }
  .faq-section-chevron { color: var(--muted); font-size: 11px; transition: transform .2s; }
  .faq-section-chevron.open { transform: rotate(180deg); }
  .faq-section-body { border-top: 1px solid var(--border); }
  .faq-card { padding: 13px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; }
  .faq-card:last-child { border-bottom: none; }
  .faq-card:hover { background: var(--hover); }
  .faq-card-num { color: var(--muted); font-size: 12px; min-width: 30px; padding-top: 2px; }
  .faq-card-body { flex: 1; min-width: 0; }
  .faq-card-q { font-weight: 500; font-size: 14px; margin-bottom: 4px; }
  .faq-card-a { color: var(--muted); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
  .faq-card-files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
  .faq-file-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; background: #EAF0F7; border-radius: 4px; padding: 3px 9px; text-decoration: none; color: var(--text); cursor: pointer; }
  .faq-file-chip:hover { background: #D0DEEE; }
  .faq-card-meta { color: var(--muted); font-size: 11.5px; margin-top: 7px; }
  .faq-card-actions { display: flex; align-items: flex-start; padding-top: 2px; }

  /* прогресс-бар обращения */
  .progress-bar-wrap { display:flex; gap:0; margin-bottom:16px; padding:16px 10px 12px; background:#FAFAFC; border:1px solid var(--border); border-radius:10px; }
  .prog-step { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; }
  .prog-step:not(:last-child)::after { content:''; position:absolute; top:13px; left:50%; width:100%; height:2px; background:var(--border); z-index:0; transition:background .3s; }
  .prog-step.done::after { background:var(--navy); }
  .prog-dot { width:26px; height:26px; border-radius:50%; border:2px solid var(--border); background:#fff; z-index:1; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted); transition:all .2s; }
  .prog-step.done .prog-dot { background:var(--navy); border-color:var(--navy); color:#fff; }
  .prog-step.active .prog-dot {
    width:30px; height:30px; margin-top:-2px;
    background:#FF9500; border-color:#FF9500;
    color:#fff; font-weight:700; font-size:13px;
    box-shadow:0 0 0 4px rgba(255,149,0,.18), 0 2px 8px rgba(255,149,0,.35);
  }
  .prog-label { font-size:10px; color:var(--muted); margin-top:6px; text-align:center; line-height:1.3; }
  .prog-step.done .prog-label { color:var(--navy); font-weight:600; }
  .prog-step.active .prog-label { color:#D97706; font-weight:700; font-size:11px; }

  /* подсказка типа */
  .type-hint { font-size:11.5px; margin-top:5px; padding:6px 10px; border-radius:7px; display:none; }
  .type-hint.info { background:#EFF6FF; color:#1D4ED8; border:1px solid #BFDBFE; }
  .type-hint.warn { background:#FFFBEB; color:#92400E; border:1px solid #FDE68A; }

  /* дашборд */
  .dash-row { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 4px; flex-shrink:0; }
  #initiatorStats { flex-shrink:0; }
  .dash-card {
    flex:1; min-width:130px; background:#fff; border:1px solid var(--border);
    border-radius:12px; padding:12px 16px; display:flex; flex-direction:column; gap:4px;
  }
  .dash-card .d-num { font-size:26px; font-weight:700; color:var(--navy); line-height:1; }
  .dash-card .d-lbl { font-size:11.5px; color:var(--muted); }
  .dash-card.warn .d-num { color:#DC2626; }
  .dash-card.orange .d-num { color:#D97706; }
  .dash-card.green .d-num { color:#16A34A; }

  /* фильтр-чипсы */
  .chip-row { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 10px; align-items:center; flex-shrink:0; }
  .chip {
    border:1px solid var(--border); border-radius:20px; padding:5px 12px;
    font-size:12.5px; font-weight:600; cursor:pointer; background:var(--card); color:var(--muted);
    transition:all .15s;
  }
  .chip:hover { border-color:var(--navy); color:var(--navy); }
  .chip.active { background:var(--navy); color:#fff; border-color:var(--navy); }
  .chip-spacer { flex:1; }

  /* SLA-бейдж в модалке */
  .sla-badge {
    display:inline-block; font-size:11.5px; font-weight:600; padding:3px 9px;
    border-radius:20px; margin-left:10px; vertical-align:middle;
  }
  .sla-ok { background:#F0FDF4; color:#16A34A; border:1px solid #BBF7D0; }
  .sla-warn { background:#FFFBEB; color:#92400E; border:1px solid #FDE68A; }
  .sla-over { background:#FFF1F2; color:#DC2626; border:1px solid #FECDD3; }

  /* мобильный */
  @media (max-width: 600px) {
    header { padding:14px 14px 10px; }
    main { padding:0 12px 30px; }
    .modal { width:100%; max-width:100vw; max-height:95vh; border-radius:14px 14px 0 0; margin-top:auto; }
    .overlay { align-items:flex-end; }
    .row2 { grid-template-columns:1fr; }
    table { font-size:12px; }
    th,td { padding:7px 6px; }
    .dash-card { min-width:100px; }
    .tabs { gap:3px; }
    .tab-btn { padding:6px 10px; font-size:12px; }
    header h1 { font-size:16px; }
  }

  /* лента событий */
  .event-feed { display:flex; flex-direction:column; gap:0; max-height:260px; overflow-y:auto; background:#FAFAFC; border:1px solid var(--border); border-radius:10px; padding:8px 10px; margin-top:6px; }
  .ev-item { display:flex; gap:9px; font-size:12.5px; padding:6px 0; border-bottom:1px solid var(--border); }
  .ev-item:last-child { border-bottom:none; }
  .ev-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
  .ev-item.ev-created .ev-dot { background:var(--green); }
  .ev-item.ev-status .ev-dot { background:var(--navy); }
  .ev-item.ev-comment .ev-dot { background:var(--orange); }
  .ev-item.ev-attach .ev-dot { background:var(--blue); }
  .ev-item.ev-archive .ev-dot { background:var(--green); }
  .ev-item.ev-answer .ev-dot { background:#8B5CF6; }
  .ev-body { flex:1; min-width:0; }
  .ev-meta { color:var(--muted); font-size:11px; }
  .ev-text { margin-top:2px; word-break:break-word; }
  .ev-empty { color:var(--muted); font-size:12px; padding:6px 0; text-align:center; }

  .faq-suggest-item {
    padding:5px 0; border-bottom:1px solid #BAE6FD; cursor:pointer;
    color:#0C4A6E; line-height:1.4;
  }
  .faq-suggest-item:last-child { border-bottom:none; }
  .faq-suggest-item:hover { color:#0369A1; text-decoration:underline; }

  /* ===== ПЛИТКИ ТИПОВ ===== */
  .type-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
  }
  .type-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 8px 10px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    text-align: center;
  }
  .type-tile:hover { border-color: var(--navy); background: var(--navy-light); }
  .type-tile.active { border-color: var(--navy); background: var(--navy-light); box-shadow: 0 0 0 3px rgba(31,58,95,.12); }
  .type-tile.active .tile-name { color: var(--navy); }
  .tile-icon { font-size: 22px; line-height: 1; }
  .tile-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
  .tile-desc { font-size: 11px; color: var(--muted); }
  .type-tile:disabled { opacity:.5; cursor:default; pointer-events:none; }

  /* ===== БЫСТРЫЙ ВЫБОР СРОКА ===== */
  .deadline-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 4px;
  }
  .dl-chip {
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: var(--card);
    padding: 5px 13px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    color: var(--navy);
    transition: background .12s, border-color .12s;
    white-space: nowrap;
  }
  .dl-chip:hover { background: var(--navy-light); border-color: var(--navy); }
  .dl-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
  .dl-chip.urgent { border-color: var(--red); color: var(--red); }
  .dl-chip.urgent.active { background: var(--red); color: #fff; }
  .dl-date { border: 1.5px solid var(--border); border-radius: 9px; padding: 5px 9px; font-size: 12.5px; background: var(--card); color: var(--text); }

  /* ===== DRAG & DROP ZONE ===== */
  .drop-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px 16px;
    border: 2px dashed var(--border);
    border-radius: 12px;
    background: #FAFAFC;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    text-align: center;
    min-height: 72px;
  }
  .drop-zone:hover, .drop-zone.dragover { border-color: var(--navy); background: var(--navy-light); }
  .drop-zone.has-files { border-color: var(--green); background: #F0FFF4; }
  .drop-icon { font-size: 22px; }
  .drop-text { font-size: 13px; color: var(--text); }
  .drop-text u { color: var(--navy); }
  .drop-sub { font-size: 11px; color: var(--muted); }
  .file-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: #EAF0F7; border-radius: 20px; padding: 4px 10px;
    font-size: 12px; font-weight: 500; color: var(--navy);
  }
  .file-pill button { background:none; border:none; cursor:pointer; color:var(--muted); font-size:13px; padding:0; line-height:1; }

  /* ===== СЕКЦИЯ "ДОПОЛНИТЕЛЬНО" ===== */
  .advanced-section { margin-top: 4px; }
  .advanced-section summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--navy);
    font-weight: 600;
    padding: 6px 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 5px;
    user-select: none;
  }
  .advanced-section summary::before { content: '▸'; font-size: 10px; transition: transform .15s; }
  .advanced-section[open] summary::before { transform: rotate(90deg); }
  .advanced-section summary:hover { color: #16304f; }

  /* ===== РАЗДЕЛИТЕЛЬ СЕКЦИЙ РЕДАКТИРОВАНИЯ ===== */
  .edit-section-header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .accord-badge {
    display: inline-block; background: var(--green); color: #fff;
    border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700;
    margin-left: 6px; vertical-align: middle;
  }
  /* версия файла */
  .ver-badge {
    display: inline-block; background: #E5E5EA; color: var(--muted);
    border-radius: 5px; padding: 1px 6px; font-size: 10.5px; font-weight: 700;
    margin-right: 4px; flex-shrink: 0;
  }
  .ver-badge.latest { background: var(--navy); color: #fff; }
  .attach-old-ver { opacity: 0.65; }
  .ver-history { margin-top: 6px; }
  .ver-history summary {
    font-size: 12px; color: var(--muted); cursor: pointer; padding: 4px 0;
    list-style: none; display: flex; align-items: center; gap: 6px;
  }
  .ver-history summary::-webkit-details-marker { display: none; }
  /* юрисдикция */
  .jur-chips { display: flex; gap: 6px; margin-top: 4px; }
  .jur-chip {
    border: 1.5px solid var(--border); border-radius: 20px; background: var(--card);
    padding: 4px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
    color: var(--navy); transition: background .12s, border-color .12s;
  }
  .jur-chip:hover { background: var(--navy-light); border-color: var(--navy); }
  .jur-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
  .kz-tag {
    display: inline-block; background: #FEF3C7; color: #92400E;
    border-radius: 5px; padding: 1px 6px; font-size: 10.5px; font-weight: 700; margin-left: 4px;
  }
  /* === Трекер договоров === */
  .contract-row.expired td { background: #FFF5F5; }
  .contract-row.urgent td { background: #FFFBEB; }
  .preset-comments { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px; }
  .preset-btn { background:#F0F4FF; border:1px solid #C7D7F5; color:#1F3A5F; border-radius:6px; padding:3px 9px; font-size:12px; cursor:pointer; }
  .preset-btn:hover { background:#DCE6F2; }
  .docs-toggle { display:flex; align-items:center; gap:8px; }
  .toggle-switch { position:relative; display:inline-block; width:34px; height:20px; }
  .toggle-switch input { opacity:0; width:0; height:0; }
  .toggle-slider { position:absolute; cursor:pointer; top:0;left:0;right:0;bottom:0; background:#ccc; border-radius:20px; transition:.2s; }
  .toggle-slider:before { position:absolute; content:""; height:14px; width:14px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.2s; }
  input:checked + .toggle-slider { background: var(--navy); }
  input:checked + .toggle-slider:before { transform: translateX(14px); }
  .risk-low { color:#065F46; background:#D1FAE5; border-radius:4px; padding:1px 7px; font-size:11px; font-weight:700; }
  .risk-mid { color:#92400E; background:#FEF3C7; border-radius:4px; padding:1px 7px; font-size:11px; font-weight:700; }
  .risk-high { color:#991B1B; background:#FEE2E2; border-radius:4px; padding:1px 7px; font-size:11px; font-weight:700; }
  /* === Аналитика === */
  .an-period-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; padding:14px 18px; background:var(--card); border:1px solid var(--border); border-radius:12px; }
  .an-period-bar label { font-size:12px; color:var(--muted); font-weight:600; }
  .an-period-bar select { font-size:13px; padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:#FAFAFC; }
  .an-period-bar input[type=date] { font-size:13px; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:#FAFAFC; }
  .an-period-bar .period-sep { color:var(--muted); font-size:12px; }
  /* Просроченные в аналитике. Высота блока НЕ должна зависеть от того, сколько
     обращений просрочено и какой длины у них темы: раньше список выталкивал
     главные цифры за пределы экрана. Отсюда и однострочные ячейки с
     многоточием, и ограничение высоты списка со своей прокруткой. */
  .an-overdue {
    --ov-bg:#FEF2F2; --ov-line:#FCA5A5; --ov-text:#991B1B; --ov-muted:#B45454;
    --ov-hover:#FDE8E8; --ov-row-line:rgba(252,165,165,.45);
    border:1px solid var(--ov-line); background:var(--ov-bg); border-radius:12px; margin-bottom:18px; overflow:hidden;
  }
  .an-overdue-head { display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; background:none; border:0; font:inherit; font-size:13px; color:var(--ov-text); text-align:left; cursor:pointer; }
  .an-overdue-head:hover { background:var(--ov-hover); }
  .an-overdue-head b { font-size:16px; }
  .an-overdue-hint { color:var(--ov-muted); font-size:12px; }
  .an-overdue-chev { margin-left:auto; font-size:11px; opacity:.7; transition:transform .15s; }
  .an-overdue[data-open="0"] .an-overdue-chev { transform:rotate(-90deg); }
  .an-overdue[data-open="0"] .an-overdue-body { display:none; }
  /* Ровно пять строк по 28px: список обрывался бы посреди шестой, и это
     читалось как сломанная вёрстка. */
  .an-overdue-list { max-height:140px; overflow-y:auto; border-top:1px solid var(--ov-line); }
  .an-overdue-list table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:12.5px; }
  .an-overdue-list td { height:28px; padding:0 10px; border-bottom:1px solid var(--ov-row-line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
  .an-overdue-list tr:last-child td { border-bottom:0; }
  .an-overdue-list tr { cursor:pointer; }
  .an-overdue-list tr:hover td { background:var(--ov-hover); }
  .an-ov-num { width:104px; color:var(--ov-text); font-weight:600; }
  .an-ov-dept { width:136px; color:var(--ov-muted); }
  .an-ov-late { width:132px; }
  .an-ov-late span { background:var(--ov-line); color:var(--ov-text); border-radius:5px; padding:2px 7px; font-weight:600; }
  .an-ov-late.hot span { background:#991B1B; color:#fff; }
  .an-overdue-foot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 14px; border-top:1px solid var(--ov-line); font-size:11.5px; color:var(--ov-muted); }
  .an-overdue-foot button { font:inherit; font-size:11.5px; background:none; border:0; padding:0; color:var(--ov-text); text-decoration:underline; cursor:pointer; }
  .an-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:24px; }
  .an-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px 18px 14px; display:flex; flex-direction:column; gap:6px; }
  .an-card-label { font-size:11.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
  .an-card-value { font-size:30px; font-weight:800; color:var(--navy); line-height:1; }
  .an-card-sub { font-size:12px; color:var(--muted); }
  .an-card-delta { font-size:12px; font-weight:700; }
  .an-card-delta.up { color:#047857; }
  .an-card-delta.down { color:#DC2626; }
  .an-card-delta.neutral { color:var(--muted); }
  .an-card.highlight { border-color:var(--navy); }
  .an-card.warn { border-color:#FCA5A5; background:#FEF2F2; }
  .an-row2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
  @media(max-width:700px) { .an-row2 { grid-template-columns:1fr; } }
  .an-block { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; }
  .an-block-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:14px; }
  .an-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; }
  .an-bar-label { width:160px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
  .an-bar-label.short { width:120px; }
  .an-bar-wrap { flex:1; background:#E5E7EB; border-radius:6px; height:14px; overflow:hidden; }
  .an-bar-fill { height:100%; border-radius:6px; background:var(--navy); transition:width .4s; }
  .an-bar-fill.accent { background:#3B82F6; }
  .an-bar-fill.warn { background:#F59E0B; }
  .an-bar-fill.danger { background:#EF4444; }
  .an-bar-count { font-size:12px; font-weight:700; color:var(--muted); min-width:28px; text-align:right; }
  .an-table { width:100%; border-collapse:collapse; font-size:13px; }
  .an-table th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); padding:0 0 8px; }
  .an-table td { padding:6px 0; border-bottom:1px solid var(--border); }
  .an-table tr:last-child td { border-bottom:none; }
  .an-overdue-list { font-size:12.5px; }
  .an-overdue-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); gap:8px; }
  .an-overdue-row:last-child { border-bottom:none; }
  .an-overdue-num { color:var(--navy); font-weight:700; flex-shrink:0; }
  .an-overdue-subj { flex:1; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .an-overdue-date { color:#DC2626; font-weight:700; flex-shrink:0; font-size:12px; }
  .an-loading { text-align:center; padding:40px; color:var(--muted); font-size:14px; }
  /* === FAQ sidebar layout === */
  .faq-layout { display:flex; gap:22px; align-items:flex-start; }
  .faq-sidebar { width:210px; flex-shrink:0; position:sticky; top:0; max-height:calc(100vh - 90px); overflow-y:auto; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:0; }
  .faq-sidebar-search { display:flex; flex-direction:column; gap:8px; padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:12px; }
  .faq-sidebar-search input { margin:0; font-size:13px; padding:8px 10px; }
  .faq-right { flex:1; min-width:0; }
  .faq-nav-item { border:none; border-radius:8px; padding:8px 10px; font-size:13px; font-weight:500; cursor:pointer; background:transparent; color:var(--text); text-align:left; width:100%; display:flex; justify-content:space-between; align-items:center; transition:all .12s; }
  .faq-nav-item:hover { background:var(--navy-light); color:var(--navy); }
  .faq-nav-item.active { background:var(--navy); color:#fff; }
  .faq-nav-count { font-size:11px; font-weight:700; opacity:.65; }
  .days-badge {
    display: inline-block; border-radius: 20px; padding: 2px 10px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
  }
  .days-ok { background: #D1FAE5; color: #065F46; }
  .days-warn { background: #FEF3C7; color: #92400E; }
  .days-urgent { background: #FEE2E2; color: #991B1B; }
  .days-expired { background: #991B1B; color: #fff; }
  .days-none { background: #E5E5EA; color: #55555A; } /* не var(--muted): серый на сером давал 4,22 при норме 4,5 */
  /* === Карточки шаблонов === */
  .tmpl-card {
    background: var(--card); border-radius: 14px; padding: 18px 16px;
    border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px;
    transition: box-shadow .15s;
  }
  .tmpl-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.09); }
  .tmpl-cat {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--navy); background: var(--navy-light); border-radius: 5px; padding: 2px 7px;
    display: inline-block; margin-bottom: 2px;
  }
  .tmpl-name { font-size: 14px; font-weight: 700; color: var(--text); }
  .tmpl-desc { font-size: 12.5px; color: var(--muted); flex: 1; }
  .tmpl-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; flex-wrap: wrap; gap: 6px; }
  .tmpl-updated { font-size: 11px; color: var(--muted); }
  .tmpl-updated.old { color: var(--orange); font-weight: 600; }
  .tmpl-actions { display: flex; gap: 6px; }
  /* === Двухпанельный layout шаблонов === */
  .tmpl-layout { display: flex; gap: 22px; align-items: flex-start; }
  .tmpl-sidebar {
    width: 216px; flex-shrink: 0;
    position: sticky; top: 0;
    max-height: calc(100vh - 90px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 14px; padding: 16px;
    display: flex; flex-direction: column; gap: 0;
  }
  .tmpl-sidebar-search { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
  .tmpl-sidebar-search input { margin: 0; font-size: 13px; padding: 8px 10px; }
  .tmpl-sidebar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 6px; }
  .tmpl-right { flex: 1; min-width: 0; }
  /* === Категории (вертикальный список) === */
  .cat-pills { display: flex; flex-direction: column; gap: 2px; margin-bottom: 0; }
  .cat-pill {
    border: none; border-radius: 8px; padding: 9px 10px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    background: transparent; color: var(--text); text-align: left; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    transition: all .12s; white-space: nowrap;
  }
  .cat-pill.active { background: var(--navy); color: #fff; }
  .cat-pill:hover:not(.active) { background: var(--navy-light); color: var(--navy); }
  .cat-pill-count { font-size: 11px; font-weight: 700; opacity: .65; flex-shrink: 0; margin-left: 6px; }
  .cat-pill.active .cat-pill-count { opacity: .85; }
  .tmpl-section { margin-bottom: 26px; }
  .tmpl-section-header {
    font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase;
    letter-spacing: .07em; padding-bottom: 8px;
    border-bottom: 2px solid var(--navy-light); margin-bottom: 14px;
  }
  .btn-print { background: #F2F2F7; color: var(--navy); border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
  .btn-print:hover { background: var(--navy-light); }

/* ── data-theme override (manual theme switch) ── */
html[data-theme="dark"] {
  --bg: #1C1C1E;
  --btn-fg: #10233A;
  --card: #2C2C2E;
  --border: #3A3A3C;
  --text: #F2F2F7;
  --muted: #9D9DA3;
  --navy: #7AB5FF;
  --navy-light: #1A2C45;
  --surface: #38383A;
  --hover: #48484A;
  --red: #FF6961;
  --green: #30D158;
  --orange: #FF9F0A;
  --blue: #0A84FF;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] header { background: var(--card); }
html[data-theme="dark"] header h1 { color: var(--navy); }
html[data-theme="dark"] .tabs { background: #3A3A3C; }
html[data-theme="dark"] .tab-btn { color: var(--muted); }
html[data-theme="dark"] .tab-btn.active { background: var(--card); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
html[data-theme="dark"] .card, html[data-theme="dark"] .card-table-wrap, html[data-theme="dark"] .dash-card { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .btn-primary { background: var(--navy); }
html[data-theme="dark"] .btn-primary:hover { background: #5A95DF; }
html[data-theme="dark"] .btn-ghost { color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .btn-ghost:hover { background: var(--hover); }
/* :root[data-theme="dark"] вместо html[data-theme="dark"]: у полей есть свои
   базовые правила с двумя селекторами (.toolbar input[type="search"],
   .an-period-bar input[type=date]), и более слабое темовое правило им
   проигрывало — в выбранной вручную тёмной теме поля дат оставались почти
   белыми. Форма с :root уравнивает силу, а положение ниже в файле решает спор. */
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--surface); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] input::placeholder { color: var(--muted); }
html[data-theme="dark"] th { background: var(--surface); color: var(--muted); }
html[data-theme="dark"] th.sortable:hover { background: #1A2C45; }
html[data-theme="dark"] tr:hover td { background: rgba(122,181,255,0.12) !important; color: var(--text) !important; }
html[data-theme="dark"] tr.overdue-row td { background: #3A1A1A !important; }
html[data-theme="dark"] tr[data-pr="Высокий"] td { background: #3A2A10 !important; }
html[data-theme="dark"] tr[data-pr="Высокий"]:hover td { background: #4A3A20 !important; }
html[data-theme="dark"] tr[data-pr="Срочно"] td { background: #3A1A1A !important; }
html[data-theme="dark"] tr[data-pr="Срочно"]:hover td { background: #4A2A2A !important; }
html[data-theme="dark"] tr[data-st="Согласовано"] td { background: #0A2A1A !important; }
html[data-theme="dark"] tr[data-st="Согласовано"]:hover td { background: #12381E !important; }
html[data-theme="dark"] tr[data-st="Согласовано-с-замечаниями"] td { background: #0A2030 !important; }
html[data-theme="dark"] tr[data-st="Согласовано-с-замечаниями"]:hover td { background: #103040 !important; }
html[data-theme="dark"] tr[data-st="Не-согласовано"] td { background: #2A0A0A !important; }
html[data-theme="dark"] tr[data-st="Не-согласовано"]:hover td { background: #3A1010 !important; }
html[data-theme="dark"] .status-hint.warn { background: #2A1A00; color: #FBBF24; border-color: #92400E; }
html[data-theme="dark"] .status-hint.ok   { background: #0A2010; color: #34D399; border-color: #065F46; }
html[data-theme="dark"] .type-hint.info { background: #0A1A30; color: #93C5FD; border-color: #1D4ED8; }
html[data-theme="dark"] .type-hint.warn { background: #2A1A00; color: #FCD34D; border-color: #92400E; }
html[data-theme="dark"] .sla-ok   { background: #0A2010; color: #34D399; border-color: #065F46; }
html[data-theme="dark"] .sla-warn { background: #2A1A00; color: #FCD34D; border-color: #92400E; }
html[data-theme="dark"] .sla-over { background: #2A0A0A; color: #FCA5A5; border-color: #991B1B; }
html[data-theme="dark"] .days-ok     { background: #0A2010; color: #34D399; }
html[data-theme="dark"] .days-warn   { background: #2A1A00; color: #FCD34D; }
html[data-theme="dark"] .days-urgent { background: #2A0A0A; color: #FCA5A5; }
html[data-theme="dark"] .days-expired { background: #991B1B; color: #fff; }
html[data-theme="dark"] .risk-low  { color: #34D399; background: rgba(16,185,129,0.15); }
html[data-theme="dark"] .risk-mid  { color: #FCD34D; background: rgba(245,158,11,0.15); }
html[data-theme="dark"] .risk-high { color: #FCA5A5; background: rgba(239,68,68,0.15); }
html[data-theme="dark"] .contract-row.expired td { background: #2A0A0A; }
html[data-theme="dark"] .contract-row.urgent td  { background: #2A1A00; }
html[data-theme="dark"] .an-card.warn { border-color: #7F1D1D; background: #1A0A0A; }
html[data-theme="dark"] .an-bar-wrap  { background: #3A3A3C; }
html[data-theme="dark"] .preset-btn { background: #1A2C45; border-color: #2A4060; color: #7AB5FF; }
html[data-theme="dark"] .preset-btn:hover { background: #243850; }
html[data-theme="dark"] .attach-btn:hover { background: #1A2C45; }
html[data-theme="dark"] .faq-suggest-item { border-color: #1F3A5F; color: #7AB5FF; }
html[data-theme="dark"] .faq-suggest-item:hover { color: #A8D0FF; }
html[data-theme="dark"] #lockedFieldsNote { background: #2A1A00; border-color: #92400E; color: #FBBF24; }
/* Тему переключают двумя способами, и набор цветов блока задаётся для обоих.
   Системный вариант обязан стоять ПОСЛЕ базового правила: медиа-запрос
   специфичность не повышает, и правило той же силы, стоящее ниже в файле,
   его перебивает. Первая версия этой правки лежала в раннем медиа-блоке — у
   того, кто тему в приложении не выбирал, а в системе держит тёмную, блок
   оставался светлым пятном с белым текстом на белом фоне. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .an-overdue { --ov-bg:#2A0A0A; --ov-line:#991B1B; --ov-text:#FCA5A5; --ov-muted:#C98080; --ov-hover:#3A1010; --ov-row-line:rgba(153,27,27,.5); }
}
html[data-theme="dark"] .an-overdue { --ov-bg:#2A0A0A; --ov-line:#991B1B; --ov-text:#FCA5A5; --ov-muted:#C98080; --ov-hover:#3A1010; --ov-row-line:rgba(153,27,27,.5); }
html[data-theme="light"] .an-overdue { --ov-bg:#FEF2F2; --ov-line:#FCA5A5; --ov-text:#991B1B; --ov-muted:#B45454; --ov-hover:#FDE8E8; --ov-row-line:rgba(252,165,165,.45); }
html[data-theme="dark"] td, html[data-theme="dark"] th { border-color: var(--border); }
html[data-theme="dark"] .modal-actions { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .overlay { background: rgba(0,0,0,0.6); }
html[data-theme="dark"] .advanced-section summary { color: var(--navy); }

html[data-theme="light"] {
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --border: #E3E3E8;
  --text: #1C1C1E;
  --muted: #6B6B70;
  --navy: #1F3A5F;
  --navy-light: #EAF0F7;
  --surface: #F7F7F8;
  --hover: #EEEEF0;
  --red: #FF3B30;
  --green: #34C759;
  --orange: #FF9500;
  --blue: #007AFF;
}
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] header { background: var(--bg); }
html[data-theme="light"] header h1 { color: var(--navy); }
html[data-theme="light"] .tabs { background: #E5E5EA; }
html[data-theme="light"] .tab-btn { color: var(--muted); }
html[data-theme="light"] .tab-btn.active { background: var(--card); color: var(--navy); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
/* Фон полям здесь НЕ задаём: у полей в карточке и в панели периода есть
   свои правила с более светлым фоном, и общее правило их перебивало — при
   выбранной вручную светлой теме поля выглядели иначе, чем при системной. */
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { color: var(--text); border-color: var(--border); }
html[data-theme="light"] th { background: var(--navy); color: #fff; }
html[data-theme="light"] tr:hover td { background: #EEF2FA; color: var(--text); }
html[data-theme="light"] tr[data-pr="Высокий"] td { background: #FFF8ED !important; }
html[data-theme="light"] tr[data-pr="Высокий"]:hover td { background: #FFEFD4 !important; }
html[data-theme="light"] tr[data-pr="Срочно"] td { background: #FFF5F5 !important; }
html[data-theme="light"] tr[data-pr="Срочно"]:hover td { background: #FFE9E9 !important; }
html[data-theme="light"] tr[data-st="Согласовано"] td { background: #F0FDF4 !important; }
html[data-theme="light"] tr[data-st="Согласовано"]:hover td { background: #DCF8E5 !important; }
html[data-theme="light"] tr[data-st="Согласовано-с-замечаниями"] td { background: #ECFEFF !important; }
html[data-theme="light"] tr[data-st="Согласовано-с-замечаниями"]:hover td { background: #D0F5FA !important; }
html[data-theme="light"] tr[data-st="Не-согласовано"] td { background: #FFF1F2 !important; }
html[data-theme="light"] tr[data-st="Не-согласовано"]:hover td { background: #FFE0E2 !important; }
html[data-theme="light"] .status-hint.warn { background: #FFF7ED; color: #92400E; border: 1px solid #FED7AA; }
html[data-theme="light"] .status-hint.ok   { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
html[data-theme="light"] .an-bar-wrap  { background: #E5E5EA; }
html[data-theme="light"] .overlay { background: rgba(0,0,0,0.4); }

.help-tab {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 5px 12px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--card); color: var(--muted);
}
.help-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.help-tab:hover:not(.active) { background: var(--navy-light); color: var(--navy); }
.help-step {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px;
  font-size: 13.5px;
}
.help-num {
  min-width: 26px; height: 26px; border-radius: 50%; background: var(--navy);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.help-muted { font-size: 12px; color: var(--muted); margin-top: 2px; display: block; }
.help-tip {
  background: var(--navy-light); color: var(--navy); border-radius: 8px;
  padding: 8px 12px; font-size: 12.5px; margin: 8px 0;
}
.help-warn {
  background: #FEF3C7; color: #92400E; border-radius: 8px;
  padding: 8px 12px; font-size: 12.5px; margin: 8px 0; font-weight: 600;
}
.help-status-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 13px;
}
.status-chip { border-radius: 6px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.s-init { background: #E8EDFA; color: #1F3A5F; }
.s-work { background: #FEF3C7; color: #92400E; }
.s-rework { background: #FFE4E1; color: #B91C1C; }
.s-ok { background: #D1FAE5; color: #065F46; }
.s-no { background: #FEE2E2; color: #991B1B; }
.s-done { background: #D1FAE5; color: #065F46; }

/* Режим просмотра чужого обращения (наблюдатель). Виден сразу при открытии —
   человек понимает ограничение до того, как начнёт набирать текст. */
.readonly-banner {
  background: rgba(148, 163, 184, .16);
  border-left: 3px solid var(--muted);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 12px;
}

/* Заблокированные кнопки-чипы срока в режиме просмотра: без этого правила
   они выглядят нажимаемыми, хотя disabled, и человек кликает впустую. */
.dl-chip:disabled, .dl-chip[disabled] {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* Значки доступов в списке пользователей. Буквы, а не эмодзи: эмодзи
   по-разному рисуются в браузерах и уже подводили в других файлах, а буква
   с подсказкой читается одинаково везде. */
.acc-chip {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  margin-right: 4px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  cursor: default;
  border: 1px solid transparent;
}
/* Состояние несёт ЗНАК внутри чипа (✓ / — / ⚠), цвет только усиливает.
   Прежний «выключенный» цвет #CBD5E1 на белом давал контраст около 2,5:1 —
   это не «тихо», это неотличимо от «не отрисовалось», и владелец системы
   прочитал выключенное право как сбой системы (01.10.2026). */
.acc-chip.acc-on      { background: #D1FAE5; color: #065F46; border-color: #A7F3D0; }
.acc-chip.acc-off     { background: transparent; color: #64748B; border-color: #CBD5E1; }
.acc-chip.acc-partial { background: #FEF9C3; color: #854D0E; border-color: #FDE68A; }
.acc-chip.acc-warn    { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; font-weight: 700; }
.acc-chip.acc-scope   { background: #EEF2FF; color: #3730A3; border-color: #E0E7FF; font-weight: 600; }
.acc-chip.on    { background: #D1FAE5; color: #065F46; border-color: #A7F3D0; }
.acc-chip.off   { background: transparent; color: #64748B; border-color: #CBD5E1; }
.acc-chip.scope { background: #EEF2FF; color: #3730A3; border-color: #E0E7FF; font-weight: 600; }
.acc-chip.owner { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.access-legend {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
  margin: 6px 0 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .acc-chip.acc-on      { background: rgba(16,185,129,.18); color: #6EE7B7; border-color: rgba(16,185,129,.35); }
  :root:not([data-theme="light"]) .acc-chip.acc-off     { color: #94A3B8; border-color: #475569; }
  :root:not([data-theme="light"]) .acc-chip.acc-partial { background: rgba(234,179,8,.18); color: #FDE047; border-color: rgba(234,179,8,.35); }
  :root:not([data-theme="light"]) .acc-chip.acc-warn    { background: rgba(239,68,68,.22); color: #FCA5A5; border-color: rgba(239,68,68,.45); }
  :root:not([data-theme="light"]) .acc-chip.acc-scope   { background: rgba(99,102,241,.18); color: #A5B4FC; border-color: rgba(99,102,241,.35); }
  :root:not([data-theme="light"]) .acc-chip.on    { background: rgba(16,185,129,.18); color: #6EE7B7; border-color: rgba(16,185,129,.35); }
  :root:not([data-theme="light"]) .acc-chip.off   { color: #94A3B8; border-color: #475569; }
  :root:not([data-theme="light"]) .acc-chip.scope { background: rgba(99,102,241,.18); color: #A5B4FC; border-color: rgba(99,102,241,.35); }
  :root:not([data-theme="light"]) .acc-chip.owner { background: rgba(245,158,11,.18); color: #FCD34D; border-color: rgba(245,158,11,.35); }
}

/* Расторгнутый договор — приглушённая строка: визуально архив, а не работа. */
.contract-row.closed td { opacity: .62; }

/* Пояснение, что такое итоговый документ. Люди не понимали слова «Финал». */
.attach-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(148, 163, 184, .12);
  border-left: 3px solid var(--muted);
  border-radius: 6px;
  padding: 7px 10px;
  margin: 8px 0 4px;
}

/* Договор продлевается автоматически: своя точка, а не зелёная «в порядке» —
   цвет обязан предсказывать, в какой пункт фильтра попадёт строка. */
.dot-renewed { background: #6366F1; }

/* Пояснения под заголовками разделов. Нейтральный приглушённый текст:
   красный и зелёный в этом интерфейсе уже закреплены за «ошибка/просрочка» и
   «готово/финал», использовать их для справки — сбить цветовой код. */
.section-note {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 2px 0 10px;
  max-width: 900px;
}
/* Архивный поиск по умолчанию пуст. Без этого оба списка вкладки делили
   высоту экрана поровну (у .card-table стоит flex:1), и половина экрана
   уходила под пустую карточку — таблица вложений сжималась во внутренний
   скролл. Найдено дизайн-разбором 28.09.2026. */
.card-table-compact {
  flex: 0 0 auto;
  max-height: 260px;
}

/* Нижняя таблица вкладки «Документы» не должна схлопываться. Секция —
   флекс-колонка height:100%, у .card-table стоит min-height:0, поэтому при
   нехватке места флексбокс молча отдавал таблице НОЛЬ высоты: на телефоне
   главный список вкладки исчезал совсем, на 1280×800 оставалась одна строка,
   и прокрутки не появлялось. Замерено в headless-Chrome 28.09.2026. */
#tab-documents > .card-table:not(.card-table-compact) { min-height: 240px; }

/* Свёрнутое пояснение: на телефоне три абзаца подряд съедали половину экрана. */
.section-details { margin-top: 4px; }
.section-details > summary { cursor: pointer; color: var(--navy); }

/* Состояние визы бухгалтера в строке реестра. Виза не блокирует итоговый
   вариант, поэтому «ждёт бухгалтера» у закрытого документа — не ошибка, а
   напоминание: решение Александра 01.10.2026. */
.buh-badge {
  display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 7px;
  border: 1px solid transparent; white-space: nowrap; margin-top: 3px;
}
.buh-badge.ok    { background: #D1FAE5; color: #065F46; border-color: #A7F3D0; }
.buh-badge.notes { background: #FEF9C3; color: #854D0E; border-color: #FDE68A; }
.buh-badge.bad   { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.buh-badge.wait  { background: #FFEDD5; color: #9A3412; border-color: #FED7AA; font-weight: 700; }
.buh-badge.none  { background: transparent; color: #64748B; border-color: #CBD5E1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .buh-badge.ok    { background: rgba(16,185,129,.18); color: #6EE7B7; border-color: rgba(16,185,129,.35); }
  :root:not([data-theme="light"]) .buh-badge.notes { background: rgba(234,179,8,.18); color: #FDE047; border-color: rgba(234,179,8,.35); }
  :root:not([data-theme="light"]) .buh-badge.bad   { background: rgba(239,68,68,.22); color: #FCA5A5; border-color: rgba(239,68,68,.45); }
  :root:not([data-theme="light"]) .buh-badge.wait  { background: rgba(249,115,22,.22); color: #FDBA74; border-color: rgba(249,115,22,.45); }
  :root:not([data-theme="light"]) .buh-badge.none  { color: #94A3B8; border-color: #475569; }
}

/* Чип «Ждут бухгалтера» с ненулевым счётчиком — это список дел, а не фильтр
   «посмотреть»: выделяем, чтобы он читался без открытия. */
.chip.chip-attention { border-color: #FED7AA; background: #FFF7ED; color: #9A3412; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip.chip-attention { border-color: rgba(249,115,22,.45); background: rgba(249,115,22,.18); color: #FDBA74; }
}

/* Счётчик в чипе «Ждут бухгалтера»: число должно читаться как число, а не
   как продолжение подписи. */
.chip .chip-count {
  display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 8px;
  background: rgba(0,0,0,.08); font-weight: 700; font-size: 11px;
}
.chip.chip-attention .chip-count { background: #FDBA74; color: #7C2D12; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip .chip-count { background: rgba(255,255,255,.12); }
  :root:not([data-theme="light"]) .chip.chip-attention .chip-count { background: rgba(249,115,22,.5); color: #FFF7ED; }
}


/* Системная тёмная тема. Блок обязан стоять В КОНЦЕ файла и каждый его
   селектор — начинаться с :root:not([data-theme="light"]). Медиа-запрос
   специфичность не повышает: пока этот блок лежал в начале файла, почти
   все его полсотни правил перебивались обычными правилами ниже, и у
   сотрудника с тёмной темой в системе, не выбиравшего тему в приложении,
   страница темнела, а кнопки, таблицы и карточки оставались светлыми.
   Условие :not(...) нужно, чтобы человек мог вернуть светлую тему вручную. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #1C1C1E;
  --btn-fg: #10233A;
  --card: #2C2C2E;
  --border: #3A3A3C;
  --text: #F2F2F7;
  --muted: #9D9DA3;
  --navy: #7AB5FF;
  --navy-light: #1A2C45;
  --surface: #38383A;
  --hover: #48484A;
  --red: #FF6961;
  --green: #30D158;
  --orange: #FF9F0A;
  --blue: #0A84FF;
  }
  :root:not([data-theme="light"]) body { background: var(--bg); color: var(--text); }
  :root:not([data-theme="light"]) header { background: var(--card); }
  :root:not([data-theme="light"]) header h1 { color: var(--navy); }
  :root:not([data-theme="light"]) .tabs { background: #3A3A3C; }
  :root:not([data-theme="light"]) .tab-btn { color: var(--muted); }
  :root:not([data-theme="light"]) .tab-btn.active { background: var(--card); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
  :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .card-table-wrap, :root:not([data-theme="light"]) .dash-card { background: var(--card); border-color: var(--border); }
  :root:not([data-theme="light"]) .btn-primary { background: var(--navy); }
  :root:not([data-theme="light"]) .btn-primary:hover { background: #5A95DF; }
  :root:not([data-theme="light"]) .btn-ghost { color: var(--text); border-color: var(--border); }
  :root:not([data-theme="light"]) .btn-ghost:hover { background: var(--hover); }
  :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) textarea { background: var(--surface); color: var(--text); border-color: var(--border); }
  :root:not([data-theme="light"]) input::placeholder { color: var(--muted); }
  :root:not([data-theme="light"]) th { background: var(--surface); color: var(--muted); }
  :root:not([data-theme="light"]) th.sortable:hover { background: #1A2C45; }
  :root:not([data-theme="light"]) tr:hover td { background: rgba(122,181,255,0.12) !important; color: var(--text) !important; }
  :root:not([data-theme="light"]) tr.overdue-row td { background: #3A1A1A !important; }
  :root:not([data-theme="light"]) tr[data-pr="Высокий"] td { background: #3A2A10 !important; }
  :root:not([data-theme="light"]) tr[data-pr="Высокий"]:hover td { background: #4A3A20 !important; }
  :root:not([data-theme="light"]) tr[data-pr="Срочно"] td { background: #3A1A1A !important; }
  :root:not([data-theme="light"]) tr[data-pr="Срочно"]:hover td { background: #4A2A2A !important; }
  :root:not([data-theme="light"]) tr[data-st="Согласовано"] td { background: #0A2A1A !important; }
  :root:not([data-theme="light"]) tr[data-st="Согласовано"]:hover td { background: #12381E !important; }
  :root:not([data-theme="light"]) tr[data-st="Согласовано-с-замечаниями"] td { background: #0A2030 !important; }
  :root:not([data-theme="light"]) tr[data-st="Согласовано-с-замечаниями"]:hover td { background: #103040 !important; }
  :root:not([data-theme="light"]) tr[data-st="Не-согласовано"] td { background: #2A0A0A !important; }
  :root:not([data-theme="light"]) tr[data-st="Не-согласовано"]:hover td { background: #3A1010 !important; }
  :root:not([data-theme="light"]) .status-hint.warn { background: #2A1A00; color: #FBBF24; border-color: #92400E; }
  :root:not([data-theme="light"]) .status-hint.ok { background: #0A2010; color: #34D399; border-color: #065F46; }
  :root:not([data-theme="light"]) .type-hint.info { background: #0A1A30; color: #93C5FD; border-color: #1D4ED8; }
  :root:not([data-theme="light"]) .type-hint.warn { background: #2A1A00; color: #FCD34D; border-color: #92400E; }
  :root:not([data-theme="light"]) .sla-ok { background: #0A2010; color: #34D399; border-color: #065F46; }
  :root:not([data-theme="light"]) .sla-warn { background: #2A1A00; color: #FCD34D; border-color: #92400E; }
  :root:not([data-theme="light"]) .sla-over { background: #2A0A0A; color: #FCA5A5; border-color: #991B1B; }
  :root:not([data-theme="light"]) .days-ok { background: #0A2010; color: #34D399; }
  :root:not([data-theme="light"]) .days-warn { background: #2A1A00; color: #FCD34D; }
  :root:not([data-theme="light"]) .days-urgent { background: #2A0A0A; color: #FCA5A5; }
  :root:not([data-theme="light"]) .days-expired { background: #991B1B; color: #fff; }
  :root:not([data-theme="light"]) .risk-low { color: #34D399; background: rgba(16,185,129,0.15); }
  :root:not([data-theme="light"]) .risk-mid { color: #FCD34D; background: rgba(245,158,11,0.15); }
  :root:not([data-theme="light"]) .risk-high { color: #FCA5A5; background: rgba(239,68,68,0.15); }
  :root:not([data-theme="light"]) .contract-row.expired td { background: #2A0A0A; }
  :root:not([data-theme="light"]) .contract-row.urgent td { background: #2A1A00; }
  :root:not([data-theme="light"]) .an-card.warn { border-color: #7F1D1D; background: #1A0A0A; }
  :root:not([data-theme="light"]) .an-bar-wrap { background: #3A3A3C; }
  :root:not([data-theme="light"]) .preset-btn { background: #1A2C45; border-color: #2A4060; color: #7AB5FF; }
  :root:not([data-theme="light"]) .preset-btn:hover { background: #243850; }
  :root:not([data-theme="light"]) .attach-btn:hover { background: #1A2C45; }
  :root:not([data-theme="light"]) .faq-suggest-item { border-color: #1F3A5F; color: #7AB5FF; }
  :root:not([data-theme="light"]) .faq-suggest-item:hover { color: #A8D0FF; }
  :root:not([data-theme="light"]) #lockedFieldsNote { background: #2A1A00; border-color: #92400E; color: #FBBF24; }
  :root:not([data-theme="light"]) td, :root:not([data-theme="light"]) th { border-color: var(--border); }
  :root:not([data-theme="light"]) .modal-actions { background: var(--card); border-color: var(--border); }
  :root:not([data-theme="light"]) .overlay { background: rgba(0,0,0,0.6); }
  :root:not([data-theme="light"]) .advanced-section summary { color: var(--navy); }
  :root:not([data-theme="light"]) .tg-reminder { background: #2A1A00; border-color: #92400E; color: #FBBF24; }
  :root:not([data-theme="light"]) .claim-close-hint { background:#2A1A00; border-color:#92400E; color:#FBBF24; }
}

/* Плашки отметок, доступов и счётчиков были описаны только для системной
   тёмной темы: тот, кто выбрал тёмную тему руками на светлой системе, видел
   их светлыми пятнами. Цвета те же, что в системном блоке — при правке
   менять оба места. */
html[data-theme="dark"] .acc-chip.acc-on { background: rgba(16,185,129,.18); color: #6EE7B7; border-color: rgba(16,185,129,.35); }
html[data-theme="dark"] .acc-chip.on { background: rgba(16,185,129,.18); color: #6EE7B7; border-color: rgba(16,185,129,.35); }
html[data-theme="dark"] .acc-chip.acc-off { color: #94A3B8; border-color: #475569; }
html[data-theme="dark"] .acc-chip.off { color: #94A3B8; border-color: #475569; }
html[data-theme="dark"] .acc-chip.acc-partial { background: rgba(234,179,8,.18); color: #FDE047; border-color: rgba(234,179,8,.35); }
html[data-theme="dark"] .acc-chip.acc-warn { background: rgba(239,68,68,.22); color: #FCA5A5; border-color: rgba(239,68,68,.45); }
html[data-theme="dark"] .acc-chip.acc-scope { background: rgba(99,102,241,.18); color: #A5B4FC; border-color: rgba(99,102,241,.35); }
html[data-theme="dark"] .acc-chip.scope { background: rgba(99,102,241,.18); color: #A5B4FC; border-color: rgba(99,102,241,.35); }
html[data-theme="dark"] .acc-chip.owner { background: rgba(245,158,11,.18); color: #FCD34D; border-color: rgba(245,158,11,.35); }
html[data-theme="dark"] .buh-badge.ok { background: rgba(16,185,129,.18); color: #6EE7B7; border-color: rgba(16,185,129,.35); }
html[data-theme="dark"] .buh-badge.notes { background: rgba(234,179,8,.18); color: #FDE047; border-color: rgba(234,179,8,.35); }
html[data-theme="dark"] .buh-badge.bad { background: rgba(239,68,68,.22); color: #FCA5A5; border-color: rgba(239,68,68,.45); }
html[data-theme="dark"] .buh-badge.wait { background: rgba(249,115,22,.22); color: #FDBA74; border-color: rgba(249,115,22,.45); }
html[data-theme="dark"] .buh-badge.none { color: #94A3B8; border-color: #475569; }
html[data-theme="dark"] .chip.chip-attention { border-color: rgba(249,115,22,.45); background: rgba(249,115,22,.18); color: #FDBA74; }
html[data-theme="dark"] .chip .chip-count { background: rgba(255,255,255,.12); }
html[data-theme="dark"] .chip.chip-attention .chip-count { background: rgba(249,115,22,.5); color: #FFF7ED; }

/* Цветные пометки, плашки и подписи, которые раньше задавались цветом прямо в
   атрибуте style. Inline-стиль сильнее любого правила без !important, поэтому
   тема до таких цветов не доставала: на тёмном фоне они оставались светлыми
   пятнами. Теперь это классы, и у каждого есть тёмная пара — при правке
   менять оба места (светлое здесь, тёмные ниже по файлу). */
.u-note-danger { background:#FFF5F5; color:var(--red); }
.u-note-warn   { background:#FFF8ED; border:1px solid #FDE68A; color:#92400E; }
.u-note-info   { background:#F0F9FF; border:1px solid #BAE6FD; }
.u-text-warn   { color:#92400E; }
.u-text-ok     { color:#16A34A; }
.u-text-danger { color:#DC2626; }
.u-text-error  { color:#991B1B; }
.u-tag-soft    { background:#EAF0F7; color:#1F3A5F; }
.u-tag-indigo  { background:#EEF2FF; color:#3730A3; }
.u-tag-danger  { background:#FEE2E2; color:#991B1B; }
.u-tag-ok      { background:#D1FAE5; color:#065F46; }
.u-tag-amber   { background:#FFF3CD; color:#856404; }
.u-st-violet   { background:#F3F0FF; color:#6D28D9; }
.u-st-violet-dot { background:#7C3AED; }
.u-st-amber    { background:#FFFBEB; color:#92400E; }
.u-st-amber-dot  { background:#D97706; }
.u-st-green    { background:#F0FDF4; color:#166534; }
.u-st-green-dot  { background:#16A34A; }
.u-st-rose     { background:#FFF1F2; color:#9F1239; }
.u-st-rose-dot   { background:#DC2626; }
.u-row-danger  { background:#FFF5F5; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .u-note-danger { background:#2A0A0A; color:#FCA5A5; }
  :root:not([data-theme="light"]) .u-note-warn { background:#2A1A00; border-color:#92400E; color:#FBBF24; }
  :root:not([data-theme="light"]) .u-note-info { background:#0A1A30; border-color:#1D4ED8; }
  :root:not([data-theme="light"]) .u-text-warn { color:#FCD34D; }
  :root:not([data-theme="light"]) .u-text-ok { color:#34D399; }
  :root:not([data-theme="light"]) .u-text-danger { color:#FCA5A5; }
  :root:not([data-theme="light"]) .u-text-error { color:#FCA5A5; }
  :root:not([data-theme="light"]) .u-tag-soft { background:#1A2C45; color:#7AB5FF; }
  :root:not([data-theme="light"]) .u-tag-indigo { background:rgba(99,102,241,.18); color:#A5B4FC; }
  :root:not([data-theme="light"]) .u-tag-danger { background:rgba(239,68,68,.22); color:#FCA5A5; }
  :root:not([data-theme="light"]) .u-tag-ok { background:rgba(16,185,129,.18); color:#6EE7B7; }
  :root:not([data-theme="light"]) .u-tag-amber { background:rgba(245,158,11,.18); color:#FCD34D; }
  :root:not([data-theme="light"]) .u-st-violet { background:rgba(139,92,246,.18); color:#C4B5FD; }
  :root:not([data-theme="light"]) .u-st-violet-dot { background:#A78BFA; }
  :root:not([data-theme="light"]) .u-st-amber { background:rgba(245,158,11,.18); color:#FCD34D; }
  :root:not([data-theme="light"]) .u-st-amber-dot { background:#FBBF24; }
  :root:not([data-theme="light"]) .u-st-green { background:rgba(16,185,129,.18); color:#6EE7B7; }
  :root:not([data-theme="light"]) .u-st-green-dot { background:#34D399; }
  :root:not([data-theme="light"]) .u-st-rose { background:rgba(239,68,68,.22); color:#FCA5A5; }
  :root:not([data-theme="light"]) .u-st-rose-dot { background:#FCA5A5; }
  :root:not([data-theme="light"]) .u-row-danger { background:#2A0A0A; }
}
html[data-theme="dark"] .u-note-danger { background:#2A0A0A; color:#FCA5A5; }
html[data-theme="dark"] .u-note-warn { background:#2A1A00; border-color:#92400E; color:#FBBF24; }
html[data-theme="dark"] .u-note-info { background:#0A1A30; border-color:#1D4ED8; }
html[data-theme="dark"] .u-text-warn { color:#FCD34D; }
html[data-theme="dark"] .u-text-ok { color:#34D399; }
html[data-theme="dark"] .u-text-danger { color:#FCA5A5; }
html[data-theme="dark"] .u-text-error { color:#FCA5A5; }
html[data-theme="dark"] .u-tag-soft { background:#1A2C45; color:#7AB5FF; }
html[data-theme="dark"] .u-tag-indigo { background:rgba(99,102,241,.18); color:#A5B4FC; }
html[data-theme="dark"] .u-tag-danger { background:rgba(239,68,68,.22); color:#FCA5A5; }
html[data-theme="dark"] .u-tag-ok { background:rgba(16,185,129,.18); color:#6EE7B7; }
html[data-theme="dark"] .u-tag-amber { background:rgba(245,158,11,.18); color:#FCD34D; }
html[data-theme="dark"] .u-st-violet { background:rgba(139,92,246,.18); color:#C4B5FD; }
html[data-theme="dark"] .u-st-violet-dot { background:#A78BFA; }
html[data-theme="dark"] .u-st-amber { background:rgba(245,158,11,.18); color:#FCD34D; }
html[data-theme="dark"] .u-st-amber-dot { background:#FBBF24; }
html[data-theme="dark"] .u-st-green { background:rgba(16,185,129,.18); color:#6EE7B7; }
html[data-theme="dark"] .u-st-green-dot { background:#34D399; }
html[data-theme="dark"] .u-st-rose { background:rgba(239,68,68,.22); color:#FCA5A5; }
html[data-theme="dark"] .u-st-rose-dot { background:#FCA5A5; }
html[data-theme="dark"] .u-row-danger { background:#2A0A0A; }

/* Правила со светлым фоном, у которых не было тёмной пары: на тёмной
   странице они оставались светлыми пятнами. Поверхности берут цвет из
   переменных темы, цветные плашки — из той же палитры, что остальные. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .timeline { background: var(--surface); }
  :root:not([data-theme="light"]) .field input, :root:not([data-theme="light"]) .field select, :root:not([data-theme="light"]) .field textarea { background: var(--surface); color: var(--text); }
  :root:not([data-theme="light"]) .field-input { background: var(--surface); color: var(--text); }
  :root:not([data-theme="light"]) .comments-list { background: var(--surface); }
  :root:not([data-theme="light"]) .progress-bar-wrap { background: var(--surface); }
  :root:not([data-theme="light"]) .event-feed { background: var(--surface); }
  :root:not([data-theme="light"]) .drop-zone { background: var(--surface); }
  :root:not([data-theme="light"]) .an-period-bar select { background: var(--surface); color: var(--text); }
  :root:not([data-theme="light"]) .an-period-bar input[type=date] { background: var(--surface); color: var(--text); }
  :root:not([data-theme="light"]) tr[data-pr="Плановая-работа"]:hover td { background: var(--hover) !important; }
  :root:not([data-theme="light"]) .btn-danger { background: var(--card); border-color: #7F1D1D; }
  :root:not([data-theme="light"]) .attach-item .btn-mini { background: var(--card); }
  :root:not([data-theme="light"]) .prog-dot { background: var(--card); }
  :root:not([data-theme="light"]) .btn-print { background: var(--surface); }
  :root:not([data-theme="light"]) .ver-badge { background: var(--border); }
  :root:not([data-theme="light"]) .days-none { background: var(--border); }
  :root:not([data-theme="light"]) .toggle-slider { background: #5A5A5E; }
  :root:not([data-theme="light"]) .attach-setfinal-btn { background: rgba(16,185,129,.18); color: #6EE7B7; border-color: rgba(16,185,129,.45); }
  :root:not([data-theme="light"]) .attach-setfinal-btn:hover { background: rgba(16,185,129,.3); border-color: #34D399; }
  :root:not([data-theme="light"]) .latest-hint { background: #2A1A00; color: #FBBF24; }
  :root:not([data-theme="light"]) .faq-file-chip { background: #1A2C45; }
  :root:not([data-theme="light"]) .faq-file-chip:hover { background: #243850; }
  :root:not([data-theme="light"]) .drop-zone.has-files { background: rgba(16,185,129,.12); }
  :root:not([data-theme="light"]) .file-pill { background: #1A2C45; }
  :root:not([data-theme="light"]) .kz-tag { background: rgba(245,158,11,.18); color: #FCD34D; }
  :root:not([data-theme="light"]) .help-warn { background: rgba(245,158,11,.18); color: #FCD34D; }
  :root:not([data-theme="light"]) .s-init { background: #1A2C45; color: #7AB5FF; }
  :root:not([data-theme="light"]) .s-work { background: rgba(245,158,11,.18); color: #FCD34D; }
  :root:not([data-theme="light"]) .s-rework { background: rgba(239,68,68,.18); color: #FCA5A5; }
  :root:not([data-theme="light"]) .s-ok { background: rgba(16,185,129,.18); color: #6EE7B7; }
  :root:not([data-theme="light"]) .s-done { background: rgba(16,185,129,.18); color: #6EE7B7; }
  :root:not([data-theme="light"]) .s-no { background: rgba(239,68,68,.22); color: #FCA5A5; }
}
html[data-theme="dark"] .timeline { background: var(--surface); }
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .field-input { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .comments-list { background: var(--surface); }
html[data-theme="dark"] .progress-bar-wrap { background: var(--surface); }
html[data-theme="dark"] .event-feed { background: var(--surface); }
html[data-theme="dark"] .drop-zone { background: var(--surface); }
html[data-theme="dark"] .an-period-bar select { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .an-period-bar input[type=date] { background: var(--surface); color: var(--text); }
html[data-theme="dark"] tr[data-pr="Плановая-работа"]:hover td { background: var(--hover) !important; }
html[data-theme="dark"] .btn-danger { background: var(--card); border-color: #7F1D1D; }
html[data-theme="dark"] .attach-item .btn-mini { background: var(--card); }
html[data-theme="dark"] .prog-dot { background: var(--card); }
html[data-theme="dark"] .btn-print { background: var(--surface); }
html[data-theme="dark"] .ver-badge { background: var(--border); }
html[data-theme="dark"] .days-none { background: var(--border); }
html[data-theme="dark"] .toggle-slider { background: #5A5A5E; }
html[data-theme="dark"] .attach-setfinal-btn { background: rgba(16,185,129,.18); color: #6EE7B7; border-color: rgba(16,185,129,.45); }
html[data-theme="dark"] .attach-setfinal-btn:hover { background: rgba(16,185,129,.3); border-color: #34D399; }
html[data-theme="dark"] .latest-hint { background: #2A1A00; color: #FBBF24; }
html[data-theme="dark"] .faq-file-chip { background: #1A2C45; }
html[data-theme="dark"] .faq-file-chip:hover { background: #243850; }
html[data-theme="dark"] .drop-zone.has-files { background: rgba(16,185,129,.12); }
html[data-theme="dark"] .file-pill { background: #1A2C45; }
html[data-theme="dark"] .kz-tag { background: rgba(245,158,11,.18); color: #FCD34D; }
html[data-theme="dark"] .help-warn { background: rgba(245,158,11,.18); color: #FCD34D; }
html[data-theme="dark"] .s-init { background: #1A2C45; color: #7AB5FF; }
html[data-theme="dark"] .s-work { background: rgba(245,158,11,.18); color: #FCD34D; }
html[data-theme="dark"] .s-rework { background: rgba(239,68,68,.18); color: #FCA5A5; }
html[data-theme="dark"] .s-ok { background: rgba(16,185,129,.18); color: #6EE7B7; }
html[data-theme="dark"] .s-done { background: rgba(16,185,129,.18); color: #6EE7B7; }
html[data-theme="dark"] .s-no { background: rgba(239,68,68,.22); color: #FCA5A5; }

/* Тёмный текст, который в тёмной теме оказывался на тёмном фоне, и ховеры,
   заглушённые защитным префиксом. Контрасты посчитаны: было от 1,68 до 4,37
   при норме 4,5. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .alert-exp-title { color:#FCA5A5; }
  :root:not([data-theme="light"]) .an-card-delta.up { color:#34D399; }
  :root:not([data-theme="light"]) .an-card-delta.down { color:#FCA5A5; }
  :root:not([data-theme="light"]) .dash-card.warn .d-num { color:#FCA5A5; }
  :root:not([data-theme="light"]) .dash-card.orange .d-num { color:#FCD34D; }
  :root:not([data-theme="light"]) .dash-card.green .d-num { color:#6EE7B7; }
  :root:not([data-theme="light"]) .days-none { background: var(--border); color: var(--text); }
  :root:not([data-theme="light"]) .advanced-section summary:hover { color:#A8D0FF; }
  :root:not([data-theme="light"]) .exp-show-all { color:#FCA5A5; }
  :root:not([data-theme="light"]) .an-overdue-date { color:#FCA5A5; }
}
html[data-theme="dark"] .alert-exp-title { color:#FCA5A5; }
html[data-theme="dark"] .an-card-delta.up { color:#34D399; }
html[data-theme="dark"] .an-card-delta.down { color:#FCA5A5; }
html[data-theme="dark"] .dash-card.warn .d-num { color:#FCA5A5; }
html[data-theme="dark"] .dash-card.orange .d-num { color:#FCD34D; }
html[data-theme="dark"] .dash-card.green .d-num { color:#6EE7B7; }
html[data-theme="dark"] .days-none { background: var(--border); color: var(--text); }
html[data-theme="dark"] .advanced-section summary:hover { color:#A8D0FF; }
html[data-theme="dark"] .exp-show-all { color:#FCA5A5; }
html[data-theme="dark"] .an-overdue-date { color:#FCA5A5; }