/* CRM. Дизайн-код сайта: мягкие карточки, белые плитки внутри, Benzin в заголовках и цифрах, пилюли, реклама — стекло.
   Только переменные сайта, работает в обеих темах. Цвета разделов воронки и категорий одни на всех экранах. */
:root {
  --crm-new: #a1a1a6; --crm-wait: #2f7df6; --crm-work: #0aa5a8; --crm-done: #1f9d55; --crm-push: #c98a00; --crm-later: #8b5cf6;
  --crm-rko: #ff8a3d; --crm-dk: #4d8dff; --crm-kk: #b47cff; --crm-mfo: #1fc7a6;
}
[data-theme="dark"] { --crm-new: #8e8e93; --crm-wait: #5b9bff; --crm-work: #2cc7ca; --crm-done: #3ccf64; --crm-push: #f0b429; --crm-later: #a78bfa; }

/* ---------- шапка и верхняя полоса ---------- */
.crm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.crm-head > :first-child { flex: 1; min-width: 0; }
.crm-head > .btn { flex: none; margin-top: 6px; }
.crm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.crm-source { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crm-source-i { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft); color: var(--link); }
.crm-source-i svg { width: 16px; height: 16px; }
.crm-source-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.crm-source-t b { font-weight: 600; }
.crm-source-t small { color: var(--muted); font-size: 12.5px; }
.crm-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 100%; min-width: 0; }
.crm-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.crm-seg::-webkit-scrollbar { display: none; }
.crm-seg button { flex: none; white-space: nowrap; }
.crm-range { display: flex; align-items: center; gap: 8px; }
.crm-range .input { width: 150px; }
.crm-date { font-variant-numeric: tabular-nums; }
.crm-viewing { display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin-bottom: 20px; border-radius: var(--radius-md); background: var(--bg-soft); box-shadow: inset 0 0 0 1.5px var(--crm-push); font-size: 14px; }
.crm-viewing svg { flex: none; width: 16px; height: 16px; color: var(--crm-push); }
.crm-viewing span { flex: 1; min-width: 0; }
.crm-viewing b { font-weight: 600; }

/* ---------- плитки с цифрами ---------- */
.crm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.crm-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.crm-kpis .stat { min-width: 0; padding: 16px 18px; }
.crm-kpis .val { font-size: 24px; overflow-wrap: anywhere; }
.crm-kpis.three .val { font-size: 19px; }
.crm-kpis small { display: block; line-height: 1.35; }
.stat .val.bad { color: var(--danger); }
.card .crm-kpis .kpi-ic { background: var(--bg-soft); }
.modal .kpi-ic { background: var(--bg); }

/* ---------- плашка «как работает» ---------- */
.crm-how { background: var(--bg-soft); border-radius: var(--radius-md); margin-bottom: 16px; }
.card .crm-how { background: var(--bg); }
.crm-how summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.crm-how summary::-webkit-details-marker { display: none; }
.crm-how-q { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); font-family: var(--font-display); font-size: 13px; font-synthesis: none; color: var(--link); }
.card .crm-how-q { background: var(--bg-soft); }
.crm-how-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.crm-how-t b { font-weight: 600; }
.crm-how-t small { color: var(--muted); font-size: 13px; }
.crm-how-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--link); font-size: 13.5px; font-weight: 500; }
.crm-how-btn svg { width: 14px; height: 14px; transition: transform .15s; }
details[open] > summary .crm-how-btn svg { transform: rotate(90deg); }
.crm-how .c, .crm-how[open] .o, .crm-alert .c, .crm-alert[open] .o { display: none; }
.crm-how[open] .c, .crm-alert[open] .c { display: inline; }
.crm-how-body { padding: 2px 18px 18px; font-size: 14px; }
.crm-how-body > p { margin: 14px 0; color: var(--muted); }
.crm-how-body > p.crm-how-l { margin: 18px 0 10px; color: var(--text); font-weight: 600; }
.crm-how-body > p.crm-how-tip { margin: 16px 0 0; }
.crm-how-tip b { color: var(--text); font-weight: 600; }
.crm-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.crm-flow.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.crm-flow li { background: var(--bg); border-radius: var(--radius-sm); padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; }
.crm-flow i { width: 8px; height: 8px; border-radius: 50%; background: var(--s); }
.crm-flow b { font-weight: 600; font-size: 13.5px; }
.crm-flow small { grid-column: 2; color: var(--muted); font-size: 12.5px; }
.crm-steps { list-style: none; margin: 0; padding: 0; }
.crm-steps li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.crm-steps li:last-child { padding-bottom: 0; }
.crm-steps li:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 28px; bottom: 2px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(239, 49, 36, .5), var(--line-strong)); }
.crm-steps li > span { flex: none; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #ff8a3d, #ef3124 60%, #ff4682); box-shadow: 0 6px 14px -6px rgba(239, 49, 36, .75); display: grid; place-items: center; font-family: var(--font-display); font-size: 11.5px; font-weight: 600; font-synthesis: none; }
.crm-steps b { font-weight: 600; }
.crm-steps p { margin: 2px 0 0; color: var(--muted); }
.crm-steps p b { color: var(--text); font-weight: 500; }

/* ---------- реклама тарифа выше ---------- */
.crm-ad { cursor: pointer; margin-bottom: 20px; }
.crm-ad.elite-ad { cursor: default; }
.crm-ad .pro-ad-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.crm-ad .pro-ad-badge { flex: none; margin: 0; padding: 9px; border-radius: 50%; }
.crm-ad .pro-ad-badge svg { width: 16px; height: 16px; }
.crm-ad:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crm-ad:hover .pro-ad-btn { background: rgba(255, 255, 255, .72); }
.crm-ad:hover .pro-ad-btn svg { transform: translateX(2px); }

/* боковая панель */
.crm-panel-bg { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .45); display: flex; justify-content: flex-end; animation: crm-fade .2s ease; }
.crm-panel { position: relative; width: min(520px, 100%); height: 100%; background: var(--bg); display: flex; flex-direction: column; animation: crm-slide .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes crm-fade { from { opacity: 0; } }
@keyframes crm-slide { from { transform: translateX(40px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .crm-panel-bg, .crm-panel { animation: none; } }
.crm-panel-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.crm-panel-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .7); color: #2b1216; }
.crm-panel-x:hover { background: #fff; }
.crm-panel-hero { position: relative; isolation: isolate; overflow: hidden; padding: 28px 28px 24px; background: linear-gradient(115deg, #ffb3a6 0%, #ff9fb6 40%, #ffc0a0 75%, #ffd3c4 100%); color: #2b1216; }
.crm-panel-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .22) 60%, rgba(255, 255, 255, .32)); }
.crm-panel-tag { gap: 5px; margin-bottom: 14px; }
.crm-panel-hero h2 { margin: 0 44px 10px 0; font-size: 26px; line-height: 1.15; color: #2b1216; text-wrap: balance; }
.crm-panel-hero em { font-style: normal; }
.crm-panel-hero p { margin: 0; font-size: 14.5px; line-height: 1.45; color: rgba(43, 18, 22, .72); }
.crm-panel-body { padding: 8px 28px 24px; }
.crm-panel-foot { flex: none; padding: 14px 28px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.crm-panel-foot .btn { display: flex; justify-content: center; }
.crm-ps { padding-top: 22px; }
.crm-ps-k { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
.crm-ps h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 19px; line-height: 1.2; font-weight: 600; font-synthesis: none; letter-spacing: -.01em; }
.crm-ps-lead { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.crm-ps-lead b { color: var(--text); font-weight: 600; }
.crm-ps code { font-family: var(--mono); font-size: .92em; background: var(--chip); border-radius: 5px; padding: 1px 5px; }
.crm-ps-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.crm-ps-f { background: var(--bg-soft); border-radius: var(--radius-sm); padding: 12px 14px; min-width: 0; transition: transform .3s cubic-bezier(.22, .8, .2, 1); }
.crm-ps-f:hover { transform: translateY(-2px); }
.crm-ps-f .kpi-ic { margin-bottom: 8px; color: var(--link); }
.crm-ps-f .kpi-ic svg { width: 14px; height: 14px; }
.crm-ps-f b { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.crm-ps-f p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.crm-ps-cmp { font-size: 13.5px; }
.crm-ps-cmp > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.crm-ps-cmp > div:last-child { border-bottom: 0; }
.crm-ps-cmp b { font-weight: 600; }
.crm-ps-cmp .ok { color: var(--ok); }
.crm-ps-cmp svg { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
.crm-tg { background: var(--bg-soft); border-radius: var(--radius-md); overflow: hidden; }
.crm-tg-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.crm-tg-h > span { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #37bbfe, #1d9bdc); color: #fff; }
.crm-tg-h svg { width: 14px; height: 14px; }
.crm-tg-h b { flex: 1; font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.crm-tg-h small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.crm-tg-h em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--chip); border-radius: var(--pill); padding: 2px 8px; }
.crm-tg-b { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.crm-tg-m { align-self: flex-start; max-width: 88%; padding: 8px 12px; border-radius: 14px; background: var(--bg); font-size: 13px; line-height: 1.4; white-space: pre-line; }
.crm-tg-m b { font-weight: 600; }
.crm-tg-m.me { align-self: flex-end; background: linear-gradient(135deg, #37bbfe, #1d9bdc); color: #fff; }
.crm-tg-kb { display: flex; gap: 4px; margin-top: 8px; }
.crm-tg-kb span { flex: 1; text-align: center; padding: 6px 4px; border-radius: 8px; background: var(--bg-soft); font-size: 12px; font-weight: 500; }

/* ---------- воронка и список ---------- */
.crm-main { padding: 20px; }
.crm-tab-note { margin: 12px 2px 14px; font-size: 13.5px; color: var(--muted); }
.crm-tab-note b { color: var(--text); font-weight: 600; }
.crm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.crm-search { display: block; max-width: 380px; margin-bottom: 14px; }
.crm-search .input { width: 100%; }
.crm-toolbar .crm-search { flex: 1 1 240px; margin: 0; }
.crm-filters { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.crm-csel { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; max-width: 100%; border-radius: var(--pill); background: var(--bg); font-size: 13.5px; cursor: pointer; }
.crm-csel > span { color: var(--muted); flex: none; }
.crm-csel.on { box-shadow: inset 0 0 0 1.5px var(--text); }
.crm-csel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 500; min-width: 0; max-width: 170px; padding-right: 2px; outline: none; cursor: pointer; }
.crm-csel select option { background: var(--bg); color: var(--text); font-weight: 400; }
.crm-csel svg { flex: none; width: 13px; height: 13px; color: var(--muted); transform: rotate(90deg); pointer-events: none; }
.crm-list { display: grid; gap: 6px; }
.crm-list-h, .crm-row { display: grid; grid-template-columns: 22px 34px minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) 64px 148px; gap: 12px; align-items: center; }
.crm-list-h { padding: 0 14px 4px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.crm-row { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--bg); transition: transform .25s cubic-bezier(.22, .8, .2, 1), box-shadow .25s; }
.crm-row:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -20px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line); }
.crm-row.sel { box-shadow: inset 0 0 0 1.5px var(--accent); }
.crm-ck { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.crm-ava { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: #fff; background: linear-gradient(135deg, hsl(var(--h) 72% 60%), hsl(calc(var(--h) + 36) 70% 46%)); box-shadow: 0 6px 14px -8px hsl(var(--h) 70% 40%); }
.crm-who { min-width: 0; line-height: 1.3; }
.crm-who b { font-weight: 600; overflow-wrap: anywhere; }
.crm-who small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-link { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.crm-link:hover b { color: var(--link); }
.crm-warn { color: var(--warn); }
.crm-stp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.crm-stp > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--s); }
.crm-stp.soft { color: var(--muted); }
.crm-stp.due, .crm-stp.warn { color: var(--warn); }
.crm-stp svg { width: 13px; height: 13px; }
.crm-row-st { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.crm-row-st small { color: var(--muted); font-size: 12px; margin-left: 14px; }
.crm-row-t { font-size: 13px; white-space: nowrap; }
.crm-mv { width: 100%; padding: 7px 10px; font-size: 13px; background-color: var(--bg-soft); border-color: transparent; }
.crm-bulk { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--bg); box-shadow: 0 8px 28px rgba(0, 0, 0, .14), inset 0 0 0 1px var(--line); font-size: 14px; }
.crm-bulk b { font-weight: 600; }
.crm-bulk .btn svg { width: 14px; height: 14px; }
.crm-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--pill); background: var(--bg-soft); font-weight: 500; font-size: 13.5px; transition: box-shadow .15s; }
.crm-chip:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.crm-chip i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--s); }
.crm-chip.on { background: var(--bg); box-shadow: inset 0 0 0 2px var(--s); }
.crm-sec .crm-chip { background: var(--bg); }
.crm-move { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-blank { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 34px 16px; border-radius: var(--radius-md); background: var(--bg); text-align: center; color: var(--muted); }
.crm-blank svg { width: 26px; height: 26px; margin-bottom: 6px; }
.crm-blank b { color: var(--text); font-weight: 600; }
.crm-empty { text-align: center; color: var(--muted); padding: 22px 12px; margin: 0; }
.crm-foot { margin: 12px 2px 0; }
.crm-foot b { color: var(--text); font-weight: 600; }
.crm-hint-top, .crm-sec .crm-hint-top { margin: 0 0 14px; }
.crm-card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.crm-card-m { font-size: 13px; }

/* плашка «ждут решения» */
.crm-alert { background: var(--bg-soft); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--crm-push); margin-bottom: 20px; }
.crm-alert summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.crm-alert summary::-webkit-details-marker { display: none; }
.crm-alert-i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--crm-push); }
.crm-alert-i svg { width: 16px; height: 16px; }
.crm-alert-l { padding: 0 18px 16px; }
.crm-alert-l > .hint { margin: 0 0 10px; }
.crm-alert-l .hint b { color: var(--text); font-weight: 600; }
.crm-str { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border-radius: var(--radius-sm); background: var(--bg); flex-wrap: wrap; }
.crm-str-b { flex: 1 1 220px; min-width: 0; }
.crm-str-b b { font-weight: 600; }
.crm-str-b small { display: block; color: var(--muted); font-size: 12.5px; }
.crm-str-a { display: flex; align-items: center; gap: 4px; }
.crm-str-a svg { width: 14px; height: 14px; }

/* ---------- значки банков: кольцо — оставил заявку, зелёный ободок — сделал, красный — отказ ---------- */
.crm-banks { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.crm-banks > i { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 600; }
.crm-bank { flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; background: var(--chip); font-size: 12px; }
.crm-bank.big { width: 38px; height: 38px; font-size: 15px; }
.crm-bank img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-bank b { font-weight: 600; color: var(--muted); }
.crm-bank.applied { opacity: .6; box-shadow: 0 0 0 1.5px var(--line-strong); }
.crm-bank.done { box-shadow: 0 0 0 2px var(--ok); }
.crm-bank.no { opacity: .55; box-shadow: 0 0 0 2px var(--danger); }

/* ---------- таблицы: белая плитка на мягкой карточке ---------- */
.crm-wrap { background: var(--bg); border-radius: var(--radius-md); overflow-x: auto; }
.crm-table { width: 100%; border-collapse: collapse; }
.crm-table th { padding: 12px 12px 8px; text-align: left; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.crm-table td { vertical-align: middle; padding: 8px 12px; border-top: 1px solid var(--line); }
.crm-table .num { text-align: right; }
.crm-table b { font-weight: 600; }
.crm-table .input { width: 100%; min-width: 0; padding: 8px 10px; font-size: 14px; background-color: var(--bg-soft); border-color: transparent; }
.crm-table .input:hover { border-color: var(--line-strong); }
.crm-new td { background: var(--frost); }
.crm-leads { min-width: 860px; table-layout: fixed; }
.crm-leads th:nth-child(1) { width: 19%; }
.crm-leads th:nth-child(2) { width: 25%; }
.crm-leads th:nth-child(3) { width: 15%; }
.crm-leads th:nth-child(4) { width: 19%; }
.crm-leads th:nth-child(5) { width: 15%; }
.crm-leads th:nth-child(6) { width: 7%; }
.crm-sel { text-overflow: ellipsis; }
.crm-st { font-weight: 600; color: var(--s); }
.crm-st option { color: var(--text); font-weight: 400; }
.crm-add { padding: 8px; width: 36px; height: 36px; }
.crm-add span { display: none; }
.crm-after { font-size: 13px; }
.crm-done { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 13.5px; text-align: left; }
.crm-done:hover { background: var(--bg-soft); }
.crm-open { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 12.5px; }
.crm-open svg { width: 13px; height: 13px; }
.crm-pill { display: inline-block; padding: 3px 10px; border-radius: var(--pill); font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--bg-soft); color: var(--muted); }
.crm-pill.pos { color: var(--ok); }
.crm-pill.neg { color: var(--danger); }
.crm-pill.warn { color: var(--warn); }
.crm-th { color: inherit; font: inherit; font-weight: 500; white-space: nowrap; }
.crm-th.on { color: var(--text); font-weight: 600; }
.crm-chan { min-width: 900px; }
.crm-chname { display: flex; flex-direction: column; }
.crm-chname small { color: var(--muted); font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.crm-chname a { color: var(--link); }
.crm-copy { padding: 2px; color: var(--muted); display: inline-flex; flex: none; }
.crm-copy:hover { color: var(--text); }
.crm-copy svg { width: 13px; height: 13px; }

/* ---------- карточка человека ---------- */
.crm-card-sub { margin: -6px 0 16px; color: var(--muted); font-size: 14px; }
.crm-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: -4px 0 16px; }
.crm-card-top .crm-ava { width: 44px; height: 44px; font-size: 18px; }
.crm-card-idb { min-width: 0; flex: 1 1 200px; }
.crm-card-id { display: flex; align-items: center; gap: 4px; font-weight: 500; font-variant-numeric: tabular-nums; }
.crm-card-from { font-size: 13px; }
.crm-card-st { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13.5px; }
.crm-card-st .muted b { color: var(--text); font-weight: 600; }
.crm-card-st + .crm-kpis { margin-top: 14px; }
#crm-ocard > .crm-card-st { margin: -6px 0 0; }
.crm-card-empty { margin: 0 0 16px; }
.crm-sec { margin-bottom: 12px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--bg-soft); }
.crm-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.crm-sec .kpi-ic { flex: none; color: var(--link); }
.crm-sec .kpi-ic svg { width: 14px; height: 14px; }
.crm-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 13px; }
.crm-sec-h h4 { margin: 0; }
.crm-sec .input { width: 100%; background-color: var(--bg); }
.crm-sec textarea { resize: vertical; }
.crm-sec .hint { margin: 10px 0 0; }
.crm-sec .field { margin-bottom: 10px; }
.crm-cmt-act { margin-top: 8px; }
.crm-cats { margin-bottom: 10px; flex-wrap: wrap; }
.crm-sec .crm-search { margin-bottom: 8px; max-width: none; }
.crm-ofl { max-height: 290px; overflow-y: auto; border-radius: var(--radius-sm); background: var(--bg); }
.crm-ofr { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
.crm-ofr:last-child { border-bottom: 0; }
.crm-ofr:hover { background: var(--frost); }
.crm-ofr.off { opacity: .55; cursor: not-allowed; }
.crm-ofr-ck { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: transparent; }
.crm-ofr-ck svg { width: 12px; height: 12px; }
.crm-ofr[aria-pressed="true"] .crm-ofr-ck { background: var(--accent); border-color: var(--accent); color: #fff; }
.crm-ofr-n { flex: 1; min-width: 0; font-weight: 500; }
.crm-ofr-n em { display: block; font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.crm-ofr-n u { text-decoration: none; color: var(--ok); }
.crm-ofr-n u.was { color: var(--warn); }
.crm-ofr-n u.nl { color: var(--danger); }
.crm-ofr-a { flex: none; font-weight: 600; white-space: nowrap; }
.crm-actbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.crm-actbar b { color: var(--text); font-weight: 600; }
.crm-actbar .btn svg { width: 14px; height: 14px; }
.crm-made { margin-top: 12px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius-sm); }
.crm-made-h { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ok); margin-bottom: 6px; }
.crm-made-h svg { flex: none; width: 14px; height: 14px; }
.crm-mlink { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 8px; border-radius: var(--radius-sm); text-align: left; }
.crm-mlink:hover { background: var(--frost); }
.crm-mlink-b { flex: 1; min-width: 0; }
.crm-mlink-b b { display: block; font-weight: 600; font-size: 13.5px; }
.crm-mlink-b small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.crm-mlink code, .crm-isr code, .crm-prev code { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-mlink-c { flex: none; color: var(--muted); display: inline-flex; }
.crm-mlink-c svg { width: 14px; height: 14px; }
.crm-miss { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--warn); }
.crm-miss svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.crm-iss { margin-top: 12px; font-size: 13.5px; }
.crm-iss > summary { cursor: pointer; color: var(--muted); font-weight: 500; padding: 4px 0; }
.crm-iss > summary b { color: var(--text); font-weight: 600; }
.crm-iss .crm-mlink { background: var(--bg); margin-top: 4px; }
.crm-isr { display: flex; align-items: center; gap: 6px; padding: 8px 10px; margin-top: 4px; border-radius: var(--radius-sm); background: var(--bg); }
.crm-isr > div, .crm-isr > code { flex: 1; min-width: 0; }
.crm-isr b { font-weight: 600; }
.crm-wsum { margin-bottom: 12px; font-size: 13.5px; color: var(--muted); }
.crm-wsum b { color: var(--text); font-weight: 600; }
.crm-wbar { display: flex; gap: 2px; height: 5px; margin-top: 6px; border-radius: var(--pill); overflow: hidden; background: var(--chip); }
.crm-wbar i { display: block; }
.crm-wbar .d { background: var(--ok); }
.crm-wbar .p { background: var(--crm-work); }
.crm-wbar .n { background: var(--danger); }
.crm-lane { margin-bottom: 12px; }
.crm-lane-h { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.crm-lane-h svg { width: 14px; height: 14px; }
.crm-lane-h b { font-weight: 600; color: var(--text); }
.crm-lane-h small { font-size: 12px; }
.crm-lane-h em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--text); }
.crm-lane.done .crm-lane-h svg { color: var(--ok); }
.crm-lane.no > summary { cursor: pointer; list-style: none; }
.crm-lane.no > summary::-webkit-details-marker { display: none; }
.crm-app { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 6px; flex-wrap: wrap; }
.crm-app.late { box-shadow: inset 0 0 0 1.5px var(--crm-push); }
.crm-app-b { flex: 1 1 200px; min-width: 0; }
.crm-app-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.crm-app-t b { font-weight: 600; font-size: 14px; }
.crm-app small { color: var(--muted); font-size: 12.5px; }
.crm-kind { font-size: 11px; font-weight: 600; color: var(--k); }
.crm-app-a { font-family: var(--font-display); font-size: 14px; font-weight: 600; font-synthesis: none; white-space: nowrap; }
.crm-app-a.off { color: var(--muted); text-decoration: line-through; }
.crm-app-a.muted { font-family: inherit; font-size: 13px; }
.crm-app-c { display: flex; gap: 3px; align-items: center; margin-left: auto; }
.crm-app-c svg { width: 14px; height: 14px; }
.crm-tmr { margin-top: 6px; }
.crm-tmr > span { display: block; height: 4px; border-radius: var(--pill); background: var(--chip); overflow: hidden; }
.crm-tmr > span i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8a3d, #ef3124 60%, #ff4682); box-shadow: 0 0 8px rgba(239, 49, 36, .55); }
.crm-tmr small { display: block; margin-top: 2px; }
.crm-tmr.over small { color: var(--danger); }
.crm-ppst { padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--pill); background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.crm-ppst.hold { color: var(--warn); }
.crm-ppst.paid { color: var(--ok); }
.crm-ppst.no { color: var(--danger); }
.crm-ppst option { color: var(--text); }
.crm-bonus { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 6px; border-radius: var(--radius-sm); background: var(--bg); font-size: 13px; }
.crm-bonus svg { flex: none; width: 14px; height: 14px; color: var(--ok); }
.crm-bonus span { flex: 1; min-width: 0; }
.crm-bonus b { font-weight: 600; }
.crm-bonus em { font-style: normal; font-weight: 600; color: var(--ok); white-space: nowrap; }
.crm-bonus.off { opacity: .6; }
.crm-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 11px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; }
.crm-more:hover { color: var(--text); border-color: var(--steel); }
.crm-more svg { width: 14px; height: 14px; }
.crm-form { background: var(--bg); border-radius: var(--radius-sm); padding: 14px; margin-top: 10px; }
.crm-form .input { width: 100%; background-color: var(--bg-soft); }
.crm-form .field { margin-bottom: 10px; }
.crm-form-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.crm-del { display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; color: var(--danger); font-size: 14px; }
.crm-del svg { width: 14px; height: 14px; }
.crm-kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px 12px; font-size: 14px; align-items: baseline; }
.crm-kv > span:nth-child(odd) { color: var(--muted); font-size: 13px; }
.crm-kv small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }

/* ---------- формы добавления каналов ---------- */
.crm-buy-sub { margin: -6px 0 14px; }
.crm-buy { background: var(--bg-soft); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; }
.crm-buy-h { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.crm-buy-g { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; }
.crm-buy-g .input { width: 100%; background-color: var(--bg); }
.crm-total { display: flex; justify-content: space-between; margin: 14px 0; color: var(--muted); }
.crm-total b { color: var(--text); font-family: var(--font-display); font-weight: 600; font-synthesis: none; }

/* ---------- боты ---------- */
.crm-owner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 18px; margin-bottom: 16px; border-radius: var(--radius-md); background: var(--bg); }
.crm-owner.need { box-shadow: inset 0 0 0 1.5px var(--crm-push); }
.crm-owner-t { flex: 1 1 260px; min-width: 0; line-height: 1.35; }
.crm-owner-t b { display: block; font-weight: 600; }
.crm-owner-t small { color: var(--muted); font-size: 13px; }
.crm-owner-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-owner-f .input { width: 200px; background-color: var(--bg-soft); }
.crm-owner-f .form-error { flex-basis: 100%; }
.crm-owner-f .form-error:empty { display: none; }
.crm-owner-v { font-family: var(--font-display); font-size: 15px; font-weight: 600; font-synthesis: none; }
.crm-botl { display: grid; gap: 8px; margin-bottom: 10px; }
.crm-botc { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--bg); }
.crm-botc-i { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft); color: var(--muted); }
.crm-botc.is-ok .crm-botc-i { background: linear-gradient(135deg, #37bbfe, #1d9bdc); color: #fff; box-shadow: 0 8px 20px -8px rgba(42, 171, 238, .9); }
.crm-botc-i svg { width: 16px; height: 16px; }
.crm-botc-b { flex: 1 1 240px; min-width: 0; font-size: 13.5px; }
.crm-botc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.crm-botc-h b { font-weight: 600; font-size: 15px; }
.crm-botc-s { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.crm-botc-s i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.crm-botc.is-ok .crm-botc-s { color: var(--ok); }
.crm-botc.is-ok .crm-botc-s i { background: var(--ok); animation: crm-pulse 2s ease-out infinite; }
.crm-botc.is-bad .crm-botc-s { color: var(--danger); }
.crm-botc.is-bad .crm-botc-s i { background: var(--danger); }
.crm-botc.is-wait .crm-botc-s { color: var(--warn); }
.crm-botc.is-wait .crm-botc-s i { background: var(--crm-push); }
.crm-botc-b small { color: var(--muted); font-size: 12.5px; }
.crm-botc-b p { margin: 6px 0 0; color: var(--muted); }
.crm-botc-b p b { color: var(--text); font-weight: 600; }
.crm-botc-b .crm-miss { color: var(--warn); }
.crm-botc-q .btn { margin-left: 4px; }
.crm-botc-a { display: flex; align-items: center; gap: 4px; }
.crm-botc-a svg { width: 14px; height: 14px; }
.crm-bots-none { margin: 0 2px 10px; }
.crm-b-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; }
.crm-b-note svg { flex: none; width: 13px; height: 13px; margin-top: 3px; }

/* ---------- ссылки ---------- */
.crm-otools { margin-bottom: 16px; }
.crm-ocats { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.crm-ocats::-webkit-scrollbar { display: none; }
.crm-ocats button { flex: none; white-space: nowrap; }
.crm-ocats b { font-weight: 600; font-size: 12px; color: var(--muted); }
.crm-arch { font-size: 14px; cursor: pointer; }
.crm-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.crm-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); }
.crm-dot.ok { color: var(--ok); }
.crm-dot.ok::before { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.crm-dot.low { color: var(--warn); }
.crm-dot.low::before { background: var(--crm-push); box-shadow: none; }
.crm-ocat { padding: 20px; }
.crm-ocat-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.crm-ocat-h > i { width: 10px; height: 10px; border-radius: 50%; background: var(--k); }
.crm-ogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.crm-otile { display: flex; flex-direction: column; gap: 12px; padding: 14px; min-width: 0; border-radius: var(--radius-md); background: var(--bg); text-align: left; transition: transform .3s cubic-bezier(.22, .8, .2, 1), box-shadow .3s; }
.crm-otile:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -26px rgba(239, 49, 36, .5), inset 0 0 0 1px var(--line); }
.crm-otile.arch { opacity: .6; }
.crm-otile-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crm-otile-n { min-width: 0; line-height: 1.25; }
.crm-otile-n b { display: block; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-otile-n small { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-otile-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crm-otile-a { font-family: var(--font-display); font-size: 17px; font-weight: 600; font-synthesis: none; white-space: nowrap; }
.crm-srcs { display: grid; gap: 4px; }
.crm-src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg); text-align: left; font-size: 14px; transition: box-shadow .15s; }
.crm-src:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.crm-src > i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.crm-src.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.crm-src.on > i { border: 4px solid var(--accent); }
.crm-src b { font-weight: 600; flex: 1 1 110px; min-width: 0; }
.crm-src em { font-style: normal; font-weight: 600; white-space: nowrap; }
.crm-src small { flex-basis: 100%; color: var(--muted); font-size: 12px; margin-left: 22px; }
.crm-src .crm-pill { background: var(--bg-soft); }
.crm-src.off { color: var(--muted); }
.crm-src-p { display: inline-flex; align-items: center; gap: 4px; color: var(--link); font-size: 13px; font-weight: 500; }
.crm-src-p svg { width: 12px; height: 12px; }
.crm-src.conn:hover { box-shadow: none; }
.crm-src.conn .input { flex: 0 1 120px; width: 120px; padding: 6px 10px; background-color: var(--bg-soft); }
.crm-modes { margin-bottom: 4px; flex-wrap: wrap; }
.crm-tpl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.crm-prev { margin-top: 12px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius-sm); font-size: 12.5px; }
.crm-prev code { margin-top: 4px; white-space: normal; overflow-wrap: anywhere; color: var(--text); }
.crm-prev mark { background: var(--accent-soft); color: var(--link); font-weight: 600; border-radius: 4px; padding: 0 3px; }
.crm-gen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; }
.crm-gen .input { width: 90px; padding: 6px 10px; }
.crm-gen small { flex-basis: 100%; font-size: 12.5px; }
.crm-ofoot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 2px 2px; }
.crm-ofoot .hint { flex: 1 1 240px; margin: 0; }

/* ---------- админка ---------- */
.crm-a-log summary { cursor: pointer; margin: 0; }
.crm-a-log[open] summary { margin-bottom: 12px; }
.crm-log { display: grid; grid-template-columns: 120px 150px minmax(0, 1fr); gap: 10px; padding: 8px 12px; margin-bottom: 4px; border-radius: var(--radius-sm); background: var(--bg); font-size: 13px; }
.crm-log b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-of-form { display: grid; grid-template-columns: 180px minmax(0, 1fr) 140px auto; gap: 12px; align-items: end; margin-bottom: 14px; }
.crm-of-form .field { margin: 0; }
.crm-of-form .input { width: 100%; background-color: var(--bg); }
.crm-of-form .form-error { grid-column: 1 / -1; }
.crm-of-form .form-error:empty { display: none; }
.crm-of-group { margin-top: 16px; }
.crm-of-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 600; font-size: 14px; }
.crm-of-h i { width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.crm-of-h .muted { font-weight: 500; }
.crm-of-list { display: grid; gap: 4px; }
.crm-of-r { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 14px; border-radius: var(--radius-sm); background: var(--bg); font-size: 14px; }
.crm-of-r > span { flex: 1; min-width: 0; }
.crm-of-r em { font-style: normal; font-weight: 600; white-space: nowrap; }
.crm-of-r svg { width: 14px; height: 14px; }
.crm-ublock { margin-bottom: 14px; }
.crm-ustat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.crm-people small { font-size: 12.5px; }

/* ---------- приёмы лендинга: путь из светящихся кружков, сумма с градиентом, стекло, бегущие цифры, проявление ---------- */
:root { --crm-all: #1d1d1f; }
[data-theme="dark"] { --crm-all: #f2f2f2; }
@keyframes crm-rise { from { opacity: 0; transform: translateY(14px); } }
.crm-rise { animation: crm-rise .6s cubic-bezier(.22, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * 80ms); }
@keyframes crm-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); } 70% { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); } }
.crm-grad { background: linear-gradient(90deg, #ff8a3d, #ef3124 55%, #ff4682); -webkit-background-clip: text; background-clip: text; color: transparent; }
.crm-grad.green { background-image: linear-gradient(90deg, #12a150, #0aa5a8); }
[data-theme="dark"] .crm-grad.green { background-image: linear-gradient(90deg, #3ccf64, #2cc7ca); }
.stat .val.crm-grad { color: transparent; }
.crm-cta { border: 0; color: #fff; background: linear-gradient(100deg, #ff8a3d, #ef3124 55%, #ff4682); box-shadow: 0 14px 28px -14px rgba(239, 49, 36, .85); transition: transform .25s cubic-bezier(.22, .8, .2, 1), box-shadow .25s; }
.crm-cta:hover { color: #fff; background: linear-gradient(100deg, #ff8a3d, #ef3124 55%, #ff4682); transform: translateY(-1px); box-shadow: 0 18px 32px -14px rgba(239, 49, 36, .95); }
.crm-cta svg { width: 16px; height: 16px; }

/* главный блок страницы */
.crm-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 20px; padding: 24px; margin-bottom: 20px; border-radius: var(--radius); color: #2b1216; box-shadow: 0 26px 50px -34px rgba(222, 40, 30, .55); }
.crm-hero.green { color: #0f2b1a; box-shadow: 0 26px 50px -34px rgba(20, 150, 90, .55); }
[data-theme="dark"] .crm-hero { color: #fbeceb; }
[data-theme="dark"] .crm-hero.green { color: #e6f6ec; }
.crm-hero-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.crm-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 6px 13px 6px 11px; border-radius: var(--pill); font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); }
[data-theme="dark"] .crm-kicker { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.crm-kicker::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #34c759; animation: crm-pulse 2s ease-out infinite; }
.crm-kicker.warn::before { background: #ff9f0a; animation: none; box-shadow: 0 0 0 4px rgba(255, 159, 10, .2); }
a.crm-kicker:hover { background: rgba(255, 255, 255, .8); }
[data-theme="dark"] a.crm-kicker:hover { background: rgba(255, 255, 255, .14); }
.crm-hero-l { font-size: 13px; font-weight: 600; opacity: .72; }
.crm-hero-v { display: block; max-width: 100%; margin: 4px 0 6px; font-family: var(--font-display); font-size: 44px; line-height: 1.08; font-weight: 600; font-synthesis: none; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.crm-hero-main p { margin: 0; font-size: 13.5px; opacity: .72; }
.crm-hero-btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 5px 5px 5px 18px; border-radius: var(--pill); font-size: 14px; font-weight: 600; color: inherit; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 6px 16px -8px rgba(200, 21, 10, .3); transition: background .15s, transform .15s; }
.crm-hero-btn:hover { background: rgba(255, 255, 255, .78); }
.crm-hero-btn:active { transform: scale(.97); }
.crm-hero-btn svg { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: #fff; color: #c8150a; stroke-width: 2.2; box-shadow: 0 2px 6px -1px rgba(200, 21, 10, .25); }
[data-theme="dark"] .crm-hero-btn { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
[data-theme="dark"] .crm-hero-btn:hover { background: rgba(255, 255, 255, .16); }
.crm-hero-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.crm-hero-t { display: flex; flex-direction: column; min-width: 0; padding: 16px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 1px 0 #fff; transition: transform .3s cubic-bezier(.22, .8, .2, 1); }
.crm-hero-t:hover { transform: translateY(-2px); }
[data-theme="dark"] .crm-hero-t { background: rgba(0, 0, 0, .24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .1); }
.crm-hero-tl { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .72; }
.crm-hero-tl svg { flex: none; width: 13px; height: 13px; }
.crm-hero-t b { margin-top: auto; padding-top: 14px; font-family: var(--font-display); font-size: 20px; line-height: 1.1; font-weight: 600; font-synthesis: none; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-hero-t small { margin-top: 3px; font-size: 12px; line-height: 1.35; opacity: .7; }
.crm-hero-t.alert b { color: #c8150a; }
[data-theme="dark"] .crm-hero-t.alert b { color: #ff8a7e; }

/* воронка: путь из кружков */
.crm-road { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.crm-road.seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.crm-nd { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 10px 4px 12px; border-radius: var(--radius-md); text-align: center; transition: background .2s, box-shadow .2s; }
.crm-nd:hover { background: var(--bg); }
.crm-nd.on { background: var(--bg); box-shadow: 0 16px 30px -24px rgba(0, 0, 0, .5); }
.crm-nd-c { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; font-weight: 600; font-synthesis: none; color: var(--muted); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: transform .25s cubic-bezier(.22, .8, .2, 1), box-shadow .25s; }
.crm-nd.lit .crm-nd-c { color: #fff; background: var(--s); box-shadow: 0 0 0 5px color-mix(in srgb, var(--s) 15%, transparent), 0 10px 22px -8px color-mix(in srgb, var(--s) 75%, transparent); }
.crm-nd[data-f="all"].lit .crm-nd-c { color: var(--bg); }
.crm-nd:hover .crm-nd-c, .crm-nd.on .crm-nd-c { transform: scale(1.08); }
.crm-nd.zero.on .crm-nd-c { box-shadow: inset 0 0 0 2px var(--s); }
.crm-nd-t { max-width: 100%; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-nd.zero .crm-nd-t { font-weight: 500; color: var(--muted); }
.crm-nd.on .crm-nd-t { color: var(--text); font-weight: 600; }
.crm-nd em { margin-top: -6px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--danger); }
.crm-nd.link::before { content: ""; position: absolute; top: 32px; right: calc(50% + 24px); width: calc(100% - 44px); height: 4px; border-radius: 4px; background: var(--chip); }
.crm-nd.link.lit::before { background: linear-gradient(90deg, #ff8a3d, var(--s)); box-shadow: 0 0 10px color-mix(in srgb, var(--s) 55%, transparent); }

/* пустой экран: живой макет */
.crm-mock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 24px; border-radius: var(--radius-md); background: var(--bg); }
.crm-mock-win { position: relative; padding: 14px 14px 18px; border-radius: 22px; background: var(--bg-soft); box-shadow: 0 26px 44px -34px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--line); }
.crm-mock-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 12px; color: var(--muted); }
.crm-mock-bar i { width: 9px; height: 9px; border-radius: 50%; }
.crm-mock-bar i:nth-child(1) { background: #ff5f57; } .crm-mock-bar i:nth-child(2) { background: #febc2e; } .crm-mock-bar i:nth-child(3) { background: #28c840; }
.crm-mock-bar span { margin-left: 6px; }
.crm-mock-msg { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.crm-mock-msg div, .crm-mock-toast div { min-width: 0; line-height: 1.3; }
.crm-mock-msg b, .crm-mock-toast b { display: block; font-weight: 600; font-size: 13.5px; }
.crm-mock-msg small, .crm-mock-toast small { display: block; font-size: 12px; color: var(--muted); }
@keyframes crm-toast { 0%, 12% { opacity: 0; transform: translateY(10px) scale(.97); } 22%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
.crm-mock-toast { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: var(--bg); box-shadow: 0 14px 26px -18px rgba(0, 0, 0, .6), inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); animation: crm-toast 5s ease-in-out infinite; }
.crm-mock-toast > span { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ok); }
.crm-mock-toast svg { width: 14px; height: 14px; }
.crm-mock-t h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 21px; line-height: 1.2; font-weight: 600; font-synthesis: none; letter-spacing: -.01em; text-wrap: balance; }
.crm-mock-t p { margin: 0 0 16px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .crm-rise, .crm-kicker::before, .crm-botc-s i, .crm-mock-toast { animation: none !important; } }

/* ---------- телефон: таблицы становятся карточками, ничего не едет вбок ---------- */
@media (max-width: 1200px) {
  .crm-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .crm-list-h, .crm-row { grid-template-columns: 22px 34px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr) 148px; }
  .crm-list-h > :nth-child(6), .crm-row > .crm-row-t { display: none; }
}
@media (max-width: 760px) {
  .crm-head { flex-direction: column; gap: 0; }
  .crm-head > .btn { width: 100%; margin: 0 0 16px; justify-content: center; }
  .crm-kpis, .crm-kpis.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-kpis.three > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .crm-flow, .crm-flow.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-main, .crm-ocat { padding: 14px; }
  .crm-hero { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 16px; }
  .crm-hero-v { font-size: 34px; }
  .crm-hero-side { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .crm-hero-t { padding: 10px; }
  .crm-hero-t b { padding-top: 8px; font-size: 15px; }
  .crm-hero-tl { font-size: 10px; letter-spacing: .02em; }
  .crm-hero-tl svg { display: none; }
  .crm-hero-t small { display: none; }
  .crm-road, .crm-road.seven { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .crm-road:not(.seven) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crm-nd[data-f="all"] { order: 5; }
  .crm-nd[data-f="push"], .crm-nd[data-f="later"] { order: 6; }
  .crm-nd-c { width: 42px; height: 42px; font-size: 14px; }
  .crm-nd-t { font-size: 12px; }
  .crm-nd.link::before { top: 29px; right: calc(50% + 21px); width: calc(100% - 40px); }
  .crm-mock { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 18px; }
  .crm-search { max-width: none; }
  .crm-toolbar .crm-search { flex-basis: 100%; }
  .crm-filters { width: 100%; }
  .crm-csel { flex: 1 1 100%; }
  .crm-csel select { flex: 1; max-width: none; }
  .crm-list-h { grid-template-columns: 22px minmax(0, 1fr); padding: 0 12px 4px; }
  .crm-list-h > :nth-child(2), .crm-list-h > :nth-child(n+4) { display: none; }
  .crm-row { grid-template-columns: 22px 34px minmax(0, 1fr) auto; grid-template-areas: "ck ava who time" "st st ap ap" "mv mv mv mv"; padding: 12px; }
  .crm-row > .crm-ck { grid-area: ck; }
  .crm-row > .crm-ava { grid-area: ava; }
  .crm-row > .crm-who { grid-area: who; }
  .crm-row > .crm-row-t { grid-area: time; display: block; }
  .crm-row > .crm-row-st { grid-area: st; }
  .crm-row > .crm-row-ap { grid-area: ap; justify-self: end; }
  .crm-row > .crm-mv { grid-area: mv; }
  .crm-wrap { overflow: visible; background: none; border-radius: 0; }
  .crm-table, .crm-table tbody, .crm-table tr, .crm-table td { display: block; width: 100%; min-width: 0; }
  .crm-table { table-layout: auto; }
  .crm-table thead { display: none; }
  .crm-table tr { background: var(--bg); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; }
  .crm-new tr { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
  .crm-new td { background: none; }
  .crm-table td { border: 0; padding: 5px 0; white-space: normal; text-align: left; }
  .crm-table td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
  .crm-table .num { text-align: left; }
  .crm-leads tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
  .crm-leads td { grid-column: 1 / -1; }
  .crm-leads td[data-l="Раздел"], .crm-leads td[data-l="Когда написал"] { grid-column: auto; order: 1; }
  .crm-leads td[data-l="Что оформил"], .crm-leads .crm-nolabel { order: 2; }
  .crm-new td[data-l="Что оформил"] { display: none; }
  .crm-chan tr, .crm-people tr { display: flex; flex-direction: column; }
  .crm-chan td[data-l], .crm-people td[data-l] { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; width: 100%; }
  .crm-chan td[data-l]::before, .crm-people td[data-l]::before { margin: 0; flex: none; }
  .crm-chan td[data-l="№"] { display: none; }
  .crm-chan td[data-l="Канал"], .crm-people td[data-l="Ученик"] { display: block; order: -1; }
  .crm-chan td[data-l="Канал"]::before, .crm-people td[data-l="Ученик"]::before { display: none; }
  .crm-nolabel:empty { display: none !important; }
  .crm-add { width: 100%; height: auto; padding: 10px; }
  .crm-add span { display: inline; }
  .crm-done { background: var(--bg-soft); padding: 8px 10px; }
  .crm-range { width: 100%; }
  .crm-range .input { flex: 1; width: auto; min-width: 0; }
  .crm-sec { padding: 14px; }
  .crm-app-c { width: 100%; justify-content: flex-end; }
  .crm-form-g, .crm-tpl, .crm-buy-g, .crm-of-form, .crm-ps-g, .crm-ps-cmp > div, .crm-kv, .crm-log, .crm-ustat { grid-template-columns: minmax(0, 1fr); }
  .crm-ps-cmp > div, .crm-kv, .crm-log { gap: 2px; }
  .crm-kv > span:nth-child(even) { margin-bottom: 8px; }
  .crm-ogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-otile { padding: 12px; }
  .crm-otile-f { flex-direction: column; align-items: flex-start; gap: 6px; }
  .crm-otile .crm-bank.big { width: 30px; height: 30px; }
  .crm-panel { width: 100%; }
  .crm-panel-hero { padding: 22px 20px 20px; }
  .crm-panel-hero h2 { font-size: 22px; }
  .crm-panel-body { padding: 4px 20px 20px; }
  .crm-panel-foot { padding-left: 20px; padding-right: 20px; }
  .crm-viewing { flex-wrap: wrap; }
  .crm-owner-f, .crm-owner-f .input { width: 100%; }
  .crm-owner-f .input { flex: 1 1 100%; }
  /* реклама на телефоне: нажимается целиком, приписка остаётся, стрелка сжимается */
  .crm-ad .pro-ad-main { gap: 10px; }
  .crm-ad .pro-ad-note { display: block; font-size: 12.5px; }
  .crm-ad .pro-ad-badge { padding: 7px; }
}