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

/* --- кандидаты шрифтов (переключаются через --font) --- */
@font-face { font-family:'Onest'; font-weight:400 800; font-display:swap;
  src:url('/static/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Onest'; font-weight:400 800; font-display:swap;
  src:url('/static/fonts/onest-latin.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:400 800; font-display:swap;
  src:url('/static/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Manrope'; font-weight:400 800; font-display:swap;
  src:url('/static/fonts/manrope-latin.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:400; font-display:swap; src:url('/static/fonts/ibmplex-cyrillic-400.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-weight:400; font-display:swap; src:url('/static/fonts/ibmplex-latin-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:500; font-display:swap; src:url('/static/fonts/ibmplex-cyrillic-500.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-weight:500; font-display:swap; src:url('/static/fonts/ibmplex-latin-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:600; font-display:swap; src:url('/static/fonts/ibmplex-cyrillic-600.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-weight:600; font-display:swap; src:url('/static/fonts/ibmplex-latin-600.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:700; font-display:swap; src:url('/static/fonts/ibmplex-cyrillic-700.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-weight:700; font-display:swap; src:url('/static/fonts/ibmplex-latin-700.woff2') format('woff2'); }

/* ===== токены (осознанная тёмная тема) ===== */
:root {
  /* активный шрифт интерфейса. Кандидаты: 'Onest' · 'Manrope' · 'IBM Plex Sans' · 'Golos Text' */
  /* боевой шрифт. Кандидаты (Onest/Manrope/IBM Plex) грузятся только если выбраны
     переключателем дизайн-стенда (DESIGN_LAB=1), на прод не влияют */
  /* остаёмся на боевом Golos Text: смена шрифта потянула бы перенастройку вёрстки.
     Кандидаты (Onest/Manrope/IBM Plex) лежат в static/fonts и доступны в дизайн-стенде */
  --font: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --bg:      #090a0f;   /* near-black с сине-фиолетовым подтоном, глубже для контраста поверхностей */
  --bg-grad: radial-gradient(1100px 700px at 82% -8%, #12131c 0%, transparent 55%),
             radial-gradient(900px 600px at 0% 100%, #0d0f18 0%, transparent 50%);
  --panel:   #12141b;   /* базовая поверхность */
  --side:    #171b26;   /* колонка со списком диалогов: заметно выше холста,
                           иначе блок не читается как отдельная панель */
  --panel2:  #191c25;   /* поднятая поверхность (инпуты, чипы) */
  --raise:   #232733;   /* hover-поверхность */
  --line:    #262b37;   /* границы */
  --line-soft:#1c202a;
  --divider: #323949;   /* вертикальные разделители колонок инбокса - заметнее обычных границ */
  --hairline: rgba(255,255,255,.05);   /* верхний блик на поднятых поверхностях (эффект стекла) */

  --text:    #edeff5;
  --muted:   #8b93a6;
  --faint:   #5f6779;

  /* акцент «Сталь»: спокойный сине-серый, плоский, без свечения (выбран в дизайн-стенде).
     accent-hi на тёмном фоне ДОЛЬШЕ светлее фона, иначе акцентный текст не читается */
  --accent:  #3f6fa8;
  --accent-weak: rgba(63,111,168,.16);
  --accent-hi: #7ba7dd;
  --accent-grad: #3f6fa8;
  --accent-glow: none;

  --ok:      #34d399;
  --warn:    #fbbf24;
  --danger:  #f87171;
  --line2:   #a78bfa;   /* 2-я линия */

  --in-bubble:  #1b202d;
  --out-bubble: #2a3a63;
  --out-grad: linear-gradient(135deg, #33478a 0%, #263661 100%);   /* исходящие - дорогой градиент */

  --purple-bg:     #2a2044;
  --purple-text:   #c4b5fd;
  --purple-border: #3b2d63;
  --purple-strong: #7c5cff;
  --warn-bg:     #3a2a10;
  --warn-text:   #fbbf24;
  --warn-border: #52380f;
  --login-glow: #171a24;

  --r-sm: 8px; --r: 11px; --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow: 0 12px 32px -14px rgba(0,0,0,.6);
  --shadow-lg: 0 28px 60px -22px rgba(0,0,0,.7);
  --t: 160ms cubic-bezier(.4,0,.2,1);
  color-scheme: dark;   /* нативные виджеты (datetime-picker и т.п.) в тон теме */
}

/* ===== светлая тема (переработана: каждая поверхность отдельным, различимым тоном) ===== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:      #eef0f7;   /* холст страницы - приглушённый индиго-серый */
  --bg-grad: radial-gradient(1100px 700px at 82% -8%, #ffffff 0%, transparent 55%),
             radial-gradient(900px 600px at 0% 100%, #e6e9f5 0%, transparent 50%);
  --panel:   #ffffff;   /* карточки/шапка - настоящий подъём над холстом */
  --side:    #ffffff;   /* тут белый и так явно отличается от холста #eef0f7 */
  --panel2:  #f2f4fa;   /* поля ввода - между холстом и карточкой */
  --raise:   #c9cee2;   /* граница при ховере */
  --line:    #dde1ee;
  --line-soft:#e5e8f2;
  --divider: #c3c9dc;   /* разделители колонок - темнее обычных границ, чтобы панели читались */
  --hairline: rgba(255,255,255,.7);   /* верхний блик стеклянных поверхностей */

  /* Светлая тема держится на контрасте, а не на «красивой серости»: мелкий
     текст (подписи, даты, последнее сообщение в списке) иначе плывёт.
     Прошлый --faint давал на холсте 4.31:1 - ниже порога читаемости.
     Сейчас: text 19:1, muted 11:1, faint 7.2:1 на белой карточке. */
  --text:    #0d0f16;
  --muted:   #363b4b;
  --faint:   #525767;

  /* «Сталь» под белый фон: accent-hi темнее основного, чтобы текст читался */
  --accent:  #3f6fa8;
  --accent-weak: rgba(63,111,168,.13);
  --accent-hi: #2f5586;
  --accent-grad: #3f6fa8;
  --accent-glow: none;

  --ok:      #157a45;
  --warn:    #92530a;
  --danger:  #b3261e;
  --line2:   #6d28d9;

  /* пузыри переписки: у входящих и исходящих СВОЙ читаемый тон, оба заметно отличаются
     от --bg (баг прошлой версии: in-bubble совпадал с bg, сообщения клиента были невидимы) */
  --in-bubble:  #ffffff;
  --out-bubble: #dbe3ff;
  --out-grad: linear-gradient(135deg, #e2e9ff 0%, #ccd8ff 100%);

  --purple-bg:     #eee8fc;
  --purple-text:   #5b21b6;
  --purple-border: #ddd0f7;
  --purple-strong: #6d28d9;
  --warn-bg:     #fbf1e0;
  --warn-text:   #7a4408;
  --warn-border: #f0dcb5;
  --login-glow: #ffffff;

  --shadow-sm: 0 1px 2px rgba(40,44,66,.08);
  --shadow: 0 14px 34px -18px rgba(32,34,47,.22);
  --shadow-lg: 0 30px 64px -26px rgba(32,34,47,.28);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font);
  background: var(--bg-grad), var(--bg); background-attachment: fixed;
  color: var(--text); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
}
a { color: var(--accent); text-decoration: none; transition: color var(--t); }
@media (hover: hover) { a:hover { color: var(--accent-hi); } }
::selection { background: var(--accent-weak); }
/* ВСЕ контролы шрифтом интерфейса (Golos): раньше кнопки/числовые поля/селекты
   местами рендерились системным шрифтом - выглядело неровно */
button, input, optgroup, select, textarea { font-family: var(--font); }
h1,h2,h3,h4 { text-wrap: balance; }

/* тонкие скроллбары */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
@media (hover: hover) { *::-webkit-scrollbar-thumb:hover { background: var(--raise); background-clip: content-box; } }

/* фокус для клавиатуры */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===== login ===== */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 20px;
  background: radial-gradient(1200px 600px at 50% -10%, var(--login-glow) 0%, var(--bg) 60%); }
.login-card { background: var(--panel); padding: 34px 30px; border-radius: var(--r-lg); width: 320px;
  display: flex; flex-direction: column; gap: 13px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.login-card h1 { margin: 0 0 10px; font-size: 24px; font-weight: 800; text-align: center; letter-spacing: -0.02em; }
.login-card input, .login-card button { padding: 12px 13px; border-radius: var(--r); font-size: 14px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text); transition: border-color var(--t), box-shadow var(--t); font-family: inherit; }
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); outline: none; }
.login-card button { background: var(--accent); border: none; cursor: pointer; font-weight: 700; color: #fff; }
@media (hover: hover) { .login-card button:hover { background: var(--accent-hi); } }
.login-card button:active { transform: translateY(1px); }
.err { color: var(--danger); font-size: 13px; text-align: center; }
/* ===== 2FA-настройка на входе ===== */
.tfa-setup { display: flex; flex-direction: column; gap: 8px; align-items: center;
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.tfa-step { margin: 0; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.4; }
.tfa-qr { background: #fff; padding: 8px; border-radius: 8px; line-height: 0; }
.tfa-qr svg { width: 168px; height: 168px; display: block; }
.tfa-secret { font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700;
  letter-spacing: 1px; color: var(--text); background: var(--panel); padding: 8px 10px;
  border-radius: 8px; border: 1px dashed var(--line); word-break: break-all; text-align: center; user-select: all; }

/* ===== topbar / nav ===== */
.topbar { display: flex; align-items: center; gap: 14px; padding: 11px 18px; flex-wrap: wrap; row-gap: 8px;
  background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { font-weight: 800; letter-spacing: -0.02em; font-size: 15px; color: var(--text); }
.brand::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 3px;
  background: var(--accent); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 10px var(--accent); }
:root[data-theme="light"] .brand::before { box-shadow: 0 0 6px var(--accent-weak); }
.nav { display: flex; gap: 4px; flex-wrap: nowrap; }   /* пункты меню не рвём на строки */
.nav a { padding: 7px 10px; border-radius: 9px; color: var(--muted); font-weight: 500; font-size: 13px; white-space: nowrap; transition: background var(--t), color var(--t); }
@media (hover: hover) { .nav a:hover { background: var(--panel2); color: var(--text); } }
.nav a.on { background: var(--accent-weak); color: var(--accent-hi); }
.filters { display: flex; gap: 6px; align-items: center; }
.filters select { max-width: 150px; }   /* не даём длинным названиям каналов распирать топбар */
/* Вправо прижимается вся группа, а не каждый элемент по отдельности —
   иначе кнопка темы гуляет по странице в зависимости от того, что ещё в шапке. */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.me { color: var(--muted); font-size: 13px; white-space: nowrap; }

select, input, textarea { font-family: inherit; }
/* убираем нативные стрелки-спиннеры у числовых полей (CPA нам, депозит, план и т.п.) */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* единый вид всех выпадающих списков: скруглённая рамка вместо квадратной браузерной.
   background-color (не shorthand) — не конфликтует с частными правилами. Родная стрелка остаётся. */
select { border: 1px solid var(--line); border-radius: 9px; background-color: var(--panel2);
  color: var(--text); padding: 6px 10px; font-size: 13px; cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t); }
@media (hover: hover) { select:hover { border-color: var(--accent); } }
select:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-weak); }
.filters select, .mini-btn { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; transition: border-color var(--t), background var(--t); }
@media (hover: hover) { .filters select:hover, .mini-btn:hover { border-color: var(--accent); } }
/* фильтр по дате первого контакта (диапазон с … по …) */
.date-range { display: flex; align-items: center; gap: 5px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px; box-shadow: var(--shadow-sm); }
.date-range input[type=date] { background: none; border: 0; color: var(--text); font: inherit; font-size: 12.5px;
  padding: 3px 2px; color-scheme: light dark; outline: none; min-width: 108px; }
.date-range .dr-sep { color: var(--muted); font-size: 12px; }
.date-range .dr-clear { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 12px;
  padding: 2px 4px; border-radius: 6px; line-height: 1; }
@media (hover: hover) { .date-range .dr-clear:hover { color: #fff; background: var(--danger); } }
/* селект метрики на графике динамики: делаем аккуратной пилюлей (была квадратная обводка) */
.metrics-head select { border-radius: 999px; padding: 6px 14px; background-color: var(--panel2);
  box-shadow: var(--shadow-sm); }
.mini-btn { cursor: pointer; }
.mini-btn:disabled { opacity: .5; cursor: default; }

/* ===== layout ===== */
.cols { display: grid; grid-template-columns: 320px 1fr 300px; height: calc(100vh - 55px); }
.col { overflow-y: auto; border-right: 1px solid var(--divider); }
.col.card { border-right: none; }
/* Колонка со списком — отдельная поверхность, как боковая панель в телеге:
   переписка остаётся на холсте, список приподнят над ним. Одной границы для
   этого мало, блок должен отличаться тоном. */
.col.leads { background: var(--side); }
.empty { color: var(--faint); padding: 40px 24px; text-align: center; font-size: 13px; }

/* ===== avatars ===== */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--panel2); }
.avatar-sm { width: 34px; height: 34px; }
.avatar-fallback { display: flex; align-items: center; justify-content: center;
  background: var(--accent-weak); color: var(--accent-hi); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.avatar-sm.avatar-fallback { font-size: 11.5px; }

/* ===== lead list ===== */
/* content-visibility: браузер не считает раскладку и не рисует строки, которых
   сейчас не видно. Список чатов длинный (сотни диалогов), и раньше каждая его
   перерисовка обсчитывала всё целиком: 117мс на 300 строках. А перерисовка
   случается не только на загрузке — она же идёт при открытии любого чата,
   поэтому каждый вход в диалог давал заметный ступор ~100мс.
   contain-intrinsic-size: auto <высота> — заглушка для невидимых строк, чтобы
   полоса прокрутки не прыгала; auto заставляет браузер запомнить настоящий
   размер после первой отрисовки. 91px — измеренная медиана высоты строки. */
/* Список диалогов собран как в телеге: не строки таблицы, разделённые
   линиями, а отдельные скруглённые карточки с воздухом между ними. Разделители
   не нужны — паузы между карточками читаются лучше, чем хайрлайны. */
#lead-list { padding: 6px 7px; display: flex; flex-direction: column; gap: 3px; }
.lead-item { padding: 10px 12px; border-radius: 14px; cursor: pointer; position: relative;
  transition: background var(--t); display: flex; gap: 10px; align-items: flex-start;
  content-visibility: auto; contain-intrinsic-size: auto 91px; }
@media (hover: hover) { .lead-item:hover { background: var(--panel2); } }
/* Полоса «ждёт ответа» — не border-left, а скруглённая планка внутри карточки:
   бордюр на скруглённом углу растягивается вслед за радиусом и выглядит грязно. */
.lead-item::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px; background: transparent; transition: background var(--t); }
.lead-item.lead-waiting { background: var(--warn-weak, rgba(230,160,30,.07)); }
.lead-item.lead-waiting::before { background: var(--warn); }
@media (hover: hover) { .lead-item.lead-waiting:hover { background: var(--warn-weak, rgba(230,160,30,.12)); } }
.lead-item.active { background: var(--panel2); }
/* просрочено (>1ч без ответа): планка краснее + видимый счётчик времени ожидания */
.lead-item.lead-overdue { background: rgba(220,70,70,.08); }
.lead-item.lead-overdue::before { background: var(--danger); }
/* Открытый диалог перекрашивает планку последним: иначе на просроченной строке
   она осталась бы красной, и было бы не видно, какой диалог сейчас открыт. */
.lead-item.active::before { background: var(--accent); }
@media (hover: hover) { .lead-item.lead-overdue:hover { background: rgba(220,70,70,.13); } }
.lead-body { min-width: 0; flex: 1; }
.lead-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.lead-name { font-weight: 600; font-size: 14px; }
.lead-badges { display: inline-flex; gap: 5px; align-items: center; flex-shrink: 0; }
.lead-acc { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.lead-acc-name { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-last { color: var(--faint); font-size: 12.5px; margin-top: 4px; display: flex; align-items: baseline; gap: 8px; }
/* превью последнего сообщения - это контент, а не декорация: читаемым тоном */
.lead-last .ll-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.lead-last .ll-date { flex-shrink: 0; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.lead-last .draft-mark { color: var(--danger); font-weight: 600; }
.badge { background: var(--accent); color: #fff; border-radius: 20px; min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pill { font-size: 10px; padding: 2px 8px; border-radius: 20px; background: var(--panel2);
  color: var(--muted); border: 1px solid var(--line); font-weight: 600; letter-spacing: .02em; flex-shrink: 0; }
.pill.line1 { background: var(--accent-weak); color: var(--accent-hi); border-color: transparent; }
.pill.line2 { background: var(--purple-bg); color: var(--purple-text); border-color: var(--purple-border); }
.reply-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); display: inline-block;
  margin-right: 6px; flex-shrink: 0; vertical-align: middle; }

/* ===== chat ===== */
.chat { display: flex; flex-direction: column; }
#chat-wrap { flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.chat-head { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.chat-head .ch-row { display: flex; align-items: center; gap: 11px; }
.chat-head .ch-name { font-weight: 600; font-size: 14px; }
.chat-head .src { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.chat-head .src::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: middle; }
#messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 9px; }
.msg { max-width: 68%; padding: 9px 13px; border-radius: 18px; line-height: 1.45; font-size: 14px;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  animation: pop var(--t); }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.msg.in  { background: var(--in-bubble);  align-self: flex-start; border-bottom-left-radius: 6px; }
.msg.out { background: var(--out-bubble); align-self: flex-end;  border-bottom-right-radius: 6px; }
.msg.msg-optimistic { opacity: .55; }   /* «отправляется» - пока грузится файл */
:root[data-theme="light"] .msg.in { border: 1px solid var(--line); }
.msg .meta { display: block; font-size: 10.5px; color: var(--muted); margin-top: 5px; }
/* галочки доставки: ✓ отправлено (серым), ✓✓ прочитано клиентом (акцентом) */
.msg .tick { letter-spacing: -2px; color: var(--faint); }
.msg .tick.read { color: var(--accent-hi); }
.msg code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 92%;
  background: rgba(120,130,160,.16); border-radius: 4px; padding: 1px 4px; }
.msg code.pre { display: block; padding: 8px 10px; margin: 3px 0; white-space: pre-wrap;
  overflow-x: auto; }
.msg s { opacity: .75; }
.reply-tools { display: flex; align-items: center; gap: 10px; padding: 10px 14px 0; }
.reply-tools select { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 9px; font-size: 13px; max-width: 200px; transition: border-color var(--t); }
@media (hover: hover) { .reply-tools select:hover { border-color: var(--accent); } }
.attach { cursor: pointer; font-size: 18px; user-select: none; opacity: .8; transition: opacity var(--t); }
@media (hover: hover) { .attach:hover { opacity: 1; } }
.fname { color: var(--muted); font-size: 12px; }
.icon-btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; font-size: 15px; line-height: 1; padding: 5px 8px; transition: border-color var(--t); }
@media (hover: hover) { .icon-btn:hover { border-color: var(--accent); } }
/* панель смайликов: открывается ВВЕРХ над полем ввода, 8 колонок со скроллом.
   ВАЖНО: .reply button красит кнопки в синий - у эмодзи перебиваем обратно */
.emoji-panel { position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 30;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 8px; grid-template-columns: repeat(8, 1fr); gap: 2px;
  width: 296px; max-height: 246px; overflow-y: auto; }
.reply .emoji-panel .emoji-btn { background: none; border: none; border-radius: 7px; padding: 6px; }
@media (hover: hover) { .reply .emoji-panel .emoji-btn:hover { background: var(--panel2); } }
.emoji-btn { background: none; border: none; cursor: pointer; font-size: 19px; line-height: 1;
  padding: 6px; border-radius: 7px; transition: background var(--t); }
@media (hover: hover) { .emoji-btn:hover { background: var(--panel2); } }
/* AI-помощник (копайлот): черновик ответа над зоной ввода */
/* компактнее: панель висит над композером и не должна съедать ленту сообщений */
.ai-copilot { margin: 6px 14px 0; padding: 7px 9px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: var(--r); }
.aic-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.aic-title { font-weight: 600; font-size: 12px; color: var(--muted); }
.aic-q { width: 100%; resize: vertical; min-height: 30px; max-height: 120px; font-family: inherit; font-size: 12.5px;
  padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); box-sizing: border-box; }
.aic-bar { display: flex; align-items: center; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
.ai-copilot .mini-btn { padding: 5px 10px; font-size: 12px; }
.aic-status { font-size: 12px; color: var(--muted); }
.aic-result { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.aic-text { white-space: pre-wrap; font-size: 13px; line-height: 1.5; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
  max-height: 220px; overflow-y: auto; }
.aic-res-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.aic-ghost { background: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  border-radius: 8px; padding: 6px 11px; font-size: 12px; font-family: inherit;
  transition: border-color var(--t), color var(--t); }
@media (hover: hover) { .aic-ghost:hover { border-color: var(--accent); color: var(--text); } }
/* картинки бота (Настройки): миниатюры с удалением */
.aim-group { margin-top: 12px; }
.aim-title { font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.aim-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.aim-thumb { position: relative; width: 86px; height: 86px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel2); }
.aim-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aim-del { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.62); color: #fff;
  border: none; border-radius: 6px; width: 20px; height: 20px; cursor: pointer; font-size: 12px; line-height: 1; }
@media (hover: hover) { .aim-del:hover { background: rgba(200,40,40,.9); } }
.sched-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px 0; flex-wrap: wrap; }
.sched-row input[type=datetime-local] { background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; font-family: inherit; font-size: 13px; }
#scheduled-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 0; }
.sched-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--purple-bg); border: 1px solid var(--purple-border); color: var(--purple-text); border-radius: 9px;
  padding: 6px 10px; font-size: 12.5px; }
.sched-x { background: none; border: none; color: var(--purple-text); cursor: pointer; font-size: 13px; opacity: .8; }
@media (hover: hover) { .sched-x:hover { opacity: 1; color: var(--danger); } }
#reminders-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 0; }
.rem-chip { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.rem-chip .sched-x { color: var(--warn-text); }
.rem-chip.overdue { background: var(--danger); border-color: var(--danger); color: #fff; }
.rem-chip.overdue .sched-x { color: #fff; }
tr.rem-overdue td { color: var(--danger); }
.msg-img { display: block; max-width: 230px; max-height: 230px; border-radius: 10px; margin-bottom: 4px; cursor: zoom-in; }
.msg-round { display: block; width: 200px; height: 200px; border-radius: 50%; object-fit: cover;
  margin-bottom: 4px; background: #000; }
.msg-video { display: block; max-width: 240px; max-height: 300px; border-radius: 12px;
  margin-bottom: 4px; background: #000; }

/* теги-чипы в карточке: клик = вкл/выкл, справочник в Настройках */
.tag-box { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-chip { background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 20px; padding: 4px 11px; font-size: 12px; cursor: pointer; font-family: inherit;
  font-weight: 500; transition: background var(--t), color var(--t), border-color var(--t); }
@media (hover: hover) { .tag-chip:hover { border-color: var(--accent); } }
.tag-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.tag-chip .tag-del { background: none; border: none; color: #fff; opacity: .75; cursor: pointer;
  font-size: 11px; padding: 0 0 0 4px; }
@media (hover: hover) { .tag-chip .tag-del:hover { opacity: 1; } }

/* ===== прикреплённые файлы: чипы (миниатюра для картинок) + drag&drop ===== */
.file-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 9px; padding: 5px 10px; font-size: 12.5px;
  color: var(--text); }
/* картинки - компактная плитка-превью с крестиком в углу */
.file-chip.img { position: relative; padding: 0; border-radius: 10px; overflow: hidden; background: none; }
.file-chip .file-thumb { display: block; width: 48px; height: 48px; object-fit: cover; }
.file-chip.img .file-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 11px; line-height: 1; }
@media (hover: hover) { .file-chip.img .file-x:hover { background: var(--danger); color: #fff; } }
.file-chip .file-doc { display: inline-flex; align-items: center; }
.file-chip .file-x { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 0; }
@media (hover: hover) { .file-chip .file-x:hover { color: var(--danger); } }
/* подсветка зоны чата при перетаскивании файлов */
.col.chat { position: relative; }
.col.chat.dragging::after { content: 'Отпусти файлы, чтобы прикрепить';
  position: absolute; inset: 8px; z-index: 50; display: flex; align-items: center;
  justify-content: center; font-size: 15px; font-weight: 600; color: var(--accent-hi);
  background: var(--accent-weak); border: 2px dashed var(--accent); border-radius: var(--r-lg);
  pointer-events: none; }

/* ===== плашки режимов (правка / ответ) ===== */
.edit-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px 0; }
.edit-bar .edit-lbl { color: var(--accent-hi); font-size: 12.5px; font-weight: 600; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edit-bar .reply-quote-preview { color: var(--muted); font-weight: 400; }
.msg.editing { outline: 2px solid var(--accent); outline-offset: 1px; }

/* цитата ответа внутри пузыря (как в TG - вертикальная полоска слева) */
.msg-quote { border-left: 2.5px solid var(--accent); padding: 2px 8px; margin-bottom: 5px;
  font-size: 12.5px; color: var(--muted); background: rgba(120,130,160,.10); border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.msg.out .msg-quote { border-left-color: var(--accent-hi); }

/* ===== реакции на сообщениях (как в TG Web) ===== */
.msg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.react-chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 20px;
  padding: 2px 9px; font-size: 13px; cursor: pointer; font-family: inherit; line-height: 1.5;
  color: var(--text); transition: border-color var(--t), background var(--t); }
@media (hover: hover) { .react-chip:hover { border-color: var(--accent); } }
.react-chip.mine { background: var(--accent-weak); border-color: var(--accent); }
/* палитра в контекстном меню сообщения */
.react-pal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
  padding: 4px 2px 8px; border-bottom: 1px solid var(--line-soft); margin-bottom: 5px; }
.react-pal-btn { background: none; border: none; font-size: 20px; line-height: 1;
  padding: 6px 4px; border-radius: 8px; cursor: pointer; transition: background var(--t), transform var(--t); }
@media (hover: hover) { .react-pal-btn:hover { background: var(--panel2); transform: scale(1.18); } }

/* контекстное меню диалога (правая кнопка мыши) */
.ctx-menu { position: fixed; z-index: 250; display: none; flex-direction: column; min-width: 220px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 5px; }
.ctx-menu.on { display: flex; animation: pop var(--t); }
.ctx-menu .ctx-item { background: none; border: none; text-align: left; padding: 9px 12px;
  border-radius: 7px; color: var(--text); font-size: 13px; cursor: pointer; font-family: inherit;
  transition: background var(--t); }
@media (hover: hover) { .ctx-menu .ctx-item:hover { background: var(--panel2); } }

/* модал пересылки: выбор диалога */
.fwd-modal { position: fixed; inset: 0; background: rgba(8,10,16,.55); display: none;
  align-items: flex-start; justify-content: center; z-index: 280; padding-top: 12vh; }
.fwd-modal.on { display: flex; animation: pop var(--t); }
.fwd-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); width: min(92vw, 380px); max-height: 70vh; display: flex;
  flex-direction: column; padding: 14px; gap: 10px; }
.fwd-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.fwd-hide { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
  cursor: pointer; user-select: none; }
.fwd-hide input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.fwd-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.fwd-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: none; border: none; border-radius: 9px; padding: 8px 10px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--text); text-align: left;
  transition: background var(--t); }
@media (hover: hover) { .fwd-item:hover { background: var(--panel2); } }
.fwd-item .tmuted { font-size: 11.5px; }

/* лайтбокс: фото поверх чата, клик/Esc - закрыть */
.lightbox { position: fixed; inset: 0; background: rgba(8, 10, 16, .78); display: none;
  align-items: center; justify-content: center; z-index: 300; cursor: zoom-out;
  backdrop-filter: blur(2px); }
.lightbox.on { display: flex; animation: pop var(--t); }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 12px; box-shadow: var(--shadow); }
.msg-file { display: inline-block; margin-bottom: 4px; }
/* зона ответа в стиле Telegram: [📎][🕐] [поле со 🙂 внутри] [🎤] [Отправить].
   Всё одной высоты (40px), поле однострочное и авторастёт (JS autoGrow) -
   иконки при росте остаются прижаты к нижней линии, как в телеге */
.reply { display: flex; gap: 4px; padding: 10px 12px; border-top: 1px solid var(--line);
  position: relative; align-items: flex-end; }
.reply .ta-wrap { flex: 1; position: relative; display: flex; margin: 0 6px; min-width: 0; }
.reply .ta-wrap textarea { min-width: 0; }
.reply textarea { flex: 1; resize: none; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r); padding: 9px 38px 9px 12px;
  font-family: inherit; font-size: 14px; line-height: 1.45;
  min-height: 40px; max-height: 160px; overflow-y: auto;
  transition: border-color var(--t), box-shadow var(--t); }
.reply textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); outline: none; }
/* смайлик ВНУТРИ поля, справа, как в телеге */
.reply .ta-emoji { position: absolute; right: 6px; bottom: 7px; background: none; border: none;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 4px; border-radius: 6px;
  opacity: .65; transition: opacity var(--t); }
@media (hover: hover) { .reply .ta-emoji:hover { opacity: 1; background: none; } }
/* иконки: скрепка, отложка, микрофон - квадраты 40x40 вровень с полем */
.reply .reply-ico { background: none; border: none; font-size: 19px; line-height: 1;
  cursor: pointer; width: 40px; height: 40px; padding: 0; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .55; color: var(--text); flex-shrink: 0;
  transition: opacity var(--t), background var(--t); user-select: none; }
@media (hover: hover) { .reply .reply-ico:hover { opacity: 1; background: var(--panel2); } }
.reply .reply-ico.recording { opacity: 1; color: var(--danger); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; background: var(--panel2); width: auto; padding: 0 10px; }
.reply #send-btn { background: var(--accent); color: #fff; border: none; border-radius: var(--r);
  height: 40px; padding: 0 20px; cursor: pointer; font-weight: 700; font-family: inherit;
  font-size: 14px; flex-shrink: 0; margin-left: 4px;
  transition: background var(--t), transform var(--t); }
@media (hover: hover) { .reply #send-btn:hover { background: var(--accent-hi); } }
.reply #send-btn:active { transform: translateY(1px); }
.reply .reply-ico#voice-cancel { color: var(--danger); font-size: 17px; }
/* ===== свой плеер голосовых (как в телеге) ===== */
.voice-player { display: flex; align-items: center; gap: 9px; min-width: 210px; max-width: 280px;
  padding: 7px 10px 7px 8px; margin-bottom: 4px; background: var(--panel2);
  border-radius: 13px; }
.msg.out .voice-player { background: rgba(255,255,255,.10); }
.voice-player .vp-audio { display: none; }
.vp-play { flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 13px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t), transform var(--t); }
@media (hover: hover) { .vp-play:hover { background: var(--accent-hi); } }
.vp-play:active { transform: scale(.94); }
.voice-player.playing .vp-play { font-size: 12px; }
.vp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vp-track { position: relative; height: 4px; border-radius: 3px; background: var(--line);
  cursor: pointer; }
.vp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px;
  background: var(--accent); }
.msg.out .vp-track { background: rgba(255,255,255,.22); }
.msg.out .vp-fill { background: #fff; }
.vp-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vp-speed { flex-shrink: 0; border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 3px 6px;
  border-radius: 7px; transition: background var(--t), color var(--t); }
@media (hover: hover) { .vp-speed:hover { background: var(--panel); color: var(--text); } }

/* ===== card ===== */
.card { padding: 16px; }
.card h3 { margin: 0 0 16px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
/* компактнее: мельче подписи, меньше воздуха между строками (просьба юзера) */
.card-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.card-ai-row { flex-direction: row; align-items: center; justify-content: space-between; cursor: pointer; }
/* Тег в селекторе обязателен: ниже по файлу есть общее правило
   input[type=checkbox] { width:16px; height:16px }, оно тяжелее голого класса
   и раздавливало тумблер в квадратик — бегунок при этом вылезал наружу. */
input[type=checkbox].card-ai-toggle {
  width: 40px; height: 22px; flex-shrink: 0; -webkit-appearance: none; appearance: none;
  background: var(--line); border-radius: 999px; position: relative; cursor: pointer;
  transition: background var(--t); }
.card-ai-toggle:checked { background: var(--accent); }
.card-ai-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: left var(--t); }
.card-ai-toggle:checked::after { left: 20px; }
/* ИИ включён через канал (не на самом лиде) - подсказка у тумблера */
.card-ai-row.ai-by-channel > span::after { content: ' · по каналу'; color: var(--accent); font-weight: 600; }
/* тумблер ИИ на строке канала (Настройки → Каналы) */
.acc-ai { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted);
  white-space: nowrap; cursor: pointer; }
.acc-ai input { accent-color: var(--accent); cursor: pointer; }
.card-row > span { color: var(--muted); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.card-row select, .card-row input[type=text], .card-row input[type=number],
.card-row input[type=datetime-local], .card-row input:not([type]), .card-row textarea {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 9px; font-family: inherit; font-size: 13px; transition: border-color var(--t), box-shadow var(--t); }
.card-row select:focus, .card-row input:focus, .card-row textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); outline: none; }
.card-row textarea { resize: vertical; min-height: 44px; }
.card-row b { font-weight: 600; }

/* «пузырь» идентификатора клиента: email + (для Vantage) UID в одну строку + иконки-действия */
.id-bubble { display: flex; align-items: center; gap: 4px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 5px 3px 14px;
  transition: border-color var(--t), box-shadow var(--t); }
.id-bubble:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.id-bubble input { flex: 1 1 auto; min-width: 0; border: none !important; background: transparent !important;
  color: var(--text); font-family: inherit; font-size: 13px; padding: 7px 2px; outline: none;
  box-shadow: none !important; }
.id-bubble input::placeholder { color: var(--faint); }
.id-bubble .id-uid { flex: 0 1 140px; border-left: 1px solid var(--line) !important; padding-left: 10px; margin-left: 2px; }
.id-act { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent-weak); color: var(--accent-hi); font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t); }
@media (hover: hover) { .id-act:hover { background: var(--accent); color: #fff; } }
.id-act:active { transform: translateY(1px); }
.card-ai-row { flex-direction: row; align-items: center; justify-content: space-between; }
#card-reminders { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
#card-reminders .sched-chip { font-size: 11.5px; }
.rem-add-row { display: flex; flex-direction: column; gap: 6px; }
.rem-add-row .mini-btn { align-self: flex-start; }
/* история статусов в карточке мессенджера */
#card-status-hist { display: flex; flex-direction: column; gap: 0; margin-top: 6px; }
.sh-empty { font-size: 12.5px; color: var(--faint); }
.sh-row { display: flex; gap: 9px; padding: 0 0 11px; position: relative; }
.sh-row:not(:last-child)::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: -2px; width: 1px; background: var(--line); }
.sh-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 4px; }
.sh-dot.k-tags { background: #a78bfa; } .sh-dot.k-manager_id, .sh-dot.k-line2_id { background: #34d399; }
.sh-dot.k-deposit_amount { background: var(--ok, #22c55e); }
.sh-body { min-width: 0; }
.sh-move { font-size: 13px; line-height: 1.35; }
.sh-kind { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: var(--muted); background: var(--panel2); border-radius: 5px; padding: 1px 5px; margin-right: 4px; vertical-align: 1px; }
.sh-meta { font-size: 11px; color: var(--faint); margin-top: 1px; font-variant-numeric: tabular-nums; }
/* те же чипы для истории в модалке дашборда */
.lp-sh-kind { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: var(--muted); background: var(--panel); border-radius: 5px; padding: 1px 5px; margin-right: 4px; vertical-align: 1px; }
.lp-sh-dot.k-tags { background: #a78bfa; } .lp-sh-dot.k-manager_id, .lp-sh-dot.k-line2_id { background: #34d399; }
.lp-sh-dot.k-deposit_amount { background: #22c55e; }
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

/* ===== generic page ===== */
.page { max-width: 760px; margin: 0 auto; padding: 30px 22px 60px; }
.page.wide { max-width: 940px; }
.page h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.page h3 { margin: 24px 0 12px; font-size: 15px; font-weight: 700; }
.hint { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 0 20px; }
.hint.sm { font-size: 12px; margin: 8px 0 0; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > span { color: var(--muted); font-size: 12.5px; }
.field select, .field textarea, .field input {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 12px; font-family: inherit; font-size: 14px; resize: vertical;
  transition: border-color var(--t), box-shadow var(--t); }
.field select:focus, .field textarea:focus, .field input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); outline: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.row { display: flex; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.btn { background: var(--accent); color: #fff; border: none; border-radius: var(--r);
  padding: 10px 20px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 14px;
  transition: background var(--t), transform var(--t); }
@media (hover: hover) { .btn:hover { background: var(--accent-hi); } }
/* основная кнопка-«пузырь» (пилюля) — единый стиль для всех новых кнопок панели */
.btn-primary { background: var(--accent-grad, var(--accent)); color: #fff; border: 0; border-radius: 999px;
  padding: 9px 20px; font: inherit; font-weight: 650; font-size: 13.5px; cursor: pointer; align-self: flex-start;
  box-shadow: var(--accent-glow, none); transition: opacity var(--t), transform var(--t); }
@media (hover: hover) { .btn-primary:hover { opacity: .93; transform: translateY(-1px); } }
.btn-primary:disabled { opacity: .5; cursor: default; transform: none; }
.btn:active { transform: translateY(1px); }
.saved { color: var(--ok); font-size: 13px; }
.seg { color: var(--muted); font-size: 13px; }
.seg b { color: var(--text); }

/* ===== tables ===== */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.tbl th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.tbl tbody tr { transition: background var(--t); }
@media (hover: hover) { .tbl tbody tr:hover { background: var(--panel); } }
.tbl tfoot td { border-top: 2px solid var(--line); border-bottom: none; font-weight: 700; }
.tbl .muted { color: var(--muted); text-align: center; }

/* ===== team ===== */
.person { border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; margin-bottom: 10px;
  background: var(--panel); transition: border-color var(--t); }
@media (hover: hover) { .person:hover { border-color: var(--raise); } }
.person-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.person-head .role-sel { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 5px 9px; font-size: 13px; }
.person-head .del { margin-left: auto; }
.access { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 11px; }
.access.muted { opacity: .7; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.tmuted { color: var(--muted); font-size: 13px; }
.del { background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; padding: 5px 11px; cursor: pointer; font-size: 12px; flex-shrink: 0;
  transition: color var(--t), border-color var(--t); font-family: inherit; }
@media (hover: hover) { .del:hover { color: var(--danger); border-color: var(--danger); } }

/* ---- аккуратные кнопки: призрак (нейтральное действие) + опасное (удалить) ---- */
.btn-ghost { background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: 12.5px; flex-shrink: 0;
  font-family: inherit; transition: border-color var(--t), color var(--t), background var(--t); }
@media (hover: hover) { .btn-ghost:hover { border-color: var(--accent); color: var(--text); } }
.btn-ghost:disabled { opacity: .5; cursor: default; }
.btn-danger { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; cursor: pointer;
  background: var(--danger-weak, rgba(248,113,113,.12)); color: var(--danger);
  border: 1px solid transparent; font-size: 13px; line-height: 1; font-family: inherit;
  transition: background var(--t), border-color var(--t); }
@media (hover: hover) { .btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); } }

/* ---- команда: бейджи ролей, линии, email, разделитель ---- */
.role-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.role-badge.creator { background: rgba(245,158,11,.16); color: #b8770a; }
:root[data-theme="dark"] .role-badge.creator { color: #fbbf24; }
.role-badge.admin { background: var(--accent-weak); color: var(--accent-hi); }
.role-badge.member { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.line-toggles { display: inline-flex; gap: 12px; align-items: center; }
.person-spacer { margin-left: auto; }
.email-inp { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 9px; font-size: 12.5px; font-family: inherit; width: 190px; max-width: 40vw;
  transition: border-color var(--t); }
.email-inp:focus { border-color: var(--accent); outline: none; }
.person-head .btn-ghost.reset-pw { font-size: 12px; }

/* ---- команда: компактная таблица (карточки не масштабировались на 100 человек) ---- */
.tm-bar { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; flex-wrap: wrap; }
.tm-search { flex: 0 1 320px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px;
  font-family: inherit; transition: border-color var(--t); }
.tm-search:focus { border-color: var(--accent); outline: none; }
.tm-sel { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; font-size: 13px; font-family: inherit; }
.tm-count { color: var(--muted); font-size: 12.5px; }
.tm-addform { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
  padding: 15px; margin-bottom: 16px; }
/* подвал таблицы лидов: спред добит / осталось добить */
.ls-foot-spread { white-space: nowrap; line-height: 1.25; }
.ls-foot-spread .fs-done { color: var(--ok); font-weight: 700; }
.ls-foot-spread .fs-sep { color: var(--faint); margin: 0 2px; }
.ls-foot-spread .fs-left { color: var(--warn); font-weight: 700; }
.ls-foot-spread .fs-lbl { display: block; font-size: 10.5px; font-weight: 400;
  color: var(--faint); text-transform: none; letter-spacing: 0; }

/* клиенты: карточка-раскрывашка с фичами и статистикой использования */
.cl-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
  margin-bottom: 10px; }
.cl-card > summary { cursor: pointer; list-style: none; user-select: none; }
.cl-card > summary::-webkit-details-marker { display: none; }
.cl-card[open] .sec-caret { transform: rotate(90deg); color: var(--accent-hi); }
.cl-sum { font-size: 12.5px; white-space: nowrap; }
.cl-body { padding: 4px 14px 14px; }
.cl-feat { margin: 8px 0 18px; }
.cl-feat td { vertical-align: top; }
.cl-feat .hint.sm { margin: 2px 0 0; }
.cl-adduser { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.cl-adduser .row { gap: 8px; flex-wrap: wrap; }
.cl-adduser input, .cl-adduser select { background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13px; }
.cl-cred { background: var(--accent-weak); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin-top: 10px; font-size: 13.5px; }
.cl-cred b { font-family: var(--mono, ui-monospace, Menlo, monospace); }

/* переезд: выбор каналов, откуда тянуть диалоги */
.imp-chans { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
  padding: 12px 14px; margin-bottom: 14px; }
.imp-chans-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.imp-list { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.imp-ch { display: inline-flex; align-items: center; gap: 7px; }
.imp-ch.off { opacity: .5; cursor: default; }
.imp-ch .dot { flex-shrink: 0; }

.tm-pct { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.tm-pct input { width: 74px; background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 9px; font-size: 13px; font-family: inherit; text-align: right; }
.tm-pct input:focus { border-color: var(--accent); outline: none; }

.tm-tbl { margin-top: 4px; }
.tm-tbl th.tm-exp, .tm-tbl td.tm-exp { width: 30px; padding-right: 0; }
.tm-tbl tbody tr.tm-row { cursor: pointer; }
.tm-tbl tbody tr.tm-row.open { background: var(--panel); }
.tm-tbl tbody tr.tm-row.open td { border-bottom-color: transparent; }
.tm-caret { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px;
  padding: 2px 4px; line-height: 1; transition: transform var(--t), color var(--t); display: inline-block; }
.tm-row.open .tm-caret { transform: rotate(90deg); color: var(--accent-hi); }
.tm-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; margin-right: 4px;
  border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); }
.tm-chip.warn { color: var(--danger); border-color: transparent; background: rgba(248,113,113,.12); }
.tm-acc { font-variant-numeric: tabular-nums; }
.tm-acc.warn { color: var(--danger); }
.tm-email { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-seen { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.tm-live { color: var(--ok, #34d399); font-weight: 600; }
.tm-act { width: 44px; text-align: right; }

.tm-detail > td { background: var(--panel); padding-top: 4px; }
.tm-dgrid { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin-bottom: 12px; }
.tm-dgrid .field { margin: 0; }
.tm-dgrid .role-sel { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 10px; font-size: 13px; font-family: inherit; }
.tm-channels { border-top: 1px solid var(--line-soft); padding-top: 11px; }
.tm-dlabel { display: block; color: var(--muted); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .03em; font-weight: 600; margin-bottom: 8px; }
.tm-channels .chk { margin-right: 16px; margin-bottom: 6px; }

/* Планшет: колонки 3 (логин) и 8 (email) - самые необязательные.
   Нумерация: 1 каретка, 2 имя, 3 логин, 4 доступ, 5 линии, 6 каналы,
   7 % от CPA, 8 email, 9 активность, 10 действия.
   Селектор .tm-people, а не .tm-tbl: у таблицы каналов тот же tm-tbl, но
   третья колонка там «Статус», и это правило её прятало. */
@media (max-width: 900px) {
  .tm-people th:nth-child(3), .tm-people td:nth-child(3),
  .tm-people th:nth-child(8), .tm-people td:nth-child(8) { display: none; }
}

/* ---- каналы: та же таблица, но с аватаркой и статусом ---- */
.ch-tbl .tm-act { width: auto; white-space: nowrap; }
.ch-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ch-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-name .acc-av { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.ch-st { white-space: nowrap; }
.ch-st .dot { margin-right: 6px; }
.tm-chip.on { background: var(--accent-weak); color: var(--accent-hi); border-color: transparent; }
.tm-chip.bot { background: var(--panel2); color: var(--muted); }

/* ---- статусы: чипы с цветом, переименование, счётчик, замок ---- */
.status-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px 5px 6px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; margin: 0 6px 8px 0;
  border-left: 4px solid var(--sc, var(--accent)); }
.sc-color { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff2; cursor: pointer;
  background: var(--sc, var(--accent)); flex-shrink: 0; box-shadow: 0 0 0 1px var(--line); padding: 0; }
@media (hover: hover) { .sc-color:hover { transform: scale(1.15); } }
.sc-label { font-size: 13px; color: var(--text); cursor: pointer; font-weight: 500; }
@media (hover: hover) { .sc-label:hover { color: var(--accent-hi); text-decoration: underline dotted; } }
/* переименование прямо в чипе, без окна браузера */
.sc-label.editing { outline: none; text-decoration: none; color: var(--text);
  background: var(--panel2); border-radius: 6px; padding: 1px 6px; margin: -1px -2px;
  box-shadow: 0 0 0 1px var(--accent); cursor: text; }
.sc-count { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--panel);
  border-radius: 999px; padding: 1px 7px; }
.st-lock { font-size: 12px; opacity: .6; }
.st-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px;
  line-height: 1; padding: 2px 4px; border-radius: 6px; transition: color var(--t), background var(--t); }
@media (hover: hover) { .st-del:hover { color: #fff; background: var(--danger); } }
.st-del.disabled { opacity: .3; cursor: not-allowed; }
.color-inp { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel2); cursor: pointer; }

/* кастомный цвет статуса на пилюле лида */
.pill.pill-custom { background: color-mix(in srgb, var(--pc) 16%, transparent); color: var(--pc);
  border-color: color-mix(in srgb, var(--pc) 35%, transparent); }

/* ---- быстрые фразы: панель форматирования, порядок, хоткеи ---- */
.fmt-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.fmt-btn { min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); border-radius: 7px; cursor: pointer; font-size: 13px;
  transition: border-color var(--t), background var(--t); }
@media (hover: hover) { .fmt-btn:hover { border-color: var(--accent); background: var(--accent-weak); } }
.fmt-hint { font-size: 11.5px; margin-left: 4px; }
/* .tcat-items теперь <tbody>: раскладку задаёт таблица .tpl-tbl ниже */
.s-drag { flex-shrink: 0; cursor: grab; color: var(--faint); font-size: 15px; line-height: 1;
  padding: 2px 2px; user-select: none; letter-spacing: -2px; transition: color var(--t); }
@media (hover: hover) { .s-drag:hover { color: var(--accent); } }
.sitem:active .s-drag { cursor: grabbing; }
.sitem.dragging { opacity: .45; border-color: var(--accent); box-shadow: 0 6px 20px -6px rgba(0,0,0,.4); }

.s-hotkey, .ph-hotkey { font-size: 10px; font-weight: 700; color: var(--accent-hi);
  background: var(--accent-weak); border-radius: 5px; padding: 1px 6px; margin-left: 7px; white-space: nowrap; }

/* ---- брокеры (самообслуживание) ---- */
.broker-item { align-items: center; gap: 10px; }
.broker-kind { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.broker-kind.kind-fxpro { background: rgba(91,124,250,.16); color: var(--accent-hi); }
.broker-kind.kind-vantage { background: rgba(52,211,153,.16); color: var(--ok); }
.broker-stat { font-size: 12px; }
.broker-spacer { margin-left: auto; }
.broker-item.archived { opacity: .55; }
.b-result { margin: -4px 0 10px; padding-left: 2px; min-height: 0; }
.b-result:empty { display: none; }

/* templates list */
.tcat { margin-bottom: 20px; }
.tcat h4 { margin: 0 0 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.titem { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 11px 13px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 8px; transition: border-color var(--t); }
@media (hover: hover) { .titem:hover { border-color: var(--raise); } }
.acc-item { align-items: center; justify-content: flex-start; flex-wrap: wrap; row-gap: 8px; }
.acc-item .acc-label { flex: 1 1 150px; min-width: 0; }
.acc-item .acc-space { flex: 0 1 auto; max-width: 150px; min-width: 0; }
.acc-item .acc-invite { flex: 0 1 auto; max-width: 185px; min-width: 0; }
.acc-item .acc-arch { margin-left: auto; }
.acc-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--panel2); }
.acc-av-fallback { display: flex; align-items: center; justify-content: center;
  background: var(--accent-weak); color: var(--accent-hi); font-weight: 700; font-size: 12px; }
.acc-label { flex: 1; background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 9px; font-family: inherit; font-size: 13px; transition: border-color var(--t); }
.acc-label:focus { border-color: var(--accent); outline: none; }
/* статус подключения лички */
.acc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--muted); white-space: nowrap; flex-shrink: 0; min-width: 78px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dot-dead { background: var(--danger); box-shadow: 0 0 0 3px rgba(248,113,113,.18); }
.dot-off { background: var(--muted); }
.acc-item.archived { opacity: .55; }
/* биллинг: баланс + крипто-пополнение */
.bl-cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 20px; }
.bl-card { flex: 1 1 160px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.bl-card .bl-k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bl-card .bl-v { font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; }
.bl-card .bl-v.ok { color: var(--ok); } .bl-card .bl-v.danger { color: var(--danger); }
.bl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* minmax(0,…), а не 1fr: иначе колонка не может стать уже своего содержимого
   и адреса кошельков распирают страницу вбок на узких экранах */
@media (max-width: 720px) { .bl-grid { grid-template-columns: minmax(0, 1fr); } }
.bl-pane { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.bl-pane h3 { margin: 0; }
.bl-wrow { display: flex; align-items: center; gap: 10px; }
.bl-net { flex: none; width: 96px; font-size: 12.5px; font-weight: 600; color: var(--accent-hi); }
.bl-waddr { flex: 1; min-width: 0; background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12.5px; font-family: var(--mono, monospace); }
.bl-waddr:focus { border-color: var(--accent); outline: none; }
.pst { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.pst-pending { background: rgba(251,191,36,.15); color: #f59e0b; }
.pst-confirmed { background: rgba(52,211,153,.15); color: var(--ok); }
.pst-rejected { background: rgba(220,70,70,.14); color: var(--danger); }
/* распределение лидов по каналу (веса менеджеров) */
.acc-wrap { display: flex; flex-direction: column; }
.acc-dist-btn.on { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-weak); }
.acc-dist { margin: 2px 0 10px; padding: 12px 14px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--r); display: flex; flex-direction: column; gap: 8px; }
.dist-hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.dist-hint b { color: var(--text); }
.dist-rows { display: flex; flex-direction: column; gap: 6px; }
.dist-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.dist-row span { color: var(--text); }
.dist-w { width: 76px; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; text-align: center; }
.dist-w:focus { border-color: var(--accent); outline: none; }
.dist-save { align-self: flex-start; }
.dist-msg { font-size: 12.5px; color: var(--ok); margin-left: 8px; }
.acc-arch { cursor: pointer; font-size: 12px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--muted); flex-shrink: 0;
  transition: border-color var(--t), color var(--t); }
@media (hover: hover) { .acc-arch:hover { border-color: var(--danger); color: var(--danger); } }
@media (hover: hover) { .acc-arch.acc-return:hover { border-color: #22c55e; color: #22c55e; } }
/* панель безопасности */
.sec-mgr { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 10px; }
.sec-mgr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  cursor: pointer; list-style: none; user-select: none; }
.sec-mgr-head::-webkit-details-marker { display: none; }
.sec-caret { color: var(--muted); font-size: 11px; transition: transform var(--t); display: inline-block; }
.sec-mgr[open] .sec-caret { transform: rotate(90deg); color: var(--accent-hi); }
.sec-sum { font-size: 12.5px; color: var(--muted); }
.sec-on { color: var(--ok); font-weight: 600; }
.sec-body { margin-top: 8px; max-height: 320px; overflow-y: auto; }
.sec-sess { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 13px;
  border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.sec-dev { min-width: 150px; }
.sec-logout { cursor: pointer; }
/* воронка "где течёт" */
.funnel-headline { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.funnel-headline b { color: var(--danger); }
#funnel-table .fn-cell { text-align: center; vertical-align: middle; }
.fn-sub { display: block; font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.fn-cell.leak { background: rgba(248,113,113,.15); color: var(--danger); font-weight: 700; }
.fn-cell.leak .fn-sub { color: var(--danger); opacity: .85; }
.fn-total td { font-weight: 700; border-top: 2px solid var(--line); }
/* детальный разбор канала (раскрывашка в таблице экспертов) */
.ex-row { cursor: pointer; }
@media (hover: hover) { .ex-row:hover { background: var(--panel2); } }
.ex-caret { display: inline-block; width: 12px; color: var(--muted); font-size: 10px; }
.ex-detail > td { background: var(--panel2); padding: 0; }
.chd { padding: 14px 16px; display: grid; gap: 14px; }
.chd-sec { border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; }
.chd-h { font-weight: 700; font-size: 13.5px; }
.chd-n { display: inline-block; min-width: 20px; text-align: center; background: var(--accent);
  color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; margin-left: 4px; }
.chd-hint { color: var(--muted); font-size: 12px; margin: 3px 0 6px; }
.chd-hint b, .chd-names b { color: var(--text); }
.chd-names { font-size: 12.5px; line-height: 1.7; }
.chd-names a, .chd-tbl a { color: var(--accent-hi); text-decoration: none; }
@media (hover: hover) { .chd-names a:hover, .chd-tbl a:hover { text-decoration: underline; } }
.chd-tbl { border-collapse: collapse; font-size: 12.5px; margin-top: 2px; }
.chd-tbl th { text-align: left; color: var(--muted); font-weight: 500; padding: 2px 14px 4px 0; }
.chd-tbl td { padding: 2px 14px 2px 0; }
.chd-empty { color: var(--muted); font-size: 12.5px; }

/* ===== dashboard ===== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 26px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px;
  transition: border-color var(--t), transform var(--t); }
@media (hover: hover) { .kpi:hover { border-color: var(--raise); transform: translateY(-2px); } }
.kpi .k-val { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi .k-lbl { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.kpi .k-sub { color: var(--faint); font-size: 11.5px; margin-top: 6px; }
.kpi.accent .k-val { color: var(--accent-hi); }
.kpi.purple .k-val { color: var(--purple-text); }
.kpi.ok .k-val { color: var(--ok); }
.kpi.gold .k-val { color: #d4a017; }
:root[data-theme="dark"] .kpi.gold .k-val { color: #f0c14b; }

/* редактируемый дашборд: «Мои метрики» - крупные закреплённые плитки */
.pinned-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pinned-head h3 { font-size: 15px; }
.pinned-kpis { margin-bottom: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi.kpi-big { padding: 20px 22px; background: linear-gradient(160deg, var(--panel), var(--panel2));
  border-color: var(--raise); position: relative; }
.kpi.kpi-big .k-icon { font-size: 22px; line-height: 1; margin-bottom: 8px; }
.kpi.kpi-big .k-val { font-size: 34px; }
.kpi.kpi-big .k-lbl { font-size: 13px; font-weight: 600; color: var(--text); }

.panel-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; margin-bottom: 20px; }
.panel-box h3 { margin: 0 0 14px; font-size: 14px; font-weight: 700; }
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 96px; align-items: center; gap: 10px; font-size: 13px; }
.bar-row .b-name { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { background: var(--panel2); border-radius: 20px; height: 9px; overflow: hidden; }
.bar-dep { display: block; font-size: 11px; font-weight: 500; color: var(--ok); font-variant-numeric: tabular-nums; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); border-radius: 20px;
  transition: width 500ms cubic-bezier(.4,0,.2,1); }
.bar-fill.purple { background: linear-gradient(90deg, var(--purple-strong), var(--line2)); }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.spark .s-bar { flex: 1; background: var(--accent-weak); border-radius: 4px 4px 0 0; min-height: 2px;
  position: relative; transition: height 500ms cubic-bezier(.4,0,.2,1); }
.spark .s-bar:last-child { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); }
.spark-x { display: flex; gap: 4px; margin-top: 6px; }
.spark-x span { flex: 1; text-align: center; color: var(--faint); font-size: 10px; }

/* donut */
.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut-svg { width: 160px; height: 160px; flex-shrink: 0; }
.donut-svg circle { transition: stroke-dasharray 500ms cubic-bezier(.4,0,.2,1); }
.donut-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 140px; }
.donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.donut-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-lbl { color: var(--muted); flex: 1; }
.donut-legend-val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* scrollable wide table */
.tbl-scroll { overflow-x: auto; }
.tbl-scroll .tbl { min-width: 640px; }

/* ===== мобильные кнопки шапки чата (на десктопе скрыты) ===== */
.m-back, .m-card-btn { display: none; background: none; border: none; font-size: 20px;
  cursor: pointer; color: var(--text); padding: 4px 8px; border-radius: 8px; flex-shrink: 0; }
.m-card-btn { margin-left: auto; font-size: 17px; }
.m-card-close, .m-card-grab, .m-card-back { display: none; }

/* на тач-экранах долгий тап открывает НАШЕ меню - системное выделение/лупу глушим,
   иначе iOS показывает их поверх (текст сообщения всё ещё можно скопировать с десктопа) */
@media (pointer: coarse) {
  .lead-item, .msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* ===== нижняя навигация телефона (на десктопе скрыта) ===== */
.mnav, .msheet-wrap { display: none; }
/* Запасы под вырезы экрана (работают только с viewport-fit=cover в _head.html):
   --mnav-h  — панель вкладок + «домашняя полоска» снизу;
   --topbar-h — шапка + строка состояния сверху (в приложении с домашнего экрана
   контент уходит под неё). Ими считается высота инбокса и низ обычных страниц. */
:root {
  /* 65px = 52px сам пункт (иконка 23 + отступ 3 + подпись + поля 5/5)
     + 6px сверху + 6px снизу + 1px граница. Число должно совпадать с живой
     высотой .mnav: всё, что резервирует низ, считается по нему. Расхождение
     ловит обход (audit.py сравнивает переменную с фактической высотой). */
  --mnav-h: calc(65px + env(safe-area-inset-bottom));
  --topbar-h: calc(48px + env(safe-area-inset-top));
}

/* ===== телефон: одна панель за раз, как в Telegram ===== */
@media (max-width: 768px) {
  /* Разделы уехали в нижнюю панель вкладок, поэтому в шапке остаётся только бренд
     и иконки. Раньше сюда впихивались меню + имя + выход, и на 390px из меню было
     видно полтора пункта — приходилось догадываться, что строка скроллится. */
  .topbar { gap: 8px; flex-wrap: wrap;
    padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
             8px calc(12px + env(safe-area-inset-left)); }
  .brand { display: block; font-size: 14px; }
  .nav, .me { display: none; }
  .topbar .filters { order: 10; width: 100%; }
  .topbar .icon-btn { margin-left: 0 !important; }
  .topbar #notif-btn { margin-left: auto !important; }

  /* iOS зумит страницу при фокусе, если шрифт поля < 16px */
  input, select, textarea { font-size: 16px !important; }

  /* В обычной вкладке браузера потягивание вниз перезагружает страницу, а
     прокрутка внутри списка «пробивает» на страницу под ним. В приложении
     ни того, ни другого не бывает, и здесь оно не нужно тем более: данные
     приезжают по вебсокету, а перезагрузка стоит потерянного места в длинной
     переписке. Установленное приложение так себя и ведёт — выравниваем браузер. */
  html, body { overscroll-behavior-y: contain; }

  /* панель вкладок: фикс внизу, с запасом под «домашнюю полоску» iPhone */
  .mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
    background: var(--panel); border-top: 1px solid var(--line);
    padding: 6px calc(4px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom))
             calc(4px + env(safe-area-inset-left));
    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .5); }
  .mnav-i { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 5px 2px; border: 0; background: none; font: inherit; font-size: 10.5px;
    font-weight: 600; color: var(--muted); border-radius: 10px; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: color var(--t), background var(--t); }
  .mnav-i svg { width: 23px; height: 23px; }
  .mnav-i.on { color: var(--accent-hi); background: var(--accent-weak); }
  .mnav-i:active { background: var(--panel2); }

  /* шторка «Ещё»: остальные разделы и профиль */
  .msheet-wrap { display: block; position: fixed; inset: 0; z-index: 200; }
  .msheet-wrap[hidden] { display: none; }
  .msheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
  .msheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--panel);
    border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
    padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .6); animation: msheet-up .22s ease; }
  .msheet-grab { width: 40px; height: 4px; border-radius: 3px; background: var(--line);
    margin: 0 auto 10px; }
  .msheet-user { font-weight: 700; font-size: 15px; padding: 2px 4px 10px;
    border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
  .msheet-links { display: flex; flex-direction: column; }
  .msheet-links a, .msheet-links button { display: flex; align-items: center; gap: 12px;
    padding: 13px 6px; border: 0; background: none; font: inherit; font-size: 15px;
    color: var(--text); text-align: left; cursor: pointer; border-radius: 10px; }
  .msheet-links i { font-style: normal; font-size: 17px; width: 22px; text-align: center; }
  .msheet-links a.on { color: var(--accent-hi); font-weight: 600; }
  .msheet-links .msheet-exit { color: var(--danger); }
  /* какая версия крутится — мелко, внизу шторки, чтобы не мозолило глаза */
  .msheet-build { padding: 12px 4px 2px; font-size: 11.5px; color: var(--muted);
    text-align: center; }
  body.msheet-open { overflow: hidden; }
  @keyframes msheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* инбокс: видна одна колонка; чат открывается тапом, карточка - кнопкой в шапке чата.
     В списке диалогов панель вкладок занимает низ, в открытом чате — прячем её,
     иначе она наезжает на композер (писать важнее, чем видеть вкладки). */
  body.m-chat-open .mnav { display: none; }
  .cols { display: block; height: calc(100dvh - var(--topbar-h) - var(--mnav-h)); position: relative; overflow: hidden; }
  body.m-chat-open .cols { height: calc(100dvh - var(--topbar-h)); }
  /* композер прижат к низу экрана - под «домашнюю полоску» нужен свой запас */
  body.m-chat-open .reply { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .col { border-right: none; height: 100%; }
  .col.chat, .col.card { display: none; }
  body.m-chat-open .col.leads { display: none; }
  body.m-chat-open .col.chat { display: flex; }
  /* Карточка лида — нижняя шторка, как «Ещё». Боковой панелью на 92% ширины она
     читалась как «другой экран», хотя это деталь текущего чата; снизу её и
     закрывать удобнее большим пальцем (свайп вниз). */
  body.m-card-open .col.card { display: block; position: fixed; left: 0; right: 0;
    top: auto; bottom: 0; width: auto; height: auto; max-height: 88dvh; z-index: 140;
    background: var(--bg); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
    box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .6); overflow-y: auto;
    overscroll-behavior: contain; animation: msheet-up .22s ease;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .m-card-back { display: none; }
  body.m-card-open .m-card-back { display: block; position: fixed; inset: 0; z-index: 139;
    background: rgba(0, 0, 0, .45); }
  .m-card-grab { display: block; width: 40px; height: 4px; border-radius: 3px;
    background: var(--line); margin: 2px auto 8px; }
  .m-back, .m-card-btn { display: inline-flex; align-items: center; }
  /* крестик - в угол шторки, чтобы не отъедать строку над именем клиента */
  .m-card-close { display: inline-flex; position: absolute; top: 12px; right: 14px; z-index: 2;
    background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
    font-size: 15px; padding: 5px 10px; cursor: pointer; color: var(--text); }
  body.m-card-open .card-name-input { padding-right: 52px; }

  /* шапка чата: аватарка мельче, источник одной строкой — иначе она съедала
     три строки экрана ещё до первого сообщения */
  .chat-head { padding: 8px 10px; }
  .chat-head .ch-row { gap: 8px; }
  .chat-head .ch-row > div { min-width: 0; }
  .chat-head .avatar, .chat-head .acc-av { width: 34px; height: 34px; }
  .chat-head .ch-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-head .src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-back, .m-card-btn { flex: none; }

  .msg { max-width: 86%; }
  .leads-filters select { font-size: 14px !important; }  /* фильтры мельче полей ввода - ок, зум не страшен (не текстовые) */
  /* Композер на телефоне. Поле должно занимать большую часть строки: раньше
     иконки съедали ширину и «Сообщение…» переносилось по одному слову. */
  .reply { padding: 8px 6px; gap: 0; }
  .reply .ta-wrap { margin: 0 2px; flex: 1 1 auto; min-width: 45%; }
  .reply .reply-ico { width: 34px; height: 34px; font-size: 17px; }
  .reply textarea { padding: 8px 34px 8px 11px; }
  /* кнопка отправки на телефоне - компактная стрелка вместо слова */
  .reply #send-btn { padding: 0; width: 40px; flex-shrink: 0; font-size: 0; }
  .reply #send-btn::after { content: '➤'; font-size: 17px; }
  .emoji-panel { right: -44px; }

  /* совсем узкие экраны: прячем смайлы, они есть на системной клавиатуре */
  @media (max-width: 380px) {
    .reply .ta-emoji { display: none; }
    .reply textarea { padding-right: 11px; }
  }

  /* обычные страницы: одна колонка, таблицы скроллятся */
  .page { padding: 18px 14px calc(var(--mnav-h) + 18px); }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  /* вкладки дашборда: четыре не влезают в 390px — жмём поля и разрешаем скролл */
  .dash-tabs { overflow-x: auto; scrollbar-width: none; }
  .dash-tabs::-webkit-scrollbar { display: none; }
  .dash-tab { padding: 7px 11px; font-size: 13px; white-space: nowrap; }

  table.tbl { display: block; overflow-x: auto; white-space: nowrap; }
  .donut-wrap { justify-content: center; }
  .bar-row { grid-template-columns: 90px 1fr 84px; }
  .filters { flex-wrap: wrap; }

  /* карточки настроек: на телефоне переносим строки, поля на всю ширину (был гор. скролл) */
  .titem { flex-wrap: wrap; row-gap: 8px; }
  .acc-item { flex-wrap: wrap; row-gap: 9px; }
  .acc-item .acc-label { flex: 1 1 130px; min-width: 0; }
  .acc-item .acc-space { flex: 1 1 100%; }
  .acc-item .acc-ai { flex: 1 1 100%; }
  .acc-item .acc-status { min-width: 0; }
  /* команда: почта и линии на всю ширину, разделитель убираем (всё и так в столбик) */
  .person-head { gap: 8px; row-gap: 8px; }
  .person-head .email-inp { flex: 1 1 100%; max-width: none; }
  .person-head .person-spacer { display: none; }
  .person-head .role-sel { flex: 1 1 auto; }
  /* быстрые фразы: тело фразы переносится, не толкает ширину */
  .tpl-tbl th.tpl-key, .tpl-tbl td.tpl-key { display: none; }
  /* вкладка Лиды: на телефоне широкая таблица должна скроллиться, а не толкать страницу
     (на десктопе overflow-x:visible нужен для sticky-колонки, на мобиле возвращаем auto) */
  #tab-leads .tbl-scroll { overflow-x: auto; }
}

/* ===== шапка списка диалогов: поиск + фильтры ===== */
.leads-head { position: sticky; top: 0; z-index: 10; background: var(--bg);
  padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.leads-search { width: 100%; background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 11px; font-family: inherit; font-size: 13.5px;
  transition: border-color var(--t), box-shadow var(--t); }
.leads-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); outline: none; }
.leads-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.leads-filters select { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; font-size: 12.5px; min-width: 0;
  transition: border-color var(--t); }
@media (hover: hover) { .leads-filters select:hover { border-color: var(--accent); } }
/* нечётный "хвост" грида (напр. 5-й фильтр) растягиваем на всю ширину */
.leads-filters select:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ===== свой датапикер ===== */
input.dtp { cursor: pointer; }
.dtp-pop { position: fixed; z-index: 9600; width: 264px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px;
  animation: pop var(--t); }
.dtp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dtp-title { font-weight: 700; font-size: 13.5px; }
.dtp-nav { background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; color: var(--text);
  width: 26px; height: 26px; cursor: pointer; font-size: 15px; line-height: 1; transition: border-color var(--t); }
@media (hover: hover) { .dtp-nav:hover { border-color: var(--accent); } }
.dtp-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 3px; }
.dtp-week span { text-align: center; color: var(--faint); font-size: 10.5px; font-weight: 600; padding: 3px 0; }
.dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dtp-day { background: none; border: none; border-radius: 7px; color: var(--text); font-size: 12.5px;
  height: 30px; cursor: pointer; font-family: inherit; font-variant-numeric: tabular-nums;
  transition: background var(--t); }
@media (hover: hover) { .dtp-day:hover { background: var(--panel2); } }
.dtp-day.past { color: var(--faint); }
.dtp-day.today { box-shadow: inset 0 0 0 1px var(--accent); }
.dtp-day.sel { background: var(--accent); color: #fff; font-weight: 700; }
.dtp-day-empty { pointer-events: none; }
.dtp-time { display: flex; align-items: center; gap: 6px; margin-top: 10px;
  border-top: 1px solid var(--line-soft); padding-top: 10px; }
.dtp-time-lbl { color: var(--muted); font-size: 12px; margin-right: auto; }
.dtp-time select { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 6px; font-size: 13px; font-family: inherit; }
.dtp-colon { color: var(--muted); font-weight: 700; }
.dtp-ok { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 6px 12px;
  cursor: pointer; font-weight: 700; font-size: 12.5px; font-family: inherit; margin-left: 4px;
  transition: background var(--t); }
@media (hover: hover) { .dtp-ok:hover { background: var(--accent-hi); } }

/* ===== имя клиента в карточке (редактируемое) ===== */
.card-name-input { width: 100%; background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--text); font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  padding: 4px 8px; margin: -4px 0 12px -8px; transition: border-color var(--t), background var(--t); }
@media (hover: hover) { .card-name-input:hover { border-color: var(--line); } }
.card-name-input:focus { border-color: var(--accent); background: var(--panel2); outline: none; }

/* ===== скрипты: форма-редактор + список ===== */
.script-form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; margin-bottom: 24px; }
.script-form .row { margin-top: 12px; gap: 10px; }
/* ---- быстрые фразы: столбцы вместо карточек ---- */
.tpl-tbl { table-layout: fixed; }
.tpl-tbl th.tpl-drag, .tpl-tbl td.tpl-drag { width: 28px; padding-right: 0; }
.tpl-tbl th.tpl-name, .tpl-tbl td.tpl-name { width: 26%; }
.tpl-tbl th.tpl-key,  .tpl-tbl td.tpl-key  { width: 130px; white-space: nowrap; }
.sitem { cursor: pointer; transition: background var(--t); }
@media (hover: hover) { .sitem:hover { background: var(--panel); } }
.sitem.editing { background: var(--accent-weak); }
.sitem.editing td { border-bottom-color: var(--accent); }
.sitem .s-title { font-weight: 600; font-size: 13.5px; }
.sitem .s-preview { color: var(--faint); font-size: 12.5px; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-body { cursor: pointer; }
.btn.secondary { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
@media (hover: hover) { .btn.secondary:hover { background: var(--raise); } }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--line); }
@media (hover: hover) { .btn.danger:hover { border-color: var(--danger); } }

/* ===== настройки: подключение канала ===== */
.chan-add { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; margin-bottom: 24px; }
.chan-step { display: none; }
.chan-step.on { display: block; }
.chan-status { font-size: 13px; margin-top: 10px; }
.chan-status.ok { color: var(--ok); }
.chan-status.err { color: var(--danger); }

/* результат проверки реги в FxPro (в карточке под email) */
.fx-result { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.fx-result .fx-yes { color: var(--ok); font-weight: 600; }
.fx-result .fx-no { color: var(--danger); font-weight: 600; }

/* суб-табы страниц настроек (Каналы/Команда/AI/Биллинг) */
.subnav { display: flex; gap: 6px; padding: 10px 24px 0; flex-wrap: wrap; }
.subnav a { padding: 6px 14px; border-radius: 8px; font-size: 13px; color: var(--muted);
  text-decoration: none; border: 1px solid var(--border); background: var(--panel); }
@media (hover: hover) { .subnav a:hover { color: var(--text); } }
.subnav a.on { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════
   PREMIUM-СЛОЙ: глубина материалов, стекло, градиентный акцент.
   Идёт последним — осознанно переопределяет базовые правила выше.
   ══════════════════════════════════════════════════════════════════════ */

/* — topbar: приподнятая стеклянная панель с верхним бликом и нижней accent-линией — */
.topbar {
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    var(--hairline) border-box;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--hairline) inset, var(--shadow-sm);
  backdrop-filter: saturate(1.2);
}
.brand { font-size: 15px; }
.brand::before {
  width: 9px; height: 9px; border-radius: 3px;
  background: var(--accent-grad);
  box-shadow: 0 0 0 3px var(--accent-weak), 0 0 14px var(--accent);
}

/* — nav: активная вкладка как выверенная пилюля с градиентной подложкой — */
.nav a { font-weight: 600; letter-spacing: -0.01em; }
.nav a.on {
  background: var(--accent-weak);
  color: var(--accent-hi);
  box-shadow: 0 0 0 1px var(--accent-weak) inset;
}

/* — суб-табы: чиним несуществующий var(--border) и даём глубину — */
.subnav { padding: 12px 24px 2px; gap: 7px; }
.subnav a { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow-sm);
  font-weight: 600; transition: color var(--t), border-color var(--t), transform var(--t); }
@media (hover: hover) { .subnav a:hover { border-color: var(--raise); transform: translateY(-1px); } }
.subnav a.on { color: #fff; background: var(--accent-grad); border-color: transparent;
  box-shadow: var(--accent-glow); }

/* — сгруппированный subnav: 4 выпадашки вместо длинного ряда вкладок — */
.subnav-grouped { align-items: center; }
.nav-grp { position: relative; }
.nav-grp > summary { list-style: none; cursor: pointer; user-select: none; padding: 7px 15px;
  border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; transition: border-color var(--t), transform var(--t); }
.nav-grp > summary::-webkit-details-marker { display: none; }
.nav-grp > summary::after { content: "▾"; font-size: 10px; opacity: .55; }
@media (hover: hover) { .nav-grp > summary:hover { border-color: var(--raise); transform: translateY(-1px); } }
.nav-grp.on-grp > summary { color: #fff; background: var(--accent-grad); border-color: transparent; box-shadow: var(--accent-glow); }
.nav-grp[open] > summary::after { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 190px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 20px 50px -20px rgba(20,20,50,.35); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.nav-menu a { padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: var(--text); border: 0;
  background: none; box-shadow: none; font-weight: 500; white-space: nowrap; transform: none; }
@media (hover: hover) { .nav-menu a:hover { background: var(--bg); border-color: transparent; transform: none; } }
.nav-menu a.on { color: #fff; background: var(--accent-grad); }

/* — кнопки: градиент, мягкая тень, приподнятие на hover (ощущение «дорого») — */
.btn, .login-card button, .reply #send-btn {
  background: var(--accent-grad); border: none; color: #fff;
  box-shadow: var(--accent-glow), 0 1px 0 rgba(255,255,255,.15) inset;
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
@media (hover: hover) { .btn:hover, .login-card button:hover, .reply #send-btn:hover {
  filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: var(--accent-glow), 0 10px 26px -8px rgba(91,124,250,.6);
} }
.btn:active, .login-card button:active, .reply #send-btn:active { transform: translateY(0); filter: brightness(.98); }
.mini-btn, .filters select { box-shadow: var(--shadow-sm); }

/* — пузыри переписки: исходящие с градиентом и тенью, входящие со стеклянным бликом — */
.msg { box-shadow: var(--shadow-sm); }
.msg.out { background: var(--out-grad); box-shadow: 0 4px 16px -8px rgba(42,58,99,.7), 0 1px 0 rgba(255,255,255,.08) inset; }
.msg.in  { box-shadow: 0 1px 0 var(--hairline) inset, var(--shadow-sm); }
:root[data-theme="light"] .msg.out { box-shadow: 0 6px 16px -10px rgba(74,95,214,.4); }

/* — KPI-плитки: стекло с верхним бликом, крупные градиентные числа, парение на hover — */
.kpi {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: 0 1px 0 var(--hairline) inset, var(--shadow-sm);
  border-color: var(--line);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
@media (hover: hover) { .kpi:hover { transform: translateY(-3px); box-shadow: 0 1px 0 var(--hairline) inset, var(--shadow); border-color: var(--raise); } }
.kpi .k-val { font-size: 32px; }
.kpi.accent .k-val, .kpi.purple .k-val {
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.kpi.purple .k-val { background: linear-gradient(135deg, var(--purple-strong), var(--line2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* — панели дашборда: стеклянный подъём — */
.panel-box { box-shadow: 0 1px 0 var(--hairline) inset, var(--shadow-sm); }

/* — карточки/списки: тонкая тень для отрыва от холста — */
.login-card { box-shadow: var(--shadow-lg); }
.login-card h1 {
  background: linear-gradient(120deg, var(--text), var(--accent-hi));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* — аватарки: тонкое кольцо-обводка, премиальнее плоского круга — */
.avatar { box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }

/* — активный диалог: акцентная планка + лёгкая подложка-градиент — */
.lead-item.active {
  background: linear-gradient(90deg, var(--accent-weak), transparent 60%), var(--panel2);
}

/* — бейдж непрочитанных: градиент + свечение — */
.badge { background: var(--accent-grad); box-shadow: var(--accent-glow); }

/* — поле ответа в фокусе и инпуты карточки: мягче — */
.reply textarea:focus, .card-row input:focus, .card-row select:focus,
.card-row textarea:focus, .login-card input:focus {
  box-shadow: 0 0 0 3px var(--accent-weak); border-color: var(--accent);
}

/* — заголовки страниц: чуть благороднее — */
.page h2 { background: linear-gradient(120deg, var(--text), var(--accent-hi));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ===== задачи менеджеру (в карточке + бейдж в списке) ===== */
.task-chip { display: flex; align-items: center; gap: 7px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; font-size: 12.5px; margin-bottom: 5px; }
.task-chip.done { opacity: .6; }
.task-chip.done .task-text { text-decoration: line-through; }
.task-chip .task-text { flex: 1; }
.task-chip .task-check { background: none; border: none; cursor: pointer; font-size: 15px;
  line-height: 1; color: var(--accent-hi); padding: 0; }
.pill.task-pill { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }

/* ===== пер-лид таблица на дашборде ===== */
.lead-stats-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ls-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; cursor: pointer; }
#lead-stats-table td { vertical-align: middle; }
/* колонка "Лид" закреплена слева - видна при горизонтальной прокрутке таблицы */
#lead-stats-table th:first-child, #lead-stats-table td:first-child, #lead-stats-table tfoot td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--panel);
  box-shadow: 1px 0 0 var(--line); min-width: 150px; }
#lead-stats-table thead th:first-child { z-index: 3; }
.ls-name a { font-weight: 600; }
.ls-name .ls-nick { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
#lead-stats-table .ls-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#lead-stats-table .ls-earned { color: var(--ok); font-weight: 700; }
#lead-stats-table .ls-mail { color: var(--muted); font-size: 12.5px; }
.ls-tasks { margin-left: 6px; font-size: 11px; color: var(--warn-text); }
.ls-payout { width: 68px; text-align: right; }
.ls-comment { width: 100%; min-width: 130px; }
.ls-broker, .ls-payout, .ls-comment { background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 7px; font-size: 12.5px; font-family: inherit; }
.ls-broker:focus, .ls-payout:focus, .ls-comment:focus { border-color: var(--accent); outline: none; }
.ls-taskinput { width: 140px; max-width: 100%; background: var(--panel2); color: var(--text);
  border: 1px solid var(--accent); border-radius: 7px; padding: 4px 7px; font-size: 12.5px;
  font-family: inherit; box-shadow: 0 0 0 3px var(--accent-weak); }
.ls-taskinput:focus { outline: none; }
/* кнопка "+ запись" в колонке ЗАДАЧА: компактная, в одну строку (не раздувать pill'ом) */
.ls-addtask { white-space: nowrap; padding: 5px 12px; font-size: 12px; line-height: 1.2; }

/* ===== цветные пилюли статусов (зелёный = в клубе/деп, красный = отвал и т.д.) ===== */
.pill.t-ok      { color: var(--ok);      background: rgba(52,211,153,.14);  border-color: transparent; }
.pill.t-warn    { color: var(--warn-text); background: rgba(251,191,36,.15); border-color: transparent; }
.pill.t-danger  { color: var(--danger);  background: rgba(248,113,113,.15);  border-color: transparent; }
.pill.t-accent  { color: var(--accent-hi); background: var(--accent-weak);   border-color: transparent; }
.pill.t-faint, .pill.t-muted { color: var(--muted); background: var(--panel2); border-color: var(--line); }

/* ===== лента задач/комментариев: тело с автором ===== */
.task-chip { align-items: flex-start; }
.task-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.task-body .task-text { white-space: normal; word-break: break-word; }
.task-meta { font-size: 10.5px; color: var(--faint); }
.task-chip.task-batch { background: var(--accent-weak); border: 1px solid var(--accent); }
.task-mass { display: inline-block; font-size: 10.5px; color: var(--accent-hi);
  font-weight: 600; margin-right: 6px; }
/* тост-уведомления (массовые задачи и т.п.) */
#toast-box { position: fixed; right: 18px; bottom: 18px; z-index: 400; display: flex;
  flex-direction: column; gap: 8px; max-width: min(92vw, 340px); }
.toast { background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--r); padding: 12px 14px;
  font-size: 13.5px; box-shadow: var(--shadow-lg); cursor: pointer; animation: toast-in .25s ease; }
.toast.toast-out { opacity: 0; transform: translateY(6px); transition: .35s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.task-add-row { display: flex; gap: 6px; margin-top: 8px; }
.task-add-row input { flex: 1; min-width: 0; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 13px; }
.task-add-row input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-weak); }

/* ===== альбом фото (несколько картинок одним блоком, как в Telegram) ===== */
.msg.msg-has-album { padding: 4px; max-width: 360px; }
.msg-album { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px;
  border-radius: 11px; overflow: hidden; }
.msg-album.n1 { grid-template-columns: 1fr; }
.msg-album .album-img { width: 100%; height: 128px; object-fit: cover; display: block;
  margin: 0; border-radius: 0; max-width: none; max-height: none; cursor: zoom-in; }
/* 3 картинки: первая на всю ширину сверху, две снизу */
.msg-album.n3 .album-img:first-child { grid-column: span 2; height: 150px; }
.album-cap { padding: 6px 8px 2px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ===== палитра быстрых фраз (по "/" в поле ответа) ===== */
.phrase-panel { position: absolute; bottom: calc(100% + 10px); left: 0; right: 0; z-index: 30;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 5px; max-height: 300px; overflow-y: auto; }
.phrase-item { display: block; width: 100%; text-align: left; background: none; border: none;
  border-radius: 9px; padding: 8px 10px; cursor: pointer; color: var(--text); }
.phrase-item.sel { background: var(--accent-weak); }
@media (hover: hover) { .phrase-item:hover { background: var(--accent-weak); } }
.phrase-item .ph-head { display: flex; align-items: baseline; gap: 8px; }
.phrase-item .ph-title { font-weight: 600; font-size: 13px; }
.phrase-item .ph-cat { font-size: 11px; color: var(--muted); }
.phrase-item .ph-preview { display: block; font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.phrase-item.sel .ph-title { color: var(--accent-hi); }

/* ===== сортировка пер-лид таблицы ===== */
#lead-stats-table th.ls-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
@media (hover: hover) { #lead-stats-table th.ls-sortable:hover { color: var(--accent-hi); } }

/* ===== разбивка менеджера по каналам (Макс) ===== */
#manager-table .mgr-total td { font-weight: 600; border-top: 1px solid var(--line); }
#manager-table .mgr-sub td { color: var(--muted); font-size: 12.5px; padding-top: 4px; padding-bottom: 4px; }
#manager-table .mgr-sub td:first-child { padding-left: 18px; }

/* ===== шкала плана по депозитам в KPI ===== */
.kpi-gauge { margin-top: 8px; }
.kg-track { height: 6px; border-radius: 6px; background: var(--panel2); overflow: hidden; border: 1px solid var(--line); }
.kg-fill { height: 100%; background: var(--accent-grad); transition: width var(--t); }
.kg-fill.hit { background: linear-gradient(135deg, #34d399, #10b981); }
.kg-lbl { font-size: 10.5px; color: var(--faint); margin-top: 3px; }

/* ===== логин LAGCRM: значок-молния + слоган ===== */
.login-card .brand-mark { font-size: 36px; line-height: 1; text-align: center; margin-bottom: 2px;
  filter: drop-shadow(0 5px 14px rgba(91,124,250,.55)); }
.login-card h1 { margin-bottom: 2px; }
.login-tag { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.login-hint { text-align: center; color: var(--faint); font-size: 11.5px; line-height: 1.45; margin: 8px 0 0; }

/* ===== переключатель колонок таблицы ===== */
.ls-colwrap { position: relative; }
.col-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 170px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px; }
.col-menu .col-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
@media (hover: hover) { .col-menu .col-item:hover { background: var(--accent-weak); } }

/* ===== компактная таблица (по экспертам и др. широкие сводки) ===== */
.tbl-compact th, .tbl-compact td { padding: 6px 8px; font-size: 12.5px; white-space: nowrap; }
.tbl-compact th { font-size: 11px; }

/* ===== панель фильтров пер-лид таблицы ===== */
.f-panel { min-width: 220px; padding: 10px; }
.f-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.f-row span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.f-row select { width: 100%; }
.f-reset { width: 100%; margin-top: 6px; justify-content: center; }
.f-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
  margin-left: 5px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1; }

/* ===== вкладки карточки лида (Инфо / Заметки) ===== */
.card-tabs { display: flex; gap: 4px; margin: 10px 0 12px; padding: 3px; background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: 9px; }
.card-tab { flex: 1; padding: 6px 8px; border: none; border-radius: 7px; background: transparent;
  color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all var(--t); }
@media (hover: hover) { .card-tab:hover { color: var(--text); } }
.card-tab.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
#card-tab-notes textarea { min-height: 110px; }

/* ===== вкладки дашборда (Обзор / Лиды) ===== */
.dash-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-tabs { display: flex; gap: 4px; padding: 3px; background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: 10px; }
.dash-tab { padding: 7px 16px; border: none; border-radius: 7px; background: transparent;
  color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all var(--t); }
@media (hover: hover) { .dash-tab:hover { color: var(--text); } }
.dash-tab.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.14); }

/* поиск на всю ширину под заголовком таблицы */
.ls-search-full { width: 100%; max-width: none; margin: 0 0 12px; }

/* ===== секции внутри единой панели Фильтр ===== */
.f-sec-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--faint); margin: 12px 0 6px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.f-sec-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.f-cols { display: flex; flex-direction: column; gap: 1px; }

/* ===== колонка динамики: дельта спред/баланс день-ко-дню ===== */
.ls-dyn { padding: 4px 8px !important; }
.dyn-btn { display: flex; flex-direction: column; gap: 2px; padding: 3px 6px; border: 1px solid transparent;
  border-radius: 6px; background: transparent; cursor: pointer; font: inherit; text-align: left; width: 100%; }
@media (hover: hover) { .dyn-btn:hover { border-color: var(--line); background: var(--panel); } }
.dyn-line { font-size: 11px; color: var(--muted); white-space: nowrap; }
.dyn-up { color: var(--ok); font-weight: 600; }
.dyn-down { color: var(--danger); font-weight: 600; }
.dyn-flat { color: var(--faint); }

/* ===== модалка истории динамики ===== */
.fx-hist-modal { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.fx-hist-card { background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; width: min(540px, 96vw); max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.fx-hist-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fx-hist-chart { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.fx-hist-chart:first-child { border-top: none; }
.fx-hist-lbl { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 2px; }

/* ===== фильтры инбокса под значком-воронкой (компактная шапка списка) ===== */
.leads-search-row { display: flex; align-items: center; gap: 8px; }
.leads-search-row .leads-search { flex: 1; }
.leads-search-row .ls-colwrap { position: relative; flex: 0 0 auto; }
.filter-btn { position: relative; width: 38px; height: 38px; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2);
  color: var(--muted); cursor: pointer; transition: all var(--t); }
@media (hover: hover) { .filter-btn:hover { border-color: var(--accent); color: var(--text); } }
.filter-btn .f-badge { position: absolute; top: -5px; right: -5px; }
/* панель фильтров инбокса выпадает слева (у правого края колонки) */
#f-panel { right: 0; left: auto; min-width: 230px; }
#f-panel .f-row select { width: 100%; }

/* ===== вкладка Лиды на весь экран (снимаем ограничение ширины страницы) ===== */
.page.wide.dash-full { max-width: none; }

/* ===== раскрывающиеся каналы у мультиканальных менеджеров ===== */
.mgr-toggle { cursor: pointer; user-select: none; }
@media (hover: hover) { .mgr-toggle:hover td { background: var(--panel); } }
.mgr-caret { display: inline-block; width: 12px; color: var(--muted); font-size: 10px; transition: transform var(--t); }
#payout-table .mgr-total td { font-weight: 600; border-top: 1px solid var(--line); }
#payout-table .mgr-sub td { color: var(--muted); font-size: 12.5px; padding: 4px 12px; }
#payout-table .mgr-sub td:first-child { padding-left: 18px; }

/* ===== единый стиль селектов (свои стрелки вместо системных «квадратов») ===== */
.f-panel select, .col-menu select, .filters select, .leads-filters select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 30px 8px 11px; font-family: inherit; font-size: 13px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color var(--t), box-shadow var(--t); }
@media (hover: hover) { .f-panel select:hover, .col-menu select:hover, .filters select:hover, .leads-filters select:hover { border-color: var(--accent); } }
.f-panel select:focus, .col-menu select:focus, .filters select:focus, .leads-filters select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); outline: none; }
.f-panel select option, .col-menu select option, .filters select option, .leads-filters select option {
  background: var(--bg); color: var(--text); }

/* ================= РАЗДЕЛ «МЕНЕДЖЕРЫ» ================= */
/* чипы-переключатели менеджеров */
.mgr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mgr-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel2);
  color: var(--text); cursor: pointer; transition: all var(--t); min-width: 120px; }
@media (hover: hover) { .mgr-chip:hover { border-color: var(--accent); transform: translateY(-1px); } }
.mgr-chip.on { border-color: var(--accent); background: var(--accent-weak); box-shadow: 0 2px 10px var(--accent-weak); }
.mgr-chip-name { font-weight: 700; font-size: 13.5px; }
.mgr-chip-sub { font-size: 11.5px; color: var(--muted); }

/* верхний грид: план-кольцо + KPI/игнор */
.mgr-grid { display: grid; grid-template-columns: 300px 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
@media (max-width: 900px) { .mgr-grid { grid-template-columns: 1fr; } }
.mgr-plan { text-align: center; }
.ring { width: 150px; height: 150px; margin: 6px auto 2px; display: block; }
.mgr-plan-nums { display: flex; justify-content: space-around; margin: 8px 0 14px; }
.mgr-plan-nums div { display: flex; flex-direction: column; }
.mgr-plan-nums b { font-size: 20px; font-weight: 800; }
.mgr-plan-nums b.ok-txt { color: var(--ok); }
.mgr-plan-nums span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

/* KPI менеджера */
.mgr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mgr-kpi { background: var(--panel2); border: 1px solid var(--line-soft); border-radius: 11px; padding: 12px 14px; }
.mk-val { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.mk-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mk-sub { font-size: 11px; color: var(--faint); margin-top: 3px; }

/* игнор/молчание */
.mgr-ignore { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mi-card { border-radius: 11px; padding: 12px 14px; border: 1px solid var(--line-soft); }
.mi-silent { background: linear-gradient(135deg, var(--warn-weak, rgba(230,160,30,.10)), transparent); }
.mi-optout { background: linear-gradient(135deg, var(--danger-weak, rgba(220,60,60,.10)), transparent); }
.mi-val { font-size: 24px; font-weight: 800; }
.mi-lbl { font-size: 12.5px; font-weight: 600; }
.mi-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* воронка: этап | цветной бар | число лидов | конверсия (число вынесено из бара - читаемо) */
.funnel { display: flex; flex-direction: column; gap: 9px; }
.funnel-head, .fn-row { display: grid; grid-template-columns: 140px 1fr 60px 60px; align-items: center; gap: 14px; }
.funnel-head { margin-bottom: 4px; }
.funnel-head span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); text-align: right; }
.funnel-head span:nth-child(1), .funnel-head span:nth-child(2) { text-align: left; }
.fn-label { font-size: 13.5px; color: var(--text); font-weight: 500; }
.fn-bar-wrap { height: 26px; background: var(--panel2); border-radius: 7px; overflow: hidden; }
.fn-bar { height: 100%; border-radius: 7px; transition: width .5s ease; min-width: 3px; opacity: .92; }
.fn-count-cell { text-align: right; font-size: 14px; font-weight: 700; color: var(--text); }
.fn-conv-cell { text-align: right; }
.fn-conv { font-size: 12.5px; font-weight: 700; color: var(--accent-hi); }
.fn-conv.fn-start { color: var(--faint); font-weight: 500; }

/* чип сводки "Все менеджеры" - выделен */
.mgr-chip-all { border-color: var(--accent); background: var(--accent-weak); }
.mgr-chip-all.on { box-shadow: 0 2px 12px var(--accent-weak); }
/* читаемость раздела: подписи посветлее */
.mk-lbl, .mi-lbl { color: var(--text); opacity: .85; }
.mgr-kpi { background: var(--panel); }

/* под-фильтр по каналам внутри карточки менеджера */
.mgr-chan-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mcf-lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; }
.mcf-chip { padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2);
  color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; transition: all var(--t); }
@media (hover: hover) { .mcf-chip:hover { border-color: var(--accent); } }
.mcf-chip.on { border-color: var(--accent); background: var(--accent-weak); color: var(--text); font-weight: 600; }
.mcf-sub { color: var(--muted); font-size: 11px; }
.mcf-chip.on .mcf-sub { color: var(--accent-hi); }


/* таблица лидов широкая (много колонок) → скроллим ВНУТРИ карточки, а не вываливаем в
   серую зону страницы справа. Липкий заголовок липнет к контейнеру скролла. */
#tab-leads .tbl-scroll { overflow-x: auto; max-width: 100%; }
#lead-stats-table thead th { position: sticky; top: 0; z-index: 5;
  background: var(--panel); box-shadow: 0 1px 0 var(--line); }
@media (max-width: 768px) {
  #lead-stats-table thead th { position: static; }
}

/* конверсии план/факт в карточке менеджера */
.conv-list { display: flex; flex-direction: column; gap: 10px; }
.conv-row { display: flex; flex-direction: column; gap: 6px; }
.conv-head { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 12px; }
.conv-lbl { font-size: 13.5px; color: var(--text); }
.conv-fact { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.conv-fact.conv-ok { color: var(--ok); }
.conv-fact.conv-bad { color: var(--danger); }
.conv-plan { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* полоска: заполнение = факт, вертикальная риска = план */
.conv-bar-track { position: relative; height: 8px; background: var(--panel2); border-radius: 5px; }
.conv-bar-fill { height: 100%; border-radius: 5px; transition: width .5s ease; }
.conv-bar-fill.ok { background: var(--ok); }
.conv-bar-fill.bad { background: var(--danger); }
.conv-bar-plan { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text);
  opacity: .55; border-radius: 2px; }
/* одноканальный менеджер: название канала статично (без кнопок), чтобы layout не прыгал */
.mcf-single { font-size: 13px; color: var(--text); font-weight: 600; padding: 5px 4px; }

/* график динамики метрик по дням */
.metrics-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.metrics-head select { font-size: 12.5px; }
.mh-cur { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; }
.mh-hint { font-size: 11px; margin-top: 8px; }

/* ---------- вкладка «Источники» (сквозная аналитика по метке диплинка) ---------- */
#tab-sources .an-funnel { padding: 18px 20px; margin-bottom: 14px; }
#tab-sources .an-funnel .cap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#tab-sources .an-funnel .cap .t { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
#tab-sources .fn-row { display: grid; grid-template-columns: 172px 1fr 76px; align-items: center; gap: 16px; padding: 7px 0; }
#tab-sources .fn-row .lbl { color: var(--muted); font-size: 13.5px; }
#tab-sources .fn-track { display: block; height: 10px; border-radius: 6px; background: var(--accent-weak); overflow: hidden; }
/* display:block обязателен - на span'е inline ширина в % не применяется (бары были всегда «полные») */
#tab-sources .fn-fill { display: block; height: 100%; border-radius: 6px; background: var(--accent-grad); box-shadow: var(--accent-glow); }
#tab-sources .fn-fill.money { background: linear-gradient(135deg, #4bd6a0 0%, var(--ok) 100%); box-shadow: 0 6px 20px -6px rgba(52,211,153,.5); }
#tab-sources .fn-row .val { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 15px; }
#tab-sources .fn-row .val.money { color: var(--ok); }

#tab-sources .an-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 820px) { #tab-sources .an-kpis { grid-template-columns: repeat(2, 1fr); } }
#tab-sources .an-kpi { padding: 15px 17px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow), inset 0 1px 0 var(--hairline); }
#tab-sources .an-kpi .v { font-size: 26px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#tab-sources .an-kpi .l { font-size: 12px; color: var(--muted); margin-top: 3px; }
#tab-sources .an-kpi.money { background: linear-gradient(180deg, rgba(52,211,153,.09), var(--panel)); border-color: rgba(52,211,153,.28); }
#tab-sources .an-kpi.money .v { color: var(--ok); }

table.an { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
table.an th, table.an td { padding: 12px 14px; text-align: right; white-space: nowrap; }
table.an th { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 500; border-bottom: 1px solid var(--line); }
table.an td { border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
table.an th:first-child, table.an td:first-child { text-align: left; }
table.an tbody tr { transition: background var(--t); }
@media (hover: hover) { table.an tbody tr:hover { background: var(--raise); } }
table.an tbody tr.top td { background: var(--accent-weak); }
table.an .src { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
table.an .src .nm { display: flex; align-items: center; gap: 9px; font-weight: 620; }
table.an .src .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
table.an tr.top .src .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
table.an .src .microbar { height: 4px; border-radius: 3px; background: linear-gradient(135deg, #4bd6a0, var(--ok)); }
table.an .cr { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 13px; }
table.an .cr small { color: var(--faint); }
table.an .cr.hi { color: var(--ok); } table.an .cr.mid { color: var(--accent-hi); }
table.an .cr.lo { color: var(--muted); } table.an .cr.zero { color: var(--faint); }
table.an td.money { color: var(--ok); font-weight: 600; }
table.an td.money.zero { color: var(--faint); font-weight: 400; }
table.an tfoot td { border-top: 2px solid var(--line); border-bottom: 0; font-weight: 700; padding-top: 13px; }
.an-empty { color: var(--muted); font-size: 14px; padding: 26px; text-align: center; }

/* значок «выплата зафиксирована брокером» в таблице лидов (спред/лоты + CPA) */
.pay-lock { font-size: 11px; opacity: .85; margin-left: 2px; vertical-align: middle; }
#lead-stats-table td.ls-earned input.ls-payout { border-color: var(--ok); }

/* раскрывающийся список лидов менеджера на вкладке «Менеджеры» */
.mgr-leads { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.mgr-leads > summary { cursor: pointer; font-size: 13px; color: var(--accent); font-weight: 600; list-style: none; user-select: none; }
.mgr-leads > summary::-webkit-details-marker { display: none; }
.mgr-leads > summary::before { content: '▸ '; color: var(--muted); }
.mgr-leads[open] > summary::before { content: '▾ '; }
.mgr-leads-list { margin-top: 8px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.mgr-lead-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 7px 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--text); transition: background var(--t); }
@media (hover: hover) { .mgr-lead-row:hover { background: var(--raise); } }
.mll-name { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mll-status { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--accent-weak); color: var(--accent-hi); white-space: nowrap; }
.mll-chan { font-size: 12px; white-space: nowrap; }

/* ---------- Переезд «как в айфоне»: пошаговый процесс ---------- */
.mig { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 460px;
  margin: 18px 0; padding: 26px 22px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow), inset 0 1px 0 var(--hairline); }
.mig-ring { position: relative; width: 120px; height: 120px; }
.mig-svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.mig-bg { fill: none; stroke: var(--line); stroke-width: 8; }
.mig-fg { fill: none; stroke: url(#miggrad); stroke: var(--accent); stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 6px var(--accent-glow, rgba(99,102,241,.5))); }
.mig-pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-weight: 800;
  letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.mig-steps { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.mig-step { display: flex; align-items: center; gap: 12px; font-size: 14px; transition: opacity .3s, color .3s; }
.mig-step .mig-mark { width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; font-size: 14px; background: var(--panel2, var(--bg)); border: 1px solid var(--line); }
.mig-step.wait { opacity: .5; color: var(--muted); }
.mig-step.run { color: var(--text); font-weight: 600; }
.mig-step.run .mig-mark { border-color: var(--accent); background: var(--accent-weak); }
.mig-step.ok { color: var(--text); }
.mig-step.ok .mig-mark { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 800; }
.mig-spin { width: 14px; height: 14px; border: 2px solid var(--accent-weak); border-top-color: var(--accent);
  border-radius: 50%; display: inline-block; animation: migspin .7s linear infinite; }
@keyframes migspin { to { transform: rotate(360deg); } }
.mig-stats { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.6; }
.mig-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.mig-err { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .mig-spin { animation: none; } .mig-fg { transition: none; } }

/* ---------- Предпросмотр лида на дашборде (диалог + шторка) ---------- */
.lp-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(10,12,20,.55); backdrop-filter: blur(3px); padding: 24px; overscroll-behavior: contain; }
/* пока открыта модалка лида — страница под ней не скроллится */
body.lp-lock { overflow: hidden; }
.lp-card { display: flex; width: min(1000px, 96vw); height: min(720px, 90vh); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 40px 100px -30px rgba(0,0,0,.6);
  overflow: hidden; }
.lp-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); background: var(--panel); }
.lp-who { min-width: 0; }
.lp-name { font-weight: 700; font-size: 15px; }
.lp-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.lp-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px;
  background: var(--bg); overscroll-behavior: contain; }
.lp-msg { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.lp-msg.in { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.lp-msg.out { align-self: flex-end; background: var(--accent-weak); border-bottom-right-radius: 5px; }
.lp-msg .m { display: block; font-size: 10.5px; color: var(--faint); margin-top: 4px; }
.lp-empty { color: var(--muted); font-size: 13px; text-align: center; margin: auto; }
.lp-side { width: 300px; flex: none; border-left: 1px solid var(--line); padding: 18px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px; background: var(--panel); }
.lp-side h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint);
  font-family: var(--mono, ui-monospace, Menlo, monospace); }
.lp-field { display: flex; flex-direction: column; gap: 6px; }
.lp-field select, .lp-field textarea { width: 100%; font: inherit; font-size: 13.5px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--text); }
.lp-field textarea { resize: vertical; min-height: 70px; }
.lp-info { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.lp-info .row { display: flex; justify-content: space-between; gap: 10px; }
.lp-info .row .k { color: var(--muted); } .lp-info .row .v { font-weight: 600; text-align: right; }
/* таймлайн истории статусов */
.lp-sh { display: flex; flex-direction: column; gap: 0; }
.lp-sh-row { display: flex; gap: 9px; padding: 0 0 11px; position: relative; }
.lp-sh-row:not(:last-child)::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: -2px;
  width: 1px; background: var(--line); }
.lp-sh-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 4px; }
.lp-sh-body { min-width: 0; }
.lp-sh-move { font-size: 13px; line-height: 1.35; }
.lp-sh-meta { font-size: 11px; color: var(--faint); margin-top: 1px; font-variant-numeric: tabular-nums; }
/* заметка в модалке — крупнее */
#lp-note { min-height: 120px; }
/* теги-пузыри в модалке */
.lp-tags-box { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-tags-empty { font-size: 12.5px; color: var(--faint); }
.lp-tag { font: inherit; font-size: 12.5px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted); transition: all var(--t); }
@media (hover: hover) { .lp-tag:hover { border-color: var(--accent); color: var(--text); } }
.lp-tag.on { background: var(--accent-weak); border-color: var(--accent); color: var(--accent-hi); font-weight: 600; }
/* задачи (следующие действия) в модалке */
.lp-tasks { display: flex; flex-direction: column; gap: 5px; }
.lp-tasks:not(:empty) { margin-top: 7px; }
.lp-task { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; padding: 6px 8px; border-radius: 8px;
  background: var(--panel2); border: 1px solid var(--line); transition: background var(--t); }
@media (hover: hover) { .lp-task:hover { background: var(--accent-weak); } }
.lp-task-box { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 5px; border: 1.5px solid var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.lp-task.done .lp-task-box { background: var(--accent); border-color: var(--accent); }
.lp-task-txt { font-size: 13px; line-height: 1.35; }
.lp-task.done .lp-task-txt { text-decoration: line-through; color: var(--muted); }
.lp-task-who { display: block; font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.lp-task-add { display: flex; gap: 6px; }
.lp-task-add input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel2); color: var(--text); }
.lp-task-add input:focus { outline: none; border-color: var(--accent); }
.lp-task-add button { flex: none; width: 34px; border: 0; border-radius: 8px; cursor: pointer; background: var(--accent);
  color: #fff; font-size: 18px; font-weight: 700; line-height: 1; }
@media (hover: hover) { .lp-task-add button:hover { opacity: .9; } }
/* медиа в пузырях модалки */
.lp-media-img { display: block; max-width: 220px; max-height: 260px; border-radius: 10px; margin-bottom: 4px; cursor: pointer; }
.lp-media-video { display: block; max-width: 240px; max-height: 280px; border-radius: 10px; margin-bottom: 4px; }
.lp-media-audio { display: block; width: 230px; max-width: 100%; height: 36px; margin: 2px 0 4px; }
.lp-media-file { display: inline-block; margin-bottom: 4px; color: var(--accent-hi); font-size: 13px; }
.lp-tick { color: var(--faint); }
.lp-tick.read { color: var(--accent-hi); }
.lp-info .row .v.money { color: var(--ok); font-variant-numeric: tabular-nums; }
.lp-open { margin-top: auto; display: block; text-align: center; padding: 11px; border-radius: var(--r-sm);
  background: var(--accent); color: #fff; font-weight: 650; font-size: 13.5px; text-decoration: none; transition: opacity var(--t); }
@media (hover: hover) { .lp-open:hover { opacity: .9; } }
.lp-saved { font-size: 11.5px; color: var(--ok); }
@media (max-width: 720px) { .lp-card { flex-direction: column; height: 92vh; } .lp-side { width: auto; border-left: 0; border-top: 1px solid var(--line); max-height: 42%; } }

/* композер в модалке предпросмотра лида */
.lp-composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.lp-composer textarea { flex: 1; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg); color: var(--text); resize: none; max-height: 120px; line-height: 1.4; }
.lp-composer textarea:focus { outline: none; border-color: var(--accent); }
.lp-composer button { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 18px; font-weight: 700; transition: opacity var(--t); }
@media (hover: hover) { .lp-composer button:hover { opacity: .9; } }
.lp-composer button:disabled { opacity: .5; cursor: default; }
.lp-composer .lp-icon-btn { background: transparent; color: var(--muted); font-size: 19px; font-weight: 400; }
@media (hover: hover) { .lp-composer .lp-icon-btn:hover { background: var(--bg); opacity: 1; } }
.lp-composer .lp-icon-btn.recording { color: #e5484d; background: rgba(229,72,77,.12); font-size: 14px; font-weight: 700;
  width: auto; min-width: 40px; padding: 0 12px; border-radius: 20px; }
.lp-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 0; }
.lp-files .lp-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 5px 8px; font-size: 12px; max-width: 190px; }
.lp-files .lp-chip img { width: 30px; height: 30px; object-fit: cover; border-radius: 6px; flex: none; }
.lp-files .lp-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.lp-files .lp-chip .x { cursor: pointer; color: var(--muted); font-weight: 700; flex: none; padding: 0 2px; }
@media (hover: hover) { .lp-files .lp-chip .x:hover { color: #e5484d; } }
.lp-msg .lp-att-note { font-size: 12.5px; opacity: .85; margin-bottom: 3px; }
.lp-msg.pending { opacity: .55; }

/* ---------- список запланированных сообщений в модалке ---------- */
.lp-sched { display: none; flex-direction: column; gap: 4px; padding: 8px 16px 0; }
.lp-sched.has { display: flex; }
.lp-sched-h { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.lp-sched-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px;
  background: var(--accent-weak); border: 1px solid var(--line); }
.lp-sched-when { flex: none; font-size: 12px; font-weight: 600; color: var(--accent-hi); font-variant-numeric: tabular-nums; }
.lp-sched-text { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-sched-cancel { flex: none; width: 22px; height: 22px; border: 0; border-radius: 6px; cursor: pointer;
  background: none; color: var(--muted); font-size: 13px; line-height: 1; transition: color var(--t), background var(--t); }
@media (hover: hover) { .lp-sched-cancel:hover { color: #fff; background: var(--danger, #e0556b); } }
.lp-sched-cancel:disabled { opacity: .5; cursor: default; }

/* ---------- отложенная отправка из модалки (правый клик по кнопке «→») ---------- */
.sched-pop { position: fixed; z-index: 9500; width: 236px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 8px; display: none; flex-direction: column; gap: 3px; animation: toast-in .16s ease; }
.sched-pop.open { display: flex; }
.sched-head { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); padding: 4px 8px 6px; }
.sched-preset { text-align: left; background: none; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--text); padding: 8px 10px; transition: background var(--t); }
@media (hover: hover) { .sched-preset:hover { background: var(--accent-weak); } }
.sched-custom { display: flex; gap: 6px; align-items: center; padding: 6px 6px 2px; margin-top: 4px;
  border-top: 1px solid var(--line-soft); }
.sched-custom input { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; padding: 7px 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--text);
  color-scheme: light dark; }
.sched-custom input:focus { outline: none; border-color: var(--accent); }
.sched-go { flex: none; background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 11px; transition: opacity var(--t); }
@media (hover: hover) { .sched-go:hover { opacity: .9; } }

/* ---------- онбординг-тур (демо): подсветка элемента + окошко ---------- */
.tour-ov { position: fixed; inset: 0; z-index: 9000; }
.tour-spot { position: absolute; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(10,12,22,.62);
  transition: all .3s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.tour-box { position: fixed; z-index: 9001; width: 300px; background: #fff; color: #14162e;
  border-radius: 16px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.55); padding: 18px 18px 14px;
  transition: top .3s, left .3s; }
:root[data-theme="dark"] .tour-box { background: #1a1d2b; color: #eceffa; }
.tour-t { font-size: 16px; font-weight: 750; letter-spacing: -.01em; margin-bottom: 7px; }
.tour-x { font-size: 13.5px; line-height: 1.5; color: #4d5372; }
:root[data-theme="dark"] .tour-x { color: #99a0bd; }
.tour-f { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour-n { font-size: 12px; color: #868ca8; margin-right: auto; font-variant-numeric: tabular-nums; }
.tour-skip { background: none; border: 0; color: #868ca8; font: inherit; font-size: 13px; cursor: pointer; padding: 6px 8px; }
@media (hover: hover) { .tour-skip:hover { color: #4d5372; } }
.tour-next { background: linear-gradient(135deg, #7c6ffb, #5a5bf3); color: #fff; border: 0; font: inherit;
  font-size: 13.5px; font-weight: 650; padding: 8px 16px; border-radius: 10px; cursor: pointer; }
@media (hover: hover) { .tour-next:hover { opacity: .92; } }

/* красивая кнопка выбора файла (вместо кривого нативного input) */
.file-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-native { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 12px; cursor: pointer;
  background: var(--accent-weak); color: var(--accent-hi); border: 1px solid var(--accent); font-weight: 600; font-size: 14px;
  transition: border-color var(--t), background var(--t); }
@media (hover: hover) { .file-btn:hover { border-color: var(--accent); background: var(--accent); color: #fff; } }
.file-name { font-size: 13px; color: var(--muted); }
.file-name.has { color: var(--text); font-weight: 600; }

/* галочки выбора менеджеров в массовой задаче */
.mgr-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.mgr-check { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 13.5px; transition: border-color var(--t), background var(--t); user-select: none; }
@media (hover: hover) { .mgr-check:hover { border-color: var(--raise); } }
.mgr-check:has(input:checked) { border-color: var(--accent); background: var(--accent-weak); color: var(--accent-hi); font-weight: 600; }
.mgr-check input { accent-color: var(--accent); }
/* Квадратик прячем и делаем кликабельным всё имя — выбор читается заливкой чипа.
   Только под @supports: без :has() подсветка не сработает, и спрятанный чекбокс
   означал бы, что выбор вообще ничем не виден. Убираем из виду, но не из фокуса:
   display:none выкинул бы поле из обхода по Tab. */
@supports selector(:has(*)) {
  .mgr-check input { position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .mgr-check { gap: 0; user-select: none; }
  .mgr-check:has(input:focus-visible) { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
}

/* ============================================================
   МОБИЛЬНАЯ ВЁРСТКА настроечных страниц (инбокс адаптирован выше отдельно).
   Таблицы Люди/Каналы/Фразы и карточки клиентов строились под десктоп;
   на телефоне они уезжали за экран. Здесь: срезаем второстепенные колонки,
   раскладываем панели в столбец, увеличиваем зоны нажатия.
   ============================================================ */
@media (max-width: 760px) {
  .page { padding: 18px 13px calc(var(--mnav-h) + 22px); }
  .page h2 { font-size: 19px; }
  .page h3 { margin: 20px 0 10px; }

  /* сгруппированное меню настроек: скроллится пальцем, не переносится в 3 ряда */
  /* -webkit-overflow-scrolling: touch убран сознательно: с iOS 13 инерция
     прокрутки и так включена по умолчанию, зато это свойство заставляет Safari
     обрезать position: fixed внутри контейнера — из-за него меню разделов было
     невидимым на айфоне. В Chromium свойство не делает ничего вовсе. */
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding: 10px 13px 2px; }
  .subnav::-webkit-scrollbar { display: none; }
  .nav-grp > summary { padding: 7px 12px; white-space: nowrap; }
  /* Выпадашка на всю ширину экрана, а не 190px в углу.
     top обязателен: базовое правило ставит calc(100% + 6px) в расчёте на
     position: absolute, но у fixed проценты считаются от ОКНА, а не от
     родителя — меню уезжало на 850px при экране 844, то есть целиком за
     нижний край. Открывалось, но увидеть его было нельзя.
     top: auto ставит меню на его естественное место — прямо под кнопкой,
     а зазор возвращаем отступом. */
  .nav-menu { position: fixed; left: 8px; right: 8px; width: auto; min-width: 0;
    top: auto; margin-top: 6px; }

  /* панель фильтров над таблицами: поиск на всю строку, кнопки под ним */
  .tm-bar { gap: 8px; }
  .tm-search { flex: 1 1 100%; }
  .tm-sel { flex: 1 1 auto; }
  .person-spacer { margin-left: 0; }

  /* КОМАНДА: оставляем имя, роль и удаление; остальное — в раскрытой строке.
     Селектор именно .tm-people, а не .tm-tbl: последний общий с таблицей
     каналов, и правило про «третью колонку — логин» прятало там «Статус».
     На телефоне состояние каналов из-за этого не было видно вообще. */
  .tm-people th:nth-child(3), .tm-people td:nth-child(3),   /* логин */
  .tm-people th:nth-child(5), .tm-people td:nth-child(5),   /* линии */
  .tm-people th:nth-child(6), .tm-people td:nth-child(6),   /* каналы */
  .tm-people th:nth-child(8), .tm-people td:nth-child(8),   /* email */
  .tm-people th:nth-child(9), .tm-people td:nth-child(9) {  /* активность */
    display: none;
  }
  /* КАНАЛЫ: имя + статус + действие */
  .ch-tbl th:nth-child(4), .ch-tbl td:nth-child(4),   /* логин */
  .ch-tbl th:nth-child(5), .ch-tbl td:nth-child(5),   /* спейс */
  .ch-tbl th:nth-child(6), .ch-tbl td:nth-child(6) {  /* ИИ */
    display: none;
  }
  .ch-name b { max-width: 46vw; }

  .tbl th, .tbl td { padding: 10px 7px; }
  .tm-detail > td { padding: 8px 10px 14px; }
  .tm-dgrid { flex-direction: column; align-items: stretch; gap: 12px; }
  .tm-dgrid .field, .tm-dgrid input, .tm-dgrid select { width: 100%; }
  .email-inp { width: 100%; max-width: none; }
  .tm-channels .chk { display: flex; margin: 0 0 10px; }

  /* БЫСТРЫЕ ФРАЗЫ: название и текст друг под другом, чтобы читалось */
  .tpl-tbl { table-layout: auto; }
  .tpl-tbl thead { display: none; }
  .tpl-tbl th.tpl-name, .tpl-tbl td.tpl-name { width: auto; }
  .sitem td.tpl-name { display: block; padding-bottom: 0; border-bottom: 0; }
  .sitem td.s-body:not(.tpl-name) { display: block; padding-top: 2px; }
  .sitem .s-preview { white-space: normal; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tpl-tbl td.tpl-drag { display: table-cell; vertical-align: top; }

  /* КЛИЕНТЫ: карточка и таблица фич в столбец */
  .cl-body { padding: 4px 10px 12px; }
  .cl-feat thead th:nth-child(4), .cl-feat td:nth-child(4),
  .cl-feat thead th:nth-child(5), .cl-feat td:nth-child(5) { display: none; }
  .cl-adduser .row { flex-direction: column; align-items: stretch; }
  .cl-adduser input, .cl-adduser select, .cl-adduser .btn { width: 100%; }
  .cl-sum { display: none; }

  /* ЗАЯВКИ НА ДЕМО: сводка в две колонки вместо пяти */
  .dr-stats { grid-template-columns: repeat(2, 1fr); }
  .ds-v { font-size: 20px; }

  /* БЕЗОПАСНОСТЬ: сессия в столбец, кнопки выхода на всю ширину */
  .sec-mgr-head { gap: 6px; }
  .sec-mgr-head .sec-logout { flex: 1 1 100%; margin-top: 6px; }
  .sec-sess { gap: 6px 10px; font-size: 12.5px; }
  .sec-dev { min-width: 0; flex: 1 1 100%; }

  /* ПЕРЕЕЗД: каналы списком, поля на всю ширину */
  .imp-list { flex-direction: column; gap: 10px; }
  .imp-chans-head { gap: 6px; }
  .mig-setup .row .field { max-width: none !important; flex: 1 1 100%; }

  /* трекинг: длинные URL не распирают экран */
  .tk-url { flex-wrap: wrap; }
  .tk-url .ev { width: 100%; }
  .tk-url code { flex: 1 1 auto; min-width: 0; font-size: 11px; }
}

/* пальцем удобнее по крупным целям, чем мышью по мелким */
@media (pointer: coarse) {
  /* Стрелку-раскрывашку нельзя растить отрицательными полями: таблица
     прокручивается вбок и обрезает всё, что вылезло за ячейку, — палец
     попадал только в правую половину. Даём ячейке ширину и делаем кнопку
     честным квадратом. */
  .tm-tbl th.tm-exp, .tm-tbl td.tm-exp { width: 38px; }
  .tm-caret, .sec-caret { padding: 0; margin: 0; width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center; }
  /* Строки с галочками: сама галочка 20px, но нажимают-то по всей строке.
     Поля слева — чтобы палец, попавший чуть левее квадратика, тоже сработал;
     отрицательный отступ возвращает строку на прежнее место. */
  .chk, .imp-ch, .mgr-check { min-height: 36px; }
  .chk, .imp-ch { padding-left: 6px; margin-left: -6px; }
  .btn-danger { width: 36px; height: 36px; }
  .mini-btn, .btn-ghost, .mini, .acc-arch, .sec-logout { min-height: 36px; }
  /* по классам перечислять бесполезно: новая галочка приедет мелкой.
     Берём все разом — они везде внутри <label>, вид не ломается. */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  /* крестик тега был 13x13, кружок цвета статуса 15x15 — пальцем в такое не попасть.
     Растим саму зону нажатия, а не рисунок: вид чипа не меняется. */
  .tag-chip .tag-del { padding: 9px 12px; margin: -9px -8px -9px -4px; }
  .sc-color { width: 22px; height: 22px; position: relative; }
  /* вверх-вниз у кружка пусто, вбок — подпись статуса в 7px.
     Поэтому зону тянем в основном по вертикали, вбок только на 3px,
     иначе кружок начнёт воровать нажатия у переименования. */
  .sc-color::after { content: ''; position: absolute; inset: -7px -3px; }
  .st-del { padding: 8px 7px; }
  .fmt-btn { min-width: 36px; min-height: 34px; }
  .topbar .icon-btn { min-width: 38px; min-height: 34px; }
  /* логотип — тоже ссылка (на «Чаты»), а был высотой всего 23px */
  .topbar .brand { display: inline-flex; align-items: center; min-height: 40px; }
  /* «назад» и «карточка клиента» в шапке чата — по ним жмут постоянно */
  .m-back, .m-card-btn { min-width: 40px; min-height: 40px; justify-content: center; }

  /* Отклик на нажатие. У строк списка был только :hover — мышиное состояние,
     которого на пальце нет: тапнул и до смены экрана ничего не происходит,
     ощущение подвисания. Гасим серую вспышку браузера и рисуем своё нажатие —
     это ровно то, чем приложение отличается от страницы. */
  .lead-item, .msheet-links a, .dash-tab, .tag-chip, .status-chip, .sec-grp > summary,
  .m-back, .m-card-btn, .id-act { -webkit-tap-highlight-color: transparent; }
  .lead-item:active, .msheet-links a:active, .sec-grp > summary:active { background: var(--panel2); }
  .dash-tab:active, .tag-chip:active, .m-back:active, .m-card-btn:active,
  .id-act:active { filter: brightness(.94); }
  /* Смайлик лежит ВНУТРИ поля ввода, поэтому растим его полями, а не размером:
     рисунок остаётся на месте, зона нажатия становится 34x38. Ширину берём
     ровно по свободной полосе справа (padding-right поля), чтобы кнопка не
     накрыла последние буквы строки. */
  .reply .ta-emoji { padding: 10px 8px; right: 2px; bottom: 1px; }
  /* Переключатель ИИ-автоответа — не галочка, а тумблер: правило «все checkbox
     20x20» ему не годится. Под палец делаем крупнее, бегунок следом за шириной.
     Вес селектора должен быть не ниже основного правила тумблера. */
  input[type=checkbox].card-ai-toggle { width: 44px; height: 26px; }
  input[type=checkbox].card-ai-toggle::after { width: 22px; height: 22px; }
  input[type=checkbox].card-ai-toggle:checked::after { left: 20px; }
  /* кружки действий FxPro в карточке и чипы тегов — по ним тыкают часто */
  .id-act { width: 36px; height: 36px; }
  .tag-chip { min-height: 32px; }
}
/* Подсказка «на домашний экран». Висит над панелью вкладок, ничего не двигает,
   закрывается крестиком и больше не возвращается. На десктопе не существует. */
.a2hs { display: none; }
@media (max-width: 768px) {
  .a2hs:not([hidden]) { display: flex; align-items: center; gap: 10px;
    position: fixed; z-index: 150; left: 10px; right: 10px;
    bottom: calc(var(--mnav-h) + 10px);
    padding: 10px 12px; border-radius: 14px;
    background: var(--panel); border: 1px solid var(--line);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45);
    animation: a2hs-up .22s ease; }
  .a2hs-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .a2hs-txt b { font-size: 13.5px; }
  .a2hs-txt span { font-size: 12px; color: var(--muted); }
  .a2hs-go { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px;
    background: var(--accent); color: #fff; font: inherit; font-weight: 650; font-size: 13px; }
  .a2hs-x { flex: none; width: 34px; height: 34px; border: 0; background: none;
    color: var(--muted); font-size: 15px; border-radius: 10px; }
}
@keyframes a2hs-up { from { transform: translateY(14px); opacity: 0; } }

/* полоска «нет связи»: висит поверх, никого не двигает и ничего не перекрывает —
   на телефоне это единственный способ понять, что список перестал жить */
.ws-strip { display: none; }
body.ws-down .ws-strip { display: block; position: fixed; z-index: 160;
  left: 50%; transform: translateX(-50%); white-space: nowrap;
  /* низ, а не верх: сверху пилюля накрывала имя клиента в шапке чата.
     Внизу под ней пустое место списка сообщений — ничего не перекрывает. */
  bottom: calc(var(--mnav-h) + 10px);
  /* цвет задан явно: --warn в светлой теме тёмно-коричневый (он для текста),
     на плашке с тёмными буквами это давало нечитаемое пятно */
  background: #f5b544; color: #2a1c02; font-size: 12.5px; font-weight: 650;
  padding: 7px 15px; border-radius: 999px; box-shadow: 0 10px 28px -12px rgba(0,0,0,.55);
  animation: pop var(--t); }
/* в открытом чате панель вкладок спрятана, а низ занимает композер */
body.ws-down.m-chat-open .ws-strip { bottom: calc(74px + env(safe-area-inset-bottom)); }


/* ============================================================
   ТАБЛИЦЫ ДАШБОРДА КАРТОЧКАМИ (телефон). Блок держим в конце файла
   осознанно: .tbl-compact и table.an задают cells nowrap/выравнивание
   ниже по файлу, и с той же силой селектора выигрывает тот, кто позже.
   ============================================================ */
@media (max-width: 768px) {
/* ---- таблицы дашборда карточками ----
   Шесть-девять колонок в 390px не помещаются никак: таблица скроллилась
   вбок внутри себя, и половина цифр была не видна, пока не домотаешь.
   Строка становится карточкой: первая ячейка — заголовок, остальные —
   плитки «подпись сверху, число снизу» (подписи проставляет dashboard.js). */
/* min-width держал таблицу шире экрана ради скролла — карточкам он мешает */
.m-stack, .tbl-scroll .m-stack { display: block; min-width: 0; width: 100%; }
.m-stack tbody, .m-stack tfoot { display: block; }
.m-stack thead { display: none; }
.m-stack tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px 10px; padding: 12px 13px; margin-bottom: 9px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; }
/* !important: разделители строк (.mgr-total td, tfoot td, .fn-total td) заданы
   точечно по id и в карточках читаются как случайные обрывки линий */
.m-stack td, .m-stack tfoot td, .m-stack .mgr-total td, .m-stack .fn-total td {
  display: block; border: 0 !important; padding: 0; font-size: 14.5px; font-weight: 650;
  text-align: left; white-space: normal; overflow-wrap: anywhere;
  min-width: 0; }   /* иначе длинная подпись («зарегистрировался») распирает плитку на соседнюю */
.m-stack td::before { content: attr(data-label); display: block; font-size: 9.5px;
  line-height: 1.25; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  color: var(--faint); margin-bottom: 2px; }
/* название строки (эксперт, менеджер, источник) — заголовок карточки */
.m-stack td:first-child, .m-stack td[colspan] { grid-column: 1 / -1; font-size: 15px; font-weight: 700; }
.m-stack td:first-child::before, .m-stack td[colspan]::before { display: none; }
.m-stack td:empty { display: none; }
/* воронка: выравнивание задано по id (#funnel-table), перебиваем той же силой,
   а подсветку «где течёт» оставляем — плиткой она читается даже лучше */
#funnel-table.m-stack .fn-cell { text-align: left; }
.m-stack .fn-cell.leak { border-radius: 8px; padding: 3px 7px; }
.m-stack tfoot tr, .m-stack tr.total { background: var(--accent-weak); border-color: transparent; }
/* каналы внутри менеджера — вложенной карточкой, чтобы не путались с менеджерами */
.m-stack tr.mgr-sub { margin-left: 14px; background: var(--panel2); }
.m-stack tr.muted-row td { color: var(--muted); }
.m-stack .ex-caret, .m-stack .mgr-caret { color: var(--accent-hi); }
/* внутри развёрнутой детали таблицы остаются таблицами — там свой мелкий разбор */
.m-stack tr.ex-detail table td, .m-stack tr.ex-detail table th { display: table-cell; }
.m-stack tr.ex-detail table td::before { display: none; }
}

/* ============================================================
   РАЗДЕЛЫ-РАСКРЫВАШКИ на страницах настроек (.sec-grp)
   Страница «Настройки → Каналы» была одним свитком на три экрана телефона:
   подключение, каналы, спейсы, статусы, поля, теги. Теперь это разделы;
   на широком экране открыты все, на телефоне — только первый (см. скрипт
   в шаблоне: атрибут open из CSS не переключить).
   ============================================================ */
.sec-grp { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
  margin: 0 0 12px; overflow: hidden; }
.sec-grp > summary { list-style: none; cursor: pointer; user-select: none;
  padding: 14px 16px; font-size: 15.5px; font-weight: 650; color: var(--text);
  display: flex; align-items: center; gap: 10px; transition: background var(--t); }
.sec-grp > summary::-webkit-details-marker { display: none; }
.sec-grp > summary::after { content: '▾'; margin-left: auto; font-size: 11px; color: var(--muted);
  transition: transform var(--t); }
.sec-grp[open] > summary::after { transform: rotate(180deg); }
@media (hover: hover) { .sec-grp > summary:hover { background: var(--panel2); } }
.sec-grp[open] > summary { border-bottom: 1px solid var(--line-soft); }
.sec-grp .sec-body { padding: 4px 16px 18px; }
.sec-grp .sec-body > h3:first-child { margin-top: 8px; }
/* внутри раздела заголовок уже есть в шапке — второй ни к чему */
@media (max-width: 768px) {
  .sec-grp > summary { padding: 15px 14px; }
  .sec-grp .sec-body { padding: 2px 13px 16px; }
}

/* Сортировка таблицы «Лиды» с телефона: на широком экране сортируют кликом по
   заголовку, а на узком таблица уезжает вбок и до заголовка не добраться. */
.ls-sort-m { display: none; }
@media (max-width: 768px) {
  .ls-sort-m { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
  .ls-sort-m label { font-size: 12px; color: var(--muted); flex: none; }
  .ls-sort-m select { flex: 1 1 auto; min-width: 0; }
  .ls-sort-m .mini-btn { flex: none; white-space: nowrap; }
}

/* Сообщение, написанное без связи: лежит в очереди и уйдёт само, когда сеть
   вернётся. Отличаем от отправленного пунктиром, чтобы не путать с доставленным. */
.msg.msg-queued { opacity: .75; border: 1px dashed var(--line2, var(--line)); }
.msg-queued .q-del { background: none; border: 0; color: inherit; opacity: .7; cursor: pointer;
  font-size: 12px; padding: 4px 6px; margin: -4px -2px; }
@media (hover: hover) { .msg-queued .q-del:hover { opacity: 1; } }

/* ── Сводка начала дня в пустой середине инбокса ──────────────────────────
   Три четверти экрана раньше занимала надпись «Выбери диалог слева». Цвета
   те же, что у строк списка: янтарь = ждёт ответа, красный = висит дольше
   часа — чтобы сводка и список читались как одно целое, а не как два языка. */
.start-pane { position: absolute; inset: 0; padding: 0; text-align: left;
  display: flex; align-items: center; justify-content: center; }
.sp { width: 100%; max-width: 460px; padding: 32px 24px; display: flex; flex-direction: column; gap: 18px; }
.sp-head { display: flex; flex-direction: column; gap: 5px; }
.sp-t { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.sp-s { font-size: 12.5px; color: var(--faint); }
.sp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-tile { display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; cursor: pointer; font: inherit; text-align: left;
  transition: border-color .12s, background .12s; }
.sp-tile b { font-size: 25px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sp-tile span { font-size: 12.5px; color: var(--muted); }
.sp-tile.sp-zero { cursor: default; opacity: .55; }
@media (hover: hover) { .sp-tile:not(.sp-zero):hover { border-color: var(--divider); background: var(--raise); } }
.sp-warn { color: var(--warn); }
.sp-danger { color: var(--danger); }
.sp-ok { color: var(--ok); }
.sp-muted { color: var(--muted); }
.sp-long { display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: 12px; padding: 13px 15px; cursor: pointer; font: inherit; text-align: left;
  transition: background .12s; }
@media (hover: hover) { .sp-long:hover { background: var(--raise); } }
.sp-long-k { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.sp-long-v { font-size: 15.5px; font-weight: 600; color: var(--text); }
.sp-long-m { font-size: 12.5px; color: var(--muted); }
.sp-quiet { color: var(--faint); font-size: 13px; padding: 40px 24px; }

/* ── Прокрутка не «протекает» на страницу ────────────────────────────────
   Долистав внутреннюю панель до края, страница под ней продолжала ехать:
   докрутил список эмодзи — уехал инбокс, докрутил модалку — уехал фон.
   overscroll-behavior: contain останавливает прокрутку на границе контейнера.
   Перечисляем контейнеры явно, а не вешаем на всё подряд: правило должно
   действовать там, где действительно есть своя прокрутка. */
.col,
#messages,
.emoji-panel,
.phrase-panel,
.aic-text,
.reply textarea,
.fwd-list,
.sec-body,
.col-menu,
.fx-hist-card,
.mgr-leads-list,
.lp-msgs,
.lp-side,
.msheet { overscroll-behavior: contain; }

/* ── Поле даты в панели фильтров ─────────────────────────────────────────
   Оно не подпадало ни под одно правило и рисовалось браузерным дефолтом:
   рамка 2px inset, нулевые углы, высота 22px и серый фон — рядом со
   скруглёнными селектами по 34px это читалось как поломка вёрстки.
   Правило на input внутри .f-row, а не на конкретный id: любое поле,
   добавленное в панель фильтров позже, получит тот же вид само. */
.f-row input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%; padding: 8px 11px; border-radius: 9px; font: inherit; font-size: 13px;
  line-height: 1.25;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  transition: border-color var(--t), box-shadow var(--t); }
.f-row input:not([type="checkbox"]):not([type="radio"])::placeholder { color: var(--faint); }
.f-row input:not([type="checkbox"]):not([type="radio"]):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }