@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;
}

/* ===== токены (осознанная тёмная тема) ===== */
:root {
  --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;   /* базовая поверхность */
  --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:  #5b7cfa;   /* индиго-акцент */
  --accent-weak: #5b7cfa22;
  --accent-hi: #8aa2ff;
  --accent-grad: linear-gradient(135deg, #6d8bff 0%, #566bef 100%);
  --accent-glow: 0 6px 20px -6px rgba(91,124,250,.55);

  --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;   /* карточки/шапка - настоящий подъём над холстом */
  --panel2:  #f2f4fa;   /* поля ввода - между холстом и карточкой */
  --raise:   #c9cee2;   /* граница при ховере */
  --line:    #dde1ee;
  --line-soft:#e5e8f2;
  --divider: #c3c9dc;   /* разделители колонок - темнее обычных границ, чтобы панели читались */
  --hairline: rgba(255,255,255,.7);   /* верхний блик стеклянных поверхностей */

  /* темнее, чем хотелось бы "по красоте": мелкий текст в списке диалогов
     (последнее сообщение, канал, даты) на светлом фоне иначе плохо читается */
  --text:    #191b24;
  --muted:   #494e60;
  --faint:   #6b7085;

  --accent:  #4a5fd6;   /* тот же индиго, что в тёмной теме, тон приглушён под белый фон */
  --accent-weak: #4a5fd617;
  --accent-hi: #3948b8;
  --accent-grad: linear-gradient(135deg, #5670e6 0%, #4356cf 100%);
  --accent-glow: 0 8px 22px -8px rgba(74,95,214,.4);

  --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); }
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; }
*::-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; }
.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; }
.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); }
.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; }   /* не даём длинным названиям каналов распирать топбар */
.me { margin-left: auto; 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); }
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); }
.filters select:hover, .mini-btn:hover { border-color: var(--accent); }
/* селект метрики на графике динамики: делаем аккуратной пилюлей (была квадратная обводка) */
.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; }
.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 ===== */
.lead-item { padding: 11px 15px; border-bottom: 1px solid var(--line-soft); cursor: pointer;
  border-left: 2px solid transparent; transition: background var(--t), border-color var(--t);
  display: flex; gap: 10px; align-items: flex-start; }
.lead-item:hover { background: var(--panel); }
/* ждёт ответа - тёплая подсветка строки + янтарная полоса слева (сразу видно кто без ответа) */
.lead-item.lead-waiting { border-left-color: var(--warn); background: var(--warn-weak, rgba(230,160,30,.07)); }
.lead-item.lead-waiting:hover { background: var(--warn-weak, rgba(230,160,30,.12)); }
.lead-item.active { background: var(--panel2); border-left-color: var(--accent); }
.lead-item.lead-waiting.active { border-left-color: var(--accent); }
/* просрочено (>1ч без ответа): полоса краснее + видимый счётчик времени ожидания */
.lead-item.lead-overdue { border-left-color: var(--danger); background: rgba(220,70,70,.08); }
.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: 15px; 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: 5px; }
.msg.out { background: var(--out-bubble); align-self: flex-end;  border-bottom-right-radius: 5px; }
.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); }
.reply-tools select:hover { border-color: var(--accent); }
.attach { cursor: pointer; font-size: 18px; user-select: none; opacity: .8; transition: opacity var(--t); }
.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); }
.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; }
.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); }
.emoji-btn:hover { background: var(--panel2); }
/* AI-помощник (копайлот): черновик ответа над зоной ввода */
.ai-copilot { margin: 8px 14px 0; padding: 10px 12px; 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: 8px; }
.aic-title { font-weight: 600; font-size: 13px; }
.aic-q { width: 100%; resize: vertical; min-height: 40px; font-family: inherit; font-size: 13px;
  padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); }
.aic-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.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); }
.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; }
.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; }
.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); }
.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; }
.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; }
.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; }
.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); }
.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); }
.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); }
.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); }
.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); }
.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; }
.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); }
.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); }
.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); }
.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; }
.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); }
.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; }
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); }
.btn:hover { background: var(--accent-hi); }
.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); }
.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); }
.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; }
.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); }
.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); }
.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; }

/* ---- статусы: чипы с цветом, переименование, счётчик, замок ---- */
.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; }
.sc-color:hover { transform: scale(1.15); }
.sc-label { font-size: 13px; color: var(--text); cursor: pointer; font-weight: 500; }
.sc-label:hover { color: var(--accent-hi); text-decoration: underline dotted; }
.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); }
.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); }
.fmt-btn:hover { border-color: var(--accent); background: var(--accent-weak); }
.fmt-hint { font-size: 11.5px; margin-left: 4px; }
.tcat-items { display: flex; flex-direction: column; gap: 8px; }
.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); }
.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-body { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; cursor: pointer; }
.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); }
.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; }
.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); }
.acc-arch:hover { border-color: var(--danger); color: var(--danger); }
.acc-arch.acc-return:hover { border-color: #22c55e; color: #22c55e; }
/* панель безопасности */
.sec-mgr { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px; }
.sec-mgr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.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; }
.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; }
.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); }
.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 { display: none; }

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

/* ===== телефон: одна панель за раз, как в Telegram ===== */
@media (max-width: 768px) {
  /* топбар компактный, нав скроллится пальцем; фильтры страниц - отдельной строкой */
  .topbar { gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
  .brand { display: none; }
  .nav { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 6px 9px; white-space: nowrap; font-size: 12.5px; }
  .me { font-size: 12px; white-space: nowrap; }
  .topbar .filters { order: 10; width: 100%; }

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

  /* инбокс: видна одна колонка; чат открывается тапом, карточка - кнопкой в шапке чата */
  .cols { display: block; height: calc(100dvh - 48px); position: relative; overflow: hidden; }
  .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; }
  body.m-card-open .col.card { display: block; position: fixed; top: 0; right: 0; bottom: 0;
    width: min(92vw, 380px); z-index: 120; background: var(--bg);
    box-shadow: -14px 0 44px -10px rgba(0, 0, 0, .5); overflow-y: auto;
    animation: pop var(--t); }
  .m-back, .m-card-btn { display: inline-flex; align-items: center; }
  .m-card-close { display: inline-flex; position: sticky; top: 8px; margin-left: auto;
    background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
    font-size: 15px; padding: 5px 10px; cursor: pointer; color: var(--text); float: right; }

  .msg { max-width: 86%; }
  .leads-filters select { font-size: 14px !important; }  /* фильтры мельче полей ввода - ок, зум не страшен (не текстовые) */
  .reply { padding: 8px; gap: 2px; }
  .reply .ta-wrap { margin: 0 4px; }
  /* кнопка отправки на телефоне - компактная стрелка вместо слова */
  .reply #send-btn { padding: 0; width: 44px; font-size: 0; }
  .reply #send-btn::after { content: '➤'; font-size: 17px; }
  .emoji-panel { right: -44px; }

  /* обычные страницы: одна колонка, таблицы скроллятся */
  .page { padding: 18px 14px 44px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  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; }
  /* быстрые фразы: тело фразы переносится, не толкает ширину */
  .sitem { flex-wrap: wrap; }
  .sitem .s-body { flex: 1 1 100%; }
  /* вкладка Лиды: на телефоне широкая таблица должна скроллиться, а не толкать страницу
     (на десктопе 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); }
.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: 200; 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); }
.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); }
.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); }
.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); }
.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; }
.sitem { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 7px; cursor: pointer;
  transition: border-color var(--t), background var(--t); }
.sitem:hover { border-color: var(--accent); }
.sitem.editing { border-color: var(--accent); background: var(--accent-weak); }
.sitem .s-title { font-weight: 600; font-size: 13.5px; flex-shrink: 0; }
.sitem .s-preview { color: var(--faint); font-size: 12.5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; flex: 1; }
.btn.secondary { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
.btn.secondary:hover { background: var(--raise); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--line); }
.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); }
.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); }
.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); }

/* — кнопки: градиент, мягкая тень, приподнятие на 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);
}
.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);
}
.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);
  border-left-color: var(--accent);
}
.lead-item { transition: background var(--t), border-color var(--t); }

/* — бейдж непрочитанных: градиент + свечение — */
.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:hover, .phrase-item.sel { 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; }
#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; }
.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); }
.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); }
.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%; }
.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); }
.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; }
.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); }
.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; }
.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; }
@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); }
.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); }
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); }
.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; }
.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); }
.lp-msg { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4; word-wrap: 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-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); }
.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); }
.lp-composer button:hover { opacity: .9; }
.lp-composer button:disabled { opacity: .5; cursor: default; }
.lp-msg.pending { opacity: .55; }

/* ---------- онбординг-тур (демо): подсветка элемента + окошко ---------- */
.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; }
.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; }
.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); }
.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; }
.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); }