/* ============================================================
ui.css — дизайн-система CRM.
Один источник правды: токены → примитивы → анимации.
Тема переключается ТОЛЬКО переопределением токенов в html.theme-dark,
а не точечной перекраской утилит Tailwind.
Мультитенантность: бренд-цвета печатает base.html из tenancy.palette.
============================================================ */
/* ============================================================
1. ТОКЕНЫ
============================================================ */
:root {
/* бренд — значения перебиваются инлайном из base.html (палитра тенанта) */
--brand-50:#f7fee7; --brand-100:#ecfccb; --brand-500:#b4e84d;
--brand-600:#65a30d; --brand-700:#4d7c0f; --brand-900:#365314;
--accent: var(--brand-700); /* текст/иконки акцентом на светлом фоне */
--accent-solid: var(--brand-700); /* заливка primary-кнопки */
--accent-on: #ffffff; /* текст на заливке */
--accent-soft: color-mix(in srgb, var(--brand-500) 16%, transparent);
--accent-ring: color-mix(in srgb, var(--brand-500) 45%, transparent);
/* поверхности */
--bg: #f4f6f9;
--surface: #ffffff;
--surface-2: #f8fafc; /* шапка таблицы, вложенные блоки */
--surface-3: #eef1f6; /* колонка канбана, трек прогресса */
--border: #e3e8ef;
--border-strong: #cdd5e0;
/* текст */
--ink: #0f172a; /* заголовки и значения */
--ink-2: #475569; /* основной текст */
--ink-3: #7c8798; /* подписи, мета */
--ink-4: #a8b1bf; /* placeholder, прочерки */
/* семантика — единственный источник цвета для статусов и бейджей */
--ok:#059669; --ok-bg: color-mix(in srgb,#10b981 12%,transparent);
--warn:#b45309; --warn-bg: color-mix(in srgb,#f59e0b 15%,transparent);
--danger:#dc2626; --danger-bg: color-mix(in srgb,#ef4444 12%,transparent);
--info:#4f46e5; --info-bg: color-mix(in srgb,#6366f1 12%,transparent);
--muted-bg: color-mix(in srgb,var(--ink-3) 12%,transparent);
/* палитра графиков (серии, стадии воронки, типы задач) */
--c1:var(--brand-500); --c2:#2dd4bf; --c3:#818cf8;
--c4:#fbbf24; --c5:#fb7185; --c6:#38bdf8;
/* отступы (шаг 4) */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
/* радиусы */
--r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-2xl:22px; --r-full:999px;
/* тени */
--sh-1:0 1px 2px rgba(15,23,42,.05);
--sh-2:0 1px 2px rgba(15,23,42,.04), 0 8px 20px -12px rgba(15,23,42,.18);
--sh-3:0 2px 4px rgba(15,23,42,.05), 0 18px 40px -18px rgba(15,23,42,.28);
--sh-glow:none;
/* шрифты: интерфейс — гротеск (моно на кириллице шире и ломает плотные таблицы),
цифры — моно, заголовки страниц — фирменный Unbounded */
--font-ui:'IBM Plex Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-num:'IBM Plex Mono',ui-monospace,monospace;
--font-display:'Unbounded',var(--font-ui);
--dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
--ease:cubic-bezier(.22,.85,.3,1);
}
html.theme-dark {
--accent: var(--brand-500);
--accent-solid: var(--brand-500);
--accent-on: #0B0D12;
--accent-soft: color-mix(in srgb, var(--brand-500) 16%, transparent);
/* поверхности полупрозрачные — «стекло» поверх тёмного фона со свечением */
--bg: #0B0D12;
--surface: rgba(255,255,255,.038);
--surface-2: rgba(255,255,255,.06);
--surface-3: rgba(255,255,255,.025);
--border: rgba(255,255,255,.09);
--border-strong: rgba(255,255,255,.17);
--ink:#f1f5f9; --ink-2:#c3ccd8; --ink-3:#8b95a5; --ink-4:#5f6a7a;
--ok:#34d399; --ok-bg:rgba(16,185,129,.16);
--warn:#fbbf24; --warn-bg:rgba(245,158,11,.16);
--danger:#fb7185; --danger-bg:rgba(244,63,94,.16);
--info:#a5b4fc; --info-bg:rgba(99,102,241,.18);
--sh-1:0 1px 0 rgba(255,255,255,.04);
--sh-2:0 1px 0 rgba(255,255,255,.04), 0 12px 30px -14px rgba(0,0,0,.7);
--sh-3:0 1px 0 rgba(255,255,255,.06), 0 24px 56px -22px rgba(0,0,0,.85);
--sh-glow:0 0 0 1px color-mix(in srgb,var(--brand-500) 22%,transparent),
0 0 28px -6px color-mix(in srgb,var(--brand-500) 30%,transparent);
}
/* ============================================================
2. БАЗА И ТИПОГРАФИКА
============================================================ */
/* !important — Tailwind с CDN вставляет утилиты (bg-slate-100, text-slate-800
на body) уже после этого файла и иначе перебивает фон/шрифт. */
body {
font: 400 14px/1.5 var(--font-ui) !important;
color: var(--ink-2) !important;
background-color: var(--bg) !important;
-webkit-font-smoothing: antialiased;
}
html:not(.theme-dark) body {
background-image:
radial-gradient(900px 420px at 92% -8%, color-mix(in srgb,var(--brand-500) 13%,transparent), transparent 62%),
radial-gradient(760px 380px at -6% 4%, rgba(56,189,248,.07), transparent 58%) !important;
background-attachment: fixed !important;
}
html.theme-dark body {
background-image:
radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb,var(--brand-500) 10%,transparent), transparent 60%),
radial-gradient(900px 500px at 0% 0%, color-mix(in srgb,var(--brand-500) 5%,transparent), transparent 55%) !important;
background-attachment: fixed !important;
}
.t-display{font:700 30px/1.15 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.t-h1 {font:600 22px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.t-h2 {font:600 16px/1.3 var(--font-ui);color:var(--ink)}
.t-eyebrow{font:600 11px/1.4 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.t-body {font:400 14px/1.55 var(--font-ui);color:var(--ink-2)}
.t-sub {font:400 13px/1.45 var(--font-ui);color:var(--ink-3)}
.t-meta {font:500 11px/1.4 var(--font-ui);color:var(--ink-4)}
.t-link {color:var(--accent);text-decoration:none}
.t-link:hover{text-decoration:underline}
/* цифры — всегда моно с табличными знаками, чтобы колонки не «плясали» */
.num,.t-metric,.t-metric-lg,.t-metric-xl{
font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.t-metric {font-weight:600;font-size:20px;line-height:1.15}
.t-metric-lg{font-weight:700;font-size:34px;line-height:1.05}
.t-metric-xl{font-weight:700;font-size:48px;line-height:1}
.t-cur{font-size:.62em;font-weight:500;color:var(--ink-3);margin-left:.18em}
.wordmark{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}
/* ============================================================
3. КАРТОЧКИ И ПОВЕРХНОСТИ
============================================================ */
.card{
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
box-shadow:var(--sh-2);padding:var(--s5);
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.card--flush{padding:0}
.card--tight{padding:var(--s4)}
.card--accent{border-left:3px solid var(--accent)}
.card--link{display:block;text-decoration:none}
.card--link:hover{transform:translateY(-2px);box-shadow:var(--sh-3);
border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.card__title{font:600 16px/1.3 var(--font-ui);color:var(--ink);margin:0}
html.theme-dark .card{backdrop-filter:blur(10px)}
html.theme-dark .card--link:hover{box-shadow:var(--sh-3),var(--sh-glow)}
/* стеклянная карточка-шапка с брендовым свечением */
.hero{position:relative;overflow:hidden;border-radius:var(--r-2xl);
border:1px solid var(--border);box-shadow:var(--sh-2);padding:var(--s6);
background:linear-gradient(135deg,color-mix(in srgb,var(--brand-500) 12%,transparent),transparent 46%),var(--surface)}
.hero::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;
background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand-500) 55%,transparent),transparent)}
.hero__glow{position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;
pointer-events:none;filter:blur(18px);
background:radial-gradient(circle,color-mix(in srgb,var(--brand-500) 32%,transparent),transparent 68%)}
.divider{height:1px;background:var(--border);margin:var(--s4) 0;border:0}
.panel-split > * + *{border-top:1px solid var(--border)}
/* ============================================================
4. КНОПКИ
============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
height:36px;padding:0 14px;border-radius:var(--r-md);border:1px solid transparent;
font:500 13px/1 var(--font-ui);cursor:pointer;white-space:nowrap;text-decoration:none;
transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.btn[disabled],.btn.is-busy{opacity:.5;pointer-events:none}
.btn--primary{background:var(--accent-solid);color:var(--accent-on);font-weight:600}
.btn--primary:hover{filter:brightness(1.08)}
html.theme-dark .btn--primary:hover{box-shadow:var(--sh-glow)}
.btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.btn--secondary:hover{background:var(--surface-2);border-color:var(--accent)}
.btn--ghost{background:transparent;color:var(--ink-3)}
.btn--ghost:hover{background:var(--muted-bg);color:var(--ink)}
.btn--danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.btn--danger:hover{background:var(--danger-bg)}
.btn--sm{height:28px;padding:0 10px;font-size:12px;border-radius:var(--r-sm)}
.btn--lg{height:44px;padding:0 20px;font-size:14px}
.btn--icon{width:36px;padding:0}
.btn--icon.btn--sm{width:28px}
.btn--block{width:100%}
a.btn{text-decoration:none}
/* ============================================================
5. ФОРМЫ
============================================================ */
.field{display:block}
.field__label{display:block;margin-bottom:4px;font:500 12px/1.3 var(--font-ui);color:var(--ink-3)}
.field__hint{display:block;margin-top:4px;font:400 11px/1.4 var(--font-ui);color:var(--ink-4)}
.field-row{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.input,.select,.textarea{
width:100%;height:36px;padding:0 11px;background:var(--surface);color:var(--ink);
border:1px solid var(--border-strong);border-radius:var(--r-md);
font:400 13px/1 var(--font-ui);
transition:border-color var(--dur-1),box-shadow var(--dur-1),background var(--dur-1)}
.textarea{height:auto;padding:9px 11px;line-height:1.5;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--ink-4)}
.input:hover,.select:hover,.textarea:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border-strong))}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.input[readonly],.input[disabled],.select[disabled],.textarea[disabled]{
background:var(--surface-2);color:var(--ink-3);cursor:not-allowed;border-style:dashed}
.input--num{font-family:var(--font-num);text-align:right;font-variant-numeric:tabular-nums}
.input--invalid{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.input--sm,.select--sm{height:28px;font-size:12px;padding:0 8px;border-radius:var(--r-sm)}
.select{appearance:none;padding-right:28px;background-repeat:no-repeat;background-position:right 9px center;
background-image:url("data:image/svg+xml;utf8,")}
html.theme-dark .select{
background-image:url("data:image/svg+xml;utf8,")}
/* чекбокс и переключатель — нативные в тёмной теме выглядят инородно */
.check{appearance:none;width:20px;height:20px;flex:none;cursor:pointer;
border:1.5px solid var(--border-strong);border-radius:6px;background:var(--surface);
display:inline-grid;place-content:center;transition:background var(--dur-1),border-color var(--dur-1)}
.check::before{content:"";width:11px;height:11px;transform:scale(0);transition:transform var(--dur-1) var(--ease);
background:var(--accent-on);
clip-path:polygon(14% 44%,0 60%,40% 100%,100% 22%,84% 6%,38% 66%)}
.check:checked{background:var(--accent-solid);border-color:var(--accent-solid)}
.check:checked::before{transform:scale(1)}
.check:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.switch{appearance:none;width:38px;height:22px;flex:none;cursor:pointer;position:relative;
background:var(--muted-bg);border:1px solid var(--border-strong);border-radius:var(--r-full);
transition:background var(--dur-1),border-color var(--dur-1)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
background:var(--surface);box-shadow:var(--sh-1);transition:transform var(--dur-2) var(--ease)}
.switch:checked{background:var(--accent-solid);border-color:var(--accent-solid)}
.switch:checked::after{transform:translateX(16px);background:var(--accent-on)}
.switch:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
/* панель фильтров — одна на все списки */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
padding:var(--s3);margin-bottom:var(--s4);
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.filters .input,.filters .select{width:auto;min-width:120px}
.filters__search{flex:1 1 220px;min-width:180px}
.filters__spacer{margin-left:auto}
/* ============================================================
6. ТАБЛИЦЫ
============================================================ */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.table thead th{position:sticky;top:0;z-index:2;
background:var(--surface-2);color:var(--ink-3);
font:600 11px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;
text-align:left;padding:11px var(--s3);white-space:nowrap;border-bottom:1px solid var(--border)}
.table thead th a{color:inherit;text-decoration:none}
.table thead th a:hover{color:var(--ink)}
.table tbody td{padding:11px var(--s3);border-bottom:1px solid var(--border);
color:var(--ink-2);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--dur-1)}
.table tbody tr:hover{background:var(--accent-soft)}
.table tbody tr[data-href]{cursor:pointer}
.table tfoot td{background:var(--surface-2);font-weight:600;color:var(--ink);border-top:2px solid var(--border)}
.table-scroll{overflow:auto;max-height:calc(100vh - 260px)}
.cell-key{color:var(--ink);font-weight:500}
.cell-num{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.cell-num--strong{color:var(--ink);font-weight:600}
.cell-num--weak{color:var(--ink-3);font-size:12px}
.cell-pos{color:var(--ok);font-weight:600}
.cell-neg{color:var(--danger);font-weight:600}
.cell-mono{font-family:var(--font-num);font-size:12px;color:var(--ink-3)}
.cell-group{border-left:1px solid var(--border)}
.cell-actions{text-align:right;white-space:nowrap;opacity:.35;transition:opacity var(--dur-1)}
tr:hover .cell-actions,.cell-actions:focus-within{opacity:1}
.is-empty,.dash{color:var(--ink-4)}
/* строка-статус: цветная кромка слева вместо заливки фоном */
.row--ok {box-shadow:inset 3px 0 0 var(--ok)}
.row--warn {box-shadow:inset 3px 0 0 var(--warn)}
.row--danger{box-shadow:inset 3px 0 0 var(--danger)}
.row--brand {box-shadow:inset 3px 0 0 var(--accent)}
/* ============================================================
7. БЕЙДЖИ, АВАТАРЫ, ЧИПЫ
============================================================ */
.badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;
border-radius:var(--r-full);font:600 11px/1 var(--font-ui);white-space:nowrap;
background:var(--muted-bg);color:var(--ink-3)}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.badge--plain::before{display:none}
.badge--ok{background:var(--ok-bg);color:var(--ok)}
.badge--warn{background:var(--warn-bg);color:var(--warn)}
.badge--danger{background:var(--danger-bg);color:var(--danger)}
.badge--info{background:var(--info-bg);color:var(--info)}
.badge--brand{background:var(--accent-soft);color:var(--accent)}
.badge--count{min-width:18px;height:18px;padding:0 5px;justify-content:center;
background:var(--danger);color:#fff;font-weight:700}
.badge--count::before{display:none}
.badge--lg{height:24px;padding:0 10px;font-size:12px}
.avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;
background:var(--accent-soft);color:var(--accent);
display:inline-grid;place-items:center;font:600 11px var(--font-ui);text-transform:uppercase}
.avatar--sm{width:22px;height:22px;font-size:10px}
.avatar--lg{width:40px;height:40px;font-size:15px}
.avatar--xl{width:56px;height:56px;font-size:20px;border-radius:var(--r-lg)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-full);
font:600 11px/1.6 var(--font-ui);background:var(--accent-soft);color:var(--accent)}
.chip--up{background:var(--ok-bg);color:var(--ok)}
.chip--down{background:var(--danger-bg);color:var(--danger)}
.kbd{font-family:var(--font-num);font-size:11px;padding:1px 5px;border-radius:5px;
background:var(--muted-bg);color:var(--ink-3)}
.ico{width:34px;height:34px;border-radius:11px;flex:none;
display:inline-flex;align-items:center;justify-content:center;
background:var(--accent-soft);color:var(--accent)}
.ico--sm{width:26px;height:26px;border-radius:8px}
.ico svg{width:18px;height:18px}
.ico--sm svg{width:14px;height:14px}
.i{width:18px;height:18px;flex:none;stroke-width:1.7}
/* ============================================================
8. ПУСТЫЕ СОСТОЯНИЯ, МОДАЛКИ, ТОСТЫ
============================================================ */
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--s2);
padding:var(--s10) var(--s5);text-align:center}
.empty__icon{width:56px;height:56px;border-radius:var(--r-lg);display:grid;place-items:center;
background:var(--accent-soft);color:var(--accent);margin-bottom:var(--s1)}
.empty__icon svg{width:26px;height:26px}
.empty__title{font:600 15px/1.3 var(--font-ui);color:var(--ink)}
.empty__text{font:400 13px/1.5 var(--font-ui);color:var(--ink-3);max-width:42ch}
.empty__cta{margin-top:var(--s3)}
dialog.modal{border:0;padding:0;background:transparent;max-width:min(460px,92vw)}
dialog.modal::backdrop{background:rgba(2,6,12,.62);backdrop-filter:blur(2px)}
.modal__body{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);
box-shadow:var(--sh-3);padding:var(--s6);color:var(--ink-2)}
.modal__title{font:600 17px/1.3 var(--font-display);color:var(--ink);margin-bottom:var(--s2)}
.modal__actions{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s5)}
.toast{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-lg);
background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);
box-shadow:var(--sh-3);color:var(--ink);font-size:13px;text-decoration:none}
.toast--ok{border-left-color:var(--ok)}
.toast--err{border-left-color:var(--danger)}
.toast__title{font-weight:600;font-size:13px;color:var(--ink)}
.toast__text{font-size:13px;color:var(--ink-2);margin-top:2px}
/* ============================================================
9. НАВИГАЦИЯ, СЕГМЕНТЫ, ВКЛАДКИ
============================================================ */
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-lg);background:var(--muted-bg)}
.seg a,.seg button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:0;
border-radius:var(--r-md);background:transparent;cursor:pointer;text-decoration:none;
font:500 13px/1 var(--font-ui);color:var(--ink-3);
transition:background var(--dur-1),color var(--dur-1)}
.seg a:hover,.seg button:hover{color:var(--ink)}
.seg .is-active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);font-weight:600}
html.theme-dark .seg .is-active{background:var(--surface-2)}
.navbar{background:color-mix(in srgb,var(--surface) 92%,transparent);
border-bottom:1px solid var(--border);backdrop-filter:blur(10px)}
html.theme-dark .navbar{background:rgba(11,13,18,.82)}
.navtab{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-md);
font:500 13px/1 var(--font-ui);color:var(--ink-3);text-decoration:none;white-space:nowrap;
transition:background var(--dur-1),color var(--dur-1)}
.navtab:hover{background:var(--muted-bg);color:var(--ink)}
.navtab.is-active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.navtab svg{width:16px;height:16px}
.navtab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
/* --- Левый навигационный рельс (широкие экраны, ≥1024px) -----------------
На узких остаётся горизонтальная лента вкладок и гамбургер: рельс включается
только там, где ширины хватает. Он position:fixed, а отступ под него даёт
body — так центрирование контента (max-w-6xl mx-auto) работает как было. */
.rail{display:none}
@media (min-width:1024px){
.rail{position:fixed;top:0;left:0;bottom:0;z-index:30;width:var(--rail-w,232px);
display:flex;flex-direction:column;background:var(--surface);
border-right:1px solid var(--border);transition:width var(--dur-1) var(--ease)}
body.has-rail{padding-left:var(--rail-w,232px);
transition:padding-left var(--dur-1) var(--ease)}
html.rail-mini{--rail-w:68px}
}
.rail__brand{display:flex;align-items:center;gap:10px;height:56px;padding:0 14px;
flex-shrink:0;text-decoration:none;color:var(--ink);font-weight:600;overflow:hidden}
.rail__nav{flex:1;min-height:0;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px}
.rail__foot{flex-shrink:0;padding:8px;border-top:1px solid var(--border)}
.rail__item{position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;
border-radius:var(--r-md);font:500 13px/1 var(--font-ui);color:var(--ink-3);
text-decoration:none;white-space:nowrap;transition:background var(--dur-1),color var(--dur-1)}
.rail__item:hover{background:var(--muted-bg);color:var(--ink)}
.rail__item.is-active{background:var(--accent-soft);color:var(--accent);font-weight:600}
/* Метка активного раздела: короткая полоса у левого края — читается и в мини-режиме,
где подложка сжимается до квадрата и одной подсветки мало. */
.rail__item.is-active::before{content:"";position:absolute;left:-8px;top:50%;
transform:translateY(-50%);width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--accent)}
.rail__item svg{width:18px;height:18px;flex-shrink:0}
.rail__item .badge-count{margin-left:auto}
.rail__label{min-width:0;overflow:hidden;text-overflow:ellipsis}
html.rail-mini .rail__label,html.rail-mini .rail__item .badge-count{display:none}
html.rail-mini .rail__item,html.rail-mini .rail__brand{justify-content:center;padding-left:0;padding-right:0}
/* В мини-режиме подпись показывается всплывающей — иначе иконки без текста
заставляют угадывать раздел. Чистый CSS, без JS-тултипов. */
html.rail-mini .rail__item::after{content:attr(data-label);position:absolute;left:calc(100% + 8px);
top:50%;transform:translateY(-50%);padding:5px 9px;border-radius:var(--r-md);
background:var(--ink);color:var(--surface);font:500 12px/1 var(--font-ui);white-space:nowrap;
opacity:0;pointer-events:none;transition:opacity var(--dur-1);box-shadow:var(--sh-2)}
html.rail-mini .rail__item:hover::after,html.rail-mini .rail__item:focus-visible::after{opacity:1}
.rail__toggle{display:flex;align-items:center;justify-content:center;width:100%;padding:8px;
border-radius:var(--r-md);color:var(--ink-4);background:none;border:0;cursor:pointer;
transition:background var(--dur-1),color var(--dur-1)}
.rail__toggle:hover{background:var(--muted-bg);color:var(--ink-2)}
/* Шеврон смотрит туда, куда поедет рельс: влево = свернуть, вправо = развернуть. */
.rail__toggle svg{width:18px;height:18px;transform:rotate(180deg);
transition:transform var(--dur-1) var(--ease)}
html.rail-mini .rail__toggle svg{transform:none}
/* Клавиатурный фокус там, где мышью работают hover-ом: ссылки, строки-ссылки,
карточки воронки, аккордеоны, вкладки-сегменты. Ring один и тот же, чтобы
табом интерфейс читался как одно целое. */
a:focus-visible,summary:focus-visible,.seg button:focus-visible,
.kanban-card:focus-visible,[data-href]:focus-visible,
[tabindex]:focus-visible{outline:none;border-radius:var(--r-md);
box-shadow:0 0 0 3px var(--accent-ring)}
/* У box-shadow не рисуется (таблица клипует), поэтому строкам — outline. */
tr[data-href]:focus-visible{box-shadow:none;outline:2px solid var(--accent);outline-offset:-2px}
/* ============================================================
10. ГРАФИКИ И ПРОГРЕСС
============================================================ */
.ring{transform:rotate(-90deg)}
.ring__track{stroke:var(--border)}
.ring__fill{stroke:var(--accent);stroke-linecap:round;
transition:stroke-dashoffset 1.1s var(--ease)}
.bar{background:var(--surface-3);border-radius:var(--r-full);overflow:hidden}
html.theme-dark .bar{background:rgba(255,255,255,.06)}
.bar__fill{height:100%;border-radius:var(--r-full);width:0;background:var(--accent);
transition:width 1s var(--ease)}
.bar__fill--grad{background:linear-gradient(90deg,var(--brand-500),var(--brand-700))}
html.theme-dark .bar__fill--grad{background:linear-gradient(90deg,var(--brand-500),color-mix(in srgb,var(--brand-500) 45%,transparent))}
.col-bar{transform-origin:bottom;animation:uiGrow .7s var(--ease) both}
@keyframes uiGrow{from{transform:scaleY(0);opacity:.4}to{transform:scaleY(1);opacity:1}}
.spark__line{stroke-dasharray:1000;stroke-dashoffset:1000;animation:uiDraw 1.4s ease forwards}
@keyframes uiDraw{to{stroke-dashoffset:0}}
.spark__area{opacity:0;animation:uiFade .8s ease .5s forwards}
@keyframes uiFade{to{opacity:1}}
/* строка метрик: одна полоса вместо стены одинаковых плиток */
.metric-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
box-shadow:var(--sh-2);overflow:hidden}
.metric-row > *{padding:var(--s4) var(--s5);border-left:1px solid var(--border)}
.metric-row > *:first-child{border-left:0}
@media (max-width:900px){
.metric-row{grid-auto-flow:row;grid-auto-columns:auto}
.metric-row > *{border-left:0;border-top:1px solid var(--border)}
.metric-row > *:first-child{border-top:0}
}
/* ============================================================
11. АНИМАЦИИ
Только opacity/transform/stroke — композитинг на GPU, без reflow.
============================================================ */
.rise{animation:uiRise .45s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes uiRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pulse{position:relative}
.pulse::before{content:"";position:absolute;inset:-4px;border-radius:50%;
background:currentColor;opacity:.35;animation:uiPulse 2s ease-out infinite}
@keyframes uiPulse{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.6);opacity:0}}
.skel{border-radius:var(--r-sm);
background:linear-gradient(90deg,var(--surface-2) 25%,var(--muted-bg) 37%,var(--surface-2) 63%);
background-size:400% 100%;animation:uiSkel 1.3s ease infinite}
@keyframes uiSkel{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion: reduce){
.rise,.col-bar,.spark__line,.spark__area,.skel,.pulse::before{animation:none !important}
.ring__fill,.bar__fill,.card,.btn{transition:none !important}
.spark__line{stroke-dashoffset:0}
.spark__area{opacity:1}
}
/* ============================================================
12. СОВМЕСТИМОСТЬ со старой разметкой (пока не все экраны переехали)
============================================================ */
.ui-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
box-shadow:var(--sh-2);transition:border-color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2)}
.ui-value{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ui-label{font:600 11px/1.4 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
/* ============================================================
13. МЕЛКИЕ КОМПОНЕНТЫ (меню, тайлы, канбан)
============================================================ */
.menu-item{display:flex;align-items:center;gap:10px;padding:8px 12px;white-space:nowrap;
color:var(--ink-2);text-decoration:none;font-size:13px;border-radius:var(--r-sm);
background:none;border:0;width:100%;text-align:left;cursor:pointer;
transition:background var(--dur-1),color var(--dur-1)}
.menu-item:hover{background:var(--muted-bg);color:var(--ink)}
.menu-item--danger{color:var(--danger)}
.menu-item--danger:hover{background:var(--danger-bg)}
.menu-item svg{width:16px;height:16px;flex:none;color:var(--ink-3)}
.tile{position:relative;overflow:hidden}
.tile__bar{position:absolute;left:0;right:0;top:0;height:3px}
/* канбан */
.kanban-col{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s2)}
.kanban-col__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--s2);
padding:var(--s2) var(--s2) var(--s3);border-radius:var(--r-md);
background:color-mix(in srgb,var(--surface-3) 88%,transparent);backdrop-filter:blur(6px)}
.kanban-col.is-over{outline:2px dashed var(--accent);outline-offset:-3px;background:var(--accent-soft)}
.kanban-col__empty{border:1px dashed var(--border);border-radius:var(--r-md);padding:var(--s5) var(--s3);
text-align:center;font:400 12px/1.4 var(--font-ui);color:var(--ink-4)}
.kanban-col.is-over .kanban-col__empty{border-color:transparent}
.kanban-card{display:block;background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-md);padding:var(--s3);box-shadow:var(--sh-1);text-decoration:none;
cursor:grab;transition:transform var(--dur-1),box-shadow var(--dur-1),border-color var(--dur-1)}
.kanban-card:hover{transform:translateY(-1px);box-shadow:var(--sh-3);
border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.kanban-card.is-dragging{opacity:.5;transform:rotate(1.5deg) scale(.98);cursor:grabbing}
/* ============================================================
14. ЭКРАН ВХОДА
============================================================ */
.auth{max-width:none;margin:0;padding:0;min-height:100vh;display:flex}
.auth__split{display:grid;grid-template-columns:1fr;width:100%;min-height:100vh}
@media (min-width:1024px){
.auth__split{grid-template-columns:1.05fr .95fr}
.auth__split--narrow{grid-template-columns:1fr}
}
.auth__brand{display:none;position:relative;overflow:hidden;padding:var(--s10) var(--s8);
align-items:center;border-right:1px solid var(--border);
background:linear-gradient(140deg,color-mix(in srgb,var(--brand-500) 14%,transparent),transparent 52%),var(--surface-2)}
@media (min-width:1024px){.auth__brand{display:flex}}
.auth__brand-inner{position:relative;max-width:420px;margin-inline:auto}
.auth__logo{width:60px;height:60px;border-radius:var(--r-lg);object-fit:cover;display:grid;place-items:center;
box-shadow:var(--sh-2)}
.auth__logo--text{background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
color:#fff;font:700 22px var(--font-display)}
.auth__title{margin-top:var(--s5)}
.auth__lead{margin-top:var(--s3);font:400 15px/1.6 var(--font-ui);color:var(--ink-2);max-width:34ch}
.auth__points{margin-top:var(--s6);display:grid;gap:var(--s3);list-style:none;padding:0}
.auth__points li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.auth__points svg{color:var(--accent)}
.auth__form{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:var(--s4);padding:var(--s8) var(--s5)}
.auth__card{width:min(380px,100%);padding:var(--s6)}
html.theme-dark .auth__card{box-shadow:var(--sh-3),var(--sh-glow)}
.auth__card-head{margin-bottom:var(--s5)}
.auth__card-head .t-sub{margin-top:var(--s1)}
.auth__fields{display:grid;gap:var(--s4)}
.auth__foot{display:flex;align-items:center;gap:6px}
.code-input{height:52px;text-align:center;font:600 24px/1 var(--font-num);letter-spacing:.5em;
text-indent:.5em}
/* ============================================================
15. СПИСОК ДИАЛОГОВ
============================================================ */
.filters__chk{display:inline-flex;align-items:center;gap:8px;padding:0 var(--s2);
font-size:13px;color:var(--ink-2);cursor:pointer;user-select:none}
.filters__adv{flex-basis:100%;display:flex;flex-wrap:wrap;gap:var(--s2);
padding-top:var(--s3);margin-top:var(--s1);border-top:1px solid var(--border)}
.conv{list-style:none;margin:0;padding:0}
.conv-row{display:flex;align-items:center;gap:var(--s3);
padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);cursor:pointer;
border-left:3px solid transparent;transition:background var(--dur-1)}
.conv-row:last-child{border-bottom:0}
.conv-row:hover{background:var(--surface-2)}
.conv-row--unread{border-left-color:var(--accent)}
.conv-row--awaiting{border-left-color:var(--warn)}
.conv-row--unread .conv-row__name,.conv-row--unread .conv-row__preview{color:var(--ink);font-weight:600}
.conv-row__main{flex:1;min-width:0}
.conv-row__top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.conv-row__name{font:600 14px/1.3 var(--font-ui);color:var(--ink)}
.conv-row__preview{margin-top:3px;font:400 13px/1.4 var(--font-ui);color:var(--ink-3);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-row__you{color:var(--ink-4)}
.conv-row__side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;min-width:52px}
.conv-row__time{font-size:11px;color:var(--ink-3)}
.conv-row__dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--warn)}
.conv-row__ok{width:15px;height:15px;color:var(--ok)}
.conv-row__actions{display:flex;align-items:center;gap:var(--s2);flex:none;
opacity:0;transition:opacity var(--dur-1)}
.conv-row:hover .conv-row__actions,.conv-row__actions:focus-within{opacity:1}
@media (max-width:900px){
.conv-row__actions{display:none}
.conv-row__preview{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}