/* ═══════════════════════════════════════════════════════════════════════════
   GRAMATON CRM — crm.css  (T-CRM-18, этап C7, 2026-10-04)
   Дизайн-система CRM в стиле эталонного лендинга (index.html), §8-Б.

   Слой НЕ рисует «свой» дизайн: здесь зафиксированы те же токены и компоненты,
   что и на лендинге (--r-m/l/xl/pill, --maxw 1160, .wrap, .btn/.btn-primary/
   .btn-ghost, .badge, sticky-хедер, футер, палитры data-accent a/b/c/d,
   типографика data-type alfa-golos — Manrope/Golos Text, корпоративный дефолт b:
   белый + #EF3124 + тёмно-синий #0B1F35).
   Новые элементы — только для CRM-специфики (канбан, таймлайн, drawer, KPI,
   графики, конструктор объектов) и в том же языке дизайна (§8-Б.6).

   Подключение (в этом порядке):
     /css/fonts-montserrat.css · /ui-alfa.css · /css/gramaton-theme.css · /css/crm.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ТОКЕНЫ ЛЕНДИНГА (значения 1:1 с index.html) ──────────────────────── */
:root{
  --r-m:12px; --r-l:16px; --r-xl:24px; --pill:99px; --maxw:1160px;
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Playfair Display',Georgia,serif;
  --fs-h1:46px;--fs-h2:30px;--fs-lead:18px;--fs-body:15px;--fs-small:13px;
  --lh-h1:1.15;--lh-h2:1.2;--lh-body:1.55;--w-head:700;--w-btn:600;--ls-h1:-.5px;--w-ui:600;
  --ok:#0F7A45; --ok-soft:rgba(15,122,69,.10);
  --warn:#9A5B00; --warn-soft:rgba(154,91,0,.12);
  --err:#C4241A; --err-soft:rgba(196,36,26,.10);
  --info:#0B5CAD; --info-soft:rgba(11,92,173,.10);
  --crm-nav-w:250px;
}
/* Шкала Альфа-Банка (headline 48/1.33 w500, paragraph 16/1.5, accent 16/20 w700).
   Вместо лицензионного Styrene UI — свободные аналоги Manrope / Golos Text. */
html[data-type="alfa-manrope"],html[data-type="alfa-golos"]{
  --fs-h1:48px;--fs-h2:32px;--fs-lead:18px;--fs-body:16px;--fs-small:14px;
  --lh-h1:1.33;--lh-h2:1.25;--lh-body:1.5;--w-head:500;--w-btn:700;--ls-h1:0px;--w-ui:600}
html[data-type="alfa-manrope"]{--font-ui:'Manrope','Inter',system-ui,sans-serif;--font-display:'Manrope',system-ui,sans-serif}
html[data-type="alfa-golos"]{--font-ui:'Golos Text','Inter',system-ui,sans-serif;--font-display:'Golos Text',system-ui,sans-serif}

/* ── 2. ПАЛИТРЫ (те же 4 акцента, что на лендинге) ───────────────────────── */
html[data-accent="a"]{--bg:#FAF6EF;--card:#FFF;--card2:#F6F0E4;--text:#2C2318;--muted:#403A2E;--accent:#A8842C;--accent-strong:#8A6A1E;--btn-bg:#8A6A1E;--accent2:#7A1F33;--ink:#FFFDF7;--border:rgba(140,108,44,.18);--shadow:0 6px 26px rgba(90,70,34,.10);--hero:radial-gradient(900px 420px at 15% -10%,rgba(201,168,76,.16),transparent 60%),radial-gradient(700px 360px at 100% 0,rgba(122,31,51,.10),transparent 55%)}
html[data-accent="b"]{--bg:#FFF;--card:#F3F4F5;--card2:#EEF0F1;--text:#0B1F35;--muted:#333B47;--accent:#EF3124;--accent-strong:#C4241A;--btn-bg:#D4231A;--accent2:#0B1F35;--ink:#FFF;--border:rgba(11,31,53,.08);--shadow:0 8px 24px rgba(11,31,53,.08);--hero:radial-gradient(900px 420px at 10% -10%,rgba(239,49,36,.10),transparent 60%),radial-gradient(700px 360px at 100% 0,rgba(11,31,53,.06),transparent 55%)}
html[data-accent="c"]{--bg:#0A1733;--card:#101F42;--card2:#16294F;--text:#EDF1FB;--muted:#C6D0E8;--accent:#C9A84C;--accent-strong:#E4C86E;--accent2:#7A1F33;--ink:#0A1733;--border:rgba(201,168,76,.22);--shadow:0 8px 30px rgba(2,6,20,.55);--hero:radial-gradient(900px 420px at 12% -10%,rgba(201,168,76,.14),transparent 62%),radial-gradient(700px 360px at 100% 0,rgba(122,31,51,.30),transparent 58%)}
html[data-accent="d"]{--bg:#05010E;--card:#140A2A;--card2:#1B1038;--text:#F0EDFC;--muted:#D6CCEC;--accent:#C9A84C;--accent-strong:#E4C86E;--accent2:#6D28D9;--ink:#120A22;--border:rgba(201,168,76,.20);--shadow:0 8px 30px rgba(8,2,20,.6);--hero:radial-gradient(900px 420px at 12% -10%,rgba(201,168,76,.12),transparent 62%),radial-gradient(700px 360px at 100% 0,rgba(109,40,217,.28),transparent 58%)}

/* ── 3. БАЗА ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:var(--fs-body);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--w-head)}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
h3{font-size:20px;line-height:1.3}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.lead{font-size:20px;color:var(--muted);line-height:1.5}
.small{font-size:var(--fs-small)}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* видимый фокус — как на лендинге */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:var(--ink)}

/* ── 4. КОМПОНЕНТЫ ЛЕНДИНГА ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;
  border-radius:var(--pill);border:1px solid transparent;font-weight:var(--w-btn);font-size:16px;line-height:20px;
  cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease;background:transparent;color:var(--text);font-family:inherit}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--btn-bg,var(--accent));color:var(--ink);box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--accent-strong,var(--accent))}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--card)}
.btn-outline{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-outline:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.btn-outline:active{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.btn-danger{background:var(--err);color:#fff}
.btn-sm{min-height:38px;padding:8px 16px;font-size:14px}
.btn-icon{min-height:44px;min-width:44px;padding:0;border-radius:50%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:var(--pill);
  background:var(--btn-bg,var(--accent));color:var(--ink)}
.badge-soft{background:var(--card2);color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--pill);
  background:var(--card2);border:1px solid var(--border);color:var(--muted)}
.tag .x{cursor:pointer;opacity:.7}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);padding:18px;box-shadow:var(--shadow);min-width:0}
.card-flat{box-shadow:none}
.card h3{margin-bottom:6px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row>.grow{flex:1 1 auto;min-width:0}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.stack{display:grid;gap:14px}
.sep{height:1px;background:var(--border);border:0;margin:4px 0}

/* ── 5. ХЕДЕР / ФУТЕР (как на лендинге) ──────────────────────────────────── */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.hrow{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;min-height:72px}
.hrow>.logo{justify-self:start}
.hrow>nav{justify-self:center}
.hrow>.hacts{justify-self:end}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo-svg{height:34px;width:auto;display:block;overflow:visible}
.logo-svg .lg-word{font-family:'Montserrat',var(--font-ui);font-weight:800;letter-spacing:3px;fill:currentColor}
.logo-svg .lg-bar{fill:var(--logo-accent,var(--accent))}
.logo-svg .lg-pro{font-family:'Montserrat',var(--font-ui);font-weight:800;letter-spacing:8px;fill:var(--logo-accent,var(--accent))}
.hacts{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;justify-content:flex-end}
header.site nav{display:flex;gap:26px;align-items:center}
header.site nav a{font-size:16px;font-weight:600;color:var(--muted);min-height:48px;display:inline-flex;align-items:center;transition:color .18s ease}
header.site nav a:hover,header.site nav a[aria-current="page"]{color:var(--text)}
.sw{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:var(--pill);background:var(--card)}
.sw button{border:0;background:transparent;color:var(--muted);font:600 12px/1 var(--font-ui);padding:8px 12px;border-radius:var(--pill);min-height:44px;cursor:pointer}
.sw button[aria-pressed="true"]{background:var(--btn-bg,var(--accent));color:var(--ink)}
.acc-cycle{display:none;min-width:44px;min-height:44px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:50%;font-size:16px;cursor:pointer}
.userchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border-radius:var(--pill);
  border:1px solid var(--border);background:var(--card);color:var(--text);font-size:14px;font-weight:600;cursor:pointer}
.userchip .dot{width:22px;height:22px;border-radius:50%;background:var(--btn-bg,var(--accent));color:var(--ink);display:grid;place-items:center;font-size:11px;font-weight:700}
footer.site{border-top:1px solid var(--border);margin-top:40px;padding:34px 0 24px;background:var(--bg)}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:24px}
.fcols h4{font-size:14px;margin-bottom:8px}
.fcols a{display:block;color:var(--muted);padding:5px 0;font-size:14px}
.fcols a:hover{color:var(--text)}
.fbot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
.fbot-req{text-align:right}

/* ── 6. КАРКАС КАБИНЕТА CRM ──────────────────────────────────────────────── */
.crm-shell{display:grid;grid-template-columns:var(--crm-nav-w) 1fr;gap:24px;align-items:start;padding:22px 0 40px}
.crm-side{position:sticky;top:92px;display:grid;gap:6px}
.crm-side .snav-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:8px 12px}
.crm-side a{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;border-radius:var(--r-m);
  color:var(--muted);font-weight:600;font-size:15px;transition:background .16s ease,color .16s ease}
.crm-side a:hover{background:var(--card);color:var(--text)}
.crm-side a[aria-current="page"]{background:var(--card2);color:var(--text);box-shadow:inset 3px 0 0 var(--accent)}
.crm-side a .cnt{margin-left:auto;font-size:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--pill);padding:1px 8px;color:var(--muted)}
/* Горизонтальная полоса разделов над содержимым (пилюля, прокрутка свайпом/колесом) */
.crm-ribbon{display:flex;overflow-x:auto;gap:6px;padding:6px 8px;margin:2px 0 14px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--pill);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.crm-ribbon::-webkit-scrollbar{height:6px}
.crm-ribbon::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--pill)}
.crm-ribbon a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:40px;
  padding:8px 14px;border-radius:var(--pill);color:var(--text);text-decoration:none;font-weight:var(--w-btn,600)}
.crm-ribbon a:hover{background:var(--card2)}
.crm-ribbon a[aria-current="page"]{background:var(--btn-bg,var(--accent));color:var(--ink)}
.crm-ribbon a .cnt{font-size:12px;background:color-mix(in srgb,var(--text) 8%,transparent);border-radius:var(--pill);padding:1px 8px}
.crm-main{min-width:0}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head .lead{max-width:640px}
.hero{padding:30px 0 8px}
.hero .lead{margin-top:8px}

/* ── 7. KPI-ПЛИТКИ (hero-паттерн) ────────────────────────────────────────── */
.kpi-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.kpi{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);padding:18px 20px;box-shadow:var(--shadow);overflow:hidden}
.kpi .k-label{font-size:13px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:7px}
.kpi .k-val{font-family:var(--font-display);font-size:34px;font-weight:600;line-height:1.1;margin-top:10px;letter-spacing:-.5px}
.kpi .k-sub{font-size:13px;color:var(--muted);margin-top:6px}
.kpi .k-icon{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;background:var(--card2);display:grid;place-items:center;color:var(--accent)}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--btn-bg,var(--accent));opacity:.9}
.kpi.accent2::after{background:var(--accent2)}
.kpi.ok::after{background:var(--ok)} .kpi.warn::after{background:var(--warn)} .kpi.err::after{background:var(--err)}

/* ── 8. КАНБАН ───────────────────────────────────────────────────────────── */
.kanban{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 16px;
  scrollbar-width:none;-ms-overflow-style:none}
.kanban::-webkit-scrollbar{display:none;height:0}
.kanban-scrollwrap{position:relative}
/* Кастомные скроллбары канбана (сверху и снизу): нативные overlay-скроллбары Chrome не красятся */
.kbar{position:relative;height:18px;margin:2px 2px 8px;border-radius:var(--pill);
  background:var(--card2);border:1px solid var(--border);cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .15s ease}
.kbar-bottom{margin:6px 2px 2px}
.kbar.on{opacity:1;pointer-events:auto}
.kbar:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.kbar-thumb{position:absolute;top:2px;left:0;height:12px;min-width:48px;border-radius:var(--pill);
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent-strong,var(--accent)) 100%);
  box-shadow:0 1px 4px rgba(11,31,53,.30);
  transition:filter .12s ease,box-shadow .12s ease}
.kbar:hover .kbar-thumb,.kbar.dragging .kbar-thumb{filter:brightness(1.06);box-shadow:0 2px 8px rgba(11,31,53,.42)}
.kbar.dragging{cursor:grabbing}
.kcol{flex:0 0 284px;min-width:284px;background:var(--card2);border:1px solid var(--border);border-radius:var(--r-l);
  padding:12px;display:flex;flex-direction:column;gap:10px;min-height:180px}
.kcol.dragover{outline:2px dashed var(--accent);outline-offset:-4px;background:var(--card)}
.kcol-head{display:flex;align-items:center;gap:8px}
.kcol-head .c-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.kcol-head .c-name{font-weight:700;font-size:14px}
.kcol-head .c-sum{margin-left:auto;font-size:12px;color:var(--muted);font-weight:700}
.kcol-head .c-cnt{background:var(--card);border:1px solid var(--border);border-radius:var(--pill);padding:1px 9px;font-size:12px;font-weight:700;color:var(--muted)}
.kdrop{display:flex;flex-direction:column;gap:9px;min-height:60px}
.kcard{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-m);padding:12px;cursor:grab;
  box-shadow:0 1px 2px rgba(11,31,53,.06);transition:box-shadow .16s ease,transform .16s ease}
.kcard:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.kcard:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.kcard.dragging{opacity:.5}
.kcard.is-done{border-left:4px solid var(--ok)}
.kcard.is-lost{border-left:4px solid var(--err)}
.kcard .kc-name{font-weight:700;font-size:14px;margin-bottom:6px;line-height:1.3}
.kcard .kc-amount{font-weight:700;font-size:14px;color:var(--ok)}
.kcard .kc-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:6px}
.kcard .kc-foot{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:var(--muted)}
.kcard .kc-select{position:absolute}
.kcard-wrap{position:relative}
.kcard-wrap .pick{position:absolute;top:8px;right:8px;z-index:1;width:22px;height:22px;accent-color:var(--accent)}
.kcol-empty{font-size:13px;color:var(--muted);text-align:center;padding:14px 6px;border:1px dashed var(--border);border-radius:var(--r-m)}

/* ── 9. ТАБЛИЦЫ ──────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-l);background:var(--card)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.tbl th,table.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;background:var(--card2);position:sticky;top:0;z-index:1}
table.tbl tbody tr{cursor:pointer}
table.tbl tbody tr:hover{background:var(--card2)}
table.tbl tbody tr[aria-selected="true"]{background:var(--info-soft)}
table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tbl .empty-cell{text-align:center;color:var(--muted);padding:32px}
.chip-select{width:20px;height:20px;accent-color:var(--accent);cursor:pointer}

/* ── 10. ФИЛЬТРЫ И ФОРМЫ (pill, inline-валидация) ────────────────────────── */
.filters{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);padding:14px;display:grid;gap:12px}
.filters .frow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.field{display:grid;gap:6px;min-width:0}
.field>label,.label{font-size:13px;font-weight:600;color:var(--muted)}
.input,.select,.textarea{width:100%;min-height:44px;padding:10px 16px;border:1px solid var(--border);
  border-radius:var(--pill);background:var(--bg);color:var(--text);font:inherit;font-size:15px;transition:border-color .16s ease,box-shadow .16s ease}
.textarea{border-radius:var(--r-m);min-height:96px;resize:vertical;padding:14px 16px}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.input::placeholder,.textarea::placeholder{color:var(--muted);opacity:.75}
.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea{border-color:var(--err);box-shadow:0 0 0 3px var(--err-soft)}
.field-err{font-size:13px;color:var(--err);display:none;align-items:center;gap:6px}
.field.is-invalid .field-err{display:flex}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;min-height:44px}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}
.switch input{position:absolute;opacity:0;width:44px;height:26px}
.switch .track{width:44px;height:26px;border-radius:var(--pill);background:var(--card2);border:1px solid var(--border);position:relative;transition:background .18s ease}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--bg);box-shadow:var(--shadow);transition:transform .18s ease}
.switch input:checked+.track{background:var(--btn-bg,var(--accent))}
.switch input:checked+.track::after{transform:translateX(18px)}
.switch input:focus-visible+.track{outline:3px solid var(--accent);outline-offset:2px}

/* сегментированный переключатель (таблица/канбан/календарь, табы) */
.tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:var(--pill);background:var(--card);flex-wrap:wrap}
.tab-btn{min-height:44px;border:0;background:transparent;color:var(--muted);font:600 14px/1 var(--font-ui);
  border-radius:var(--pill);cursor:pointer;padding:0 18px;display:inline-flex;align-items:center;gap:7px;transition:background .18s ease,color .18s ease}
.tab-btn[aria-selected="true"],.tab-btn[aria-pressed="true"]{background:var(--btn-bg,var(--accent));color:var(--ink)}
.tab-btn:hover:not([aria-selected="true"]):not([aria-pressed="true"]){color:var(--text)}

/* ── 11. BULK-ПАНЕЛЬ ─────────────────────────────────────────────────────── */
.bulkbar{position:sticky;bottom:14px;z-index:30;display:none;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--text);color:var(--bg);border-radius:var(--pill);padding:10px 18px;box-shadow:var(--shadow);margin-top:12px}
.bulkbar.show{display:flex}
.bulkbar .bulk-n{font-weight:700}
.bulkbar .btn-ghost{border-color:color-mix(in srgb,var(--bg) 40%,transparent);color:var(--bg)}
.bulkbar .btn-ghost:hover{background:color-mix(in srgb,var(--bg) 12%,transparent)}

/* ── 12. DRAWER / MODAL ──────────────────────────────────────────────────── */
.backdrop{position:fixed;inset:0;background:color-mix(in srgb,var(--text) 42%,transparent);backdrop-filter:blur(3px);
  z-index:100;opacity:0;animation:fade .18s ease forwards}
@keyframes fade{to{opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(620px,100%);background:var(--bg);z-index:101;
  box-shadow:-24px 0 70px rgba(6,10,20,.28);display:flex;flex-direction:column;animation:slidein .22s ease}
@keyframes slidein{from{transform:translateX(30px);opacity:.6}}
.drawer-head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:2}
.drawer-head .d-title{font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.2}
.drawer-body{padding:20px 22px 28px;overflow-y:auto;flex:1}
.drawer-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;flex-wrap:wrap;background:var(--bg)}
.modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:20px}
.modal-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 24px 70px rgba(6,10,20,.28);
  width:min(560px,100%);max-height:86vh;overflow-y:auto;padding:26px;animation:pop .2s ease}
.modal-card.wide{width:min(820px,100%)}
/* Заголовок модалки: название слева, крестик справа, без переноса на узких экранах */
.modal-card>.spread{flex-wrap:nowrap;align-items:flex-start}
.modal-card>.spread h2{flex:1 1 auto;min-width:0;margin:0}
@keyframes pop{from{transform:scale(.97);opacity:.5}}
.icon-btn{background:transparent;border:0;color:var(--muted);cursor:pointer;min-width:44px;min-height:44px;
  border-radius:50%;display:inline-grid;place-items:center}
.icon-btn:hover{background:var(--card);color:var(--text)}

/* ── 13. ТОСТЫ ───────────────────────────────────────────────────────────── */
.toasts{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 32px))}
.toast{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border:1px solid var(--border);
  border-left:4px solid var(--info);border-radius:var(--r-l);padding:14px 16px;box-shadow:var(--shadow);animation:slidein .2s ease}
.toast.ok{border-left-color:var(--ok)} .toast.warn{border-left-color:var(--warn)} .toast.err{border-left-color:var(--err)}
.toast .t-act{margin-left:auto;background:none;border:0;color:var(--accent);font-weight:700;cursor:pointer;padding:0}
.toast p{font-size:14px;line-height:1.4}

/* ── 14. СКЕЛЕТОНЫ / ПУСТЫЕ СОСТОЯНИЯ / ОШИБКИ ──────────────────────────── */
.skel{background:linear-gradient(90deg,var(--card2) 25%,color-mix(in srgb,var(--card2) 55%,var(--bg)) 37%,var(--card2) 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:var(--r-m)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skel-line{height:14px;margin:8px 0}.skel-line.sm{width:40%}.skel-line.md{width:70%}
.skel-card{height:120px}.skel-kpi{height:112px}
.empty{text-align:center;padding:44px 22px;display:grid;gap:12px;justify-items:center}
.empty .e-ic{width:64px;height:64px;border-radius:50%;background:var(--card2);display:grid;place-items:center;color:var(--accent)}
.empty h3{font-family:var(--font-display)}
.empty p{color:var(--muted);max-width:460px}
.errbox{background:var(--err-soft);border:1px solid var(--err);border-radius:var(--r-l);padding:16px 18px;display:flex;gap:12px;align-items:flex-start}
.errbox .ic{color:var(--err)}

/* ── 15. ТАЙМЛАЙН / ЛЕНТА ────────────────────────────────────────────────── */
.tl{display:grid;gap:0;position:relative;margin-left:6px}
.tl-item{display:grid;grid-template-columns:28px 1fr;gap:12px;padding-bottom:16px;position:relative}
.tl-item::before{content:"";position:absolute;left:13px;top:22px;bottom:0;width:2px;background:var(--border)}
.tl-item:last-child::before{display:none}
.tl-item .tl-dot{width:28px;height:28px;border-radius:50%;background:var(--card2);border:1px solid var(--border);display:grid;place-items:center;color:var(--accent);z-index:1}
.tl-item .tl-body{background:var(--card);border:1px solid var(--border);border-radius:var(--r-m);padding:10px 14px}
.tl-item .tl-time{font-size:12px;color:var(--muted)}
.tl-item .tl-title{font-weight:600;font-size:14px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;font-size:14px}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{min-width:0;word-break:break-word}
.sect{border:1px solid var(--border);border-radius:var(--r-l);background:var(--card);padding:14px 16px}
.sect>h4{font-family:var(--font-ui);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.mini{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px}
.mini:last-child{border-bottom:0}
.mini .m-ic{width:32px;height:32px;border-radius:50%;background:var(--card2);display:grid;place-items:center;color:var(--accent);flex:0 0 auto}
.links-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}

/* ── 16. ГРАФИКИ (инлайн-SVG, без внешних библиотек) ────────────────────── */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .bar{fill:var(--accent)}
.chart .bar.alt{fill:var(--accent2)}
.chart .bar-dim{fill:color-mix(in srgb,var(--accent) 35%,var(--card2))}
.chart .axis{stroke:var(--border);stroke-width:1}
.chart .gridline{stroke:var(--border);stroke-width:1;stroke-dasharray:3 4}
.chart .lbl{fill:var(--muted);font-size:11px;font-family:var(--font-ui)}
.chart .val{fill:var(--text);font-size:11px;font-weight:700;font-family:var(--font-ui)}
.chart .ln{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.chart .ln2{fill:none;stroke:var(--accent2);stroke-width:2.5;stroke-linejoin:round}
.chart .area{fill:color-mix(in srgb,var(--accent) 14%,transparent)}
.funnel-row{display:flex;align-items:center;gap:10px;padding:7px 0}
.funnel-row .f-name{flex:0 1 auto;min-width:0;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.funnel-track{flex:1 1 40px;min-width:24px;overflow:hidden}
.funnel-bar{height:24px;border-radius:var(--pill);background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--accent2)));min-width:6px}
.funnel-row .f-num{flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
/* Загрузка менеджеров: список как воронка, но полоса — синяя (акцент2) и бейдж просрочки */
.funnel-bar.is-wl{background:linear-gradient(90deg,var(--accent2),color-mix(in srgb,var(--accent2) 55%,#5B7CA6))}
.wl-od{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:var(--pill);background:color-mix(in srgb,var(--err) 14%,transparent);color:var(--err);font-size:11px;font-weight:700}
.wl-av{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;border-radius:50%;background:color-mix(in srgb,var(--accent2) 12%,var(--card));color:var(--accent2);font-size:11px;font-weight:700;vertical-align:middle;flex:0 0 auto}
/* Организация под именем контакта (ФИО / должность / компания) */
.c-org{display:flex;align-items:center;gap:5px;margin-top:2px}
.c-org svg{flex:0 0 auto;opacity:.75}
/* Кликабельные карточки/строки клиента (открывают карточку) */
tr[data-contact],.card[data-contact]{cursor:pointer}
tr[data-contact]:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.card[data-contact]:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
tr[data-cp]{cursor:pointer}
tr[data-cp]:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}

/* ── 17. КАЛЕНДАРЬ ───────────────────────────────────────────────────────── */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;width:100%}
.cal .cdow{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;text-align:center;padding:4px 0}
.cal .cday{min-width:0;min-height:104px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-m);padding:8px;display:flex;flex-direction:column;gap:6px}
.cal .cday.out{opacity:.5}
.cal .cday.today{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.cal .cday .d-num{font-size:12px;font-weight:700;color:var(--muted)}
.cal .ev{font-size:11px;background:var(--card2);border-left:3px solid var(--accent);border-radius:6px;padding:4px 6px;cursor:pointer;line-height:1.25}
.cal .cday .cal-badge{appearance:none;-webkit-appearance:none;align-self:center;margin:auto;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text);font:700 13px/1 var(--font-ui);border-radius:var(--pill);padding:6px 11px;min-height:30px;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.cal .cday .cal-badge:hover{background:color-mix(in srgb,var(--accent) 26%,transparent);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.cal .cday .cal-badge:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.day-list{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.day-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:var(--r-m);padding:10px 12px;margin-bottom:10px}
.day-total .dt-label{font-weight:600;color:var(--muted)}
.day-total .dt-sum{font-weight:700;font-size:16px;color:var(--text);white-space:nowrap}
.day-row{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:var(--r-m);padding:10px 12px;cursor:pointer;font:inherit;color:var(--text)}
.day-row:hover{border-color:var(--accent)}
.day-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dr-main{min-width:0;width:100%}
.dr-name{font-weight:600;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.dr-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:3px}
.dr-owner{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-sum{flex:0 0 auto;font-weight:700;white-space:nowrap;color:var(--text)}
.day-row .tag{align-self:flex-start;white-space:nowrap;margin-top:2px}
.status-pill{display:inline-block;font:700 12px/1 var(--font-ui);padding:5px 9px;border-radius:var(--pill);white-space:nowrap}
.status-pill.ok{background:color-mix(in srgb,#22c55e 18%,transparent);color:#15803d}
.status-pill.warn{background:color-mix(in srgb,#f59e0b 22%,transparent);color:#92400e}
.status-pill.risk{background:color-mix(in srgb,#ef4444 18%,transparent);color:#b91c1c}

/* ── 18. КОНСТРУКТОР ОБЪЕКТОВ / АДМИН ───────────────────────────────────── */
.stepsnav{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:16px}
.step-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:var(--pill);
  border:1px solid var(--border);background:var(--card);color:var(--muted);font:600 14px/1 var(--font-ui);cursor:pointer}
.step-btn .n{width:22px;height:22px;border-radius:50%;background:var(--card2);display:grid;place-items:center;font-size:12px}
.step-btn[aria-current="step"]{border-color:var(--accent);color:var(--text);background:var(--card2)}
.step-btn[aria-current="step"] .n{background:var(--btn-bg,var(--accent));color:var(--ink)}
.builder{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.tree{display:grid;gap:4px}
.tree .tnode{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-m);cursor:pointer;font-size:14px;border:1px solid transparent}
.tree .tnode:hover{background:var(--card)}
.tree .tnode[aria-selected="true"]{background:var(--card2);border-color:var(--border);font-weight:600}
.tree .tnode .kind{margin-left:auto;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.palette{display:grid;gap:8px}
.palette .pitem{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px dashed var(--border);border-radius:var(--r-m);font-size:13px;cursor:grab;background:var(--card)}
.matrix{width:100%;border-collapse:collapse;font-size:13px}
.matrix th,.matrix td{border:1px solid var(--border);padding:7px 10px;text-align:center}
.matrix th:first-child,.matrix td:first-child{text-align:left}

/* ── 19. УТИЛИТЫ ─────────────────────────────────────────────────────────── */
.hide{display:none !important}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.gap8{gap:8px}.gap16{gap:16px}
.text-ok{color:var(--ok)}.text-err{color:var(--err)}.text-warn{color:var(--warn)}
.nowrap{white-space:nowrap}
.w-100{width:100%}
.c-scroll{overflow-x:auto;white-space:nowrap;padding-bottom:4px}

/* ── 20. АДАПТИВ §8-Б.5: 1180 / 1100 / 900 / 640 / 560 ──────────────────── */
@media(max-width:1180px){:root{--crm-nav-w:220px}}
@media(max-width:1100px){
  .hacts .sw{display:none}
  .acc-cycle{display:inline-flex;align-items:center;justify-content:center}
  .crm-shell{grid-template-columns:1fr}
  /* ≤1100: полоса разделов — это уже сам .crm-side (см. правила ниже), дубль ленты скрываем */
  .crm-ribbon{display:none}
  .crm-side{position:static;display:flex;overflow-x:auto;gap:6px;padding:6px 2px;background:var(--card);
    border:1px solid var(--border);border-radius:var(--pill);margin-bottom:6px}
  .crm-side .snav-title,.crm-side a .cnt{display:none}
  .crm-side a{white-space:nowrap;border-radius:var(--pill);min-height:40px}
  .crm-side a[aria-current="page"]{box-shadow:none;background:var(--btn-bg,var(--accent));color:var(--ink)}
  .builder{grid-template-columns:1fr}
}
@media(max-width:900px){
  h1{font-size:36px}h2{font-size:26px}
  header.site nav{display:none}
  /* Ленту разделов НЕ скрываем: на мобильном она становится горизонтальной полосой
     со свайпом (правила из @media 1100). Бургер-меню — дополнение, не замена. */
  .crm-side{margin-bottom:4px}
  .hrow{gap:10px;grid-template-columns:auto 1fr;min-height:64px}
  .hacts{justify-self:end}
  .fcols{grid-template-columns:1fr 1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  /* мобильный канбан — колонки со свайпом */
  .kcol{flex-basis:80vw;min-width:80vw}
  .kv{grid-template-columns:1fr}
  /* таблицы — карточный режим */
  table.tbl thead{display:none}
  table.tbl,table.tbl tbody,table.tbl tr,table.tbl td{display:block;width:100%;min-width:0}
  table.tbl tr{border:1px solid var(--border);border-radius:var(--r-m);margin:10px;padding:6px 4px;background:var(--bg)}
  table.tbl td{border:0;display:flex;gap:12px;padding:8px 12px}
  table.tbl td::before{content:attr(data-l);flex:0 0 42%;color:var(--muted);font-weight:600;font-size:12px}
  table.tbl td.num{text-align:left}
  .funnel-row{gap:8px}
}
@media(max-width:640px){
  /* C8 2026-10-08: гасим горизонтальный overflow страницы (календарь/оверлеи);
     внутренние скролл-панели (.tabs и пр.) скроллятся сами. */
  html,body{overflow-x:clip}
  .wrap{padding:0 16px}
  .kpi-grid{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr}
  /* Фильтры сделок — ровные 2 колонки вместо cramped flex-wrap */
  .filters .frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end}
  .filters .frow>.grow{grid-column:1/-1}
  .filters .frow>button{grid-column:1/-1;justify-self:start;width:auto}
  .drawer{width:100%}
  .modal{padding:12px}
  .modal-card{padding:18px;max-height:90vh}
  .cal{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .cal .cday{min-height:74px;padding:5px}
  .page-head{align-items:flex-start}
  .tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  .tab-btn{justify-content:center;padding:0 8px;font-size:13px}
  .page-head .row{width:100%}
  .toasts{left:16px;right:16px;bottom:12px;max-width:none}
}
@media(max-width:560px){
  h1{font-size:30px}
  .btn{width:100%}
  .row>.btn,.page-head .btn{width:auto}
  .hero{padding:20px 0 4px}
  .card{padding:18px}
  .kcol{flex-basis:88vw;min-width:88vw}
}
/* ── 21. ДОСТУПНОСТЬ: prefers-reduced-motion ───────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}
@media print{
  header.site,.crm-side,.bulkbar,.toasts,.drawer-foot{display:none !important}
  body{background:#fff}
}

/* ── 22. МОСТ К UI-ALFA (ui-alfa.css грузится до crm.css) ──────────────────
   ui-alfa задаёт body{font-family:var(--a-font)!important} — CRM наследует
   типографику лендинга (data-type alfa-golos → Golos Text/Manrope). */
body{font-family:var(--font-ui) !important}
/* Логотип GRAMATON.CRM (как в /mail) */
.site-header .logo-crm{align-items:baseline;gap:4px;line-height:1}
.site-header .logo-crm .lm-word,.site-header .logo-crm .lm-dot,.site-header .logo-crm .lm-service{font-family:'Montserrat',var(--font-ui);line-height:1}
.site-header .logo-crm .lm-word{font-weight:800;font-size:21px;letter-spacing:2px;color:var(--text)}
.site-header .logo-crm .lm-dot{font-weight:800;font-size:21px;color:var(--accent)}
.site-header .logo-crm .lm-service{font-weight:400;font-size:16px;color:var(--muted)}
@media(max-width:900px){.site-header .logo-crm .lm-word{font-size:18px;letter-spacing:1.6px}.site-header .logo-crm .lm-dot{font-size:18px}}
@media(max-width:600px){
  .site-header .hbrand{min-width:0;overflow:hidden}
  .site-header .logo-crm{min-width:0;overflow:hidden}
  .site-header .logo-crm .lm-word{font-size:15px;letter-spacing:1px}
  .site-header .logo-crm .lm-dot{font-size:15px}
  .site-header .logo-crm .lm-service{display:none}
  .site-header .hrow{gap:8px}
  .site-header .wrap{padding:0 14px}
  .site-header .hacts{gap:8px}
  .site-header .acc-cycle{min-width:40px;min-height:40px}
}
/* Хедер как в кабинете: «Кабинет» (primary) + «Выйти» (ghost).
   (site-header.css для /mail скрывает .hdr-acc — здесь возвращаем, как в cabinet.html) */
.site-header .hdr-acc{display:inline-flex}
#hdrUser{display:inline-flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:nowrap}
.hdr-acc,.hdr-logout,.hdr-login{min-height:44px;padding:9px 18px;font-size:15px}
/* Кнопка «+Сделка» в шапке CRM: прозрачная, тонкая красная обводка, текст акцентом.
   Скоуп .site-header (0,2,0) — иначе .site-header .btn{border:...transparent} перебивает .btn-outline. */
.site-header .hdr-newdeal{min-height:44px;padding:9px 18px;font-size:15px;gap:0;white-space:nowrap;
  background:transparent;border:1.5px solid var(--a-accent,var(--accent,#EF3124));color:var(--a-accent,var(--accent,#EF3124))}
.site-header .hdr-newdeal:hover{background:color-mix(in srgb,var(--a-accent,var(--accent,#EF3124)) 10%,transparent);transform:none}
.hdr-logout,.hdr-login{display:inline-flex}
@media(max-width:600px){
  /* Как в кабинете: на узком экране «Кабинет» скрыт, остаётся «Выйти»/«Войти» */
  .site-header .hdr-acc{display:none !important}
  .site-header .hdr-newdeal{min-height:40px;padding:8px 14px;font-size:13px}
  .hdr-logout,.hdr-login{min-height:40px;padding:8px 12px;font-size:13px}
  .hacts{gap:6px;flex-wrap:nowrap;min-width:0;justify-content:flex-end}
}

/* ── 23. МЕЛКИЕ ДОПОЛНЕНИЯ (закрытие стилевых пробелов) ─────────────────── */
.ic-wrap{display:inline-flex;align-self:center;color:var(--accent)}
.toast.ok .ic-wrap{color:var(--ok)}
.toast.warn .ic-wrap{color:var(--warn)}
.toast.err .ic-wrap{color:var(--err)}
.mb16{margin-bottom:16px}
.filters .frow>.grow{flex:1 1 240px}

/* ── 24. ОБУЧЕНИЕ: видео-плеер + порядок работы (адаптивно, моб.) ───────── */
.guide-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px;align-items:start;margin-bottom:16px}
.guide-video{padding:12px}
.guide-video video{width:100%;height:auto;display:block;border-radius:var(--r-m);background:#0B1F35;aspect-ratio:16/10;object-fit:contain}
.guide-video-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.guide-list{list-style:none;margin:0;padding:0;counter-reset:g}
.guide-list li{counter-increment:g;display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;padding:9px 0;border-bottom:1px solid var(--border);align-items:start}
.guide-list li:last-child{border-bottom:0}
.guide-list li::before{content:counter(g);grid-row:span 2;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1}
.guide-list strong{font-size:14px;font-weight:600;color:var(--text)}
.guide-list .small{grid-column:2}
.guide-check{margin:0;padding-left:20px}
.guide-check li{margin:7px 0}
@media(max-width:900px){.guide-grid{grid-template-columns:1fr}}
@media(max-width:640px){
  .guide-video{padding:8px}
  .guide-video video{aspect-ratio:4/3}
  .guide-video-foot{gap:8px}
  .guide-video-foot .btn{width:100%;justify-content:center}
}
/* Призрак перетаскиваемой карточки сделки (следует за курсором при drag) */
.kcard.drag-ghost{position:fixed;z-index:1200;pointer-events:none;opacity:.92;transform:rotate(1.5deg);box-shadow:0 12px 28px rgba(11,31,53,.28);cursor:grabbing}

/* ── 25. ИНТЕГРАЦИИ: свои доступы (BYO credentials) — мастер + карточки ────
   P1-I, 2026-10-13. Экрана «Настройки → Интеграции»: две группы (Мессенджеры/CRM),
   карточки статуса, пошаговый мастер, результат проверки связи.
   Дизайн: один акцент (--accent), токены пресетов a/b/c/d, контраст ≥4.5:1,
   фокус-видимый, адаптив 1180/1100/900/640/560.                              */

/* Статусные цвета: в тёмных пресетах (c/d) — осветлённые варианты,
   чтобы текст оставался WCAG AA на --card. */
:root{
  --int-ok:var(--ok); --int-ok-soft:var(--ok-soft);
  --int-warn:var(--warn); --int-warn-soft:var(--warn-soft);
  --int-err:var(--err); --int-err-soft:var(--err-soft);
}
html[data-accent="c"],html[data-accent="d"]{
  --int-ok:#5FD39A; --int-ok-soft:rgba(95,211,154,.14);
  --int-warn:#F2C14E; --int-warn-soft:rgba(242,193,78,.14);
  --int-err:#FF9A90; --int-err-soft:rgba(255,154,144,.16);
}

/* Заголовок экрана: текст «зачем» + действия */
.int-screen .page-head{margin-bottom:14px}
.int-note{display:flex;gap:10px;align-items:flex-start;background:var(--info-soft);border:1px solid color-mix(in srgb,var(--info) 34%,transparent);
  border-radius:var(--r-m);padding:12px 14px;margin-bottom:16px;font-size:14px;color:var(--text)}
.int-note .ic{color:var(--info);flex:0 0 auto;margin-top:2px}
.int-note p{margin:0;max-width:900px}

/* Сводка */
.int-sum{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:18px}
.int-sum-item{background:var(--card);border:1px solid var(--border);border-radius:var(--r-m);padding:12px 14px;display:grid;gap:2px}
.int-sum-item .k{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.int-sum-item strong{font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1.1}

/* Группа провайдеров */
.int-group{margin-bottom:26px}
.int-group-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.int-group-head h3{margin:0}
.int-group-head p{margin:4px 0 0;max-width:760px}
.int-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* Карточка провайдера */
.int-card{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-l);padding:16px;box-shadow:var(--shadow);min-width:0}
.int-card-head{display:flex;align-items:center;gap:10px;min-width:0}
.int-ava{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  font:700 14px/1 var(--font-ui);letter-spacing:.02em}
.int-card-title{min-width:0;flex:1 1 auto}
.int-card-title h4{font-family:var(--font-ui);font-size:16px;font-weight:700;margin:0;color:var(--text)}
.int-card-body{display:grid;gap:8px}
.int-card-foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.int-card-foot .btn{flex:0 1 auto}

/* Статус-пилюля */
.int-pill{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-ui);padding:5px 10px;
  border-radius:var(--pill);border:1px solid transparent;white-space:nowrap}
.int-pill.ok{background:var(--int-ok-soft);color:var(--int-ok);border-color:color-mix(in srgb,var(--int-ok) 40%,transparent)}
.int-pill.warn{background:var(--int-warn-soft);color:var(--int-warn);border-color:color-mix(in srgb,var(--int-warn) 40%,transparent)}
.int-pill.err{background:var(--int-err-soft);color:var(--int-err);border-color:color-mix(in srgb,var(--int-err) 40%,transparent)}
.int-pill.off{background:var(--card2);color:var(--muted);border-color:var(--border)}

.int-msg{margin:0;display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.int-msg .ic{flex:0 0 auto;margin-top:2px}
.int-meta{display:grid;gap:6px;font-size:13px}
.int-meta-row{display:flex;gap:10px;align-items:baseline;min-width:0}
.int-meta-row .k{flex:0 0 88px;color:var(--muted);font-weight:600}
.int-secret{font-family:var(--gram-font-mono,'Space Mono',ui-monospace,SFMono-Regular,monospace);
  font-size:13px;letter-spacing:.06em;background:var(--card2);border:1px solid var(--border);
  border-radius:var(--r-s,6px);padding:2px 8px;word-break:break-all}
.int-caps{display:flex;flex-wrap:wrap;gap:6px}
.int-cap{font-size:12px;color:var(--muted);background:var(--card2);border:1px solid var(--border);border-radius:var(--pill);padding:3px 9px}
.int-doc{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;margin-top:2px;width:max-content}
.int-doc:hover{text-decoration:underline}
.int-danger{color:var(--err);border-color:color-mix(in srgb,var(--err) 34%,transparent)}
.int-danger:hover{background:var(--int-err-soft)}
.int-privacy{display:flex;gap:8px;align-items:flex-start;margin:18px 0 0;line-height:1.5}
.int-privacy .ic{flex:0 0 auto;color:var(--muted);margin-top:2px}

/* ── Мастер подключения ─────────────────────────────────────────────────── */
.int-w{display:grid;gap:14px;min-width:0}
.int-steps{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.int-step{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);
  background:var(--card);border:1px solid var(--border);border-radius:var(--pill);padding:7px 12px}
.int-step .n{width:20px;height:20px;border-radius:50%;background:var(--card2);display:grid;place-items:center;font-size:12px;color:var(--text)}
.int-step.is-step{border-color:var(--accent);color:var(--text)}
.int-step.is-step .n{background:var(--btn-bg,var(--accent));color:var(--ink)}
.int-step.is-done .n{background:var(--int-ok-soft);color:var(--int-ok)}

.int-pick{display:grid;gap:14px;max-height:min(52vh,460px);overflow-y:auto;padding-right:2px}
.int-pick-group h4{font-family:var(--font-ui);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.int-pick-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r-m);padding:10px 12px;cursor:pointer;font-family:inherit;
  color:var(--text);min-height:56px;transition:border-color .18s ease,background .18s ease}
.int-pick-item+.int-pick-item{margin-top:6px}
.int-pick-item:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));background:var(--card2)}
.int-pick-item .int-pick-txt{display:grid;gap:2px;flex:1 1 auto;min-width:0}
.int-pick-item .int-pick-txt strong{font-size:15px}
.int-pick-item .ic{color:var(--muted);flex:0 0 auto}

.int-prov-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r-m);padding:12px 14px}
.int-prov-head h3{margin:0;font-size:18px}
.int-prov-head p{margin:2px 0 0}
.int-prov-head .int-doc{margin-left:auto}

.int-vars{display:grid;gap:8px;border:1px solid var(--border);border-radius:var(--r-m);padding:12px 14px;background:var(--card)}
.int-vars legend{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:0 6px}
.int-var{display:flex;gap:10px;align-items:flex-start;min-height:44px;cursor:pointer;font-size:14px}
.int-var input{margin-top:5px;width:18px;height:18px;accent-color:var(--accent);flex:0 0 auto}
.int-var span{display:grid;gap:2px}
.int-var strong{font-weight:600}

.int-form{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.int-input-row{display:flex;gap:8px;align-items:center}
.int-input-row .input{flex:1 1 auto;min-width:0}
.int-eye{flex:0 0 auto;min-width:44px;min-height:44px;border:1px solid var(--border);background:var(--card);
  border-radius:var(--r-m);cursor:pointer;color:var(--muted);display:grid;place-items:center}
.int-eye:hover{color:var(--text);background:var(--card2)}
.int-eye[aria-pressed="true"]{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 44%,transparent)}
.int-live{min-height:20px}
.int-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--border);padding-top:14px}
.int-result{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r-m);padding:14px 16px;border:1px solid transparent}
.int-result .ic{flex:0 0 auto}
.int-result h3{margin:0 0 4px;font-size:18px}
.int-result p{margin:0 0 4px}
.int-result.ok{background:var(--int-ok-soft);border-color:color-mix(in srgb,var(--int-ok) 38%,transparent)}
.int-result.ok .ic{color:var(--int-ok)}
.int-result.err{background:var(--int-err-soft);border-color:color-mix(in srgb,var(--int-err) 38%,transparent)}
.int-result.err .ic{color:var(--int-err)}

/* ── Адаптив (1180 / 1100 / 900 / 640 / 560) ─────────────────────────────── */
@media(max-width:1100px){
  .int-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
@media(max-width:900px){
  .int-pick{max-height:min(46vh,380px)}
  .int-form{grid-template-columns:1fr}
}
@media(max-width:640px){
  .int-grid{grid-template-columns:1fr}
  .int-card-foot .btn{flex:1 1 100%;width:100%}
  .int-group-head .btn{width:100%}
  .int-foot{flex-direction:column-reverse;align-items:stretch}
  .int-foot .row{width:100%}
  .int-foot .btn{width:100%}
  .int-meta-row{flex-direction:column;gap:2px}
  .int-meta-row .k{flex:0 0 auto}
  .int-prov-head .int-doc{margin-left:0}
}
@media(max-width:560px){
  .int-steps{gap:4px}
  .int-step{font-size:12px;padding:6px 10px}
}

/* ══════════════════════════════════════════════════════════════════════════
   КОКПИТ ПЕРЕПИСКИ (P0-F1, спринт 2026-10-13)
   Три панели: список диалогов · тред · карточка клиента.
   Классы .ck-*: диалоги, сообщения, теги, заметки, счётчики непрочитанных.
   ══════════════════════════════════════════════════════════════════════════ */
.ck{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr) minmax(260px,320px);gap:16px;align-items:start;margin-top:16px}
.ck-pane{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column;overflow:hidden}
.ck-pane-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card)}
.ck-pane-head strong{font-size:14px}
.ck-list{max-height:min(72vh,760px);overflow-y:auto;overscroll-behavior:contain}

/* ── список диалогов ── */
.ck-item{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;width:100%;text-align:left;background:transparent;
  border:0;border-bottom:1px solid var(--border);padding:12px 14px;cursor:pointer;font:inherit;color:var(--text);min-height:64px}
.ck-item:hover{background:var(--card2)}
.ck-item:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.ck-item.is-open{background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
.ck-av{width:38px;height:38px;border-radius:50%;background:var(--card2);border:1px solid var(--border);
  display:grid;place-items:center;font:700 13px/1 var(--font-ui);color:var(--accent2);flex:0 0 auto}
.ck-item-main{display:grid;gap:3px;min-width:0}
.ck-item-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ck-item-top strong{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-item-sub{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-item-prev{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ck-item-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px}
.ck-ch{display:inline-flex;align-items:center;gap:4px;font:600 11px/1 var(--font-ui);padding:3px 8px;border-radius:var(--pill);
  background:var(--card2);border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.ck-ch .ic{stroke:currentColor}
.ck-dir{font-size:11px;color:var(--muted)}
.ck-unread{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--pill);
  background:var(--text);color:var(--bg);font:700 11px/1 var(--font-ui)}
.ck-status{display:inline-flex;align-items:center;font:700 11px/1 var(--font-ui);padding:4px 8px;border-radius:var(--pill);white-space:nowrap;
  background:var(--card2);border:1px solid var(--border);color:var(--muted)}
.ck-status.ck-st-new{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:color-mix(in srgb,var(--accent) 68%,var(--text))}
.ck-status.ck-st-linked{background:color-mix(in srgb,var(--accent2) 12%,transparent);border-color:color-mix(in srgb,var(--accent2) 34%,transparent);color:color-mix(in srgb,var(--accent2) 68%,var(--text))}
.ck-status.ck-st-reg{background:color-mix(in srgb,var(--info,var(--accent2)) 12%,transparent);border-color:color-mix(in srgb,var(--info,var(--accent2)) 34%,transparent);color:color-mix(in srgb,var(--info,var(--accent2)) 68%,var(--text))}
.ck-status.ck-st-ans{background:color-mix(in srgb,var(--ok) 14%,transparent);border-color:color-mix(in srgb,var(--ok) 36%,transparent);color:color-mix(in srgb,var(--ok) 72%,var(--text))}
.ck-status.ck-st-arch{opacity:.75}

/* ── тред ── */
.ck-thread{min-height:min(72vh,760px)}
.ck-thread-body{display:flex;flex-direction:column;min-height:0;flex:1}
.ck-thread-head{align-items:flex-start}
.ck-th-title{min-width:0}
.ck-th-title strong{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-th-acts{flex-wrap:wrap;justify-content:flex-end}
.ck-msgs{flex:1;min-height:280px;max-height:min(58vh,560px);overflow-y:auto;overscroll-behavior:contain;padding:16px;
  display:flex;flex-direction:column;gap:12px;background:var(--bg)}
.ck-msgs:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.ck-msg{max-width:min(80%,660px);background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);
  padding:10px 12px;box-shadow:var(--shadow);min-width:0}
.ck-msg.in{align-self:flex-start}
.ck-msg.out{align-self:flex-end;background:color-mix(in srgb,var(--accent) 9%,var(--card));border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.ck-msg.note{align-self:stretch;max-width:100%;border-style:dashed;background:var(--card2)}
.ck-msg.sys{align-self:center;max-width:100%;background:transparent;border:0;box-shadow:none;color:var(--muted);font-size:13px;padding:0}
.ck-msg-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.ck-msg-author{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--text);min-width:0}
.ck-msg-time{white-space:nowrap}
.ck-msg-body{margin-top:5px;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ck-msg-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.ck-badge{font:700 10px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:var(--pill);
  background:var(--card2);border:1px solid var(--border);color:var(--muted)}
.ck-badge.in{background:color-mix(in srgb,var(--accent2) 12%,transparent);border-color:color-mix(in srgb,var(--accent2) 32%,transparent);color:color-mix(in srgb,var(--accent2) 68%,var(--text))}
.ck-badge.out{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 32%,transparent);color:color-mix(in srgb,var(--accent) 68%,var(--text))}

/* ── композер ── */
.ck-compose{border-top:1px solid var(--border);padding:12px 14px 14px;display:grid;gap:10px;background:var(--card)}
.ck-mode{justify-self:start}
.ck-compose textarea{min-height:84px}
.ck-compose-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ck-compose-foot p{margin:0;max-width:62ch}
.ck-note-warn{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:color-mix(in srgb,var(--warn) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);border-radius:var(--r-m);padding:10px 12px;font-size:13px}
.ck-note-warn .ic{color:var(--warn);flex:0 0 auto}

/* ── карточка клиента ── */
.ck-side-body{padding:14px;display:grid;gap:16px;max-height:min(74vh,780px);overflow-y:auto}
.ck-card-head{display:flex;gap:12px;align-items:center;min-width:0}
.ck-avat{width:46px;height:46px;border-radius:50%;background:var(--card2);border:1px solid var(--border);display:grid;place-items:center;
  font:700 15px/1 var(--font-ui);color:var(--accent2);flex:0 0 auto}
.ck-card-name{min-width:0}
.ck-kv{grid-template-columns:110px minmax(0,1fr);font-size:13px}
.ck-kv>span{min-width:0;overflow-wrap:anywhere}
.ck-kv a{color:var(--accent)}
.ck-side-title{font:700 12px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ck-tags{display:flex;flex-wrap:wrap;gap:6px}
.ck-tag{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-ui);padding:5px 9px;border-radius:var(--pill);
  background:color-mix(in srgb,var(--accent) 8%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border))}
.ck-tag.sys{background:var(--card2);border-color:var(--border);color:var(--muted);font-weight:600}
.ck-tag button{border:0;background:transparent;color:var(--muted);cursor:pointer;font:700 14px/1 var(--font-ui);min-width:18px;padding:0}
.ck-tag button:hover{color:var(--err)}
.ck-tag-add{display:flex;gap:8px;margin-top:8px}
.ck-tag-add .input{min-width:0;flex:1}
.ck-notes{display:grid;gap:8px;margin-top:10px}
.ck-note-item{border:1px solid var(--border);border-radius:var(--r-m);padding:9px 11px;background:var(--card2)}
.ck-note-body{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:3px}
.ck-owner{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ck-owner .select{min-width:0;flex:1}
.filterrow .ck-flag{font-size:12px}
.ck-filters .tabs{margin-top:2px}

@media(max-width:1180px){
  .ck{grid-template-columns:minmax(240px,280px) minmax(0,1fr)}
  .ck-side{grid-column:1 / -1}
  .ck-side-body{max-height:none}
}
@media(max-width:900px){
  .ck{grid-template-columns:minmax(0,1fr)}
  .ck-list{max-height:none}
  .ck:not(.ck-open) .ck-thread,.ck:not(.ck-open) .ck-side{display:none}
  .ck.ck-open .ck-list-pane{display:none}
  .ck-msgs{max-height:none;min-height:220px}
  .ck-msg{max-width:100%}
}
@media(max-width:560px){
  .ck-pane-head{flex-wrap:wrap}
  .ck-th-acts .btn{flex:1 1 auto}
  .ck-compose-foot .btn{width:100%}
  .ck-kv{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .ck-kv>span:nth-child(odd){color:var(--muted);font-size:12px;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){
  .ck-item{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   AI-ПАНЕЛЬ В ТРЕДЕ + бейдж ожидания (P0-F2, спринт 2026-10-13)

   «✦ Подсказать ответ» (варианты + техника продаж + «зачем», перебор ‹ ›,
   «Вставить»), «✎ Исправить ошибки» (было/стало, «Применить»/«Отмена»),
   «✦ Разбор» (выдвижная панель «Суть · Статус · Что делать»), бейдж «ждёт N ч/мин»,
   ★ избранное, «Позвать коллегу» (заглушка F3), «Карточка клиента», баннер приватности.
   Токены и 4 пресета (data-accent a/b/c/d) — по DESIGN.md; фокус — :focus-visible.
   ══════════════════════════════════════════════════════════════════════════ */

/* Служебные оттенки статусов: в тёмных пресетах (c/d) базовые --ok/--warn/--err
   дают недостаточный контраст на тёмной карточке — берём светлые аналоги. */
:root{--ck-ok:var(--ok);--ck-warn:var(--warn);--ck-err:var(--err)}
html[data-accent="c"],html[data-accent="d"]{--ck-ok:#7BE0A8;--ck-warn:#E9C46A;--ck-err:#FF9C8F}

.ck-thread{position:relative}

/* ── Панель действий над композером ── */
.ck-ai-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ck-ai-bar-note{margin-left:auto}
.ck-ai-pill{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--font-ui);cursor:pointer;
  min-height:40px;padding:10px 16px;border-radius:var(--pill);border:1px solid color-mix(in srgb,var(--accent) 46%,transparent);
  background:var(--btn-bg,var(--accent));color:var(--ink);
  box-shadow:var(--shadow);transition:background .15s ease,box-shadow .15s ease}
.ck-ai-pill:hover{background:var(--accent-strong,var(--btn-bg,var(--accent)))}
.ck-ai-pill.is-on,.ck-ai-pill[aria-pressed="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}
.ck-ai-pill[aria-busy="true"]{cursor:progress}
.ck-ai-spark{font-size:15px;line-height:1}
.ck-ai-btn.is-on,.ck-ai-btn[aria-pressed="true"]{background:var(--card2);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));color:var(--text)}

/* ── Инлайн-панели ИИ над полем ввода ── */
.ck-ai-host{display:grid;gap:10px}
.ck-ai-host:empty{display:none}
.ck-ai-panel{border:1px solid var(--border);border-radius:var(--r-l);background:var(--card2);padding:12px;display:grid;gap:10px}
.ck-ai-panel:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ck-ai-panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
.ck-ai-panel-title{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--font-ui);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ck-ai-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ck-ai-tech{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--font-ui);padding:5px 10px;border-radius:var(--pill);
  background:color-mix(in srgb,var(--accent2) 12%,var(--card));border:1px solid color-mix(in srgb,var(--accent2) 32%,transparent);
  color:color-mix(in srgb,var(--accent2) 55%,var(--text))}
.ck-ai-inserted{font:700 11px/1 var(--font-ui);color:color-mix(in srgb,var(--ck-ok) 74%,var(--text))}
.ck-ai-text{margin:0;font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
.ck-ai-why{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.ck-ai-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ck-ai-nav{display:inline-flex;align-items:center;gap:6px}
.ck-ai-nav-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--card);
  color:var(--text);font:700 16px/1 var(--font-ui);display:grid;place-items:center;cursor:pointer}
.ck-ai-nav-btn:hover:not([disabled]){border-color:var(--accent);color:var(--accent)}
.ck-ai-nav-btn[disabled]{opacity:.5;cursor:default}
.ck-ai-count{font:600 12px/1 var(--font-ui);color:var(--muted);min-width:46px;text-align:center}

/* загрузка / деградация / ошибки */
.ck-ai-loading{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:13px;color:var(--muted)}
.ck-spin{width:14px;height:14px;border-radius:50%;flex:0 0 auto;display:inline-block;
  border:2px solid color-mix(in srgb,var(--accent) 32%,transparent);border-top-color:var(--accent);animation:ck-spin .7s linear infinite}
@keyframes ck-spin{to{transform:rotate(360deg)}}
.ck-ai-err{display:flex;align-items:flex-start;gap:9px;margin:0;font-size:13px;line-height:1.45;
  background:color-mix(in srgb,var(--ck-warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--ck-warn) 38%,transparent);
  border-radius:var(--r-m);padding:10px 12px}
.ck-ai-err .ic{flex:0 0 auto;color:var(--ck-warn);margin-top:1px}
.ck-ai-err.ok{background:color-mix(in srgb,var(--ck-ok) 12%,transparent);border-color:color-mix(in srgb,var(--ck-ok) 38%,transparent)}
.ck-ai-err.ok .ic{color:var(--ck-ok)}
.ck-ai-degraded{display:flex;align-items:center;gap:9px;margin:0;font-size:12.5px;line-height:1.4;
  background:color-mix(in srgb,var(--ck-warn) 10%,transparent);border:1px dashed color-mix(in srgb,var(--ck-warn) 46%,transparent);
  border-radius:var(--r-m);padding:9px 11px;color:color-mix(in srgb,var(--ck-warn) 62%,var(--text))}
.ck-ai-degraded .ic{flex:0 0 auto}
.ck-ai-degraded strong{font-weight:700}

/* «было → стало» и список правок */
.ck-ai-diff{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck-ai-diff-col{border:1px solid var(--border);border-radius:var(--r-m);background:var(--card);padding:10px;min-width:0}
.ck-ai-diff-col.after{border-color:color-mix(in srgb,var(--ck-ok) 40%,var(--border))}
.ck-ai-diff-label{margin:0 0 6px;font:700 11px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ck-ai-diff-text{font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-height:190px;overflow:auto}
.ck-ai-changes{display:grid;gap:5px;font-size:12.5px}
.ck-ai-change{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ck-ai-change del{color:color-mix(in srgb,var(--ck-err) 72%,var(--text));text-decoration:line-through}
.ck-ai-change ins{color:color-mix(in srgb,var(--ck-ok) 72%,var(--text));text-decoration:none;font-weight:600}

/* баннер приватности (наш козырь: контур внутри компании) */
.ck-ai-privacy{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;line-height:1.4;color:var(--muted);
  background:color-mix(in srgb,var(--accent2) 7%,transparent);border:1px dashed color-mix(in srgb,var(--accent2) 26%,var(--border));
  border-radius:var(--r-m);padding:8px 10px}

/* бейдж ожидания «ждёт N ч/мин» — красный, как метрика в KORT */
.ck-wait{display:inline-flex;align-items:center;font:700 11px/1 var(--font-ui);padding:5px 9px;border-radius:var(--pill);white-space:nowrap;
  background:color-mix(in srgb,var(--ck-err) 16%,var(--card));border:1px solid color-mix(in srgb,var(--ck-err) 46%,transparent);
  color:color-mix(in srgb,var(--ck-err) 62%,var(--text))}

/* звёздочка избранного — в шапке треда и в списке диалогов */
.ck-fav-btn[aria-pressed="true"],.ck-fav-btn.is-on{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.ck-fav-btn[aria-pressed="true"] .ic,.ck-fav-btn.is-on .ic{fill:currentColor}
.ck-fav-mark{color:var(--accent);font-size:13px;line-height:1}

/* свернуть/показать карточку клиента */
.ck.ck-hide-side{grid-template-columns:minmax(260px,320px) minmax(0,1fr)}
.ck.ck-hide-side .ck-side{display:none}

/* ── Выдвижная панель «Разбор переписки» ── */
.ck-ai-drawer{position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);z-index:6;display:flex;flex-direction:column;
  background:var(--card);border-left:1px solid var(--border);box-shadow:var(--shadow);animation:ck-slide .18s ease}
@keyframes ck-slide{from{transform:translateX(14px);opacity:.55}to{transform:none;opacity:1}}
.ck-ai-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.ck-ai-drawer-body{flex:1;overflow-y:auto;padding:14px;display:grid;gap:16px;align-content:start}
.ck-ai-drawer-foot{padding:12px 14px;border-top:1px solid var(--border)}
.ck-ai-sec{display:grid;gap:8px}
.ck-ai-sec-title{display:flex;align-items:center;gap:7px;margin:0;font:700 12px/1 var(--font-ui);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ck-ai-sec ul{margin:0;padding-left:18px;display:grid;gap:7px;font-size:13.5px;line-height:1.5}
.ck-ai-drawer .icon-btn{background:var(--card2)}

/* ── Адаптив: 1180 / 1100 / 900 / 640 / 560 ── */
@media(max-width:1180px){
  .ck.ck-hide-side{grid-template-columns:minmax(240px,280px) minmax(0,1fr)}
}
@media(max-width:900px){
  .ck.ck-hide-side{grid-template-columns:minmax(0,1fr)}
  .ck-ai-drawer{position:fixed;inset:0;width:100%;border-left:0;z-index:40}
  .ck-ai-bar-note{width:100%;margin-left:0}
}
@media(max-width:640px){
  .ck-ai-diff{grid-template-columns:1fr}
  .ck-ai-bar .btn{flex:1 1 auto}
  .ck-ai-panel-foot .row{width:100%}
  .ck-ai-panel-foot .row .btn{flex:1 1 auto}
  .ck-ai-pill{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .ck-ai-drawer,.ck-spin{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   P-BRIDGE-UI (этап C23, 2026-10-13): «Реквизиты компании» — только чтение.

   Экран показывает реквизиты из кабинета «Бизнес» (источник правды).
   Стили подчёркивают: поля НЕ редактируются (пометка «только чтение»), у данных
   явный источник (.src-badge), переход в «Бизнес» — связка с возвратом
   (.bridge-banner / .onb-card). Токены — общие с остальным CRM.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Пометка источника данных + «замок» только чтения */
.src-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.2px;
  padding:4px 11px;border-radius:var(--pill);background:var(--info-soft);color:var(--info);
  border:1px solid color-mix(in srgb,var(--info) 32%,transparent);white-space:nowrap}
.lock-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:4px 11px;border-radius:var(--pill);background:var(--card2);color:var(--muted);
  border:1px solid var(--border);white-space:nowrap}
.lock-pill .ic{width:14px;height:14px}

/* Карточка реквизитов */
.ro-card .ro-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px}
.ro-card .ro-head h3{margin:0}
.ro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 22px;margin:16px 0 4px}
.ro-grid--ids{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ro-f{min-width:0}
.ro-f dt{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;margin-bottom:4px}
.ro-f dd{margin:0;font-size:15px;color:var(--text);word-break:break-word;font-variant-numeric:tabular-nums}
.ro-f--empty dd .ro-none{color:var(--muted);font-style:italic;font-weight:400}
.ro-hint{font-size:12px;color:var(--muted);margin-top:2px}
.ro-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
/* Поля ввода реквизитов на этом экране отсутствуют by design: правка — только в «Бизнесе». */
.ro-card input,.ro-card select,.ro-card textarea{display:none!important}

/* Предупреждение о деградации («Бизнес» недоступен) */
.ro-warn{display:flex;gap:10px;align-items:flex-start;background:var(--warn-soft);
  border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);border-radius:var(--r-l);
  padding:12px 16px;margin-bottom:14px;color:var(--text)}
.ro-warn .ic{color:var(--warn);flex:0 0 auto}

/* Баннер «вернулись из Бизнеса» */
.bridge-banner{display:flex;gap:10px;align-items:flex-start;background:var(--ok-soft);
  border:1px solid color-mix(in srgb,var(--ok) 34%,transparent);border-radius:var(--r-l);
  padding:12px 16px;margin-bottom:14px}
.bridge-banner .ic{color:var(--ok);flex:0 0 auto}

/* Карточка онбординга */
.onb-card{border-color:color-mix(in srgb,var(--accent) 34%,var(--border))}
.onb-card .onb-head{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.onb-card .onb-head h3{margin:0;font-size:16px;text-transform:none;letter-spacing:0;color:var(--text)}
.onb-card .onb-head .ic{color:var(--accent)}
.onb-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

@media(max-width:640px){
  .ro-grid{grid-template-columns:1fr;gap:12px}
  .ro-acts .btn,.onb-acts .btn{flex:1 1 auto;justify-content:center}
  .ro-card .ro-head{gap:8px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   F3 (2026-10-13): шаблоны ответов в композере · «позвать коллегу» ·
   рабочие часы (настройки + индикация «вне рабочих часов»).
   Аддитивный блок: новых токенов не вводит, чужие правила не переопределяет.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Шаблоны ответов в композере — */
.ck-tpl-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ck-tpl-pill{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--font-ui);cursor:pointer;min-height:44px;
  padding:9px 14px;border-radius:var(--pill);border:1px solid var(--border);background:var(--card2);color:var(--text)}
.ck-tpl-pill:hover{border-color:var(--accent)}
.ck-tpl-pill.is-on,.ck-tpl-pill[aria-pressed="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}
.ck-tpl-host{display:block}
.ck-tpl-panel{border:1px solid var(--border);border-radius:var(--r-l);background:var(--card2);padding:12px;display:grid;gap:10px}
.ck-tpl-head{display:flex;align-items:center;gap:8px}
.ck-tpl-search{flex:1;min-width:0}
.ck-tpl-scopes{align-self:start}
.ck-tpl-list{display:grid;gap:6px;max-height:320px;overflow:auto}
.ck-tpl-item{display:flex;align-items:stretch;gap:6px;border:1px solid var(--border);border-radius:var(--r-m);background:var(--card)}
.ck-tpl-pick{flex:1;min-width:0;display:grid;gap:4px;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:10px 12px;border-radius:var(--r-m);color:var(--text);font:400 14px/1.35 var(--font-ui);min-height:44px}
.ck-tpl-pick:hover{background:var(--card2)}
.ck-tpl-pick:focus-visible{outline:3px solid var(--accent);outline-offset:-2px}
.ck-tpl-title{font-weight:700;overflow-wrap:anywhere}
.ck-tpl-badge{justify-self:start;font:700 10px/1 var(--font-ui);text-transform:uppercase;letter-spacing:.4px;
  padding:4px 8px;border-radius:var(--pill);background:var(--card2);border:1px solid var(--border);color:var(--muted)}
.ck-tpl-badge.scope{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.ck-tpl-prev{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.ck-tpl-item .icon-btn{align-self:center;margin-right:4px}
.ck-tpl-err{display:flex;gap:8px;align-items:flex-start;color:var(--text);background:var(--warn-soft);
  border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);border-radius:var(--r-m);padding:8px 10px;margin:0}
.ck-tpl-err .ic{color:var(--warn);flex:0 0 auto}
.ck-tpl-hint{margin:0}

/* — Участники диалога («позвать коллегу») — */
.ck-parts-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--card2)}
.ck-parts-label{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--font-ui);
  text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.ck-part-chip{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-ui);padding:5px 9px;
  border-radius:var(--pill);background:var(--card);border:1px solid var(--border);color:var(--text)}
.ck-col-body{display:grid;gap:14px}
.ck-col-sec{display:grid;gap:8px}
.ck-col-title{display:flex;align-items:center;gap:7px;margin:0;font:700 12px/1 var(--font-ui);
  text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.ck-col-list{display:grid;gap:6px;max-height:260px;overflow:auto}
.ck-col-item{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--r-m);
  padding:8px 10px;background:var(--card);flex-wrap:wrap}
.ck-col-main{display:grid;gap:2px;min-width:0;flex:1}
.ck-avat.sm{width:30px;height:30px;font-size:12px}

/* — Индикация «вне рабочих часов» — */
.ck-ooo{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--font-ui);padding:5px 9px;border-radius:var(--pill);
  white-space:nowrap;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 42%,transparent);color:var(--text)}
.ck-ooo .ic{width:14px;height:14px;color:var(--warn)}
.ck-ooo-text{color:var(--warn)}

/* — Рабочие часы (экран настроек) — */
.wh-status{display:flex;align-items:center;gap:8px;margin:10px 0}
.wh-tz{max-width:340px;margin-bottom:12px}
.wh-grid{display:grid;gap:8px}
.wh-day{display:grid;grid-template-columns:190px 1fr;gap:10px;align-items:start;border:1px solid var(--border);
  border-radius:var(--r-m);padding:10px 12px;background:var(--card)}
.wh-day-name{font-weight:700}
.wh-slots{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wh-slot{display:inline-flex;align-items:center;gap:6px}
.wh-time{width:120px;min-height:44px}
.wh-dash{color:var(--muted)}
.wh-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}

@media(max-width:640px){
  .wh-day{grid-template-columns:1fr}
  .wh-time{width:100%}
  .wh-slot{width:100%}
  .wh-acts .btn{flex:1 1 auto;justify-content:center}
  .ck-tpl-bar .btn,.ck-tpl-pill{flex:1 1 auto;justify-content:center}
  .ck-parts-row{padding:8px 12px}
  .ck-parts-row .btn{flex:1 1 auto;justify-content:center}
  .ck-tpl-item .icon-btn{margin-right:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   P1-F-INT (2026-10-13): экран «Интеграции» — категории со счётчиками,
   блок «Как получить доступ», адрес вебхука с копированием, результаты
   проверки связи, маска сохранённых секретов.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Группа: заголовок + счётчик «подключено N из M» */
.int-group-head h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.int-group-ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);flex:0 0 auto}
.int-group-count{font:600 12px/1 var(--font-ui);letter-spacing:.02em;color:var(--muted);
  background:var(--card2);border:1px solid var(--border);border-radius:var(--pill);padding:5px 10px}
.int-group-count.has{color:var(--int-ok);border-color:color-mix(in srgb,var(--int-ok) 40%,transparent);
  background:var(--int-ok-soft)}

/* «Как получить доступ» (note каталога + DocsURL): компактный раскрывающийся блок */
.int-access{border:1px solid var(--border);border-radius:var(--r-m);background:var(--card2);overflow:hidden}
.int-access>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:10px 12px;font-size:13px;font-weight:600;color:var(--text)}
.int-access>summary::-webkit-details-marker{display:none}
.int-access>summary .ic:first-child{color:var(--info);flex:0 0 auto}
.int-access-chev{margin-left:auto;color:var(--muted);transform:rotate(90deg);transition:transform .18s ease}
.int-access[open] .int-access-chev{transform:rotate(-90deg)}
.int-access-body{display:grid;gap:8px;padding:0 12px 12px;border-top:1px solid var(--border);
  margin-top:0;padding-top:10px;font-size:13px;line-height:1.5;color:var(--text)}
.int-access-text{margin:0}
.int-access-steps{margin:0;padding-left:18px;display:grid;gap:6px}
.int-access-steps li{padding-left:2px}

/* Маска сохранённого секрета */
.int-stored-badge{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;
  color:var(--muted);background:var(--card2);border:1px solid var(--border);
  border-radius:var(--pill);padding:3px 9px;width:max-content;max-width:100%}
.int-stored-badge .ic{flex:0 0 auto}
input.input[data-int-secret="1"]{letter-spacing:.12em}

/* Адрес вебхука: адрес + копирование в один клик + состояние регистрации */
.int-wh{display:grid;gap:8px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));
  border-radius:var(--r-m);background:var(--card2);padding:12px 14px}
.int-wh-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.int-wh-head .ic{color:var(--accent);flex:0 0 auto}
.int-wh-head h4{margin:0;font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--text)}
.int-wh-head .int-pill{margin-left:auto}
.int-wh-hint{margin:0}
.int-wh-row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.int-wh-url{flex:1 1 260px;min-width:0;font-family:var(--gram-font-mono,'Space Mono',ui-monospace,SFMono-Regular,monospace);
  font-size:12.5px;line-height:1.5;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-s,6px);padding:9px 10px;word-break:break-all;color:var(--text)}
.int-copy{flex:0 0 auto;white-space:nowrap}
.int-copy.is-copied{background:var(--int-ok-soft) !important;color:var(--int-ok) !important;
  border-color:color-mix(in srgb,var(--int-ok) 44%,transparent) !important}
.int-wh-note{margin:0;display:flex;gap:8px;align-items:flex-start}
.int-wh-note .ic{flex:0 0 auto;margin-top:2px}

/* Результат проверки связи (в карточке и в мастере) */
.int-check-out:empty{display:none}
.int-check-wrap:empty{display:none}
.int-check-live{display:flex;gap:8px;align-items:center}
.int-check-live .ic{flex:0 0 auto;color:var(--muted)}
.int-check-res{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-m);
  padding:10px 12px;border:1px solid transparent;font-size:13px}
.int-check-res .ic{flex:0 0 auto;margin-top:1px}
.int-check-res strong{display:block;margin-bottom:2px;font-weight:700}
.int-check-res p{margin:0}
.int-check-res.ok{background:var(--int-ok-soft);border-color:color-mix(in srgb,var(--int-ok) 36%,transparent)}
.int-check-res.ok .ic{color:var(--int-ok)}
.int-check-res.err{background:var(--int-err-soft);border-color:color-mix(in srgb,var(--int-err) 36%,transparent)}
.int-check-res.err .ic{color:var(--int-err)}

/* Информационный (не ошибочный) результат — «проверка не требуется» */
.int-result.warn{background:var(--int-warn-soft);border-color:color-mix(in srgb,var(--int-warn) 38%,transparent)}
.int-result.warn .ic{color:var(--int-warn)}
.int-result .ic--lg{flex:0 0 auto}
.int-causes{margin:6px 0 6px 18px;padding:0;display:grid;gap:4px;line-height:1.45}

@media(max-width:640px){
  .int-wh-row{flex-direction:column}
  .int-wh-url{flex:1 1 auto}
  .int-copy{width:100%;justify-content:center}
  .int-group-head h3{row-gap:6px}
}

/* ══════════════════════════════════════════════════════════════════════════
   AI-ИНСАЙТЫ (P2-F1, спринт 2026-10-13): теги диалога «О чём пишут»,
   лента «Клиенты говорят», риск-сигналы «Куда вмешаться».

   Слой НЕ рисует свой дизайн: используются токены и компоненты дизайн-системы
   (--card/--card2/--border/--accent/--ok/--warn/--err/--info, --r-m/l, --pill,
   .card, .empty, .errbox, .skel, .ck-spin, .ck-ai-* для деградации и приватности).
   Классы .ins-* — только специфика инсайтов: чипы тем с confidence, severity
   риск-сигналов, цитаты ленты. Работают во всех 4 палитрах (светлых и тёмных),
   т.к. цвета строятся через color-mix от текущих токенов.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Контейнер дашборда (риски + лента) ── */
.ins{margin-top:24px}
.ins-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}
.ins-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--shadow);
  display:flex;flex-direction:column;min-width:0;overflow:hidden}
.ins-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:13px 16px;border-bottom:1px solid var(--border);background:var(--card)}
.ins-panel-title{display:inline-flex;align-items:center;gap:8px;font:700 14px/1.2 var(--font-ui);color:var(--text);min-width:0}
.ins-panel-title .ic{color:var(--accent);flex:0 0 auto}
.ins-panel-sub{font:700 10px/1 var(--font-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ins-panel-body{padding:14px 16px;display:grid;gap:12px;min-width:0}
.ins-panel-foot{margin-top:auto;padding:11px 16px;border-top:1px solid var(--border);background:var(--card2)}
.ins-panel-foot .ck-ai-privacy{margin:0}
.ins-loading{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:13px;color:var(--muted)}
.ins-skel{display:grid;gap:6px}
.ins-skel-row{display:grid;gap:6px}
.ins-err{display:flex;align-items:flex-start;gap:9px;margin:0;font-size:13px;line-height:1.45;
  background:color-mix(in srgb,var(--err) 10%,transparent);border:1px solid color-mix(in srgb,var(--err) 38%,transparent);
  border-radius:var(--r-m);padding:10px 12px}
.ins-err .ic{flex:0 0 auto;color:var(--err);margin-top:1px}
.ins-hint{margin:0}

/* ── 1. Чипы тем (карточка клиента) ── */
.ins-side-block{display:grid;gap:8px}
.ins-side-title{display:inline-flex;align-items:center;gap:6px;margin-bottom:0}
.ins-side-title .ic{color:var(--accent)}
.ins-tags{display:flex;flex-wrap:wrap;gap:6px}
.ins-tag{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--font-ui);padding:6px 9px;
  border-radius:var(--pill);cursor:pointer;color:var(--text);text-align:left;
  background:color-mix(in srgb,var(--accent) 9%,var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));
  transition:background .16s ease,border-color .16s ease,transform .16s ease}
.ins-tag:hover{background:color-mix(in srgb,var(--accent) 16%,var(--card));
  border-color:color-mix(in srgb,var(--accent) 52%,var(--border));transform:translateY(-1px)}
.ins-tag:active{transform:translateY(0)}
.ins-tag-label{min-width:0;overflow-wrap:anywhere}
.ins-conf{display:inline-flex;align-items:center;gap:5px;font:700 10px/1 var(--font-ui);color:var(--muted);white-space:nowrap}
.ins-conf-bar{display:inline-block;width:34px;height:5px;border-radius:var(--pill);overflow:hidden;
  background:color-mix(in srgb,var(--text) 14%,transparent)}
.ins-conf-bar i{display:block;height:100%;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--accent2)))}

/* ── Плашка фильтра по темам над списком переписок ── */
.ins-filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 0;
  padding:9px 12px;border:1px solid var(--border);border-radius:var(--r-m);background:var(--card2)}
.ins-filterbar.is-idle{border-style:dashed;background:transparent}
.ins-filterbar-label{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--font-ui);
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ins-filterbar-label .ic{color:var(--accent)}
.ins-filter-chip{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-ui);cursor:pointer;
  padding:5px 9px;border-radius:var(--pill);color:var(--text);background:var(--card);border:1px solid var(--border);
  transition:background .16s ease,border-color .16s ease}
.ins-filter-chip:hover{border-color:color-mix(in srgb,var(--accent) 48%,var(--border))}
.ins-filter-chip.is-on{background:color-mix(in srgb,var(--accent) 16%,var(--card));
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));padding-right:5px}
.ins-filter-chip.is-on button{border:0;background:transparent;color:var(--muted);cursor:pointer;
  font:700 14px/1 var(--font-ui);min-width:18px;padding:0 2px}
.ins-filter-chip.is-on button:hover{color:var(--err)}
.ins-filter-n{font:700 11px/1 var(--font-ui);padding:2px 6px;border-radius:var(--pill);
  background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--muted)}

/* ── Теги в строке списка переписок (read-only, внутри .ck-item) ── */
.ck-item-tags{display:inline-flex;gap:4px;flex-wrap:wrap;min-width:0}
.ins-tag-mini{font:600 10px/1 var(--font-ui);padding:3px 7px;border-radius:var(--pill);white-space:nowrap;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  color:color-mix(in srgb,var(--accent) 72%,var(--text))}

/* ── 2. Риск-сигналы: severity цветом + kind + why ── */
.ins-risk-list,.ins-quote-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ins-risk{min-width:0}
.ins-risk-btn{display:grid;gap:6px;width:100%;text-align:left;font:inherit;color:var(--text);
  background:var(--card2);border:1px solid var(--border);border-left-width:4px;border-radius:var(--r-m);
  padding:10px 12px;cursor:pointer;min-height:44px;transition:background .16s ease,border-color .16s ease}
.ins-risk-btn.is-static{cursor:default}
.ins-risk-btn:not(.is-static):hover{background:color-mix(in srgb,var(--text) 5%,var(--card2))}
.ins-risk.sev-high .ins-risk-btn{border-left-color:var(--err);background:color-mix(in srgb,var(--err) 7%,var(--card2))}
.ins-risk.sev-mid .ins-risk-btn{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 7%,var(--card2))}
.ins-risk.sev-low .ins-risk-btn{border-left-color:var(--info);background:color-mix(in srgb,var(--info) 6%,var(--card2))}
.ins-risk-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ins-risk-kind{display:inline-flex;align-items:center;gap:6px;font:700 13px/1.2 var(--font-ui);min-width:0}
.ins-risk-kind .ic{flex:0 0 auto}
.ins-risk.sev-high .ins-risk-kind .ic{color:var(--err)}
.ins-risk.sev-mid .ins-risk-kind .ic{color:var(--warn)}
.ins-risk.sev-low .ins-risk-kind .ic{color:var(--info)}
.ins-sev{font:700 10px/1 var(--font-ui);letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;
  border-radius:var(--pill);white-space:nowrap;border:1px solid transparent}
.ins-risk.sev-high .ins-sev{background:color-mix(in srgb,var(--err) 16%,transparent);
  border-color:color-mix(in srgb,var(--err) 40%,transparent);color:color-mix(in srgb,var(--err) 50%,var(--text))}
.ins-risk.sev-mid .ins-sev{background:color-mix(in srgb,var(--warn) 18%,transparent);
  border-color:color-mix(in srgb,var(--warn) 42%,transparent);color:color-mix(in srgb,var(--warn) 50%,var(--text))}
.ins-risk.sev-low .ins-sev{background:color-mix(in srgb,var(--info) 14%,transparent);
  border-color:color-mix(in srgb,var(--info) 38%,transparent);color:color-mix(in srgb,var(--info) 50%,var(--text))}
.ins-risk-why{font-size:13px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.ins-risk-go{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-ui);
  color:color-mix(in srgb,var(--accent) 82%,var(--text))}
.ins-risk-go .ic{flex:0 0 auto}

/* ── 3. Лента «Клиенты говорят»: жалоба / похвала ── */
.ins-periods{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--border);border-radius:var(--pill);background:var(--card2)}
.ins-period{border:0;background:transparent;color:var(--muted);cursor:pointer;font:700 11px/1 var(--font-ui);
  padding:6px 10px;border-radius:var(--pill);min-height:28px}
.ins-period[aria-pressed="true"]{background:var(--btn-bg,var(--accent));color:var(--ink)}
.ins-quote{min-width:0}
.ins-quote-btn{display:grid;gap:6px;width:100%;text-align:left;font:inherit;color:var(--text);
  background:var(--card2);border:1px solid var(--border);border-left-width:4px;border-radius:var(--r-m);
  padding:10px 12px;cursor:pointer;min-height:44px;transition:background .16s ease,border-color .16s ease}
.ins-quote-btn.is-static{cursor:default}
.ins-quote-btn:not(.is-static):hover{background:color-mix(in srgb,var(--text) 5%,var(--card2))}
.ins-quote.is-complaint .ins-quote-btn{border-left-color:var(--err);background:color-mix(in srgb,var(--err) 6%,var(--card2))}
.ins-quote.is-praise .ins-quote-btn{border-left-color:var(--ok);background:color-mix(in srgb,var(--ok) 7%,var(--card2))}
.ins-quote-kind{display:inline-flex;align-items:center;gap:6px;font:700 10px/1 var(--font-ui);
  letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:var(--pill);width:max-content;
  border:1px solid transparent}
.ins-quote-kind .ic{flex:0 0 auto}
.ins-quote.is-complaint .ins-quote-kind{background:color-mix(in srgb,var(--err) 16%,transparent);
  border-color:color-mix(in srgb,var(--err) 40%,transparent);color:color-mix(in srgb,var(--err) 50%,var(--text))}
.ins-quote.is-praise .ins-quote-kind{background:color-mix(in srgb,var(--ok) 16%,transparent);
  border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:color-mix(in srgb,var(--ok) 50%,var(--text))}
.ins-quote-text{margin:0;font-size:13.5px;line-height:1.5;color:var(--text);overflow-wrap:anywhere;
  border:0;padding:0;font-style:italic}
.ins-quote-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.ins-quote-author{font-weight:700;color:var(--text);min-width:0}
.ins-quote-meta time{white-space:nowrap}
.ins-quote-go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-ui);
  color:color-mix(in srgb,var(--accent) 82%,var(--text))}
.ins-quote-go .ic{flex:0 0 auto}

/* ── Мобильные ── */
@media(max-width:900px){
  .ins-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .ins-filterbar{align-items:flex-start}
  .ins-filterbar .btn{margin-left:auto}
  .ins-quote-go{margin-left:0}
  .ins-tag{width:100%;justify-content:space-between}
  .ins-tag-label{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .ins-tag,.ins-risk-btn,.ins-quote-btn,.ins-filter-chip{transition:none}
  .ins-tag:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   P2-F2 — автозадачи из разбора · переводчик в треде · бейдж приватности ИИ
   (спринт P2 «AI-копайлот», задача P2-F2, 2026-10-13)
   ═══════════════════════════════════════════════════════════════════════════ */

/* бейдж «Данные не покидают контур» + честное состояние контура */
.ck-ai-status-host{display:inline-flex;max-width:100%}
.ck-ai-status{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--font-ui);cursor:pointer;
  min-height:32px;padding:7px 12px;border-radius:var(--pill);max-width:100%;
  border:1px dashed color-mix(in srgb,var(--accent2) 34%,var(--border));
  background:color-mix(in srgb,var(--accent2) 7%,transparent);color:var(--muted);
  transition:border-color .15s ease,color .15s ease}
.ck-ai-status:hover{border-color:color-mix(in srgb,var(--accent2) 58%,var(--border));color:var(--text)}
.ck-ai-status:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ck-ai-status-ic{font-size:12px;line-height:1;flex:0 0 auto}
.ck-ai-status-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-ai-status-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.ck-ai-status.is-ok{border-style:solid;border-color:color-mix(in srgb,var(--ck-ok) 42%,transparent);
  background:color-mix(in srgb,var(--ck-ok) 10%,transparent);color:color-mix(in srgb,var(--ck-ok) 58%,var(--text))}
.ck-ai-status.is-ok .ck-ai-status-dot{background:var(--ck-ok)}
.ck-ai-status.is-warn{border-style:solid;border-color:color-mix(in srgb,var(--ck-warn) 46%,transparent);
  background:color-mix(in srgb,var(--ck-warn) 12%,transparent);color:color-mix(in srgb,var(--ck-warn) 62%,var(--text))}
.ck-ai-status.is-warn .ck-ai-status-dot{background:var(--ck-warn)}
.ck-ai-status.is-err{border-style:solid;border-color:color-mix(in srgb,var(--ck-err) 48%,transparent);
  background:color-mix(in srgb,var(--ck-err) 12%,transparent);color:color-mix(in srgb,var(--ck-err) 62%,var(--text))}
.ck-ai-status.is-err .ck-ai-status-dot{background:var(--ck-err)}
.ck-ai-status.is-loading{opacity:.85;cursor:progress}

/* модалка статуса: контур / внешний резерв / политика данных */
.ck-ai-stat-lead{display:flex;gap:9px;margin:0 0 12px;font-size:13px;line-height:1.5}
.ck-ai-stat-list{margin:0;display:grid;border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden}
.ck-ai-stat-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 12px;font-size:13px}
.ck-ai-stat-row + .ck-ai-stat-row{border-top:1px solid var(--border)}
.ck-ai-stat-row dt{margin:0;color:var(--muted)}
.ck-ai-stat-row dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.ck-ai-stat-row dd.is-ok{color:color-mix(in srgb,var(--ck-ok) 60%,var(--text))}
.ck-ai-stat-row dd.is-warn{color:color-mix(in srgb,var(--ck-warn) 62%,var(--text))}
.ck-ai-stat-row dd.is-err{color:color-mix(in srgb,var(--ck-err) 62%,var(--text))}
.ck-ai-stat-row dd.is-muted{color:var(--muted);font-weight:500}

/* подвал разбора: «Поставить задачу» + бейдж приватности */
.ck-ai-drawer-foot--acts{display:grid;gap:10px}
.ck-ai-drawer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ck-ai-taskdone{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:color-mix(in srgb,var(--ck-ok) 58%,var(--text))}
.ck-ai-taskdone .ic{flex:0 0 auto}
.ck-ai-tasklink{font-weight:700;color:var(--accent);text-decoration:none}
.ck-ai-tasklink:hover,.ck-ai-tasklink:focus-visible{text-decoration:underline}
.ck-ai-drawer-priv{display:flex}
.ck-ai-drawer-priv .ck-ai-status{width:100%;justify-content:flex-start}

/* дедлайн в модалке автозадачи */
.ck-task-due{max-width:190px}
.ck-task-due-row .btn.is-on{border-color:color-mix(in srgb,var(--accent) 46%,transparent);
  background:color-mix(in srgb,var(--accent) 14%,transparent)}
.ck-task-link-note{margin:8px 0 0}

/* переводчик в треде: кнопка + сворачиваемый блок РЯДОМ с оригиналом */
.ck-tr-btn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:600 11.5px/1 var(--font-ui);
  cursor:pointer;padding:5px 10px;border-radius:var(--pill);border:1px solid var(--border);
  background:var(--card2);color:var(--muted);min-height:28px;transition:border-color .15s ease,color .15s ease}
.ck-tr-btn:hover{border-color:color-mix(in srgb,var(--accent2) 46%,var(--border));color:var(--text)}
.ck-tr-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ck-tr-btn.is-on{border-color:color-mix(in srgb,var(--accent2) 48%,transparent);
  background:color-mix(in srgb,var(--accent2) 12%,var(--card));color:color-mix(in srgb,var(--accent2) 58%,var(--text))}
.ck-tr-host{margin-top:8px;border:1px solid color-mix(in srgb,var(--accent2) 26%,var(--border));
  border-radius:var(--r-m);background:color-mix(in srgb,var(--accent2) 5%,var(--card));overflow:hidden}
.ck-tr-host:empty{display:none}
.ck-tr-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;
  border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--accent2) 7%,transparent)}
.ck-tr-head.is-collapsed{border-bottom:0;background:transparent}
.ck-tr-title{display:inline-flex;align-items:center;gap:7px;font:700 11.5px/1 var(--font-ui);
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ck-tr-lang{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--font-ui);color:var(--muted)}
.ck-tr-from,.ck-tr-to{padding:4px 8px;border-radius:var(--pill);border:1px solid var(--border);background:var(--card)}
.ck-tr-to{border-color:color-mix(in srgb,var(--accent2) 42%,transparent);
  color:color-mix(in srgb,var(--accent2) 58%,var(--text))}
.ck-tr-arrow{color:var(--muted)}
.ck-tr-act{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.ck-tr-sel{max-width:170px;min-height:32px;font-size:12px}
.ck-tr-open{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--font-ui);cursor:pointer;
  padding:6px 10px;border-radius:var(--pill);background:transparent;color:var(--muted);
  border:1px dashed color-mix(in srgb,var(--accent2) 40%,var(--border))}
.ck-tr-open:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent2) 60%,var(--border))}
.ck-tr-open:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ck-tr-body{padding:10px;display:grid;gap:8px}
.ck-tr-body .ck-ai-err{margin:0}
.ck-tr-text{font-size:13.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
.ck-tr-note{display:flex;align-items:center;gap:7px;margin:0}
.ck-tr-note .ic{flex:0 0 auto}

/* подсветка только что созданной задачи в разделе «Задачи» */
.tbl tbody tr.is-new{background:color-mix(in srgb,var(--accent) 10%,transparent);
  box-shadow:inset 3px 0 0 var(--accent)}

/* ── Адаптив ── */
@media(max-width:900px){
  .ck-ai-status-host{width:100%}
  .ck-ai-status{width:100%;justify-content:flex-start}
}
@media(max-width:640px){
  .ck-tr-act{width:100%;margin-left:0}
  .ck-tr-sel{max-width:none;flex:1 1 auto}
  .ck-ai-status-tx{white-space:normal}
  .ck-ai-stat-row{flex-direction:column;gap:3px}
  .ck-ai-stat-row dd{text-align:left}
  .ck-task-due{max-width:none;width:100%}
  .ck-ai-drawer-actions{display:grid}
  .ck-ai-drawer-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .ck-ai-status,.ck-tr-btn,.ck-tr-open{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   P3-FE (2026-10-14): экран «Аналитика продаж» (CRO).

   Аддитивный блок: рисует только на токенах дизайн-системы
   (--card/--card2/--border/--accent/--ok/--warn/--err, --r-m/--pill, .tabs,
   .tbl, .kpi, .empty) и не переопределяет чужие правила. Селекторы
   пространственно ограничены (.cro-* и tr[data-cro-row]).
   ═══════════════════════════════════════════════════════════════════════════ */

.cro-panel{margin-bottom:18px}
.cro-period{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cro-range{flex:1 1 auto;min-width:0;text-align:right}
.cro-dates{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.cro-dates .field{display:grid;gap:4px}
.cro-dates .field>span{font-size:12px;font-weight:600;color:var(--muted)}
.cro-dates .input{min-height:40px;width:168px}
.cro-dates[hidden]{display:none}

.cro-blocks{display:grid;gap:18px}
.cro-block{display:grid;gap:14px}
.cro-block-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.cro-block-head h3{margin:0}
.cro-block-head .btn{flex:0 0 auto}

/* плашка insight — компактный вывод по метрикам (из JSON) */
.cro-insight{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-m);
  background:color-mix(in srgb,var(--accent) 8%,var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border))}
.cro-insight .cro-insight-ic{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.cro-insight p{margin:0;font-size:14px;line-height:1.5}

.cro-kpis{margin-top:2px}
.cro-chip{margin-right:6px}
.cro-sub{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 6px}

/* строка-переход в отчёте: аватар + стрелка */
.cro-av{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:8px;border-radius:50%;
  background:var(--card2);border:1px solid var(--border);font:700 11px/1 var(--font-ui);
  color:var(--muted);vertical-align:middle}
.cro-go{color:var(--muted);width:44px}
.cro-go .ic{opacity:.65}
.tbl tbody tr[data-cro-row]:hover .cro-go .ic{opacity:1;color:var(--accent)}
.tbl tbody tr[data-cro-row].is-flat{cursor:default}

/* список диалогов в drill-down-диалоге */
.cro-dlgs{display:grid;gap:8px;margin-top:10px}
.cro-dlg{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;font:inherit;
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-m);background:var(--bg);
  color:var(--text);transition:border-color .15s ease,background .15s ease}
.cro-dlg:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));background:var(--card)}
.cro-dlg-ic{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--card2);color:var(--accent)}
.cro-dlg-b{display:grid;gap:2px;flex:1 1 auto;min-width:0}
.cro-dlg-t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cro-dlg-go{flex:0 0 auto;color:var(--muted)}

@media(max-width:900px){
  .cro-period{align-items:stretch}
  .cro-period .tabs{width:100%;overflow-x:auto;flex-wrap:nowrap}
  .cro-range{text-align:left}
  .cro-dates{width:100%}
  .cro-dates .field{flex:1 1 140px}
  .cro-dates .input{width:100%}
  .cro-block-head .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .cro-dlg{transition:none}
}