/* CRM Автолидогенерация — дизайн-система (редизайн по концепту).
   Поверх Pico.css: Pico оставлен для форм-контролов, вся раскладка/компоненты — свои. */

:root {
    --bg:        #eef1f6;
    --surface:   #ffffff;
    --surface-2: #f7f9fc;
    --ink:       #1a2233;
    --ink-2:     #55617a;
    --ink-3:     #8b96ad;
    --border:    #e2e7f0;
    --border-2:  #d3dae6;
    --accent:    #3b5bd9;
    --accent-ink:#2c46b0;
    --accent-sf: #e9edfc;
    --shadow:    0 1px 2px rgba(20,30,55,.06), 0 6px 18px rgba(20,30,55,.05);

    --st-new:#64748b;  --st-new-sf:#eef1f5;
    --st-work:#2f6fed; --st-work-sf:#e7f0fe;
    --st-reply:#12916a;--st-reply-sf:#e2f4ee;
    --st-meet:#c9820f; --st-meet-sf:#fbf0dc;
    --st-prop:#7c5cd6; --st-prop-sf:#efeafb;
    --st-deal:#0f7d55; --st-deal-sf:#e0f2e9;
    --st-rej:#d1495b;  --st-rej-sf:#fbe6ea;

    --good:#12916a; --warn:#c9820f; --bad:#d1495b;
    --r: 10px;
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Мост к Pico: акцент-кобальт для форм-контролов и кнопок Pico */
    --pico-primary: var(--accent);
    --pico-primary-hover: var(--accent-ink);
    --pico-primary-focus: rgba(59,91,217,.25);
    --pico-primary-inverse: #fff;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg:#0e131f; --surface:#161d2c; --surface-2:#1b2233; --ink:#e7ecf5; --ink-2:#9aa6bd;
        --ink-3:#68748d; --border:#252e40; --border-2:#303a50; --accent:#7089f2; --accent-ink:#9fb0f8;
        --accent-sf:#1c2540; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.35);
        --st-new:#93a0b5; --st-new-sf:#222b3c; --st-work:#5b91f5; --st-work-sf:#1a2947;
        --st-reply:#3fbe93; --st-reply-sf:#123227; --st-meet:#e0a53f; --st-meet-sf:#33280f;
        --st-prop:#a488ef; --st-prop-sf:#241d3d; --st-deal:#38b581; --st-deal-sf:#0f3025;
        --st-rej:#ec6c7d; --st-rej-sf:#361a20; --good:#3fbe93; --warn:#e0a53f; --bad:#ec6c7d;
        --pico-primary-inverse:#0b1020;
    }
}
:root[data-theme="light"] {
    --bg:#eef1f6; --surface:#ffffff; --surface-2:#f7f9fc; --ink:#1a2233; --ink-2:#55617a;
    --ink-3:#8b96ad; --border:#e2e7f0; --border-2:#d3dae6; --accent:#3b5bd9; --accent-ink:#2c46b0;
    --accent-sf:#e9edfc; --shadow:0 1px 2px rgba(20,30,55,.06), 0 6px 18px rgba(20,30,55,.05);
    --st-new:#64748b; --st-new-sf:#eef1f5; --st-work:#2f6fed; --st-work-sf:#e7f0fe;
    --st-reply:#12916a; --st-reply-sf:#e2f4ee; --st-meet:#c9820f; --st-meet-sf:#fbf0dc;
    --st-prop:#7c5cd6; --st-prop-sf:#efeafb; --st-deal:#0f7d55; --st-deal-sf:#e0f2e9;
    --st-rej:#d1495b; --st-rej-sf:#fbe6ea; --good:#12916a; --warn:#c9820f; --bad:#d1495b;
    --pico-primary-inverse:#fff;
}
:root[data-theme="dark"] {
    --bg:#0e131f; --surface:#161d2c; --surface-2:#1b2233; --ink:#e7ecf5; --ink-2:#9aa6bd;
    --ink-3:#68748d; --border:#252e40; --border-2:#303a50; --accent:#7089f2; --accent-ink:#9fb0f8;
    --accent-sf:#1c2540; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.35);
    --st-new:#93a0b5; --st-new-sf:#222b3c; --st-work:#5b91f5; --st-work-sf:#1a2947;
    --st-reply:#3fbe93; --st-reply-sf:#123227; --st-meet:#e0a53f; --st-meet-sf:#33280f;
    --st-prop:#a488ef; --st-prop-sf:#241d3d; --st-deal:#38b581; --st-deal-sf:#0f3025;
    --st-rej:#ec6c7d; --st-rej-sf:#361a20; --good:#3fbe93; --warn:#e0a53f; --bad:#ec6c7d;
    --pico-primary-inverse:#0b1020;
    color-scheme: dark;   /* нативные контролы/скроллбары в тёмной схеме */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { color-scheme: dark; } }

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
    font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; padding:0; }
.tnum { font-variant-numeric: tabular-nums; }
h1,h2,h3 { margin:0; text-wrap:balance; }
a { color: var(--accent-ink); }

/* ── Оболочка: боковое меню + основная область ──────────────────────────── */
.app { display:grid; grid-template-columns: 232px 1fr; min-height:100vh; }
.side { background:var(--surface); border-right:1px solid var(--border); padding:16px 12px;
    display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:9px; font-weight:750; font-size:16px;
    padding:6px 8px 14px; letter-spacing:-.01em; color:var(--ink); text-decoration:none; }
.brand .logo { width:26px; height:26px; border-radius:8px;
    background:linear-gradient(135deg,var(--accent),#6b86f0);
    display:grid; place-items:center; color:#fff; font-size:15px; }
.nav { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
    color:var(--ink-2); font-weight:550; cursor:pointer; text-decoration:none; }
.nav:hover { background:var(--surface-2); color:var(--ink); }
.nav.active { background:var(--accent-sf); color:var(--accent-ink); font-weight:650; }
.nav .ic { width:18px; text-align:center; opacity:.9; }
.nav .n { margin-left:auto; font-size:11.5px; color:var(--ink-3); font-weight:600; }
.nav.active .n { color:var(--accent-ink); }
.side .spacer { flex:1; }
.themebtn { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px;
    border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2); cursor:pointer;
    font:inherit; font-weight:550; font-size:13px; width:100%; text-align:left; margin:0; }
.themebtn:hover { color:var(--ink); border-color:var(--border-2); }
.side form { margin:0; }

.main { min-width:0; }
.top { display:flex; align-items:center; gap:14px; padding:16px 24px; position:sticky; top:0;
    background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border); z-index:5; }
.top h1 { font-size:19px; letter-spacing:-.02em; }
.top .sub { color:var(--ink-3); font-size:12.5px; font-weight:550; }
.top .actions { margin-left:auto; display:flex; align-items:center; gap:10px; }
.search { display:flex; align-items:center; gap:8px; background:var(--surface);
    border:1px solid var(--border); border-radius:9px; padding:7px 11px; width:260px; color:var(--ink-3); margin:0; }
.search input { border:0; background:none; outline:none; font:inherit; color:var(--ink); width:100%; margin:0; padding:0; }
.kbd { font-size:11px; border:1px solid var(--border-2); border-radius:5px; padding:1px 5px; color:var(--ink-3); }

.btn { border:0; border-radius:9px; padding:8px 14px; font:inherit; font-weight:650; cursor:pointer;
    background:var(--accent); color:#fff; display:inline-flex; align-items:center; gap:7px;
    box-shadow:var(--shadow); text-decoration:none; width:auto; line-height:1.2; }
.btn:hover { filter:brightness(1.06); }
button.btn, [type=submit].btn, [type=button].btn { width:auto; }
.btn.ghost { background:var(--surface); color:var(--ink-2); border:1px solid var(--border); box-shadow:none; }
.btn.ghost:hover { color:var(--ink); border-color:var(--border-2); }

.wrap { padding:22px 24px 40px; display:flex; flex-direction:column; gap:20px; max-width:1180px; }

/* ── KPI-плитки ─────────────────────────────────────────────────────────── */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px;
    box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; min-width:0; }
.kpi .lbl { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:650; }
.kpi .row { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.kpi .val { font-size:27px; font-weight:760; letter-spacing:-.02em; line-height:1; }
.kpi .val small { font-size:14px; color:var(--ink-3); font-weight:600; }
.delta { font-size:12px; font-weight:700; padding:2px 6px; border-radius:6px; }
.delta.up { color:var(--good); background:var(--st-deal-sf); }
.delta.down { color:var(--bad); background:var(--st-rej-sf); }
.delta.flat { color:var(--ink-3); background:var(--surface-2); }
.spark { width:100%; height:30px; display:block; }

/* ── Двухколоночный контент ────────────────────────────────────────────── */
.cols { display:grid; grid-template-columns: 1fr 300px; gap:20px; align-items:start; }
@media (max-width: 980px){ .cols{ grid-template-columns:1fr; } .kpis{ grid-template-columns:repeat(2,1fr); } }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
    box-shadow:var(--shadow); overflow:hidden; }
.card > .hd { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border); }
.card > .hd h2 { font-size:14px; font-weight:700; letter-spacing:-.01em; }
.card > .hd .r { margin-left:auto; color:var(--ink-3); font-size:12px; }
.card .pad { padding:14px 16px; }

/* ── Фильтр-чипы ───────────────────────────────────────────────────────── */
.chips { display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border); }
.chip { display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:999px;
    border:1px solid var(--border); background:var(--surface); color:var(--ink-2); font-size:12.5px;
    font-weight:600; cursor:pointer; text-decoration:none; }
.chip:hover { border-color:var(--border-2); color:var(--ink); }
.chip .c { color:var(--ink-3); font-weight:700; }
.chip.on { background:var(--accent-sf); border-color:transparent; color:var(--accent-ink); }
.chip.on .c { color:var(--accent-ink); }
.chip .x { opacity:.6; }
.chip.pain.on { background:var(--st-rej-sf); color:var(--st-rej); }
.chip.pain.on .c { color:var(--st-rej); }

/* ── Активные фильтры (removable-чипи под пресетами) ────────────────────── */
.active-filters { display:flex; flex-wrap:wrap; align-items:center; gap:7px;
    padding:10px 16px 12px; border-bottom:1px solid var(--border); }
.af-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 4px 3px 10px;
    border-radius:999px; background:var(--accent-sf); color:var(--accent-ink);
    font-size:12px; font-weight:600; line-height:1.4; }
.af-x { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%;
    color:var(--accent-ink); text-decoration:none; font-size:10px; opacity:.75;
    transition:opacity .1s, background .1s; }
.af-x:hover { opacity:1; background:color-mix(in srgb, var(--accent) 18%, transparent); }
/* «Сбросить всё» — в тёмной теме ink-3 слишком блёклый, используем ink-2 для контраста */
.af-clear { margin-left:auto; font-size:12px; color:var(--ink-2); text-decoration:none; font-weight:600; }
.af-clear:hover { color:var(--ink); text-decoration:underline; }

/* ── Таблица ───────────────────────────────────────────────────────────── */
/* table-layout:fixed + colgroup — ширины колонок зафиксированы, таблица не
   пересчитывает их при смене строк (фильтр/пагинация) → нет горизонтального «дёрганья». */
.tbl { width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; }
.tbl col.c-chk     { width:40px; }
.tbl col.c-name    { width:auto; }
.tbl col.c-cat     { width:150px; }
.tbl col.c-status  { width:160px; }
.tbl col.c-src     { width:110px; }
.tbl col.c-pain    { width:64px; }
.tbl col.c-touch   { width:140px; }
.tbl col.c-created { width:96px; }
.tbl col.c-updated { width:96px; }
.tbl thead th { text-align:left; font-size:12px; letter-spacing:0; color:var(--ink-3);
    font-weight:600; padding:0 16px; border-bottom:1px solid var(--border);
    background:var(--surface-2); position:sticky; top:0; z-index:2; white-space:nowrap;
    height:40px; vertical-align:middle; }
/* th НЕ должен иметь overflow:hidden — иначе абсолютно-позиционированное фильтр-меню
   (.th-pop) обрезается и не видно. Обрезка длинного текста идёт на самом .th-sort. */
.tbl tbody td { padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle;
    overflow:hidden; }
.tbl tbody tr { cursor:pointer; }
.tbl tbody tr:hover { background:var(--surface-2); }
.tbl tbody tr:nth-child(even) { background:color-mix(in srgb, var(--surface-2) 45%, transparent); }
.tbl tbody tr:hover:nth-child(even) { background:var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom:0; }
.tbl .id { color:var(--ink-3); font-size:12px; }
.tbl .chkcell { padding-left:16px; padding-right:0; }

/* ── Кликабельные заголовки: гибрид Linear ─────────────────────────────── */
/* текст колонки = быстрая сортировка (1 клик); ▾ = меню, проявляется при hover */
.tbl thead th.th-col { white-space:nowrap; }
.th-head { display:inline-flex; align-items:center; gap:1px; max-width:100%; }
.th-sort { color:var(--ink-3); text-decoration:none; font-size:12px; font-weight:600;
    padding:3px 4px; margin-left:-4px; border-radius:5px; cursor:pointer;
    display:inline-flex; align-items:center; gap:4px; transition:color .12s, background .12s; }
.th-sort:hover { color:var(--ink); }
.th-sort.on { color:var(--accent-ink); }
.th-sort .arr { font-size:9px; opacity:.9; line-height:1; }
.th-col.cell-r .th-head { float:right; }
.th-col.cell-r .th-sort { flex-direction:row-reverse; margin-left:0; margin-right:-4px; }

/* Триггер меню (▾): скрыт по умолчанию, проявляется при наведении на заголовок */
.th-trigger { display:inline-flex; align-items:center; gap:3px; opacity:0;
    transition:opacity .12s; }
.th-col:hover .th-trigger { opacity:1; }
/* Индикатор активного фильтра (●) — виден всегда, когда фильтр включён */
.th-dot { width:6px; height:6px; border-radius:50%; background:var(--accent);
    display:inline-block; flex-shrink:0; }
.th-trigger:has(.th-dot) { opacity:1; }   /* с активным фильтром — триггер виден всегда */

.th-menu { position:relative; }
.th-menu > summary { list-style:none; cursor:pointer; width:18px; height:18px;
    display:inline-grid; place-items:center; border-radius:4px; color:var(--ink-2);
    line-height:1; font-size:11px; }
.th-menu > summary::-webkit-details-marker { display:none; }
.th-menu > summary::after { content:"▾"; }
.th-menu > summary:hover { background:var(--surface); color:var(--ink); }
.th-menu[open] > summary { background:var(--surface); color:var(--ink); opacity:1; }

/* Выпадающее меню */
.th-pop { position:absolute; top:calc(100% + 6px); left:-4px; min-width:210px;
    background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r);
    box-shadow:var(--shadow); padding:5px; z-index:40; display:flex; flex-direction:column; gap:0; }
.th-col.cell-r .th-pop { left:auto; right:-4px; }
.th-grp-lab { font-size:10px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-3); font-weight:700; padding:8px 10px 3px; }
.th-div { height:1px; background:var(--border); margin:5px 4px; }
.th-pop > a { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:7px;
    font-size:12.5px; color:var(--ink-2); text-decoration:none; font-weight:500; white-space:nowrap; }
.th-pop > a:hover { background:var(--surface-2); color:var(--ink); }
.th-pop > a.sel { color:var(--accent-ink); font-weight:600; }
.th-pop .chk { width:12px; display:inline-block; text-align:center; color:var(--accent);
    font-size:12px; flex-shrink:0; }

/* Обрезка длинного текста в ячейках (ellipsis + title-тултип).
   table-layout:fixed уже задаёт ширину ячейки — здесь только обрезка по ней. */
.td-trunc { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbl tbody tr { cursor:pointer; }
.tbl tbody tr:hover { background:var(--surface-2); }
/* Плавное появление строк после HTMX-свопа (без резкой вспышки) */
@keyframes tblRowIn { from { opacity:0; } to { opacity:1; } }
.tbl tbody { animation:tblRowIn .14s ease-out; }
.tbl tbody tr:last-child td { border-bottom:0; }
.tbl .id { color:var(--ink-3); font-size:12px; }
.nm { font-weight:650; letter-spacing:-.01em; }
.nm b { display:block; }
.nm span { color:var(--ink-3); font-size:12px; font-weight:500; }
.cell-r { text-align:right; }

/* ── Пилюли статусов ───────────────────────────────────────────────────── */
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
    font-size:12px; font-weight:650; white-space:nowrap; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.p-new{color:var(--st-new);background:var(--st-new-sf);} .p-work{color:var(--st-work);background:var(--st-work-sf);}
.p-reply{color:var(--st-reply);background:var(--st-reply-sf);} .p-meet{color:var(--st-meet);background:var(--st-meet-sf);}
.p-prop{color:var(--st-prop);background:var(--st-prop-sf);} .p-deal{color:var(--st-deal);background:var(--st-deal-sf);}
.p-rej{color:var(--st-rej);background:var(--st-rej-sf);}

/* ── Бейджи источников ─────────────────────────────────────────────────── */
.src { font-size:11.5px; font-weight:650; padding:2px 8px; border-radius:6px; white-space:nowrap; }
.s-2gis{color:#0a7d47;background:#e2f3e8;} .s-hh{color:#c0392b;background:#fbe7e3;}
.s-avito{color:#2860c4;background:#e6eefb;} .s-other{color:var(--ink-3);background:var(--surface-2);}
:root[data-theme="dark"] .s-2gis, [data-theme="dark"] .s-hh, [data-theme="dark"] .s-avito { filter:brightness(1.15); }
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]) .s-2gis{background:#123023;}
    :root:not([data-theme=light]) .s-hh{background:#361a16;} :root:not([data-theme=light]) .s-avito{background:#16233f;} }
:root[data-theme="dark"] .s-2gis{background:#123023;} :root[data-theme="dark"] .s-hh{background:#361a16;}
:root[data-theme="dark"] .s-avito{background:#16233f;}

.pain { color:var(--st-rej); font-weight:800; }
.pain-mark { color:var(--st-rej); font-weight:800; }

/* ── Цветные сроки ─────────────────────────────────────────────────────── */
.due, span.due { font-weight:650; font-size:12.5px; display:inline-flex; align-items:center; gap:6px; }
.due::before { content:""; width:7px; height:7px; border-radius:50%; }
.due-future { color:var(--good); } .due-future::before{ background:var(--good); }
.due-today  { color:var(--warn); } .due-today::before { background:var(--warn); }
.due-over   { color:var(--bad); }  .due-over::before  { background:var(--bad); }
.due-none   { color:var(--ink-3); font-weight:500; }
.due-none::before { display:none; }
.due-over-tag { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--bad); }
.muted { color:var(--ink-3); }

/* ── Воронка ───────────────────────────────────────────────────────────── */
.funnel { padding:14px 16px; display:flex; flex-direction:column; gap:9px; }
.frow { display:grid; grid-template-columns: 110px 1fr auto; align-items:center; gap:10px; }
.frow .fl { font-size:12px; color:var(--ink-2); font-weight:600; }
.fbar { height:26px; border-radius:6px; background:var(--accent);
    display:flex; align-items:center; padding-left:9px; color:#fff; font-weight:700; font-size:12px; min-width:34px; }
.fconv { font-size:11.5px; color:var(--ink-3); font-weight:650; }

/* Панель выбора этапов воронки */
.funnel-stages { display:flex; flex-wrap:wrap; gap:6px; padding:12px 16px; border-bottom:1px solid var(--border); }
.fs-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
    border:1px solid var(--border); background:var(--surface); color:var(--ink-2); font-size:12px;
    font-weight:600; cursor:pointer; font-family:inherit; }
.fs-chip:hover { border-color:var(--border-2); color:var(--ink); }
.fs-chip i { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; opacity:.4; }
.fs-chip.on { background:var(--accent-sf); border-color:transparent; color:var(--accent-ink); }
.fs-chip.on i { opacity:1; }

/* ── Карточка лида: две панели ─────────────────────────────────────────── */
.lead { display:grid; grid-template-columns: 1fr 300px; }
@media (max-width: 720px){ .lead{ grid-template-columns:1fr; } }
/* Инфо о лиде — левая широкая панель; активность/статусы — правая узкая. */
.lead .fields { padding:18px 20px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.lead .timeline { padding:16px; border-left:1px solid var(--border); background:var(--surface-2); min-width:0; }
.lc-head { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lc-head h2 { font-size:16px; letter-spacing:-.02em; }
.lc-meta { margin-left:auto; color:var(--ink-3); font-size:12px; }
.lc-meta b { color:var(--ink-2); font-weight:650; }
.tl { list-style:none; margin:0; padding:0; position:relative; }
.tl::before { content:""; position:absolute; left:9px; top:4px; bottom:4px; width:2px; background:var(--border); }
.tl li { position:relative; padding:0 0 16px 30px; }
.tl li:last-child { padding-bottom:0; }
.tl .dot { position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%;
    border:3px solid var(--surface); background:var(--accent); }
.tl .dot.g{background:var(--good);} .tl .dot.a{background:var(--warn);} .tl .dot.n{background:var(--st-new);}
.tl .dot.r{background:var(--bad);} .tl .dot.p{background:var(--st-prop);}
.tl .tt { font-weight:600; font-size:13px; }
.tl .tm { color:var(--ink-3); font-size:11.5px; font-weight:500; }
.tl .tx { color:var(--ink-2); font-size:12.5px; margin-top:2px; white-space:pre-wrap; }
.fld { display:flex; flex-direction:column; gap:2px; padding:9px 0; border-bottom:1px dashed var(--border); }
.fld:last-child{ border-bottom:0; }
.fld .k { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); font-weight:650; }
.fld .v { font-size:14.5px; font-weight:550; word-break:break-word; line-height:1.35; }
.fld .v a { color:var(--accent-ink); }
.actionbar { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border); flex-wrap:wrap; }
.actionbar form { margin:0; display:inline-flex; }

.sectlbl{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-top:4px; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-3); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:8px;height:8px;border-radius:50%; display:inline-block; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ── Вкладки внутри карточки ───────────────────────────────────────────── */
.tabs { display:flex; gap:.2rem; border-bottom:1px solid var(--border); margin:0 16px; }
.tabs a { padding:.5rem .8rem; text-decoration:none; border-bottom:2px solid transparent; color:var(--ink-2); font-weight:600; font-size:13px; }
.tabs a.active { border-bottom-color:var(--accent); color:var(--accent-ink); }

/* ── Пагинация ─────────────────────────────────────────────────────────── */
.pagination { display:flex; gap:.4rem; justify-content:center; padding:14px; flex-wrap:wrap; }
.pagination a { padding:5px 11px; border-radius:8px; border:1px solid var(--border); text-decoration:none;
    color:var(--ink-2); font-weight:600; font-size:13px; }
.pagination a:hover { border-color:var(--border-2); color:var(--ink); }
.pagination a.cur { background:var(--accent); color:#fff; border-color:transparent; }

/* ── Тосты ─────────────────────────────────────────────────────────────── */
.flash { padding:.6rem .9rem; border-radius:8px; margin:.5rem 0; font-weight:600; }
.flash-ok { background:var(--st-deal-sf); color:var(--good); }
.flash-err { background:var(--st-rej-sf); color:var(--bad); }

/* ── Легаси-бейджи (канбан/письма) ─────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.14rem .55rem; border-radius:999px;
    font-size:.78rem; font-weight:650; white-space:nowrap;
    background:var(--st-new-sf); color:var(--st-new); }
.badge::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:currentColor; }
.b-new{color:var(--st-new);background:var(--st-new-sf);} .b-work{color:var(--st-work);background:var(--st-work-sf);}
.b-reply{color:var(--st-reply);background:var(--st-reply-sf);} .b-noreply{color:var(--st-new);background:var(--st-new-sf);}
.b-meeting{color:var(--st-meet);background:var(--st-meet-sf);} .b-proposal{color:var(--st-prop);background:var(--st-prop-sf);}
.b-deal{color:var(--st-deal);background:var(--st-deal-sf);} .b-reject{color:var(--st-rej);background:var(--st-rej-sf);}
.b-term{color:var(--st-prop);background:var(--st-prop-sf);}

/* ── Kanban ────────────────────────────────────────────────────────────── */
.kanban { display:flex; gap:.6rem; overflow-x:auto; padding-bottom:1rem; }
.kanban .col { min-width:250px; flex:0 0 250px; background:var(--surface-2);
    border:1px solid var(--border); border-radius:var(--r); padding:.5rem; display:flex; flex-direction:column; gap:.4rem; }
.kanban .col h6 { margin:.2rem .2rem .4rem; font-size:.85rem; display:flex; align-items:center;
    justify-content:space-between; color:var(--ink); }
.kanban .col .kb-count { font-size:.72rem; font-weight:700; color:var(--ink-3); background:var(--surface);
    border:1px solid var(--border); border-radius:999px; padding:1px 8px; min-width:22px; text-align:center; }
.kanban .card { background:var(--surface); border-radius:8px; padding:.5rem .6rem;
    box-shadow:var(--shadow); cursor:grab; font-size:.82rem; overflow:visible;
    border-left:3px solid var(--border); transition:box-shadow .12s, transform .12s; }
.kanban .card:hover { box-shadow:0 4px 14px rgba(15,23,42,.12); transform:translateY(-1px); }
.kanban .card .nm { font-weight:650; display:block; color:var(--ink); text-decoration:none; }
.kanban .card .sub { opacity:.65; font-size:.75rem; }
.kanban .col.drag-over { outline:2px dashed var(--accent); }
.kb-empty { text-align:center; color:var(--ink-3); font-size:.75rem; padding:1.1rem .5rem;
    border:1px dashed var(--border); border-radius:8px; opacity:.7; }

/* ── Пустые состояния ──────────────────────────────────────────────────── */
.empty { text-align:center; padding:2.6rem 1rem; }
.empty .ic { font-size:2.4rem; line-height:1; display:block; margin-bottom:.6rem; }
.empty .ttl { font-weight:700; color:var(--ink); font-size:1rem; }
.empty .sub { color:var(--ink-3); font-size:.85rem; margin-top:.25rem; }
.empty a { color:var(--accent); }

/* ── Письмо ────────────────────────────────────────────────────────────── */
.letter-box { white-space:pre-wrap; background:var(--surface-2); padding:1rem; border-radius:8px;
    font-size:.95rem; line-height:1.5; border:1px solid var(--border); }
textarea.letter-edit { min-height:18rem; font-family:inherit; width:100%; }
.channel-btns { display:flex; gap:.4rem; flex-wrap:wrap; }

/* ── Рабочий экран письма (вариант A): текст слева, панель справа ───────── */
.lw { position:relative; }
.lw-grid { display:grid; grid-template-columns: 1fr 300px; gap:16px; align-items:start; }
@media (max-width: 860px){ .lw-grid{ grid-template-columns:1fr; } }
.lw-main { min-width:0; }
.lw-main .letter-box { font-size:1rem; line-height:1.6; }
.lw-side { display:flex; flex-direction:column; gap:12px; }
.lw-side .card { margin:0; }
.lw-side .card > .hd { padding:10px 13px; }
.lw-side .card > .hd h2 { font-size:12.5px; }
.lw-panel { display:flex; flex-direction:column; gap:7px; }
.lw-panel form { margin:0; }
.lw-b { width:100%; justify-content:flex-start; text-align:left; }
.lw-channels { display:flex; flex-direction:column; gap:7px; margin-bottom:4px; }
.lw-hint { font-size:12px; color:var(--ink-3); margin:2px 0 6px; }
.lw-checks { display:flex; flex-direction:column; gap:5px; }
.lw-check { display:flex; align-items:center; gap:7px; font-size:13px; margin:0; cursor:pointer; }
.lw-check input { margin:0; }
.lw-copysrc { position:absolute; left:-9999px; width:1px; height:1px; }
.lw-spin { display:none; align-items:center; gap:7px; color:var(--accent-ink); font-weight:650;
    font-size:13px; padding:6px 0; }
.lw-spin.htmx-request { display:inline-flex; }

/* ── Список писем во вкладке «Письма» ──────────────────────────────────── */
.lt-gen { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.lt-gen form { margin:0; }
.lt-list { display:flex; flex-direction:column; gap:10px; }
.lt-item { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.lt-item.open { border-color:var(--border-2); }
.lt-sum { display:flex; align-items:center; gap:8px; padding:11px 14px; font-size:13.5px; }
.lt-sum-link { text-decoration:none; color:var(--ink); cursor:pointer; }
.lt-sum-link:hover { background:var(--surface-2); }
.lt-sum-open { background:var(--surface-2); border-bottom:1px solid var(--border); }
.lt-open-hint { margin-left:auto; color:var(--ink-3); font-size:12px; }
.lt-item.open > .lw, .lt-item .lw { padding:14px; }
.kv { display:grid; grid-template-columns:11rem 1fr; gap:.25rem .5rem; margin:.5rem 0; font-size:.92rem; }
.kv dt { color:var(--ink-3); } .kv dd { margin:0; word-break:break-word; }
.bar-row { display:grid; grid-template-columns:9rem 1fr 3rem; gap:.5rem; align-items:center; margin:.15rem 0; font-size:.85rem; }
.bar { background:var(--accent); height:1rem; border-radius:.2rem; min-width:2px; }
.filters { display:flex; gap:.5rem; flex-wrap:wrap; align-items:flex-end; margin:0 0 1rem; }
.filters label { font-size:.75rem; margin:0; color:var(--ink-2); }
.filters select, .filters input { margin:0; padding:.35rem .5rem; }

/* ── Тёмная тема: форм-контролы (Pico не сбрасывает appearance при forced-теме) ── */
[data-theme=dark] input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=color]),
[data-theme=dark] select, [data-theme=dark] textarea {
    -webkit-appearance:none; appearance:none;
    background-color:#1b2233; color:#e7ecf5; border-color:#303a50;
}
[data-theme=dark] select {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2368748d' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right .6rem center; padding-right:1.8rem;
}
[data-theme=dark] input::placeholder, [data-theme=dark] textarea::placeholder { color:#68748d; opacity:1; }

/* Мобильно: меню сверху лентой */
@media (max-width: 720px){
    .app { grid-template-columns:1fr; }
    .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; }
    .side .spacer { flex-basis:0; } .kpis{ grid-template-columns:repeat(2,1fr); }
}

/* ══ Функциональные улучшения (спринт «внедрить всё») ═══════════════════════ */

/* #8 Inline-редактирование полей карточки */
.fld.editable { cursor:pointer; position:relative; border-radius:6px; margin:0 -6px; padding:7px 6px; }
.fld.editable:hover { background:var(--surface); }
.fld.editable .edp { position:absolute; right:6px; top:8px; font-size:11px; color:var(--ink-3);
    opacity:0; transition:opacity .12s; }
.fld.editable:hover .edp { opacity:.8; }
.fld.editing { gap:5px; padding:8px 6px; background:var(--surface); border-radius:6px; margin:0 -6px; }
.fld.editing input, .fld.editing textarea { margin:0; font-size:13px; padding:6px 8px; }
.fld.editing .edbtns { display:flex; gap:.4rem; }

/* #17 Peek-панель лида (боковой dialog) */
dialog.peek { border:0; border-radius:14px 0 0 14px; padding:0; margin:0 0 0 auto; height:100vh;
    max-height:100vh; width:min(440px,92vw); background:var(--surface); color:var(--ink);
    box-shadow:-16px 0 48px rgba(15,23,42,.28); }
dialog.peek::backdrop { background:rgba(10,15,25,.42); backdrop-filter:blur(2px); }
.peek-hd { display:flex; align-items:flex-start; gap:10px; padding:20px 22px 14px; border-bottom:1px solid var(--border); }
.peek-hd .peek-nm { font-weight:750; font-size:16px; letter-spacing:-.01em; }
.peek-hd .peek-sub { color:var(--ink-3); font-size:12px; margin-top:2px; }
.peek-hd .pill { margin-left:auto; }
.peek-body { padding:14px 22px; display:flex; flex-direction:column; gap:2px; }
.peek-ft { padding:14px 22px; border-top:1px solid var(--border); display:flex; gap:.5rem; }

/* #19 Командная палитра (Cmd/Ctrl+K) */
#palette { position:fixed; inset:0; z-index:100; display:none; }
#palette.show { display:block; }
#palette .pal-back { position:absolute; inset:0; background:rgba(10,15,25,.44); backdrop-filter:blur(2px); }
#palette .pal-win { position:relative; margin:10vh auto 0; width:min(600px,92vw); background:var(--surface);
    border:1px solid var(--border); border-radius:14px; box-shadow:0 24px 64px rgba(15,23,42,.32); overflow:hidden; }
.pal-in { width:100%; border:0; border-bottom:1px solid var(--border); margin:0; padding:16px 18px;
    font-size:16px; background:var(--surface); color:var(--ink); outline:none; }
.pal-list { max-height:52vh; overflow-y:auto; padding:6px; }
.pal-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; cursor:pointer; }
.pal-item.on { background:var(--accent-sf); }
.pal-ic { width:20px; text-align:center; color:var(--ink-3); }
.pal-t { font-weight:600; font-size:14px; }
.pal-sub { margin-left:auto; font-size:11px; color:var(--ink-3); }
.pal-empty { padding:18px; text-align:center; color:var(--ink-3); font-size:13px; }
.palette-hint .kbd { font-size:10px; }

/* #10 Липкий футер массовых действий */
#bulkbar { position:fixed; left:calc(232px + 24px); right:24px; bottom:-80px; z-index:40;
    display:flex; align-items:center; gap:.6rem; padding:10px 14px; background:var(--surface);
    border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.22);
    transition:bottom .18s ease; }
#bulkbar.show { bottom:18px; }
#bulkbar .bb-count { font-weight:650; font-size:13px; color:var(--ink-2); }
#bulkbar select { margin:0; max-width:280px; padding:.4rem .6rem; }
.chkcell { width:34px; text-align:center; }
.rowchk, #chkall { cursor:pointer; }
.peekbtn { border:0; background:none; cursor:pointer; font-size:13px; opacity:0; margin-left:6px;
    transition:opacity .12s; padding:0 2px; }
.tbl tbody tr:hover .peekbtn { opacity:.7; }
.peekbtn:hover { opacity:1 !important; }
@media (max-width:720px){ #bulkbar { left:12px; right:12px; } }

/* #9 Сохранённые виды */
.views { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; padding:0 0 12px; }
.view { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
    background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px 6px 3px 11px; }
.view.on { background:var(--accent-sf); border-color:var(--accent); color:var(--accent-ink); }
.view a { color:inherit; text-decoration:none; }
.view button { border:0; background:none; cursor:pointer; color:var(--ink-3); font-size:11px; padding:0 3px; }
.view button:hover { color:var(--bad); }
.view-add { border:1px dashed var(--border); background:none; cursor:pointer; border-radius:999px;
    padding:3px 11px; font-size:12px; font-weight:600; color:var(--ink-2); }
.view-add:hover { border-color:var(--accent); color:var(--accent-ink); }

/* #16 Модалка-шлюз (Сделка/Отказ) */
dialog.gate { border:0; border-radius:14px; padding:22px 24px; width:min(420px,92vw);
    background:var(--surface); color:var(--ink); box-shadow:0 24px 64px rgba(15,23,42,.32); }
dialog.gate::backdrop { background:rgba(10,15,25,.44); backdrop-filter:blur(2px); }
dialog.gate h3 { margin:0 0 14px; font-size:16px; }
dialog.gate input { margin:0; }

/* #12 Кликабельная воронка */
a.frow { text-decoration:none; color:inherit; border-radius:6px; padding:2px 4px; margin:0 -4px;
    transition:background .12s; }
a.frow:hover { background:var(--surface-2); }
a.frow:hover .fbar { filter:brightness(1.07); }