/* ══════════════════════════════════════
   MANAGER PAGE — pages/manager.css
   ══════════════════════════════════════ */

.leads-table-wrap {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 20px;
}

.leads-table-head   { padding: 16px 20px; border-bottom: 1.5px solid var(--border); }
.leads-table-title  { font-family: 'Unbounded', sans-serif; font-size: 14px; font-weight: 700; }
.leads-table-sub    { font-size: 12px; color: var(--ink3); margin-top: 2px; }

.leads-table { width: 100%; border-collapse: collapse; }

.leads-table th {
    padding: 11px 16px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--ink3);
    background: var(--bg);
    border-bottom: 1.5px solid var(--border);
}

.leads-table td {
    padding: 13px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.leads-table tr:last-child td { border-bottom: none; }
.leads-table tr:hover td      { background: var(--bg); cursor: pointer; }

.lead-name     { font-weight: 600; }
.lead-contact  { font-size: 11px; color: var(--ink3); margin-top: 1px; }
.lead-interest { font-size: 12.5px; }
.lead-time     { color: var(--ink3); font-size: 12px; }

/* ══════════════════════════════════════
   CRM — DEV DESIGN
   ══════════════════════════════════════ */

.page-crm {
    --tk-green:  #A8E76A;
    --tk-ink:    #111217;
    --tk-muted:  #8d919d;
    --tk-line:   rgba(17, 18, 23, .07);
    padding: 0 !important;
}

.page-crm.active {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ── Header ── */
.crm-header {
    display: flex;
    flex-direction: column;
    padding: 22px 28px 0;
    background: transparent;
    flex-shrink: 0;
}

.crm-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.crm-header-title-row { margin-bottom: 16px; }
.crm-header-nav-row   { padding-bottom: 0; }

/* Объединённый ряд (только дев-аккаунт): заголовок + вкладки слева, действия + кнопка справа */
.crm-header-row--merged { margin-bottom: 16px; }
.crm-header-left  { display: flex; align-items: center; gap: 18px; min-width: 0; }
.crm-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.crm-page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Unbounded', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--tk-ink, #111217);
    letter-spacing: -0.3px;
    flex-shrink: 0;
}
.crm-page-title svg { opacity: .55; }

/* Сегмент-контрол со скользящим индикатором — тот же паттерн, что и
   переключатель видов на странице «Задачи» (tasks.css .tasks-stats).
   flex:1 min-width:0 + overflow-x:auto — полоса сжимается/скроллится сама,
   а не наезжает текстом на соседние элементы шапки. */
.crm-tabs {
    position: relative;
    display: flex;
    gap: 2px;
    background: rgba(17, 18, 23, .05);
    border-radius: 999px;
    padding: 4px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.crm-tabs::-webkit-scrollbar { display: none; }

.crm-tabs-indicator {
    position: absolute;
    top: 4px; left: 0;
    height: calc(100% - 8px);
    width: 0;
    background: #111217;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(17, 18, 23, .18);
    transform: translateX(0);
    transition: transform .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1), opacity .15s;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}
.crm-tabs-indicator.no-anim { transition: none; }

.crm-tab {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tk-muted, #8d919d);
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s, opacity .15s;
    white-space: nowrap;
    border: none;
    background: transparent;
    font-family: inherit;
}

.crm-tab.active {
    color: #fff;
    font-weight: 800;
}

.crm-tab:hover:not(.active) {
    color: var(--tk-ink, #111217);
    background: rgba(17, 18, 23, .07);
}

.crm-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 900;
    background: #f97316;
    color: #fff;
    border-radius: 999px;
    line-height: 1;
}
.crm-tab.active .crm-tab-badge {
    background: rgba(255, 255, 255, .22);
}

.crm-nav-actions { display: flex; gap: 6px; align-items: center; }
.crm-actions     { display: flex; gap: 8px; align-items: center; }

.crm-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 18px;
    background: #111217;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity .15s;
    white-space: nowrap;
    font-family: inherit;
}
.crm-btn-primary:hover { opacity: .78; }

.crm-btn-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(17, 18, 23, .09);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #8d919d;
    transition: all .15s;
}
.crm-btn-icon:hover {
    background: rgba(17, 18, 23, .08);
    color: #111217;
    border-color: rgba(17, 18, 23, .14);
}

/* ── Stats strip ── */
.crm-stats {
    display: flex;
    gap: 8px;
    background: transparent;
    border-bottom: none;
    flex-shrink: 0;
    padding: 12px 28px 16px;
    flex-wrap: wrap;
}

.crm-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(17, 18, 23, .08);
    border-radius: 14px;
    flex: 0 0 auto;
}

.crm-stat-label {
    font-size: 10px;
    color: #8d919d;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.crm-stat-val {
    font-size: 20px;
    font-weight: 800;
    color: #111217;
    font-family: 'Unbounded', sans-serif;
    line-height: 1.15;
    margin-top: 1px;
}
.crm-stat-sub {
    font-size: 10.5px;
    color: #8d919d;
    font-weight: 600;
}
.crm-stat-val.green  { color: #16a34a; }
.crm-stat-val.orange { color: #f97316; }
.crm-stat-val.red    { color: #dc2626; }

/* ── Views ── */
.crm-view { display: none; flex: 1; overflow: hidden; }
.crm-view.active { display: flex; flex-direction: column; }

/* ── Kanban ── */
.crm-kanban-wrap {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.kanban-col {
    min-width: 272px;
    max-width: 272px;
    display: flex;
    flex-direction: column;
    background: rgba(17,18,23,.04);
    border-radius: 20px;
    overflow: hidden;
    max-height: calc(100vh - 260px);
    border: 1px solid rgba(17,18,23,.06);
}

.kanban-col-indicator {
    height: 3px;
    width: 100%;
    flex-shrink: 0;
    border-radius: 20px 20px 0 0;
}

.kanban-col-header {
    padding: 12px 14px 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kanban-col-title {
    font-size: 11px;
    font-weight: 900;
    color: #111217;
    display: flex;
    align-items: center;
    gap: 7px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.kanban-col-count {
    font-size: 11px;
    font-weight: 700;
    background: rgba(17,18,23,.07);
    color: #8d919d;
    border-radius: 999px;
    padding: 2px 8px;
    border: none;
}

.kanban-col-total {
    font-size: 11px;
    color: #8d919d;
    font-weight: 600;
}

.kanban-col-body {
    flex: 1;
    overflow-y: auto;
    /* top:10px — не 4px: бейдж «регулярная сделка» (.task-recur-badge, тот
       же класс, что и у повторяющихся задач) торчит на -7px над карточкой,
       а overflow-y:auto обрезает всё, что выходит за padding-box контейнера —
       у первой карточки колонки не хватало места (см. аналогичный фикс в tasks.css). */
    padding: 10px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.kanban-add-btn {
    margin: 0 10px 10px;
    padding: 8px;
    border: 1.5px dashed rgba(17,18,23,.15);
    border-radius: 12px;
    background: transparent;
    color: #8d919d;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
    flex-shrink: 0;
    font-family: inherit;
}
.kanban-add-btn:hover { border-color: #111217; color: #111217; background: rgba(17,18,23,.04); }

/* ── Deal Card ── */
.deal-card {
    position: relative; /* якорь для .task-recur-badge (бейдж «регулярная сделка») */
    background: #fff;
    border-radius: 20px;
    border: none;
    padding: 14px 14px 12px;
    box-shadow: 0 2px 10px rgba(17,18,23,.07), 0 0 0 1px rgba(17,18,23,.05);
    cursor: pointer;
    transition: box-shadow .18s, transform .18s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.deal-card::before { display: none; }

/* Только просмотр (см. crmIsViewOnly() в pages/manager.php) — карточки
   остаются кликабельными (открыть детали), но не перетаскиваемыми. */
body.crm-readonly .deal-card { cursor: default; }

/* !important — crmTab() переключает вкладки и заново проставляет inline
   style.display у #crm-header-btn/#crm-import-btn при каждом клике по табам,
   обычное правило класса не могло бы это перебить. */
body.crm-readonly #crm-header-btn,
body.crm-readonly #crm-import-btn,
body.crm-readonly .client-drawer-action--danger,
body.crm-readonly .kanban-add-btn,
body.crm-readonly .tasks-archive-item-actions,
body.crm-readonly .tasks-archive-clear {
    display: none !important;
}

.deal-card:hover {
    box-shadow: 0 8px 28px rgba(17,18,23,.12), 0 0 0 1px rgba(17,18,23,.07);
    transform: translateY(-2px);
}

/* Top row: temp + arrow */
.deal-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
}

.deal-temp-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
}
.deal-temp-pill::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.deal-temp-pill.hot  { background: rgba(220,38,38,.1); color: #dc2626; }
.deal-temp-pill.hot::before  { background: #dc2626; }
.deal-temp-pill.warm { background: rgba(249,115,22,.1); color: #f97316; }
.deal-temp-pill.warm::before { background: #f97316; }
.deal-temp-pill.cold { background: rgba(100,116,139,.1); color: #64748b; }
.deal-temp-pill.cold::before { background: #64748b; }

.deal-open-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(17,18,23,.06);
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #8d919d;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.deal-open-btn:hover { background: #111217; color: #fff; }

/* Theme — герой */
.deal-theme {
    font-size: 14px;
    font-weight: 700;
    color: #111217;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Divider */
.deal-divider {
    height: 1px;
    background: rgba(17,18,23,.07);
}

/* Client row */
.deal-client-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.deal-avatar-lg {
    width: 34px; height: 34px;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: 'Unbounded', sans-serif;
}

.deal-client-info { flex: 1; min-width: 0; }
.deal-client-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #111217;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.deal-client-contact {
    font-size: 11px;
    color: #8d919d;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deal-task-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    background: rgba(249,115,22,.12);
    color: #f97316;
    font-size: 10px;
    font-weight: 800;
    border-radius: 999px;
    flex-shrink: 0;
}

/* Footer: services + date */
.deal-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 0;
    border-top: none;
}

.deal-services {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.deal-service-tag {
    font-size: 10.5px;
    font-weight: 700;
    color: #8d919d;
    background: rgba(17,18,23,.06);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}

.deal-date {
    font-size: 10.5px;
    color: #8d919d;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 600;
}

/* Keep old classes for backward compat in side panel */
.deal-avatar { display: none; }
.deal-amount { display: none; }
.deal-meta   { display: none; }
.deal-temp-dot { display: none; }
.deal-task-badge { display: none; }

/* ── Side Panel ── */
/* position:fixed (не absolute) — панель переносится в <body> при загрузке
   страницы (см. манипуляцию в конце файла, тот же приём, что уже
   используется для модалки задачи в pages/tasks.php), чтобы её можно было
   открыть поверх ЛЮБОЙ активной страницы (например, из привязки клиента в
   модалке задачи), а не только пока активна сама CRM. Из-за переноса панель
   больше не потомок .page-crm — переменные --tk-*, которыми пользуется всё
   её содержимое (client-info-row, crm-side-tab и т.д.), объявлены прямо
   здесь ещё раз, иначе они просто не резолвятся (var() без совпадения тихо
   отваливается в transparent/inherit, а не в дефолт из .page-crm). */
.crm-side-panel {
    --tk-green: #A8E76A;
    --tk-ink:   #111217;
    --tk-muted: #8d919d;
    --tk-line:  rgba(17, 18, 23, .07);
    position: fixed;
    top: 14px; right: -440px; bottom: 14px;
    width: 410px;
    background: #f8f9f6;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 22px 0 0 22px;
    box-shadow: -24px 0 56px rgba(17,18,23,.14), -4px 0 14px rgba(17,18,23,.06);
    /* Выше .tm-overlay/.tm-modal (500/501, tasks.css) — панель теперь может
       открываться поверх модалки задачи (привязка клиента), не только
       поверх самой страницы CRM, см. комментарий выше про перенос в body. */
    z-index: 600;
    display: flex;
    flex-direction: column;
    transition: right .28s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

.crm-side-panel.open { right: 14px; }

.crm-side-header {
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(17,18,23,.07);
    flex-shrink: 0;
    background: #fff;
}

.crm-side-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.client-drawer-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.client-drawer-avatar {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    flex-shrink: 0;
}

.client-drawer-heading {
    min-width: 0;
}

.client-drawer-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.client-drawer-action {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(17,18,23,.08);
    background: rgba(17,18,23,.04);
    color: var(--tk-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.client-drawer-action:hover {
    background: rgba(168,231,106,.18);
    border-color: rgba(168,231,106,.55);
    color: #2a5c12;
    transform: translateY(-1px);
}
.client-drawer-action--danger:hover {
    background: rgba(220,38,38,.08);
    border-color: rgba(220,38,38,.24);
    color: #dc2626;
}

.crm-side-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--tk-ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-source-pill {
    display: inline-flex;
    width: fit-content;
    margin-top: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(17,18,23,.05);
    color: var(--tk-muted);
    font-size: 10.5px;
    font-weight: 800;
}
.client-source-pill:empty { display: none; }

.crm-side-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(17,18,23,.06);
    color: var(--tk-ink);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
}
.crm-side-close:hover { background: rgba(17,18,23,.12); }

.crm-stage-select {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.crm-stage-pill {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all .15s;
    opacity: .6;
}

.crm-stage-pill.active { opacity: 1; border-color: currentColor; }
.crm-stage-pill:hover  { opacity: .85; }

/* Трек — тот же светло-серый сегмент-контрол, что у .crm-tabs (Воронка/
   Регулярные/Клиенты/Аналитика) и .crms-tabs (панель настроек CRM) —
   единый визуальный язык переключателей по всей странице. */
.crm-side-tabs {
    display: flex;
    gap: 2px;
    margin: 12px 18px;
    padding: 4px;
    background: rgba(17,18,23,.05);
    border-radius: 999px;
    width: max-content;
    flex-shrink: 0;
}

.crm-side-tab {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tk-muted);
    cursor: pointer;
    border-radius: 999px;
    transition: color .15s, background .15s;
    white-space: nowrap;
}

.crm-side-tab.active {
    background: var(--tk-ink);
    color: #fff;
    font-weight: 800;
}
.crm-side-tab:hover:not(.active) {
    color: var(--tk-ink);
    background: rgba(17,18,23,.07);
}

.crm-side-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(17,18,23,.08) transparent;
}
.crm-side-body::-webkit-scrollbar { width: 3px; }
.crm-side-body::-webkit-scrollbar-thumb { background: rgba(17,18,23,.1); border-radius: 4px; }

.crm-side-view { display: none; }
.crm-side-view.active { display: block; }

.client-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.client-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(17,18,23,.07);
    border-radius: 14px;
}

.client-info-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17,18,23,.05);
    color: var(--tk-muted);
    flex-shrink: 0;
}

.client-info-main {
    flex: 1;
    min-width: 0;
}

.client-info-label {
    font-size: 10px;
    font-weight: 900;
    color: var(--tk-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 2px;
}

.client-info-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--tk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-info-action {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--tk-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity .13s, transform .13s;
}
.client-info-action:hover {
    opacity: .78;
    transform: translateY(-1px);
}
.client-info-action--blue {
    background: #3b82f6;
}

.client-drawer-empty {
    padding: 28px 0;
    color: var(--tk-muted);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.client-req-card {
    padding: 13px;
    background: #fff;
    border: 1px solid rgba(17,18,23,.07);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .13s, transform .13s, box-shadow .13s;
    margin-bottom: 8px;
}
.client-req-card:hover {
    border-color: rgba(17,18,23,.14);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(17,18,23,.06);
}
.client-req-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}
.client-req-theme {
    font-size: 13px;
    font-weight: 800;
    color: var(--tk-ink);
    line-height: 1.3;
    min-width: 0;
}
.client-req-stage {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(17,18,23,.05);
    background: color-mix(in srgb, var(--stage-color) 12%, transparent);
    color: var(--stage-color);
    font-size: 10px;
    font-weight: 900;
}
.client-req-stage::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.client-req-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--tk-muted);
    font-size: 11px;
    font-weight: 700;
}

/* Deal detail fields */
.crm-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.crm-field:last-child { border-bottom: none; }

.crm-field-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.crm-field-label { font-size: 11px; color: var(--ink3); width: 80px; flex-shrink: 0; }
.crm-field-val   { font-size: 13px; color: var(--ink); font-weight: 500; flex: 1; }

/* Tasks in side panel */
.crm-task-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.crm-task-item:last-child { border-bottom: none; }

.crm-task-cb {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(17,18,23,.18);
    cursor: pointer;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
    margin-top: 1px;
    background: #fff;
    color: transparent;
}
.crm-task-cb.done { background: #A8E76A; border-color: #A8E76A; color: #2a5c12; }

.crm-task-info { flex: 1; min-width: 0; }
.crm-task-title { font-size: 13px; color: var(--tk-ink); font-weight: 500; }
.crm-task-title.done { text-decoration: line-through; color: var(--tk-muted); }
.crm-task-meta  { font-size: 11px; color: var(--tk-muted); margin-top: 2px; }

.crm-priority-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}
.crm-priority-dot.critical { background: var(--red); }
.crm-priority-dot.high     { background: var(--orange); }
.crm-priority-dot.medium   { background: var(--yellow); }
.crm-priority-dot.low      { background: var(--ink4); }

.crm-add-task-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 0;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    margin-top: 4px;
}

/* ── Tasks View ── */
.crm-tasks-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--white);
    border-bottom: 1.5px solid var(--border);
    flex-shrink: 0;
}

.crm-filter-btn {
    padding: 6px 13px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: var(--white);
    color: var(--ink3);
    transition: all .15s;
}
.crm-filter-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.crm-filter-btn:hover:not(.active) { border-color: var(--ink3); color: var(--ink2); }

.crm-tasks-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

.crm-task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 11px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all .15s;
}
.crm-task-row:hover { box-shadow: var(--shadow-md); border-color: var(--ink4); }
.crm-task-row.done  { opacity: .6; }

.crm-task-row-info { flex: 1; min-width: 0; }
.crm-task-row-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.crm-task-row-title.done { text-decoration: line-through; color: var(--ink3); }
.crm-task-row-sub { font-size: 11px; color: var(--ink3); margin-top: 2px; }

.crm-task-due {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.crm-task-due.overdue  { background: var(--red-light); color: var(--red); }
.crm-task-due.today    { background: var(--orange-light); color: var(--orange); }
.crm-task-due.upcoming { background: var(--bg); color: var(--ink3); }

.crm-task-assignee {
    font-size: 11px;
    color: var(--ink3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Clients View ── */
.crm-clients-toolbar {
    padding: 14px 24px;
    background: var(--white);
    border-bottom: 1.5px solid var(--border);
    flex-shrink: 0;
}

.crm-search {
    width: 100%; max-width: 320px;
    padding: 8px 14px 8px 36px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239095a8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px center;
    color: var(--ink);
    transition: border-color .15s;
}
.crm-search:focus { outline: none; border-color: var(--accent); background-color: var(--white); }

.crm-clients-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

.client-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all .15s;
}
.client-card:hover { box-shadow: var(--shadow-md); border-color: var(--ink4); }

.client-avatar {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--accent-light);
    color: var(--accent-dark);
    font-size: 15px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: 'Unbounded', sans-serif;
}

.client-info { flex: 1; min-width: 0; }
.client-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.client-contacts { font-size: 12px; color: var(--ink3); margin-top: 2px; }

.client-deals-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--green-light);
    color: var(--green);
    flex-shrink: 0;
}

.client-last {
    font-size: 11px;
    color: var(--ink3);
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

/* ── Analytics View ── */
.crm-analytics-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.crm-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.crm-analytics-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow);
}

.crm-analytics-card-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 14px;
}

/* Funnel Chart */
.funnel-stage-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.funnel-stage-label {
    font-size: 12px;
    color: var(--ink2);
    width: 100px;
    flex-shrink: 0;
}

.funnel-bar-wrap {
    flex: 1;
    background: var(--bg);
    border-radius: 4px;
    height: 18px;
    overflow: hidden;
}

.funnel-bar {
    height: 100%;
    border-radius: 4px;
    transition: width .6s ease;
}

.funnel-count {
    font-size: 11px;
    color: var(--ink3);
    width: 24px;
    text-align: right;
    flex-shrink: 0;
}

.funnel-pct {
    font-size: 11px;
    color: var(--ink3);
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}

/* Revenue chart */
.rev-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 100px;
    margin-bottom: 6px;
}

.rev-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.rev-bar {
    width: 100%;
    border-radius: 5px 5px 0 0;
    transition: height .6s ease;
    min-height: 4px;
}

.rev-bar-label { font-size: 10px; color: var(--ink3); white-space: nowrap; }
.rev-bar-val   { font-size: 10px; color: var(--ink2); font-weight: 600; }

/* ── Modal ── */
.crm-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15,17,23,.45);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
}

.crm-modal-overlay.open { display: flex; }

.crm-modal {
    background: var(--white);
    border-radius: 18px;
    width: 460px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    animation: fadeUp .2s ease;
}

.crm-modal-header {
    padding: 20px 22px 16px;
    border-bottom: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.crm-modal-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.crm-modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.crm-modal-footer {
    padding: 14px 22px 18px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.crm-form-row { margin-bottom: 14px; }
.crm-form-label { font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 5px; display: block; }
.crm-form-input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--ink);
    background: var(--bg);
    box-sizing: border-box;
    transition: border-color .15s;
}
.crm-form-input:focus { outline: none; border-color: var(--accent); background: var(--white); }

.crm-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.crm-btn-cancel {
    padding: 9px 18px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink2);
    cursor: pointer;
    transition: all .15s;
}
.crm-btn-cancel:hover { background: var(--bg); }

.crm-btn-danger {
    height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    border: none;
    background: #111217;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
}
.crm-btn-danger:hover {
    opacity: .82;
    transform: translateY(-1px);
}

.crm-confirm-overlay {
    z-index: 2500;
}

.crm-confirm-modal {
    width: min(420px, calc(100vw - 32px));
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(17,18,23,.22), 0 0 0 1px rgba(17,18,23,.06);
    text-align: left;
    overflow: hidden;
}

.crm-confirm-header {
    padding: 18px 20px 16px;
}

.crm-confirm-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.crm-confirm-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(220,38,38,.08);
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.crm-confirm-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--tk-ink);
    line-height: 1.2;
}

.crm-confirm-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--tk-muted);
    line-height: 1.45;
}

.crm-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.crm-confirm-actions .crm-btn-cancel,
.crm-confirm-actions .crm-btn-danger {
    min-width: 108px;
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.crm-confirm-actions .crm-btn-cancel {
    background: #fff;
    border: 1.5px solid rgba(17,18,23,.12);
    color: #3d4050;
}
.crm-confirm-actions .crm-btn-cancel:hover {
    background: rgba(17,18,23,.04);
}

/* position:fixed — работает и для #crm-client-dim (переносится в <body>,
   должен затемнять поверх любой активной страницы), и для #crm-settings-dim
   (остаётся на месте внутри .page-crm.active) одинаково: .page-crm.active
   и так занимает весь экран, никакого transform/filter на нём нет — разницы
   в итоговой позиции между absolute и fixed тут нет. */
.crm-overlay-dim {
    position: fixed; inset: 0;
    background: rgba(15,17,23,.18);
    z-index: 50;
    display: none;
}
.crm-overlay-dim.show { display: block; }
/* Только затемнение панели клиента — она теперь может открываться поверх
   модалки задачи (z-index:600 выше), затемнение должно быть между ней и
   модалкой (500/501), а не на общем уровне 50 у остальных попапов CRM.
   #crm-settings-dim это не трогает — своей панели настроек хватает базового
   уровня, она с модалкой задачи никогда не пересекается. */
#crm-client-dim { z-index: 550; }

/* ══════════════════════════════════════
   CLIENTS VIEW
   ══════════════════════════════════════ */

.crm-clients-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 28px;
    flex-shrink: 0;
}

.crm-clients-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid rgba(17,18,23,.08);
    border-radius: 999px;
    padding: 0 14px;
    color: var(--tk-muted);
    height: 38px;
    flex: 0 0 300px;
    box-shadow: 0 2px 10px rgba(17,18,23,.04);
    transition: border-color .15s, box-shadow .15s;
}
.crm-clients-search-wrap:focus-within {
    border-color: rgba(168,231,106,.75);
    box-shadow: 0 0 0 3px rgba(168,231,106,.18);
}

.crm-clients-search {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: #111217;
    font-family: inherit;
    width: 100%;
}
.crm-clients-search::placeholder { color: #8d919d; }

.crm-clients-grid {
    flex: 1;
    overflow-y: auto;
    padding: 16px 28px 28px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 12px;
    align-content: start;
}
.crm-clients-grid::-webkit-scrollbar { width: 4px; }
.crm-clients-grid::-webkit-scrollbar-thumb { background: rgba(17,18,23,.1); border-radius: 4px; }

/* ── Переключатель вида «Карточки / Таблица» (вкладка «Клиенты») — тот же
   трек, что у .crm-tabs/.crms-tabs (Воронка/Регулярные/Клиенты/Аналитика,
   панель настроек): светло-серый фон вместо полупрозрачно-белого с рамкой,
   чёрная активная пилюля вместо зелёной. ── */
.crm-view-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(17, 18, 23, .05);
    border-radius: 999px;
    padding: 4px;
}
.crm-view-toggle-btn {
    width: 30px; height: 30px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #8d919d;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.crm-view-toggle-btn:hover { background: rgba(17, 18, 23, .06); color: #111217; }
.crm-view-toggle-btn.active {
    background: var(--tk-ink, #111217);
    color: #fff;
}

/* ── Вкладка «Регулярные»: свой переключатель «Карточки / Список», в общем
   хедере (crm-nav-actions), слева от «Создать сделку» — визуально идентичен
   .crm-view-toggle* выше (вкладка «Клиенты»), но с другими именами классов:
   у crmClientsViewSet()/tasksRecurViewSet() запрос document.querySelectorAll()
   ничем не ограничен, общий класс кнопок привёл бы к тому, что переключение
   вида на этой вкладке переключало бы активную кнопку и на «Клиенты» (или на
   «Регулярные» странице Задач), и наоборот. ── */
.crm-recur-view-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(17, 18, 23, .09);
    border-radius: 999px;
    padding: 3px;
}
.crm-recur-view-toggle-btn {
    width: 30px; height: 30px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #8d919d;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.crm-recur-view-toggle-btn:hover { background: rgba(17, 18, 23, .06); color: #111217; }
.crm-recur-view-toggle-btn.active {
    background: rgba(124, 58, 237, .14);
    color: #6d28d9;
}

/* ── Клиенты — табличный вид ── */
.crm-clients-table-wrap {
    flex: 1;
    overflow: auto;
    padding: 16px 28px 28px;
}
.crm-clients-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(17,18,23,.07), 0 0 0 1px rgba(17,18,23,.05);
    overflow: hidden;
}
.crm-clients-table thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8d919d;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(17,18,23,.07);
    white-space: nowrap;
}
.crm-clients-table tbody tr.client-table-row {
    cursor: pointer;
    transition: background .13s;
}
.crm-clients-table tbody tr.client-table-row:hover { background: rgba(168,231,106,.08); }
.crm-clients-table tbody tr.client-table-row:not(:last-child) td {
    border-bottom: 1px solid rgba(17,18,23,.06);
}
.crm-clients-table tbody td {
    padding: 10px 16px;
    font-size: 13px;
    color: #111217;
    vertical-align: middle;
}
.ctr-client {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.client-avatar-sm { width: 28px; height: 28px; font-size: 11px; border-radius: 9px; }
.ctr-last { color: #8d919d; font-size: 12px; white-space: nowrap; }
.ctr-actions { width: 1%; white-space: nowrap; text-align: right; }
.crm-clients-table .deal-services { display: flex; flex-wrap: nowrap; gap: 5px; overflow: hidden; }
.crm-clients-table .deal-service-tag { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Clients — empty state (нет ни одного лида) ── */
.crm-clients-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
}
.crm-clients-empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(168, 231, 106, .22);
    color: #315d20;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.crm-clients-empty-title {
    font-size: 17px;
    font-weight: 800;
    color: #111217;
    margin-bottom: 6px;
}
.crm-clients-empty-desc {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(17, 18, 23, .5);
    max-width: 360px;
    margin-bottom: 20px;
}
.crm-clients-empty-btn { height: 42px; padding: 0 22px; font-size: 12.5px; }

/* ── Client Card ── */
.client-card-new {
    background: #fff;
    border-radius: 20px;
    border: none;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(17,18,23,.07), 0 0 0 1px rgba(17,18,23,.05);
    cursor: pointer;
    transition: box-shadow .18s, transform .18s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.client-card-new:hover {
    box-shadow: 0 8px 28px rgba(17,18,23,.12), 0 0 0 1px rgba(17,18,23,.07);
    transform: translateY(-2px);
}

.client-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-avatar-new {
    width: 38px; height: 38px;
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: 'Unbounded', sans-serif;
}

.client-card-meta { flex: 1; min-width: 0; }

/* Быстрое создание сделки прямо из карточки клиента в сетке «Клиенты» —
   тот же паттерн, что .client-drawer-action в шапке панели клиента. */
.client-quick-deal-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(17,18,23,.08);
    background: rgba(17,18,23,.04);
    color: var(--tk-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.client-quick-deal-btn:hover {
    background: rgba(168,231,106,.18);
    border-color: rgba(168,231,106,.55);
    color: #2a5c12;
}

.client-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #111217;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-source-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    background: rgba(168,231,106,.22);
    color: #3a6b1d;
    border-radius: 999px;
    margin-top: 3px;
}

.client-card-contacts {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.client-contact-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #8d919d;
    font-weight: 500;
}
.client-contact-row svg { flex-shrink: 0; opacity: .55; }

.client-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.client-card-new .deal-services {
    flex-wrap: nowrap;
    overflow: hidden;
}
.client-card-new .deal-service-tag {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Client request row (in side panel) ── */
.client-req-row {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(17,18,23,.04);
    border: 1px solid rgba(17,18,23,.07);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background .13s, border-color .13s;
}
.client-req-row:hover { background: rgba(17,18,23,.07); border-color: rgba(17,18,23,.12); }
.client-req-row .client-req-theme {
    font-size: 13px;
    font-weight: 700;
    color: #111217;
    margin-bottom: 7px;
    line-height: 1.4;
}
.client-req-row .client-req-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

/* ── Source selector ── */
.crm-source-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.crm-source-btn {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(17,18,23,.1);
    background: rgba(255,255,255,.72);
    color: var(--tk-muted);
    font-family: inherit;
    transition: all .15s;
}
.crm-source-btn.active {
    background: #111217;
    color: #fff;
    border-color: #111217;
}
.crm-source-btn:hover:not(.active) {
    border-color: rgba(17,18,23,.2);
    color: var(--tk-ink);
}

/* ── Modal wide + textarea ── */
.crm-modal--wide { width: 520px; max-width: 95vw; }
.crm-form-textarea {
    min-height: 72px;
    resize: vertical;
    line-height: 1.55;
    font-family: inherit;
}

/* ══════════════════════════════════════
   DEAL MODAL — Tasks-style design
   ══════════════════════════════════════ */

.dm-overlay { backdrop-filter: blur(3px); }

@keyframes dmFadeIn {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.dm-modal {
    --tk-green:  #A8E76A;
    --tk-ink:    #111217;
    --tk-muted:  #8d919d;
    --tk-line:   rgba(17, 18, 23, .07);
    width: min(1220px, 96vw);
    max-height: 94vh;
    background: #f8f9f6;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 32px 80px rgba(0, 0, 0, .18), 0 4px 16px rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: dmFadeIn .22s cubic-bezier(.4, 0, .2, 1) forwards;
}

/* ── Header ── */
.dm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 22px;
    border-bottom: 1px solid rgba(17, 18, 23, .07);
    flex-shrink: 0;
    min-height: 50px;
}
.dm-header-left  { display: flex; align-items: center; gap: 10px; }
.dm-header-right { display: flex; align-items: center; gap: 10px; }

.dm-header-title {
    font-size: 10px;
    font-weight: 900;
    color: var(--tk-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.dm-header-date {
    font-size: 10px;
    color: var(--tk-muted);
    font-weight: 600;
}

.dm-close-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(17, 18, 23, .07);
    color: var(--tk-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .13s;
    flex-shrink: 0;
}
.dm-close-btn:hover { background: rgba(17, 18, 23, .14); }

/* ── Body ── */
.dm-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.dm-left {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 24px 28px 20px;
    border-right: 1px solid rgba(17, 18, 23, .07);
    display: flex;
    flex-direction: column;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: rgba(17,18,23,.08) transparent;
}
.dm-left::-webkit-scrollbar { width: 3px; }
.dm-left::-webkit-scrollbar-thumb { background: rgba(17,18,23,.1); border-radius: 4px; }

.dm-right {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 20px 22px;
    background: #f8f9f6;
    scrollbar-width: thin;
    scrollbar-color: rgba(17,18,23,.08) transparent;
}

/* ── Title (client name) ── */
.dm-title-input {
    width: 100%;
    font-size: 22px;
    font-weight: 700;
    color: var(--tk-ink);
    font-family: inherit;
    border: none;
    outline: none;
    background: transparent;
    margin-bottom: 14px;
    line-height: 1.3;
    box-sizing: border-box;
}
.dm-title-input::placeholder { color: rgba(17, 18, 23, .22); font-weight: 400; }

/* ── Info rows ── */
.dm-info-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(17, 18, 23, .07);
    border-bottom: 1px solid rgba(17, 18, 23, .07);
    margin-bottom: 18px;
}
.dm-right .dm-info-rows { border-top: none; }

.dm-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(17, 18, 23, .06);
    min-height: 40px;
}
.dm-info-row:last-child { border-bottom: none; }

.dm-info-label {
    font-size: 10px;
    font-weight: 900;
    color: var(--tk-muted);
    width: 100px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dm-field-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-ink);
    font-family: inherit;
    background: transparent;
}
.dm-field-input::placeholder { color: rgba(17, 18, 23, .28); font-weight: 400; }

.dm-date-picker {
    position: relative;
    flex: 1;
    min-width: 0;
}

.dm-date-trigger {
    width: min(180px, 100%);
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid rgba(17,18,23,.1);
    border-radius: 999px;
    background: rgba(17,18,23,.04);
    color: var(--tk-ink);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.dm-date-trigger:hover,
.dm-date-picker.open .dm-date-trigger {
    border-color: var(--tk-green);
    background: #fff;
}
.dm-date-trigger svg {
    color: var(--tk-ink);
    flex-shrink: 0;
}
.dm-date-trigger.is-empty .dm-date-value {
    color: rgba(17,18,23,.34);
}

.dm-date-panel {
    position: fixed;
    display: none;
    width: 292px;
    padding: 14px;
    border: 1px solid rgba(17,18,23,.1);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(17,18,23,.16), 0 2px 8px rgba(17,18,23,.06);
    z-index: 9000;
}
.dm-date-panel.open {
    display: block;
    animation: dmFadeIn .16s ease;
}
.dm-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.dm-cal-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--tk-ink, #111217);
    text-transform: lowercase;
}
.dm-cal-nav {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(17,18,23,.05);
    color: var(--tk-ink, #111217);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .13s;
}
.dm-cal-nav:hover {
    background: rgba(17,18,23,.1);
}
.dm-cal-week,
.dm-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.dm-cal-week {
    margin-bottom: 5px;
}
.dm-cal-week span {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    color: var(--tk-muted, #8d919d);
    text-transform: uppercase;
}
.dm-cal-day {
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--tk-ink, #111217);
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .13s, color .13s, box-shadow .13s;
}
.dm-cal-day:hover {
    background: rgba(168,231,106,.16);
    color: #2a5c12;
}
.dm-cal-day.is-muted {
    color: rgba(17,18,23,.32);
}
.dm-cal-day.is-today {
    box-shadow: inset 0 0 0 1.5px rgba(168,231,106,.75);
}
.dm-cal-day.is-selected {
    background: var(--tk-green, #A8E76A);
    color: #2a5c12;
    box-shadow: 0 0 0 2px rgba(168,231,106,.28);
}
.dm-cal-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(17,18,23,.07);
}
.dm-cal-action {
    border: none;
    background: transparent;
    color: var(--tk-ink, #111217);
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 999px;
}
.dm-cal-action:hover {
    background: rgba(17,18,23,.06);
}
.dm-cal-action--clear {
    color: var(--tk-muted, #8d919d);
}

.dm-phone-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Custom select wrapper */
.dm-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.dm-select-wrap .dm-select-arrow {
    position: absolute;
    right: 10px;
    pointer-events: none;
    color: var(--tk-muted);
    flex-shrink: 0;
}

.dm-field-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 999px;
    padding: 6px 28px 6px 13px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tk-ink);
    font-family: inherit;
    background: rgba(17, 18, 23, .05);
    cursor: pointer;
    outline: none;
    transition: border-color .15s, background .15s;
}
.dm-field-select:hover  { border-color: rgba(17,18,23,.2); }
.dm-field-select:focus  { border-color: #A8E76A; background: #fff; }

/* Source pills — no black */
.dm-pills { gap: 5px; flex-wrap: wrap; }
.dm-pills .crm-source-btn {
    height: 28px;
    padding: 0 11px;
    font-size: 11px;
}
.dm-pills .crm-source-btn[data-source="widget"].active {
    background: rgba(168,231,106,.18);
    color: #2a5c12;
    border-color: rgba(168,231,106,.65);
}
.dm-pills .crm-source-btn[data-source="call"].active {
    background: rgba(59,130,246,.1);
    color: #1d4ed8;
    border-color: rgba(59,130,246,.35);
}
.dm-pills .crm-source-btn[data-source="referral"].active {
    background: rgba(249,115,22,.1);
    color: #c2410c;
    border-color: rgba(249,115,22,.35);
}
.dm-pills .crm-source-btn[data-source="manual"].active {
    background: rgba(17,18,23,.08);
    color: #111217;
    border-color: rgba(17,18,23,.28);
}

/* Temperature pills */
.dm-temp-seg {
    display: flex;
    flex: 1;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}
.dm-temp-btn {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px solid rgba(17,18,23,.08);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .13s;
    background: rgba(255,255,255,.72);
    color: var(--tk-muted);
    white-space: nowrap;
}
.dm-temp-btn[data-temp="cold"]:hover:not(.active) { border-color: rgba(59,130,246,.24); color: #2563eb; background: rgba(59,130,246,.06); }
.dm-temp-btn[data-temp="warm"]:hover:not(.active) { border-color: rgba(249,115,22,.24); color: #f97316; background: rgba(249,115,22,.06); }
.dm-temp-btn[data-temp="hot"]:hover:not(.active)  { border-color: rgba(220,38,38,.24); color: #dc2626; background: rgba(220,38,38,.06); }
.dm-temp-btn[data-temp="cold"].active  { background: rgba(59,130,246,.1);  color: #2563eb; border-color: rgba(59,130,246,.3); }
.dm-temp-btn[data-temp="warm"].active  { background: rgba(249,115,22,.1);  color: #f97316; border-color: rgba(249,115,22,.3); }
.dm-temp-btn[data-temp="hot"].active   { background: rgba(220,38,38,.1);   color: #dc2626; border-color: rgba(220,38,38,.3); }

/* Assignee avatars */
.dm-assignees {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    max-width: calc(4 * 32px + 3 * 6px + 16px);
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 12px 4px 0;
    scroll-padding-left: 6px;
    scroll-snap-type: x mandatory;
}
.dm-assignees::-webkit-scrollbar { display: none; }
.dm-assignees::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
}
.dm-assignee-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    cursor: pointer;
    transition: opacity .13s, box-shadow .18s;
    flex-shrink: 0;
    opacity: .32;
    overflow: hidden;
    padding: 0;
    scroll-snap-align: start;
}
.dm-assignee-btn.selected { opacity: 1; }
.dm-assignee-btn:hover { opacity: .85; }

/* Assignee tooltip */
.dm-assignee-tip {
    position: fixed;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity .12s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.dm-assignee-tip.show { opacity: 1; }

/* Inline task add */
.dm-add-task-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(17,18,23,.04);
    border: 1px solid rgba(17,18,23,.1);
    border-radius: 10px;
}
.dm-add-task-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--tk-ink);
    background: transparent;
    min-width: 0;
}
.dm-add-task-input::placeholder { color: rgba(17,18,23,.3); }

.dm-add-task-ok,
.dm-add-task-cancel {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .13s;
    padding: 0;
}
.dm-add-task-ok {
    background: rgba(168,231,106,.25);
    color: #3a6b1d;
}
.dm-add-task-ok:hover { background: rgba(168,231,106,.45); }
.dm-add-task-cancel {
    background: transparent;
    color: var(--tk-muted);
}
.dm-add-task-cancel:hover { background: rgba(220,38,38,.1); color: #dc2626; }

/* ── Comment textarea ── */
.dm-desc {
    width: 100%;
    min-height: 80px;
    border: none;
    outline: none;
    font-size: 13.5px;
    color: var(--tk-ink);
    font-family: inherit;
    resize: none;
    background: transparent;
    line-height: 1.6;
    flex: 1;
    box-sizing: border-box;
    padding: 4px 0 0;
}
.dm-desc::placeholder { color: rgba(17, 18, 23, .22); }

/* ── Section label in right col ── */
.dm-section-label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tk-muted);
    margin-bottom: 6px;
}

/* Заголовок секции + кнопка «+», раскрывающая скрытые по умолчанию поля
   (см. «Ответственное лицо» — dealRespToggle()). Переиспользует
   .dm-tasks-add-inline (та же круглая иконка-кнопка, что у «Задачи»). */
.dm-section-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.dm-section-label-row .dm-section-label { margin-bottom: 0; }

/* ── Widget details block ── */
.crm-widget-details {
    background: rgba(168,231,106,.08);
    border: 1px solid rgba(168,231,106,.28);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}
.crm-widget-detail-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(168,231,106,.2);
}
.crm-widget-detail-row:last-child { border-bottom: none; }
.crm-widget-detail-key {
    font-size: 11px;
    color: #5a8c48;
    font-weight: 700;
    min-width: 110px;
    flex-shrink: 0;
}
.crm-widget-detail-val {
    font-size: 12.5px;
    color: var(--tk-ink);
    font-weight: 600;
}

/* ── Tasks card in right col ── */
.dm-tasks-card {
    margin-top: 16px;
    border: 1px solid rgba(17,18,23,.08);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

/* .tmn-recur-block (общий класс, используется и на странице «Задачи») имеет
   только margin-bottom — сразу после .dm-tasks-card это упиралось без
   зазора сверху. #dmRecurBlock — id только в этой модалке, страницу
   «Задачи» не трогает. */
#dmRecurBlock { margin-top: 16px; }
.dm-tasks-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px 8px;
    border-bottom: 1px solid rgba(17,18,23,.06);
}
.dm-tasks-card-label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tk-muted);
}
.dm-tasks-add-inline {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--tk-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .13s, color .13s;
    padding: 0;
    flex-shrink: 0;
}
.dm-tasks-add-inline:hover { background: rgba(168,231,106,.25); color: #3a6b1d; }

/* ── Tasks list in right col ── */
.deal-modal-tasks {
    display: flex;
    flex-direction: column;
}
.deal-modal-tasks-empty {
    font-size: 12px;
    color: var(--tk-muted);
    padding: 10px 12px;
    font-weight: 500;
}
.deal-modal-tasks .crm-task-item {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(17,18,23,.06);
}
.deal-modal-tasks .crm-task-item:last-child { border-bottom: none; }

/* Add-task input inside card */
.dm-tasks-card .dm-add-task-wrap {
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(17,18,23,.07);
    background: rgba(17,18,23,.02);
    padding: 7px 10px;
}

/* ── Повтор сделки: переключатель режима «Через» / «Каждые» ──
   Остальные элементы блока (.tmn-recur-block/-switch/-cadence/-preview и т.д.)
   переиспользуют стили из assets/css/pages/tasks.css (общие для всех
   страниц) — здесь нужен только этот 2-опционный сегмент, которого у
   регулярных задач нет (там всего один режим повтора). */
.dm-recur-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.dm-recur-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1.5px solid rgba(17,18,23,.1);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all .14s;
}
.dm-recur-mode-btn:hover { border-color: rgba(124,58,237,.4); }
.dm-recur-mode-btn.active {
    background: rgba(124,58,237,.08);
    border-color: #7c3aed;
}
.dm-recur-mode-title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--tk-ink);
}
.dm-recur-mode-btn.active .dm-recur-mode-title { color: #6d28d9; }
.dm-recur-mode-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--tk-muted);
    line-height: 1.3;
}

/* ── Вкладка «Регулярные»: своя иконка/цвет для «через» (разовое
   напоминание) — отличать от «каждые» (обычный цикл, фиолетовая иконка
   .recur-card-icon из tasks.css). Переопределяем только цвет — форма и
   размер блока те же, что и у .recur-card-icon. Селектор — составной
   (.recur-card-icon.recur-card-icon--once), а не одиночный класс: в head.php
   manager.css подключается РАНЬШЕ tasks.css, поэтому при равной
   специфичности правило .recur-card-icon из tasks.css (позже в каскаде)
   перебивало бы этот цвет — составной селектор специфичнее и всегда выигрывает. */
.recur-card-icon.recur-card-icon--once {
    background: rgba(217, 119, 6, .12);
    color: #d97706;
}

/* ── Тот же бейдж «через», но на карточке сделки в воронке (.deal-card) —
   базовый .task-recur-badge (фиолетовый, «каждые») живёт в tasks.css,
   составной селектор нужен по той же причине, что и выше. ── */
.task-recur-badge.task-recur-badge--once {
    background: #fdf1e0;
    color: #d97706;
    box-shadow: 0 2px 6px rgba(217, 119, 6, .25);
}

/* ── Client status badge in modal header ── */
.dm-client-status-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1;
    flex-shrink: 0;
    white-space: nowrap;
}
.dm-badge--new {
    background: rgba(59,130,246,.08);
    color: #2563eb;
    border: 1px solid rgba(59,130,246,.18);
}
.dm-badge--client {
    background: rgba(168,231,106,.14);
    color: #3a6b1d;
    border: 1px solid rgba(168,231,106,.35);
    cursor: pointer;
    transition: background .13s;
}
.dm-badge--client:hover { background: rgba(168,231,106,.28); }

/* ── Footer ── */
.dm-footer {
    padding: 12px 22px 14px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    border-top: 1px solid rgba(17, 18, 23, .07);
    background: #f8f9f6;
    flex-shrink: 0;
}

/* ── Task delete button ── */
.crm-task-del-btn {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #c4c8d0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .13s, background .13s, color .13s;
    padding: 0;
}

.crm-task-item:hover .crm-task-del-btn { opacity: 1; }

.crm-task-del-btn:hover {
    background: rgba(220,38,38,.1);
    color: #dc2626;
}

/* Disable default page padding for CRM */
#page-manager.page-crm {
    padding: 0;
}

/* ── Drag and Drop ── */
.deal-card[draggable="true"] { cursor: grab; }
.deal-card[draggable="true"]:active { cursor: grabbing; }

.deal-card.dragging {
    opacity: .3;
    transform: rotate(2deg) scale(.96);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    pointer-events: none;
}

.kanban-col-body.drag-over {
    background: rgba(168, 231, 106, .22);
    border-radius: 10px;
    outline: 2px dashed #A8E76A;
    outline-offset: -4px;
    min-height: 60px;
}

/* ══════════════════════════════════════
   CUSTOM DROPDOWN (.cdd)
   ══════════════════════════════════════ */

.cdd { position: relative; flex: 1; min-width: 0; }

.cdd-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px 6px 12px;
    border: 1px solid rgba(17,18,23,.1);
    border-radius: 999px;
    background: rgba(17,18,23,.04);
    font-size: 12px;
    font-weight: 700;
    color: var(--tk-ink, #111217);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    font-family: inherit;
    width: 100%;
    text-align: left;
}
.cdd-trigger:hover { border-color: rgba(17,18,23,.2); }
.cdd.open .cdd-trigger { border-color: #A8E76A; background: #fff; }

.cdd-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cdd-chev {
    flex-shrink: 0;
    color: var(--tk-muted, #8d919d);
    transition: transform .18s;
    margin-left: auto;
}
.cdd.open .cdd-chev { transform: rotate(180deg); }

.cdd-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cdd-panel {
    position: fixed;
    top: auto;
    left: auto;
    min-width: 200px;
    background: #fff;
    border: 1px solid rgba(17,18,23,.1);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(17,18,23,.14), 0 2px 6px rgba(17,18,23,.06);
    z-index: 9000;
    display: none;
    flex-direction: column;
    padding: 6px;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(17,18,23,.1) transparent;
}
.cdd.open .cdd-panel,
.cdd-panel.cdd-panel--portal {
    display: flex;
    animation: dmFadeIn .16s ease;
}

.cdd-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tk-ink, #111217);
    cursor: pointer;
    transition: background .12s;
    text-align: left;
    font-family: inherit;
    white-space: nowrap;
}
.cdd-opt:hover { background: rgba(17,18,23,.05); }
.cdd-opt.active { background: rgba(168,231,106,.18); color: #2a5c12; font-weight: 700; }

/* Компактный вариант .cdd — пилюля «Этап» на карточке/в таблице вкладки
   «Регулярные» (тот же компонент, что dd-stage в модалке сделки, просто не
   тянется на всю ширину строки и не привязан к скрытому input). */
.recur-card-stage-dd { flex: 0 0 auto; min-width: 0; }
.recur-card-stage-dd .cdd-trigger {
    width: auto;
    padding: 4px 8px 4px 9px;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
}
.recur-card-stage-dd .cdd-value { max-width: 108px; }
.recur-card-stage-dd .cdd-chev { width: 8px; height: 8px; }
/* Сделка сейчас не в воронке (спрятана повтором) — пилюля показывает
   псевдо-статус «Ожидание» (CRM_WAITING_STAGE), список настоящих этапов
   всё ещё открывается по клику (для прозрачности), но там нечего нажать. */
.recur-card-stage-dd--locked .cdd-trigger {
    background: transparent;
    border-style: dashed;
}
.cdd-panel-note {
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--tk-muted, #8d919d);
    padding: 4px 10px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(17,18,23,.06);
}
.cdd-opt--readonly { cursor: default; opacity: .65; }
.cdd-opt--readonly:hover { background: transparent; }

/* ══════════════════════════════════════
   АРХИВ CRM — переиспользует .tasks-menu-*/.tasks-archive-* из tasks.css
   (тот же компонент, что на «Задачах»), но вся геометрия внутри #crmArchive
   переопределена под собственную сетку (18px), без правок tasks.css, чтобы
   не задеть «Задачи». Панель сделана шире (440px) и пилюли — равной ширины
   (flex:1) вместо ширины "по контенту": так они никогда не могут визуально
   вылезти за пределы карточки независимо от длины текста ("Выполненные"
   заведомо длиннее остальных).
   ══════════════════════════════════════ */
#crmArchive.tasks-archive { width: 410px; border-radius: 16px; }

#crmArchive .tasks-archive-head {
    padding: 14px 16px 12px;
}
#crmArchive .tasks-archive-back,
#crmArchive .tasks-archive-close {
    width: 26px; height: 26px;
}

.crm-archive-kind-pills {
    display: flex;
    gap: 3px;
    margin: 14px 16px 0;
    padding: 3px;
    background: rgba(17, 18, 23, .05);
    border-radius: 999px;
}
.crm-archive-kind-pill {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 6px;
    border: none;
    border-radius: 999px;
    background: none;
    font-size: 12px;
    font-weight: 700;
    color: #8d919d;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background .13s, color .13s, box-shadow .13s;
}
/* Ховер — только у неактивной: у активной .active идёт позже в каскоде и
   при равной специфичности (0,2,0 у обеих) перебивает фон/цвет hover. */
.crm-archive-kind-pill:hover { background: rgba(17, 18, 23, .05); color: #111217; }
.crm-archive-kind-pill.active {
    background: #fff;
    color: #111217;
    box-shadow: 0 1px 3px rgba(17, 18, 23, .1), 0 1px 1px rgba(17, 18, 23, .06);
}
.crm-archive-kind-pills + .tasks-archive-search-wrap { margin-top: 12px; }

#crmArchive .tasks-archive-search-wrap { margin: 10px 16px; }
#crmArchive .tasks-archive-list { padding: 0 16px 10px; }
#crmArchive .tasks-archive-foot { padding: 10px 16px; }

.crm-archive-item-dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex-shrink: 0;
}
.crm-archive-item-amount { color: var(--tk-muted, #8d919d); }

/* ══════════════════════════════════════
   PRIORITY PILLS IN TASK MODAL
   ══════════════════════════════════════ */

.dm-prio-wrap {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
}

.dm-prio-btn {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .13s;
    background: transparent;
    white-space: nowrap;
}
.dm-prio-btn[data-prio="critical"] { color: #dc2626; border-color: rgba(220,38,38,.24); background: rgba(220,38,38,.045); }
.dm-prio-btn[data-prio="high"]     { color: #f97316; border-color: rgba(249,115,22,.24); background: rgba(249,115,22,.045); }
.dm-prio-btn[data-prio="medium"]   { color: #d97706; border-color: rgba(217,119,6,.24); background: rgba(217,119,6,.045); }
.dm-prio-btn[data-prio="low"]      { color: #2563eb; border-color: rgba(37,99,235,.22); background: rgba(37,99,235,.045); }

.dm-prio-btn[data-prio="critical"]:hover,
.dm-prio-btn[data-prio="critical"].active { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.42); }
.dm-prio-btn[data-prio="high"]:hover,
.dm-prio-btn[data-prio="high"].active     { background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.42); }
.dm-prio-btn[data-prio="medium"]:hover,
.dm-prio-btn[data-prio="medium"].active   { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.42); }
.dm-prio-btn[data-prio="low"]:hover,
.dm-prio-btn[data-prio="low"].active      { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.38); }

/* ── Date pill input ── */
.dm-date-pill {
    border: 1px solid rgba(17,18,23,.1);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #111217;
    font-family: inherit;
    background: rgba(17,18,23,.04);
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
    flex: 1;
}
.dm-date-pill:focus { border-color: #A8E76A; }

/* ── Task modal (narrow, single column) ── */
.dm-modal--sm { width: min(560px, 96vw); }
.dm-body--single .dm-left { border-right: none; background: #fff; }

/* ── Assignees row: show name of selected ── */
.dm-assignee-name {
    font-size: 12px;
    font-weight: 600;
    color: #8d919d;
    margin-left: 4px;
}

/* ══════════════════════════════════════
   FILTER PANEL (Clients tab)
   ══════════════════════════════════════ */

.crm-btn-filter {
    position: relative;
}

.crm-filter-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #A8E76A;
    color: #2a5c12;
    font-size: 9px;
    font-weight: 800;
    font-family: inherit;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1;
}

.crm-btn-filter.active {
    background: rgba(168,231,106,.18);
    border-color: rgba(168,231,106,.6);
    color: #2a5c12;
    box-shadow: 0 0 0 2px rgba(168,231,106,.22);
}

/* ── Panel ── */
.crm-filter-panel {
    position: fixed;
    z-index: 1200;
    width: min(360px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 24px));
    background: #fff;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 18px;
    box-shadow: 0 16px 44px rgba(17,18,23,.14), 0 0 0 1px rgba(17,18,23,.05);
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}

.crm-filter-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ── Header ── */
.cfp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px 11px;
    background: #fff;
    border-bottom: 1px solid rgba(17,18,23,.07);
}

.cfp-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #111217;
    letter-spacing: 0;
}

.cfp-reset {
    font-size: 11px;
    font-weight: 800;
    color: var(--tk-muted);
    background: rgba(17,18,23,.04);
    border: 1px solid rgba(17,18,23,.06);
    cursor: pointer;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: inherit;
    transition: color .14s, background .14s;
}
.cfp-reset:hover { color: #111217; background: rgba(17,18,23,.08); }

/* ── Sections ── */
.cfp-section {
    padding: 11px 15px 9px;
    background: #fff;
}
.cfp-section + .cfp-section {
    border-top: 1px solid rgba(17,18,23,.06);
}

.cfp-section-label {
    font-size: 9.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tk-muted);
    margin-bottom: 8px;
}

/* ── Base pill ── */
.cfp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cfp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid rgba(17,18,23,.1);
    background: rgba(17,18,23,.035);
    color: var(--tk-muted);
    transition: all .14s;
    white-space: nowrap;
}
.cfp-pill:hover {
    border-color: rgba(17,18,23,.2);
    color: #3d4050;
    background: rgba(17,18,23,.04);
}

/* ══ 1. ИСТОЧНИК — pills with colored dot ══ */
#cfp-source .cfp-pill::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--dot, #9095a8);
    transition: transform .14s;
}
#cfp-source .cfp-pill:hover::before,
#cfp-source .cfp-pill.active::before { transform: scale(1.25); }

#cfp-source .cfp-pill[data-val="widget"]   { --dot: #62c827; }
#cfp-source .cfp-pill[data-val="call"]     { --dot: #3b82f6; }
#cfp-source .cfp-pill[data-val="referral"] { --dot: #f97316; }
#cfp-source .cfp-pill[data-val="manual"]   { --dot: #9095a8; }

#cfp-source .cfp-pill[data-val="widget"].active   { background: rgba(168,231,106,.16); color: #2a5c12; border-color: rgba(168,231,106,.6);  }
#cfp-source .cfp-pill[data-val="call"].active     { background: rgba(59,130,246,.1);   color: #1d4ed8; border-color: rgba(59,130,246,.35);  }
#cfp-source .cfp-pill[data-val="referral"].active { background: rgba(249,115,22,.1);   color: #c2410c; border-color: rgba(249,115,22,.35);  }
#cfp-source .cfp-pill[data-val="manual"].active   { background: rgba(17,18,23,.08);    color: #111217; border-color: rgba(17,18,23,.28);    }

/* ══ 2. УСЛУГИ — compact horizontal strip ══ */
#cfp-services.cfp-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 -15px;
    padding: 0 15px 2px;
    scrollbar-width: none;
}
#cfp-services.cfp-pills::-webkit-scrollbar {
    display: none;
}
#cfp-services .cfp-pill {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 0 11px;
    font-size: 11px;
}
#cfp-services .cfp-pill:hover:not(.active) {
    border-color: rgba(168,231,106,.45);
    color: #2a5c12;
    background: rgba(168,231,106,.08);
}
#cfp-services .cfp-pill.active {
    background: rgba(168,231,106,.2);
    color: #2a5c12;
    border-color: rgba(168,231,106,.65);
}

/* ══ 3. ПОСЛЕДНИЙ КОНТАКТ — compact chips ══ */
#cfp-last .cfp-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
#cfp-last .cfp-pill {
    flex: 0 0 auto;
    border: 1px solid rgba(17,18,23,.1);
    border-radius: 999px;
    min-height: 28px;
    font-size: 11px;
    padding: 0 11px;
    background: rgba(17,18,23,.035);
    color: #9095a8;
}
#cfp-last .cfp-pill:hover { border-color: rgba(17,18,23,.2); background: rgba(17,18,23,.05); color: #3d4050; }

#cfp-last .cfp-pill[data-val="today"].active { background: rgba(168,231,106,.25); color: #2a5c12; }
#cfp-last .cfp-pill[data-val="week"].active  { background: rgba(59,130,246,.12);  color: #1d4ed8; }
#cfp-last .cfp-pill[data-val="month"].active { background: rgba(249,115,22,.12);  color: #c2410c; }
#cfp-last .cfp-pill[data-val="old"].active   { background: rgba(220,38,38,.12);   color: #dc2626; }

/* ══ 4 & 5. СДЕЛКИ / АКТИВНЫЕ — широкие кнопки-переключатель ══ */
#cfp-deals .cfp-pill,
#cfp-active .cfp-pill {
    flex: 1;
    min-height: 30px;
    border-radius: 999px;
    font-size: 11.5px;
}

#cfp-deals  .cfp-pill[data-val="has"].active,
#cfp-active .cfp-pill[data-val="yes"].active {
    background: rgba(168,231,106,.2);
    color: #2a5c12;
    border-color: rgba(168,231,106,.65);
}
#cfp-deals  .cfp-pill[data-val="none"].active,
#cfp-active .cfp-pill[data-val="no"].active {
    background: rgba(220,38,38,.1);
    color: #dc2626;
    border-color: rgba(220,38,38,.3);
}
#cfp-deals  .cfp-pill[data-val="has"]:hover:not(.active),
#cfp-active .cfp-pill[data-val="yes"]:hover:not(.active) {
    border-color: rgba(168,231,106,.4);
    color: #2a5c12;
    background: rgba(168,231,106,.08);
}
#cfp-deals  .cfp-pill[data-val="none"]:hover:not(.active),
#cfp-active .cfp-pill[data-val="no"]:hover:not(.active) {
    border-color: rgba(220,38,38,.25);
    color: #dc2626;
    background: rgba(220,38,38,.05);
}

/* ════════════════════════════════════════
   CRM — вкладка «Аналитика» (can-*)
   Стиль — как аналитика ИИ Конструктора (wan-*)
   ════════════════════════════════════════ */
.can-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.can-period {
    display: flex; gap: 3px; padding: 3px;
    background: rgba(17, 18, 23, .055);
    border-radius: 999px;
}
.can-period-btn {
    padding: 6px 14px;
    border: none; border-radius: 999px;
    background: none;
    font-size: 12px; font-weight: 700; color: #8d919d;
    cursor: pointer; font-family: inherit;
    transition: background .13s, color .13s, box-shadow .13s;
}
.can-period-btn:hover { color: #111217; }
.can-period-btn.active {
    background: #fff; color: #111217;
    box-shadow: 0 2px 8px -3px rgba(17, 18, 23, .25);
}

/* KPI-линейка */
.can-kpi-row {
    display: flex; align-items: stretch;
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .07);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
}
.can-kpi {
    flex: 1; padding: 16px 18px;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.can-kpi-sep { width: 1px; background: rgba(17, 18, 23, .07); flex-shrink: 0; }
.can-kpi-val {
    font-family: 'Unbounded', sans-serif;
    font-size: 20px; font-weight: 800; color: #111217;
    line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.can-kpi-val.green  { color: #16a34a; }
.can-kpi-val.orange { color: #f97316; }
.can-kpi-label { font-size: 12px; font-weight: 700; color: #3d4050; margin-top: 2px; }
.can-kpi-sub   { font-size: 11px; color: #8d919d; }
.can-kpi-sub.can-up   { color: #16a34a; font-weight: 700; }
.can-kpi-sub.can-down { color: #dc2626; font-weight: 700; }

/* Сетка карточек */
.can-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.can-grid--bottom { grid-template-columns: 1.3fr 1fr; margin-bottom: 0; }
.can-card {
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .07);
    border-radius: 18px;
    padding: 20px 22px;
    display: flex; flex-direction: column;
    min-width: 0;
}
/* Заголовки карточек — как в «ИИ Конструктор → Аналитика» (.wan-card-title):
   Unbounded, uppercase, разрядка, приглушённый серый — читается как ярлык
   раздела, а не просто мелкий чёрный текст */
.can-card-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 11.5px; font-weight: 700; color: #8d919d;
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 8px;
}
.can-card-title--mt { margin-top: 18px; }
.can-empty { font-size: 12px; color: rgba(17, 18, 23, .35); padding: 14px 0; text-align: center; line-height: 1.5; }

/* Бар-чарт динамики */
.can-bars {
    display: flex; align-items: flex-end; gap: 6px;
    height: 170px; flex: 1;
}
.can-bar-wrap { flex: 1; display: flex; align-items: flex-end; height: 100%; min-width: 0; }
.can-bar {
    width: 100%;
    background: #A8E76A;
    border-radius: 6px 6px 0 0;
    transition: height .3s ease;
    min-height: 4px;
}
.can-bar-wrap:hover .can-bar { background: #8ed44e; }
/* position:relative + абсолютные span'ы вместо равных flex-ячеек — подпись
   встаёт ровно под свою точку на кривой (X(i) считается в JS той же
   формулой «от края до края», что и точки), а не по центру произвольно
   нарезанной ячейки */
.can-bars-labels {
    position: relative;
    height: 15px;
    margin-top: 8px;
    margin-left: 26px; /* тот же гуттер под шкалу, что и у .can-line-plot — иначе даты и точки на графике разъедутся */
}
.can-bars-labels span {
    position: absolute; top: 0;
    font-size: 11.5px; color: #8d919d;
    white-space: nowrap;
}

/* Воронка */
.can-funnel { display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: center; }
.can-funnel-row { display: flex; align-items: center; gap: 10px; }
.can-funnel-label { width: 108px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: #3d4050; }
.can-funnel-track { flex: 1; height: 18px; background: rgba(17, 18, 23, .05); border-radius: 6px; overflow: hidden; }
.can-funnel-fill { height: 100%; border-radius: 6px; transition: width .3s ease; }
.can-funnel-val { width: 70px; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: #8d919d; text-align: right; }

/* Donut источников */
.can-donut-wrap { display: flex; align-items: center; gap: 22px; flex: 1; }
.can-donut {
    width: 128px; height: 128px; border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.can-donut::after {
    content: '';
    position: absolute; inset: 26px;
    background: #fff; border-radius: 50%;
}
.can-donut-center {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; line-height: 1.1;
    font-family: 'Unbounded', sans-serif;
    font-size: 20px; font-weight: 800; color: #111217;
}
.can-donut-center small {
    font-family: 'Golos Text', 'Inter', sans-serif;
    font-size: 11px; font-weight: 700; color: #8d919d; margin-top: 2px;
}
.can-donut-legend { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.can-legend-item { min-width: 0; }
.can-legend-sub { font-size: 11px; color: #8d919d; margin: 3px 0 0 17px; }
.can-legend-row { display: flex; align-items: center; gap: 8px; }
.can-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.can-legend-label {
    flex: 1; font-size: 13px; font-weight: 700; color: #111217; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.can-legend-val { font-size: 11.5px; font-weight: 700; color: #8d919d; }

/* Температура */
.can-temp-bar {
    display: flex; height: 14px;
    border-radius: 7px; overflow: hidden;
    margin-bottom: 10px;
}
.can-temp-seg { height: 100%; }
.can-temp-legend { display: flex; flex-direction: column; gap: 6px; }

/* Топ типов */
.can-top-types { display: flex; flex-direction: column; gap: 8px; }
.can-type-row { display: flex; align-items: center; gap: 10px; }
.can-type-label {
    width: 130px; flex-shrink: 0;
    font-size: 12px; font-weight: 600; color: #3d4050;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.can-type-track { flex: 1; height: 10px; background: rgba(17, 18, 23, .05); border-radius: 5px; overflow: hidden; }
.can-type-fill { height: 100%; background: #A8E76A; border-radius: 5px; }
.can-type-val { width: 24px; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: #8d919d; text-align: right; }

/* LIVE-лента */
.can-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #16a34a;
    animation: canLivePulse 1.6s ease infinite;
}
@keyframes canLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .35); }
    50%      { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}
.can-feed { display: flex; flex-direction: column; gap: 6px; }
.can-feed-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(17, 18, 23, .07);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .13s, box-shadow .13s, background .3s;
}
.can-feed-row:hover { border-color: rgba(17, 18, 23, .2); box-shadow: 0 4px 12px -8px rgba(17, 18, 23, .25); }
.can-feed-row.can-feed-new { animation: canFeedIn .5s ease; background: #f6fcee; }
@keyframes canFeedIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.can-feed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.can-feed-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.can-feed-title { font-size: 12.5px; font-weight: 700; color: #111217; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.can-feed-sub { font-size: 11px; color: #8d919d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.can-feed-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.can-feed-amount { font-size: 12px; font-weight: 800; color: #111217; }
.can-feed-date { font-size: 10.5px; color: #8d919d; }

/* Команда */
.can-team { display: flex; flex-direction: column; gap: 8px; }
.can-team-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(17, 18, 23, .07);
    border-radius: 12px;
}
.can-team-ava {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
    overflow: hidden; flex-shrink: 0;
}
.can-team-ava img { width: 100%; height: 100%; object-fit: cover; }
.can-team-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.can-team-name { font-size: 12.5px; font-weight: 700; color: #111217; }
.can-team-sub { font-size: 11px; color: #8d919d; }
.can-team-amount { font-size: 12.5px; font-weight: 800; color: #16a34a; flex-shrink: 0; }

/* Адаптив */
@media (max-width: 1100px) {
    .can-kpi-row { flex-wrap: wrap; }
    .can-kpi { flex: 1 1 30%; }
    .can-kpi-sep { display: none; }
    .can-grid, .can-grid--bottom { grid-template-columns: 1fr; }
}

/* Аналитика: свой вертикальный скролл (канбан-контейнер режет высоту),
   дети не сжимаются (иначе flex схлопывает KPI-линейку в ноль) */
#crm-view-analytics.active {
    overflow-y: auto;
    padding: 4px 24px 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 18, 23, .14) transparent;
}
#crm-view-analytics.active::-webkit-scrollbar { width: 4px; }
#crm-view-analytics.active::-webkit-scrollbar-thumb { background: rgba(17, 18, 23, .14); border-radius: 99px; }
#crm-view-analytics > * { flex-shrink: 0; }

/* ── Аналитика v2: инсайты, шапки карточек, воронка со ступенями ── */
.can-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.can-insight {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 15px;
    background: rgba(17, 18, 23, .025);
    border: 1px solid rgba(17, 18, 23, .07);
    border-radius: 14px;
}
.can-insight-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.can-insight-stat {
    font-family: 'Unbounded', sans-serif;
    font-size: 14.5px; font-weight: 800; color: #111217; line-height: 1.25;
}
.can-insight-text {
    font-size: 11.5px; color: #3d4050; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis;
}
.can-insight-ico {
    width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(17, 18, 23, .06); color: #8d919d;
}

/* Тонированный фон + цветная иконка-кружок под каждый тип инсайта —
   раньше все три карточки были одинаково белыми, отличалась только
   мелкая иконка, из-за чего блок выглядел монотонно */
.can-insight--good  { background: #eef9f1; border-color: rgba(22, 163, 74, .15); }
.can-insight--good  .can-insight-ico  { background: #16a34a; color: #fff; }
.can-insight--good  .can-insight-stat { color: #16a34a; }

.can-insight--warn  { background: #fef6e8; border-color: rgba(217, 119, 6, .18); }
.can-insight--warn  .can-insight-ico  { background: #d97706; color: #fff; }
.can-insight--warn  .can-insight-stat { color: #b45309; }

.can-insight--alert { background: #fdeeee; border-color: rgba(220, 38, 38, .18); }
.can-insight--alert .can-insight-ico  { background: #dc2626; color: #fff; }
.can-insight--alert .can-insight-stat { color: #dc2626; }

.can-insight--flat  { background: #eef4fc; border-color: rgba(37, 99, 235, .14); }
.can-insight--flat  .can-insight-ico  { background: #2563eb; color: #fff; }
.can-insight--flat  .can-insight-stat { color: #2563eb; }

.can-card-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-bottom: 14px;
}
.can-card-head .can-card-title { margin-bottom: 0; }
.can-card-aside { font-size: 11.5px; color: #8d919d; white-space: nowrap; }

.can-grid--main  { grid-template-columns: 1.5fr 1fr; }
.can-grid--three { grid-template-columns: 1.1fr 1fr 1.2fr; }

/* бар-чарт: цифры над столбиками + пустое состояние */
.can-bars-box { position: relative; flex: 1; display: flex; }
.can-bars-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; color: rgba(17, 18, 23, .35);
}
.can-bar-wrap { position: relative; flex-direction: column; justify-content: flex-end; gap: 3px; display: flex; align-items: center; }
.can-bar-num { font-size: 11.5px; font-weight: 700; color: #3d4050; line-height: 1; }
.can-bar--zero { background: rgba(17, 18, 23, .08); }
.can-bar-wrap:hover .can-bar--zero { background: rgba(17, 18, 23, .14); }

/* воронка v2 */
.can-funnel { gap: 6px; }
.can-funnel-track { height: 24px; border-radius: 8px; }
.can-funnel-fill {
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 7px; border-radius: 8px;
    min-width: 0;
}
.can-funnel-cnt { font-size: 11px; font-weight: 800; color: #fff; }
.can-funnel-val { width: 44px; }
.can-funnel-step {
    display: flex; align-items: center; gap: 4px;
    margin-left: 118px;
    font-size: 10.5px; font-weight: 700; color: #8d919d;
    padding: 1px 0;
}
.can-funnel-step--low { color: #d97706; }
.can-funnel-summary {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid rgba(17, 18, 23, .07);
    font-size: 12.5px; color: #3d4050; line-height: 1.45;
}
.can-funnel-summary b { color: #111217; }

/* чип этапа в ленте */
.can-feed-stage {
    font-size: 10.5px; font-weight: 700;
    padding: 2.5px 9px; border-radius: 999px;
    flex-shrink: 0; white-space: nowrap;
}

/* команда: без ответственного */
.can-team-ava--empty { background: rgba(17, 18, 23, .12); font-size: 14px; }
.can-team-row--unassigned { border-style: dashed; border-color: rgba(217, 119, 6, .35); }
.can-team-badge {
    font-size: 11.5px; font-weight: 800;
    background: #fdf3e3; color: #b97e14;
    border-radius: 999px; padding: 2px 10px;
    flex-shrink: 0;
}
.can-empty svg { color: rgba(17, 18, 23, .2); margin-bottom: 4px; }

@media (max-width: 1200px) {
    .can-grid--three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
    .can-grid--main, .can-grid--three { grid-template-columns: 1fr; }
}

/* ── Аналитика: источники и температура v2 ── */
.can-src-top { display: flex; align-items: center; gap: 8px; }
.can-src-track {
    height: 8px; border-radius: 4px;
    background: rgba(17, 18, 23, .05);
    overflow: hidden;
}
.can-src-fill { height: 100%; border-radius: 4px; transition: width .3s ease; }
.can-donut-legend { gap: 12px; }
.can-card-summary {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(17, 18, 23, .07);
    font-size: 12.5px; color: #3d4050; line-height: 1.45;
}
.can-card-summary b { color: #111217; }
.can-card-summary:empty { display: none; }

.can-temp-hero {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: rgba(17, 18, 23, .03);
    border-radius: 12px;
    margin-bottom: 14px;
}
.can-temp-hero-val {
    font-family: 'Unbounded', sans-serif;
    font-size: 26px; font-weight: 800; line-height: 1;
}
.can-temp-hero-text { font-size: 12.5px; color: #3d4050; line-height: 1.4; }
.can-temp-hero-text b { color: #111217; }
.can-temp-rows { display: flex; flex-direction: column; gap: 11px; }

/* ── Аналитика: Пульс периода ── */
.can-pulse {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.can-pulse-tile {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .07);
    border-radius: 16px;
    min-width: 0;
}
.can-pulse-ico {
    width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(17, 18, 23, .05); color: #8d919d;
}
.can-pulse-tile--good  .can-pulse-ico { background: #e9f7ec; color: #16a34a; }
.can-pulse-tile--warn  .can-pulse-ico { background: #fdf3e3; color: #d97706; }
.can-pulse-tile--alert .can-pulse-ico { background: #fdeeee; color: #dc2626; }
.can-pulse-tile--alert { border-color: rgba(220, 38, 38, .18); }
.can-pulse-mid { min-width: 0; }
.can-pulse-val {
    font-family: 'Unbounded', sans-serif;
    font-size: 19px; font-weight: 800; color: #111217; line-height: 1.15;
}
.can-pulse-label { font-size: 12px; font-weight: 700; color: #3d4050; margin-top: 2px; }
.can-pulse-sub {
    font-size: 11px; color: #8d919d; margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Аналитика: Конверсия ── */
.can-grid--conv { grid-template-columns: 1.1fr 1fr; }
.can-conv { display: flex; flex-direction: column; gap: 11px; }
.can-conv-subtitle {
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #8d919d;
}
.can-conv-subtitle--mt { margin-top: 8px; }

/* ── Аналитика: Частые упоминания ── */
.can-pattern-cloud {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-content: flex-start;
}
.can-pattern-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 999px;
    background: rgba(17, 18, 23, .03);
    color: #111217; font-weight: 600;
    white-space: nowrap;
}
.can-pattern-chip b { color: #8d919d; font-weight: 700; }
.can-pattern-chip--lg {
    font-size: 14px; padding: 7px 15px;
    background: #eef8e2; border-color: rgba(168, 231, 106, .8);
}
.can-pattern-chip--lg b { color: #3d7a12; }
.can-pattern-chip--md { font-size: 12.5px; padding: 5px 12px; }
.can-pattern-chip--md b { font-size: 11px; }
.can-pattern-chip--sm { font-size: 11.5px; padding: 4px 10px; color: #3d4050; }
.can-pattern-chip--sm b { font-size: 10px; }

@media (max-width: 1200px) {
    .can-pulse { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
    .can-grid--conv { grid-template-columns: 1fr; }
    .can-pulse { grid-template-columns: 1fr; }
}

/* ════ Аналитика v3 — язык аналитики Конструктора ════ */
.can-grid--main { grid-template-columns: 1fr 1fr; }

/* Универсальная строка: подпись | цветной бар | число | цветной % */
.can-fr-list { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.can-frow { display: flex; align-items: center; gap: 12px; }
.can-frow-label {
    width: 132px; flex-shrink: 0;
    font-size: 13px; font-weight: 600; color: #3d4050;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.can-frow-bar-wrap {
    flex: 1; height: 10px;
    background: rgba(17, 18, 23, .05);
    border-radius: 5px; overflow: hidden;
}
.can-frow-bar { height: 100%; border-radius: 5px; transition: width .4s ease; }
.can-frow-count {
    width: 34px; flex-shrink: 0; text-align: right;
    font-size: 13.5px; font-weight: 800; color: #111217;
}
.can-frow-pct {
    width: 44px; flex-shrink: 0; text-align: right;
    font-size: 12.5px; font-weight: 700;
}

/* Текстовый итог внизу карточки (как в Конструкторе) */
.can-card-foot {
    margin-top: auto; padding-top: 14px;
    font-size: 13px; color: #8d919d;
}
.can-card-foot--lines { line-height: 1.9; }
.can-card-foot strong { color: #111217; font-weight: 700; }
.can-card-foot:empty { display: none; }

/* Строка низа «Динамика заявок»: итог слева, легенда периодов справа —
   легенда раньше стояла в шапке рядом с заголовком и упиралась в угол
   карточки/плашку пика графика, тут места намного больше */
.can-line-foot-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; margin-top: auto; padding-top: 14px;
}
.can-line-foot-row .can-card-foot { margin-top: 0; padding-top: 0; }

/* LIVE-бейдж */
.can-live-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
    color: #16a34a;
    background: #e9f7ec;
    border-radius: 999px; padding: 4px 11px;
}

/* Лента входящих — как wan-lead-item */
.can-lead-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(17, 18, 23, .07);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .13s, box-shadow .13s, background .3s;
}
.can-lead-item:hover { border-color: rgba(17, 18, 23, .2); box-shadow: 0 4px 12px -8px rgba(17, 18, 23, .25); }
.can-lead-item--live { animation: canFeedIn .5s ease; background: #f6fcee; }
.can-lead-ava {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.can-lead-info { flex: 1; min-width: 0; }
.can-lead-name { font-size: 13px; font-weight: 700; color: #111217; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.can-lead-msg  { font-size: 12px; color: #8d919d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.can-lead-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.can-lead-new-badge {
    font-size: 10.5px; font-weight: 800;
    color: #16a34a; background: #e9f7ec;
    border-radius: 999px; padding: 2.5px 9px;
}
.can-lead-time { font-size: 11.5px; color: #8d919d; }
.can-lead-action {
    width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
    border: 1px solid rgba(17, 18, 23, .1); background: #fff;
    color: #8d919d;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .13s;
}
.can-lead-action:hover { background: #111217; border-color: #111217; color: #fff; }

/* ════ Аналитика v4: разные визуальные формы ════ */
.can-grid--trio { grid-template-columns: 1fr 1.1fr 1.25fr; }

/* Дни недели: тепловая полоса */
.can-week-strip {
    display: flex; align-items: center; gap: 6px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgba(17, 18, 23, .07);
}
.can-week-title {
    font-size: 11px; font-weight: 700; color: #8d919d;
    margin-right: 4px; flex-shrink: 0;
}
.can-week-cell {
    flex: 1; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center;
    padding: 7px 0 5px;
    transition: transform .12s;
}
.can-week-cell:hover { transform: translateY(-2px); }
.can-week-cell--max { outline: 2px solid #8ed44e; outline-offset: -2px; }
.can-week-cell b { font-size: 13px; font-weight: 800; color: #111217; line-height: 1; }
.can-week-cell span { font-size: 10px; color: #3d4050; margin-top: 2px; }

/* Воронка-ступени */
.can-steps { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; justify-content: center; }
.can-step {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 16px;
    border: 1px solid;
    border-radius: 12px;
    min-width: 0;
    transition: width .35s ease;
}
.can-step-label {
    font-size: 12px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.can-step-cnt {
    font-family: 'Unbounded', sans-serif;
    font-size: 15px; font-weight: 800; color: #111217; flex-shrink: 0;
}
.can-step-conv { font-size: 10.5px; font-weight: 800; color: #8d919d; line-height: 1.4; }
.can-step-conv--low { color: #d97706; }

/* Скорость реакции: статусные строки */
.can-speed { display: flex; flex-direction: column; gap: 14px; flex: 1; justify-content: center; }
.can-speed-row { display: flex; align-items: center; gap: 12px; }
.can-speed-status { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.can-speed-status--good  { background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.14); }
.can-speed-status--warn  { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.16); }
.can-speed-status--alert { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.16); animation: canLivePulse 1.6s ease infinite; }
.can-speed-val {
    font-family: 'Unbounded', sans-serif;
    font-size: 24px; font-weight: 800; color: #111217;
    width: 44px; flex-shrink: 0; text-align: center; line-height: 1;
}
.can-speed-val.red { color: #ef4444; }
.can-speed-mid { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.can-speed-mid b { font-size: 12.5px; font-weight: 700; color: #111217; }
.can-speed-mid span { font-size: 11.5px; color: #8d919d; }

/* Деньги в воронке */
.can-money { display: flex; flex-direction: column; flex: 1; }
.can-money-total { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.can-money-total span {
    font-family: 'Unbounded', sans-serif;
    font-size: 22px; font-weight: 800; color: #111217;
}
.can-money-total small { font-size: 11.5px; color: #8d919d; }
.can-money-bar {
    display: flex; height: 14px; border-radius: 7px;
    overflow: hidden; gap: 2px; margin-bottom: 12px;
}
.can-money-seg { height: 100%; border-radius: 3px; min-width: 8px; }
.can-money-legend { display: flex; flex-direction: column; gap: 7px; }
.can-money-leg { display: flex; align-items: center; gap: 8px; }
.can-money-leg-label { flex: 1; font-size: 12px; font-weight: 600; color: #3d4050; }
.can-money-leg-val { font-size: 12px; font-weight: 700; color: #111217; }

/* Источники и конверсия: таблица */
.can-srcconv { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.can-sc-head, .can-sc-row {
    display: grid;
    grid-template-columns: 12px 1fr 62px 52px 84px;
    align-items: center; gap: 8px;
}
.can-sc-head span {
    font-size: 10px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #b6bac4;
}
.can-sc-head span:nth-child(3), .can-sc-head span:nth-child(4) { text-align: right; }
.can-sc-head span:nth-child(5) { text-align: right; }
.can-sc-name { font-size: 13px; font-weight: 600; color: #111217; }
.can-sc-cnt  { font-size: 12px; color: #8d919d; text-align: right; }
.can-sc-badge {
    font-size: 12.5px; font-weight: 800; text-align: center;
    border-radius: 999px; padding: 4px 11px; white-space: nowrap;
    flex-shrink: 0;
}
.can-sc-badge--good { background: #e9f7ec; color: #16a34a; }
.can-sc-badge--mid  { background: #fdf3e3; color: #b97e14; }
.can-sc-badge--none { background: rgba(17,18,23,.05); color: #8d919d; }
.can-sc-money { font-size: 12.5px; font-weight: 700; color: #111217; text-align: right; }

/* Ранжированные списки */
.can-rank { display: flex; flex-direction: column; gap: 9px; }
.can-rank-row { display: flex; align-items: center; gap: 11px; }
.can-rank-num {
    width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(17, 18, 23, .06);
    font-size: 12px; font-weight: 800; color: #3d4050;
}
.can-rank-num--gold { background: #eef8e2; color: #3d7a12; }
.can-rank-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.can-rank-mid b { font-size: 12.5px; font-weight: 700; color: #111217; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.can-rank-mid span { font-size: 11px; color: #8d919d; }
.can-rank-share { font-size: 12.5px; font-weight: 800; color: #111217; flex-shrink: 0; }
.can-rank-money { font-size: 12.5px; font-weight: 800; color: #16a34a; flex-shrink: 0; }
.can-ask-subtitle {
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #8d919d;
    margin: 14px 0 9px;
}
.can-ask .can-ask-subtitle:first-child { margin-top: 0; }

/* Клиенты: новые vs повторные */
.can-cl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.can-cl-tile {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: #eef8e2; border-radius: 12px;
}
.can-cl-tile--rep { background: #e8f2fd; }
.can-cl-tile b {
    font-family: 'Unbounded', sans-serif;
    font-size: 22px; font-weight: 800; color: #111217; line-height: 1;
}
.can-cl-tile span { font-size: 11px; color: #3d4050; line-height: 1.35; }

@media (max-width: 1200px) {
    .can-grid--trio { grid-template-columns: 1fr; }
}

/* ════ Аналитика v5 — финальная сетка и полировка ════ */
.can-grid--a { grid-template-columns: 1.6fr 1fr; }
.can-grid--b { grid-template-columns: 1fr 1fr 1.25fr; }

/* Бары: спека — ≤24px, скругление 4px сверху, от базовой линии */
.can-bars { height: 210px; gap: 4px; align-items: flex-end; }
.can-bars-box { border-bottom: 1px solid rgba(17, 18, 23, .08); }
.can-bar-wrap { max-width: 34px; margin: 0 auto; width: 100%; }
.can-bar { max-width: 24px; margin: 0 auto; border-radius: 4px 4px 0 0; }
.can-bar-num { font-size: 12px; font-weight: 700; color: #3d4050; }
.can-bars-labels span { font-size: 11px; }

/* Скорость реакции: крупное число + подпись, разделители между строками */
.can-speed { display: flex; flex-direction: column; flex: 1; justify-content: center; }
.can-speed-row {
    display: flex; align-items: center; gap: 16px;
    padding: 13px 2px;
}
.can-speed-row + .can-speed-row { border-top: 1px solid rgba(17, 18, 23, .07); }
.can-speed-val {
    font-family: 'Unbounded', sans-serif;
    font-size: 26px; font-weight: 800; color: #111217;
    min-width: 44px; text-align: center; line-height: 1;
    flex-shrink: 0;
}
.can-speed-mid { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.can-speed-mid b {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: #111217;
}
.can-speed-mid span { font-size: 11.5px; color: #8d919d; }
.can-speed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.can-speed-dot--good  { background: #16a34a; }
.can-speed-dot--warn  { background: #f59e0b; }
.can-speed-dot--alert { background: #ef4444; animation: canLivePulse 1.6s ease infinite; }

/* Команда: таблица */
.can-team { display: flex; flex-direction: column; }
.can-team-hd, .can-team-tr {
    display: grid;
    grid-template-columns: 1fr 76px 76px 110px;
    align-items: center; gap: 10px;
}
.can-team-hd {
    padding: 0 10px 9px;
    border-bottom: 1px solid rgba(17, 18, 23, .08);
}
.can-team-hd span {
    font-size: 10px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #b6bac4;
}
.can-team-hd span:not(:first-child) { text-align: right; }
.can-team-tr { padding: 9px 10px; border-radius: 10px; }
.can-team-tr + .can-team-tr { margin-top: 2px; }
.can-team-tr--top { background: #f6fcee; }
.can-team-tr--unassigned { opacity: .75; }
.can-team-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.can-team-name { font-size: 13px; font-weight: 700; color: #111217; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.can-team-num { font-size: 13px; font-weight: 700; color: #3d4050; text-align: right; }
.can-team-num--money { color: #111217; font-weight: 800; }

@media (max-width: 1200px) {
    .can-grid--b { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
    .can-grid--a { grid-template-columns: 1fr; }
}

/* ════ Аналитика v6: современные формы ════ */

/* Легенда линий — компактный столбик справа от заголовка (было в один ряд,
   упиралось в угол карточки и налезало на плашку пика графика) */
.can-line-legend { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.can-lg-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #3d4050; white-space: nowrap; }
.can-lg-line { width: 16px; height: 0; border-top: 2.5px solid; border-radius: 2px; flex-shrink: 0; }
.can-lg-line--cur  { border-color: #6fbf2e; }
.can-lg-line--prev { border-color: #8b5cf6; border-top-style: dashed; }

/* SVG-график. Шкала (can-y) стоит в выделенном гуттере слева (38px), сам
   график (can-line-plot) занимает остаток ширины — раньше шкала лежала
   поверх графика на белой подложке-«заплатке», и на краю подложки
   проступал кусочек линии/сетки */
.can-line-box { position: relative; height: 210px; }
.can-line-plot { position: absolute; top: 0; bottom: 0; left: 26px; right: 0; }
.can-line-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.can-gridline { stroke: rgba(17, 18, 23, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.can-path-cur {
    fill: none; stroke: #6fbf2e; stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.can-path-prev {
    fill: none; stroke: #8b5cf6; stroke-width: 2;
    stroke-dasharray: 5 5; stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.can-dot {
    position: absolute; width: 9px; height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%; background: #6fbf2e;
    box-shadow: 0 0 0 2px #fff;
    z-index: 2; pointer-events: none;
}
.can-dot--peak { background: #3d7a12; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
/* Плашка пика — над точкой (легенда периодов теперь внизу карточки, так что
   верх свободен и коллизии с ней больше нет) */
.can-dot-tag {
    position: absolute; z-index: 3;
    transform: translate(-50%, calc(-100% - 12px));
    font-size: 11.5px; font-weight: 800; color: #111217;
    background: #fff; border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 7px; padding: 1px 7px;
    box-shadow: 0 3px 8px -4px rgba(17, 18, 23, .3);
    pointer-events: none;
    white-space: nowrap;
}
/* Пик на первом/последнем дне — плашка прижимается к своему краю точки,
   а не к центру, иначе половина обрезается за границей графика */
.can-dot-tag--peak-l { transform: translate(0, calc(-100% - 12px)); }
.can-dot-tag--peak-r { transform: translate(-100%, calc(-100% - 12px)); }
.can-hover-strip { position: absolute; top: 0; bottom: 0; z-index: 1; cursor: default; }
.can-line-box + .can-bars-labels { margin-top: 6px; border-top: 1px solid rgba(17, 18, 23, .08); padding-top: 7px; }

/* Подсказка графика «Динамика заявок» — кастомная плашка вместо нативного title */
.can-chart-tip {
    position: fixed;
    z-index: 9999;
    transform: translate(-50%, -100%);
    background: #111827;
    color: #fff;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.45;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 6px 18px -6px rgba(0,0,0,.35);
    transition: opacity .12s ease;
}
.can-chart-tip.show { opacity: 1; }
.can-chart-tip-row { display: flex; align-items: baseline; gap: 6px; }
.can-chart-tip-row--prev { margin-top: 3px; }
.can-chart-tip-row b { font-size: 12.5px; font-weight: 800; }
.can-chart-tip-row span { font-size: 12px; font-weight: 700; color: #A8E76A; }
.can-chart-tip small { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); }
/* Цветные точки — какая строка к какой линии графика относится */
.can-chart-tip-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    align-self: center;
}
.can-chart-tip-dot--cur  { background: #A8E76A; }
.can-chart-tip-dot--prev { background: #8b5cf6; }

/* Линия-наводка + точки на кривых при hover (пара к can-chart-tip) */
.can-hover-guide {
    position: absolute; top: 0; bottom: 0; width: 1px;
    margin-left: -.5px;
    background: rgba(17, 18, 23, .15);
    pointer-events: none; z-index: 1;
    opacity: 0; transition: opacity .1s ease;
}
.can-hover-guide.show { opacity: 1; }
.can-hover-pt {
    position: absolute; width: 10px; height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(17, 18, 23, .25);
    pointer-events: none; z-index: 3;
    opacity: 0; transition: opacity .1s ease;
}
.can-hover-pt.show { opacity: 1; }
.can-hover-pt--cur  { background: #6fbf2e; }
.can-hover-pt--prev { background: #8b5cf6; }

/* Подсветка даты снизу при hover — плашка поверх обычно скрытых промежуточных подписей.
   padding задан всегда (а не только в .active), иначе строка дат меняет высоту при
   наведении и вся карточка визуально «подпрыгивает» */
.can-bl-chip {
    display: inline-block;
    border-radius: 6px;
    padding: 2px 7px;
    transition: background .12s ease, color .12s ease;
}
.can-bl-chip.can-bl-hidden { visibility: hidden; }
.can-bars-labels span.active .can-bl-chip {
    visibility: visible;
    background: #111827; color: #fff;
    font-weight: 700;
}

/* Карточка на всю ширину (Динамика заявок / Воронка продаж — вне .can-grid,
   поэтому отступ снизу берёт на себя сама карточка, а не грид-контейнер) */
.can-card-full { margin-bottom: 16px; }

/* Плашка «Наибольший отсев X%» в шапке карточки воронки */
.can-funnel-badge {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(168, 231, 106, .16);
    color: #5e9a34;
    font-size: 11.5px; font-weight: 800; white-space: nowrap;
}

/* Воронка за период: карточки этапов + переходы между ними
   (структура — как на вкладке ИИ Аудит → CRM и продажи, палитра — своя, светлая) */
.can-funnel-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr) 74px minmax(0, 1fr) 74px minmax(0, 1fr) 74px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}
.can-funnel-card {
    min-height: 132px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(17, 18, 23, .025);
    border: 1px solid rgba(17, 18, 23, .06);
    display: flex; flex-direction: column;
}
.can-funnel-card--final {
    background: linear-gradient(180deg, rgba(168,231,106,.22), rgba(168,231,106,.06));
    border-color: rgba(168,231,106,.35);
}
.can-funnel-top {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.can-funnel-top span {
    font-size: 11px; font-weight: 800; color: #6b7280;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.can-funnel-top strong {
    font-family: 'Unbounded', sans-serif;
    font-size: 22px; font-weight: 800; color: #111217; line-height: 1;
}
.can-funnel-bar {
    height: 34px;
    margin: 14px 0 8px;
    display: flex; align-items: stretch;
    border-radius: 10px;
    background: rgba(17, 18, 23, .05);
    overflow: hidden;
}
.can-funnel-bar i {
    display: block; height: 100%;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(90deg, #A8E76A, #6fae3a);
}
.can-funnel-card small {
    font-size: 11px; font-weight: 700; color: #8d919d;
}
.can-funnel-transition {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; text-align: center; color: #8d919d;
}
.can-funnel-transition::before {
    content: ""; width: 100%; height: 2px; border-radius: 99px;
    background: rgba(17, 18, 23, .09);
}
.can-funnel-transition span {
    font-family: 'Unbounded', sans-serif;
    font-size: 13px; font-weight: 800; color: #111217;
}
.can-funnel-transition small { font-size: 10.5px; font-weight: 700; }
.can-funnel-transition--worst span,
.can-funnel-transition--worst small { color: #5e9a34; }
.can-funnel-transition--worst::before {
    background: #A8E76A;
    box-shadow: 0 0 12px rgba(168,231,106,.5);
}

@media (max-width: 900px) {
    .can-funnel-flow {
        grid-template-columns: 1fr; gap: 10px;
    }
    .can-funnel-transition {
        flex-direction: row; justify-content: center; gap: 6px;
        min-height: 0; padding: 2px 0;
    }
    .can-funnel-transition::before { display: none; }
}

/* Датчик скорости */
.can-gauge-wrap { display: flex; justify-content: center; padding: 8px 0 0; }
.can-gauge {
    width: 168px; height: 84px;
    border-radius: 168px 168px 0 0;
    position: relative; overflow: hidden;
}
.can-gauge-inner {
    position: absolute; inset: 12px 12px 0 12px;
    background: #fff;
    border-radius: 150px 150px 0 0;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    padding-bottom: 2px;
}
.can-gauge-inner b {
    font-family: 'Unbounded', sans-serif;
    font-size: 24px; font-weight: 800; line-height: 1;
}
.can-gauge-inner span { font-size: 11px; color: #8d919d; margin-top: 3px; }
.can-sp-chips { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.can-sp-chip {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 12px;
    background: rgba(17, 18, 23, .03);
    border-radius: 10px;
    font-size: 12px; color: #3d4050;
}
.can-sp-chip b { font-size: 13px; font-weight: 800; color: #111217; }

/* Шкала графика динамики — своя колонка слева (26px, см. .can-line-plot),
   текст прижат вправо к самому графику, белая подложка больше не нужна */
.can-y {
    position: absolute; left: 0; width: 22px;
    transform: translateY(-60%);
    font-size: 10.5px; font-weight: 700; color: #b6bac4;
    text-align: right;
    pointer-events: none; z-index: 1;
}

/* ══════════════════════════════════════
   ИМПОРТ ЛИДОВ (вкладка «Клиенты»)
   ══════════════════════════════════════ */

/* ── Кнопка + выпадающее меню (шаблон / загрузить файл) ── */
.crm-import-menu {
    position: fixed;
    z-index: 1200;
    width: 210px;
    background: #fff;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(17,18,23,.14), 0 0 0 1px rgba(17,18,23,.05);
    padding: 6px;
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}
.crm-import-menu.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.crm-import-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #3d4050;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}
.crm-import-menu-item:hover { background: rgba(17,18,23,.05); color: #111217; }
.crm-import-menu-item svg { flex-shrink: 0; color: #8d919d; }

/* ── Модалка предпросмотра импорта ── */
.crm-import-modal {
    width: 560px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
}
.crm-import-modal .crm-modal-body {
    overflow-y: auto;
}

.crm-import-loading, .crm-import-error {
    padding: 30px 10px;
    text-align: center;
    font-size: 13px;
    color: #8d919d;
}
.crm-import-error { color: #dc2626; }

.crm-import-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 10px;
    text-align: center;
}
.crm-import-done svg { color: #16a34a; margin-bottom: 4px; }
.crm-import-done b { font-size: 15px; color: #111217; }
.crm-import-done span { font-size: 12.5px; color: #8d919d; }

.crm-import-summary {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.crm-import-sum {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(17,18,23,.03);
}
.crm-import-sum b { font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 800; color: #111217; }
.crm-import-sum span { font-size: 11px; color: #8d919d; }
.crm-import-sum--new b { color: #16a34a; }
.crm-import-sum--dup  b { color: #d97706; }
.crm-import-sum--err  b { color: #dc2626; }

.crm-import-section-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tk-muted);
    margin: 14px 0 8px;
}

.crm-import-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}
.crm-import-row {
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(217, 119, 6, .06);
    border: 1px solid rgba(217, 119, 6, .14);
}
.crm-import-row--error {
    background: rgba(220, 38, 38, .05);
    border-color: rgba(220, 38, 38, .14);
}
.crm-import-row-line {
    font-size: 10px;
    font-weight: 800;
    color: #8d919d;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
}
.crm-import-row-cmp {
    display: flex;
    align-items: center;
    gap: 10px;
}
.crm-import-row-cmp svg { flex-shrink: 0; color: #b6bac4; }
.crm-import-row-file, .crm-import-row-existing {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.crm-import-row-file b, .crm-import-row-existing b {
    font-size: 12.5px;
    color: #111217;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-import-row-file span, .crm-import-row-existing span {
    font-size: 11px;
    color: #8d919d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-import-row-msg {
    font-size: 12px;
    color: #b91c1c;
}

/* ══════════════════════════════════════
   ФАЙЛЫ / КОММЕНТАРИИ СДЕЛКИ И КЛИЕНТА
   ══════════════════════════════════════ */

/* Карточка клиента — шире, под новую вкладку */
.crm-side-panel { width: 480px; right: -510px; }

/* Значок клиента в бейдже модалки сделки — раньше был просто текст */
.dm-badge--client { display: inline-flex; align-items: center; gap: 4px; }
.dm-badge--client svg { flex-shrink: 0; }

/* ── Привязка к клиенту (модалка сделки): иконка ↔ карточка + попап поиска ──
   Раньше здесь на всю ширину висела строка поиска — вместо неё компактная
   кнопка-иконка, а поиск/список уже добавленных клиентов уехали в попап,
   который открывается по клику (см. dmClientLinkToggle в manager.php). */
.dm-client-link {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
.dm-client-link-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(17, 18, 23, .1);
    background: rgba(17, 18, 23, .04);
    color: #8d919d;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.dm-client-link-icon:hover {
    background: rgba(168,231,106,.18);
    border-color: rgba(168,231,106,.55);
    color: #2a5c12;
}

/* Карточка привязанного клиента — заменяет иконку, когда клиент найден
   (автоматически по телефону или вручную из попапа) */
.dm-client-link-card {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 5px;
    background: rgba(168, 231, 106, .16);
    border: 1px solid rgba(168, 231, 106, .45);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.dm-client-link-card:hover { background: rgba(168, 231, 106, .28); }
.dm-client-link-card.show { display: flex; animation: dmFadeIn .18s ease forwards; }
.dm-client-link-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: #fff;
    flex-shrink: 0;
}
.dm-client-link-name {
    font-size: 12px; font-weight: 700; color: #1f4d0e;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-client-link-clear {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(17, 18, 23, .1);
    color: #4d7a2e;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .13s, color .13s;
}
.dm-client-link-clear:hover { background: #dc2626; color: #fff; }

/* Попап поиска — заменяет старую всегда-видимую строку: открывается по
   клику на иконку/карточку, поиск + список внутри одной плашки */
.dm-client-link-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 280px;
    max-width: calc(100vw - 60px);
    z-index: 40;
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .08);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(17, 18, 23, .16);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .13s, transform .13s;
    overflow: hidden;
}
.dm-client-link-pop.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dm-client-link-pop-search {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(17, 18, 23, .06);
    color: #8d919d;
}
.dm-client-link-pop-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 12.5px;
    font-family: inherit;
    color: #111217;
    outline: none;
}
.dm-client-link-pop-search input::placeholder { color: #8d919d; }

/* Список внутри попапа — тот же паттерн карточек (.dm-client-pick-item и
   т.д.), но статично лежит в плашке, а не всплывает отдельным слоем */
.dm-client-link-pop .dm-client-pick-list {
    max-height: 220px;
    overflow-y: auto;
}
.dm-client-pick-item {
    padding: 9px 13px;
    cursor: pointer;
    border-bottom: 1px solid rgba(17,18,23,.05);
}
.dm-client-pick-item:last-child { border-bottom: none; }
.dm-client-pick-item:hover { background: rgba(17,18,23,.04); }
.dm-client-pick-name { font-size: 12.5px; font-weight: 700; color: #111217; }
.dm-client-pick-sub  { font-size: 11px; color: #8d919d; margin-top: 1px; }
.dm-client-pick-empty { padding: 12px 13px; font-size: 12px; color: #8d919d; text-align: center; }

/* ── Третья колонка модалки сделки: Файлы / Комментарии — на вкладках, а
   не друг под другом (тот же паттерн, что .tmn-right/.tmn-side-tabs в
   модалке задачи: переключатель-пилюля сверху, видна одна панель). Ширина
   как у .dm-right (320px) — для симметрии между двумя боковыми колонками. */
.dm-far {
    width: 320px;
    flex-shrink: 0;
    overflow: hidden;
    padding: 18px 20px 20px;
    background: #f8f9f6;
    border-left: 1px solid rgba(17, 18, 23, .07);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dm-far-tabs {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: rgba(17, 18, 23, .055);
    border-radius: 999px;
    flex-shrink: 0;
}
.dm-far-tab {
    flex: 1;
    padding: 7px 10px;
    border: none;
    border-radius: 999px;
    background: none;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tk-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all .13s;
}
.dm-far-tab:hover { color: #111217; }
.dm-far-tab.active {
    background: #fff;
    color: #111217;
    box-shadow: 0 2px 8px -3px rgba(17, 18, 23, .25);
}
/* Панели «Файлы»/«Комментарии» — плоский флекс-контейнер без обёрточной
   белой карточки: паттерн 1:1 с .tmn-side-pane в tasks.css (там тоже нет
   промежуточной карточки внутри вкладок «Чат»/«Файлы» — только у «Сводки»,
   где карточка группирует разнородные метрики). Раньше был .dm-card с
   заголовком-лейблом, дублирующим уже активную вкладку-пилюлю сверху —
   выглядело как коробка в коробке. */
.dm-far-pane { display: none; flex: 1; min-height: 0; }
.dm-far-pane.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-right: -14px;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 18, 23, .14) transparent;
}
.dm-far-pane.active::-webkit-scrollbar { width: 4px; }
.dm-far-pane.active::-webkit-scrollbar-track { background: transparent; }
.dm-far-pane.active::-webkit-scrollbar-thumb {
    background: rgba(17, 18, 23, .14);
    border-radius: 99px;
}
.dm-far-pane.active::-webkit-scrollbar-thumb:hover { background: rgba(17, 18, 23, .26); }

/* Комментарии — лента растягивается и скроллится сама, поле ввода прижато
   к низу панели (как .tmn-side-pane-chat в tasks.css) */
#dm-far-pane-comments.active { gap: 10px; overflow-y: hidden; margin-right: 0; padding-right: 0; }
#dm-far-pane-comments .dm-comment-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin: 0 -14px 0 0;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 18, 23, .14) transparent;
}
#dm-far-pane-comments .dm-comment-list::-webkit-scrollbar { width: 4px; }
#dm-far-pane-comments .dm-comment-list::-webkit-scrollbar-track { background: transparent; }
#dm-far-pane-comments .dm-comment-list::-webkit-scrollbar-thumb {
    background: rgba(17, 18, 23, .14);
    border-radius: 99px;
}
#dm-far-pane-comments .dm-comment-list::-webkit-scrollbar-thumb:hover { background: rgba(17, 18, 23, .26); }
#dm-far-pane-comments .dm-comment-compose { flex-shrink: 0; }

/* Карточка клиента: те же блоки, но каждый на своей вкладке («Файлы» и
   «Заметки» отдельно) внутри уже скроллящейся .crm-side-body — без
   промежуточной карточки, тот же плоский паттерн, что и в модалке заявки.
   Правило навешено ТОЛЬКО вместе с .active, иначе ID-селектор по
   специфичности перебивает базовое .crm-side-view{display:none} и блок
   остаётся виден поверх других вкладок (был баг именно из-за этого). */
#client-tab-files.active,
#client-tab-comments.active {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Загрузка файла ── */
.dm-file-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 10px;
    border: 1.5px dashed rgba(17, 18, 23, .16);
    border-radius: 14px;
    color: #8d919d;
    font-size: 11.5px;
    text-align: center;
    cursor: pointer;
    transition: border-color .13s, background .13s;
    margin-bottom: 10px;
}
.dm-file-drop:hover, .dm-file-drop.drag-over {
    border-color: var(--tk-green, #A8E76A);
    background: rgba(168, 231, 106, .08);
}
.dm-file-drop svg { color: #b6bac4; }

/* Оформление файла перед загрузкой — 1:1 паттерн с tmn-file-stage в
   assets/css/pages/tasks.css (tmRenderFileStage), только под свои классы. */
.dm-file-stage { display: none; }
.dm-file-stage.show {
    display: block;
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .1);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
}
.dm-fstage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dm-file-icon {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; letter-spacing: .3px;
    background: rgba(17, 18, 23, .06); color: #8d919d;
}
.dm-fstage-fileinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-fstage-name {
    font-size: 13px; font-weight: 600; color: #111217;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-fstage-size { font-size: 11px; color: #8d919d; }
.dm-fstage-close {
    width: 24px; height: 24px; border-radius: 6px; border: none;
    background: none; color: rgba(17, 18, 23, .3); cursor: pointer;
    font-size: 16px; line-height: 1; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.dm-fstage-close:hover { background: #fff1f1; color: #dc2626; }
.dm-fstage-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: #8d919d;
    margin-bottom: 8px;
}
.dm-fstage-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dm-fkind-chip {
    border: 1px solid rgba(17, 18, 23, .12); background: #fff;
    color: #8d919d; font-size: 12px; font-weight: 600;
    padding: 5px 12px; border-radius: 999px; cursor: pointer;
    transition: all .13s; font-family: inherit;
}
.dm-fkind-chip:hover { border-color: var(--fk-color); color: var(--fk-color); }
.dm-fkind-chip.active {
    background: var(--fk-bg); color: var(--fk-color);
    border-color: var(--fk-color);
}
.dm-fstage-note {
    width: 100%; border: 1px solid rgba(17, 18, 23, .12); border-radius: 10px;
    padding: 8px 12px; font-size: 13px; color: #111217;
    background: rgba(17, 18, 23, .02); outline: none;
    transition: border-color .13s, background .13s;
    margin-bottom: 12px; font-family: inherit; box-sizing: border-box;
}
.dm-fstage-note::placeholder { color: rgba(17, 18, 23, .35); }
.dm-fstage-note:focus { border-color: var(--tk-green, #A8E76A); background: #fff; }
.dm-fstage-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.dm-fstage-skip {
    border: none; background: none; color: #8d919d;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    padding: 7px 10px; border-radius: 8px; transition: all .12s; font-family: inherit;
}
.dm-fstage-skip:hover { background: rgba(17, 18, 23, .05); color: #111217; }
.dm-fstage-attach {
    display: flex; align-items: center; gap: 7px;
    border: none; background: #111217; color: #fff;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    padding: 8px 16px; border-radius: 999px; transition: opacity .13s; font-family: inherit;
}
.dm-fstage-attach:hover { opacity: .8; }

.dm-file-list { display: flex; flex-direction: column; gap: 6px; }
.dm-file-empty { font-size: 11.5px; color: #8d919d; text-align: center; padding: 10px 0; }
.dm-file-item {
    position: relative;
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .07);
    border-radius: 10px;
    padding: 8px 30px 8px 10px;
}
.dm-file-item-link {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #111217;
    text-decoration: none;
}
.dm-file-item-link svg { flex-shrink: 0; color: #8d919d; }
.dm-file-item-name {
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dm-file-item-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; padding-left: 22px; }
.dm-file-item-kind {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(168,231,106,.16);
    color: #3a6b1d;
}
.dm-file-item-note, .dm-file-item-size { font-size: 10.5px; color: #8d919d; }
.dm-file-item-del {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: #b6bac4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.dm-file-item-del:hover { background: rgba(220,38,38,.08); color: #dc2626; }

/* ── Комментарии ── */
.dm-comment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 10px;
}
.dm-comment-empty { font-size: 11.5px; color: #8d919d; text-align: center; padding: 10px 0; }
.dm-comment-item {
    background: #fff;
    border: 1px solid rgba(17, 18, 23, .07);
    border-radius: 10px;
    padding: 8px 11px;
}
.dm-comment-item-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.dm-comment-item-author { font-size: 11.5px; font-weight: 800; color: #111217; }
.dm-comment-item-type {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(17,18,23,.06);
    color: #8d919d;
}
.dm-comment-type--call    { background: rgba(59,130,246,.12); color: #2563eb; }
.dm-comment-type--meeting { background: rgba(168,231,106,.16); color: #3a6b1d; }
.dm-comment-type--email   { background: rgba(217,119,6,.12); color: #b45309; }
.dm-comment-item-date { font-size: 10.5px; color: #b6bac4; margin-left: auto; }
.dm-comment-item-text { font-size: 12px; color: #3d4050; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

.dm-comment-compose { display: flex; flex-direction: column; gap: 6px; }
.dm-comment-type-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dm-comment-type-chips button {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(17,18,23,.1);
    background: #fff;
    font-size: 10.5px;
    font-weight: 700;
    color: #3d4050;
    cursor: pointer;
    font-family: inherit;
}
.dm-comment-type-chips button.active { background: #111217; color: #fff; border-color: #111217; }

/* Строка ввода комментария — 1:1 паттерн с .tmn-compose в tasks.css:
   аватар + растущая пилюля + круглая кнопка отправки */
.dm-compose { display: flex; align-items: flex-end; gap: 8px; }
.dm-comment-ava {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
    overflow: hidden;
}
.dm-comment-ava img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.dm-compose-input {
    flex: 1; border: 1px solid rgba(17, 18, 23, .1); border-radius: 999px;
    min-height: 36px;
    max-height: 96px;
    padding: 9px 16px; font-size: 13px; color: #111217;
    font-family: inherit; outline: none; background: rgba(17, 18, 23, .04);
    transition: border-color .15s;
    resize: none;
    overflow-y: hidden;
    line-height: 1.35;
    box-sizing: border-box;
}
.dm-compose-input.is-overflowing { overflow-y: auto; }
.dm-compose-input::placeholder { color: rgba(17, 18, 23, .35); }
.dm-compose-input:focus { border-color: var(--tk-green, #A8E76A); background: #fff; }
.dm-compose-send {
    width: 36px; height: 36px; border-radius: 50%;
    background: #111217; border: none; color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: opacity .13s;
}
.dm-compose-send:hover { opacity: .7; }

@media (max-width: 1300px) {
    .dm-far { display: none; } /* на узких экранах модалка не тянется до 1220px — прячем 3-ю колонку, чтобы не ломать вёрстку */
}

/* ══════════════════════════════════════
   НАСТРОЙКИ CRM — панель, каталог услуг и источников (api/crm_settings.php).
   Полностью переиспользует разметку и классы карточки клиента
   (.crm-side-header/.crm-side-header-top/.client-drawer-hero/
   .client-drawer-heading/.crm-side-title/.client-source-pill/
   .crm-side-close/.crm-side-tabs/.crm-side-tab/.crm-side-body — все уже
   определены выше в файле) — те же размеры кнопок/шрифтов/отступов, что и у
   панели клиента, один в один, а не подобранные заново на глаз. Единственный
   новый элемент — .crms-header-icon (нейтральная иконка-шестерёнка вместо
   цветного аватара клиента).
   ══════════════════════════════════════ */
.crm-settings-panel {
    position: absolute;
    top: 14px; right: -510px; bottom: 14px;
    width: 480px;
    max-width: calc(100vw - 40px);
    background: #f8f9f6;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 22px 0 0 22px;
    box-shadow: -24px 0 56px rgba(17,18,23,.14), -4px 0 14px rgba(17,18,23,.06);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: right .28s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.crm-settings-panel.open { right: 14px; }

.crms-header-icon {
    width: 46px; height: 46px;
    border-radius: 15px;
    background: rgba(17,18,23,.06);
    display: flex; align-items: center; justify-content: center;
    color: var(--tk-ink, #111217);
    flex-shrink: 0;
}
/* Подзаголовок под названием — у карточки клиента нет аналога (там короткий
   .client-source-pill-бейдж, для целого предложения не подходит), стиль
   близкий по масштабу — небольшой приглушённый текст. */
.crms-sub {
    font-size: 12px; line-height: 1.35;
    color: var(--tk-muted, #8d919d);
    margin-top: 4px;
}

/* Переключатель вкладок «Услуги/Источники» — визуально та же чёрная пилюля
   на светлом треке, что у .crm-tabs/.crm-tab (Воронка/Регулярные/Клиенты/
   Аналитика) в шапке страницы; своя копия классов, т.к. там фон активной
   вкладки красит отдельный скользящий .crm-tabs-indicator с JS-анимацией —
   тут всего 2 пункта, фон проще положить прямо на активную кнопку. */
.crms-tabs {
    display: flex; gap: 2px;
    background: rgba(17,18,23,.05);
    border-radius: 999px;
    padding: 4px;
    width: max-content;
    margin-top: 14px;
}
.crms-tab {
    padding: 7px 14px;
    font-size: 12px; font-weight: 700;
    color: var(--tk-muted, #8d919d);
    background: none; border: none;
    border-radius: 999px;
    cursor: pointer; font-family: inherit;
    white-space: nowrap;
    transition: color .15s, background .15s;
}
.crms-tab:hover:not(.active) { color: var(--tk-ink, #111217); background: rgba(17,18,23,.07); }
.crms-tab.active { color: #fff; font-weight: 800; background: var(--tk-ink, #111217); }

.crms-view { display: none; }
.crms-view.active { display: block; }

.crms-ai-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.crms-ai-row-label {
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--tk-muted, #8d919d);
}
.crms-ai-icon-btn {
    width: 30px; height: 30px;
    border-radius: 9px;
    border: 1px solid rgba(17,18,23,.12);
    background: #fff;
    color: var(--tk-ink, #111217);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: background .13s, border-color .13s;
}
.crms-ai-icon-btn:hover { background: rgba(17,18,23,.05); border-color: rgba(17,18,23,.28); }
.crms-ai-icon-btn:disabled { opacity: .5; cursor: default; }

.crms-suggest-box {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 12px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(17,18,23,.04);
}
.crms-suggest-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px 6px 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(17,18,23,.1);
    font-size: 12px; font-weight: 600; color: #111217;
    cursor: pointer; font-family: inherit;
    transition: border-color .13s, background .13s;
}
.crms-suggest-chip:hover { border-color: var(--tk-ink,#111217); background: rgba(17,18,23,.04); }
.crms-suggest-chip svg { flex-shrink: 0; color: var(--tk-ink, #111217); }
.crms-suggest-empty { font-size: 12px; color: #8d919d; padding: 4px; }

.crms-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.crms-empty { padding: 22px 0; text-align: center; font-size: 12.5px; color: rgba(17,18,23,.35); }

.crms-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 12px 12px 8px;
    border-radius: 14px;
    border: 1px solid rgba(17,18,23,.07);
    background: #fff;
    transition: border-color .13s, box-shadow .13s;
}
.crms-item:hover { border-color: rgba(17,18,23,.2); }
.crms-item.dragging { opacity: .4; }
.crms-item.drag-over { border-color: var(--tk-ink,#111217); box-shadow: 0 0 0 2px rgba(17,18,23,.12); }

.crms-item-handle {
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    color: rgba(17,18,23,.25);
    flex-shrink: 0; cursor: grab;
}
.crms-item-handle svg { pointer-events: none; }
.crms-item-label {
    flex: 1; min-width: 0;
    font-size: 13.5px; font-weight: 600; color: #111217;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crms-item-input {
    flex: 1; min-width: 0;
    border: none; outline: none;
    border-bottom: 1.5px solid var(--tk-ink,#111217);
    font-size: 13.5px; font-weight: 600; color: #111217;
    font-family: inherit; padding: 0 0 2px;
    background: transparent;
}
.crms-item-badge {
    font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    color: #8d919d;
    background: rgba(17,18,23,.05);
    padding: 3px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}
.crms-item-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.crms-item-act {
    width: 26px; height: 26px;
    border-radius: 7px;
    border: none; background: none;
    color: #8d919d;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.crms-item-act:hover { background: rgba(17,18,23,.06); color: #111217; }
.crms-item-act--danger:hover { background: #fff1f1; color: #dc2626; }

.crms-add-row {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 12px 12px 14px;
    border-radius: 14px;
    border: 1.5px dashed rgba(17,18,23,.16);
    background: #fff;
    transition: border-color .13s;
}
.crms-add-row:focus-within { border-color: var(--tk-ink,#111217); }
.crms-add-input {
    flex: 1; min-width: 0;
    border: none; outline: none;
    font-size: 13.5px; color: #111217; font-family: inherit;
    background: transparent;
}
.crms-add-btn {
    width: 28px; height: 28px;
    border-radius: 8px;
    border: none; background: #111217; color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: opacity .13s;
}
.crms-add-btn:hover { opacity: .8; }

/* Строки задач во вкладке «Задачи» карточки клиента переиспользуют тот же
   компонент, что и «Заявки» рядом (.client-req-card и т.п. — уже определены
   выше), просто со статусом задачи вместо этапа сделки. Своих стилей не
   нужно. */