/* Линия — основа интерфейса: база, библиотека компонентов, каркас, вход и временная совместимость старых экранов.
   Только переменные из tokens.css (DESIGN.md §2). Экранные стили — в accounts.css / messages.css / leads.css / admin.css. */

/* ===== База ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: var(--fs-base); line-height: 1.45; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.boot-note { margin: 0; padding: 24px 16px; color: var(--text-2); text-align: center; }   /* web/live-next.html до первой отрисовки */
::selection { background: var(--accent); color: var(--accent-ink); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
h1 { font-size: var(--fs-xl); line-height: 1.2; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: var(--fs-msg); line-height: 1.3; font-weight: 600; }
h3 { font-size: var(--fs-md); line-height: 1.3; font-weight: 600; color: var(--text-2); }
small { font-size: var(--fs-sm); }
strong, b { font-weight: 600; }
.mono, code { font-family: var(--font-data); font-size: var(--fs-sm2); letter-spacing: -.01em; }
.t2 { color: var(--text-2); }
.t3, .sub { color: var(--text-3); }
.sub { font-size: var(--fs-sm2); }
.ok-t { color: var(--ok); }
.warn-t { color: var(--warn); }
.bad-t { color: var(--bad); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -64px; z-index: 400; padding: 8px 12px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.skip:is(:hover, :focus) { color: var(--accent-ink); }   /* иначе a:hover красит текст в --text: 1.5:1 на акценте */
#live-status { position: fixed; top: 0; left: 0; }   /* sr-only в конце body не удлиняет страницу */
.ui-icon { display: block; flex: none; width: 18px; height: 18px; }
/* DESIGN.md §2: при «уменьшить движение» смена состояний мгновенная, циклы не крутятся; @starting-style при 0 с не анимирует */
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
 .btn:active:not(:disabled) { transform: none !important; }
}

/* ===== Кнопки: обычная / основная / призрачная / опасная / иконочная; наведение, фокус, нажатие, неактивная, загрузка ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h); padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--raised); color: var(--text); font-size: var(--fs-base); font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; transition: background-color var(--dur) ease-out, border-color var(--dur) ease-out, color var(--dur) ease-out, transform 150ms ease-out; }
.btn .ui-icon { width: 16px; height: 16px; }
.btn:hover { background: var(--hover); border-color: var(--text-3); color: var(--text); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn:disabled:hover { background: var(--raised); border-color: var(--line-2); }
.btn-primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover, .btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); border-color: transparent; color: var(--accent-ink); }
.btn-primary:disabled:hover, .btn.primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--hover); border-color: transparent; color: var(--text); }
.btn-danger, .btn.danger { color: var(--bad); }
.btn-danger:hover, .btn.danger:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.btn-sm, .btn.small { height: var(--btn-h-sm); padding: 0 12px; gap: 8px; font-size: var(--fs-md); }
.icon-btn { width: var(--btn-h); padding: 0; }
.btn-sm.icon-btn { width: var(--btn-h-sm); height: var(--btn-h-sm); }
.btn-block { width: 100%; }
.btn.is-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.btn.is-warn:hover { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--text-3); border-top-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
.btn-primary[aria-busy="true"]::after, .btn.primary[aria-busy="true"]::after { border-color: var(--accent-ink); border-top-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Поля ===== */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea { width: 100%; min-width: 0; height: var(--btn-h); padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--raised); color: var(--text); font-size: var(--fs-base); transition: border-color var(--dur) ease-out; }
textarea { height: auto; min-height: 88px; padding: 8px 12px; line-height: 1.45; resize: vertical; }
select { cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover, select:hover, textarea:hover { border-color: var(--text-3); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, select:focus, textarea:focus { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px; }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
[aria-invalid="true"] { border-color: var(--bad) !important; outline-color: var(--bad) !important; }   /* ошибка видна и в фокусе */
input[type="file"] { max-width: 100%; color: var(--text-2); font-size: var(--fs-md); }
input[type="file"]::file-selector-button { height: var(--btn-h-sm); margin-right: 12px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--raised); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--hover); }
input[type="radio"] { accent-color: var(--accent); }
.search-field { display: flex; align-items: center; gap: 8px; height: var(--btn-h); padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--raised); color: var(--text-3); }
.search-field:focus-within { border-color: var(--accent); }
.search-field input { height: auto !important; padding: 0 !important; border: 0 !important; outline: none !important; background: transparent !important; }
/* Поле поиска uiSearch (app.js) — одно на все экраны: системный крестик скрыт (цвет браузера, есть не везде),
   своя кнопка «Очистить поиск» в постоянном слоте */
.search-field .ui-icon { width: 16px; height: 16px; }
.search-in { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; height: 100%; cursor: text; }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-slot { display: contents; }
.search-clear { flex: none; margin-right: -8px; }

/* Чекбокс */
/* Граница — --text-3, не --line-2: пустой чекбокс узнаётся только по ней, WCAG 1.4.11 требует ≥ 3:1 (--line-2 даёт 1.5:1) */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--text-3); border-radius: 4px; background: transparent; cursor: pointer; transition: background-color var(--dur) ease-out, border-color var(--dur) ease-out; }
input[type="checkbox"]::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--accent-ink); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); opacity: 0; }
input[type="checkbox"]:hover { border-color: var(--text-2); }
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after { opacity: 1; }
input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }

/* Формы: подпись над полем */
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.form-stack label, label.field { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-md); font-weight: 500; color: var(--text-2); }
.form-stack label:has(> input[type="checkbox"]), label.option-check { flex-direction: row; align-items: flex-start; gap: 8px; color: var(--text); font-weight: 400; cursor: pointer; }
label:has(> input[type="checkbox"]) > input[type="checkbox"] { margin-top: 2px; }   /* оптика: чекбокс по первой строке подписи */
.field-hint, .form-stack small, label.field small { font-size: var(--fs-sm); font-weight: 400; color: var(--text-3); }
.error-text, .modal-body .error-text { color: var(--bad); }   /* .modal-body p иначе красит ошибку в --text-2 */
.error-text:empty, #modal-progress:empty { display: none; }
#modal-progress { color: var(--text-2); font-size: var(--fs-md); }

/* ===== Чипы-фильтры со счётчиком (выбранный — инверсия) и вкладки ===== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-2); font-size: var(--fs-md); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--dur) ease-out, border-color var(--dur) ease-out, color var(--dur) ease-out; }
.chip:hover { border-color: var(--line-2); color: var(--text); }
.chip .n { color: var(--text-3); }
.chip.on, .chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip.on .n, .chip[aria-pressed="true"] .n, .chip[aria-selected="true"] .n { color: color-mix(in srgb, var(--bg) 72%, var(--text)); }
.tabs { display: flex; gap: 2px; overflow-x: auto; }   /* оптика: волосяной зазор между подсветками */
.tab { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: var(--fs-md); font-weight: 500; white-space: nowrap; cursor: pointer; }
.tab:hover { background: var(--hover); color: var(--text); }
.tab.on, .tab[aria-selected="true"] { background: var(--accent-soft); color: var(--text); }

/* ===== Статус: точка + подпись (ok / info / warn / bad / off) ===== */
.st { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; color: var(--text); }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.st-ok .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.st-info .dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.st-warn { color: var(--warn); }
.st-warn .dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.st-bad { color: var(--bad); }
.st-bad .dot { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.st-off { color: var(--text-2); }
.st-off .dot { background: transparent; border: 1.5px solid var(--text-3); }
.st-sm { gap: 8px; font-size: var(--fs-md); }
.st-sm .dot { width: 7px; height: 7px; }
@keyframes st-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 100% { box-shadow: 0 0 0 6px transparent; } }
.st-run .dot { animation: st-pulse 1.6s ease-out 3; }   /* «в работе»: не больше трёх циклов */

/* ===== Клавиши, счётчики, бейджи ===== */
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--panel); color: var(--text-2); font: 500 var(--fs-xs)/1 var(--font-data); }
.kbd-row { display: inline-flex; align-items: center; gap: 4px; }
.count, .unread-count { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1; }
.count-warn { background: var(--warn); color: var(--bg); }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--raised); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.badge.ok, .badge.online { border-color: transparent; background: var(--ok-soft); color: var(--ok); }
.badge.info, .badge.ready { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
.badge.warn, .badge.limit { border-color: transparent; background: var(--warn-soft); color: var(--warn); }
.badge.bad, .badge.error { border-color: transparent; background: var(--bad-soft); color: var(--bad); }

/* ===== Панель и таблица (липкая шапка, группы строк) ===== */
.panel { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.table-wrap { max-width: 100%; overflow: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th { position: sticky; top: 0; z-index: 1; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--text-3); font-size: var(--fs-sm); font-weight: 500; text-align: left; white-space: nowrap; }
td { height: var(--row-h); padding: 8px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color 150ms ease-out; }
tbody tr:hover { background: var(--hover); }
tr.is-selected, tr[aria-selected="true"] { background: var(--accent-soft); }
tr.group-row td { height: auto; padding: 16px 16px 8px; background: var(--panel); font-size: var(--fs-md); font-weight: 600; }
tr.group-row .n { margin-left: 8px; color: var(--text-3); }

/* ===== Боковая карточка (вместо модалки для просмотра); на телефоне — на весь экран ===== */
.sheet { position: fixed; top: var(--ws-h, 0px); right: 0; bottom: 0; z-index: 60; display: flex; flex-direction: column; width: min(400px, 100vw); background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow); transition: transform 220ms var(--ease), opacity 220ms var(--ease); }
@starting-style { .sheet { transform: translateX(24px); opacity: 0; } }
.sheet-scrim { position: fixed; inset: 0; z-index: 59; padding: 0; border: 0; background: color-mix(in srgb, var(--bg) 60%, transparent); cursor: default; }
.sheet-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); }
.sheet-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 20px; padding: 20px; }
.sheet-foot { display: flex; flex: none; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }

/* ===== Поповер ===== */
.popover { margin: 0; padding: 12px; min-width: 240px; max-width: min(360px, calc(100vw - 24px)); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--raised); color: var(--text); box-shadow: var(--shadow); font-size: var(--fs-md); transform-origin: top left; }
.popover:popover-open { transition: opacity 150ms ease-out, transform 150ms var(--ease); }
@starting-style { .popover:popover-open { opacity: 0; transform: translateY(-4px) scale(.98); } }
.popover-title { margin-bottom: 4px; color: var(--text-3); font-size: var(--fs-sm); font-weight: 500; }

/* ===== Тост ===== */
#toast { position: fixed; inset: auto 16px 16px auto; z-index: 300; display: none; max-width: min(420px, calc(100vw - 32px)); margin: 0; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--raised); color: var(--text); box-shadow: var(--shadow); font-size: var(--fs-md); line-height: 1.45; }
#toast.show { display: block; transition: opacity 180ms ease-out, transform 180ms var(--ease); }
#toast.show:has(.toast-action) { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }   /* действие тоста (UX-13: «Вернуть в очередь») — своей строкой под текстом */
@starting-style { #toast.show { opacity: 0; transform: translateY(8px); } }

/* ===== Плашки-пояснения ===== */
.notice { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-sm); background: var(--raised); color: var(--text); font-size: var(--fs-md); line-height: 1.5; }
.notice > .ui-icon { color: var(--text-2); }
.notice-body { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; }
.notice-ok { background: var(--ok-soft); }
.notice-ok > .ui-icon { color: var(--ok); }
.notice-info { background: var(--accent-soft); }
.notice-info > .ui-icon { color: var(--accent-text); }
.notice-warn { background: var(--warn-soft); }
.notice-warn > .ui-icon { color: var(--warn); }
.notice-bad, .notice.error { background: var(--bad-soft); }
.notice-bad > .ui-icon { color: var(--bad); }

/* ===== Плашка пространства (5-design §5.2): между шапкой и содержимым, тон warn-soft — только заливкой, без полосы слева ===== */
.ws-banner { display: flex; flex: none; align-items: center; gap: 12px; min-height: 40px; padding: 0 16px 0 28px; background: var(--warn-soft); border-bottom: 1px solid var(--line); font-size: var(--fs-md); }
.ws-banner > .ui-icon { flex: none; color: var(--warn); }
.ws-banner-text { min-width: 0; margin: 0; }
.ws-banner-sub { color: var(--text-2); }
.ws-banner .btn { flex: none; margin-left: auto; }
@media (max-width: 1279px) { .ws-banner { padding-left: 20px; } }
@media (max-width: 767px) {
  .ws-banner { flex-wrap: wrap; min-height: 48px; padding: 8px 16px; }
  .ws-banner-text { flex: 1 1 0; }
  .ws-banner .btn { width: 100%; height: 40px; margin-left: 0; justify-content: center; }
}

/* ===== Пустое состояние и загрузка ===== */
.empty, .ui-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 20px; color: var(--text-2); text-align: center; }
.empty-icon, .ui-empty-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; background: var(--raised); color: var(--text-3); }
.empty strong, .ui-empty strong { color: var(--text); font-size: var(--fs-msg); font-weight: 600; }
.empty p, .ui-empty p { max-width: 46ch; font-size: var(--fs-md); }
.ui-empty .btn { margin-top: 8px; }
.skeleton { display: block; height: 12px; border-radius: 4px; background: var(--hover); animation: skeleton 1.6s ease-in-out infinite; }
@keyframes skeleton { 50% { opacity: .5; } }

/* ===== Модалка: только подтверждения и формы ===== */
#modal, #night-modal { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: min(86dvh, 880px); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); color: var(--text); box-shadow: var(--shadow); overflow: hidden; }
#modal[open], #night-modal[open] { display: flex; flex-direction: column; transition: opacity 200ms ease-out, transform 200ms var(--ease); }
@starting-style { #modal[open], #night-modal[open] { opacity: 0; transform: scale(.98); } }
#modal.catalog-dialog { width: min(980px, calc(100vw - 32px)); }
#modal::backdrop, #night-modal::backdrop, dialog.media-viewer::backdrop { background: color-mix(in srgb, var(--bg) 72%, transparent); }
#modal > form, #night-modal > form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.modal-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: var(--fs-msg); }
.modal-body { flex: 1; min-height: 0; overflow: auto; padding: 20px; }
.modal-body p { color: var(--text-2); }
.modal-footer { display: flex; flex: none; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--line); }

/* ===== Палитра команд (DESIGN.md §4, §5.4): плавающая панель, радиус 12. Открывается без анимации — её зовут десятки раз
   за смену. <dialog> во весь экран прозрачный: клик мимо панели попадает в него и закрывает палитру. ===== */
#palette { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 12vh 16px 16px; border: 0; background: transparent; color: var(--text); overflow: hidden; }
#palette[open] { display: flex; align-items: flex-start; justify-content: center; }
#palette::backdrop { background: color-mix(in srgb, var(--bg) 72%, transparent); }
.palette { display: flex; flex-direction: column; width: min(600px, 100%); max-height: min(72vh, 640px); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--shadow); overflow: hidden; }
.palette-in { display: flex; flex: none; align-items: center; gap: 12px; height: 56px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); color: var(--text-3); }
/* По id: перебивает общие стили полей (рамка, фон, контур фокуса) — поле встроено в шапку панели, фокус виден по каретке. */
#palette-input { flex: 1; width: auto; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; color: var(--text); font-size: var(--fs-msg); caret-color: var(--accent); }
.palette-close { display: none; }
.palette-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; scroll-padding: 8px; }
.palette-grp + .palette-grp { margin-top: 4px; }
.palette-group { padding: 8px 8px 4px; color: var(--text-3); font-size: var(--fs-sm); font-weight: 500; }
.palette-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 8px; border-radius: var(--r-sm); color: var(--text); cursor: pointer; }
.palette-item[aria-selected="true"] { background: var(--accent-soft); }
.palette-ico { display: inline-flex; flex: none; color: var(--text-3); }
.palette-ico .ui-icon { width: 16px; height: 16px; }
.palette-item[aria-selected="true"] .palette-ico { color: var(--accent-text); }
.palette-text { display: flex; flex: 1; align-items: baseline; gap: 12px; min-width: 0; }
.palette-label { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; color: var(--text-3); font-size: var(--fs-sm2); white-space: nowrap; }
.palette-meta .st { flex: none; }
.palette-from { overflow: hidden; text-overflow: ellipsis; }
.palette-item mark { background: none; color: var(--accent-text); font-weight: 600; }
.palette-item .kbd-row { flex: none; }
.palette-empty { padding: 24px 16px; color: var(--text-2); font-size: var(--fs-md); text-align: center; text-wrap: pretty; }
.palette-note { padding: 8px 12px; color: var(--text-3); font-size: var(--fs-sm); text-wrap: pretty; }
.palette-foot { display: flex; flex: none; align-items: center; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-sm); }
.palette-foot .kbd-row:not(:first-child) { margin-left: 8px; }
@media (max-width: 767px) {
 #palette { padding: 8px; }
 .palette { max-height: calc(100dvh - 16px); }
 .palette-in { gap: 8px; padding: 0 4px 0 16px; }
 .palette-esc, .palette-foot { display: none; }
 .palette-close { display: inline-flex; width: 40px; height: 40px; }
 .palette-item { min-height: 48px; }
 .palette-text { flex-direction: column; align-items: stretch; gap: 0; }
 .palette-item .kbd-row { display: none; }   /* на телефоне клавиатуры нет — подсказки клавиш не нужны */
}

/* ===== Каркас: сайдбар 232 → рейка 68 (≤1279) → нижний таб-бар (≤767); шапка 56 ===== */
.app-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }
.sidebar { display: flex; flex-direction: column; gap: 24px; min-height: 0; overflow-y: auto; padding: 16px 12px; background: var(--rail); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px; }
.brand-name, .top-brand span, .auth-brand span { font-size: var(--fs-msg); font-weight: 700; letter-spacing: -.02em; }
.logo { display: block; flex: none; }
.logo-plate { fill: var(--accent); }
.logo-lines { fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; }
.logo-node { fill: var(--accent-ink); }
.nav { display: flex; flex-direction: column; gap: 2px; }   /* оптика: волосяной зазор между подсветками */
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-weight: 500; text-align: left; transition: background-color var(--dur) ease-out, color var(--dur) ease-out; }
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--text); }
.nav-item.active .nav-icon { color: var(--accent-text); }
.nav-icon { display: inline-flex; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-short { display: none; }
.nav-item .unread-count, .nav-item .count { margin-left: auto; }
@media (min-width: 768px) { .nav-item.is-sub { background: var(--accent-soft); color: var(--text); } .nav-item.is-sub .nav-icon { color: var(--accent-text); } }   /* «Метрики» — подстраница «Системы» */
.side-admin { display: flex; flex-direction: column; gap: 8px; }
.side-label { padding: 0 12px; color: var(--text-3); font-size: var(--fs-sm); font-weight: 500; }
.side-user { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 12px 0 0 4px; border-top: 1px solid var(--line); }
.avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--av5); color: var(--text); font-size: var(--fs-sm); font-weight: 600; }
.side-user-txt { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.side-user-txt strong, .side-user-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-txt strong { font-size: var(--fs-md); font-weight: 500; }
.side-user-txt small { color: var(--text-3); font-size: var(--fs-xs); }

.shell { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { display: flex; flex: none; align-items: center; gap: 16px; height: 56px; padding: 0 16px 0 28px; background: var(--panel); border-bottom: 1px solid var(--line); }
.top-brand { display: none; align-items: center; gap: 8px; }
.sys-wrap { flex: none; }
.sys-sum { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font-size: var(--fs-md); font-weight: 500; white-space: nowrap; transition: background-color var(--dur) ease-out, border-color var(--dur) ease-out; }
.sys-sum:hover { background: var(--hover); }
.sys-sum > .ui-icon { width: 14px; height: 14px; color: var(--text-3); }
.sys-sum.is-warn { border-color: transparent; background: var(--warn-soft); color: var(--warn); }
.sys-sum.is-bad { border-color: transparent; background: var(--bad-soft); color: var(--bad); }
.sys-sum.is-warn > .ui-icon, .sys-sum.is-bad > .ui-icon { color: currentColor; }
.l-short { display: none; }
.sys-pop { inset: 52px auto auto 260px; width: 320px; }
.sys-pop:popover-open { display: flex; flex-direction: column; gap: 12px; }
.sys-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; }
.sys-val { color: var(--text-2); text-align: right; overflow-wrap: anywhere; }
.sys-row .btn { grid-column: 1 / -1; justify-self: start; }
.sys-win-slot { display: contents; }   /* слот есть всегда: появление/исчезновение окна 12 ч не пересоздаёт соседние кнопки (фокус) */
.sys-win { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: var(--fs-md); white-space: nowrap; }
.sys-win .ui-icon { width: 14px; height: 14px; }
.sys-win b { color: var(--text); font-weight: 500; }
.cmd { display: inline-flex; align-items: center; gap: 8px; height: var(--btn-h); min-width: 260px; margin-left: auto; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--raised); color: var(--text-3); font-size: var(--fs-md); transition: border-color var(--dur) ease-out, color var(--dur) ease-out; }
.cmd:hover { border-color: var(--line-2); color: var(--text-2); }
.cmd .ui-icon { width: 16px; height: 16px; }
.cmd .kbd-row { margin-left: auto; }
.top-actions { display: flex; align-items: center; gap: 8px; }

/* --page-pt — верхний отступ области прокрутки: липкие шапки таблиц (leads.css, admin.css) прилегают к её краю */
.page { --page-pt: 24px; display: flex; flex: 1; flex-direction: column; gap: 16px; min-height: 0; overflow: auto; padding: var(--page-pt) 28px 28px; }
.page:focus { outline: none; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.page-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-title p { color: var(--text-2); }
.page-title p.warn-t { color: var(--warn); font-weight: 500; }   /* «Менеджеры»: Обработчик не отвечает — данные на … */
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (min-width: 768px) { .phone-only { display: none !important; } }

@media (max-width: 1279px) {
 .app-shell { grid-template-columns: 68px minmax(0, 1fr); }
 .sidebar { align-items: center; padding: 16px 12px; }
 .brand { padding: 4px 0; }
 .brand-name, .nav-label, .side-label, .side-user-txt { display: none; }
 .nav-item { justify-content: center; width: 44px; height: 44px; padding: 0; }
 .nav-item .unread-count, .nav-item .count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: var(--fs-xs); }
 .side-admin { align-items: center; padding-top: 16px; border-top: 1px solid var(--line); }
 .side-user { flex-direction: column; align-self: stretch; gap: 8px; padding: 12px 0 0; }
 .topbar { padding-left: 20px; }
 .sys-pop { left: 88px; }
 .sys-win { display: none; }
 .cmd { min-width: 200px; }
 .page { --page-pt: 20px; padding: var(--page-pt) 20px 24px; }
}
@media (max-width: 1023px) {
 .cmd { justify-content: center; width: var(--btn-h-sm); height: var(--btn-h-sm); min-width: 0; padding: 0; }
 .cmd .lbl, .collapse-md .lbl { display: none; }
 .collapse-md { width: var(--btn-h-sm); padding: 0; }
 /* Инструменты шапки экрана (.btn, 36): DESIGN.md §3 — второстепенные кнопки становятся иконками, на всех экранах одинаково */
 .page-tool { width: var(--btn-h); padding: 0; }
 .page-tool .lbl { display: none; }
}
@media (max-width: 767px) {
 .app-shell { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
 .sidebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; flex-direction: row; align-items: stretch; gap: 0; height: calc(64px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom); overflow: visible; border-right: 0; border-top: 1px solid var(--line); }
 .sidebar .brand, .side-admin, .side-user { display: none; }
 .sidebar > .nav { flex: 1; flex-direction: row; gap: 0; }
 .nav-item { flex: 1; flex-direction: column; justify-content: center; gap: 4px; width: auto; height: 64px; border-radius: 0; background: transparent; font-size: var(--fs-xs); }
 .nav-item:hover, .nav-item.active { background: transparent; }
 .nav-item.active, .nav-item.is-parent { color: var(--accent-text); }   /* is-parent: «Менеджеры» и «Сетка» — подстраницы «Настроек» */
 .nav-short { display: block; }
 .page-back { align-self: flex-start; gap: 4px; height: 40px; margin-left: -12px; padding: 0 12px 0 8px; color: var(--text-2); }   /* ссылка «Настройки» над заголовком подстраницы */
 .nav-item .unread-count, .nav-item .count { top: 6px; right: calc(50% - 26px); }
 /* корень: «Инфраструктура» встаёт в тот же ряд таб-бара (Прокси, Настройки), «Сетка» и «Система» скрыты (.hide-sm) и открываются из «Настроек» */
 .sidebar.is-root .side-admin { display: flex; flex: 1; flex-direction: row; gap: 0; padding: 0; border: 0; }
 .sidebar.is-root .side-admin .nav { flex: 1; flex-direction: row; gap: 0; }
 .sidebar.is-root .side-label { display: none; }
 .topbar { gap: 8px; padding: 0 8px 0 16px; }
 .top-brand { display: flex; }
 /* Отклонение в статусе важнее надписи «Линия»: знак остаётся, а место уходит подписи («Отправка стоит»). Кнопки справа
    не сжимаются ниже цели касания 40; если подписи всё равно тесно — она, а не кнопки, сокращается многоточием. */
 .topbar:has(.sys-sum:not(.is-ok)) .top-brand span { display: none; }
 .sys-wrap { min-width: 0; margin-left: auto; }
 .sys-sum { max-width: 100%; height: 40px; }
 .sys-sum .l-long { display: none; }
 .sys-sum .l-short { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .top-actions { flex: none; }
 .sys-pop { inset: 54px 12px auto 12px; width: auto; max-width: none; transform-origin: top right; }
 .cmd { flex: none; width: 40px; height: 40px; margin-left: 0; }
 .top-actions { gap: 4px; }
 .topbar .btn-sm { height: 40px; }
 .topbar .icon-btn, .topbar .collapse-md { width: 40px; }
 .hide-sm { display: none !important; }
 .chip, .tab { height: 40px; }   /* DESIGN.md §2: цель касания на телефоне ≥ 40 */
 .modal-head .icon-btn, .sheet-head .icon-btn { width: 40px; height: 40px; }   /* закрытие модалки и боковых карточек */
 .page { --page-pt: 16px; padding: var(--page-pt) 16px 20px; }
 h1 { font-size: var(--fs-lg); }
 #toast { inset: auto 12px calc(76px + env(safe-area-inset-bottom)) 12px; max-width: none; }
 .sheet { width: 100%; border-left: 0; }
}

/* ===== Вход и первичная настройка ===== */
.auth { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; }
.auth-card { display: flex; flex-direction: column; gap: 8px; width: min(400px, 100%); padding: 32px 28px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.auth-card h1 { font-size: var(--fs-lg); }
.auth-sub { margin-bottom: 16px; color: var(--text-2); }
.auth-error { color: var(--bad); font-size: var(--fs-md); }
.auth-error:empty { display: none; }
.auth .btn-block { margin-top: 4px; }
@media (max-width: 767px) { .auth { place-items: start center; padding-top: 10vh; } .auth-card { padding: 24px 20px; } }

/* ===== Совместимость: старая разметка экранов до их редизайна (этапы 2–4) =====
   Общие аккуратные стили на токенах, не попиксельно. Удаляются по мере переноса экрана в свой файл. */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.green { color: var(--ok); }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-head small, .panel-meta { color: var(--text-3); font-size: var(--fs-sm); }
.cell-sub { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--fs-sm); }

/* Присутствие собеседника (Сообщения): <i> — точка */
.presence-state { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 400; white-space: nowrap; }
.presence-state > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 1.5px solid var(--text-3); }
.presence-state.online > i { border: 0; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.presence-state:not(.online) { color: var(--text-2); }

/* Аккаунты */
.account-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account-cell > div:not(.account-avatar) { display: flex; flex-direction: column; min-width: 0; }
.account-cell small { color: var(--text-3); font-size: var(--fs-sm); }
.account-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--av1); color: var(--text); font-size: var(--fs-sm); font-weight: 600; }
/* Точка аккаунта-отправителя (Сообщения, Лиды) */
.acc-dot { display: inline-block; flex: none; width: 10px; height: 10px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--av1); vertical-align: -1px; }
/* Цвет аватара и точки — один на сущность и на все экраны: класс avN по хешу id (accAv в app.js) */
:is(.account-avatar, .dialog-avatar, .acc-dot).av1 { background: var(--av1); }
:is(.account-avatar, .dialog-avatar, .acc-dot).av2 { background: var(--av2); }
:is(.account-avatar, .dialog-avatar, .acc-dot).av3 { background: var(--av3); }
:is(.account-avatar, .dialog-avatar, .acc-dot).av4 { background: var(--av4); }
:is(.account-avatar, .dialog-avatar, .acc-dot).av5 { background: var(--av5); }
:is(.account-avatar, .dialog-avatar, .acc-dot).av6 { background: var(--av6); }
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

/* Модалки старой разметки */
.modal-body .table-wrap { border: 1px solid var(--line); border-radius: var(--r-sm); }
.option-check > span { display: flex; flex-direction: column; gap: 2px; }
.option-check small { color: var(--text-3); }