/* =====================================================================
   ARS-X 2.1 — экраны ядра CRM: задачи, карточка сделки, лента событий,
   уведомления, дашборды, списки, автоматизации, импорт, онбординг.
   Использует токены arsx2.css (--surface, --line, --brand, --radius…).
   ===================================================================== */

.small-text { font-size: 12.5px; }
.danger-text { color: var(--danger); }
.success-text { color: var(--success); }
.pad-x { padding: 0 10px; }
.btn.success { background: var(--success); border-color: var(--success); color: #fff; }
.btn.success:hover { filter: brightness(1.05); }
.ghost-right { margin-left: auto; }
.icon-btn.tiny { width: 26px; height: 26px; border-radius: 7px; }
.icon-btn.tiny .ico { width: 14px; height: 14px; }
.card.soft { background: var(--surface-2); box-shadow: none; padding: 10px 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-head h2, .card-head h3 { margin: 0; }
.notice.danger-soft { background: color-mix(in srgb, var(--danger) 8%, transparent); border-color: color-mix(in srgb, var(--danger) 25%, var(--line)); color: var(--text); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-row.compact { margin-top: 6px; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 550; cursor: pointer; }
.chip:hover { border-color: var(--accent-line); color: var(--brand); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.pill .ico { width: 13px; height: 13px; }
.pill.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.pill.warn { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.pill.success { background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); }
.mini-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--brand); font-size: 10px; font-weight: 700; flex: none; vertical-align: middle; }
.segmented.small button { padding: 4px 10px; font-size: 12.5px; }
.empty-state { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 42px 16px; color: var(--muted); }
.empty-state b { color: var(--text); font-size: 15px; }
.empty-state p { margin: 0; max-width: 420px; }
.empty-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--brand); }
.toast-action { border: 0; background: color-mix(in srgb, var(--brand) 20%, transparent); color: inherit; font-weight: 700; padding: 4px 10px; border-radius: 8px; margin-left: 10px; cursor: pointer; }

/* ------------------------------------------------------------ колокольчик */
.bell-wrap { position: relative; }
.bell-btn { position: relative; }
.bell-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--surface); }
.bell-count.hidden { display: none; }
.bell-panel { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 380px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); z-index: 60; overflow: hidden; }
.bell-panel.open { display: block; }
.bell-head, .bell-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bell-foot { border-top: 1px solid var(--line); border-bottom: 0; }
.bell-list { max-height: 420px; overflow-y: auto; }
.bell-item { display: flex; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--text); }
.bell-item:hover { background: var(--surface-2); }
.bell-item.unread { background: var(--accent-softer); }
.bell-item.unread b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-right: 6px; vertical-align: middle; }
.bell-kind { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--brand); }
.bell-kind .ico { width: 16px; height: 16px; }
.bell-text { display: grid; gap: 2px; min-width: 0; }
.bell-text b { font-size: 13px; font-weight: 600; }
.bell-text span { font-size: 12.5px; color: var(--text-2); }
.bell-text small { color: var(--muted); font-size: 11.5px; }
.bell-empty, .bell-loading { padding: 26px 14px; text-align: center; color: var(--muted); }

/* ----------------------------------------------------------------- задачи */
.task-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.task-stat { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--muted); cursor: default; }
.task-stat[onclick] { cursor: pointer; }
.task-stat b { font-size: 24px; line-height: 1.1; color: var(--text); font-weight: 700; letter-spacing: -0.02em; }
.task-stat span { font-size: 12.5px; }
.task-stat.danger b { color: var(--danger); }
.task-stat.brand b { color: var(--brand); }
.task-stat.success b { color: var(--success); }
.task-toolbar, .list-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.task-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; background: var(--input-bg); min-width: 220px; }
.task-search.grow { flex: 1 1 300px; }
.task-search input { border: 0; padding: 8px 0; min-height: 36px; background: transparent; flex: 1; box-shadow: none !important; }
.task-search .ico { width: 16px; height: 16px; color: var(--muted); }
.task-toolbar .btn { margin-left: auto; }
.task-quick { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 6px 6px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.task-quick:focus-within { border-style: solid; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-softer); }
.task-quick input { flex: 1; border: 0; box-shadow: none !important; padding-left: 0; }
.task-quick select { width: auto; min-width: 140px; }
.task-quick > .ico { color: var(--muted); }
.task-board { margin-top: 18px; display: grid; gap: 18px; }
.task-group-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.task-group-head span { background: var(--surface-2); border-radius: 999px; padding: 0 8px; font-weight: 700; font-size: 11.5px; }
.task-group.overdue .task-group-head b { color: var(--danger); }
.task-group.today .task-group-head b { color: var(--brand); }
.task-list { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.task-list.compact { border: 0; box-shadow: none; background: transparent; gap: 2px; }
.task-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 11px 14px; border-bottom: 1px solid var(--line); transition: background .12s, opacity .25s; }
.task-list .task-row:last-child { border-bottom: 0; }
.task-list.compact .task-row { padding: 8px 6px; border: 0; border-radius: 9px; }
.task-row:hover { background: var(--surface-2); }
.task-row.completing { opacity: .4; }
.task-row.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; margin-top: 1px; padding: 0; color: transparent; transition: all .15s; }
.task-check .ico { width: 13px; height: 13px; stroke-width: 3; }
.task-check:hover { border-color: var(--success); color: var(--success); }
.task-check.checked { background: var(--success); border-color: var(--success); color: #fff; }
.task-row.prio-high .task-check { border-color: color-mix(in srgb, var(--danger) 55%, var(--line-strong)); }
.task-main { min-width: 0; cursor: pointer; display: grid; gap: 4px; }
.task-title { font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
.prio-flag { color: var(--danger); margin-right: 4px; }
.prio-flag .ico { width: 13px; height: 13px; vertical-align: -1px; }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-link { display: inline-flex; align-items: center; gap: 4px; max-width: 280px; border: 0; background: var(--accent-softer); color: var(--brand-dark, var(--brand)); border-radius: 7px; padding: 2px 8px; font-size: 12.5px; font-weight: 550; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme="dark"] .chip-link { color: color-mix(in srgb, var(--brand) 70%, white); }
.chip-link .ico { width: 13px; height: 13px; flex: none; }
.chip-link.small { font-size: 11.5px; padding: 1px 7px; }
.chip-soft { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); background: var(--surface-2); border-radius: 7px; padding: 2px 7px; }
.chip-soft .ico { width: 12px; height: 12px; }
.task-assignee { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.task-result { font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border-radius: 8px; padding: 6px 9px; }
.task-due { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-weight: 550; padding-top: 2px; }
.task-due.overdue { color: var(--danger); }
.task-due.today { color: var(--brand); }
.task-due.soon { color: var(--text-2); }
.task-link-line { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--text-2); }
.task-link-line .ico { width: 15px; height: 15px; color: var(--brand); }

/* --------------------------------------------------------- лента событий */
.composer { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 16px; overflow: hidden; }
.composer:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-softer); }
.composer-tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--line); background: var(--surface-2); overflow-x: auto; }
.composer-tabs button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 7px 12px; border-radius: 8px 8px 0 0; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.composer-tabs button .ico { width: 15px; height: 15px; }
.composer-tabs button.active { background: var(--surface); color: var(--text); box-shadow: 0 -1px 0 var(--line) inset; }
.composer textarea { border: 0; border-radius: 0; width: 100%; resize: vertical; min-height: 64px; box-shadow: none !important; padding: 12px 14px; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 10px 14px; }
.timeline { display: grid; gap: 2px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 8px 0; position: relative; }
.tl-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); color: var(--muted); z-index: 1; }
.tl-icon .ico { width: 15px; height: 15px; }
.tl-comment .tl-icon, .tl-note .tl-icon { color: var(--brand); border-color: var(--accent-line); }
.tl-call .tl-icon { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--line)); }
.tl-meeting .tl-icon, .tl-event .tl-icon { color: #7C4DFF; border-color: color-mix(in srgb, #7C4DFF 35%, var(--line)); }
.tl-stage .tl-icon, .tl-deal_created .tl-icon { color: var(--text-2); background: var(--surface-2); }
.tl-system .tl-icon { color: var(--warning); }
.tl-body { min-width: 0; padding-top: 5px; }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.tl-label { font-weight: 650; color: var(--text); }
.tl-stage .tl-label, .tl-deal_created .tl-label, .tl-system .tl-label, .tl-file .tl-label, .tl-event .tl-label { color: var(--muted); font-weight: 600; }
.tl-when { color: var(--muted); font-size: 12px; }
.tl-tools { margin-left: auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.tl-item:hover .tl-tools { opacity: 1; }
.tl-text { margin-top: 5px; background: var(--surface-2); border-radius: 4px 12px 12px 12px; padding: 9px 12px; line-height: 1.5; overflow-wrap: anywhere; }
.tl-stage .tl-text, .tl-system .tl-text, .tl-deal_created .tl-text { background: transparent; padding: 2px 0 0; color: var(--muted); }
.tl-item.pinned .tl-text { border: 1px solid var(--accent-line); background: var(--accent-softer); }
.tl-item.pinned .tl-label::after { content: " · закреплено"; color: var(--brand); font-weight: 600; }
.tl-empty { color: var(--muted); padding: 18px 4px 6px 48px; }

/* ------------------------------------------------------- карточка сделки */
.deal-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.deal-grid > * { min-width: 0; }
.deal-header { padding: 16px 18px; }
.deal-header-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.deal-crumbs { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 12.5px; }
.deal-amount { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 720; letter-spacing: -0.02em; margin-top: 4px; }
.stage-bar { display: flex; gap: 3px; margin-top: 16px; overflow-x: auto; padding-bottom: 2px; }
.stage-step { flex: 1 0 auto; min-width: 92px; position: relative; border: 0; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; padding: 9px 14px 9px 18px; cursor: pointer; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); transition: background .12s, color .12s; }
.stage-step:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 8px 0 0 8px; padding-left: 12px; }
.stage-step span { white-space: nowrap; }
.stage-step:hover:not([disabled]) { background: var(--accent-soft); color: var(--brand); }
.stage-step.passed { background: color-mix(in srgb, var(--brand) 22%, var(--surface-2)); color: var(--text); }
.stage-step.current { background: var(--brand); color: #fff; cursor: default; }
.stage-step.current.won { background: var(--success); }
.stage-step.current.lost { background: var(--danger); }
.stage-step.final.won:not(.current) { color: var(--success); }
.stage-step.final.lost:not(.current) { color: var(--danger); }
.stage-step[disabled] { cursor: default; }
.deal-grid { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(270px, 330px); gap: 16px; align-items: start; }
.deal-side { display: grid; gap: 16px; }
.deal-side .card h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.deal-main .card { min-height: 360px; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.kv:last-child { border-bottom: 0; }
.kv > span { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.kv b { font-weight: 600; text-align: right; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px 6px; }
.kv b small { font-weight: 500; color: var(--muted); font-size: 11.5px; flex-basis: 100%; text-align: right; }
.kv.total { border-top: 1px solid var(--line); border-bottom: 0; margin-top: 4px; padding-top: 10px; }
.deal-comments { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; color: var(--text-2); max-height: 180px; overflow: auto; }
.contact-card { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.contact-name { display: flex; align-items: center; gap: 9px; }
.contact-name .mini-avatar { width: 32px; height: 32px; font-size: 12px; }
.contact-name div { display: grid; }
.contact-name span { font-size: 12px; }
.contact-line { display: flex; align-items: center; gap: 8px; color: var(--text-2); text-decoration: none; font-size: 13px; padding: 4px 6px; border-radius: 8px; }
.contact-line:hover { background: var(--surface-2); color: var(--brand); }
.contact-line .ico { width: 15px; height: 15px; color: var(--muted); }
.link-row, .doc-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: var(--text); }
.link-row:hover, .doc-row:hover { background: var(--surface-2); }
.link-row > .ico, .doc-row > .ico { width: 17px; height: 17px; color: var(--brand); flex: none; }
.link-row span, .doc-row span { display: grid; min-width: 0; flex: 1; font-weight: 550; overflow-wrap: anywhere; }
.link-row small, .doc-row small { color: var(--muted); font-weight: 500; font-size: 12px; }
.link-row .go { width: 15px; height: 15px; color: var(--muted); }
.doc-row.overdue > .ico { color: var(--danger); }
.card.attention { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.no-step { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--text); font-size: 13px; margin-bottom: 10px; }
.no-step .ico { width: 17px; height: 17px; color: var(--warning); flex: none; margin-top: 1px; }
.inline-task { display: flex; gap: 6px; margin-bottom: 8px; }
.inline-task input { flex: 1; min-height: 34px; }
.done-tasks { margin-top: 8px; }
.done-tasks summary { cursor: pointer; color: var(--muted); font-size: 12.5px; padding: 4px 6px; }

/* ----------------------------------------------------------------- канбан */
.arsx21-tools { display: contents; }
.kanban-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; border-radius: 7px; padding: 3px 7px; justify-self: start; }
.kanban-flag .ico { width: 13px; height: 13px; }
.kanban-flag.overdue { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.kanban-flag.ok { background: var(--surface-2); color: var(--text-2); }
.kanban-flag.none { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); }

/* ---------------------------------------------------------- список сделок */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.filter-row select, .filter-row input { width: auto; min-width: 140px; max-width: 220px; min-height: 34px; font-size: 13px; }
.filter-row input[type="number"] { max-width: 120px; min-width: 100px; }
.list-summary { margin: 14px 0 8px; color: var(--muted); }
.list-summary b { color: var(--text); }
.bulk-bar { position: sticky; top: 8px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border-radius: var(--radius); background: var(--text); color: var(--surface); box-shadow: var(--shadow); }
.bulk-bar .btn.secondary { background: color-mix(in srgb, var(--surface) 12%, transparent); color: var(--surface); border-color: transparent; }
.bulk-bar .btn.ghost { color: var(--surface); opacity: .8; }
.bulk-bar b { margin-right: 6px; }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--brand); }
.data-table th.sorted.desc::after { content: " ↓"; }
.data-table th.sorted.asc::after { content: " ↑"; }
.data-table .check-cell { width: 34px; }
.data-table .check-cell input { min-height: 0; width: 16px; height: 16px; }
.data-table tr.selected td { background: var(--accent-softer); }
.data-table.small td, .data-table.small th { font-size: 12.5px; padding: 6px 8px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 16px 0 6px; color: var(--muted); }

/* --------------------------------------------------------- автоматизации */
.page-hero.compact { padding: 20px 22px; }
.page-hero.compact h2 { font-size: 20px; }
.auto-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.recipes { display: grid; gap: 10px; }
.recipe { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.recipe.installed { border-color: color-mix(in srgb, var(--success) 35%, var(--line)); background: color-mix(in srgb, var(--success) 5%, transparent); }
.recipe.unavailable { opacity: .55; }
.recipe-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--brand); }
.recipe-body { display: grid; gap: 2px; }
.recipe-body span { font-size: 12.5px; color: var(--text-2); }
.recipe-body small { font-size: 11.5px; color: var(--muted); }
.auto-stages { display: grid; gap: 12px; }
.auto-stage { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.auto-stage-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.auto-rule { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); margin-top: 6px; }
.auto-rule.off { opacity: .55; }
.auto-rule-body { display: grid; gap: 1px; flex: 1; min-width: 0; }
.auto-rule-body span { font-size: 12.5px; color: var(--text-2); }
.auto-rule-body small { font-size: 11.5px; color: var(--muted); }
.auto-empty { color: var(--muted); font-size: 12.5px; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; min-height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background .15s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.switch input:checked + span { background: var(--success); }
.switch input:checked + span::before { transform: translateX(16px); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }

/* -------------------------------------------------------------- импорт */
.import-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.import-steps .card h3 { margin: 0 0 4px; }
.import-steps .card p { margin: 0; font-size: 13px; }
.dropzone { display: grid; place-items: center; text-align: center; min-height: 150px; border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); cursor: pointer; padding: 20px; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--accent-softer); }
.dropzone input { display: none; }
.dropzone div { display: grid; gap: 6px; justify-items: center; }
.dropzone .ico { width: 30px; height: 30px; color: var(--brand); }
.import-found { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.import-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.import-grid h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.import-grid h3 select { width: auto; min-height: 30px; font-size: 13px; }
.map-list { display: grid; gap: 6px; }
.map-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.2fr); gap: 10px; align-items: center; font-size: 13px; }
.map-row select { min-height: 32px; font-size: 13px; }
.import-done { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--success) 7%, transparent); border: 1px solid color-mix(in srgb, var(--success) 30%, var(--line)); }
.import-done h2 { margin: 0 0 4px; }
.import-done-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; flex: none; }

/* --------------------------------------------------- онбординг и дашборд */
.onboarding { border-color: var(--accent-line); background: linear-gradient(135deg, var(--accent-softer), var(--surface) 60%); }
.ob-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; }
.ob-head h2 { margin: 0 0 4px; }
.ob-head p { margin: 0; }
.ob-progress { width: 220px; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ob-progress div { height: 100%; background: var(--brand); border-radius: inherit; transition: width .3s; }
.ob-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 14px; }
.ob-step { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--text); font-weight: 550; font-size: 13px; }
.ob-step:hover { border-color: var(--accent-line); }
.ob-step span:nth-child(2) { flex: 1; }
.ob-step .go { width: 15px; height: 15px; color: var(--muted); }
.ob-step.done { color: var(--muted); text-decoration: line-through; background: transparent; }
.ob-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; flex: none; }
.ob-step.done .ob-check { background: var(--success); border-color: var(--success); color: #fff; }
.ob-check .ico { width: 12px; height: 12px; stroke-width: 3; }
.niche-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.niche { display: grid; gap: 4px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 14px; cursor: pointer; color: var(--text); }
.niche span { color: var(--muted); font-size: 12.5px; }
.niche:hover, .niche.active { border-color: var(--brand); background: var(--accent-softer); }
.role-dash { margin-top: 18px; }
.role-dash-loading { color: var(--muted); padding: 10px 2px; }
.role-dash-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.role-dash-head h2 { margin: 0; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.kpi { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { border-color: var(--accent-line); }
.kpi span { color: var(--muted); font-size: 12.5px; }
.kpi b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.kpi small { color: var(--muted); font-size: 12px; }
.kpi.success b { color: var(--success); }
.kpi.danger b { color: var(--danger); }
.kpi.warning b { color: var(--warning); }
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.dash-grid .card h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.dash-grid .card-head h3 { margin: 0; }
.dash-grid .span-2 { grid-column: span 2; }
.funnel { display: grid; gap: 7px; }
.funnel-row { display: grid; grid-template-columns: minmax(110px, 160px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.funnel-name { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funnel-bar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.funnel-bar div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #22D3EE)); }
.funnel-val { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.funnel-val b { color: var(--text); }
.funnel-final { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mini-stats { display: flex; gap: 16px; margin-bottom: 8px; }
.mini-stats span { display: grid; font-size: 12px; color: var(--muted); }
.mini-stats b { font-size: 18px; color: var(--text); }
.mini-stats .danger b { color: var(--danger); }

/* ---------------------------------------------------------- API-справочник */
.api-ref summary { cursor: pointer; font-weight: 600; }
.method { display: inline-block; min-width: 50px; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 6px; background: var(--surface-2); }
.method.get { color: var(--success); }
.method.post { color: var(--brand); }
.method.patch { color: var(--warning); }

/* -------------------------------------------------------------- адаптив */
@media (max-width: 1280px) {
  .deal-grid { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
  .deal-grid > .deal-side:last-child { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .deal-grid, .auto-grid, .import-grid { grid-template-columns: 1fr; }
  .deal-grid > .deal-side:last-child { grid-column: auto; }
  .deal-main { order: -1; }
  .task-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .import-steps { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-grid .span-2 { grid-column: auto; }
}
@media (max-width: 640px) {
  .task-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-toolbar .btn { margin-left: 0; }
  .task-quick { flex-wrap: wrap; }
  .task-quick input { flex-basis: 100%; }
  .task-row { grid-template-columns: auto 1fr; }
  .task-due { grid-column: 2; padding-top: 0; }
  .deal-amount { font-size: 23px; }
  .funnel-row { grid-template-columns: 1fr auto; }
  .funnel-bar { grid-column: 1 / -1; grid-row: 2; }
  .ob-progress { width: 100%; }
  .bell-panel { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; }
  .filter-row select, .filter-row input { max-width: none; flex: 1 1 140px; }
}