:root{
  --brand:#2563eb; --brand-2:#10b981; --ink:#0f172a; --muted:#64748b;
  --bg:#f8fafc; --card:#ffffff; --line:#e2e8f0; --soft:#f1f5f9; --ok:#15803d; --warn:#b45309; --err:#dc2626;
  --radius:16px; --shadow:0 1px 3px rgba(2,6,23,.04), 0 8px 24px rgba(2,6,23,.05); --shadow-lg:0 8px 24px rgba(2,6,23,.07), 0 24px 56px rgba(2,6,23,.10);
  --ring:0 0 0 3px rgba(37,99,235,.16); --ring-soft:0 0 0 3px rgba(37,99,235,.12);
  --ease-smooth:cubic-bezier(.22,.61,.36,1);  /* мягкая ease-out кривая для плавных переходов */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
}
*{box-sizing:border-box}
/* Защита от ФАНТОМНОГО горизонтального скролла на мобиле: скрытые тултипы (.tip::after, opacity:0,
   width до 240px у правого края), 3-колоночные таблицы и т.п. расширяли прокручиваемую область. */
html,body{overflow-x:clip}
img{max-width:100%}  /* глобальный сброс: любая будущая <img> не вылезет за контейнер */
/* КЛАСС БАГОВ ТЁМНОЙ ТЕМЫ (найден оператором 13.07.2026 на кнопках сумм в «Кошельке»): <button>/<input>
   НЕ наследуют цвет текста — браузер красит их своим чёрным. На светлой теме это незаметно, а на
   тёмной кнопка превращается в «чёрное по чёрному». Наследуем цвет по умолчанию: селектор по тегу
   слабее любого класса, поэтому кнопки со своим color (btn, btn-sm, …) не затрагиваются. */
button,input,select,textarea{color:inherit}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
/* Единое disabled-состояние кнопок: раньше отключённая кнопка выглядела активной (ложный аффорданс). */
.btn:disabled,.btn-sm:disabled,.btn-outline:disabled,.btn-ghost:disabled,.tb-btn:disabled,button[disabled]{
  opacity:.5;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover,.btn-sm:disabled:hover,.btn-outline:disabled:hover,.btn-ghost:disabled:hover,button[disabled]:hover{
  transform:none;box-shadow:none;opacity:.5}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none}
.logo-mark{width:30px;height:30px;flex:0 0 auto;filter:drop-shadow(0 2px 5px rgba(37,99,235,.28))}
.brand .wm{font-size:20px;letter-spacing:-.015em}
.brand .wm .fl{background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.topbar nav{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;justify-content:flex-end}
/* вся навигация прижата ВПРАВО (бренд слева, между ними воздух); утилиты — крайние справа */
.nav-main{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0;justify-content:flex-end}
.nav-side{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding-left:14px;position:relative}
.nav-side::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:22px;background:var(--line)}

/* Чип кассы в шапке (только админ компании; в CRM своя шапка — там его нет). Ведёт в /wallet.
   Значок ⚡ = включена автопокупка лидов: деньги списываются сами, это должно быть видно всегда. */
/* Стоит вплотную к аватару: шапка читается как [навигация] | [язык][тема] | [деньги][профиль].
   Группа = чип кассы (ссылка в /wallet) + кнопка-глаз (скрыть сумму). Рамка общая на группе,
   поэтому глаз выглядит частью чипа, а не отдельной кнопкой рядом. */
.wgrp{margin-left:6px;display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--card);overflow:hidden;transition:border-color .18s,background .18s}
.wgrp:hover{border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.wbadge{display:inline-flex;align-items:center;gap:7px;padding:6px 4px 6px 11px;
  color:var(--ink);font-size:13.5px;text-decoration:none;white-space:nowrap}
.wbadge:hover{text-decoration:none}
.wbadge .ni{width:16px;height:16px;color:var(--muted);flex:0 0 auto}
.wbadge-v{font-variant-numeric:tabular-nums;font-weight:700}
.wbadge-ic{font-size:12px;line-height:1}
/* Кнопка-глаз: прячет сумму (демонстрация экрана, работа при людях). Дефолт — сумма ВИДНА. */
.weye{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px 6px 6px;
  background:none;border:none;cursor:pointer;color:var(--muted);line-height:0}
.weye:hover{color:var(--ink);background:color-mix(in srgb,var(--brand) 8%,transparent)}
.weye .ni{width:15px;height:15px}
.weye .ic-eye-off{display:none}
/* Скрыто: вместо суммы — точки, у глаза перечёркнутая иконка. */
.money-dots{display:none;letter-spacing:2px}
[data-money="hidden"] .money-v{display:none}
[data-money="hidden"] .money-dots{display:inline}
[data-money="hidden"] .weye .ic-eye{display:none}
[data-money="hidden"] .weye .ic-eye-off{display:inline}
/* Автопокупка включена — чип подсвечен: «сейчас тратятся деньги» нельзя прятать в мелкий текст. */
.wbadge-ab{border-color:color-mix(in srgb,var(--brand-2) 45%,transparent);
  background:color-mix(in srgb,var(--brand-2) 9%,var(--card))}
.wbadge-ab .ni{color:var(--brand-2)}
/* Включена автопокупка, а касса пуста → лиды пропускаются. Оранжевый, а не зелёный: это проблема. */
.wbadge-warn{border-color:color-mix(in srgb,#f59e0b 55%,transparent);
  background:color-mix(in srgb,#f59e0b 12%,var(--card))}
.wbadge-warn .ni,.wbadge-warn .wbadge-v{color:#b45309}
[data-theme="dark"] .wbadge-warn .ni,[data-theme="dark"] .wbadge-warn .wbadge-v{color:#fbbf24}
@media (max-width:900px){.wbadge-v{font-size:13px}}
.navlink{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;font-size:14.5px;
  padding:8px 11px;border-radius:var(--r-md);border:1px solid transparent;background:none;cursor:pointer;
  text-decoration:none;line-height:1;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.navlink:hover{background:rgba(37,99,235,.09);color:var(--brand);text-decoration:none}
.navlink.active{background:rgba(37,99,235,.12);color:var(--brand);box-shadow:inset 0 0 0 1px rgba(37,99,235,.25)}
.navlink .ni{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.navlink:hover .ni,.navlink.active .ni{opacity:1}
.navlink.logout{color:var(--muted)}
.navlink.logout:hover{background:#fef2f2;color:#dc2626}
/* ---- меню аккаунта (аватар + дропдаун) ---- */
.acct{position:relative}
.acct>summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.acct>summary::-webkit-details-marker{display:none}
.acct>summary:focus-visible{outline:none}
.acct-btn{display:inline-flex;align-items:center;gap:3px;padding:3px 6px 3px 3px;border-radius:var(--r-pill);
  border:1px solid transparent;transition:background .15s,border-color .15s}
.acct-btn:hover{background:rgba(37,99,235,.08)}
/* Клавиатурная доступность: видимый фокус на кнопке меню аккаунта (раньше фокус был невидим). */
.acct-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.acct[open] .acct-btn{background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.18)}
.acct-av{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:700;font-size:14px;line-height:1;
  overflow:hidden;box-shadow:0 1px 3px rgba(2,6,23,.18);user-select:none}
.acct-av img{width:100%;height:100%;object-fit:cover;display:block}
.acct-caret{width:14px;height:14px;color:var(--muted);transition:transform .2s var(--ease-smooth);flex:0 0 auto}
.acct[open] .acct-caret{transform:rotate(180deg)}
.acct-pop{position:absolute;right:0;top:calc(100% + 10px);width:250px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:8px;z-index:60;
  animation:acctIn .15s var(--ease-smooth)}
@keyframes acctIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.acct-pop-head{display:flex;align-items:center;gap:11px;padding:7px 8px 12px}
.acct-av.lg{width:42px;height:42px;font-size:18px}
.acct-id{display:flex;flex-direction:column;min-width:0}
.acct-mail{font-weight:700;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:178px}
.acct-role{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
.acct-div{height:1px;background:var(--line);margin:4px 2px}
.acct-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:var(--r-md);
  font-size:14px;font-weight:600;color:var(--ink);background:none;border:0;cursor:pointer;text-align:left;
  text-decoration:none;font-family:inherit;line-height:1.2;transition:background .12s,color .12s}
.acct-item svg{width:17px;height:17px;flex:0 0 auto;opacity:.78}
.acct-item:hover{background:var(--soft);text-decoration:none}
.acct-item.danger{color:var(--err)}
.acct-item.danger:hover{background:#fef2f2}
.acct form{margin:0}
@media(max-width:560px){.acct-pop{width:238px}}

/* ---- карточка «Фото профиля» ---- */
.avatar-row{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.avatar-big{width:88px;height:88px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:700;font-size:38px;line-height:1;
  overflow:hidden;box-shadow:0 4px 14px rgba(37,99,235,.28);user-select:none}
.avatar-big img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-ctl{flex:1;min-width:240px}
.avatar-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.avatar-upload{cursor:pointer}
.avatar-remove{cursor:pointer}

/* ---- двухэтапный калькулятор: Шаг 2 (логистика) + переход ---- */
.logi-step{margin-top:20px;padding-top:18px;border-top:2px dashed var(--line)}
.logi-h{margin:0 0 4px;font-size:18px;color:var(--ink)}
.stage-cta{margin:16px 0 2px;padding:14px 16px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md)}
.stage-cta .btn{margin-top:10px}

/* ---- оценка маржи ---- */
.margin-box{margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--soft)}
.mb-head{font-weight:700;font-size:15px;margin-bottom:10px}
.mb-in{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.mb-in .field{flex:1;min-width:140px}
.mb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 16px;margin-top:12px}
.mb-grid>div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)}
.mb-grid span{font-size:12px;color:var(--muted)}
.mb-grid b{font-size:16px}
.mb-grid b.ok{color:var(--ok)} .mb-grid b.err{color:var(--err)}

/* ---- тарифная преференция (чекбокс) ---- */
.pref-row{display:flex;gap:10px;align-items:flex-start;margin:6px 0 2px;padding:11px 13px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer}
.pref-row input{margin-top:3px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--brand)}
/* Маленькая ОСНОВНАЯ кнопка. Раньше была плоско-синей, тогда как .btn — фирменный градиент:
   отсюда «половина кнопок в продукте не фирменные» (Управление менеджерами, Докупить места,
   Отправить, Канбан, Спросить…). Вторичные действия используют .btn-outline / .btn-ghost. */
.btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff!important;font-size:13px;font-weight:600;padding:8px 16px;border-radius:var(--r-md);line-height:1.2;border:1px solid transparent;cursor:pointer;transition:transform .08s ease,opacity .15s ease,box-shadow .2s ease}
.btn-sm:hover{text-decoration:none;opacity:.94;box-shadow:0 4px 12px rgba(37,99,235,.28)}
.btn-sm:active{transform:translateY(1px)}
@media(max-width:560px){.navlink{padding:7px 10px;font-size:13px} .navlink .ni{font-size:14px}}

/* ---- мобильное меню (гамбургер) ---- */
/* Вкладки профиля (Личное / Компания) */
.ptabs{display:flex;gap:4px;margin:0 0 20px;border-bottom:1px solid var(--line)}
.ptab-btn{font:inherit;font-weight:700;font-size:15px;color:var(--muted);background:none;border:none;
  padding:11px 18px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  border-radius:8px 8px 0 0;transition:color .15s,background .15s}
.ptab-btn:hover{color:var(--ink);background:var(--soft)}
.ptab-btn.active{color:var(--brand);border-bottom-color:var(--brand)}
.ptab-pane{display:none}
.ptab-pane.active{display:block}

.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle .ic-close{display:none}
.topbar.nav-open .nav-toggle .ic-burger{display:none}
.topbar.nav-open .nav-toggle .ic-close{display:block}
/* нижняя панель вкладок (thumb-zone) — база: скрыто (десктоп), включается на ≤820px */
.botnav{display:none}
.botnav-i{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:56px;padding:7px 3px;color:var(--muted);font-size:10.5px;font-weight:600;background:none;border:0;
  cursor:pointer;text-decoration:none;line-height:1.1;font-family:inherit;-webkit-tap-highlight-color:transparent}
.botnav-i svg{width:22px;height:22px;flex:0 0 auto}
.botnav-i span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.botnav-i.active{color:var(--brand)}
.botnav-i:active{background:var(--soft)}
@media(max-width:820px){
  .topbar{padding:12px 16px;flex-wrap:nowrap}
  .nav-toggle{display:inline-flex}
  /* полное меню = выпадающее из шапки (язык, тема, аккаунт, все разделы) */
  .topbar nav{position:absolute;top:100%;left:0;right:0;z-index:40;display:none;flex-direction:column;
    align-items:stretch;gap:3px;background:var(--card);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);padding:10px 14px calc(16px + env(safe-area-inset-bottom));
    max-height:calc(100dvh - 64px);overflow-y:auto}
  .topbar.nav-open nav{display:flex}
  /* группы навигации в мобильном выпадающем меню — полноширинные колонки */
  .topbar nav .nav-main,.topbar nav .nav-side{display:flex;flex-direction:column;align-items:stretch;
    gap:3px;width:100%;flex:none;margin:0;padding:0;border:0}
  .topbar nav .nav-side{margin-top:4px;padding-top:8px;border-top:1px solid var(--line)}
  .topbar nav .nav-side::before{display:none}
  .topbar nav .navlink{width:100%;justify-content:flex-start;gap:12px;padding:13px 14px;font-size:15px}
  .topbar nav .navlink .ni{width:20px;height:20px}
  .topbar nav .nav-sep{display:none}
  .topbar nav .lang-switch{width:100%}
  .topbar nav .lang-switch select{flex:1;width:100%}
  .topbar nav .theme-toggle{width:100%;justify-content:flex-start}
  .topbar nav .acct{width:100%}
  .topbar nav .acct>summary,.topbar nav .acct-btn{width:100%}
  .topbar nav .acct-btn{justify-content:flex-start;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-md)}
  .topbar nav .acct-caret{margin-left:auto}
  .topbar nav .acct-pop{position:static;width:100%;box-shadow:none;border:1px solid var(--line);margin-top:4px;animation:none}
  /* нижняя панель вкладок (thumb-zone) — фикс к вьюпорту (не внутри шапки с backdrop-filter) */
  .botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);
    border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(2,6,23,.06);
    padding-bottom:env(safe-area-inset-bottom)}
  .footer{margin-bottom:calc(60px + env(safe-area-inset-bottom))}
}

/* CRM: кнопка «Справка» в верхней панели (перед глазами) */
.crm-help-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:600;font-size:14px;
  text-decoration:none;cursor:pointer;white-space:nowrap}
.crm-help-btn:hover{background:rgba(37,99,235,.09);color:var(--brand);text-decoration:none}
.crm-help-btn.active{background:rgba(37,99,235,.12);color:var(--brand);box-shadow:inset 0 0 0 1px rgba(37,99,235,.25)}
.crm-help-btn svg{width:18px;height:18px;flex:0 0 auto}
@media(max-width:560px){.crm-help-btn span{display:none}.crm-help-btn{padding:8px}}

.container{max-width:1080px;margin:0 auto;padding:32px 24px 64px}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding:56px 0 36px}
.badge{display:inline-block;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;font-size:13px;font-weight:600;padding:6px 14px;border-radius:var(--r-pill);margin-bottom:18px}
.hero h1{font-size:42px;line-height:1.1;margin:0 0 16px;letter-spacing:-.02em}
.lead{font-size:18px;color:var(--muted);margin:0 0 22px}
.ticks{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.ticks li{position:relative;padding-left:26px;color:var(--ink);font-weight:500}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}

/* ---- glass form card ---- */
.glass{background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:26px}
.hero-form{position:relative}
.hero-form::before{content:"";position:absolute;inset:-2px;border-radius:var(--r-lg);z-index:-1;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));opacity:.18;filter:blur(22px)}
.form-title{margin:0 0 16px;font-size:20px}

/* ---- form ---- */
.calc-form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px;color:var(--ink)}
.field .q{font-weight:700}
.field em{font-weight:400;color:var(--muted);font-style:normal}
.field.big .q{font-size:16px}
.field input,.field select,.field textarea,.calc-form input,.calc-form select,.calc-form textarea{
  font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  color:var(--ink);font-weight:500;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:var(--ring)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:2px}
.form-grid .cell{display:flex;flex-direction:column;gap:6px;font-size:14px}
.form-grid .cell.wide{grid-column:1 / -1}
/* Пометка поля, значение которого взято из профиля (зелёная) или изменено вручную (жёлтая). */
.prof-tag{display:none;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:var(--r-pill);
  vertical-align:middle;letter-spacing:.01em;white-space:nowrap}
.prof-tag.is-profile{display:inline-block;background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}
.prof-tag.is-changed{display:inline-block;background:#fef9c3;color:#a16207;border:1px solid #fde68a}
/* Лёгкий акцент рамки поля из профиля */
.prof-field.from-profile{border-color:#86efac !important;box-shadow:0 0 0 3px rgba(34,197,94,.10)}
.prof-field.from-changed{border-color:#fde047 !important;box-shadow:0 0 0 3px rgba(234,179,8,.12)}
html[data-theme="dark"] .prof-tag.is-profile{background:#0f2a1a;color:#4ade80;border-color:#1f5133}
html[data-theme="dark"] .prof-tag.is-changed{background:#2a2410;color:#fde047;border-color:#5c4d12}
.form-grid .cell .q{font-weight:700}
.form-grid .cell input,.form-grid .cell select{width:100%;font:inherit;padding:12px 14px;
  height:48px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--ink);font-weight:500;
  transition:border-color .15s,box-shadow .15s}
.form-grid .cell input:focus,.form-grid .cell select:focus{outline:none;border-color:var(--brand);
  box-shadow:var(--ring)}
.form-grid .cell .hint{font-size:12px;color:var(--muted);line-height:1.3}
/* Строки «сумма | валюта | курс»: фиксированная сетка — колонки совпадают во всех полях.
   Колонка курса зарезервирована всегда (даже когда поле курса скрыто для RUB), поэтому
   ширина суммы одинакова во всех строках и ничего не «прыгает». */
.form-grid .cell .amt{display:grid;grid-template-columns:minmax(0,1fr) 92px 96px;gap:8px;align-items:center}
.form-grid .cell .amt>*{width:100%;min-width:0}
@media(max-width:600px){
  .form-grid .cell .amt{grid-template-columns:1fr 92px}
  .form-grid .cell .amt .rate{grid-column:1 / -1}
}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
.field-row{display:flex;gap:12px;align-items:end}
.field-row .field{flex:1}
.field.narrow{max-width:150px;flex:0 0 150px}
.field .q{min-height:2.5em;display:flex;align-items:flex-end}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.field input,.field select,.field textarea{width:100%}
/* Импорт товара по ссылке (1688/Alibaba/Taobao/WB/Ozon) */
.link-import{border:1px dashed var(--brand);background:rgba(37,99,235,.04);border-radius:var(--r-md);
  padding:12px 14px;display:flex;flex-direction:column;gap:8px;margin-bottom:2px}
.link-import .q{font-weight:700;font-size:14px}
.link-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.link-row input{flex:1 1 280px;min-width:0;font:inherit;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r-md);background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.link-row input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.link-row .btn-outline{flex:0 0 auto;white-space:nowrap}
html[data-theme="dark"] .link-import{background:rgba(37,99,235,.10);border-color:#3b82f6}
html[data-theme="dark"] .link-row input{background:#0d1526;color:var(--ink);border-color:var(--line)}

.advanced{border:1px dashed var(--line);border-radius:var(--r-md);padding:6px 14px}
.advanced summary{cursor:pointer;color:var(--muted);font-size:14px;padding:6px 0}
.advanced .grid2{margin-top:10px}

/* ---- buttons ---- */
.btn,.btn-outline,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-md);font-weight:700;cursor:pointer;border:1px solid transparent;font-size:15px;
  padding:12px 20px;text-align:center;line-height:1.2;transition:transform .08s,opacity .15s}
.btn{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.btn:hover{text-decoration:none;opacity:.94}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:15px 22px;font-size:16px}
.btn-outline{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)}
.btn-ghost{background:rgba(37,99,235,.08);color:var(--brand);align-self:flex-start;padding:10px 16px}
.btn-ghost:hover{text-decoration:none;background:rgba(37,99,235,.14)}
.cta-row{display:flex;gap:12px;margin:22px 0 12px}

/* ---- suggestions ---- */
.suggest-box{display:flex;flex-direction:column;gap:8px;margin:4px 0}
.suggest-item{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px;cursor:pointer;font-weight:500}
.suggest-item:hover{border-color:var(--brand);background:rgba(37,99,235,.04)}
.suggest-item .code{font-family:ui-monospace,monospace;font-weight:700;color:var(--brand)}
.suggest-item .name{font-weight:600}
.suggest-item .conf{grid-column:3;justify-self:end;font-size:12px;color:var(--muted)}
.suggest-item .reason{grid-column:2/4;font-size:13px;color:var(--muted);font-weight:400}
/* «Свой вариант» в подсказках: пунктирная рамка + поле ввода кода на всю оставшуюся колонку */
.suggest-own{border-style:dashed}
.suggest-own .sg-own-in{grid-column:3;width:100%;font:inherit;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink)}

/* ---- result ---- */
.result-card{margin-top:18px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.result-card h3{margin:0 0 8px}
table.breakdown{width:100%;border-collapse:collapse;margin:10px 0}
table.breakdown td{padding:9px 6px;border-bottom:1px solid var(--line)}
table.breakdown td:last-child{text-align:right;font-variant-numeric:tabular-nums}
table.breakdown tr.subtotal td{font-weight:700;background:#f8fafc}
table.breakdown tr.total td{font-weight:800;font-size:18px;border-top:2px solid var(--ink);border-bottom:none;color:#047857}

/* ═══ Экран результата: итог-герой + триаж замечаний (единый компонент), 2026-07-14 ═══
   Раньше сверху стопкой стояли до ~10 плашек .warn с inline-стилями, а итог терялся внизу.
   Теперь: крупный итог сверху + единый компонент .if-note (danger/warn/info) с триажем. Фоны на
   color-mix от токенов → работают и в светлой, и в тёмной теме без отдельных override. */
.calc-hero{margin:2px 0 14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 60%),
             radial-gradient(120% 140% at 0% 100%,color-mix(in srgb,var(--brand-2) 8%,transparent),transparent 55%),var(--card)}
.calc-hero .ch-eyebrow{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.calc-hero .ch-num{font-size:clamp(28px,6vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:2px}
.calc-hero .ch-sub{color:var(--muted);font-size:13px;margin-top:6px}
.calc-hero .ch-code{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:13px}
.calc-hero .ch-code .cc{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;background:var(--soft);border:1px solid var(--line);border-radius:7px;padding:2px 8px}

.if-notes{margin:2px 0 14px}
.if-notes-h{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;margin:0 0 9px}
.if-notes-h .cnt{color:var(--muted);font-weight:600}
.if-note{display:flex;gap:10px;align-items:flex-start;padding:10px 13px;border-radius:var(--r-md);border:1px solid var(--line);font-size:13.5px;margin-bottom:8px;line-height:1.45}
.if-note .ic{flex:0 0 auto;font-size:15px}
.if-note .tx{min-width:0;flex:1}
.if-note .tt{display:block;font-weight:700;margin-bottom:2px}
.if-note.n-danger{border-left:3px solid var(--err);background:color-mix(in srgb,var(--err) 9%,var(--card))}
.if-note.n-danger .tt{color:var(--err)}
.if-note.n-warn{border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--card))}
.if-note.n-warn .tt{color:var(--warn)}
.if-note.n-info{border-left:3px solid var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--card))}
details.if-more{margin-bottom:8px}
summary.if-more-btn{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
  border:1px dashed var(--line);border-radius:var(--r-md);padding:9px 12px;color:var(--muted);font-size:13px;font-weight:600}
summary.if-more-btn::-webkit-details-marker{display:none}
summary.if-more-btn:hover{color:var(--ink);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
details.if-more[open] summary.if-more-btn{margin-bottom:8px}
/* видимая каретка через ::after (инвариант I.16 — скрытый нативный маркер требует своего индикатора) */
summary.if-more-btn::after{content:"▾";color:var(--muted);transition:transform .18s;display:inline-block}
details.if-more[open] summary.if-more-btn::after{transform:rotate(180deg)}
.if-act{display:inline-block;margin-top:7px;font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:8px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);color:var(--brand);background:transparent;text-decoration:none}
.if-act:hover{background:color-mix(in srgb,var(--brand) 9%,transparent)}
.if-act.danger{border-color:color-mix(in srgb,var(--err) 45%,transparent);color:var(--err)}
.if-act.danger:hover{background:color-mix(in srgb,var(--err) 10%,transparent)}

/* Адаптив: на узком экране таблица платежей → карточные строки (без горизонтального скролла) */
@media(max-width:560px){
  table.breakdown td{display:block;padding:7px 4px;border-bottom:none}
  table.breakdown tr{display:block;border-bottom:1px solid var(--line)}
  table.breakdown td:last-child{text-align:left;font-weight:700;font-size:15px;padding-top:0}
  table.breakdown tr.total td:last-child{font-size:19px}
}
/* Методология таможенной стоимости */
.methodology{margin:14px 0;border:1px solid var(--line);border-radius:var(--r-md);padding:2px 14px;background:#fbfdff}
.methodology summary{cursor:pointer;font-weight:600;color:var(--brand);padding:10px 0}
.methodology .mm-method{margin:6px 0}
table.mini{width:100%;border-collapse:collapse;margin:8px 0}
table.mini td{padding:5px 4px;border-bottom:1px solid var(--line);font-size:13px}
table.mini td:last-child{text-align:right;font-variant-numeric:tabular-nums}
table.mini tr.subtotal td{font-weight:700;background:#f8fafc}
/* Маркировка «Честный ЗНАК» */
.marking{margin:14px 0;border-radius:var(--r-md);padding:12px 14px;border:1px solid}
.marking .m-head{font-weight:700;font-size:15px;margin:0 0 4px}
.marking p{margin:4px 0}
.marking-yes{background:#fef2f2;border-color:#fecaca}
.marking-yes .m-head{color:#b91c1c}
.marking-maybe{background:#fffbeb;border-color:#fde68a}
.marking-maybe .m-head{color:#92400e}
.marking-no{background:#f0fdf4;border-color:#bbf7d0}
.marking-no .m-head{color:#15803d}
.marking a{font-weight:600}
/* Кнопки под результатом */
.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
/* Комбобокс: выбор из списка + ручной ввод */
.combobox{position:relative}
.combobox>input{width:100%;padding-right:46px}
.cb-arrow{position:absolute;right:2px;top:50%;transform:translateY(-50%);border:none;background:none;
  cursor:pointer;font-size:13px;color:var(--muted);line-height:1;border-radius:var(--r-sm);
  min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,background .15s,color .15s}
.cb-arrow:hover{background:rgba(37,99,235,.1);color:var(--brand)}
.combobox.open .cb-arrow{transform:translateY(-50%) rotate(180deg)}
.cb-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 5px);max-height:262px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:5px;display:none}
.combobox.open .cb-list{display:block;animation:fadeUp .18s ease both}
.cb-opt{padding:9px 11px;cursor:pointer;font-size:14px;border-radius:var(--r-sm);white-space:nowrap}
.cb-opt:hover{background:rgba(37,99,235,.10);color:var(--brand)}
.uv-rates{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:#fbfdff}
/* Админ-журнал ошибок */
.log-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.log-actions .cur{background:var(--brand);color:#fff!important}
.logwrap{max-height:62vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-md)}
table.logtbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.logtbl th{position:sticky;top:0;background:#f1f5f9;text-align:left;padding:8px 10px;font-size:11px;text-transform:uppercase;color:#475569;z-index:1}
table.logtbl td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.logtbl tr.logerr{background:#fef2f2}
table.logtbl tr.logerr .lt-msg{color:var(--err);font-weight:600}
.lt-time{white-space:nowrap;color:var(--muted)}
.lt-act{font-family:ui-monospace,monospace}
.lt-warn{display:inline-block;margin-left:5px;font-size:10px;color:#92400e;background:#fef3c7;padding:1px 5px;border-radius:5px}
.lt-trace{white-space:pre-wrap;font-size:11px;background:#0f172a;color:#e2e8f0;padding:10px;border-radius:var(--r-sm);max-height:300px;overflow:auto;margin:6px 0 0}
.ai-summary{margin-top:12px;padding:14px 16px;border:1px solid #bae6fd;border-radius:var(--r-md);background:#f0f9ff;font-size:13.5px;line-height:1.55;color:#0c4a6e}
/* Админ-дашборд */
.dash-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.dash-status{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0 18px;font-size:13px;font-weight:600}
.st-ok{color:#15803d}.st-warn{color:var(--err)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.kpi-n{font-size:30px;font-weight:800;line-height:1;background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.kpi-n.kpi-err{background:none;-webkit-text-fill-color:var(--err);color:var(--err)}
.kpi-l{font-size:13px;color:var(--ink);margin-top:6px;font-weight:600}
.kpi-s{font-size:12px;color:var(--muted);margin-top:2px}
.dash-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow)}
.dash-card h3{margin:0 0 12px;font-size:15px}
.dash-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.drow{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.drow:last-child{border-bottom:none}
.bars{display:flex;align-items:flex-end;gap:10px;height:160px;padding-top:18px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.bar{width:62%;min-height:3px;background:linear-gradient(180deg,var(--brand),var(--brand-2));border-radius:8px 6px 0 0;transition:height .5s cubic-bezier(.2,.7,.2,1)}
.bar-v{font-size:12px;font-weight:700;color:var(--brand)}
.bar-l{font-size:11px;color:var(--muted)}
.res{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px}
.res>span:first-child{width:46px;color:var(--muted)}
.res-bar{flex:1;height:8px;background:#eef2f7;border-radius:var(--r-sm);overflow:hidden}
.res-bar>div{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.res>b{white-space:nowrap}
.srcbar{height:10px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin:4px 0 12px}
.srcbar>div{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
table.dash-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.dash-tbl th{text-align:left;padding:7px 10px;background:#f1f5f9;font-size:11px;text-transform:uppercase;color:#475569}
table.dash-tbl td{padding:7px 10px;border-bottom:1px solid var(--line)}
table.dash-tbl tr.logerr td{background:#fef2f2}
@media(max-width:760px){.kpi-grid{grid-template-columns:1fr 1fr}.dash-2col{grid-template-columns:1fr}}
.docs{background:#f6f8fa;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 18px;margin:16px 0}
.docs h4{margin:0 0 8px;font-size:15px}
.doc-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.doc-item:last-of-type{border-bottom:none}
.doc-name{font-weight:600;font-size:14px;line-height:1.4}
.doc-basis{display:inline-block;font-weight:700;color:var(--brand);font-size:11.5px;
  background:rgba(37,99,235,.08);padding:1px 8px;border-radius:var(--r-sm);margin-left:2px}
.doc-organ{color:var(--muted);font-weight:400;font-size:12.5px}
.doc-level{flex:0 0 auto;font-size:11px;font-weight:700;padding:3px 11px;border-radius:var(--r-pill);white-space:nowrap}
.doc-level.req{background:#fee2e2;color:#b91c1c}
.doc-level.opt{background:#eef2f7;color:#475569}
.doc-level.noreq{background:#dcfce7;color:#15803d}
/* Description-aware вердикт по описанию перечня ТР (под doc-item) */
.doc-conformity{font-size:12px;line-height:1.5;margin:-4px 0 8px;padding:7px 11px;border-radius:var(--r-sm);border:1px solid var(--line)}
.doc-conformity b{display:block;margin-bottom:2px}
/* Обоснование вердикта показываем ЦЕЛИКОМ (текст не режем на бэке), но окошко держим компактным:
   фикс. высота + внутренняя вертикальная прокрутка — длинный текст не растягивает карточку, а
   прокручивается на месте. Заголовок «⚠️ …требуется» вне скролл-области → всегда виден. */
.doc-cf-body{max-height:104px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.doc-cf-body::-webkit-scrollbar{width:6px}
.doc-cf-body::-webkit-scrollbar-thumb{background:rgba(120,120,120,.45);border-radius:3px}
.doc-cf-no{background:#f0fdf4;border-color:#bbf7d0}
.doc-cf-yes{background:#fef2f2;border-color:#fecaca}
.doc-cf-check{background:#fffbeb;border-color:#fde68a}
.doc-cf-unknown{background:var(--soft);border-color:var(--line)}
/* Тёмная тема: контейнер документов и плашки вердикта (иначе светлый фон + светлый текст = нечитаемо) */
html[data-theme="dark"] .docs{background:var(--soft);color:var(--ink)}
html[data-theme="dark"] .doc-cf-no{background:#0f2a1a;border-color:#1f5133;color:#bbf7d0}
html[data-theme="dark"] .doc-cf-yes{background:#3a1414;border-color:#5c2626;color:#fecaca}
html[data-theme="dark"] .doc-cf-check{background:#332711;border-color:#5c4a1f;color:#fde68a}
html[data-theme="dark"] .doc-cf-unknown{background:var(--card);border-color:var(--line);color:var(--ink)}
.doc-tag.ok{color:var(--ok);font-size:11px;font-weight:700}
.doc-tag.ai{display:inline-block;background:#e0f2fe;color:#0369a1;font-size:10px;font-weight:700;padding:1px 6px;border-radius:var(--r-pill);white-space:nowrap}
[data-theme="dark"] .doc-tag.ai{background:#0c3049;color:#7dd3fc}
.doc-tag.mark,.doc-tag.ban,.doc-tag.lic{display:inline-block;font-size:10px;font-weight:800;padding:1px 7px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.4px}
.doc-tag.mark{background:#ede9fe;color:#6d28d9}
.doc-tag.ban{background:#fee2e2;color:#b91c1c}
.doc-tag.lic{background:#fef3c7;color:#b45309}
.doc-item.doc-marking{background:rgba(109,40,217,.05)}
.doc-item.doc-ban{background:rgba(185,28,28,.06)}
.doc-item.doc-license{background:rgba(180,83,9,.06)}
.doc-item.doc-marking,.doc-item.doc-ban,.doc-item.doc-license{border-radius:8px;padding-left:8px;padding-right:8px}
[data-theme="dark"] .doc-tag.mark{background:#3b2d63;color:#c4b5fd}
[data-theme="dark"] .doc-tag.ban{background:#4c1d1d;color:#fca5a5}
[data-theme="dark"] .doc-tag.lic{background:#4a3410;color:#fcd34d}
.docs .disc{margin:8px 0 0;line-height:1.4}
.login-gate{text-align:center}
.login-gate .cta-row{justify-content:center}
.clarify{background:#fffbeb;border:1px solid #fde68a;border-radius:var(--r-md);padding:12px 14px;margin-bottom:12px}
.clarify-q{margin:6px 0 10px}
.clarify-in{flex:1;font:inherit;padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-md)}
.warn-inline{color:var(--warn);font-weight:600}
.opt-form{display:inline-block;margin:4px 6px 4px 0}
.opt-chip{font:inherit;cursor:pointer;border:1px solid var(--brand);background:rgba(37,99,235,.06);
  color:var(--brand);border-radius:var(--r-pill);padding:8px 16px;font-weight:600}
.opt-chip:hover{background:rgba(37,99,235,.14)}
.opt-custom{display:flex;gap:8px;margin-top:10px}
.calc-clarify{border:1px solid #fde68a;background:#fffbeb}
.calc-clarify .clarify-opts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.calc-clarify .opt-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;width:100%}
.calc-clarify .oc-label{font-weight:600}
.alt-codes{margin:2px 0 10px}
.alt-codes-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.alt-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:5px 12px}
.alt-chip .oc-label{font-weight:600;font-size:.9em}
html[data-theme="dark"] .calc-clarify,html[data-theme="dark"] .clarify{background:rgba(234,179,8,.10);border-color:rgba(234,179,8,.4)}
.risk-note{margin-top:12px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;
  border-radius:var(--r-md);padding:12px 14px;font-size:14px;line-height:1.45}

/* ---- sections ---- */
.section-title{text-align:center;font-size:30px;margin:48px 0 28px;letter-spacing:-.02em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-ic{font-size:30px;margin-bottom:10px}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}
.honest{background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(124,58,237,.06));
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-top:44px}
.honest h3{margin:0 0 8px}
.honest p{margin:0;color:#334155}

/* ---- forms / pages ---- */
.form-card{max-width:420px;margin:40px auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:30px}
.form-card.wide{max-width:560px}
.form-card form{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.form-card label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
.form-card input,.form-card select,.form-card textarea{font:inherit;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--ink);
  transition:border-color .15s,box-shadow .15s}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:none;
  border-color:var(--brand);box-shadow:var(--ring)}
.crm-box{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.crm-box legend{font-weight:700;padding:0 6px}
.crm-chk{display:flex;flex-direction:row !important;align-items:center;gap:8px;font-weight:500}
.crm-chk input{width:auto}
.crm-fields{display:none;flex-direction:column;gap:8px;background:#f8fafc;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}
/* редактор кастомных полей CRM (отдельный класс — НЕ конфликтует с .crm-fields профиля) */
.crm-fields-ed{display:flex;flex-direction:column;gap:10px}
/* кастом-поля: сумма ₽ и текст-абзац */
.crm-money-in{position:relative;display:block}
.crm-money-in input{width:100%;padding-right:26px;box-sizing:border-box}
.crm-money-cur{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}
.crm-custom textarea{font:inherit;font-size:13px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);color:var(--ink);width:100%;box-sizing:border-box;resize:vertical;min-height:54px;transition:border-color .15s ease}
.crm-custom textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.crm-field-tpl{margin-top:8px}
/* инлайн-редактор кастом-поля */
.crm-field-edit{display:flex;align-items:center;gap:8px;flex:1;min-width:0;flex-wrap:wrap}
.crm-field-edit input,.crm-field-edit select{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);color:var(--ink);min-width:0}
.crm-field-edit input[name=name]{flex:1 1 90px;min-width:90px;font-weight:600}
.crm-field-edit select[name=required_stage_id]{flex:0 1 auto;min-width:0;max-width:175px}
.crm-field-edit input[name=options]{flex:1;min-width:130px}
.crm-field-edit:focus-within input,.crm-field-edit select:focus{outline:none}
.crm-field-edit input:focus,.crm-field-edit select:focus{border-color:var(--brand)}
/* Видимость поля по воронкам: компактный details-поповер с чекбоксами */
.crm-field-vis{position:relative;flex:0 0 auto}
.crm-field-vis>summary{cursor:pointer;list-style:none;font-size:12px;padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);color:var(--muted);white-space:nowrap}
.crm-field-vis>summary::-webkit-details-marker{display:none}
.crm-field-vis>summary::after{content:"▾";margin-left:6px;font-size:9px;opacity:.8;display:inline-block;transition:transform .18s}
.crm-field-vis[open]>summary::after{transform:rotate(180deg)}
.crm-field-vis[open]>summary{border-color:var(--brand);color:var(--ink)}
/* Поповер целиком — ОДИН абсолютный контейнер .crm-vis-menu (раньше position:absolute вешался на
   КАЖДЫЙ label/hidden-input → чекбоксы наезжали друг на друга стопкой). */
.crm-field-vis[open] .crm-vis-menu{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:180px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 6px 20px rgba(0,0,0,.12);
  padding:8px 10px;display:block}
.crm-vis-opt{display:flex;align-items:center;gap:7px;font-size:13px;padding:3px 0;white-space:nowrap;font-weight:400}
.crm-vis-opt input{padding:0;min-width:0}
/* инлайн-редактор товара */
.crm-prod-i{width:100%;font:inherit;font-size:13px;padding:7px 9px;border:1px solid transparent;border-radius:var(--r-sm);
  background:transparent;color:var(--ink);box-sizing:border-box;transition:border-color .15s ease,background .15s ease}
.crm-prod-i:hover{border-color:var(--line)}
.crm-prod-i:focus{outline:none;border-color:var(--brand);background:var(--card)}
.crm-prod-i.num{max-width:120px}.crm-prod-i.unit{max-width:80px}
.crm-prod-row td{vertical-align:middle}
.crm-pipe-ren{border:1px dashed var(--line);background:var(--card);color:var(--muted);cursor:pointer;
  border-radius:var(--r-sm);padding:5px 10px;font-size:13px;transition:all .15s ease}
.crm-pipe-ren:hover{border-color:var(--brand);color:var(--brand)}
/* ручка перетаскивания (этапы/поля) */
.crm-drag-h{cursor:grab;color:var(--muted);font-size:14px;line-height:1;user-select:none;padding:0 2px;opacity:.6;flex:none}
.crm-drag-h:hover{opacity:1;color:var(--brand)}
.crm-drag-h:active{cursor:grabbing}
/* .crm-ghost — единое определс. ниже (opacity .35) */
/* контекстное меню карточки */
.crm-ctx{position:fixed;z-index:2000;min-width:200px;max-height:70vh;overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:6px;animation:crmPop .12s ease}
.crm-ctx button{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;font:inherit;
  font-size:13px;color:var(--ink);padding:8px 10px;border-radius:var(--r-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-ctx button:hover{background:var(--soft)}
.crm-ctx button.danger{color:var(--err)}
.crm-ctx button.danger:hover{background:#fef2f2}
html[data-theme="dark"] .crm-ctx button.danger:hover{background:#2a1414}
.crm-ctx-sep{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  padding:7px 10px 3px;border-top:1px solid var(--line);margin-top:4px}
.crm-ctx-sep:first-child{border-top:0;margin-top:0}
.crm-help{font-size:13px;color:var(--muted)}
.crm-help summary{cursor:pointer;color:var(--brand);font-weight:600}
.crm-help ol{margin:8px 0 0;padding-left:20px;line-height:1.5}
.crm-help code{background:#eef2f7;padding:1px 5px;border-radius:5px;font-size:12px}
.color-picker{display:flex;flex-direction:column;gap:10px}
.color-picker .lbl{font-weight:600;font-size:14px}
.color-picker .lbl em{font-weight:400;color:var(--muted);font-style:normal}
.swatches{display:flex;flex-wrap:wrap;gap:11px;align-items:center}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid #fff;cursor:pointer;padding:0;
  box-shadow:0 0 0 1px var(--line),0 2px 6px rgba(2,6,23,.14);
  transition:transform .12s ease,box-shadow .12s ease;position:relative}
.swatch:hover{transform:scale(1.14)}
.swatch:active{transform:scale(1.02)}
.swatch.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--brand),0 3px 9px rgba(2,6,23,.22)}
.swatch.sel::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:15px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.swatch.custom{display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:conic-gradient(from 0deg,#ef4444,#f59e0b,#eab308,#10b981,#3b82f6,#8b5cf6,#ec4899,#ef4444)}
.swatch.custom .ic{font-size:15px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));pointer-events:none}
.swatch.custom input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0;margin:0}
.brand-preview{display:inline-flex;align-items:center;align-self:flex-start;
  font-size:13px;font-weight:700;color:#fff;padding:6px 14px;border-radius:var(--r-pill);letter-spacing:.02em;
  box-shadow:0 2px 7px rgba(2,6,23,.18);text-shadow:0 1px 2px rgba(0,0,0,.28)}
.spectrum{position:relative;height:18px;border-radius:var(--r-pill);cursor:pointer;margin-top:2px;max-width:340px;
  background:linear-gradient(to right,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.spec-thumb{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.3);pointer-events:none}
.logo-field{display:flex;flex-direction:column;gap:8px}
.logo-field .lbl{font-weight:600;font-size:14px}
.logo-field .lbl em{font-weight:400;color:var(--muted);font-style:normal}
.logo-preview img{max-height:60px;max-width:220px;border:1px solid var(--line);border-radius:var(--r-md);padding:6px;background:#fff}
.file-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;width:fit-content;
  background:rgba(37,99,235,.07);color:var(--brand);border:1.5px dashed var(--brand);
  border-radius:var(--r-md);padding:11px 18px;font-weight:700;transition:background .15s}
.file-btn:hover{background:rgba(37,99,235,.14)}
.file-btn .ic{font-size:16px}
.file-btn input[type=file]{display:none}
.file-name{font-size:13px;color:var(--muted)}
.calc-page,.calc-wrap{max-width:900px;margin:0 auto}
.calc-wrap{margin-top:18px}

.hist-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hist-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hist-search{font:inherit;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-md);min-width:240px}
.hist-search:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
/* .btn-outline.danger — единое определение ниже (с поддержкой тёмной темы) */
.row-del{border:none;background:none;color:#dc2626;cursor:pointer;font-size:16px;font-weight:700;padding:4px 8px;border-radius:var(--r-sm)}
.row-del:hover{background:#fef2f2}
#hist-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}  /* мобайл: правые колонки (КП/CRM/удалить) не обрезаются */
/* ============ ГЛОБАЛЬНАЯ ЗАЩИТА ОТ ГОРИЗОНТАЛЬНОГО ПЕРЕПОЛНЕНИЯ ============
   Длинные тексты/числа/URL/коды не должны распирать страницу или «ездить» влево-вправо. */
img,svg,video,canvas{max-width:100%}
pre,.crm-code{max-width:100%;overflow-x:auto}
/* Длинные неразрывные строки (email, ссылки, коды ТН ВЭД, токены) в ЯЧЕЙКАХ-ДАННЫХ
   переносятся по любому символу вместо распирания контейнера. На nowrap-ячейки не влияет.
   Заголовки (th) НЕ ломаем по символам — короткие подписи должны держать ширину колонки. */
td{overflow-wrap:anywhere}
a[href^="mailto:"],a[href^="http"],.wrap-anywhere,.crm-cell-sub,.crm-item-n,.crm-contact-mail{overflow-wrap:anywhere;word-break:break-word}
/* Универсальная обёртка широкой таблицы: горизонтальный скролл ВНУТРИ, страница не едет.
   Навешивается автоматически на все таблицы (см. dialog.js). Если таблица уже,
   scrollWidth==clientWidth и скролла не видно — визуально ничего не меняется. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* Обёртка: на узких экранах таблица прокручивается горизонтально, а не обрезается/распирает страницу. */
.hist-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);box-shadow:var(--shadow)}
table.history{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;min-width:520px}
table.history th,table.history td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;vertical-align:middle}
table.history th{background:#f8fafc;font-size:13px;color:var(--muted)}
/* «Товар» — единственная гибкая колонка: забирает всю свободную ширину, длинное имя — многоточие
   (полное — в title при наведении). Так действия справа компактны, а таблица не «ездит». */
/* min-width, чтобы на планшете (≤820) «Товар» не схлопывался в «П|»: остаётся читаемым,
   а лишние колонки-действия уезжают в горизонтальный скролл обёртки. */
table.history th:nth-child(2),table.history td.hist-name{width:100%;min-width:130px;max-width:0;overflow:hidden;text-overflow:ellipsis}
table.history td.hist-date{color:var(--muted);font-size:13px}
table.history td.hist-code{font-variant-numeric:tabular-nums;letter-spacing:.02em}
table.history td.hist-sum,table.history th.hist-sum-h{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
/* Ячейки-действия компактны (по контенту) и не переносятся. */
table.history .hist-repeat,table.history .row-crm,table.history .row-del{white-space:nowrap}
/* Анимация истории: таблица всплывает, строки — каскадом */
table.history{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
table.history tbody tr{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
table.history tbody tr:nth-child(1){animation-delay:.03s}
table.history tbody tr:nth-child(2){animation-delay:.06s}
table.history tbody tr:nth-child(3){animation-delay:.09s}
table.history tbody tr:nth-child(4){animation-delay:.12s}
table.history tbody tr:nth-child(5){animation-delay:.15s}
table.history tbody tr:nth-child(6){animation-delay:.18s}
table.history tbody tr:nth-child(7){animation-delay:.21s}
table.history tbody tr:nth-child(8){animation-delay:.24s}
table.history tbody tr:nth-child(9){animation-delay:.27s}
table.history tbody tr:nth-child(10){animation-delay:.30s}
table.history tbody tr:nth-child(n+11){animation-delay:.33s}
table.history tbody tr{transition:background .15s}
table.history tbody tr:hover{background:rgba(37,99,235,.05)}
html[data-theme="dark"] table.history tbody tr:hover{background:rgba(59,130,246,.12)}
/* Плавное исчезновение строки при удалении (htmx) */
table.history tbody tr.htmx-swapping{opacity:0;transform:translateX(14px);
  transition:opacity .3s ease,transform .3s ease}
@media(prefers-reduced-motion:reduce){
  table.history,table.history tbody tr{animation:none}
  table.history tbody tr.htmx-swapping{transition:none}}

/* ============ Уместные анимации: дашборд, график, тема, варианты ============ */
/* Дашборд: полосы 7-дневного графика вырастают снизу (каскадом), шкалы — слева */
.bars .bar{transform-origin:bottom;animation:growUp .7s cubic-bezier(.2,.7,.2,1) both}
.bars .bar-col:nth-child(1) .bar{animation-delay:.04s}
.bars .bar-col:nth-child(2) .bar{animation-delay:.09s}
.bars .bar-col:nth-child(3) .bar{animation-delay:.14s}
.bars .bar-col:nth-child(4) .bar{animation-delay:.19s}
.bars .bar-col:nth-child(5) .bar{animation-delay:.24s}
.bars .bar-col:nth-child(6) .bar{animation-delay:.29s}
.bars .bar-col:nth-child(7) .bar{animation-delay:.34s}
@keyframes growUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.res-bar>div,.srcbar>div{transform-origin:left;animation:growRight .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes growRight{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* График состава себестоимости: полоса «вытекает» слева при показе результата */
.cs-bar{transform-origin:left;animation:csWipe .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes csWipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Варианты кода ТН ВЭД: появляются каскадом */
.suggest-item{animation:fadeUp .45s cubic-bezier(.2,.7,.2,1) both}
.suggest-box .suggest-item:nth-child(1){animation-delay:.04s}
.suggest-box .suggest-item:nth-child(2){animation-delay:.10s}
.suggest-box .suggest-item:nth-child(3){animation-delay:.16s}
.suggest-box .suggest-item:nth-child(4){animation-delay:.22s}
.suggest-box .suggest-item:nth-child(5){animation-delay:.28s}
.suggest-box .suggest-item:nth-child(n+6){animation-delay:.32s}

/* Плавное переключение темы — только во время клика по переключателю */
html.theme-transition,html.theme-transition *{
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,box-shadow .35s ease !important}

@media(prefers-reduced-motion:reduce){
  .bars .bar,.res-bar>div,.srcbar>div,.cs-bar,.suggest-item{animation:none}
  html.theme-transition,html.theme-transition *{transition:none !important}}

/* Логотип: при загрузке квадрат «выскакивает», затем монограмма IF прорисовывается;
   при наведении — пружинистый поворот с усилением тени. */
.logo-mark{animation:logoPop .55s cubic-bezier(.2,.8,.3,1.3);
  transition:transform .35s cubic-bezier(.2,.8,.3,1.5),filter .35s ease}
.logo-mark path{stroke-dasharray:1;stroke-dashoffset:1;animation:logoDraw .7s ease .28s forwards}
.brand:hover .logo-mark{transform:scale(1.12) rotate(-7deg);filter:drop-shadow(0 5px 12px rgba(16,185,129,.5))}
.brand:active .logo-mark{transform:scale(1.05) rotate(-2deg)}
/* CRM-рейл: тот же анимированный логотип (logoPop/logoDraw глобальны), размер под рейл + hover */
.crm-rail-brand .logo-mark{width:38px;height:38px;filter:drop-shadow(0 2px 5px rgba(37,99,235,.28))}
.crm-rail-brand:hover .logo-mark{transform:scale(1.12) rotate(-7deg);filter:drop-shadow(0 5px 12px rgba(16,185,129,.5))}
.crm-rail-brand:active .logo-mark{transform:scale(1.05) rotate(-2deg)}
@keyframes logoPop{from{opacity:0;transform:scale(.5) rotate(-15deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes logoDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .logo-mark{animation:none}
  .logo-mark path{animation:none;stroke-dashoffset:0}
  .brand:hover .logo-mark{transform:none}
  .crm-rail-brand:hover .logo-mark{transform:none}}

/* ====== Стартовая страница (вход): постановочный каскадный вход ====== */
.auth .hero-copy{animation:none}  /* отключаем общий fadeUp — анимируем элементы по очереди */
.auth .hero-copy h1{animation:authUp .6s cubic-bezier(.2,.7,.2,1) both}
.auth .hero-copy .lead{animation:authUp .6s cubic-bezier(.2,.7,.2,1) both .12s}
.auth .hero-feats li{animation:authUp .55s cubic-bezier(.2,.7,.2,1) both}
.auth .hero-feats li:nth-child(1){animation-delay:.22s}
.auth .hero-feats li:nth-child(2){animation-delay:.30s}
.auth .hero-feats li:nth-child(3){animation-delay:.38s}
.auth .hero-feats .fi{animation:iconPop .5s cubic-bezier(.2,.8,.3,1.5) both}
.auth .hero-feats li:nth-child(1) .fi{animation-delay:.30s}
.auth .hero-feats li:nth-child(2) .fi{animation-delay:.38s}
.auth .hero-feats li:nth-child(3) .fi{animation-delay:.46s}
.auth .auth-card{animation:authCardIn .6s cubic-bezier(.2,.7,.2,1) both .15s}
.auth .auth-card>*{animation:authUp .5s cubic-bezier(.2,.7,.2,1) both}
.auth .auth-card>*:nth-child(1){animation-delay:.36s}
.auth .auth-card>*:nth-child(2){animation-delay:.44s}
.auth .auth-card>*:nth-child(3){animation-delay:.52s}
.auth .auth-card>*:nth-child(4){animation-delay:.60s}
@keyframes authUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes authCardIn{from{opacity:0;transform:translateY(24px) scale(.975)}to{opacity:1;transform:none}}
@keyframes iconPop{from{opacity:0;transform:scale(.3) rotate(-25deg)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .auth .hero-copy h1,.auth .hero-copy .lead,.auth .hero-feats li,.auth .hero-feats .fi,
  .auth .auth-card,.auth .auth-card>*{animation:none}}

/* ---- misc ---- */
.muted{color:var(--muted)}
.small{font-size:12px}
.hint{font-size:12px;color:var(--muted);line-height:1.35}
.desc-help{display:flex;flex-direction:column;gap:6px;margin:2px 0}
.desc-help ul{margin:8px 0 0;padding-left:20px;line-height:1.55;font-size:13px;color:var(--muted)}
.info-note{background:#f0f6ff;border:1px solid #d6e4ff;color:#1e40af;border-radius:var(--r-md);
  padding:10px 14px;font-size:13px;line-height:1.45;margin:10px 0}
/* Единый подзаголовок-описание под заголовком страницы (вместо отрицательных margin-костылей). */
.page-intro{margin:2px 0 16px;color:var(--muted);font-size:14px;line-height:1.5}
/* Единый success-баннер (на токенах темы, корректен в тёмной теме). */
.note-ok{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--r-md);padding:10px 14px;
  font-size:13px;line-height:1.45;margin:10px 0}
html[data-theme="dark"] .note-ok{background:#0f2a1a;border-color:#1f5133;color:#bbf7d0}
/* Единый заголовок карточки-формы (профиль, вход, регистрация). */
.form-card h2{margin:0 0 8px;font-size:20px;letter-spacing:-.01em}
.error{color:var(--err);font-weight:600}
.ok{color:var(--ok);font-weight:600}
.warn{background:#fffbeb;border:1px solid #fde68a;color:var(--warn);padding:10px 14px;border-radius:var(--r-md);font-size:14px}
/* Баннер «вы пришли из расширения» на странице входа — чтобы вход не путали с ошибкой. */
.ext-note{background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(16,185,129,.08));
  border:1px solid rgba(37,99,235,.28);border-radius:var(--r-md);padding:12px 14px;margin:0 0 14px;
  font-size:13px;line-height:1.5;color:var(--ink)}
.ext-note b{display:block;margin-bottom:4px;color:var(--brand)}
/* Ручной ввод кода ТН ВЭД (запасной путь, если автоподбор ошибся). */
.manual-code{margin:8px 0 2px}
.manual-code-box{padding:8px 2px 2px}
.manual-code-box input{width:100%;max-width:260px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.htmx-indicator{display:none;color:var(--muted);font-size:14px;margin-left:8px}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(37,99,235,.25);
  border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:5px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.result-card,.suggest-box,.clarify{animation:fadeIn .26s ease}
.htmx-request .htmx-indicator,.htmx-indicator.htmx-request{display:inline}
.footer{border-top:1px solid var(--line);padding:22px 24px;color:var(--muted);font-size:13px;text-align:center;background:#fff}
.footer p{max-width:760px;margin:0 auto}

@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:28px;padding:32px 0}
  .hero h1{font-size:32px}
  .cards{grid-template-columns:1fr}
}

/* ============ Динамика и стиль (2026) ============ */
/* Живой aurora-фон — чистый CSS, без JS, не нагружает */
body{position:relative;background:var(--bg)}
body::before{
  content:"";position:fixed;inset:-25vmax;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 16% 10%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(34vmax 34vmax at 86% 16%, rgba(16,185,129,.18), transparent 60%),
    radial-gradient(42vmax 42vmax at 78% 90%, rgba(99,102,241,.16), transparent 62%),
    radial-gradient(30vmax 30vmax at 10% 88%, rgba(14,165,233,.15), transparent 60%);
  animation:aurora 24s ease-in-out infinite alternate;will-change:transform}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.07) rotate(2deg)}
  100%{transform:translate3d(-2.5%,2%,0) scale(1.04) rotate(-2deg)}}
/* тонкая точечная сетка для глубины */
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.6;
  background-image:radial-gradient(rgba(15,23,42,.045) 1px,transparent 1px);background-size:24px 24px}

/* Стекло на карточках */
.form-card,.result-card{backdrop-filter:saturate(1.25) blur(10px);-webkit-backdrop-filter:saturate(1.25) blur(10px);
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow-lg)}
.topbar{backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);
  background:rgba(255,255,255,.72)!important;position:sticky;top:0;z-index:10}

/* Появление снизу */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.form-card,.result-card,.hero-copy,#suggestions>*,#result>*{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
.hero-feats li{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
.hero-feats li:nth-child(2){animation-delay:.08s}
.hero-feats li:nth-child(3){animation-delay:.16s}

/* Кнопки: лёгкий лифт при наведении (без «блика») */
.btn{position:relative;transition:transform .15s ease,box-shadow .25s ease;
  box-shadow:0 8px 22px rgba(37,99,235,.26)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(37,99,235,.40)}
.btn:active{transform:translateY(0)}

/* Логин/регистрация как hero-экран */
.auth{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  min-height:min(72vh,620px);padding:8px 0}
.hero-copy h1{font-size:clamp(30px,4.4vw,52px);line-height:1.04;letter-spacing:-.022em;margin:0 0 18px;font-weight:800}
.hero-grad{background:linear-gradient(100deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-copy .lead{font-size:18px;line-height:1.5;color:var(--muted);max-width:50ch;margin:0 0 26px}
.hero-feats{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.hero-feats li{display:flex;gap:13px;align-items:center;font-weight:600;font-size:15.5px;min-width:0;overflow-wrap:anywhere}
.hero-feats .fi{flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.30)}
.hero-feats .fi svg{width:18px;height:18px}
.auth-card{align-self:center}
@media(max-width:820px){
  .auth{grid-template-columns:minmax(0,1fr);gap:26px;min-height:0;padding:0}
  .auth>*{min-width:0}
  /* auto-margin делает form-card shrink-to-fit (вылезал за трек на узких экранах) — растягиваем по треку */
  .auth .form-card{margin:0 auto;max-width:420px;width:100%;box-sizing:border-box}
  .hero-copy{text-align:center}
  .hero-feats{max-width:420px;margin:0 auto}}
/* инпуты формы не должны распирать грид своей интринсик-шириной (~218px) на узких экранах */
.form-card input,.form-card select,.form-card textarea{min-width:0}

/* Уважение к prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
  .form-card,.result-card,.hero-copy,.hero-feats li,#suggestions>*,#result>*{animation:none}
  .btn{transition:none}.btn:hover{transform:none}
  .sk{animation:none!important}}

/* ============ Состав себестоимости (stacked-bar) ============ */
.cost-split{margin:18px 0 6px}
.cs-title{font-weight:700;font-size:14px;margin-bottom:9px;color:var(--ink)}
.cs-bar{display:flex;height:20px;border-radius:var(--r-pill);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);background:var(--soft, #f1f5f9)}
.cs-seg{height:100%;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.cs-seg:not(:last-child){box-shadow:1px 0 0 rgba(255,255,255,.55)}
.cs-goods{background:#2563eb}.cs-logi{background:#0ea5e9}.cs-duty{background:#f59e0b}
.cs-vat{background:#ef4444}.cs-fee{background:#8b5cf6}.cs-excise{background:#db2777}.cs-util{background:#65a30d}
.cs-legend{list-style:none;margin:12px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:7px 18px}
.cs-legend li{display:flex;align-items:center;gap:8px;font-size:13.5px}
.cs-dot{flex:0 0 auto;width:11px;height:11px;border-radius:3px}
.cs-name{color:var(--muted)}
.cs-pct{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800}
.cs-sum{font-style:normal;color:var(--muted);font-size:12.5px;min-width:84px;text-align:right;
  font-variant-numeric:tabular-nums}

/* ============ Скелетон результата ============ */
.skel{pointer-events:none}
.sk{background:linear-gradient(100deg,rgba(148,163,184,.16) 30%,rgba(148,163,184,.32) 50%,rgba(148,163,184,.16) 70%);
  background-size:200% 100%;animation:skshimmer 1.25s linear infinite;border-radius:var(--r-sm)}
@keyframes skshimmer{to{background-position:-200% 0}}
.sk-h{height:24px;width:46%;margin-bottom:16px}
.sk-line{height:13px;margin:9px 0}
.sk-line.w70{width:70%}
.sk-bar{height:30px;margin:18px 0;border-radius:var(--r-md)}
.sk-row{height:30px;margin:10px 0}
.sk-total{height:48px;width:72%;margin-top:16px}

/* ============ Иконка переключателя темы ============ */
.theme-toggle{padding:8px 11px}
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:inline}
html[data-theme="dark"] .theme-toggle .ic-sun{display:inline}
html[data-theme="dark"] .theme-toggle .ic-moon{display:none}

/* ============ Тёмная тема ============ */
html[data-theme="dark"]{
  --ink:#e6eaf2; --muted:#94a3b8; --bg:#0a0f1d; --card:#111a2e; --line:#243049;
  --soft:#16203a; --shadow:0 1px 3px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.34); --shadow-lg:0 8px 24px rgba(0,0,0,.40), 0 24px 56px rgba(0,0,0,.46);
}
html[data-theme="dark"] body::after{background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px)}
html[data-theme="dark"] body::before{opacity:.55}
html[data-theme="dark"] .topbar{background:rgba(12,19,36,.78)!important;border-bottom-color:var(--line)}
html[data-theme="dark"] .brand,html[data-theme="dark"] .navlink{color:var(--ink)}
html[data-theme="dark"] .navlink:hover{background:rgba(59,130,246,.16)}
html[data-theme="dark"] .acct-btn:hover{background:rgba(59,130,246,.16)}
html[data-theme="dark"] .acct[open] .acct-btn{background:rgba(59,130,246,.2);border-color:rgba(59,130,246,.32)}
html[data-theme="dark"] .acct-item.danger{color:#f87171}
html[data-theme="dark"] .acct-item.danger:hover{background:rgba(220,38,38,.16)}
html[data-theme="dark"] .glass{background:rgba(17,26,46,.82);border-color:var(--line)}
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .result-card{background:rgba(17,26,46,.9);border-color:var(--line)}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .form-grid .cell input,html[data-theme="dark"] .form-grid .cell select,
html[data-theme="dark"] .form-card input,html[data-theme="dark"] .form-card select,html[data-theme="dark"] .form-card textarea,
html[data-theme="dark"] .hist-search,html[data-theme="dark"] .clarify-in,html[data-theme="dark"] .combobox>input,
html[data-theme="dark"] .addmgr-in{
  background:#0d1526;color:var(--ink);border-color:var(--line)}
/* СТРАХОВКА ТЁМНОЙ ТЕМЫ: базовое правило выше красит поля в #fff, а перечисление селекторов
   неизбежно отстаёт от новых форм (так поле кода ТН ВЭД в калькуляторе и «сообщение команде»
   оказались белыми с белым текстом — человек не видел, что вводит). Ловим КЛАСС проблемы:
   в тёмной теме любое текстовое поле тёмное. Кнопки-инпуты и чекбоксы исключены. */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#0d1526;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#6b7a94}

html[data-theme="dark"] .btn-outline{background:#0d1526;color:var(--ink)}
html[data-theme="dark"] .btn-outline:hover{border-color:var(--brand);color:#fff}
html[data-theme="dark"] .cb-list{background:#0f1830;border-color:var(--line)}
html[data-theme="dark"] .cb-opt{color:var(--ink)}
html[data-theme="dark"] .suggest-item{border-color:var(--line)}
html[data-theme="dark"] table.breakdown tr.subtotal td,
html[data-theme="dark"] table.mini tr.subtotal td,
html[data-theme="dark"] table.history th{background:#16203a}
html[data-theme="dark"] .methodology,html[data-theme="dark"] .uv-rates{background:#0f1830}
html[data-theme="dark"] table.logtbl th,html[data-theme="dark"] table.dash-tbl th{background:#16203a;color:#94a3b8}
html[data-theme="dark"] .footer{background:#0c1322;border-top-color:var(--line)}
html[data-theme="dark"] .advanced{border-color:var(--line)}
html[data-theme="dark"] .res-bar{background:#1c2740}
html[data-theme="dark"] .srcbar{background:#1c2740}
html[data-theme="dark"] .kpi-n.kpi-err{-webkit-text-fill-color:#f87171;color:#f87171}
html[data-theme="dark"] .info-note{background:#0e2036;border-color:#1e3a5f;color:#93c5fd}
/* Тёмная тема: у строк-ошибок и warn/risk-боксов был захардкожен СВЕТЛЫЙ фон (#fef2f2/#fffbeb),
   а текст ячеек — светлый (--ink) → светлое на светлом, не читалось. Даём тёмно-красный/жёлтый
   тинт-фон + светлый текст сообщения. (Дашборд «Последние ошибки», журнал, риск КТС, warn-боксы.) */
html[data-theme="dark"] table.logtbl tr.logerr,
html[data-theme="dark"] table.dash-tbl tr.logerr td{background:rgba(220,38,38,.15)}
html[data-theme="dark"] table.logtbl tr.logerr .lt-msg{color:#fca5a5}
html[data-theme="dark"] .risk-note{background:rgba(220,38,38,.13);border-color:#5c2626;color:#fca5a5}
html[data-theme="dark"] .warn{background:rgba(180,83,9,.18);border-color:#5c4a1e;color:#fcd34d}
html[data-theme="dark"] .marking-yes{background:rgba(220,38,38,.13);border-color:#5c2626}
html[data-theme="dark"] .doc-level.req{background:rgba(220,38,38,.18);color:#fca5a5}
html[data-theme="dark"] .cs-bar{background:#1c2740;box-shadow:inset 0 0 0 1px var(--line)}
html[data-theme="dark"] .crm-fields{background:#0d1526;border-color:var(--line)}

/* ============ Админ: компании и менеджеры ============ */
/* Форма создания: название во всю ширину сверху, ИНН/лимит/кнопка — ряд снизу. */
.co-create{display:flex;flex-direction:column;gap:14px}
.co-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.co-fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.co-fld.full{width:100%}
.co-fld.grow{flex:1 1 320px}
.co-fld.sm{flex:0 0 180px}
.co-fld>label{font-size:14px;font-weight:700;color:var(--ink)}
.co-fld input{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s}
.co-fld input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.co-fld .hint{font-size:11.5px;color:var(--muted);line-height:1.3}
.co-create .co-go{align-self:flex-start;margin-top:27px;min-height:51px;padding-top:0;padding-bottom:0}

/* Карточка компании */
.co-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.co-head-actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
a.act{text-decoration:none}

/* Поиск по компаниям */
.co-search{position:relative;display:flex;align-items:center;gap:10px;margin:0 0 14px}
.co-search-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex;pointer-events:none}
.co-search input{flex:1;min-width:0;padding:11px 12px 11px 38px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);font-size:15px}
.co-search input:focus{outline:none;border-color:var(--accent,#2563eb);box-shadow:var(--ring)}
.co-search-count{white-space:nowrap}
.co-none{text-align:center;padding:18px}

/* Компания как разворачиваемая строка */
details.co-row{padding:0}
details.co-row+details.co-row{margin-top:10px}
/* summary сам по себе НЕ делаем flex-контейнером (в части браузеров display:flex на <summary>
   не работает и space-between игнорируется). Flex-контейнер — внутренний div .co-sum-in. */
.co-sum{display:block;padding:12px 10px 12px 16px;cursor:pointer;list-style:none;user-select:none;
  border-radius:var(--r-lg);transition:background .15s}
.co-sum::-webkit-details-marker{display:none}
.co-sum-in{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;width:100%}
.co-sum:hover{background:rgba(127,127,127,.06)}
.co-sum-l{display:inline-flex;align-items:center;gap:10px;min-width:0;flex:1}
.co-sum-name{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.co-caret{display:inline-flex;align-items:center;color:var(--accent,#2563eb);transition:transform .18s;flex:none}
.co-caret .i{width:18px;height:18px;stroke-width:2.6}
details.co-row[open] .co-caret{transform:rotate(90deg)}
.co-sum-inn{font-size:12.5px;color:var(--muted);background:rgba(127,127,127,.09);
  padding:2px 8px;border-radius:var(--r-sm);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Правый кластер строки — прижат к правому краю строки (чипы → логотип → корзина в самом конце),
   одна ровная линия, единая высота 32px, без переноса внутри. */
.co-sum-r{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-left:auto}
.co-chip{display:inline-flex;align-items:center;gap:5px;height:32px;box-sizing:border-box;padding:0 11px;
  border:1px solid var(--line);border-radius:var(--r-pill);font-size:13px;color:var(--muted);white-space:nowrap}
.co-chip .i{opacity:.8}
.co-chip b{font-weight:700;color:var(--ink)}
/* Фиксированный слот логотипа: всегда занимает место (даже без логотипа),
   логотип прижат вправо — сразу слева от кнопки удаления. */
/* Слот логотипа: схлопывается в 0, когда логотипа нет (корзина прижата к концу строки без зазора);
   когда логотип есть — встаёт вплотную слева от корзины. */
.co-sum-logo-slot{flex:none;display:flex;align-items:center}
.co-sum-logo-slot:empty{display:none}
.co-sum-logo{height:32px;max-width:92px;box-sizing:border-box;object-fit:contain;border-radius:var(--r-sm);
  background:#fff;padding:2px 6px;border:1px solid var(--line)}
/* Кнопка удаления — жёстко в самом конце полоски, не сдвигается. */
.co-del{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:transparent;color:var(--muted);
  cursor:pointer;transition:all .15s}
.co-del:hover{border-color:#dc2626;color:#dc2626;background:#fef2f2}
html[data-theme="dark"] .co-del:hover{background:rgba(220,38,38,.12)}
.mgr .co-del{width:30px;height:30px}
.mgr-del-cell{text-align:center;width:44px}
.co-body{padding:16px 10px 16px 16px;border-top:1px solid var(--line);margin-top:2px}
details.co-row[open] .co-sum{border-bottom-left-radius:0;border-bottom-right-radius:0}

/* Баннер-предупреждение удаления компании (in-page overlay) */
.codel-overlay[hidden]{display:none}
.codel-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(2,6,23,.55);backdrop-filter:blur(3px);animation:fadeIn .15s ease both}
.codel-box{width:100%;max-width:480px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(2,6,23,.4);padding:20px 22px;animation:popIn .2s cubic-bezier(.2,.8,.2,1) both}
.codel-banner{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:#dc2626}
.codel-warn{margin:10px 0 14px;font-size:14px;line-height:1.5;color:var(--ink)}
.codel-card{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);
  border-radius:var(--r-md);background:rgba(127,127,127,.05)}
.codel-logo{width:60px;height:60px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);background:#fff;border:1px solid var(--line);color:var(--muted);overflow:hidden}
.codel-logo img{max-width:100%;max-height:100%;object-fit:contain}
.codel-info{min-width:0}
.codel-name{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.codel-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:12.5px;color:var(--muted)}
.codel-meta span{display:inline-flex;align-items:center;gap:4px}
.codel-admin{margin-top:6px;font-size:13px;color:var(--muted)}
.codel-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.btn-danger{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border:none;border-radius:var(--r-md);
  background:#dc2626;color:#fff;font-weight:600;cursor:pointer;transition:background .15s}
.btn-danger:hover{background:#b91c1c}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.co-title{margin:0;font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;min-width:0;word-break:break-word}
.co-meta{font-size:12.5px;color:var(--muted)}
.badge-on{font-size:11px;font-weight:700;padding:3px 11px;border-radius:var(--r-pill);white-space:nowrap;background:#dcfce7;color:#15803d}
.badge-off{font-size:11px;font-weight:700;padding:3px 11px;border-radius:var(--r-pill);white-space:nowrap;background:#fee2e2;color:#b91c1c}

/* Строка-разрешение */
.co-perm{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 15px;margin:14px 0}
.co-perm .pl{min-width:0}
.co-perm .pl b{font-size:13.5px}
.co-perm .pl .hint{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35}

/* Таблица менеджеров */
.mgr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* «С выбранными» (аудит 2026-07-14): раньше 10 кнопок стояли стеной («вразнобой»). Теперь — аккуратные
   сгруппированные чипы по разделу (Доступ/Профиль/Дашборд/…), каждый с короткими «Вкл/Выкл». Обработчики
   и value кнопок не изменены — только группировка и подписи. */
.bulk-bar{display:flex;flex-wrap:wrap;gap:9px 12px;align-items:center;margin:4px 0 12px}
.bulk-bar .bulk-lbl{font-weight:700;font-size:13px;color:var(--muted);margin-right:2px}
.bulk-grp{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 11px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--soft)}
.bulk-grp .bg-cap{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.bulk-grp .act{padding:5px 10px;font-size:12.5px}
table.mgr{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px}
table.mgr th{text-align:center;padding:8px 9px;font-size:11px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
/* vertical-align:top (не middle): колонка «Менеджер» высокая и РАЗНОЙ высоты (длинный email переносится
   на 2 строки), поэтому при middle тумблеры/поля в остальных колонках центрировались по разной высоте и
   «уезжали» вниз на строках с длинным email. top держит их на одной линии с email независимо от переноса. */
table.mgr td{padding:9px;border-bottom:1px solid var(--line);vertical-align:top;
  white-space:nowrap;text-align:center}
table.mgr tr:last-child td{border-bottom:none}
/* Колонка «Менеджер» тянется во всю ширину и переносится; остальные — компактные в одну строку,
   по центру (устойчиво к числу колонок — не зависит от nth-child). */
/* email менеджера может быть очень длинным — переносим его в любом месте, чтобы он сворачивался
   ВНУТРИ своей колонки (она тянется по остатку и ужимается) и таблица не вылезала за карточку,
   иначе правые колонки (Пароль/Сброс/удалить) уезжали бы за край. */
table.mgr td:nth-child(2),table.mgr th:nth-child(2){width:100%;white-space:normal;text-align:left;
  overflow-wrap:anywhere;word-break:break-word}
.pw-cell{display:inline-flex;align-items:center;gap:7px;flex-wrap:nowrap;justify-content:center}
.pw-mask{font-family:ui-monospace,monospace;font-size:13px;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 9px;min-width:70px;text-align:center;letter-spacing:.04em}
.mgr-acts{display:flex;gap:7px;flex-wrap:wrap}
/* Добавить менеджера: подпись сверху (на всю ширину), поле + кнопка — на одной линии,
   кнопка по центру поля; подсказка — строкой ниже. */
.co-addmgr{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:0;
  padding-top:16px;border-top:1px dashed var(--line)}
.addmgr-l{flex-basis:100%;margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.addmgr-in{flex:1 1 280px;min-width:0;font:inherit;padding:0 14px;height:48px;box-sizing:border-box;border:1px solid var(--line);
  border-radius:var(--r-md);background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.addmgr-in:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.addmgr-btn{flex:0 0 auto;white-space:nowrap;align-self:center;height:48px;box-sizing:border-box}
.addmgr-hint{flex-basis:100%;margin:0;font-size:11.5px;color:var(--muted)}

/* ── Команда v2 (2026-07-14): «Вход» master + уровни-пресеты + точечная настройка ── */
/* Выключенный вход → строка тускнеет, кроме управляющих колонок (Вход/Уровень/Место/удалить), чтобы можно было вернуть доступ. */
table.mgr tr.mgr-off > td:not(.mgr-keep):not(.mgr-del-cell){opacity:.4}
.m-sub{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.m-sub .mgr-dept{max-width:120px}
.sw-lbl.on{color:#16a34a}
table.mgr td.mgr-lvl-cell,table.mgr th:nth-child(4){text-align:left}
.mgr-keep{white-space:nowrap}
.lvl-sel{font:inherit;font-size:12.5px;font-weight:650;padding:6px 10px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--soft);color:var(--ink);cursor:pointer;max-width:200px}
.lvl-sel.lvl-full{border-color:#3b82f6;color:#2563eb;background:rgba(59,130,246,.10)}
.lvl-sel.lvl-crm{border-color:#14b8a6;color:#0d9488;background:rgba(20,184,166,.12)}
.lvl-sel.lvl-calc{border-color:#f59e0b;color:#b45309;background:rgba(245,158,11,.13)}
.lvl-sel.lvl-none{border-color:var(--line);color:var(--muted)}
.mgr-tune{margin-top:7px}
.mgr-tune-sum,.bulk-tune-sum{cursor:pointer;font-size:12px;font-weight:650;color:var(--brand);
  list-style:none;display:inline-flex;align-items:center;gap:5px;user-select:none}
.mgr-tune-sum::after{content:"▾";font-size:10px}
.bulk-tune-sum::after{content:"▾";font-size:10px}
.mgr-tune[open]>.mgr-tune-sum::after{content:"▴"}
.bulk-tune[open]>.bulk-tune-sum::after{content:"▴"}
.mgr-tune-sum::-webkit-details-marker{display:none}
.bulk-tune-sum::-webkit-details-marker{display:none}
.tune-grid{display:flex;flex-direction:column;gap:9px;margin-top:10px;padding:12px 14px;
  border:1px dashed var(--line);border-radius:var(--r-md);background:var(--soft);white-space:normal;min-width:230px}
.tune-head{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.tune-item{display:flex;align-items:center;justify-content:space-between;gap:14px}
.tune-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.tune-l{font-size:12.5px;font-weight:600;color:var(--ink)}
.tune-d{font-size:11px;color:var(--muted);line-height:1.3}
.lvl-legend .ll-d{font-size:11.5px;color:var(--muted);margin-right:4px}
/* легенда уровней */
.lvl-legend{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:2px 0 12px}
.lvl-legend .ll-cap{font-size:12.5px;color:var(--muted);font-weight:600}
.lvl-legend .ll-hint{font-size:11.5px;color:var(--muted)}
.lvl-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.lvl-pill.lvl-full{background:rgba(59,130,246,.14);color:#2563eb}
.lvl-pill.lvl-crm{background:rgba(20,184,166,.15);color:#0d9488}
.lvl-pill.lvl-calc{background:rgba(245,158,11,.16);color:#b45309}
.lvl-help{margin:0 0 14px;font-size:12px;color:var(--muted);line-height:1.5;max-width:820px}
/* Стильные цветные точки уровней вместо эмодзи-шариков */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle;
  flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent)}
.dot-full,.dot-blue{background:#3b82f6;color:#3b82f6}
.dot-crm,.dot-teal{background:#14b8a6;color:#14b8a6}
.dot-calc,.dot-amber{background:#f59e0b;color:#f59e0b}
.dot-none,.dot-grey{background:#94a3b8;color:#94a3b8}
.dot-red{background:#ef4444;color:#ef4444}
.dot-green{background:#10b981;color:#10b981}
.mgr-lvl-cell{white-space:nowrap}
/* массовые: точечная настройка (свёрнута) */
.bulk-tune{flex-basis:100%;margin-top:2px}
.bulk-tune-row{display:flex;flex-wrap:wrap;gap:9px 12px;margin-top:10px}

/* Кнопка-действие: иконка + подпись, единый стиль */
.act{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:600;
  border:1px solid var(--line);background:#fff;border-radius:var(--r-md);padding:7px 12px;cursor:pointer;
  color:var(--ink);line-height:1;transition:border-color .15s,background .15s,color .15s,transform .08s}
.act .i{width:15px;height:15px;flex:0 0 auto}
.act:hover{border-color:var(--brand);color:var(--brand);background:rgba(37,99,235,.06)}
.act:active{transform:translateY(1px)}
.act.danger:hover{border-color:#dc2626;color:#dc2626;background:#fef2f2}
.act.good:hover{border-color:#16a34a;color:#16a34a;background:#f0fdf4}
.act.ghost{border-style:dashed;color:var(--muted)}

/* Стильный тултип: «что произойдёт» при наведении */
.tip{position:relative}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translate(-50%,4px);background:#0f172a;color:#fff;font-size:12px;font-weight:500;
  line-height:1.35;white-space:normal;width:max-content;max-width:240px;padding:7px 11px;border-radius:var(--r-sm);
  box-shadow:0 8px 22px rgba(2,6,23,.28);opacity:0;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;z-index:60}
.tip::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#0f172a;opacity:0;transition:opacity .16s ease;z-index:60}
.tip:hover::after{opacity:1;transform:translate(-50%,0)}
.tip:hover::before{opacity:1}

/* Тёмная тема */
html[data-theme="dark"] .co-fld input,html[data-theme="dark"] .act{background:#0d1526;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .badge-on{background:#0f2a1a;color:#4ade80}
html[data-theme="dark"] .badge-off{background:#2a1620;color:#f87171}
html[data-theme="dark"] .tip::after,html[data-theme="dark"] .tip::before{background:#e2e8f0;color:#0f172a}
html[data-theme="dark"] .tip::before{border-top-color:#e2e8f0}
@media(prefers-reduced-motion:reduce){.tip::after,.tip::before{transition:none}}

/* Чекбоксы выбора менеджеров + панель массовых действий */
.mgr .ck{width:36px;text-align:center}
.mgr-all,.mgr-chk{width:16px;height:16px;cursor:pointer;accent-color:var(--brand)}
.bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;
  padding:10px 13px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md)}
.bulk-lbl{font-size:12.5px;font-weight:700;color:var(--muted)}

/* Тумблер (switch) — стерилизован под систему */
.switch{position:relative;display:inline-flex;width:40px;height:22px;flex:0 0 auto;cursor:pointer;vertical-align:middle}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.switch .track{position:absolute;inset:0;background:#cbd5e1;border-radius:var(--r-pill);transition:background .2s ease}
.switch .thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;
  box-shadow:0 1px 3px rgba(2,6,23,.35);transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.switch input:checked ~ .track{background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.switch input:checked ~ .thumb{transform:translateX(18px)}
.switch input:focus-visible ~ .track{box-shadow:0 0 0 3px rgba(37,99,235,.25)}
/* подпись состояния — ПОД тумблером, по центру: так тумблер и подпись стоят строго под
   центрированным заголовком колонки, и колонки выстраиваются ровно (раньше подпись была
   сбоку и «уводила» тумблер влево от центра). */
.sw-lbl{display:block;font-size:11px;color:var(--muted);margin:4px 0 0;text-align:center;line-height:1.25}
html[data-theme="dark"] .switch .track{background:#334155}
@media(prefers-reduced-motion:reduce){.switch .track,.switch .thumb{transition:none}}

/* ============ Единый вход контента (админ/дашборд) ============ */
.dash-head,.kpi-grid,.dash-card,.hist-head{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
.dash-card:nth-of-type(2){animation-delay:.06s}
.dash-card:nth-of-type(3){animation-delay:.12s}
.dash-card:nth-of-type(4){animation-delay:.18s}
.dash-card:nth-of-type(n+5){animation-delay:.24s}

/* Подсветка строки при HTMX-обновлении (тумблер доступа/права, массовое действие) */
@keyframes rowFlash{from{background:rgba(37,99,235,.16)}to{background:transparent}}
table.mgr tr.htmx-added{animation:rowFlash .9s ease}

/* Журнал: строки появляются каскадом (как в Истории) */
table.logtbl tbody tr{animation:fadeUp .4s cubic-bezier(.2,.7,.2,1) both}
table.logtbl tbody tr:nth-child(1){animation-delay:.02s}
table.logtbl tbody tr:nth-child(2){animation-delay:.05s}
table.logtbl tbody tr:nth-child(3){animation-delay:.08s}
table.logtbl tbody tr:nth-child(4){animation-delay:.11s}
table.logtbl tbody tr:nth-child(5){animation-delay:.14s}
table.logtbl tbody tr:nth-child(6){animation-delay:.17s}
table.logtbl tbody tr:nth-child(n+7){animation-delay:.2s}

@media(prefers-reduced-motion:reduce){
  .dash-head,.kpi-grid,.dash-card,.hist-head,
  table.mgr tr.htmx-added,table.logtbl tbody tr{animation:none}}

/* Крестик удаления логотипа */
.logo-thumb{position:relative;display:inline-block;margin-top:4px}
.logo-del{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:#dc2626;font-size:13px;font-weight:700;
  cursor:pointer;line-height:1;box-shadow:0 2px 6px rgba(2,6,23,.18);transition:background .15s,transform .1s}
.logo-del:hover{background:#fef2f2;border-color:#dc2626;transform:scale(1.1)}
html[data-theme="dark"] .logo-del{background:#1a2336;border-color:var(--line)}

/* ============ FAQ / Справка ============ */
.faq-wrap{max-width:860px;margin:0 auto}
.faq-h{font-size:15px;margin:0 0 10px;display:flex;align-items:center;gap:10px}
.faq-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;
  border-radius:var(--r-md);background:linear-gradient(135deg,rgba(37,99,235,.13),rgba(16,185,129,.13));color:#2563eb}
.faq-ic .i{width:18px;height:18px}
html[data-theme="dark"] .faq-ic{background:rgba(37,99,235,.20);color:#7eb0ff}
.faq-item{border-top:1px solid var(--line)}
.faq-item:first-of-type{border-top:none}
.faq-item summary{cursor:pointer;padding:11px 2px;font-weight:600;font-size:14.5px;list-style:none;
  display:flex;align-items:center;gap:11px;transition:color .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"+";width:19px;height:19px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--brand);font-weight:700;font-size:14px;line-height:1}
.faq-item[open] summary::before{content:"–"}
.faq-item summary:hover{color:var(--brand)}
.faq-a{padding:0 2px 12px 32px;color:var(--muted);font-size:13.5px;line-height:1.55;animation:fadeUp .3s ease both}
.faq-ask{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.faq-q{flex:1 1 320px;min-width:0;font:inherit;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-md);background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.faq-q:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.faq-ask-card{border:1px solid #bae6fd;background:linear-gradient(135deg,rgba(37,99,235,.05),rgba(16,185,129,.05))}
#faq-answer{margin-top:10px}
html[data-theme="dark"] .faq-q{background:#0d1526;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .faq-ask-card{border-color:#1e3a5f;background:#0e1b2e}
@media(prefers-reduced-motion:reduce){.faq-a{animation:none}}

/* Разделитель в навигации: рабочие разделы | служебные (FAQ, тема, выход) */
.nav-sep{width:1px;height:22px;background:var(--line);margin:0 6px;flex:0 0 auto}
@media(max-width:560px){.nav-sep{display:none}}

/* Подпись переключателя темы — меняется вместе с иконкой */
.theme-toggle .th-to-light{display:none}
html[data-theme="dark"] .theme-toggle .th-to-dark{display:none}
html[data-theme="dark"] .theme-toggle .th-to-light{display:inline}

/* Строка администратора компании (первый аккаунт, помечен АДМИН) */
.co-admin{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0;
  background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(16,185,129,.06));
  border:1px solid var(--line);border-radius:var(--r-md);padding:9px 13px}
.badge-admin{font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;white-space:nowrap}
html[data-theme="dark"] .co-admin{background:#0e1b2e;border-color:#1e3a5f}

/* ============================ CRM — воронка продаж (канбан) ============================ */
.crm-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.crm-head h2{margin:0}
.crm-company{font:inherit;font-weight:600;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);color:var(--ink);max-width:280px}
.crm-empty{margin-top:18px}

/* доска: горизонтальный скролл колонок */
.crm-board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding:6px 2px 22px;
  scroll-snap-type:x proximity}
.crm-col{flex:0 0 286px;width:286px;background:var(--soft);border:1px solid var(--line);
  border-radius:var(--r-lg);display:flex;flex-direction:column;max-height:calc(100vh - 220px);scroll-snap-align:start}
.crm-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;
  border-top:3px solid var(--stage,var(--brand));border-radius:12px 14px 0 0;background:var(--card)}
.crm-col-name{font-weight:700;font-size:14px;color:var(--ink)}
.crm-col-meta{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.crm-col-sum{color:var(--ink)}
.crm-col-body{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px;min-height:60px}

/* карточка сделки */
.crm-card{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--stage,transparent);
  border-radius:var(--r-md);padding:11px 12px;cursor:pointer;box-shadow:0 1px 2px rgba(2,6,23,.05);
  transition:box-shadow .15s,transform .05s,border-color .15s}
.crm-card:hover{box-shadow:var(--shadow);border-color:rgba(37,99,235,.35)}
.crm-card:active{transform:scale(.997)}
.crm-card-title{font-weight:650;font-size:14px;color:var(--ink);line-height:1.35}
.crm-card-budget{margin-top:5px;font-weight:800;font-size:13.5px;color:var(--ok)}
.crm-card-client{margin-top:3px;font-size:12.5px;color:var(--muted)}
.crm-col[data-kind="won"]{outline:1px solid rgba(22,163,74,.18)}
.crm-col[data-kind="lost"] .crm-card{opacity:.78}
.crm-ghost{opacity:.35}
.crm-drag{box-shadow:var(--shadow-lg) !important;transform:rotate(1.5deg)}

/* добавление сделки внизу колонки */
.crm-add{display:flex;flex-direction:column;gap:6px;padding:10px;border-top:1px dashed var(--line)}
.crm-add-row2{display:grid;grid-template-columns:1fr 1fr 64px auto;gap:6px}
.crm-add input{font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);min-width:0}
.crm-add input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.crm-add-btn{border:none;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  font-size:17px;font-weight:700;border-radius:var(--r-sm);cursor:pointer;width:38px;line-height:1}
.crm-add-btn:hover{opacity:.92}

/* боковая панель сделки (drawer) */
.crm-drawer{position:fixed;inset:0;z-index:60;display:none}
.crm-drawer.open{display:block}
.crm-drawer-bg{position:absolute;inset:0;background:rgba(2,6,23,.42);backdrop-filter:blur(2px)}
.crm-drawer-panel{position:absolute;top:0;right:0;height:100%;max-width:96vw;overflow-y:auto;
  background:var(--card);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);
  padding:20px 22px;animation:crmSlide .18s ease}
/* RTL (арабский): карточка выезжает СЛЕВА, а не справа */
[dir="rtl"] .crm-drawer-panel{right:auto;left:0;border-left:0;border-right:1px solid var(--line)}
[dir="rtl"] .crm-drawer-resize{left:auto;right:0}
@keyframes crmSlide{from{transform:translateX(28px);opacity:.6}to{transform:translateX(0);opacity:1}}
.crm-deal-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.crm-stage-chip{font-size:12px;font-weight:700;color:#fff;background:var(--stage,var(--brand));
  padding:4px 11px;border-radius:var(--r-pill)}
.crm-x{border:none;background:none;font-size:18px;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:var(--r-sm)}
.crm-x:hover{background:var(--soft);color:var(--ink)}
.crm-deal-form{display:flex;flex-direction:column;gap:13px}
.crm-f{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--ink)}
.crm-f input,.crm-f select{font:inherit;font-size:13px;font-weight:500;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease;
  height:40px;box-sizing:border-box}  /* input и select строго одной высоты (иначе select на 2px ниже) */
.crm-f input:focus,.crm-f select:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.crm-f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* заголовок секции внутри карточки — структурирует и даёт «воздух» */
.crm-block-h{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  margin:14px 0 2px;padding-bottom:6px;border-bottom:1px solid var(--line)}
/* панель действий — отделена сверху, «Удалить» уходит вправо, без слипания и конфликта цветов */
.crm-deal-actions{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.crm-act-del{margin-left:auto}
/* .btn-outline.danger — единое определение ниже (строка ~1110) */
.crm-saved{color:var(--ok);font-weight:700;font-size:13px}
.crm-notes{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.crm-notes h4{margin:0 0 10px;font-size:15px}
.crm-note-add{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.crm-note-add textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);color:var(--ink);resize:vertical}
.crm-note-add textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.crm-note-add .btn-sm{align-self:flex-end}
#notes-list,#dash-activity{display:flex;flex-direction:column;gap:9px}
.crm-note{position:relative;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 12px}
.crm-note-body{font-size:13.5px;color:var(--ink);white-space:pre-wrap;line-height:1.45}
.crm-note-meta{margin-top:5px;font-size:11.5px;color:var(--muted)}
/* Кнопки удаления/редактирования задачи/примечания — тонкие иконки */
.crm-task-del,.crm-note-del,.crm-task-edit,.crm-note-edit{flex:0 0 auto;border:0;background:transparent;color:var(--muted);
  cursor:pointer;font-size:14px;line-height:1;padding:4px 6px;border-radius:8px;opacity:.55}
.crm-note-del{position:absolute;top:6px;right:6px}
.crm-note-edit{position:absolute;top:6px;right:32px}
.crm-task-del:hover,.crm-note-del:hover{color:#ef4444;opacity:1;background:rgba(239,68,68,.1)}
.crm-task-edit:hover,.crm-note-edit:hover{color:var(--brand);opacity:1;background:rgba(37,99,235,.1)}
/* Инлайн-форма редактирования задачи */
.crm-task-editf{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%}
.crm-task-editf input[name=title]{flex:1 1 140px;min-width:120px}
.crm-task-editf input,.crm-task-editf select{font:inherit;padding:5px 8px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);color:var(--ink)}
/* Инлайн-форма редактирования примечания */
.crm-note-editf{display:flex;flex-direction:column;gap:6px}
.crm-note-editf textarea{width:100%;font:inherit;padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);color:var(--ink);resize:vertical}
.crm-note-editf .crm-note-editf-btns{display:flex;gap:6px}
/* Правка позиции товара */
.crm-item-e{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 5px;
  border-radius:8px;opacity:.6}
.crm-item-e:hover{color:var(--brand);opacity:1;background:rgba(37,99,235,.1)}
.crm-item-editf{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.crm-item-editf input{font:inherit;padding:5px 8px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--ink)}
.crm-item-editf input[name=name]{flex:1 1 120px;min-width:100px}
@media(max-width:560px){.crm-col{flex-basis:84vw;width:84vw}.crm-add{grid-template-columns:1fr 64px auto}}
/* Мобильно: колонки скроллятся ВНУТРИ себя (как Trello) — вертикальный свайп над доской двигает
   карточки колонки, горизонтальный — карусель колонок. Высота колонки = экран минус шапка.
   (Единый скролл страницы не годился: горизонтальный контейнер-доска перехватывал вертикаль.) */
@media(max-width:640px){
  /* Единый скролл страницы: колонки НЕ скроллятся внутри (растут по контенту). Вертикальный свайп
     по ВСЕЙ доске (карточки/форма/шапка) двигает страницу через JS-мост crmBoardScrollBridge()
     (crm.js) — иначе горизонтальный контейнер-доска перехватывал вертикаль на всех «слоях». */
  .crm-col{max-height:none}
  .crm-col-body{overflow:visible}
}

/* --- KPI шапка --- */
.crm-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin:6px 0 16px}
.crm-kpi .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px}
.kpi-v{font-size:18px;font-weight:800;color:var(--ink);line-height:1.1}
.crm-kpi .kpi-l{font-size:11.5px;color:var(--muted);margin-top:3px;font-weight:600}
.kpi-won .kpi-v{color:var(--ok)}
.kpi-lost .kpi-v{color:var(--ink)}
.kpi-lost .kpi-v:not(:empty)[data-nonzero="1"]{color:var(--err)}
@media(max-width:760px){.crm-kpi{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.crm-kpi{grid-template-columns:repeat(2,1fr);gap:10px}.crm-kpi .kpi{padding:10px 11px}}

/* --- тулбар: поиск/фильтры/вид --- */
.crm-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.crm-bar .crm-search{flex:1;min-width:200px;font:inherit;padding:9px 13px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--card);color:var(--ink)}
.crm-bar select{font:inherit;font-weight:600;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);color:var(--ink)}
.crm-bar input:focus,.crm-bar select:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.crm-view{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.crm-view-b{padding:9px 14px;font-weight:600;font-size:14px;color:var(--ink);background:var(--card)}
.crm-view-b:hover{text-decoration:none;background:var(--soft)}
.crm-view-b.active{background:var(--brand);color:#fff}
.crm-cfg{padding:9px 14px;font-size:14px}
.crm-hint{margin:2px 0 10px}

/* --- богатая карточка --- */
.crm-card-head{display:flex;align-items:flex-start;gap:7px}
/* Ручка перетаскивания карточки: только за неё drag → тело карточки свободно скроллит колонку.
   touch-action:none — свайп по ручке тащит (не скроллит); тап по ручке не открывает сделку (stopPropagation). */
.crm-card-grip{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;justify-content:center;
  cursor:grab;color:var(--muted);opacity:.4;font-size:14px;line-height:1;letter-spacing:-2px;
  user-select:none;-webkit-user-select:none;touch-action:none;margin:-2px 0 -2px -4px;padding:0 3px}
.crm-card-grip:active{cursor:grabbing;opacity:.85}
.crm-card:hover .crm-card-grip{opacity:.65}
.crm-prio{width:9px;height:9px;border-radius:50%;background:var(--p,#f59e0b);flex:0 0 auto;margin-top:5px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--p,#f59e0b) 22%,transparent)}
.crm-card-head .crm-card-title{flex:1}
.crm-ava{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:10.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.crm-ava.sm{width:22px;height:22px}
.crm-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.crm-tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);color:#fff;background:var(--t,#2563eb)}
.crm-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.crm-task-pill{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--soft);color:var(--muted);max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-task-pill.crm-overdue{background:#fef2f2;color:#dc2626}
.crm-task-pill.crm-today{background:#fffbeb;color:#b45309}
.crm-task-pill.crm-soon{background:#eff6ff;color:#2563eb}
html[data-theme="dark"] .crm-task-pill.crm-overdue{background:#2a1414;color:#fca5a5}
html[data-theme="dark"] .crm-task-pill.crm-today{background:#2a2410;color:#fde047}
html[data-theme="dark"] .crm-task-pill.crm-soon{background:#0e1d33;color:#93c5fd}
.crm-age{font-size:10.5px;color:var(--muted);white-space:nowrap}
.crm-notask{font-size:10.5px;font-weight:700;color:#d97706;display:inline-flex;align-items:center;gap:3px}
html[data-theme="dark"] .crm-notask{color:#fbbf24}
/* пресет-чипы и сохранённые фильтры */
/* Один ряд, НЕ переносится вниз при росте числа сохранённых фильтров (те же грабли, что были у
   вкладок воронок): чипы листаются вбок, а не расширяют панель вниз. Тонкий скроллбар — подсказка. */
.crm-presets{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  margin:-2px 0 12px;padding-bottom:2px;scrollbar-width:thin;overscroll-behavior-x:contain}
.crm-presets>*{flex:0 0 auto}
.crm-presets::-webkit-scrollbar{height:6px}
.crm-presets::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.crm-presets-sep{width:1px;height:18px;background:var(--line);margin:0 2px}
.crm-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  height:31px;box-sizing:border-box;
  padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);
  color:var(--muted);cursor:pointer;text-decoration:none;transition:all .15s ease}
.crm-chip:hover{border-color:var(--brand);color:var(--ink)}
.crm-chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.crm-chip-saved{padding-right:6px}
.crm-chip-saved a{color:inherit;text-decoration:none}
.crm-chip-x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:11px;
  line-height:1;padding:1px 3px;border-radius:var(--r-sm)}
.crm-chip-x:hover{background:var(--soft);color:#dc2626}
.crm-chip-add{border-style:dashed}
/* динамика (бар-чарт) */
.crm-dyn-panel{margin-bottom:14px}
.crm-dyn-legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-bottom:10px}
.crm-dyn-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle;margin-right:4px}
.crm-dyn-k.crm-dyn-c{background:#60a5fa}
.crm-dyn-k.crm-dyn-w{background:#34d399}
.crm-dyn{display:flex;align-items:flex-end;gap:6px;height:160px;padding-top:6px}
.crm-dyn-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.crm-dyn-bars{flex:1;display:flex;align-items:flex-end;gap:3px;width:100%;justify-content:center}
.crm-dyn-bars span{width:42%;max-width:16px;border-radius:5px 5px 0 0;transition:height .3s ease;min-height:2px}
.crm-dyn-bars .crm-dyn-c{background:#60a5fa}
.crm-dyn-bars .crm-dyn-w{background:#34d399}
.crm-dyn-x{font-size:9.5px;color:var(--muted);margin-top:5px;white-space:nowrap}
.crm-dyn.dense{gap:2px}
.crm-dyn.dense .crm-dyn-bars{gap:1px}
.crm-dyn.dense .crm-dyn-bars span{border-radius:3px 3px 0 0}
.crm-period{margin:8px 0 0}
/* журнал действий */
.crm-activity{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.crm-act-row{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--card);font-size:13px}
.crm-act-row:hover{background:var(--soft)}
.crm-act-time{color:var(--muted);font-size:11.5px;white-space:nowrap;min-width:74px}
.crm-act-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}
.crm-act-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-act-deal{color:var(--brand);text-decoration:none;font-weight:600;white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis}
.crm-act-deal:hover{text-decoration:underline}
.crm-act-who{color:var(--muted);font-size:11.5px;white-space:nowrap;min-width:90px;text-align:right}
/* объединение дублей */
.crm-merge{margin:0 0 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:4px 12px}
.crm-merge summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--brand);padding:7px 0}
.crm-merge-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 0 12px}
.crm-merge-form select{min-width:200px}
.crm-merge-arrow{color:var(--muted);font-size:13px}
/* корзина */
.crm-trash-act{display:flex;gap:7px;align-items:center;justify-content:flex-end}
.btn-outline.danger{color:#dc2626;border-color:#f3b4b4}
.btn-outline.danger:hover{background:#fef2f2;border-color:#dc2626}
html[data-theme="dark"] .btn-outline.danger{border-color:#5a2a2a}
html[data-theme="dark"] .btn-outline.danger:hover{background:#2a1414}
/* глобальный поиск */
.crm-globalsearch{display:flex;align-items:center;gap:7px;background:var(--soft);border:1px solid var(--line);
  border-radius:var(--r-md);padding:6px 11px;min-width:240px;transition:border-color .15s ease}
.crm-globalsearch:focus-within{border-color:var(--brand)}
.crm-globalsearch svg{width:15px;height:15px;color:var(--muted);flex:none}
.crm-globalsearch input{border:0;background:transparent;outline:none;width:100%;font-size:13px;color:var(--ink)}
.crm-srch-grp{margin-bottom:18px}
.crm-srch-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.crm-srch-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;
  background:var(--card);text-decoration:none;cursor:pointer}
.crm-srch-item:hover{background:var(--soft)}
.crm-srch-t{font-weight:600;color:var(--ink)}
.crm-srch-m{color:var(--muted);font-size:12px;white-space:nowrap}
/* календарь задач */
.crm-cal-nav{display:flex;align-items:center;gap:14px;justify-content:center;margin:6px 0 12px}
.crm-cal-title{font-size:15px;font-weight:700;min-width:160px;text-align:center}
.crm-cal{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--line)}
.crm-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--card)}
.crm-cal-dow span{padding:8px;text-align:center;font-size:11.5px;font-weight:700;color:var(--muted)}
.crm-cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-top:1px}
.crm-cal-cell{background:var(--card);min-height:96px;padding:5px 6px;display:flex;flex-direction:column;gap:3px}
.crm-cal-empty{background:var(--soft)}
.crm-cal-today{box-shadow:inset 0 0 0 2px var(--brand)}
.crm-cal-d{font-size:12px;font-weight:600;color:var(--muted)}
.crm-cal-today .crm-cal-d{color:var(--brand)}
.crm-cal-task{display:block;font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:var(--r-sm);
  background:#eff6ff;color:#2563eb;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-cal-task:hover{filter:brightness(.96)}
.crm-cal-task.done{background:var(--soft);color:var(--muted);text-decoration:line-through}
html[data-theme="dark"] .crm-cal-task{background:#0e1d33;color:#93c5fd}
/* позиции сделки (товары) */
.crm-items{display:flex;flex-direction:column;gap:8px}
.crm-items-list{display:flex;flex-direction:column;gap:5px}
.crm-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--soft);border-radius:var(--r-sm);font-size:12.5px}
.crm-item-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.crm-item-q{color:var(--muted);white-space:nowrap}
.crm-item-s{font-weight:700;white-space:nowrap;min-width:80px;text-align:right}
.crm-item-x{border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:var(--r-sm);padding:2px 5px}
.crm-item-x:hover{background:var(--card);color:#dc2626}
.crm-items-total{display:flex;align-items:center;gap:10px;padding:8px 2px 2px;font-size:13px;border-top:1px dashed var(--line);margin-top:2px;flex-wrap:wrap}
.crm-items-total span{color:var(--muted);white-space:nowrap}
.crm-items-total b{font-size:15px;white-space:nowrap}
.crm-items-total .btn-sm{margin-left:auto;white-space:nowrap}
.crm-items-empty{margin:2px 0}
.crm-item-add{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:6px}
.crm-item-add select,.crm-item-add input{font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);color:var(--ink);height:36px;box-sizing:border-box;transition:border-color .15s ease}
.crm-item-add select:focus,.crm-item-add input:focus{outline:none;border-color:var(--brand)}
.crm-item-add select{flex:1;min-width:130px}
.crm-item-add input[name=name]{flex:1;min-width:110px}
.crm-item-add .btn-sm{height:36px}
.crm-prod-arch{opacity:.5}
.crm-prod-desc{color:var(--muted);font-size:12px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* права доступа */
.crm-perms{display:flex;flex-direction:column;gap:12px;margin-bottom:10px}
.crm-perm{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.crm-perm input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--brand)}
/* неразобранное */
.crm-rail-badge-wrap{display:contents}
.crm-rail-badge{position:absolute;top:6px;right:8px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-sm);
  background:#dc2626;color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.crm-rail-badge.amber{background:#d97706}
.crm-rail-item{position:relative}
.crm-unsorted{display:flex;flex-direction:column;gap:12px;max-width:760px}
.crm-uns-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:14px 16px}
.crm-uns-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.crm-uns-name{font-weight:700;font-size:15px}
.crm-uns-src{font-size:11px;font-weight:600;color:var(--brand);background:var(--soft);padding:2px 8px;border-radius:var(--r-pill)}
.crm-uns-time{margin-left:auto;color:var(--muted);font-size:11.5px}
.crm-uns-meta{display:flex;gap:14px;color:var(--muted);font-size:13px;margin-bottom:6px;flex-wrap:wrap}
.crm-uns-comment{background:var(--soft);border-radius:var(--r-sm);padding:9px 12px;font-size:13px;margin-bottom:10px;white-space:pre-wrap}
.crm-uns-act{display:flex;gap:8px}

/* --- панель: температура-чип, блоки, задачи --- */
.crm-prio-chip{font-size:11.5px;font-weight:700;color:#fff;background:var(--p,#f59e0b);padding:3px 10px;border-radius:var(--r-pill)}
.crm-prio-chip.sm{font-size:10.5px;padding:2px 8px}
.crm-stage-chip.sm{font-size:10.5px;padding:2px 8px}
.crm-block{margin-top:20px;border-top:1px solid var(--line);padding-top:15px}
.crm-block h4{margin:0 0 10px;font-size:15px}
.crm-task-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.crm-task-add input[name=title]{flex:1 1 100%}
.crm-task-add select,.crm-task-add .crm-dt{flex:1 1 auto;min-width:120px}
.crm-task-add .btn-sm{flex:0 0 auto;min-width:46px;height:36px}
.crm-task-add input,.crm-task-add select{font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);min-width:0;height:36px;box-sizing:border-box;transition:border-color .15s ease}
.crm-task-add input:focus,.crm-task-add select:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
#task-list{display:flex;flex-direction:column;gap:7px}
.crm-task{display:flex;align-items:flex-start;gap:9px;background:var(--soft);border:1px solid var(--line);
  border-radius:var(--r-md);padding:8px 11px}
.crm-task-check{flex:0 0 auto;width:20px;height:20px;border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--card);cursor:pointer;color:#fff;font-size:12px;font-weight:800;line-height:1}
.crm-task-done .crm-task-check{background:var(--ok);border-color:var(--ok)}
.crm-task-main{flex:1;min-width:0}
.crm-task-title{font-size:13.5px;color:var(--ink);font-weight:500}
.crm-tt{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:var(--r-pill);margin-right:6px;vertical-align:middle;background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.crm-tt-call{background:#eff6ff;color:#2563eb;border-color:#bfdbfe}
.crm-tt-meeting{background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe}
.crm-tt-email{background:#ecfeff;color:#0891b2;border-color:#a5f3fc}
.crm-tt-repeat{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0}
html[data-theme="dark"] .crm-tt-repeat{background:#0c2417;color:#86efac;border-color:#1c4d32}
html[data-theme="dark"] .crm-tt-call{background:#0e1d33;color:#93c5fd;border-color:#1e3a5f}
html[data-theme="dark"] .crm-tt-meeting{background:#1e1633;color:#c4b5fd;border-color:#3b2d63}
html[data-theme="dark"] .crm-tt-email{background:#0a2227;color:#67e8f9;border-color:#155e6b}
/* сегментированный переключатель температуры */
.crm-temp{display:flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;width:100%;height:40px;box-sizing:border-box}
.crm-temp-b{flex:1;border:none;border-right:1px solid var(--line);background:var(--card);color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:0 8px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.crm-temp-b:last-child{border-right:none}
.crm-temp-b:hover{background:var(--soft)}
.crm-temp-b.cold.on{background:#3b82f6;color:#fff}
.crm-temp-b.warm.on{background:#f59e0b;color:#fff}
.crm-temp-b.hot.on{background:#ef4444;color:#fff}

/* участники сделки */
.crm-parts{display:flex;flex-direction:column;gap:6px}
.crm-part{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 11px;font-size:13px}
.crm-part-x{border:none;background:none;color:var(--err);cursor:pointer;font-weight:800;font-size:13px;padding:2px 6px;border-radius:var(--r-sm)}
.crm-part-x:hover{background:#fef2f2;color:#dc2626}
html[data-theme="dark"] .crm-part-x:hover{background:#2a1414;color:#f87171}
html[data-theme="dark"] .crm-item-x:hover{background:#2a1414;color:#f87171}
.crm-part-add{display:flex;gap:7px;align-items:center}
.crm-part-add select{flex:1;font:inherit;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
/* файлы сделки */
.crm-files{display:flex;flex-direction:column;gap:6px}
.crm-file{display:flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 11px;font-size:13px}
.crm-file-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--brand);font-weight:600}
.crm-file-sz{font-size:11.5px;color:var(--muted);white-space:nowrap}
.crm-file-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:2px}
.crm-file-add input[type=file]{flex:1 1 150px;min-width:0;font-size:12.5px;color:var(--muted)}
.crm-file-add .btn-sm{flex:0 0 auto;align-self:flex-start;height:36px}
.crm-file-err{color:var(--err);font-size:12px;font-weight:600;margin:0 0 4px}
.crm-file-add input[type=file]::file-selector-button{font:inherit;font-size:12.5px;font-weight:600;margin-right:10px;
  padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);
  cursor:pointer;transition:border-color .15s ease,color .15s ease}
.crm-file-add input[type=file]::file-selector-button:hover{border-color:var(--brand);color:var(--brand)}
/* кастомные поля: мультисписок / флажок */
.crm-ms{display:flex;flex-wrap:wrap;gap:6px 14px;padding:6px 0}
.crm-ms-o{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:13px;color:var(--ink)}
.crm-ms-o input,.crm-cbx input{width:16px;height:16px;accent-color:var(--brand)}
.crm-cbx{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:13px;color:var(--ink)}

/* цели / план продаж */
.crm-goal{margin:4px 0 16px}
.crm-goal-bar{height:12px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;margin:6px 0}
.crm-goal-bar span{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .4s ease}
.crm-goal-meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);font-weight:600}
.crm-goal-meta b{color:var(--ink)}
.crm-goal-set{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.crm-goal-set input{flex:1;min-width:130px;font:inherit;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
/* план продаж: select/input/кнопка строго одной высоты и выровнены по вертикали */
.crm-goal-set select,.crm-goal-set input,.crm-goal-set .btn,.crm-goal-set button{height:40px;box-sizing:border-box}
.crm-goal-set select{flex:0 0 auto}
/* массовые действия */
.crm-bulk{display:none;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--brand);
  border-radius:var(--r-md);padding:10px 13px;margin-bottom:10px;box-shadow:var(--shadow)}
.crm-bulk.on{display:flex;animation:crmFade .18s ease}
.crm-bulk-count{font-weight:700;color:var(--brand)}
.crm-bulk select,.crm-bulk .crm-bulk-in{font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
.crm-bulk .crm-bulk-in{max-width:120px}
.crm-bulk .crm-bulk-in:focus,.crm-bulk select:focus{outline:none;border-color:var(--brand)}
/* «показать ещё» в колонке канбана */
.crm-col-more{width:100%;margin-top:6px;padding:8px;border:1px dashed var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s ease}
.crm-col-more:hover{border-color:var(--brand);color:var(--brand)}
/* пагинация списка */
.crm-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 4px;font-size:13px;color:var(--muted)}
.crm-pager a{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;transition:all .15s ease}
.crm-pager a:hover{border-color:var(--brand);color:var(--brand)}
.crm-pager .disabled{opacity:.4;pointer-events:none}
/* настройка колонок списка */
.crm-cols-bar{display:flex;justify-content:flex-end;margin-bottom:8px}
.crm-cols{position:relative}
.crm-cols summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted);list-style:none;
  padding:6px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);display:inline-block}
.crm-cols summary::-webkit-details-marker{display:none}
.crm-cols summary::after{content:"▾";margin-left:7px;font-size:10px;opacity:.85;display:inline-block;transition:transform .18s}
.crm-cols[open] summary::after{transform:rotate(180deg)}
.crm-cols summary:hover{border-color:var(--brand);color:var(--brand)}
.crm-cols-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:50;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:8px;min-width:190px;display:flex;flex-direction:column;gap:2px;animation:crmPop .12s ease}
.crm-cols-menu label{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 8px;border-radius:var(--r-sm);cursor:pointer}
.crm-cols-menu label:hover{background:var(--soft)}
.crm-cols-menu input{accent-color:var(--brand)}
.crm-cols-reset{margin-top:4px;border:0;background:none;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;text-align:left;padding:6px 8px;border-radius:var(--r-sm)}
.crm-cols-reset:hover{background:var(--soft);color:var(--brand)}
.crm-list th[data-col]{position:relative}
.crm-col-rsz{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;user-select:none}
.crm-col-rsz:hover{background:linear-gradient(var(--brand),var(--brand));background-size:2px 100%;background-position:center;background-repeat:no-repeat}
.crm-list .crm-cb{width:34px;text-align:center}
.crm-list input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--brand)}
.crm-task-done .crm-task-title{text-decoration:line-through;color:var(--muted)}
.crm-task-due{font-size:11.5px;color:var(--muted);margin-top:2px}
.crm-note-event{background:transparent;border:none;border-left:2px solid var(--line);border-radius:0;
  padding:4px 0 4px 12px}
.crm-note-event .crm-note-body{font-size:12.5px;color:var(--muted)}

/* --- список --- */
.crm-list-wrap{overflow-x:auto}
.crm-list{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.crm-list th{text-align:left;font-size:12px;color:var(--muted);font-weight:700;padding:11px 13px;border-bottom:1px solid var(--line);background:var(--soft)}
.crm-list td{padding:11px 13px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink)}
/* таблица товаров: ячейки с инпутами — текст инпута строго под текстом заголовка
   (td-паддинг компенсирует внутренний паддинг .crm-prod-i 9px+бордер 1px) */
.crm-prod-table td{padding-left:3px;padding-right:3px}
.crm-prod-table td:first-child{padding-left:3px}
.crm-list-row:hover{background:var(--soft)}
.crm-list-title{font-weight:650}
.crm-list-budget{font-weight:700;color:var(--ok);white-space:nowrap}

/* (удалён мёртвый блок «модалка этапов»: этапы рендерятся инлайн в настройках, а класс
   .crm-modal конфликтовал с боксом модалки причины отказа — position:fixed протекал в него) */
.crm-stages{display:flex;flex-direction:column;gap:9px}
.crm-stages-legend{margin:0 0 6px;padding:10px 13px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md);line-height:1.5}
.crm-stages-legend span{display:block;margin-top:4px;padding-left:14px;position:relative}
.crm-stages-legend span::before{content:"•";position:absolute;left:2px;color:var(--muted)}
.crm-stages-legend b{color:var(--ink)}
.crm-stage-row{display:flex;align-items:center;gap:8px}
.crm-stage-edit{display:flex;align-items:center;gap:8px;flex:1}
.crm-stage-edit input[type=color]{width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);padding:2px;background:var(--card);cursor:pointer}
.crm-stage-edit input[name=name]{flex:1;font:inherit;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
.crm-stage-badge{font-size:10px;font-weight:800;padding:2px 7px;border-radius:var(--r-pill);white-space:nowrap}
.crm-stage-badge.ok{background:#dcfce7;color:#15803d}
.crm-stage-badge.no{background:#fee2e2;color:#b91c1c}
html[data-theme="dark"] .crm-stage-badge.ok{background:#0f2a1a;color:#4ade80}
html[data-theme="dark"] .crm-stage-badge.no{background:#2a1414;color:#f87171}
.crm-stage-del{border:1px solid var(--line);background:var(--card);color:var(--err);width:32px;height:32px;
  border-radius:var(--r-sm);cursor:pointer;font-weight:800}
.crm-stage-del:hover{background:#fef2f2;border-color:#fca5a5}
.crm-stage-add{display:flex;align-items:center;gap:8px;margin-top:6px;border-top:1px dashed var(--line);padding-top:12px}
.crm-stage-add input[name=name]{flex:1;font:inherit;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
.crm-stage-add input[type=color]{width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);padding:2px;background:var(--card);cursor:pointer}

/* --- субнавигация разделов CRM --- */
.crm-nav{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:2px 0 16px}
.crm-navlink{padding:9px 16px;font-weight:650;font-size:14.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.crm-navlink:hover{text-decoration:none;color:var(--ink)}
.crm-navlink.active{color:var(--brand);border-bottom-color:var(--brand)}

/* --- страница «Задачи» --- */
.crm-task-group{margin-bottom:18px}
.crm-tg-head{display:flex;align-items:center;gap:8px;font-size:15px;margin:0 0 9px}
.crm-tg-count{font-size:12px;font-weight:700;color:var(--muted);background:var(--soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 9px}
.crm-tg-no .crm-tg-head{color:var(--err)}
.crm-tg-today .crm-tg-head{color:var(--warn)}
.crm-task-rows{display:flex;flex-direction:column;gap:8px}
.crm-task-row{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:11px 14px}
.crm-tg-no .crm-task-row{border-left:3px solid var(--err)}
.crm-tg-today .crm-task-row{border-left:3px solid var(--warn)}
.crm-task-row.done{opacity:.6}
.crm-task-row-main{flex:1;min-width:0;cursor:pointer}
.crm-task-row-title{font-weight:600;font-size:14px;color:var(--ink)}
.crm-task-row.done .crm-task-row-title{text-decoration:line-through;color:var(--muted)}
.crm-task-row-sub{font-size:12.5px;color:var(--muted);margin-top:2px}

/* --- аналитика --- */
.crm-analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.crm-analytics-grid{grid-template-columns:1fr}}
.crm-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px}
.crm-panel-h{margin:0 0 14px;font-size:16px}
.crm-funnel{display:flex;flex-direction:column;gap:11px}
.crm-funnel-row{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center}
.crm-funnel-name{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink)}
.crm-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.crm-funnel-bar{background:var(--soft);border-radius:var(--r-sm);height:18px;overflow:hidden}
.crm-funnel-bar span{display:block;height:100%;border-radius:var(--r-sm);min-width:3px;transition:width .3s}
.crm-funnel-val{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.crm-mgr td,.crm-mgr th{white-space:nowrap}
@media(max-width:560px){.crm-funnel-row{grid-template-columns:110px 1fr;}.crm-funnel-val{grid-column:2;justify-self:end}}

/* --- контакты / компании --- */
.crm-add-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:11px 13px;margin-bottom:10px}
.crm-add-bar input,.crm-add-bar select{font:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);color:var(--ink);flex:1;min-width:120px}
.crm-add-bar input:focus,.crm-add-bar select:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.crm-add-bar .btn{flex:0 0 auto;padding:9px 16px}
.crm-linkinfo{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;font-size:13px;color:var(--ink);margin-top:2px}
.crm-linkdeals{display:flex;flex-direction:column;gap:7px}
.crm-linkdeal{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;cursor:pointer;font-size:13.5px;color:var(--ink)}
.crm-linkdeal:hover{border-color:rgba(37,99,235,.35)}
.crm-linkdeal-b{font-weight:700;color:var(--ok);white-space:nowrap}

/* кнопка «→ CRM» в истории расчётов */
.row-crm{border:1px solid var(--line);background:var(--card);color:var(--brand);font-weight:700;font-size:12.5px;
  padding:5px 10px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap}
.row-crm:hover{background:rgba(37,99,235,.09);border-color:var(--brand)}
.crm-incrm{font-size:12.5px;font-weight:700;color:var(--ok);white-space:nowrap}
.crm-incrm.warn{color:var(--warn)}

/* веб-форма приёма лидов */
.crm-webform .crm-f{margin-bottom:10px}
.crm-webform input,.crm-webform textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--card);color:var(--ink);width:100%;font-family:ui-monospace,monospace;font-size:12.5px}
.crm-webform-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.crm-form-wrap{max-width:480px;margin:40px auto}
.crm-form-card{padding:30px}
.crm-form-h{margin:0 0 6px;font-size:24px}
.crm-form-card .calc-form{margin-top:16px}

/* кастомные поля */
.crm-custom{display:flex;flex-direction:column;gap:11px;border-top:1px dashed var(--line);padding-top:12px;margin-top:2px}
.crm-fields-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:12px}
.crm-ftab{padding:8px 14px;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.crm-ftab:hover{text-decoration:none;color:var(--ink)}
.crm-ftab.active{color:var(--brand);border-bottom-color:var(--brand)}
.crm-fields-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.crm-field-row{display:flex;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px}
.crm-field-name{flex:1;font-weight:600;font-size:13.5px;color:var(--ink)}
.crm-field-type{font-size:11.5px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 9px}
.crm-field-req{font-size:11px;font-weight:700;color:var(--warn);background:#fffbeb;border:1px solid #fde68a;border-radius:var(--r-pill);padding:1px 9px;white-space:nowrap}
html[data-theme="dark"] .crm-field-req{background:#2a2410;border-color:#5c4d12;color:#fde047}
.crm-field-add{display:flex;flex-wrap:wrap;gap:7px;border-top:1px dashed var(--line);padding-top:12px}
.crm-field-add input,.crm-field-add select{font:inherit;font-size:13.5px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
.crm-field-add input[name=name]{flex:1;min-width:130px}
.crm-field-add .cf-opts{flex-basis:100%}

/* переключатель воронок */
.crm-pipes{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:2px 0 14px}
.crm-pipe{padding:7px 15px;border-radius:var(--r-pill);font-weight:600;font-size:13.5px;color:var(--ink);
  background:var(--soft);border:1px solid var(--line)}
.crm-pipe:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)}
.crm-pipe.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.crm-pipe-add{padding:7px 13px;border-radius:var(--r-pill);font-weight:700;font-size:13px;cursor:pointer;
  background:rgba(37,99,235,.08);color:var(--brand);border:1px dashed rgba(37,99,235,.4)}
.crm-pipe-add:hover{background:rgba(37,99,235,.14)}
.crm-pipe-del{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  color:var(--err);cursor:pointer;font-weight:800}
.crm-pipe-del:hover{background:#fef2f2;border-color:#fca5a5}

/* Переключатель воронок — компактный ВЫПАДАЮЩИЙ селектор (вместо вкладок, что переносились на 2-й ряд).
   Панель всегда в один ряд, не растёт вниз; все воронки — в меню. Применяется на доске/аналитике/настройках. */
.crm-pipe-switch{position:relative;margin:2px 0 14px}
.crm-topbar .crm-pipe-switch{margin:0}
.crm-pipe-cur{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;
  max-width:min(320px,60vw);height:34px;padding:0 7px 0 14px;border:1px solid var(--brand);border-radius:var(--r-pill);
  background:var(--brand);color:#fff;font-weight:600;font-size:13.5px}
.crm-pipe-cur::-webkit-details-marker{display:none}
.crm-pipe-cur:hover{filter:brightness(1.06)}
.crm-pipe-cur-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Каретка ▾ — чёткая, в контрастном боксе, чтобы сразу читалась как «развернуть» (была 10px @ .85 — невидима). */
.crm-pipe-cur-car{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:8px;background:rgba(0,0,0,.18);font-size:11px;line-height:1;
  opacity:1;transition:transform .18s ease,background .15s}
.crm-pipe-cur:hover .crm-pipe-cur-car{background:rgba(0,0,0,.26)}
.crm-pipe-switch[open] .crm-pipe-cur-car{transform:rotate(180deg)}
.crm-pipe-menu{position:absolute;left:0;top:calc(100% + 5px);z-index:60;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:6px;min-width:230px;max-width:min(340px,86vw);
  display:flex;flex-direction:column;gap:2px;animation:crmPop .12s ease;max-height:60vh;overflow-y:auto}
.crm-pipe-item{display:flex;align-items:center;justify-content:space-between;gap:8px;font:inherit;font-size:13.5px;
  font-weight:600;color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:var(--r-sm);border:0;
  background:none;cursor:pointer;text-align:left;width:100%;box-sizing:border-box}
.crm-pipe-item:hover{background:var(--soft);text-decoration:none}
.crm-pipe-item.active{color:var(--brand)}
.crm-pipe-item-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crm-pipe-item-chk{color:var(--brand);flex:0 0 auto}
.crm-pipe-menu-sep{height:1px;background:var(--line);margin:4px 2px}
.crm-pipe-item-act{color:var(--brand)}
.crm-pipe-item-del{color:var(--err)}
.crm-pipe-item-del:hover{background:#fef2f2}

/* ===== Полноэкранная оболочка CRM (рейл + верхняя панель + контент) ===== */
body.crm-app{height:100vh;overflow:hidden;display:flex;background:var(--bg)}
.crm-rail{flex:0 0 76px;width:76px;height:100vh;background:#0d1526;display:flex;flex-direction:column;
  align-items:stretch;padding:10px 0;gap:2px;overflow-y:auto;border-right:1px solid #1b2540}
.crm-rail-brand{display:flex;align-items:center;justify-content:center;height:46px;margin-bottom:8px;text-decoration:none}
.crm-rail-brand:hover{text-decoration:none}
.crm-rail-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.crm-rail-bottom{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.crm-rail-bottom form{margin:0}
.crm-rail-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;border:none;background:none;
  cursor:pointer;color:#8aa0c6;text-decoration:none;border-radius:0;width:100%;transition:color .15s,background .15s;position:relative}
.crm-rail-item:hover{color:#dce6f7;background:#13203a;text-decoration:none}
.crm-rail-item.active{color:#fff}
.crm-rail-item.active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--brand),var(--brand-2))}
.crm-rail-ic{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.crm-rail-ic svg{width:22px;height:22px}
.crm-rail-label{font-size:10px;font-weight:600;line-height:1.1;text-align:center;letter-spacing:.005em;
  width:100%;word-break:break-word;overflow-wrap:anywhere}
.crm-rail-item .ic-sun{display:none}
html[data-theme="dark"] .crm-rail-item .ic-moon{display:none}
html[data-theme="dark"] .crm-rail-item .ic-sun{display:inline}
.crm-rail-item .th-to-light{display:none}
html[data-theme="dark"] .crm-rail-item .th-to-dark{display:none}
html[data-theme="dark"] .crm-rail-item .th-to-light{display:inline}

.crm-main{flex:1;min-width:0;height:100vh;display:flex;flex-direction:column}
/* Шапка CRM — РОВНО ОДИН РЯД на десктопе (>900px).
   Раньше обе группы были flex-wrap:wrap → «Продажи» уезжала на второй ряд под заголовок, шапка
   росла вниз, правые контролы «висели» по центру. Теперь: nowrap, все контролы одной высоты (34px),
   сжимается только глобальный поиск, а подписи «Справка»/«Как пользоваться» гаснут по мере сужения. */
.crm-topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 22px;background:var(--card);border-bottom:1px solid var(--line);min-height:60px;flex-wrap:nowrap}
/* wrap у левой группы оставлен как аварийный клапан (страница «Аналитика» держит в шапке ещё и
   чипы периода); на доске сделок группа помещается в один ряд и не переносится. */
.crm-topbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:0 1 auto;min-width:0}
.crm-topbar-right{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;flex:1 1 auto;min-width:0;justify-content:flex-end}
.crm-page-title{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
/* по умолчанию контролы шапки не тянутся и не сжимаются… */
.crm-topbar-left>*,.crm-topbar-right>*{flex:0 0 auto}
/* …кроме поиска (главный «резиновый» элемент) и длинных названий воронки/компании */
.crm-topbar .crm-globalsearch{flex:0 1 280px;min-width:150px}
.crm-topbar .crm-company{flex:0 1 220px;min-width:0}
.crm-topbar .crm-pipe-switch{flex:0 1 auto;min-width:0}
.crm-topbar .crm-pipe-cur{max-width:220px;height:34px}
/* единая высота ряда */
.crm-topbar .crm-help-btn,.crm-topbar .vtut-btn,.crm-topbar .crm-create-sum,
.crm-topbar .crm-bell-sum,.crm-topbar .lang-switch select,
.crm-topbar .crm-globalsearch,.crm-topbar .crm-company{height:34px;padding-top:0;padding-bottom:0}
.crm-topbar .crm-help-btn,.crm-topbar .vtut-btn,.crm-topbar .crm-create-sum{display:inline-flex;align-items:center}
.crm-topbar .vtut-btn{border-radius:var(--r-md);font-size:13px;padding-left:12px;padding-right:12px}
.crm-topbar .crm-create-sum{font-size:13.5px;padding-left:14px;padding-right:14px}
.crm-topbar .crm-bell-sum{width:34px;justify-content:center}
@media(max-width:1240px){ /* первым гаснет слово «Справка» — у кнопки есть иконка и title */
  .crm-topbar .crm-help-btn span{display:none}
  .crm-topbar .crm-help-btn{width:34px;justify-content:center;padding:0}
}
@media(max-width:1120px){ /* затем — подпись видео-гайда */
  .crm-topbar .vtut-btn-lbl{display:none}
  .crm-topbar .vtut-btn{width:34px;justify-content:center;padding:0}
}
/* У супер-админа в шапке есть ещё и селект компании (~220px) — подписи гасим раньше,
   чтобы ряд не разваливался на два. */
@media(max-width:1440px){
  .crm-topbar:has(.crm-company) .crm-help-btn span{display:none}
  .crm-topbar:has(.crm-company) .crm-help-btn{width:34px;justify-content:center;padding:0}
}
@media(max-width:1340px){
  .crm-topbar:has(.crm-company) .vtut-btn-lbl{display:none}
  .crm-topbar:has(.crm-company) .vtut-btn{width:34px;justify-content:center;padding:0}
}
/* Главная область CRM: вертикальный скролл всегда, горизонтальный — когда контент шире (напр.
   воронка аналитики на планшете). overscroll-behavior:contain (ниже) гасит чейнинг с доской,
   поэтому overflow:auto по обеим осям безопасен и ничего не клипает. */
.crm-scroll{flex:1;min-height:0;overflow:auto;padding:20px 22px 28px}
/* Планшет/узкий десктоп (≤900): правые контролы шапки (Справка/язык/Создать/колокол/поиск)
   уходят на СВОЮ строку под заголовком+воронкой, иначе на ~700–900px они наезжали на пилюлю
   воронки «Продажи». Рельсу не трогаем — она сжимается только ≤640. */
@media(max-width:900px){
  .crm-topbar{flex-wrap:wrap}
  .crm-topbar-left{flex:1 1 100%;flex-wrap:wrap}
  .crm-topbar-right{width:100%;justify-content:flex-start;margin-top:2px;flex-wrap:wrap}
  .crm-topbar .crm-globalsearch{flex:1 1 200px;min-width:0}
}
@media(max-width:640px){
  .crm-rail{flex-basis:60px;width:60px}
  .crm-topbar-right{width:100%}
  /* поиск — отдельной строкой во всю ширину, чтобы плейсхолдер не обрезался («Поиск пс») */
  .crm-globalsearch{flex:1 0 100%;min-width:0;order:1}
  .crm-globalsearch input{min-width:0}
  .crm-rail-label{display:none}
  .crm-scroll{padding:14px}
}

/* ===== Карточка сделки в стиле amoCRM (две панели), наша палитра ===== */
.crm-drawer-panel{width:min(980px,96vw)}
.crm-deal.amo{display:flex;flex-direction:column;height:100%}
/* Закреплённая шапка карточки: кнопки «Сохранить»/«Отмена» всегда на виду при прокрутке */
.crm-deal-header{position:sticky;top:0;z-index:20;background:var(--card);
  border-bottom:1px solid var(--line);padding:12px 0 12px;margin:0 0 8px}
.crm-deal-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crm-deal-title{flex:1 1 40%;min-width:120px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-save-top{flex:none;white-space:nowrap}
.crm-cancel-top{flex:none;white-space:nowrap}
#deal-saved.crm-saved-dot{flex:1 1 100%;order:9;font-size:12px;margin-top:2px}
.crm-saved-dot.dirty{color:#f59e0b}
.crm-save-btn2,.crm-cancel-btn2{white-space:nowrap}
.crm-deal-title{margin:0;font-size:19px;line-height:1.25}
.crm-deal-sub{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:6px;font-size:12.5px;color:var(--muted)}
.crm-deal-budget{font-weight:800;color:var(--ok)}
.crm-stagebar{display:flex;gap:3px;margin-top:13px}
.crm-stageseg{flex:1;height:7px;border-radius:4px;background:var(--line)}
.crm-stageseg.done{background:var(--c,var(--brand))}
.crm-stageseg.cur{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--c,var(--brand))}
.crm-stage-now{margin-top:9px;font-size:13px;font-weight:700;color:var(--c,var(--brand))}
.crm-stage-sel{margin-top:9px;font:inherit;font-size:13px;font-weight:700;color:var(--c,var(--brand));
  padding:7px 12px;border:1px solid var(--c,var(--line));border-radius:var(--r-md);background:var(--card);cursor:pointer;
  max-width:100%}
.crm-stage-sel:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--brand)) 22%,transparent)}
.crm-stage-err{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--err);background:#fef2f2;border:1px solid #fca5a5;border-radius:var(--r-sm);padding:7px 11px}
html[data-theme="dark"] .crm-stage-err{background:#2a1414;border-color:#7f1d1d;color:#fca5a5}

.crm-deal-body{display:grid;grid-template-columns:var(--leftw,340px) 14px minmax(0,1fr);gap:8px;flex:1;min-height:0;margin-top:14px}
.crm-deal-left{overflow-y:auto;padding-right:6px;min-width:0}
.crm-deal-right{display:flex;flex-direction:column;min-height:0;min-width:0;padding-left:12px}
/* перетаскиваемая граница между колонками */
.crm-deal-split{align-self:stretch;width:14px;cursor:ew-resize;position:relative;display:flex;align-items:center;justify-content:center}
.crm-deal-split::before{content:"";width:1px;height:100%;background:var(--line);transition:background .15s}
.crm-deal-split::after{content:"";position:absolute;width:4px;height:40px;border-radius:3px;background:var(--line);transition:background .15s}
.crm-deal-split:hover::after,.crm-deal-split.drag::after,.crm-deal-split:hover::before,.crm-deal-split.drag::before{background:var(--brand)}
/* поля не вылезают за края карточки */
.crm-deal-form .crm-f{min-width:0}
.crm-deal-form .crm-f input,.crm-deal-form .crm-f select,.crm-deal-form .crm-f textarea{width:100%;min-width:0;box-sizing:border-box}
.crm-deal-form .crm-f-row{min-width:0}
.crm-temp-b{flex:1 1 auto;min-width:0;text-align:center;white-space:nowrap}
.crm-deal-right .crm-task-add,.crm-deal-right .crm-composer{min-width:0}
.crm-deal-right .crm-task-add input,.crm-deal-right .crm-task-add select{min-width:0}
/* ручка изменения ширины карточки */
.crm-drawer-resize{position:absolute;left:0;top:0;bottom:0;width:7px;cursor:ew-resize;z-index:5;
  background:transparent;border-right:1px solid transparent;transition:border-color .15s}
.crm-drawer-resize:hover,.crm-drawer-resize.drag{border-right-color:var(--brand);background:rgba(37,99,235,.06)}
.crm-tasks-block{margin-bottom:12px}
.crm-feed-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.crm-feed-title{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.crm-feed{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding-right:4px}
.crm-composer{display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--line);padding-top:12px;margin-top:10px}
.crm-composer textarea{flex:1;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);color:var(--ink);resize:vertical}
.crm-composer textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
@media(max-width:760px){
  /* Мобильно: ЕДИНЫЙ вертикальный скролл = сама панель drawer. Убираем ВЛОЖЕННЫЕ overflow-области
     (deal-body / deal-left / feed) — иначе на тач прокрутка «залипает» из-за scroll-chaining
     между вложенными скролл-контейнерами. Вся сделка листается как одна страница. */
  .crm-deal.amo{height:auto}
  .crm-deal-body{grid-template-columns:1fr;overflow:visible;min-height:0}
  .crm-deal-left{overflow:visible}
  .crm-deal-split,.crm-drawer-resize{display:none}
  .crm-deal-right{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
  .crm-feed{max-height:none;overflow:visible}
  /* почтовая переписка/чат в карточке — тоже не отдельный скролл на мобильном */
  .crm-mail-thread{max-height:none;overflow:visible}
}
/* контактная/компанийная панель — компактнее в широком drawer */
#crm-drawer-body > .crm-deal:not(.amo){max-width:460px}

/* настройки (хаб) */
/* настройки: две независимые колонки (панели стопкой, без «лесенки» grid'а) */
.crm-set-cols{display:flex;gap:16px;align-items:flex-start}
.crm-set-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.crm-set-col .crm-panel{margin:0}
@media(max-width:900px){.crm-set-cols{flex-direction:column}}
/* верхняя панель: воронки-табы компактнее в topbar */
.crm-topbar .crm-pipes{margin:0}
.crm-topbar .crm-pipe{padding:6px 13px;font-size:13px}

/* триггеры (цифровая воронка) */
.crm-trig-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.crm-trig-row{display:flex;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px}
.crm-trig-stage{font-size:11.5px;font-weight:700;color:#fff;background:var(--c,var(--brand));padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap}
.crm-trig-desc{flex:1;font-size:13px;color:var(--ink)}
.crm-trig-add{display:flex;flex-direction:column;gap:9px;border-top:1px dashed var(--line);padding-top:12px}
.crm-trig-add-row{display:flex;gap:10px;flex-wrap:wrap}
.crm-trig-add-row .crm-f{flex:1;min-width:150px}
.crm-trig-add .btn-sm{align-self:flex-start;height:40px;box-sizing:border-box}

/* ============================ CRM: единый стиль полей + анимации ============================ */
/* Базовый вид всех контролов CRM (нулевая специфичность :where — не перебивает частные правила,
   только дозаполняет скругления/фон/фокус, чтобы всё было единообразно и аккуратно). */
.crm-app :where(input:not([type=color]):not([type=file]):not([type=checkbox]):not([type=radio]),
                select, textarea),
#crm-drawer-body :where(input:not([type=color]):not([type=file]), select, textarea){
  font:inherit;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;}
.crm-app :where(input,select,textarea):focus,
#crm-drawer-body :where(input,select,textarea):focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.13);}
.crm-app input[type=color]{border-radius:var(--r-sm)}
.crm-app input[type=file]{font-size:12.5px;color:var(--muted)}

/* Плавные переходы у интерактивных элементов */
.crm-app a,.crm-app button,.crm-card,.crm-col,.kpi,.crm-panel,.crm-list-row,.crm-linkdeal,
.crm-task,.crm-task-row,.crm-note,.crm-pipe,.crm-rail-item,.crm-view-b,.crm-navlink,
.btn,.btn-outline,.btn-sm,.btn-ghost{
  transition:background-color .15s ease, color .15s ease, border-color .15s ease,
             box-shadow .18s ease, transform .08s ease;}
.crm-card:hover{transform:translateY(-1px)}
.kpi:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active,.btn-outline:active,.btn-sm:active{transform:translateY(1px)}

/* Появление контента раздела */
@keyframes crmFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes crmFadeIn{from{opacity:0}to{opacity:1}}
@keyframes crmPop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.crm-scroll{animation:crmFade .24s ease}
/* Колонки канбана — лёгкое поочерёдное появление */
.crm-board .crm-col{animation:crmFade .26s ease both}
.crm-board .crm-col:nth-child(2){animation-delay:.03s}
.crm-board .crm-col:nth-child(3){animation-delay:.06s}
.crm-board .crm-col:nth-child(4){animation-delay:.09s}
.crm-board .crm-col:nth-child(5){animation-delay:.12s}
.crm-board .crm-col:nth-child(n+6){animation-delay:.15s}
/* Новые элементы (HTMX afterbegin) — мягкое появление */
#task-list > *, #notes-list > *, .crm-feed > *,
#deal-items > *, #deal-parts > *, #deal-files > *{animation:crmFade .2s ease}
/* Входящие, поиск, журнал — мягкое появление + ховеры */
.crm-uns-card{animation:crmFade .22s ease both}
.crm-uns-card:hover{box-shadow:var(--shadow);transform:translateY(-1px);transition:box-shadow .18s ease,transform .1s ease}
.crm-srch-grp{animation:crmFade .2s ease both}
.crm-cal-cell{transition:background .15s ease}
.crm-cal-cell:hover{background:var(--soft)}
.crm-act-row{transition:background .12s ease}
.crm-list tbody tr,.crm-mgr tbody tr{transition:background .12s ease}
/* HTMX-свопы: лёгкое затухание/проявление */
.htmx-swapping{opacity:0;transition:opacity .12s ease}
.htmx-settling{opacity:1}
/* Drawer и модалки: фон-затемнение плавно */
.crm-drawer-bg{animation:crmFadeIn .18s ease}
.crm-modal-bg{animation:crmFadeIn .16s ease}
.crm-modal-box{animation:crmPop .18s ease}
.crm-drawer.open .crm-drawer-panel{animation:crmSlide .2s ease}
/* Карточка сделки в drawer — мягкое появление содержимого */
#crm-drawer-body .crm-deal{animation:crmFade .2s ease}

/* Уважать prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .crm-scroll,.crm-board .crm-col,#task-list>*,#notes-list>*,.crm-feed>*,
  #deal-items>*,#deal-parts>*,#deal-files>*,.crm-uns-card,.crm-srch-grp,
  .crm-drawer-bg,.crm-modal-bg,.crm-modal-box,.crm-drawer.open .crm-drawer-panel,
  #crm-drawer-body .crm-deal{animation:none !important}
  .crm-card:hover,.kpi:hover,.crm-uns-card:hover{transform:none}
}

/* ===== Свой календарь-поповер (наша палитра, скругления, анимация) ===== */
.crm-dt{position:relative;display:flex;align-items:center}
.crm-dt-display{width:100%;font:inherit;padding:10px 36px 10px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);color:var(--ink);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.crm-dt-display:hover{border-color:var(--brand)}
.crm-dt-display:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.13)}
.crm-dt-cal{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:auto;cursor:pointer;display:flex}
.crm-dt-cal svg{width:17px;height:17px}
.crm-dt-cal:hover{color:var(--brand)}
.crm-dt-pop{position:fixed;z-index:1000;width:272px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:12px;
  opacity:0;transform:translateY(-6px) scale(.98);transition:opacity .14s ease, transform .14s ease;transform-origin:top left}
.crm-dt-pop.open{opacity:1;transform:none}
.crm-dt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.crm-dt-title{font-weight:700;font-size:14px;color:var(--ink)}
.crm-dt-nav{width:30px;height:30px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);cursor:pointer;
  color:var(--ink);font-size:17px;line-height:1;transition:background .15s,border-color .15s}
.crm-dt-nav:hover{background:var(--soft);border-color:var(--brand);color:var(--brand)}
.crm-dt-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.crm-dt-dow{text-align:center;font-size:11px;font-weight:700;color:var(--muted);padding:4px 0}
.crm-dt-empty{height:32px}
.crm-dt-day{height:32px;border:none;background:none;border-radius:var(--r-sm);cursor:pointer;color:var(--ink);font:inherit;font-size:13px;
  transition:background .12s,color .12s,transform .05s}
.crm-dt-day:hover{background:rgba(37,99,235,.12);color:var(--brand)}
.crm-dt-day:active{transform:scale(.92)}
.crm-dt-day.today{box-shadow:inset 0 0 0 1px var(--brand);font-weight:700}
.crm-dt-day.sel{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:700}
.crm-dt-time{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.crm-dt-tl{font-size:12.5px;color:var(--muted);font-weight:600}
.crm-dt-time select{font:inherit;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
.crm-dt-colon{font-weight:700;color:var(--muted)}
.crm-dt-foot{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.crm-dt-link{border:none;background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--muted);padding:4px 8px;border-radius:var(--r-sm);transition:background .12s,color .12s}
.crm-dt-link:hover{background:var(--soft);color:var(--ink)}
.crm-dt-link-pri{color:var(--brand)}
.crm-dt-link-pri:hover{background:rgba(37,99,235,.1);color:var(--brand)}
.ext-prefill{margin:0 0 10px;padding:8px 12px;border-radius:var(--r-sm);background:rgba(37,99,235,.08)}
.ext-promo{margin-bottom:14px;padding:16px 18px}
.ext-promo-head{display:flex;gap:14px;align-items:flex-start}
.ext-promo-head .ext-ico{font-size:30px;line-height:1}
.ext-promo-head b{display:block;margin-bottom:3px}
.ext-promo-head p{margin:0}
.ext-dl{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0 4px}
.ext-how{margin-top:8px}
.ext-how summary{cursor:pointer;color:var(--brand);font-size:14px}
.ext-steps{margin:10px 0 6px;padding-left:20px;line-height:1.7}
.ext-steps code{background:var(--soft);padding:1px 6px;border-radius:5px;font-size:13px}
.ext-steps ul{margin:4px 0;line-height:1.5}
.eaeu-note{margin:8px 0;padding:10px 14px;border-radius:var(--r-md);background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.35);color:var(--ink);font-size:14px;line-height:1.5}

/* ── Единый размер текста во ВСЕХ полях CRM ───────────────────────────────
   Баг: у select и части input не задавался font-size → браузерный дефолт 16px
   (разнобой с системными 13px). Один авторитетный базовый размер для всех
   контролов в CRM-оболочке и в drawer-карточке. Чекбоксы/радио/цвет/файл — мимо. */
.crm-app input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.crm-app select,
.crm-app textarea,
#crm-drawer input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
#crm-drawer select,
#crm-drawer textarea{font-size:13px}

/* ── Единый размер/компактность кнопок внутри CRM ──────────────────────────
   Системные .btn/.btn-outline = 15px (для лендинга) — в плотном интерфейсе CRM
   это крупно и не совпадает с .btn-sm (13px). Приводим все кнопки CRM к 13px. */
.crm-app .btn, .crm-app .btn-outline, .crm-app .btn-ghost,
#crm-drawer .btn, #crm-drawer .btn-outline, #crm-drawer .btn-ghost{
  font-size:13px; padding:9px 16px}

/* ── Базовый размер текста в CRM (чтобы неразмеченный текст не «утекал» в 16px) ──
   Без базы абзацы/описания/<b> наследовали браузерные 16px и были крупнее интерфейса. */
.crm-app, #crm-drawer{font-size:14px}
/* единый вид нативных файл-инпутов в CRM (импорт CSV, загрузка) */
.crm-app input[type=file]{font-size:12.5px;color:var(--muted);max-width:100%}
.crm-app input[type=file]::file-selector-button,
#crm-drawer input[type=file]::file-selector-button{font:inherit;font-size:12.5px;font-weight:600;
  margin-right:9px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  color:var(--ink);cursor:pointer;transition:border-color .15s ease,color .15s ease}
.crm-app input[type=file]::file-selector-button:hover,
#crm-drawer input[type=file]::file-selector-button:hover{border-color:var(--brand);color:var(--brand)}

/* ── Единая высота контролов в рядах форм CRM (поля = кнопки) ──────────────
   Баг: input/select/кнопки в одной строке имели разную высоту (38/36/34/32) —
   ряды выглядели неровно. Приводим к одной высоте 36px (border-box). */
.crm-bar .crm-search, .crm-bar select, .crm-bar > .btn-outline, .crm-bar .crm-view-b,
.crm-stage-edit input, .crm-stage-edit input[type=color], .crm-stage-edit .btn-sm,
.crm-stage-add input, .crm-stage-add input[type=color], .crm-stage-add .btn-sm,
.crm-field-add input, .crm-field-add select, .crm-field-add .btn-sm,
.crm-field-edit input, .crm-field-edit select, .crm-field-edit .btn-sm,
.crm-prod-row .crm-prod-i, .crm-prod-row .btn-sm, .crm-prod-row .btn-outline, .crm-prod-row .crm-stage-del,
.crm-add-bar input, .crm-add-bar select, .crm-add-bar > .btn,
.crm-file-add .btn-sm{
  height:36px; box-sizing:border-box}
.crm-bar .crm-view-b{display:inline-flex;align-items:center}
.crm-field-row .crm-stage-del, .crm-stage-row .crm-stage-del{height:36px;width:36px}
/* нативные файл-инпуты — в высоту ряда */
.crm-app input[type=file]:not([hidden]){height:36px;box-sizing:border-box;display:inline-flex;align-items:center}
/* скрытый файл-инпут (кнопка «Импорт» на доске/списке) обязан оставаться невидимым */
.crm-app input[type=file][hidden]{display:none!important}
.crm-import{align-items:center}
.crm-file-add{align-items:center}
/* участники/товары/задачи/файлы в карточке — кнопка ＋ и select одной высоты с полями */
.crm-part-add select, .crm-part-add .btn-sm{height:36px;box-sizing:border-box}
.crm-composer .btn-sm{height:36px;box-sizing:border-box}
/* объединение дублей: select/input/кнопка одной высоты (раньше select падал на 20px) */
.crm-merge-form select,.crm-merge-form input,.crm-merge-form .btn,.crm-merge-form button{height:36px;box-sizing:border-box}
/* переключатель воронок: вкладки, ✎ и + одной высоты; круглая 🗑 — квадрат 32×32 */
.crm-pipes .crm-pipe,.crm-pipes .crm-pipe-add,.crm-pipes .crm-pipe-ren{height:32px;box-sizing:border-box;display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}
.crm-pipes .crm-pipe-del{width:32px;height:32px}
/* редактор кастом-поля: «варианты списка» — всегда отдельной полной строкой,
   чтобы имя/тип/обязательность/✓/✕ оставались в одну линию и кнопки не скакали между строк */
.crm-field-row{align-items:flex-start}
.crm-field-row>.crm-drag-h{height:36px;display:flex;align-items:center}
.crm-field-edit input[name=options]{flex:1 0 100%;order:5;min-width:0}
/* системные этапы (успех/отказ) без ✕ — спейсер держит ✓ в одной вертикали с остальными строками */
.crm-stage-del-spacer{width:36px;flex:0 0 36px}
/* доведение единичных стрейглеров к общей высоте 36px: ✕ в строках триггеров и «→ в бюджет» */
.crm-trig-row .crm-stage-del{height:36px;width:36px}
.crm-items-total .btn-sm{height:36px}
/* фикс высоты карточки: тело drawer должно занимать всю высоту панели,
   иначе .crm-deal.amo{height:100%} не срабатывает → колонки растут по контенту,
   а лента активности раздувается на всю длину длинной левой колонки */
.crm-drawer-panel > #crm-drawer-body, #crm-drawer-body{height:100%;min-height:0}
/* тумблер звука уведомлений в рейле CRM */
.crm-sound-toggle .ic-snd-off{display:none}
.crm-sound-toggle.off .ic-snd-on{display:none}
.crm-sound-toggle.off .ic-snd-off{display:inline}
.crm-sound-toggle.off{color:var(--muted)}
/* настройки звука в CRM-настройках */
.crm-snd-vol{display:flex;align-items:center;gap:10px;margin:10px 0 4px}
.crm-snd-vol input[type=range]{flex:1;min-width:0;accent-color:var(--brand)}
.crm-snd-vol #snd-vol-val{min-width:38px;text-align:right}
.crm-snd-events{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.crm-snd-ev{display:flex;align-items:center;gap:8px}
.crm-snd-ev .crm-perm{flex:1;margin:0}
.crm-snd-ev .crm-snd-play{flex:0 0 auto;height:30px;min-width:34px;padding:0 10px}
#crm-sound-settings.snd-off{opacity:.6}
/* справочники и политики в настройках CRM */
.crm-genset{display:flex;flex-direction:column;gap:14px}
.crm-gs{display:flex;flex-direction:column;gap:4px}
.crm-gs>b{font-size:13px}
.crm-gs textarea,.crm-gs select,.crm-gs input{font:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);box-sizing:border-box}
.crm-gs textarea{resize:vertical;min-height:64px;line-height:1.5}
.crm-gs select{height:40px}
.crm-gs-row{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.crm-gs-row input{width:90px;height:40px;text-align:center}
/* SLA-бейдж «застряла» на карточке доски */
.crm-stuck{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:var(--r-sm);padding:1px 7px}
html[data-theme="dark"] .crm-stuck{background:#2a2410;border-color:#7c5e1a;color:#fbbf24}
/* Плавное раскрытие нативных <details> (калькулятор «Как установить», FAQ, team-карточки).
   Chromium/Яндекс анимируют block-size 0→auto через interpolate-size; Safari/старые —
   мгновенно (graceful, без поломки). Чистый CSS — на скорость не влияет. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}
details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .5s var(--ease-smooth), content-visibility .5s allow-discrete;
  transition-behavior: allow-discrete;
}
details[open]::details-content { block-size: auto; }
/* мягкий поворот стрелок-маркеров, если есть */
details > summary .faq-ic, .ext-how > summary::marker { transition: transform .3s var(--ease-smooth); }

/* ═══ Премиальная полировка (richer look) — только CSS, без влияния на скорость ═══ */
/* 1. Живые микро-взаимодействия: плавный «глайд»-подъём карточных поверхностей на hover */
.kpi, .crm-card, .crm-linkdeal, .crm-kpi .kpi {
  transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth), border-color .3s var(--ease-smooth);
}
.kpi:hover, .crm-kpi .kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.crm-card:hover:not(.crm-drag):not(.crm-ghost) { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.crm-linkdeal:hover { transform: translateX(3px); }

/* 2. Кнопки — «дороже»: плавный подъём и мягкое свечение бренда на hover */
.btn { transition: transform .32s var(--ease-smooth), box-shadow .32s var(--ease-smooth), filter .32s var(--ease-smooth); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 28%, transparent); filter: saturate(1.06); }
.btn:active { transform: translateY(0); transition-duration: .08s; }
.btn-outline, .btn-ghost, .act { transition: border-color .3s var(--ease-smooth), background .3s var(--ease-smooth), color .3s var(--ease-smooth), transform .3s var(--ease-smooth); }
.btn-outline:hover, .act:hover { transform: translateY(-1px); }

/* 3. Заголовки секций — тонкий бренд-акцент слева (премиальная деталь) */
.crm-panel-h, .faq-h { position: relative; }
.crm-panel-h::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 1em; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
}
@media (max-width: 760px){ .crm-panel-h::before{ display:none; } }

/* 4. KPI-карточки — едва заметный «дорогой» отлив сверху + чёткий ховер-курсор */
.kpi, .crm-kpi .kpi { position: relative; overflow: hidden; }
.kpi::after, .crm-kpi .kpi::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); opacity: .55;
}

/* 5. Панели — статичны (без hover-тени: перерисовка большой тени мешала анимации раскрытия).
   Только мелкие интерактивные карточки (KPI/сделки) поднимаются на hover — это дёшево. */

/* 6. Строки списков/таблиц — плавная подсветка наведения */
.crm-list tbody tr { transition: background .3s var(--ease-smooth); }
.crm-list tbody tr:hover { background: var(--soft); }

/* 7. Глобально мягкие переходы для частых интерактивных элементов (рейл, чипы, вкладки, тумблеры) */
.crm-rail-item, .crm-chip, .crm-pipe, .crm-tab, .crm-ftab, .crm-view-b, .switch .thumb, .crm-temp-b,
.crm-stage-del, .crm-prio-chip, input, select, textarea, a.btn, .crm-tag {
  transition: background-color .25s var(--ease-smooth), color .25s var(--ease-smooth),
              border-color .25s var(--ease-smooth), box-shadow .25s var(--ease-smooth),
              transform .25s var(--ease-smooth);
}
/* выбор контакта/компании в сделке + кнопка быстрого создания */
.crm-pick{display:flex;gap:6px;align-items:center}
.crm-pick select{flex:1;min-width:0}
.crm-pick-new{flex:0 0 auto;width:36px;height:36px;border:1px solid var(--line);background:var(--card);
  color:var(--brand);border-radius:var(--r-sm);cursor:pointer;font-size:16px;font-weight:700;line-height:1}
.crm-pick-new:hover{border-color:var(--brand);background:rgba(37,99,235,.06)}
/* быстрые пресеты дат в датапикере */
.crm-dt-quick{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px 0}
.crm-dt-chip{flex:1;min-width:0;font:inherit;font-size:12px;font-weight:600;padding:6px 8px;border:1px solid var(--line);
  background:var(--card);color:var(--brand);border-radius:var(--r-sm);cursor:pointer;white-space:nowrap}
.crm-dt-chip:hover{border-color:var(--brand);background:rgba(37,99,235,.06)}
/* подсказка обязательных полей для следующего этапа */
.crm-req-hint{margin-top:8px;font-size:12px;color:#b45309;background:#fffbeb;border:1px solid #fde68a;
  border-radius:var(--r-sm);padding:6px 10px;line-height:1.4}
html[data-theme="dark"] .crm-req-hint{background:#2a2410;border-color:#7c5e1a;color:#fbbf24}
/* модалка причины отказа при drag в «отказ» */
.crm-modal-ov{position:fixed;inset:0;background:rgba(2,6,23,.45);z-index:80;display:flex;align-items:center;justify-content:center;animation:crmFadeIn .15s ease}
.crm-modal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:min(420px,92vw);padding:18px;display:flex;flex-direction:column;gap:12px}
.crm-modal-h{font-size:16px;font-weight:800;color:var(--ink)}
.crm-modal-list{display:flex;flex-direction:column;gap:6px}
.crm-modal-opt{text-align:left;font:inherit;font-size:13px;padding:9px 12px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-sm);cursor:pointer}
.crm-modal-opt:hover{border-color:var(--brand);background:rgba(37,99,235,.06)}
.crm-modal-row{display:flex;gap:8px}
.crm-modal-inp{flex:1;min-width:0;font:inherit;font-size:13px;padding:0 11px;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
.crm-modal-foot{display:flex;justify-content:flex-end;gap:8px}
/* поповер быстрых действий карточки (температура/ответственный) */
.crm-pop{position:absolute;z-index:90;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:5px;min-width:160px;max-height:280px;overflow:auto}
.crm-pop-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:inherit;font-size:13px;padding:7px 10px;border:0;background:transparent;color:var(--ink);border-radius:var(--r-sm);cursor:pointer}
.crm-pop-opt:hover{background:var(--soft)}
.crm-pop-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
/* кликабельные приоритет/аватар на карточке доски */
.crm-prio-btn{padding:0;cursor:pointer;border:0;background:transparent}
.crm-ava-btn{cursor:pointer;font:inherit;border:0}
.crm-ava-empty{background:var(--soft)!important;color:var(--muted)!important;border:1px dashed var(--line)}
/* Телефон в карточке: поле + звонок */
.crm-phone-row{display:flex;gap:6px;align-items:stretch}
.crm-phone-row input{flex:1 1 auto;min-width:0}
/* инлайн-иконки ico() рядом с текстом (кнопки/лейблы/подписи) — выравнивание по базовой линии */
.i{vertical-align:-0.14em}
.crm-leg-calc{display:inline-flex;align-items:center;justify-content:center}
.crm-docs a .i,.crm-won-actions .btn-sm .i,.crm-autosave .i,.crm-route-hint .i{margin-right:2px}
.crm-phone-tel,.crm-phone-call{flex:0 0 auto;width:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);text-decoration:none;cursor:pointer}
.crm-phone-tel:hover,.crm-phone-call:hover{border-color:var(--brand);text-decoration:none}
/* Отдел менеджера в строке команды */
.mgr-dept{display:block;margin-top:4px;font-size:12px;padding:3px 7px;border:1px solid var(--line);border-radius:8px;max-width:140px}
.mgr-role{display:block;margin-top:4px;font-size:12px;padding:3px 7px;border:1px solid var(--line);border-radius:8px;max-width:160px}
/* Шаблоны писем (настройки) */
.crm-tpl-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.crm-tpl-name{font-weight:600;font-size:13px}
.crm-tpl-add{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.crm-mail-tpl{margin-bottom:2px}
/* Почта в карточке (двусторонняя переписка) */
.crm-mail-thread{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;padding:4px 2px;margin-bottom:8px}
.crm-mail-msg{border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:13px;line-height:1.45;max-width:92%}
.crm-mail-msg.in{align-self:flex-start;background:var(--soft)}
.crm-mail-msg.out{align-self:flex-end;background:rgba(37,99,235,.07)}
.crm-mail-h{font-size:11px;color:var(--muted);margin-bottom:3px}
.crm-mail-subj{font-weight:700;margin-bottom:3px}
.crm-mail-body{white-space:pre-wrap;word-break:break-word}
.crm-mail-send{display:flex;flex-direction:column;gap:6px}
.crm-mail-off{background:var(--soft);border-radius:var(--r-md);padding:10px 12px}
/* Ключи приёма заявок по источникам */
.crm-apikey-row{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-bottom:1px solid var(--line)}
.crm-apikey-row input[readonly]{border:1px solid var(--line);border-radius:8px;padding:4px 7px;background:var(--card)}
.crm-apikey-add{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.crm-apikey-add input{flex:1 1 160px}
/* Приём заявок по API: пример кода */
.crm-api-ex{margin:8px 0}
.crm-code{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:9px 11px;
  font-size:11.5px;line-height:1.45;white-space:pre-wrap;word-break:break-all;color:var(--ink);margin:4px 0 10px}
/* Отраслевые пресеты (быстрый старт) */
.crm-presets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.crm-presets-grid form{margin:0}
.crm-preset-btn{width:100%;text-align:left;font:inherit;font-weight:600;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;
  transition:border-color .15s ease,background .15s ease}
.crm-preset-btn .i{color:var(--brand);flex:0 0 auto}
.crm-preset-btn:hover{border-color:var(--brand);background:var(--card)}
/* сворачиваемая авто-панель настроек */
details.crm-ai-panel>summary.crm-ai-sum{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;margin:0}
details.crm-ai-panel>summary.crm-ai-sum::-webkit-details-marker{display:none}
details.crm-ai-panel>summary.crm-ai-sum::after{content:"▸";margin-left:auto;color:var(--muted);font-size:13px;transition:transform .15s}
details.crm-ai-panel[open]>summary.crm-ai-sum::after{transform:rotate(90deg)}
details.crm-ai-panel>summary.crm-ai-sum .i{color:var(--accent,#1f6feb)}
/* Фикс: btn-sm задаёт белый текст !important — у комбинации с btn-outline он становился
   невидимым (белое на белом). Возвращаем тёмный текст на белом фоне для контурной мелкой кнопки. */
.btn-sm.btn-outline{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)!important}
html[data-theme="dark"] .btn-sm.btn-outline{background:#0d1526!important;color:var(--ink)!important}
/* Маршрут по плечам (расстояние) */
.crm-route{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.crm-route .crm-f-lbl{font-size:13px;font-weight:600;color:var(--ink)}
.crm-route-hint{font-weight:400;color:var(--muted);font-size:11.5px}
.crm-leg-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;padding:7px;background:var(--card)}
.crm-leg-del{flex:0 0 auto;border:1px solid #fecaca;background:#fee2e2;color:#b91c1c;border-radius:8px;cursor:pointer;font-weight:700;font-size:12px;padding:5px 9px}
.crm-leg-del:hover{background:#fecaca}
html[data-theme="dark"] .crm-leg-del{background:#3a1518;border-color:#7c2d33;color:#fca5a5}
.crm-leg-row input[name=rl_from],.crm-leg-row input[name=rl_to]{flex:1 1 130px;min-width:0}
.crm-leg-row select[name=rl_mode]{flex:0 0 78px}
.crm-leg-km,.crm-leg-days,.crm-leg-cost{flex:0 0 64px;min-width:0}
.crm-leg-calc{flex:0 0 auto;width:32px;background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.crm-route-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.crm-route-tot{font-size:13px;color:var(--ink)}
/* Доп. контакты сделки (несколько телефонов/почт/лиц) */
.crm-extra{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.crm-extra .crm-f-lbl{font-size:13px;font-weight:600;color:var(--ink)}
.crm-extra-row{display:flex;gap:6px;align-items:center}
.crm-extra-row select{flex:0 0 124px}
.crm-extra-row input[name=ex_label]{flex:0 0 150px;min-width:0}
.crm-extra-row input[name=ex_value]{flex:1 1 auto;min-width:0}
.crm-extra-x{flex:0 0 auto;width:32px;background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--muted)}
.crm-extra-add{align-self:flex-start}
/* Секции кастом-полей в карточке (группировка) */
.crm-fsec{border:1px solid var(--line);border-radius:var(--r-md);margin:2px 0 4px;background:var(--card)}
.crm-fsec-h{cursor:pointer;font-weight:700;font-size:13px;padding:9px 12px;color:var(--ink);list-style:none;display:flex;align-items:center;gap:6px}
.crm-fsec-h::-webkit-details-marker{display:none}
.crm-fsec-h::before{content:"▸";color:var(--muted);transition:transform .15s ease}
.crm-fsec[open]>.crm-fsec-h::before{transform:rotate(90deg)}
.crm-fsec-body{display:flex;flex-direction:column;gap:13px;padding:2px 12px 12px}
/* Бюджет сделки: сумма + валюта */
.crm-budget-row{display:flex;gap:8px;align-items:stretch}
.crm-budget-row input{flex:1 1 auto;min-width:0}
.crm-budget-row select{flex:0 0 96px}
/* № и дата создания в шапке карточки сделки */
.crm-deal-no{font-weight:700;color:var(--ink)}
.crm-deal-created{color:var(--muted);font-size:12px}
/* Toggle-переключатель для кастом-полей типа «флажок» (Честный ЗНАК и др.) */
.crm-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;margin-top:4px}
.crm-toggle input{position:absolute;opacity:0;width:0;height:0;margin:0}
.crm-toggle-track{position:relative;width:42px;height:24px;background:var(--line);border-radius:999px;transition:background .18s ease;flex:0 0 auto}
.crm-toggle-track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .18s ease}
.crm-toggle input:checked + .crm-toggle-track{background:var(--brand)}
.crm-toggle input:checked + .crm-toggle-track::after{transform:translateX(18px)}
.crm-toggle input:focus-visible + .crm-toggle-track{box-shadow:var(--ring)}
.crm-toggle-text{font-size:13px;color:var(--muted)}
.crm-toggle-text::after{content:"нет"}
.crm-toggle input:checked ~ .crm-toggle-text{color:var(--ink);font-weight:600}
.crm-toggle input:checked ~ .crm-toggle-text::after{content:"да"}
/* Агентское вознаграждение: значение + единица (₽/%) */
.agent-fee-row{display:flex;gap:8px;align-items:stretch}
.agent-fee-row input{flex:1 1 auto;min-width:0}
.agent-fee-row select{flex:0 0 72px}
/* Покупатели (повторные продажи) */
.crm-cust-row.overdue td:nth-child(2){color:var(--err);font-weight:700}
.crm-cust-row.soon td:nth-child(2){color:#b45309;font-weight:600}
.crm-cust-row.paused{opacity:.6}
.crm-cust-badge{display:inline-block;font-size:11px;font-weight:700;border-radius:8px;padding:1px 7px;margin-left:6px}
.crm-cust-badge.overdue{background:#fee2e2;color:#b91c1c}
.crm-cust-badge.soon{background:#fef3c7;color:#92400e}
.crm-cust-badge.paused{background:var(--soft);color:var(--muted)}
html[data-theme="dark"] .crm-cust-badge.overdue{background:#2a1414;color:#f87171}
html[data-theme="dark"] .crm-cust-badge.soon{background:#2a2410;color:#fbbf24}
.crm-cust-stats{display:flex;flex-wrap:wrap;gap:16px;margin:6px 0 12px}
.crm-cust-stats>div{display:flex;flex-direction:column}
.crm-cust-k{font-size:17px;font-weight:800;color:var(--ink)}
.crm-cust-kl{font-size:12px;color:var(--muted)}
.crm-cust-buy{display:flex;gap:8px;flex-wrap:wrap}
.crm-cust-buy input{flex:1 1 160px}
/* Документы сделки (счёт/договор) */
.crm-docs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.crm-docs-hint{color:var(--muted);font-size:12px}
/* @упоминания в ленте заметок */
.crm-mention{background:var(--soft);color:var(--brand);font-weight:700;border-radius:4px;padding:0 3px}
/* Предупреждение о возможном дубле при создании контакта/компании */
.crm-dup-warn{background:#fff7ed;border:1px solid #fdba74;color:#9a3412;border-radius:var(--r-md);padding:10px 12px;margin-bottom:10px;font-size:13px;line-height:1.4}
.crm-dup-act{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
html[data-theme="dark"] .crm-dup-warn{background:#3a2a12;border-color:#7c4a1e;color:#fdba74}
/* Аналитика: панель «Сводка» (средний чек / цикл / конверсия) */
.crm-summary{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-around}
.crm-sum-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1 1 160px;text-align:center;padding:6px 0}
.crm-sum-v{font-size:24px;font-weight:800;color:var(--ink);line-height:1.1}
.crm-sum-l{font-size:13px;color:var(--muted)}

/* ── Центр уведомлений (колокольчик в топбаре CRM) ── */
.crm-bell{position:relative}
.crm-bell>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);position:relative}
.crm-bell>summary::-webkit-details-marker{display:none}
.crm-bell>summary svg{width:19px;height:19px}
.crm-bell>summary:hover{background:var(--bg)}
.crm-bell-badge{position:absolute;top:-5px;right:-5px}
.crm-bell-dot{display:inline-block;min-width:17px;height:17px;line-height:17px;padding:0 4px;border-radius:8px;
  background:#ef4444;color:#fff;font-size:11px;font-weight:700;text-align:center;box-shadow:0 0 0 2px var(--card)}
.crm-bell-panel{position:absolute;top:46px;right:0;width:340px;max-height:60vh;overflow-y:auto;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.18);padding:6px}
.crm-bell-empty{padding:18px;text-align:center}
.crm-bell-list{display:flex;flex-direction:column;gap:2px}
.crm-bell-item{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:8px;
  text-decoration:none;color:var(--ink);font-size:13px;line-height:1.35;cursor:pointer}
.crm-bell-item:hover{background:var(--bg)}
.crm-bell-item.unread{background:rgba(37,99,235,.07)}
.crm-bell-item.unread:hover{background:rgba(37,99,235,.12)}
.crm-bell-k{flex:0 0 22px;width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:var(--bg);color:var(--muted)}
.crm-bell-mention{background:rgba(124,58,237,.14);color:#7c3aed}
.crm-bell-lead{background:rgba(16,185,129,.14);color:#059669}
.crm-bell-overdue{background:rgba(239,68,68,.14);color:#ef4444}
html[data-theme="dark"] .crm-bell-mention{background:rgba(167,139,250,.2);color:#c4b5fd}
html[data-theme="dark"] .crm-bell-lead{background:rgba(52,211,153,.2);color:#6ee7b7}
html[data-theme="dark"] .crm-bell-overdue{background:rgba(248,113,113,.2);color:#fca5a5}
.crm-bell-tx{flex:1;min-width:0}

/* ── Входящие: кликабельная карточка + детальная карточка лида в drawer ── */
.crm-uns-clickable{cursor:pointer;border-radius:8px;padding:4px;margin:-4px -4px 6px;transition:background .12s}
.crm-uns-clickable:hover{background:var(--bg)}
.crm-uns-detail .crm-deal-h{margin-bottom:10px}
.crm-uns-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.crm-uns-tags .crm-uns-src{background:rgba(37,99,235,.1);color:#2563eb;border-radius:8px;padding:2px 8px;font-size:12px;font-weight:600}
.crm-uns-tags .crm-uns-time{color:var(--muted);font-size:12px}
.crm-uns-tags .crm-uns-status{background:var(--bg);border-radius:8px;padding:2px 8px;font-size:12px;color:var(--muted)}
.crm-uns-dup{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);border-radius:8px;
  padding:10px 12px;font-size:13px;line-height:1.5;margin-bottom:12px}
.crm-uns-dup a{color:var(--brand);text-decoration:none;font-weight:600}
.crm-uns-dup a:hover{text-decoration:underline}
.crm-uns-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.crm-uns-field{display:flex;align-items:center;gap:10px}
.crm-uns-field-col{flex-direction:column;align-items:flex-start;gap:4px}
.crm-uns-lbl{color:var(--muted);font-size:12px;min-width:96px}
.crm-uns-val{font-size:14px;color:var(--ink);text-decoration:none;font-weight:500}
a.crm-uns-val:hover{text-decoration:underline;color:#2563eb}
.crm-uns-msg{background:var(--bg);border-radius:8px;padding:10px 12px;font-weight:400;line-height:1.5;width:100%}
.crm-uns-detail-act{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}

/* ── Сохранение карточки сделки (кнопка «Сохранить» + индикатор) ── */
.crm-autosave{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-right:auto}
.crm-saved-dot{opacity:0;transform:translateY(1px);transition:opacity .25s ease;color:var(--ok);font-weight:700}
.crm-saved-dot.on{opacity:1}
.crm-saved-dot.saving{color:var(--muted)}
.crm-saved-dot.ok{color:var(--ok)}
.crm-saved-dot.err{color:#ef4444}

/* ── Глобальная «＋ Создать» ── */
.crm-create{position:relative}
.crm-create>summary{list-style:none;cursor:pointer;padding:8px 14px;font-size:13px}
.crm-create>summary::-webkit-details-marker{display:none}
.crm-create-menu{position:absolute;top:44px;right:0;z-index:60;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.18);padding:6px;min-width:190px;display:flex;flex-direction:column;gap:2px}
.crm-create-menu button{display:flex;align-items:center;gap:9px;text-align:left;width:100%;border:0;background:transparent;
  color:var(--ink);font:inherit;font-size:13px;padding:9px 11px;border-radius:8px;cursor:pointer}
.crm-create-menu button:hover{background:var(--bg)}

/* ── Командная палитра Cmd+K ── */
.crm-cmdk[hidden]{display:none}  /* атрибут hidden должен побеждать display:flex ниже */
.crm-cmdk{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;justify-content:center}
.crm-cmdk-bg{position:absolute;inset:0;background:rgba(2,6,23,.5);backdrop-filter:blur(2px)}
.crm-cmdk-box{position:relative;margin-top:12vh;width:min(560px,94vw);background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.32);padding:10px;display:flex;flex-direction:column;gap:8px}
.crm-cmdk-q{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--ink);outline:none}
.crm-cmdk-q:focus{border-color:var(--brand)}
.crm-cmdk-list{display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow-y:auto}
.crm-cmdk-it{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:14px;color:var(--ink);cursor:pointer}
.crm-cmdk-it.on,.crm-cmdk-it:hover{background:rgba(37,99,235,.1)}
.crm-cmdk-it span{width:22px;text-align:center}
.crm-cmdk-search{color:var(--muted)}
.crm-cmdk-hint{font-size:11.5px;color:var(--muted);padding:2px 6px 4px}

/* ── ifDialog: единые стилизованные диалоги (confirm/prompt/alert) под систему ── */
.ifdlg[hidden]{display:none}
.ifdlg{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.ifdlg-bg{position:absolute;inset:0;background:rgba(2,6,23,.55);backdrop-filter:blur(2px)}
.ifdlg-box{position:relative;width:min(440px,94vw);background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.34);padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.ifdlg-title{font-size:16px;font-weight:800;color:var(--ink);line-height:1.3}
.ifdlg-msg{font-size:14px;color:var(--ink);line-height:1.5;white-space:normal}
.ifdlg-field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted)}
.ifdlg-field[hidden]{display:none}  /* иначе display:flex перебивал [hidden] → в confirm-диалогах торчало поле ввода */
.ifdlg-input{width:100%;box-sizing:border-box;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--ink);outline:none}
.ifdlg-input:focus{border-color:var(--brand)}
.ifdlg-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:2px}
.ifdlg-actions .btn.danger{background:var(--err);border-color:var(--err)}
@media(max-width:520px){.ifdlg-box{width:94vw}.ifdlg-actions{flex-direction:column-reverse}.ifdlg-actions .btn,.ifdlg-actions .btn-outline{width:100%}}

/* ── Кнопка «Фильтры» + бейдж кол-ва активных ── */
.crm-filter-btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:8px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
.crm-filter-btn:hover{border-color:var(--brand)}
.crm-filter-btn svg{opacity:.7}
.crm-filter-btn.has{border-color:var(--brand);color:var(--brand);background:rgba(37,99,235,.08)}
.crm-filter-btn.has svg{opacity:1}
.crm-filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:8px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;line-height:1}

/* ── Модалка «Фильтры сделок» ── */
.crm-fltr[hidden]{display:none}
.crm-fltr{position:fixed;inset:0;z-index:190;display:flex;align-items:flex-start;justify-content:center}
.crm-fltr-bg{position:absolute;inset:0;background:rgba(2,6,23,.5);backdrop-filter:blur(2px)}
.crm-fltr-box{position:relative;margin-top:10vh;width:min(640px,94vw);max-height:82vh;overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.34);padding:18px 20px}
.crm-fltr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.crm-fltr-head b{font-size:16px;color:var(--ink)}
.crm-fltr-x{background:none;border:none;font-size:17px;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:8px}
.crm-fltr-x:hover{background:var(--bg);color:var(--ink)}
.crm-fltr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.crm-fltr-f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);min-width:0}
.crm-fltr-f select,.crm-fltr-f input{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg);color:var(--ink);outline:none;width:100%;box-sizing:border-box}
.crm-fltr-f select:focus,.crm-fltr-f input:focus{border-color:var(--brand)}
.crm-fltr-range{display:flex;align-items:center;gap:7px}
.crm-fltr-range span{color:var(--muted)}
.crm-fltr-actions{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.crm-fltr-spacer{flex:1}
@media(max-width:560px){.crm-fltr-grid{grid-template-columns:1fr}.crm-fltr-actions{flex-wrap:wrap}.crm-fltr-spacer{display:none}}

/* ── Дашборд: чек-лист онбординга ── */
.crm-setup{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px}
.crm-setup-h{font-weight:800;font-size:15px;margin-bottom:10px}
.crm-setup-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.crm-setup-it{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink);background:var(--bg)}
.crm-setup-it:hover{border-color:var(--brand)}
.crm-setup-it.done{opacity:.6}
.crm-setup-it.done .crm-setup-ck{background:var(--ok);color:#fff;border-color:var(--ok)}
.crm-setup-ck{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted)}
.crm-setup-tx{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.3}

/* ── Дашборд: «Мой день» ── */
.crm-myday{display:grid;grid-template-columns:repeat(3,minmax(0,140px)) 1fr;gap:12px;margin-bottom:18px;align-items:stretch}
.crm-myday-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;justify-content:center}
.crm-myday-card.alert{border-color:#fca5a5}
.crm-myday-card.alert .crm-myday-n{color:var(--err)}
.crm-myday-card.lead{border-color:#86efac}
.crm-myday-card.lead .crm-myday-n{color:var(--ok)}
.crm-myday-n{font-size:30px;font-weight:800;line-height:1}
.crm-myday-l{font-size:12px;color:var(--muted);margin-top:4px}
.crm-myday-tasks{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;min-width:0;overflow:auto}
.crm-myday-th{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px}
.crm-myday-task{display:flex;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:13px}
.crm-myday-task:hover{background:var(--bg)}
.crm-myday-tt{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.crm-myday{grid-template-columns:repeat(3,1fr)}.crm-myday-tasks{grid-column:1/-1}}

/* подпись периода в аналитике (он относится к графику динамики, не к сводным цифрам) */
.crm-period-lbl{font-size:12px;color:var(--muted);align-self:center;margin-right:2px}

/* ── Тёмная тема: danger-hover не должен вспыхивать белым (#fef2f2) ── */
html[data-theme="dark"] .crm-ctx button.danger:hover,
html[data-theme="dark"] .row-del:hover,
html[data-theme="dark"] .crm-stage-del:hover,
html[data-theme="dark"] .crm-pipe-del:hover,
html[data-theme="dark"] .crm-pipe-item-del:hover,
html[data-theme="dark"] .co-del:hover,
html[data-theme="dark"] .act.danger:hover,
html[data-theme="dark"] .logo-del:hover{background:rgba(220,38,38,.16)}
html[data-theme="dark"] .crm-task-pill.crm-overdue{background:rgba(220,38,38,.18);color:#fca5a5}

/* ── Быстрый лид: вторая строка формы создания (клиент/телефон/бюджет) ── */
.crm-add-row2 input{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);min-width:0}

/* ── Кнопка «в постоянные покупатели» (won) ── */
.crm-won-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 2px}

/* ── Тост-уведомление (низ экрана) ── */
.crm-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:130;
  background:var(--ink);color:var(--card);font-size:14px;font-weight:600;padding:12px 20px;border-radius:8px;
  box-shadow:0 12px 34px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;max-width:90vw}
.crm-toast.on{opacity:1;transform:translate(-50%,0)}

/* ── Настройки этапа: вероятность % и SLA дней ── */
.crm-stage-prob,.crm-stage-sla{width:58px;flex:0 0 auto;font:inherit;font-size:12px;padding:6px 6px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);text-align:center}

/* ── Переключатель языка (i18n) ── */
.lang-switch{display:inline-flex;align-items:center;gap:4px;position:relative}
.lang-switch .lang-globe{display:inline-flex;align-items:center;opacity:.7;pointer-events:none;
  position:absolute;left:8px}
.lang-switch select{font:inherit;font-size:13px;padding:6px 26px 6px 28px;border:1px solid var(--line);
  border-radius:var(--r-sm,8px);background:var(--card,#fff);color:var(--ink,#1a1a1a);cursor:pointer;
  appearance:none;-webkit-appearance:none;max-width:140px}
.lang-switch select:hover{border-color:var(--accent,#1f6feb)}
.lang-switch select:focus{outline:2px solid var(--accent,#1f6feb);outline-offset:1px}
[dir="rtl"] .lang-switch .lang-globe{left:auto;right:8px}
[dir="rtl"] .lang-switch select{padding:6px 28px 6px 26px}
/* RTL: общая зеркалка для арабского */
[dir="rtl"] body,[dir="rtl"] .crm-app{direction:rtl}

/* ── Бейдж авто-перевода записей (динамический контент, офлайн NLLB) ── */
.crm-tr-badge{display:block;margin-top:4px;font-size:11px;color:var(--muted,#8b95a5);user-select:none}
.crm-tr-badge a{color:var(--accent,#1f6feb);text-decoration:none;cursor:pointer}
.crm-tr-badge a:hover{text-decoration:underline}

/* ── Авто-настройка CRM ── */
.crm-ai-panel{border:1px solid var(--accent,#1f6feb);background:linear-gradient(180deg,rgba(37,99,235,.05),transparent)}
.crm-ai-input{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:10px;border:1px solid var(--line);
  border-radius:var(--r-sm,8px);background:var(--card,#fff);color:var(--ink);resize:vertical;min-height:64px}
.crm-ai-actions{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.crm-ai-wait{display:none}
.crm-ai-wait.htmx-request,.htmx-request .crm-ai-wait{display:inline}
.crm-ai-result{margin-top:12px}
.crm-ai-prev-h{font-weight:600;margin-bottom:8px}
.crm-ai-block{margin:8px 0}
.crm-ai-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.crm-ai-chip{display:inline-block;padding:4px 10px;border-radius:12px;background:var(--accent,#1f6feb);color:#fff;font-size:13px}
.crm-ai-chip-f{background:var(--card,#fff);color:var(--ink);border:1px solid var(--line)}
.crm-ai-chip-f em{color:var(--muted,#8b95a5);font-style:normal;font-size:11px}
.crm-ai-chip-d{background:var(--soft,#f1f5f9);color:var(--ink);border:1px solid var(--line)}
.crm-ai-group{margin:6px 0}
.crm-ai-group-h{margin:0 0 3px}
.crm-ai-opts{display:block;margin-top:2px;color:var(--muted,#8b95a5);font-size:11px}
.crm-ai-req{margin-left:6px;color:#b45309;font-size:11px;font-weight:700}
/* Гайд «с чего начать» + прогрессивное раскрытие продвинутых панелей */
.crm-guide{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:0 0 14px;padding:10px 14px;
  border-radius:8px;background:linear-gradient(90deg,rgba(37,99,235,.07),transparent);border:1px solid var(--line);
  font-size:12.5px;color:var(--muted,#64748b)}
.crm-guide b{color:var(--ink)}
.crm-adv-label{margin:6px 0 2px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
details.crm-adv>summary.crm-adv-sum{cursor:pointer;user-select:none;list-style:none;display:flex;align-items:center;gap:8px}
details.crm-adv>summary.crm-adv-sum::-webkit-details-marker{display:none}
details.crm-adv>summary.crm-adv-sum::before{content:"▸";color:var(--muted,#8b95a5);font-size:12px;transition:transform .12s}
details.crm-adv[open]>summary.crm-adv-sum::before{transform:rotate(90deg)}
details.crm-adv>summary.crm-adv-sum:hover{color:var(--accent,#2563eb)}
/* Вкладки настроек CRM */
.crm-tabbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;border-bottom:1px solid var(--line);padding-bottom:0}
.crm-tab{appearance:none;cursor:pointer;border:1px solid transparent;border-bottom:none;background:transparent;
  display:inline-flex;align-items:center;gap:6px;
  color:var(--muted,#64748b);font-size:13px;font-weight:600;padding:9px 14px;border-radius:8px 9px 0 0;
  margin-bottom:-1px;transition:background .12s,color .12s;white-space:nowrap}
.crm-tab .i{opacity:.85}
.crm-tab:hover{color:var(--ink);background:var(--panel-2,rgba(148,163,184,.1))}
.crm-tab.is-active{color:var(--accent,#2563eb);background:var(--panel,#fff);border-color:var(--line);border-bottom:1px solid var(--panel,#fff)}
[data-theme="dark"] .crm-tab.is-active{background:var(--panel,#141a26);border-bottom-color:var(--panel,#141a26)}
.crm-panes{display:flex;flex-direction:column;gap:16px}
.crm-panes>[data-pane]{margin:0}
.crm-cfg-io{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.crm-cfg-io-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.crm-rec{display:block;width:100%;max-width:320px;height:34px;margin-top:6px}
.crm-mailtest{margin-top:8px;padding:9px 12px;border-radius:8px;font-size:13px;line-height:1.45}
.crm-mailtest.ok{background:rgba(16,185,129,.12);color:#065f46}
.crm-mailtest.err{background:rgba(239,68,68,.12);color:#991b1b}
[data-theme="dark"] .crm-mailtest.ok{color:#6ee7b7}[data-theme="dark"] .crm-mailtest.err{color:#fca5a5}
/* ── онбординг-тур (первый вход): центрированный модал, изолирован префиксом .crm-tour ── */
.crm-tour{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,15,29,.55);backdrop-filter:blur(2px)}
.crm-tour[hidden]{display:none}
.crm-tour-card{position:relative;width:100%;max-width:420px;background:var(--card,#fff);color:var(--ink,#0a0f1d);border:1px solid var(--line,#e5e7eb);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.28);padding:26px 24px 16px;text-align:center;animation:crmTourIn .18s ease-out}
@keyframes crmTourIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.crm-tour-x{position:absolute;top:10px;right:10px;background:none;border:none;cursor:pointer;color:var(--muted,#6b7280);padding:4px;border-radius:8px;line-height:0}
.crm-tour-x:hover{background:var(--soft,#f3f4f6)}
.crm-tour-ic{width:60px;height:60px;margin:2px auto 12px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#2563eb,#10b981)}
.crm-tour-step h3{margin:0 0 8px;font-size:19px}
.crm-tour-step p{margin:0;color:var(--muted,#4b5563);font-size:14px;line-height:1.5}
.crm-tour-step[hidden]{display:none}
.crm-tour-foot{margin-top:20px}
.crm-tour-dots{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.crm-tour-dot{width:7px;height:7px;border-radius:50%;background:var(--line,#d1d5db);transition:background .15s,transform .15s}
.crm-tour-dot.on{background:#2563eb;transform:scale(1.25)}
.crm-tour-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.crm-tour-btns button[hidden]{display:none}  /* .btn-outline display:inline-flex перебивает UA [hidden] — вернуть скрытие */
[data-theme="dark"] .crm-tour-card{background:#141b2e;color:#e5e7eb;border-color:#26304a}
[data-theme="dark"] .crm-tour-x:hover{background:#1f2a44}
.crm-ai-apply{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.crm-ai-done{padding:10px;border-radius:8px;background:rgba(16,185,129,.12);color:#065f46}
.crm-ai-err{padding:10px;border-radius:8px;background:rgba(239,68,68,.12);color:#991b1b}
[data-theme="dark"] .crm-ai-done{color:#6ee7b7}[data-theme="dark"] .crm-ai-err{color:#fca5a5}
.crm-ai-cta{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:16px;text-decoration:none;
  border:1px solid var(--accent,#1f6feb);border-radius:12px;background:linear-gradient(90deg,rgba(37,99,235,.08),transparent);color:var(--ink)}
.crm-ai-cta:hover{background:linear-gradient(90deg,rgba(37,99,235,.15),transparent)}
.crm-ai-cta-ic{font-size:26px}
.crm-ai-cta-tx{display:flex;flex-direction:column;gap:2px;flex:1}
.crm-ai-cta-go{font-size:22px;color:var(--accent,#1f6feb)}

/* ── Перевод значения текстового кастом-поля (read-only, под полем) ── */
.crm-cf-tr{margin-top:4px;padding-left:2px;line-height:1.4;white-space:pre-wrap;word-break:break-word}

/* ══════════════ Инвойсы: загрузка PDF → мульти-расчёт ══════════════ */
.inv-upload{padding:18px 20px;margin-bottom:18px}
.inv-tpl-btn{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;font-weight:600}
.inv-upload-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.inv-upload-head .ext-ico{font-size:26px;line-height:1}
.inv-upload-head .inv-logo{width:34px;height:34px;flex:0 0 auto;border-radius:8px}
.inv-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px;
  border:2px dashed var(--line);border-radius:var(--r-lg);cursor:pointer;text-align:center;
  color:var(--muted);transition:border-color .15s ease,background .15s ease}
.inv-drop:hover{border-color:var(--brand);background:var(--soft)}
.inv-drop.drag{border-color:var(--brand);background:rgba(37,99,235,.06)}
.inv-drop input[type=file]{display:none}
.inv-drop-ico{font-size:26px;color:var(--brand)}
.inv-form{margin-top:14px}
.inv-head{margin-bottom:10px;line-height:1.45}
.inv-params{margin-bottom:12px}
.inv-logi{margin:14px 0}
.inv-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);margin:8px 0}
.inv-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px}
.inv-table th,.inv-table td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.inv-table thead th{background:var(--soft);font-weight:600;color:var(--ink);white-space:nowrap;position:sticky;top:0}
.inv-table .inv-n{color:var(--muted);width:26px}
.inv-table textarea,.inv-table input{width:100%;border:1px solid var(--line);border-radius:8px;
  padding:5px 7px;font:inherit;background:var(--card);color:var(--ink)}
.inv-table textarea{min-height:38px;resize:vertical}
.inv-name{min-width:180px}
.inv-code{min-width:104px;font-variant-numeric:tabular-nums}
.inv-code-cell{min-width:150px}
.inv-code-note{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.3}
.inv-code-note.ok{color:var(--ok)}
.inv-qty,.inv-price{min-width:74px}
.inv-amount{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.inv-del{border:none;background:transparent;color:var(--err);cursor:pointer;font-size:15px;padding:4px 6px;border-radius:8px}
.inv-del:hover{background:rgba(220,38,38,.1)}
.btn-ghost.small,.inv-suggest{font-size:11.5px;padding:3px 7px;margin-top:5px}
.inv-suggest-box{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center}
.inv-chip{display:inline-flex;flex-direction:column;gap:1px;border:1px solid var(--line);background:var(--soft);
  border-radius:8px;padding:4px 8px;cursor:pointer;font-size:12px;line-height:1.2;max-width:180px}
.inv-chip:hover{border-color:var(--brand);background:rgba(37,99,235,.06)}
.inv-chip.ok{border-color:var(--ok)}
.inv-chip-name{color:var(--muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-chip-x{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 5px}
/* Результат */
.inv-result-card{margin-top:18px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.inv-result-head{margin-bottom:10px}
.inv-result-head h3{margin:0 0 3px}
.inv-result-table td{font-variant-numeric:tabular-nums}
.inv-result-table tfoot .inv-total-row td{background:var(--soft);font-weight:700;border-top:2px solid var(--line)}
.inv-r-name{min-width:170px}
.inv-row-err{background:rgba(220,38,38,.05)}
.inv-r-errtext{color:var(--err)}
.inv-row-noprice{background:rgba(234,179,8,.07)}
.inv-row-noprice .inv-price{border-color:rgba(234,179,8,.7);box-shadow:0 0 0 2px rgba(234,179,8,.15)}
.inv-summary{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.inv-sum-item{display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--r-md);min-width:150px}
.inv-sum-item span{color:var(--muted);font-size:12px}
.inv-sum-item b{font-size:16px;font-variant-numeric:tabular-nums}
.inv-sum-total{background:rgba(37,99,235,.08);border-color:var(--brand)}
.inv-sum-total b{color:var(--brand)}
.inv-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.inv-lead{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
@media print{.no-print{display:none!important}.calc-wrap,.ext-promo{display:none}
  /* Инвойс: прячем КОНТРОЛЫ загрузки, но НЕ весь .inv-upload — иначе прячется и результат
     (#inv-area/.inv-result-card лежат ВНУТРИ .inv-upload) → печаталась пустая стартовая страница. */
  .inv-upload-head,#inv-upload-form,.inv-tpl-btn,.inv-pro-lock{display:none!important}
  .inv-upload{background:none;box-shadow:none;border:none;padding:0;backdrop-filter:none}
  .inv-result-card{box-shadow:none;border:none}}
.inv-orig{display:block;margin-top:3px;font-size:11px;line-height:1.3;color:var(--muted);white-space:normal;word-break:break-word}

/* ══════════════ Оплата поставщику (наценка способа оплаты + курс ВТБ) ══════════════ */
.pay-supplier{margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--soft)}
.pay-supplier .pay-q{display:block;margin-bottom:10px;font-weight:600}
.pay-supplier .form-grid{margin:0}
.pay-real{margin:10px 0 14px;padding:14px 16px;border:1px solid var(--brand);border-radius:var(--r-lg);
  background:rgba(37,99,235,.05)}
.pay-real-h{font-weight:700;margin-bottom:8px}
.pay-real-table{width:100%;border-collapse:collapse}
.pay-real-table td{padding:6px 4px;border-bottom:1px solid var(--line)}
.pay-real-table td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.pay-real-table .subtotal td{font-weight:600;border-bottom:2px solid var(--line)}
.pay-real-table .total td{font-weight:700;font-size:16px;border-bottom:none;color:var(--brand)}

/* ── Редактор пресетов «Оплата поставщику» в профиле ── */
.pp-country{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px;background:var(--soft)}
.pp-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
.pp-inl{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.pp-inl input{padding:4px 6px;border:1px solid var(--line);border-radius:8px;font:inherit}
.pp-delc{margin-left:auto;border:none;background:transparent;color:var(--err);cursor:pointer;font-size:12px}
.pp-methods{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.pp-method{display:flex;gap:6px;align-items:center}
.pp-method .pp-m-name{flex:1;padding:5px 7px;border:1px solid var(--line);border-radius:8px;font:inherit}
.pp-method .pp-m-pct{width:80px;padding:5px 7px;border:1px solid var(--line);border-radius:8px;font:inherit}
.pp-del{border:none;background:transparent;color:var(--err);cursor:pointer;font-size:13px;padding:2px 6px}
.inv-sum-real{background:rgba(37,99,235,.08);border-color:var(--brand)}
.inv-sum-real b{color:var(--brand)}

/* ══════════════ Мобильный анти-overflow (телефоны ≤560px) ══════════════
   Причина багов на телефоне: вложенные паддинги (.container→.result-card→.pay-real)
   съедали ширину, из-за чего суммы с «₽» (nowrap) и коды ТН ВЭД вылезали за экран
   и обрезались. Здесь ужимаем паддинги и не даём длинному тексту ломать сетку. */
@media(max-width:560px){
  /* общий контейнер приложения — меньше боковых полей на узком экране */
  .container{padding:20px 12px 64px}

  /* карточка результата и вложенные блоки платежей */
  .result-card{padding:16px 12px}
  .pay-real,.pay-supplier{padding:12px 11px}
  .methodology{padding:2px 11px}

  /* таблицы расчёта: ужимаем горизонтальные паддинги ячеек, чуть меньше кегль,
     левый столбец (описание) переносится и не распирает таблицу */
  table.breakdown td,.pay-real-table td,table.mini td{padding-left:2px;padding-right:2px}
  table.breakdown,.pay-real-table,table.mini{font-size:14px}
  table.breakdown td:first-child,.pay-real-table td:first-child,
  table.mini td:first-child{overflow-wrap:anywhere;word-break:break-word}
  /* итоговые крупные суммы — чуть меньше, чтобы «₽» гарантированно влезал */
  table.breakdown tr.total td{font-size:16px}
  .pay-real-table .total td{font-size:15px}
  /* защитный клапан: если сумма всё же шире — блок скроллится, а не режется */
  .pay-real{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ── выбор кода ТН ВЭД (.suggest-item): radio слева, весь текст стопкой справа ── */
  .suggest-item{grid-template-columns:auto minmax(0,1fr);gap:3px 10px;padding:11px 13px;align-items:start}
  .suggest-item input[type=radio]{grid-column:1;grid-row:1/span 8;margin-top:3px}
  .suggest-item .code{grid-column:2;justify-self:start}
  .suggest-item .name{grid-column:2;overflow-wrap:anywhere;word-break:break-word}
  .suggest-item .conf{grid-column:2;justify-self:start}
  .suggest-item .reason{grid-column:2;overflow-wrap:anywhere;word-break:break-word}
}

/* ══════════════ Мобильная полировка (тонкости UX на телефоне) ══════════════ */
/* iOS не масштабирует текст в ландшафте; убираем серую вспышку по тапу; плавный тап без задержки */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,.btn,.btn-outline,.btn-ghost,.botnav-i,.navlink,label,summary,select,
input[type=checkbox],input[type=radio]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

@media(max-width:560px){
  /* АНТИ-ЗУМ iOS: любое поле ≥16px, иначе Safari зумит страницу при фокусе.
     !important — перекрыть плотные правила (.crm-f/.crm-add и т.п.); на мобильном 16px комфортен. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,textarea{font-size:16px !important}

  /* тач-таргеты ≥44px там, где были мелкие */
  .cb-arrow{width:44px;height:100%;top:0;right:0;transform:none;display:flex;align-items:center;justify-content:center}
  .combobox.open .cb-arrow{transform:rotate(180deg)}
  .lang-switch select{min-height:44px}
  .acct-btn{min-height:44px}

  /* без «резинки» и случайного pull-to-refresh при скролле внутренних областей */
  .crm-board,.crm-scroll,.logwrap,.crm-list-wrap,.inv-table-wrap,.crm-drawer-panel,.acct-pop{overscroll-behavior:contain}
}

/* Тени-подсказки «есть куда прокрутить вбок» на широких таблицах/канбане (чистый CSS,
   появляются ТОЛЬКО когда реально есть скролл; исчезают у краёв). */
.logwrap,.inv-table-wrap,.crm-list-wrap{
  background:
    linear-gradient(90deg, var(--card) 30%, rgba(255,255,255,0)) left center / 28px 100% no-repeat local,
    linear-gradient(90deg, rgba(255,255,255,0), var(--card) 70%) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(2,6,23,.14), rgba(2,6,23,0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(2,6,23,.14), rgba(2,6,23,0)) right center / 12px 100% no-repeat scroll;
}
html[data-theme="dark"] .logwrap,html[data-theme="dark"] .inv-table-wrap,html[data-theme="dark"] .crm-list-wrap{
  background:
    linear-gradient(90deg, var(--card) 30%, rgba(17,26,46,0)) left center / 28px 100% no-repeat local,
    linear-gradient(90deg, rgba(17,26,46,0), var(--card) 70%) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.4), rgba(0,0,0,0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.4), rgba(0,0,0,0)) right center / 12px 100% no-repeat scroll;
}

/* ══════════════ Тач-эргономика: удобный свайп «толстым пальцем» ══════════════ */
/* Плавная инерция на всех горизонтальных лентах */
.crm-board,.crm-scroll,.logwrap,.crm-list-wrap,.inv-table-wrap,.mgr-scroll,.pay-real{-webkit-overflow-scrolling:touch}

/* Крупные ползунки range (громкость и т.п.) — палец легко попадает в бегунок */
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:var(--line);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--brand);border:3px solid #fff;box-shadow:0 1px 4px rgba(2,6,23,.3);cursor:pointer}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border:3px solid #fff;border-radius:50%;background:var(--brand);cursor:pointer}

@media (pointer:coarse), (max-width:640px){
  /* Канбан — чёткая карусель: свайп защёлкивает колонку целиком (не оставляет на пол-экрана) */
  .crm-board{scroll-snap-type:x mandatory;scroll-padding-left:12px;scroll-behavior:smooth}
  /* Ручки перетаскивания (⠿ этапов/полей) — зона тапа ≥44px */
  .crm-drag-h{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
    font-size:20px;padding:0;opacity:.75}
  /* Цветовой ползунок бренда — выше и крупнее бегунок */
  .spectrum{height:26px}
  .spec-thumb{width:30px;height:30px}
  /* Крупнее бегунок range на тач-экранах */
  input[type=range]{height:8px}
  input[type=range]::-webkit-slider-thumb{width:30px;height:30px}
  input[type=range]::-moz-range-thumb{width:30px;height:30px}
  /* тач-таргеты для планшетов (coarse, шире 560): языковой селектор */
  .lang-switch select{min-height:44px}
  /* Ручка карточки — крупнее и заметнее, чтобы пальцем легко ухватить для переноса */
  .crm-card-grip{min-width:34px;align-self:stretch;font-size:18px;opacity:.5;margin:-4px 2px -4px -6px}
  /* UX: тач-таргеты вторичных кнопок/полей — комфортный тап пальцем (≥40px) */
  .crm-globalsearch input{min-height:36px}
  .crm-create-menu button{min-height:44px}
  .crm-deal-actions button,.crm-temp-b,.crm-x,.crm-composer button,.crm-task-add button,
  .crm-bell-sum,.crm-create-sum{min-height:40px}
  .crm-stage-del,.crm-extra-x{min-height:36px;min-width:36px}
}

/* ═══════════ UX-улучшения: отклик загрузки + доступность фокуса ═══════════ */
/* Глобальный прогресс-бар htmx-запросов (кроме пассивного поллинга счётчиков) */
#crm-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--brand),var(--accent,#10b981));
  opacity:0;transition:width .2s ease,opacity .3s ease;pointer-events:none}
#crm-progress.on{opacity:1}
/* Busy-состояние кнопок/сабмитов во время htmx-запроса — гасит двойные клики */
button.htmx-request,summary.htmx-request,.btn.htmx-request,.btn-sm.htmx-request,
.btn-outline.htmx-request{opacity:.6;pointer-events:none}
form.htmx-request button[type=submit],form.htmx-request .btn,form.htmx-request .btn-sm{
  opacity:.6;pointer-events:none}
/* Видимый фокус для клавиатуры (только при tab-навигации; у инпутов своё кольцо) */
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,
[tabindex]:focus-visible,.crm-card:focus-visible,.crm-rail-item:focus-visible,
.crm-view-b:focus-visible,.crm-list-row:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
@media(prefers-reduced-motion:reduce){#crm-progress{transition:opacity .01s}}

/* ═══ Настройки этапа: WIP-лимит + чек-лист ═══ */
.crm-stage-wip{width:52px}
.crm-stage-edit{flex-wrap:wrap}
.crm-stage-more{list-style:none}
.crm-stage-more>summary{cursor:pointer;padding:5px 7px;border:1px solid var(--line);border-radius:8px;
  background:var(--soft);user-select:none;font-size:13px}
.crm-stage-more[open]{flex:1 0 100%;order:9}
.crm-stage-more[open]>summary{display:inline-block;margin-bottom:6px}
.crm-stage-more textarea{width:100%;font:inherit;padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--soft);color:var(--ink);resize:vertical}
/* WIP-лимит на доске: индикатор и подсветка перебора */
.crm-col-wip{opacity:.7;font-weight:600}
.crm-col-over .crm-col-count,.crm-col-over .crm-col-wip{color:#ef4444}
.crm-col-over .crm-col-head{box-shadow:inset 0 -2px 0 #ef4444}
/* Настройки: рабочие дни + тихие часы */
.crm-wd{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.crm-wd-b{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--soft);font-size:13px;cursor:pointer}
.crm-hh{display:inline-flex;align-items:center;gap:6px}
.crm-hh input{width:64px}

/* ── Полоса напоминания об окончании Pro-подписки (под шапкой, всегда видна) ── */
.sub-bar{position:sticky;z-index:19;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:8px 18px;font-size:13.5px;line-height:1.3;color:var(--ink);
  background:linear-gradient(90deg,color-mix(in srgb,#f59e0b 16%,var(--card)),color-mix(in srgb,#f59e0b 9%,var(--card)));
  border-bottom:1px solid color-mix(in srgb,#f59e0b 42%,transparent)}
.sub-bar .sub-bar-ic{margin-right:2px}
.sub-bar .sub-bar-hint{color:var(--muted)}
.sub-bar-btn{display:inline-flex;align-items:center;font-weight:800;font-size:13px;padding:5px 15px;border-radius:8px;
  color:#fff;background:linear-gradient(135deg,#f59e0b,#ea580c);text-decoration:none;white-space:nowrap;transition:filter .15s}
.sub-bar-btn:hover{filter:brightness(1.07)}
.sub-bar.crit{background:linear-gradient(90deg,color-mix(in srgb,var(--err) 18%,var(--card)),color-mix(in srgb,var(--err) 10%,var(--card)));
  border-bottom-color:color-mix(in srgb,var(--err) 46%,transparent)}
.sub-bar.crit .sub-bar-btn{background:linear-gradient(135deg,var(--err),#b91c1c)}
@media(max-width:640px){.sub-bar .sub-bar-hint{display:none}.sub-bar{font-size:12.5px;padding:7px 12px;gap:8px}}

/* ── ЕДИНОЕ ПУСТОЕ СОСТОЯНИЕ ───────────────────────────────────────────────────
   Было четыре разных стандарта: где-то панель с иконкой, где-то одинокая серая
   строчка в 600px пустоты, где-то вообще пустой прямоугольник без подписи.
   Один компонент: иконка + заголовок + пояснение + действие. */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:46px 22px;border:1px dashed var(--line);border-radius:var(--r-lg);
  background:var(--soft);color:var(--muted)}
.empty .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 9%,transparent);border:1px solid color-mix(in srgb,var(--brand) 16%,transparent)}
.empty .t{font-size:16px;font-weight:700;color:var(--ink)}
.empty .d{font-size:14px;max-width:420px;line-height:1.5}
.empty .btn,.empty .btn-sm{margin-top:4px}
html[data-theme="dark"] .empty{background:rgba(255,255,255,.03)}

/* ── ЧЕКБОКСЫ И РАДИО ──────────────────────────────────────────────────────────
   Были нативные: в тёмной теме — белый квадрат на тёмной карточке (читалось как баг),
   в светлой — системно-синие, мимо бренда. Один акцент на весь продукт. */
input[type="checkbox"],input[type="radio"]{
  width:17px;height:17px;accent-color:var(--brand);cursor:pointer;flex:0 0 auto}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{
  outline:none;box-shadow:var(--ring-soft);border-radius:4px}

/* ── SELECT ────────────────────────────────────────────────────────────────────
   Нативные селекты стояли рядом с кастомными полями: системный чеврон наезжал на текст
   («Полное место (калькулят…»). Свой чеврон + место под него. */
select:not([multiple]){
  -webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}